Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@westpac/core

Package Overview
Dependencies
Maintainers
5
Versions
11
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@westpac/core - npm Package Compare versions

Comparing version 1.1.0 to 2.0.0

blender/script.js
examples/00-normalize-disabled.js
examples/00-normalize-enabled.js
examples/03-CSS-selectors.js
examples/05-focus.js
examples/10-tokens-brand.js
examples/20-tokens-colors.js
examples/30-tokens-spacing.js
examples/40-tokens-layout.js
examples/50-tokens-type.js
examples/60-tokens-packs.js
examples/70-useFonts.js
examples/71-useMediaQuery.js
examples/72-useInstanceId.js
examples/80-mergeWith.js
examples/85-devWarning.js
examples/assets/source-sans-pro-v14-latin-600.woff
examples/assets/source-sans-pro-v14-latin-600.woff2
examples/assets/source-sans-pro-v14-latin-700.woff
examples/assets/source-sans-pro-v14-latin-700.woff2
examples/assets/source-sans-pro-v14-latin-regular.woff
examples/assets/source-sans-pro-v14-latin-regular.woff2
src/normalize.js
yarn-error.log

8

CHANGELOG.md
# @westpac/core
## 2.0.0
### Major Changes
- 6a9ef63b: - Remove .GEL parent class specificity solution
- Normalize CSS applied to components directly as needed
- Normalize.css available an opt-in via boolean prop on `<GEL />`, applied at global document scope if enabled
## 1.1.0

@@ -4,0 +12,0 @@

7

demos/design/brand-font.js

@@ -37,2 +37,7 @@ /** @jsx jsx */

],
RAMS: [
{ name: 'Source Sans Pro Regular', weight: 400 },
{ name: 'Source Sans Pro Semi-bold', weight: 600 },
{ name: 'Source Sans Pro Bold', weight: 700 },
],
};

@@ -43,3 +48,3 @@

<Body>
{brandFontMap[BRAND].map((font, i) => (
{brandFontMap[BRAND.code].map((font, i) => (
<Fragment key={i}>

@@ -46,0 +51,0 @@ <p>{font.name}</p>

97

dist/core.browser.cjs.js

@@ -21,4 +21,2 @@ 'use strict';

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'));

@@ -412,3 +410,3 @@ var classnames = _interopDefault(require('classnames'));

function _templateObject() {
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"]);
var data = _taggedTemplateLiteral(["\n\t/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */\n\n\t/* Document\n\t========================================================================== */\n\n\t/**\n\t * 1. Correct the line height in all browsers.\n\t * 2. Prevent adjustments of font size after orientation changes in iOS.\n\t */\n\n\thtml {\n\t\tline-height: 1.15; /* 1 */\n\t\t-webkit-text-size-adjust: 100%; /* 2 */\n\t}\n\n\t/* Sections\n\t========================================================================== */\n\n\t/**\n\t * Remove the margin in all browsers.\n\t */\n\n\tbody {\n\t\tmargin: 0;\n\t}\n\n\t/**\n\t * Render the 'main' element consistently in IE.\n\t */\n\n\tmain {\n\t\tdisplay: block;\n\t}\n\n\t/**\n\t * Correct the font size and margin on 'h1' elements within 'section' and\n\t * 'article' contexts in Chrome, Firefox, and Safari.\n\t */\n\n\th1 {\n\t\tfont-size: 2em;\n\t\tmargin: 0.67em 0;\n\t}\n\n\t/* Grouping content\n\t========================================================================== */\n\n\t/**\n\t * 1. Add the correct box sizing in Firefox.\n\t * 2. Show the overflow in Edge and IE.\n\t */\n\n\thr {\n\t\tbox-sizing: content-box; /* 1 */\n\t\theight: 0; /* 1 */\n\t\toverflow: visible; /* 2 */\n\t}\n\n\t/**\n\t * 1. Correct the inheritance and scaling of font size in all browsers.\n\t * 2. Correct the odd 'em' font sizing in all browsers.\n\t */\n\n\tpre {\n\t\tfont-family: monospace, monospace; /* 1 */\n\t\tfont-size: 1em; /* 2 */\n\t}\n\n\t/* Text-level semantics\n\t========================================================================== */\n\n\t/**\n\t * Remove the gray background on active links in IE 10.\n\t */\n\n\ta {\n\t\tbackground-color: transparent;\n\t}\n\n\t/**\n\t * 1. Remove the bottom border in Chrome 57-\n\t * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n\t */\n\n\tabbr[title] {\n\t\tborder-bottom: none; /* 1 */\n\t\ttext-decoration: underline; /* 2 */\n\t\ttext-decoration: underline dotted; /* 2 */\n\t}\n\n\t/**\n\t * Add the correct font weight in Chrome, Edge, and Safari.\n\t */\n\n\tb,\n\tstrong {\n\t\tfont-weight: bolder;\n\t}\n\n\t/**\n\t * 1. Correct the inheritance and scaling of font size in all browsers.\n\t * 2. Correct the odd 'em' font sizing in all browsers.\n\t */\n\n\tcode,\n\tkbd,\n\tsamp {\n\t\tfont-family: monospace, monospace; /* 1 */\n\t\tfont-size: 1em; /* 2 */\n\t}\n\n\t/**\n\t * Add the correct font size in all browsers.\n\t */\n\n\tsmall {\n\t\tfont-size: 80%;\n\t}\n\n\t/**\n\t * Prevent 'sub' and 'sup' elements from affecting the line height in\n\t * all browsers.\n\t */\n\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\n\tsub {\n\t\tbottom: -0.25em;\n\t}\n\n\tsup {\n\t\ttop: -0.5em;\n\t}\n\n\t/* Embedded content\n\t========================================================================== */\n\n\t/**\n\t * Remove the border on images inside links in IE 10.\n\t */\n\n\timg {\n\t\tborder-style: none;\n\t}\n\n\t/* Forms\n\t========================================================================== */\n\n\t/**\n\t * 1. Change the font styles in all browsers.\n\t * 2. Remove the margin in Firefox and Safari.\n\t */\n\n\tbutton,\n\tinput,\n\toptgroup,\n\tselect,\n\ttextarea {\n\t\tfont-family: inherit; /* 1 */\n\t\tfont-size: 100%; /* 1 */\n\t\tline-height: 1.15; /* 1 */\n\t\tmargin: 0; /* 2 */\n\t}\n\n\t/**\n\t * Show the overflow in IE.\n\t * 1. Show the overflow in Edge.\n\t */\n\n\tbutton,\n\tinput {\n\t\t/* 1 */\n\t\toverflow: visible;\n\t}\n\n\t/**\n\t * Remove the inheritance of text transform in Edge, Firefox, and IE.\n\t * 1. Remove the inheritance of text transform in Firefox.\n\t */\n\n\tbutton,\n\tselect {\n\t\t/* 1 */\n\t\ttext-transform: none;\n\t}\n\n\t/**\n\t * Correct the inability to style clickable types in iOS and Safari.\n\t */\n\n\tbutton,\n\t[type='button'],\n\t[type='reset'],\n\t[type='submit'] {\n\t\t-webkit-appearance: button;\n\t}\n\n\t/**\n\t * Remove the inner border and padding in Firefox.\n\t */\n\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\n\t/**\n\t * Restore the focus styles unset by the previous rule.\n\t */\n\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\n\t/**\n\t * Correct the padding in Firefox.\n\t */\n\n\tfieldset {\n\t\tpadding: 0.35em 0.75em 0.625em;\n\t}\n\n\t/**\n\t * 1. Correct the text wrapping in Edge and IE.\n\t * 2. Correct the color inheritance from 'fieldset' elements in IE.\n\t * 3. Remove the padding so developers are not caught out when they zero out\n\t * 'fieldset' elements in all browsers.\n\t */\n\n\tlegend {\n\t\tbox-sizing: border-box; /* 1 */\n\t\tcolor: inherit; /* 2 */\n\t\tdisplay: table; /* 1 */\n\t\tmax-width: 100%; /* 1 */\n\t\tpadding: 0; /* 3 */\n\t\twhite-space: normal; /* 1 */\n\t}\n\n\t/**\n\t * Add the correct vertical alignment in Chrome, Firefox, and Opera.\n\t */\n\n\tprogress {\n\t\tvertical-align: baseline;\n\t}\n\n\t/**\n\t * Remove the default vertical scrollbar in IE 10+.\n\t */\n\n\ttextarea {\n\t\toverflow: auto;\n\t}\n\n\t/**\n\t * 1. Add the correct box sizing in IE 10.\n\t * 2. Remove the padding in IE 10.\n\t */\n\n\t[type='checkbox'],\n\t[type='radio'] {\n\t\tbox-sizing: border-box; /* 1 */\n\t\tpadding: 0; /* 2 */\n\t}\n\n\t/**\n\t * Correct the cursor style of increment and decrement buttons in Chrome.\n\t */\n\n\t[type='number']::-webkit-inner-spin-button,\n\t[type='number']::-webkit-outer-spin-button {\n\t\theight: auto;\n\t}\n\n\t/**\n\t * 1. Correct the odd appearance in Chrome and Safari.\n\t * 2. Correct the outline style in Safari.\n\t */\n\n\t[type='search'] {\n\t\t-webkit-appearance: textfield; /* 1 */\n\t\toutline-offset: -2px; /* 2 */\n\t}\n\n\t/**\n\t * Remove the inner padding in Chrome and Safari on macOS.\n\t */\n\n\t[type='search']::-webkit-search-decoration {\n\t\t-webkit-appearance: none;\n\t}\n\n\t/**\n\t * 1. Correct the inability to style clickable types in iOS and Safari.\n\t * 2. Change font properties to 'inherit' in Safari.\n\t */\n\n\t::-webkit-file-upload-button {\n\t\t-webkit-appearance: button; /* 1 */\n\t\tfont: inherit; /* 2 */\n\t}\n\n\t/* Interactive\n\t========================================================================== */\n\n\t/*\n\t* Add the correct display in Edge, IE 10+, and Firefox.\n\t*/\n\n\tdetails {\n\t\tdisplay: block;\n\t}\n\n\t/*\n\t* Add the correct display in all browsers.\n\t*/\n\n\tsummary {\n\t\tdisplay: list-item;\n\t}\n\n\t/* Misc\n\t========================================================================== */\n\n\t/**\n\t * Add the correct display in IE 10+.\n\t */\n\n\ttemplate {\n\t\tdisplay: none;\n\t}\n\n\t/**\n\t * Add the correct display in IE 10.\n\t */\n\n\t[hidden] {\n\t\tdisplay: none;\n\t}\n"]);

@@ -421,71 +419,11 @@ _templateObject = function _templateObject() {

}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
var normalize = core.css(_templateObject());
/* 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());
function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
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 coreLabel = 'core';
var seen = new WeakSet();
var Core = function Core(_ref) {
var normalize$1 = _ref.normalize,
children = _ref.children;
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(),

@@ -496,6 +434,8 @@ COLORS = _useBrand.COLORS,

return core.jsx("div", {
return core.jsx(react.Fragment, null, core.jsx(core.Global, {
styles: normalize$1 && normalize
}), core.jsx("div", {
className: "GEL",
css: _objectSpread$1(_objectSpread$1({
label: coreLabel,
label: 'core',
lineHeight: 1.428571429,

@@ -513,6 +453,5 @@ color: COLORS.text,

backgroundColor: COLORS.tints.primary20
},
'&': _objectSpread$1({}, !noReset && reset)
}
})
}, noScope ? children : core.jsx(AddRootClass, null, children));
}, children));
};

@@ -522,6 +461,5 @@

var brand = _ref.brand,
noReset = _ref.noReset,
noScope = _ref.noScope,
normalize = _ref.normalize,
children = _ref.children,
props = _objectWithoutProperties(_ref, ["brand", "noReset", "noScope", "children"]);
props = _objectWithoutProperties(_ref, ["brand", "normalize", "children"]);

@@ -532,11 +470,12 @@ useFocus();

}, props), core.jsx(Core, {
noReset: noReset,
noScope: noScope
normalize: normalize
}, children));
};
GEL.propTypes = {
noReset: PropTypes.bool,
noScope: PropTypes.bool,
normalize: PropTypes.bool,
brand: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
};
GEL.defaultProps = {
normalize: false
};

@@ -543,0 +482,0 @@ Object.defineProperty(exports, 'ClassNames', {

101

dist/core.browser.esm.js

@@ -1,2 +0,2 @@

import { css, jsx, CacheProvider } from '@emotion/core';
import { css, jsx, Global } from '@emotion/core';
export { ClassNames, Global, css, jsx, keyframes } from '@emotion/core';

@@ -6,3 +6,3 @@ import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';

import mergeWithOrg from 'lodash.mergewith';
import { useRef, useState, createContext, useContext } from 'react';
import { useRef, useState, createContext, useContext, Fragment } from 'react';
import _toConsumableArray from '@babel/runtime/helpers/esm/toConsumableArray';

@@ -17,4 +17,2 @@ import get from 'lodash.get';

import PropTypes from 'prop-types';
import createCache from '@emotion/cache';
import 'core-js/features/weak-set';
import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';

@@ -408,3 +406,3 @@ export { default as classNames } from 'classnames';

function _templateObject() {
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"]);
var data = _taggedTemplateLiteral(["\n\t/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */\n\n\t/* Document\n\t========================================================================== */\n\n\t/**\n\t * 1. Correct the line height in all browsers.\n\t * 2. Prevent adjustments of font size after orientation changes in iOS.\n\t */\n\n\thtml {\n\t\tline-height: 1.15; /* 1 */\n\t\t-webkit-text-size-adjust: 100%; /* 2 */\n\t}\n\n\t/* Sections\n\t========================================================================== */\n\n\t/**\n\t * Remove the margin in all browsers.\n\t */\n\n\tbody {\n\t\tmargin: 0;\n\t}\n\n\t/**\n\t * Render the 'main' element consistently in IE.\n\t */\n\n\tmain {\n\t\tdisplay: block;\n\t}\n\n\t/**\n\t * Correct the font size and margin on 'h1' elements within 'section' and\n\t * 'article' contexts in Chrome, Firefox, and Safari.\n\t */\n\n\th1 {\n\t\tfont-size: 2em;\n\t\tmargin: 0.67em 0;\n\t}\n\n\t/* Grouping content\n\t========================================================================== */\n\n\t/**\n\t * 1. Add the correct box sizing in Firefox.\n\t * 2. Show the overflow in Edge and IE.\n\t */\n\n\thr {\n\t\tbox-sizing: content-box; /* 1 */\n\t\theight: 0; /* 1 */\n\t\toverflow: visible; /* 2 */\n\t}\n\n\t/**\n\t * 1. Correct the inheritance and scaling of font size in all browsers.\n\t * 2. Correct the odd 'em' font sizing in all browsers.\n\t */\n\n\tpre {\n\t\tfont-family: monospace, monospace; /* 1 */\n\t\tfont-size: 1em; /* 2 */\n\t}\n\n\t/* Text-level semantics\n\t========================================================================== */\n\n\t/**\n\t * Remove the gray background on active links in IE 10.\n\t */\n\n\ta {\n\t\tbackground-color: transparent;\n\t}\n\n\t/**\n\t * 1. Remove the bottom border in Chrome 57-\n\t * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n\t */\n\n\tabbr[title] {\n\t\tborder-bottom: none; /* 1 */\n\t\ttext-decoration: underline; /* 2 */\n\t\ttext-decoration: underline dotted; /* 2 */\n\t}\n\n\t/**\n\t * Add the correct font weight in Chrome, Edge, and Safari.\n\t */\n\n\tb,\n\tstrong {\n\t\tfont-weight: bolder;\n\t}\n\n\t/**\n\t * 1. Correct the inheritance and scaling of font size in all browsers.\n\t * 2. Correct the odd 'em' font sizing in all browsers.\n\t */\n\n\tcode,\n\tkbd,\n\tsamp {\n\t\tfont-family: monospace, monospace; /* 1 */\n\t\tfont-size: 1em; /* 2 */\n\t}\n\n\t/**\n\t * Add the correct font size in all browsers.\n\t */\n\n\tsmall {\n\t\tfont-size: 80%;\n\t}\n\n\t/**\n\t * Prevent 'sub' and 'sup' elements from affecting the line height in\n\t * all browsers.\n\t */\n\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\n\tsub {\n\t\tbottom: -0.25em;\n\t}\n\n\tsup {\n\t\ttop: -0.5em;\n\t}\n\n\t/* Embedded content\n\t========================================================================== */\n\n\t/**\n\t * Remove the border on images inside links in IE 10.\n\t */\n\n\timg {\n\t\tborder-style: none;\n\t}\n\n\t/* Forms\n\t========================================================================== */\n\n\t/**\n\t * 1. Change the font styles in all browsers.\n\t * 2. Remove the margin in Firefox and Safari.\n\t */\n\n\tbutton,\n\tinput,\n\toptgroup,\n\tselect,\n\ttextarea {\n\t\tfont-family: inherit; /* 1 */\n\t\tfont-size: 100%; /* 1 */\n\t\tline-height: 1.15; /* 1 */\n\t\tmargin: 0; /* 2 */\n\t}\n\n\t/**\n\t * Show the overflow in IE.\n\t * 1. Show the overflow in Edge.\n\t */\n\n\tbutton,\n\tinput {\n\t\t/* 1 */\n\t\toverflow: visible;\n\t}\n\n\t/**\n\t * Remove the inheritance of text transform in Edge, Firefox, and IE.\n\t * 1. Remove the inheritance of text transform in Firefox.\n\t */\n\n\tbutton,\n\tselect {\n\t\t/* 1 */\n\t\ttext-transform: none;\n\t}\n\n\t/**\n\t * Correct the inability to style clickable types in iOS and Safari.\n\t */\n\n\tbutton,\n\t[type='button'],\n\t[type='reset'],\n\t[type='submit'] {\n\t\t-webkit-appearance: button;\n\t}\n\n\t/**\n\t * Remove the inner border and padding in Firefox.\n\t */\n\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\n\t/**\n\t * Restore the focus styles unset by the previous rule.\n\t */\n\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\n\t/**\n\t * Correct the padding in Firefox.\n\t */\n\n\tfieldset {\n\t\tpadding: 0.35em 0.75em 0.625em;\n\t}\n\n\t/**\n\t * 1. Correct the text wrapping in Edge and IE.\n\t * 2. Correct the color inheritance from 'fieldset' elements in IE.\n\t * 3. Remove the padding so developers are not caught out when they zero out\n\t * 'fieldset' elements in all browsers.\n\t */\n\n\tlegend {\n\t\tbox-sizing: border-box; /* 1 */\n\t\tcolor: inherit; /* 2 */\n\t\tdisplay: table; /* 1 */\n\t\tmax-width: 100%; /* 1 */\n\t\tpadding: 0; /* 3 */\n\t\twhite-space: normal; /* 1 */\n\t}\n\n\t/**\n\t * Add the correct vertical alignment in Chrome, Firefox, and Opera.\n\t */\n\n\tprogress {\n\t\tvertical-align: baseline;\n\t}\n\n\t/**\n\t * Remove the default vertical scrollbar in IE 10+.\n\t */\n\n\ttextarea {\n\t\toverflow: auto;\n\t}\n\n\t/**\n\t * 1. Add the correct box sizing in IE 10.\n\t * 2. Remove the padding in IE 10.\n\t */\n\n\t[type='checkbox'],\n\t[type='radio'] {\n\t\tbox-sizing: border-box; /* 1 */\n\t\tpadding: 0; /* 2 */\n\t}\n\n\t/**\n\t * Correct the cursor style of increment and decrement buttons in Chrome.\n\t */\n\n\t[type='number']::-webkit-inner-spin-button,\n\t[type='number']::-webkit-outer-spin-button {\n\t\theight: auto;\n\t}\n\n\t/**\n\t * 1. Correct the odd appearance in Chrome and Safari.\n\t * 2. Correct the outline style in Safari.\n\t */\n\n\t[type='search'] {\n\t\t-webkit-appearance: textfield; /* 1 */\n\t\toutline-offset: -2px; /* 2 */\n\t}\n\n\t/**\n\t * Remove the inner padding in Chrome and Safari on macOS.\n\t */\n\n\t[type='search']::-webkit-search-decoration {\n\t\t-webkit-appearance: none;\n\t}\n\n\t/**\n\t * 1. Correct the inability to style clickable types in iOS and Safari.\n\t * 2. Change font properties to 'inherit' in Safari.\n\t */\n\n\t::-webkit-file-upload-button {\n\t\t-webkit-appearance: button; /* 1 */\n\t\tfont: inherit; /* 2 */\n\t}\n\n\t/* Interactive\n\t========================================================================== */\n\n\t/*\n\t* Add the correct display in Edge, IE 10+, and Firefox.\n\t*/\n\n\tdetails {\n\t\tdisplay: block;\n\t}\n\n\t/*\n\t* Add the correct display in all browsers.\n\t*/\n\n\tsummary {\n\t\tdisplay: list-item;\n\t}\n\n\t/* Misc\n\t========================================================================== */\n\n\t/**\n\t * Add the correct display in IE 10+.\n\t */\n\n\ttemplate {\n\t\tdisplay: none;\n\t}\n\n\t/**\n\t * Add the correct display in IE 10.\n\t */\n\n\t[hidden] {\n\t\tdisplay: none;\n\t}\n"]);

@@ -417,71 +415,11 @@ _templateObject = function _templateObject() {

}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
var normalize = css(_templateObject());
/* 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());
function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
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 coreLabel = 'core';
var seen = new WeakSet();
var Core = function Core(_ref) {
var normalize$1 = _ref.normalize,
children = _ref.children;
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(),

@@ -492,6 +430,8 @@ COLORS = _useBrand.COLORS,

return jsx("div", {
return jsx(Fragment, null, jsx(Global, {
styles: normalize$1 && normalize
}), jsx("div", {
className: "GEL",
css: _objectSpread$1(_objectSpread$1({
label: coreLabel,
label: 'core',
lineHeight: 1.428571429,

@@ -509,6 +449,5 @@ color: COLORS.text,

backgroundColor: COLORS.tints.primary20
},
'&': _objectSpread$1({}, !noReset && reset)
}
})
}, noScope ? children : jsx(AddRootClass, null, children));
}, children));
};

@@ -518,6 +457,5 @@

var brand = _ref.brand,
noReset = _ref.noReset,
noScope = _ref.noScope,
normalize = _ref.normalize,
children = _ref.children,
props = _objectWithoutProperties(_ref, ["brand", "noReset", "noScope", "children"]);
props = _objectWithoutProperties(_ref, ["brand", "normalize", "children"]);

@@ -528,12 +466,13 @@ useFocus();

}, props), jsx(Core, {
noReset: noReset,
noScope: noScope
normalize: normalize
}, children));
};
GEL.propTypes = {
noReset: PropTypes.bool,
noScope: PropTypes.bool,
normalize: PropTypes.bool,
brand: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
};
GEL.defaultProps = {
normalize: false
};
export { BrandContext, GEL, asArray, cleanClassName, devWarning, formatClassName, getLabel, getModifier, mergeWith, overrideReconciler, styleReconciler, titleCase, useBrand, useFonts, useInstanceId, useManagedState, useMediaQuery, wrapHandlers };

97

dist/core.cjs.dev.js

@@ -21,4 +21,2 @@ 'use strict';

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'));

@@ -419,3 +417,3 @@ var classnames = _interopDefault(require('classnames'));

function _templateObject() {
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"]);
var data = _taggedTemplateLiteral(["\n\t/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */\n\n\t/* Document\n\t========================================================================== */\n\n\t/**\n\t * 1. Correct the line height in all browsers.\n\t * 2. Prevent adjustments of font size after orientation changes in iOS.\n\t */\n\n\thtml {\n\t\tline-height: 1.15; /* 1 */\n\t\t-webkit-text-size-adjust: 100%; /* 2 */\n\t}\n\n\t/* Sections\n\t========================================================================== */\n\n\t/**\n\t * Remove the margin in all browsers.\n\t */\n\n\tbody {\n\t\tmargin: 0;\n\t}\n\n\t/**\n\t * Render the 'main' element consistently in IE.\n\t */\n\n\tmain {\n\t\tdisplay: block;\n\t}\n\n\t/**\n\t * Correct the font size and margin on 'h1' elements within 'section' and\n\t * 'article' contexts in Chrome, Firefox, and Safari.\n\t */\n\n\th1 {\n\t\tfont-size: 2em;\n\t\tmargin: 0.67em 0;\n\t}\n\n\t/* Grouping content\n\t========================================================================== */\n\n\t/**\n\t * 1. Add the correct box sizing in Firefox.\n\t * 2. Show the overflow in Edge and IE.\n\t */\n\n\thr {\n\t\tbox-sizing: content-box; /* 1 */\n\t\theight: 0; /* 1 */\n\t\toverflow: visible; /* 2 */\n\t}\n\n\t/**\n\t * 1. Correct the inheritance and scaling of font size in all browsers.\n\t * 2. Correct the odd 'em' font sizing in all browsers.\n\t */\n\n\tpre {\n\t\tfont-family: monospace, monospace; /* 1 */\n\t\tfont-size: 1em; /* 2 */\n\t}\n\n\t/* Text-level semantics\n\t========================================================================== */\n\n\t/**\n\t * Remove the gray background on active links in IE 10.\n\t */\n\n\ta {\n\t\tbackground-color: transparent;\n\t}\n\n\t/**\n\t * 1. Remove the bottom border in Chrome 57-\n\t * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n\t */\n\n\tabbr[title] {\n\t\tborder-bottom: none; /* 1 */\n\t\ttext-decoration: underline; /* 2 */\n\t\ttext-decoration: underline dotted; /* 2 */\n\t}\n\n\t/**\n\t * Add the correct font weight in Chrome, Edge, and Safari.\n\t */\n\n\tb,\n\tstrong {\n\t\tfont-weight: bolder;\n\t}\n\n\t/**\n\t * 1. Correct the inheritance and scaling of font size in all browsers.\n\t * 2. Correct the odd 'em' font sizing in all browsers.\n\t */\n\n\tcode,\n\tkbd,\n\tsamp {\n\t\tfont-family: monospace, monospace; /* 1 */\n\t\tfont-size: 1em; /* 2 */\n\t}\n\n\t/**\n\t * Add the correct font size in all browsers.\n\t */\n\n\tsmall {\n\t\tfont-size: 80%;\n\t}\n\n\t/**\n\t * Prevent 'sub' and 'sup' elements from affecting the line height in\n\t * all browsers.\n\t */\n\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\n\tsub {\n\t\tbottom: -0.25em;\n\t}\n\n\tsup {\n\t\ttop: -0.5em;\n\t}\n\n\t/* Embedded content\n\t========================================================================== */\n\n\t/**\n\t * Remove the border on images inside links in IE 10.\n\t */\n\n\timg {\n\t\tborder-style: none;\n\t}\n\n\t/* Forms\n\t========================================================================== */\n\n\t/**\n\t * 1. Change the font styles in all browsers.\n\t * 2. Remove the margin in Firefox and Safari.\n\t */\n\n\tbutton,\n\tinput,\n\toptgroup,\n\tselect,\n\ttextarea {\n\t\tfont-family: inherit; /* 1 */\n\t\tfont-size: 100%; /* 1 */\n\t\tline-height: 1.15; /* 1 */\n\t\tmargin: 0; /* 2 */\n\t}\n\n\t/**\n\t * Show the overflow in IE.\n\t * 1. Show the overflow in Edge.\n\t */\n\n\tbutton,\n\tinput {\n\t\t/* 1 */\n\t\toverflow: visible;\n\t}\n\n\t/**\n\t * Remove the inheritance of text transform in Edge, Firefox, and IE.\n\t * 1. Remove the inheritance of text transform in Firefox.\n\t */\n\n\tbutton,\n\tselect {\n\t\t/* 1 */\n\t\ttext-transform: none;\n\t}\n\n\t/**\n\t * Correct the inability to style clickable types in iOS and Safari.\n\t */\n\n\tbutton,\n\t[type='button'],\n\t[type='reset'],\n\t[type='submit'] {\n\t\t-webkit-appearance: button;\n\t}\n\n\t/**\n\t * Remove the inner border and padding in Firefox.\n\t */\n\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\n\t/**\n\t * Restore the focus styles unset by the previous rule.\n\t */\n\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\n\t/**\n\t * Correct the padding in Firefox.\n\t */\n\n\tfieldset {\n\t\tpadding: 0.35em 0.75em 0.625em;\n\t}\n\n\t/**\n\t * 1. Correct the text wrapping in Edge and IE.\n\t * 2. Correct the color inheritance from 'fieldset' elements in IE.\n\t * 3. Remove the padding so developers are not caught out when they zero out\n\t * 'fieldset' elements in all browsers.\n\t */\n\n\tlegend {\n\t\tbox-sizing: border-box; /* 1 */\n\t\tcolor: inherit; /* 2 */\n\t\tdisplay: table; /* 1 */\n\t\tmax-width: 100%; /* 1 */\n\t\tpadding: 0; /* 3 */\n\t\twhite-space: normal; /* 1 */\n\t}\n\n\t/**\n\t * Add the correct vertical alignment in Chrome, Firefox, and Opera.\n\t */\n\n\tprogress {\n\t\tvertical-align: baseline;\n\t}\n\n\t/**\n\t * Remove the default vertical scrollbar in IE 10+.\n\t */\n\n\ttextarea {\n\t\toverflow: auto;\n\t}\n\n\t/**\n\t * 1. Add the correct box sizing in IE 10.\n\t * 2. Remove the padding in IE 10.\n\t */\n\n\t[type='checkbox'],\n\t[type='radio'] {\n\t\tbox-sizing: border-box; /* 1 */\n\t\tpadding: 0; /* 2 */\n\t}\n\n\t/**\n\t * Correct the cursor style of increment and decrement buttons in Chrome.\n\t */\n\n\t[type='number']::-webkit-inner-spin-button,\n\t[type='number']::-webkit-outer-spin-button {\n\t\theight: auto;\n\t}\n\n\t/**\n\t * 1. Correct the odd appearance in Chrome and Safari.\n\t * 2. Correct the outline style in Safari.\n\t */\n\n\t[type='search'] {\n\t\t-webkit-appearance: textfield; /* 1 */\n\t\toutline-offset: -2px; /* 2 */\n\t}\n\n\t/**\n\t * Remove the inner padding in Chrome and Safari on macOS.\n\t */\n\n\t[type='search']::-webkit-search-decoration {\n\t\t-webkit-appearance: none;\n\t}\n\n\t/**\n\t * 1. Correct the inability to style clickable types in iOS and Safari.\n\t * 2. Change font properties to 'inherit' in Safari.\n\t */\n\n\t::-webkit-file-upload-button {\n\t\t-webkit-appearance: button; /* 1 */\n\t\tfont: inherit; /* 2 */\n\t}\n\n\t/* Interactive\n\t========================================================================== */\n\n\t/*\n\t* Add the correct display in Edge, IE 10+, and Firefox.\n\t*/\n\n\tdetails {\n\t\tdisplay: block;\n\t}\n\n\t/*\n\t* Add the correct display in all browsers.\n\t*/\n\n\tsummary {\n\t\tdisplay: list-item;\n\t}\n\n\t/* Misc\n\t========================================================================== */\n\n\t/**\n\t * Add the correct display in IE 10+.\n\t */\n\n\ttemplate {\n\t\tdisplay: none;\n\t}\n\n\t/**\n\t * Add the correct display in IE 10.\n\t */\n\n\t[hidden] {\n\t\tdisplay: none;\n\t}\n"]);

@@ -428,71 +426,11 @@ _templateObject = function _templateObject() {

}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
var normalize = core.css(_templateObject());
/* 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());
function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
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 coreLabel = 'core';
var seen = new WeakSet();
var Core = function Core(_ref) {
var normalize$1 = _ref.normalize,
children = _ref.children;
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(),

@@ -503,6 +441,8 @@ COLORS = _useBrand.COLORS,

return core.jsx("div", {
return core.jsx(react.Fragment, null, core.jsx(core.Global, {
styles: normalize$1 && normalize
}), core.jsx("div", {
className: "GEL",
css: _objectSpread$1(_objectSpread$1({
label: coreLabel,
label: 'core',
lineHeight: 1.428571429,

@@ -520,6 +460,5 @@ color: COLORS.text,

backgroundColor: COLORS.tints.primary20
},
'&': _objectSpread$1({}, !noReset && reset)
}
})
}, noScope ? children : core.jsx(AddRootClass, null, children));
}, children));
};

@@ -529,6 +468,5 @@

var brand = _ref.brand,
noReset = _ref.noReset,
noScope = _ref.noScope,
normalize = _ref.normalize,
children = _ref.children,
props = _objectWithoutProperties(_ref, ["brand", "noReset", "noScope", "children"]);
props = _objectWithoutProperties(_ref, ["brand", "normalize", "children"]);

@@ -539,11 +477,12 @@ useFocus();

}, props), core.jsx(Core, {
noReset: noReset,
noScope: noScope
normalize: normalize
}, children));
};
GEL.propTypes = {
noReset: PropTypes.bool,
noScope: PropTypes.bool,
normalize: PropTypes.bool,
brand: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
};
GEL.defaultProps = {
normalize: false
};

@@ -550,0 +489,0 @@ Object.defineProperty(exports, 'ClassNames', {

49

dist/core.cjs.prod.js

@@ -11,7 +11,3 @@ "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"), _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() {
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")), _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];

@@ -181,3 +177,3 @@ return mergeWithOrg.apply(void 0, [ {} ].concat(rest));

function _templateObject() {
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" ]);
var data = _taggedTemplateLiteral([ "\n\t/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */\n\n\t/* Document\n\t========================================================================== */\n\n\t/**\n\t * 1. Correct the line height in all browsers.\n\t * 2. Prevent adjustments of font size after orientation changes in iOS.\n\t */\n\n\thtml {\n\t\tline-height: 1.15; /* 1 */\n\t\t-webkit-text-size-adjust: 100%; /* 2 */\n\t}\n\n\t/* Sections\n\t========================================================================== */\n\n\t/**\n\t * Remove the margin in all browsers.\n\t */\n\n\tbody {\n\t\tmargin: 0;\n\t}\n\n\t/**\n\t * Render the 'main' element consistently in IE.\n\t */\n\n\tmain {\n\t\tdisplay: block;\n\t}\n\n\t/**\n\t * Correct the font size and margin on 'h1' elements within 'section' and\n\t * 'article' contexts in Chrome, Firefox, and Safari.\n\t */\n\n\th1 {\n\t\tfont-size: 2em;\n\t\tmargin: 0.67em 0;\n\t}\n\n\t/* Grouping content\n\t========================================================================== */\n\n\t/**\n\t * 1. Add the correct box sizing in Firefox.\n\t * 2. Show the overflow in Edge and IE.\n\t */\n\n\thr {\n\t\tbox-sizing: content-box; /* 1 */\n\t\theight: 0; /* 1 */\n\t\toverflow: visible; /* 2 */\n\t}\n\n\t/**\n\t * 1. Correct the inheritance and scaling of font size in all browsers.\n\t * 2. Correct the odd 'em' font sizing in all browsers.\n\t */\n\n\tpre {\n\t\tfont-family: monospace, monospace; /* 1 */\n\t\tfont-size: 1em; /* 2 */\n\t}\n\n\t/* Text-level semantics\n\t========================================================================== */\n\n\t/**\n\t * Remove the gray background on active links in IE 10.\n\t */\n\n\ta {\n\t\tbackground-color: transparent;\n\t}\n\n\t/**\n\t * 1. Remove the bottom border in Chrome 57-\n\t * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n\t */\n\n\tabbr[title] {\n\t\tborder-bottom: none; /* 1 */\n\t\ttext-decoration: underline; /* 2 */\n\t\ttext-decoration: underline dotted; /* 2 */\n\t}\n\n\t/**\n\t * Add the correct font weight in Chrome, Edge, and Safari.\n\t */\n\n\tb,\n\tstrong {\n\t\tfont-weight: bolder;\n\t}\n\n\t/**\n\t * 1. Correct the inheritance and scaling of font size in all browsers.\n\t * 2. Correct the odd 'em' font sizing in all browsers.\n\t */\n\n\tcode,\n\tkbd,\n\tsamp {\n\t\tfont-family: monospace, monospace; /* 1 */\n\t\tfont-size: 1em; /* 2 */\n\t}\n\n\t/**\n\t * Add the correct font size in all browsers.\n\t */\n\n\tsmall {\n\t\tfont-size: 80%;\n\t}\n\n\t/**\n\t * Prevent 'sub' and 'sup' elements from affecting the line height in\n\t * all browsers.\n\t */\n\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\n\tsub {\n\t\tbottom: -0.25em;\n\t}\n\n\tsup {\n\t\ttop: -0.5em;\n\t}\n\n\t/* Embedded content\n\t========================================================================== */\n\n\t/**\n\t * Remove the border on images inside links in IE 10.\n\t */\n\n\timg {\n\t\tborder-style: none;\n\t}\n\n\t/* Forms\n\t========================================================================== */\n\n\t/**\n\t * 1. Change the font styles in all browsers.\n\t * 2. Remove the margin in Firefox and Safari.\n\t */\n\n\tbutton,\n\tinput,\n\toptgroup,\n\tselect,\n\ttextarea {\n\t\tfont-family: inherit; /* 1 */\n\t\tfont-size: 100%; /* 1 */\n\t\tline-height: 1.15; /* 1 */\n\t\tmargin: 0; /* 2 */\n\t}\n\n\t/**\n\t * Show the overflow in IE.\n\t * 1. Show the overflow in Edge.\n\t */\n\n\tbutton,\n\tinput {\n\t\t/* 1 */\n\t\toverflow: visible;\n\t}\n\n\t/**\n\t * Remove the inheritance of text transform in Edge, Firefox, and IE.\n\t * 1. Remove the inheritance of text transform in Firefox.\n\t */\n\n\tbutton,\n\tselect {\n\t\t/* 1 */\n\t\ttext-transform: none;\n\t}\n\n\t/**\n\t * Correct the inability to style clickable types in iOS and Safari.\n\t */\n\n\tbutton,\n\t[type='button'],\n\t[type='reset'],\n\t[type='submit'] {\n\t\t-webkit-appearance: button;\n\t}\n\n\t/**\n\t * Remove the inner border and padding in Firefox.\n\t */\n\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\n\t/**\n\t * Restore the focus styles unset by the previous rule.\n\t */\n\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\n\t/**\n\t * Correct the padding in Firefox.\n\t */\n\n\tfieldset {\n\t\tpadding: 0.35em 0.75em 0.625em;\n\t}\n\n\t/**\n\t * 1. Correct the text wrapping in Edge and IE.\n\t * 2. Correct the color inheritance from 'fieldset' elements in IE.\n\t * 3. Remove the padding so developers are not caught out when they zero out\n\t * 'fieldset' elements in all browsers.\n\t */\n\n\tlegend {\n\t\tbox-sizing: border-box; /* 1 */\n\t\tcolor: inherit; /* 2 */\n\t\tdisplay: table; /* 1 */\n\t\tmax-width: 100%; /* 1 */\n\t\tpadding: 0; /* 3 */\n\t\twhite-space: normal; /* 1 */\n\t}\n\n\t/**\n\t * Add the correct vertical alignment in Chrome, Firefox, and Opera.\n\t */\n\n\tprogress {\n\t\tvertical-align: baseline;\n\t}\n\n\t/**\n\t * Remove the default vertical scrollbar in IE 10+.\n\t */\n\n\ttextarea {\n\t\toverflow: auto;\n\t}\n\n\t/**\n\t * 1. Add the correct box sizing in IE 10.\n\t * 2. Remove the padding in IE 10.\n\t */\n\n\t[type='checkbox'],\n\t[type='radio'] {\n\t\tbox-sizing: border-box; /* 1 */\n\t\tpadding: 0; /* 2 */\n\t}\n\n\t/**\n\t * Correct the cursor style of increment and decrement buttons in Chrome.\n\t */\n\n\t[type='number']::-webkit-inner-spin-button,\n\t[type='number']::-webkit-outer-spin-button {\n\t\theight: auto;\n\t}\n\n\t/**\n\t * 1. Correct the odd appearance in Chrome and Safari.\n\t * 2. Correct the outline style in Safari.\n\t */\n\n\t[type='search'] {\n\t\t-webkit-appearance: textfield; /* 1 */\n\t\toutline-offset: -2px; /* 2 */\n\t}\n\n\t/**\n\t * Remove the inner padding in Chrome and Safari on macOS.\n\t */\n\n\t[type='search']::-webkit-search-decoration {\n\t\t-webkit-appearance: none;\n\t}\n\n\t/**\n\t * 1. Correct the inability to style clickable types in iOS and Safari.\n\t * 2. Change font properties to 'inherit' in Safari.\n\t */\n\n\t::-webkit-file-upload-button {\n\t\t-webkit-appearance: button; /* 1 */\n\t\tfont: inherit; /* 2 */\n\t}\n\n\t/* Interactive\n\t========================================================================== */\n\n\t/*\n\t* Add the correct display in Edge, IE 10+, and Firefox.\n\t*/\n\n\tdetails {\n\t\tdisplay: block;\n\t}\n\n\t/*\n\t* Add the correct display in all browsers.\n\t*/\n\n\tsummary {\n\t\tdisplay: list-item;\n\t}\n\n\t/* Misc\n\t========================================================================== */\n\n\t/**\n\t * Add the correct display in IE 10+.\n\t */\n\n\ttemplate {\n\t\tdisplay: none;\n\t}\n\n\t/**\n\t * Add the correct display in IE 10.\n\t */\n\n\t[hidden] {\n\t\tdisplay: none;\n\t}\n" ]);
return _templateObject = function() {

@@ -188,3 +184,3 @@ return data;

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ var reset = core.css(_templateObject());
var normalize = core.css(_templateObject());

@@ -214,22 +210,10 @@ function ownKeys$1(object, enumerableOnly) {

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", {
var Core = function(_ref) {
var normalize$1 = _ref.normalize, children = _ref.children, _useBrand = useBrand(), COLORS = _useBrand.COLORS, TYPE = _useBrand.TYPE, PACKS = _useBrand.PACKS;
return core.jsx(react.Fragment, null, core.jsx(core.Global, {
styles: normalize$1 && normalize
}), core.jsx("div", {
className: "GEL",
css: _objectSpread$1(_objectSpread$1({
label: coreLabel,
label: "core",
lineHeight: 1.428571429,

@@ -246,13 +230,11 @@ color: COLORS.text,

backgroundColor: COLORS.tints.primary20
},
"&": _objectSpread$1({}, !noReset && reset)
}
})
}, noScope ? children : core.jsx(AddRootClass, null, children));
}, children));
}, GEL = function(_ref) {
var brand = _ref.brand, noReset = _ref.noReset, noScope = _ref.noScope, children = _ref.children, props = _objectWithoutProperties(_ref, [ "brand", "noReset", "noScope", "children" ]);
var brand = _ref.brand, normalize = _ref.normalize, children = _ref.children, props = _objectWithoutProperties(_ref, [ "brand", "normalize", "children" ]);
return useFocus(), core.jsx(BrandContext.Provider, _extends({
value: brand
}, props), core.jsx(Core, {
noReset: noReset,
noScope: noScope
normalize: normalize
}, children));

@@ -262,5 +244,6 @@ };

GEL.propTypes = {
noReset: PropTypes.bool,
noScope: PropTypes.bool,
normalize: PropTypes.bool,
brand: PropTypes.oneOfType([ PropTypes.object, PropTypes.func ])
}, GEL.defaultProps = {
normalize: !1
}, Object.defineProperty(exports, "ClassNames", {

@@ -267,0 +250,0 @@ enumerable: !0,

101

dist/core.esm.js

@@ -1,2 +0,2 @@

import { css, jsx, CacheProvider } from '@emotion/core';
import { css, jsx, Global } from '@emotion/core';
export { ClassNames, Global, css, jsx, keyframes } from '@emotion/core';

@@ -6,3 +6,3 @@ import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';

import mergeWithOrg from 'lodash.mergewith';
import { useRef, useState, createContext, useContext } from 'react';
import { useRef, useState, createContext, useContext, Fragment } from 'react';
import _toConsumableArray from '@babel/runtime/helpers/esm/toConsumableArray';

@@ -17,4 +17,2 @@ import get from 'lodash.get';

import PropTypes from 'prop-types';
import createCache from '@emotion/cache';
import 'core-js/features/weak-set';
import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';

@@ -415,3 +413,3 @@ export { default as classNames } from 'classnames';

function _templateObject() {
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"]);
var data = _taggedTemplateLiteral(["\n\t/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */\n\n\t/* Document\n\t========================================================================== */\n\n\t/**\n\t * 1. Correct the line height in all browsers.\n\t * 2. Prevent adjustments of font size after orientation changes in iOS.\n\t */\n\n\thtml {\n\t\tline-height: 1.15; /* 1 */\n\t\t-webkit-text-size-adjust: 100%; /* 2 */\n\t}\n\n\t/* Sections\n\t========================================================================== */\n\n\t/**\n\t * Remove the margin in all browsers.\n\t */\n\n\tbody {\n\t\tmargin: 0;\n\t}\n\n\t/**\n\t * Render the 'main' element consistently in IE.\n\t */\n\n\tmain {\n\t\tdisplay: block;\n\t}\n\n\t/**\n\t * Correct the font size and margin on 'h1' elements within 'section' and\n\t * 'article' contexts in Chrome, Firefox, and Safari.\n\t */\n\n\th1 {\n\t\tfont-size: 2em;\n\t\tmargin: 0.67em 0;\n\t}\n\n\t/* Grouping content\n\t========================================================================== */\n\n\t/**\n\t * 1. Add the correct box sizing in Firefox.\n\t * 2. Show the overflow in Edge and IE.\n\t */\n\n\thr {\n\t\tbox-sizing: content-box; /* 1 */\n\t\theight: 0; /* 1 */\n\t\toverflow: visible; /* 2 */\n\t}\n\n\t/**\n\t * 1. Correct the inheritance and scaling of font size in all browsers.\n\t * 2. Correct the odd 'em' font sizing in all browsers.\n\t */\n\n\tpre {\n\t\tfont-family: monospace, monospace; /* 1 */\n\t\tfont-size: 1em; /* 2 */\n\t}\n\n\t/* Text-level semantics\n\t========================================================================== */\n\n\t/**\n\t * Remove the gray background on active links in IE 10.\n\t */\n\n\ta {\n\t\tbackground-color: transparent;\n\t}\n\n\t/**\n\t * 1. Remove the bottom border in Chrome 57-\n\t * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n\t */\n\n\tabbr[title] {\n\t\tborder-bottom: none; /* 1 */\n\t\ttext-decoration: underline; /* 2 */\n\t\ttext-decoration: underline dotted; /* 2 */\n\t}\n\n\t/**\n\t * Add the correct font weight in Chrome, Edge, and Safari.\n\t */\n\n\tb,\n\tstrong {\n\t\tfont-weight: bolder;\n\t}\n\n\t/**\n\t * 1. Correct the inheritance and scaling of font size in all browsers.\n\t * 2. Correct the odd 'em' font sizing in all browsers.\n\t */\n\n\tcode,\n\tkbd,\n\tsamp {\n\t\tfont-family: monospace, monospace; /* 1 */\n\t\tfont-size: 1em; /* 2 */\n\t}\n\n\t/**\n\t * Add the correct font size in all browsers.\n\t */\n\n\tsmall {\n\t\tfont-size: 80%;\n\t}\n\n\t/**\n\t * Prevent 'sub' and 'sup' elements from affecting the line height in\n\t * all browsers.\n\t */\n\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\n\tsub {\n\t\tbottom: -0.25em;\n\t}\n\n\tsup {\n\t\ttop: -0.5em;\n\t}\n\n\t/* Embedded content\n\t========================================================================== */\n\n\t/**\n\t * Remove the border on images inside links in IE 10.\n\t */\n\n\timg {\n\t\tborder-style: none;\n\t}\n\n\t/* Forms\n\t========================================================================== */\n\n\t/**\n\t * 1. Change the font styles in all browsers.\n\t * 2. Remove the margin in Firefox and Safari.\n\t */\n\n\tbutton,\n\tinput,\n\toptgroup,\n\tselect,\n\ttextarea {\n\t\tfont-family: inherit; /* 1 */\n\t\tfont-size: 100%; /* 1 */\n\t\tline-height: 1.15; /* 1 */\n\t\tmargin: 0; /* 2 */\n\t}\n\n\t/**\n\t * Show the overflow in IE.\n\t * 1. Show the overflow in Edge.\n\t */\n\n\tbutton,\n\tinput {\n\t\t/* 1 */\n\t\toverflow: visible;\n\t}\n\n\t/**\n\t * Remove the inheritance of text transform in Edge, Firefox, and IE.\n\t * 1. Remove the inheritance of text transform in Firefox.\n\t */\n\n\tbutton,\n\tselect {\n\t\t/* 1 */\n\t\ttext-transform: none;\n\t}\n\n\t/**\n\t * Correct the inability to style clickable types in iOS and Safari.\n\t */\n\n\tbutton,\n\t[type='button'],\n\t[type='reset'],\n\t[type='submit'] {\n\t\t-webkit-appearance: button;\n\t}\n\n\t/**\n\t * Remove the inner border and padding in Firefox.\n\t */\n\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\n\t/**\n\t * Restore the focus styles unset by the previous rule.\n\t */\n\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\n\t/**\n\t * Correct the padding in Firefox.\n\t */\n\n\tfieldset {\n\t\tpadding: 0.35em 0.75em 0.625em;\n\t}\n\n\t/**\n\t * 1. Correct the text wrapping in Edge and IE.\n\t * 2. Correct the color inheritance from 'fieldset' elements in IE.\n\t * 3. Remove the padding so developers are not caught out when they zero out\n\t * 'fieldset' elements in all browsers.\n\t */\n\n\tlegend {\n\t\tbox-sizing: border-box; /* 1 */\n\t\tcolor: inherit; /* 2 */\n\t\tdisplay: table; /* 1 */\n\t\tmax-width: 100%; /* 1 */\n\t\tpadding: 0; /* 3 */\n\t\twhite-space: normal; /* 1 */\n\t}\n\n\t/**\n\t * Add the correct vertical alignment in Chrome, Firefox, and Opera.\n\t */\n\n\tprogress {\n\t\tvertical-align: baseline;\n\t}\n\n\t/**\n\t * Remove the default vertical scrollbar in IE 10+.\n\t */\n\n\ttextarea {\n\t\toverflow: auto;\n\t}\n\n\t/**\n\t * 1. Add the correct box sizing in IE 10.\n\t * 2. Remove the padding in IE 10.\n\t */\n\n\t[type='checkbox'],\n\t[type='radio'] {\n\t\tbox-sizing: border-box; /* 1 */\n\t\tpadding: 0; /* 2 */\n\t}\n\n\t/**\n\t * Correct the cursor style of increment and decrement buttons in Chrome.\n\t */\n\n\t[type='number']::-webkit-inner-spin-button,\n\t[type='number']::-webkit-outer-spin-button {\n\t\theight: auto;\n\t}\n\n\t/**\n\t * 1. Correct the odd appearance in Chrome and Safari.\n\t * 2. Correct the outline style in Safari.\n\t */\n\n\t[type='search'] {\n\t\t-webkit-appearance: textfield; /* 1 */\n\t\toutline-offset: -2px; /* 2 */\n\t}\n\n\t/**\n\t * Remove the inner padding in Chrome and Safari on macOS.\n\t */\n\n\t[type='search']::-webkit-search-decoration {\n\t\t-webkit-appearance: none;\n\t}\n\n\t/**\n\t * 1. Correct the inability to style clickable types in iOS and Safari.\n\t * 2. Change font properties to 'inherit' in Safari.\n\t */\n\n\t::-webkit-file-upload-button {\n\t\t-webkit-appearance: button; /* 1 */\n\t\tfont: inherit; /* 2 */\n\t}\n\n\t/* Interactive\n\t========================================================================== */\n\n\t/*\n\t* Add the correct display in Edge, IE 10+, and Firefox.\n\t*/\n\n\tdetails {\n\t\tdisplay: block;\n\t}\n\n\t/*\n\t* Add the correct display in all browsers.\n\t*/\n\n\tsummary {\n\t\tdisplay: list-item;\n\t}\n\n\t/* Misc\n\t========================================================================== */\n\n\t/**\n\t * Add the correct display in IE 10+.\n\t */\n\n\ttemplate {\n\t\tdisplay: none;\n\t}\n\n\t/**\n\t * Add the correct display in IE 10.\n\t */\n\n\t[hidden] {\n\t\tdisplay: none;\n\t}\n"]);

@@ -424,71 +422,11 @@ _templateObject = function _templateObject() {

}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
var normalize = css(_templateObject());
/* 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());
function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
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 coreLabel = 'core';
var seen = new WeakSet();
var Core = function Core(_ref) {
var normalize$1 = _ref.normalize,
children = _ref.children;
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(),

@@ -499,6 +437,8 @@ COLORS = _useBrand.COLORS,

return jsx("div", {
return jsx(Fragment, null, jsx(Global, {
styles: normalize$1 && normalize
}), jsx("div", {
className: "GEL",
css: _objectSpread$1(_objectSpread$1({
label: coreLabel,
label: 'core',
lineHeight: 1.428571429,

@@ -516,6 +456,5 @@ color: COLORS.text,

backgroundColor: COLORS.tints.primary20
},
'&': _objectSpread$1({}, !noReset && reset)
}
})
}, noScope ? children : jsx(AddRootClass, null, children));
}, children));
};

@@ -525,6 +464,5 @@

var brand = _ref.brand,
noReset = _ref.noReset,
noScope = _ref.noScope,
normalize = _ref.normalize,
children = _ref.children,
props = _objectWithoutProperties(_ref, ["brand", "noReset", "noScope", "children"]);
props = _objectWithoutProperties(_ref, ["brand", "normalize", "children"]);

@@ -535,12 +473,13 @@ useFocus();

}, props), jsx(Core, {
noReset: noReset,
noScope: noScope
normalize: normalize
}, children));
};
GEL.propTypes = {
noReset: PropTypes.bool,
noScope: PropTypes.bool,
normalize: PropTypes.bool,
brand: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
};
GEL.defaultProps = {
normalize: false
};
export { BrandContext, GEL, asArray, cleanClassName, devWarning, formatClassName, getLabel, getModifier, mergeWith, overrideReconciler, styleReconciler, titleCase, useBrand, useFonts, useInstanceId, useManagedState, useMediaQuery, wrapHandlers };

101

examples/_utils.js
/** @jsx jsx */
import { jsx, useBrand } from '@westpac/core';
import { Fragment } from 'react';

@@ -26,1 +27,101 @@ export const Code = ({ children }) => {

};
export const NormalizeHtml = () => (
<Fragment>
<main>&lt;main&gt;</main>
<h1>&lt;h1&gt;</h1>
<hr />
<pre>&lt;pre&gt;</pre>
<a href="#">&lt;a&gt;</a>
<br />
<br />
<abbr title="This is a title">&lt;abbr[title]&gt;</abbr>
<br />
<br />
<b>&lt;b&gt;</b> <strong>&lt;strong&gt;</strong>
<br />
<br />
<code>&lt;code&gt;</code> <kbd>&lt;kbd&gt;</kbd> <samp>&lt;samp&gt;</samp>
<br />
<br />
<small>&lt;small&gt;</small>
<br />
<br />
<sub>&lt;sub&gt;</sub>
<br />
<br />
<sup>&lt;sup&gt;</sup>
<br />
<br />
<img
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg=="
width="30"
height="30"
alt=""
/>
<br />
<br />
<button>&lt;button&gt;</button> <button type="button">&lt;button type="button"&gt;</button>{' '}
<button type="reset">&lt;button type="reset"&gt;</button>{' '}
<button type="submit">&lt;button type="submit"&gt;</button>
<br />
<br />
<input defaultValue="&lt;input&gt;" />
<br />
<br />
<select>
<option>&lt;option&gt;</option>
<optgroup label="&lt;optgroup&gt;">
<option>&lt;option&gt;</option>
<option>&lt;option&gt;</option>
</optgroup>
</select>
<br />
<br />
<textarea defaultValue="&lt;textarea&gt;" />
<br />
<br />
<fieldset>&lt;fieldset&gt;</fieldset>
<br />
<fieldset>
<legend>&lt;legend&gt;</legend>
</fieldset>
<br />
<progress>&lt;progress&gt;</progress>
<br />
<br />
<input type="checkbox" htmlFor="example-checkbox" />
<label id="example-checkbox">&lt;input type="checkbox"&gt;</label>
<br />
<br />
<input type="radio" htmlFor="example-radio" />
<label id="example-radio">&lt;input type="radio"&gt;</label>
<br />
<br />
<label id="example-number">&lt;input type="number"&gt;</label>
<br />
<input type="number" htmlFor="example-number" />
<br />
<br />
<label id="example-search">&lt;input type="search"&gt;</label>
<br />
<input type="search" htmlFor="example-search" />
<br />
<br />
<label htmlFor="example-file">::-webkit-file-upload-button</label>
<br />
<input type="file" id="example-file" />
<br />
<br />
<details>&lt;details&gt;</details>
<br />
<details>
<summary>&lt;summary&gt;</summary>
&lt;details&gt;
</details>
<p>&lt;template&gt; (hidden)</p>
<template>&lt;template&gt;</template>
<p>[hidden] (hidden)</p>
<div hidden>[hidden]</div>
</Fragment>
);

14

package.json
{
"name": "@westpac/core",
"version": "1.1.0",
"description": "Core components for the Westpac GEL Design System",
"version": "2.0.0",
"description": "Global functionality and settings essential to the framework",
"homepage": "https://gel.westpacgroup.com.au/design-system",
"repository": "https://github.com/WestpacGEL/GEL/tree/master/components/core",
"blender": {
"recipe": "blender/recipe.js",
"js": "blender/jquery.js",
"js": "blender/script.js",
"jquery": "blender/jquery.js",
"isCore": true

@@ -62,3 +64,2 @@ },

"@babel/runtime": "^7.9.6",
"@emotion/cache": "^10.0.29",
"@emotion/core": "^10.0.28",

@@ -68,3 +69,2 @@ "@emotion/weak-memoize": "^0.2.5",

"color": "^3.1.2",
"core-js": "^3.6.5",
"facepaint": "^1.2.1",

@@ -81,4 +81,4 @@ "lodash.get": "^4.4.2",

"devDependencies": {
"@westpac/button": "^1.0.0",
"@westpac/text-input": "^1.0.0",
"@westpac/button": "^1.2.0",
"@westpac/text-input": "^1.1.0",
"cypress": "^4.5.0",

@@ -85,0 +85,0 @@ "react": "^16.13.1",

2

README.md
# @westpac/core
The core component.
Core component for the Westpac GEL Design System

113

src/Core.js
/** @jsx jsx */
import { jsx, CacheProvider } from '@emotion/core';
import { useState } from 'react';
import createCache from '@emotion/cache';
import 'core-js/features/weak-set';
import { jsx, Global } from '@emotion/core';
import { Fragment } from 'react';
import { useBrand } from './Brand';
import { reset } from './reset';
import { normalize as normalizeCSS } from './normalize';
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 }) => {
export const Core = ({ normalize, children }) => {
const { COLORS, TYPE, PACKS } = useBrand();
return (
<div
className="GEL"
css={{
label: coreLabel,
lineHeight: 1.428571429,
color: COLORS.text,
fontFeatureSettings: '"liga" 1', // Enable OpenType ligatures in IE
...TYPE.bodyFont[400],
<Fragment>
<Global styles={normalize && normalizeCSS} />
<div
className="GEL"
css={{
label: 'core',
lineHeight: 1.428571429,
color: COLORS.text,
fontFeatureSettings: '"liga" 1', // Enable OpenType ligatures in IE
...TYPE.bodyFont[400],
'*:focus': {
...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': {
...PACKS.focus,
},
'[tabindex="-1"]:focus': {
outline: '0 !important',
},
'& ::selection': {
backgroundColor: COLORS.tints.primary20,
},
'&': {
...(!noReset && reset),
},
}}
>
{noScope ? children : <AddRootClass>{children}</AddRootClass>}
</div>
'*:focus': {
...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': {
...PACKS.focus,
},
'[tabindex="-1"]:focus': {
outline: '0 !important',
},
'& ::selection': {
backgroundColor: COLORS.tints.primary20,
},
}}
>
{children}
</div>
</Fragment>
);
};

12

src/GEL.js

@@ -10,3 +10,3 @@ /** @jsx jsx */

export const GEL = ({ brand, noReset, noScope, children, ...props }) => {
export const GEL = ({ brand, normalize, children, ...props }) => {
useFocus();

@@ -16,5 +16,3 @@

<BrandContext.Provider value={brand} {...props}>
<Core noReset={noReset} noScope={noScope}>
{children}
</Core>
<Core normalize={normalize}>{children}</Core>
</BrandContext.Provider>

@@ -25,5 +23,7 @@ );

GEL.propTypes = {
noReset: PropTypes.bool,
noScope: PropTypes.bool,
normalize: PropTypes.bool,
brand: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
};
GEL.defaultProps = {
normalize: false,
};
examples/00-reset.js
examples/01-noReset.js
examples/04-CSS-selectors.js
examples/05-tokens-colors.js
examples/10-tokens-layout.js
examples/20-tokens-spacing.js
examples/30-tokens-type.js
examples/40-tokens-packs.js
examples/50-focus.js
examples/60-useFonts.js
examples/63-useMediaQuery.js
examples/65-useInstanceId.js
examples/70-mergeWith.js
examples/80-devWarning.js
src/reset.js
blender/jquery.js

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc