@mui/codemod 6.0.0-alpha.8 → 6.0.0-alpha.9

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

@@ -0,0 +1,355 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = sxV6;
+var _getReturnExpression = _interopRequireDefault(require("../../util/getReturnExpression"));
+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}`;
+  }
+  return '';
+}
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+function sxV6(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions;
+  const createBuildStyle = (0, _migrateToVariants.getCreateBuildStyle)(j);
+  const appendPaletteModeStyles = (0, _migrateToVariants.getAppendPaletteModeStyles)(j);
+  const buildArrowFunctionAST = (0, _migrateToVariants.getBuildArrowFunctionAST)(j);
+
+  /**
+   *
+   * @param {import('jscodeshift').Identifier} node
+   */
+  function replaceUndefined(node, replacement = j.nullLiteral()) {
+    if ((node == null ? void 0 : node.type) === 'Identifier' && node.name === 'undefined') {
+      return replacement;
+    }
+    return node;
+  }
+  let shouldTransform = false;
+  root.find(j.JSXAttribute, {
+    name: {
+      name: 'sx'
+    },
+    value: {
+      type: 'JSXExpressionContainer'
+    }
+  }).forEach(path => {
+    /**
+     * @type {[import('jscodeshift').StringLiteral, import('jscodeshift').Expression][]}
+     */
+    const cssVars = [];
+    const conditionalExpressions = []; // for ensuring the sequence of styles
+    let currentIndex = 0;
+    const sxContainer = path.node.value;
+    if (['ArrowFunctionExpression', 'ObjectExpression', 'ArrayExpression'].includes(sxContainer.expression.type)) {
+      shouldTransform = true;
+      (sxContainer.expression.type === 'ArrayExpression' ? sxContainer.expression.elements : [sxContainer.expression]).forEach((item, index) => {
+        currentIndex = index;
+        recurseObjectExpression({
+          root: item,
+          replaceRoot: newRoot => {
+            sxContainer.expression = newRoot;
+          },
+          node: item,
+          buildStyle: createBuildStyle()
+        });
+      });
+      if (cssVars.length) {
+        const cssVarsObject = j.objectExpression(cssVars.map(([varName, value]) => j.objectProperty(varName, value)));
+        if (path.parent.node.type === 'JSXOpeningElement') {
+          const styleAttribute = path.parent.node.attributes.find(attribute => attribute.type === 'JSXAttribute' && attribute.name.name === 'style');
+          const spreadAttribute = path.parent.node.attributes.find(attribute => attribute.type === 'JSXSpreadAttribute');
+          if (styleAttribute) {
+            if (styleAttribute.value.expression.type === 'ObjectExpression') {
+              styleAttribute.value.expression.properties = [...cssVarsObject.properties, ...styleAttribute.value.expression.properties];
+            } else if (styleAttribute.value.expression.type === 'Identifier' || styleAttribute.value.expression.type === 'MemberExpression') {
+              styleAttribute.value.expression = j.objectExpression([...cssVarsObject.properties, j.spreadElement(styleAttribute.value.expression)]);
+            }
+          } else if (spreadAttribute) {
+            path.parent.node.attributes.push(j.jsxAttribute(j.jsxIdentifier('style'), j.jsxExpressionContainer(j.objectExpression([...cssVarsObject.properties, j.spreadElement(j.memberExpression(spreadAttribute.argument, j.identifier('style')))]))));
+          } else {
+            path.parent.node.attributes.push(j.jsxAttribute(j.jsxIdentifier('style'), j.jsxExpressionContainer(cssVarsObject)));
+          }
+        }
+      }
+      if (conditionalExpressions.length && sxContainer.expression.type === 'ArrayExpression') {
+        // insert the conditional expressions in the correct order
+        let cumulativeIndex = 0;
+        conditionalExpressions.forEach(([index, newElement]) => {
+          sxContainer.expression.elements.splice(index + 1 + cumulativeIndex, 0, newElement);
+          cumulativeIndex += 1;
+        });
+      }
+      if (sxContainer.expression.type === 'ArrayExpression') {
+        sxContainer.expression.elements = sxContainer.expression.elements.filter(item => item.type !== 'ObjectExpression' || item.properties.length > 0);
+      }
+    }
+    function wrapSxInArray(newElement) {
+      if (sxContainer.expression.type === 'ObjectExpression' || sxContainer.expression.type === 'ArrowFunctionExpression') {
+        sxContainer.expression = j.arrayExpression([sxContainer.expression]);
+      }
+      if (sxContainer.expression.type === 'ArrayExpression') {
+        // store in a list to be added later to ensure the sequence of styles
+        conditionalExpressions.push([currentIndex, newElement]);
+      }
+    }
+
+    /**
+     *
+     * @param {{ node: import('jscodeshift').Expression }} data
+     */
+    function recurseObjectExpression(data) {
+      if (data.node.type === 'ArrowFunctionExpression') {
+        const returnExpression = (0, _getReturnExpression.default)(data.node);
+        if (returnExpression) {
+          recurseObjectExpression({
+            ...data,
+            node: returnExpression
+          });
+        }
+      }
+      if (data.node.type === 'ObjectExpression') {
+        const modeStyles = {}; // to collect styles from `theme.palette.mode === '...'`
+        data.node.properties.forEach(prop => {
+          if (prop.type === 'ObjectProperty') {
+            recurseObjectExpression({
+              ...data,
+              node: prop.value,
+              parentNode: data.node,
+              key: prop.key,
+              buildStyle: createBuildStyle(prop.key, data.buildStyle),
+              replaceValue: newValue => {
+                prop.value = newValue;
+              },
+              deleteSelf: () => {
+                (0, _migrateToVariants.removeProperty)(data.node, prop);
+                if (data.node.properties.length === 0) {
+                  var _data$deleteSelf;
+                  (_data$deleteSelf = data.deleteSelf) == null || _data$deleteSelf.call(data);
+                }
+              },
+              modeStyles
+            });
+          } else {
+            recurseObjectExpression({
+              ...data,
+              node: prop,
+              parentNode: data.node,
+              buildStyle: createBuildStyle(prop.key, data.buildStyle)
+            });
+          }
+        });
+        appendPaletteModeStyles(data.node, modeStyles);
+      }
+      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;
+          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;
+              data.node.argument.right.properties.forEach(prop => {
+                if (prop.type === 'ObjectProperty') {
+                  recurseObjectExpression({
+                    ...data,
+                    node: prop.value,
+                    parentNode: data.node.argument.right,
+                    key: prop.key,
+                    buildStyle: createBuildStyle(prop.key, data.buildStyle, mode),
+                    replaceValue: newValue => {
+                      prop.value = newValue;
+                    }
+                  });
+                } else {
+                  recurseObjectExpression({
+                    ...data,
+                    node: prop,
+                    parentNode: data.node.argument.right,
+                    buildStyle: createBuildStyle(prop.key, data.buildStyle, mode)
+                  });
+                }
+              });
+              appendPaletteModeStyles(data.parentNode, {
+                [mode]: data.node.argument.right
+              });
+            }
+            if (data.deleteSelf) {
+              data.deleteSelf();
+            } else {
+              (0, _migrateToVariants.removeProperty)(data.parentNode, data.node);
+            }
+            return;
+          }
+          if (data.node.argument.right.type === 'ObjectExpression') {
+            recurseObjectExpression({
+              ...data,
+              node: data.node.argument.right,
+              root: data.node.argument.right,
+              replaceRoot: newRoot => {
+                data.node.argument.right = newRoot;
+              }
+            });
+          }
+          wrapSxInArray(j.logicalExpression(data.node.argument.operator, data.node.argument.left, data.node.argument.right));
+          if (data.deleteSelf) {
+            data.deleteSelf();
+          } else {
+            (0, _migrateToVariants.removeProperty)(data.parentNode, data.node);
+          }
+        }
+        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);
+          }
+        }
+      }
+      if (data.node.type === 'ConditionalExpression') {
+        if (data.node.test.type === 'BinaryExpression' || data.node.test.type === 'UnaryExpression' || data.node.test.type === 'Identifier' || data.node.test.type === 'MemberExpression') {
+          var _data$parentNode, _data$node$test, _data$node$test2;
+          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;
+                const consequentKey = (0, _migrateToVariants.getObjectKey)(data.node.consequent);
+                if (consequentKey.type === 'Identifier' && consequentKey.name !== 'theme') {
+                  const varName = getCssVarName(data.node.consequent);
+                  cssVars.push([j.stringLiteral(varName), data.node.consequent]);
+                  data.node.consequent = j.stringLiteral(`var(${varName})`);
+                }
+                const alternateKey = (0, _migrateToVariants.getObjectKey)(data.node.alternate);
+                if (alternateKey.type === 'Identifier' && alternateKey.name !== 'theme') {
+                  const varName = getCssVarName(data.node.alternate);
+                  cssVars.push([j.stringLiteral(varName), data.node.alternate]);
+                  data.node.alternate = j.stringLiteral(`var(${varName})`);
+                }
+                if (data.modeStyles) {
+                  if (!data.modeStyles[data.node.test.right.value]) {
+                    data.modeStyles[data.node.test.right.value] = [];
+                  }
+                  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);
+                    }
+                  });
+                }
+              } 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))));
+                if (data.deleteSelf) {
+                  data.deleteSelf();
+                } else {
+                  (0, _migrateToVariants.removeProperty)(data.parentNode, data.node);
+                }
+              }
+            }
+          }
+        }
+      }
+      if (data.node.type === 'TemplateLiteral') {
+        var _data$parentNode2;
+        if (((_data$parentNode2 = data.parentNode) == null ? void 0 : _data$parentNode2.type) === 'ObjectExpression') {
+          const modeStyles = {};
+          data.node.expressions.forEach((expression, index) => {
+            if (expression.type === 'MemberExpression') {
+              const memberKey = (0, _migrateToVariants.getObjectKey)(expression);
+              if (memberKey.type === 'Identifier' && memberKey.name !== 'theme') {
+                const varName = getCssVarName(expression);
+                cssVars.push([j.stringLiteral(varName), expression]);
+                data.node.expressions[index] = j.stringLiteral(`var(${varName})`);
+              }
+            } else {
+              recurseObjectExpression({
+                ...data,
+                node: expression,
+                parentNode: data.parentNode,
+                buildStyle: createBuildStyle(data.key, data.buildStyle),
+                replaceValue: newValue => {
+                  data.node.expressions[index] = newValue;
+                },
+                modeStyles
+              });
+            }
+          });
+          if (data.modeStyles) {
+            Object.entries(modeStyles).forEach(([mode, objectStyles]) => {
+              const clonedNode = {
+                ...data.node,
+                expressions: data.node.expressions.map(expression => ({
+                  ...expression
+                }))
+              };
+              clonedNode.expressions = objectStyles.map(item => item.value);
+              if (!data.modeStyles[mode]) {
+                data.modeStyles[mode] = [];
+              }
+              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);
+            }
+          }
+        }
+      }
+    }
+  });
+  const transformed = root.toSource(printOptions);
+  if (shouldTransform) {
+    // recast adds extra newlines that we don't want, https://github.com/facebook/jscodeshift/issues/249
+    // need to remove them manually
+    const lines = [];
+    let isInStyled = false;
+    let spaceMatch;
+    transformed.split('\n').forEach(line => {
+      if (!isInStyled) {
+        lines.push(line);
+      } else if (line !== '') {
+        var _line$match, _spaceMatch;
+        if (spaceMatch && ((_line$match = line.match(/^\s+/)) == null ? void 0 : _line$match[0]) === ((_spaceMatch = spaceMatch) == null ? void 0 : _spaceMatch[0]) && line.endsWith('}')) {
+          isInStyled = false;
+          spaceMatch = null;
+        }
+        lines.push(line);
+      }
+      if (line.includes('sx=')) {
+        isInStyled = true;
+        spaceMatch = line.match(/^\s+/);
+      }
+    });
+    return lines.join('\n');
+  }
+  return transformed;
+}

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

@@ -0,0 +1,36 @@
+"use strict";
+
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, {
+  variant: "regular",
+  sx: theme => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    flexShrink: 0,
+    borderRadius: '999px',
+    bgcolor: theme.palette.mode === 'light' ? 'hsla(220, 60%, 99%, 0.6)' : 'hsla(220, 0%, 0%, 0.7)',
+    backdropFilter: 'blur(24px)',
+    maxHeight: 40,
+    border: '1px solid',
+    borderColor: 'divider',
+    boxShadow: theme.palette.mode === 'light' ? '0 1px 2px hsla(210, 0%, 0%, 0.05), 0 2px 12px hsla(210, 100%, 80%, 0.5)' : '0 1px 2px hsla(210, 0%, 0%, 0.5), 0 2px 12px hsla(210, 100%, 25%, 0.3)'
+  })
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Box, {
+  component: "main",
+  sx: {
+    backgroundColor: theme => theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900],
+    flexGrow: 1,
+    height: '100vh',
+    overflow: 'auto'
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Box, {
+  sx: {
+    borderBottom: theme => `1px solid ${theme.palette.mode === 'light' ? 'grey.200' : 'grey.800'}`,
+    backgroundSize: 'cover',
+    backgroundPosition: 'center',
+    minHeight: 280
+  }
+});

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

@@ -0,0 +1,46 @@
+"use strict";
+
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, {
+  variant: "regular",
+  sx: theme => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    flexShrink: 0,
+    borderRadius: '999px',
+    bgcolor: 'hsla(220, 0%, 0%, 0.7)',
+    backdropFilter: 'blur(24px)',
+    maxHeight: 40,
+    border: '1px solid',
+    borderColor: 'divider',
+    boxShadow: '0 1px 2px hsla(210, 0%, 0%, 0.5), 0 2px 12px hsla(210, 100%, 25%, 0.3)',
+    ...theme.applyStyles("light", {
+      bgcolor: 'hsla(220, 60%, 99%, 0.6)',
+      boxShadow: '0 1px 2px hsla(210, 0%, 0%, 0.05), 0 2px 12px hsla(210, 100%, 80%, 0.5)'
+    })
+  })
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Box, {
+  component: "main",
+  sx: theme => ({
+    backgroundColor: theme.palette.grey[900],
+    flexGrow: 1,
+    height: '100vh',
+    overflow: 'auto',
+    ...theme.applyStyles("light", {
+      backgroundColor: theme.palette.grey[100]
+    })
+  })
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Box, {
+  sx: theme => ({
+    borderBottom: `1px solid ${'grey.800'}`,
+    backgroundSize: 'cover',
+    backgroundPosition: 'center',
+    minHeight: 280,
+    ...theme.applyStyles("light", {
+      borderBottom: `1px solid ${'grey.200'}`
+    })
+  })
+});

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

@@ -0,0 +1,41 @@
+"use strict";
+
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Box, {
+  sx: {
+    backgroundImage: theme => theme.palette.mode === 'light' ? items[selectedItemIndex].imageLight : items[selectedItemIndex].imageDark
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Box, {
+  style: props.style,
+  sx: {
+    backgroundImage: theme => theme.palette.mode === 'light' ? items[selectedItemIndex].imageLight : items[selectedItemIndex].imageDark
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Box, {
+  style: {
+    color: 'red',
+    ...props.style
+  },
+  sx: {
+    backgroundImage: theme => theme.palette.mode === 'light' ? items[selectedItemIndex].imageLight : items[selectedItemIndex].imageDark
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Box, {
+  ...props,
+  sx: {
+    backgroundImage: theme => theme.palette.mode === 'light' ? items[selectedItemIndex].imageLight : items[selectedItemIndex].imageDark
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Paper, {
+  sx: {
+    position: 'relative',
+    backgroundColor: 'grey.800',
+    color: '#fff',
+    mb: 4,
+    backgroundSize: 'cover',
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: 'center',
+    backgroundImage: `url(${post.image})`
+  }
+});

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

@@ -0,0 +1,71 @@
+"use strict";
+
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Box, {
+  sx: theme => ({
+    backgroundImage: "var(--items-imageDark)",
+    ...theme.applyStyles("light", {
+      backgroundImage: "var(--items-imageLight)"
+    })
+  }),
+  style: {
+    "--items-imageLight": items[selectedItemIndex].imageLight,
+    "--items-imageDark": items[selectedItemIndex].imageDark
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Box, {
+  style: {
+    "--items-imageLight": items[selectedItemIndex].imageLight,
+    "--items-imageDark": items[selectedItemIndex].imageDark,
+    ...props.style
+  },
+  sx: theme => ({
+    backgroundImage: "var(--items-imageDark)",
+    ...theme.applyStyles("light", {
+      backgroundImage: "var(--items-imageLight)"
+    })
+  })
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Box, {
+  style: {
+    "--items-imageLight": items[selectedItemIndex].imageLight,
+    "--items-imageDark": items[selectedItemIndex].imageDark,
+    color: 'red',
+    ...props.style
+  },
+  sx: theme => ({
+    backgroundImage: "var(--items-imageDark)",
+    ...theme.applyStyles("light", {
+      backgroundImage: "var(--items-imageLight)"
+    })
+  })
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Box, {
+  ...props,
+  sx: theme => ({
+    backgroundImage: "var(--items-imageDark)",
+    ...theme.applyStyles("light", {
+      backgroundImage: "var(--items-imageLight)"
+    })
+  }),
+  style: {
+    "--items-imageLight": items[selectedItemIndex].imageLight,
+    "--items-imageDark": items[selectedItemIndex].imageDark,
+    ...props.style
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Paper, {
+  sx: {
+    position: 'relative',
+    backgroundColor: 'grey.800',
+    color: '#fff',
+    mb: 4,
+    backgroundSize: 'cover',
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: 'center',
+    backgroundImage: `url(${"var(--post-image)"})`
+  },
+  style: {
+    "--post-image": post.image
+  }
+});

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

@@ -0,0 +1,87 @@
+"use strict";
+
+var _jsxRuntime = require("react/jsx-runtime");
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Box, {
+  sx: {
+    mb: 1,
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    gap: 2,
+    color: tier.title === 'Professional' ? 'grey.100' : '',
+    backgroundColor: theme => theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900],
+    borderBottom: theme => `1px solid ${theme.palette.mode === 'light' ? 'grey.200' : 'grey.800'}`
+  }
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Card, {
+  sx: theme => ({
+    p: 2,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 4,
+    ...(tier.title === 'Professional' && {
+      border: 'none',
+      boxShadow: theme.palette.mode === 'light' ? `0 8px 12px hsla(210, 98%, 42%, 0.2)` : `0 8px 12px hsla(0, 0%, 0%, 0.8)`,
+      background: 'radial-gradient(circle at 50% 0%, hsl(210, 98%, 35%), hsl(210, 100%, 16%))'
+    })
+  })
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(Card, {
+  component: Button,
+  onClick: () => handleItemClick(index),
+  sx: theme => ({
+    p: 3,
+    height: 'fit-content',
+    width: '100%',
+    background: 'none',
+    ...(selectedItemIndex === index && {
+      backgroundColor: 'action.selected',
+      borderColor: theme.palette.mode === 'light' ? 'primary.light' : 'primary.dark'
+    }),
+    '&:hover': {
+      background: theme.palette.mode === 'light' ? 'linear-gradient(to bottom right, hsla(210, 100%, 97%, 0.5) 25%, hsla(210, 100%, 90%, 0.3) 100%)' : 'linear-gradient(to right bottom, hsla(210, 100%, 12%, 0.2) 25%, hsla(210, 100%, 16%, 0.2) 100%)',
+      borderColor: theme.palette.mode === 'light' ? 'primary.light' : 'primary.dark',
+      boxShadow: theme.palette.mode === 'light' ? '0px 2px 8px hsla(0, 0%, 0%, 0.1)' : '0px 1px 8px hsla(210, 100%, 25%, 0.5) '
+    }
+  })
+}, index);
+/*#__PURE__*/(0, _jsxRuntime.jsx)(CreditCardRoundedIcon, {
+  fontSize: "small",
+  sx: theme => ({
+    color: theme.palette.mode === 'light' ? 'grey.400' : 'grey.600',
+    ...(paymentType === 'creditCard' && {
+      color: 'primary.main'
+    })
+  })
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, {
+  edge: "start",
+  color: "inherit",
+  "aria-label": "open drawer",
+  onClick: toggleDrawer,
+  sx: {
+    marginRight: '36px',
+    ...(open && {
+      display: 'none'
+    })
+  },
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(MenuIcon, {})
+});
+/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+  sx: [{
+    ...(selectedItemIndex === index && {
+      backgroundColor: 'action.selected',
+      borderColor: theme.palette.mode === 'light' ? 'primary.light' : 'primary.dark'
+    })
+  }, theme => ({
+    color: theme.palette.mode === 'light' ? 'grey.400' : 'grey.600',
+    ...(paymentType === 'creditCard' && {
+      color: 'primary.main'
+    })
+  }), {
+    marginRight: '36px',
+    ...(open && {
+      display: 'none'
+    })
+  }]
+});