@spothero/ui 17.0.2-beta.0 → 17.0.3-beta.0

package/dist/components/styles.js

@@ -1,175 +1,153 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 Object.defineProperty(exports, "Accordion", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _styles2.default;
   }
 });
 Object.defineProperty(exports, "Alert", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _styles6.default;
   }
 });
 Object.defineProperty(exports, "Badge", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _styles12.default;
   }
 });
 Object.defineProperty(exports, "Button", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _Button.default;
   }
 });
 Object.defineProperty(exports, "Checkbox", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _styles5.default;
   }
 });
 Object.defineProperty(exports, "Divider", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _Divider.default;
   }
 });
 Object.defineProperty(exports, "GridItem", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _GridItem.default;
   }
 });
 Object.defineProperty(exports, "Heading", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _Heading.default;
   }
 });
 Object.defineProperty(exports, "Input", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _styles9.default;
   }
 });
 Object.defineProperty(exports, "Link", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _Link.default;
   }
 });
 Object.defineProperty(exports, "List", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _styles.default;
   }
 });
 Object.defineProperty(exports, "Modal", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _styles10.default;
   }
 });
 Object.defineProperty(exports, "Popover", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _styles8.default;
   }
 });
 Object.defineProperty(exports, "Radio", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _styles11.default;
   }
 });
 Object.defineProperty(exports, "Select", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _styles4.default;
   }
 });
 Object.defineProperty(exports, "Skeleton", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _Skeleton.default;
   }
 });
 Object.defineProperty(exports, "Spinner", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _Spinner.default;
   }
 });
 Object.defineProperty(exports, "Switch", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _styles7.default;
   }
 });
 Object.defineProperty(exports, "Table", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _Table.default;
   }
 });
 Object.defineProperty(exports, "Tabs", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _styles3.default;
   }
 });
 Object.defineProperty(exports, "Text", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _Text.default;
   }
 });
-
 var _styles = _interopRequireDefault(require("./List/styles"));
-
 var _Table = _interopRequireDefault(require("./Table/Table.styles"));
-
 var _Text = _interopRequireDefault(require("./Text/Text.styles"));
-
 var _Link = _interopRequireDefault(require("./Link/Link.styles"));
-
 var _styles2 = _interopRequireDefault(require("./Accordion/styles"));
-
 var _Button = _interopRequireDefault(require("./Button/Button.styles"));
-
 var _GridItem = _interopRequireDefault(require("./Grid/GridItem.styles"));
-
 var _Spinner = _interopRequireDefault(require("./Spinner/Spinner.styles"));
-
 var _Heading = _interopRequireDefault(require("./Heading/Heading.styles"));
-
 var _Divider = _interopRequireDefault(require("./Divider/Divider.styles"));
-
 var _styles3 = _interopRequireDefault(require("./Tabs/styles"));
-
 var _styles4 = _interopRequireDefault(require("./Select/styles"));
-
 var _styles5 = _interopRequireDefault(require("./Checkbox/styles"));
-
 var _styles6 = _interopRequireDefault(require("./Alert/styles"));
-
 var _styles7 = _interopRequireDefault(require("./Switch/styles"));
-
 var _styles8 = _interopRequireDefault(require("./Popover/styles"));
-
 var _styles9 = _interopRequireDefault(require("./Input/styles"));
-
 var _styles10 = _interopRequireDefault(require("./Modal/styles"));
-
 var _styles11 = _interopRequireDefault(require("./Radio/styles"));
-
 var _Skeleton = _interopRequireDefault(require("./Skeleton/Skeleton.styles"));
-
 var _styles12 = _interopRequireDefault(require("./Badge/styles"));

package/dist/theme/base/breakpoints.js

@@ -4,16 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _themeTools = require("@chakra-ui/theme-tools");
-
 /**
  * The "base" breakpoint is Chakra's default non-responsive value (from 0 upwards).
  * While we don't explicitly enable a "mobile" breakpoint, we can consider "base" and
  * "mobile" the same for all intents and purposes for mobile-first responsive styling.
  * @see https://chakra-ui.com/docs/features/responsive-styles#customizing-breakpoints
  */
-var breakpoints = (0, _themeTools.createBreakpoints)({
+const breakpoints = (0, _themeTools.createBreakpoints)({
   mobileXL: '30rem',
   // 480px
   tablet: '48rem',
@@ -21,7 +19,6 @@ var breakpoints = (0, _themeTools.createBreakpoints)({
   desktop: '64rem',
   // 1024px
   desktopXL: '90rem' // 1440px
-
 });
 var _default = breakpoints;
 exports.default = _default;

package/dist/theme/base/colors.js

@@ -1,32 +1,13 @@
 "use strict";
 
-var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
-
-var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
-
-var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
-
-var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
-
-var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
-
-var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
-
-function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-var white = '#ffffff';
-var black = '#000000';
-var brandBlue = '#0082ff';
-var gray = {
+const white = '#ffffff';
+const black = '#000000';
+const brandBlue = '#0082ff';
+const gray = {
   50: '#f6f7f9',
   100: '#e1e6ec',
   200: '#cbd4de',
@@ -38,7 +19,7 @@ var gray = {
   800: '#2f3f4b',
   900: '#26323c'
 };
-var blue = {
+const blue = {
   50: '#f6fbfd',
   100: '#e6f8fd',
   200: '#c0e9fb',
@@ -50,7 +31,7 @@ var blue = {
   800: '#1735a6',
   900: '#132b7f'
 };
-var navy = {
+const navy = {
   50: '#f4fafc',
   100: '#e4f7fb',
   200: '#bfebf6',
@@ -62,7 +43,7 @@ var navy = {
   800: '#194185',
   900: '#002d5b'
 };
-var green = {
+const green = {
   50: '#ecf8f7',
   100: '#d3f7ef',
   200: '#a4f3d9',
@@ -74,7 +55,7 @@ var green = {
   800: '#11703e',
   900: '#115a35'
 };
-var yellow = {
+const yellow = {
   50: '#f9f5e5',
   100: '#faf0bd',
   200: '#f6e67c',
@@ -86,7 +67,7 @@ var yellow = {
   800: '#8e440e',
   900: '#743710'
 };
-var red = {
+const red = {
   50: '#fdf9f8',
   100: '#fdeef3',
   200: '#fbcee6',
@@ -98,27 +79,33 @@ var red = {
   800: '#b4193c',
   900: '#901530'
 };
-var colors = {
-  primary: _objectSpread(_objectSpread({}, blue), {}, {
+const colors = {
+  primary: {
+    ...blue,
     default: blue['500']
-  }),
-  secondary: _objectSpread(_objectSpread({}, navy), {}, {
+  },
+  secondary: {
+    ...navy,
     default: navy['900']
-  }),
-  gray: _objectSpread(_objectSpread({}, gray), {}, {
+  },
+  gray: {
+    ...gray,
     light: gray['50'],
     medium: gray['200'],
     dark: gray['600']
-  }),
-  red: _objectSpread(_objectSpread({}, red), {}, {
+  },
+  red: {
+    ...red,
     default: red['700']
-  }),
-  green: _objectSpread(_objectSpread({}, green), {}, {
+  },
+  green: {
+    ...green,
     default: green['700']
-  }),
-  yellow: _objectSpread(_objectSpread({}, yellow), {}, {
+  },
+  yellow: {
+    ...yellow,
     default: yellow['400']
-  }),
+  },
   success: green['700'],
   warning: yellow['400'],
   error: red['700'],
@@ -138,11 +125,11 @@ var colors = {
   },
   background: {
     gray: gray['50'],
-    white: white
+    white
   },
-  white: white,
-  black: black,
-  brandBlue: brandBlue
+  white,
+  black,
+  brandBlue
 };
 var _default = colors;
 exports.default = _default;

package/dist/theme/base/index.js

@@ -1,59 +1,53 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 Object.defineProperty(exports, "breakpoints", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _breakpoints.default;
   }
 });
 Object.defineProperty(exports, "colors", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _colors.default;
   }
 });
 Object.defineProperty(exports, "fontSizes", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _typography.fontSizes;
   }
 });
 Object.defineProperty(exports, "fontWeights", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _typography.fontWeights;
   }
 });
 Object.defineProperty(exports, "fonts", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _typography.fonts;
   }
 });
 Object.defineProperty(exports, "sizes", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _sizes.default;
   }
 });
 Object.defineProperty(exports, "zIndices", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _zindices.default;
   }
 });
-
 var _sizes = _interopRequireDefault(require("./sizes"));
-
 var _colors = _interopRequireDefault(require("./colors"));
-
 var _zindices = _interopRequireDefault(require("./zindices"));
-
 var _breakpoints = _interopRequireDefault(require("./breakpoints"));
-
 var _typography = require("./typography");

package/dist/theme/base/sizes.js

@@ -4,16 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var container = {
+const container = {
   base: '100%',
   // 640px
   tablet: '45rem',
   // 720px
   desktop: '72rem' // 1152px
-
 };
-var sizes = {
-  container: container,
+
+const sizes = {
+  container,
   0: '0',
   0.5: '0.125rem',
   // 2px

package/dist/theme/base/typography.js

@@ -4,12 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.fonts = exports.fontWeights = exports.fontSizes = void 0;
-var fonts = {
-  heading: "\"Open Sans\", sans-serif",
-  body: "\"Open Sans\", sans-serif"
+const fonts = {
+  heading: `"Open Sans", sans-serif`,
+  body: `"Open Sans", sans-serif`
 };
 exports.fonts = fonts;
-var fontSizes = {
+const fontSizes = {
   '5xl': '3.5rem',
   // 56px
   '4xl': '3rem',
@@ -29,10 +29,9 @@ var fontSizes = {
   sm: '0.875rem',
   // 14px
   xs: '0.75rem' // 12px
-
 };
 exports.fontSizes = fontSizes;
-var fontWeights = {
+const fontWeights = {
   light: 300,
   normal: 400,
   semibold: 600,

package/dist/theme/base/zindices.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var indices = {
+const indices = {
   hide: -100,
   // equivalent to $z-index-negative in fe-core (https://github.com/spothero/fe-core/blob/main/utils/_defaults.scss)
   auto: 'auto',
@@ -29,7 +29,6 @@ var indices = {
   layer9: 900,
   // equivalent to $z-index-notification in fe-core
   layer10: 1000 // equivalent to $z-index-top in fe-core
-
 };
 var _default = indices;
 exports.default = _default;

package/dist/theme/global.js

@@ -1,21 +1,14 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.LegacyOverrides = exports.Fonts = void 0;
-
-var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _react2 = require("@emotion/react");
-
 var _base = require("./base");
-
-var global = {
+const global = {
   'html, body': {
     color: 'text.primary.light'
   },
@@ -31,22 +24,96 @@ var global = {
 };
 var _default = global;
 exports.default = _default;
+const Fonts = () => /*#__PURE__*/_react.default.createElement(_react2.Global, {
+  styles: `
+            @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');
+            /* Copied from https://fonts.googleapis.com/css2?family=Open+Sans:wght@700&display=swap */
+            /* latin-ext */
+            @font-face {
+                font-family: 'Open Sans';
+                font-style: normal;
+                font-weight: 700;
+                src: url(https://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UN7rgOXOhpKKSTj5PW.woff2) format('woff2');
+                unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+            }
+            /* latin-ext */
+            @font-face {
+                font-family: 'Open Sans';
+                font-style: normal;
+                font-weight: 600;
+                src: url(https://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UNirkOXOhpKKSTj5PW.woff2) format('woff2');
+                unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+            }
+            /* latin-ext */
+            @font-face {
+                font-family: 'Open Sans';
+                font-style: normal;
+                font-weight: 400;
+                src: url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFW50bf8pkAp6a.woff2) format('woff2');
+                unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+            }
+            /* latin-ext */
+            @font-face {
+                font-family: 'Open Sans';
+                font-style: normal;
+                font-weight: 300;
+                src: url(https://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UN_r8OXOhpKKSTj5PW.woff2) format('woff2');
+                unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+            }
+        `
+});
+exports.Fonts = Fonts;
+const LegacyOverrides = _ref => {
+  let {
+    useLegacyOverrides
+  } = _ref;
+  return useLegacyOverrides ? /*#__PURE__*/_react.default.createElement(_react2.Global, {
+    styles: `
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+            margin-top: 0;
+            font-weight: ${_base.fontWeights.semibold};
+        }
 
-var Fonts = function Fonts() {
-  return /*#__PURE__*/_react.default.createElement(_react2.Global, {
-    styles: "\n            @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');\n            /* Copied from https://fonts.googleapis.com/css2?family=Open+Sans:wght@700&display=swap */\n            /* latin-ext */\n            @font-face {\n                font-family: 'Open Sans';\n                font-style: normal;\n                font-weight: 700;\n                src: url(https://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UN7rgOXOhpKKSTj5PW.woff2) format('woff2');\n                unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;\n            }\n            /* latin-ext */\n            @font-face {\n                font-family: 'Open Sans';\n                font-style: normal;\n                font-weight: 600;\n                src: url(https://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UNirkOXOhpKKSTj5PW.woff2) format('woff2');\n                unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;\n            }\n            /* latin-ext */\n            @font-face {\n                font-family: 'Open Sans';\n                font-style: normal;\n                font-weight: 400;\n                src: url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFW50bf8pkAp6a.woff2) format('woff2');\n                unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;\n            }\n            /* latin-ext */\n            @font-face {\n                font-family: 'Open Sans';\n                font-style: normal;\n                font-weight: 300;\n                src: url(https://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UN_r8OXOhpKKSTj5PW.woff2) format('woff2');\n                unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;\n            }\n        "
-  });
-};
+        .heading-sm {
+            font-size: ${_base.fontSizes.base};
+        }
+        .heading-md {
+            font-size: ${_base.fontSizes.md};
+        }
+        .heading-lg {
+            font-size: ${_base.fontSizes['5xl']};
+        }
 
-exports.Fonts = Fonts;
+        p {
+            line-height: 1.5;
+        }
 
-var LegacyOverrides = function LegacyOverrides(_ref) {
-  var _context, _context2, _context3, _context4, _context5, _context6;
+        a {
+            outline: none;
+            text-align: left;
+            color: ${_base.colors.primary.default};
+            text-decoration: none;
 
-  var useLegacyOverrides = _ref.useLegacyOverrides;
-  return useLegacyOverrides ? /*#__PURE__*/_react.default.createElement(_react2.Global, {
-    styles: (0, _concat.default)(_context = (0, _concat.default)(_context2 = (0, _concat.default)(_context3 = (0, _concat.default)(_context4 = (0, _concat.default)(_context5 = (0, _concat.default)(_context6 = "\n        h1,\n        h2,\n        h3,\n        h4,\n        h5,\n        h6 {\n            margin-top: 0;\n            font-weight: ".concat(_base.fontWeights.semibold, ";\n        }\n\n        .heading-sm {\n            font-size: ")).call(_context6, _base.fontSizes.base, ";\n        }\n        .heading-md {\n            font-size: ")).call(_context5, _base.fontSizes.md, ";\n        }\n        .heading-lg {\n            font-size: ")).call(_context4, _base.fontSizes['5xl'], ";\n        }\n\n        p {\n            line-height: 1.5;\n        }\n\n        a {\n            outline: none;\n            text-align: left;\n            color: ")).call(_context3, _base.colors.primary.default, ";\n            text-decoration: none;\n\n            &:active,\n            &:focus {\n                outline: none;\n            }\n\n            &:hover {\n                color: ")).call(_context2, _base.colors.primary['700'], ";\n            }\n        }\n\n        small {\n            font-size: ")).call(_context, _base.fontSizes.xs, ";\n        }\n\n        ")
+            &:active,
+            &:focus {
+                outline: none;
+            }
+
+            &:hover {
+                color: ${_base.colors.primary['700']};
+            }
+        }
+
+        small {
+            font-size: ${_base.fontSizes.xs};
+        }
+
+        `
   }) : null;
 };
-
 exports.LegacyOverrides = LegacyOverrides;