@instructure/quiz-core 17.17.1-rc.2 → 17.17.3-rc.0

package/lib/banks/components/EditBankModal/presenter.js

@@ -1,183 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.EditBankModal = void 0;
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _uiButtons = require("@instructure/ui-buttons");
-
-var _uiTextInput = require("@instructure/ui-text-input");
-
-var _uiHeading = require("@instructure/ui-heading");
-
-var _uiThemeable = require("@instructure/ui-themeable");
-
-var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
-
-var _instUIMessages = require("../../../common/util/instUIMessages");
-
-var _quizCommon = require("@instructure/quiz-common");
-
-var _Bank = _interopRequireDefault(require("../../../common/records/Bank"));
-
-var _theme = _interopRequireDefault(require("./theme"));
-
-var _dec, _class, _class2, _temp;
-
-var styles = {
-  componentId: 'cvAov',
-  template: function template(theme) {
-    return "\n\n.cvAov_detV{flex:1 1 auto;font-size:".concat(theme.bankNameInputFontSize || 'inherit', ";padding:0 ").concat(theme.bankNameInputFontSize || 'inherit', ";text-overflow:ellipsis;white-space:nowrap}");
-  },
-  'bankNameInput': 'cvAov_detV'
-};
-var EditBankModal = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(EditBankModal, _Component);
-
-  var _super = (0, _createSuper2.default)(EditBankModal);
-
-  function EditBankModal() {
-    var _this;
-
-    (0, _classCallCheck2.default)(this, EditBankModal);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-
-    _this.continueAction = function () {
-      _this.props.showError(_this.props.errorKey);
-
-      if (_this.props.workingBank.isValid()) {
-        _this.props.updateBank(_this.props.workingBank);
-
-        _this.closeAction();
-      }
-    };
-
-    _this.closeAction = function () {
-      _this.props.hideError(_this.props.errorKey);
-
-      _this.props.clearModifications('banks', _this.props.workingBank.id);
-
-      if (_this.props.modalTrigger) {
-        _this.props.modalTrigger.focus();
-      }
-
-      _this.props.closeModal();
-    };
-
-    _this.onNameChange = function (e) {
-      _this.props.showError(_this.props.errorKey);
-
-      _this.props.changeBank(_this.props.workingBank.id, {
-        title: e.target.value
-      });
-    };
-
-    _this.getErrors = function () {
-      if (_this.props.displayError) {
-        return (0, _instUIMessages.toErrors)(_this.props.workingBank.errorsFor('title').toJS());
-      }
-    };
-
-    return _this;
-  }
-
-  (0, _createClass2.default)(EditBankModal, [{
-    key: "renderCancelButton",
-    value: function renderCancelButton() {
-      return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
-        onClick: this.closeAction,
-        className: styles.footerButtonWrapper,
-        margin: _quizCommon.XSMALL_SIDE_MARGIN
-      }, (0, _formatMessage.default)('Cancel'));
-    }
-  }, {
-    key: "renderSaveButton",
-    value: function renderSaveButton() {
-      return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
-        type: "button",
-        variant: "primary",
-        onClick: this.continueAction,
-        margin: _quizCommon.XSMALL_SIDE_MARGIN,
-        "data-automation": "sdk-edit-bank-save-button"
-      }, (0, _formatMessage.default)('Save Changes'));
-    }
-  }, {
-    key: "renderContent",
-    value: function renderContent() {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.bankNameInput
-      }, /*#__PURE__*/_react.default.createElement(_uiTextInput.TextInput, {
-        value: this.props.workingBank.title,
-        messages: this.getErrors(),
-        onChange: this.onNameChange,
-        renderLabel: /*#__PURE__*/_react.default.createElement("div", {
-          className: styles.bankNameLabel
-        }, (0, _formatMessage.default)('Bank Name')),
-        type: "text",
-        placeholder: (0, _formatMessage.default)('Enter a name...'),
-        "data-automation": "sdk-edit-bank-name-textinput"
-      }));
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      return /*#__PURE__*/_react.default.createElement(_quizCommon.Modal, {
-        open: this.props.modalOpen,
-        onDismiss: this.closeAction,
-        size: "small",
-        label: (0, _formatMessage.default)('Item Bank'),
-        "data-automation": "sdk-edit-bank-modal"
-      }, /*#__PURE__*/_react.default.createElement(_quizCommon.ModalHeader, null, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
-        level: "reset",
-        as: "h2"
-      }, (0, _formatMessage.default)('Edit Item Bank')), /*#__PURE__*/_react.default.createElement(_uiButtons.CloseButton, {
-        onClick: this.closeAction,
-        placement: "end",
-        offset: "medium",
-        screenReaderLabel: (0, _formatMessage.default)('Close')
-      })), /*#__PURE__*/_react.default.createElement(_quizCommon.ModalBody, null, this.renderContent()), /*#__PURE__*/_react.default.createElement(_quizCommon.ModalFooter, null, this.renderCancelButton(), this.renderSaveButton()));
-    }
-  }]);
-  EditBankModal.displayName = "EditBankModal";
-  return EditBankModal;
-}(_react.Component), _class2.propTypes = {
-  modalOpen: _propTypes.default.bool.isRequired,
-  modalTrigger: _propTypes.default.instanceOf(_react.Component),
-  workingBank: _propTypes.default.instanceOf(_Bank.default).isRequired,
-  displayError: _propTypes.default.bool,
-  errorKey: _propTypes.default.string.isRequired,
-  updateBank: _propTypes.default.func.isRequired,
-  changeBank: _propTypes.default.func.isRequired,
-  clearModifications: _propTypes.default.func.isRequired,
-  showError: _propTypes.default.func.isRequired,
-  hideError: _propTypes.default.func.isRequired,
-  closeModal: _propTypes.default.func.isRequired
-}, _class2.defaultProps = {
-  displayError: false,
-  modalTrigger: null
-}, _temp)) || _class);
-exports.EditBankModal = EditBankModal;
-var _default = EditBankModal;
-exports.default = _default;

package/lib/banks/components/EditBankModal/theme.js

@@ -1,15 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = generator;
-
-function generator(_ref) {
-  var typography = _ref.typography,
-      spacing = _ref.spacing;
-  return {
-    bankNameInputFontSize: typography.fontSizeMedium,
-    bankNameInputPadding: spacing.xSmall
-  };
-}

package/lib/banks/components/HeaderMenu/index.js

@@ -1,34 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _redux = require("redux");
-
-var _reactRedux = require("../../../common/react-redux");
-
-var modalActions = _interopRequireWildcard(require("../../../common/actions/modal"));
-
-var _ImportModal = require("../../../common/components/ImportModal");
-
-var _presenter = _interopRequireDefault(require("./presenter"));
-
-function mapStateToProps(state, props) {
-  return {};
-}
-
-function mapDispatchToProps(dispatch) {
-  return {
-    openImportModal: (0, _redux.bindActionCreators)(modalActions.openModal.bind(modalActions, (0, _ImportModal.generateImportModalId)('qtiImport')), dispatch)
-  };
-}
-
-var _default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(_presenter.default);
-
-exports.default = _default;

package/lib/banks/components/HeaderMenu/presenter.js

@@ -1,100 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.HeaderMenu = void 0;
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
-
-var _uiMenu = require("@instructure/ui-menu");
-
-var _uiButtons = require("@instructure/ui-buttons");
-
-var _uiIcons = require("@instructure/ui-icons");
-
-var _uiA11yContent = require("@instructure/ui-a11y-content");
-
-var _uiThemeable = require("@instructure/ui-themeable");
-
-var _QTIImportModal = _interopRequireDefault(require("../../../building/components/QTIImportModal"));
-
-var _quizCommon = require("@instructure/quiz-common");
-
-var _theme = _interopRequireDefault(require("./theme"));
-
-var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
-
-var _dec, _class, _class2, _temp;
-
-var styles = {
-  componentId: 'HITck',
-  template: function template(theme) {
-    return "\n\n.HITck_cLWx{font-size:".concat(theme.menuIconFontSize || 'inherit', ";margin-right:").concat(theme.menuIconMargin || 'inherit', ";vertical-align:middle}");
-  },
-  'menuIcon': 'HITck_cLWx'
-};
-var HeaderMenu = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(HeaderMenu, _Component);
-
-  var _super = (0, _createSuper2.default)(HeaderMenu);
-
-  function HeaderMenu() {
-    (0, _classCallCheck2.default)(this, HeaderMenu);
-    return _super.apply(this, arguments);
-  }
-
-  (0, _createClass2.default)(HeaderMenu, [{
-    key: "renderMenu",
-    value: function renderMenu() {
-      return /*#__PURE__*/_react.default.createElement(_uiMenu.Menu, {
-        trigger: /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
-          variant: "icon",
-          icon: _uiIcons.IconMoreSolid
-        }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('More Item Banking Actions')))
-      }, /*#__PURE__*/_react.default.createElement(_uiMenu.Menu.Item, {
-        key: "import",
-        disabled: !this.props.bank.canImport(),
-        onSelect: this.props.openImportModal
-      }, /*#__PURE__*/_react.default.createElement(_uiIcons.IconImportLine, {
-        className: styles.menuIcon,
-        "data-automation": "sdk-headermenu-import-content"
-      }), (0, _formatMessage.default)('Import Content')));
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var bank = this.props.bank;
-      return /*#__PURE__*/_react.default.createElement("div", null, this.renderMenu(), /*#__PURE__*/_react.default.createElement(_QTIImportModal.default, {
-        parentId: bank.id,
-        parentType: _quizCommon.PARENT_TYPE_BANK,
-        qtiImport: bank.getLatestImport(),
-        "data-automation": "sdk-qti-import-modal"
-      }));
-    }
-  }]);
-  HeaderMenu.displayName = "HeaderMenu";
-  return HeaderMenu;
-}(_react.Component), _class2.propTypes = {
-  openImportModal: _propTypes.default.func.isRequired,
-  bank: _reactImmutableProptypes.default.record.isRequired
-}, _temp)) || _class);
-exports.HeaderMenu = HeaderMenu;
-var _default = HeaderMenu;
-exports.default = _default;

package/lib/banks/components/HeaderMenu/theme.js

@@ -1,15 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = generator;
-
-function generator(_ref) {
-  var spacing = _ref.spacing,
-      typography = _ref.typography;
-  return {
-    menuIconMargin: spacing.xSmall,
-    menuIconFontSize: typography.fontSizeLarge
-  };
-}

package/lib/banks/components/NavWrapper/NavWrapper.examples.js

@@ -1,27 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _uiBreadcrumb = require("@instructure/ui-breadcrumb");
-
-var _uiText = require("@instructure/ui-text");
-
-var _default = {
-  propValues: {
-    children: [null, /*#__PURE__*/_react.default.createElement(_uiBreadcrumb.BreadcrumbLink, {
-      key: "bank"
-    }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
-      color: "primary"
-    }, "Bank"))],
-    navigateToBanks: [null, Function.prototype],
-    navigateToBuild: [null, Function.prototype]
-  }
-};
-exports.default = _default;

package/lib/banks/components/NavWrapper/index.js

@@ -1,24 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _quizCommon = require("@instructure/quiz-common");
-
-var _reactRedux = require("../../../common/react-redux");
-
-var _presenter = _interopRequireDefault(require("./presenter"));
-
-function mapStateToProps(state) {
-  return {
-    trayOpen: !!state.getIn(['ui', _quizCommon.BUILD_TRAY_OPEN])
-  };
-}
-
-var _default = (0, _reactRedux.connect)(mapStateToProps)(_presenter.default);
-
-exports.default = _default;

package/lib/banks/components/NavWrapper/presenter.js

@@ -1,189 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _reactDom = _interopRequireDefault(require("react-dom"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _uiPropTypes = require("@instructure/ui-prop-types");
-
-var _ReturnButton = require("../../../common/components/shared/return_button/ReturnButton");
-
-var _uiButtons = require("@instructure/ui-buttons");
-
-var _uiBreadcrumb = require("@instructure/ui-breadcrumb");
-
-var _uiIcons = require("@instructure/ui-icons");
-
-var _uiView = require("@instructure/ui-view");
-
-var _uiThemeable = require("@instructure/ui-themeable");
-
-var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
-
-var _theme = _interopRequireDefault(require("./theme"));
-
-var _dec, _class, _class2, _temp;
-
-var styles = {
-  componentId: 'bSJyX',
-  template: function template(theme) {
-    return "\n\n.bSJyX_diTj{align-items:center;background-color:".concat(theme.navBackgroundColor || 'inherit', ";border-bottom:").concat(theme.navBorderWidth || 'inherit', " solid ").concat(theme.navBorderColor || 'inherit', ";box-sizing:border-box;display:flex;flex-direction:row;padding:").concat(theme.navPaddingTopBottom || 'inherit', " ").concat(theme.navPaddingLeftRight || 'inherit', ";position:sticky;top:0;width:100%;z-index:4444}\n\n@supports (-ms-ime-align:auto){.bSJyX_diTj{position:relative}}\n\n.bSJyX_ZXRE{flex:1}");
-  },
-  'nav': 'bSJyX_diTj',
-  'crumbs': 'bSJyX_ZXRE'
-};
-
-var _ref = /*#__PURE__*/_react.default.createElement(_uiIcons.IconBankLine, {
-  size: "x-small"
-});
-
-var NavWrapper = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(NavWrapper, _Component);
-
-  var _super = (0, _createSuper2.default)(NavWrapper);
-
-  function NavWrapper() {
-    var _this;
-
-    (0, _classCallCheck2.default)(this, NavWrapper);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-
-    _this.setItemBanksRef = function (node) {
-      _this.itemBanksRef = node;
-    };
-
-    _this.setCloseButtonRef = function (node) {
-      _this.closeButtonRef = node;
-    };
-
-    return _this;
-  }
-
-  (0, _createClass2.default)(NavWrapper, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var shouldManageFocus = this.props.trayOpen || this.props.navigateToBuild;
-      if (!shouldManageFocus) return;
-
-      if (this.closeButtonRef) {
-        _reactDom.default.findDOMNode(this.closeButtonRef).focus();
-      } else if (this.props.navigateToBanks && this.itemBanksRef) {
-        _reactDom.default.findDOMNode(this.itemBanksRef).focus();
-      }
-    }
-  }, {
-    key: "renderBreadcrumbLinks",
-    value: function renderBreadcrumbLinks() {
-      var _this$props = this.props,
-          returnToUrl = _this$props.returnToUrl,
-          canvasReferrerLinkText = _this$props.canvasReferrerLinkText;
-
-      var canvasReferrerLink = returnToUrl && canvasReferrerLinkText && /*#__PURE__*/_react.default.createElement(_uiBreadcrumb.BreadcrumbLink, {
-        key: "Context",
-        href: returnToUrl,
-        target: "_top"
-      }, canvasReferrerLinkText);
-
-      var banksLinks = /*#__PURE__*/_react.default.createElement(_uiBreadcrumb.BreadcrumbLink, {
-        ref: this.setItemBanksRef,
-        icon: _ref,
-        key: "Banks",
-        onClick: this.props.navigateToBanks
-      }, (0, _formatMessage.default)('Item Banks')); // If Breadcrumb has multiple children (even if 2nd is null), it will
-      // render the `>` icon, which we don't want if there are no children.
-
-
-      var breadCrumbLinks = [banksLinks];
-      if (this.props.children) breadCrumbLinks.push(this.props.children);
-      if (canvasReferrerLink) breadCrumbLinks.unshift(canvasReferrerLink);
-      return breadCrumbLinks;
-    }
-  }, {
-    key: "renderReturnButton",
-    value: function renderReturnButton() {
-      var _this$props2 = this.props,
-          navigateToBuild = _this$props2.navigateToBuild,
-          closeTray = _this$props2.closeTray,
-          returnToUrl = _this$props2.returnToUrl;
-
-      if (!closeTray && returnToUrl) {
-        return /*#__PURE__*/_react.default.createElement(_ReturnButton.ReturnButton, {
-          returnToUrl: returnToUrl
-        });
-      } else if (navigateToBuild) {
-        return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
-          onClick: navigateToBuild
-        }, (0, _formatMessage.default)('Return'));
-      }
-    }
-  }, {
-    key: "renderCloseButton",
-    value: function renderCloseButton() {
-      if (this.props.closeTray) {
-        return /*#__PURE__*/_react.default.createElement(_uiButtons.CloseButton, {
-          elementRef: this.setCloseButtonRef,
-          placement: "start",
-          onClick: this.props.closeTray,
-          screenReaderLabel: (0, _formatMessage.default)('Return to quiz')
-        });
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      return /*#__PURE__*/_react.default.createElement(_uiView.View, null, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.nav
-      }, this.renderCloseButton(), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.crumbs
-      }, /*#__PURE__*/_react.default.createElement(_uiBreadcrumb.Breadcrumb, {
-        size: "small",
-        label: (0, _formatMessage.default)('You are here:')
-      }, this.renderBreadcrumbLinks())), this.renderReturnButton(), this.props.renderHeaderMenu()));
-    }
-  }]);
-  NavWrapper.displayName = "NavWrapper";
-  return NavWrapper;
-}(_react.Component), _class2.propTypes = {
-  children: _uiPropTypes.Children.oneOf([_uiBreadcrumb.BreadcrumbLink]),
-  closeTray: _propTypes.default.func,
-  navigateToBanks: _propTypes.default.func,
-  navigateToBuild: _propTypes.default.func,
-  renderHeaderMenu: _propTypes.default.func,
-  trayOpen: _propTypes.default.bool.isRequired,
-  returnToUrl: _propTypes.default.string,
-  canvasReferrerLinkText: _propTypes.default.string
-}, _class2.defaultProps = {
-  children: null,
-  closeTray: null,
-  navigateToBanks: null,
-  navigateToBuild: null,
-  renderHeaderMenu: Function.prototype,
-  returnToUrl: null,
-  canvasReferrerLinkText: null
-}, _temp)) || _class);
-var _default = NavWrapper;
-exports.default = _default;

package/lib/banks/components/NavWrapper/theme.js

@@ -1,24 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = generator;
-
-function generator(_ref) {
-  var spacing = _ref.spacing,
-      borders = _ref.borders,
-      colors = _ref.colors,
-      typography = _ref.typography,
-      breakpoints = _ref.breakpoints;
-  return {
-    navPaddingTopBottom: spacing.small,
-    navPaddingLeftRight: spacing.xLarge,
-    navBorderWidth: borders.widthSmall,
-    navBorderColor: colors.tiara,
-    navBackgroundColor: colors.white,
-    bankIconColor: colors.electric,
-    bankIconFontSize: typography.fontSizeLarge,
-    bankIconPadding: spacing.xSmall
-  };
-}