()\n\ntype LogicalPlacement = \"start\" | \"end\"\ntype LogicalPlacementMap = Record<\n LogicalPlacement,\n { ltr: SlideOptions[\"direction\"]; rtl: SlideOptions[\"direction\"] }\n>\ntype DrawerPlacement = SlideOptions[\"direction\"] | LogicalPlacement\n\nconst placementMap: LogicalPlacementMap = {\n start: { ltr: \"left\", rtl: \"right\" },\n end: { ltr: \"right\", rtl: \"left\" },\n}\n\nfunction getDrawerPlacement(\n placement: DrawerPlacement | undefined,\n dir: \"ltr\" | \"rtl\",\n) {\n if (!placement) return\n //@ts-expect-error\n return placementMap[placement]?.[dir] ?? placement\n}\n\ninterface DrawerOptions {\n /**\n * The placement of the drawer\n * @default \"right\"\n */\n placement?: DrawerPlacement\n /**\n * If `true` and drawer's placement is `top` or `bottom`,\n * the drawer will occupy the viewport height (100vh)\n */\n isFullHeight?: boolean\n}\n\nexport interface DrawerProps\n extends DrawerOptions,\n ThemingProps<\"Drawer\">,\n Omit<\n ModalProps,\n \"scrollBehavior\" | \"motionPreset\" | \"isCentered\" | keyof ThemingProps\n > {}\n\n/**\n * The Drawer component is a panel that slides out from the edge of the screen.\n * It can be useful when you need users to complete a task or view some details without leaving the current page.\n *\n * @see Docs https://chakra-ui.com/docs/components/drawer\n */\nexport function Drawer(props: DrawerProps) {\n const {\n isOpen,\n onClose,\n placement: placementProp = \"right\",\n children,\n ...rest\n } = props\n\n const theme = useTheme()\n const drawerStyleConfig = theme.components?.Drawer\n const placement = getDrawerPlacement(placementProp, theme.direction)\n\n return (\n \n \n {children}\n \n \n )\n}\n\nexport { ModalBody as DrawerBody } from \"./modal-body\"\nexport { ModalCloseButton as DrawerCloseButton } from \"./modal-close-button\"\nexport { ModalFooter as DrawerFooter } from \"./modal-footer\"\nexport { ModalHeader as DrawerHeader } from \"./modal-header\"\nexport { ModalOverlay as DrawerOverlay } from \"./modal-overlay\"\n\nexport { useDrawerContext }\n","import type { Target, TargetAndTransition, Transition } from \"framer-motion\"\n\nexport type TransitionProperties = {\n /**\n * Custom `transition` definition for `enter` and `exit`\n */\n transition?: TransitionConfig\n /**\n * Custom `transitionEnd` definition for `enter` and `exit`\n */\n transitionEnd?: TransitionEndConfig\n /**\n * Custom `delay` definition for `enter` and `exit`\n */\n delay?: number | DelayConfig\n}\n\ntype TargetResolver = (\n props: P & TransitionProperties,\n) => TargetAndTransition\n\ntype Variant
= TargetAndTransition | TargetResolver
\n\nexport type Variants
= {\n enter: Variant
\n exit: Variant
\n initial?: Variant
\n}\n\ntype WithMotionState
= Partial>\n\nexport type TransitionConfig = WithMotionState\n\nexport type TransitionEndConfig = WithMotionState\n\nexport type DelayConfig = WithMotionState\n\nexport const TRANSITION_EASINGS = {\n ease: [0.25, 0.1, 0.25, 1],\n easeIn: [0.4, 0, 1, 1],\n easeOut: [0, 0, 0.2, 1],\n easeInOut: [0.4, 0, 0.2, 1],\n} as const\n\nexport const TRANSITION_VARIANTS = {\n scale: {\n enter: { scale: 1 },\n exit: { scale: 0.95 },\n },\n fade: {\n enter: { opacity: 1 },\n exit: { opacity: 0 },\n },\n pushLeft: {\n enter: { x: \"100%\" },\n exit: { x: \"-30%\" },\n },\n pushRight: {\n enter: { x: \"-100%\" },\n exit: { x: \"30%\" },\n },\n pushUp: {\n enter: { y: \"100%\" },\n exit: { y: \"-30%\" },\n },\n pushDown: {\n enter: { y: \"-100%\" },\n exit: { y: \"30%\" },\n },\n slideLeft: {\n position: { left: 0, top: 0, bottom: 0, width: \"100%\" },\n enter: { x: 0, y: 0 },\n exit: { x: \"-100%\", y: 0 },\n },\n slideRight: {\n position: { right: 0, top: 0, bottom: 0, width: \"100%\" },\n enter: { x: 0, y: 0 },\n exit: { x: \"100%\", y: 0 },\n },\n slideUp: {\n position: { top: 0, left: 0, right: 0, maxWidth: \"100vw\" },\n enter: { x: 0, y: 0 },\n exit: { x: 0, y: \"-100%\" },\n },\n slideDown: {\n position: { bottom: 0, left: 0, right: 0, maxWidth: \"100vw\" },\n enter: { x: 0, y: 0 },\n exit: { x: 0, y: \"100%\" },\n },\n}\n\nexport type SlideDirection = \"top\" | \"left\" | \"bottom\" | \"right\"\n\nexport function getSlideTransition(options?: { direction?: SlideDirection }) {\n const side = options?.direction ?? \"right\"\n switch (side) {\n case \"right\":\n return TRANSITION_VARIANTS.slideRight\n case \"left\":\n return TRANSITION_VARIANTS.slideLeft\n case \"bottom\":\n return TRANSITION_VARIANTS.slideDown\n case \"top\":\n return TRANSITION_VARIANTS.slideUp\n default:\n return TRANSITION_VARIANTS.slideRight\n }\n}\n\nexport const TRANSITION_DEFAULTS = {\n enter: {\n duration: 0.2,\n ease: TRANSITION_EASINGS.easeOut,\n },\n exit: {\n duration: 0.1,\n ease: TRANSITION_EASINGS.easeIn,\n },\n} as const\n\nexport type WithTransitionConfig = Omit &\n TransitionProperties & {\n /**\n * If `true`, the element will unmount when `in={false}` and animation is done\n */\n unmountOnExit?: boolean\n /**\n * Show the component; triggers when enter or exit states\n */\n in?: boolean\n }\n\nexport const withDelay = {\n enter: (\n transition: Transition,\n delay?: number | DelayConfig,\n ): Transition & { delay: number | undefined } => ({\n ...transition,\n delay: typeof delay === \"number\" ? delay : delay?.[\"enter\"],\n }),\n exit: (\n transition: Transition,\n delay?: number | DelayConfig,\n ): Transition & { delay: number | undefined } => ({\n ...transition,\n delay: typeof delay === \"number\" ? delay : delay?.[\"exit\"],\n }),\n}\n","import { cx } from \"@chakra-ui/shared-utils\"\nimport {\n AnimatePresence,\n HTMLMotionProps,\n motion,\n Variants as _Variants,\n} from \"framer-motion\"\nimport { forwardRef } from \"react\"\nimport {\n TRANSITION_DEFAULTS,\n Variants,\n withDelay,\n WithTransitionConfig,\n} from \"./transition-utils\"\n\nexport interface FadeProps\n extends WithTransitionConfig> {}\n\nconst variants: Variants = {\n enter: ({ transition, transitionEnd, delay } = {}) => ({\n opacity: 1,\n transition:\n transition?.enter ?? withDelay.enter(TRANSITION_DEFAULTS.enter, delay),\n transitionEnd: transitionEnd?.enter,\n }),\n exit: ({ transition, transitionEnd, delay } = {}) => ({\n opacity: 0,\n transition:\n transition?.exit ?? withDelay.exit(TRANSITION_DEFAULTS.exit, delay),\n transitionEnd: transitionEnd?.exit,\n }),\n}\n\nexport const fadeConfig: HTMLMotionProps<\"div\"> = {\n initial: \"exit\",\n animate: \"enter\",\n exit: \"exit\",\n variants: variants as _Variants,\n}\n\nexport const Fade = forwardRef(function Fade(\n props,\n ref,\n) {\n const {\n unmountOnExit,\n in: isOpen,\n className,\n transition,\n transitionEnd,\n delay,\n ...rest\n } = props\n\n const animate = isOpen || unmountOnExit ? \"enter\" : \"exit\"\n const show = unmountOnExit ? isOpen && unmountOnExit : true\n\n const custom = { transition, transitionEnd, delay }\n\n return (\n \n {show && (\n \n )}\n \n )\n})\n\nFade.displayName = \"Fade\"\n","import { cx } from \"@chakra-ui/shared-utils\"\nimport {\n chakra,\n ChakraProps,\n SystemStyleObject,\n forwardRef,\n} from \"@chakra-ui/system\"\nimport { fadeConfig } from \"@chakra-ui/transition\"\nimport { motion, HTMLMotionProps } from \"framer-motion\"\n\nimport { useModalStyles, useModalContext } from \"./modal\"\n\nconst MotionDiv = chakra(motion.div)\n\nexport interface ModalOverlayProps\n extends Omit, \"color\" | \"transition\">,\n ChakraProps {\n children?: React.ReactNode\n motionProps?: HTMLMotionProps<\"div\">\n}\n\n/**\n * ModalOverlay renders a backdrop behind the modal. It is\n * also used as a wrapper for the modal content for better positioning.\n *\n * @see Docs https://chakra-ui.com/modal\n */\nexport const ModalOverlay = forwardRef(\n (props, ref) => {\n const { className, transition, motionProps: _motionProps, ...rest } = props\n const _className = cx(\"chakra-modal__overlay\", className)\n\n const styles = useModalStyles()\n const overlayStyle: SystemStyleObject = {\n pos: \"fixed\",\n left: \"0\",\n top: \"0\",\n w: \"100vw\",\n h: \"100vh\",\n ...styles.overlay,\n }\n\n const { motionPreset } = useModalContext()\n const defaultMotionProps: HTMLMotionProps<\"div\"> =\n motionPreset === \"none\" ? {} : fadeConfig\n\n const motionProps: any = _motionProps || defaultMotionProps\n\n return (\n \n )\n },\n)\n\nModalOverlay.displayName = \"ModalOverlay\"\n","/**\n * defines a focus group\n */\nexport var FOCUS_GROUP = 'data-focus-lock';\n/**\n * disables element discovery inside a group marked by key\n */\nexport var FOCUS_DISABLED = 'data-focus-lock-disabled';\n/**\n * allows uncontrolled focus within the marked area, effectively disabling focus lock for it's content\n */\nexport var FOCUS_ALLOW = 'data-no-focus-lock';\n/**\n * instructs autofocus engine to pick default autofocus inside a given node\n * can be set on the element or container\n */\nexport var FOCUS_AUTO = 'data-autofocus-inside';\n/**\n * instructs autofocus to ignore elements within a given node\n * can be set on the element or container\n */\nexport var FOCUS_NO_AUTOFOCUS = 'data-no-autofocus';\n","/**\n * Assigns a value for a given ref, no matter of the ref format\n * @param {RefObject} ref - a callback function or ref object\n * @param value - a new value\n *\n * @see https://github.com/theKashey/use-callback-ref#assignref\n * @example\n * const refObject = useRef();\n * const refFn = (ref) => {....}\n *\n * assignRef(refObject, \"refValue\");\n * assignRef(refFn, \"refValue\");\n */\nexport function assignRef(ref, value) {\n if (typeof ref === 'function') {\n ref(value);\n }\n else if (ref) {\n ref.current = value;\n }\n return ref;\n}\n","import * as React from 'react';\nimport { assignRef } from './assignRef';\nimport { useCallbackRef } from './useRef';\nvar useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;\nvar currentValues = new WeakMap();\n/**\n * Merges two or more refs together providing a single interface to set their value\n * @param {RefObject|Ref} refs\n * @returns {MutableRefObject} - a new ref, which translates all changes to {refs}\n *\n * @see {@link mergeRefs} a version without buit-in memoization\n * @see https://github.com/theKashey/use-callback-ref#usemergerefs\n * @example\n * const Component = React.forwardRef((props, ref) => {\n * const ownRef = useRef();\n * const domRef = useMergeRefs([ref, ownRef]); // 👈 merge together\n * return ...
\n * }\n */\nexport function useMergeRefs(refs, defaultValue) {\n var callbackRef = useCallbackRef(defaultValue || null, function (newValue) {\n return refs.forEach(function (ref) { return assignRef(ref, newValue); });\n });\n // handle refs changes - added or removed\n useIsomorphicLayoutEffect(function () {\n var oldValue = currentValues.get(callbackRef);\n if (oldValue) {\n var prevRefs_1 = new Set(oldValue);\n var nextRefs_1 = new Set(refs);\n var current_1 = callbackRef.current;\n prevRefs_1.forEach(function (ref) {\n if (!nextRefs_1.has(ref)) {\n assignRef(ref, null);\n }\n });\n nextRefs_1.forEach(function (ref) {\n if (!prevRefs_1.has(ref)) {\n assignRef(ref, current_1);\n }\n });\n }\n currentValues.set(callbackRef, refs);\n }, [refs]);\n return callbackRef;\n}\n","import { useState } from 'react';\n/**\n * creates a MutableRef with ref change callback\n * @param initialValue - initial ref value\n * @param {Function} callback - a callback to run when value changes\n *\n * @example\n * const ref = useCallbackRef(0, (newValue, oldValue) => console.log(oldValue, '->', newValue);\n * ref.current = 1;\n * // prints 0 -> 1\n *\n * @see https://reactjs.org/docs/hooks-reference.html#useref\n * @see https://github.com/theKashey/use-callback-ref#usecallbackref---to-replace-reactuseref\n * @returns {MutableRefObject}\n */\nexport function useCallbackRef(initialValue, callback) {\n var ref = useState(function () { return ({\n // value\n value: initialValue,\n // last callback\n callback: callback,\n // \"memoized\" public interface\n facade: {\n get current() {\n return ref.value;\n },\n set current(value) {\n var last = ref.value;\n if (last !== value) {\n ref.value = value;\n ref.callback(value, last);\n }\n },\n },\n }); })[0];\n // update callback\n ref.callback = callback;\n return ref.facade;\n}\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nexport var hiddenGuard = {\n width: '1px',\n height: '0px',\n padding: 0,\n overflow: 'hidden',\n position: 'fixed',\n top: '1px',\n left: '1px'\n};\nvar InFocusGuard = function InFocusGuard(_ref) {\n var _ref$children = _ref.children,\n children = _ref$children === void 0 ? null : _ref$children;\n return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(\"div\", {\n key: \"guard-first\",\n \"data-focus-guard\": true,\n \"data-focus-auto-guard\": true,\n style: hiddenGuard\n }), children, children && /*#__PURE__*/React.createElement(\"div\", {\n key: \"guard-last\",\n \"data-focus-guard\": true,\n \"data-focus-auto-guard\": true,\n style: hiddenGuard\n }));\n};\nInFocusGuard.propTypes = process.env.NODE_ENV !== \"production\" ? {\n children: PropTypes.node\n} : {};\nexport default InFocusGuard;","import { __assign } from \"tslib\";\nfunction ItoI(a) {\n return a;\n}\nfunction innerCreateMedium(defaults, middleware) {\n if (middleware === void 0) { middleware = ItoI; }\n var buffer = [];\n var assigned = false;\n var medium = {\n read: function () {\n if (assigned) {\n throw new Error('Sidecar: could not `read` from an `assigned` medium. `read` could be used only with `useMedium`.');\n }\n if (buffer.length) {\n return buffer[buffer.length - 1];\n }\n return defaults;\n },\n useMedium: function (data) {\n var item = middleware(data, assigned);\n buffer.push(item);\n return function () {\n buffer = buffer.filter(function (x) { return x !== item; });\n };\n },\n assignSyncMedium: function (cb) {\n assigned = true;\n while (buffer.length) {\n var cbs = buffer;\n buffer = [];\n cbs.forEach(cb);\n }\n buffer = {\n push: function (x) { return cb(x); },\n filter: function () { return buffer; },\n };\n },\n assignMedium: function (cb) {\n assigned = true;\n var pendingQueue = [];\n if (buffer.length) {\n var cbs = buffer;\n buffer = [];\n cbs.forEach(cb);\n pendingQueue = buffer;\n }\n var executeQueue = function () {\n var cbs = pendingQueue;\n pendingQueue = [];\n cbs.forEach(cb);\n };\n var cycle = function () { return Promise.resolve().then(executeQueue); };\n cycle();\n buffer = {\n push: function (x) {\n pendingQueue.push(x);\n cycle();\n },\n filter: function (filter) {\n pendingQueue = pendingQueue.filter(filter);\n return buffer;\n },\n };\n },\n };\n return medium;\n}\nexport function createMedium(defaults, middleware) {\n if (middleware === void 0) { middleware = ItoI; }\n return innerCreateMedium(defaults, middleware);\n}\n// eslint-disable-next-line @typescript-eslint/ban-types\nexport function createSidecarMedium(options) {\n if (options === void 0) { options = {}; }\n var medium = innerCreateMedium(null);\n medium.options = __assign({ async: true, ssr: false }, options);\n return medium;\n}\n","import { createMedium, createSidecarMedium } from 'use-sidecar';\nexport var mediumFocus = createMedium({}, function (_ref) {\n var target = _ref.target,\n currentTarget = _ref.currentTarget;\n return {\n target: target,\n currentTarget: currentTarget\n };\n});\nexport var mediumBlur = createMedium();\nexport var mediumEffect = createMedium();\nexport var mediumSidecar = createSidecarMedium({\n async: true,\n ssr: typeof document !== 'undefined'\n});","import { createContext } from 'react';\nexport var focusScope = /*#__PURE__*/createContext(undefined);","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport * as React from 'react';\nimport { node, bool, string, any, arrayOf, oneOfType, object, func } from 'prop-types';\nimport * as constants from 'focus-lock/constants';\nimport { useMergeRefs } from 'use-callback-ref';\nimport { hiddenGuard } from './FocusGuard';\nimport { mediumFocus, mediumBlur, mediumSidecar } from './medium';\nimport { focusScope } from './scope';\nvar emptyArray = [];\nvar FocusLock = /*#__PURE__*/React.forwardRef(function FocusLockUI(props, parentRef) {\n var _extends2;\n var _React$useState = React.useState(),\n realObserved = _React$useState[0],\n setObserved = _React$useState[1];\n var observed = React.useRef();\n var isActive = React.useRef(false);\n var originalFocusedElement = React.useRef(null);\n var _React$useState2 = React.useState({}),\n update = _React$useState2[1];\n var children = props.children,\n _props$disabled = props.disabled,\n disabled = _props$disabled === void 0 ? false : _props$disabled,\n _props$noFocusGuards = props.noFocusGuards,\n noFocusGuards = _props$noFocusGuards === void 0 ? false : _props$noFocusGuards,\n _props$persistentFocu = props.persistentFocus,\n persistentFocus = _props$persistentFocu === void 0 ? false : _props$persistentFocu,\n _props$crossFrame = props.crossFrame,\n crossFrame = _props$crossFrame === void 0 ? true : _props$crossFrame,\n _props$autoFocus = props.autoFocus,\n autoFocus = _props$autoFocus === void 0 ? true : _props$autoFocus,\n allowTextSelection = props.allowTextSelection,\n group = props.group,\n className = props.className,\n whiteList = props.whiteList,\n hasPositiveIndices = props.hasPositiveIndices,\n _props$shards = props.shards,\n shards = _props$shards === void 0 ? emptyArray : _props$shards,\n _props$as = props.as,\n Container = _props$as === void 0 ? 'div' : _props$as,\n _props$lockProps = props.lockProps,\n containerProps = _props$lockProps === void 0 ? {} : _props$lockProps,\n SideCar = props.sideCar,\n _props$returnFocus = props.returnFocus,\n shouldReturnFocus = _props$returnFocus === void 0 ? false : _props$returnFocus,\n focusOptions = props.focusOptions,\n onActivationCallback = props.onActivation,\n onDeactivationCallback = props.onDeactivation;\n var _React$useState3 = React.useState({}),\n id = _React$useState3[0];\n var onActivation = React.useCallback(function (_ref) {\n var captureFocusRestore = _ref.captureFocusRestore;\n if (!originalFocusedElement.current) {\n var _document;\n var activeElement = (_document = document) == null ? void 0 : _document.activeElement;\n originalFocusedElement.current = activeElement;\n if (activeElement !== document.body) {\n originalFocusedElement.current = captureFocusRestore(activeElement);\n }\n }\n if (observed.current && onActivationCallback) {\n onActivationCallback(observed.current);\n }\n isActive.current = true;\n update();\n }, [onActivationCallback]);\n var onDeactivation = React.useCallback(function () {\n isActive.current = false;\n if (onDeactivationCallback) {\n onDeactivationCallback(observed.current);\n }\n update();\n }, [onDeactivationCallback]);\n var returnFocus = React.useCallback(function (allowDefer) {\n var focusRestore = originalFocusedElement.current;\n if (focusRestore) {\n var returnFocusTo = (typeof focusRestore === 'function' ? focusRestore() : focusRestore) || document.body;\n var howToReturnFocus = typeof shouldReturnFocus === 'function' ? shouldReturnFocus(returnFocusTo) : shouldReturnFocus;\n if (howToReturnFocus) {\n var returnFocusOptions = typeof howToReturnFocus === 'object' ? howToReturnFocus : undefined;\n originalFocusedElement.current = null;\n if (allowDefer) {\n Promise.resolve().then(function () {\n return returnFocusTo.focus(returnFocusOptions);\n });\n } else {\n returnFocusTo.focus(returnFocusOptions);\n }\n }\n }\n }, [shouldReturnFocus]);\n var onFocus = React.useCallback(function (event) {\n if (isActive.current) {\n mediumFocus.useMedium(event);\n }\n }, []);\n var onBlur = mediumBlur.useMedium;\n var setObserveNode = React.useCallback(function (newObserved) {\n if (observed.current !== newObserved) {\n observed.current = newObserved;\n setObserved(newObserved);\n }\n }, []);\n if (process.env.NODE_ENV !== 'production') {\n if (typeof allowTextSelection !== 'undefined') {\n console.warn('React-Focus-Lock: allowTextSelection is deprecated and enabled by default');\n }\n React.useEffect(function () {\n if (!observed.current && typeof Container !== 'string') {\n console.error('FocusLock: could not obtain ref to internal node');\n }\n }, []);\n }\n var lockProps = _extends((_extends2 = {}, _extends2[constants.FOCUS_DISABLED] = disabled && 'disabled', _extends2[constants.FOCUS_GROUP] = group, _extends2), containerProps);\n var hasLeadingGuards = noFocusGuards !== true;\n var hasTailingGuards = hasLeadingGuards && noFocusGuards !== 'tail';\n var mergedRef = useMergeRefs([parentRef, setObserveNode]);\n var focusScopeValue = React.useMemo(function () {\n return {\n observed: observed,\n shards: shards,\n enabled: !disabled,\n active: isActive.current\n };\n }, [disabled, isActive.current, shards, realObserved]);\n return /*#__PURE__*/React.createElement(React.Fragment, null, hasLeadingGuards && [\n /*#__PURE__*/\n React.createElement(\"div\", {\n key: \"guard-first\",\n \"data-focus-guard\": true,\n tabIndex: disabled ? -1 : 0,\n style: hiddenGuard\n }), hasPositiveIndices ? /*#__PURE__*/React.createElement(\"div\", {\n key: \"guard-nearest\",\n \"data-focus-guard\": true,\n tabIndex: disabled ? -1 : 1,\n style: hiddenGuard\n }) : null], !disabled && /*#__PURE__*/React.createElement(SideCar, {\n id: id,\n sideCar: mediumSidecar,\n observed: realObserved,\n disabled: disabled,\n persistentFocus: persistentFocus,\n crossFrame: crossFrame,\n autoFocus: autoFocus,\n whiteList: whiteList,\n shards: shards,\n onActivation: onActivation,\n onDeactivation: onDeactivation,\n returnFocus: returnFocus,\n focusOptions: focusOptions\n }), /*#__PURE__*/React.createElement(Container, _extends({\n ref: mergedRef\n }, lockProps, {\n className: className,\n onBlur: onBlur,\n onFocus: onFocus\n }), /*#__PURE__*/React.createElement(focusScope.Provider, {\n value: focusScopeValue\n }, children)), hasTailingGuards && /*#__PURE__*/React.createElement(\"div\", {\n \"data-focus-guard\": true,\n tabIndex: disabled ? -1 : 0,\n style: hiddenGuard\n }));\n});\nFocusLock.propTypes = process.env.NODE_ENV !== \"production\" ? {\n children: node,\n disabled: bool,\n returnFocus: oneOfType([bool, object, func]),\n focusOptions: object,\n noFocusGuards: bool,\n hasPositiveIndices: bool,\n allowTextSelection: bool,\n autoFocus: bool,\n persistentFocus: bool,\n crossFrame: bool,\n group: string,\n className: string,\n whiteList: func,\n shards: arrayOf(any),\n as: oneOfType([string, func, object]),\n lockProps: object,\n onActivation: func,\n onDeactivation: func,\n sideCar: any.isRequired\n} : {};\nexport default FocusLock;","function _setPrototypeOf(t, e) {\n return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {\n return t.__proto__ = e, t;\n }, _setPrototypeOf(t, e);\n}\nexport { _setPrototypeOf as default };","function _typeof(o) {\n \"@babel/helpers - typeof\";\n\n return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) {\n return typeof o;\n } : function (o) {\n return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o;\n }, _typeof(o);\n}\nexport { _typeof as default };","import _typeof from \"./typeof.js\";\nimport toPrimitive from \"./toPrimitive.js\";\nfunction toPropertyKey(t) {\n var i = toPrimitive(t, \"string\");\n return \"symbol\" == _typeof(i) ? i : i + \"\";\n}\nexport { toPropertyKey as default };","import _typeof from \"./typeof.js\";\nfunction toPrimitive(t, r) {\n if (\"object\" != _typeof(t) || !t) return t;\n var e = t[Symbol.toPrimitive];\n if (void 0 !== e) {\n var i = e.call(t, r || \"default\");\n if (\"object\" != _typeof(i)) return i;\n throw new TypeError(\"@@toPrimitive must return a primitive value.\");\n }\n return (\"string\" === r ? String : Number)(t);\n}\nexport { toPrimitive as default };","import _inheritsLoose from '@babel/runtime/helpers/esm/inheritsLoose';\nimport _defineProperty from '@babel/runtime/helpers/esm/defineProperty';\nimport React, { PureComponent } from 'react';\n\nfunction withSideEffect(reducePropsToState, handleStateChangeOnClient) {\n if (process.env.NODE_ENV !== \"production\") {\n if (typeof reducePropsToState !== 'function') {\n throw new Error('Expected reducePropsToState to be a function.');\n }\n\n if (typeof handleStateChangeOnClient !== 'function') {\n throw new Error('Expected handleStateChangeOnClient to be a function.');\n }\n }\n\n function getDisplayName(WrappedComponent) {\n return WrappedComponent.displayName || WrappedComponent.name || 'Component';\n }\n\n return function wrap(WrappedComponent) {\n if (process.env.NODE_ENV !== \"production\") {\n if (typeof WrappedComponent !== 'function') {\n throw new Error('Expected WrappedComponent to be a React component.');\n }\n }\n\n var mountedInstances = [];\n var state;\n\n function emitChange() {\n state = reducePropsToState(mountedInstances.map(function (instance) {\n return instance.props;\n }));\n handleStateChangeOnClient(state);\n }\n\n var SideEffect = /*#__PURE__*/function (_PureComponent) {\n _inheritsLoose(SideEffect, _PureComponent);\n\n function SideEffect() {\n return _PureComponent.apply(this, arguments) || this;\n }\n\n // Try to use displayName of wrapped component\n SideEffect.peek = function peek() {\n return state;\n };\n\n var _proto = SideEffect.prototype;\n\n _proto.componentDidMount = function componentDidMount() {\n mountedInstances.push(this);\n emitChange();\n };\n\n _proto.componentDidUpdate = function componentDidUpdate() {\n emitChange();\n };\n\n _proto.componentWillUnmount = function componentWillUnmount() {\n var index = mountedInstances.indexOf(this);\n mountedInstances.splice(index, 1);\n emitChange();\n };\n\n _proto.render = function render() {\n return /*#__PURE__*/React.createElement(WrappedComponent, this.props);\n };\n\n return SideEffect;\n }(PureComponent);\n\n _defineProperty(SideEffect, \"displayName\", \"SideEffect(\" + getDisplayName(WrappedComponent) + \")\");\n\n return SideEffect;\n };\n}\n\nexport default withSideEffect;\n","import setPrototypeOf from \"./setPrototypeOf.js\";\nfunction _inheritsLoose(t, o) {\n t.prototype = Object.create(o.prototype), t.prototype.constructor = t, setPrototypeOf(t, o);\n}\nexport { _inheritsLoose as default };","import toPropertyKey from \"./toPropertyKey.js\";\nfunction _defineProperty(e, r, t) {\n return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {\n value: t,\n enumerable: !0,\n configurable: !0,\n writable: !0\n }) : e[r] = t, e;\n}\nexport { _defineProperty as default };","/*\nIE11 support\n */\nexport var toArray = function (a) {\n var ret = Array(a.length);\n for (var i = 0; i < a.length; ++i) {\n ret[i] = a[i];\n }\n return ret;\n};\nexport var asArray = function (a) { return (Array.isArray(a) ? a : [a]); };\nexport var getFirst = function (a) { return (Array.isArray(a) ? a[0] : a); };\n","import { FOCUS_NO_AUTOFOCUS } from '../constants';\nvar isElementHidden = function (node) {\n // we can measure only \"elements\"\n // consider others as \"visible\"\n if (node.nodeType !== Node.ELEMENT_NODE) {\n return false;\n }\n var computedStyle = window.getComputedStyle(node, null);\n if (!computedStyle || !computedStyle.getPropertyValue) {\n return false;\n }\n return (computedStyle.getPropertyValue('display') === 'none' || computedStyle.getPropertyValue('visibility') === 'hidden');\n};\nvar getParentNode = function (node) {\n // DOCUMENT_FRAGMENT_NODE can also point on ShadowRoot. In this case .host will point on the next node\n return node.parentNode && node.parentNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE\n ? // eslint-disable-next-line @typescript-eslint/no-explicit-any\n node.parentNode.host\n : node.parentNode;\n};\nvar isTopNode = function (node) {\n // @ts-ignore\n return node === document || (node && node.nodeType === Node.DOCUMENT_NODE);\n};\nvar isInert = function (node) { return node.hasAttribute('inert'); };\n/**\n * @see https://github.com/testing-library/jest-dom/blob/main/src/to-be-visible.js\n */\nvar isVisibleUncached = function (node, checkParent) {\n return !node || isTopNode(node) || (!isElementHidden(node) && !isInert(node) && checkParent(getParentNode(node)));\n};\nexport var isVisibleCached = function (visibilityCache, node) {\n var cached = visibilityCache.get(node);\n if (cached !== undefined) {\n return cached;\n }\n var result = isVisibleUncached(node, isVisibleCached.bind(undefined, visibilityCache));\n visibilityCache.set(node, result);\n return result;\n};\nvar isAutoFocusAllowedUncached = function (node, checkParent) {\n return node && !isTopNode(node) ? (isAutoFocusAllowed(node) ? checkParent(getParentNode(node)) : false) : true;\n};\nexport var isAutoFocusAllowedCached = function (cache, node) {\n var cached = cache.get(node);\n if (cached !== undefined) {\n return cached;\n }\n var result = isAutoFocusAllowedUncached(node, isAutoFocusAllowedCached.bind(undefined, cache));\n cache.set(node, result);\n return result;\n};\nexport var getDataset = function (node) {\n // @ts-ignore\n return node.dataset;\n};\nexport var isHTMLButtonElement = function (node) { return node.tagName === 'BUTTON'; };\nexport var isHTMLInputElement = function (node) { return node.tagName === 'INPUT'; };\nexport var isRadioElement = function (node) {\n return isHTMLInputElement(node) && node.type === 'radio';\n};\nexport var notHiddenInput = function (node) {\n return !((isHTMLInputElement(node) || isHTMLButtonElement(node)) && (node.type === 'hidden' || node.disabled));\n};\nexport var isAutoFocusAllowed = function (node) {\n var attribute = node.getAttribute(FOCUS_NO_AUTOFOCUS);\n return ![true, 'true', ''].includes(attribute);\n};\nexport var isGuard = function (node) { var _a; return Boolean(node && ((_a = getDataset(node)) === null || _a === void 0 ? void 0 : _a.focusGuard)); };\nexport var isNotAGuard = function (node) { return !isGuard(node); };\nexport var isDefined = function (x) { return Boolean(x); };\n","import { toArray } from './array';\nexport var tabSort = function (a, b) {\n var aTab = Math.max(0, a.tabIndex);\n var bTab = Math.max(0, b.tabIndex);\n var tabDiff = aTab - bTab;\n var indexDiff = a.index - b.index;\n if (tabDiff) {\n if (!aTab) {\n return 1;\n }\n if (!bTab) {\n return -1;\n }\n }\n return tabDiff || indexDiff;\n};\nvar getTabIndex = function (node) {\n if (node.tabIndex < 0) {\n // all \"focusable\" elements are already preselected\n // but some might have implicit negative tabIndex\n // return 0 for
\n )}\n \n );\n\n export default Component;\n ```\n\n ## Plain children\n\n You can pass any element to the ``, and it will handle creating the\n wrapping DOM element. Add a handler to the `onChange` method, and control the\n state in your own component. Any extra props you add to `` will be\n passed to the HTML element, allowing you set the `className`, `style`, etc.\n\n ```jsx\n import { InView } from 'react-intersection-observer';\n\n const Component = () => (\n console.log('Inview:', inView)}>\n Plain children are always rendered. Use onChange to monitor state.
\n \n );\n\n export default Component;\n ```\n */\nexport class InView extends React.Component<\n IntersectionObserverProps | PlainChildrenProps,\n State\n> {\n node: Element | null = null;\n _unobserveCb: (() => void) | null = null;\n\n constructor(props: IntersectionObserverProps | PlainChildrenProps) {\n super(props);\n this.state = {\n inView: !!props.initialInView,\n entry: undefined,\n };\n }\n\n componentDidMount() {\n this.unobserve();\n this.observeNode();\n }\n\n componentDidUpdate(prevProps: IntersectionObserverProps) {\n // If a IntersectionObserver option changed, reinit the observer\n if (\n prevProps.rootMargin !== this.props.rootMargin ||\n prevProps.root !== this.props.root ||\n prevProps.threshold !== this.props.threshold ||\n prevProps.skip !== this.props.skip ||\n prevProps.trackVisibility !== this.props.trackVisibility ||\n prevProps.delay !== this.props.delay\n ) {\n this.unobserve();\n this.observeNode();\n }\n }\n\n componentWillUnmount() {\n this.unobserve();\n }\n\n observeNode() {\n if (!this.node || this.props.skip) return;\n const {\n threshold,\n root,\n rootMargin,\n trackVisibility,\n delay,\n fallbackInView,\n } = this.props;\n\n this._unobserveCb = observe(\n this.node,\n this.handleChange,\n {\n threshold,\n root,\n rootMargin,\n // @ts-ignore\n trackVisibility,\n // @ts-ignore\n delay,\n },\n fallbackInView,\n );\n }\n\n unobserve() {\n if (this._unobserveCb) {\n this._unobserveCb();\n this._unobserveCb = null;\n }\n }\n\n handleNode = (node?: Element | null) => {\n if (this.node) {\n // Clear the old observer, before we start observing a new element\n this.unobserve();\n\n if (!node && !this.props.triggerOnce && !this.props.skip) {\n // Reset the state if we get a new node, and we aren't ignoring updates\n this.setState({ inView: !!this.props.initialInView, entry: undefined });\n }\n }\n\n this.node = node ? node : null;\n this.observeNode();\n };\n\n handleChange = (inView: boolean, entry: IntersectionObserverEntry) => {\n if (inView && this.props.triggerOnce) {\n // If `triggerOnce` is true, we should stop observing the element.\n this.unobserve();\n }\n if (!isPlainChildren(this.props)) {\n // Store the current State, so we can pass it to the children in the next render update\n // There's no reason to update the state for plain children, since it's not used in the rendering.\n this.setState({ inView, entry });\n }\n if (this.props.onChange) {\n // If the user is actively listening for onChange, always trigger it\n this.props.onChange(inView, entry);\n }\n };\n\n render() {\n const { children } = this.props;\n if (typeof children === \"function\") {\n const { inView, entry } = this.state;\n return children({ inView, entry, ref: this.handleNode });\n }\n\n const {\n as,\n triggerOnce,\n threshold,\n root,\n rootMargin,\n onChange,\n skip,\n trackVisibility,\n delay,\n initialInView,\n fallbackInView,\n ...props\n } = this.props as PlainChildrenProps;\n\n return React.createElement(\n as || \"div\",\n { ref: this.handleNode, ...props },\n children,\n );\n }\n}\n","import * as React from \"react\";\nimport type { InViewHookResponse, IntersectionOptions } from \"./index\";\nimport { observe } from \"./observe\";\n\ntype State = {\n inView: boolean;\n entry?: IntersectionObserverEntry;\n};\n\n/**\n * React Hooks make it easy to monitor the `inView` state of your components. Call\n * the `useInView` hook with the (optional) [options](#options) you need. It will\n * return an array containing a `ref`, the `inView` status and the current\n * [`entry`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry).\n * Assign the `ref` to the DOM element you want to monitor, and the hook will\n * report the status.\n *\n * @example\n * ```jsx\n * import React from 'react';\n * import { useInView } from 'react-intersection-observer';\n *\n * const Component = () => {\n * const { ref, inView, entry } = useInView({\n * threshold: 0,\n * });\n *\n * return (\n * \n *
{`Header inside viewport ${inView}.`}
\n *
\n * );\n * };\n * ```\n */\nexport function useInView({\n threshold,\n delay,\n trackVisibility,\n rootMargin,\n root,\n triggerOnce,\n skip,\n initialInView,\n fallbackInView,\n onChange,\n}: IntersectionOptions = {}): InViewHookResponse {\n const [ref, setRef] = React.useState(null);\n const callback = React.useRef();\n const [state, setState] = React.useState({\n inView: !!initialInView,\n entry: undefined,\n });\n\n // Store the onChange callback in a `ref`, so we can access the latest instance\n // inside the `useEffect`, but without triggering a rerender.\n callback.current = onChange;\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: threshold is not correctly detected as a dependency\n React.useEffect(\n () => {\n // Ensure we have node ref, and that we shouldn't skip observing\n if (skip || !ref) return;\n\n let unobserve: (() => void) | undefined;\n unobserve = observe(\n ref,\n (inView, entry) => {\n setState({\n inView,\n entry,\n });\n if (callback.current) callback.current(inView, entry);\n\n if (entry.isIntersecting && triggerOnce && unobserve) {\n // If it should only trigger once, unobserve the element after it's inView\n unobserve();\n unobserve = undefined;\n }\n },\n {\n root,\n rootMargin,\n threshold,\n // @ts-ignore\n trackVisibility,\n // @ts-ignore\n delay,\n },\n fallbackInView,\n );\n\n return () => {\n if (unobserve) {\n unobserve();\n }\n };\n },\n // We break the rule here, because we aren't including the actual `threshold` variable\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [\n // If the threshold is an array, convert it to a string, so it won't change between renders.\n Array.isArray(threshold) ? threshold.toString() : threshold,\n ref,\n root,\n rootMargin,\n triggerOnce,\n skip,\n trackVisibility,\n fallbackInView,\n delay,\n ],\n );\n\n const entryTarget = state.entry?.target;\n const previousEntryTarget = React.useRef();\n if (\n !ref &&\n entryTarget &&\n !triggerOnce &&\n !skip &&\n previousEntryTarget.current !== entryTarget\n ) {\n // If we don't have a node ref, then reset the state (unless the hook is set to only `triggerOnce` or `skip`)\n // This ensures we correctly reflect the current state - If you aren't observing anything, then nothing is inView\n previousEntryTarget.current = entryTarget;\n setState({\n inView: !!initialInView,\n entry: undefined,\n });\n }\n\n const result = [setRef, state.inView, state.entry] as InViewHookResponse;\n\n // Support object destructuring, by adding the specific values.\n result.ref = result[0];\n result.inView = result[1];\n result.entry = result[2];\n\n return result;\n}\n","import { Box, Flex, Text, Divider, useBreakpointValue } from '@chakra-ui/react';\nimport { motion, useAnimation } from 'framer-motion';\nimport { useState, useEffect } from 'react';\nimport { useInView } from 'react-intersection-observer';\n\ninterface ExpertiseBoxProps {\n title: string;\n text: string;\n color: string;\n icon: JSX.Element;\n index: number;\n isMiddle?: boolean;\n}\nconst MotionFlex = motion(Flex);\n\nconst ExpertiseBox = (props: ExpertiseBoxProps) => {\n const { title, text, color, icon, index, isMiddle } = props;\n const [hovered, setHovered] = useState(false);\n\n const isMobile = useBreakpointValue({ base: false, md: true });\n\n const controls = useAnimation();\n const { ref, inView } = useInView({\n triggerOnce: true,\n threshold: 0.1,\n });\n\n useEffect(() => {\n if (inView) {\n controls.start(\"visible\");\n }\n }, [controls, inView]);\n\n const desktopVariants = {\n hidden: { opacity: 0, y: 50 },\n visible: {\n opacity: 1,\n y: 0,\n transition: {\n delay: index * 0.2,\n type: \"spring\",\n stiffness: 100,\n },\n },\n };\n\n const mobileVariants = {\n hidden: { opacity: 0, x: index % 2 === 0 ? -50 : 50 },\n visible: {\n opacity: 1,\n x: 0,\n transition: {\n delay: index * 0.2,\n type: \"spring\",\n stiffness: 100,\n },\n },\n };\n\n return (\n \n {/* Header */}\n setHovered(true)}\n onMouseLeave={() => setHovered(false)}\n >\n {/* Icon */}\n \n \n {icon}\n \n \n\n {/* Title */}\n \n {title}\n \n \n\n {/* Details */}\n \n {/* H3 tag */}\n \n ![](\"image.png\")
: