@spothero/ui 22.5.3 → 23.0.1

package/dist/components/Input/index.js

@@ -0,0 +1,14 @@
+"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, "default", {
+  enumerable: true,
+  get: function get() {
+    return _Input["default"];
+  }
+});
+var _Input = _interopRequireDefault(require("./Input"));

package/dist/components/Input/styles/index.js

@@ -0,0 +1,65 @@
+"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 baseStyle = {
+  field: {
+    _placeholder: {
+      color: 'text.secondary.light',
+      fontWeight: 'normal',
+      _disabled: {
+        color: 'text.secondary.light',
+        opacity: 1
+      }
+    }
+  }
+};
+var variants = {
+  outline: {
+    field: {
+      border: '1px solid',
+      borderColor: 'gray.200',
+      fontSize: 'base',
+      paddingLeft: 3,
+      paddingRight: 3,
+      bg: 'inherit',
+      fontWeight: 'normal',
+      boxShadow: 'none !important',
+      _placeholder: {
+        color: 'text.secondary.light',
+        fontWeight: 'normal'
+      },
+      _focus: {
+        borderColor: 'primary.default'
+      },
+      _hover: {
+        borderColor: 'gray.300'
+      },
+      _readOnly: {
+        boxShadow: 'none !important',
+        userSelect: 'all'
+      },
+      _disabled: {
+        backgroundColor: 'gray.50',
+        opacity: 1,
+        cursor: 'not-allowed'
+      },
+      _invalid: {
+        borderColor: 'error',
+        _focus: {
+          borderColor: 'error'
+        }
+      }
+    }
+  }
+};
+var _default = exports["default"] = (0, _merge["default"])(_theme["default"].components.Input, {
+  baseStyle: baseStyle,
+  variants: variants
+});

package/dist/components/Link/Link.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _react.Link;
+  }
+});
+var _react = require("@chakra-ui/react");

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

@@ -0,0 +1,52 @@
+"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"] = exports.Overview = void 0;
+var _bind = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/bind"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@chakra-ui/react");
+var _share = _interopRequireDefault(require("@spothero/icons/share"));
+var _Text = _interopRequireDefault(require("../Text/Text"));
+var _Link = _interopRequireDefault(require("./Link"));
+var _default = exports["default"] = {
+  title: 'v2/Link',
+  component: _Link["default"],
+  parameters: {
+    removeBaseHtmlClass: true
+  }
+};
+var OverviewTemplate = function OverviewTemplate(props, _ref) {
+  var hasDarkBackground = _ref.hasDarkBackground;
+  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"), "."));
+};
+var Overview = exports.Overview = (0, _bind["default"])(OverviewTemplate).call(OverviewTemplate, {});
+Overview.parameters = {
+  importBy: 'Link'
+};

package/dist/components/Link/Link.styles.js

@@ -0,0 +1,45 @@
+"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.variants = exports["default"] = void 0;
+var _merge = _interopRequireDefault(require("lodash/merge"));
+var _theme = _interopRequireDefault(require("@chakra-ui/theme"));
+var baseStyle = {
+  transition: "all 0.15s ease",
+  color: 'text.link.light',
+  fontWeight: 'semibold',
+  _hover: {
+    color: 'primary.600',
+    textDecoration: 'none'
+  },
+  _focus: {
+    boxShadow: 'outline'
+  },
+  '& svg': {
+    d: 'inline-block',
+    verticalAlign: 'initial'
+  }
+};
+var linkOnDark = {
+  color: 'text.link.dark',
+  _hover: {
+    color: 'text.link.dark',
+    opacity: '.8'
+  }
+};
+var variants = exports.variants = {
+  standard: baseStyle,
+  onDark: linkOnDark
+};
+var defaultProps = {
+  variant: 'standard'
+};
+var _default = exports["default"] = (0, _merge["default"])(_theme["default"].components.Link, {
+  baseStyle: baseStyle,
+  variants: variants,
+  defaultProps: defaultProps
+});

package/dist/components/List/List.js

@@ -0,0 +1,69 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@chakra-ui/react");
+var _excluded = ["type"];
+function _getRequireWildcardCache(e) { if ("function" != typeof _WeakMap) return null; var r = new _WeakMap(), t = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
+var unorderedProps = {
+  as: 'ul',
+  styleType: 'disc'
+};
+var orderedProps = {
+  as: 'ol',
+  styleType: 'decimal'
+};
+var STYLE_POSITIONS = {
+  unset: 'unset',
+  revert: 'revert',
+  inside: 'inside',
+  outside: 'outside',
+  initial: 'initial',
+  inherit: 'inherit'
+};
+var TYPES = {
+  ordered: 'ordered',
+  unstyled: 'unstyled',
+  unordered: 'unordered'
+};
+var getListProps = function getListProps(type) {
+  switch (type) {
+    case TYPES.ordered:
+      return orderedProps;
+    case TYPES.unordered:
+      return unorderedProps;
+    default:
+      return;
+  }
+};
+var List = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var type = _ref.type,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return /*#__PURE__*/_react["default"].createElement(_react2.List, (0, _extends2["default"])({}, getListProps(type), props, {
+    ref: ref
+  }));
+});
+List.defaultProps = {
+  type: TYPES.unstyled,
+  stylePosition: STYLE_POSITIONS.inside
+};
+List.propTypes = {
+  /** The position of the list style */
+  stylePosition: _propTypes["default"].oneOf((0, _keys["default"])(STYLE_POSITIONS)),
+  /** Changes the underlying markdown to be an ordered or unorderd list, (unstyled will render a ul by default) */
+  type: _propTypes["default"].oneOf((0, _keys["default"])(TYPES))
+};
+var _default = exports["default"] = List;

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

@@ -0,0 +1,92 @@
+"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"] = exports.Unstyled = exports.Unordered = exports.Overview = exports.Ordered = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+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 _bind = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/bind"));
+var _react = _interopRequireDefault(require("react"));
+var _faker = require("@faker-js/faker");
+var _List = _interopRequireDefault(require("./List"));
+var _index = require("./index");
+var _Spaces = _interopRequireDefault(require("../../utils/Spaces"));
+var _Text = _interopRequireDefault(require("../Text/Text"));
+var _disableArgs = _interopRequireDefault(require("storybook/utils/disable-args"));
+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 _context3, _context4; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(t), !0)).call(_context3, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context4 = ownKeys(Object(t))).call(_context4, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+var DISABLE_TYPE = (0, _disableArgs["default"])('type');
+var Usage = function Usage(_ref) {
+  var type = _ref.type;
+  return /*#__PURE__*/_react["default"].createElement(_Text["default"], null, "<List", type ? " type=\"".concat(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"],
+  subcomponents: {
+    ListItem: _index.ListItem
+  },
+  parameters: {
+    importBy: 'List',
+    removeBaseHtmlClass: true
+  }
+};
+var OverviewTemplate = function OverviewTemplate(props) {
+  var _context, _context2;
+  return /*#__PURE__*/_react["default"].createElement(_List["default"], props, (0, _map["default"])(_context = (0, _fill["default"])(_context2 = Array(10)).call(_context2, null)).call(_context, function (_, index) {
+    return /*#__PURE__*/_react["default"].createElement(_index.ListItem, {
+      key: index
+    }, _faker.faker.random.words(10));
+  }));
+};
+var Overview = exports.Overview = (0, _bind["default"])(OverviewTemplate).call(OverviewTemplate, {});
+Overview.parameters = {
+  usage: [/*#__PURE__*/_react["default"].createElement(Usage, {
+    key: 1
+  })]
+};
+var Unordered = exports.Unordered = (0, _bind["default"])(OverviewTemplate).call(OverviewTemplate, {});
+Unordered.argTypes = DISABLE_TYPE;
+Unordered.parameters = {
+  usage: [/*#__PURE__*/_react["default"].createElement(Usage, {
+    type: "unordered",
+    key: 1
+  })]
+};
+Unordered.args = {
+  type: 'unordered'
+};
+var Ordered = exports.Ordered = (0, _bind["default"])(OverviewTemplate).call(OverviewTemplate, {});
+Ordered.argTypes = DISABLE_TYPE;
+Ordered.parameters = {
+  usage: [/*#__PURE__*/_react["default"].createElement(Usage, {
+    type: "ordered",
+    key: 1
+  })]
+};
+Ordered.args = {
+  type: 'ordered'
+};
+var Unstyled = exports.Unstyled = (0, _bind["default"])(OverviewTemplate).call(OverviewTemplate, {});
+Unstyled.parameters = {
+  usage: [/*#__PURE__*/_react["default"].createElement(Usage, {
+    key: 1
+  })]
+};
+Unstyled.argTypes = _objectSpread(_objectSpread({}, DISABLE_TYPE), (0, _disableArgs["default"])('stylePosition'));
+Unstyled.args = {
+  type: 'unstyled'
+};

package/dist/components/List/index.js

@@ -0,0 +1,21 @@
+"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, "ListItem", {
+  enumerable: true,
+  get: function get() {
+    return _react.ListItem;
+  }
+});
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _List["default"];
+  }
+});
+var _List = _interopRequireDefault(require("./List"));
+var _react = require("@chakra-ui/react");

package/dist/components/List/styles/index.js

@@ -0,0 +1,17 @@
+"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 _item = _interopRequireDefault(require("./item.styles"));
+var baseStyle = {
+  item: _item["default"]
+};
+var _default = exports["default"] = (0, _merge["default"])(_theme["default"].components.List, {
+  baseStyle: baseStyle
+});

package/dist/components/List/styles/item.styles.js

@@ -0,0 +1,11 @@
+"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 item = {
+  mb: 2
+};
+var _default = exports["default"] = item;

package/dist/components/Loader/Loader.js

@@ -0,0 +1,53 @@
+"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 _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@chakra-ui/react");
+var _excluded = ["color", "loaderBackgroundColor", "isInfinite", "size", "thickness", "trackColor", "value"];
+var Loader = function Loader(_ref) {
+  var _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'success' : _ref$color,
+    _ref$loaderBackground = _ref.loaderBackgroundColor,
+    loaderBackgroundColor = _ref$loaderBackground === void 0 ? 'transparent' : _ref$loaderBackground,
+    _ref$isInfinite = _ref.isInfinite,
+    isInfinite = _ref$isInfinite === void 0 ? true : _ref$isInfinite,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 12 : _ref$size,
+    _ref$thickness = _ref.thickness,
+    thickness = _ref$thickness === void 0 ? 2 : _ref$thickness,
+    _ref$trackColor = _ref.trackColor,
+    trackColor = _ref$trackColor === void 0 ? 'gray.medium' : _ref$trackColor,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? 0 : _ref$value,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  /* -------------------------------------------------------------------- *\
+      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
+      up the default style-related properties here in lou of creating an
+      overly complex styles file.
+  \* -------------------------------------------------------------------- */
+  var loaderDefaultProps = {
+    color: color,
+    isIndeterminate: isInfinite,
+    size: size,
+    thickness: thickness,
+    trackColor: trackColor,
+    value: value,
+    capIsRound: true
+  };
+  return /*#__PURE__*/_react["default"].createElement(_react2.CircularProgress, (0, _extends2["default"])({
+    sx: {
+      '& svg > circle:first-of-type': {
+        fill: loaderBackgroundColor
+      }
+    }
+  }, loaderDefaultProps, props));
+};
+var _default = exports["default"] = Loader;

package/dist/components/Loader/Loader.stories.js

@@ -0,0 +1,124 @@
+"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"] = exports.Overview = exports.InfiniteLoader = exports.FiniteLoader = void 0;
+var _bind = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/bind"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _disableArgs = _interopRequireDefault(require("storybook/utils/disable-args"));
+var _createControl = require("storybook/utils/create-control");
+var _Loader = _interopRequireDefault(require("./Loader"));
+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 _default = exports["default"] = {
+  title: 'v2/Loader',
+  component: _Loader["default"],
+  parameters: {
+    removeBaseHtmlClass: true,
+    importBy: 'Loader'
+  },
+  argTypes: _objectSpread(_objectSpread({
+    color: {
+      options: ['primary.default', 'secondary.default', 'white', 'success', 'warning', 'error'],
+      control: {
+        type: 'radio',
+        labels: {
+          'primary.default': 'Primary',
+          'secondary.default': 'Secondary',
+          white: 'White',
+          success: 'Success',
+          warning: 'Warning',
+          error: 'Error'
+        }
+      }
+    },
+    isInfinite: {
+      control: {
+        type: 'boolean'
+      }
+    },
+    loaderBackgroundColor: {
+      options: ['white', 'gray.light', 'gray.medium', 'gray.dark', 'transparent'],
+      control: {
+        type: 'radio',
+        labels: {
+          white: 'White',
+          'primary.default': 'Primary',
+          'gray.light': 'Light Gray',
+          'gray.medium': 'Medium Gray',
+          'gray.dark': 'Dark Gray',
+          transparent: 'Transparent'
+        }
+      }
+    },
+    size: {
+      options: [6, 12, 28, 48],
+      control: {
+        type: 'radio',
+        labels: {
+          6: 'Small',
+          12: 'Medium',
+          28: 'Large',
+          48: 'Extra Large'
+        }
+      }
+    },
+    trackColor: {
+      options: ['primary.default', 'gray.light', 'gray.medium', 'gray.dark', 'white'],
+      control: {
+        type: 'radio',
+        labels: {
+          'primary.default': 'Primary',
+          'gray.light': 'Light Gray',
+          'gray.medium': 'Medium Gray',
+          'gray.dark': 'Dark Gray',
+          white: 'White'
+        }
+      }
+    }
+  }, (0, _createControl.createRangeControl)({
+    name: 'thickness',
+    min: 2,
+    max: 16,
+    step: 2
+  })), (0, _createControl.createRangeControl)({
+    name: 'value',
+    min: 1,
+    max: 100
+  }))
+};
+var Template = function Template(props) {
+  return /*#__PURE__*/_react["default"].createElement(_Loader["default"], props);
+};
+var Overview = exports.Overview = (0, _bind["default"])(Template).call(Template, {});
+Overview.args = {
+  color: 'success',
+  isInfinite: false,
+  loaderBackgroundColor: 'transparent',
+  size: 12,
+  thickness: 2,
+  trackColor: 'gray.medium',
+  value: 35
+};
+var FiniteLoader = exports.FiniteLoader = (0, _bind["default"])(Template).call(Template, {});
+FiniteLoader.argTypes = _objectSpread({}, (0, _disableArgs["default"])(['color', 'isInfinite', 'loaderBackgroundColor', 'size', 'thickness', 'trackColor']));
+FiniteLoader.args = {
+  isInfinite: false,
+  value: 35
+};
+var InfiniteLoader = exports.InfiniteLoader = (0, _bind["default"])(Template).call(Template, {});
+InfiniteLoader.argTypes = _objectSpread({}, (0, _disableArgs["default"])(['color', 'loaderBackgroundColor', 'size', 'thickness', 'trackColor', 'value']));
+InfiniteLoader.args = {
+  isInfinite: true
+};

package/dist/components/Menu/Menu.js

@@ -0,0 +1,17 @@
+"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 _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@chakra-ui/react");
+var Menu = (0, _react2.forwardRef)(function (props, ref) {
+  return /*#__PURE__*/_react["default"].createElement(_react2.Menu, (0, _extends2["default"])({}, props, {
+    ref: ref
+  }));
+});
+var _default = exports["default"] = Menu;