@automattic/vip-design-system 0.10.1 → 0.10.2

package/build/system/Form/ToggleGroup.stories.js

@@ -0,0 +1,50 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = exports.Default = void 0;
+
+var _react = require("react");
+
+var _ = require("..");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+var _default = {
+  title: 'ToggleGroup',
+  component: _.ToggleGroup
+};
+exports["default"] = _default;
+var options = [{
+  label: 'One',
+  value: 'one'
+}, {
+  label: 'Two',
+  value: 'two'
+}, {
+  label: 'Three',
+  value: 'three'
+}];
+
+var Default = function Default() {
+  var _useState = (0, _react.useState)('one'),
+      value = _useState[0],
+      setValue = _useState[1];
+
+  return (0, _jsxRuntime.jsx)(_.ToggleGroup, {
+    value: value,
+    onChange: function onChange(newValue) {
+      return setValue(newValue);
+    },
+    groupLabel: "group",
+    options: options
+  });
+};
+
+exports.Default = Default;

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

@@ -0,0 +1,25 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = exports.Default = void 0;
+
+var _ = require("..");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/**
+ * Internal dependencies
+ */
+var _default = {
+  title: 'Grid',
+  component: _.Grid
+};
+exports["default"] = _default;
+
+var Default = function Default() {
+  return (0, _jsxRuntime.jsx)(_.Grid, {
+    children: "Hello"
+  });
+};
+
+exports.Default = Default;

package/build/system/Heading/Heading.js

@@ -1,8 +1,14 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.Heading = 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"));
@@ -13,23 +19,16 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["variant", "sx", "className"];
 
-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 Heading = function Heading(_ref) {
   var _ref$variant = _ref.variant,
       variant = _ref$variant === void 0 ? 'h3' : _ref$variant,
       sx = _ref.sx,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? null : _ref$className,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-  return (0, _jsxRuntime.jsx)(_themeUi.Heading, _extends({
+      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

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

@@ -0,0 +1,43 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = exports.Default = void 0;
+
+var _ = require("..");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/**
+ * Internal dependencies
+ */
+var _default = {
+  title: 'Heading',
+  component: _.Heading
+};
+exports["default"] = _default;
+
+var Default = function Default() {
+  return (0, _jsxRuntime.jsxs)(_.Box, {
+    children: [(0, _jsxRuntime.jsx)(_.Heading, {
+      variant: "h1",
+      children: "Your Applications"
+    }), (0, _jsxRuntime.jsx)(_.Heading, {
+      variant: "h2",
+      children: "Heading Two"
+    }), (0, _jsxRuntime.jsx)(_.Heading, {
+      variant: "h3",
+      children: "Heading Three"
+    }), (0, _jsxRuntime.jsx)(_.Heading, {
+      variant: "h4",
+      children: "Heading Four"
+    }), (0, _jsxRuntime.jsx)(_.Heading, {
+      variant: "h5",
+      children: "Heading Five"
+    }), (0, _jsxRuntime.jsx)(_.Heading, {
+      variant: "caps",
+      children: "Heading Caps"
+    })]
+  });
+};
+
+exports.Default = Default;

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

@@ -0,0 +1,27 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = exports.Default = void 0;
+
+var _ = require("..");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/**
+ * Internal dependencies
+ */
+var _default = {
+  title: 'Link',
+  component: _.Link
+};
+exports["default"] = _default;
+
+var Default = function Default() {
+  return (0, _jsxRuntime.jsx)(_.Link, {
+    as: "a",
+    href: "#!",
+    children: "Hello"
+  });
+};
+
+exports.Default = Default;

package/build/system/Notice/Notice.js

@@ -1,8 +1,14 @@
 "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"));
@@ -15,12 +21,6 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["variant", "inline", "children", "title", "sx", "className"];
 
-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 NoticeIcon = function NoticeIcon(_ref) {
   var color = _ref.color,
       variant = _ref.variant;
@@ -65,8 +65,7 @@ var Notice = function Notice(_ref2) {
       sx = _ref2$sx === void 0 ? {} : _ref2$sx,
       _ref2$className = _ref2.className,
       className = _ref2$className === void 0 ? null : _ref2$className,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded);
-
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref2, _excluded);
   var color = 'yellow';
 
   switch (variant) {
@@ -83,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",

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

@@ -0,0 +1,73 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = exports.Default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require("..");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+var _default = {
+  title: 'Notice',
+  component: _.Notice
+};
+exports["default"] = _default;
+
+var Default = function Default() {
+  return (0, _jsxRuntime.jsxs)(_react["default"].Fragment, {
+    children: [(0, _jsxRuntime.jsxs)(_.Notice, {
+      variant: "alert",
+      sx: {
+        mb: 4
+      },
+      children: [(0, _jsxRuntime.jsx)(_.Heading, {
+        variant: "h4",
+        children: "Your site is ready to launch!"
+      }), (0, _jsxRuntime.jsx)(_.Text, {
+        sx: {
+          mb: 0
+        },
+        children: "It looks like you\u2018re ready to share your application with the world."
+      })]
+    }), (0, _jsxRuntime.jsxs)(_.Notice, {
+      variant: "success",
+      sx: {
+        mb: 4
+      },
+      children: ["It looks like you\u2018re ready to share your ", (0, _jsxRuntime.jsx)("a", {
+        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"
+      })
+    })]
+  });
+};
+
+exports.Default = Default;

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 */
 
 /**

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

@@ -0,0 +1,26 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = exports.Default = void 0;
+
+var _ = require("..");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/**
+ * Internal dependencies
+ */
+var _default = {
+  title: 'Notification',
+  component: _.Notification
+};
+exports["default"] = _default;
+
+var Default = function Default() {
+  return (0, _jsxRuntime.jsx)(_.Notification, {
+    title: "My first notification",
+    subTitle: "Use when providing success or error feedback on global action"
+  });
+};
+
+exports.Default = Default;

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");
@@ -17,12 +23,6 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["image", "icon", "badge", "label", "inline", "subTitle", "body", "meta", "to", "small", "disabled", "order", "className"];
 
-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 OptionRow = function OptionRow(_ref) {
   var image = _ref.image,
       icon = _ref.icon,
@@ -42,8 +42,7 @@ var OptionRow = function OptionRow(_ref) {
       order = _ref$order === void 0 ? null : _ref$order,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? null : _ref$className,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   var mergedCard = disabled ? {
     border: '1px solid',
     borderColor: 'border',
@@ -61,14 +60,14 @@ 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)],
     "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',
@@ -79,7 +78,7 @@ var OptionRow = function OptionRow(_ref) {
     }, 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',

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

@@ -0,0 +1,50 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = exports.Default = void 0;
+
+var _ = require("..");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/**
+ * Internal dependencies
+ */
+var _default = {
+  title: 'OptionRow',
+  component: _.OptionRow
+}; // eslint-disable-next-line max-len
+
+exports["default"] = _default;
+var image1 = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='79' height='79' viewBox='0 0 79 79' fill='none' %3E%3Cpath d='M71.4 15.3L54.2 4.2C54 4 53.7 4 53.4 4H26.4C26.1 4 25.8 4.1 25.6 4.2L8.29997 15.3C7.89997 15.6 7.59998 16 7.59998 16.5V32.1V63C7.59998 63.5 7.89997 64 8.29997 64.2L25.5 75.3C25.5 75.3 25.6 75.3 25.6 75.4C25.6 75.4 25.7 75.4 25.7 75.5C25.9 75.6 26 75.6 26.2 75.6H53.2C53.4 75.6 53.5 75.6 53.7 75.5C53.8 75.5 53.8 75.5 53.8 75.4C53.8 75.4 53.9 75.4 53.9 75.3L71.4 64.2C71.5 64.1 71.7 64 71.8 63.8C71.8 63.8 71.8 63.7 71.9 63.7C72 63.6 72.1 63.4 72.1 63.2V63.1C72.1 63 72.1 62.9 72.1 62.8V32.1V16.5C72.1 16 71.8 15.6 71.4 15.3ZM24.9 71.4L10.6 62.2V34.8L24.9 44V71.4ZM51.9 72.6H27.8V44.7H51.9V72.6ZM69.1 31.3L52.9 41.7H26.8L10.6 31.3V17.3L26.8 6.9H52.9L69.1 17.3V31.3Z' fill='%23BD9D70' /%3E%3C/svg%3E"; // eslint-disable-next-line max-len
+
+var image2 = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='79' height='79' viewBox='0 0 79 79' fill='none'%3E%3Cpath d='M66.3001 15.9C66.3001 15.9 66.3 15.8 66.2 15.8C66.1 15.7 66 15.5 65.9001 15.4C65.9001 15.4 65.9001 15.4 65.9001 15.3L44.4001 0.2C44.3001 0.0999998 44.2 0.0999994 44.1 0.0999994C44 0.0999994 44.0001 0 43.9001 0H43.3C43.2 0 43.1 0.0999994 43.1 0.0999994C43 0.0999994 42.9 0.2 42.8 0.2L28.2001 10.3C28.1 10.4 28.0001 10.5 27.9001 10.6C27.9001 10.6 27.9001 10.6 27.9001 10.7C27.8001 10.8 27.7001 11 27.7001 11.2C27.7001 11.2 27.7001 11.2 27.7001 11.3V31.1L13.9 40.8L13.7001 41C13.6001 41.1 13.6 41.1 13.6 41.2L13.5 41.3C13.5 41.4 13.4 41.5 13.4 41.5V41.6C13.4 41.7 13.3 41.8 13.3 42V62.2C13.3 62.4 13.3 62.6 13.4 62.7V62.8C13.5 62.9 13.6001 63.1 13.7001 63.2C13.7001 63.2 13.7 63.2 13.8 63.3L13.9 63.4L35.3 78.6H35.4001C35.4001 78.6 35.5 78.6 35.5 78.7H35.6C35.8 78.8 36 78.8 36.2001 78.8C36.3001 78.8 36.5 78.8 36.6 78.7H36.7001C36.8001 78.7 36.8001 78.7 36.9001 78.6C36.9001 78.6 37 78.6 37 78.5H37.1L66 58.3C66.1 58.2 66.2001 58.1 66.3001 58V15.9ZM34.6 74.5L16.1 61.3V44.7L34.6 57.8V74.5ZM36 55.3L17.2001 41.9L29 33.5L47.9001 46.9L36 55.3ZM49 44.1L30.5 31V14.4L49 27.5V44.1ZM50.5 24.9L31.6 11.5L43.5 3.2L62.4001 16.6L50.5 24.9Z' fill='%23BD9D70'/%3E%3C/svg%3E";
+
+var Default = function Default() {
+  return (0, _jsxRuntime.jsxs)(_.Box, {
+    sx: {
+      mx: -5
+    },
+    children: [(0, _jsxRuntime.jsx)(_.OptionRow, {
+      image: image1,
+      label: "Option Row",
+      subTitle: "Mostly used to link off to other pages.",
+      as: "a"
+    }), (0, _jsxRuntime.jsx)(_.OptionRow, {
+      image: image2,
+      label: "Option Row",
+      subTitle: "Mostly used to link off to other pages.",
+      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: ""
+    })]
+  });
+};
+
+exports.Default = Default;