` 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;","import * 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 { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';\nimport generateUtilityClass from '../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;","import _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;","import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';\nimport generateUtilityClass from '../generateUtilityClass';\nexport function getButtonBaseUtilityClass(slot) {\n return generateUtilityClass('MuiButtonBase', slot);\n}\nconst buttonBaseClasses = generateUtilityClasses('MuiButtonBase', ['root', 'disabled', 'focusVisible']);\nexport default buttonBaseClasses;","import _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 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\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 }>\n
\n \n );\n};\n\nexport const DevSupport: React.FC
= ({\n children,\n ComponentPreviews,\n useInitialHook,\n devmode,\n}) => {\n const isDevmode = enabledDevmode(devmode);\n\n if (isDevmode) {\n return useInitialHook ? (\n withInitialHook(useInitialHook, ComponentPreviews)({})\n ) : (\n \n );\n }\n\n return <>{children};\n};\n\nfunction enabledDevmode(devmode?: boolean) {\n return devmode != null ? devmode : DEV_MODE;\n}\n","function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","import React from 'react';\nimport './table-header.scss';\n\nexport const TableHeader: React.FC = () => {\n return (\n \n
Property name
\n
Edit
\n
\n \n
\n );\n};\n","import React from 'react';\n\ninterface Props extends React.HTMLProps {\n optionsData?: string[] | number[];\n}\n\nexport const Select: React.FC = ({optionsData, ...restProps}) => {\n return (\n \n );\n};\n","import React from 'react';\nimport './radio.scss';\n\ntype Props = React.HTMLProps & {\n radioData?: string[] | number[];\n extValue?: string | number;\n};\n\nexport const Radio: React.FC = ({\n className,\n radioData,\n extValue,\n ...restProps\n}) => {\n return radioData ? (\n \n {radioData.map((value: string | number) => {\n return (\n
\n \n \n
\n );\n })}\n
\n \n \n Apply changes\n \n
\n );\n};\n","import React from 'react';\nimport {\n PropsControlTypes,\n ControlUnionHandler,\n ControlInputHandler,\n ControlSelectHandler,\n ControlTextareaHandler,\n ControlJsonHandler,\n TableItemControlData,\n} from '@types';\n\nimport Input from './input';\nimport Checkbox from './checkbox';\nimport Select from './select';\nimport Radio from './radio';\nimport Textarea from './textarea';\nimport JsonEditor from './json-editor';\n\ninterface Props {\n controlType?: PropsControlTypes;\n data?: TableItemControlData;\n propName: string;\n propValue: unknown;\n onPropChange: ControlUnionHandler;\n}\n\nexport const TableItemControl: React.FC = ({\n controlType,\n data,\n propName,\n propValue,\n onPropChange,\n}) => {\n switch (controlType) {\n case PropsControlTypes.Input:\n return (\n \n );\n\n case PropsControlTypes.Textarea:\n return (\n \n );\n case PropsControlTypes.Select:\n return (\n \n );\n\n case PropsControlTypes.Checkbox:\n return (\n \n );\n\n case PropsControlTypes.Radio:\n return (\n \n );\n\n case PropsControlTypes.JsonEditor:\n return (\n \n );\n\n default:\n return (\n \n );\n }\n};\n","import React from 'react';\nimport {\n PropsControlTypes,\n ControlUnionHandler,\n ComponentPreviewProps,\n} from '@types';\nimport TableItemControl from './table-item-control';\nimport './table-item.scss';\n\ninterface Props {\n data?: string[] | number[] | ComponentPreviewProps;\n propName: string;\n propValue: unknown;\n initialPropValue: unknown;\n controlType?: PropsControlTypes;\n onPropChange: ControlUnionHandler;\n}\n\nexport const TableItem: React.FC = ({\n propName,\n propValue,\n onPropChange,\n controlType,\n data,\n}) => {\n return (\n \n );\n};\n","import React, {useCallback, useEffect} from 'react';\nimport {\n ToolsPropsModifier,\n PropsControlTypes,\n TableItemControlData,\n} from '@types';\nimport TableItem from './table-item';\nimport './table-items.scss';\n\ninterface Props {\n toolsPropsToEdit: ToolsPropsModifier;\n}\n\nexport const TableItems: React.FC = ({toolsPropsToEdit}) => {\n const {\n props = null,\n initialProps = null,\n propsEditInfo = null,\n updateProps,\n } = {...toolsPropsToEdit};\n\n useEffect(() => {\n let propsValuesFromData = {};\n\n propsEditInfo\n ? Object.entries(propsEditInfo).map(([propName, propEditInfo]) => {\n const propValue = Array.isArray(propEditInfo.data)\n ? propEditInfo.data[0]\n : propEditInfo.data;\n\n propsValuesFromData = {\n ...propsValuesFromData,\n [propName]: propValue,\n };\n })\n : null;\n\n updateProps?.({\n ...props,\n ...propsValuesFromData,\n });\n }, [propsEditInfo]);\n\n const onInputChange = useCallback(\n (event: React.ChangeEvent) => {\n const {value: updatedPropValue, id: propName} = event.currentTarget;\n\n const updatedProps = {\n ...props,\n [propName]: updatedPropValue,\n };\n\n updateProps!(updatedProps);\n },\n [props],\n );\n\n const onCheckboxChange = useCallback(\n (event: React.ChangeEvent) => {\n const {checked: updatedPropValue, id: propName} = event.currentTarget;\n\n const updatedProps = {\n ...props,\n [propName]: updatedPropValue,\n };\n\n updateProps!(updatedProps);\n },\n [props],\n );\n\n const onSelectChange = useCallback(\n (event: React.ChangeEvent) => {\n const {value: updatedPropValue, id: propName} = event.currentTarget;\n\n const updatedProps = {\n ...props,\n [propName]: updatedPropValue,\n };\n\n updateProps!(updatedProps);\n },\n [props],\n );\n\n const onRadioChange = useCallback(\n (event: React.ChangeEvent) => {\n const {value: updatedPropValue, name: propName} = event.currentTarget;\n\n const updatedProps = {\n ...props,\n [propName]: updatedPropValue,\n };\n\n updateProps!(updatedProps);\n },\n [props],\n );\n\n const onTextAreaChange = useCallback(\n (event: React.ChangeEvent) => {\n const {value: updatedPropValue, id: propName} = event.currentTarget;\n\n const updatedProps = {\n ...props,\n [propName]: updatedPropValue,\n };\n\n updateProps!(updatedProps);\n },\n [props],\n );\n\n const onJsonChange = useCallback(\n (propName: string, propValue: string) => {\n let updatedPropValue;\n\n try {\n updatedPropValue = JSON.parse(propValue);\n } catch (e) {\n alert(`Property ${propName} has incorrect value to object parse`);\n return;\n }\n const updatedProps = {\n ...props,\n [propName]: updatedPropValue,\n };\n\n updateProps!(updatedProps);\n },\n [props],\n );\n\n const getChangeHendler = useCallback(\n (controlType?: PropsControlTypes) => {\n switch (controlType) {\n case PropsControlTypes.Input:\n return onInputChange;\n case PropsControlTypes.Checkbox:\n return onCheckboxChange;\n case PropsControlTypes.Select:\n return onSelectChange;\n case PropsControlTypes.Radio:\n return onRadioChange;\n case PropsControlTypes.Textarea:\n return onTextAreaChange;\n case PropsControlTypes.JsonEditor:\n return onJsonChange;\n default:\n return onInputChange;\n }\n },\n [props],\n );\n\n const renderTableItems = useCallback(() => {\n let items: JSX.Element[] = [];\n\n const itemsWithoutInfo =\n props &&\n Object.entries(props)\n .filter(([propName]) => {\n return !propsEditInfo?.hasOwnProperty(propName);\n })\n .map(([propName, propValue]) => {\n return (\n \n );\n });\n\n items = itemsWithoutInfo ? [...items, ...itemsWithoutInfo] : items;\n\n const itemsWithInfo =\n propsEditInfo &&\n Object.entries(propsEditInfo).map(([propName, propInfo]) => {\n return (\n \n );\n });\n\n items = itemsWithInfo ? [...items, ...itemsWithInfo] : items;\n\n return items;\n }, [props, propsEditInfo]);\n\n return {renderTableItems()}
;\n};\n","import React from 'react';\nimport {ToolsPropsModifier} from '@types';\nimport TableHeader from './table-header/';\nimport TableItems from './table-items';\nimport './props-edit-table.scss';\n\ninterface Props {\n toolsPropsToEdit: ToolsPropsModifier;\n}\n\nexport const PropsEditTable: React.FC = ({toolsPropsToEdit}) => {\n return (\n \n );\n};\n","import React, {useCallback} from 'react';\nimport {ToolsPropsModifier} from '@types';\nimport PropsEditTable from './props-edit-table';\nimport './tools-panel.scss';\n\ninterface Props {\n toolsPropsToEdit: ToolsPropsModifier;\n}\n\nexport const ToolsPanel: React.FC = ({toolsPropsToEdit}) => {\n const {props = null, propsEditInfo = null} = {...toolsPropsToEdit};\n\n const renederToolsPanelContent = useCallback(() => {\n let hasPropetiesToEdit: boolean;\n hasPropetiesToEdit = props ? Object.keys(props).length > 0 : false;\n hasPropetiesToEdit =\n hasPropetiesToEdit ||\n (propsEditInfo ? Object.keys(propsEditInfo).length > 0 : false);\n\n return hasPropetiesToEdit ? (\n \n ) : (\n \n This component has no properties to edit\n
\n );\n }, [props, propsEditInfo]);\n\n return {renederToolsPanelContent()}
;\n};\n","import {useState, useCallback, useEffect} from 'react';\nimport {escapeRegExp} from './utils';\n\nexport const PALETTE_PATH = '/REACT_BUDDY_PALETTE';\nexport const URL_CHANGE_EVENT = 'urlchange';\n\nexport type RouteProps = {\n path: string;\n exact?: boolean;\n children: JSX.Element;\n};\n\nexport const useRoute = (path: string, exact?: boolean) => {\n const [, setUpdate] = useState(false);\n\n const update = useCallback(() => {\n setUpdate((reRender) => {\n return !reRender;\n });\n }, []);\n\n useEffect(() => {\n window.addEventListener(URL_CHANGE_EVENT, update);\n window.addEventListener('popstate', update);\n\n return () => {\n window.removeEventListener(URL_CHANGE_EVENT, update);\n window.removeEventListener('popstate', update);\n };\n }, []);\n\n return isMatchPath(path, exact);\n};\n\nexport function isMatchPath(path: string, exact: boolean = false): boolean {\n const currentPath = getCurrentPath();\n const match = new RegExp(transformPath(path)).exec(currentPath);\n\n if (match) {\n const [url] = match;\n return exact ? currentPath === url : true;\n }\n\n return false;\n}\n\nfunction transformPath(path: string): string {\n return escapeRegExp(encodeURI(path));\n}\n\nfunction getCurrentPath() {\n const {hash, pathname} = window.location;\n return hash ? hash.replace('#', '') : pathname;\n}\n\nexport function historyPush(url: string) {\n window.history.replaceState({}, '', url);\n dispatchUrlChangeEvent(url);\n}\n\nfunction dispatchUrlChangeEvent(url: string) {\n const urlChangeEvent = new CustomEvent(URL_CHANGE_EVENT, {\n bubbles: true,\n detail: url,\n });\n window.dispatchEvent(urlChangeEvent);\n}\n","export function escapeRegExp(value: string): string {\n return value.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&');\n}\n","import React, {useState, useMemo, useEffect} from 'react';\nimport ToolsPanel from './tools-panel';\nimport {ToolsPropsModifier} from '@types';\nimport {useRoute, PALETTE_PATH, historyPush} from '../routing/routing';\nimport styles from './previews.module.scss';\n\ninterface Props {\n palette?: JSX.Element | null;\n children?: JSX.Element | JSX.Element[];\n}\n\nexport const Previews: React.FC = ({\n children,\n palette = null,\n}: Props) => {\n const [toolsPropsToEdit, setToolsPropsToEdit] =\n useState(null);\n const [toolsPanelEnabled, enableToolsPanel] = useState(\n () => window.__PROPERTIES_EDIT_PANEL_ENABLED__ ?? false,\n );\n const isPalettePath = useRoute(PALETTE_PATH);\n\n const childrenWithSetProps = useMemo(() => {\n return children\n ? React.Children.map(children, (child: JSX.Element) => {\n return React.cloneElement(child, {setToolsPropsToEdit});\n })\n : null;\n }, [children]);\n\n useEffect(() => {\n window.enableComponentsPropsPanelEditor = (toolsPanelStatus: boolean) => {\n window.setPropertiesEditPanelStatus?.(toolsPanelStatus);\n enableToolsPanel(toolsPanelStatus);\n };\n\n window.reactBuddyHistoryPush = historyPush;\n window.cefQuery?.({request: 'event:react-toolbox-initialized'});\n }, []);\n\n if (isPalettePath) {\n return palette;\n }\n\n return (\n \n
{childrenWithSetProps}
\n {toolsPanelEnabled && (\n
\n \n
\n )}\n
\n
\n {componentName\n ? `Something went wrong while rendering ${componentName} component`\n : 'Something went wrong'}\n
\n
{error.message}
\n
{error.stack}\n
{children}
;\n};\n\n\n\n","import React, {CSSProperties, useContext} from 'react';\n\nconst CategoryContext = React.createContext<{\n categoryClassName?: string | undefined;\n categoryStyle?: CSSProperties | undefined;\n}>({});\nexport const useCategoryContext = () => useContext(CategoryContext);\ninterface CategoryProps {\n style?: CSSProperties | undefined;\n className?: string | undefined;\n name: string;\n children: JSX.Element | JSX.Element[];\n};\nexport const Category: React.FC = ({\n children,\n name,\n className,\n style\n}) => {\n return (\n \n {getTransformedCategoryChildren({\n children,\n categoryName: name,\n })}\n \n );\n};\ninterface GetTransformedCategoryChildrenParams {\n children: JSX.Element | JSX.Element[];\n categoryName: string;\n}\nfunction getTransformedCategoryChildren({\n children,\n categoryName,\n}: GetTransformedCategoryChildrenParams) {\n return React.Children.map(children, (child) => {\n return React.cloneElement(child, {categoryName});\n });\n}\n","import React, {CSSProperties, useContext} from 'react';\n\nconst ComponentContext = React.createContext<{\n componentClassName?: string | undefined;\n componentStyle?: CSSProperties | undefined;\n}>({});\nexport const useComponentContext = () => useContext(ComponentContext);\ninterface ComponentProps {\n style?: CSSProperties | undefined;\n className?: string | undefined;\n categoryName?: string;\n name: string;\n children: JSX.Element | JSX.Element[];\n defaultProps?: {};\n subComponents?: JSX.Element | JSX.Element[];\n docURL?: string;\n};\nexport const Component: React.FC = ({\n children,\n categoryName,\n name,\n className,\n style,\n}) => {\n return (\n \n {getTransformedComponentChildren({\n children,\n componentName: name,\n categoryName,\n })}\n \n );\n};\ninterface GetTransformedComponentChildrenParams{\n children: JSX.Element | JSX.Element[],\n componentName: string,\n categoryName?: string,\n}\nfunction getTransformedComponentChildren({\n children,\n componentName,\n categoryName,\n}: GetTransformedComponentChildrenParams) {\n return React.Children.map(children, (child) => {\n return React.cloneElement(child, {\n categoryName,\n componentName,\n });\n });\n}\n","export function classNames(...classNames: (string | undefined | null)[]) {\n const splittedClassNamesWithoutNullable = classNames.flatMap(className => className ? className.split(' ') : []);\n const uniqClassNames = [...new Set(splittedClassNamesWithoutNullable)];\n return uniqClassNames.join(' ');\n};","import React, {CSSProperties, PropsWithChildren, ReactElement, useContext, useLayoutEffect, useMemo, useState} from 'react';\nimport { classNames } from '../util/classNames';\nimport {useRoute, PALETTE_PATH} from '../routing/routing';\nimport { useCategoryContext } from '../category/category';\nimport { useComponentContext } from '../component/component';\nimport { ReactBuddyErrorBoundary } from '../react-buddy-error-boundary/react-buddy-error-boundary';\nimport styles from './variant.module.scss';\n\nconst DEFAULT_VARIANT_NAME = 'DEFAULT_VARIANT';\n\ninterface VariantRouteProps {\n categoryName?: string;\n componentName?: string;\n variantName?: string;\n previewLayout?: 'center' | 'stretch';\n requiredParams?: Array;\n};\n\nconst VariantRoute: React.FC = ({\n categoryName,\n componentName,\n variantName = DEFAULT_VARIANT_NAME,\n previewLayout = 'center',\n children,\n}) => {\n const {categoryClassName, categoryStyle} = useCategoryContext();\n const {componentClassName, componentStyle} = useComponentContext();\n const {variantClassName, variantStyle} = useVariantContext();\n\n const paletteItemPath = useMemo(() => {\n return getPaletteItemPath([categoryName, componentName, variantName]);\n }, [categoryName, componentName, variantName]);\n\n const isPathMatch = useRoute(paletteItemPath, true);\n\n const [paletteNode, setPaletteNode] = useState(null);\n\n useLayoutEffect(() => {\n if(paletteNode !== null) addFullWindowClassToParents(paletteNode);\n return () => {\n if(paletteNode !== null) removeFullWindowClassFromParents(paletteNode);\n }\n }, [paletteNode]);\n\n if (!isPathMatch) {\n return null;\n }\n\n return (\n \n