@automattic/vip-design-system 0.9.6 → 0.10.2

package/build/system/Form/ToggleRow.js

@@ -1,8 +1,14 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.ToggleRow = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _ = require("..");
@@ -11,12 +17,6 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["image", "badge", "title", "subTitle", "body", "meta", "sx"];
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 var ToggleRow = function ToggleRow(_ref) {
   var image = _ref.image,
       badge = _ref.badge,
@@ -25,10 +25,9 @@ var ToggleRow = function ToggleRow(_ref) {
       body = _ref.body,
       meta = _ref.meta,
       sx = _ref.sx,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   return (0, _jsxRuntime.jsxs)(_.Flex, {
-    sx: _extends({
+    sx: (0, _extends2["default"])({
       alignItems: 'center',
       py: 3,
       borderBottom: '1px solid',
@@ -89,7 +88,7 @@ var ToggleRow = function ToggleRow(_ref) {
         children: body
       }), meta && meta]
     }), (0, _jsxRuntime.jsx)(_.Box, {
-      children: (0, _jsxRuntime.jsx)(_.Toggle, _extends({}, props))
+      children: (0, _jsxRuntime.jsx)(_.Toggle, (0, _extends2["default"])({}, props))
     })]
   });
 };

package/build/system/Form/Validation.js

@@ -1,8 +1,14 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.Validation = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _md = require("react-icons/md");
@@ -13,19 +19,12 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["children", "isValid"];
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 var Validation = function Validation(_ref) {
   var children = _ref.children,
       isValid = _ref.isValid,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   var Icon = isValid ? _md.MdCheckCircle : _md.MdErrorOutline;
-  return (0, _jsxRuntime.jsxs)(_.Heading, _extends({
+  return (0, _jsxRuntime.jsxs)(_.Heading, (0, _extends2["default"])({
     variant: "h5",
     as: "p",
     sx: {

package/build/system/Grid/Grid.js

@@ -1,18 +1,25 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.Grid = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _themeUi = require("theme-ui");
 
 var _react = require("react");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+/** @jsxImportSource theme-ui */
 
+/**
+ * External dependencies
+ */
 var Grid = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  return (0, _jsxRuntime.jsx)(_themeUi.Grid, _extends({}, props, {
+  return (0, _jsxRuntime.jsx)(_themeUi.Grid, (0, _extends2["default"])({}, props, {
     ref: ref
   }));
 });

package/build/system/Grid/Grid.stories.js

@@ -1,20 +1,12 @@
 "use strict";
 
 exports.__esModule = true;
-exports.Default = exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
+exports["default"] = exports.Default = void 0;
 
 var _ = require("..");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-/**
- * External dependencies
- */
-
 /**
  * Internal dependencies
  */

package/build/system/Heading/Heading.js

@@ -1,40 +1,45 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.Heading = void 0;
 
-var _themeUi = require("theme-ui");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
-var _jsxRuntime = require("theme-ui/jsx-runtime");
+var _themeUi = require("theme-ui");
 
-var _excluded = ["variant", "sx"];
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _classnames = _interopRequireDefault(require("classnames"));
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var _excluded = ["variant", "sx", "className"];
 
 var Heading = function Heading(_ref) {
   var _ref$variant = _ref.variant,
       variant = _ref$variant === void 0 ? 'h3' : _ref$variant,
       sx = _ref.sx,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-  return (0, _jsxRuntime.jsx)(_themeUi.Heading, _extends({
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? null : _ref$className,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  return (0, _jsxRuntime.jsx)(_themeUi.Heading, (0, _extends2["default"])({
     as: variant,
-    sx: _extends({
+    sx: (0, _extends2["default"])({
       color: 'heading',
       // pass variant prop to sx
       variant: "text." + variant
-    }, sx)
+    }, sx),
+    className: (0, _classnames["default"])('vip-heading-component', className)
   }, props));
 };
 
 exports.Heading = Heading;
 Heading.propTypes = {
   variant: _propTypes["default"].string,
-  sx: _propTypes["default"].object
+  sx: _propTypes["default"].object,
+  className: _propTypes["default"].any
 };

package/build/system/Heading/Heading.stories.js

@@ -1,20 +1,12 @@
 "use strict";
 
 exports.__esModule = true;
-exports.Default = exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
+exports["default"] = exports.Default = void 0;
 
 var _ = require("..");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-/**
- * External dependencies
- */
-
 /**
  * Internal dependencies
  */

package/build/system/Link/Link.js

@@ -1,8 +1,14 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.Link = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
 var _themeUi = require("theme-ui");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -11,20 +17,13 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["active", "sx"];
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 var Link = function Link(_ref) {
   var _ref$active = _ref.active,
       active = _ref$active === void 0 ? false : _ref$active,
       sx = _ref.sx,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-  return (0, _jsxRuntime.jsx)(_themeUi.Link, _extends({}, props, {
-    sx: _extends({
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  return (0, _jsxRuntime.jsx)(_themeUi.Link, (0, _extends2["default"])({}, props, {
+    sx: (0, _extends2["default"])({
       color: active ? 'heading' : 'link',
       textDecoration: 'none',
       borderBottom: '1px solid',

package/build/system/Link/Link.stories.js

@@ -1,20 +1,12 @@
 "use strict";
 
 exports.__esModule = true;
-exports.Default = exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
+exports["default"] = exports.Default = void 0;
 
 var _ = require("..");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-/**
- * External dependencies
- */
-
 /**
  * Internal dependencies
  */

package/build/system/Notice/Notice.js

@@ -1,8 +1,16 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.Notice = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _md = require("react-icons/md");
@@ -11,13 +19,7 @@ var _ = require("../");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["variant", "inline", "children", "title", "sx"];
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var _excluded = ["variant", "inline", "children", "title", "sx", "className"];
 
 var NoticeIcon = function NoticeIcon(_ref) {
   var color = _ref.color,
@@ -61,8 +63,9 @@ var Notice = function Notice(_ref2) {
       title = _ref2.title,
       _ref2$sx = _ref2.sx,
       sx = _ref2$sx === void 0 ? {} : _ref2$sx,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded);
-
+      _ref2$className = _ref2.className,
+      className = _ref2$className === void 0 ? null : _ref2$className,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref2, _excluded);
   var color = 'yellow';
 
   switch (variant) {
@@ -79,8 +82,8 @@ var Notice = function Notice(_ref2) {
       break;
   }
 
-  return (0, _jsxRuntime.jsx)(_.Card, _extends({
-    sx: _extends({
+  return (0, _jsxRuntime.jsx)(_.Card, (0, _extends2["default"])({
+    sx: (0, _extends2["default"])({
       boxShadow: 'none',
       borderRadius: 2,
       bg: inline ? 'transparent' : color + ".10",
@@ -91,7 +94,8 @@ var Notice = function Notice(_ref2) {
         textDecoration: 'underline',
         border: 'none'
       }
-    }, sx)
+    }, sx),
+    className: (0, _classnames["default"])('vip-notice-component', className)
   }, props, {
     children: (0, _jsxRuntime.jsxs)(_.Flex, {
       sx: {
@@ -130,5 +134,6 @@ Notice.propTypes = {
   inline: _propTypes["default"].bool,
   sx: _propTypes["default"].object,
   title: _propTypes["default"].node,
-  variant: _propTypes["default"].string
+  variant: _propTypes["default"].string,
+  className: _propTypes["default"].any
 };

package/build/system/Notice/Notice.stories.js

@@ -1,7 +1,9 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
-exports.Default = exports["default"] = void 0;
+exports["default"] = exports.Default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -9,8 +11,6 @@ var _ = require("..");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 /**
  * External dependencies
  */
@@ -49,6 +49,23 @@ var Default = function Default() {
         href: "#",
         children: "application with the world."
       })]
+    }), (0, _jsxRuntime.jsx)(_.Notice, {
+      sx: {
+        mb: 4
+      },
+      title: "This notice has only the title prop passed"
+    }), (0, _jsxRuntime.jsx)(_.Notice, {
+      variant: "success",
+      sx: {
+        mb: 4
+      },
+      title: "You made it!",
+      children: (0, _jsxRuntime.jsx)(_.Text, {
+        sx: {
+          mb: 0
+        },
+        children: "This notice has a title and children"
+      })
     })]
   });
 };

package/build/system/Notification/Notification.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.Notification = void 0;
 
@@ -11,8 +13,6 @@ var _ = require("../");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 /** @jsxImportSource theme-ui */
 
 /**
@@ -29,6 +29,7 @@ var Notification = function Notification(_ref) {
       status = _ref$status === void 0 ? 'success' : _ref$status,
       onClose = _ref.onClose;
   return (0, _jsxRuntime.jsxs)(_.Card, {
+    className: "vip-notification-component",
     sx: {
       boxShadow: 'medium',
       width: 320,

package/build/system/Notification/Notification.stories.js

@@ -1,20 +1,12 @@
 "use strict";
 
 exports.__esModule = true;
-exports.Default = exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
+exports["default"] = exports.Default = void 0;
 
 var _ = require("..");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-/**
- * External dependencies
- */
-
 /**
  * Internal dependencies
  */

package/build/system/OptionRow/OptionRow.js

@@ -1,8 +1,14 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.OptionRow = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _md = require("react-icons/md");
@@ -11,15 +17,11 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _ = require("..");
 
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-
-var _excluded = ["image", "icon", "badge", "label", "inline", "subTitle", "body", "meta", "to", "small", "disabled"];
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _classnames = _interopRequireDefault(require("classnames"));
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var _excluded = ["image", "icon", "badge", "label", "inline", "subTitle", "body", "meta", "to", "small", "disabled", "order", "className"];
 
 var OptionRow = function OptionRow(_ref) {
   var image = _ref.image,
@@ -36,8 +38,11 @@ var OptionRow = function OptionRow(_ref) {
       small = _ref$small === void 0 ? false : _ref$small,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
+      _ref$order = _ref.order,
+      order = _ref$order === void 0 ? null : _ref$order,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? null : _ref$className,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   var mergedCard = disabled ? {
     border: '1px solid',
     borderColor: 'border',
@@ -55,23 +60,25 @@ var OptionRow = function OptionRow(_ref) {
     borderBottom: '1px solid',
     borderColor: 'border'
   };
-  return (0, _jsxRuntime.jsxs)(_.Grid, _extends({
+  return (0, _jsxRuntime.jsxs)(_.Grid, (0, _extends2["default"])({
     to: to,
     columns: [1, 1, 'auto 1fr auto'],
-    gap: [3, 3, "" + (small ? 3 : 4)]
+    gap: [3, 3, "" + (small ? 3 : 4)],
+    "data-order": order || undefined,
+    className: (0, _classnames["default"])('vip-option-row-component', className)
   }, props, {
-    sx: _extends({
+    sx: (0, _extends2["default"])({
       alignItems: 'center',
       cursor: disabled ? 'auto' : 'pointer',
       textDecoration: 'none',
       color: 'inherit',
-      '&:hover': {
+      '&:hover': !disabled && {
         backgroundColor: 'hover'
       }
     }, inlineStyles),
     children: [(0, _jsxRuntime.jsx)(_.Box, {
       children: image ? (0, _jsxRuntime.jsx)(_.Box, {
-        sx: _extends({
+        sx: (0, _extends2["default"])({
           display: ['inline-block', 'inline-block', 'block'],
           p: small ? 12 : 20,
           flex: '0 0 auto',
@@ -115,7 +122,8 @@ var OptionRow = function OptionRow(_ref) {
         },
         children: body
       })]
-    }), (0, _jsxRuntime.jsx)(_.Box, {
+    }), false !== meta && '' !== meta && (0, _jsxRuntime.jsx)(_.Box, {
+      "data-testid": "meta",
       children: meta ? meta : (0, _jsxRuntime.jsx)(_md.MdArrowForward, {
         size: 24
       })
@@ -135,5 +143,7 @@ OptionRow.propTypes = {
   meta: _propTypes["default"].node,
   to: _propTypes["default"].string,
   small: _propTypes["default"].bool,
-  disabled: _propTypes["default"].bool
+  disabled: _propTypes["default"].bool,
+  order: _propTypes["default"].number,
+  className: _propTypes["default"].any
 };

package/build/system/OptionRow/OptionRow.stories.js

@@ -1,20 +1,12 @@
 "use strict";
 
 exports.__esModule = true;
-exports.Default = exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
+exports["default"] = exports.Default = void 0;
 
 var _ = require("..");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-/**
- * External dependencies
- */
-
 /**
  * Internal dependencies
  */
@@ -35,14 +27,22 @@ var Default = function Default() {
     },
     children: [(0, _jsxRuntime.jsx)(_.OptionRow, {
       image: image1,
-      title: "Option Row",
+      label: "Option Row",
       subTitle: "Mostly used to link off to other pages.",
       as: "a"
     }), (0, _jsxRuntime.jsx)(_.OptionRow, {
       image: image2,
-      title: "Option Row",
+      label: "Option Row",
       subTitle: "Mostly used to link off to other pages.",
-      as: "a"
+      as: "a",
+      order: 2
+    }), (0, _jsxRuntime.jsx)(_.OptionRow, {
+      image: image2,
+      label: "Option Row \u2013 Disabled",
+      subTitle: "Mostly used to link off to other pages.",
+      as: _.Box,
+      disabled: true,
+      meta: ""
     })]
   });
 };