{"version":3,"file":"SaferSkin.App.js","mappings":";;;;;;;;;AA+BA;;;;;;;;;;;;;;;AA8BA;AAqBA;AACA;AA+BA;AACA;;;;;;;;;;AClFA;;;;;;;;AASA;;;;;;;;;;;;AAaA;;;;AAwBA;;;AAGA;AACA;AACA;;;AAGA;AACA;;;AAGA;;;;;;;;;AASA;;AAEA;AACA;AACA;;;AAGA;;;;;AAKA;;AAEA;;;;AAIA","sources":["webpack://SaferSkin/./node_modules/@mui/material/CircularProgress/CircularProgress.js","webpack://SaferSkin/./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\", \"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';\nimport { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';\nimport { keyframes, css } from '@mui/system';\nimport capitalize from '../utils/capitalize';\nimport useThemeProps from '../styles/useThemeProps';\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 = useThemeProps({\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 \"yarn 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, e.g. '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 styled from '../styles/styled';\nimport useThemeProps from '../styles/useThemeProps';\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 = useThemeProps({\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 = React.useRef(0);\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  React.useEffect(() => {\n    return () => {\n      if (startTimer.current) {\n        clearTimeout(startTimer.current);\n      }\n    };\n  }, []);\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        startTimer.current = setTimeout(() => {\n          if (startTimerCommit.current) {\n            startTimerCommit.current();\n            startTimerCommit.current = null;\n          }\n        }, DELAY_RIPPLE); // We have to make a tradeoff with this value.\n      }\n    } else {\n      startCommit({\n        pulsate,\n        rippleX,\n        rippleY,\n        rippleSize,\n        cb\n      });\n    }\n  }, [centerProp, startCommit]);\n  const pulsate = React.useCallback(() => {\n    start({}, {\n      pulsate: true\n    });\n  }, [start]);\n  const stop = React.useCallback((event, cb) => {\n    clearTimeout(startTimer.current);\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.current = setTimeout(() => {\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  }, []);\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   * See [CSS API](#css) below for more details.\n   */\n  classes: PropTypes.object,\n  /**\n   * @ignore\n   */\n  className: PropTypes.string\n} : void 0;\nexport default TouchRipple;"],"names":[],"sourceRoot":""}