@spothero/ui 15.1.3-beta.0 → 15.2.0-beta.1

package/v2/components/Accordion/Accordion.stories.js

@@ -0,0 +1,86 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Accordion = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@chakra-ui/react");
+
+var _Text = _interopRequireDefault(require("../Text/Text"));
+
+var _Heading = _interopRequireDefault(require("../Heading/Heading"));
+
+var _Accordion = _interopRequireDefault(require("./Accordion"));
+
+var _index = require("./index");
+
+var _default = {
+  title: 'v2/Accordion',
+  parameters: {
+    removeBaseHtmlClass: true
+  },
+  argTypes: {
+    accordionText: {
+      control: {
+        type: 'text'
+      }
+    },
+    allowMultiple: {
+      control: {
+        type: 'boolean'
+      }
+    },
+    allowToggle: {
+      control: {
+        type: 'boolean'
+      }
+    },
+    index: {
+      control: {
+        type: 'number'
+      }
+    }
+  }
+};
+exports.default = _default;
+
+var AccordionTemplate = function AccordionTemplate(_ref) {
+  var accordionText = _ref.accordionText,
+      allowMultiple = _ref.allowMultiple,
+      index = _ref.index,
+      allowToggle = _ref.allowToggle;
+  var multipleOptions = allowMultiple ? {
+    allowMultiple: allowMultiple,
+    defaultIndex: index
+  } : '';
+  var toggleOptions = allowToggle ? {
+    allowToggle: allowToggle
+  } : '';
+  return /*#__PURE__*/_react.default.createElement(_Accordion.default, (0, _extends2.default)({}, toggleOptions, multipleOptions), /*#__PURE__*/_react.default.createElement(_index.AccordionItem, null, /*#__PURE__*/_react.default.createElement(_Heading.default, {
+    as: "h3"
+  }, /*#__PURE__*/_react.default.createElement(_index.AccordionButton, null, /*#__PURE__*/_react.default.createElement(_react2.Box, {
+    flex: "1",
+    textAlign: "left"
+  }, "Accordion Item 1 Title"), /*#__PURE__*/_react.default.createElement(_index.AccordionIcon, null))), /*#__PURE__*/_react.default.createElement(_index.AccordionPanel, null, /*#__PURE__*/_react.default.createElement(_Text.default, null, accordionText))), /*#__PURE__*/_react.default.createElement(_index.AccordionItem, null, /*#__PURE__*/_react.default.createElement(_Heading.default, {
+    as: "h3"
+  }, /*#__PURE__*/_react.default.createElement(_index.AccordionButton, null, /*#__PURE__*/_react.default.createElement(_react2.Box, {
+    flex: "1",
+    textAlign: "left"
+  }, "Accordion Item 2 Title"), /*#__PURE__*/_react.default.createElement(_index.AccordionIcon, null))), /*#__PURE__*/_react.default.createElement(_index.AccordionPanel, null, /*#__PURE__*/_react.default.createElement(_Text.default, null, accordionText))));
+};
+
+var Accordion = AccordionTemplate.bind({});
+exports.Accordion = Accordion;
+Accordion.args = {
+  accordionText: "You must come along now, Artoo. There's really nothing more we can do. And my joints are freezing up. Don't say thing like that! Of course we'll see Master Luke again. He'll be quite all right, you'll see. Stupid little short-circuit. He'll be quite all right. Sir, all the patrols are in. There's still no contact from Skywalker or Solo. Mistress Leia, Artoo says he's been quite unable to pick up any signals, although he does admit that his own range is far too weak to abandon all hope. Your Highness, there's nothing more we can do tonight. The shield doors must be closed. Close the doors. Yes, sir.",
+  allowMultiple: true,
+  allowToggle: true,
+  index: [1]
+};

package/v2/components/Accordion/index.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "AccordionButton", {
+  enumerable: true,
+  get: function get() {
+    return _react.AccordionButton;
+  }
+});
+Object.defineProperty(exports, "AccordionIcon", {
+  enumerable: true,
+  get: function get() {
+    return _react.AccordionIcon;
+  }
+});
+Object.defineProperty(exports, "AccordionItem", {
+  enumerable: true,
+  get: function get() {
+    return _react.AccordionItem;
+  }
+});
+Object.defineProperty(exports, "AccordionPanel", {
+  enumerable: true,
+  get: function get() {
+    return _react.AccordionPanel;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _Accordion.default;
+  }
+});
+
+var _Accordion = _interopRequireDefault(require("./Accordion"));
+
+var _react = require("@chakra-ui/react");

package/v2/components/Accordion/styles/button.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _Heading = require("../../Heading/Heading.styles");
+
+var button = {
+  fontSize: _Heading.variants.h4.fontSize,
+  fontWeight: 'semibold',
+  px: 0,
+  py: {
+    base: 4,
+    tablet: 6
+  },
+  '& svg': {
+    color: 'primary.default'
+  }
+};
+var _default = button;
+exports.default = _default;

package/v2/components/Accordion/styles/container.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var container = {
+  borderTopWidth: '1px',
+  borderColor: 'gray.medium',
+  _last: {
+    borderBottomWidth: '1px'
+  }
+};
+var _default = container;
+exports.default = _default;

package/v2/components/Accordion/styles/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+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 _panel = _interopRequireDefault(require("./panel"));
+
+var _button = _interopRequireDefault(require("./button"));
+
+var _container = _interopRequireDefault(require("./container"));
+
+var parts = ['container', 'button', 'panel'];
+var baseStyle = {
+  panel: _panel.default,
+  button: _button.default,
+  container: _container.default
+};
+
+var _default = (0, _merge.default)(_theme.default.components.Accordion, {
+  parts: parts,
+  baseStyle: baseStyle
+});
+
+exports.default = _default;

package/v2/components/Accordion/styles/panel.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var panel = {
+  pt: 0,
+  px: 0,
+  pb: 6
+};
+var _default = panel;
+exports.default = _default;

package/v2/components/Button/Button.js

@@ -0,0 +1,73 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+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 _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _react2 = require("@chakra-ui/react");
+
+var _buttonProps = _interopRequireDefault(require("./button-props"));
+
+var _excluded = ["asAnchor", "isExternal"];
+
+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; }
+
+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 anchorProps = function anchorProps() {
+  var isExternal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  return _objectSpread({
+    as: 'a',
+    type: null
+  }, isExternal && {
+    target: '_blank',
+    rel: 'noopener noreferrer'
+  });
+};
+
+var Button = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var asAnchor = _ref.asAnchor,
+      isExternal = _ref.isExternal,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_react2.Button, (0, _extends2.default)({
+    iconSpacing: 2
+  }, props, (asAnchor || props.as === 'a') && anchorProps(isExternal), {
+    ref: ref
+  }));
+});
+Button.propTypes = _buttonProps.default;
+Button.defaultProps = {
+  variant: 'primary',
+  type: 'button'
+};
+var _default = Button;
+exports.default = _default;

package/v2/components/Button/Button.styles.js

@@ -0,0 +1,172 @@
+"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 _merge = _interopRequireDefault(require("lodash/merge"));
+
+var _theme = _interopRequireDefault(require("@chakra-ui/theme"));
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var baseStyle = {
+  px: 8,
+  py: 3,
+  fontSize: 'base',
+  lineHeight: 0.875,
+  fontWeight: 'semibold',
+  borderWidth: '1px',
+  borderStyle: 'solid',
+  borderRadius: '1.25rem',
+  textTransform: 'capitalize',
+  transition: 'all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
+  _disabled: {
+    cursor: 'not-allowed',
+    opacity: 1,
+    bg: 'gray.medium',
+    borderColor: 'gray.medium',
+    color: 'gray.dark'
+  },
+  '& svg': {
+    display: 'block'
+  }
+}; // TODO: We need an active styling
+
+var disabledButtonHoverStyle = {
+  _disabled: {
+    bg: 'gray.medium',
+    borderColor: 'gray.medium',
+    color: 'gray.dark'
+  }
+};
+var destructiveButtonStyles = {
+  bg: 'white',
+  borderColor: 'red.default',
+  color: 'red.default',
+  _hover: _objectSpread({
+    borderColor: 'red.800',
+    color: 'red.800'
+  }, disabledButtonHoverStyle)
+};
+var variants = {
+  primary: {
+    bg: 'primary.default',
+    borderColor: 'primary.default',
+    color: 'white',
+    _hover: _objectSpread({
+      bg: 'primary.600',
+      borderColor: 'primary.600',
+      color: 'white'
+    }, disabledButtonHoverStyle)
+  },
+  primaryOnDark: {
+    bg: 'yellow.default',
+    borderColor: 'yellow.default',
+    color: 'black',
+    _hover: _objectSpread({
+      bg: 'yellow.500',
+      borderColor: 'yellow.500',
+      color: 'black'
+    }, disabledButtonHoverStyle),
+    _focus: {
+      boxShadow: '0 0 0 3px rgba(255, 255, 255, 0.7)'
+    }
+  },
+  secondary: {
+    bg: 'white',
+    borderColor: 'gray.medium',
+    color: 'primary.default',
+    _hover: _objectSpread({
+      borderColor: 'primary.600',
+      color: 'primary.600'
+    }, disabledButtonHoverStyle)
+  },
+  secondaryOnDark: {
+    bg: 'none',
+    borderColor: 'white',
+    color: 'white',
+    _hover: _objectSpread({
+      bg: 'white',
+      borderColor: 'white',
+      color: 'black'
+    }, disabledButtonHoverStyle),
+    _focus: {
+      boxShadow: '0 0 0 3px rgba(255, 255, 255, 0.7)'
+    }
+  },
+  tertiary: {
+    bg: 'none',
+    borderWidth: 'none',
+    borderRadius: 'unset',
+    color: 'primary.default',
+    h: 'unset',
+    m: 'unset',
+    minW: 'unset',
+    p: 'unset',
+    lineHeight: 1,
+    _disabled: {
+      bg: 'none',
+      color: 'gray.dark'
+    },
+    _hover: {
+      color: 'primary.600',
+      _disabled: {
+        color: 'gray.dark'
+      }
+    }
+  },
+  tertiaryOnDark: {
+    bg: 'none',
+    borderRadius: 'unset',
+    borderWidth: 'none',
+    color: 'white',
+    h: 'unset',
+    m: 'unset',
+    minW: 'unset',
+    p: 'unset',
+    _disabled: {
+      bg: 'none',
+      color: 'white',
+      opacity: '.7'
+    },
+    _hover: {
+      color: 'white',
+      opacity: '.8',
+      _disabled: {
+        opacity: '.7'
+      }
+    }
+  },
+  destructive: _objectSpread({}, destructiveButtonStyles),
+  destructiveOnDark: _objectSpread({}, destructiveButtonStyles)
+};
+exports.variants = variants;
+var defaultProps = {
+  size: null
+};
+
+var _default = (0, _merge.default)(_theme.default.components.Button, {
+  variants: variants,
+  baseStyle: baseStyle,
+  defaultProps: defaultProps
+});
+
+exports.default = _default;

package/v2/components/Button/button-props.js

@@ -0,0 +1,90 @@
+"use strict";
+
+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 _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Button = require("./Button.styles");
+
+var props = {
+  /**
+   * Alters the underlying html tag
+   */
+  as: _propTypes.default.string,
+
+  /**
+   * If `true`, the button will render as an anchor.
+   */
+  asAnchor: _propTypes.default.bool,
+
+  /**
+   * If `true`, and an anchor button, target="_blank" and rel="noopener noreferrer" will be set on the anchor
+   * "isExternal" is used to maintain parity with the Link component.
+   */
+  isExternal: _propTypes.default.bool,
+
+  /**
+   * If `true`, the button will show a spinner.
+   */
+  isLoading: _propTypes.default.bool,
+
+  /**
+   * If `true`, the button will be styled in its active state.
+   */
+  isActive: _propTypes.default.bool,
+
+  /**
+   * If `true`, the button will be disabled.
+   */
+  isDisabled: _propTypes.default.bool,
+
+  /**
+   * The label to show in the button when `isLoading` is true
+   * If no text is passed, it only shows the spinner
+   */
+  loadingText: _propTypes.default.string,
+
+  /**
+   * If `true`, the button will take up the full width of its container.
+   */
+  isFullWidth: _propTypes.default.bool,
+
+  /**
+   * The html button type to use.
+   */
+  type: _propTypes.default.oneOf(['button', 'reset', 'submit']),
+
+  /**
+   * If added, the button will show an icon before the button's label.
+   * @type PropTypes.node
+   */
+  leftIcon: _propTypes.default.node,
+
+  /**
+   * If added, the button will show an icon after the button's label.
+   * @type PropTypes.node
+   */
+  rightIcon: _propTypes.default.node,
+
+  /**
+   * The space between the button icon and label.
+   * @type SystemProps["marginRight"]
+   */
+  iconSpacing: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+
+  /**
+   * Replace the spinner component when `isLoading` is set to `true`
+   * @type PropTypes.node
+   */
+  spinner: _propTypes.default.node,
+  variant: _propTypes.default.oneOf((0, _keys.default)(_Button.variants))
+};
+var _default = props;
+exports.default = _default;

package/v2/components/Button/index.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Button", {
+  enumerable: true,
+  get: function get() {
+    return _Button.default;
+  }
+});
+Object.defineProperty(exports, "ButtonGroup", {
+  enumerable: true,
+  get: function get() {
+    return _react.ButtonGroup;
+  }
+});
+
+var _Button = _interopRequireDefault(require("./Button"));
+
+var _react = require("@chakra-ui/react");

package/v2/components/Card/Card.js

@@ -0,0 +1,38 @@
+"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");
+
+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 Card = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  return /*#__PURE__*/_react.default.createElement(_react2.Box, (0, _extends2.default)({
+    position: "relative",
+    padding: 4,
+    bgColor: "background.white",
+    borderRadius: "lg",
+    boxShadow: "2px 2px 4px 0 rgba(0,45,91,0.1)"
+  }, props, {
+    ref: ref
+  }));
+});
+var _default = Card;
+exports.default = _default;

package/v2/components/Card/Card.stories.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Card = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@chakra-ui/react");
+
+var _Card = _interopRequireDefault(require("./Card"));
+
+var _default = {
+  title: 'v2/Card',
+  component: _Card.default,
+  parameters: {
+    removeBaseHtmlClass: true
+  }
+};
+/*
+    Storybook's background is white so the Card is hard to see.
+    The Card is typically displayed against a light gray background.
+*/
+
+exports.default = _default;
+
+var Template = function Template(props) {
+  return /*#__PURE__*/_react.default.createElement(_react2.Box, {
+    backgroundColor: "gray.light",
+    padding: 8
+  }, /*#__PURE__*/_react.default.createElement(_Card.default, props));
+};
+
+var Card = Template.bind({});
+exports.Card = Card;
+Card.args = {
+  children: 'Bonbon lollipop tiramisu cupcake bear claw cupcake. Icing candy canes cookie caramels wafer tootsie roll soufflé halvah. Ice cream tart gummies apple pie chocolate bar. Pastry gummies macaroon fruitcake donut sweet caramels candy. Oat cake marshmallow biscuit carrot cake fruitcake brownie pastry liquorice liquorice. Topping sweet gingerbread. Chupa chups caramels brownie. Icing jujubes chupa chups cookie. Carrot cake gummi bears powder apple pie donut pudding macaroon. Icing jelly cupcake powder jelly croissant pastry. Powder jelly fruitcake gummies sweet tootsie roll candy. Icing cheesecake toffee tart pastry lemon drops lemon drops bonbon wafer. Cheesecake ice cream wafer apple pie candy canes croissant. Sweet croissant pudding carrot cake oat cake chupa chups. Gingerbread lemon drops biscuit oat cake carrot cake. Chocolate cake jelly-o cake cake candy lollipop.'
+};

package/v2/components/Checkbox/Checkbox.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _react.Checkbox;
+  }
+});
+
+var _react = require("@chakra-ui/react");