`.\n // This is UNSAFE TO USE outside of event handers, e.g. in render.\n const hasNativeKeyboardActivation = React.useCallback(() => {\n const root = rootRef.current;\n if (root == null) {\n return nativeButton;\n }\n if (root.tagName === 'BUTTON') {\n return true;\n }\n\n // Although this hook is not intended for links, this check is for\n // backward compatibility with `
` since ButtonBase\n // uses the returned event handlers.\n return Boolean(root.tagName === 'A' && root.href);\n }, [nativeButton]);\n const buttonProps = React.useMemo(() => {\n const resolvedButtonProps = focusableWhenDisabled ? {} : {\n tabIndex: disabled ? -1 : tabIndex\n };\n if (nativeButton) {\n resolvedButtonProps.type = type === undefined && !hasFormAction ? 'button' : type;\n if (!focusableWhenDisabled) {\n resolvedButtonProps.disabled = disabled;\n }\n } else {\n resolvedButtonProps.role = 'button';\n if (!focusableWhenDisabled && disabled) {\n resolvedButtonProps['aria-disabled'] = disabled;\n }\n }\n if (focusableWhenDisabled) {\n return {\n ...resolvedButtonProps,\n ...focusableWhenDisabledProps\n };\n }\n return resolvedButtonProps;\n }, [disabled, focusableWhenDisabled, focusableWhenDisabledProps, hasFormAction, nativeButton, tabIndex, type]);\n const getButtonProps = React.useCallback((externalProps = EMPTY) => {\n const {\n onClick: externalOnClick,\n onKeyDown: externalOnKeyDown,\n onKeyUp: externalOnKeyUp,\n ...otherExternalProps\n } = externalProps;\n const handleClick = event => {\n if (stopEventPropagation) {\n event.stopPropagation();\n }\n if (disabled) {\n event.preventDefault();\n return;\n }\n externalOnClick?.(event);\n };\n const handleKeyDown = event => {\n if (focusableWhenDisabled) {\n focusableWhenDisabledProps.onKeyDown(event);\n }\n if (disabled) {\n return;\n }\n onBeforeKeyDown?.(event);\n externalOnKeyDown?.(event);\n if (event.target !== event.currentTarget || hasNativeKeyboardActivation()) {\n return;\n }\n if (event.key === ' ') {\n event.preventDefault();\n return;\n }\n if (event.key === 'Enter') {\n event.preventDefault();\n event.currentTarget.click();\n }\n };\n const handleKeyUp = event => {\n if (disabled) {\n return;\n }\n onBeforeKeyUp?.(event);\n externalOnKeyUp?.(event);\n if (event.target === event.currentTarget && !hasNativeKeyboardActivation() && event.key === ' ' && !event.defaultPrevented) {\n event.currentTarget.click();\n }\n };\n return {\n ...buttonProps,\n ...otherExternalProps,\n onClick: handleClick,\n onKeyDown: handleKeyDown,\n onKeyUp: handleKeyUp\n };\n }, [buttonProps, disabled, focusableWhenDisabled, focusableWhenDisabledProps, hasNativeKeyboardActivation, onBeforeKeyDown, onBeforeKeyUp, stopEventPropagation]);\n return {\n getButtonProps,\n rootRef\n };\n}","'use client';\n\nimport * as React from 'react';\nimport useLazyRef from '@mui/utils/useLazyRef';\n/**\n * Lazy initialization container for the Ripple instance. This improves\n * performance by delaying mounting the ripple until it's needed.\n */\nexport class LazyRipple {\n /** React ref to the ripple instance */\n\n /** If the ripple component should be mounted */\n\n /** Promise that resolves when the ripple component is mounted */\n\n /** If the ripple component has been mounted */\n\n /** React state hook setter */\n\n static create() {\n return new LazyRipple();\n }\n static use() {\n /* eslint-disable */\n const ripple = useLazyRef(LazyRipple.create).current;\n const [shouldMount, setShouldMount] = React.useState(false);\n ripple.shouldMount = shouldMount;\n ripple.setShouldMount = setShouldMount;\n React.useEffect(ripple.mountEffect, [shouldMount]);\n /* eslint-enable */\n\n return ripple;\n }\n constructor() {\n this.ref = {\n current: null\n };\n this.mounted = null;\n this.didMount = false;\n this.shouldMount = false;\n this.setShouldMount = null;\n }\n mount() {\n if (!this.mounted) {\n this.mounted = createControlledPromise();\n this.shouldMount = true;\n this.setShouldMount(this.shouldMount);\n }\n return this.mounted;\n }\n mountEffect = () => {\n if (this.shouldMount && !this.didMount) {\n if (this.ref.current !== null) {\n this.didMount = true;\n this.mounted.resolve();\n }\n }\n };\n\n /* Ripple API */\n\n start(...args) {\n this.mount().then(() => this.ref.current?.start(...args));\n }\n stop(...args) {\n this.mount().then(() => this.ref.current?.stop(...args));\n }\n pulsate(...args) {\n this.mount().then(() => this.ref.current?.pulsate(...args));\n }\n}\nexport default function useLazyRipple() {\n return LazyRipple.use();\n}\nfunction createControlledPromise() {\n let resolve;\n let reject;\n const p = new Promise((resolveFn, rejectFn) => {\n resolve = resolveFn;\n reject = rejectFn;\n });\n p.resolve = resolve;\n p.reject = reject;\n return p;\n}","'use client';\n\nimport * as React from 'react';\nconst EMPTY = [];\n\n/**\n * A React.useEffect equivalent that runs once, when the component is mounted.\n */\nexport default function useOnMount(fn) {\n // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler -- no need to put `fn` in the dependency array\n /* eslint-disable react-hooks/exhaustive-deps */\n React.useEffect(fn, EMPTY);\n /* eslint-enable react-hooks/exhaustive-deps */\n}","'use client';\n\nimport useLazyRef from \"../useLazyRef/useLazyRef.mjs\";\nimport useOnMount from \"../useOnMount/useOnMount.mjs\";\nexport class Timeout {\n static create() {\n return new Timeout();\n }\n currentId = null;\n\n /**\n * Executes `fn` after `delay`, clearing any previously scheduled call.\n */\n start(delay, fn) {\n this.clear();\n this.currentId = setTimeout(() => {\n this.currentId = null;\n fn();\n }, delay);\n }\n clear = () => {\n if (this.currentId !== null) {\n clearTimeout(this.currentId);\n this.currentId = null;\n }\n };\n disposeEffect = () => {\n return this.clear;\n };\n}\nexport default function useTimeout() {\n const timeout = useLazyRef(Timeout.create).current;\n useOnMount(timeout.disposeEffect);\n return timeout;\n}","'use client';\n\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport useTimeout from '@mui/utils/useTimeout';\n\n/**\n * @ignore - internal component.\n */\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction Ripple(props) {\n const {\n className,\n classes,\n pulsate = false,\n rippleX,\n rippleY,\n rippleSize,\n in: inProp,\n onExited,\n timeout\n } = props;\n const [leaving, setLeaving] = React.useState(false);\n const exitTimer = useTimeout();\n const exitTimerStartedRef = React.useRef(false);\n const onExitedRef = React.useRef(onExited);\n onExitedRef.current = onExited;\n const hasExitedCallback = onExited != null;\n const rippleClassName = clsx(className, classes.ripple, classes.rippleVisible, pulsate && classes.ripplePulsate);\n const rippleStyles = {\n width: rippleSize,\n height: rippleSize,\n top: -(rippleSize / 2) + rippleY,\n left: -(rippleSize / 2) + rippleX\n };\n const childClassName = clsx(classes.child, leaving && classes.childLeaving, pulsate && classes.childPulsate);\n if (!inProp && !leaving) {\n setLeaving(true);\n }\n React.useEffect(() => {\n if (!inProp && hasExitedCallback) {\n if (!exitTimerStartedRef.current) {\n exitTimerStartedRef.current = true;\n exitTimer.start(timeout, () => {\n exitTimerStartedRef.current = false;\n onExitedRef.current?.();\n });\n }\n } else {\n exitTimerStartedRef.current = false;\n exitTimer.clear();\n }\n }, [exitTimer, hasExitedCallback, inProp, timeout]);\n return /*#__PURE__*/_jsx(\"span\", {\n className: rippleClassName,\n style: rippleStyles,\n children: /*#__PURE__*/_jsx(\"span\", {\n className: childClassName\n })\n });\n}\nprocess.env.NODE_ENV !== \"production\" ? Ripple.propTypes /* remove-proptypes */ = {\n /**\n * Override or extend the styles applied to the component.\n */\n classes: PropTypes.object.isRequired,\n className: PropTypes.string,\n /**\n * @ignore - controlled by TouchRipple\n */\n in: PropTypes.bool,\n /**\n * @ignore - controlled by TouchRipple\n */\n onExited: PropTypes.func,\n /**\n * If `true`, the ripple pulsates, typically indicating the keyboard focus state of an element.\n */\n pulsate: PropTypes.bool,\n /**\n * Diameter of the ripple.\n */\n rippleSize: PropTypes.number,\n /**\n * Horizontal position of the ripple center.\n */\n rippleX: PropTypes.number,\n /**\n * Vertical position of the ripple center.\n */\n rippleY: PropTypes.number,\n /**\n * Exit delay.\n */\n timeout: PropTypes.number.isRequired\n} : void 0;\nexport default Ripple;","import generateUtilityClasses from '@mui/utils/generateUtilityClasses';\nimport generateUtilityClass from '@mui/utils/generateUtilityClass';\nexport function getTouchRippleUtilityClass(slot) {\n return generateUtilityClass('MuiTouchRipple', slot);\n}\nconst touchRippleClasses = generateUtilityClasses('MuiTouchRipple', ['root', 'ripple', 'rippleVisible', 'ripplePulsate', 'child', 'childLeaving', 'childPulsate']);\nexport default touchRippleClasses;","'use client';\n\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport useOnMount from '@mui/utils/useOnMount';\nimport useTimeout from '@mui/utils/useTimeout';\nimport { keyframes, css, styled, useTheme } from \"../zero-styled/index.mjs\";\nimport { useDefaultProps } from \"../DefaultPropsProvider/index.mjs\";\nimport Ripple from \"./Ripple.mjs\";\nimport touchRippleClasses from \"./touchRippleClasses.mjs\";\nimport useEventCallback from \"../utils/useEventCallback.mjs\";\nimport useReducedMotion from \"../transitions/useReducedMotion.mjs\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst DURATION = 550;\nexport const DELAY_RIPPLE = 80;\nconst EMPTY_OBJ = {};\nconst EMPTY_ARRAY = [];\nconst NOOP = () => {};\n\n/**\n * Keep the same DOM order TouchRipple had when it used react-transition-group:\n * exiting ripples stay in place, and new ripples are inserted before the final\n * group of ripples that are waiting for their exit animation to finish.\n *\n * @param {number[]} prevOrder The previous DOM order, including ripples that may be exiting.\n * @param {number[]} nextActiveKeys The ripples that should still be treated as active.\n * @returns {number[]} The next DOM order, preserving the position of exiting ripples where possible.\n */\nfunction mergeRippleOrder(prevOrder, nextActiveKeys) {\n const nextKeySet = new Set(nextActiveKeys);\n const nextKeysPending = new Map();\n let pendingKeys = [];\n for (const prevKey of prevOrder) {\n if (nextKeySet.has(prevKey)) {\n if (pendingKeys.length > 0) {\n nextKeysPending.set(prevKey, pendingKeys);\n pendingKeys = [];\n }\n } else {\n pendingKeys.push(prevKey);\n }\n }\n const nextOrder = [];\n for (const nextKey of nextActiveKeys) {\n const pendingBefore = nextKeysPending.get(nextKey);\n if (pendingBefore) {\n nextOrder.push(...pendingBefore);\n }\n nextOrder.push(nextKey);\n }\n nextOrder.push(...pendingKeys);\n return nextOrder;\n}\n\n/**\n * Calculate where the ripple should start and how large it must be to cover the host element.\n *\n * @param {object} params\n * @param {object} params.event The mouse or touch event that started the ripple.\n * @param {HTMLElement | null} params.element The host element used for measurements. Tests pass `null`.\n * @param {boolean} params.center If `true`, start the ripple from the center of the host element.\n * @returns {{ rippleX: number, rippleY: number, rippleSize: number }} The ripple position and size.\n */\nfunction computeRippleState({\n event,\n element,\n center\n}) {\n const rect = element ? element.getBoundingClientRect() : {\n width: 0,\n height: 0,\n left: 0,\n top: 0\n };\n let rippleX;\n let rippleY;\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 let rippleSize;\n if (center) {\n rippleSize = Math.sqrt((2 * rect.width ** 2 + rect.height ** 2) / 3);\n\n // Mobile Chrome can skip this animation for even pixel sizes.\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 return {\n rippleX,\n rippleY,\n rippleSize\n };\n}\nconst enterKeyframe = keyframes`\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`\n 0% {\n opacity: 1;\n }\n\n 100% {\n opacity: 0;\n }\n`;\nconst pulsateKeyframe = keyframes`\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`;\nfunction getAnimationStyles(theme) {\n if (theme.motion.reducedMotion === 'always') {\n return null;\n }\n const styles = css`\n &.${touchRippleClasses.rippleVisible} {\n animation-name: ${enterKeyframe};\n animation-duration: ${DURATION}ms;\n animation-timing-function: ${theme.transitions.easing.easeInOut};\n }\n\n &.${touchRippleClasses.ripplePulsate} {\n animation-duration: ${theme.transitions.duration.shorter}ms;\n }\n\n & .${touchRippleClasses.childLeaving} {\n animation-name: ${exitKeyframe};\n animation-duration: ${DURATION}ms;\n animation-timing-function: ${theme.transitions.easing.easeInOut};\n }\n\n & .${touchRippleClasses.childPulsate} {\n animation-name: ${pulsateKeyframe};\n animation-duration: 2500ms;\n animation-timing-function: ${theme.transitions.easing.easeInOut};\n animation-iteration-count: infinite;\n animation-delay: 200ms;\n }\n `;\n if (theme.motion.reducedMotion === 'system') {\n return css`\n @media (prefers-reduced-motion: no-preference) {\n ${styles}\n }\n `;\n }\n return styles;\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()` call uses keyframes. styled-components only supports keyframes\n// in template strings, so do not convert these styles to a JS object.\nexport const TouchRippleRipple = styled(Ripple, {\n name: 'MuiTouchRipple',\n slot: 'Ripple'\n})`\n opacity: 0;\n position: absolute;\n\n &.${touchRippleClasses.rippleVisible} {\n opacity: 0.3;\n transform: scale(1);\n }\n\n /*\n * Order matters: 'child', 'childLeaving' and 'childPulsate' apply to the same\n * element with equal specificity, so the later rule wins. 'child' must come\n * before 'childLeaving' so the leaving 'opacity: 0' takes precedence. A focus\n * (pulsate) ripple keeps 'pulsateKeyframe' (no opacity animation) on exit, so\n * it relies on this static 'opacity: 0' to disappear on blur instead of\n * lingering until removal.\n */\n & .${touchRippleClasses.child} {\n opacity: 1;\n display: block;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background-color: currentColor;\n }\n\n & .${touchRippleClasses.childLeaving} {\n opacity: 0;\n }\n\n & .${touchRippleClasses.childPulsate} {\n position: absolute;\n /* @noflip */\n left: 0px;\n top: 0;\n }\n\n ${({\n theme\n}) => getAnimationStyles(theme)}\n`;\n\n/**\n * @ignore - internal component.\n */\nconst TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps, ref) {\n const props = useDefaultProps({\n props: inProps,\n name: 'MuiTouchRipple'\n });\n const theme = useTheme();\n const reducedMotion = useReducedMotion(theme.motion.reducedMotion, false);\n const {\n center: centerProp = false,\n classes = EMPTY_OBJ,\n className,\n ...other\n } = props;\n // Store ripples as data so we can keep exiting ripples mounted until their\n // exit animation ends. Ripple calls onExited when it is safe to remove one.\n const [rippleState, setRippleState] = React.useState({\n items: EMPTY_ARRAY,\n order: EMPTY_ARRAY\n });\n const ripples = rippleState.items;\n const nextKey = React.useRef(0);\n const rippleCallback = React.useRef(null);\n const mountedRef = React.useRef(false);\n useOnMount(() => {\n mountedRef.current = true;\n return () => {\n mountedRef.current = false;\n };\n });\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 // Holds delayed touch-start work until the delay expires or touchend forces it to run.\n const startTimerCommit = React.useRef(null);\n const container = React.useRef(null);\n const handleExited = useEventCallback(key => {\n if (!mountedRef.current) {\n return;\n }\n setRippleState(prevState => {\n const nextItems = prevState.items.filter(ripple => ripple.key !== key);\n const nextOrder = mergeRippleOrder(prevState.order.filter(rippleKey => rippleKey !== key), nextItems.filter(ripple => !ripple.exiting).map(ripple => ripple.key));\n return {\n items: nextItems,\n order: nextOrder\n };\n });\n });\n const startCommit = useEventCallback(params => {\n const {\n pulsate,\n rippleX,\n rippleY,\n rippleSize,\n cb\n } = params;\n const key = nextKey.current;\n nextKey.current += 1;\n setRippleState(prevState => {\n const nextItems = [...prevState.items, {\n key,\n pulsate,\n rippleX,\n rippleY,\n rippleSize,\n exiting: false\n }];\n return {\n items: nextItems,\n order: mergeRippleOrder(prevState.order, nextItems.filter(ripple => !ripple.exiting).map(ripple => ripple.key))\n };\n });\n rippleCallback.current = cb;\n });\n const start = useEventCallback((event = EMPTY_OBJ, options = EMPTY_OBJ, cb = NOOP) => {\n const {\n pulsate = false,\n center = centerProp || options.pulsate,\n fakeElement = false // Used only by tests.\n } = options;\n if (event?.type === 'mousedown' && ignoringMouseDown.current) {\n ignoringMouseDown.current = false;\n return;\n }\n if (event?.type === 'touchstart') {\n ignoringMouseDown.current = true;\n }\n const element = fakeElement ? null : container.current;\n const {\n rippleX,\n rippleY,\n rippleSize\n } = computeRippleState({\n event,\n element,\n center\n });\n\n // Delay touch ripples so scroll gestures do not flash a ripple.\n if (event?.touches) {\n // Ignore extra touchstart events from multi-touch. There is only one\n // delayed start callback to clear on unmount.\n if (startTimerCommit.current === null) {\n startTimerCommit.current = () => {\n startCommit({\n pulsate,\n rippleX,\n rippleY,\n rippleSize,\n cb\n });\n };\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 });\n const pulsate = useEventCallback(() => {\n start(EMPTY_OBJ, {\n pulsate: true\n });\n });\n const stop = useEventCallback((event, cb) => {\n startTimer.clear();\n\n // If touch ends before the delay finishes, show the ripple now and stop it\n // on the next tick so the user still gets feedback.\n if (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 setRippleState(prevState => {\n const firstActiveIndex = prevState.items.findIndex(ripple => !ripple.exiting);\n if (firstActiveIndex === -1) {\n return prevState;\n }\n const nextItems = prevState.items.slice();\n nextItems[firstActiveIndex] = {\n ...nextItems[firstActiveIndex],\n exiting: true\n };\n return {\n items: nextItems,\n order: mergeRippleOrder(prevState.order, nextItems.filter(ripple => !ripple.exiting).map(ripple => ripple.key))\n };\n });\n rippleCallback.current = cb;\n });\n React.useImperativeHandle(ref, () => ({\n pulsate,\n start,\n stop\n }), [pulsate, start, stop]);\n const rippleByKey = new Map(ripples.map(ripple => [ripple.key, ripple]));\n const orderedRipples = rippleState.order.map(rippleKey => rippleByKey.get(rippleKey)).filter(Boolean);\n\n // Keep the old react-transition-group DOM order:\n // exiting ripples stay in place, and new ripples are inserted before the\n // final group waiting for its exit animation to finish.\n return /*#__PURE__*/_jsx(TouchRippleRoot, {\n className: clsx(touchRippleClasses.root, classes.root, className),\n ref: container,\n ...other,\n children: orderedRipples.map(ripple => /*#__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: reducedMotion.shouldReduceMotion ? 0 : DURATION,\n pulsate: ripple.pulsate,\n rippleX: ripple.rippleX,\n rippleY: ripple.rippleY,\n rippleSize: ripple.rippleSize,\n in: !ripple.exiting,\n onExited: () => handleExited(ripple.key)\n }, ripple.key))\n });\n});\nprocess.env.NODE_ENV !== \"production\" ? TouchRipple.propTypes /* remove-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;","import generateUtilityClasses from '@mui/utils/generateUtilityClasses';\nimport generateUtilityClass from '@mui/utils/generateUtilityClass';\nexport function getButtonBaseUtilityClass(slot) {\n return generateUtilityClass('MuiButtonBase', slot);\n}\nconst buttonBaseClasses = generateUtilityClasses('MuiButtonBase', ['root', 'disabled', 'focusVisible']);\nexport default buttonBaseClasses;","'use client';\n\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport refType from '@mui/utils/refType';\nimport elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef';\nimport composeClasses from '@mui/utils/composeClasses';\nimport isFocusVisible from '@mui/utils/isFocusVisible';\nimport { styled } from \"../zero-styled/index.mjs\";\nimport { useDefaultProps } from \"../DefaultPropsProvider/index.mjs\";\nimport useForkRef from \"../utils/useForkRef.mjs\";\nimport useEventCallback from \"../utils/useEventCallback.mjs\";\nimport useButtonBase from \"./useButtonBase.mjs\";\nimport useLazyRipple from \"../useLazyRipple/index.mjs\";\nimport TouchRipple from \"./TouchRipple.mjs\";\nimport buttonBaseClasses, { getButtonBaseUtilityClass } from \"./buttonBaseClasses.mjs\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst useUtilityClasses = ownerState => {\n const {\n disabled,\n focusVisible,\n focusVisibleClassName,\n suppressFocusVisible,\n classes\n } = ownerState;\n const slots = {\n root: ['root', disabled && 'disabled', focusVisible && !suppressFocusVisible && 'focusVisible']\n };\n const composedClasses = composeClasses(slots, getButtonBaseUtilityClass, classes);\n if (focusVisible && !suppressFocusVisible && focusVisibleClassName) {\n composedClasses.root += ` ${focusVisibleClassName}`;\n }\n return composedClasses;\n};\nexport const ButtonBaseRoot = styled('button', {\n name: 'MuiButtonBase',\n slot: 'Root'\n})({\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n position: 'relative',\n boxSizing: 'border-box',\n WebkitTapHighlightColor: 'transparent',\n backgroundColor: 'transparent',\n // Reset default value\n // We disable the focus ring for mouse, touch and keyboard users.\n outline: 0,\n border: 0,\n margin: 0,\n // Remove the margin in Safari\n borderRadius: 0,\n padding: 0,\n // Remove the padding in Firefox\n cursor: 'pointer',\n userSelect: 'none',\n verticalAlign: 'middle',\n MozAppearance: 'none',\n // Reset\n WebkitAppearance: 'none',\n // Reset\n textDecoration: 'none',\n // So we take precedent over the style of a native
element.\n color: 'inherit',\n '&::-moz-focus-inner': {\n borderStyle: 'none' // Remove Firefox dotted outline.\n },\n [`&.${buttonBaseClasses.disabled}`]: {\n pointerEvents: 'none',\n // Disable link interactions\n cursor: 'default'\n },\n '@media print': {\n colorAdjust: 'exact'\n }\n});\n\n/**\n * `ButtonBase` contains as few styles as possible.\n * It aims to be a simple building block for creating a button.\n * It contains a load of style reset and some focus/ripple logic.\n */\nconst ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, ref) {\n const props = useDefaultProps({\n props: inProps,\n name: 'MuiButtonBase'\n });\n const {\n action,\n centerRipple = false,\n children,\n className,\n component = 'button',\n disabled = false,\n disableRipple = false,\n disableTouchRipple = false,\n focusRipple = false,\n focusVisibleClassName,\n /* eslint-disable react/prop-types */\n // replaces internal handling in Chip, other components can opt-in individually to use this in the future\n focusableWhenDisabled,\n // escape hatch to suppress the focusVisible state and callback\n // used by anchored