@automattic/vip-design-system 0.30.0 → 0.30.1

package/build/system/Form/Input.js

@@ -38,7 +38,8 @@ var Input = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
   var variant = _ref.variant,
       label = _ref.label,
       forLabel = _ref.forLabel,
-      hasError = _ref.hasError,
+      _ref$hasError = _ref.hasError,
+      hasError = _ref$hasError === void 0 ? false : _ref$hasError,
       required = _ref.required,
       _ref$sx = _ref.sx,
       sx = _ref$sx === void 0 ? {} : _ref$sx,
@@ -55,7 +56,9 @@ var Input = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
       required: required,
       "aria-required": required,
       "aria-describedby": hasError ? "describe-" + forLabel + "-validation" : undefined,
-      sx: (0, _extends2["default"])({}, inputStyles, sx)
+      sx: (0, _extends2["default"])({}, inputStyles, sx, hasError ? {
+        borderColor: 'input.border.error'
+      } : {})
     }, props)), hasError && errorMessage && (0, _jsxRuntime.jsx)(_.Validation, {
       isValid: false,
       describedId: forLabel,

package/build/system/Form/Validation.js

@@ -16,7 +16,7 @@ var _md = require("react-icons/md");
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["children", "isValid", "describedId"];
-var errorColor = 'notice.link.error.default';
+var errorColor = 'texts.error';
 var helperColor = 'texts.helper';
 
 var Validation = function Validation(_ref) {

package/build/system/NewDialog/DialogOverlay.js

@@ -36,8 +36,7 @@ var DialogOverlay = /*#__PURE__*/_react["default"].forwardRef(function (props, f
       bottom: 0,
       inset: 0,
       opacity: 0.7,
-      background: // eslint-disable-next-line max-len
-      'linear-gradient(198.09deg,#E5F0F6 2.01%, rgba(235, 238, 242, 0) 43.18%,rgba(249, 234, 232, 0) 47.86%, #FFE9D1 94.31%), linear-gradient(98.65deg, #FFE8E6 0.58%, rgba(255, 233, 214, 0) 52.45%, rgba(255, 233, 219, 0) 53.76%,#FFE9D1 105.86%), #F5F2F1'
+      backgroundColor: 'backgrounds.overlay'
     }
   }, props, {
     ref: forwardedRef

package/build/system/NewForm/FormAutocomplete.css

@@ -1,166 +1,167 @@
 .autocomplete__wrapper {
-  position: relative;
+	position: relative;
 }
 
 .autocomplete__hint,
 .autocomplete__input {
-  -webkit-appearance: none;
-  border: 2px solid #0b0c0c;
-  border-radius: 0; /* Safari 10 on iOS adds implicit border rounding. */
-  box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  margin-bottom: 0; /* BUG: Safari 10 on macOS seems to add an implicit margin. */
-  width: 100%;
+	-webkit-appearance: none;
+	border: 2px solid #0b0c0c;
+	border-radius: 0; /* Safari 10 on iOS adds implicit border rounding. */
+	box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	margin-bottom: 0; /* BUG: Safari 10 on macOS seems to add an implicit margin. */
+	width: 100%;
 }
 
 .autocomplete__input {
-  background-color: transparent;
-  position: relative;
+	background-color: transparent;
+	position: relative;
 }
 
 .autocomplete__hint {
-  color: #b1b4b6;
-  position: absolute;
+	color: #b1b4b6;
+	position: absolute;
 }
 
 .autocomplete__input--default {
-  padding: 5px;
+	padding: 5px;
 }
 .autocomplete__input--focused {
-  outline: 3px solid #fd0;
-  outline-offset: 0;
-  box-shadow: inset 0 0 0 2px;
+	outline: 3px solid #fd0;
+	outline-offset: 0;
+	box-shadow: inset 0 0 0 2px;
 }
 
 .autocomplete__input--show-all-values {
-  padding: 5px 34px 5px 5px; /* Space for arrow. Other padding should match .autocomplete__input--default. */
-  cursor: pointer;
+	padding: 5px 34px 5px 5px; /* Space for arrow. Other padding should match .autocomplete__input--default. */
+	cursor: pointer;
 }
 
-.autocomplete__dropdown-arrow-down {
-  z-index: -1;
-  display: inline-block;
-  position: absolute;
-  right: 8px;
-  width: 24px;
-  height: 24px;
-  top: 10px;
-}
+/* .autocomplete__dropdown-arrow-down {
+	z-index: -1;
+	display: inline-block;
+	position: absolute;
+	right: 8px;
+	width: 24px;
+	height: 24px;
+	top: 10px;
+	pointer-events: none;
+} */
 
 .autocomplete__menu {
-  background-color: #fff;
-  border: 2px solid #0B0C0C;
-  border-top: 0;
-  color: #0B0C0C;
-  margin: 0;
-  max-height: 342px;
-  overflow-x: hidden;
-  padding: 0;
-  width: 100%;
-  width: calc(100% - 4px);
+	background-color: #fff;
+	border: 2px solid #0b0c0c;
+	border-top: 0;
+	color: #0b0c0c;
+	margin: 0;
+	max-height: 342px;
+	overflow-x: hidden;
+	padding: 0;
+	width: 100%;
+	width: calc( 100% - 4px );
 }
 
 .autocomplete__menu--visible {
-  display: block;
+	display: block;
 }
 
 .autocomplete__menu--hidden {
-  display: none;
+	display: none;
 }
 
 .autocomplete__menu--overlay {
-  box-shadow: rgba(0, 0, 0, 0.256863) 0px 2px 6px;
-  left: 0;
-  position: absolute;
-  top: 100%;
-  z-index: 100;
+	box-shadow: rgba( 0, 0, 0, 0.256863 ) 0px 2px 6px;
+	left: 0;
+	position: absolute;
+	top: 100%;
+	z-index: 100;
 }
 
 .autocomplete__menu--inline {
-  position: relative;
+	position: relative;
 }
 
 .autocomplete__option {
-  border-bottom: solid #b1b4b6;
-  border-width: 1px 0;
-  cursor: pointer;
-  display: block;
-  position: relative;
+	border-bottom: solid #b1b4b6;
+	border-width: 1px 0;
+	cursor: pointer;
+	display: block;
+	position: relative;
 }
 
 .autocomplete__option > * {
-  pointer-events: none;
+	pointer-events: none;
 }
 
 .autocomplete__option:first-of-type {
-  border-top-width: 0;
+	border-top-width: 0;
 }
 
 .autocomplete__option:last-of-type {
-  border-bottom-width: 0;
+	border-bottom-width: 0;
 }
 
 .autocomplete__option--odd {
-  background-color: #FAFAFA;
+	background-color: #fafafa;
 }
 
 .autocomplete__option--focused,
 .autocomplete__option:hover {
-  background-color: #1d70b8;
-  border-color: #1d70b8;
-  color: white;
-  outline: none;
+	background-color: #1d70b8;
+	border-color: #1d70b8;
+	color: white;
+	outline: none;
 }
 
-@media (-ms-high-contrast: active), (forced-colors: active) {
-  .autocomplete__menu {
-    border-color: FieldText;
-  }
+@media ( -ms-high-contrast: active ), ( forced-colors: active ) {
+	.autocomplete__menu {
+		border-color: FieldText;
+	}
 
-  .autocomplete__option {
-    background-color: Field;
-    color: FieldText;
-  }
+	.autocomplete__option {
+		background-color: Field;
+		color: FieldText;
+	}
 
-  .autocomplete__option--focused,
-  .autocomplete__option:hover {
-    forced-color-adjust: none; /* prevent backplate from obscuring text */
-    background-color: Highlight;
-    border-color: Highlight;
-    color: HighlightText;
+	.autocomplete__option--focused,
+	.autocomplete__option:hover {
+		forced-color-adjust: none; /* prevent backplate from obscuring text */
+		background-color: Highlight;
+		border-color: Highlight;
+		color: HighlightText;
 
-    /* Prefer SelectedItem / SelectedItemText in browsers that support it */
-    background-color: SelectedItem;
-    border-color: SelectedItem;
-    color: SelectedItemText;
-    outline-color: SelectedItemText;
-  }
+		/* Prefer SelectedItem / SelectedItemText in browsers that support it */
+		background-color: SelectedItem;
+		border-color: SelectedItem;
+		color: SelectedItemText;
+		outline-color: SelectedItemText;
+	}
 }
 
 .autocomplete__option--no-results {
-  background-color: #FAFAFA;
-  color: #646b6f;
-  cursor: not-allowed;
+	background-color: #fafafa;
+	color: #646b6f;
+	cursor: not-allowed;
 }
 
 .autocomplete__hint,
 .autocomplete__input,
 .autocomplete__option {
-  font-size: 16px;
-  line-height: 1.25;
+	font-size: 16px;
+	line-height: 1.25;
 }
 
 .autocomplete__hint,
 .autocomplete__option {
-  padding: 5px;
+	padding: 5px;
 }
 
-@media (min-width: 641px) {
-  .autocomplete__hint,
-  .autocomplete__input,
-  .autocomplete__option {
-    font-size: 19px;
-    line-height: 1.31579;
-  }
+@media ( min-width: 641px ) {
+	.autocomplete__hint,
+	.autocomplete__input,
+	.autocomplete__option {
+		font-size: 19px;
+		line-height: 1.31579;
+	}
 }

package/build/system/NewForm/FormAutocomplete.js

@@ -37,7 +37,7 @@ var _Form = require("../Form");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["autoFilter", "className", "debounce", "displayMenu", "forLabel", "getOptionLabel", "getOptionValue", "isInline", "label", "loading", "minLength", "noOptionsMessage", "onChange", "onInputChange", "options", "required", "searchIcon", "showAllValues", "source", "value", "hasError", "errorMessage"];
+var _excluded = ["autoFilter", "className", "debounce", "displayMenu", "dropdownArrow", "errorMessage", "forLabel", "getOptionLabel", "getOptionValue", "hasError", "isInline", "label", "loading", "minLength", "noOptionsMessage", "onChange", "onInputChange", "options", "required", "searchIcon", "showAllValues", "source", "value"];
 
 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); }
 
@@ -130,6 +130,12 @@ var searchIconStyles = {
   }
 };
 
+var DefaultArrow = function DefaultArrow(config) {
+  return (0, _jsxRuntime.jsx)(_FormSelectArrow.FormSelectArrow, {
+    classNames: config.className
+  });
+};
+
 var FormAutocomplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
   var _ref$autoFilter = _ref.autoFilter,
       autoFilter = _ref$autoFilter === void 0 ? true : _ref$autoFilter,
@@ -138,10 +144,14 @@ var FormAutocomplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
       debounce = _ref$debounce === void 0 ? 0 : _ref$debounce,
       _ref$displayMenu = _ref.displayMenu,
       displayMenu = _ref$displayMenu === void 0 ? 'overlay' : _ref$displayMenu,
+      _ref$dropdownArrow = _ref.dropdownArrow,
+      dropdownArrow = _ref$dropdownArrow === void 0 ? DefaultArrow : _ref$dropdownArrow,
+      errorMessage = _ref.errorMessage,
       _ref$forLabel = _ref.forLabel,
       forLabel = _ref$forLabel === void 0 ? 'vip-autocomplete' : _ref$forLabel,
       getOptionLabel = _ref.getOptionLabel,
       getOptionValue = _ref.getOptionValue,
+      hasError = _ref.hasError,
       isInline = _ref.isInline,
       label = _ref.label,
       loading = _ref.loading,
@@ -149,7 +159,7 @@ var FormAutocomplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
       minLength = _ref$minLength === void 0 ? 0 : _ref$minLength,
       _ref$noOptionsMessage = _ref.noOptionsMessage,
       noOptionsMessage = _ref$noOptionsMessage === void 0 ? function () {
-    return 'No results found.';
+    return 'No results found. Type to search.';
   } : _ref$noOptionsMessage,
       _ref$onChange = _ref.onChange,
       onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
@@ -159,11 +169,9 @@ var FormAutocomplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
       required = _ref.required,
       searchIcon = _ref.searchIcon,
       _ref$showAllValues = _ref.showAllValues,
-      showAllValues = _ref$showAllValues === void 0 ? true : _ref$showAllValues,
+      showAllValues = _ref$showAllValues === void 0 ? false : _ref$showAllValues,
       source = _ref.source,
       value = _ref.value,
-      hasError = _ref.hasError,
-      errorMessage = _ref.errorMessage,
       props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
 
   var _useState = (0, _react.useState)(false),
@@ -282,8 +290,15 @@ var FormAutocomplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
           displayMenu: displayMenu,
           onConfirm: onValueChange,
           tNoResults: noOptionsMessage,
-          required: required
-        }, props)), loading && (0, _jsxRuntime.jsx)(_FormSelectLoading.FormSelectLoading, {}), (0, _jsxRuntime.jsx)(_FormSelectArrow.FormSelectArrow, {})]
+          required: required,
+          dropdownArrow: showAllValues ? dropdownArrow : function () {
+            return '';
+          }
+        }, props)), loading && (0, _jsxRuntime.jsx)(_FormSelectLoading.FormSelectLoading, {
+          sx: {
+            right: showAllValues ? 40 : 10
+          }
+        })]
       })
     }), hasError && errorMessage && (0, _jsxRuntime.jsx)(_Form.Validation, {
       isValid: false,
@@ -316,6 +331,7 @@ FormAutocomplete.propTypes = {
   searchIcon: _propTypes["default"].bool,
   showAllValues: _propTypes["default"].bool,
   source: _propTypes["default"].func,
-  value: _propTypes["default"].string
+  value: _propTypes["default"].string,
+  dropdownArrow: _propTypes["default"].node
 };
 FormAutocomplete.displayName = 'FormAutocomplete';

package/build/system/NewForm/FormAutocomplete.stories.js

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports["default"] = exports.WithSearchIcon = exports.WithLoading = exports.WithErrors = exports.WithDefaultValue = exports.WithDebounce = exports.WithCustomMessages = exports.Inline = exports.Default = void 0;
+exports["default"] = exports.WithSearchIcon = exports.WithLoading = exports.WithErrors = exports.WithDefaultValue = exports.WithDebounce = exports.WithCustomMessages = exports.WithCustomArrow = exports.WithArrow = exports.Inline = exports.Default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -66,17 +66,30 @@ var DefaultComponent = function DefaultComponent(_ref) {
       _ref$width = _ref.width,
       width = _ref$width === void 0 ? 250 : _ref$width,
       rest = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+
+  var _useState = (0, _react.useState)(null),
+      selectedValue = _useState[0],
+      setSelectedValue = _useState[1];
+
   return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: (0, _jsxRuntime.jsx)(Form.Root, {
-      children: (0, _jsxRuntime.jsx)("div", {
+    children: (0, _jsxRuntime.jsxs)(Form.Root, {
+      children: [(0, _jsxRuntime.jsx)("div", {
         sx: {
           width: width
         },
         children: (0, _jsxRuntime.jsx)(Form.Autocomplete, (0, _extends2["default"])({
           forLabel: "form-autocomplete",
-          label: label
+          label: label,
+          onChange: function onChange(obj, val) {
+            setSelectedValue(val);
+          }
         }, rest))
-      })
+      }), (0, _jsxRuntime.jsxs)("div", {
+        sx: {
+          mt: 3
+        },
+        children: ["Selected value: ", selectedValue]
+      })]
     })
   });
 };
@@ -85,7 +98,9 @@ var Default = function Default() {
   return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: (0, _jsxRuntime.jsx)(DefaultComponent, (0, _extends2["default"])({
       required: true
-    }, args))
+    }, args, {
+      placeholder: "Start typing..."
+    }))
   });
 };
 
@@ -136,9 +151,9 @@ var WithLoading = function WithLoading() {
 exports.WithLoading = WithLoading;
 
 var WithDebounce = function WithDebounce() {
-  var _useState = (0, _react.useState)(null),
-      value = _useState[0],
-      setValue = _useState[1];
+  var _useState2 = (0, _react.useState)(null),
+      value = _useState2[0],
+      setValue = _useState2[1];
 
   var customArgs = (0, _extends2["default"])({}, args, {
     minLength: 3,
@@ -179,4 +194,39 @@ var WithErrors = function WithErrors() {
   });
 };
 
-exports.WithErrors = WithErrors;
+exports.WithErrors = WithErrors;
+
+var WithArrow = function WithArrow() {
+  var customArgs = (0, _extends2["default"])({}, args, {
+    showAllValues: true
+  });
+  return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: (0, _jsxRuntime.jsx)(DefaultComponent, (0, _extends2["default"])({}, customArgs))
+  });
+};
+
+exports.WithArrow = WithArrow;
+
+var WithCustomArrow = function WithCustomArrow() {
+  var customArgs = (0, _extends2["default"])({}, args, {
+    showAllValues: true,
+    // eslint-disable-next-line react/display-name
+    dropdownArrow: function dropdownArrow() {
+      return (0, _jsxRuntime.jsx)("span", {
+        sx: {
+          position: 'absolute',
+          top: '2px',
+          right: '10px',
+          pointerEvents: 'none'
+        },
+        children: "\uD83D\uDC47"
+      });
+    }
+  });
+  return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: (0, _jsxRuntime.jsx)(DefaultComponent, (0, _extends2["default"])({}, customArgs))
+  });
+};
+
+exports.WithCustomArrow = WithCustomArrow;
+WithCustomArrow.displayName = 'WithCustomArrow';

package/build/system/NewForm/FormSelectArrow.js

@@ -36,6 +36,7 @@ var FormSelectArrow = /*#__PURE__*/_react["default"].forwardRef(function (props,
       borderLeftStyle: _Input.baseControlBorderStyle.borderStyle,
       borderLeftColor: _Input.baseControlBorderStyle.borderColor,
       right: '10px',
+      top: '7px',
       pointerEvents: 'none',
       svg: {
         fill: _Input.baseControlBorderStyle.borderColor

package/build/system/NewForm/FormSelectLoading.js

@@ -7,8 +7,12 @@ exports.FormSelectLoading = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
 var _react = _interopRequireDefault(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _ai = require("react-icons/ai");
 
 var _react2 = require("@emotion/react");
@@ -17,15 +21,7 @@ var _Input = require("../Form/Input.styles");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-/** @jsxImportSource theme-ui */
-
-/**
- * External dependencies
- */
-
-/**
- * Internal dependencies
- */
+var _excluded = ["sx"];
 var kf = (0, _react2.keyframes)({
   from: {
     transform: 'rotate(0deg)'
@@ -35,23 +31,29 @@ var kf = (0, _react2.keyframes)({
   }
 });
 
-var FormSelectLoading = /*#__PURE__*/_react["default"].forwardRef(function (props, forwardRef) {
+var FormSelectLoading = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
+  var _ref$sx = _ref.sx,
+      sx = _ref$sx === void 0 ? {} : _ref$sx,
+      rest = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   return (0, _jsxRuntime.jsx)(_ai.AiOutlineLoading3Quarters, (0, _extends2["default"])({
     ref: forwardRef,
     "aria-hidden": "true",
     size: 18,
-    sx: {
+    sx: (0, _extends2["default"])({
       position: 'absolute',
-      right: 40,
+      right: 10,
       pointerEvents: 'none',
       animation: kf + " 1s infinite linear",
       opacity: 0.5,
       svg: {
         fill: _Input.inputBaseText
       }
-    }
-  }, props));
+    }, sx)
+  }, rest));
 });
 
 exports.FormSelectLoading = FormSelectLoading;
+FormSelectLoading.propTypes = {
+  sx: _propTypes["default"].object
+};
 FormSelectLoading.displayName = 'FormSelectLoading';

package/build/system/Notice/Notice.js

@@ -43,7 +43,7 @@ var NoticeIcon = function NoticeIcon(_ref) {
       Icon = _md.MdInfo;
       break;
 
-    case 'alert':
+    case 'error':
       Icon = _md.MdError;
       break;
 

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

@@ -75,6 +75,16 @@ var Default = function Default() {
         href: "/?path=/story/avatar--default",
         children: "A link to Avatar"
       })]
+    }), (0, _jsxRuntime.jsxs)(_.Notice, {
+      variant: "alert",
+      sx: {
+        mb: 4
+      },
+      title: "Please read this first",
+      children: ["This notice has a title and children and", ' ', (0, _jsxRuntime.jsx)(_.Link, {
+        href: "/?path=/story/avatar--default",
+        children: "A link to Avatar"
+      })]
     }), (0, _jsxRuntime.jsx)(_.Notice, {
       variant: "alert",
       sx: {

package/build/system/OptionRow/OptionRow.js

@@ -21,7 +21,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["image", "badge", "label", "inline", "subTitle", "body", "meta", "small", "disabled", "order", "className", "variant"];
+var _excluded = ["image", "badge", "label", "inline", "subTitle", "body", "meta", "small", "disabled", "order", "className", "titleVariant", "variant"];
 var disabledStyles = {
   border: '1px solid',
   borderColor: 'optionRow.border',
@@ -60,8 +60,10 @@ var OptionRow = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwar
       order = _ref$order === void 0 ? null : _ref$order,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? null : _ref$className,
+      _ref$titleVariant = _ref.titleVariant,
+      titleVariant = _ref$titleVariant === void 0 ? 'h3' : _ref$titleVariant,
       _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? 'h3' : _ref$variant,
+      variant = _ref$variant === void 0 ? 'default' : _ref$variant,
       props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   var mergedCard = disabled ? disabledStyles : {};
   var inlineStyles = inline ? gridInlineStyle : regularGridStyle(small);
@@ -84,8 +86,8 @@ var OptionRow = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwar
           display: ['inline-block', 'inline-block', 'block'],
           p: small ? 12 : 20,
           flex: '0 0 auto',
-          bg: 'optionRow.iconBackground',
-          color: 'optionRow.icon',
+          bg: "optionRow." + variant + ".background",
+          color: "optionRow." + variant + ".icon",
           borderRadius: 1
         }, mergedCard),
         children: /*#__PURE__*/_react["default"].isValidElement(image) ? image : (0, _jsxRuntime.jsx)("img", {
@@ -102,7 +104,7 @@ var OptionRow = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwar
         flex: '1 1 auto'
       },
       children: [(0, _jsxRuntime.jsx)(_.Heading, {
-        variant: variant,
+        titleVariant: titleVariant,
         sx: {
           mb: subTitle || body ? 1 : 0,
           fontSize: 2,
@@ -169,5 +171,6 @@ OptionRow.propTypes = {
   disabled: _propTypes["default"].bool,
   order: _propTypes["default"].number,
   className: _propTypes["default"].any,
-  variant: _propTypes["default"].string
+  titleVariant: _propTypes["default"].string,
+  variant: _propTypes["default"].oneOf(['default', 'alt'])
 };