@spothero/ui 17.1.0-beta.5 → 17.1.1

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

@@ -1,43 +1,27 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.GridItemStartEnd = exports.GridItemSpan = exports.GridColumnLayout = exports.Grid = void 0;
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-
-var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
-
-var _fill = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/fill"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _react2 = require("@chakra-ui/react");
-
 var _Grid = _interopRequireDefault(require("./Grid"));
-
 var _ = require("./..");
-
-var _excluded = ["isCompact"];
-
-var rangeControl = function rangeControl(max) {
-  var min = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+const rangeControl = function (max) {
+  let min = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
   return {
     control: {
-      max: max,
-      min: min,
+      max,
+      min,
       step: 1,
       type: 'range'
     }
   };
 };
-
-var spanMap = {
+const spanMap = {
   1: 12,
   2: 6,
   3: 4,
@@ -59,30 +43,27 @@ var _default = {
   }
 };
 exports.default = _default;
-
-var GridTemplate = function GridTemplate(args, _ref) {
-  var _context, _context2;
-
-  var hasDarkBackground = _ref.hasDarkBackground;
+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'
-  }), (0, _map.default)(_context = (0, _fill.default)(_context2 = Array(12)).call(_context2, null)).call(_context, function (Item, index) {
-    return /*#__PURE__*/_react.default.createElement(_.GridItem, {
-      key: "GridItem-".concat(index),
-      colSpan: 1
-    }, /*#__PURE__*/_react.default.createElement(_react2.Box, {
-      h: "20rem",
-      bg: hasDarkBackground ? 'primary.400' : 'primary.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'
+  })))));
 };
-
-var Grid = GridTemplate.bind({});
+const Grid = GridTemplate.bind({});
 exports.Grid = Grid;
-
-var GridItemTemplate = function GridItemTemplate(_ref2) {
-  var isCompact = _ref2.isCompact,
-      args = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+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
@@ -91,8 +72,7 @@ var GridItemTemplate = function GridItemTemplate(_ref2) {
     bg: "primary.default"
   }))));
 };
-
-var GridItemSpan = GridItemTemplate.bind({});
+const GridItemSpan = GridItemTemplate.bind({});
 exports.GridItemSpan = GridItemSpan;
 GridItemSpan.storyName = 'GridItem - span prop';
 GridItemSpan.argTypes = {
@@ -101,7 +81,7 @@ GridItemSpan.argTypes = {
 GridItemSpan.args = {
   colSpan: 12
 };
-var GridItemStartEnd = GridItemTemplate.bind({});
+const GridItemStartEnd = GridItemTemplate.bind({});
 exports.GridItemStartEnd = GridItemStartEnd;
 GridItemStartEnd.storyName = 'GridItem - start/end prop';
 GridItemStartEnd.argTypes = {
@@ -112,25 +92,21 @@ GridItemStartEnd.args = {
   colStart: 1,
   colEnd: 2
 };
-
-var ColumnLayoutTemplate = function ColumnLayoutTemplate(_ref3) {
-  var _context3, _context4;
-
-  var numberOfColumns = _ref3.numberOfColumns;
+const ColumnLayoutTemplate = _ref3 => {
+  let {
+    numberOfColumns
+  } = _ref3;
   return /*#__PURE__*/_react.default.createElement(_.Container, null, /*#__PURE__*/_react.default.createElement(_Grid.default, {
     bg: "secondary.default"
-  }, (0, _map.default)(_context3 = (0, _fill.default)(_context4 = Array(numberOfColumns)).call(_context4, null)).call(_context3, function (item, index) {
-    return /*#__PURE__*/_react.default.createElement(_.GridItem, {
-      key: "GridItem-".concat(index),
-      colSpan: spanMap[numberOfColumns]
-    }, /*#__PURE__*/_react.default.createElement(_react2.Box, {
-      h: "20rem",
-      bg: "primary.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"
+  })))));
 };
-
-var GridColumnLayout = ColumnLayoutTemplate.bind({});
+const GridColumnLayout = ColumnLayoutTemplate.bind({});
 exports.GridColumnLayout = GridColumnLayout;
 GridColumnLayout.storyName = 'Grid - MultiColumn Layout';
 GridColumnLayout.argTypes = {

package/dist/components/Grid/Grid.styles.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.compactStyles = exports.baseStyles = void 0;
 // NOTE: considering adding a specifc prop for grid row padding
-var baseStyles = {
+const baseStyles = {
   gap: {
     base: 4,
     tablet: 8
@@ -13,7 +13,7 @@ var baseStyles = {
   templateColumns: 'repeat(12, 1fr)'
 };
 exports.baseStyles = baseStyles;
-var compactStyles = {
+const compactStyles = {
   gap: 4
 };
 exports.compactStyles = compactStyles;

package/dist/components/Grid/GridItem.js

@@ -1,34 +1,18 @@
 "use strict";
 
-var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-
-var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
-
-var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
-
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _react2 = require("@chakra-ui/react");
-
 var _GridItem = _interopRequireDefault(require("./GridItem.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; }
-
-var GridItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  return /*#__PURE__*/_react.default.createElement(_react2.GridItem, (0, _extends2.default)({}, _GridItem.default, props, {
-    ref: ref
-  }));
-});
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
+const GridItem = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => /*#__PURE__*/_react.default.createElement(_react2.GridItem, (0, _extends2.default)({}, _GridItem.default, props, {
+  ref: ref
+})));
 var _default = GridItem;
 exports.default = _default;

package/dist/components/Grid/GridItem.styles.js

@@ -6,7 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 // NOTE: styles NOT in the Chakra's base styles do not need to explicitly export baseStyles
 // TODO: move this comment to the readme
-var styles = {
+
+const styles = {
   colSpan: 12
 };
 var _default = styles;

package/dist/components/Grid/index.js

@@ -1,23 +1,20 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 Object.defineProperty(exports, "GridItem", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _GridItem.default;
   }
 });
 Object.defineProperty(exports, "default", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _Grid.default;
   }
 });
-
 var _Grid = _interopRequireDefault(require("./Grid"));
-
 var _GridItem = _interopRequireDefault(require("./GridItem"));

package/dist/components/Heading/Heading.js

@@ -1,49 +1,28 @@
 "use strict";
 
-var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-
-var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
-
-var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
-
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
-var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react2 = require("@chakra-ui/react");
-
 var _Heading = require("./Heading.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; }
-
-var Heading = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  return /*#__PURE__*/_react.default.createElement(_react2.Heading, (0, _extends2.default)({}, props, {
-    ref: ref,
-    variant: props.variant || props.as || 'h2'
-  }));
-});
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
+const Heading = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => /*#__PURE__*/_react.default.createElement(_react2.Heading, (0, _extends2.default)({}, props, {
+  ref: ref,
+  variant: props.variant || props.as || 'h2'
+})));
 Heading.propTypes = {
   /** The React node that will render inside the element */
   children: _propTypes.default.node,
-
   /** Controls the underlying level of the html heading tag */
-  as: _propTypes.default.oneOf((0, _keys.default)(_Heading.variants)),
-
+  as: _propTypes.default.oneOf(Object.keys(_Heading.variants)),
   /** The styling that will be applied to the component regardless of the underlying html */
-  variant: _propTypes.default.oneOf((0, _keys.default)(_Heading.variants))
+  variant: _propTypes.default.oneOf(Object.keys(_Heading.variants))
 };
 var _default = Heading;
 exports.default = _default;

package/dist/components/Heading/Heading.stories.js

@@ -1,20 +1,13 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Heading = void 0;
-
-var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _Heading = require("./Heading.styles");
-
 var _Heading2 = _interopRequireDefault(require("./Heading"));
-
 var _default = {
   title: 'v2/Heading',
   component: _Heading2.default,
@@ -25,13 +18,13 @@ var _default = {
     as: {
       control: {
         type: 'select',
-        options: (0, _keys.default)(_Heading.variants)
+        options: Object.keys(_Heading.variants)
       }
     },
     variant: {
       control: {
         type: 'select',
-        options: (0, _keys.default)(_Heading.variants)
+        options: Object.keys(_Heading.variants)
       }
     },
     children: {
@@ -42,12 +35,8 @@ var _default = {
   }
 };
 exports.default = _default;
-
-var Template = function Template(props) {
-  return /*#__PURE__*/_react.default.createElement(_Heading2.default, props);
-};
-
-var Heading = Template.bind({});
+const Template = props => /*#__PURE__*/_react.default.createElement(_Heading2.default, props);
+const Heading = Template.bind({});
 exports.Heading = Heading;
 Heading.args = {
   children: 'Heading'

package/dist/components/Heading/Heading.styles.js

@@ -1,79 +1,65 @@
 "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.variants = exports.default = void 0;
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
-
 var _typography = require("../../theme/base/typography");
-
-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 baseStyle = {
+const baseStyle = {
   lineHeight: 1.5,
   fontWeight: _typography.fontWeights.semibold
 };
-var variants = {
-  h1: _objectSpread(_objectSpread({}, baseStyle), {}, {
+const variants = {
+  h1: {
+    ...baseStyle,
     fontSize: {
       base: _typography.fontSizes['2xl'],
       desktop: _typography.fontSizes['3xl']
     }
-  }),
-  h2: _objectSpread(_objectSpread({}, baseStyle), {}, {
+  },
+  h2: {
+    ...baseStyle,
     fontSize: {
       base: _typography.fontSizes.xl,
       desktop: _typography.fontSizes['2xl']
     }
-  }),
-  h3: _objectSpread(_objectSpread({}, baseStyle), {}, {
+  },
+  h3: {
+    ...baseStyle,
     fontSize: {
       base: _typography.fontSizes.lg,
       desktop: _typography.fontSizes.xl
     }
-  }),
-  h4: _objectSpread(_objectSpread({}, baseStyle), {}, {
+  },
+  h4: {
+    ...baseStyle,
     fontSize: {
       base: _typography.fontSizes.base,
       desktop: _typography.fontSizes.lg
     }
-  }),
-  h5: _objectSpread(_objectSpread({}, baseStyle), {}, {
+  },
+  h5: {
+    ...baseStyle,
     fontSize: {
       base: _typography.fontSizes.base,
       desktop: _typography.fontSizes.base
     }
-  }),
-  h6: _objectSpread(_objectSpread({}, baseStyle), {}, {
+  },
+  h6: {
+    ...baseStyle,
     fontSize: {
       base: _typography.fontSizes.sm,
       desktop: _typography.fontSizes.sm
     }
-  })
+  }
 };
 exports.variants = variants;
-var defaultProps = {
+const defaultProps = {
   variant: variants.h2
 };
 var _default = {
-  variants: variants,
-  baseStyle: baseStyle,
-  defaultProps: defaultProps
+  variants,
+  baseStyle,
+  defaultProps
 };
 exports.default = _default;

package/dist/components/Icon/Icon.js

@@ -5,9 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "default", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _react.Icon;
   }
 });
-
 var _react = require("@chakra-ui/react");

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

@@ -1,18 +1,13 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Icon = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _icons = require("@spothero/icons");
-
 var _Icon = _interopRequireDefault(require("./Icon"));
-
 var _default = {
   title: 'v2/Icon',
   component: _Icon.default,
@@ -21,27 +16,23 @@ var _default = {
   }
 };
 exports.default = _default;
-
-var Template = function Template(props) {
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    as: _icons.HeroCar,
-    color: "primary.default",
-    height: "24",
-    width: "24"
-  }), /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    as: _icons.S4BLogo,
-    color: "gray.dark",
-    height: "24",
-    width: "24",
-    paddingLeft: "16"
-  }), /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    as: _icons.Shield,
-    color: "green.default",
-    height: "24",
-    width: "24",
-    paddingLeft: "16"
-  }));
-};
-
-var Icon = Template.bind({});
+const Template = props => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+  as: _icons.HeroCar,
+  color: "primary.default",
+  height: "24",
+  width: "24"
+}), /*#__PURE__*/_react.default.createElement(_Icon.default, {
+  as: _icons.S4BLogo,
+  color: "gray.dark",
+  height: "24",
+  width: "24",
+  paddingLeft: "16"
+}), /*#__PURE__*/_react.default.createElement(_Icon.default, {
+  as: _icons.Shield,
+  color: "green.default",
+  height: "24",
+  width: "24",
+  paddingLeft: "16"
+}));
+const Icon = Template.bind({});
 exports.Icon = Icon;