완

public/app.bundle.js

@@ -416,6 +416,17 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ }),
+/***/ "./node_modules/@mui/material/Box/Box.js":
+/*!***********************************************!*\
+  !*** ./node_modules/@mui/material/Box/Box.js ***!
+  \***********************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _mui_system__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @mui/system */ \"./node_modules/@mui/system/esm/createBox.js\");\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\");\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_4__);\n/* harmony import */ var _className__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../className */ \"./node_modules/@mui/utils/esm/ClassNameGenerator/ClassNameGenerator.js\");\n/* harmony import */ var _styles__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../styles */ \"./node_modules/@mui/material/styles/createTheme.js\");\n/* harmony import */ var _styles_identifier__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../styles/identifier */ \"./node_modules/@mui/material/styles/identifier.js\");\n\n\n\n\n\nconst defaultTheme = (0,_styles__WEBPACK_IMPORTED_MODULE_0__[\"default\"])();\nconst Box = (0,_mui_system__WEBPACK_IMPORTED_MODULE_1__[\"default\"])({\n  themeId: _styles_identifier__WEBPACK_IMPORTED_MODULE_2__[\"default\"],\n  defaultTheme,\n  defaultClassName: 'MuiBox-root',\n  generateClassName: _className__WEBPACK_IMPORTED_MODULE_3__[\"default\"].generate\n});\n true ? Box.propTypes /* remove-proptypes */ = {\n  // ----------------------------- Warning --------------------------------\n  // | These PropTypes are generated from the TypeScript type definitions |\n  // |     To update them edit the d.ts file and run \"yarn proptypes\"     |\n  // ----------------------------------------------------------------------\n  /**\n   * @ignore\n   */\n  children: (prop_types__WEBPACK_IMPORTED_MODULE_4___default().node),\n  /**\n   * The component used for the root node.\n   * Either a string to use a HTML element or a component.\n   */\n  component: (prop_types__WEBPACK_IMPORTED_MODULE_4___default().elementType),\n  /**\n   * The system prop that allows defining system overrides as well as additional CSS styles.\n   */\n  sx: prop_types__WEBPACK_IMPORTED_MODULE_4___default().oneOfType([prop_types__WEBPACK_IMPORTED_MODULE_4___default().arrayOf(prop_types__WEBPACK_IMPORTED_MODULE_4___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_4___default().func), (prop_types__WEBPACK_IMPORTED_MODULE_4___default().object), (prop_types__WEBPACK_IMPORTED_MODULE_4___default().bool)])), (prop_types__WEBPACK_IMPORTED_MODULE_4___default().func), (prop_types__WEBPACK_IMPORTED_MODULE_4___default().object)])\n} : 0;\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Box);\n\n//# sourceURL=webpack://muibasic_starterkit/./node_modules/@mui/material/Box/Box.js?");
+
+/***/ }),
+
 /***/ "./node_modules/@mui/material/Button/Button.js":
 /*!*****************************************************!*\
   !*** ./node_modules/@mui/material/Button/Button.js ***!
@@ -1098,6 +1109,83 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ }),
+/***/ "./node_modules/@mui/material/Tab/Tab.js":
+/*!***********************************************!*\
+  !*** ./node_modules/@mui/material/Tab/Tab.js ***!
+  \***********************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _babel_runtime_helpers_esm_objectWithoutPropertiesLoose__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/esm/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js\");\n/* harmony import */ var _babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/esm/extends */ \"./node_modules/@babel/runtime/helpers/esm/extends.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\");\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_12___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_12__);\n/* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! clsx */ \"./node_modules/clsx/dist/clsx.m.js\");\n/* harmony import */ var _mui_base__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @mui/base */ \"./node_modules/@mui/utils/esm/composeClasses/composeClasses.js\");\n/* harmony import */ var _ButtonBase__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../ButtonBase */ \"./node_modules/@mui/material/ButtonBase/ButtonBase.js\");\n/* harmony import */ var _utils_capitalize__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../utils/capitalize */ \"./node_modules/@mui/material/utils/capitalize.js\");\n/* harmony import */ var _styles_useThemeProps__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../styles/useThemeProps */ \"./node_modules/@mui/material/styles/useThemeProps.js\");\n/* harmony import */ var _styles_styled__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../styles/styled */ \"./node_modules/@mui/material/styles/styled.js\");\n/* harmony import */ var _utils_unsupportedProp__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../utils/unsupportedProp */ \"./node_modules/@mui/material/utils/unsupportedProp.js\");\n/* harmony import */ var _tabClasses__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./tabClasses */ \"./node_modules/@mui/material/Tab/tabClasses.js\");\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n\n\nconst _excluded = [\"className\", \"disabled\", \"disableFocusRipple\", \"fullWidth\", \"icon\", \"iconPosition\", \"indicator\", \"label\", \"onChange\", \"onClick\", \"onFocus\", \"selected\", \"selectionFollowsFocus\", \"textColor\", \"value\", \"wrapped\"];\n\n\n\n\n\n\n\n\n\n\n\nconst useUtilityClasses = ownerState => {\n  const {\n    classes,\n    textColor,\n    fullWidth,\n    wrapped,\n    icon,\n    label,\n    selected,\n    disabled\n  } = ownerState;\n  const slots = {\n    root: ['root', icon && label && 'labelIcon', `textColor${(0,_utils_capitalize__WEBPACK_IMPORTED_MODULE_5__[\"default\"])(textColor)}`, fullWidth && 'fullWidth', wrapped && 'wrapped', selected && 'selected', disabled && 'disabled'],\n    iconWrapper: ['iconWrapper']\n  };\n  return (0,_mui_base__WEBPACK_IMPORTED_MODULE_6__[\"default\"])(slots, _tabClasses__WEBPACK_IMPORTED_MODULE_7__.getTabUtilityClass, classes);\n};\nconst TabRoot = (0,_styles_styled__WEBPACK_IMPORTED_MODULE_8__[\"default\"])(_ButtonBase__WEBPACK_IMPORTED_MODULE_9__[\"default\"], {\n  name: 'MuiTab',\n  slot: 'Root',\n  overridesResolver: (props, styles) => {\n    const {\n      ownerState\n    } = props;\n    return [styles.root, ownerState.label && ownerState.icon && styles.labelIcon, styles[`textColor${(0,_utils_capitalize__WEBPACK_IMPORTED_MODULE_5__[\"default\"])(ownerState.textColor)}`], ownerState.fullWidth && styles.fullWidth, ownerState.wrapped && styles.wrapped];\n  }\n})(({\n  theme,\n  ownerState\n}) => (0,_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_1__[\"default\"])({}, theme.typography.button, {\n  maxWidth: 360,\n  minWidth: 90,\n  position: 'relative',\n  minHeight: 48,\n  flexShrink: 0,\n  padding: '12px 16px',\n  overflow: 'hidden',\n  whiteSpace: 'normal',\n  textAlign: 'center'\n}, ownerState.label && {\n  flexDirection: ownerState.iconPosition === 'top' || ownerState.iconPosition === 'bottom' ? 'column' : 'row'\n}, {\n  lineHeight: 1.25\n}, ownerState.icon && ownerState.label && {\n  minHeight: 72,\n  paddingTop: 9,\n  paddingBottom: 9,\n  [`& > .${_tabClasses__WEBPACK_IMPORTED_MODULE_7__[\"default\"].iconWrapper}`]: (0,_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_1__[\"default\"])({}, ownerState.iconPosition === 'top' && {\n    marginBottom: 6\n  }, ownerState.iconPosition === 'bottom' && {\n    marginTop: 6\n  }, ownerState.iconPosition === 'start' && {\n    marginRight: theme.spacing(1)\n  }, ownerState.iconPosition === 'end' && {\n    marginLeft: theme.spacing(1)\n  })\n}, ownerState.textColor === 'inherit' && {\n  color: 'inherit',\n  opacity: 0.6,\n  // same opacity as theme.palette.text.secondary\n  [`&.${_tabClasses__WEBPACK_IMPORTED_MODULE_7__[\"default\"].selected}`]: {\n    opacity: 1\n  },\n  [`&.${_tabClasses__WEBPACK_IMPORTED_MODULE_7__[\"default\"].disabled}`]: {\n    opacity: (theme.vars || theme).palette.action.disabledOpacity\n  }\n}, ownerState.textColor === 'primary' && {\n  color: (theme.vars || theme).palette.text.secondary,\n  [`&.${_tabClasses__WEBPACK_IMPORTED_MODULE_7__[\"default\"].selected}`]: {\n    color: (theme.vars || theme).palette.primary.main\n  },\n  [`&.${_tabClasses__WEBPACK_IMPORTED_MODULE_7__[\"default\"].disabled}`]: {\n    color: (theme.vars || theme).palette.text.disabled\n  }\n}, ownerState.textColor === 'secondary' && {\n  color: (theme.vars || theme).palette.text.secondary,\n  [`&.${_tabClasses__WEBPACK_IMPORTED_MODULE_7__[\"default\"].selected}`]: {\n    color: (theme.vars || theme).palette.secondary.main\n  },\n  [`&.${_tabClasses__WEBPACK_IMPORTED_MODULE_7__[\"default\"].disabled}`]: {\n    color: (theme.vars || theme).palette.text.disabled\n  }\n}, ownerState.fullWidth && {\n  flexShrink: 1,\n  flexGrow: 1,\n  flexBasis: 0,\n  maxWidth: 'none'\n}, ownerState.wrapped && {\n  fontSize: theme.typography.pxToRem(12)\n}));\nconst Tab = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__.forwardRef(function Tab(inProps, ref) {\n  const props = (0,_styles_useThemeProps__WEBPACK_IMPORTED_MODULE_10__[\"default\"])({\n    props: inProps,\n    name: 'MuiTab'\n  });\n  const {\n      className,\n      disabled = false,\n      disableFocusRipple = false,\n      // eslint-disable-next-line react/prop-types\n      fullWidth,\n      icon: iconProp,\n      iconPosition = 'top',\n      // eslint-disable-next-line react/prop-types\n      indicator,\n      label,\n      onChange,\n      onClick,\n      onFocus,\n      // eslint-disable-next-line react/prop-types\n      selected,\n      // eslint-disable-next-line react/prop-types\n      selectionFollowsFocus,\n      // eslint-disable-next-line react/prop-types\n      textColor = 'inherit',\n      value,\n      wrapped = false\n    } = props,\n    other = (0,_babel_runtime_helpers_esm_objectWithoutPropertiesLoose__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(props, _excluded);\n  const ownerState = (0,_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_1__[\"default\"])({}, props, {\n    disabled,\n    disableFocusRipple,\n    selected,\n    icon: !!iconProp,\n    iconPosition,\n    label: !!label,\n    fullWidth,\n    textColor,\n    wrapped\n  });\n  const classes = useUtilityClasses(ownerState);\n  const icon = iconProp && label && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__.isValidElement(iconProp) ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__.cloneElement(iconProp, {\n    className: (0,clsx__WEBPACK_IMPORTED_MODULE_3__[\"default\"])(classes.iconWrapper, iconProp.props.className)\n  }) : iconProp;\n  const handleClick = event => {\n    if (!selected && onChange) {\n      onChange(event, value);\n    }\n    if (onClick) {\n      onClick(event);\n    }\n  };\n  const handleFocus = event => {\n    if (selectionFollowsFocus && !selected && onChange) {\n      onChange(event, value);\n    }\n    if (onFocus) {\n      onFocus(event);\n    }\n  };\n  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(TabRoot, (0,_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_1__[\"default\"])({\n    focusRipple: !disableFocusRipple,\n    className: (0,clsx__WEBPACK_IMPORTED_MODULE_3__[\"default\"])(classes.root, className),\n    ref: ref,\n    role: \"tab\",\n    \"aria-selected\": selected,\n    disabled: disabled,\n    onClick: handleClick,\n    onFocus: handleFocus,\n    ownerState: ownerState,\n    tabIndex: selected ? 0 : -1\n  }, other, {\n    children: [iconPosition === 'top' || iconPosition === 'start' ? /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(react__WEBPACK_IMPORTED_MODULE_2__.Fragment, {\n      children: [icon, label]\n    }) : /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(react__WEBPACK_IMPORTED_MODULE_2__.Fragment, {\n      children: [label, icon]\n    }), indicator]\n  }));\n});\n true ? Tab.propTypes /* remove-proptypes */ = {\n  // ----------------------------- Warning --------------------------------\n  // | These PropTypes are generated from the TypeScript type definitions |\n  // |     To update them edit the d.ts file and run \"yarn proptypes\"     |\n  // ----------------------------------------------------------------------\n  /**\n   * This prop isn't supported.\n   * Use the `component` prop if you need to change the children structure.\n   */\n  children: _utils_unsupportedProp__WEBPACK_IMPORTED_MODULE_11__[\"default\"],\n  /**\n   * Override or extend the styles applied to the component.\n   */\n  classes: (prop_types__WEBPACK_IMPORTED_MODULE_12___default().object),\n  /**\n   * @ignore\n   */\n  className: (prop_types__WEBPACK_IMPORTED_MODULE_12___default().string),\n  /**\n   * If `true`, the component is disabled.\n   * @default false\n   */\n  disabled: (prop_types__WEBPACK_IMPORTED_MODULE_12___default().bool),\n  /**\n   * If `true`, the  keyboard focus ripple is disabled.\n   * @default false\n   */\n  disableFocusRipple: (prop_types__WEBPACK_IMPORTED_MODULE_12___default().bool),\n  /**\n   * If `true`, the ripple effect is disabled.\n   *\n   * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure\n   * to highlight the element by applying separate styles with the `.Mui-focusVisible` class.\n   * @default false\n   */\n  disableRipple: (prop_types__WEBPACK_IMPORTED_MODULE_12___default().bool),\n  /**\n   * The icon to display.\n   */\n  icon: prop_types__WEBPACK_IMPORTED_MODULE_12___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_12___default().element), (prop_types__WEBPACK_IMPORTED_MODULE_12___default().string)]),\n  /**\n   * The position of the icon relative to the label.\n   * @default 'top'\n   */\n  iconPosition: prop_types__WEBPACK_IMPORTED_MODULE_12___default().oneOf(['bottom', 'end', 'start', 'top']),\n  /**\n   * The label element.\n   */\n  label: (prop_types__WEBPACK_IMPORTED_MODULE_12___default().node),\n  /**\n   * @ignore\n   */\n  onChange: (prop_types__WEBPACK_IMPORTED_MODULE_12___default().func),\n  /**\n   * @ignore\n   */\n  onClick: (prop_types__WEBPACK_IMPORTED_MODULE_12___default().func),\n  /**\n   * @ignore\n   */\n  onFocus: (prop_types__WEBPACK_IMPORTED_MODULE_12___default().func),\n  /**\n   * The system prop that allows defining system overrides as well as additional CSS styles.\n   */\n  sx: prop_types__WEBPACK_IMPORTED_MODULE_12___default().oneOfType([prop_types__WEBPACK_IMPORTED_MODULE_12___default().arrayOf(prop_types__WEBPACK_IMPORTED_MODULE_12___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_12___default().func), (prop_types__WEBPACK_IMPORTED_MODULE_12___default().object), (prop_types__WEBPACK_IMPORTED_MODULE_12___default().bool)])), (prop_types__WEBPACK_IMPORTED_MODULE_12___default().func), (prop_types__WEBPACK_IMPORTED_MODULE_12___default().object)]),\n  /**\n   * You can provide your own value. Otherwise, we fallback to the child position index.\n   */\n  value: (prop_types__WEBPACK_IMPORTED_MODULE_12___default().any),\n  /**\n   * Tab labels appear in a single row.\n   * They can use a second line if needed.\n   * @default false\n   */\n  wrapped: (prop_types__WEBPACK_IMPORTED_MODULE_12___default().bool)\n} : 0;\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Tab);\n\n//# sourceURL=webpack://muibasic_starterkit/./node_modules/@mui/material/Tab/Tab.js?");
+
+/***/ }),
+
+/***/ "./node_modules/@mui/material/Tab/tabClasses.js":
+/*!******************************************************!*\
+  !*** ./node_modules/@mui/material/Tab/tabClasses.js ***!
+  \******************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__),\n/* harmony export */   getTabUtilityClass: () => (/* binding */ getTabUtilityClass)\n/* harmony export */ });\n/* harmony import */ var _mui_utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @mui/utils */ \"./node_modules/@mui/utils/esm/generateUtilityClasses/generateUtilityClasses.js\");\n/* harmony import */ var _generateUtilityClass__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../generateUtilityClass */ \"./node_modules/@mui/utils/esm/generateUtilityClass/generateUtilityClass.js\");\n\n\nfunction getTabUtilityClass(slot) {\n  return (0,_generateUtilityClass__WEBPACK_IMPORTED_MODULE_0__[\"default\"])('MuiTab', slot);\n}\nconst tabClasses = (0,_mui_utils__WEBPACK_IMPORTED_MODULE_1__[\"default\"])('MuiTab', ['root', 'labelIcon', 'textColorInherit', 'textColorPrimary', 'textColorSecondary', 'selected', 'disabled', 'fullWidth', 'wrapped', 'iconWrapper']);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (tabClasses);\n\n//# sourceURL=webpack://muibasic_starterkit/./node_modules/@mui/material/Tab/tabClasses.js?");
+
+/***/ }),
+
+/***/ "./node_modules/@mui/material/TabScrollButton/TabScrollButton.js":
+/*!***********************************************************************!*\
+  !*** ./node_modules/@mui/material/TabScrollButton/TabScrollButton.js ***!
+  \***********************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _babel_runtime_helpers_esm_objectWithoutPropertiesLoose__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/esm/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js\");\n/* harmony import */ var _babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/esm/extends */ \"./node_modules/@babel/runtime/helpers/esm/extends.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\");\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_14___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_14__);\n/* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! clsx */ \"./node_modules/clsx/dist/clsx.m.js\");\n/* harmony import */ var _mui_base__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @mui/base */ \"./node_modules/@mui/utils/esm/composeClasses/composeClasses.js\");\n/* harmony import */ var _mui_base__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! @mui/base */ \"./node_modules/@mui/base/utils/useSlotProps.js\");\n/* harmony import */ var _internal_svg_icons_KeyboardArrowLeft__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../internal/svg-icons/KeyboardArrowLeft */ \"./node_modules/@mui/material/internal/svg-icons/KeyboardArrowLeft.js\");\n/* harmony import */ var _internal_svg_icons_KeyboardArrowRight__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../internal/svg-icons/KeyboardArrowRight */ \"./node_modules/@mui/material/internal/svg-icons/KeyboardArrowRight.js\");\n/* harmony import */ var _ButtonBase__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../ButtonBase */ \"./node_modules/@mui/material/ButtonBase/ButtonBase.js\");\n/* harmony import */ var _styles_useTheme__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../styles/useTheme */ \"./node_modules/@mui/material/styles/useTheme.js\");\n/* harmony import */ var _styles_useThemeProps__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../styles/useThemeProps */ \"./node_modules/@mui/material/styles/useThemeProps.js\");\n/* harmony import */ var _styles_styled__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../styles/styled */ \"./node_modules/@mui/material/styles/styled.js\");\n/* harmony import */ var _tabScrollButtonClasses__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./tabScrollButtonClasses */ \"./node_modules/@mui/material/TabScrollButton/tabScrollButtonClasses.js\");\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n\n\nconst _excluded = [\"className\", \"slots\", \"slotProps\", \"direction\", \"orientation\", \"disabled\"];\n/* eslint-disable jsx-a11y/aria-role */\n\n\n\n\n\n\n\n\n\n\n\n\nconst useUtilityClasses = ownerState => {\n  const {\n    classes,\n    orientation,\n    disabled\n  } = ownerState;\n  const slots = {\n    root: ['root', orientation, disabled && 'disabled']\n  };\n  return (0,_mui_base__WEBPACK_IMPORTED_MODULE_5__[\"default\"])(slots, _tabScrollButtonClasses__WEBPACK_IMPORTED_MODULE_6__.getTabScrollButtonUtilityClass, classes);\n};\nconst TabScrollButtonRoot = (0,_styles_styled__WEBPACK_IMPORTED_MODULE_7__[\"default\"])(_ButtonBase__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {\n  name: 'MuiTabScrollButton',\n  slot: 'Root',\n  overridesResolver: (props, styles) => {\n    const {\n      ownerState\n    } = props;\n    return [styles.root, ownerState.orientation && styles[ownerState.orientation]];\n  }\n})(({\n  ownerState\n}) => (0,_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_1__[\"default\"])({\n  width: 40,\n  flexShrink: 0,\n  opacity: 0.8,\n  [`&.${_tabScrollButtonClasses__WEBPACK_IMPORTED_MODULE_6__[\"default\"].disabled}`]: {\n    opacity: 0\n  }\n}, ownerState.orientation === 'vertical' && {\n  width: '100%',\n  height: 40,\n  '& svg': {\n    transform: `rotate(${ownerState.isRtl ? -90 : 90}deg)`\n  }\n}));\nconst TabScrollButton = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__.forwardRef(function TabScrollButton(inProps, ref) {\n  var _slots$StartScrollBut, _slots$EndScrollButto;\n  const props = (0,_styles_useThemeProps__WEBPACK_IMPORTED_MODULE_9__[\"default\"])({\n    props: inProps,\n    name: 'MuiTabScrollButton'\n  });\n  const {\n      className,\n      slots = {},\n      slotProps = {},\n      direction\n    } = props,\n    other = (0,_babel_runtime_helpers_esm_objectWithoutPropertiesLoose__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(props, _excluded);\n  const theme = (0,_styles_useTheme__WEBPACK_IMPORTED_MODULE_10__[\"default\"])();\n  const isRtl = theme.direction === 'rtl';\n  const ownerState = (0,_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_1__[\"default\"])({\n    isRtl\n  }, props);\n  const classes = useUtilityClasses(ownerState);\n  const StartButtonIcon = (_slots$StartScrollBut = slots.StartScrollButtonIcon) != null ? _slots$StartScrollBut : _internal_svg_icons_KeyboardArrowLeft__WEBPACK_IMPORTED_MODULE_11__[\"default\"];\n  const EndButtonIcon = (_slots$EndScrollButto = slots.EndScrollButtonIcon) != null ? _slots$EndScrollButto : _internal_svg_icons_KeyboardArrowRight__WEBPACK_IMPORTED_MODULE_12__[\"default\"];\n  const startButtonIconProps = (0,_mui_base__WEBPACK_IMPORTED_MODULE_13__[\"default\"])({\n    elementType: StartButtonIcon,\n    externalSlotProps: slotProps.startScrollButtonIcon,\n    additionalProps: {\n      fontSize: 'small'\n    },\n    ownerState\n  });\n  const endButtonIconProps = (0,_mui_base__WEBPACK_IMPORTED_MODULE_13__[\"default\"])({\n    elementType: EndButtonIcon,\n    externalSlotProps: slotProps.endScrollButtonIcon,\n    additionalProps: {\n      fontSize: 'small'\n    },\n    ownerState\n  });\n  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(TabScrollButtonRoot, (0,_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_1__[\"default\"])({\n    component: \"div\",\n    className: (0,clsx__WEBPACK_IMPORTED_MODULE_3__[\"default\"])(classes.root, className),\n    ref: ref,\n    role: null,\n    ownerState: ownerState,\n    tabIndex: null\n  }, other, {\n    children: direction === 'left' ? /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(StartButtonIcon, (0,_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_1__[\"default\"])({}, startButtonIconProps)) : /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(EndButtonIcon, (0,_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_1__[\"default\"])({}, endButtonIconProps))\n  }));\n});\n true ? TabScrollButton.propTypes /* remove-proptypes */ = {\n  // ----------------------------- Warning --------------------------------\n  // | These PropTypes are generated from the TypeScript type definitions |\n  // |     To update them edit the d.ts file and run \"yarn proptypes\"     |\n  // ----------------------------------------------------------------------\n  /**\n   * The content of the component.\n   */\n  children: (prop_types__WEBPACK_IMPORTED_MODULE_14___default().node),\n  /**\n   * Override or extend the styles applied to the component.\n   */\n  classes: (prop_types__WEBPACK_IMPORTED_MODULE_14___default().object),\n  /**\n   * @ignore\n   */\n  className: (prop_types__WEBPACK_IMPORTED_MODULE_14___default().string),\n  /**\n   * The direction the button should indicate.\n   */\n  direction: prop_types__WEBPACK_IMPORTED_MODULE_14___default().oneOf(['left', 'right']).isRequired,\n  /**\n   * If `true`, the component is disabled.\n   * @default false\n   */\n  disabled: (prop_types__WEBPACK_IMPORTED_MODULE_14___default().bool),\n  /**\n   * The component orientation (layout flow direction).\n   */\n  orientation: prop_types__WEBPACK_IMPORTED_MODULE_14___default().oneOf(['horizontal', 'vertical']).isRequired,\n  /**\n   * The extra props for the slot components.\n   * You can override the existing props or add new ones.\n   * @default {}\n   */\n  slotProps: prop_types__WEBPACK_IMPORTED_MODULE_14___default().shape({\n    endScrollButtonIcon: prop_types__WEBPACK_IMPORTED_MODULE_14___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_14___default().func), (prop_types__WEBPACK_IMPORTED_MODULE_14___default().object)]),\n    startScrollButtonIcon: prop_types__WEBPACK_IMPORTED_MODULE_14___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_14___default().func), (prop_types__WEBPACK_IMPORTED_MODULE_14___default().object)])\n  }),\n  /**\n   * The components used for each slot inside.\n   * @default {}\n   */\n  slots: prop_types__WEBPACK_IMPORTED_MODULE_14___default().shape({\n    EndScrollButtonIcon: (prop_types__WEBPACK_IMPORTED_MODULE_14___default().elementType),\n    StartScrollButtonIcon: (prop_types__WEBPACK_IMPORTED_MODULE_14___default().elementType)\n  }),\n  /**\n   * The system prop that allows defining system overrides as well as additional CSS styles.\n   */\n  sx: prop_types__WEBPACK_IMPORTED_MODULE_14___default().oneOfType([prop_types__WEBPACK_IMPORTED_MODULE_14___default().arrayOf(prop_types__WEBPACK_IMPORTED_MODULE_14___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_14___default().func), (prop_types__WEBPACK_IMPORTED_MODULE_14___default().object), (prop_types__WEBPACK_IMPORTED_MODULE_14___default().bool)])), (prop_types__WEBPACK_IMPORTED_MODULE_14___default().func), (prop_types__WEBPACK_IMPORTED_MODULE_14___default().object)])\n} : 0;\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (TabScrollButton);\n\n//# sourceURL=webpack://muibasic_starterkit/./node_modules/@mui/material/TabScrollButton/TabScrollButton.js?");
+
+/***/ }),
+
+/***/ "./node_modules/@mui/material/TabScrollButton/tabScrollButtonClasses.js":
+/*!******************************************************************************!*\
+  !*** ./node_modules/@mui/material/TabScrollButton/tabScrollButtonClasses.js ***!
+  \******************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__),\n/* harmony export */   getTabScrollButtonUtilityClass: () => (/* binding */ getTabScrollButtonUtilityClass)\n/* harmony export */ });\n/* harmony import */ var _mui_utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @mui/utils */ \"./node_modules/@mui/utils/esm/generateUtilityClasses/generateUtilityClasses.js\");\n/* harmony import */ var _generateUtilityClass__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../generateUtilityClass */ \"./node_modules/@mui/utils/esm/generateUtilityClass/generateUtilityClass.js\");\n\n\nfunction getTabScrollButtonUtilityClass(slot) {\n  return (0,_generateUtilityClass__WEBPACK_IMPORTED_MODULE_0__[\"default\"])('MuiTabScrollButton', slot);\n}\nconst tabScrollButtonClasses = (0,_mui_utils__WEBPACK_IMPORTED_MODULE_1__[\"default\"])('MuiTabScrollButton', ['root', 'vertical', 'horizontal', 'disabled']);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (tabScrollButtonClasses);\n\n//# sourceURL=webpack://muibasic_starterkit/./node_modules/@mui/material/TabScrollButton/tabScrollButtonClasses.js?");
+
+/***/ }),
+
+/***/ "./node_modules/@mui/material/Tabs/ScrollbarSize.js":
+/*!**********************************************************!*\
+  !*** ./node_modules/@mui/material/Tabs/ScrollbarSize.js ***!
+  \**********************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ ScrollbarSize)\n/* harmony export */ });\n/* harmony import */ var _babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/esm/extends */ \"./node_modules/@babel/runtime/helpers/esm/extends.js\");\n/* harmony import */ var _babel_runtime_helpers_esm_objectWithoutPropertiesLoose__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/esm/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\");\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_7__);\n/* harmony import */ var _utils_debounce__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../utils/debounce */ \"./node_modules/@mui/material/utils/debounce.js\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../utils */ \"./node_modules/@mui/material/utils/useEnhancedEffect.js\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../utils */ \"./node_modules/@mui/material/utils/ownerWindow.js\");\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n\n\nconst _excluded = [\"onChange\"];\n\n\n\n\n\nconst styles = {\n  width: 99,\n  height: 99,\n  position: 'absolute',\n  top: -9999,\n  overflow: 'scroll'\n};\n\n/**\n * @ignore - internal component.\n * The component originates from https://github.com/STORIS/react-scrollbar-size.\n * It has been moved into the core in order to minimize the bundle size.\n */\nfunction ScrollbarSize(props) {\n  const {\n      onChange\n    } = props,\n    other = (0,_babel_runtime_helpers_esm_objectWithoutPropertiesLoose__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(props, _excluded);\n  const scrollbarHeight = react__WEBPACK_IMPORTED_MODULE_2__.useRef();\n  const nodeRef = react__WEBPACK_IMPORTED_MODULE_2__.useRef(null);\n  const setMeasurements = () => {\n    scrollbarHeight.current = nodeRef.current.offsetHeight - nodeRef.current.clientHeight;\n  };\n  (0,_utils__WEBPACK_IMPORTED_MODULE_4__[\"default\"])(() => {\n    const handleResize = (0,_utils_debounce__WEBPACK_IMPORTED_MODULE_5__[\"default\"])(() => {\n      const prevHeight = scrollbarHeight.current;\n      setMeasurements();\n      if (prevHeight !== scrollbarHeight.current) {\n        onChange(scrollbarHeight.current);\n      }\n    });\n    const containerWindow = (0,_utils__WEBPACK_IMPORTED_MODULE_6__[\"default\"])(nodeRef.current);\n    containerWindow.addEventListener('resize', handleResize);\n    return () => {\n      handleResize.clear();\n      containerWindow.removeEventListener('resize', handleResize);\n    };\n  }, [onChange]);\n  react__WEBPACK_IMPORTED_MODULE_2__.useEffect(() => {\n    setMeasurements();\n    onChange(scrollbarHeight.current);\n  }, [onChange]);\n  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"div\", (0,_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_0__[\"default\"])({\n    style: styles,\n    ref: nodeRef\n  }, other));\n}\n true ? ScrollbarSize.propTypes = {\n  onChange: (prop_types__WEBPACK_IMPORTED_MODULE_7___default().func).isRequired\n} : 0;\n\n//# sourceURL=webpack://muibasic_starterkit/./node_modules/@mui/material/Tabs/ScrollbarSize.js?");
+
+/***/ }),
+
+/***/ "./node_modules/@mui/material/Tabs/Tabs.js":
+/*!*************************************************!*\
+  !*** ./node_modules/@mui/material/Tabs/Tabs.js ***!
+  \*************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _babel_runtime_helpers_esm_objectWithoutPropertiesLoose__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/esm/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js\");\n/* harmony import */ var _babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/esm/extends */ \"./node_modules/@babel/runtime/helpers/esm/extends.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var react_is__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react-is */ \"./node_modules/react-is/index.js\");\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\");\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_21___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_21__);\n/* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! clsx */ \"./node_modules/clsx/dist/clsx.m.js\");\n/* harmony import */ var _mui_utils__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! @mui/utils */ \"./node_modules/@mui/utils/esm/refType.js\");\n/* harmony import */ var _mui_base__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @mui/base */ \"./node_modules/@mui/utils/esm/composeClasses/composeClasses.js\");\n/* harmony import */ var _mui_base__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! @mui/base */ \"./node_modules/@mui/base/utils/useSlotProps.js\");\n/* harmony import */ var _styles_styled__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../styles/styled */ \"./node_modules/@mui/material/styles/styled.js\");\n/* harmony import */ var _styles_useThemeProps__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../styles/useThemeProps */ \"./node_modules/@mui/material/styles/useThemeProps.js\");\n/* harmony import */ var _styles_useTheme__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../styles/useTheme */ \"./node_modules/@mui/material/styles/useTheme.js\");\n/* harmony import */ var _utils_debounce__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ../utils/debounce */ \"./node_modules/@mui/material/utils/debounce.js\");\n/* harmony import */ var _utils_scrollLeft__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../utils/scrollLeft */ \"./node_modules/@mui/utils/esm/scrollLeft.js\");\n/* harmony import */ var _internal_animate__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ../internal/animate */ \"./node_modules/@mui/material/internal/animate.js\");\n/* harmony import */ var _ScrollbarSize__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./ScrollbarSize */ \"./node_modules/@mui/material/Tabs/ScrollbarSize.js\");\n/* harmony import */ var _TabScrollButton__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../TabScrollButton */ \"./node_modules/@mui/material/TabScrollButton/TabScrollButton.js\");\n/* harmony import */ var _utils_useEventCallback__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ../utils/useEventCallback */ \"./node_modules/@mui/material/utils/useEventCallback.js\");\n/* harmony import */ var _tabsClasses__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./tabsClasses */ \"./node_modules/@mui/material/Tabs/tabsClasses.js\");\n/* harmony import */ var _utils_ownerDocument__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ../utils/ownerDocument */ \"./node_modules/@mui/material/utils/ownerDocument.js\");\n/* harmony import */ var _utils_ownerWindow__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ../utils/ownerWindow */ \"./node_modules/@mui/material/utils/ownerWindow.js\");\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n\n\nconst _excluded = [\"aria-label\", \"aria-labelledby\", \"action\", \"centered\", \"children\", \"className\", \"component\", \"allowScrollButtonsMobile\", \"indicatorColor\", \"onChange\", \"orientation\", \"ScrollButtonComponent\", \"scrollButtons\", \"selectionFollowsFocus\", \"slots\", \"slotProps\", \"TabIndicatorProps\", \"TabScrollButtonProps\", \"textColor\", \"value\", \"variant\", \"visibleScrollbar\"];\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst nextItem = (list, item) => {\n  if (list === item) {\n    return list.firstChild;\n  }\n  if (item && item.nextElementSibling) {\n    return item.nextElementSibling;\n  }\n  return list.firstChild;\n};\nconst previousItem = (list, item) => {\n  if (list === item) {\n    return list.lastChild;\n  }\n  if (item && item.previousElementSibling) {\n    return item.previousElementSibling;\n  }\n  return list.lastChild;\n};\nconst moveFocus = (list, currentFocus, traversalFunction) => {\n  let wrappedOnce = false;\n  let nextFocus = traversalFunction(list, currentFocus);\n  while (nextFocus) {\n    // Prevent infinite loop.\n    if (nextFocus === list.firstChild) {\n      if (wrappedOnce) {\n        return;\n      }\n      wrappedOnce = true;\n    }\n\n    // Same logic as useAutocomplete.js\n    const nextFocusDisabled = nextFocus.disabled || nextFocus.getAttribute('aria-disabled') === 'true';\n    if (!nextFocus.hasAttribute('tabindex') || nextFocusDisabled) {\n      // Move to the next element.\n      nextFocus = traversalFunction(list, nextFocus);\n    } else {\n      nextFocus.focus();\n      return;\n    }\n  }\n};\nconst useUtilityClasses = ownerState => {\n  const {\n    vertical,\n    fixed,\n    hideScrollbar,\n    scrollableX,\n    scrollableY,\n    centered,\n    scrollButtonsHideMobile,\n    classes\n  } = ownerState;\n  const slots = {\n    root: ['root', vertical && 'vertical'],\n    scroller: ['scroller', fixed && 'fixed', hideScrollbar && 'hideScrollbar', scrollableX && 'scrollableX', scrollableY && 'scrollableY'],\n    flexContainer: ['flexContainer', vertical && 'flexContainerVertical', centered && 'centered'],\n    indicator: ['indicator'],\n    scrollButtons: ['scrollButtons', scrollButtonsHideMobile && 'scrollButtonsHideMobile'],\n    scrollableX: [scrollableX && 'scrollableX'],\n    hideScrollbar: [hideScrollbar && 'hideScrollbar']\n  };\n  return (0,_mui_base__WEBPACK_IMPORTED_MODULE_6__[\"default\"])(slots, _tabsClasses__WEBPACK_IMPORTED_MODULE_7__.getTabsUtilityClass, classes);\n};\nconst TabsRoot = (0,_styles_styled__WEBPACK_IMPORTED_MODULE_8__[\"default\"])('div', {\n  name: 'MuiTabs',\n  slot: 'Root',\n  overridesResolver: (props, styles) => {\n    const {\n      ownerState\n    } = props;\n    return [{\n      [`& .${_tabsClasses__WEBPACK_IMPORTED_MODULE_7__[\"default\"].scrollButtons}`]: styles.scrollButtons\n    }, {\n      [`& .${_tabsClasses__WEBPACK_IMPORTED_MODULE_7__[\"default\"].scrollButtons}`]: ownerState.scrollButtonsHideMobile && styles.scrollButtonsHideMobile\n    }, styles.root, ownerState.vertical && styles.vertical];\n  }\n})(({\n  ownerState,\n  theme\n}) => (0,_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_1__[\"default\"])({\n  overflow: 'hidden',\n  minHeight: 48,\n  // Add iOS momentum scrolling for iOS < 13.0\n  WebkitOverflowScrolling: 'touch',\n  display: 'flex'\n}, ownerState.vertical && {\n  flexDirection: 'column'\n}, ownerState.scrollButtonsHideMobile && {\n  [`& .${_tabsClasses__WEBPACK_IMPORTED_MODULE_7__[\"default\"].scrollButtons}`]: {\n    [theme.breakpoints.down('sm')]: {\n      display: 'none'\n    }\n  }\n}));\nconst TabsScroller = (0,_styles_styled__WEBPACK_IMPORTED_MODULE_8__[\"default\"])('div', {\n  name: 'MuiTabs',\n  slot: 'Scroller',\n  overridesResolver: (props, styles) => {\n    const {\n      ownerState\n    } = props;\n    return [styles.scroller, ownerState.fixed && styles.fixed, ownerState.hideScrollbar && styles.hideScrollbar, ownerState.scrollableX && styles.scrollableX, ownerState.scrollableY && styles.scrollableY];\n  }\n})(({\n  ownerState\n}) => (0,_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_1__[\"default\"])({\n  position: 'relative',\n  display: 'inline-block',\n  flex: '1 1 auto',\n  whiteSpace: 'nowrap'\n}, ownerState.fixed && {\n  overflowX: 'hidden',\n  width: '100%'\n}, ownerState.hideScrollbar && {\n  // Hide dimensionless scrollbar on macOS\n  scrollbarWidth: 'none',\n  // Firefox\n  '&::-webkit-scrollbar': {\n    display: 'none' // Safari + Chrome\n  }\n}, ownerState.scrollableX && {\n  overflowX: 'auto',\n  overflowY: 'hidden'\n}, ownerState.scrollableY && {\n  overflowY: 'auto',\n  overflowX: 'hidden'\n}));\nconst FlexContainer = (0,_styles_styled__WEBPACK_IMPORTED_MODULE_8__[\"default\"])('div', {\n  name: 'MuiTabs',\n  slot: 'FlexContainer',\n  overridesResolver: (props, styles) => {\n    const {\n      ownerState\n    } = props;\n    return [styles.flexContainer, ownerState.vertical && styles.flexContainerVertical, ownerState.centered && styles.centered];\n  }\n})(({\n  ownerState\n}) => (0,_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_1__[\"default\"])({\n  display: 'flex'\n}, ownerState.vertical && {\n  flexDirection: 'column'\n}, ownerState.centered && {\n  justifyContent: 'center'\n}));\nconst TabsIndicator = (0,_styles_styled__WEBPACK_IMPORTED_MODULE_8__[\"default\"])('span', {\n  name: 'MuiTabs',\n  slot: 'Indicator',\n  overridesResolver: (props, styles) => styles.indicator\n})(({\n  ownerState,\n  theme\n}) => (0,_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_1__[\"default\"])({\n  position: 'absolute',\n  height: 2,\n  bottom: 0,\n  width: '100%',\n  transition: theme.transitions.create()\n}, ownerState.indicatorColor === 'primary' && {\n  backgroundColor: (theme.vars || theme).palette.primary.main\n}, ownerState.indicatorColor === 'secondary' && {\n  backgroundColor: (theme.vars || theme).palette.secondary.main\n}, ownerState.vertical && {\n  height: '100%',\n  width: 2,\n  right: 0\n}));\nconst TabsScrollbarSize = (0,_styles_styled__WEBPACK_IMPORTED_MODULE_8__[\"default\"])(_ScrollbarSize__WEBPACK_IMPORTED_MODULE_9__[\"default\"], {\n  name: 'MuiTabs',\n  slot: 'ScrollbarSize'\n})({\n  overflowX: 'auto',\n  overflowY: 'hidden',\n  // Hide dimensionless scrollbar on macOS\n  scrollbarWidth: 'none',\n  // Firefox\n  '&::-webkit-scrollbar': {\n    display: 'none' // Safari + Chrome\n  }\n});\n\nconst defaultIndicatorStyle = {};\nlet warnedOnceTabPresent = false;\nconst Tabs = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__.forwardRef(function Tabs(inProps, ref) {\n  const props = (0,_styles_useThemeProps__WEBPACK_IMPORTED_MODULE_10__[\"default\"])({\n    props: inProps,\n    name: 'MuiTabs'\n  });\n  const theme = (0,_styles_useTheme__WEBPACK_IMPORTED_MODULE_11__[\"default\"])();\n  const isRtl = theme.direction === 'rtl';\n  const {\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      action,\n      centered = false,\n      children: childrenProp,\n      className,\n      component = 'div',\n      allowScrollButtonsMobile = false,\n      indicatorColor = 'primary',\n      onChange,\n      orientation = 'horizontal',\n      ScrollButtonComponent = _TabScrollButton__WEBPACK_IMPORTED_MODULE_12__[\"default\"],\n      scrollButtons = 'auto',\n      selectionFollowsFocus,\n      slots = {},\n      slotProps = {},\n      TabIndicatorProps = {},\n      TabScrollButtonProps = {},\n      textColor = 'primary',\n      value,\n      variant = 'standard',\n      visibleScrollbar = false\n    } = props,\n    other = (0,_babel_runtime_helpers_esm_objectWithoutPropertiesLoose__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(props, _excluded);\n  const scrollable = variant === 'scrollable';\n  const vertical = orientation === 'vertical';\n  const scrollStart = vertical ? 'scrollTop' : 'scrollLeft';\n  const start = vertical ? 'top' : 'left';\n  const end = vertical ? 'bottom' : 'right';\n  const clientSize = vertical ? 'clientHeight' : 'clientWidth';\n  const size = vertical ? 'height' : 'width';\n  const ownerState = (0,_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_1__[\"default\"])({}, props, {\n    component,\n    allowScrollButtonsMobile,\n    indicatorColor,\n    orientation,\n    vertical,\n    scrollButtons,\n    textColor,\n    variant,\n    visibleScrollbar,\n    fixed: !scrollable,\n    hideScrollbar: scrollable && !visibleScrollbar,\n    scrollableX: scrollable && !vertical,\n    scrollableY: scrollable && vertical,\n    centered: centered && !scrollable,\n    scrollButtonsHideMobile: !allowScrollButtonsMobile\n  });\n  const classes = useUtilityClasses(ownerState);\n  const startScrollButtonIconProps = (0,_mui_base__WEBPACK_IMPORTED_MODULE_13__[\"default\"])({\n    elementType: slots.StartScrollButtonIcon,\n    externalSlotProps: slotProps.startScrollButtonIcon,\n    ownerState\n  });\n  const endScrollButtonIconProps = (0,_mui_base__WEBPACK_IMPORTED_MODULE_13__[\"default\"])({\n    elementType: slots.EndScrollButtonIcon,\n    externalSlotProps: slotProps.endScrollButtonIcon,\n    ownerState\n  });\n  if (true) {\n    if (centered && scrollable) {\n      console.error('MUI: You can not use the `centered={true}` and `variant=\"scrollable\"` properties ' + 'at the same time on a `Tabs` component.');\n    }\n  }\n  const [mounted, setMounted] = react__WEBPACK_IMPORTED_MODULE_2__.useState(false);\n  const [indicatorStyle, setIndicatorStyle] = react__WEBPACK_IMPORTED_MODULE_2__.useState(defaultIndicatorStyle);\n  const [displayScroll, setDisplayScroll] = react__WEBPACK_IMPORTED_MODULE_2__.useState({\n    start: false,\n    end: false\n  });\n  const [scrollerStyle, setScrollerStyle] = react__WEBPACK_IMPORTED_MODULE_2__.useState({\n    overflow: 'hidden',\n    scrollbarWidth: 0\n  });\n  const valueToIndex = new Map();\n  const tabsRef = react__WEBPACK_IMPORTED_MODULE_2__.useRef(null);\n  const tabListRef = react__WEBPACK_IMPORTED_MODULE_2__.useRef(null);\n  const getTabsMeta = () => {\n    const tabsNode = tabsRef.current;\n    let tabsMeta;\n    if (tabsNode) {\n      const rect = tabsNode.getBoundingClientRect();\n      // create a new object with ClientRect class props + scrollLeft\n      tabsMeta = {\n        clientWidth: tabsNode.clientWidth,\n        scrollLeft: tabsNode.scrollLeft,\n        scrollTop: tabsNode.scrollTop,\n        scrollLeftNormalized: (0,_utils_scrollLeft__WEBPACK_IMPORTED_MODULE_14__.getNormalizedScrollLeft)(tabsNode, theme.direction),\n        scrollWidth: tabsNode.scrollWidth,\n        top: rect.top,\n        bottom: rect.bottom,\n        left: rect.left,\n        right: rect.right\n      };\n    }\n    let tabMeta;\n    if (tabsNode && value !== false) {\n      const children = tabListRef.current.children;\n      if (children.length > 0) {\n        const tab = children[valueToIndex.get(value)];\n        if (true) {\n          if (!tab) {\n            console.error([`MUI: The \\`value\\` provided to the Tabs component is invalid.`, `None of the Tabs' children match with \"${value}\".`, valueToIndex.keys ? `You can provide one of the following values: ${Array.from(valueToIndex.keys()).join(', ')}.` : null].join('\\n'));\n          }\n        }\n        tabMeta = tab ? tab.getBoundingClientRect() : null;\n        if (true) {\n          if ( true && !warnedOnceTabPresent && tabMeta && tabMeta.width === 0 && tabMeta.height === 0 &&\n          // if the whole Tabs component is hidden, don't warn\n          tabsMeta.clientWidth !== 0) {\n            tabsMeta = null;\n            console.error(['MUI: The `value` provided to the Tabs component is invalid.', `The Tab with this \\`value\\` (\"${value}\") is not part of the document layout.`, \"Make sure the tab item is present in the document or that it's not `display: none`.\"].join('\\n'));\n            warnedOnceTabPresent = true;\n          }\n        }\n      }\n    }\n    return {\n      tabsMeta,\n      tabMeta\n    };\n  };\n  const updateIndicatorState = (0,_utils_useEventCallback__WEBPACK_IMPORTED_MODULE_15__[\"default\"])(() => {\n    const {\n      tabsMeta,\n      tabMeta\n    } = getTabsMeta();\n    let startValue = 0;\n    let startIndicator;\n    if (vertical) {\n      startIndicator = 'top';\n      if (tabMeta && tabsMeta) {\n        startValue = tabMeta.top - tabsMeta.top + tabsMeta.scrollTop;\n      }\n    } else {\n      startIndicator = isRtl ? 'right' : 'left';\n      if (tabMeta && tabsMeta) {\n        const correction = isRtl ? tabsMeta.scrollLeftNormalized + tabsMeta.clientWidth - tabsMeta.scrollWidth : tabsMeta.scrollLeft;\n        startValue = (isRtl ? -1 : 1) * (tabMeta[startIndicator] - tabsMeta[startIndicator] + correction);\n      }\n    }\n    const newIndicatorStyle = {\n      [startIndicator]: startValue,\n      // May be wrong until the font is loaded.\n      [size]: tabMeta ? tabMeta[size] : 0\n    };\n\n    // IE11 support, replace with Number.isNaN\n    // eslint-disable-next-line no-restricted-globals\n    if (isNaN(indicatorStyle[startIndicator]) || isNaN(indicatorStyle[size])) {\n      setIndicatorStyle(newIndicatorStyle);\n    } else {\n      const dStart = Math.abs(indicatorStyle[startIndicator] - newIndicatorStyle[startIndicator]);\n      const dSize = Math.abs(indicatorStyle[size] - newIndicatorStyle[size]);\n      if (dStart >= 1 || dSize >= 1) {\n        setIndicatorStyle(newIndicatorStyle);\n      }\n    }\n  });\n  const scroll = (scrollValue, {\n    animation = true\n  } = {}) => {\n    if (animation) {\n      (0,_internal_animate__WEBPACK_IMPORTED_MODULE_16__[\"default\"])(scrollStart, tabsRef.current, scrollValue, {\n        duration: theme.transitions.duration.standard\n      });\n    } else {\n      tabsRef.current[scrollStart] = scrollValue;\n    }\n  };\n  const moveTabsScroll = delta => {\n    let scrollValue = tabsRef.current[scrollStart];\n    if (vertical) {\n      scrollValue += delta;\n    } else {\n      scrollValue += delta * (isRtl ? -1 : 1);\n      // Fix for Edge\n      scrollValue *= isRtl && (0,_utils_scrollLeft__WEBPACK_IMPORTED_MODULE_14__.detectScrollType)() === 'reverse' ? -1 : 1;\n    }\n    scroll(scrollValue);\n  };\n  const getScrollSize = () => {\n    const containerSize = tabsRef.current[clientSize];\n    let totalSize = 0;\n    const children = Array.from(tabListRef.current.children);\n    for (let i = 0; i < children.length; i += 1) {\n      const tab = children[i];\n      if (totalSize + tab[clientSize] > containerSize) {\n        // If the first item is longer than the container size, then only scroll\n        // by the container size.\n        if (i === 0) {\n          totalSize = containerSize;\n        }\n        break;\n      }\n      totalSize += tab[clientSize];\n    }\n    return totalSize;\n  };\n  const handleStartScrollClick = () => {\n    moveTabsScroll(-1 * getScrollSize());\n  };\n  const handleEndScrollClick = () => {\n    moveTabsScroll(getScrollSize());\n  };\n\n  // TODO Remove <ScrollbarSize /> as browser support for hiding the scrollbar\n  // with CSS improves.\n  const handleScrollbarSizeChange = react__WEBPACK_IMPORTED_MODULE_2__.useCallback(scrollbarWidth => {\n    setScrollerStyle({\n      overflow: null,\n      scrollbarWidth\n    });\n  }, []);\n  const getConditionalElements = () => {\n    const conditionalElements = {};\n    conditionalElements.scrollbarSizeListener = scrollable ? /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(TabsScrollbarSize, {\n      onChange: handleScrollbarSizeChange,\n      className: (0,clsx__WEBPACK_IMPORTED_MODULE_4__[\"default\"])(classes.scrollableX, classes.hideScrollbar)\n    }) : null;\n    const scrollButtonsActive = displayScroll.start || displayScroll.end;\n    const showScrollButtons = scrollable && (scrollButtons === 'auto' && scrollButtonsActive || scrollButtons === true);\n    conditionalElements.scrollButtonStart = showScrollButtons ? /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(ScrollButtonComponent, (0,_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_1__[\"default\"])({\n      slots: {\n        StartScrollButtonIcon: slots.StartScrollButtonIcon\n      },\n      slotProps: {\n        startScrollButtonIcon: startScrollButtonIconProps\n      },\n      orientation: orientation,\n      direction: isRtl ? 'right' : 'left',\n      onClick: handleStartScrollClick,\n      disabled: !displayScroll.start\n    }, TabScrollButtonProps, {\n      className: (0,clsx__WEBPACK_IMPORTED_MODULE_4__[\"default\"])(classes.scrollButtons, TabScrollButtonProps.className)\n    })) : null;\n    conditionalElements.scrollButtonEnd = showScrollButtons ? /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(ScrollButtonComponent, (0,_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_1__[\"default\"])({\n      slots: {\n        EndScrollButtonIcon: slots.EndScrollButtonIcon\n      },\n      slotProps: {\n        endScrollButtonIcon: endScrollButtonIconProps\n      },\n      orientation: orientation,\n      direction: isRtl ? 'left' : 'right',\n      onClick: handleEndScrollClick,\n      disabled: !displayScroll.end\n    }, TabScrollButtonProps, {\n      className: (0,clsx__WEBPACK_IMPORTED_MODULE_4__[\"default\"])(classes.scrollButtons, TabScrollButtonProps.className)\n    })) : null;\n    return conditionalElements;\n  };\n  const scrollSelectedIntoView = (0,_utils_useEventCallback__WEBPACK_IMPORTED_MODULE_15__[\"default\"])(animation => {\n    const {\n      tabsMeta,\n      tabMeta\n    } = getTabsMeta();\n    if (!tabMeta || !tabsMeta) {\n      return;\n    }\n    if (tabMeta[start] < tabsMeta[start]) {\n      // left side of button is out of view\n      const nextScrollStart = tabsMeta[scrollStart] + (tabMeta[start] - tabsMeta[start]);\n      scroll(nextScrollStart, {\n        animation\n      });\n    } else if (tabMeta[end] > tabsMeta[end]) {\n      // right side of button is out of view\n      const nextScrollStart = tabsMeta[scrollStart] + (tabMeta[end] - tabsMeta[end]);\n      scroll(nextScrollStart, {\n        animation\n      });\n    }\n  });\n  const updateScrollButtonState = (0,_utils_useEventCallback__WEBPACK_IMPORTED_MODULE_15__[\"default\"])(() => {\n    if (scrollable && scrollButtons !== false) {\n      const {\n        scrollTop,\n        scrollHeight,\n        clientHeight,\n        scrollWidth,\n        clientWidth\n      } = tabsRef.current;\n      let showStartScroll;\n      let showEndScroll;\n      if (vertical) {\n        showStartScroll = scrollTop > 1;\n        showEndScroll = scrollTop < scrollHeight - clientHeight - 1;\n      } else {\n        const scrollLeft = (0,_utils_scrollLeft__WEBPACK_IMPORTED_MODULE_14__.getNormalizedScrollLeft)(tabsRef.current, theme.direction);\n        // use 1 for the potential rounding error with browser zooms.\n        showStartScroll = isRtl ? scrollLeft < scrollWidth - clientWidth - 1 : scrollLeft > 1;\n        showEndScroll = !isRtl ? scrollLeft < scrollWidth - clientWidth - 1 : scrollLeft > 1;\n      }\n      if (showStartScroll !== displayScroll.start || showEndScroll !== displayScroll.end) {\n        setDisplayScroll({\n          start: showStartScroll,\n          end: showEndScroll\n        });\n      }\n    }\n  });\n  react__WEBPACK_IMPORTED_MODULE_2__.useEffect(() => {\n    const handleResize = (0,_utils_debounce__WEBPACK_IMPORTED_MODULE_17__[\"default\"])(() => {\n      // If the Tabs component is replaced by Suspense with a fallback, the last\n      // ResizeObserver's handler that runs because of the change in the layout is trying to\n      // access a dom node that is no longer there (as the fallback component is being shown instead).\n      // See https://github.com/mui/material-ui/issues/33276\n      // TODO: Add tests that will ensure the component is not failing when\n      // replaced by Suspense with a fallback, once React is updated to version 18\n      if (tabsRef.current) {\n        updateIndicatorState();\n        updateScrollButtonState();\n      }\n    });\n    const win = (0,_utils_ownerWindow__WEBPACK_IMPORTED_MODULE_18__[\"default\"])(tabsRef.current);\n    win.addEventListener('resize', handleResize);\n    let resizeObserver;\n    if (typeof ResizeObserver !== 'undefined') {\n      resizeObserver = new ResizeObserver(handleResize);\n      Array.from(tabListRef.current.children).forEach(child => {\n        resizeObserver.observe(child);\n      });\n    }\n    return () => {\n      handleResize.clear();\n      win.removeEventListener('resize', handleResize);\n      if (resizeObserver) {\n        resizeObserver.disconnect();\n      }\n    };\n  }, [updateIndicatorState, updateScrollButtonState]);\n  const handleTabsScroll = react__WEBPACK_IMPORTED_MODULE_2__.useMemo(() => (0,_utils_debounce__WEBPACK_IMPORTED_MODULE_17__[\"default\"])(() => {\n    updateScrollButtonState();\n  }), [updateScrollButtonState]);\n  react__WEBPACK_IMPORTED_MODULE_2__.useEffect(() => {\n    return () => {\n      handleTabsScroll.clear();\n    };\n  }, [handleTabsScroll]);\n  react__WEBPACK_IMPORTED_MODULE_2__.useEffect(() => {\n    setMounted(true);\n  }, []);\n  react__WEBPACK_IMPORTED_MODULE_2__.useEffect(() => {\n    updateIndicatorState();\n    updateScrollButtonState();\n  });\n  react__WEBPACK_IMPORTED_MODULE_2__.useEffect(() => {\n    // Don't animate on the first render.\n    scrollSelectedIntoView(defaultIndicatorStyle !== indicatorStyle);\n  }, [scrollSelectedIntoView, indicatorStyle]);\n  react__WEBPACK_IMPORTED_MODULE_2__.useImperativeHandle(action, () => ({\n    updateIndicator: updateIndicatorState,\n    updateScrollButtons: updateScrollButtonState\n  }), [updateIndicatorState, updateScrollButtonState]);\n  const indicator = /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(TabsIndicator, (0,_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_1__[\"default\"])({}, TabIndicatorProps, {\n    className: (0,clsx__WEBPACK_IMPORTED_MODULE_4__[\"default\"])(classes.indicator, TabIndicatorProps.className),\n    ownerState: ownerState,\n    style: (0,_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_1__[\"default\"])({}, indicatorStyle, TabIndicatorProps.style)\n  }));\n  let childIndex = 0;\n  const children = react__WEBPACK_IMPORTED_MODULE_2__.Children.map(childrenProp, child => {\n    if (! /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__.isValidElement(child)) {\n      return null;\n    }\n    if (true) {\n      if ((0,react_is__WEBPACK_IMPORTED_MODULE_3__.isFragment)(child)) {\n        console.error([\"MUI: The Tabs component doesn't accept a Fragment as a child.\", 'Consider providing an array instead.'].join('\\n'));\n      }\n    }\n    const childValue = child.props.value === undefined ? childIndex : child.props.value;\n    valueToIndex.set(childValue, childIndex);\n    const selected = childValue === value;\n    childIndex += 1;\n    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__.cloneElement(child, (0,_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_1__[\"default\"])({\n      fullWidth: variant === 'fullWidth',\n      indicator: selected && !mounted && indicator,\n      selected,\n      selectionFollowsFocus,\n      onChange,\n      textColor,\n      value: childValue\n    }, childIndex === 1 && value === false && !child.props.tabIndex ? {\n      tabIndex: 0\n    } : {}));\n  });\n  const handleKeyDown = event => {\n    const list = tabListRef.current;\n    const currentFocus = (0,_utils_ownerDocument__WEBPACK_IMPORTED_MODULE_19__[\"default\"])(list).activeElement;\n    // Keyboard navigation assumes that [role=\"tab\"] are siblings\n    // though we might warn in the future about nested, interactive elements\n    // as a a11y violation\n    const role = currentFocus.getAttribute('role');\n    if (role !== 'tab') {\n      return;\n    }\n    let previousItemKey = orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp';\n    let nextItemKey = orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown';\n    if (orientation === 'horizontal' && isRtl) {\n      // swap previousItemKey with nextItemKey\n      previousItemKey = 'ArrowRight';\n      nextItemKey = 'ArrowLeft';\n    }\n    switch (event.key) {\n      case previousItemKey:\n        event.preventDefault();\n        moveFocus(list, currentFocus, previousItem);\n        break;\n      case nextItemKey:\n        event.preventDefault();\n        moveFocus(list, currentFocus, nextItem);\n        break;\n      case 'Home':\n        event.preventDefault();\n        moveFocus(list, null, nextItem);\n        break;\n      case 'End':\n        event.preventDefault();\n        moveFocus(list, null, previousItem);\n        break;\n      default:\n        break;\n    }\n  };\n  const conditionalElements = getConditionalElements();\n  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(TabsRoot, (0,_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_1__[\"default\"])({\n    className: (0,clsx__WEBPACK_IMPORTED_MODULE_4__[\"default\"])(classes.root, className),\n    ownerState: ownerState,\n    ref: ref,\n    as: component\n  }, other, {\n    children: [conditionalElements.scrollButtonStart, conditionalElements.scrollbarSizeListener, /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(TabsScroller, {\n      className: classes.scroller,\n      ownerState: ownerState,\n      style: {\n        overflow: scrollerStyle.overflow,\n        [vertical ? `margin${isRtl ? 'Left' : 'Right'}` : 'marginBottom']: visibleScrollbar ? undefined : -scrollerStyle.scrollbarWidth\n      },\n      ref: tabsRef,\n      onScroll: handleTabsScroll,\n      children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(FlexContainer, {\n        \"aria-label\": ariaLabel,\n        \"aria-labelledby\": ariaLabelledBy,\n        \"aria-orientation\": orientation === 'vertical' ? 'vertical' : null,\n        className: classes.flexContainer,\n        ownerState: ownerState,\n        onKeyDown: handleKeyDown,\n        ref: tabListRef,\n        role: \"tablist\",\n        children: children\n      }), mounted && indicator]\n    }), conditionalElements.scrollButtonEnd]\n  }));\n});\n true ? Tabs.propTypes /* remove-proptypes */ = {\n  // ----------------------------- Warning --------------------------------\n  // | These PropTypes are generated from the TypeScript type definitions |\n  // |     To update them edit the d.ts file and run \"yarn proptypes\"     |\n  // ----------------------------------------------------------------------\n  /**\n   * Callback fired when the component mounts.\n   * This is useful when you want to trigger an action programmatically.\n   * It supports two actions: `updateIndicator()` and `updateScrollButtons()`\n   *\n   * @param {object} actions This object contains all possible actions\n   * that can be triggered programmatically.\n   */\n  action: _mui_utils__WEBPACK_IMPORTED_MODULE_20__[\"default\"],\n  /**\n   * If `true`, the scroll buttons aren't forced hidden on mobile.\n   * By default the scroll buttons are hidden on mobile and takes precedence over `scrollButtons`.\n   * @default false\n   */\n  allowScrollButtonsMobile: (prop_types__WEBPACK_IMPORTED_MODULE_21___default().bool),\n  /**\n   * The label for the Tabs as a string.\n   */\n  'aria-label': (prop_types__WEBPACK_IMPORTED_MODULE_21___default().string),\n  /**\n   * An id or list of ids separated by a space that label the Tabs.\n   */\n  'aria-labelledby': (prop_types__WEBPACK_IMPORTED_MODULE_21___default().string),\n  /**\n   * If `true`, the tabs are centered.\n   * This prop is intended for large views.\n   * @default false\n   */\n  centered: (prop_types__WEBPACK_IMPORTED_MODULE_21___default().bool),\n  /**\n   * The content of the component.\n   */\n  children: (prop_types__WEBPACK_IMPORTED_MODULE_21___default().node),\n  /**\n   * Override or extend the styles applied to the component.\n   */\n  classes: (prop_types__WEBPACK_IMPORTED_MODULE_21___default().object),\n  /**\n   * @ignore\n   */\n  className: (prop_types__WEBPACK_IMPORTED_MODULE_21___default().string),\n  /**\n   * The component used for the root node.\n   * Either a string to use a HTML element or a component.\n   */\n  component: (prop_types__WEBPACK_IMPORTED_MODULE_21___default().elementType),\n  /**\n   * Determines the color of the indicator.\n   * @default 'primary'\n   */\n  indicatorColor: prop_types__WEBPACK_IMPORTED_MODULE_21___default().oneOfType([prop_types__WEBPACK_IMPORTED_MODULE_21___default().oneOf(['primary', 'secondary']), (prop_types__WEBPACK_IMPORTED_MODULE_21___default().string)]),\n  /**\n   * Callback fired when the value changes.\n   *\n   * @param {React.SyntheticEvent} event The event source of the callback. **Warning**: This is a generic event not a change event.\n   * @param {any} value We default to the index of the child (number)\n   */\n  onChange: (prop_types__WEBPACK_IMPORTED_MODULE_21___default().func),\n  /**\n   * The component orientation (layout flow direction).\n   * @default 'horizontal'\n   */\n  orientation: prop_types__WEBPACK_IMPORTED_MODULE_21___default().oneOf(['horizontal', 'vertical']),\n  /**\n   * The component used to render the scroll buttons.\n   * @default TabScrollButton\n   */\n  ScrollButtonComponent: (prop_types__WEBPACK_IMPORTED_MODULE_21___default().elementType),\n  /**\n   * Determine behavior of scroll buttons when tabs are set to scroll:\n   *\n   * - `auto` will only present them when not all the items are visible.\n   * - `true` will always present them.\n   * - `false` will never present them.\n   *\n   * By default the scroll buttons are hidden on mobile.\n   * This behavior can be disabled with `allowScrollButtonsMobile`.\n   * @default 'auto'\n   */\n  scrollButtons: prop_types__WEBPACK_IMPORTED_MODULE_21___default().oneOf(['auto', false, true]),\n  /**\n   * If `true` the selected tab changes on focus. Otherwise it only\n   * changes on activation.\n   */\n  selectionFollowsFocus: (prop_types__WEBPACK_IMPORTED_MODULE_21___default().bool),\n  /**\n   * The extra props for the slot components.\n   * You can override the existing props or add new ones.\n   * @default {}\n   */\n  slotProps: prop_types__WEBPACK_IMPORTED_MODULE_21___default().shape({\n    endScrollButtonIcon: prop_types__WEBPACK_IMPORTED_MODULE_21___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_21___default().func), (prop_types__WEBPACK_IMPORTED_MODULE_21___default().object)]),\n    startScrollButtonIcon: prop_types__WEBPACK_IMPORTED_MODULE_21___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_21___default().func), (prop_types__WEBPACK_IMPORTED_MODULE_21___default().object)])\n  }),\n  /**\n   * The components used for each slot inside.\n   * @default {}\n   */\n  slots: prop_types__WEBPACK_IMPORTED_MODULE_21___default().shape({\n    EndScrollButtonIcon: (prop_types__WEBPACK_IMPORTED_MODULE_21___default().elementType),\n    StartScrollButtonIcon: (prop_types__WEBPACK_IMPORTED_MODULE_21___default().elementType)\n  }),\n  /**\n   * The system prop that allows defining system overrides as well as additional CSS styles.\n   */\n  sx: prop_types__WEBPACK_IMPORTED_MODULE_21___default().oneOfType([prop_types__WEBPACK_IMPORTED_MODULE_21___default().arrayOf(prop_types__WEBPACK_IMPORTED_MODULE_21___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_21___default().func), (prop_types__WEBPACK_IMPORTED_MODULE_21___default().object), (prop_types__WEBPACK_IMPORTED_MODULE_21___default().bool)])), (prop_types__WEBPACK_IMPORTED_MODULE_21___default().func), (prop_types__WEBPACK_IMPORTED_MODULE_21___default().object)]),\n  /**\n   * Props applied to the tab indicator element.\n   * @default  {}\n   */\n  TabIndicatorProps: (prop_types__WEBPACK_IMPORTED_MODULE_21___default().object),\n  /**\n   * Props applied to the [`TabScrollButton`](/material-ui/api/tab-scroll-button/) element.\n   * @default {}\n   */\n  TabScrollButtonProps: (prop_types__WEBPACK_IMPORTED_MODULE_21___default().object),\n  /**\n   * Determines the color of the `Tab`.\n   * @default 'primary'\n   */\n  textColor: prop_types__WEBPACK_IMPORTED_MODULE_21___default().oneOf(['inherit', 'primary', 'secondary']),\n  /**\n   * The value of the currently selected `Tab`.\n   * If you don't want any selected `Tab`, you can set this prop to `false`.\n   */\n  value: (prop_types__WEBPACK_IMPORTED_MODULE_21___default().any),\n  /**\n   * Determines additional display behavior of the tabs:\n   *\n   *  - `scrollable` will invoke scrolling properties and allow for horizontally\n   *  scrolling (or swiping) of the tab bar.\n   *  -`fullWidth` will make the tabs grow to use all the available space,\n   *  which should be used for small views, like on mobile.\n   *  - `standard` will render the default state.\n   * @default 'standard'\n   */\n  variant: prop_types__WEBPACK_IMPORTED_MODULE_21___default().oneOf(['fullWidth', 'scrollable', 'standard']),\n  /**\n   * If `true`, the scrollbar is visible. It can be useful when displaying\n   * a long vertical list of tabs.\n   * @default false\n   */\n  visibleScrollbar: (prop_types__WEBPACK_IMPORTED_MODULE_21___default().bool)\n} : 0;\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Tabs);\n\n//# sourceURL=webpack://muibasic_starterkit/./node_modules/@mui/material/Tabs/Tabs.js?");
+
+/***/ }),
+
+/***/ "./node_modules/@mui/material/Tabs/tabsClasses.js":
+/*!********************************************************!*\
+  !*** ./node_modules/@mui/material/Tabs/tabsClasses.js ***!
+  \********************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__),\n/* harmony export */   getTabsUtilityClass: () => (/* binding */ getTabsUtilityClass)\n/* harmony export */ });\n/* harmony import */ var _mui_utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @mui/utils */ \"./node_modules/@mui/utils/esm/generateUtilityClasses/generateUtilityClasses.js\");\n/* harmony import */ var _generateUtilityClass__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../generateUtilityClass */ \"./node_modules/@mui/utils/esm/generateUtilityClass/generateUtilityClass.js\");\n\n\nfunction getTabsUtilityClass(slot) {\n  return (0,_generateUtilityClass__WEBPACK_IMPORTED_MODULE_0__[\"default\"])('MuiTabs', slot);\n}\nconst tabsClasses = (0,_mui_utils__WEBPACK_IMPORTED_MODULE_1__[\"default\"])('MuiTabs', ['root', 'vertical', 'flexContainer', 'flexContainerVertical', 'centered', 'scroller', 'fixed', 'scrollableX', 'scrollableY', 'hideScrollbar', 'scrollButtons', 'scrollButtonsHideMobile', 'indicator']);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (tabsClasses);\n\n//# sourceURL=webpack://muibasic_starterkit/./node_modules/@mui/material/Tabs/tabsClasses.js?");
+
+/***/ }),
+
 /***/ "./node_modules/@mui/material/TextField/TextField.js":
 /*!***********************************************************!*\
   !*** ./node_modules/@mui/material/TextField/TextField.js ***!
@@ -1230,6 +1318,17 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ }),
+/***/ "./node_modules/@mui/material/internal/animate.js":
+/*!********************************************************!*\
+  !*** ./node_modules/@mui/material/internal/animate.js ***!
+  \********************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ animate)\n/* harmony export */ });\nfunction easeInOutSin(time) {\n  return (1 + Math.sin(Math.PI * time - Math.PI / 2)) / 2;\n}\nfunction animate(property, element, to, options = {}, cb = () => {}) {\n  const {\n    ease = easeInOutSin,\n    duration = 300 // standard\n  } = options;\n  let start = null;\n  const from = element[property];\n  let cancelled = false;\n  const cancel = () => {\n    cancelled = true;\n  };\n  const step = timestamp => {\n    if (cancelled) {\n      cb(new Error('Animation cancelled'));\n      return;\n    }\n    if (start === null) {\n      start = timestamp;\n    }\n    const time = Math.min(1, (timestamp - start) / duration);\n    element[property] = ease(time) * (to - from) + from;\n    if (time >= 1) {\n      requestAnimationFrame(() => {\n        cb(null);\n      });\n      return;\n    }\n    requestAnimationFrame(step);\n  };\n  if (from === to) {\n    cb(new Error('Element already at target position'));\n    return cancel;\n  }\n  requestAnimationFrame(step);\n  return cancel;\n}\n\n//# sourceURL=webpack://muibasic_starterkit/./node_modules/@mui/material/internal/animate.js?");
+
+/***/ }),
+
 /***/ "./node_modules/@mui/material/internal/svg-icons/ArrowDropDown.js":
 /*!************************************************************************!*\
   !*** ./node_modules/@mui/material/internal/svg-icons/ArrowDropDown.js ***!
@@ -1241,6 +1340,28 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ }),
+/***/ "./node_modules/@mui/material/internal/svg-icons/KeyboardArrowLeft.js":
+/*!****************************************************************************!*\
+  !*** ./node_modules/@mui/material/internal/svg-icons/KeyboardArrowLeft.js ***!
+  \****************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _utils_createSvgIcon__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../utils/createSvgIcon */ \"./node_modules/@mui/material/utils/createSvgIcon.js\");\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n\n\n\n/**\n * @ignore - internal component.\n */\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ((0,_utils_createSvgIcon__WEBPACK_IMPORTED_MODULE_2__[\"default\"])( /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(\"path\", {\n  d: \"M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z\"\n}), 'KeyboardArrowLeft'));\n\n//# sourceURL=webpack://muibasic_starterkit/./node_modules/@mui/material/internal/svg-icons/KeyboardArrowLeft.js?");
+
+/***/ }),
+
+/***/ "./node_modules/@mui/material/internal/svg-icons/KeyboardArrowRight.js":
+/*!*****************************************************************************!*\
+  !*** ./node_modules/@mui/material/internal/svg-icons/KeyboardArrowRight.js ***!
+  \*****************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _utils_createSvgIcon__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../utils/createSvgIcon */ \"./node_modules/@mui/material/utils/createSvgIcon.js\");\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n\n\n\n/**\n * @ignore - internal component.\n */\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ((0,_utils_createSvgIcon__WEBPACK_IMPORTED_MODULE_2__[\"default\"])( /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(\"path\", {\n  d: \"M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z\"\n}), 'KeyboardArrowRight'));\n\n//# sourceURL=webpack://muibasic_starterkit/./node_modules/@mui/material/internal/svg-icons/KeyboardArrowRight.js?");
+
+/***/ }),
+
 /***/ "./node_modules/@mui/material/styles/createMixins.js":
 /*!***********************************************************!*\
   !*** ./node_modules/@mui/material/styles/createMixins.js ***!
@@ -1472,6 +1593,17 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ }),
+/***/ "./node_modules/@mui/material/utils/unsupportedProp.js":
+/*!*************************************************************!*\
+  !*** ./node_modules/@mui/material/utils/unsupportedProp.js ***!
+  \*************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _mui_utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @mui/utils */ \"./node_modules/@mui/utils/esm/unsupportedProp.js\");\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_mui_utils__WEBPACK_IMPORTED_MODULE_0__[\"default\"]);\n\n//# sourceURL=webpack://muibasic_starterkit/./node_modules/@mui/material/utils/unsupportedProp.js?");
+
+/***/ }),
+
 /***/ "./node_modules/@mui/material/utils/useControlled.js":
 /*!***********************************************************!*\
   !*** ./node_modules/@mui/material/utils/useControlled.js ***!
@@ -1615,6 +1747,17 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ }),
+/***/ "./node_modules/@mui/system/esm/createBox.js":
+/*!***************************************************!*\
+  !*** ./node_modules/@mui/system/esm/createBox.js ***!
+  \***************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ createBox)\n/* harmony export */ });\n/* harmony import */ var _babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/esm/extends */ \"./node_modules/@babel/runtime/helpers/esm/extends.js\");\n/* harmony import */ var _babel_runtime_helpers_esm_objectWithoutPropertiesLoose__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/esm/objectWithoutPropertiesLoose */ \"./node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! clsx */ \"./node_modules/clsx/dist/clsx.m.js\");\n/* harmony import */ var _mui_styled_engine__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @mui/styled-engine */ \"./node_modules/@mui/styled-engine/index.js\");\n/* harmony import */ var _styleFunctionSx__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./styleFunctionSx */ \"./node_modules/@mui/system/esm/styleFunctionSx/styleFunctionSx.js\");\n/* harmony import */ var _styleFunctionSx__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./styleFunctionSx */ \"./node_modules/@mui/system/esm/styleFunctionSx/extendSxProp.js\");\n/* harmony import */ var _useTheme__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./useTheme */ \"./node_modules/@mui/system/esm/useTheme.js\");\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n\n\nconst _excluded = [\"className\", \"component\"];\n\n\n\n\n\n\nfunction createBox(options = {}) {\n  const {\n    themeId,\n    defaultTheme,\n    defaultClassName = 'MuiBox-root',\n    generateClassName\n  } = options;\n  const BoxRoot = (0,_mui_styled_engine__WEBPACK_IMPORTED_MODULE_5__[\"default\"])('div', {\n    shouldForwardProp: prop => prop !== 'theme' && prop !== 'sx' && prop !== 'as'\n  })(_styleFunctionSx__WEBPACK_IMPORTED_MODULE_6__[\"default\"]);\n  const Box = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__.forwardRef(function Box(inProps, ref) {\n    const theme = (0,_useTheme__WEBPACK_IMPORTED_MODULE_7__[\"default\"])(defaultTheme);\n    const _extendSxProp = (0,_styleFunctionSx__WEBPACK_IMPORTED_MODULE_8__[\"default\"])(inProps),\n      {\n        className,\n        component = 'div'\n      } = _extendSxProp,\n      other = (0,_babel_runtime_helpers_esm_objectWithoutPropertiesLoose__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(_extendSxProp, _excluded);\n    return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(BoxRoot, (0,_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_0__[\"default\"])({\n      as: component,\n      ref: ref,\n      className: (0,clsx__WEBPACK_IMPORTED_MODULE_3__[\"default\"])(className, generateClassName ? generateClassName(defaultClassName) : defaultClassName),\n      theme: themeId ? theme[themeId] || theme : theme\n    }, other));\n  });\n  return Box;\n}\n\n//# sourceURL=webpack://muibasic_starterkit/./node_modules/@mui/system/esm/createBox.js?");
+
+/***/ }),
+
 /***/ "./node_modules/@mui/system/esm/createStyled.js":
 /*!******************************************************!*\
   !*** ./node_modules/@mui/system/esm/createStyled.js ***!
@@ -2077,6 +2220,17 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ }),
+/***/ "./node_modules/@mui/utils/esm/scrollLeft.js":
+/*!***************************************************!*\
+  !*** ./node_modules/@mui/utils/esm/scrollLeft.js ***!
+  \***************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   detectScrollType: () => (/* binding */ detectScrollType),\n/* harmony export */   getNormalizedScrollLeft: () => (/* binding */ getNormalizedScrollLeft)\n/* harmony export */ });\n// Source from https://github.com/alitaheri/normalize-scroll-left\nlet cachedType;\n\n/**\n * Based on the jquery plugin https://github.com/othree/jquery.rtl-scroll-type\n *\n * Types of scrollLeft, assuming scrollWidth=100 and direction is rtl.\n *\n * Type             | <- Most Left | Most Right -> | Initial\n * ---------------- | ------------ | ------------- | -------\n * default          | 0            | 100           | 100\n * negative (spec*) | -100         | 0             | 0\n * reverse          | 100          | 0             | 0\n *\n * Edge 85: default\n * Safari 14: negative\n * Chrome 85: negative\n * Firefox 81: negative\n * IE11: reverse\n *\n * spec* https://drafts.csswg.org/cssom-view/#dom-window-scroll\n */\nfunction detectScrollType() {\n  if (cachedType) {\n    return cachedType;\n  }\n  const dummy = document.createElement('div');\n  const container = document.createElement('div');\n  container.style.width = '10px';\n  container.style.height = '1px';\n  dummy.appendChild(container);\n  dummy.dir = 'rtl';\n  dummy.style.fontSize = '14px';\n  dummy.style.width = '4px';\n  dummy.style.height = '1px';\n  dummy.style.position = 'absolute';\n  dummy.style.top = '-1000px';\n  dummy.style.overflow = 'scroll';\n  document.body.appendChild(dummy);\n  cachedType = 'reverse';\n  if (dummy.scrollLeft > 0) {\n    cachedType = 'default';\n  } else {\n    dummy.scrollLeft = 1;\n    if (dummy.scrollLeft === 0) {\n      cachedType = 'negative';\n    }\n  }\n  document.body.removeChild(dummy);\n  return cachedType;\n}\n\n// Based on https://stackoverflow.com/a/24394376\nfunction getNormalizedScrollLeft(element, direction) {\n  const scrollLeft = element.scrollLeft;\n\n  // Perform the calculations only when direction is rtl to avoid messing up the ltr behavior\n  if (direction !== 'rtl') {\n    return scrollLeft;\n  }\n  const type = detectScrollType();\n  switch (type) {\n    case 'negative':\n      return element.scrollWidth - element.clientWidth + scrollLeft;\n    case 'reverse':\n      return element.scrollWidth - element.clientWidth - scrollLeft;\n    default:\n      return scrollLeft;\n  }\n}\n\n//# sourceURL=webpack://muibasic_starterkit/./node_modules/@mui/utils/esm/scrollLeft.js?");
+
+/***/ }),
+
 /***/ "./node_modules/@mui/utils/esm/setRef.js":
 /*!***********************************************!*\
   !*** ./node_modules/@mui/utils/esm/setRef.js ***!
@@ -2088,6 +2242,17 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ }),
+/***/ "./node_modules/@mui/utils/esm/unsupportedProp.js":
+/*!********************************************************!*\
+  !*** ./node_modules/@mui/utils/esm/unsupportedProp.js ***!
+  \********************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ unsupportedProp)\n/* harmony export */ });\nfunction unsupportedProp(props, propName, componentName, location, propFullName) {\n  if (false) {}\n  const propFullNameSafe = propFullName || propName;\n  if (typeof props[propName] !== 'undefined') {\n    return new Error(`The prop \\`${propFullNameSafe}\\` is not supported. Please remove it.`);\n  }\n  return null;\n}\n\n//# sourceURL=webpack://muibasic_starterkit/./node_modules/@mui/utils/esm/unsupportedProp.js?");
+
+/***/ }),
+
 /***/ "./node_modules/@mui/utils/esm/useControlled/useControlled.js":
 /*!********************************************************************!*\
   !*** ./node_modules/@mui/utils/esm/useControlled/useControlled.js ***!
@@ -2161,7 +2326,18 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ App)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/AppBar/AppBar.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Typography/Typography.js\");\n/* harmony import */ var _MusicList__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./MusicList */ \"./src/MusicList.js\");\n/* harmony import */ var _data__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./data */ \"./src/data.js\");\n/* harmony import */ var _SerarchPage__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./SerarchPage */ \"./src/SerarchPage.js\");\n\n\n\n\n\n\n\n\n\nfunction App() {\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n    title: \"Hong seokmin\",\n    position: \"fixed\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n    align: \"center\",\n    variant: \"h3\",\n    color: \"inherit\"\n  }, \"Faverite Music\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n    style: {\n      height: 60,\n      width: '100%'\n    }\n  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_SerarchPage__WEBPACK_IMPORTED_MODULE_3__[\"default\"], null));\n}\n\n//# sourceURL=webpack://muibasic_starterkit/./src/App.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ App)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _MusicList__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./MusicList */ \"./src/MusicList.js\");\n/* harmony import */ var _data__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./data */ \"./src/data.js\");\n/* harmony import */ var _SearchPage__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./SearchPage */ \"./src/SearchPage.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/AppBar/AppBar.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Typography/Typography.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Box/Box.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Tabs/Tabs.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Tab/Tab.js\");\n/* harmony import */ var _Favorites__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./Favorites */ \"./src/Favorites.js\");\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\nfunction _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\nfunction _toPropertyKey(arg) { var key = _toPrimitive(arg, \"string\"); return _typeof(key) === \"symbol\" ? key : String(key); }\nfunction _toPrimitive(input, hint) { if (_typeof(input) !== \"object\" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || \"default\"); if (_typeof(res) !== \"object\") return res; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (hint === \"string\" ? String : Number)(input); }\nfunction _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }\nfunction _nonIterableSpread() { throw new TypeError(\"Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _iterableToArray(iter) { if (typeof Symbol !== \"undefined\" && iter[Symbol.iterator] != null || iter[\"@@iterator\"] != null) return Array.from(iter); }\nfunction _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : \"undefined\" != typeof Symbol && arr[Symbol.iterator] || arr[\"@@iterator\"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i[\"return\"] && (_r = _i[\"return\"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n\n\n\n\n\n\nfunction App() {\n  var _React$useState = react__WEBPACK_IMPORTED_MODULE_0___default().useState(0),\n    _React$useState2 = _slicedToArray(_React$useState, 2),\n    currentTab = _React$useState2[0],\n    setCurrentTab = _React$useState2[1];\n  var _React$useState3 = react__WEBPACK_IMPORTED_MODULE_0___default().useState([]),\n    _React$useState4 = _slicedToArray(_React$useState3, 2),\n    searchResult = _React$useState4[0],\n    setSearchResult = _React$useState4[1];\n  var _React$useState5 = react__WEBPACK_IMPORTED_MODULE_0___default().useState([]),\n    _React$useState6 = _slicedToArray(_React$useState5, 2),\n    favoriteList = _React$useState6[0],\n    setFavoriteList = _React$useState6[1];\n  var _React$useState7 = react__WEBPACK_IMPORTED_MODULE_0___default().useState({}),\n    _React$useState8 = _slicedToArray(_React$useState7, 2),\n    likes = _React$useState8[0],\n    setLikes = _React$useState8[1];\n  var handleTabChange = function handleTabChange(event, newValue) {\n    setCurrentTab(newValue);\n  };\n  var addToFavoriteList = function addToFavoriteList(item) {\n    setFavoriteList(function (prevList) {\n      return [].concat(_toConsumableArray(prevList), [item]);\n    });\n  };\n  var handleLikes = function handleLikes(id) {\n    var updatedLikes = _objectSpread(_objectSpread({}, likes), {}, _defineProperty({}, id, !likes[id]));\n    setLikes(updatedLikes);\n  };\n  var removeFromFavoriteList = function removeFromFavoriteList(id) {\n    setFavoriteList(function (prevList) {\n      return prevList.filter(function (item) {\n        return item.collectionId !== id;\n      });\n    });\n  };\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n    title: \"Hong seokmin\",\n    position: \"fixed\"\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n    align: \"center\",\n    variant: \"h3\",\n    color: \"inherit\"\n  }, \"Hong Seok Min \")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n    style: {\n      height: 60,\n      width: '100%'\n    }\n  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n    sx: {\n      borderBottom: 1,\n      borderColor: 'divider'\n    }\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {\n    value: currentTab,\n    onChange: handleTabChange,\n    \"aria-label\": \"basic tabs\",\n    centered: true\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_9__[\"default\"], {\n    label: \"Search Music\",\n    value: 0\n  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_9__[\"default\"], {\n    label: \"Favorite\",\n    value: 1\n  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_9__[\"default\"], {\n    label: \"More Contents\",\n    value: 2\n  }))), currentTab === 0 && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_SearchPage__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n    list: searchResult,\n    onSearch: setSearchResult,\n    favoriteList: favoriteList,\n    addToFavoriteList: addToFavoriteList,\n    likes: likes,\n    handleLikes: handleLikes\n  }), currentTab === 1 && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Favorites__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n    favoriteList: favoriteList,\n    addToFavoriteList: addToFavoriteList,\n    likes: likes,\n    handleLikes: handleLikes,\n    removeFromFavoriteList: removeFromFavoriteList\n  }), currentTab == 2 && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n    align: \"center\",\n    variant: \"h2\"\n  }, \" Item Three\"));\n}\n\n//# sourceURL=webpack://muibasic_starterkit/./src/App.js?");
+
+/***/ }),
+
+/***/ "./src/Favorites.js":
+/*!**************************!*\
+  !*** ./src/Favorites.js ***!
+  \**************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ Favorites)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Card/Card.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/CardContent/CardContent.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Typography/Typography.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/CardActions/CardActions.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/IconButton/IconButton.js\");\n/* harmony import */ var _mui_icons_material__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @mui/icons-material */ \"./node_modules/@mui/icons-material/esm/Favorite.js\");\n/* harmony import */ var _mui_icons_material__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @mui/icons-material */ \"./node_modules/@mui/icons-material/esm/FavoriteBorder.js\");\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\nfunction _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\nfunction _toPropertyKey(arg) { var key = _toPrimitive(arg, \"string\"); return _typeof(key) === \"symbol\" ? key : String(key); }\nfunction _toPrimitive(input, hint) { if (_typeof(input) !== \"object\" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || \"default\"); if (_typeof(res) !== \"object\") return res; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (hint === \"string\" ? String : Number)(input); }\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : \"undefined\" != typeof Symbol && arr[Symbol.iterator] || arr[\"@@iterator\"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i[\"return\"] && (_r = _i[\"return\"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n\n\n\n\nvar styles = {\n  content: {},\n  layout: {\n    display: 'flex',\n    justifyContent: 'center'\n  },\n  card: {\n    minWidth: 275,\n    maxWidth: 600,\n    marginButtom: \"20pt\",\n    marginLeft: 'auto',\n    marginRight: 'auto'\n  }\n};\nfunction Favorites(_ref) {\n  var favoriteList = _ref.favoriteList,\n    likes = _ref.likes,\n    handleLikes = _ref.handleLikes,\n    removeFromFavoriteList = _ref.removeFromFavoriteList;\n  var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(likes),\n    _useState2 = _slicedToArray(_useState, 2),\n    favoriteLikes = _useState2[0],\n    setFavoriteLikes = _useState2[1];\n  var toggleFavorite = function toggleFavorite(id) {\n    var updatedLikes = _objectSpread(_objectSpread({}, favoriteLikes), {}, _defineProperty({}, id, !favoriteLikes[id]));\n    setFavoriteLikes(updatedLikes);\n    handleLikes(id);\n  };\n  var filteredFavoriteList = favoriteList.filter(function (item) {\n    return favoriteLikes[item.collectionId] === true;\n  });\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", null, filteredFavoriteList.map(function (item) {\n    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n      sx: styles.card,\n      key: item.collectionId\n    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_2__[\"default\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n      variant: \"subtitle1\"\n    }, item.artisName), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n      variant: \"subtitle2\"\n    }, item.collectionCensoredName)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_4__[\"default\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n      onClick: function onClick() {\n        return toggleFavorite(item.collectionId);\n      }\n    }, favoriteLikes[item.collectionId] ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material__WEBPACK_IMPORTED_MODULE_6__[\"default\"], null) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material__WEBPACK_IMPORTED_MODULE_7__[\"default\"], null))));\n  }));\n}\n\n//# sourceURL=webpack://muibasic_starterkit/./src/Favorites.js?");
 /***/ }),
@@ -2172,18 +2348,18 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ MusicList)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Card/Card.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/CardContent/CardContent.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Typography/Typography.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/CardActions/CardActions.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/IconButton/IconButton.js\");\n/* harmony import */ var _mui_icons_material__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @mui/icons-material */ \"./node_modules/@mui/icons-material/esm/Favorite.js\");\n/* harmony import */ var _mui_icons_material__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @mui/icons-material */ \"./node_modules/@mui/icons-material/esm/FavoriteBorder.js\");\n/* harmony import */ var _SnackMsg__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./SnackMsg */ \"./src/SnackMsg.js\");\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\nfunction _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\nfunction _toPropertyKey(arg) { var key = _toPrimitive(arg, \"string\"); return _typeof(key) === \"symbol\" ? key : String(key); }\nfunction _toPrimitive(input, hint) { if (_typeof(input) !== \"object\" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || \"default\"); if (_typeof(res) !== \"object\") return res; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (hint === \"string\" ? String : Number)(input); }\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : \"undefined\" != typeof Symbol && arr[Symbol.iterator] || arr[\"@@iterator\"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i[\"return\"] && (_r = _i[\"return\"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n\n\n\n\nvar styles = {\n  content: {},\n  layout: {\n    display: 'flex',\n    justifyContent: 'center'\n  },\n  card: {\n    minWidth: 275,\n    maxWidth: 600,\n    marginButtom: \"20pt\",\n    marginLeft: 'auto',\n    marginRight: 'auto'\n  }\n};\nfunction MusicList(_ref) {\n  var list = _ref.list;\n  var _React$useState = react__WEBPACK_IMPORTED_MODULE_0___default().useState({}),\n    _React$useState2 = _slicedToArray(_React$useState, 2),\n    likes = _React$useState2[0],\n    setLikes = _React$useState2[1];\n  var _React$useState3 = react__WEBPACK_IMPORTED_MODULE_0___default().useState({\n      open: false,\n      msg: ''\n    }),\n    _React$useState4 = _slicedToArray(_React$useState3, 2),\n    snackState = _React$useState4[0],\n    setSnackState = _React$useState4[1];\n  var toggleFavorite = function toggleFavorite(id) {\n    return function () {\n      setLikes(_objectSpread(_objectSpread({}, likes), {}, _defineProperty({}, id, !likes[id])));\n      setSnackState(_objectSpread(_objectSpread({}, snackState), {}, {\n        open: true,\n        msg: \"\".concat(id, \" is clicked\")\n      }));\n    };\n  };\n  var handleSnackbarClose = function handleSnackbarClose(event, reason) {\n    if (reason === 'clickaway') {\n      return;\n    }\n    setSnackState({\n      open: false,\n      msg: ''\n    });\n  };\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", null, list.results.map(function (item) {\n    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n      sx: styles.card,\n      key: item.collectionId\n    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_3__[\"default\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n      variant: \"subtitle1\"\n    }, \" \", item.artistName), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n      variant: \"subtitle2\"\n    }, \" \", item.collectionCensoredName)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_5__[\"default\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n      onClick: toggleFavorite(item.collectionName)\n    }, likes[item.collectionId] === true ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material__WEBPACK_IMPORTED_MODULE_7__[\"default\"], null) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material__WEBPACK_IMPORTED_MODULE_8__[\"default\"], null))));\n  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_SnackMsg__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n    open: snackState.open,\n    message: snackState.msg,\n    onClose: handleSnackbarClose\n  }));\n}\n\n//# sourceURL=webpack://muibasic_starterkit/./src/MusicList.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ MusicList)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Card/Card.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/CardContent/CardContent.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Typography/Typography.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/CardActions/CardActions.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/IconButton/IconButton.js\");\n/* harmony import */ var _mui_icons_material__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @mui/icons-material */ \"./node_modules/@mui/icons-material/esm/Favorite.js\");\n/* harmony import */ var _mui_icons_material__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @mui/icons-material */ \"./node_modules/@mui/icons-material/esm/FavoriteBorder.js\");\n/* harmony import */ var _SnackMsg__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./SnackMsg */ \"./src/SnackMsg.js\");\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\nfunction _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\nfunction _toPropertyKey(arg) { var key = _toPrimitive(arg, \"string\"); return _typeof(key) === \"symbol\" ? key : String(key); }\nfunction _toPrimitive(input, hint) { if (_typeof(input) !== \"object\" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || \"default\"); if (_typeof(res) !== \"object\") return res; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (hint === \"string\" ? String : Number)(input); }\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : \"undefined\" != typeof Symbol && arr[Symbol.iterator] || arr[\"@@iterator\"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i[\"return\"] && (_r = _i[\"return\"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n\n\n\n\nvar styles = {\n  content: {},\n  layout: {\n    display: 'flex',\n    justifyContent: 'center'\n  },\n  card: {\n    minWidth: 275,\n    maxWidth: 600,\n    marginButtom: \"20pt\",\n    marginLeft: 'auto',\n    marginRight: 'auto'\n  }\n};\nfunction MusicList(_ref) {\n  var list = _ref.list,\n    favoriteList = _ref.favoriteList,\n    addToFavoriteList = _ref.addToFavoriteList,\n    likes = _ref.likes,\n    handleLikes = _ref.handleLikes;\n  var _React$useState = react__WEBPACK_IMPORTED_MODULE_0___default().useState({\n      open: false,\n      msg: ''\n    }),\n    _React$useState2 = _slicedToArray(_React$useState, 2),\n    snackState = _React$useState2[0],\n    setSnackState = _React$useState2[1];\n  var toggleFavorite = function toggleFavorite(id, name) {\n    return function () {\n      var updatedLikes = _objectSpread(_objectSpread({}, likes), {}, _defineProperty({}, id, !likes[id]));\n      handleLikes(id);\n      setSnackState(_objectSpread(_objectSpread({}, snackState), {}, {\n        open: true,\n        msg: \"\".concat(name, \" is clicked\")\n      }));\n      if (updatedLikes[id]) {\n        if (!favoriteList.find(function (item) {\n          return item.collectionId === id;\n        })) {\n          addToFavoriteList(list.find(function (item) {\n            return item.collectionId === id;\n          }));\n        }\n      } else {\n        var updatedFavoriteList = favoriteList.filter(function (item) {\n          return item.collectionId !== id;\n        });\n        addToFavoriteList(updatedFavoriteList);\n      }\n    };\n  };\n  var handleSnackbarClose = function handleSnackbarClose(event, reason) {\n    if (reason === 'clickaway') {\n      return;\n    }\n    setSnackState({\n      open: false,\n      msg: ''\n    });\n  };\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", null, list.map(function (item) {\n    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n      sx: styles.card,\n      key: item.collectionId\n    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_3__[\"default\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n      variant: \"subtitle1\"\n    }, item.artisName), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n      variant: \"subtitle2\"\n    }, item.collectionCensoredName)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_5__[\"default\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n      onClick: toggleFavorite(item.collectionId, item.collectionName)\n    }, likes[item.collectionId] === true ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material__WEBPACK_IMPORTED_MODULE_7__[\"default\"], null) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material__WEBPACK_IMPORTED_MODULE_8__[\"default\"], null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_SnackMsg__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n      open: snackState.open,\n      message: snackState.msg,\n      onClose: handleSnackbarClose\n    }))));\n  }));\n}\n\n//# sourceURL=webpack://muibasic_starterkit/./src/MusicList.js?");
 /***/ }),
-/***/ "./src/SerarchPage.js":
-/*!****************************!*\
-  !*** ./src/SerarchPage.js ***!
-  \****************************/
+/***/ "./src/SearchPage.js":
+/*!***************************!*\
+  !*** ./src/SearchPage.js ***!
+  \***************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ SearchPage)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/TextField/TextField.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Button/Button.js\");\n/* harmony import */ var _MusicList__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./MusicList */ \"./src/MusicList.js\");\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : \"undefined\" != typeof Symbol && arr[Symbol.iterator] || arr[\"@@iterator\"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i[\"return\"] && (_r = _i[\"return\"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n\n\n\nfunction SearchPage() {\n  var _React$useState = react__WEBPACK_IMPORTED_MODULE_0___default().useState(''),\n    _React$useState2 = _slicedToArray(_React$useState, 2),\n    searchWord = _React$useState2[0],\n    setSearchWord = _React$useState2[1];\n  var _React$useState3 = react__WEBPACK_IMPORTED_MODULE_0___default().useState([]),\n    _React$useState4 = _slicedToArray(_React$useState3, 2),\n    music_list = _React$useState4[0],\n    setMusicList = _React$useState4[1];\n  var handleSearch = function handleSearch(event) {\n    event.preventDefault();\n    console.log(searchWord);\n    setSearchWord('');\n    fetch('http://itunes.apple.com/search?term=${searchWord}&entity=album').then(function (r) {\n      return r.json();\n    }).then(function (r) {\n      console.log(r);\n      setMusicList(r.results);\n      setSearchWord('');\n    })[\"catch\"](function (e) {\n      return console.log('error when search musician');\n    });\n  };\n  var handleSearchTextChange = function handleSearchTextChange(event) {\n    setSearchWord(event.target.value);\n  };\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"form\", {\n    style: {\n      display: 'flex',\n      marginTop: 20,\n      marginbottom: 15\n    }\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n    style: {\n      display: 'flex',\n      marginLeft: 'auto',\n      marginRight: 'auto'\n    }\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n    variant: \"outlined\",\n    label: \"Music Album Search\",\n    type: \"search\",\n    style: {\n      width: 450\n    },\n    onChange: handleSearchTextChange,\n    value: searchWord\n  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n    variant: \"contained\",\n    color: \"primary\",\n    type: \"submit\",\n    onClick: handleSearch,\n    style: {\n      marginLeft: 20\n    }\n  }, \"Search\"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(SearchPage, null));\n}\n\n//# sourceURL=webpack://muibasic_starterkit/./src/SerarchPage.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ SearchPage)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/TextField/TextField.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Button/Button.js\");\n/* harmony import */ var _MusicList__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./MusicList */ \"./src/MusicList.js\");\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : \"undefined\" != typeof Symbol && arr[Symbol.iterator] || arr[\"@@iterator\"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i[\"return\"] && (_r = _i[\"return\"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n\n\n\nfunction SearchPage(_ref) {\n  var list = _ref.list,\n    onSearch = _ref.onSearch,\n    favoriteList = _ref.favoriteList,\n    addToFavoriteList = _ref.addToFavoriteList,\n    likes = _ref.likes,\n    handleLikes = _ref.handleLikes;\n  var _React$useState = react__WEBPACK_IMPORTED_MODULE_0___default().useState(''),\n    _React$useState2 = _slicedToArray(_React$useState, 2),\n    searchWord = _React$useState2[0],\n    setSearchWord = _React$useState2[1];\n  var handleSearch = function handleSearch(event) {\n    event.preventDefault();\n    console.log(searchWord);\n    setSearchWord('');\n    fetch(\"http://itunes.apple.com/search?term=\".concat(searchWord, \"&entity=album\")).then(function (r) {\n      return r.json();\n    }).then(function (r) {\n      console.log(r);\n      onSearch(r.results);\n      setSearchWord('');\n    })[\"catch\"](function (e) {\n      return console.log('error when search musician');\n    });\n  };\n  var handleSearchTextChange = function handleSearchTextChange(event) {\n    setSearchWord(event.target.value);\n  };\n  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"form\", {\n    style: {\n      display: 'flex',\n      marginTop: 20,\n      marginbottom: 15\n    }\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n    style: {\n      display: 'flex',\n      marginLeft: 'auto',\n      marginRight: 'auto'\n    }\n  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n    variant: \"outlined\",\n    label: \"Music Album Search\",\n    type: \"search\",\n    style: {\n      width: 450\n    },\n    onChange: handleSearchTextChange,\n    value: searchWord\n  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n    variant: \"contained\",\n    color: \"primary\",\n    type: \"submit\",\n    onClick: handleSearch,\n    style: {\n      marginLeft: 20\n    }\n  }, \"Search\"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MusicList__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n    list: list,\n    favoriteList: favoriteList,\n    addToFavoriteList: addToFavoriteList,\n    likes: likes,\n    handleLikes: handleLikes\n  }));\n}\n\n//# sourceURL=webpack://muibasic_starterkit/./src/SearchPage.js?");
 /***/ }),
@@ -2757,7 +2933,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /******/ 	
 /******/ 	/* webpack/runtime/getFullHash */
 /******/ 	(() => {
-/******/ 		__webpack_require__.h = () => ("68ef734357bb8d4c0dfd")
+/******/ 		__webpack_require__.h = () => ("d0344dfe4da5fabb89a6")
 /******/ 	})();
 /******/ 	
 /******/ 	/* webpack/runtime/global */