@xanui/core 1.2.12 → 1.2.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/Transition/index.js
CHANGED
|
@@ -89,5 +89,5 @@
|
|
|
89
89
|
return child;
|
|
90
90
|
if (!rendered && disableInitialTransition && open)
|
|
91
91
|
return child;
|
|
92
|
-
return (jsxRuntime.jsx(index$1.default, {
|
|
92
|
+
return (jsxRuntime.jsx(index$1.default, { height: 0, overflow: 'hidden', position: "fixed", children: child }));
|
|
93
93
|
};exports.default=Transition;//# sourceMappingURL=index.js.map
|
package/Transition/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/Transition/index.tsx"],"sourcesContent":["import React, { ReactElement, cloneElement, Children, useState, useEffect, useId } from 'react';\nimport Tag from '../Tag';\nimport { animationEases } from '../hooks/useAnimation';\nimport { css } from '../css';\nimport { formatCSSProp } from 'oncss';\nimport { CSSProps } from '../css/types';\nimport * as variants from './variants'\nexport type TransitionVariantTypes = keyof typeof variants\n\nexport type TransitionElementProps = {\n height: number;\n width: number;\n rect: DOMRect | null\n}\n\nexport type TransitionState = \"open\" | \"opened\" | \"close\" | \"closed\"\n\nexport type TransitionProps = {\n children: ReactElement;\n open: boolean;\n variant: {\n from: CSSProps;\n to: CSSProps;\n } | TransitionVariantTypes;\n ease?: string;\n easing?: keyof typeof animationEases;\n duration?: number;\n delay?: number;\n disableInitialTransition?: boolean;\n onOpen?: () => void;\n onOpened?: () => void;\n onClose?: () => void;\n onClosed?: () => void;\n onState?: (state: TransitionState) => void;\n}\n\nconst Transition = ({ children, open, ...props }: TransitionProps) => {\n let { disableInitialTransition, variant, duration, delay, ease, easing, onOpen, onOpened, onClose, onClosed, onState } = props as TransitionProps\n let _ease = ease || (animationEases as any)[easing as any] || animationEases.easeBounceOut\n disableInitialTransition ??= false\n duration ??= 400\n variant ??= \"fade\"\n\n const id = useId().replace(/:/g, \"\")\n const [rendered, setRendered] = useState(false)\n const [initial, setInitial] = useState(false)\n const [transitionState, setTransitionState] = useState<TransitionState>(open ? (disableInitialTransition ? \"opened\" : \"open\") : \"closed\")\n const [element, setElement] = useState<TransitionElementProps>({\n height: 0,\n width: 0,\n rect: null\n });\n\n if (typeof variant === 'string') {\n variant = (variants as any)[variant](element)\n }\n\n let from = (variant as any).from\n let to = (variant as any).to\n\n const [_css, setCss] = useState(open ? to : from)\n\n useEffect(() => {\n const ele: HTMLElement = document.querySelector(`.trans-${id}`) as any\n if (ele) {\n setRendered(true)\n setElement({\n height: ele.clientHeight,\n width: ele.clientWidth,\n rect: ele.getBoundingClientRect()\n })\n if (!disableInitialTransition && open) {\n setCss(from)\n }\n }\n }, [])\n\n useEffect(() => {\n const ele: HTMLElement = document.querySelector(`.trans-${id}`) as any\n if (rendered && ele) {\n let stimer: any = null\n let etimer: any = null\n ele.ontransitionstart = () => {\n clearTimeout(stimer)\n stimer = setTimeout(() => {\n const isOpen = Array.from(ele.classList).includes(\"trans-open\");\n (onOpen && isOpen) && onOpen();\n (onClose && !isOpen) && onClose()\n onState && onState(isOpen ? \"open\" : \"close\")\n setTransitionState(isOpen ? \"open\" : \"close\")\n }, 1)\n }\n ele.ontransitionend = () => {\n clearTimeout(etimer)\n etimer = setTimeout(() => {\n const isOpen = Array.from(ele.classList).includes(\"trans-open\");\n (onOpened && isOpen) && onOpened();\n (onClosed && !isOpen) && onClosed();\n onState && onState(isOpen ? \"opened\" : \"closed\")\n setTransitionState(isOpen ? \"opened\" : \"closed\")\n }, 1)\n }\n }\n }, [rendered])\n\n useEffect(() => {\n if (rendered) {\n if (!initial) {\n setInitial(true)\n setTimeout(() => {\n setCss(open ? to : from)\n }, 50);\n } else {\n setCss(open ? to : from)\n }\n }\n }, [rendered, open, JSON.stringify(from), JSON.stringify(to)])\n\n let _: any = {}\n if (rendered) {\n let trans = ` ${duration}ms ${_ease} ${delay || 0}ms`\n _ = {\n ..._css,\n transition: Object.keys(_css || {}).map(k => formatCSSProp(k)).join(trans + \", \") + trans,\n }\n }\n\n const cls = css(_)\n if (!children || Array.isArray(children)) throw new Error(\"Invalid children in Transition\")\n const first: any = Children.toArray(children).shift();\n let classname = `${cls.classname} trans-${id} trans-${(open ? \"open\" : \"close\")} trans-state-${transitionState}`\n const child = cloneElement(first, { classNames: [classname] })\n if (rendered) return child\n if (!rendered && disableInitialTransition && open) return child\n\n return (\n <Tag\n
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/Transition/index.tsx"],"sourcesContent":["import React, { ReactElement, cloneElement, Children, useState, useEffect, useId } from 'react';\nimport Tag from '../Tag';\nimport { animationEases } from '../hooks/useAnimation';\nimport { css } from '../css';\nimport { formatCSSProp } from 'oncss';\nimport { CSSProps } from '../css/types';\nimport * as variants from './variants'\nexport type TransitionVariantTypes = keyof typeof variants\n\nexport type TransitionElementProps = {\n height: number;\n width: number;\n rect: DOMRect | null\n}\n\nexport type TransitionState = \"open\" | \"opened\" | \"close\" | \"closed\"\n\nexport type TransitionProps = {\n children: ReactElement;\n open: boolean;\n variant: {\n from: CSSProps;\n to: CSSProps;\n } | TransitionVariantTypes;\n ease?: string;\n easing?: keyof typeof animationEases;\n duration?: number;\n delay?: number;\n disableInitialTransition?: boolean;\n onOpen?: () => void;\n onOpened?: () => void;\n onClose?: () => void;\n onClosed?: () => void;\n onState?: (state: TransitionState) => void;\n}\n\nconst Transition = ({ children, open, ...props }: TransitionProps) => {\n let { disableInitialTransition, variant, duration, delay, ease, easing, onOpen, onOpened, onClose, onClosed, onState } = props as TransitionProps\n let _ease = ease || (animationEases as any)[easing as any] || animationEases.easeBounceOut\n disableInitialTransition ??= false\n duration ??= 400\n variant ??= \"fade\"\n\n const id = useId().replace(/:/g, \"\")\n const [rendered, setRendered] = useState(false)\n const [initial, setInitial] = useState(false)\n const [transitionState, setTransitionState] = useState<TransitionState>(open ? (disableInitialTransition ? \"opened\" : \"open\") : \"closed\")\n const [element, setElement] = useState<TransitionElementProps>({\n height: 0,\n width: 0,\n rect: null\n });\n\n if (typeof variant === 'string') {\n variant = (variants as any)[variant](element)\n }\n\n let from = (variant as any).from\n let to = (variant as any).to\n\n const [_css, setCss] = useState(open ? to : from)\n\n useEffect(() => {\n const ele: HTMLElement = document.querySelector(`.trans-${id}`) as any\n if (ele) {\n setRendered(true)\n setElement({\n height: ele.clientHeight,\n width: ele.clientWidth,\n rect: ele.getBoundingClientRect()\n })\n if (!disableInitialTransition && open) {\n setCss(from)\n }\n }\n }, [])\n\n useEffect(() => {\n const ele: HTMLElement = document.querySelector(`.trans-${id}`) as any\n if (rendered && ele) {\n let stimer: any = null\n let etimer: any = null\n ele.ontransitionstart = () => {\n clearTimeout(stimer)\n stimer = setTimeout(() => {\n const isOpen = Array.from(ele.classList).includes(\"trans-open\");\n (onOpen && isOpen) && onOpen();\n (onClose && !isOpen) && onClose()\n onState && onState(isOpen ? \"open\" : \"close\")\n setTransitionState(isOpen ? \"open\" : \"close\")\n }, 1)\n }\n ele.ontransitionend = () => {\n clearTimeout(etimer)\n etimer = setTimeout(() => {\n const isOpen = Array.from(ele.classList).includes(\"trans-open\");\n (onOpened && isOpen) && onOpened();\n (onClosed && !isOpen) && onClosed();\n onState && onState(isOpen ? \"opened\" : \"closed\")\n setTransitionState(isOpen ? \"opened\" : \"closed\")\n }, 1)\n }\n }\n }, [rendered])\n\n useEffect(() => {\n if (rendered) {\n if (!initial) {\n setInitial(true)\n setTimeout(() => {\n setCss(open ? to : from)\n }, 50);\n } else {\n setCss(open ? to : from)\n }\n }\n }, [rendered, open, JSON.stringify(from), JSON.stringify(to)])\n\n let _: any = {}\n if (rendered) {\n let trans = ` ${duration}ms ${_ease} ${delay || 0}ms`\n _ = {\n ..._css,\n transition: Object.keys(_css || {}).map(k => formatCSSProp(k)).join(trans + \", \") + trans,\n }\n }\n\n const cls = css(_)\n if (!children || Array.isArray(children)) throw new Error(\"Invalid children in Transition\")\n const first: any = Children.toArray(children).shift();\n let classname = `${cls.classname} trans-${id} trans-${(open ? \"open\" : \"close\")} trans-state-${transitionState}`\n const child = cloneElement(first, { classNames: [classname] })\n if (rendered) return child\n if (!rendered && disableInitialTransition && open) return child\n\n return (\n <Tag\n height={0}\n overflow={'hidden'}\n position=\"fixed\"\n >\n {child}\n </Tag>\n )\n}\n\n\nexport default Transition"],"names":["__rest","animationEases","useId","useState","useEffect","formatCSSProp","css","Children","cloneElement","_jsx","Tag"],"mappings":"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"}
|
package/Transition/index.mjs
CHANGED
|
@@ -89,5 +89,5 @@ import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import {useId,use
|
|
|
89
89
|
return child;
|
|
90
90
|
if (!rendered && disableInitialTransition && open)
|
|
91
91
|
return child;
|
|
92
|
-
return (jsx(Tag, {
|
|
92
|
+
return (jsx(Tag, { height: 0, overflow: 'hidden', position: "fixed", children: child }));
|
|
93
93
|
};export{Transition as default};//# sourceMappingURL=index.mjs.map
|
package/Transition/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/Transition/index.tsx"],"sourcesContent":["import React, { ReactElement, cloneElement, Children, useState, useEffect, useId } from 'react';\nimport Tag from '../Tag';\nimport { animationEases } from '../hooks/useAnimation';\nimport { css } from '../css';\nimport { formatCSSProp } from 'oncss';\nimport { CSSProps } from '../css/types';\nimport * as variants from './variants'\nexport type TransitionVariantTypes = keyof typeof variants\n\nexport type TransitionElementProps = {\n height: number;\n width: number;\n rect: DOMRect | null\n}\n\nexport type TransitionState = \"open\" | \"opened\" | \"close\" | \"closed\"\n\nexport type TransitionProps = {\n children: ReactElement;\n open: boolean;\n variant: {\n from: CSSProps;\n to: CSSProps;\n } | TransitionVariantTypes;\n ease?: string;\n easing?: keyof typeof animationEases;\n duration?: number;\n delay?: number;\n disableInitialTransition?: boolean;\n onOpen?: () => void;\n onOpened?: () => void;\n onClose?: () => void;\n onClosed?: () => void;\n onState?: (state: TransitionState) => void;\n}\n\nconst Transition = ({ children, open, ...props }: TransitionProps) => {\n let { disableInitialTransition, variant, duration, delay, ease, easing, onOpen, onOpened, onClose, onClosed, onState } = props as TransitionProps\n let _ease = ease || (animationEases as any)[easing as any] || animationEases.easeBounceOut\n disableInitialTransition ??= false\n duration ??= 400\n variant ??= \"fade\"\n\n const id = useId().replace(/:/g, \"\")\n const [rendered, setRendered] = useState(false)\n const [initial, setInitial] = useState(false)\n const [transitionState, setTransitionState] = useState<TransitionState>(open ? (disableInitialTransition ? \"opened\" : \"open\") : \"closed\")\n const [element, setElement] = useState<TransitionElementProps>({\n height: 0,\n width: 0,\n rect: null\n });\n\n if (typeof variant === 'string') {\n variant = (variants as any)[variant](element)\n }\n\n let from = (variant as any).from\n let to = (variant as any).to\n\n const [_css, setCss] = useState(open ? to : from)\n\n useEffect(() => {\n const ele: HTMLElement = document.querySelector(`.trans-${id}`) as any\n if (ele) {\n setRendered(true)\n setElement({\n height: ele.clientHeight,\n width: ele.clientWidth,\n rect: ele.getBoundingClientRect()\n })\n if (!disableInitialTransition && open) {\n setCss(from)\n }\n }\n }, [])\n\n useEffect(() => {\n const ele: HTMLElement = document.querySelector(`.trans-${id}`) as any\n if (rendered && ele) {\n let stimer: any = null\n let etimer: any = null\n ele.ontransitionstart = () => {\n clearTimeout(stimer)\n stimer = setTimeout(() => {\n const isOpen = Array.from(ele.classList).includes(\"trans-open\");\n (onOpen && isOpen) && onOpen();\n (onClose && !isOpen) && onClose()\n onState && onState(isOpen ? \"open\" : \"close\")\n setTransitionState(isOpen ? \"open\" : \"close\")\n }, 1)\n }\n ele.ontransitionend = () => {\n clearTimeout(etimer)\n etimer = setTimeout(() => {\n const isOpen = Array.from(ele.classList).includes(\"trans-open\");\n (onOpened && isOpen) && onOpened();\n (onClosed && !isOpen) && onClosed();\n onState && onState(isOpen ? \"opened\" : \"closed\")\n setTransitionState(isOpen ? \"opened\" : \"closed\")\n }, 1)\n }\n }\n }, [rendered])\n\n useEffect(() => {\n if (rendered) {\n if (!initial) {\n setInitial(true)\n setTimeout(() => {\n setCss(open ? to : from)\n }, 50);\n } else {\n setCss(open ? to : from)\n }\n }\n }, [rendered, open, JSON.stringify(from), JSON.stringify(to)])\n\n let _: any = {}\n if (rendered) {\n let trans = ` ${duration}ms ${_ease} ${delay || 0}ms`\n _ = {\n ..._css,\n transition: Object.keys(_css || {}).map(k => formatCSSProp(k)).join(trans + \", \") + trans,\n }\n }\n\n const cls = css(_)\n if (!children || Array.isArray(children)) throw new Error(\"Invalid children in Transition\")\n const first: any = Children.toArray(children).shift();\n let classname = `${cls.classname} trans-${id} trans-${(open ? \"open\" : \"close\")} trans-state-${transitionState}`\n const child = cloneElement(first, { classNames: [classname] })\n if (rendered) return child\n if (!rendered && disableInitialTransition && open) return child\n\n return (\n <Tag\n
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/Transition/index.tsx"],"sourcesContent":["import React, { ReactElement, cloneElement, Children, useState, useEffect, useId } from 'react';\nimport Tag from '../Tag';\nimport { animationEases } from '../hooks/useAnimation';\nimport { css } from '../css';\nimport { formatCSSProp } from 'oncss';\nimport { CSSProps } from '../css/types';\nimport * as variants from './variants'\nexport type TransitionVariantTypes = keyof typeof variants\n\nexport type TransitionElementProps = {\n height: number;\n width: number;\n rect: DOMRect | null\n}\n\nexport type TransitionState = \"open\" | \"opened\" | \"close\" | \"closed\"\n\nexport type TransitionProps = {\n children: ReactElement;\n open: boolean;\n variant: {\n from: CSSProps;\n to: CSSProps;\n } | TransitionVariantTypes;\n ease?: string;\n easing?: keyof typeof animationEases;\n duration?: number;\n delay?: number;\n disableInitialTransition?: boolean;\n onOpen?: () => void;\n onOpened?: () => void;\n onClose?: () => void;\n onClosed?: () => void;\n onState?: (state: TransitionState) => void;\n}\n\nconst Transition = ({ children, open, ...props }: TransitionProps) => {\n let { disableInitialTransition, variant, duration, delay, ease, easing, onOpen, onOpened, onClose, onClosed, onState } = props as TransitionProps\n let _ease = ease || (animationEases as any)[easing as any] || animationEases.easeBounceOut\n disableInitialTransition ??= false\n duration ??= 400\n variant ??= \"fade\"\n\n const id = useId().replace(/:/g, \"\")\n const [rendered, setRendered] = useState(false)\n const [initial, setInitial] = useState(false)\n const [transitionState, setTransitionState] = useState<TransitionState>(open ? (disableInitialTransition ? \"opened\" : \"open\") : \"closed\")\n const [element, setElement] = useState<TransitionElementProps>({\n height: 0,\n width: 0,\n rect: null\n });\n\n if (typeof variant === 'string') {\n variant = (variants as any)[variant](element)\n }\n\n let from = (variant as any).from\n let to = (variant as any).to\n\n const [_css, setCss] = useState(open ? to : from)\n\n useEffect(() => {\n const ele: HTMLElement = document.querySelector(`.trans-${id}`) as any\n if (ele) {\n setRendered(true)\n setElement({\n height: ele.clientHeight,\n width: ele.clientWidth,\n rect: ele.getBoundingClientRect()\n })\n if (!disableInitialTransition && open) {\n setCss(from)\n }\n }\n }, [])\n\n useEffect(() => {\n const ele: HTMLElement = document.querySelector(`.trans-${id}`) as any\n if (rendered && ele) {\n let stimer: any = null\n let etimer: any = null\n ele.ontransitionstart = () => {\n clearTimeout(stimer)\n stimer = setTimeout(() => {\n const isOpen = Array.from(ele.classList).includes(\"trans-open\");\n (onOpen && isOpen) && onOpen();\n (onClose && !isOpen) && onClose()\n onState && onState(isOpen ? \"open\" : \"close\")\n setTransitionState(isOpen ? \"open\" : \"close\")\n }, 1)\n }\n ele.ontransitionend = () => {\n clearTimeout(etimer)\n etimer = setTimeout(() => {\n const isOpen = Array.from(ele.classList).includes(\"trans-open\");\n (onOpened && isOpen) && onOpened();\n (onClosed && !isOpen) && onClosed();\n onState && onState(isOpen ? \"opened\" : \"closed\")\n setTransitionState(isOpen ? \"opened\" : \"closed\")\n }, 1)\n }\n }\n }, [rendered])\n\n useEffect(() => {\n if (rendered) {\n if (!initial) {\n setInitial(true)\n setTimeout(() => {\n setCss(open ? to : from)\n }, 50);\n } else {\n setCss(open ? to : from)\n }\n }\n }, [rendered, open, JSON.stringify(from), JSON.stringify(to)])\n\n let _: any = {}\n if (rendered) {\n let trans = ` ${duration}ms ${_ease} ${delay || 0}ms`\n _ = {\n ..._css,\n transition: Object.keys(_css || {}).map(k => formatCSSProp(k)).join(trans + \", \") + trans,\n }\n }\n\n const cls = css(_)\n if (!children || Array.isArray(children)) throw new Error(\"Invalid children in Transition\")\n const first: any = Children.toArray(children).shift();\n let classname = `${cls.classname} trans-${id} trans-${(open ? \"open\" : \"close\")} trans-state-${transitionState}`\n const child = cloneElement(first, { classNames: [classname] })\n if (rendered) return child\n if (!rendered && disableInitialTransition && open) return child\n\n return (\n <Tag\n height={0}\n overflow={'hidden'}\n position=\"fixed\"\n >\n {child}\n </Tag>\n )\n}\n\n\nexport default Transition"],"names":["_jsx"],"mappings":"wUAoCA,MAAM,UAAU,GAAG,CAAC,EAA6C,KAAI;QAAjD,EAAE,QAAQ,EAAE,IAAI,EAAA,GAAA,EAA6B,EAAxB,KAAK,GAAA,MAAA,CAAA,EAAA,EAA1B,oBAA4B,CAAF;IAC1C,IAAI,EAAE,wBAAwB,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,KAAwB;AACjJ,IAAA,IAAI,KAAK,GAAG,IAAI,IAAK,cAAsB,CAAC,MAAa,CAAC,IAAI,cAAc,CAAC,aAAa;IAC1F,wBAAwB,KAAA,IAAA,IAAxB,wBAAwB,KAAA,MAAA,GAAxB,wBAAwB,IAAxB,wBAAwB,GAAK,KAAK,CAAA;IAClC,QAAQ,KAAA,IAAA,IAAR,QAAQ,KAAA,MAAA,GAAR,QAAQ,IAAR,QAAQ,GAAK,GAAG,CAAA;IAChB,OAAO,KAAA,IAAA,IAAP,OAAO,KAAA,MAAA,GAAP,OAAO,IAAP,OAAO,GAAK,MAAM,CAAA;IAElB,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC;IACpC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IAC/C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AAC7C,IAAA,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAkB,IAAI,IAAI,wBAAwB,GAAG,QAAQ,GAAG,MAAM,IAAI,QAAQ,CAAC;AACzI,IAAA,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAyB;AAC3D,QAAA,MAAM,EAAE,CAAC;AACT,QAAA,KAAK,EAAE,CAAC;AACR,QAAA,IAAI,EAAE;AACT,KAAA,CAAC;AAEF,IAAA,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE;QAC7B,OAAO,GAAI,QAAgB,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC;IACjD;AAEA,IAAA,IAAI,IAAI,GAAI,OAAe,CAAC,IAAI;AAChC,IAAA,IAAI,EAAE,GAAI,OAAe,CAAC,EAAE;AAE5B,IAAA,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,GAAG,QAAQ,CAAC,IAAI,GAAG,EAAE,GAAG,IAAI,CAAC;IAEjD,SAAS,CAAC,MAAK;QACX,MAAM,GAAG,GAAgB,QAAQ,CAAC,aAAa,CAAC,CAAA,OAAA,EAAU,EAAE,CAAA,CAAE,CAAQ;QACtE,IAAI,GAAG,EAAE;YACL,WAAW,CAAC,IAAI,CAAC;AACjB,YAAA,UAAU,CAAC;gBACP,MAAM,EAAE,GAAG,CAAC,YAAY;gBACxB,KAAK,EAAE,GAAG,CAAC,WAAW;AACtB,gBAAA,IAAI,EAAE,GAAG,CAAC,qBAAqB;AAClC,aAAA,CAAC;AACF,YAAA,IAAI,CAAC,wBAAwB,IAAI,IAAI,EAAE;gBACnC,MAAM,CAAC,IAAI,CAAC;YAChB;QACJ;IACJ,CAAC,EAAE,EAAE,CAAC;IAEN,SAAS,CAAC,MAAK;QACX,MAAM,GAAG,GAAgB,QAAQ,CAAC,aAAa,CAAC,CAAA,OAAA,EAAU,EAAE,CAAA,CAAE,CAAQ;AACtE,QAAA,IAAI,QAAQ,IAAI,GAAG,EAAE;YACjB,IAAI,MAAM,GAAQ,IAAI;YACtB,IAAI,MAAM,GAAQ,IAAI;AACtB,YAAA,GAAG,CAAC,iBAAiB,GAAG,MAAK;gBACzB,YAAY,CAAC,MAAM,CAAC;AACpB,gBAAA,MAAM,GAAG,UAAU,CAAC,MAAK;AACrB,oBAAA,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,QAAQ,CAAC,YAAY,CAAC;AAC/D,oBAAA,CAAC,MAAM,IAAI,MAAM,KAAK,MAAM,EAAE;oBAC9B,CAAC,OAAO,IAAI,CAAC,MAAM,KAAK,OAAO,EAAE;AACjC,oBAAA,OAAO,IAAI,OAAO,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;oBAC7C,kBAAkB,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;gBACjD,CAAC,EAAE,CAAC,CAAC;AACT,YAAA,CAAC;AACD,YAAA,GAAG,CAAC,eAAe,GAAG,MAAK;gBACvB,YAAY,CAAC,MAAM,CAAC;AACpB,gBAAA,MAAM,GAAG,UAAU,CAAC,MAAK;AACrB,oBAAA,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,QAAQ,CAAC,YAAY,CAAC;AAC/D,oBAAA,CAAC,QAAQ,IAAI,MAAM,KAAK,QAAQ,EAAE;oBAClC,CAAC,QAAQ,IAAI,CAAC,MAAM,KAAK,QAAQ,EAAE;AACnC,oBAAA,OAAO,IAAI,OAAO,CAAC,MAAM,GAAG,QAAQ,GAAG,QAAQ,CAAC;oBAChD,kBAAkB,CAAC,MAAM,GAAG,QAAQ,GAAG,QAAQ,CAAC;gBACpD,CAAC,EAAE,CAAC,CAAC;AACT,YAAA,CAAC;QACL;AACJ,IAAA,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;IAEd,SAAS,CAAC,MAAK;QACX,IAAI,QAAQ,EAAE;YACV,IAAI,CAAC,OAAO,EAAE;gBACV,UAAU,CAAC,IAAI,CAAC;gBAChB,UAAU,CAAC,MAAK;oBACZ,MAAM,CAAC,IAAI,GAAG,EAAE,GAAG,IAAI,CAAC;gBAC5B,CAAC,EAAE,EAAE,CAAC;YACV;iBAAO;gBACH,MAAM,CAAC,IAAI,GAAG,EAAE,GAAG,IAAI,CAAC;YAC5B;QACJ;IACJ,CAAC,EAAE,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC,CAAC;IAE9D,IAAI,CAAC,GAAQ,EAAE;IACf,IAAI,QAAQ,EAAE;QACV,IAAI,KAAK,GAAG,CAAA,CAAA,EAAI,QAAQ,CAAA,GAAA,EAAM,KAAK,CAAA,CAAA,EAAI,KAAK,IAAI,CAAC,CAAA,EAAA,CAAI;AACrD,QAAA,CAAC,GAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACM,IAAI,CAAA,EAAA,EACP,UAAU,EAAE,MAAM,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,KAAK,GAC5F;IACL;AAEA,IAAA,MAAM,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC;IAClB,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC;AAAE,QAAA,MAAM,IAAI,KAAK,CAAC,gCAAgC,CAAC;IAC3F,MAAM,KAAK,GAAQ,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE;IACrD,IAAI,SAAS,GAAG,CAAA,EAAG,GAAG,CAAC,SAAS,CAAA,OAAA,EAAU,EAAE,CAAA,OAAA,GAAW,IAAI,GAAG,MAAM,GAAG,OAAO,EAAC,aAAA,EAAgB,eAAe,CAAA,CAAE;AAChH,IAAA,MAAM,KAAK,GAAG,YAAY,CAAC,KAAK,EAAE,EAAE,UAAU,EAAE,CAAC,SAAS,CAAC,EAAE,CAAC;AAC9D,IAAA,IAAI,QAAQ;AAAE,QAAA,OAAO,KAAK;AAC1B,IAAA,IAAI,CAAC,QAAQ,IAAI,wBAAwB,IAAI,IAAI;AAAE,QAAA,OAAO,KAAK;AAE/D,IAAA,QACIA,GAAA,CAAC,GAAG,IACA,MAAM,EAAE,CAAC,EACT,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAC,OAAO,YAEf,KAAK,EAAA,CACJ;AAEd"}
|