![\"prev\"](\"/assets/icons/ic_prev.svg\"){kind=icon}
\n ![\"next\"](\"/assets/icons/ic_next.svg\"){kind=icon}
\n \n
\n \n \n \n Just Try It - You’ll See.\n \n\n {/*
\n \n Warning: Taking this step will\n significantly increase your sales.\n
*/}\n {/*\n \n \n 10% OFF ANNUAL\n \n
*/}\n \n {\n if (interval == 'month') {\n setInterval('year');\n } else {\n setInterval('month');\n }\n }}\n />\n Annual\n \n 10% Off Annual ✨\n \n
\n \n Get the full power of RealityFence free for 10 days. Cancel anytime.
\n \n That’s right, if you don’t close a deal, don’t pay us a dollar.\n \n
\n {subscriptions.map(\n (price: any, index: number) =>\n price.name.indexOf('Trial') < 0 && (\n \n \n \n 10 Days Free\n \n {' '}\n then $\n {interval === 'month'\n ? price?.price != null\n ? Math.round(price.price * 100) / 100\n : 0\n : price?.price != null && price.discount != null\n ? (((price.price * (100 - price.discount)) / 100) * 12)\n .toFixed(2)\n .replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',') // Divide by 100 to get the actual price\n : 0}\n / {interval}\n \n \n \n\n onSubscribeClick(price.id)}\n style={{ backgroundColor: '#1FA9FF' }}\n >\n \n {(!isLoading || (isLoading && id !== price.id)) &&
\n {/* {price.features && price.features.length > 0 && (\n
\n )\n )}\n \n
\n\n \n
\n {price.name}
\n {price?.description && (\n\n {price?.description}\n
\n )}\nAct Now
}\n\n {isLoading && id === price.id &&Subscribing...
}\n \n\n\n {/* {price.features && price.features.length > 0 && (\n
- \n {price.features.map((feature, idx) => (\n
- \n
- \n
\n {price.totalUsers} Users\n \n - \n
\n {/* Up to {price.totalFences} Fences */}\n Unlimited Use\n \n - \n
\n Premium support\n \n - \n
\n One-Touch-Sharing\n \n - \n
\n Request custom Fences\n \n
- \n {group.items.map((list) => (\n
\n {children}\n
\n \n {!hideIconVariant ? icon : null}\n {snackMessage}\n
\n {action && (\n {action}
\n )}\n \n )}\n \n \n \n );\n};\n\nexport default SnackbarItem;\n","import React from 'react';\nimport clsx from 'clsx';\nimport { styled } from '@mui/material/styles';\nimport { SNACKBAR_INDENTS } from './utils/constants';\nimport { SnackbarProviderProps } from '.';\n\nconst collapse = {\n // Material-UI 4.12.x and above uses MuiCollapse-root; earlier versions use\n // Mui-Collapse-container. https://github.com/mui-org/material-ui/pull/24084\n container: '& > .MuiCollapse-container, & > .MuiCollapse-root',\n wrapper: '& > .MuiCollapse-container > .MuiCollapse-wrapper, & > .MuiCollapse-root > .MuiCollapse-wrapper',\n};\n\nconst xsWidthMargin = 16;\n\nconst componentName = 'SnackbarContainer';\n\nconst classes = {\n root: `${componentName}-root`,\n rootDense: `${componentName}-rootDense`,\n top: `${componentName}-top`,\n bottom: `${componentName}-bottom`,\n left: `${componentName}-left`,\n right: `${componentName}-right`,\n center: `${componentName}-center`,\n};\n\nconst Root = styled('div')(({ theme }) => ({\n [`&.${classes.root}`]: {\n boxSizing: 'border-box',\n display: 'flex',\n maxHeight: '100%',\n position: 'fixed',\n zIndex: theme.zIndex.snackbar,\n height: 'auto',\n width: 'auto',\n transition: 'top 300ms ease 0ms, right 300ms ease 0ms, bottom 300ms ease 0ms, left 300ms ease 0ms, margin 300ms ease 0ms, max-width 300ms ease 0ms',\n // container itself is invisible and should not block clicks, clicks should be passed to its children\n pointerEvents: 'none',\n [collapse.container]: {\n pointerEvents: 'all',\n },\n [collapse.wrapper]: {\n padding: `${SNACKBAR_INDENTS.snackbar.default}px 0px`,\n transition: 'padding 300ms ease 0ms',\n },\n maxWidth: `calc(100% - ${SNACKBAR_INDENTS.view.default * 2}px)`,\n [theme.breakpoints.down('sm')]: {\n width: '100%',\n maxWidth: `calc(100% - ${xsWidthMargin * 2}px)`,\n },\n },\n [`&.${classes.rootDense}`]: {\n [collapse.wrapper]: {\n padding: `${SNACKBAR_INDENTS.snackbar.dense}px 0px`,\n },\n },\n [`&.${classes.top}`]: {\n top: SNACKBAR_INDENTS.view.default - SNACKBAR_INDENTS.snackbar.default,\n flexDirection: 'column',\n },\n [`&.${classes.bottom}`]: {\n bottom: SNACKBAR_INDENTS.view.default - SNACKBAR_INDENTS.snackbar.default,\n flexDirection: 'column-reverse',\n },\n [`&.${classes.left}`]: {\n left: SNACKBAR_INDENTS.view.default,\n [theme.breakpoints.up('sm')]: {\n alignItems: 'flex-start',\n },\n [theme.breakpoints.down('sm')]: {\n left: `${xsWidthMargin}px`,\n },\n },\n [`&.${classes.right}`]: {\n right: SNACKBAR_INDENTS.view.default,\n [theme.breakpoints.up('sm')]: {\n alignItems: 'flex-end',\n },\n [theme.breakpoints.down('sm')]: {\n right: `${xsWidthMargin}px`,\n },\n },\n [`&.${classes.center}`]: {\n left: '50%',\n transform: 'translateX(-50%)',\n [theme.breakpoints.up('sm')]: {\n alignItems: 'center',\n },\n },\n}));\n\ninterface SnackbarContainerProps {\n children: JSX.Element | JSX.Element[];\n className?: string;\n dense: SnackbarProviderProps['dense'];\n anchorOrigin: NonNullable- \n {data.map((link) => (\n
before they're built\n \n ) : (\n <>\n Experience\n
fences before\n
they're built\n \n )}\n \n
using Augmented Reality (AR)\n \n ) : (\n <>\n Demonstrate your entire\n
fence catalog using\n
Augmented Reality (AR)\n \n )}\n \n
\n increase in sales\n {' '}\n within 1 month\n \n ) : (\n <>\n Our customers have\n
seen a \n \n 10% increase in\n
sales \n \n within 1 month\n \n )}\n \n \n
\n RealityFence\n \n
\n \n \n )}\n
\n
\n \n \n Book a Meeting\n \n
\n \n Still on the Fence?\n
\n\n Book a meeting with us, let's connect\n
\n,\n arrowPrev: ,\n };\n\n const handlePrev = () => {\n carouselRef.current?.slickPrev();\n };\n\n const handleNext = () => {\n carouselRef.current?.slickNext();\n };\n\n return (\n \n \n \n \n \n ,\n arrowPrev: ,\n };\n\n const handlePrev = () => {\n carouselRef.current?.slickPrev();\n };\n\n const handleNext = () => {\n carouselRef.current?.slickNext();\n };\n\n return (\n \n 
\n \n \n {item.name}\n \n \n {item.company}\n \n \n
\n \n \n \n \n \n \n \n \n fences directly in a customer's yard?\n \n ) : (\n
\n directly in a customer's yard?\n \n )}\n
\n
\n So, what did I do? I went with something really basic... didn't feel like I had much\n choice. I'm a visual person, and I needed to see more than just pictures. Now the fence\n is there, it does its job, but it isn't exactly what I wanted.\n
\n
A personal, walk-around preview would've given me the visual confidence I needed\n to pick out my perfect fence."\n \n ),\n },\n {\n index: 2,\n title: 'Unprofessional ',\n description: (\n \n "They brought a sample of the fence material, and that gave us an idea of what the\n color would look like, but I guess I didn't really know how it would actually go with\n the yard.\n
\n
\n It didn't feel professional. I mean, it felt like a weekend project if my dad was in\n town.\n
\n
\n If they would have showed up with technology like RealityFence, I would have felt a lot more\n like, 'okay, these guys kind of know what they're doing.' I probably\n wouldn't have felt the need to get 3 more quotes. If they had been able to show me what\n it would have looked like, I would have felt so much more confident in my decision."\n \n ),\n },\n {\n index: 3,\n title: 'Like pulling teeth..',\n description: (\n \n " Man, choosing a fence was like pulling teeth. You think it's gonna be easy,\n right? Pick a style, pick a color, and you're good to go. But no, it was nothing like\n that. I spent weeks, maybe even a couple of months, going back and forth. Pictures, samples,\n brochures... you name it. Nothing was helping me picture it in my yard.\n
\n
\n Now, if I'd had something like RealityFence, it would've been like night and day.\n No more endless debates, no more second guessing, I'd have seen what I was getting\n right there in my yard, instantly. With that kind of confidence, I could've made my\n choice in a snap. And let me tell you, that would've saved me a ton of time and stress.\n "\n \n ),\n },\n {\n index: 4,\n title: 'The bigger picture..',\n description: (\n \n "When you're thinking about a new fence, it's not just about the fence\n itself. It's about how it works with your house, your garden, your entire property. I\n mean, you're not just buying a barrier - you're creating a look, a feel. And I\n found that to be so difficult, because you can't just isolate a fence, it's part\n of a bigger picture.\n
\n
\n The brochures and samples were fine, but they couldn't show me what the fence would\n look like against my house, with my garden. I needed to see it in my space."\n \n ),\n },\n {\n index: 5,\n title: 'But is it safe?',\n description: (\n \n "As a dad, when I'm thinking about a fence, it's not just about how it looks\n - safety is my number one concern. I spent weeks pouring over different types of fences,\n wanting to make sure whatever we chose would be a safe barrier for my kids.\n
\n
\n But you know, it's hard to make a decision based on just pictures and catalogs.\n There's a world of difference between seeing a fence in a brochure and actually\n visualizing it right in your own backyard.\n
\n
\n If I could have seen how high and secure the fence looked in our yard, it would have been\n much easier to make a confident choice. That peace of mind, knowing you've made the\n right decision for your family's safety, it's invaluable."\n \n ),\n },\n];\n\nexport default function Experience() {\n const carouselRef = useRef(null);\n const isMobile = useMediaQuery('(max-width: 800px)');\n const carouselSettings = {\n infinite: true,\n arrows: false,\n dots: true,\n speed: 500,\n };\n\n const handlePrev = () => {\n carouselRef.current?.slickPrev();\n };\n\n const handleNext = () => {\n carouselRef.current?.slickNext();\n };\n\n return (\n
\n \n \n Verified Fence Buyer\n \n
\n \n 
\n
\n \n \n \n Verified Fence Buyer\n \n
\n {/* \n \n
\n \n \n \n \n \n \n fence{' '}\n
\n \n Read license\n \n \n \n
\n \n make a serious impression\n \n\n {!isMobile ? (\n
\n \n \n \n {value.title1}\n \n \n {value.title}\n \n \n \n {value.description2}\n \n \n \n Source: {' '}\n \n {value.source} \n \n \n
\n ))}\n \n )}\n \n Any fence? Yep.\n
\n\n If you install it, you can demonstrate it with RealityFence. Beyond our extensive\n library, we specialize in creating any custom 3D models you'll need.\n
\n {/*\n \n \n \n \n \n ) : (\n <>\n \n \n \n \n \n \n )}\n ` by default. You can change this\n * behavior by providing a `component` prop.\n * If you use React v16+ and would like to avoid a wrapping `
` element\n * you can pass in `component={null}`. This is useful if the wrapping div\n * borks your css styles.\n */\n component: PropTypes.any,\n\n /**\n * A set of `` components, that are toggled `in` and out as they\n * leave. the `` will inject specific transition props, so\n * remember to spread them through if you are wrapping the `` as\n * with our `` example.\n *\n * While this component is meant for multiple `Transition` or `CSSTransition`\n * children, sometimes you may want to have a single transition child with\n * content that you want to be transitioned out and in when you change it\n * (e.g. routes, images etc.) In that case you can change the `key` prop of\n * the transition child as you change its content, this will cause\n * `TransitionGroup` to transition the child out and back in.\n */\n children: PropTypes.node,\n\n /**\n * A convenience prop that enables or disables appear animations\n * for all children. Note that specifying this will override any defaults set\n * on individual children Transitions.\n */\n appear: PropTypes.bool,\n\n /**\n * A convenience prop that enables or disables enter animations\n * for all children. Note that specifying this will override any defaults set\n * on individual children Transitions.\n */\n enter: PropTypes.bool,\n\n /**\n * A convenience prop that enables or disables exit animations\n * for all children. Note that specifying this will override any defaults set\n * on individual children Transitions.\n */\n exit: PropTypes.bool,\n\n /**\n * You may need to apply reactive updates to a child as it is exiting.\n * This is generally done by using `cloneElement` however in the case of an exiting\n * child the element has already been removed and not accessible to the consumer.\n *\n * If you do need to update a child as it leaves you can provide a `childFactory`\n * to wrap every child, even the ones that are leaving.\n *\n * @type Function(child: ReactElement) -> ReactElement\n */\n childFactory: PropTypes.func\n} : {};\nTransitionGroup.defaultProps = defaultProps;\nexport default TransitionGroup;","'use client';\n\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\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 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 && onExited != null) {\n // react-transition-group#onExited\n const timeoutId = setTimeout(onExited, timeout);\n return () => {\n clearTimeout(timeoutId);\n };\n }\n return undefined;\n }, [onExited, 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 = {\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.isRequired,\n className: PropTypes.string,\n /**\n * @ignore - injected from TransitionGroup\n */\n in: PropTypes.bool,\n /**\n * @ignore - injected from TransitionGroup\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 _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 { unstable_useTimeout as useTimeout } from '@mui/utils';\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 = 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 * 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;","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 _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nconst _excluded = [\"action\", \"centerRipple\", \"children\", \"className\", \"component\", \"disabled\", \"disableRipple\", \"disableTouchRipple\", \"focusRipple\", \"focusVisibleClassName\", \"LinkComponent\", \"onBlur\", \"onClick\", \"onContextMenu\", \"onDragLeave\", \"onFocus\", \"onFocusVisible\", \"onKeyDown\", \"onKeyUp\", \"onMouseDown\", \"onMouseLeave\", \"onMouseUp\", \"onTouchEnd\", \"onTouchMove\", \"onTouchStart\", \"tabIndex\", \"TouchRippleProps\", \"touchRippleRef\", \"type\"];\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport { elementTypeAcceptingRef, refType } from '@mui/utils';\nimport { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';\nimport styled from '../styles/styled';\nimport useThemeProps from '../styles/useThemeProps';\nimport useForkRef from '../utils/useForkRef';\nimport useEventCallback from '../utils/useEventCallback';\nimport useIsFocusVisible from '../utils/useIsFocusVisible';\nimport TouchRipple from './TouchRipple';\nimport buttonBaseClasses, { getButtonBaseUtilityClass } from './buttonBaseClasses';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nconst useUtilityClasses = ownerState => {\n const {\n disabled,\n focusVisible,\n focusVisibleClassName,\n classes\n } = ownerState;\n const slots = {\n root: ['root', disabled && 'disabled', focusVisible && 'focusVisible']\n };\n const composedClasses = composeClasses(slots, getButtonBaseUtilityClass, classes);\n if (focusVisible && focusVisibleClassName) {\n composedClasses.root += ` ${focusVisibleClassName}`;\n }\n return composedClasses;\n};\nexport const ButtonBaseRoot = styled('button', {\n name: 'MuiButtonBase',\n slot: 'Root',\n overridesResolver: (props, styles) => styles.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 = useThemeProps({\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 LinkComponent = 'a',\n onBlur,\n onClick,\n onContextMenu,\n onDragLeave,\n onFocus,\n onFocusVisible,\n onKeyDown,\n onKeyUp,\n onMouseDown,\n onMouseLeave,\n onMouseUp,\n onTouchEnd,\n onTouchMove,\n onTouchStart,\n tabIndex = 0,\n TouchRippleProps,\n touchRippleRef,\n type\n } = props,\n other = _objectWithoutPropertiesLoose(props, _excluded);\n const buttonRef = React.useRef(null);\n const rippleRef = React.useRef(null);\n const handleRippleRef = useForkRef(rippleRef, touchRippleRef);\n const {\n isFocusVisibleRef,\n onFocus: handleFocusVisible,\n onBlur: handleBlurVisible,\n ref: focusVisibleRef\n } = useIsFocusVisible();\n const [focusVisible, setFocusVisible] = React.useState(false);\n if (disabled && focusVisible) {\n setFocusVisible(false);\n }\n React.useImperativeHandle(action, () => ({\n focusVisible: () => {\n setFocusVisible(true);\n buttonRef.current.focus();\n }\n }), []);\n const [mountedState, setMountedState] = React.useState(false);\n React.useEffect(() => {\n setMountedState(true);\n }, []);\n const enableTouchRipple = mountedState && !disableRipple && !disabled;\n React.useEffect(() => {\n if (focusVisible && focusRipple && !disableRipple && mountedState) {\n rippleRef.current.pulsate();\n }\n }, [disableRipple, focusRipple, focusVisible, mountedState]);\n function useRippleHandler(rippleAction, eventCallback, skipRippleAction = disableTouchRipple) {\n return useEventCallback(event => {\n if (eventCallback) {\n eventCallback(event);\n }\n const ignore = skipRippleAction;\n if (!ignore && rippleRef.current) {\n rippleRef.current[rippleAction](event);\n }\n return true;\n });\n }\n const handleMouseDown = useRippleHandler('start', onMouseDown);\n const handleContextMenu = useRippleHandler('stop', onContextMenu);\n const handleDragLeave = useRippleHandler('stop', onDragLeave);\n const handleMouseUp = useRippleHandler('stop', onMouseUp);\n const handleMouseLeave = useRippleHandler('stop', event => {\n if (focusVisible) {\n event.preventDefault();\n }\n if (onMouseLeave) {\n onMouseLeave(event);\n }\n });\n const handleTouchStart = useRippleHandler('start', onTouchStart);\n const handleTouchEnd = useRippleHandler('stop', onTouchEnd);\n const handleTouchMove = useRippleHandler('stop', onTouchMove);\n const handleBlur = useRippleHandler('stop', event => {\n handleBlurVisible(event);\n if (isFocusVisibleRef.current === false) {\n setFocusVisible(false);\n }\n if (onBlur) {\n onBlur(event);\n }\n }, false);\n const handleFocus = useEventCallback(event => {\n // Fix for https://github.com/facebook/react/issues/7769\n if (!buttonRef.current) {\n buttonRef.current = event.currentTarget;\n }\n handleFocusVisible(event);\n if (isFocusVisibleRef.current === true) {\n setFocusVisible(true);\n if (onFocusVisible) {\n onFocusVisible(event);\n }\n }\n if (onFocus) {\n onFocus(event);\n }\n });\n const isNonNativeButton = () => {\n const button = buttonRef.current;\n return component && component !== 'button' && !(button.tagName === 'A' && button.href);\n };\n\n /**\n * IE11 shim for https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/repeat\n */\n const keydownRef = React.useRef(false);\n const handleKeyDown = useEventCallback(event => {\n // Check if key is already down to avoid repeats being counted as multiple activations\n if (focusRipple && !keydownRef.current && focusVisible && rippleRef.current && event.key === ' ') {\n keydownRef.current = true;\n rippleRef.current.stop(event, () => {\n rippleRef.current.start(event);\n });\n }\n if (event.target === event.currentTarget && isNonNativeButton() && event.key === ' ') {\n event.preventDefault();\n }\n if (onKeyDown) {\n onKeyDown(event);\n }\n\n // Keyboard accessibility for non interactive elements\n if (event.target === event.currentTarget && isNonNativeButton() && event.key === 'Enter' && !disabled) {\n event.preventDefault();\n if (onClick) {\n onClick(event);\n }\n }\n });\n const handleKeyUp = useEventCallback(event => {\n // calling preventDefault in keyUp on a