@westpac/core - npm Package Compare versions

Comparing version 1.0.1 to 1.1.0

blender/recipe.js

@@ -12,6 +12,6 @@ import React from 'react';
 		{
-			heading: 'The Core Component',
-			component: () => <GEL brand={brand}>Add your GEL components inside the Core component</GEL>,
+			heading: 'Core component',
+			component: () => <GEL brand={brand}>Add your GEL components inside the Core component.</GEL>,
 		},
 	];
 }

CHANGELOG.md

 # @westpac/core
 
+## 1.1.0
+
+### Minor Changes
+
+- 44475eb5: Add titleCase helper function
+- d1c90c38: Update font demos
+- 876e36c3: Increase component styling specificity, prepend all selectors with `.GEL` parent class
+- bedde7bc: Reset focus outline styling when tabindex="-1"
+- fb727cea: Add new WBG brand font examples assets
+
 ## 1.0.1
+
 ### Patch Changes
 
 - 520c2fc4: fix distribution files

dist/core.browser.cjs.js

@@ -12,2 +12,5 @@ 'use strict';
 var react = require('react');
+var _toConsumableArray = _interopDefault(require('@babel/runtime/helpers/toConsumableArray'));
+var get = _interopDefault(require('lodash.get'));
+var set = _interopDefault(require('lodash.set'));
 var weakMemo = _interopDefault(require('@emotion/weak-memoize'));
@@ -19,3 +22,6 @@ var facepaint = _interopDefault(require('facepaint'));
 var PropTypes = _interopDefault(require('prop-types'));
+var createCache = _interopDefault(require('@emotion/cache'));
+require('core-js/features/weak-set');
 var _taggedTemplateLiteral = _interopDefault(require('@babel/runtime/helpers/taggedTemplateLiteral'));
+var classnames = _interopDefault(require('classnames'));
 
@@ -206,2 +212,88 @@ var mergeWith = function mergeWith() {
 
+/**
+ * Recursively get the paths to unique styles
+ *
+ * @param {object} base			- default component styles
+ * @param {object} modified 	- passed prop styles
+ * @param {array} diff 			- current style object path
+ *
+ * @return {array}				- nested array of paths e.g. [['key1'], ['key2'], ['level1', 'level2'], ['level1', 'level2', 'level3']]
+ */
+
+function recurseStyles(base, modified) {
+  var diff = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+
+  var curr = _toConsumableArray(diff);
+
+  Object.keys(modified).forEach(function (key) {
+    if (modified[key] instanceof Object && modified[key].constructor === Object && base[key]) {
+      var nested = recurseStyles(base[key], modified[key], [].concat(_toConsumableArray(curr), [key])).filter(function (n) {
+        return Array.isArray(n) && n[n.length - 1] !== key;
+      });
+      if (nested.length) diff.push.apply(diff, _toConsumableArray(nested));
+    } else if (modified[key] !== base[key]) {
+      diff.push([].concat(_toConsumableArray(curr), [key]));
+    }
+  });
+  return diff;
+}
+/**
+ * Generate prop styles
+ *
+ * @param {object} base 		- default component styles
+ * @param {object} modified 	- passed prop styles
+ *
+ * @return {object}					- style object
+ */
+
+
+function styleReconciler(base, modified) {
+  var diff = recurseStyles(base, modified);
+  var styles = diff.reduce(function (acc, curr) {
+    set(acc, curr, get(modified, curr));
+    return acc;
+  }, {});
+  return styles;
+}
+/**
+ * Get passed props
+ *
+ * @param {object} defaultProps		- components default props
+ * @param {object} props 			- passed props
+ *
+ * @return {array}					- unique passed props
+ */
+
+function getModifier(defaultProps, props) {
+  return Object.keys(props).filter(function (m) {
+    return props[m] !== defaultProps[m];
+  });
+}
+/**
+ * Format class name ordering for consistency i.e. className={baseClass modifierClasses}
+ *
+ * @param {string} className 	- className to format
+ *
+ * @return {string}				- formatted className
+ */
+
+var formatClassName = function formatClassName(className) {
+  var formattedName = className.split(' ');
+  formattedName.unshift(formattedName.pop());
+  return formattedName.join(' ').trim();
+};
+/**
+ * Transform given string to title case
+ *
+ * @param {string} str		- text to transform
+ *
+ * @return {string}			- text in title case
+ */
+
+var titleCase = function titleCase(str) {
+  return str.toLowerCase().split(' ').map(function (word) {
+    return word.charAt(0).toUpperCase() + word.slice(1);
+  }).join(' ');
+};
+
 /** @jsx jsx */
@@ -322,3 +414,3 @@ var BrandContext = react.createContext();
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n\t/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */\n\thtml {\n\t\tline-height: 1.15;\n\t\t-webkit-text-size-adjust: 100%;\n\t}\n\tbody {\n\t\tmargin: 0;\n\t}\n\tmain {\n\t\tdisplay: block;\n\t}\n\th1 {\n\t\tfont-size: 2em;\n\t\tmargin: 0.67em 0;\n\t}\n\thr {\n\t\tbox-sizing: content-box;\n\t\theight: 0;\n\t\toverflow: visible;\n\t}\n\tpre {\n\t\tfont-family: monospace, monospace;\n\t\tfont-size: 1em;\n\t}\n\ta {\n\t\tbackground-color: transparent;\n\t}\n\tabbr[title] {\n\t\tborder-bottom: none;\n\t\ttext-decoration: underline;\n\t\ttext-decoration: underline dotted;\n\t}\n\tb,\n\tstrong {\n\t\tfont-weight: bolder;\n\t}\n\tcode,\n\tkbd,\n\tsamp {\n\t\tfont-family: monospace, monospace;\n\t\tfont-size: 1em;\n\t}\n\tsmall {\n\t\tfont-size: 80%;\n\t}\n\tsub,\n\tsup {\n\t\tfont-size: 75%;\n\t\tline-height: 0;\n\t\tposition: relative;\n\t\tvertical-align: baseline;\n\t}\n\tsub {\n\t\tbottom: -0.25em;\n\t}\n\tsup {\n\t\ttop: -0.5em;\n\t}\n\timg {\n\t\tborder-style: none;\n\t}\n\tbutton,\n\tinput,\n\toptgroup,\n\tselect,\n\ttextarea {\n\t\tfont-family: inherit;\n\t\tfont-size: 100%;\n\t\tline-height: 1.15;\n\t\tmargin: 0;\n\t}\n\tbutton,\n\tinput {\n\t\toverflow: visible;\n\t}\n\tbutton,\n\tselect {\n\t\ttext-transform: none;\n\t}\n\t[type='button'],\n\t[type='reset'],\n\t[type='submit'],\n\tbutton {\n\t\t-webkit-appearance: button;\n\t}\n\t[type='button']::-moz-focus-inner,\n\t[type='reset']::-moz-focus-inner,\n\t[type='submit']::-moz-focus-inner,\n\tbutton::-moz-focus-inner {\n\t\tborder-style: none;\n\t\tpadding: 0;\n\t}\n\t[type='button']:-moz-focusring,\n\t[type='reset']:-moz-focusring,\n\t[type='submit']:-moz-focusring,\n\tbutton:-moz-focusring {\n\t\toutline: 1px dotted ButtonText;\n\t}\n\tfieldset {\n\t\tpadding: 0.35em 0.75em 0.625em;\n\t}\n\tlegend {\n\t\tbox-sizing: border-box;\n\t\tcolor: inherit;\n\t\tdisplay: table;\n\t\tmax-width: 100%;\n\t\tpadding: 0;\n\t\twhite-space: normal;\n\t}\n\tprogress {\n\t\tvertical-align: baseline;\n\t}\n\ttextarea {\n\t\toverflow: auto;\n\t}\n\t[type='checkbox'],\n\t[type='radio'] {\n\t\tbox-sizing: border-box;\n\t\tpadding: 0;\n\t}\n\t[type='number']::-webkit-inner-spin-button,\n\t[type='number']::-webkit-outer-spin-button {\n\t\theight: auto;\n\t}\n\t[type='search'] {\n\t\t-webkit-appearance: textfield;\n\t\toutline-offset: -2px;\n\t}\n\t[type='search']::-webkit-search-decoration {\n\t\t-webkit-appearance: none;\n\t}\n\t::-webkit-file-upload-button {\n\t\t-webkit-appearance: button;\n\t\tfont: inherit;\n\t}\n\tdetails {\n\t\tdisplay: block;\n\t}\n\tsummary {\n\t\tdisplay: list-item;\n\t}\n\ttemplate {\n\t\tdisplay: none;\n\t}\n\t[hidden] {\n\t\tdisplay: none;\n\t}\n"]);
+  var data = _taggedTemplateLiteral(["\n\tmain {\n\t\tdisplay: block;\n\t}\n\th1 {\n\t\tfont-size: 2em;\n\t\tmargin: 0.67em 0;\n\t}\n\thr {\n\t\tbox-sizing: content-box;\n\t\theight: 0;\n\t\toverflow: visible;\n\t}\n\tpre {\n\t\tfont-family: monospace, monospace;\n\t\tfont-size: 1em;\n\t}\n\ta {\n\t\tbackground-color: transparent;\n\t}\n\tabbr[title] {\n\t\tborder-bottom: none;\n\t\ttext-decoration: underline;\n\t\ttext-decoration: underline dotted;\n\t}\n\tb,\n\tstrong {\n\t\tfont-weight: bolder;\n\t}\n\tcode,\n\tkbd,\n\tsamp {\n\t\tfont-family: monospace, monospace;\n\t\tfont-size: 1em;\n\t}\n\tsmall {\n\t\tfont-size: 80%;\n\t}\n\tsub,\n\tsup {\n\t\tfont-size: 75%;\n\t\tline-height: 0;\n\t\tposition: relative;\n\t\tvertical-align: baseline;\n\t}\n\tsub {\n\t\tbottom: -0.25em;\n\t}\n\tsup {\n\t\ttop: -0.5em;\n\t}\n\timg {\n\t\tborder-style: none;\n\t}\n\tbutton,\n\tinput,\n\toptgroup,\n\tselect,\n\ttextarea {\n\t\tfont-family: inherit;\n\t\tfont-size: 100%;\n\t\tline-height: 1.15;\n\t\tmargin: 0;\n\t}\n\tbutton,\n\tinput {\n\t\toverflow: visible;\n\t}\n\tbutton,\n\tselect {\n\t\ttext-transform: none;\n\t}\n\tbutton,\n\t[type='button'],\n\t[type='reset'],\n\t[type='submit'] {\n\t\t-webkit-appearance: button;\n\t}\n\tbutton::-moz-focus-inner,\n\t[type='button']::-moz-focus-inner,\n\t[type='reset']::-moz-focus-inner,\n\t[type='submit']::-moz-focus-inner {\n\t\tborder-style: none;\n\t\tpadding: 0;\n\t}\n\tbutton:-moz-focusring,\n\t[type='button']:-moz-focusring,\n\t[type='reset']:-moz-focusring,\n\t[type='submit']:-moz-focusring {\n\t\toutline: 1px dotted ButtonText;\n\t}\n\tfieldset {\n\t\tpadding: 0.35em 0.75em 0.625em;\n\t}\n\tlegend {\n\t\tbox-sizing: border-box;\n\t\tcolor: inherit;\n\t\tdisplay: table;\n\t\tmax-width: 100%;\n\t\tpadding: 0;\n\t\twhite-space: normal;\n\t}\n\tprogress {\n\t\tvertical-align: baseline;\n\t}\n\ttextarea {\n\t\toverflow: auto;\n\t}\n\t[type='checkbox'],\n\t[type='radio'] {\n\t\tbox-sizing: border-box;\n\t\tpadding: 0;\n\t}\n\t[type='number']::-webkit-inner-spin-button,\n\t[type='number']::-webkit-outer-spin-button {\n\t\theight: auto;\n\t}\n\t[type='search'] {\n\t\t-webkit-appearance: textfield;\n\t\toutline-offset: -2px;\n\t}\n\t[type='search']::-webkit-search-decoration {\n\t\t-webkit-appearance: none;\n\t}\n\t::-webkit-file-upload-button {\n\t\t-webkit-appearance: button;\n\t\tfont: inherit;\n\t}\n\tdetails {\n\t\tdisplay: block;\n\t}\n\tsummary {\n\t\tdisplay: list-item;\n\t}\n\ttemplate {\n\t\tdisplay: none;\n\t}\n\t[hidden] {\n\t\tdisplay: none;\n\t}\n"]);
 
@@ -331,2 +423,14 @@ _templateObject = function _templateObject() {
 }
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Note: The following Normalize styles were not included, they would apply at a document level (outside of our GEL wrapper)...
+html {
+	line-height: 1.15;
+	-webkit-text-size-adjust: 100%;
+}
+body {
+	margin: 0;
+} 
+*/
+
 var reset = core.css(_templateObject());
@@ -337,6 +441,54 @@
 function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var Core = function Core(_ref) {
-  var noReset = _ref.noReset,
-      children = _ref.children;
+var coreLabel = 'core';
+var seen = new WeakSet();
 
+var AddRootClass = function AddRootClass(_ref) {
+  var children = _ref.children;
+
+  var _useState = react.useState(function () {
+    return createCache({
+      stylisPlugins: [// Prepend all CSS selectors that are children of the GEL wrapper (Core) with `.GEL` parent class to increase specificity
+      function (context, content, selectors, parents, line, column, length, id) {
+        if (context !== 2 || id === 107 || //@keyframes
+        seen.has(selectors) || seen.has(parents) || !selectors.length || selectors[0] === '') {
+          return;
+        }
+
+        seen.add(selectors); // Prepend selector with `.GEL `
+
+        for (var i = 0; i < selectors.length; i++) {
+          /**
+           * Don't process the following...
+           * 1. `html` or `body` selectors, possible if styles are passed to Emotion's `<Global />` component within the `<GEL>` wrapper (e.g. <GEL><Global styles={{ 'body': { margin: 0 } }} /></GEL>)
+           * 2. Core components (we don't want to increase Core's specificity)
+           * 3. Selectors already prepended with `.GEL `
+           */
+          if (!selectors[i].includes('html')
+          /* 1 */
+          && !selectors[i].includes('body')
+          /* 1 */
+          && !selectors[i].includes("-".concat(coreLabel))
+          /* 2 */
+          && !selectors[i].includes('.GEL ')
+          /* 3 */
+          ) {
+              selectors[i] = ".GEL ".concat(selectors[i]);
+            }
+        }
+      }]
+    });
+  }),
+      _useState2 = _slicedToArray(_useState, 1),
+      cache = _useState2[0];
+
+  return core.jsx(core.CacheProvider, {
+    value: cache
+  }, children);
+};
+
+var Core = function Core(_ref2) {
+  var noReset = _ref2.noReset,
+      noScope = _ref2.noScope,
+      children = _ref2.children;
+
   var _useBrand = useBrand(),
@@ -348,4 +500,5 @@ COLORS = _useBrand.COLORS,
   return core.jsx("div", {
+    className: "GEL",
     css: _objectSpread$1(_objectSpread$1({
-      label: 'Core',
+      label: coreLabel,
       lineHeight: 1.428571429,
@@ -355,10 +508,14 @@ color: COLORS.text,
     }, TYPE.bodyFont[400]), {}, {
-      '& *:focus': _objectSpread$1({}, PACKS.focus),
-      '& [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring, button:-moz-focusring': _objectSpread$1({}, PACKS.focus),
-      '& *::selection': {
+      '*:focus': _objectSpread$1({}, PACKS.focus),
+      // Also apply to the following selectors to increase specificity (against normalize reset)
+      'button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring': _objectSpread$1({}, PACKS.focus),
+      '[tabindex="-1"]:focus': {
+        outline: '0 !important'
+      },
+      '& ::selection': {
         backgroundColor: COLORS.tints.primary20
       },
-      '&': _objectSpread$1({}, noReset ? null : reset)
+      '&': _objectSpread$1({}, !noReset && reset)
     })
-  }, children);
+  }, noScope ? children : core.jsx(AddRootClass, null, children));
 };
@@ -369,4 +526,5 @@
       noReset = _ref.noReset,
+      noScope = _ref.noScope,
       children = _ref.children,
-      props = _objectWithoutProperties(_ref, ["brand", "noReset", "children"]);
+      props = _objectWithoutProperties(_ref, ["brand", "noReset", "noScope", "children"]);
 
@@ -377,3 +535,4 @@ useFocus();
   }, props), core.jsx(Core, {
-    noReset: noReset
+    noReset: noReset,
+    noScope: noScope
   }, children));
@@ -383,2 +542,3 @@ };
   noReset: PropTypes.bool,
+  noScope: PropTypes.bool,
   brand: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
@@ -417,2 +577,3 @@ };
 });
+exports.classNames = classnames;
 exports.BrandContext = BrandContext;
@@ -423,5 +584,9 @@ exports.GEL = GEL;
 exports.devWarning = devWarning;
+exports.formatClassName = formatClassName;
 exports.getLabel = getLabel;
+exports.getModifier = getModifier;
 exports.mergeWith = mergeWith;
 exports.overrideReconciler = overrideReconciler;
+exports.styleReconciler = styleReconciler;
+exports.titleCase = titleCase;
 exports.useBrand = useBrand;
@@ -428,0 +593,0 @@ exports.useFonts = useFonts;

dist/core.browser.esm.js

@@ -1,2 +0,2 @@
-import { css, jsx } from '@emotion/core';
+import { css, jsx, CacheProvider } from '@emotion/core';
 export { ClassNames, Global, css, jsx, keyframes } from '@emotion/core';
@@ -7,2 +7,5 @@ import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
 import { useRef, useState, createContext, useContext } from 'react';
+import _toConsumableArray from '@babel/runtime/helpers/esm/toConsumableArray';
+import get from 'lodash.get';
+import set from 'lodash.set';
 import weakMemo from '@emotion/weak-memoize';
@@ -14,3 +17,6 @@ import facepaint from 'facepaint';
 import PropTypes from 'prop-types';
+import createCache from '@emotion/cache';
+import 'core-js/features/weak-set';
 import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
+export { default as classNames } from 'classnames';
 
@@ -201,2 +207,88 @@ var mergeWith = function mergeWith() {
 
+/**
+ * Recursively get the paths to unique styles
+ *
+ * @param {object} base			- default component styles
+ * @param {object} modified 	- passed prop styles
+ * @param {array} diff 			- current style object path
+ *
+ * @return {array}				- nested array of paths e.g. [['key1'], ['key2'], ['level1', 'level2'], ['level1', 'level2', 'level3']]
+ */
+
+function recurseStyles(base, modified) {
+  var diff = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+
+  var curr = _toConsumableArray(diff);
+
+  Object.keys(modified).forEach(function (key) {
+    if (modified[key] instanceof Object && modified[key].constructor === Object && base[key]) {
+      var nested = recurseStyles(base[key], modified[key], [].concat(_toConsumableArray(curr), [key])).filter(function (n) {
+        return Array.isArray(n) && n[n.length - 1] !== key;
+      });
+      if (nested.length) diff.push.apply(diff, _toConsumableArray(nested));
+    } else if (modified[key] !== base[key]) {
+      diff.push([].concat(_toConsumableArray(curr), [key]));
+    }
+  });
+  return diff;
+}
+/**
+ * Generate prop styles
+ *
+ * @param {object} base 		- default component styles
+ * @param {object} modified 	- passed prop styles
+ *
+ * @return {object}					- style object
+ */
+
+
+function styleReconciler(base, modified) {
+  var diff = recurseStyles(base, modified);
+  var styles = diff.reduce(function (acc, curr) {
+    set(acc, curr, get(modified, curr));
+    return acc;
+  }, {});
+  return styles;
+}
+/**
+ * Get passed props
+ *
+ * @param {object} defaultProps		- components default props
+ * @param {object} props 			- passed props
+ *
+ * @return {array}					- unique passed props
+ */
+
+function getModifier(defaultProps, props) {
+  return Object.keys(props).filter(function (m) {
+    return props[m] !== defaultProps[m];
+  });
+}
+/**
+ * Format class name ordering for consistency i.e. className={baseClass modifierClasses}
+ *
+ * @param {string} className 	- className to format
+ *
+ * @return {string}				- formatted className
+ */
+
+var formatClassName = function formatClassName(className) {
+  var formattedName = className.split(' ');
+  formattedName.unshift(formattedName.pop());
+  return formattedName.join(' ').trim();
+};
+/**
+ * Transform given string to title case
+ *
+ * @param {string} str		- text to transform
+ *
+ * @return {string}			- text in title case
+ */
+
+var titleCase = function titleCase(str) {
+  return str.toLowerCase().split(' ').map(function (word) {
+    return word.charAt(0).toUpperCase() + word.slice(1);
+  }).join(' ');
+};
+
 /** @jsx jsx */
@@ -317,3 +409,3 @@ var BrandContext = createContext();
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n\t/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */\n\thtml {\n\t\tline-height: 1.15;\n\t\t-webkit-text-size-adjust: 100%;\n\t}\n\tbody {\n\t\tmargin: 0;\n\t}\n\tmain {\n\t\tdisplay: block;\n\t}\n\th1 {\n\t\tfont-size: 2em;\n\t\tmargin: 0.67em 0;\n\t}\n\thr {\n\t\tbox-sizing: content-box;\n\t\theight: 0;\n\t\toverflow: visible;\n\t}\n\tpre {\n\t\tfont-family: monospace, monospace;\n\t\tfont-size: 1em;\n\t}\n\ta {\n\t\tbackground-color: transparent;\n\t}\n\tabbr[title] {\n\t\tborder-bottom: none;\n\t\ttext-decoration: underline;\n\t\ttext-decoration: underline dotted;\n\t}\n\tb,\n\tstrong {\n\t\tfont-weight: bolder;\n\t}\n\tcode,\n\tkbd,\n\tsamp {\n\t\tfont-family: monospace, monospace;\n\t\tfont-size: 1em;\n\t}\n\tsmall {\n\t\tfont-size: 80%;\n\t}\n\tsub,\n\tsup {\n\t\tfont-size: 75%;\n\t\tline-height: 0;\n\t\tposition: relative;\n\t\tvertical-align: baseline;\n\t}\n\tsub {\n\t\tbottom: -0.25em;\n\t}\n\tsup {\n\t\ttop: -0.5em;\n\t}\n\timg {\n\t\tborder-style: none;\n\t}\n\tbutton,\n\tinput,\n\toptgroup,\n\tselect,\n\ttextarea {\n\t\tfont-family: inherit;\n\t\tfont-size: 100%;\n\t\tline-height: 1.15;\n\t\tmargin: 0;\n\t}\n\tbutton,\n\tinput {\n\t\toverflow: visible;\n\t}\n\tbutton,\n\tselect {\n\t\ttext-transform: none;\n\t}\n\t[type='button'],\n\t[type='reset'],\n\t[type='submit'],\n\tbutton {\n\t\t-webkit-appearance: button;\n\t}\n\t[type='button']::-moz-focus-inner,\n\t[type='reset']::-moz-focus-inner,\n\t[type='submit']::-moz-focus-inner,\n\tbutton::-moz-focus-inner {\n\t\tborder-style: none;\n\t\tpadding: 0;\n\t}\n\t[type='button']:-moz-focusring,\n\t[type='reset']:-moz-focusring,\n\t[type='submit']:-moz-focusring,\n\tbutton:-moz-focusring {\n\t\toutline: 1px dotted ButtonText;\n\t}\n\tfieldset {\n\t\tpadding: 0.35em 0.75em 0.625em;\n\t}\n\tlegend {\n\t\tbox-sizing: border-box;\n\t\tcolor: inherit;\n\t\tdisplay: table;\n\t\tmax-width: 100%;\n\t\tpadding: 0;\n\t\twhite-space: normal;\n\t}\n\tprogress {\n\t\tvertical-align: baseline;\n\t}\n\ttextarea {\n\t\toverflow: auto;\n\t}\n\t[type='checkbox'],\n\t[type='radio'] {\n\t\tbox-sizing: border-box;\n\t\tpadding: 0;\n\t}\n\t[type='number']::-webkit-inner-spin-button,\n\t[type='number']::-webkit-outer-spin-button {\n\t\theight: auto;\n\t}\n\t[type='search'] {\n\t\t-webkit-appearance: textfield;\n\t\toutline-offset: -2px;\n\t}\n\t[type='search']::-webkit-search-decoration {\n\t\t-webkit-appearance: none;\n\t}\n\t::-webkit-file-upload-button {\n\t\t-webkit-appearance: button;\n\t\tfont: inherit;\n\t}\n\tdetails {\n\t\tdisplay: block;\n\t}\n\tsummary {\n\t\tdisplay: list-item;\n\t}\n\ttemplate {\n\t\tdisplay: none;\n\t}\n\t[hidden] {\n\t\tdisplay: none;\n\t}\n"]);
+  var data = _taggedTemplateLiteral(["\n\tmain {\n\t\tdisplay: block;\n\t}\n\th1 {\n\t\tfont-size: 2em;\n\t\tmargin: 0.67em 0;\n\t}\n\thr {\n\t\tbox-sizing: content-box;\n\t\theight: 0;\n\t\toverflow: visible;\n\t}\n\tpre {\n\t\tfont-family: monospace, monospace;\n\t\tfont-size: 1em;\n\t}\n\ta {\n\t\tbackground-color: transparent;\n\t}\n\tabbr[title] {\n\t\tborder-bottom: none;\n\t\ttext-decoration: underline;\n\t\ttext-decoration: underline dotted;\n\t}\n\tb,\n\tstrong {\n\t\tfont-weight: bolder;\n\t}\n\tcode,\n\tkbd,\n\tsamp {\n\t\tfont-family: monospace, monospace;\n\t\tfont-size: 1em;\n\t}\n\tsmall {\n\t\tfont-size: 80%;\n\t}\n\tsub,\n\tsup {\n\t\tfont-size: 75%;\n\t\tline-height: 0;\n\t\tposition: relative;\n\t\tvertical-align: baseline;\n\t}\n\tsub {\n\t\tbottom: -0.25em;\n\t}\n\tsup {\n\t\ttop: -0.5em;\n\t}\n\timg {\n\t\tborder-style: none;\n\t}\n\tbutton,\n\tinput,\n\toptgroup,\n\tselect,\n\ttextarea {\n\t\tfont-family: inherit;\n\t\tfont-size: 100%;\n\t\tline-height: 1.15;\n\t\tmargin: 0;\n\t}\n\tbutton,\n\tinput {\n\t\toverflow: visible;\n\t}\n\tbutton,\n\tselect {\n\t\ttext-transform: none;\n\t}\n\tbutton,\n\t[type='button'],\n\t[type='reset'],\n\t[type='submit'] {\n\t\t-webkit-appearance: button;\n\t}\n\tbutton::-moz-focus-inner,\n\t[type='button']::-moz-focus-inner,\n\t[type='reset']::-moz-focus-inner,\n\t[type='submit']::-moz-focus-inner {\n\t\tborder-style: none;\n\t\tpadding: 0;\n\t}\n\tbutton:-moz-focusring,\n\t[type='button']:-moz-focusring,\n\t[type='reset']:-moz-focusring,\n\t[type='submit']:-moz-focusring {\n\t\toutline: 1px dotted ButtonText;\n\t}\n\tfieldset {\n\t\tpadding: 0.35em 0.75em 0.625em;\n\t}\n\tlegend {\n\t\tbox-sizing: border-box;\n\t\tcolor: inherit;\n\t\tdisplay: table;\n\t\tmax-width: 100%;\n\t\tpadding: 0;\n\t\twhite-space: normal;\n\t}\n\tprogress {\n\t\tvertical-align: baseline;\n\t}\n\ttextarea {\n\t\toverflow: auto;\n\t}\n\t[type='checkbox'],\n\t[type='radio'] {\n\t\tbox-sizing: border-box;\n\t\tpadding: 0;\n\t}\n\t[type='number']::-webkit-inner-spin-button,\n\t[type='number']::-webkit-outer-spin-button {\n\t\theight: auto;\n\t}\n\t[type='search'] {\n\t\t-webkit-appearance: textfield;\n\t\toutline-offset: -2px;\n\t}\n\t[type='search']::-webkit-search-decoration {\n\t\t-webkit-appearance: none;\n\t}\n\t::-webkit-file-upload-button {\n\t\t-webkit-appearance: button;\n\t\tfont: inherit;\n\t}\n\tdetails {\n\t\tdisplay: block;\n\t}\n\tsummary {\n\t\tdisplay: list-item;\n\t}\n\ttemplate {\n\t\tdisplay: none;\n\t}\n\t[hidden] {\n\t\tdisplay: none;\n\t}\n"]);
 
@@ -326,2 +418,14 @@ _templateObject = function _templateObject() {
 }
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Note: The following Normalize styles were not included, they would apply at a document level (outside of our GEL wrapper)...
+html {
+	line-height: 1.15;
+	-webkit-text-size-adjust: 100%;
+}
+body {
+	margin: 0;
+} 
+*/
+
 var reset = css(_templateObject());
@@ -332,6 +436,54 @@
 function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var Core = function Core(_ref) {
-  var noReset = _ref.noReset,
-      children = _ref.children;
+var coreLabel = 'core';
+var seen = new WeakSet();
 
+var AddRootClass = function AddRootClass(_ref) {
+  var children = _ref.children;
+
+  var _useState = useState(function () {
+    return createCache({
+      stylisPlugins: [// Prepend all CSS selectors that are children of the GEL wrapper (Core) with `.GEL` parent class to increase specificity
+      function (context, content, selectors, parents, line, column, length, id) {
+        if (context !== 2 || id === 107 || //@keyframes
+        seen.has(selectors) || seen.has(parents) || !selectors.length || selectors[0] === '') {
+          return;
+        }
+
+        seen.add(selectors); // Prepend selector with `.GEL `
+
+        for (var i = 0; i < selectors.length; i++) {
+          /**
+           * Don't process the following...
+           * 1. `html` or `body` selectors, possible if styles are passed to Emotion's `<Global />` component within the `<GEL>` wrapper (e.g. <GEL><Global styles={{ 'body': { margin: 0 } }} /></GEL>)
+           * 2. Core components (we don't want to increase Core's specificity)
+           * 3. Selectors already prepended with `.GEL `
+           */
+          if (!selectors[i].includes('html')
+          /* 1 */
+          && !selectors[i].includes('body')
+          /* 1 */
+          && !selectors[i].includes("-".concat(coreLabel))
+          /* 2 */
+          && !selectors[i].includes('.GEL ')
+          /* 3 */
+          ) {
+              selectors[i] = ".GEL ".concat(selectors[i]);
+            }
+        }
+      }]
+    });
+  }),
+      _useState2 = _slicedToArray(_useState, 1),
+      cache = _useState2[0];
+
+  return jsx(CacheProvider, {
+    value: cache
+  }, children);
+};
+
+var Core = function Core(_ref2) {
+  var noReset = _ref2.noReset,
+      noScope = _ref2.noScope,
+      children = _ref2.children;
+
   var _useBrand = useBrand(),
@@ -343,4 +495,5 @@ COLORS = _useBrand.COLORS,
   return jsx("div", {
+    className: "GEL",
     css: _objectSpread$1(_objectSpread$1({
-      label: 'Core',
+      label: coreLabel,
       lineHeight: 1.428571429,
@@ -350,10 +503,14 @@ color: COLORS.text,
     }, TYPE.bodyFont[400]), {}, {
-      '& *:focus': _objectSpread$1({}, PACKS.focus),
-      '& [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring, button:-moz-focusring': _objectSpread$1({}, PACKS.focus),
-      '& *::selection': {
+      '*:focus': _objectSpread$1({}, PACKS.focus),
+      // Also apply to the following selectors to increase specificity (against normalize reset)
+      'button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring': _objectSpread$1({}, PACKS.focus),
+      '[tabindex="-1"]:focus': {
+        outline: '0 !important'
+      },
+      '& ::selection': {
         backgroundColor: COLORS.tints.primary20
       },
-      '&': _objectSpread$1({}, noReset ? null : reset)
+      '&': _objectSpread$1({}, !noReset && reset)
     })
-  }, children);
+  }, noScope ? children : jsx(AddRootClass, null, children));
 };
@@ -364,4 +521,5 @@
       noReset = _ref.noReset,
+      noScope = _ref.noScope,
       children = _ref.children,
-      props = _objectWithoutProperties(_ref, ["brand", "noReset", "children"]);
+      props = _objectWithoutProperties(_ref, ["brand", "noReset", "noScope", "children"]);
 
@@ -372,3 +530,4 @@ useFocus();
   }, props), jsx(Core, {
-    noReset: noReset
+    noReset: noReset,
+    noScope: noScope
   }, children));
@@ -378,5 +537,6 @@ };
   noReset: PropTypes.bool,
+  noScope: PropTypes.bool,
   brand: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
 };
 
-export { BrandContext, GEL, asArray, cleanClassName, devWarning, getLabel, mergeWith, overrideReconciler, useBrand, useFonts, useInstanceId, useManagedState, useMediaQuery, wrapHandlers };
+export { BrandContext, GEL, asArray, cleanClassName, devWarning, formatClassName, getLabel, getModifier, mergeWith, overrideReconciler, styleReconciler, titleCase, useBrand, useFonts, useInstanceId, useManagedState, useMediaQuery, wrapHandlers };

dist/core.cjs.dev.js

@@ -12,2 +12,5 @@ 'use strict';
 var react = require('react');
+var _toConsumableArray = _interopDefault(require('@babel/runtime/helpers/toConsumableArray'));
+var get = _interopDefault(require('lodash.get'));
+var set = _interopDefault(require('lodash.set'));
 var weakMemo = _interopDefault(require('@emotion/weak-memoize'));
@@ -19,3 +22,6 @@ var facepaint = _interopDefault(require('facepaint'));
 var PropTypes = _interopDefault(require('prop-types'));
+var createCache = _interopDefault(require('@emotion/cache'));
+require('core-js/features/weak-set');
 var _taggedTemplateLiteral = _interopDefault(require('@babel/runtime/helpers/taggedTemplateLiteral'));
+var classnames = _interopDefault(require('classnames'));
 
@@ -206,2 +212,88 @@ var mergeWith = function mergeWith() {
 
+/**
+ * Recursively get the paths to unique styles
+ *
+ * @param {object} base			- default component styles
+ * @param {object} modified 	- passed prop styles
+ * @param {array} diff 			- current style object path
+ *
+ * @return {array}				- nested array of paths e.g. [['key1'], ['key2'], ['level1', 'level2'], ['level1', 'level2', 'level3']]
+ */
+
+function recurseStyles(base, modified) {
+  var diff = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+
+  var curr = _toConsumableArray(diff);
+
+  Object.keys(modified).forEach(function (key) {
+    if (modified[key] instanceof Object && modified[key].constructor === Object && base[key]) {
+      var nested = recurseStyles(base[key], modified[key], [].concat(_toConsumableArray(curr), [key])).filter(function (n) {
+        return Array.isArray(n) && n[n.length - 1] !== key;
+      });
+      if (nested.length) diff.push.apply(diff, _toConsumableArray(nested));
+    } else if (modified[key] !== base[key]) {
+      diff.push([].concat(_toConsumableArray(curr), [key]));
+    }
+  });
+  return diff;
+}
+/**
+ * Generate prop styles
+ *
+ * @param {object} base 		- default component styles
+ * @param {object} modified 	- passed prop styles
+ *
+ * @return {object}					- style object
+ */
+
+
+function styleReconciler(base, modified) {
+  var diff = recurseStyles(base, modified);
+  var styles = diff.reduce(function (acc, curr) {
+    set(acc, curr, get(modified, curr));
+    return acc;
+  }, {});
+  return styles;
+}
+/**
+ * Get passed props
+ *
+ * @param {object} defaultProps		- components default props
+ * @param {object} props 			- passed props
+ *
+ * @return {array}					- unique passed props
+ */
+
+function getModifier(defaultProps, props) {
+  return Object.keys(props).filter(function (m) {
+    return props[m] !== defaultProps[m];
+  });
+}
+/**
+ * Format class name ordering for consistency i.e. className={baseClass modifierClasses}
+ *
+ * @param {string} className 	- className to format
+ *
+ * @return {string}				- formatted className
+ */
+
+var formatClassName = function formatClassName(className) {
+  var formattedName = className.split(' ');
+  formattedName.unshift(formattedName.pop());
+  return formattedName.join(' ').trim();
+};
+/**
+ * Transform given string to title case
+ *
+ * @param {string} str		- text to transform
+ *
+ * @return {string}			- text in title case
+ */
+
+var titleCase = function titleCase(str) {
+  return str.toLowerCase().split(' ').map(function (word) {
+    return word.charAt(0).toUpperCase() + word.slice(1);
+  }).join(' ');
+};
+
 /** @jsx jsx */
@@ -329,3 +421,3 @@ var BrandContext = react.createContext();
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n\t/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */\n\thtml {\n\t\tline-height: 1.15;\n\t\t-webkit-text-size-adjust: 100%;\n\t}\n\tbody {\n\t\tmargin: 0;\n\t}\n\tmain {\n\t\tdisplay: block;\n\t}\n\th1 {\n\t\tfont-size: 2em;\n\t\tmargin: 0.67em 0;\n\t}\n\thr {\n\t\tbox-sizing: content-box;\n\t\theight: 0;\n\t\toverflow: visible;\n\t}\n\tpre {\n\t\tfont-family: monospace, monospace;\n\t\tfont-size: 1em;\n\t}\n\ta {\n\t\tbackground-color: transparent;\n\t}\n\tabbr[title] {\n\t\tborder-bottom: none;\n\t\ttext-decoration: underline;\n\t\ttext-decoration: underline dotted;\n\t}\n\tb,\n\tstrong {\n\t\tfont-weight: bolder;\n\t}\n\tcode,\n\tkbd,\n\tsamp {\n\t\tfont-family: monospace, monospace;\n\t\tfont-size: 1em;\n\t}\n\tsmall {\n\t\tfont-size: 80%;\n\t}\n\tsub,\n\tsup {\n\t\tfont-size: 75%;\n\t\tline-height: 0;\n\t\tposition: relative;\n\t\tvertical-align: baseline;\n\t}\n\tsub {\n\t\tbottom: -0.25em;\n\t}\n\tsup {\n\t\ttop: -0.5em;\n\t}\n\timg {\n\t\tborder-style: none;\n\t}\n\tbutton,\n\tinput,\n\toptgroup,\n\tselect,\n\ttextarea {\n\t\tfont-family: inherit;\n\t\tfont-size: 100%;\n\t\tline-height: 1.15;\n\t\tmargin: 0;\n\t}\n\tbutton,\n\tinput {\n\t\toverflow: visible;\n\t}\n\tbutton,\n\tselect {\n\t\ttext-transform: none;\n\t}\n\t[type='button'],\n\t[type='reset'],\n\t[type='submit'],\n\tbutton {\n\t\t-webkit-appearance: button;\n\t}\n\t[type='button']::-moz-focus-inner,\n\t[type='reset']::-moz-focus-inner,\n\t[type='submit']::-moz-focus-inner,\n\tbutton::-moz-focus-inner {\n\t\tborder-style: none;\n\t\tpadding: 0;\n\t}\n\t[type='button']:-moz-focusring,\n\t[type='reset']:-moz-focusring,\n\t[type='submit']:-moz-focusring,\n\tbutton:-moz-focusring {\n\t\toutline: 1px dotted ButtonText;\n\t}\n\tfieldset {\n\t\tpadding: 0.35em 0.75em 0.625em;\n\t}\n\tlegend {\n\t\tbox-sizing: border-box;\n\t\tcolor: inherit;\n\t\tdisplay: table;\n\t\tmax-width: 100%;\n\t\tpadding: 0;\n\t\twhite-space: normal;\n\t}\n\tprogress {\n\t\tvertical-align: baseline;\n\t}\n\ttextarea {\n\t\toverflow: auto;\n\t}\n\t[type='checkbox'],\n\t[type='radio'] {\n\t\tbox-sizing: border-box;\n\t\tpadding: 0;\n\t}\n\t[type='number']::-webkit-inner-spin-button,\n\t[type='number']::-webkit-outer-spin-button {\n\t\theight: auto;\n\t}\n\t[type='search'] {\n\t\t-webkit-appearance: textfield;\n\t\toutline-offset: -2px;\n\t}\n\t[type='search']::-webkit-search-decoration {\n\t\t-webkit-appearance: none;\n\t}\n\t::-webkit-file-upload-button {\n\t\t-webkit-appearance: button;\n\t\tfont: inherit;\n\t}\n\tdetails {\n\t\tdisplay: block;\n\t}\n\tsummary {\n\t\tdisplay: list-item;\n\t}\n\ttemplate {\n\t\tdisplay: none;\n\t}\n\t[hidden] {\n\t\tdisplay: none;\n\t}\n"]);
+  var data = _taggedTemplateLiteral(["\n\tmain {\n\t\tdisplay: block;\n\t}\n\th1 {\n\t\tfont-size: 2em;\n\t\tmargin: 0.67em 0;\n\t}\n\thr {\n\t\tbox-sizing: content-box;\n\t\theight: 0;\n\t\toverflow: visible;\n\t}\n\tpre {\n\t\tfont-family: monospace, monospace;\n\t\tfont-size: 1em;\n\t}\n\ta {\n\t\tbackground-color: transparent;\n\t}\n\tabbr[title] {\n\t\tborder-bottom: none;\n\t\ttext-decoration: underline;\n\t\ttext-decoration: underline dotted;\n\t}\n\tb,\n\tstrong {\n\t\tfont-weight: bolder;\n\t}\n\tcode,\n\tkbd,\n\tsamp {\n\t\tfont-family: monospace, monospace;\n\t\tfont-size: 1em;\n\t}\n\tsmall {\n\t\tfont-size: 80%;\n\t}\n\tsub,\n\tsup {\n\t\tfont-size: 75%;\n\t\tline-height: 0;\n\t\tposition: relative;\n\t\tvertical-align: baseline;\n\t}\n\tsub {\n\t\tbottom: -0.25em;\n\t}\n\tsup {\n\t\ttop: -0.5em;\n\t}\n\timg {\n\t\tborder-style: none;\n\t}\n\tbutton,\n\tinput,\n\toptgroup,\n\tselect,\n\ttextarea {\n\t\tfont-family: inherit;\n\t\tfont-size: 100%;\n\t\tline-height: 1.15;\n\t\tmargin: 0;\n\t}\n\tbutton,\n\tinput {\n\t\toverflow: visible;\n\t}\n\tbutton,\n\tselect {\n\t\ttext-transform: none;\n\t}\n\tbutton,\n\t[type='button'],\n\t[type='reset'],\n\t[type='submit'] {\n\t\t-webkit-appearance: button;\n\t}\n\tbutton::-moz-focus-inner,\n\t[type='button']::-moz-focus-inner,\n\t[type='reset']::-moz-focus-inner,\n\t[type='submit']::-moz-focus-inner {\n\t\tborder-style: none;\n\t\tpadding: 0;\n\t}\n\tbutton:-moz-focusring,\n\t[type='button']:-moz-focusring,\n\t[type='reset']:-moz-focusring,\n\t[type='submit']:-moz-focusring {\n\t\toutline: 1px dotted ButtonText;\n\t}\n\tfieldset {\n\t\tpadding: 0.35em 0.75em 0.625em;\n\t}\n\tlegend {\n\t\tbox-sizing: border-box;\n\t\tcolor: inherit;\n\t\tdisplay: table;\n\t\tmax-width: 100%;\n\t\tpadding: 0;\n\t\twhite-space: normal;\n\t}\n\tprogress {\n\t\tvertical-align: baseline;\n\t}\n\ttextarea {\n\t\toverflow: auto;\n\t}\n\t[type='checkbox'],\n\t[type='radio'] {\n\t\tbox-sizing: border-box;\n\t\tpadding: 0;\n\t}\n\t[type='number']::-webkit-inner-spin-button,\n\t[type='number']::-webkit-outer-spin-button {\n\t\theight: auto;\n\t}\n\t[type='search'] {\n\t\t-webkit-appearance: textfield;\n\t\toutline-offset: -2px;\n\t}\n\t[type='search']::-webkit-search-decoration {\n\t\t-webkit-appearance: none;\n\t}\n\t::-webkit-file-upload-button {\n\t\t-webkit-appearance: button;\n\t\tfont: inherit;\n\t}\n\tdetails {\n\t\tdisplay: block;\n\t}\n\tsummary {\n\t\tdisplay: list-item;\n\t}\n\ttemplate {\n\t\tdisplay: none;\n\t}\n\t[hidden] {\n\t\tdisplay: none;\n\t}\n"]);
 
@@ -338,2 +430,14 @@ _templateObject = function _templateObject() {
 }
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Note: The following Normalize styles were not included, they would apply at a document level (outside of our GEL wrapper)...
+html {
+	line-height: 1.15;
+	-webkit-text-size-adjust: 100%;
+}
+body {
+	margin: 0;
+} 
+*/
+
 var reset = core.css(_templateObject());
@@ -344,6 +448,54 @@
 function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var Core = function Core(_ref) {
-  var noReset = _ref.noReset,
-      children = _ref.children;
+var coreLabel = 'core';
+var seen = new WeakSet();
 
+var AddRootClass = function AddRootClass(_ref) {
+  var children = _ref.children;
+
+  var _useState = react.useState(function () {
+    return createCache({
+      stylisPlugins: [// Prepend all CSS selectors that are children of the GEL wrapper (Core) with `.GEL` parent class to increase specificity
+      function (context, content, selectors, parents, line, column, length, id) {
+        if (context !== 2 || id === 107 || //@keyframes
+        seen.has(selectors) || seen.has(parents) || !selectors.length || selectors[0] === '') {
+          return;
+        }
+
+        seen.add(selectors); // Prepend selector with `.GEL `
+
+        for (var i = 0; i < selectors.length; i++) {
+          /**
+           * Don't process the following...
+           * 1. `html` or `body` selectors, possible if styles are passed to Emotion's `<Global />` component within the `<GEL>` wrapper (e.g. <GEL><Global styles={{ 'body': { margin: 0 } }} /></GEL>)
+           * 2. Core components (we don't want to increase Core's specificity)
+           * 3. Selectors already prepended with `.GEL `
+           */
+          if (!selectors[i].includes('html')
+          /* 1 */
+          && !selectors[i].includes('body')
+          /* 1 */
+          && !selectors[i].includes("-".concat(coreLabel))
+          /* 2 */
+          && !selectors[i].includes('.GEL ')
+          /* 3 */
+          ) {
+              selectors[i] = ".GEL ".concat(selectors[i]);
+            }
+        }
+      }]
+    });
+  }),
+      _useState2 = _slicedToArray(_useState, 1),
+      cache = _useState2[0];
+
+  return core.jsx(core.CacheProvider, {
+    value: cache
+  }, children);
+};
+
+var Core = function Core(_ref2) {
+  var noReset = _ref2.noReset,
+      noScope = _ref2.noScope,
+      children = _ref2.children;
+
   var _useBrand = useBrand(),
@@ -355,4 +507,5 @@ COLORS = _useBrand.COLORS,
   return core.jsx("div", {
+    className: "GEL",
     css: _objectSpread$1(_objectSpread$1({
-      label: 'Core',
+      label: coreLabel,
       lineHeight: 1.428571429,
@@ -362,10 +515,14 @@ color: COLORS.text,
     }, TYPE.bodyFont[400]), {}, {
-      '& *:focus': _objectSpread$1({}, PACKS.focus),
-      '& [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring, button:-moz-focusring': _objectSpread$1({}, PACKS.focus),
-      '& *::selection': {
+      '*:focus': _objectSpread$1({}, PACKS.focus),
+      // Also apply to the following selectors to increase specificity (against normalize reset)
+      'button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring': _objectSpread$1({}, PACKS.focus),
+      '[tabindex="-1"]:focus': {
+        outline: '0 !important'
+      },
+      '& ::selection': {
         backgroundColor: COLORS.tints.primary20
       },
-      '&': _objectSpread$1({}, noReset ? null : reset)
+      '&': _objectSpread$1({}, !noReset && reset)
     })
-  }, children);
+  }, noScope ? children : core.jsx(AddRootClass, null, children));
 };
@@ -376,4 +533,5 @@
       noReset = _ref.noReset,
+      noScope = _ref.noScope,
       children = _ref.children,
-      props = _objectWithoutProperties(_ref, ["brand", "noReset", "children"]);
+      props = _objectWithoutProperties(_ref, ["brand", "noReset", "noScope", "children"]);
 
@@ -384,3 +542,4 @@ useFocus();
   }, props), core.jsx(Core, {
-    noReset: noReset
+    noReset: noReset,
+    noScope: noScope
   }, children));
@@ -390,2 +549,3 @@ };
   noReset: PropTypes.bool,
+  noScope: PropTypes.bool,
   brand: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
@@ -424,2 +584,3 @@ };
 });
+exports.classNames = classnames;
 exports.BrandContext = BrandContext;
@@ -430,5 +591,9 @@ exports.GEL = GEL;
 exports.devWarning = devWarning;
+exports.formatClassName = formatClassName;
 exports.getLabel = getLabel;
+exports.getModifier = getModifier;
 exports.mergeWith = mergeWith;
 exports.overrideReconciler = overrideReconciler;
+exports.styleReconciler = styleReconciler;
+exports.titleCase = titleCase;
 exports.useBrand = useBrand;
@@ -435,0 +600,0 @@ exports.useFonts = useFonts;

dist/core.cjs.prod.js

@@ -11,3 +11,7 @@ "use strict";
 
-var core = require("@emotion/core"), _slicedToArray = _interopDefault(require("@babel/runtime/helpers/slicedToArray")), reactIs = require("react-is"), mergeWithOrg = _interopDefault(require("lodash.mergewith")), react = require("react"), weakMemo = _interopDefault(require("@emotion/weak-memoize")), facepaint = _interopDefault(require("facepaint")), _defineProperty = _interopDefault(require("@babel/runtime/helpers/defineProperty")), _objectWithoutProperties = _interopDefault(require("@babel/runtime/helpers/objectWithoutProperties")), _extends = _interopDefault(require("@babel/runtime/helpers/extends")), PropTypes = _interopDefault(require("prop-types")), _taggedTemplateLiteral = _interopDefault(require("@babel/runtime/helpers/taggedTemplateLiteral")), mergeWith = function() {
+var core = require("@emotion/core"), _slicedToArray = _interopDefault(require("@babel/runtime/helpers/slicedToArray")), reactIs = require("react-is"), mergeWithOrg = _interopDefault(require("lodash.mergewith")), react = require("react"), _toConsumableArray = _interopDefault(require("@babel/runtime/helpers/toConsumableArray")), get = _interopDefault(require("lodash.get")), set = _interopDefault(require("lodash.set")), weakMemo = _interopDefault(require("@emotion/weak-memoize")), facepaint = _interopDefault(require("facepaint")), _defineProperty = _interopDefault(require("@babel/runtime/helpers/defineProperty")), _objectWithoutProperties = _interopDefault(require("@babel/runtime/helpers/objectWithoutProperties")), _extends = _interopDefault(require("@babel/runtime/helpers/extends")), PropTypes = _interopDefault(require("prop-types")), createCache = _interopDefault(require("@emotion/cache"));
+
+require("core-js/features/weak-set");
+
+var _taggedTemplateLiteral = _interopDefault(require("@babel/runtime/helpers/taggedTemplateLiteral")), classnames = _interopDefault(require("classnames")), mergeWith = function() {
   for (var _len = arguments.length, rest = new Array(_len), _key = 0; _key < _len; _key++) rest[_key] = arguments[_key];
@@ -72,3 +76,34 @@ return mergeWithOrg.apply(void 0, [ {} ].concat(rest));
 
-var BrandContext = react.createContext(), useBrand = function() {
+function recurseStyles(base, modified) {
+  var diff = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : [], curr = _toConsumableArray(diff);
+  return Object.keys(modified).forEach((function(key) {
+    if (modified[key] instanceof Object && modified[key].constructor === Object && base[key]) {
+      var nested = recurseStyles(base[key], modified[key], [].concat(_toConsumableArray(curr), [ key ])).filter((function(n) {
+        return Array.isArray(n) && n[n.length - 1] !== key;
+      }));
+      nested.length && diff.push.apply(diff, _toConsumableArray(nested));
+    } else modified[key] !== base[key] && diff.push([].concat(_toConsumableArray(curr), [ key ]));
+  })), diff;
+}
+
+function styleReconciler(base, modified) {
+  return recurseStyles(base, modified).reduce((function(acc, curr) {
+    return set(acc, curr, get(modified, curr)), acc;
+  }), {});
+}
+
+function getModifier(defaultProps, props) {
+  return Object.keys(props).filter((function(m) {
+    return props[m] !== defaultProps[m];
+  }));
+}
+
+var formatClassName = function(className) {
+  var formattedName = className.split(" ");
+  return formattedName.unshift(formattedName.pop()), formattedName.join(" ").trim();
+}, titleCase = function(str) {
+  return str.toLowerCase().split(" ").map((function(word) {
+    return word.charAt(0).toUpperCase() + word.slice(1);
+  })).join(" ");
+}, BrandContext = react.createContext(), useBrand = function() {
   var brandObject = react.useContext(BrandContext);
@@ -147,3 +182,3 @@ if (!brandObject) throw new Error("GEL components require that you wrap your application with the <GEL /> brand provider from @westpac/core.");
 function _templateObject() {
-  var data = _taggedTemplateLiteral([ "\n\t/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */\n\thtml {\n\t\tline-height: 1.15;\n\t\t-webkit-text-size-adjust: 100%;\n\t}\n\tbody {\n\t\tmargin: 0;\n\t}\n\tmain {\n\t\tdisplay: block;\n\t}\n\th1 {\n\t\tfont-size: 2em;\n\t\tmargin: 0.67em 0;\n\t}\n\thr {\n\t\tbox-sizing: content-box;\n\t\theight: 0;\n\t\toverflow: visible;\n\t}\n\tpre {\n\t\tfont-family: monospace, monospace;\n\t\tfont-size: 1em;\n\t}\n\ta {\n\t\tbackground-color: transparent;\n\t}\n\tabbr[title] {\n\t\tborder-bottom: none;\n\t\ttext-decoration: underline;\n\t\ttext-decoration: underline dotted;\n\t}\n\tb,\n\tstrong {\n\t\tfont-weight: bolder;\n\t}\n\tcode,\n\tkbd,\n\tsamp {\n\t\tfont-family: monospace, monospace;\n\t\tfont-size: 1em;\n\t}\n\tsmall {\n\t\tfont-size: 80%;\n\t}\n\tsub,\n\tsup {\n\t\tfont-size: 75%;\n\t\tline-height: 0;\n\t\tposition: relative;\n\t\tvertical-align: baseline;\n\t}\n\tsub {\n\t\tbottom: -0.25em;\n\t}\n\tsup {\n\t\ttop: -0.5em;\n\t}\n\timg {\n\t\tborder-style: none;\n\t}\n\tbutton,\n\tinput,\n\toptgroup,\n\tselect,\n\ttextarea {\n\t\tfont-family: inherit;\n\t\tfont-size: 100%;\n\t\tline-height: 1.15;\n\t\tmargin: 0;\n\t}\n\tbutton,\n\tinput {\n\t\toverflow: visible;\n\t}\n\tbutton,\n\tselect {\n\t\ttext-transform: none;\n\t}\n\t[type='button'],\n\t[type='reset'],\n\t[type='submit'],\n\tbutton {\n\t\t-webkit-appearance: button;\n\t}\n\t[type='button']::-moz-focus-inner,\n\t[type='reset']::-moz-focus-inner,\n\t[type='submit']::-moz-focus-inner,\n\tbutton::-moz-focus-inner {\n\t\tborder-style: none;\n\t\tpadding: 0;\n\t}\n\t[type='button']:-moz-focusring,\n\t[type='reset']:-moz-focusring,\n\t[type='submit']:-moz-focusring,\n\tbutton:-moz-focusring {\n\t\toutline: 1px dotted ButtonText;\n\t}\n\tfieldset {\n\t\tpadding: 0.35em 0.75em 0.625em;\n\t}\n\tlegend {\n\t\tbox-sizing: border-box;\n\t\tcolor: inherit;\n\t\tdisplay: table;\n\t\tmax-width: 100%;\n\t\tpadding: 0;\n\t\twhite-space: normal;\n\t}\n\tprogress {\n\t\tvertical-align: baseline;\n\t}\n\ttextarea {\n\t\toverflow: auto;\n\t}\n\t[type='checkbox'],\n\t[type='radio'] {\n\t\tbox-sizing: border-box;\n\t\tpadding: 0;\n\t}\n\t[type='number']::-webkit-inner-spin-button,\n\t[type='number']::-webkit-outer-spin-button {\n\t\theight: auto;\n\t}\n\t[type='search'] {\n\t\t-webkit-appearance: textfield;\n\t\toutline-offset: -2px;\n\t}\n\t[type='search']::-webkit-search-decoration {\n\t\t-webkit-appearance: none;\n\t}\n\t::-webkit-file-upload-button {\n\t\t-webkit-appearance: button;\n\t\tfont: inherit;\n\t}\n\tdetails {\n\t\tdisplay: block;\n\t}\n\tsummary {\n\t\tdisplay: list-item;\n\t}\n\ttemplate {\n\t\tdisplay: none;\n\t}\n\t[hidden] {\n\t\tdisplay: none;\n\t}\n" ]);
+  var data = _taggedTemplateLiteral([ "\n\tmain {\n\t\tdisplay: block;\n\t}\n\th1 {\n\t\tfont-size: 2em;\n\t\tmargin: 0.67em 0;\n\t}\n\thr {\n\t\tbox-sizing: content-box;\n\t\theight: 0;\n\t\toverflow: visible;\n\t}\n\tpre {\n\t\tfont-family: monospace, monospace;\n\t\tfont-size: 1em;\n\t}\n\ta {\n\t\tbackground-color: transparent;\n\t}\n\tabbr[title] {\n\t\tborder-bottom: none;\n\t\ttext-decoration: underline;\n\t\ttext-decoration: underline dotted;\n\t}\n\tb,\n\tstrong {\n\t\tfont-weight: bolder;\n\t}\n\tcode,\n\tkbd,\n\tsamp {\n\t\tfont-family: monospace, monospace;\n\t\tfont-size: 1em;\n\t}\n\tsmall {\n\t\tfont-size: 80%;\n\t}\n\tsub,\n\tsup {\n\t\tfont-size: 75%;\n\t\tline-height: 0;\n\t\tposition: relative;\n\t\tvertical-align: baseline;\n\t}\n\tsub {\n\t\tbottom: -0.25em;\n\t}\n\tsup {\n\t\ttop: -0.5em;\n\t}\n\timg {\n\t\tborder-style: none;\n\t}\n\tbutton,\n\tinput,\n\toptgroup,\n\tselect,\n\ttextarea {\n\t\tfont-family: inherit;\n\t\tfont-size: 100%;\n\t\tline-height: 1.15;\n\t\tmargin: 0;\n\t}\n\tbutton,\n\tinput {\n\t\toverflow: visible;\n\t}\n\tbutton,\n\tselect {\n\t\ttext-transform: none;\n\t}\n\tbutton,\n\t[type='button'],\n\t[type='reset'],\n\t[type='submit'] {\n\t\t-webkit-appearance: button;\n\t}\n\tbutton::-moz-focus-inner,\n\t[type='button']::-moz-focus-inner,\n\t[type='reset']::-moz-focus-inner,\n\t[type='submit']::-moz-focus-inner {\n\t\tborder-style: none;\n\t\tpadding: 0;\n\t}\n\tbutton:-moz-focusring,\n\t[type='button']:-moz-focusring,\n\t[type='reset']:-moz-focusring,\n\t[type='submit']:-moz-focusring {\n\t\toutline: 1px dotted ButtonText;\n\t}\n\tfieldset {\n\t\tpadding: 0.35em 0.75em 0.625em;\n\t}\n\tlegend {\n\t\tbox-sizing: border-box;\n\t\tcolor: inherit;\n\t\tdisplay: table;\n\t\tmax-width: 100%;\n\t\tpadding: 0;\n\t\twhite-space: normal;\n\t}\n\tprogress {\n\t\tvertical-align: baseline;\n\t}\n\ttextarea {\n\t\toverflow: auto;\n\t}\n\t[type='checkbox'],\n\t[type='radio'] {\n\t\tbox-sizing: border-box;\n\t\tpadding: 0;\n\t}\n\t[type='number']::-webkit-inner-spin-button,\n\t[type='number']::-webkit-outer-spin-button {\n\t\theight: auto;\n\t}\n\t[type='search'] {\n\t\t-webkit-appearance: textfield;\n\t\toutline-offset: -2px;\n\t}\n\t[type='search']::-webkit-search-decoration {\n\t\t-webkit-appearance: none;\n\t}\n\t::-webkit-file-upload-button {\n\t\t-webkit-appearance: button;\n\t\tfont: inherit;\n\t}\n\tdetails {\n\t\tdisplay: block;\n\t}\n\tsummary {\n\t\tdisplay: list-item;\n\t}\n\ttemplate {\n\t\tdisplay: none;\n\t}\n\t[hidden] {\n\t\tdisplay: none;\n\t}\n" ]);
   return _templateObject = function() {
@@ -154,3 +189,3 @@ return data;
 
-var reset = core.css(_templateObject());
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ var reset = core.css(_templateObject());
 
@@ -180,7 +215,22 @@ function ownKeys$1(object, enumerableOnly) {
 
-var Core = function(_ref) {
-  var noReset = _ref.noReset, children = _ref.children, _useBrand = useBrand(), COLORS = _useBrand.COLORS, TYPE = _useBrand.TYPE, PACKS = _useBrand.PACKS;
+var coreLabel = "core", seen = new WeakSet, AddRootClass = function(_ref) {
+  var children = _ref.children, _useState = react.useState((function() {
+    return createCache({
+      stylisPlugins: [ function(context, content, selectors, parents, line, column, length, id) {
+        if (2 === context && 107 !== id && !seen.has(selectors) && !seen.has(parents) && selectors.length && "" !== selectors[0]) {
+          seen.add(selectors);
+          for (var i = 0; i < selectors.length; i++) selectors[i].includes("html") || selectors[i].includes("body") || selectors[i].includes("-".concat(coreLabel)) || selectors[i].includes(".GEL ") || (selectors[i] = ".GEL ".concat(selectors[i]));
+        }
+      } ]
+    });
+  })), cache = _slicedToArray(_useState, 1)[0];
+  return core.jsx(core.CacheProvider, {
+    value: cache
+  }, children);
+}, Core = function(_ref2) {
+  var noReset = _ref2.noReset, noScope = _ref2.noScope, children = _ref2.children, _useBrand = useBrand(), COLORS = _useBrand.COLORS, TYPE = _useBrand.TYPE, PACKS = _useBrand.PACKS;
   return core.jsx("div", {
+    className: "GEL",
     css: _objectSpread$1(_objectSpread$1({
-      label: "Core",
+      label: coreLabel,
       lineHeight: 1.428571429,
@@ -190,16 +240,20 @@ color: COLORS.text,
     }, TYPE.bodyFont[400]), {}, {
-      "& *:focus": _objectSpread$1({}, PACKS.focus),
-      '& [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring, button:-moz-focusring': _objectSpread$1({}, PACKS.focus),
-      "& *::selection": {
+      "*:focus": _objectSpread$1({}, PACKS.focus),
+      'button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring': _objectSpread$1({}, PACKS.focus),
+      '[tabindex="-1"]:focus': {
+        outline: "0 !important"
+      },
+      "& ::selection": {
         backgroundColor: COLORS.tints.primary20
       },
-      "&": _objectSpread$1({}, noReset ? null : reset)
+      "&": _objectSpread$1({}, !noReset && reset)
     })
-  }, children);
+  }, noScope ? children : core.jsx(AddRootClass, null, children));
 }, GEL = function(_ref) {
-  var brand = _ref.brand, noReset = _ref.noReset, children = _ref.children, props = _objectWithoutProperties(_ref, [ "brand", "noReset", "children" ]);
+  var brand = _ref.brand, noReset = _ref.noReset, noScope = _ref.noScope, children = _ref.children, props = _objectWithoutProperties(_ref, [ "brand", "noReset", "noScope", "children" ]);
   return useFocus(), core.jsx(BrandContext.Provider, _extends({
     value: brand
   }, props), core.jsx(Core, {
-    noReset: noReset
+    noReset: noReset,
+    noScope: noScope
   }, children));
@@ -210,2 +264,3 @@ };
   noReset: PropTypes.bool,
+  noScope: PropTypes.bool,
   brand: PropTypes.oneOfType([ PropTypes.object, PropTypes.func ])
@@ -237,7 +292,8 @@ }, Object.defineProperty(exports, "ClassNames", {
   }
-}), exports.BrandContext = BrandContext, exports.GEL = GEL, exports.asArray = asArray, 
-exports.cleanClassName = cleanClassName, exports.devWarning = devWarning, exports.getLabel = getLabel, 
+}), exports.classNames = classnames, exports.BrandContext = BrandContext, exports.GEL = GEL, 
+exports.asArray = asArray, exports.cleanClassName = cleanClassName, exports.devWarning = devWarning, 
+exports.formatClassName = formatClassName, exports.getLabel = getLabel, exports.getModifier = getModifier, 
 exports.mergeWith = mergeWith, exports.overrideReconciler = overrideReconciler, 
-exports.useBrand = useBrand, exports.useFonts = useFonts, exports.useInstanceId = useInstanceId, 
-exports.useManagedState = useManagedState, exports.useMediaQuery = useMediaQuery, 
-exports.wrapHandlers = wrapHandlers;
+exports.styleReconciler = styleReconciler, exports.titleCase = titleCase, exports.useBrand = useBrand, 
+exports.useFonts = useFonts, exports.useInstanceId = useInstanceId, exports.useManagedState = useManagedState, 
+exports.useMediaQuery = useMediaQuery, exports.wrapHandlers = wrapHandlers;

dist/core.esm.js

@@ -1,2 +0,2 @@
-import { css, jsx } from '@emotion/core';
+import { css, jsx, CacheProvider } from '@emotion/core';
 export { ClassNames, Global, css, jsx, keyframes } from '@emotion/core';
@@ -7,2 +7,5 @@ import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
 import { useRef, useState, createContext, useContext } from 'react';
+import _toConsumableArray from '@babel/runtime/helpers/esm/toConsumableArray';
+import get from 'lodash.get';
+import set from 'lodash.set';
 import weakMemo from '@emotion/weak-memoize';
@@ -14,3 +17,6 @@ import facepaint from 'facepaint';
 import PropTypes from 'prop-types';
+import createCache from '@emotion/cache';
+import 'core-js/features/weak-set';
 import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
+export { default as classNames } from 'classnames';
 
@@ -201,2 +207,88 @@ var mergeWith = function mergeWith() {
 
+/**
+ * Recursively get the paths to unique styles
+ *
+ * @param {object} base			- default component styles
+ * @param {object} modified 	- passed prop styles
+ * @param {array} diff 			- current style object path
+ *
+ * @return {array}				- nested array of paths e.g. [['key1'], ['key2'], ['level1', 'level2'], ['level1', 'level2', 'level3']]
+ */
+
+function recurseStyles(base, modified) {
+  var diff = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+
+  var curr = _toConsumableArray(diff);
+
+  Object.keys(modified).forEach(function (key) {
+    if (modified[key] instanceof Object && modified[key].constructor === Object && base[key]) {
+      var nested = recurseStyles(base[key], modified[key], [].concat(_toConsumableArray(curr), [key])).filter(function (n) {
+        return Array.isArray(n) && n[n.length - 1] !== key;
+      });
+      if (nested.length) diff.push.apply(diff, _toConsumableArray(nested));
+    } else if (modified[key] !== base[key]) {
+      diff.push([].concat(_toConsumableArray(curr), [key]));
+    }
+  });
+  return diff;
+}
+/**
+ * Generate prop styles
+ *
+ * @param {object} base 		- default component styles
+ * @param {object} modified 	- passed prop styles
+ *
+ * @return {object}					- style object
+ */
+
+
+function styleReconciler(base, modified) {
+  var diff = recurseStyles(base, modified);
+  var styles = diff.reduce(function (acc, curr) {
+    set(acc, curr, get(modified, curr));
+    return acc;
+  }, {});
+  return styles;
+}
+/**
+ * Get passed props
+ *
+ * @param {object} defaultProps		- components default props
+ * @param {object} props 			- passed props
+ *
+ * @return {array}					- unique passed props
+ */
+
+function getModifier(defaultProps, props) {
+  return Object.keys(props).filter(function (m) {
+    return props[m] !== defaultProps[m];
+  });
+}
+/**
+ * Format class name ordering for consistency i.e. className={baseClass modifierClasses}
+ *
+ * @param {string} className 	- className to format
+ *
+ * @return {string}				- formatted className
+ */
+
+var formatClassName = function formatClassName(className) {
+  var formattedName = className.split(' ');
+  formattedName.unshift(formattedName.pop());
+  return formattedName.join(' ').trim();
+};
+/**
+ * Transform given string to title case
+ *
+ * @param {string} str		- text to transform
+ *
+ * @return {string}			- text in title case
+ */
+
+var titleCase = function titleCase(str) {
+  return str.toLowerCase().split(' ').map(function (word) {
+    return word.charAt(0).toUpperCase() + word.slice(1);
+  }).join(' ');
+};
+
 /** @jsx jsx */
@@ -324,3 +416,3 @@ var BrandContext = createContext();
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n\t/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */\n\thtml {\n\t\tline-height: 1.15;\n\t\t-webkit-text-size-adjust: 100%;\n\t}\n\tbody {\n\t\tmargin: 0;\n\t}\n\tmain {\n\t\tdisplay: block;\n\t}\n\th1 {\n\t\tfont-size: 2em;\n\t\tmargin: 0.67em 0;\n\t}\n\thr {\n\t\tbox-sizing: content-box;\n\t\theight: 0;\n\t\toverflow: visible;\n\t}\n\tpre {\n\t\tfont-family: monospace, monospace;\n\t\tfont-size: 1em;\n\t}\n\ta {\n\t\tbackground-color: transparent;\n\t}\n\tabbr[title] {\n\t\tborder-bottom: none;\n\t\ttext-decoration: underline;\n\t\ttext-decoration: underline dotted;\n\t}\n\tb,\n\tstrong {\n\t\tfont-weight: bolder;\n\t}\n\tcode,\n\tkbd,\n\tsamp {\n\t\tfont-family: monospace, monospace;\n\t\tfont-size: 1em;\n\t}\n\tsmall {\n\t\tfont-size: 80%;\n\t}\n\tsub,\n\tsup {\n\t\tfont-size: 75%;\n\t\tline-height: 0;\n\t\tposition: relative;\n\t\tvertical-align: baseline;\n\t}\n\tsub {\n\t\tbottom: -0.25em;\n\t}\n\tsup {\n\t\ttop: -0.5em;\n\t}\n\timg {\n\t\tborder-style: none;\n\t}\n\tbutton,\n\tinput,\n\toptgroup,\n\tselect,\n\ttextarea {\n\t\tfont-family: inherit;\n\t\tfont-size: 100%;\n\t\tline-height: 1.15;\n\t\tmargin: 0;\n\t}\n\tbutton,\n\tinput {\n\t\toverflow: visible;\n\t}\n\tbutton,\n\tselect {\n\t\ttext-transform: none;\n\t}\n\t[type='button'],\n\t[type='reset'],\n\t[type='submit'],\n\tbutton {\n\t\t-webkit-appearance: button;\n\t}\n\t[type='button']::-moz-focus-inner,\n\t[type='reset']::-moz-focus-inner,\n\t[type='submit']::-moz-focus-inner,\n\tbutton::-moz-focus-inner {\n\t\tborder-style: none;\n\t\tpadding: 0;\n\t}\n\t[type='button']:-moz-focusring,\n\t[type='reset']:-moz-focusring,\n\t[type='submit']:-moz-focusring,\n\tbutton:-moz-focusring {\n\t\toutline: 1px dotted ButtonText;\n\t}\n\tfieldset {\n\t\tpadding: 0.35em 0.75em 0.625em;\n\t}\n\tlegend {\n\t\tbox-sizing: border-box;\n\t\tcolor: inherit;\n\t\tdisplay: table;\n\t\tmax-width: 100%;\n\t\tpadding: 0;\n\t\twhite-space: normal;\n\t}\n\tprogress {\n\t\tvertical-align: baseline;\n\t}\n\ttextarea {\n\t\toverflow: auto;\n\t}\n\t[type='checkbox'],\n\t[type='radio'] {\n\t\tbox-sizing: border-box;\n\t\tpadding: 0;\n\t}\n\t[type='number']::-webkit-inner-spin-button,\n\t[type='number']::-webkit-outer-spin-button {\n\t\theight: auto;\n\t}\n\t[type='search'] {\n\t\t-webkit-appearance: textfield;\n\t\toutline-offset: -2px;\n\t}\n\t[type='search']::-webkit-search-decoration {\n\t\t-webkit-appearance: none;\n\t}\n\t::-webkit-file-upload-button {\n\t\t-webkit-appearance: button;\n\t\tfont: inherit;\n\t}\n\tdetails {\n\t\tdisplay: block;\n\t}\n\tsummary {\n\t\tdisplay: list-item;\n\t}\n\ttemplate {\n\t\tdisplay: none;\n\t}\n\t[hidden] {\n\t\tdisplay: none;\n\t}\n"]);
+  var data = _taggedTemplateLiteral(["\n\tmain {\n\t\tdisplay: block;\n\t}\n\th1 {\n\t\tfont-size: 2em;\n\t\tmargin: 0.67em 0;\n\t}\n\thr {\n\t\tbox-sizing: content-box;\n\t\theight: 0;\n\t\toverflow: visible;\n\t}\n\tpre {\n\t\tfont-family: monospace, monospace;\n\t\tfont-size: 1em;\n\t}\n\ta {\n\t\tbackground-color: transparent;\n\t}\n\tabbr[title] {\n\t\tborder-bottom: none;\n\t\ttext-decoration: underline;\n\t\ttext-decoration: underline dotted;\n\t}\n\tb,\n\tstrong {\n\t\tfont-weight: bolder;\n\t}\n\tcode,\n\tkbd,\n\tsamp {\n\t\tfont-family: monospace, monospace;\n\t\tfont-size: 1em;\n\t}\n\tsmall {\n\t\tfont-size: 80%;\n\t}\n\tsub,\n\tsup {\n\t\tfont-size: 75%;\n\t\tline-height: 0;\n\t\tposition: relative;\n\t\tvertical-align: baseline;\n\t}\n\tsub {\n\t\tbottom: -0.25em;\n\t}\n\tsup {\n\t\ttop: -0.5em;\n\t}\n\timg {\n\t\tborder-style: none;\n\t}\n\tbutton,\n\tinput,\n\toptgroup,\n\tselect,\n\ttextarea {\n\t\tfont-family: inherit;\n\t\tfont-size: 100%;\n\t\tline-height: 1.15;\n\t\tmargin: 0;\n\t}\n\tbutton,\n\tinput {\n\t\toverflow: visible;\n\t}\n\tbutton,\n\tselect {\n\t\ttext-transform: none;\n\t}\n\tbutton,\n\t[type='button'],\n\t[type='reset'],\n\t[type='submit'] {\n\t\t-webkit-appearance: button;\n\t}\n\tbutton::-moz-focus-inner,\n\t[type='button']::-moz-focus-inner,\n\t[type='reset']::-moz-focus-inner,\n\t[type='submit']::-moz-focus-inner {\n\t\tborder-style: none;\n\t\tpadding: 0;\n\t}\n\tbutton:-moz-focusring,\n\t[type='button']:-moz-focusring,\n\t[type='reset']:-moz-focusring,\n\t[type='submit']:-moz-focusring {\n\t\toutline: 1px dotted ButtonText;\n\t}\n\tfieldset {\n\t\tpadding: 0.35em 0.75em 0.625em;\n\t}\n\tlegend {\n\t\tbox-sizing: border-box;\n\t\tcolor: inherit;\n\t\tdisplay: table;\n\t\tmax-width: 100%;\n\t\tpadding: 0;\n\t\twhite-space: normal;\n\t}\n\tprogress {\n\t\tvertical-align: baseline;\n\t}\n\ttextarea {\n\t\toverflow: auto;\n\t}\n\t[type='checkbox'],\n\t[type='radio'] {\n\t\tbox-sizing: border-box;\n\t\tpadding: 0;\n\t}\n\t[type='number']::-webkit-inner-spin-button,\n\t[type='number']::-webkit-outer-spin-button {\n\t\theight: auto;\n\t}\n\t[type='search'] {\n\t\t-webkit-appearance: textfield;\n\t\toutline-offset: -2px;\n\t}\n\t[type='search']::-webkit-search-decoration {\n\t\t-webkit-appearance: none;\n\t}\n\t::-webkit-file-upload-button {\n\t\t-webkit-appearance: button;\n\t\tfont: inherit;\n\t}\n\tdetails {\n\t\tdisplay: block;\n\t}\n\tsummary {\n\t\tdisplay: list-item;\n\t}\n\ttemplate {\n\t\tdisplay: none;\n\t}\n\t[hidden] {\n\t\tdisplay: none;\n\t}\n"]);
 
@@ -333,2 +425,14 @@ _templateObject = function _templateObject() {
 }
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Note: The following Normalize styles were not included, they would apply at a document level (outside of our GEL wrapper)...
+html {
+	line-height: 1.15;
+	-webkit-text-size-adjust: 100%;
+}
+body {
+	margin: 0;
+} 
+*/
+
 var reset = css(_templateObject());
@@ -339,6 +443,54 @@
 function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var Core = function Core(_ref) {
-  var noReset = _ref.noReset,
-      children = _ref.children;
+var coreLabel = 'core';
+var seen = new WeakSet();
 
+var AddRootClass = function AddRootClass(_ref) {
+  var children = _ref.children;
+
+  var _useState = useState(function () {
+    return createCache({
+      stylisPlugins: [// Prepend all CSS selectors that are children of the GEL wrapper (Core) with `.GEL` parent class to increase specificity
+      function (context, content, selectors, parents, line, column, length, id) {
+        if (context !== 2 || id === 107 || //@keyframes
+        seen.has(selectors) || seen.has(parents) || !selectors.length || selectors[0] === '') {
+          return;
+        }
+
+        seen.add(selectors); // Prepend selector with `.GEL `
+
+        for (var i = 0; i < selectors.length; i++) {
+          /**
+           * Don't process the following...
+           * 1. `html` or `body` selectors, possible if styles are passed to Emotion's `<Global />` component within the `<GEL>` wrapper (e.g. <GEL><Global styles={{ 'body': { margin: 0 } }} /></GEL>)
+           * 2. Core components (we don't want to increase Core's specificity)
+           * 3. Selectors already prepended with `.GEL `
+           */
+          if (!selectors[i].includes('html')
+          /* 1 */
+          && !selectors[i].includes('body')
+          /* 1 */
+          && !selectors[i].includes("-".concat(coreLabel))
+          /* 2 */
+          && !selectors[i].includes('.GEL ')
+          /* 3 */
+          ) {
+              selectors[i] = ".GEL ".concat(selectors[i]);
+            }
+        }
+      }]
+    });
+  }),
+      _useState2 = _slicedToArray(_useState, 1),
+      cache = _useState2[0];
+
+  return jsx(CacheProvider, {
+    value: cache
+  }, children);
+};
+
+var Core = function Core(_ref2) {
+  var noReset = _ref2.noReset,
+      noScope = _ref2.noScope,
+      children = _ref2.children;
+
   var _useBrand = useBrand(),
@@ -350,4 +502,5 @@ COLORS = _useBrand.COLORS,
   return jsx("div", {
+    className: "GEL",
     css: _objectSpread$1(_objectSpread$1({
-      label: 'Core',
+      label: coreLabel,
       lineHeight: 1.428571429,
@@ -357,10 +510,14 @@ color: COLORS.text,
     }, TYPE.bodyFont[400]), {}, {
-      '& *:focus': _objectSpread$1({}, PACKS.focus),
-      '& [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring, button:-moz-focusring': _objectSpread$1({}, PACKS.focus),
-      '& *::selection': {
+      '*:focus': _objectSpread$1({}, PACKS.focus),
+      // Also apply to the following selectors to increase specificity (against normalize reset)
+      'button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring': _objectSpread$1({}, PACKS.focus),
+      '[tabindex="-1"]:focus': {
+        outline: '0 !important'
+      },
+      '& ::selection': {
         backgroundColor: COLORS.tints.primary20
       },
-      '&': _objectSpread$1({}, noReset ? null : reset)
+      '&': _objectSpread$1({}, !noReset && reset)
     })
-  }, children);
+  }, noScope ? children : jsx(AddRootClass, null, children));
 };
@@ -371,4 +528,5 @@
       noReset = _ref.noReset,
+      noScope = _ref.noScope,
       children = _ref.children,
-      props = _objectWithoutProperties(_ref, ["brand", "noReset", "children"]);
+      props = _objectWithoutProperties(_ref, ["brand", "noReset", "noScope", "children"]);
 
@@ -379,3 +537,4 @@ useFocus();
   }, props), jsx(Core, {
-    noReset: noReset
+    noReset: noReset,
+    noScope: noScope
   }, children));
@@ -385,5 +544,6 @@ };
   noReset: PropTypes.bool,
+  noScope: PropTypes.bool,
   brand: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
 };
 
-export { BrandContext, GEL, asArray, cleanClassName, devWarning, getLabel, mergeWith, overrideReconciler, useBrand, useFonts, useInstanceId, useManagedState, useMediaQuery, wrapHandlers };
+export { BrandContext, GEL, asArray, cleanClassName, devWarning, formatClassName, getLabel, getModifier, mergeWith, overrideReconciler, styleReconciler, titleCase, useBrand, useFonts, useInstanceId, useManagedState, useMediaQuery, wrapHandlers };

examples/_utils.js

 /** @jsx jsx */
 
 import { jsx, useBrand } from '@westpac/core';
-import { Cell, Grid } from '../src';
 
@@ -6,0 +5,0 @@ export const Code = ({ children }) => {

examples/05-tokens-colors.js

@@ -5,4 +5,2 @@ /** @jsx jsx */
 
-import { Intopia } from '../../../helpers/example/components/Intopia.js';
-
 function Example({ brand }) {
@@ -14,4 +12,2 @@ const { COLORS } = useBrand();
 		<GEL brand={brand}>
-			<Intopia ignore />
-
 			<h2>Colors</h2>
@@ -18,0 +14,0 @@ <ul

examples/10-tokens-layout.js

@@ -5,4 +5,2 @@ /** @jsx jsx */
 
-import { Intopia } from '../../../helpers/example/components/Intopia.js';
-
 function Example({ brand }) {
@@ -13,3 +11,2 @@ const { LAYOUT } = useBrand();
 		<GEL brand={brand}>
-			<Intopia ignore />
 			<h2>Layout</h2>
@@ -16,0 +13,0 @@ Breakpoints:

examples/20-tokens-spacing.js

@@ -6,4 +6,2 @@ /** @jsx jsx */
 
-import { Intopia } from '../../../helpers/example/components/Intopia.js';
-
 function Example({ brand }) {
@@ -17,4 +15,2 @@ const { COLORS, SPACING } = useBrand();
 		<GEL brand={brand}>
-			<Intopia ignore />
-
 			<h2>Spacing</h2>
@@ -21,0 +17,0 @@ <label

examples/30-tokens-type.js

@@ -5,4 +5,2 @@ /** @jsx jsx */
 
-import { Intopia } from '../../../helpers/example/components/Intopia.js';
-
 function Example({ brand }) {
@@ -14,4 +12,2 @@ const { TYPE } = useBrand();
 		<GEL brand={brand} css={{ ...useFonts({ path: 'assets/' }) }}>
-			<Intopia ignore />
-
 			<h2>Type</h2>
@@ -18,0 +14,0 @@ <div

examples/40-tokens-packs.js

@@ -7,4 +7,2 @@ /** @jsx jsx */
 
-import { Intopia } from '../../../helpers/example/components/Intopia.js';
-
 function Example({ brand }) {
@@ -15,4 +13,2 @@ const { COLORS, PACKS, SPACING } = useBrand();
 		<GEL brand={brand} css={{ ...useFonts({ path: 'assets/' }) }}>
-			<Intopia ignore />
-
 			<h2>Brand type scale</h2>
@@ -19,0 +15,0 @@ {Array(7)

examples/50-focus.js

@@ -8,9 +8,5 @@ /** @jsx jsx */
 
-import { Intopia } from '../../../helpers/example/components/Intopia.js';
-
 function Example({ brand }) {
 	return (
 		<GEL brand={brand}>
-			<Intopia />
-
 			<h2>Focus test</h2>
@@ -60,3 +56,5 @@
 
-			<p>Note: All users should see our focus outline styling; not just keyboard users.</p>
+			<Body>
+				<p>Note: All users should see our focus outline styling; not just keyboard users.</p>
+			</Body>
 			<TextInput />
@@ -73,3 +71,6 @@ <br />
 			<Body>
-				<p>Note: The following headings should show focus outline styling when keyboard tabbing.</p>
+				<p>
+					Note: The following headings have a tabindex="0" attribute and should show focus outline
+					styling when keyboard tabbing.
+				</p>
 				<h1 tabIndex="0">This is a h1 heading</h1>
@@ -82,2 +83,17 @@ <h2 tabIndex="0">This is a h2 heading</h2>
 			</Body>
+
+			<hr />
+
+			<Body>
+				<p>
+					Note: The following headings have a tabindex="-1" attribute and should NOT show focus
+					outline styling when keyboard tabbing. They can however receive focus programmatically.
+				</p>
+				<h1 tabIndex="-1">This is a h1 heading</h1>
+				<h2 tabIndex="-1">This is a h2 heading</h2>
+				<h3 tabIndex="-1">This is a h3 heading</h3>
+				<h4 tabIndex="-1">This is a h4 heading</h4>
+				<h5 tabIndex="-1">This is a h5 heading</h5>
+				<h6 tabIndex="-1">This is a h6 heading</h6>
+			</Body>
 		</GEL>
@@ -84,0 +100,0 @@ );

examples/60-useFonts.js

@@ -6,4 +6,2 @@ /** @jsx jsx */
 
-import { Intopia } from '../../../helpers/example/components/Intopia.js';
-
 function Example({ brand }) {
@@ -14,3 +12,2 @@ const { TYPE } = useBrand();
 		<GEL brand={brand}>
-			<Intopia ignore />
 			<div
@@ -17,0 +14,0 @@ css={{

examples/63-useMediaQuery.js

@@ -6,4 +6,2 @@ /** @jsx jsx */
 
-import { Intopia } from '../../../helpers/example/components/Intopia.js';
-
 function Example({ brand }) {
@@ -14,4 +12,2 @@ const mq = useMediaQuery();
 		<GEL brand={brand}>
-			<Intopia ignore />
-
 			<strong>[1,2,3,4]</strong>
@@ -18,0 +14,0 @@ <Code>{JSON.stringify(mq({ thing: [1, 2, 3, 4] }), null, 2)}</Code>

examples/65-useInstanceId.js

@@ -8,4 +8,2 @@ /** @jsx jsx */
 
-import { Intopia } from '../../../helpers/example/components/Intopia.js';
-
 function Example({ brand }) {
@@ -15,3 +13,2 @@ const [instanceId, setInstanceId] = useState();
 		<GEL brand={brand}>
-			<Intopia ignore />
 			<Button onClick={() => setInstanceId(useInstanceId())}>Get instance id</Button>
@@ -18,0 +15,0 @@ <h2>{instanceId}</h2>

examples/70-mergeWith.js

@@ -6,4 +6,2 @@ /** @jsx jsx */
 
-import { Intopia } from '../../../helpers/example/components/Intopia.js';
-
 function Example({ brand }) {
@@ -15,3 +13,2 @@ let object = { a: [{ b: 2 }, { d: 4 }] };
 		<GEL brand={brand}>
-			<Intopia ignore />
 			<Code>
@@ -18,0 +15,0 @@ const object = {JSON.stringify(object, null, 2)};{<br css={{ margin: '1rem' }} />}

examples/80-devWarning.js

@@ -6,4 +6,2 @@ /** @jsx jsx */
 
-import { Intopia } from '../../../helpers/example/components/Intopia.js';
-
 function Example({ brand }) {
@@ -14,3 +12,2 @@ devWarning(true, 'Warn consumer about a thing but ignore the wanring in production!');
 		<GEL brand={brand}>
-			<Intopia ignore />
 			<Code>
@@ -17,0 +14,0 @@ devWarning( true, 'Warn consumer about a thing but ignore the wanring in production!' );

examples/90-wrapHandlers.js

@@ -6,4 +6,2 @@ /** @jsx jsx */
 
-import { Intopia } from '../../../helpers/example/components/Intopia.js';
-
 function one() {
@@ -28,3 +26,2 @@ console.log('one called!');
 		<GEL brand={brand}>
-			<Intopia ignore />
 			<Code>
@@ -31,0 +28,0 @@ {`function one() {

examples/95-asArray.js

@@ -6,4 +6,2 @@ /** @jsx jsx */
 
-import { Intopia } from '../../../helpers/example/components/Intopia.js';
-
 function Example({ brand }) {
@@ -13,3 +11,2 @@ console.log(asArray([1, 2, 3]));
 		<GEL brand={brand}>
-			<Intopia ignore />
 			<Code>{`asArray([ 1, 2, 3])`}</Code>
@@ -16,0 +13,0 @@ =>

examples/97-overrideReconciler.js

@@ -6,8 +6,5 @@ /** @jsx jsx */
 
-import { Intopia } from '../../../helpers/example/components/Intopia.js';
-
 function Example({ brand }) {
 	return (
 		<GEL brand={brand}>
-			<Intopia ignore />
 			<h2>General merge</h2>
@@ -14,0 +11,0 @@ <Code>{`overrideReconciler(

examples/98-getLabel.js

@@ -7,8 +7,5 @@ /** @jsx jsx */
 
-import { Intopia } from '../../../helpers/example/components/Intopia.js';
-
 function Example({ brand }) {
 	return (
 		<GEL brand={brand}>
-			<Intopia ignore />
 			<h2>Labels with strings</h2>
@@ -15,0 +12,0 @@ <Code>{`getLabel('prefix', { look: 'primary', label: 'new label' })`}</Code>

package.json

 {
 	"name": "@westpac/core",
-	"version": "1.0.1",
-	"description": "Core components for the westpac GEL design language",
+	"version": "1.1.0",
+	"description": "Core components for the Westpac GEL Design System",
 	"repository": "https://github.com/WestpacGEL/GEL/tree/master/components/core",
@@ -11,2 +11,8 @@ "blender": {
 	},
+	"components": [
+		{
+			"name": "GEL",
+			"src": "GEL.js"
+		}
+	],
 	"author": "Westpac GEL Team <[e-mail]>",
@@ -23,2 +29,17 @@ "contributors": [
 			"url": "http://jossmackison.me"
+		},
+		{
+			"name": "Jonathan Stening",
+			"email": "[e-mail]",
+			"url": "http://jonathanstening.com"
+		},
+		{
+			"name": "Jeremy Ortiz",
+			"email": "[e-mail]",
+			"url": "https://www.jeremyortiz.io/"
+		},
+		{
+			"name": "Flore Laforge",
+			"email": "[e-mail]",
+			"url": "http://florelaforge.com/"
 		}
@@ -43,7 +64,12 @@ ],
 		"@babel/runtime": "^7.9.6",
+		"@emotion/cache": "^10.0.29",
 		"@emotion/core": "^10.0.28",
 		"@emotion/weak-memoize": "^0.2.5",
+		"classnames": "^2.2.6",
 		"color": "^3.1.2",
+		"core-js": "^3.6.5",
 		"facepaint": "^1.2.1",
+		"lodash.get": "^4.4.2",
 		"lodash.mergewith": "^4.6.2",
+		"lodash.set": "^4.3.2",
 		"prop-types": "^15.7.2",
@@ -56,4 +82,4 @@ "react-is": "^16.12.0"
 	"devDependencies": {
-		"@westpac/button": "*",
-		"@westpac/text-input": ">1.0.0-alpha",
+		"@westpac/button": "^1.0.0",
+		"@westpac/text-input": "^1.0.0",
 		"cypress": "^4.5.0",
@@ -60,0 +86,0 @@ "react": "^16.13.1",

src/Core.js

 /** @jsx jsx */
 
-import { jsx } from '@emotion/core';
+import { jsx, CacheProvider } from '@emotion/core';
+import { useState } from 'react';
+import createCache from '@emotion/cache';
+import 'core-js/features/weak-set';
 
@@ -8,3 +11,49 @@ import { useBrand } from './Brand';
 
-export const Core = ({ noReset, children }) => {
+const coreLabel = 'core';
+const seen = new WeakSet();
+
+const AddRootClass = ({ children }) => {
+	let [cache] = useState(() => {
+		return createCache({
+			stylisPlugins: [
+				// Prepend all CSS selectors that are children of the GEL wrapper (Core) with `.GEL` parent class to increase specificity
+				(context, content, selectors, parents, line, column, length, id) => {
+					if (
+						context !== 2 ||
+						id === 107 || //@keyframes
+						seen.has(selectors) ||
+						seen.has(parents) ||
+						!selectors.length ||
+						selectors[0] === ''
+					) {
+						return;
+					}
+
+					seen.add(selectors);
+
+					// Prepend selector with `.GEL `
+					for (let i = 0; i < selectors.length; i++) {
+						/**
+						 * Don't process the following...
+						 * 1. `html` or `body` selectors, possible if styles are passed to Emotion's `<Global />` component within the `<GEL>` wrapper (e.g. <GEL><Global styles={{ 'body': { margin: 0 } }} /></GEL>)
+						 * 2. Core components (we don't want to increase Core's specificity)
+						 * 3. Selectors already prepended with `.GEL `
+						 */
+						if (
+							!selectors[i].includes('html') /* 1 */ &&
+							!selectors[i].includes('body') /* 1 */ &&
+							!selectors[i].includes(`-${coreLabel}`) /* 2 */ &&
+							!selectors[i].includes('.GEL ') /* 3 */
+						) {
+							selectors[i] = `.GEL ${selectors[i]}`;
+						}
+					}
+				},
+			],
+		});
+	});
+	return <CacheProvider value={cache}>{children}</CacheProvider>;
+};
+
+export const Core = ({ noReset, noScope, children }) => {
 	const { COLORS, TYPE, PACKS } = useBrand();
@@ -14,4 +63,5 @@
 		<div
+			className="GEL"
 			css={{
-				label: 'Core',
+				label: coreLabel,
 				lineHeight: 1.428571429,
@@ -21,20 +71,24 @@ color: COLORS.text,
 				...TYPE.bodyFont[400],
-				'& *:focus': {
+
+				'*:focus': {
 					...PACKS.focus,
 				},
-				'& [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring, button:-moz-focusring': {
-					// button:focus because of normalize reset (needs higher specificity)
+				// Also apply to the following selectors to increase specificity (against normalize reset)
+				'button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring': {
 					...PACKS.focus,
 				},
-				'& *::selection': {
+				'[tabindex="-1"]:focus': {
+					outline: '0 !important',
+				},
+				'& ::selection': {
 					backgroundColor: COLORS.tints.primary20,
 				},
 				'&': {
-					...(noReset ? null : reset),
+					...(!noReset && reset),
 				},
 			}}
 		>
-			{children}
+			{noScope ? children : <AddRootClass>{children}</AddRootClass>}
 		</div>
 	);
 };

src/GEL.js

@@ -10,3 +10,3 @@ /** @jsx jsx */
 
-export const GEL = ({ brand, noReset, children, ...props }) => {
+export const GEL = ({ brand, noReset, noScope, children, ...props }) => {
 	useFocus();
@@ -16,3 +16,5 @@
 		<BrandContext.Provider value={brand} {...props}>
-			<Core noReset={noReset}>{children}</Core>
+			<Core noReset={noReset} noScope={noScope}>
+				{children}
+			</Core>
 		</BrandContext.Provider>
@@ -24,3 +26,4 @@ );
 	noReset: PropTypes.bool,
+	noScope: PropTypes.bool,
 	brand: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
 };

src/index.js

@@ -5,2 +5,3 @@ export { jsx, css, keyframes, Global, ClassNames } from '@emotion/core';
 export { useManagedState } from './useManagedState';
+export { getModifier, styleReconciler, formatClassName, titleCase } from './blenderUtils';
 export { BrandContext, useBrand } from './Brand'; // We need to export the context object for class components
@@ -15,1 +16,4 @@ export { useMediaQuery } from './useMediaQuery';
 export { GEL } from './GEL';
+
+import classNames from 'classnames';
+export { classNames };

src/reset.js

@@ -5,11 +5,13 @@ /** @jsx jsx */
 
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+/* Note: The following Normalize styles were not included, they would apply at a document level (outside of our GEL wrapper)...
+html {
+	line-height: 1.15;
+	-webkit-text-size-adjust: 100%;
+}
+body {
+	margin: 0;
+} 
+*/
 export const reset = css`
-	/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
-	html {
-		line-height: 1.15;
-		-webkit-text-size-adjust: 100%;
-	}
-	body {
-		margin: 0;
-	}
 	main {
@@ -86,19 +88,19 @@ display: block;
 	}
+	button,
 	[type='button'],
 	[type='reset'],
-	[type='submit'],
-	button {
+	[type='submit'] {
 		-webkit-appearance: button;
 	}
+	button::-moz-focus-inner,
 	[type='button']::-moz-focus-inner,
 	[type='reset']::-moz-focus-inner,
-	[type='submit']::-moz-focus-inner,
-	button::-moz-focus-inner {
+	[type='submit']::-moz-focus-inner {
 		border-style: none;
 		padding: 0;
 	}
+	button:-moz-focusring,
 	[type='button']:-moz-focusring,
 	[type='reset']:-moz-focusring,
-	[type='submit']:-moz-focusring,
-	button:-moz-focusring {
+	[type='submit']:-moz-focusring {
 		outline: 1px dotted ButtonText;
@@ -105,0 +107,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

878613

increased by14.22%

Number of package files

79

increased by21.54%

Lines of code

4662

increased by35.6%

Worsened metrics

Dependency count

14

increased by55.56%

Dependency changes

• + Added@emotion/cache@^10.0.29

• + Addedclassnames@^2.2.6

• + Addedcore-js@^3.6.5

• + Addedlodash.get@^4.4.2

• + Addedlodash.set@^4.3.2

• + Addedclassnames@2.5.1(transitive)

• + Addedcore-js@3.39.0(transitive)

• + Addedlodash.get@4.4.2(transitive)

• + Addedlodash.set@4.3.2(transitive)