{"version":3,"file":"js/main.bundle.faf24bcf99f52235769c.js","mappings":";;;;;;;;;;;;;;;;AA0CA;;;;;;;;;;;;;;;AAgBA;;;;;;;;;;;;;;;AA8BA;AA4EA;AACA;;AA+BA;AACA;;AAgCA;AACA;;;;;;;;ACvMA;;;;;;;;;;;;;;;AA8BA;AAqBA;AACA;AA+BA;AACA;;;;;;;;;;ACjFA;;;;;;;;AASA;;;;;;;;;;;;AAaA;;;;AAwBA;;;AAGA;AACA;AACA;;;AAGA;AACA;;;AAGA;;;;;;;;;AASA;;AAEA;AACA;AACA;;;AAGA;;;;;AAKA;;AAEA;;;;AAIA","sources":["webpack://personal-studio/./node_modules/@mui/material/LinearProgress/LinearProgress.js","webpack://personal-studio/./node_modules/@mui/material/CircularProgress/CircularProgress.js","webpack://personal-studio/./node_modules/@mui/material/ButtonBase/TouchRipple.js"],"sourcesContent":["'use client';\n\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nconst _excluded = [\"className\", \"color\", \"value\", \"valueBuffer\", \"variant\"];\nlet _ = t => t,\n  _t,\n  _t2,\n  _t3,\n  _t4,\n  _t5,\n  _t6;\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport composeClasses from '@mui/utils/composeClasses';\nimport { keyframes, css } from '@mui/system';\nimport { darken, lighten } from '@mui/system/colorManipulator';\nimport { useRtl } from '@mui/system/RtlProvider';\nimport capitalize from '../utils/capitalize';\nimport styled from '../styles/styled';\nimport { useDefaultProps } from '../DefaultPropsProvider';\nimport { getLinearProgressUtilityClass } from './linearProgressClasses';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nconst TRANSITION_DURATION = 4; // seconds\nconst indeterminate1Keyframe = keyframes(_t || (_t = _`\n  0% {\n    left: -35%;\n    right: 100%;\n  }\n\n  60% {\n    left: 100%;\n    right: -90%;\n  }\n\n  100% {\n    left: 100%;\n    right: -90%;\n  }\n`));\nconst indeterminate2Keyframe = keyframes(_t2 || (_t2 = _`\n  0% {\n    left: -200%;\n    right: 100%;\n  }\n\n  60% {\n    left: 107%;\n    right: -8%;\n  }\n\n  100% {\n    left: 107%;\n    right: -8%;\n  }\n`));\nconst bufferKeyframe = keyframes(_t3 || (_t3 = _`\n  0% {\n    opacity: 1;\n    background-position: 0 -23px;\n  }\n\n  60% {\n    opacity: 0;\n    background-position: 0 -23px;\n  }\n\n  100% {\n    opacity: 1;\n    background-position: -200px -23px;\n  }\n`));\nconst useUtilityClasses = ownerState => {\n  const {\n    classes,\n    variant,\n    color\n  } = ownerState;\n  const slots = {\n    root: ['root', `color${capitalize(color)}`, variant],\n    dashed: ['dashed', `dashedColor${capitalize(color)}`],\n    bar1: ['bar', `barColor${capitalize(color)}`, (variant === 'indeterminate' || variant === 'query') && 'bar1Indeterminate', variant === 'determinate' && 'bar1Determinate', variant === 'buffer' && 'bar1Buffer'],\n    bar2: ['bar', variant !== 'buffer' && `barColor${capitalize(color)}`, variant === 'buffer' && `color${capitalize(color)}`, (variant === 'indeterminate' || variant === 'query') && 'bar2Indeterminate', variant === 'buffer' && 'bar2Buffer']\n  };\n  return composeClasses(slots, getLinearProgressUtilityClass, classes);\n};\nconst getColorShade = (theme, color) => {\n  if (color === 'inherit') {\n    return 'currentColor';\n  }\n  if (theme.vars) {\n    return theme.vars.palette.LinearProgress[`${color}Bg`];\n  }\n  return theme.palette.mode === 'light' ? lighten(theme.palette[color].main, 0.62) : darken(theme.palette[color].main, 0.5);\n};\nconst LinearProgressRoot = styled('span', {\n  name: 'MuiLinearProgress',\n  slot: 'Root',\n  overridesResolver: (props, styles) => {\n    const {\n      ownerState\n    } = props;\n    return [styles.root, styles[`color${capitalize(ownerState.color)}`], styles[ownerState.variant]];\n  }\n})(({\n  ownerState,\n  theme\n}) => _extends({\n  position: 'relative',\n  overflow: 'hidden',\n  display: 'block',\n  height: 4,\n  zIndex: 0,\n  // Fix Safari's bug during composition of different paint.\n  '@media print': {\n    colorAdjust: 'exact'\n  },\n  backgroundColor: getColorShade(theme, ownerState.color)\n}, ownerState.color === 'inherit' && ownerState.variant !== 'buffer' && {\n  backgroundColor: 'none',\n  '&::before': {\n    content: '\"\"',\n    position: 'absolute',\n    left: 0,\n    top: 0,\n    right: 0,\n    bottom: 0,\n    backgroundColor: 'currentColor',\n    opacity: 0.3\n  }\n}, ownerState.variant === 'buffer' && {\n  backgroundColor: 'transparent'\n}, ownerState.variant === 'query' && {\n  transform: 'rotate(180deg)'\n}));\nconst LinearProgressDashed = styled('span', {\n  name: 'MuiLinearProgress',\n  slot: 'Dashed',\n  overridesResolver: (props, styles) => {\n    const {\n      ownerState\n    } = props;\n    return [styles.dashed, styles[`dashedColor${capitalize(ownerState.color)}`]];\n  }\n})(({\n  ownerState,\n  theme\n}) => {\n  const backgroundColor = getColorShade(theme, ownerState.color);\n  return _extends({\n    position: 'absolute',\n    marginTop: 0,\n    height: '100%',\n    width: '100%'\n  }, ownerState.color === 'inherit' && {\n    opacity: 0.3\n  }, {\n    backgroundImage: `radial-gradient(${backgroundColor} 0%, ${backgroundColor} 16%, transparent 42%)`,\n    backgroundSize: '10px 10px',\n    backgroundPosition: '0 -23px'\n  });\n}, css(_t4 || (_t4 = _`\n    animation: ${0} 3s infinite linear;\n  `), bufferKeyframe));\nconst LinearProgressBar1 = styled('span', {\n  name: 'MuiLinearProgress',\n  slot: 'Bar1',\n  overridesResolver: (props, styles) => {\n    const {\n      ownerState\n    } = props;\n    return [styles.bar, styles[`barColor${capitalize(ownerState.color)}`], (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && styles.bar1Indeterminate, ownerState.variant === 'determinate' && styles.bar1Determinate, ownerState.variant === 'buffer' && styles.bar1Buffer];\n  }\n})(({\n  ownerState,\n  theme\n}) => _extends({\n  width: '100%',\n  position: 'absolute',\n  left: 0,\n  bottom: 0,\n  top: 0,\n  transition: 'transform 0.2s linear',\n  transformOrigin: 'left',\n  backgroundColor: ownerState.color === 'inherit' ? 'currentColor' : (theme.vars || theme).palette[ownerState.color].main\n}, ownerState.variant === 'determinate' && {\n  transition: `transform .${TRANSITION_DURATION}s linear`\n}, ownerState.variant === 'buffer' && {\n  zIndex: 1,\n  transition: `transform .${TRANSITION_DURATION}s linear`\n}), ({\n  ownerState\n}) => (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && css(_t5 || (_t5 = _`\n      width: auto;\n      animation: ${0} 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;\n    `), indeterminate1Keyframe));\nconst LinearProgressBar2 = styled('span', {\n  name: 'MuiLinearProgress',\n  slot: 'Bar2',\n  overridesResolver: (props, styles) => {\n    const {\n      ownerState\n    } = props;\n    return [styles.bar, styles[`barColor${capitalize(ownerState.color)}`], (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && styles.bar2Indeterminate, ownerState.variant === 'buffer' && styles.bar2Buffer];\n  }\n})(({\n  ownerState,\n  theme\n}) => _extends({\n  width: '100%',\n  position: 'absolute',\n  left: 0,\n  bottom: 0,\n  top: 0,\n  transition: 'transform 0.2s linear',\n  transformOrigin: 'left'\n}, ownerState.variant !== 'buffer' && {\n  backgroundColor: ownerState.color === 'inherit' ? 'currentColor' : (theme.vars || theme).palette[ownerState.color].main\n}, ownerState.color === 'inherit' && {\n  opacity: 0.3\n}, ownerState.variant === 'buffer' && {\n  backgroundColor: getColorShade(theme, ownerState.color),\n  transition: `transform .${TRANSITION_DURATION}s linear`\n}), ({\n  ownerState\n}) => (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && css(_t6 || (_t6 = _`\n      width: auto;\n      animation: ${0} 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite;\n    `), indeterminate2Keyframe));\n\n/**\n * ## ARIA\n *\n * If the progress bar is describing the loading progress of a particular region of a page,\n * you should use `aria-describedby` to point to the progress bar, and set the `aria-busy`\n * attribute to `true` on that region until it has finished loading.\n */\nconst LinearProgress = /*#__PURE__*/React.forwardRef(function LinearProgress(inProps, ref) {\n  const props = useDefaultProps({\n    props: inProps,\n    name: 'MuiLinearProgress'\n  });\n  const {\n      className,\n      color = 'primary',\n      value,\n      valueBuffer,\n      variant = 'indeterminate'\n    } = props,\n    other = _objectWithoutPropertiesLoose(props, _excluded);\n  const ownerState = _extends({}, props, {\n    color,\n    variant\n  });\n  const classes = useUtilityClasses(ownerState);\n  const isRtl = useRtl();\n  const rootProps = {};\n  const inlineStyles = {\n    bar1: {},\n    bar2: {}\n  };\n  if (variant === 'determinate' || variant === 'buffer') {\n    if (value !== undefined) {\n      rootProps['aria-valuenow'] = Math.round(value);\n      rootProps['aria-valuemin'] = 0;\n      rootProps['aria-valuemax'] = 100;\n      let transform = value - 100;\n      if (isRtl) {\n        transform = -transform;\n      }\n      inlineStyles.bar1.transform = `translateX(${transform}%)`;\n    } else if (process.env.NODE_ENV !== 'production') {\n      console.error('MUI: You need to provide a value prop ' + 'when using the determinate or buffer variant of LinearProgress .');\n    }\n  }\n  if (variant === 'buffer') {\n    if (valueBuffer !== undefined) {\n      let transform = (valueBuffer || 0) - 100;\n      if (isRtl) {\n        transform = -transform;\n      }\n      inlineStyles.bar2.transform = `translateX(${transform}%)`;\n    } else if (process.env.NODE_ENV !== 'production') {\n      console.error('MUI: You need to provide a valueBuffer prop ' + 'when using the buffer variant of LinearProgress.');\n    }\n  }\n  return /*#__PURE__*/_jsxs(LinearProgressRoot, _extends({\n    className: clsx(classes.root, className),\n    ownerState: ownerState,\n    role: \"progressbar\"\n  }, rootProps, {\n    ref: ref\n  }, other, {\n    children: [variant === 'buffer' ? /*#__PURE__*/_jsx(LinearProgressDashed, {\n      className: classes.dashed,\n      ownerState: ownerState\n    }) : null, /*#__PURE__*/_jsx(LinearProgressBar1, {\n      className: classes.bar1,\n      ownerState: ownerState,\n      style: inlineStyles.bar1\n    }), variant === 'determinate' ? null : /*#__PURE__*/_jsx(LinearProgressBar2, {\n      className: classes.bar2,\n      ownerState: ownerState,\n      style: inlineStyles.bar2\n    })]\n  }));\n});\nprocess.env.NODE_ENV !== \"production\" ? LinearProgress.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 `pnpm proptypes`.     │\n  // └─────────────────────────────────────────────────────────────────────┘\n  /**\n   * Override or extend the styles applied to the component.\n   */\n  classes: PropTypes.object,\n  /**\n   * @ignore\n   */\n  className: PropTypes.string,\n  /**\n   * The color of the component.\n   * It supports both default and custom theme colors, which can be added as shown in the\n   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).\n   * @default 'primary'\n   */\n  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['inherit', 'primary', 'secondary']), PropTypes.string]),\n  /**\n   * The system prop that allows defining system overrides as well as additional CSS styles.\n   */\n  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),\n  /**\n   * The value of the progress indicator for the determinate and buffer variants.\n   * Value between 0 and 100.\n   */\n  value: PropTypes.number,\n  /**\n   * The value for the buffer variant.\n   * Value between 0 and 100.\n   */\n  valueBuffer: PropTypes.number,\n  /**\n   * The variant to use.\n   * Use indeterminate or query when there is no progress value.\n   * @default 'indeterminate'\n   */\n  variant: PropTypes.oneOf(['buffer', 'determinate', 'indeterminate', 'query'])\n} : void 0;\nexport default LinearProgress;","'use client';\n\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nconst _excluded = [\"className\", \"color\", \"disableShrink\", \"size\", \"style\", \"thickness\", \"value\", \"variant\"];\nlet _ = t => t,\n  _t,\n  _t2,\n  _t3,\n  _t4;\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport chainPropTypes from '@mui/utils/chainPropTypes';\nimport composeClasses from '@mui/utils/composeClasses';\nimport { keyframes, css } from '@mui/system';\nimport capitalize from '../utils/capitalize';\nimport { useDefaultProps } from '../DefaultPropsProvider';\nimport styled from '../styles/styled';\nimport { getCircularProgressUtilityClass } from './circularProgressClasses';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst SIZE = 44;\nconst circularRotateKeyframe = keyframes(_t || (_t = _`\n  0% {\n    transform: rotate(0deg);\n  }\n\n  100% {\n    transform: rotate(360deg);\n  }\n`));\nconst circularDashKeyframe = keyframes(_t2 || (_t2 = _`\n  0% {\n    stroke-dasharray: 1px, 200px;\n    stroke-dashoffset: 0;\n  }\n\n  50% {\n    stroke-dasharray: 100px, 200px;\n    stroke-dashoffset: -15px;\n  }\n\n  100% {\n    stroke-dasharray: 100px, 200px;\n    stroke-dashoffset: -125px;\n  }\n`));\nconst useUtilityClasses = ownerState => {\n  const {\n    classes,\n    variant,\n    color,\n    disableShrink\n  } = ownerState;\n  const slots = {\n    root: ['root', variant, `color${capitalize(color)}`],\n    svg: ['svg'],\n    circle: ['circle', `circle${capitalize(variant)}`, disableShrink && 'circleDisableShrink']\n  };\n  return composeClasses(slots, getCircularProgressUtilityClass, classes);\n};\nconst CircularProgressRoot = styled('span', {\n  name: 'MuiCircularProgress',\n  slot: 'Root',\n  overridesResolver: (props, styles) => {\n    const {\n      ownerState\n    } = props;\n    return [styles.root, styles[ownerState.variant], styles[`color${capitalize(ownerState.color)}`]];\n  }\n})(({\n  ownerState,\n  theme\n}) => _extends({\n  display: 'inline-block'\n}, ownerState.variant === 'determinate' && {\n  transition: theme.transitions.create('transform')\n}, ownerState.color !== 'inherit' && {\n  color: (theme.vars || theme).palette[ownerState.color].main\n}), ({\n  ownerState\n}) => ownerState.variant === 'indeterminate' && css(_t3 || (_t3 = _`\n      animation: ${0} 1.4s linear infinite;\n    `), circularRotateKeyframe));\nconst CircularProgressSVG = styled('svg', {\n  name: 'MuiCircularProgress',\n  slot: 'Svg',\n  overridesResolver: (props, styles) => styles.svg\n})({\n  display: 'block' // Keeps the progress centered\n});\nconst CircularProgressCircle = styled('circle', {\n  name: 'MuiCircularProgress',\n  slot: 'Circle',\n  overridesResolver: (props, styles) => {\n    const {\n      ownerState\n    } = props;\n    return [styles.circle, styles[`circle${capitalize(ownerState.variant)}`], ownerState.disableShrink && styles.circleDisableShrink];\n  }\n})(({\n  ownerState,\n  theme\n}) => _extends({\n  stroke: 'currentColor'\n}, ownerState.variant === 'determinate' && {\n  transition: theme.transitions.create('stroke-dashoffset')\n}, ownerState.variant === 'indeterminate' && {\n  // Some default value that looks fine waiting for the animation to kicks in.\n  strokeDasharray: '80px, 200px',\n  strokeDashoffset: 0 // Add the unit to fix a Edge 16 and below bug.\n}), ({\n  ownerState\n}) => ownerState.variant === 'indeterminate' && !ownerState.disableShrink && css(_t4 || (_t4 = _`\n      animation: ${0} 1.4s ease-in-out infinite;\n    `), circularDashKeyframe));\n\n/**\n * ## ARIA\n *\n * If the progress bar is describing the loading progress of a particular region of a page,\n * you should use `aria-describedby` to point to the progress bar, and set the `aria-busy`\n * attribute to `true` on that region until it has finished loading.\n */\nconst CircularProgress = /*#__PURE__*/React.forwardRef(function CircularProgress(inProps, ref) {\n  const props = useDefaultProps({\n    props: inProps,\n    name: 'MuiCircularProgress'\n  });\n  const {\n      className,\n      color = 'primary',\n      disableShrink = false,\n      size = 40,\n      style,\n      thickness = 3.6,\n      value = 0,\n      variant = 'indeterminate'\n    } = props,\n    other = _objectWithoutPropertiesLoose(props, _excluded);\n  const ownerState = _extends({}, props, {\n    color,\n    disableShrink,\n    size,\n    thickness,\n    value,\n    variant\n  });\n  const classes = useUtilityClasses(ownerState);\n  const circleStyle = {};\n  const rootStyle = {};\n  const rootProps = {};\n  if (variant === 'determinate') {\n    const circumference = 2 * Math.PI * ((SIZE - thickness) / 2);\n    circleStyle.strokeDasharray = circumference.toFixed(3);\n    rootProps['aria-valuenow'] = Math.round(value);\n    circleStyle.strokeDashoffset = `${((100 - value) / 100 * circumference).toFixed(3)}px`;\n    rootStyle.transform = 'rotate(-90deg)';\n  }\n  return /*#__PURE__*/_jsx(CircularProgressRoot, _extends({\n    className: clsx(classes.root, className),\n    style: _extends({\n      width: size,\n      height: size\n    }, rootStyle, style),\n    ownerState: ownerState,\n    ref: ref,\n    role: \"progressbar\"\n  }, rootProps, other, {\n    children: /*#__PURE__*/_jsx(CircularProgressSVG, {\n      className: classes.svg,\n      ownerState: ownerState,\n      viewBox: `${SIZE / 2} ${SIZE / 2} ${SIZE} ${SIZE}`,\n      children: /*#__PURE__*/_jsx(CircularProgressCircle, {\n        className: classes.circle,\n        style: circleStyle,\n        ownerState: ownerState,\n        cx: SIZE,\n        cy: SIZE,\n        r: (SIZE - thickness) / 2,\n        fill: \"none\",\n        strokeWidth: thickness\n      })\n    })\n  }));\n});\nprocess.env.NODE_ENV !== \"production\" ? CircularProgress.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 `pnpm proptypes`.     │\n  // └─────────────────────────────────────────────────────────────────────┘\n  /**\n   * Override or extend the styles applied to the component.\n   */\n  classes: PropTypes.object,\n  /**\n   * @ignore\n   */\n  className: PropTypes.string,\n  /**\n   * The color of the component.\n   * It supports both default and custom theme colors, which can be added as shown in the\n   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).\n   * @default 'primary'\n   */\n  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['inherit', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),\n  /**\n   * If `true`, the shrink animation is disabled.\n   * This only works if variant is `indeterminate`.\n   * @default false\n   */\n  disableShrink: chainPropTypes(PropTypes.bool, props => {\n    if (props.disableShrink && props.variant && props.variant !== 'indeterminate') {\n      return new Error('MUI: You have provided the `disableShrink` prop ' + 'with a variant other than `indeterminate`. This will have no effect.');\n    }\n    return null;\n  }),\n  /**\n   * The size of the component.\n   * If using a number, the pixel unit is assumed.\n   * If using a string, you need to provide the CSS unit, for example '3rem'.\n   * @default 40\n   */\n  size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n  /**\n   * @ignore\n   */\n  style: PropTypes.object,\n  /**\n   * The system prop that allows defining system overrides as well as additional CSS styles.\n   */\n  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),\n  /**\n   * The thickness of the circle.\n   * @default 3.6\n   */\n  thickness: PropTypes.number,\n  /**\n   * The value of the progress indicator for the determinate variant.\n   * Value between 0 and 100.\n   * @default 0\n   */\n  value: PropTypes.number,\n  /**\n   * The variant to use.\n   * Use indeterminate when there is no progress value.\n   * @default 'indeterminate'\n   */\n  variant: PropTypes.oneOf(['determinate', 'indeterminate'])\n} : void 0;\nexport default CircularProgress;","'use client';\n\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nconst _excluded = [\"center\", \"classes\", \"className\"];\nlet _ = t => t,\n  _t,\n  _t2,\n  _t3,\n  _t4;\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { TransitionGroup } from 'react-transition-group';\nimport clsx from 'clsx';\nimport { keyframes } from '@mui/system';\nimport useTimeout from '@mui/utils/useTimeout';\nimport styled from '../styles/styled';\nimport { useDefaultProps } from '../DefaultPropsProvider';\nimport Ripple from './Ripple';\nimport touchRippleClasses from './touchRippleClasses';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst DURATION = 550;\nexport const DELAY_RIPPLE = 80;\nconst enterKeyframe = keyframes(_t || (_t = _`\n  0% {\n    transform: scale(0);\n    opacity: 0.1;\n  }\n\n  100% {\n    transform: scale(1);\n    opacity: 0.3;\n  }\n`));\nconst exitKeyframe = keyframes(_t2 || (_t2 = _`\n  0% {\n    opacity: 1;\n  }\n\n  100% {\n    opacity: 0;\n  }\n`));\nconst pulsateKeyframe = keyframes(_t3 || (_t3 = _`\n  0% {\n    transform: scale(1);\n  }\n\n  50% {\n    transform: scale(0.92);\n  }\n\n  100% {\n    transform: scale(1);\n  }\n`));\nexport const TouchRippleRoot = styled('span', {\n  name: 'MuiTouchRipple',\n  slot: 'Root'\n})({\n  overflow: 'hidden',\n  pointerEvents: 'none',\n  position: 'absolute',\n  zIndex: 0,\n  top: 0,\n  right: 0,\n  bottom: 0,\n  left: 0,\n  borderRadius: 'inherit'\n});\n\n// This `styled()` function invokes keyframes. `styled-components` only supports keyframes\n// in string templates. Do not convert these styles in JS object as it will break.\nexport const TouchRippleRipple = styled(Ripple, {\n  name: 'MuiTouchRipple',\n  slot: 'Ripple'\n})(_t4 || (_t4 = _`\n  opacity: 0;\n  position: absolute;\n\n  &.${0} {\n    opacity: 0.3;\n    transform: scale(1);\n    animation-name: ${0};\n    animation-duration: ${0}ms;\n    animation-timing-function: ${0};\n  }\n\n  &.${0} {\n    animation-duration: ${0}ms;\n  }\n\n  & .${0} {\n    opacity: 1;\n    display: block;\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    background-color: currentColor;\n  }\n\n  & .${0} {\n    opacity: 0;\n    animation-name: ${0};\n    animation-duration: ${0}ms;\n    animation-timing-function: ${0};\n  }\n\n  & .${0} {\n    position: absolute;\n    /* @noflip */\n    left: 0px;\n    top: 0;\n    animation-name: ${0};\n    animation-duration: 2500ms;\n    animation-timing-function: ${0};\n    animation-iteration-count: infinite;\n    animation-delay: 200ms;\n  }\n`), touchRippleClasses.rippleVisible, enterKeyframe, DURATION, ({\n  theme\n}) => theme.transitions.easing.easeInOut, touchRippleClasses.ripplePulsate, ({\n  theme\n}) => theme.transitions.duration.shorter, touchRippleClasses.child, touchRippleClasses.childLeaving, exitKeyframe, DURATION, ({\n  theme\n}) => theme.transitions.easing.easeInOut, touchRippleClasses.childPulsate, pulsateKeyframe, ({\n  theme\n}) => theme.transitions.easing.easeInOut);\n\n/**\n * @ignore - internal component.\n *\n * TODO v5: Make private\n */\nconst TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps, ref) {\n  const props = useDefaultProps({\n    props: inProps,\n    name: 'MuiTouchRipple'\n  });\n  const {\n      center: centerProp = false,\n      classes = {},\n      className\n    } = props,\n    other = _objectWithoutPropertiesLoose(props, _excluded);\n  const [ripples, setRipples] = React.useState([]);\n  const nextKey = React.useRef(0);\n  const rippleCallback = React.useRef(null);\n  React.useEffect(() => {\n    if (rippleCallback.current) {\n      rippleCallback.current();\n      rippleCallback.current = null;\n    }\n  }, [ripples]);\n\n  // Used to filter out mouse emulated events on mobile.\n  const ignoringMouseDown = React.useRef(false);\n  // We use a timer in order to only show the ripples for touch \"click\" like events.\n  // We don't want to display the ripple for touch scroll events.\n  const startTimer = useTimeout();\n\n  // This is the hook called once the previous timeout is ready.\n  const startTimerCommit = React.useRef(null);\n  const container = React.useRef(null);\n  const startCommit = React.useCallback(params => {\n    const {\n      pulsate,\n      rippleX,\n      rippleY,\n      rippleSize,\n      cb\n    } = params;\n    setRipples(oldRipples => [...oldRipples, /*#__PURE__*/_jsx(TouchRippleRipple, {\n      classes: {\n        ripple: clsx(classes.ripple, touchRippleClasses.ripple),\n        rippleVisible: clsx(classes.rippleVisible, touchRippleClasses.rippleVisible),\n        ripplePulsate: clsx(classes.ripplePulsate, touchRippleClasses.ripplePulsate),\n        child: clsx(classes.child, touchRippleClasses.child),\n        childLeaving: clsx(classes.childLeaving, touchRippleClasses.childLeaving),\n        childPulsate: clsx(classes.childPulsate, touchRippleClasses.childPulsate)\n      },\n      timeout: DURATION,\n      pulsate: pulsate,\n      rippleX: rippleX,\n      rippleY: rippleY,\n      rippleSize: rippleSize\n    }, nextKey.current)]);\n    nextKey.current += 1;\n    rippleCallback.current = cb;\n  }, [classes]);\n  const start = React.useCallback((event = {}, options = {}, cb = () => {}) => {\n    const {\n      pulsate = false,\n      center = centerProp || options.pulsate,\n      fakeElement = false // For test purposes\n    } = options;\n    if ((event == null ? void 0 : event.type) === 'mousedown' && ignoringMouseDown.current) {\n      ignoringMouseDown.current = false;\n      return;\n    }\n    if ((event == null ? void 0 : event.type) === 'touchstart') {\n      ignoringMouseDown.current = true;\n    }\n    const element = fakeElement ? null : container.current;\n    const rect = element ? element.getBoundingClientRect() : {\n      width: 0,\n      height: 0,\n      left: 0,\n      top: 0\n    };\n\n    // Get the size of the ripple\n    let rippleX;\n    let rippleY;\n    let rippleSize;\n    if (center || event === undefined || event.clientX === 0 && event.clientY === 0 || !event.clientX && !event.touches) {\n      rippleX = Math.round(rect.width / 2);\n      rippleY = Math.round(rect.height / 2);\n    } else {\n      const {\n        clientX,\n        clientY\n      } = event.touches && event.touches.length > 0 ? event.touches[0] : event;\n      rippleX = Math.round(clientX - rect.left);\n      rippleY = Math.round(clientY - rect.top);\n    }\n    if (center) {\n      rippleSize = Math.sqrt((2 * rect.width ** 2 + rect.height ** 2) / 3);\n\n      // For some reason the animation is broken on Mobile Chrome if the size is even.\n      if (rippleSize % 2 === 0) {\n        rippleSize += 1;\n      }\n    } else {\n      const sizeX = Math.max(Math.abs((element ? element.clientWidth : 0) - rippleX), rippleX) * 2 + 2;\n      const sizeY = Math.max(Math.abs((element ? element.clientHeight : 0) - rippleY), rippleY) * 2 + 2;\n      rippleSize = Math.sqrt(sizeX ** 2 + sizeY ** 2);\n    }\n\n    // Touche devices\n    if (event != null && event.touches) {\n      // check that this isn't another touchstart due to multitouch\n      // otherwise we will only clear a single timer when unmounting while two\n      // are running\n      if (startTimerCommit.current === null) {\n        // Prepare the ripple effect.\n        startTimerCommit.current = () => {\n          startCommit({\n            pulsate,\n            rippleX,\n            rippleY,\n            rippleSize,\n            cb\n          });\n        };\n        // Delay the execution of the ripple effect.\n        // We have to make a tradeoff with this delay value.\n        startTimer.start(DELAY_RIPPLE, () => {\n          if (startTimerCommit.current) {\n            startTimerCommit.current();\n            startTimerCommit.current = null;\n          }\n        });\n      }\n    } else {\n      startCommit({\n        pulsate,\n        rippleX,\n        rippleY,\n        rippleSize,\n        cb\n      });\n    }\n  }, [centerProp, startCommit, startTimer]);\n  const pulsate = React.useCallback(() => {\n    start({}, {\n      pulsate: true\n    });\n  }, [start]);\n  const stop = React.useCallback((event, cb) => {\n    startTimer.clear();\n\n    // The touch interaction occurs too quickly.\n    // We still want to show ripple effect.\n    if ((event == null ? void 0 : event.type) === 'touchend' && startTimerCommit.current) {\n      startTimerCommit.current();\n      startTimerCommit.current = null;\n      startTimer.start(0, () => {\n        stop(event, cb);\n      });\n      return;\n    }\n    startTimerCommit.current = null;\n    setRipples(oldRipples => {\n      if (oldRipples.length > 0) {\n        return oldRipples.slice(1);\n      }\n      return oldRipples;\n    });\n    rippleCallback.current = cb;\n  }, [startTimer]);\n  React.useImperativeHandle(ref, () => ({\n    pulsate,\n    start,\n    stop\n  }), [pulsate, start, stop]);\n  return /*#__PURE__*/_jsx(TouchRippleRoot, _extends({\n    className: clsx(touchRippleClasses.root, classes.root, className),\n    ref: container\n  }, other, {\n    children: /*#__PURE__*/_jsx(TransitionGroup, {\n      component: null,\n      exit: true,\n      children: ripples\n    })\n  }));\n});\nprocess.env.NODE_ENV !== \"production\" ? TouchRipple.propTypes = {\n  /**\n   * If `true`, the ripple starts at the center of the component\n   * rather than at the point of interaction.\n   */\n  center: PropTypes.bool,\n  /**\n   * Override or extend the styles applied to the component.\n   */\n  classes: PropTypes.object,\n  /**\n   * @ignore\n   */\n  className: PropTypes.string\n} : void 0;\nexport default TouchRipple;"],"names":[],"sourceRoot":""}