@spothero/ui 21.6.4-beta.0 → 22.0.0-beta.3

package/dist/components/Grid/Grid.stories.js

@@ -10,17 +10,14 @@ var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@chakra-ui/react");
 var _Grid = _interopRequireDefault(require("./Grid"));
 var _ = require("./..");
-const rangeControl = function (max) {
-  let min = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
-  return {
-    control: {
-      max,
-      min,
-      step: 1,
-      type: 'range'
-    }
-  };
-};
+const rangeControl = (max, min = 1) => ({
+  control: {
+    max,
+    min,
+    step: 1,
+    type: 'range'
+  }
+});
 const spanMap = {
   1: 12,
   2: 6,
@@ -42,34 +39,28 @@ var _default = exports.default = {
     }
   }
 };
-const GridTemplate = (args, _ref) => {
-  let {
-    hasDarkBackground
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_.Container, null, /*#__PURE__*/_react.default.createElement(_Grid.default, (0, _extends2.default)({}, args, {
-    bg: hasDarkBackground ? 'secondary.700' : 'secondary.default'
-  }), Array(12).fill(null).map((Item, index) => /*#__PURE__*/_react.default.createElement(_.GridItem, {
-    key: `GridItem-${index}`,
-    colSpan: 1
-  }, /*#__PURE__*/_react.default.createElement(_react2.Box, {
-    h: "20rem",
-    bg: hasDarkBackground ? 'primary.400' : 'primary.default'
-  })))));
-};
+const GridTemplate = (args, {
+  hasDarkBackground
+}) => /*#__PURE__*/_react.default.createElement(_.Container, null, /*#__PURE__*/_react.default.createElement(_Grid.default, (0, _extends2.default)({}, args, {
+  bg: hasDarkBackground ? 'secondary.700' : 'secondary.default'
+}), Array(12).fill(null).map((Item, index) => /*#__PURE__*/_react.default.createElement(_.GridItem, {
+  key: `GridItem-${index}`,
+  colSpan: 1
+}, /*#__PURE__*/_react.default.createElement(_react2.Box, {
+  h: "20rem",
+  bg: hasDarkBackground ? 'primary.400' : 'primary.default'
+})))));
 const Grid = exports.Grid = GridTemplate.bind({});
-const GridItemTemplate = _ref2 => {
-  let {
-    isCompact,
-    ...args
-  } = _ref2;
-  return /*#__PURE__*/_react.default.createElement(_.Container, null, /*#__PURE__*/_react.default.createElement(_Grid.default, {
-    bg: "secondary.default",
-    isCompact: isCompact
-  }, /*#__PURE__*/_react.default.createElement(_.GridItem, args, /*#__PURE__*/_react.default.createElement(_react2.Box, {
-    h: "20rem",
-    bg: "primary.default"
-  }))));
-};
+const GridItemTemplate = ({
+  isCompact,
+  ...args
+}) => /*#__PURE__*/_react.default.createElement(_.Container, null, /*#__PURE__*/_react.default.createElement(_Grid.default, {
+  bg: "secondary.default",
+  isCompact: isCompact
+}, /*#__PURE__*/_react.default.createElement(_.GridItem, args, /*#__PURE__*/_react.default.createElement(_react2.Box, {
+  h: "20rem",
+  bg: "primary.default"
+}))));
 const GridItemSpan = exports.GridItemSpan = GridItemTemplate.bind({});
 GridItemSpan.storyName = 'GridItem - span prop';
 GridItemSpan.argTypes = {
@@ -88,20 +79,17 @@ GridItemStartEnd.args = {
   colStart: 1,
   colEnd: 2
 };
-const ColumnLayoutTemplate = _ref3 => {
-  let {
-    numberOfColumns
-  } = _ref3;
-  return /*#__PURE__*/_react.default.createElement(_.Container, null, /*#__PURE__*/_react.default.createElement(_Grid.default, {
-    bg: "secondary.default"
-  }, Array(numberOfColumns).fill(null).map((item, index) => /*#__PURE__*/_react.default.createElement(_.GridItem, {
-    key: `GridItem-${index}`,
-    colSpan: spanMap[numberOfColumns]
-  }, /*#__PURE__*/_react.default.createElement(_react2.Box, {
-    h: "20rem",
-    bg: "primary.default"
-  })))));
-};
+const ColumnLayoutTemplate = ({
+  numberOfColumns
+}) => /*#__PURE__*/_react.default.createElement(_.Container, null, /*#__PURE__*/_react.default.createElement(_Grid.default, {
+  bg: "secondary.default"
+}, Array(numberOfColumns).fill(null).map((item, index) => /*#__PURE__*/_react.default.createElement(_.GridItem, {
+  key: `GridItem-${index}`,
+  colSpan: spanMap[numberOfColumns]
+}, /*#__PURE__*/_react.default.createElement(_react2.Box, {
+  h: "20rem",
+  bg: "primary.default"
+})))));
 const GridColumnLayout = exports.GridColumnLayout = ColumnLayoutTemplate.bind({});
 GridColumnLayout.storyName = 'Grid - MultiColumn Layout';
 GridColumnLayout.argTypes = {

package/dist/components/Icon/Icon.stories.js

@@ -27,7 +27,7 @@ const Template = props => /*#__PURE__*/_react.default.createElement(_react.defau
   width: "24",
   paddingLeft: "16"
 }), /*#__PURE__*/_react.default.createElement(_Icon.default, {
-  as: _icons.Shield,
+  as: _icons.CheckmarkShieldFilled,
   color: "green.default",
   height: "24",
   width: "24",

package/dist/components/Image/Image.js

@@ -9,15 +9,14 @@ var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@chakra-ui/react");
 var _template = _interopRequireDefault(require("lodash/template"));
 var _environment = _interopRequireDefault(require("@spothero/utils/environment"));
-const buildCloudinarySrc = _ref => {
-  let {
-    cloudinaryImageId,
-    cloudinaryTemplate,
-    cloudinaryCloudName,
-    htmlWidth,
-    htmlHeight,
-    quality
-  } = _ref;
+const buildCloudinarySrc = ({
+  cloudinaryImageId,
+  cloudinaryTemplate,
+  cloudinaryCloudName,
+  htmlWidth,
+  htmlHeight,
+  quality
+}) => {
   const defaultTemplate = `https://res.cloudinary.com/${cloudinaryCloudName}/image/upload/$w_{{WIDTH}},$h_{{HEIGHT}},$q_{{QUALITY}}/c_fill,f_auto,fl_progressive,dpr_${_environment.default.isHighDensityDisplay() ? 2 : 1},h_$h,q_$q,w_$w/${cloudinaryImageId}`;
   const tmpl = cloudinaryTemplate ? cloudinaryTemplate : defaultTemplate;
   return (0, _template.default)(tmpl, {
@@ -28,18 +27,17 @@ const buildCloudinarySrc = _ref => {
     QUALITY: quality
   });
 };
-const Image = _ref2 => {
-  let {
-    isSSR,
-    cloudinaryImageId,
-    cloudinaryTemplate,
-    cloudinaryCloudName,
-    htmlWidth,
-    htmlHeight,
-    quality,
-    lazyLoad,
-    ...otherProps
-  } = _ref2;
+const Image = ({
+  isSSR,
+  cloudinaryImageId,
+  cloudinaryTemplate,
+  cloudinaryCloudName,
+  htmlWidth,
+  htmlHeight,
+  quality,
+  lazyLoad,
+  ...otherProps
+}) => {
   const hasValidCloudinarySrc = (cloudinaryImageId || cloudinaryTemplate) && Boolean(htmlWidth) && Boolean(htmlHeight);
   let cloudinarySrc;
   if (hasValidCloudinarySrc) {

package/dist/components/Input/Input.js

@@ -12,18 +12,17 @@ var _react2 = require("@chakra-ui/react");
 var _FormControl = _interopRequireDefault(require("../FormControl/FormControl"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const Input = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
-  let {
-    label,
-    helperText,
-    errorMessage,
-    isInvalid,
-    isDisabled,
-    isRequired,
-    isOptional,
-    customRequiredText,
-    ...props
-  } = _ref;
+const Input = /*#__PURE__*/(0, _react.forwardRef)(({
+  label,
+  helperText,
+  errorMessage,
+  isInvalid,
+  isDisabled,
+  isRequired,
+  isOptional,
+  customRequiredText,
+  ...props
+}, ref) => {
   const classes = (0, _classnames.default)({
     'FormElement-contains-error': isInvalid
   });

package/dist/components/Link/Link.stories.js

@@ -17,35 +17,32 @@ var _default = exports.default = {
     removeBaseHtmlClass: true
   }
 };
-const OverviewTemplate = (props, _ref) => {
-  let {
-    hasDarkBackground
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_react2.Box, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
-    color: hasDarkBackground ? 'text.primary.dark' : 'text.primary.light'
-  }, "A link with", ' ', /*#__PURE__*/_react.default.createElement(_Link.default, {
-    variant: hasDarkBackground ? 'onDark' : 'standard'
-  }, "no href"), ' ', "is only styled."), /*#__PURE__*/_react.default.createElement(_Text.default, {
-    color: hasDarkBackground ? 'text.primary.dark' : 'text.primary.light'
-  }, "Links can be linked to", ' ', /*#__PURE__*/_react.default.createElement(_Link.default, {
-    href: "#",
-    isExternal: true,
-    variant: hasDarkBackground ? 'onDark' : 'standard'
-  }, "External Pages"), ' ', "and will have ", /*#__PURE__*/_react.default.createElement("code", null, "target=\"_blank\""), " and", ' ', /*#__PURE__*/_react.default.createElement("code", null, "rel=\"noopener noreferrer\""), " appended to them."), /*#__PURE__*/_react.default.createElement(_Text.default, {
-    color: hasDarkBackground ? 'text.primary.dark' : 'text.primary.light'
-  }, "Links can have", ' ', /*#__PURE__*/_react.default.createElement(_Link.default, {
-    href: "#",
-    variant: hasDarkBackground ? 'onDark' : 'standard'
-  }, "icons inline ", /*#__PURE__*/_react.default.createElement(_share.default, {
-    width: "1rem"
-  }))), /*#__PURE__*/_react.default.createElement(_Text.default, {
-    color: hasDarkBackground ? 'text.primary.dark' : 'text.primary.light'
-  }, "Using the ", /*#__PURE__*/_react.default.createElement("code", null, "as"), " prop, you can utilize a routing library, like", ' ', /*#__PURE__*/_react.default.createElement(_Link.default, {
-    href: "https://chakra-ui.com/docs/navigation/link#usage-with-routing-library",
-    isExternal: true,
-    variant: hasDarkBackground ? 'onDark' : 'standard'
-  }, "React Router"), ' ', "and it will replace the ", /*#__PURE__*/_react.default.createElement("code", null, "a"), " tag with it's", ' ', /*#__PURE__*/_react.default.createElement("code", null, "Link"), "."));
-};
+const OverviewTemplate = (props, {
+  hasDarkBackground
+}) => /*#__PURE__*/_react.default.createElement(_react2.Box, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
+  color: hasDarkBackground ? 'text.primary.dark' : 'text.primary.light'
+}, "A link with", ' ', /*#__PURE__*/_react.default.createElement(_Link.default, {
+  variant: hasDarkBackground ? 'onDark' : 'standard'
+}, "no href"), ' ', "is only styled."), /*#__PURE__*/_react.default.createElement(_Text.default, {
+  color: hasDarkBackground ? 'text.primary.dark' : 'text.primary.light'
+}, "Links can be linked to", ' ', /*#__PURE__*/_react.default.createElement(_Link.default, {
+  href: "#",
+  isExternal: true,
+  variant: hasDarkBackground ? 'onDark' : 'standard'
+}, "External Pages"), ' ', "and will have ", /*#__PURE__*/_react.default.createElement("code", null, "target=\"_blank\""), " and", ' ', /*#__PURE__*/_react.default.createElement("code", null, "rel=\"noopener noreferrer\""), " appended to them."), /*#__PURE__*/_react.default.createElement(_Text.default, {
+  color: hasDarkBackground ? 'text.primary.dark' : 'text.primary.light'
+}, "Links can have", ' ', /*#__PURE__*/_react.default.createElement(_Link.default, {
+  href: "#",
+  variant: hasDarkBackground ? 'onDark' : 'standard'
+}, "icons inline ", /*#__PURE__*/_react.default.createElement(_share.default, {
+  width: "1rem"
+}))), /*#__PURE__*/_react.default.createElement(_Text.default, {
+  color: hasDarkBackground ? 'text.primary.dark' : 'text.primary.light'
+}, "Using the ", /*#__PURE__*/_react.default.createElement("code", null, "as"), " prop, you can utilize a routing library, like", ' ', /*#__PURE__*/_react.default.createElement(_Link.default, {
+  href: "https://chakra-ui.com/docs/navigation/link#usage-with-routing-library",
+  isExternal: true,
+  variant: hasDarkBackground ? 'onDark' : 'standard'
+}, "React Router"), ' ', "and it will replace the ", /*#__PURE__*/_react.default.createElement("code", null, "a"), " tag with it's", ' ', /*#__PURE__*/_react.default.createElement("code", null, "Link"), "."));
 const Overview = exports.Overview = OverviewTemplate.bind({});
 Overview.parameters = {
   importBy: 'Link'

package/dist/components/List/List.js

@@ -42,15 +42,12 @@ const getListProps = type => {
       return;
   }
 };
-const List = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
-  let {
-    type,
-    ...props
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_react2.List, (0, _extends2.default)({}, getListProps(type), props, {
-    ref: ref
-  }));
-});
+const List = /*#__PURE__*/(0, _react.forwardRef)(({
+  type,
+  ...props
+}, ref) => /*#__PURE__*/_react.default.createElement(_react2.List, (0, _extends2.default)({}, getListProps(type), props, {
+  ref: ref
+})));
 List.defaultProps = {
   type: TYPES.unstyled,
   stylePosition: STYLE_POSITIONS.inside

package/dist/components/List/List.stories.js

@@ -13,14 +13,11 @@ var _Spaces = _interopRequireDefault(require("../../utils/Spaces"));
 var _Text = _interopRequireDefault(require("../Text/Text"));
 var _disableArgs = _interopRequireDefault(require("storybook/utils/disable-args"));
 const DISABLE_TYPE = (0, _disableArgs.default)('type');
-const Usage = _ref => {
-  let {
-    type
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_Text.default, null, "<List", type ? ` type="${type}"` : '', ">", /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_Spaces.default, null), "<ListItem>", /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_Spaces.default, {
-    spaces: 6
-  }), "...", /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_Spaces.default, null), "</ListItem>", /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_Spaces.default, null), "...", /*#__PURE__*/_react.default.createElement("br", null), "</List>");
-};
+const Usage = ({
+  type
+}) => /*#__PURE__*/_react.default.createElement(_Text.default, null, "<List", type ? ` type="${type}"` : '', ">", /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_Spaces.default, null), "<ListItem>", /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_Spaces.default, {
+  spaces: 6
+}), "...", /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_Spaces.default, null), "</ListItem>", /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_Spaces.default, null), "...", /*#__PURE__*/_react.default.createElement("br", null), "</List>");
 var _default = exports.default = {
   title: 'v2/List',
   component: _List.default,

package/dist/components/Loader/Loader.js

@@ -8,17 +8,16 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@chakra-ui/react");
-const Loader = _ref => {
-  let {
-    color = 'success',
-    loaderBackgroundColor = 'transparent',
-    isInfinite = true,
-    size = 12,
-    thickness = 2,
-    trackColor = 'gray.medium',
-    value = 0,
-    ...props
-  } = _ref;
+const Loader = ({
+  color = 'success',
+  loaderBackgroundColor = 'transparent',
+  isInfinite = true,
+  size = 12,
+  thickness = 2,
+  trackColor = 'gray.medium',
+  value = 0,
+  ...props
+}) => {
   /* -------------------------------------------------------------------- *\
       Note: Since most of the props for this component control multiple
       styles at a time, it was decided that it made the most sense to set

package/dist/components/Modal/styles/body.js

@@ -4,12 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _default = _ref => {
-  let {
-    hasFooter,
-    hasHeader,
-    hideCloseButton
-  } = _ref;
+var _default = ({
+  hasFooter,
+  hasHeader,
+  hideCloseButton
+}) => {
   const scrollingHeaderStyles = hasHeader || !hideCloseButton ? {
     // The following adapted from https://lea.verou.me/2012/04/background-attachment-local/
     background: 'linear-gradient(white 30%, white), linear-gradient(rgb(0 0 0 / 10%) 0%, white)',

package/dist/components/Modal/styles/closeButton.js

@@ -4,24 +4,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _default = _ref => {
-  let {
-    hasHeader
-  } = _ref;
-  return {
-    position: 'absolute',
-    top: hasHeader ? 4 : 2,
-    insetEnd: hasHeader ? 4 : 2,
-    color: 'gray.dark',
-    borderRadius: 'sm',
-    width: 8,
-    height: 8,
-    _focus: {
-      boxShadow: 'outline'
-    },
-    _hover: {
-      bg: 'gray.50'
-    }
-  };
-};
+var _default = ({
+  hasHeader
+}) => ({
+  position: 'absolute',
+  top: hasHeader ? 4 : 2,
+  insetEnd: hasHeader ? 4 : 2,
+  color: 'gray.dark',
+  borderRadius: 'sm',
+  width: 8,
+  height: 8,
+  _focus: {
+    boxShadow: 'outline'
+  },
+  _hover: {
+    bg: 'gray.50'
+  }
+});
 exports.default = _default;

package/dist/components/Modal/styles/dialog.js

@@ -4,22 +4,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _default = _ref => {
-  let {
-    hasFooter
-  } = _ref;
-  return {
-    borderRadius: 'md',
-    borderBottomRadius: {
-      base: '0',
-      tablet: 'md'
-    },
-    background: 'white',
-    color: 'inherit',
-    marginY: 0,
-    zIndex: 'layer8',
-    boxShadow: 'lg',
-    paddingBottom: hasFooter ? 0 : 4
-  };
-};
+var _default = ({
+  hasFooter
+}) => ({
+  borderRadius: 'md',
+  borderBottomRadius: {
+    base: '0',
+    tablet: 'md'
+  },
+  background: 'white',
+  color: 'inherit',
+  marginY: 0,
+  zIndex: 'layer8',
+  boxShadow: 'lg',
+  paddingBottom: hasFooter ? 0 : 4
+});
 exports.default = _default;

package/dist/components/Modal/styles/header.js

@@ -4,17 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _default = _ref => {
-  let {
-    hideCloseButton,
-    hasHeader
-  } = _ref;
-  return {
-    padding: !hideCloseButton || hasHeader ? 4 : 2,
-    fontSize: 'xl',
-    fontWeight: 'semibold',
-    // If just close button, still have 'header' section at top
-    minHeight: hasHeader || hideCloseButton ? null : 12
-  };
-};
+var _default = ({
+  hideCloseButton,
+  hasHeader
+}) => ({
+  padding: !hideCloseButton || hasHeader ? 4 : 2,
+  fontSize: 'xl',
+  fontWeight: 'semibold',
+  // If just close button, still have 'header' section at top
+  minHeight: hasHeader || hideCloseButton ? null : 12
+});
 exports.default = _default;

package/dist/components/Popover/styles/popover-arrow.js

@@ -4,12 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-const arrowStyles = _ref => {
-  let {
-    variant
-  } = _ref;
-  return {
-    backgroundColor: variant === 'dark' ? 'secondary.default' : 'white'
-  };
-};
+const arrowStyles = ({
+  variant
+}) => ({
+  backgroundColor: variant === 'dark' ? 'secondary.default' : 'white'
+});
 var _default = exports.default = arrowStyles;

package/dist/components/Popover/styles/popover-close-button.js

@@ -7,23 +7,20 @@ exports.default = void 0;
 const pseudoStyles = variant => ({
   bgColor: variant === 'dark' ? 'gray.600' : 'gray.50'
 });
-const closeButtonStyles = _ref => {
-  let {
-    variant
-  } = _ref;
-  return {
-    color: variant === 'dark' ? 'white' : 'black',
-    fontSize: '0.5rem',
-    position: 'absolute',
-    top: 0,
-    right: 0,
-    padding: 4,
-    borderTopRightRadius: 4,
-    _hover: pseudoStyles(variant),
-    _focus: {
-      ...pseudoStyles(variant),
-      boxShadow: 'outline'
-    }
-  };
-};
+const closeButtonStyles = ({
+  variant
+}) => ({
+  color: variant === 'dark' ? 'white' : 'black',
+  fontSize: '0.5rem',
+  position: 'absolute',
+  top: 0,
+  right: 0,
+  padding: 4,
+  borderTopRightRadius: 4,
+  _hover: pseudoStyles(variant),
+  _focus: {
+    ...pseudoStyles(variant),
+    boxShadow: 'outline'
+  }
+});
 var _default = exports.default = closeButtonStyles;

package/dist/components/Popover/styles/popover-content.js

@@ -4,26 +4,23 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-const popoverContentStyles = _ref => {
-  let {
-    variant
-  } = _ref;
-  return {
-    padding: 4,
-    marginBottom: 0,
-    maxWidth: '20rem',
-    borderRadius: 'base',
-    background: variant === 'dark' ? 'secondary.default' : 'white',
-    boxShadow: '2px 2px 4px 0 rgba(0,45,91,0.1)',
-    color: variant === 'dark' ? 'white' : 'black',
-    borderColor: 'gray.100',
-    borderWidth: '1px',
-    borderStyle: 'solid',
-    '--popper-arrow-shadow-color': t => t.colors.gray['100'],
-    zIndex: 'layer10',
-    _focusVisible: {
-      outline: '3px solid rgba(91, 170, 250, 0.7)'
-    }
-  };
-};
+const popoverContentStyles = ({
+  variant
+}) => ({
+  padding: 4,
+  marginBottom: 0,
+  maxWidth: '20rem',
+  borderRadius: 'base',
+  background: variant === 'dark' ? 'secondary.default' : 'white',
+  boxShadow: '2px 2px 4px 0 rgba(0,45,91,0.1)',
+  color: variant === 'dark' ? 'white' : 'black',
+  borderColor: 'gray.100',
+  borderWidth: '1px',
+  borderStyle: 'solid',
+  '--popper-arrow-shadow-color': t => t.colors.gray['100'],
+  zIndex: 'layer10',
+  _focusVisible: {
+    outline: '3px solid rgba(91, 170, 250, 0.7)'
+  }
+});
 var _default = exports.default = popoverContentStyles;

package/dist/components/Progress/Progress.js

@@ -10,11 +10,10 @@ var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@chakra-ui/react");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const Progress = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
-  let {
-    isRounded,
-    ...props
-  } = _ref;
+const Progress = /*#__PURE__*/(0, _react.forwardRef)(({
+  isRounded,
+  ...props
+}, ref) => {
   // Passing `isRounded` in as a prop throws a 'React does not recognize the X prop on a DOM element' error. Passing `isRounded` through `sx` instead, allows for the prop to be utilized by the theme without being set on the DOM element, avoiding the error.
   return /*#__PURE__*/_react.default.createElement(_react2.Progress, (0, _extends2.default)({
     ref: ref,

package/dist/components/Radio/Radio.js

@@ -10,17 +10,16 @@ var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@chakra-ui/react");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const Radio = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
-  let {
-    defaultChecked,
-    isChecked,
-    isDisabled,
-    value,
-    helperText,
-    children,
-    size = 'md',
-    ...props
-  } = _ref;
+const Radio = /*#__PURE__*/(0, _react.forwardRef)(({
+  defaultChecked,
+  isChecked,
+  isDisabled,
+  value,
+  helperText,
+  children,
+  size = 'md',
+  ...props
+}, ref) => {
   const helperTextSize = size === 'sm' || size === 'md' ? 'xs' : 'sm';
   return /*#__PURE__*/_react.default.createElement(_react2.Radio, (0, _extends2.default)({
     ref: ref,