@spothero/ui 17.1.0-beta.5 → 17.1.1

package/dist/components/styles.js

@@ -1,175 +1,146 @@
 "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() {
-    return _styles6.default;
-  }
-});
 Object.defineProperty(exports, "Badge", {
   enumerable: true,
-  get: function get() {
-    return _styles12.default;
+  get: function () {
+    return _styles11.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() {
-    return _styles9.default;
+  get: function () {
+    return _styles8.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() {
-    return _styles10.default;
+  get: function () {
+    return _styles9.default;
   }
 });
 Object.defineProperty(exports, "Popover", {
   enumerable: true,
-  get: function get() {
-    return _styles8.default;
+  get: function () {
+    return _styles7.default;
   }
 });
 Object.defineProperty(exports, "Radio", {
   enumerable: true,
-  get: function get() {
-    return _styles11.default;
+  get: function () {
+    return _styles10.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() {
-    return _styles7.default;
+  get: function () {
+    return _styles6.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 _styles6 = _interopRequireDefault(require("./Switch/styles"));
+var _styles7 = _interopRequireDefault(require("./Popover/styles"));
+var _styles8 = _interopRequireDefault(require("./Input/styles"));
+var _styles9 = _interopRequireDefault(require("./Modal/styles"));
+var _styles10 = _interopRequireDefault(require("./Radio/styles"));
 var _Skeleton = _interopRequireDefault(require("./Skeleton/Skeleton.styles"));
-
-var _styles12 = _interopRequireDefault(require("./Badge/styles"));
+var _styles11 = _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,72 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "NOTIFICATION_STATUSES", {
+  enumerable: true,
+  get: function () {
+    return _notifications.NOTIFICATION_STATUSES;
+  }
+});
 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, "notificationBaseStyle", {
+  enumerable: true,
+  get: function () {
+    return _notifications.notificationBaseStyle;
+  }
+});
+Object.defineProperty(exports, "notificationStatusStyles", {
+  enumerable: true,
+  get: function () {
+    return _notifications.notificationStatusStyles;
+  }
+});
 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");
+var _typography = require("./typography");
+var _notifications = require("./notifications");

package/dist/{components/Alert/styles/index.js → theme/base/notifications.js}

@@ -1,40 +1,22 @@
 "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 = exports.STATUSES = void 0;
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
-
-var _merge = _interopRequireDefault(require("lodash/merge"));
-
-var _theme = _interopRequireDefault(require("@chakra-ui/theme"));
-
-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 STATUSES = {
+exports.notificationStatusStyles = exports.notificationSizeStyles = exports.notificationBaseStyle = exports.NOTIFICATION_STATUSES = void 0;
+const NOTIFICATION_STATUSES = {
   NEUTRAL: 'neutral',
   ERROR: 'error',
   WARNING: 'warning',
   SUCCESS: 'success'
 };
-exports.STATUSES = STATUSES;
-var _baseStyle = {
+exports.NOTIFICATION_STATUSES = NOTIFICATION_STATUSES;
+const NOTIFICATION_SIZES = {
+  SM: 'sm',
+  MD: 'md',
+  LG: 'lg'
+};
+const notificationBaseStyle = {
   container: {
     paddingY: 2,
     borderRadius: 'base'
@@ -77,12 +59,39 @@ var _baseStyle = {
   },
   title: {
     lineHeight: 1.4
+  },
+  variants: {},
+  sizes: {
+    sm: {
+      title: {
+        fontSize: 'xs'
+      },
+      description: {
+        fontSize: 'xs'
+      }
+    },
+    md: {
+      title: {
+        fontSize: 'sm'
+      },
+      description: {
+        fontSize: 'sm'
+      }
+    },
+    lg: {
+      title: {
+        fontSize: 'base'
+      },
+      description: {
+        fontSize: 'base'
+      }
+    }
   }
 };
-
-var statusStyles = function statusStyles(status) {
+exports.notificationBaseStyle = notificationBaseStyle;
+const notificationStatusStyles = status => {
   switch (status) {
-    case STATUSES.NEUTRAL:
+    case NOTIFICATION_STATUSES.NEUTRAL:
       return {
         container: {
           background: 'gray.light'
@@ -99,8 +108,7 @@ var statusStyles = function statusStyles(status) {
           }
         }
       };
-
-    case STATUSES.WARNING:
+    case NOTIFICATION_STATUSES.WARNING:
       return {
         container: {
           background: 'yellow.100'
@@ -117,8 +125,7 @@ var statusStyles = function statusStyles(status) {
           }
         }
       };
-
-    case STATUSES.ERROR:
+    case NOTIFICATION_STATUSES.ERROR:
       return {
         container: {
           background: 'red.100'
@@ -135,8 +142,7 @@ var statusStyles = function statusStyles(status) {
           }
         }
       };
-
-    case STATUSES.SUCCESS:
+    case NOTIFICATION_STATUSES.SUCCESS:
       return {
         container: {
           background: 'green.100'
@@ -153,45 +159,42 @@ var statusStyles = function statusStyles(status) {
           }
         }
       };
-
     default:
       return {};
   }
 };
-
-var overrides = {
-  baseStyle: function baseStyle(props) {
-    return (0, _merge.default)(_objectSpread({}, _theme.default.components.Alert.baseStyle), _baseStyle, statusStyles(props['data-status']));
-  },
-  variants: {},
-  sizes: {
-    sm: {
-      title: {
-        fontSize: 'xs'
-      },
-      description: {
-        fontSize: 'xs'
-      }
-    },
-    md: {
-      title: {
-        fontSize: 'sm'
-      },
-      description: {
-        fontSize: 'sm'
-      }
-    },
-    lg: {
-      title: {
-        fontSize: 'base'
-      },
-      description: {
-        fontSize: 'base'
-      }
-    }
+exports.notificationStatusStyles = notificationStatusStyles;
+const notificationSizeStyles = size => {
+  switch (size) {
+    case NOTIFICATION_SIZES.SM:
+      return {
+        title: {
+          fontSize: 'xs'
+        },
+        description: {
+          fontSize: 'xs'
+        }
+      };
+    case NOTIFICATION_SIZES.MD:
+      return {
+        title: {
+          fontSize: 'sm'
+        },
+        description: {
+          fontSize: 'sm'
+        }
+      };
+    case NOTIFICATION_SIZES.LG:
+      return {
+        title: {
+          fontSize: 'base'
+        },
+        description: {
+          fontSize: 'base'
+        }
+      };
+    default:
+      return {};
   }
 };
-
-var _default = _objectSpread(_objectSpread({}, _theme.default.components.Alert), overrides);
-
-exports.default = _default;
+exports.notificationSizeStyles = notificationSizeStyles;

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