@mui/codemod 6.0.0-alpha.9 → 6.0.0-beta.1

package/node/v6.0.0/sx-prop/sx-v6.js

@@ -12,14 +12,18 @@ var _migrateToVariants = require("../../util/migrateToVariants");
  * @param {import('jscodeshift').MemberExpression | import('jscodeshift').Identifier} node
  */
 function getCssVarName(node) {
-  if (node.type === 'MemberExpression') {
-    var _getObjectKey;
-    return `--${(_getObjectKey = (0, _migrateToVariants.getObjectKey)(node)) == null ? void 0 : _getObjectKey.name}-${node.property.name}`;
-  }
-  if (node.type === 'Identifier') {
-    return `--${node.name}`;
+  let varName = '-';
+  while (node.type === 'MemberExpression') {
+    var _node$object, _node$property;
+    varName += `-${((_node$object = node.object) == null ? void 0 : _node$object.name) || ((_node$property = node.property) == null ? void 0 : _node$property.name) || 'unknown'}`;
+    if (node.object.type === 'MemberExpression') {
+      node = node.object;
+    } else {
+      node = node.property;
+    }
   }
-  return '';
+  varName += `-${node.name || 'unknown'}`;
+  return varName;
 }
 
 /**
@@ -112,6 +116,18 @@ function sxV6(file, api, options) {
         conditionalExpressions.push([currentIndex, newElement]);
       }
     }
+    function rootThemeCallback(data) {
+      if (data.root.type === 'ObjectExpression') {
+        var _data$replaceRoot;
+        (_data$replaceRoot = data.replaceRoot) == null || _data$replaceRoot.call(data, buildArrowFunctionAST([j.identifier('theme')], data.root));
+      } else if (data.root.type === 'ArrayExpression') {
+        data.root.elements.forEach((item, index) => {
+          if (item === data.node) {
+            data.root.elements[index] = buildArrowFunctionAST([j.identifier('theme')], data.root);
+          }
+        });
+      }
+    }
 
     /**
      *
@@ -121,10 +137,47 @@ function sxV6(file, api, options) {
       if (data.node.type === 'ArrowFunctionExpression') {
         const returnExpression = (0, _getReturnExpression.default)(data.node);
         if (returnExpression) {
-          recurseObjectExpression({
-            ...data,
-            node: returnExpression
-          });
+          var _returnExpression$pro, _getObjectKey, _getObjectKey2, _getObjectKey3, _getObjectKey4;
+          if (returnExpression.type === 'MemberExpression' && ((_returnExpression$pro = returnExpression.property) == null ? void 0 : _returnExpression$pro.type) === 'ConditionalExpression') {
+            recurseObjectExpression({
+              ...data,
+              node: j.conditionalExpression(returnExpression.property.test, {
+                ...returnExpression,
+                property: returnExpression.property.consequent
+              }, {
+                ...returnExpression,
+                property: returnExpression.property.alternate
+              })
+            });
+          } else if (returnExpression.type === 'TemplateLiteral') {
+            const firstExpression = returnExpression.expressions[0];
+            if ((firstExpression == null ? void 0 : firstExpression.type) === 'ConditionalExpression') {
+              recurseObjectExpression({
+                ...data,
+                node: j.conditionalExpression(firstExpression.test, {
+                  ...returnExpression,
+                  expressions: [firstExpression.consequent, ...(returnExpression.expressions || []).slice(1)]
+                }, {
+                  ...returnExpression,
+                  expressions: [firstExpression.alternate, ...(returnExpression.expressions || []).slice(1)]
+                })
+              });
+            } else {
+              recurseObjectExpression({
+                ...data,
+                node: returnExpression
+              });
+            }
+          } else if (returnExpression.type === 'CallExpression' && ((_getObjectKey = (0, _migrateToVariants.getObjectKey)(returnExpression.callee)) == null ? void 0 : _getObjectKey.name) === 'theme' || returnExpression.type === 'MemberExpression' && ((_getObjectKey2 = (0, _migrateToVariants.getObjectKey)(returnExpression)) == null ? void 0 : _getObjectKey2.name) === 'theme' || returnExpression.type === 'BinaryExpression' && (((_getObjectKey3 = (0, _migrateToVariants.getObjectKey)(returnExpression.left)) == null ? void 0 : _getObjectKey3.name) === 'theme' || ((_getObjectKey4 = (0, _migrateToVariants.getObjectKey)(returnExpression.right)) == null ? void 0 : _getObjectKey4.name) === 'theme')) {
+            var _data$replaceValue;
+            (_data$replaceValue = data.replaceValue) == null || _data$replaceValue.call(data, returnExpression);
+            rootThemeCallback(data);
+          } else {
+            recurseObjectExpression({
+              ...data,
+              node: returnExpression
+            });
+          }
         }
       }
       if (data.node.type === 'ObjectExpression') {
@@ -162,8 +215,8 @@ function sxV6(file, api, options) {
       }
       if (data.node.type === 'SpreadElement') {
         if (data.node.argument.type === 'LogicalExpression') {
-          var _getObjectKey2, _getObjectKey3;
-          const paramName = data.node.argument.left.type === 'BinaryExpression' ? (_getObjectKey2 = (0, _migrateToVariants.getObjectKey)(data.node.argument.left.left)) == null ? void 0 : _getObjectKey2.name : (_getObjectKey3 = (0, _migrateToVariants.getObjectKey)(data.node.argument.left)) == null ? void 0 : _getObjectKey3.name;
+          var _getObjectKey5, _getObjectKey6;
+          const paramName = data.node.argument.left.type === 'BinaryExpression' ? (_getObjectKey5 = (0, _migrateToVariants.getObjectKey)(data.node.argument.left.left)) == null ? void 0 : _getObjectKey5.name : (_getObjectKey6 = (0, _migrateToVariants.getObjectKey)(data.node.argument.left)) == null ? void 0 : _getObjectKey6.name;
           if (paramName === 'theme' && data.node.argument.left.right.type === 'StringLiteral') {
             if (data.node.argument.right.type === 'ObjectExpression') {
               const mode = data.node.argument.left.right.value;
@@ -209,7 +262,7 @@ function sxV6(file, api, options) {
               }
             });
           }
-          wrapSxInArray(j.logicalExpression(data.node.argument.operator, data.node.argument.left, data.node.argument.right));
+          wrapSxInArray(j.logicalExpression(data.node.argument.operator, data.node.argument.left, data.buildStyle(data.node.argument.right)));
           if (data.deleteSelf) {
             data.deleteSelf();
           } else {
@@ -217,15 +270,37 @@ function sxV6(file, api, options) {
           }
         }
         if (data.node.argument.type === 'ConditionalExpression') {
-          recurseObjectExpression({
-            ...data,
-            node: data.node.argument,
-            parentNode: data.node
-          });
-          if (data.deleteSelf) {
-            data.deleteSelf();
-          } else {
-            (0, _migrateToVariants.removeProperty)(data.parentNode, data.node);
+          const isSxSpread = data.node.argument.consequent.type === 'Identifier' && data.node.argument.consequent.name === 'sx' || data.node.argument.alternate.type === 'Identifier' && data.node.argument.alternate.name === 'sx';
+          if (!isSxSpread) {
+            recurseObjectExpression({
+              ...data,
+              node: data.node.argument,
+              parentNode: data.node
+            });
+            wrapSxInArray(data.node.argument);
+            if (data.deleteSelf) {
+              data.deleteSelf();
+            } else {
+              (0, _migrateToVariants.removeProperty)(data.parentNode, data.node);
+            }
+          }
+        }
+        if (data.node.argument.type === 'CallExpression') {
+          var _getObjectKey7, _data$node$argument$c;
+          if (((_getObjectKey7 = (0, _migrateToVariants.getObjectKey)(data.node.argument.callee)) == null ? void 0 : _getObjectKey7.name) === 'theme' && (_data$node$argument$c = data.node.argument.callee.property) != null && (_data$node$argument$c = _data$node$argument$c.name) != null && _data$node$argument$c.startsWith('apply')) {
+            const objIndex = data.node.argument.arguments.findIndex(arg => arg.type === 'ObjectExpression');
+            recurseObjectExpression({
+              ...data,
+              node: data.node.argument.arguments[objIndex],
+              buildStyle: styleExpression => {
+                const newArguments = [...data.node.argument.arguments];
+                newArguments[objIndex] = styleExpression;
+                return j.arrowFunctionExpression([j.identifier('theme')], {
+                  ...data.node.argument,
+                  arguments: newArguments
+                });
+              }
+            });
           }
         }
       }
@@ -235,7 +310,7 @@ function sxV6(file, api, options) {
           if (((_data$parentNode = data.parentNode) == null ? void 0 : _data$parentNode.type) === 'ObjectExpression' && (((_data$node$test = data.node.test) == null ? void 0 : _data$node$test.type) === 'BinaryExpression' || ((_data$node$test2 = data.node.test) == null ? void 0 : _data$node$test2.type) === 'Identifier')) {
             if (data.node.consequent.type !== 'ObjectExpression' && data.node.alternate.type !== 'ObjectExpression') {
               if ((0, _migrateToVariants.isThemePaletteMode)(data.node.test.left)) {
-                var _data$replaceValue;
+                var _data$replaceValue2;
                 const consequentKey = (0, _migrateToVariants.getObjectKey)(data.node.consequent);
                 if (consequentKey.type === 'Identifier' && consequentKey.name !== 'theme') {
                   const varName = getCssVarName(data.node.consequent);
@@ -254,17 +329,8 @@ function sxV6(file, api, options) {
                   }
                   data.modeStyles[data.node.test.right.value].push(j.objectProperty(data.key, replaceUndefined(data.node.consequent)));
                 }
-                (_data$replaceValue = data.replaceValue) == null || _data$replaceValue.call(data, replaceUndefined(data.node.alternate));
-                if (data.root.type === 'ObjectExpression') {
-                  var _data$replaceRoot;
-                  (_data$replaceRoot = data.replaceRoot) == null || _data$replaceRoot.call(data, buildArrowFunctionAST([j.identifier('theme')], data.root));
-                } else if (data.root.type === 'ArrayExpression') {
-                  data.root.elements.forEach((item, index) => {
-                    if (item === data.node) {
-                      data.root.elements[index] = buildArrowFunctionAST([j.identifier('theme')], data.root);
-                    }
-                  });
-                }
+                (_data$replaceValue2 = data.replaceValue) == null || _data$replaceValue2.call(data, replaceUndefined(data.node.alternate));
+                rootThemeCallback(data);
               } else {
                 var _data$buildStyle, _data$buildStyle2;
                 wrapSxInArray(j.conditionalExpression(data.node.test, (_data$buildStyle = data.buildStyle) == null ? void 0 : _data$buildStyle.call(data, replaceUndefined(data.node.consequent)), (_data$buildStyle2 = data.buildStyle) == null ? void 0 : _data$buildStyle2.call(data, replaceUndefined(data.node.alternate))));
@@ -279,7 +345,7 @@ function sxV6(file, api, options) {
         }
       }
       if (data.node.type === 'TemplateLiteral') {
-        var _data$parentNode2;
+        var _data$parentNode2, _data$node$expression;
         if (((_data$parentNode2 = data.parentNode) == null ? void 0 : _data$parentNode2.type) === 'ObjectExpression') {
           const modeStyles = {};
           data.node.expressions.forEach((expression, index) => {
@@ -318,11 +384,17 @@ function sxV6(file, api, options) {
               data.modeStyles[mode].push(j.objectProperty(data.key, clonedNode));
             });
             if (data.key) {
-              var _data$replaceValue2;
-              (_data$replaceValue2 = data.replaceValue) == null || _data$replaceValue2.call(data, data.node);
+              var _data$replaceValue3;
+              (_data$replaceValue3 = data.replaceValue) == null || _data$replaceValue3.call(data, data.node);
             }
           }
         }
+        if ((_data$node$expression = data.node.expressions) != null && _data$node$expression.some(expression => {
+          var _getObjectKey8, _getObjectKey9;
+          return ((_getObjectKey8 = (0, _migrateToVariants.getObjectKey)(expression)) == null ? void 0 : _getObjectKey8.name) === 'theme' || expression.type === 'CallExpression' && ((_getObjectKey9 = (0, _migrateToVariants.getObjectKey)(expression.callee)) == null ? void 0 : _getObjectKey9.name) === 'theme';
+        })) {
+          rootThemeCallback(data);
+        }
       }
     }
   });
@@ -344,7 +416,7 @@ function sxV6(file, api, options) {
         }
         lines.push(line);
       }
-      if (line.includes('sx=')) {
+      if (line.includes('sx=') && !line.match(/sx=\{\{[^}]+\}\}/)) {
         isInStyled = true;
         spaceMatch = line.match(/^\s+/);
       }

package/node/v6.0.0/sx-prop/test-cases/sx-applyStyles.actual.js

@@ -0,0 +1,89 @@
+"use strict";
+
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonBase, {
+  component: "span",
+  ref: ref,
+  ...props,
+  disabled: Boolean(disabled),
+  onClick: event => {
+    if (ref.current) {
+      ref.current.scrollIntoView({
+        block: 'nearest'
+      });
+    }
+    if (props.onClick) {
+      props.onClick(event);
+    }
+  },
+  onFocusVisible: event => {
+    if (ref.current) {
+      ref.current.scrollIntoView({
+        block: 'nearest'
+      });
+    }
+    if (props.onFocusVisible) {
+      props.onFocusVisible(event);
+    }
+  },
+  sx: [theme => ({
+    justifyContent: 'flex-start',
+    textAlign: 'left',
+    alignItems: 'center',
+    borderRadius: 1,
+    height: '100%',
+    border: '1px solid transparent',
+    transitionProperty: 'all',
+    transitionDuration: '150ms',
+    // color: 'primary.300',
+    overflow: 'auto',
+    ...((!disableBorder || selected) && {
+      borderColor: 'grey.100'
+    }),
+    ...(selected && {
+      bgcolor: `${alpha(theme.palette.primary[50], 0.5)}`,
+      borderColor: 'primary.300',
+      boxShadow: `0px 1px 4px ${theme.palette.primary[200]}, inset 0px 2px 4px ${alpha(theme.palette.primary[100], 0.5)}`
+      // color: 'primary.500',
+    }),
+    ...(!selected && {
+      '&:hover, &:focus': {
+        bgcolor: 'primary.50',
+        borderColor: 'primary.100',
+        '@media (hover: none)': {
+          bgcolor: 'transparent'
+        }
+      }
+    }),
+    ...theme.applyDarkStyles({
+      color: 'primary.800',
+      ...((!disableBorder || selected) && {
+        borderColor: `${alpha(theme.palette.primaryDark[600], 0.3)}`
+      }),
+      ...(!selected && {
+        '&:hover, &:focus': {
+          bgcolor: `${alpha(theme.palette.primary[800], 0.1)}`,
+          borderColor: `${alpha(theme.palette.primary[500], 0.3)}`,
+          '@media (hover: none)': {
+            bgcolor: 'transparent'
+          }
+        }
+      }),
+      ...(selected && {
+        bgcolor: `${alpha(theme.palette.primary[800], 0.3)}`,
+        borderColor: 'primary.700',
+        // color: 'primary.300',
+        boxShadow: `0px 1px 4px ${(theme.vars || theme).palette.primary[900]}, inset 0px 2px 4px ${(theme.vars || theme).palette.primaryDark[800]}`
+      })
+    }),
+    ...theme.applyStyles('light', {
+      color: 'primary.500',
+      ...((!disableBorder || selected) && {
+        borderColor: `${alpha(theme.palette.primary[300], 0.3)}`
+      })
+    }),
+    '&.Mui-disabled': {
+      opacity: 0.4
+    }
+  }), ...(Array.isArray(sx) ? sx : [sx])]
+});

package/node/v6.0.0/sx-prop/test-cases/sx-applyStyles.expected.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonBase, {
+  component: "span",
+  ref: ref,
+  ...props,
+  disabled: Boolean(disabled),
+  onClick: event => {
+    if (ref.current) {
+      ref.current.scrollIntoView({
+        block: 'nearest'
+      });
+    }
+    if (props.onClick) {
+      props.onClick(event);
+    }
+  },
+  onFocusVisible: event => {
+    if (ref.current) {
+      ref.current.scrollIntoView({
+        block: 'nearest'
+      });
+    }
+    if (props.onFocusVisible) {
+      props.onFocusVisible(event);
+    }
+  },
+  sx: [theme => ({
+    justifyContent: 'flex-start',
+    textAlign: 'left',
+    alignItems: 'center',
+    borderRadius: 1,
+    height: '100%',
+    border: '1px solid transparent',
+    transitionProperty: 'all',
+    transitionDuration: '150ms',
+    // color: 'primary.300',
+    overflow: 'auto',
+    ...theme.applyDarkStyles({
+      color: 'primary.800'
+    }),
+    ...theme.applyStyles('light', {
+      color: 'primary.500'
+    }),
+    '&.Mui-disabled': {
+      opacity: 0.4
+    }
+  }), (!disableBorder || selected) && {
+    borderColor: 'grey.100'
+  }, selected && (theme => ({
+    bgcolor: `${alpha(theme.palette.primary[50], 0.5)}`,
+    borderColor: 'primary.300',
+    // color: 'primary.500',
+    boxShadow: `0px 1px 4px ${theme.palette.primary[200]}, inset 0px 2px 4px ${alpha(theme.palette.primary[100], 0.5)}`
+  })), !selected && {
+    '&:hover, &:focus': {
+      bgcolor: 'primary.50',
+      borderColor: 'primary.100',
+      '@media (hover: none)': {
+        bgcolor: 'transparent'
+      }
+    }
+  }, (!disableBorder || selected) && (theme => theme.applyDarkStyles({
+    borderColor: `${alpha(theme.palette.primaryDark[600], 0.3)}`
+  })), !selected && (theme => theme.applyDarkStyles({
+    '&:hover, &:focus': {
+      bgcolor: `${alpha(theme.palette.primary[800], 0.1)}`,
+      borderColor: `${alpha(theme.palette.primary[500], 0.3)}`,
+      '@media (hover: none)': {
+        bgcolor: 'transparent'
+      }
+    }
+  })), selected && (theme => theme.applyDarkStyles({
+    bgcolor: `${alpha(theme.palette.primary[800], 0.3)}`,
+    borderColor: 'primary.700',
+    // color: 'primary.300',
+    boxShadow: `0px 1px 4px ${(theme.vars || theme).palette.primary[900]}, inset 0px 2px 4px ${(theme.vars || theme).palette.primaryDark[800]}`
+  })), (!disableBorder || selected) && (theme => theme.applyStyles('light', {
+    borderColor: `${alpha(theme.palette.primary[300], 0.3)}`
+  })), ...(Array.isArray(sx) ? sx : [sx])]
+});

package/node/v6.0.0/sx-prop/test-cases/sx-condition.actual.js

@@ -0,0 +1,93 @@
+"use strict";
+
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
+var _it$images$, _productOffer$ui, _productOffer$ui2;
+/*#__PURE__*/(0, _react.createElement)(Card, {
+  ...otherProps,
+  ref: ref,
+  key: it.wcId,
+  "data-p": it.performance / 100,
+  variant: "outlined",
+  sx: {
+    gap: '0.25rem',
+    textDecoration: 'none',
+    borderRadius: 0.75,
+    background: 'linear-gradient(45deg, rgba(235, 245, 255, 0.30) 40%, rgba(243, 246, 249, 0.20) 100%)',
+    transition: 'all 200ms ease-in-out',
+    ...(horizontal ? {
+      display: 'flex',
+      flexDirection: 'row',
+      pr: 1
+    } : {
+      display: 'flex',
+      flexDirection: 'column',
+      pb: 0.5
+    }),
+    cursor: 'pointer',
+    '&:hover': {
+      borderColor: '#99CCFF',
+      boxShadow: '0px 4px 16px #DAE2ED',
+      transition: 'all 200ms ease-in-out !important'
+    }
+  },
+  onClick: ev => {
+    ev.preventDefault();
+    navigate(href);
+  }
+}, /*#__PURE__*/(0, _jsxRuntime.jsxs)(Box, {
+  component: Link,
+  to: href,
+  sx: {
+    position: 'relative',
+    aspectRatio: '100/55',
+    ...(horizontal ? {
+      maxWidth: '50vw',
+      height: {
+        sm: '150px',
+        md: '170px',
+        lg: '210px',
+        xl: '250px'
+      }
+    } : {
+      width: '100%'
+    })
+  },
+  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ResponsiveImage, {
+    sizes: imageSizes,
+    loading: imageLoading,
+    src: (_it$images$ = it.images[0]) == null ? void 0 : _it$images$.src,
+    alt: it.name,
+    style: {
+      aspectRatio: '100/55',
+      ...(horizontal ? {
+        width: 'auto',
+        height: '100%'
+      } : {
+        width: '100%',
+        height: 'auto'
+      })
+    }
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(NoSsr, {
+    children: productOffer && ((_productOffer$ui = productOffer.ui) == null ? void 0 : _productOffer$ui.itemCard) && /*#__PURE__*/(0, _jsxRuntime.jsx)(PromoBanner, {
+      style: {
+        ...defaultPromoCodeStyles,
+        ...productOffer.style,
+        ...((_productOffer$ui2 = productOffer.ui) == null || (_productOffer$ui2 = _productOffer$ui2.itemCard) == null ? void 0 : _productOffer$ui2.style)
+      },
+      children: productOffer.offerText
+    })
+  })]
+}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Stack, {
+  direction: "column",
+  sx: {
+    flex: 1,
+    ...(horizontal ? {
+      py: 1.5,
+      px: 1.5
+    } : {
+      px: 1,
+      pb: 0.5
+    })
+  }
+}));

package/node/v6.0.0/sx-prop/test-cases/sx-condition.expected.js

@@ -0,0 +1,90 @@
+"use strict";
+
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
+var _it$images$, _productOffer$ui, _productOffer$ui2;
+/*#__PURE__*/(0, _react.createElement)(Card, {
+  ...otherProps,
+  ref: ref,
+  key: it.wcId,
+  "data-p": it.performance / 100,
+  variant: "outlined",
+  sx: [{
+    gap: '0.25rem',
+    textDecoration: 'none',
+    borderRadius: 0.75,
+    background: 'linear-gradient(45deg, rgba(235, 245, 255, 0.30) 40%, rgba(243, 246, 249, 0.20) 100%)',
+    transition: 'all 200ms ease-in-out',
+    cursor: 'pointer',
+    '&:hover': {
+      borderColor: '#99CCFF',
+      boxShadow: '0px 4px 16px #DAE2ED',
+      transition: 'all 200ms ease-in-out !important'
+    }
+  }, horizontal ? {
+    display: 'flex',
+    flexDirection: 'row',
+    pr: 1
+  } : {
+    display: 'flex',
+    flexDirection: 'column',
+    pb: 0.5
+  }],
+  onClick: ev => {
+    ev.preventDefault();
+    navigate(href);
+  }
+}, /*#__PURE__*/(0, _jsxRuntime.jsxs)(Box, {
+  component: Link,
+  to: href,
+  sx: [{
+    position: 'relative',
+    aspectRatio: '100/55'
+  }, horizontal ? {
+    maxWidth: '50vw',
+    height: {
+      sm: '150px',
+      md: '170px',
+      lg: '210px',
+      xl: '250px'
+    }
+  } : {
+    width: '100%'
+  }],
+  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ResponsiveImage, {
+    sizes: imageSizes,
+    loading: imageLoading,
+    src: (_it$images$ = it.images[0]) == null ? void 0 : _it$images$.src,
+    alt: it.name,
+    style: {
+      aspectRatio: '100/55',
+      ...(horizontal ? {
+        width: 'auto',
+        height: '100%'
+      } : {
+        width: '100%',
+        height: 'auto'
+      })
+    }
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(NoSsr, {
+    children: productOffer && ((_productOffer$ui = productOffer.ui) == null ? void 0 : _productOffer$ui.itemCard) && /*#__PURE__*/(0, _jsxRuntime.jsx)(PromoBanner, {
+      style: {
+        ...defaultPromoCodeStyles,
+        ...productOffer.style,
+        ...((_productOffer$ui2 = productOffer.ui) == null || (_productOffer$ui2 = _productOffer$ui2.itemCard) == null ? void 0 : _productOffer$ui2.style)
+      },
+      children: productOffer.offerText
+    })
+  })]
+}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Stack, {
+  direction: "column",
+  sx: [{
+    flex: 1
+  }, horizontal ? {
+    py: 1.5,
+    px: 1.5
+  } : {
+    px: 1,
+    pb: 0.5
+  }]
+}));

package/node/v6.0.0/sx-prop/test-cases/sx-css-vars.actual.js

@@ -38,4 +38,18 @@ var _jsxRuntime = require("react/jsx-runtime");
     backgroundPosition: 'center',
     backgroundImage: `url(${post.image})`
   }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Chip, {
+  size: "sm",
+  variant: "outlined",
+  color: colors[data.role],
+  sx: {
+    ml: 'auto',
+    borderRadius: '2px',
+    minHeight: '20px',
+    paddingInline: '4px',
+    fontSize: 'xs',
+    bgcolor: `${colors[data.role]}.softBg`
+  },
+  children: data.role
 });