@spothero/ui 22.5.3 → 23.0.0

package/dist/components/styles.js

@@ -0,0 +1,189 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+_Object$defineProperty(exports, "Accordion", {
+  enumerable: true,
+  get: function get() {
+    return _styles2["default"];
+  }
+});
+_Object$defineProperty(exports, "Badge", {
+  enumerable: true,
+  get: function get() {
+    return _styles14["default"];
+  }
+});
+_Object$defineProperty(exports, "Button", {
+  enumerable: true,
+  get: function get() {
+    return _Button["default"];
+  }
+});
+_Object$defineProperty(exports, "ButtonRefreshed", {
+  enumerable: true,
+  get: function get() {
+    return _styles11["default"];
+  }
+});
+_Object$defineProperty(exports, "Checkbox", {
+  enumerable: true,
+  get: function get() {
+    return _styles5["default"];
+  }
+});
+_Object$defineProperty(exports, "Divider", {
+  enumerable: true,
+  get: function get() {
+    return _Divider["default"];
+  }
+});
+_Object$defineProperty(exports, "Drawer", {
+  enumerable: true,
+  get: function get() {
+    return _styles15["default"];
+  }
+});
+_Object$defineProperty(exports, "GridItem", {
+  enumerable: true,
+  get: function get() {
+    return _GridItem["default"];
+  }
+});
+_Object$defineProperty(exports, "Heading", {
+  enumerable: true,
+  get: function get() {
+    return _Heading["default"];
+  }
+});
+_Object$defineProperty(exports, "Input", {
+  enumerable: true,
+  get: function get() {
+    return _styles8["default"];
+  }
+});
+_Object$defineProperty(exports, "InputRefreshed", {
+  enumerable: true,
+  get: function get() {
+    return _styles9["default"];
+  }
+});
+_Object$defineProperty(exports, "Link", {
+  enumerable: true,
+  get: function get() {
+    return _Link["default"];
+  }
+});
+_Object$defineProperty(exports, "List", {
+  enumerable: true,
+  get: function get() {
+    return _styles["default"];
+  }
+});
+_Object$defineProperty(exports, "Menu", {
+  enumerable: true,
+  get: function get() {
+    return _Menu["default"];
+  }
+});
+_Object$defineProperty(exports, "Modal", {
+  enumerable: true,
+  get: function get() {
+    return _styles12["default"];
+  }
+});
+_Object$defineProperty(exports, "Popover", {
+  enumerable: true,
+  get: function get() {
+    return _styles7["default"];
+  }
+});
+_Object$defineProperty(exports, "Progress", {
+  enumerable: true,
+  get: function get() {
+    return _Progress["default"];
+  }
+});
+_Object$defineProperty(exports, "Radio", {
+  enumerable: true,
+  get: function get() {
+    return _styles13["default"];
+  }
+});
+_Object$defineProperty(exports, "Select", {
+  enumerable: true,
+  get: function get() {
+    return _styles4["default"];
+  }
+});
+_Object$defineProperty(exports, "SelectRefreshed", {
+  enumerable: true,
+  get: function get() {
+    return _styles10["default"];
+  }
+});
+_Object$defineProperty(exports, "Skeleton", {
+  enumerable: true,
+  get: function get() {
+    return _Skeleton["default"];
+  }
+});
+_Object$defineProperty(exports, "Spinner", {
+  enumerable: true,
+  get: function get() {
+    return _Spinner["default"];
+  }
+});
+_Object$defineProperty(exports, "Switch", {
+  enumerable: true,
+  get: function get() {
+    return _styles6["default"];
+  }
+});
+_Object$defineProperty(exports, "Table", {
+  enumerable: true,
+  get: function get() {
+    return _Table["default"];
+  }
+});
+_Object$defineProperty(exports, "Tabs", {
+  enumerable: true,
+  get: function get() {
+    return _styles3["default"];
+  }
+});
+_Object$defineProperty(exports, "Text", {
+  enumerable: true,
+  get: function get() {
+    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("./Switch/styles"));
+var _styles7 = _interopRequireDefault(require("./Popover/styles"));
+var _styles8 = _interopRequireDefault(require("./Input/styles"));
+var _styles9 = _interopRequireDefault(require("./RefreshedInput/Input/styles"));
+var _styles10 = _interopRequireDefault(require("./RefreshedInput/Select/styles"));
+var _styles11 = _interopRequireDefault(require("./RefreshedInput/Button/styles"));
+var _styles12 = _interopRequireDefault(require("./Modal/styles"));
+var _styles13 = _interopRequireDefault(require("./Radio/styles"));
+var _Skeleton = _interopRequireDefault(require("./Skeleton/Skeleton.styles"));
+var _styles14 = _interopRequireDefault(require("./Badge/styles"));
+var _styles15 = _interopRequireDefault(require("./Drawer/styles"));
+var _Progress = _interopRequireDefault(require("./Progress/Progress.styles"));
+var _Menu = _interopRequireDefault(require("./Menu/Menu.styles"));

package/dist/theme/base/breakpoints.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_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)({
+  mobileXL: '30rem',
+  // 480px
+  tablet: '48rem',
+  // 768px
+  desktop: '64rem',
+  // 1024px
+  desktopXL: '90rem' // 1440px
+});
+var _default = exports["default"] = breakpoints;

package/dist/theme/base/colors.js

@@ -0,0 +1,144 @@
+"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 _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+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(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+var white = '#ffffff';
+var black = '#000000';
+var brandBlue = '#0082ff';
+var modalOverlay = '#21212160';
+var gray = {
+  50: '#f6f7f9',
+  100: '#e1e6ec',
+  200: '#cbd4de',
+  300: '#afbdcc',
+  400: '#94a7ba',
+  500: '#7890a8',
+  600: '#537495',
+  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 = {
+  gray: _objectSpread(_objectSpread({}, gray), {}, {
+    light: gray['50'],
+    medium: gray['200'],
+    dark: gray['600']
+  }),
+  blue: blue,
+  navy: navy,
+  red: _objectSpread(_objectSpread({}, red), {}, {
+    "default": red['700']
+  }),
+  green: _objectSpread(_objectSpread({}, green), {}, {
+    "default": green['700']
+  }),
+  yellow: _objectSpread(_objectSpread({}, yellow), {}, {
+    "default": yellow['400']
+  }),
+  primary: _objectSpread(_objectSpread({}, blue), {}, {
+    "default": blue['500']
+  }),
+  secondary: _objectSpread(_objectSpread({}, navy), {}, {
+    "default": navy['900']
+  }),
+  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,
+  modalOverlay: modalOverlay
+};
+var _default = exports["default"] = colors;

package/dist/theme/base/index.js

@@ -0,0 +1,80 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+_Object$defineProperty(exports, "NOTIFICATION_STATUSES", {
+  enumerable: true,
+  get: function get() {
+    return _notifications.NOTIFICATION_STATUSES;
+  }
+});
+_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, "notificationBaseStyle", {
+  enumerable: true,
+  get: function get() {
+    return _notifications.notificationBaseStyle;
+  }
+});
+_Object$defineProperty(exports, "notificationStatusStyles", {
+  enumerable: true,
+  get: function get() {
+    return _notifications.notificationStatusStyles;
+  }
+});
+_Object$defineProperty(exports, "shadows", {
+  enumerable: true,
+  get: function get() {
+    return _shadows["default"];
+  }
+});
+_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 _shadows = _interopRequireDefault(require("./shadows"));
+var _zindices = _interopRequireDefault(require("./zindices"));
+var _breakpoints = _interopRequireDefault(require("./breakpoints"));
+var _typography = require("./typography");
+var _notifications = require("./notifications");

package/dist/theme/base/notifications.js

@@ -0,0 +1,197 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.notificationStatusStyles = exports.notificationSizeStyles = exports.notificationBaseStyle = exports.NOTIFICATION_STATUSES = void 0;
+var NOTIFICATION_STATUSES = exports.NOTIFICATION_STATUSES = {
+  NEUTRAL: 'neutral',
+  ERROR: 'error',
+  WARNING: 'warning',
+  SUCCESS: 'success'
+};
+var NOTIFICATION_SIZES = {
+  SM: 'sm',
+  MD: 'md',
+  LG: 'lg'
+};
+var notificationBaseStyle = exports.notificationBaseStyle = {
+  container: {
+    paddingY: 2,
+    borderRadius: 'base'
+  },
+  actionButton: {
+    fontSize: 'sm',
+    height: 'fit-content',
+    lineHeight: '1.4',
+    color: 'primary.600',
+    _hover: {
+      color: 'primary.700'
+    }
+  },
+  dismissButton: {
+    color: 'gray.600',
+    borderColor: 'transparent',
+    borderWidth: '2px',
+    padding: 0,
+    width: 10,
+    height: 10,
+    backgroundColor: 'transparent',
+    borderRadius: 'base',
+    marginLeft: 2,
+    _hover: {
+      color: 'gray.700'
+    },
+    _focus: {
+      color: 'gray.700',
+      borderColor: 'white',
+      boxShadow: 'outline'
+    }
+  },
+  icon: {
+    width: 6,
+    marginRight: 2,
+    height: 'auto'
+  },
+  description: {
+    lineHeight: 1.4
+  },
+  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 notificationStatusStyles = exports.notificationStatusStyles = function notificationStatusStyles(status) {
+  switch (status) {
+    case NOTIFICATION_STATUSES.NEUTRAL:
+      return {
+        container: {
+          background: 'gray.light'
+        },
+        icon: {
+          color: 'gray.dark'
+        },
+        dismissButton: {
+          _hover: {
+            background: 'gray.200'
+          },
+          _focus: {
+            background: 'gray.200'
+          }
+        }
+      };
+    case NOTIFICATION_STATUSES.WARNING:
+      return {
+        container: {
+          background: 'yellow.100'
+        },
+        icon: {
+          color: 'yellow.500'
+        },
+        dismissButton: {
+          _hover: {
+            background: 'yellow.200'
+          },
+          _focus: {
+            background: 'yellow.200'
+          }
+        }
+      };
+    case NOTIFICATION_STATUSES.ERROR:
+      return {
+        container: {
+          background: 'red.100'
+        },
+        icon: {
+          color: 'red.700'
+        },
+        dismissButton: {
+          _hover: {
+            background: 'red.200'
+          },
+          _focus: {
+            background: 'red.200'
+          }
+        }
+      };
+    case NOTIFICATION_STATUSES.SUCCESS:
+      return {
+        container: {
+          background: 'green.100'
+        },
+        icon: {
+          color: 'green.700'
+        },
+        dismissButton: {
+          _hover: {
+            background: 'green.200'
+          },
+          _focus: {
+            background: 'green.200'
+          }
+        }
+      };
+    default:
+      return {};
+  }
+};
+var notificationSizeStyles = exports.notificationSizeStyles = function 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 {};
+  }
+};

package/dist/theme/base/shadows.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _merge = _interopRequireDefault(require("lodash/merge"));
+var _theme = _interopRequireDefault(require("@chakra-ui/theme"));
+var shadows = {
+  outline: '0 0 0 3px rgba(91, 170, 250, 0.7)',
+  // primary.400, 70% opacity
+  drawer: '-8px 0 16px 0 rgba(33,33,33,.1)'
+};
+var _default = exports["default"] = (0, _merge["default"])(_theme["default"].shadows, shadows);