@telefonica/mistica 10.5.1 → 10.9.0

package/dist-es/card.js

@@ -5,15 +5,11 @@ import { useTheme } from './hooks';
 import Box from './box';
 import { Text1, Text2, Text4 } from './text';
 import { createUseStyles } from './jss';
-import Inline from './inline';
 import { Boxed } from './boxed';
+import ButtonGroup from './button-group';
 var useCardContentStyles = createUseStyles(function () {
   return {
     actions: {
-      marginLeft: function marginLeft(_ref) {
-        var needsButtonLinkAlignment = _ref.needsButtonLinkAlignment;
-        return needsButtonLinkAlignment ? -6 : 0;
-      },
       flex: 1,
       display: 'flex',
       alignItems: 'flex-end',
@@ -22,20 +18,17 @@ var useCardContentStyles = createUseStyles(function () {
   };
 });
 
-var CardContent = function CardContent(_ref2) {
-  var headline = _ref2.headline,
-      pretitle = _ref2.pretitle,
-      title = _ref2.title,
-      subtitle = _ref2.subtitle,
-      description = _ref2.description,
-      extra = _ref2.extra,
-      button = _ref2.button,
-      buttonLink = _ref2.buttonLink;
+var CardContent = function CardContent(_ref) {
+  var headline = _ref.headline,
+      pretitle = _ref.pretitle,
+      title = _ref.title,
+      subtitle = _ref.subtitle,
+      description = _ref.description,
+      extra = _ref.extra,
+      button = _ref.button,
+      buttonLink = _ref.buttonLink;
   var theme = useTheme();
-  var needsButtonLinkAlignment = buttonLink && !button;
-  var classes = useCardContentStyles({
-    needsButtonLinkAlignment: needsButtonLinkAlignment
-  });
+  var classes = useCardContentStyles();
 
   var renderHeadline = function renderHeadline() {
     if (!headline) {
@@ -73,10 +66,10 @@ var CardContent = function CardContent(_ref2) {
     color: theme.colors.textSecondary
   }, description)), extra && /*#__PURE__*/React.createElement("div", null, extra)), (button || buttonLink) && /*#__PURE__*/React.createElement("div", {
     className: classes.actions
-  }, /*#__PURE__*/React.createElement(Inline, {
-    space: 16,
-    alignItems: "center"
-  }, button, buttonLink)));
+  }, /*#__PURE__*/React.createElement(ButtonGroup, {
+    primaryButton: button,
+    link: buttonLink
+  })));
 };
 
 var useMediaCardStyles = createUseStyles(function () {
@@ -91,8 +84,8 @@ var useMediaCardStyles = createUseStyles(function () {
     },
     media: {
       width: '100%',
-      paddingTop: function paddingTop(_ref3) {
-        var media = _ref3.media;
+      paddingTop: function paddingTop(_ref2) {
+        var media = _ref2.media;
 
         if (media.height) {
           return media.height;
@@ -105,8 +98,8 @@ var useMediaCardStyles = createUseStyles(function () {
 
         return '56.25%'; // 16/9 aspect ratio
       },
-      backgroundImage: function backgroundImage(_ref4) {
-        var media = _ref4.media;
+      backgroundImage: function backgroundImage(_ref3) {
+        var media = _ref3.media;
         return "url(".concat(media.src, ")");
       },
       backgroundSize: 'cover',
@@ -121,16 +114,16 @@ var useMediaCardStyles = createUseStyles(function () {
     }
   };
 });
-export var MediaCard = function MediaCard(_ref5) {
-  var media = _ref5.media,
-      headline = _ref5.headline,
-      pretitle = _ref5.pretitle,
-      title = _ref5.title,
-      description = _ref5.description,
-      extra = _ref5.extra,
-      button = _ref5.button,
-      buttonLink = _ref5.buttonLink,
-      ariaLabel = _ref5['aria-label'];
+export var MediaCard = function MediaCard(_ref4) {
+  var media = _ref4.media,
+      headline = _ref4.headline,
+      pretitle = _ref4.pretitle,
+      title = _ref4.title,
+      description = _ref4.description,
+      extra = _ref4.extra,
+      button = _ref4.button,
+      buttonLink = _ref4.buttonLink,
+      ariaLabel = _ref4['aria-label'];
   var classes = useMediaCardStyles({
     media: media
   });
@@ -166,17 +159,17 @@ var useDataCardStyles = createUseStyles(function () {
     }
   };
 });
-export var DataCard = function DataCard(_ref6) {
-  var icon = _ref6.icon,
-      headline = _ref6.headline,
-      title = _ref6.title,
-      subtitle = _ref6.subtitle,
-      description = _ref6.description,
-      extra = _ref6.extra,
-      button = _ref6.button,
-      buttonLink = _ref6.buttonLink,
-      dataAttributes = _ref6.dataAttributes,
-      ariaLabel = _ref6['aria-label'];
+export var DataCard = function DataCard(_ref5) {
+  var icon = _ref5.icon,
+      headline = _ref5.headline,
+      title = _ref5.title,
+      subtitle = _ref5.subtitle,
+      description = _ref5.description,
+      extra = _ref5.extra,
+      button = _ref5.button,
+      buttonLink = _ref5.buttonLink,
+      dataAttributes = _ref5.dataAttributes,
+      ariaLabel = _ref5['aria-label'];
   var classes = useDataCardStyles();
   return /*#__PURE__*/React.createElement(Boxed, {
     className: classes.boxed,

package/dist-es/date-field.js

@@ -14,6 +14,7 @@ import { isServerSide } from './utils/environment';
 import IconCalendarRegular from './generated/mistica-icons/icon-calendar-regular';
 import { getLocalDateString } from './utils/time';
 import { useTheme } from './hooks';
+import { isFirefox } from './utils/platform';
 var ReactDateTimePicker = /*#__PURE__*/React.lazy(function () {
   return import(
   /* webpackChunkName: "date-time-picker" */
@@ -41,6 +42,11 @@ var DateField = function DateField(_ref) {
   };
 
   var hasNativePicker = React.useMemo(function () {
+    if (isFirefox()) {
+      // disabled in firefox because it shows a close button over the icon and can't be styled
+      return false;
+    }
+
     return isInputTypeSupported('date');
   }, []);
 
@@ -109,6 +115,7 @@ var DateField = function DateField(_ref) {
   return /*#__PURE__*/React.createElement(React.Suspense, {
     fallback: nativePicker
   }, /*#__PURE__*/React.createElement(ReactDateTimePicker, _extends({}, rest, fieldProps, {
+    optional: optional,
     isValidDate: function isValidDate(currentDate) {
       return isInRange(getLocalDateString(currentDate.toDate()));
     }

package/dist-es/date-time-field.js

@@ -13,6 +13,7 @@ import { isInputTypeSupported } from './utils/dom';
 import { isServerSide } from './utils/environment';
 import { getLocalDateTimeString } from './utils/time';
 import IconCalendarRegular from './generated/mistica-icons/icon-calendar-regular';
+import { isFirefox } from './utils/platform';
 import { useTheme } from './hooks';
 var ReactDateTimePicker = /*#__PURE__*/React.lazy(function () {
   return import(
@@ -37,6 +38,11 @@ var FormDateField = function FormDateField(_ref) {
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var hasNativePicker = React.useMemo(function () {
+    if (isFirefox()) {
+      // disabled for firefox because the picker has no option to select time
+      return false;
+    }
+
     return isInputTypeSupported('datetime-local');
   }, []);
 
@@ -111,6 +117,7 @@ var FormDateField = function FormDateField(_ref) {
   return /*#__PURE__*/React.createElement(React.Suspense, {
     fallback: nativePicker
   }, /*#__PURE__*/React.createElement(ReactDateTimePicker, _extends({}, rest, fieldProps, {
+    optional: optional,
     withTime: true,
     isValidDate: function isValidDate(currentDate) {
       return isInRange(getLocalDateTimeString(currentDate.toDate()));

package/dist-es/date-time-picker.js

@@ -1,4 +1,4 @@
-var _excluded = ["withTime", "isValidDate"];
+var _excluded = ["withTime", "mode", "isValidDate", "optional"];
 
 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); }
 
@@ -27,14 +27,15 @@ import { DEFAULT_WIDTH } from './text-field-components';
 import IconButton from './icon-button';
 import { cancelEvent, createChangeEvent } from './utils/dom';
 import { createUseStyles } from './jss';
-import { useElementDimensions } from './hooks';
+import { useElementDimensions, useTheme } from './hooks';
+import IconCloseRegular from './generated/mistica-icons/icon-close-regular';
+
 /**
  * Do not use this component!
  * Use DateField or FormDateTimeField
  *
  * This component is a fallback for browsers that don't support datetime-local or date inputs
  */
-
 var browserLocale = navigator.language.toLocaleLowerCase().split('-')[0];
 import(
 /* webpackChunkName: "moment-locale" */
@@ -223,7 +224,9 @@ var useStyles = createUseStyles(function () {
 
 var DateTimePicker = function DateTimePicker(_ref) {
   var withTime = _ref.withTime,
+      mode = _ref.mode,
       isValidDate = _ref.isValidDate,
+      optional = _ref.optional,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var _React$useState = React.useState(false),
@@ -232,20 +235,17 @@ var DateTimePicker = function DateTimePicker(_ref) {
       setShowPicker = _React$useState2[1];
 
   var classes = useStyles();
+
+  var _useTheme = useTheme(),
+      texts = _useTheme.texts;
+
   var fieldRef = React.useRef(null);
 
   var _useElementDimensions = useElementDimensions(),
       pickerContainerHeight = _useElementDimensions.height,
       pickerContainerRef = _useElementDimensions.ref;
 
-  var onFocus = function onFocus(event) {
-    var _rest$onFocus;
-
-    setShowPicker(true);
-    (_rest$onFocus = rest.onFocus) === null || _rest$onFocus === void 0 ? void 0 : _rest$onFocus.call(rest, event);
-  };
-
-  var getCalendarContainerStyles = function getCalendarContainerStyles() {
+  var getPickerContainerStyles = function getPickerContainerStyles() {
     var _fieldRef$current;
 
     var _ref2 = ((_fieldRef$current = fieldRef.current) === null || _fieldRef$current === void 0 ? void 0 : _fieldRef$current.getBoundingClientRect()) || {},
@@ -278,8 +278,20 @@ var DateTimePicker = function DateTimePicker(_ref) {
     return value ? new Date(value) : undefined;
   };
 
+  var formatMoment = function formatMoment(moment) {
+    if (withTime) {
+      return moment.format('yyyy-MM-DD HH:mm');
+    }
+
+    if (mode === 'year-month') {
+      return moment.format('yyyy-MM');
+    }
+
+    return moment.format('yyyy-MM-DD');
+  };
+
   var setValue = function setValue(moment) {
-    var value = typeof moment === 'string' ? moment : moment.format(withTime ? 'yyyy-MM-DD HH:mm' : 'yyyy-MM-DD');
+    var value = typeof moment === 'string' ? moment : formatMoment(moment);
 
     if (fieldRef.current) {
       var _rest$onChange;
@@ -289,12 +301,21 @@ var DateTimePicker = function DateTimePicker(_ref) {
     }
   };
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextFieldBase, _extends({}, rest, {
-    type: "text",
-    autoComplete: "off",
-    onFocus: onFocus,
-    shrinkLabel: !!getValue(),
-    endIcon: /*#__PURE__*/React.createElement(IconButton, {
+  var renderEndIcon = function renderEndIcon() {
+    if (getValue() && optional) {
+      return /*#__PURE__*/React.createElement(IconButton, {
+        "aria-label": texts.clearButton,
+        size: 32,
+        onPress: function onPress(event) {
+          event.stopPropagation();
+          setValue('');
+        }
+      }, /*#__PURE__*/React.createElement(IconCloseRegular, {
+        size: 24
+      }));
+    }
+
+    return /*#__PURE__*/React.createElement(IconButton, {
       "aria-label": "",
       size: 32,
       onPress: function onPress() {
@@ -302,7 +323,18 @@ var DateTimePicker = function DateTimePicker(_ref) {
       }
     }, /*#__PURE__*/React.createElement(IconCalendarRegular, {
       size: 24
-    })),
+    }));
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextFieldBase, _extends({}, rest, {
+    style: {
+      cursor: 'default'
+    },
+    required: !optional,
+    type: "text",
+    autoComplete: "off",
+    shrinkLabel: !!getValue(),
+    endIcon: renderEndIcon(),
     inputRef: function inputRef(e) {
       var _rest$inputRef;
 
@@ -314,7 +346,7 @@ var DateTimePicker = function DateTimePicker(_ref) {
       return setShowPicker(true);
     },
     onClick: function onClick() {
-      return setShowPicker(true);
+      setShowPicker(true);
     }
   })), showPicker && /*#__PURE__*/React.createElement(Overlay, {
     onPress: function onPress(e) {
@@ -324,11 +356,13 @@ var DateTimePicker = function DateTimePicker(_ref) {
     disableScroll: true
   }, /*#__PURE__*/React.createElement("div", {
     ref: pickerContainerRef,
-    style: getCalendarContainerStyles(),
+    style: getPickerContainerStyles(),
     className: classes.reactDatePicker
   }, /*#__PURE__*/React.createElement(Datetime, {
-    initialValue: getValue(),
+    initialViewMode: mode === 'year-month' ? 'months' : undefined,
+    dateFormat: mode === 'year-month' ? 'YYYY-MM' : undefined,
     timeFormat: withTime ? 'HH:mm' : false,
+    initialValue: getValue(),
     locale: browserLocale,
     input: false,
     onChange: setValue,

package/dist-es/empty-state-card.js

@@ -4,10 +4,10 @@ import * as React from 'react';
 import Box from './box';
 import { Boxed } from './boxed';
 import { useScreenSize, useTheme } from './hooks';
-import Inline from './inline';
 import { createUseStyles } from './jss';
 import Stack from './stack';
 import { Text2, Text4 } from './text';
+import ButtonGroup from './button-group';
 var useStyles = createUseStyles(function (theme) {
   return {
     container: _defineProperty({}, theme.mq.desktopOrBigger, {
@@ -25,27 +25,22 @@ var useStyles = createUseStyles(function (theme) {
     }, theme.mq.tabletOrSmaller, {
       width: 64,
       height: 64
-    }),
-    actions: {
-      marginLeft: function marginLeft(_ref) {
-        var needsButtonLinkAlignment = _ref.needsButtonLinkAlignment;
-        return needsButtonLinkAlignment ? -6 : 0;
-      }
-    }
+    })
   };
 });
 
-var EmptyStateCard = function EmptyStateCard(_ref2) {
+var EmptyStateCard = function EmptyStateCard(_ref) {
   var _button$props, _image2;
 
-  var title = _ref2.title,
-      description = _ref2.description,
-      button = _ref2.button,
-      buttonLink = _ref2.buttonLink,
-      icon = _ref2.icon,
-      imageUrl = _ref2.imageUrl,
-      ariaLabel = _ref2['aria-label'],
-      dataAttributes = _ref2.dataAttributes;
+  var title = _ref.title,
+      description = _ref.description,
+      button = _ref.button,
+      secondaryButton = _ref.secondaryButton,
+      buttonLink = _ref.buttonLink,
+      icon = _ref.icon,
+      imageUrl = _ref.imageUrl,
+      ariaLabel = _ref['aria-label'],
+      dataAttributes = _ref.dataAttributes;
 
   var _useTheme = useTheme(),
       colors = _useTheme.colors;
@@ -91,12 +86,11 @@ var EmptyStateCard = function EmptyStateCard(_ref2) {
   }, title), /*#__PURE__*/React.createElement(Text2, {
     regular: true,
     color: colors.textSecondary
-  }, description))), (button || buttonLink) && /*#__PURE__*/React.createElement("div", {
-    className: classes.actions
-  }, /*#__PURE__*/React.createElement(Inline, {
-    space: 16,
-    alignItems: "center"
-  }, button, buttonLink))))));
+  }, description))), (button || secondaryButton || buttonLink) && /*#__PURE__*/React.createElement(ButtonGroup, {
+    primaryButton: button,
+    secondaryButton: secondaryButton,
+    link: buttonLink
+  })))));
 };
 
 export default EmptyStateCard;

package/dist-es/empty-state.js

@@ -1,15 +1,20 @@
 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 import * as React from 'react';
 import Box from './box';
 import { Boxed } from './boxed';
+import { ButtonPrimary } from './button';
 import { useScreenSize, useTheme } from './hooks';
 import Stack from './stack';
 import { Text4, Text6 } from './text';
 import { createUseStyles } from './jss';
-import Inline from './inline';
+import ButtonGroup from './button-group';
 import { getPrefixedDataAttributes } from './utils/dom';
 var useStyles = createUseStyles(function (theme) {
   return {
@@ -98,6 +103,14 @@ var EmptyState = function EmptyState(_ref2) {
     });
   }
 
+  var buttons = _objectSpread({}, (button === null || button === void 0 ? void 0 : button.type) === ButtonPrimary ? {
+    primaryButton: button
+  } : {
+    secondaryButton: button
+  });
+
+  buttons.link = buttonLink;
+
   if (isTabletOrSmaller) {
     var _ref3, _largeImage;
 
@@ -116,10 +129,7 @@ var EmptyState = function EmptyState(_ref2) {
       light: true,
       as: "p",
       color: colors.textSecondary
-    }, description)), button && /*#__PURE__*/React.createElement(Inline, {
-      space: 16,
-      alignItems: "center"
-    }, button, buttonLink)));
+    }, description)), button && /*#__PURE__*/React.createElement(ButtonGroup, buttons)));
   }
 
   return /*#__PURE__*/React.createElement(Boxed, {
@@ -142,10 +152,7 @@ var EmptyState = function EmptyState(_ref2) {
     light: true,
     as: "p",
     color: colors.textSecondary
-  }, description)), button && /*#__PURE__*/React.createElement(Inline, {
-    space: 16,
-    alignItems: "center"
-  }, button, buttonLink)))), largeImageUrl && /*#__PURE__*/React.createElement("div", {
+  }, description)), button && /*#__PURE__*/React.createElement(ButtonGroup, buttons)))), largeImageUrl && /*#__PURE__*/React.createElement("div", {
     className: classes.desktopImage
   })));
 };

package/dist-es/feedback.js

@@ -33,6 +33,7 @@ import { Boxed } from './boxed';
 import ResponsiveLayout from './responsive-layout';
 import Stack from './stack';
 import classnames from 'classnames';
+import ButtonGroup from './button-group';
 
 var areAnimationsSupported = function areAnimationsSupported(platformOverrides) {
   return !isOldChrome(platformOverrides) && !isRunningAcceptanceTest(platformOverrides);
@@ -44,7 +45,6 @@ var checkHasButtons = function checkHasButtons(_ref) {
   return !!primaryButton || !!secondaryButton;
 };
 
-var buttonLayoutSpacing = 16;
 var useStyles = createUseStyles(function (theme) {
   return {
     background: {
@@ -129,18 +129,6 @@ var useStyles = createUseStyles(function (theme) {
       transitionDelay: '0.6s',
       opacity: 1,
       transform: 'translate(0, 0)'
-    },
-    buttonsContainer: {
-      display: 'flex',
-      justifyContent: 'flex-start',
-      flexWrap: 'wrap',
-      margin: -buttonLayoutSpacing / 2,
-      '& > *': {
-        margin: buttonLayoutSpacing / 2
-      }
-    },
-    link: {
-      width: '100%'
     }
   };
 });
@@ -221,30 +209,19 @@ var renderFeedbackBody = function renderFeedbackBody(_ref9, animateText, appear,
   }, normalizedDescription), children));
 };
 
-var renderInlineFeedbackBody = function renderInlineFeedbackBody(feedbackBody, _ref10, classes) {
-  var primaryButton = _ref10.primaryButton,
-      secondaryButton = _ref10.secondaryButton,
-      link = _ref10.link;
-  var hasButtons = checkHasButtons({
-    primaryButton: primaryButton,
-    secondaryButton: secondaryButton,
-    link: link
-  });
+var renderInlineFeedbackBody = function renderInlineFeedbackBody(feedbackBody, buttons) {
+  var hasButtons = checkHasButtons(buttons);
   return /*#__PURE__*/React.createElement(Stack, {
     space: 24
-  }, feedbackBody, hasButtons && /*#__PURE__*/React.createElement("div", {
-    className: classes.buttonsContainer
-  }, primaryButton, secondaryButton, link && /*#__PURE__*/React.createElement("div", {
-    className: classes.link
-  }, link)));
+  }, feedbackBody, hasButtons && /*#__PURE__*/React.createElement(ButtonGroup, buttons));
 };
 
-var renderFeedbackInDesktop = function renderFeedbackInDesktop(_ref11) {
-  var isInverse = _ref11.isInverse,
-      inlineFeedbackBody = _ref11.inlineFeedbackBody,
-      classes = _ref11.classes,
-      imageUrl = _ref11.imageUrl,
-      dataAttributes = _ref11.dataAttributes;
+var renderFeedbackInDesktop = function renderFeedbackInDesktop(_ref10) {
+  var isInverse = _ref10.isInverse,
+      inlineFeedbackBody = _ref10.inlineFeedbackBody,
+      classes = _ref10.classes,
+      imageUrl = _ref10.imageUrl,
+      dataAttributes = _ref10.dataAttributes;
   return /*#__PURE__*/React.createElement(Boxed, {
     isInverse: isInverse,
     dataAttributes: dataAttributes
@@ -259,21 +236,21 @@ var renderFeedbackInDesktop = function renderFeedbackInDesktop(_ref11) {
   })));
 };
 
-export var FeedbackScreen = function FeedbackScreen(_ref12) {
-  var title = _ref12.title,
-      description = _ref12.description,
-      children = _ref12.children,
-      primaryButton = _ref12.primaryButton,
-      secondaryButton = _ref12.secondaryButton,
-      link = _ref12.link,
-      hapticFeedback = _ref12.hapticFeedback,
-      icon = _ref12.icon,
-      _ref12$animateText = _ref12.animateText,
-      animateText = _ref12$animateText === void 0 ? false : _ref12$animateText,
-      unstable_inlineInDesktop = _ref12.unstable_inlineInDesktop,
-      imageUrl = _ref12.imageUrl,
-      imageFit = _ref12.imageFit,
-      dataAttributes = _ref12.dataAttributes;
+export var FeedbackScreen = function FeedbackScreen(_ref11) {
+  var title = _ref11.title,
+      description = _ref11.description,
+      children = _ref11.children,
+      primaryButton = _ref11.primaryButton,
+      secondaryButton = _ref11.secondaryButton,
+      link = _ref11.link,
+      hapticFeedback = _ref11.hapticFeedback,
+      icon = _ref11.icon,
+      _ref11$animateText = _ref11.animateText,
+      animateText = _ref11$animateText === void 0 ? false : _ref11$animateText,
+      unstable_inlineInDesktop = _ref11.unstable_inlineInDesktop,
+      imageUrl = _ref11.imageUrl,
+      imageFit = _ref11.imageFit,
+      dataAttributes = _ref11.dataAttributes;
   useHapticFeedback(hapticFeedback);
   var isInverse = useIsInverseVariant();
 
@@ -329,7 +306,7 @@ export var FeedbackScreen = function FeedbackScreen(_ref12) {
     primaryButton: primaryButton,
     secondaryButton: secondaryButton,
     link: link
-  }, classes);
+  });
 
   if (!isTabletOrSmaller && unstable_inlineInDesktop) {
     return inlineFeedbackBody;
@@ -401,16 +378,16 @@ export var InfoFeedbackScreen = function InfoFeedbackScreen(props) {
     icon: hasIcon ? /*#__PURE__*/React.createElement(IcnInfo, null) : undefined
   }));
 };
-export var SuccessFeedback = function SuccessFeedback(_ref13) {
-  var title = _ref13.title,
-      description = _ref13.description,
-      children = _ref13.children,
-      primaryButton = _ref13.primaryButton,
-      secondaryButton = _ref13.secondaryButton,
-      link = _ref13.link,
-      imageUrl = _ref13.imageUrl,
-      imageFit = _ref13.imageFit,
-      dataAttributes = _ref13.dataAttributes;
+export var SuccessFeedback = function SuccessFeedback(_ref12) {
+  var title = _ref12.title,
+      description = _ref12.description,
+      children = _ref12.children,
+      primaryButton = _ref12.primaryButton,
+      secondaryButton = _ref12.secondaryButton,
+      link = _ref12.link,
+      imageUrl = _ref12.imageUrl,
+      imageFit = _ref12.imageFit,
+      dataAttributes = _ref12.dataAttributes;
   useHapticFeedback('success');
 
   var _useScreenSize3 = useScreenSize(),
@@ -446,7 +423,7 @@ export var SuccessFeedback = function SuccessFeedback(_ref13) {
     primaryButton: primaryButton,
     secondaryButton: secondaryButton,
     link: link
-  }, classes);
+  });
   return /*#__PURE__*/React.createElement(ThemeVariant, {
     isInverse: true
   }, isTabletOrSmaller ? /*#__PURE__*/React.createElement(ResponsiveLayout, {