@spothero/ui 15.1.2 → 15.2.0-beta.0

package/v2/theme/base/colors.js

@@ -0,0 +1,148 @@
+"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 = {
+  50: '#f6f7f9',
+  100: '#e1e6ec',
+  200: '#cbd4de',
+  300: '#afbdcc',
+  400: '#94a7ba',
+  500: '#7890a8',
+  600: '#5c7995',
+  700: '#3b5261',
+  800: '#2f3f4b',
+  900: '#26323c'
+};
+var blue = {
+  50: '#f6fbfd',
+  100: '#e6f8fd',
+  200: '#c0e9fb',
+  300: '#96d3fa',
+  400: '#5baafa',
+  500: '#1271eb',
+  600: '#1d58f2',
+  700: '#1b46da',
+  800: '#1735a6',
+  900: '#132b7f'
+};
+var navy = {
+  50: '#f4fafc',
+  100: '#e4f7fb',
+  200: '#bfebf6',
+  300: '#92d9f4',
+  400: '#51b7f0',
+  500: '#2590ea',
+  600: '#1a6cda',
+  700: '#1b55b6',
+  800: '#194185',
+  900: '#002d5b'
+};
+var green = {
+  50: '#ecf8f7',
+  100: '#d3f7ef',
+  200: '#a4f3d9',
+  300: '#65eabf',
+  400: '#1edb96',
+  500: '#09c66a',
+  600: '#08ad50',
+  700: '#008547',
+  800: '#11703e',
+  900: '#115a35'
+};
+var yellow = {
+  50: '#f9f5e5',
+  100: '#faf0bd',
+  200: '#f6e67c',
+  300: '#f1d439',
+  400: '#ffbf02',
+  500: '#e19706',
+  600: '#cf7404',
+  700: '#ae5708',
+  800: '#8e440e',
+  900: '#743710'
+};
+var red = {
+  50: '#fdf9f8',
+  100: '#fdeef3',
+  200: '#fbcee6',
+  300: '#fba4d1',
+  400: '#fc6bad',
+  500: '#fc4086',
+  600: '#f7265f',
+  700: '#e01438',
+  800: '#b4193c',
+  900: '#901530'
+};
+var colors = {
+  primary: _objectSpread(_objectSpread({}, blue), {}, {
+    default: blue['500']
+  }),
+  secondary: _objectSpread(_objectSpread({}, navy), {}, {
+    default: navy['900']
+  }),
+  gray: _objectSpread(_objectSpread({}, gray), {}, {
+    light: gray['50'],
+    medium: gray['200'],
+    dark: gray['600']
+  }),
+  red: _objectSpread(_objectSpread({}, red), {}, {
+    default: red['700']
+  }),
+  green: _objectSpread(_objectSpread({}, green), {}, {
+    default: green['700']
+  }),
+  yellow: _objectSpread(_objectSpread({}, yellow), {}, {
+    default: yellow['400']
+  }),
+  success: green['700'],
+  warning: yellow['400'],
+  error: red['700'],
+  accent: gray['200'],
+  text: {
+    primary: {
+      light: black,
+      dark: white
+    },
+    secondary: {
+      light: gray['600']
+    },
+    link: {
+      light: blue['500'],
+      dark: white
+    }
+  },
+  background: {
+    gray: gray['50'],
+    white: white
+  },
+  white: white,
+  black: black,
+  brandBlue: brandBlue
+};
+var _default = colors;
+exports.default = _default;

package/v2/theme/base/index.js

@@ -0,0 +1,59 @@
+"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() {
+    return _breakpoints.default;
+  }
+});
+Object.defineProperty(exports, "colors", {
+  enumerable: true,
+  get: function get() {
+    return _colors.default;
+  }
+});
+Object.defineProperty(exports, "fontSizes", {
+  enumerable: true,
+  get: function get() {
+    return _typography.fontSizes;
+  }
+});
+Object.defineProperty(exports, "fontWeights", {
+  enumerable: true,
+  get: function get() {
+    return _typography.fontWeights;
+  }
+});
+Object.defineProperty(exports, "fonts", {
+  enumerable: true,
+  get: function get() {
+    return _typography.fonts;
+  }
+});
+Object.defineProperty(exports, "sizes", {
+  enumerable: true,
+  get: function get() {
+    return _sizes.default;
+  }
+});
+Object.defineProperty(exports, "zIndices", {
+  enumerable: true,
+  get: function get() {
+    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/v2/theme/base/sizes.js

@@ -0,0 +1,88 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var container = {
+  base: '100%',
+  // 640px
+  tablet: '45rem',
+  // 720px
+  desktop: '72rem' // 1152px
+
+};
+var sizes = {
+  container: container,
+  0: '0',
+  0.5: '0.125rem',
+  // 2px
+  1: '0.25rem',
+  // 4px
+  1.5: '0.375rem',
+  // 6px
+  2: '0.5rem',
+  // 8px
+  2.5: '0.625rem',
+  // 10px
+  3: '0.75rem',
+  // 12px
+  3.5: '0.875rem',
+  // 14px
+  4: '1rem',
+  // 16px
+  5: '1.25rem',
+  // 20px
+  6: '1.5rem',
+  // 24px
+  7: '1.75rem',
+  // 28px
+  8: '2rem',
+  // 32px
+  9: '2.25rem',
+  // 36px
+  10: '2.5rem',
+  // 40px
+  12: '3rem',
+  // 48px
+  14: '3.5rem',
+  // 56px
+  16: '4rem',
+  // 64px
+  20: '5rem',
+  // 80px
+  24: '6rem',
+  // 96px
+  28: '7rem',
+  // 112px
+  32: '8rem',
+  // 128px
+  36: '9rem',
+  // 144px
+  40: '10rem',
+  // 160px
+  44: '11rem',
+  // 176px
+  48: '12rem',
+  // 192px
+  52: '13rem',
+  // 208px
+  56: '14rem',
+  // 224px
+  60: '15rem',
+  // 240px
+  64: '16rem',
+  // 256px
+  72: '18rem',
+  // 272px
+  80: '20rem',
+  // 288px
+  96: '24rem',
+  // 384px
+  px: '1px',
+  full: '100%',
+  max: 'max-content',
+  min: 'min-content'
+};
+var _default = sizes;
+exports.default = _default;

package/v2/theme/base/typography.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.fonts = exports.fontWeights = exports.fontSizes = void 0;
+var fonts = {
+  heading: 'Open Sans',
+  body: 'Open Sans'
+};
+exports.fonts = fonts;
+var fontSizes = {
+  '5xl': '3.5rem',
+  // 56px
+  '4xl': '3rem',
+  // 48px
+  '3xl': '2.5rem',
+  // 40px
+  '2xl': '2rem',
+  // 32px
+  xl: '1.5rem',
+  // 24px
+  lg: '1.25rem',
+  // 20px
+  md: '1.125rem',
+  // 18px
+  base: '1rem',
+  // 16px
+  sm: '0.875rem',
+  // 14px
+  xs: '0.75rem' // 12px
+
+};
+exports.fontSizes = fontSizes;
+var fontWeights = {
+  light: 300,
+  normal: 400,
+  semibold: 600,
+  bold: 700
+};
+exports.fontWeights = fontWeights;

package/v2/theme/base/zindices.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var indices = {
+  hide: -100,
+  // equivalent to $z-index-negative in fe-core (https://github.com/spothero/fe-core/blob/main/utils/_defaults.scss)
+  auto: 'auto',
+  base: 0,
+  // equivalent to $z-index-back in fe-core
+  layer1: 100,
+  // equivalent to $z-index-mid in fe-core
+  layer2: 200,
+  // equivalent to $z-index-fore in fe-core
+  layer3: 300,
+  // equivalent to $z-index-layer1 in fe-core
+  layer4: 400,
+  // equivalent to $z-index-layer2 in fe-core
+  layer5: 500,
+  // equivalent to $z-index-layer3 in fe-core
+  layer6: 600,
+  // equivalent to $z-index-layer4 in fe-core
+  layer7: 700,
+  // equivalent to $z-index-modal-shim in fe-core
+  layer8: 800,
+  // equivalent to $z-index-modal in fe-core
+  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/v2/theme/global.js

@@ -0,0 +1,52 @@
+"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 = {
+  'html, body': {
+    color: 'text.primary.light'
+  },
+  // By default, Chakra has all svgs set to 'display: block',
+  // this breaks the layout of some older components, so now
+  // we set all svgs to 'display: inline-block;' and only set
+  // 'display: block;' on the components that need it
+  // (as of 3/9/2021 only the v1 AutoSuggestInput component
+  // needed this update)
+  svg: {
+    display: 'inline-block'
+  }
+};
+var _default = global;
+exports.default = _default;
+
+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        "
+  });
+};
+
+exports.Fonts = Fonts;
+
+var LegacyOverrides = function LegacyOverrides(_ref) {
+  var _context, _context2, _context3, _context4, _context5, _context6;
+
+  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        ")
+  }) : null;
+};
+
+exports.LegacyOverrides = LegacyOverrides;

package/v2/theme/index.js

@@ -0,0 +1,63 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+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 _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+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"));
+
+var _global = _interopRequireDefault(require("./global"));
+
+var base = _interopRequireWildcard(require("./base"));
+
+var _react = require("@chakra-ui/react");
+
+var _theme = _interopRequireDefault(require("@chakra-ui/theme"));
+
+var components = _interopRequireWildcard(require("../components/styles"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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; }
+
+// use this to extend the base theme of chakra, this adds on top of what is defined in baseConfig
+var extendedTheme = {
+  initialColorMode: 'light',
+  useSystemColorMode: false,
+  styles: {
+    global: _global.default
+  },
+  remToPixels: function remToPixels(rem) {
+    var baseSize = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 16;
+    return !rem ? 0 : "".concat(baseSize * Number(rem.replace('rem', '')));
+  }
+}; // use this to override base themes from Chakra
+
+var baseConfig = _objectSpread(_objectSpread(_objectSpread({}, _theme.default), base), {}, {
+  components: components
+});
+
+var _default = (0, _react.extendTheme)(extendedTheme, baseConfig);
+
+exports.default = _default;

package/v2/utils/Spaces.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _fill = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/fill"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var Spaces = function Spaces(_ref) {
+  var _context;
+
+  var _ref$spaces = _ref.spaces,
+      spaces = _ref$spaces === void 0 ? 3 : _ref$spaces;
+  return /*#__PURE__*/_react.default.createElement("span", {
+    dangerouslySetInnerHTML: {
+      __html: (0, _fill.default)(_context = Array(spaces)).call(_context, ' ').join('')
+    }
+  });
+};
+
+var _default = Spaces;
+exports.default = _default;

package/v1/assets-manifest.json

@@ -1,5 +0,0 @@
-{
-  "index.html": "index.html",
-  "index.js.license.txt": "index.js.LICENSE.txt",
-  "main.js": "index.js"
-}

package/v1/index.html

@@ -1 +0,0 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><script defer="defer" src="/index.js"></script></head><body><div id="root"></div></body></html>