@hh.ru/magritte-ui-modal 10.1.34 → 11.0.0

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.
Files changed (65) hide show
  1. package/index.css +212 -218
  2. package/index.d.ts +5 -2
  3. package/index.js +25 -14
  4. package/index.js.map +1 -1
  5. package/index.mock.d.ts +6 -2
  6. package/index.mock.js +7 -3
  7. package/index.mock.js.map +1 -1
  8. package/internal/ModalBody.d.ts +5 -0
  9. package/internal/ModalBody.js +41 -0
  10. package/internal/ModalBody.js.map +1 -0
  11. package/internal/ModalContent.d.ts +2 -0
  12. package/internal/ModalContent.js +14 -0
  13. package/internal/ModalContent.js.map +1 -0
  14. package/internal/ModalInner.d.ts +28 -0
  15. package/internal/ModalInner.js +46 -0
  16. package/internal/ModalInner.js.map +1 -0
  17. package/internal/ModalSlotsContext.d.ts +46 -0
  18. package/internal/ModalSlotsContext.js +66 -0
  19. package/internal/ModalSlotsContext.js.map +1 -0
  20. package/internal/ModalStickyHeader.d.ts +8 -0
  21. package/internal/ModalStickyHeader.js +40 -0
  22. package/internal/ModalStickyHeader.js.map +1 -0
  23. package/internal/constants.d.ts +38 -0
  24. package/internal/constants.js +53 -0
  25. package/internal/constants.js.map +1 -0
  26. package/internal/isTreeSelectorChild.d.ts +7 -0
  27. package/internal/isTreeSelectorChild.js +13 -0
  28. package/internal/isTreeSelectorChild.js.map +1 -0
  29. package/{useModalOrder.js → internal/useModalOrder.js} +1 -1
  30. package/internal/useModalOrder.js.map +1 -0
  31. package/internal/useModalTransition.d.ts +29 -0
  32. package/internal/useModalTransition.js +85 -0
  33. package/internal/useModalTransition.js.map +1 -0
  34. package/internal/usePageHeaderScrollAnimation.d.ts +14 -0
  35. package/internal/usePageHeaderScrollAnimation.js +48 -0
  36. package/internal/usePageHeaderScrollAnimation.js.map +1 -0
  37. package/modal-Bf_KXESS.js +5 -0
  38. package/modal-Bf_KXESS.js.map +1 -0
  39. package/package.json +18 -14
  40. package/public/Modal.d.ts +10 -0
  41. package/public/Modal.js +105 -0
  42. package/public/Modal.js.map +1 -0
  43. package/public/ModalMedia.d.ts +15 -0
  44. package/public/ModalMedia.js +23 -0
  45. package/public/ModalMedia.js.map +1 -0
  46. package/public/ModalWithImage.d.ts +16 -0
  47. package/public/ModalWithImage.js +56 -0
  48. package/public/ModalWithImage.js.map +1 -0
  49. package/public/types.d.ts +40 -0
  50. package/{types.js → public/types.js} +1 -1
  51. package/Modal.d.ts +0 -3
  52. package/Modal.js +0 -271
  53. package/Modal.js.map +0 -1
  54. package/ModalContentWithHeader-BsKIMEA3.js +0 -150
  55. package/ModalContentWithHeader-BsKIMEA3.js.map +0 -1
  56. package/ModalContentWithHeader.d.ts +0 -8
  57. package/ModalContentWithHeader.js +0 -15
  58. package/ModalContentWithHeader.js.map +0 -1
  59. package/ModalHeader.d.ts +0 -6
  60. package/ModalHeader.js +0 -48
  61. package/ModalHeader.js.map +0 -1
  62. package/types.d.ts +0 -71
  63. package/useModalOrder.js.map +0 -1
  64. /package/{useModalOrder.d.ts → internal/useModalOrder.d.ts} +0 -0
  65. /package/{types.js.map → public/types.js.map} +0 -0
package/ModalHeader.d.ts DELETED
@@ -1,6 +0,0 @@
1
- import { RefObject } from 'react';
2
- import { ModalHeaderProps } from '@hh.ru/magritte-ui-modal/types';
3
- export declare const ModalHeader: import("react").ForwardRefExoticComponent<ModalHeaderProps & {
4
- labelId: string;
5
- wrapperRef: RefObject<HTMLDivElement>;
6
- } & import("react").RefAttributes<HTMLDivElement>>;
package/ModalHeader.js DELETED
@@ -1,48 +0,0 @@
1
- import './index.css';
2
- import { jsxs, jsx } from 'react/jsx-runtime';
3
- import { forwardRef, Children, cloneElement } from 'react';
4
- import classnames from 'classnames';
5
- import { isIconElement } from '@hh.ru/magritte-ui-icon';
6
- import { Title } from '@hh.ru/magritte-ui-title';
7
-
8
- var styles = {"content":"magritte-content___o6ktq_10-1-34","options":"magritte-options___qfErQ_10-1-34","actions":"magritte-actions___nQILV_10-1-34","actions-with-link":"magritte-actions-with-link___hnDux_10-1-34","actionsWithLink":"magritte-actions-with-link___hnDux_10-1-34","content-with-image":"magritte-content-with-image___YarBO_10-1-34","contentWithImage":"magritte-content-with-image___YarBO_10-1-34","actions-single":"magritte-actions-single___usfKu_10-1-34","actionsSingle":"magritte-actions-single___usfKu_10-1-34","image-container":"magritte-image-container___ioL3y_10-1-34","imageContainer":"magritte-image-container___ioL3y_10-1-34","title-wrapper":"magritte-title-wrapper___O--QR_10-1-34","titleWrapper":"magritte-title-wrapper___O--QR_10-1-34","wrapper":"magritte-wrapper___zH8vB_10-1-34","only-actions":"magritte-only-actions___ZC4jx_10-1-34","onlyActions":"magritte-only-actions___ZC4jx_10-1-34"};
9
-
10
- const ModalHeader = forwardRef(({ title, headerImageUrl, headerImage, headerHeight, titleAlignment, titleElement, titleMaxLines, titleSize, titleDescription, titleDescriptionMaxLines, titleStyle, titleDescriptionStyle, options, actions: _actions, actionLink, labelId, wrapperRef, }, ref) => {
11
- const actions = Array.isArray(_actions) ? _actions.slice(0, 5) : _actions;
12
- const hasHeaderImage = !!headerImageUrl || !!headerImage;
13
- if (!title && !hasHeaderImage && !actions && !actionLink && !options) {
14
- return null;
15
- }
16
- const withTitle = title && titleElement;
17
- const withActions = !!actions || !!actionLink;
18
- const currentTitleStyle = titleStyle || (hasHeaderImage ? 'constant' : 'primary');
19
- const currentTitleDescriptionStyle = titleDescriptionStyle || (hasHeaderImage ? 'constant' : 'primary');
20
- const withContent = title || hasHeaderImage || actionLink || actions;
21
- const onlyActions = !title && !hasHeaderImage && !options && (actions || actionLink);
22
- return (jsxs("div", { "data-qa": "modal-header", ref: wrapperRef, className: classnames(styles.wrapper, {
23
- [styles.onlyActions]: onlyActions,
24
- }), style: hasHeaderImage ? { marginBottom: 24 } : {}, children: [withContent && (jsxs("div", { className: classnames(styles.content, {
25
- [styles.contentWithImage]: !!hasHeaderImage,
26
- }), style: hasHeaderImage ? { height: headerHeight } : {}, ref: ref, "data-qa": "modal-header-image", children: [headerImage ? (jsx("div", { className: styles.imageContainer, style: {
27
- backgroundImage: title ? 'var(--modal-header-gradient)' : '',
28
- height: headerHeight,
29
- }, children: headerImage })) : (headerImageUrl && (jsx("div", { className: styles.imageContainer, style: {
30
- backgroundImage: `${title ? 'var(--modal-header-gradient), ' : ''}url(${headerImageUrl})`,
31
- height: headerHeight,
32
- } }))), withTitle && (jsx("div", { className: styles.titleWrapper, children: jsx(Title, { id: labelId, Element: titleElement, alignment: titleAlignment, maxLines: titleMaxLines, size: titleSize, style: currentTitleStyle, description: titleDescription, descriptionMaxLines: titleDescriptionMaxLines, descriptionStyle: currentTitleDescriptionStyle, children: title }) })), withActions && (jsx("div", { className: classnames(styles.actions, {
33
- [styles.actionsWithLink]: !actions && !!actionLink,
34
- [styles.actionsSingle]: Array.isArray(actions) ? actions.length === 1 : !!actions,
35
- }), children: actions
36
- ? Children.toArray(actions).map((item) => isIconElement(item)
37
- ? cloneElement(item, {
38
- padding: 8,
39
- borderRadius: 'halfHeight',
40
- backgroundStyle: undefined,
41
- })
42
- : item)
43
- : actionLink }))] })), options && jsx("div", { className: styles.options, children: options })] }));
44
- });
45
- ModalHeader.displayName = 'ModalHeader';
46
-
47
- export { ModalHeader };
48
- //# sourceMappingURL=ModalHeader.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ModalHeader.js","sources":["src/ModalHeader.tsx"],"sourcesContent":["import { forwardRef, RefObject, cloneElement, Children } from 'react';\nimport classnames from 'classnames';\n\nimport { isIconElement } from '@hh.ru/magritte-ui-icon';\nimport { ModalHeaderProps } from '@hh.ru/magritte-ui-modal/types';\nimport { Title } from '@hh.ru/magritte-ui-title';\n\nimport styles from './modal-header.less';\n\nexport const ModalHeader = forwardRef<\n HTMLDivElement,\n ModalHeaderProps & { labelId: string; wrapperRef: RefObject<HTMLDivElement> }\n>(\n (\n {\n title,\n headerImageUrl,\n headerImage,\n headerHeight,\n titleAlignment,\n titleElement,\n titleMaxLines,\n titleSize,\n titleDescription,\n titleDescriptionMaxLines,\n titleStyle,\n titleDescriptionStyle,\n options,\n actions: _actions,\n actionLink,\n labelId,\n wrapperRef,\n },\n ref\n ) => {\n const actions = Array.isArray(_actions) ? _actions.slice(0, 5) : _actions;\n const hasHeaderImage = !!headerImageUrl || !!headerImage;\n if (!title && !hasHeaderImage && !actions && !actionLink && !options) {\n return null;\n }\n const withTitle = title && titleElement;\n const withActions = !!actions || !!actionLink;\n const currentTitleStyle = titleStyle || (hasHeaderImage ? 'constant' : 'primary');\n const currentTitleDescriptionStyle = titleDescriptionStyle || (hasHeaderImage ? 'constant' : 'primary');\n const withContent = title || hasHeaderImage || actionLink || actions;\n const onlyActions = !title && !hasHeaderImage && !options && (actions || actionLink);\n\n return (\n <div\n data-qa=\"modal-header\"\n ref={wrapperRef}\n className={classnames(styles.wrapper, {\n [styles.onlyActions]: onlyActions,\n })}\n style={hasHeaderImage ? { marginBottom: 24 } : {}}\n >\n {withContent && (\n <div\n className={classnames(styles.content, {\n [styles.contentWithImage]: !!hasHeaderImage,\n })}\n style={hasHeaderImage ? { height: headerHeight } : {}}\n ref={ref}\n data-qa=\"modal-header-image\"\n >\n {headerImage ? (\n <div\n className={styles.imageContainer}\n style={{\n backgroundImage: title ? 'var(--modal-header-gradient)' : '',\n height: headerHeight,\n }}\n >\n {headerImage}\n </div>\n ) : (\n headerImageUrl && (\n <div\n className={styles.imageContainer}\n style={{\n backgroundImage: `${\n title ? 'var(--modal-header-gradient), ' : ''\n }url(${headerImageUrl})`,\n height: headerHeight,\n }}\n />\n )\n )}\n {withTitle && (\n <div className={styles.titleWrapper}>\n <Title\n id={labelId}\n Element={titleElement}\n alignment={titleAlignment}\n maxLines={titleMaxLines}\n size={titleSize}\n style={currentTitleStyle}\n description={titleDescription}\n descriptionMaxLines={titleDescriptionMaxLines}\n descriptionStyle={currentTitleDescriptionStyle}\n >\n {title}\n </Title>\n </div>\n )}\n {withActions && (\n <div\n className={classnames(styles.actions, {\n [styles.actionsWithLink]: !actions && !!actionLink,\n [styles.actionsSingle]: Array.isArray(actions) ? actions.length === 1 : !!actions,\n })}\n >\n {actions\n ? Children.toArray(actions).map((item) =>\n isIconElement(item)\n ? cloneElement(item, {\n padding: 8,\n borderRadius: 'halfHeight',\n backgroundStyle: undefined,\n })\n : item\n )\n : actionLink}\n </div>\n )}\n </div>\n )}\n {options && <div className={styles.options}>{options}</div>}\n </div>\n );\n }\n);\n\nModalHeader.displayName = 'ModalHeader';\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
package/types.d.ts DELETED
@@ -1,71 +0,0 @@
1
- import { ReactNode, PropsWithChildren, SyntheticEvent } from 'react';
2
- import { TitleProps } from '@hh.ru/magritte-ui-title';
3
- export type ModalHeight = 'content' | 'full-screen' | number;
4
- export interface ModalHeaderProps {
5
- /** Текст заголовка */
6
- title?: TitleProps['children'];
7
- /** Размер заголовка */
8
- titleSize?: TitleProps['size'];
9
- /** Выравнивание заголовка */
10
- titleAlignment?: TitleProps['alignment'];
11
- /** Максимальное кол-во строк перед обрезкой содержимого описания многоточием */
12
- titleMaxLines?: TitleProps['maxLines'];
13
- /** Элемент используемый для заголовка */
14
- titleElement?: TitleProps['Element'];
15
- /** Текст подзаголовка */
16
- titleDescription?: TitleProps['description'];
17
- /** Максимальное кол-во строк перед обрезкой содержимого описания многоточием */
18
- titleDescriptionMaxLines?: TitleProps['descriptionMaxLines'];
19
- /** Цвет заголовка */
20
- titleStyle?: TitleProps['style'];
21
- titleDescriptionStyle?: TitleProps['descriptionStyle'];
22
- /** URL изображения для фона заголовка. Будет проигнорирован, если передан headerImage. */
23
- headerImageUrl?: string;
24
- /** Произвольный контент в заголовке. Имеет приоритет перед headerImageUrl. */
25
- headerImage?: ReactNode;
26
- /** Высота заголовка в пикселях, если не передан проп headerImageUrl или headerImage, этот проп игнорируется */
27
- headerHeight?: number;
28
- /** Опциональный контент внизу хедера */
29
- options?: ReactNode;
30
- /** набор Icon-s внутри хедера */
31
- actions?: ReactNode | ReactNode[];
32
- /** Link внутри хедера */
33
- actionLink?: ReactNode;
34
- }
35
- export interface ModalBaseProps extends PropsWithChildren {
36
- /** Обработчик нажатия на кнопку закрытия */
37
- onClose?: (event?: SyntheticEvent) => void;
38
- /** Флаг управляющий видимостью модала */
39
- visible?: boolean;
40
- /** Размер */
41
- size?: 'large' | 'medium' | 'small';
42
- /** Хост для отрисовки модала */
43
- host?: HTMLElement;
44
- /** Содержимое футера, если нужно отрисовать кнопки, то должен использоваться ActionBar */
45
- footer?: ReactNode;
46
- /** Флаг отключающий верхний и нижний паддинги. Работает, только если все опциональные слоты отключены */
47
- disableVerticalPaddings?: boolean;
48
- /** Флаг отключающий левый и правый паддинги. Работает, только если все опциональные слоты отключены */
49
- disableHorizontalPaddings?: boolean;
50
- /** Флаг управляющий закрытием при клике вне Modal */
51
- closeByClickOutside?: boolean;
52
- /** Колбек, который будет вызван после завершения анимации открытия */
53
- onAppear?: VoidFunction;
54
- /** Колбек, который будет вызван перед началом анимации закрытия */
55
- onBeforeExit?: VoidFunction;
56
- /** Колбек, который будет вызван после анимации закрытия */
57
- onAfterExit?: VoidFunction;
58
- /** Высота (по контенту, во весь экран или фиксированная в пикселях) */
59
- height?: ModalHeight;
60
- /** Минимальная высота в пикселях. Имеет приоритет перед height. */
61
- minHeight?: number;
62
- /** Положение компонента на экране, определяет дефолтное значение пропа height */
63
- position?: 'center' | 'left' | 'right';
64
- /** Показывать ли оверлей, применяется только если position=left|right */
65
- showOverlay?: boolean;
66
- /** Отступ от верхнего края экрана под навигацию, применяется только если position=left|right и showOverlay=false */
67
- pageHeaderPadding?: number;
68
- /** Возвращать ли фокус на активный элемент после закрытия модала, по умолчанию `true` */
69
- returnFocusOnClose?: boolean;
70
- }
71
- export type ModalProps = ModalBaseProps & ModalHeaderProps;
@@ -1 +0,0 @@
1
- {"version":3,"file":"useModalOrder.js","sources":["src/useModalOrder.ts"],"sourcesContent":["import { RefObject, useEffect, useLayoutEffect, useState } from 'react';\n\nimport { storeValueInDom, getValueFromDom, useDomStoredUniqueId } from '@hh.ru/magritte-common-dom-storage';\n\ntype NotifyCallbackArg = { position: number; count: number };\n\ntype Subscribers = Record<string, (position: NotifyCallbackArg) => void>;\ntype VisibilityMap = Record<string, boolean>;\ntype PositionMap = Record<string, number>;\n\ntype ModalCounterState = {\n prevVisiblility: VisibilityMap;\n positions: PositionMap;\n subscribers: Subscribers;\n count: number;\n};\n\nconst STORAGE_NAME = '_MAGRITTE_MODAL_COUNTER_';\n\nconst getState = (): ModalCounterState => {\n const state = getValueFromDom<ModalCounterState>(STORAGE_NAME);\n if (state === undefined) {\n return {\n prevVisiblility: {},\n positions: {},\n subscribers: {},\n count: 0,\n };\n }\n return state;\n};\n\nconst storeState = (state: ModalCounterState): void => {\n storeValueInDom(STORAGE_NAME, state);\n};\n\nconst counterFactory = () => {\n return {\n updateVisiblility: (id: string, visible: boolean) => {\n // eslint-disable-next-line prefer-const\n const state = getState();\n const prevVisible = !!state.prevVisiblility[id];\n if (visible === prevVisible) {\n return;\n }\n state.prevVisiblility[id] = visible;\n if (visible) {\n state.count += 1;\n state.positions[id] = state.count;\n } else {\n state.count -= 1;\n const currentPosition = state.positions[id];\n state.positions[id] = 0;\n Object.entries(state.positions).forEach(([key, value]) => {\n state.positions[key] = value > currentPosition ? value - 1 : value;\n });\n }\n storeState(state);\n },\n subscribe: (id: string, callback: (position: NotifyCallbackArg) => void) => {\n const state = getState();\n state.subscribers[id] = callback;\n storeState(state);\n },\n unsubscribe: (id: string) => {\n const state = getState();\n delete state.subscribers[id];\n storeState(state);\n },\n notifyAll: () => {\n const { subscribers, count, positions } = getState();\n Object.entries(subscribers).forEach(([id, callback]) => callback({ position: positions[id], count }));\n },\n };\n};\n\nconst counter = counterFactory();\n\nexport const useModalOrder = (visible: boolean, modalRef: RefObject<HTMLDivElement>): [number, number] => {\n const [position, setPosition] = useState<{ position: number; count: number }>({ position: 0, count: 0 });\n const id = useDomStoredUniqueId();\n\n useLayoutEffect(() => {\n counter.updateVisiblility(id, visible);\n counter.notifyAll();\n // eslint-disable-next-line disable-autofix/react-hooks/exhaustive-deps\n }, [visible]);\n\n useEffect(() => {\n counter.subscribe(id, setPosition);\n counter.updateVisiblility(id, visible);\n return () => {\n counter.unsubscribe(id);\n counter.updateVisiblility(id, false);\n counter.notifyAll();\n };\n // eslint-disable-next-line disable-autofix/react-hooks/exhaustive-deps\n }, [id]);\n\n useLayoutEffect(() => {\n // Если это самый \"верхний\" модал передаем туда фокус\n if (\n position.position === position.count &&\n position.count > 0 &&\n !modalRef.current?.contains(document.activeElement)\n ) {\n modalRef.current?.focus();\n }\n }, [position, modalRef]);\n\n return [position.position, position.count];\n};\n"],"names":[],"mappings":";;;AAiBA,MAAM,YAAY,GAAG,0BAA0B,CAAC;AAEhD,MAAM,QAAQ,GAAG,MAAwB;AACrC,IAAA,MAAM,KAAK,GAAG,eAAe,CAAoB,YAAY,CAAC,CAAC;AAC/D,IAAA,IAAI,KAAK,KAAK,SAAS,EAAE;QACrB,OAAO;AACH,YAAA,eAAe,EAAE,EAAE;AACnB,YAAA,SAAS,EAAE,EAAE;AACb,YAAA,WAAW,EAAE,EAAE;AACf,YAAA,KAAK,EAAE,CAAC;SACX,CAAC;KACL;AACD,IAAA,OAAO,KAAK,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,UAAU,GAAG,CAAC,KAAwB,KAAU;AAClD,IAAA,eAAe,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC;AACzC,CAAC,CAAC;AAEF,MAAM,cAAc,GAAG,MAAK;IACxB,OAAO;AACH,QAAA,iBAAiB,EAAE,CAAC,EAAU,EAAE,OAAgB,KAAI;;AAEhD,YAAA,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;YACzB,MAAM,WAAW,GAAG,CAAC,CAAC,KAAK,CAAC,eAAe,CAAC,EAAE,CAAC,CAAC;AAChD,YAAA,IAAI,OAAO,KAAK,WAAW,EAAE;gBACzB,OAAO;aACV;AACD,YAAA,KAAK,CAAC,eAAe,CAAC,EAAE,CAAC,GAAG,OAAO,CAAC;YACpC,IAAI,OAAO,EAAE;AACT,gBAAA,KAAK,CAAC,KAAK,IAAI,CAAC,CAAC;gBACjB,KAAK,CAAC,SAAS,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC;aACrC;iBAAM;AACH,gBAAA,KAAK,CAAC,KAAK,IAAI,CAAC,CAAC;gBACjB,MAAM,eAAe,GAAG,KAAK,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;AAC5C,gBAAA,KAAK,CAAC,SAAS,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;AACxB,gBAAA,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,KAAI;AACrD,oBAAA,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,KAAK,GAAG,eAAe,GAAG,KAAK,GAAG,CAAC,GAAG,KAAK,CAAC;AACvE,iBAAC,CAAC,CAAC;aACN;YACD,UAAU,CAAC,KAAK,CAAC,CAAC;SACrB;AACD,QAAA,SAAS,EAAE,CAAC,EAAU,EAAE,QAA+C,KAAI;AACvE,YAAA,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;AACzB,YAAA,KAAK,CAAC,WAAW,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC;YACjC,UAAU,CAAC,KAAK,CAAC,CAAC;SACrB;AACD,QAAA,WAAW,EAAE,CAAC,EAAU,KAAI;AACxB,YAAA,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;AACzB,YAAA,OAAO,KAAK,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;YAC7B,UAAU,CAAC,KAAK,CAAC,CAAC;SACrB;QACD,SAAS,EAAE,MAAK;YACZ,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,QAAQ,EAAE,CAAC;AACrD,YAAA,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,QAAQ,CAAC,KAAK,QAAQ,CAAC,EAAE,QAAQ,EAAE,SAAS,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;SACzG;KACJ,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,OAAO,GAAG,cAAc,EAAE,CAAC;MAEpB,aAAa,GAAG,CAAC,OAAgB,EAAE,QAAmC,KAAsB;AACrG,IAAA,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAsC,EAAE,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC;AACzG,IAAA,MAAM,EAAE,GAAG,oBAAoB,EAAE,CAAC;IAElC,eAAe,CAAC,MAAK;AACjB,QAAA,OAAO,CAAC,iBAAiB,CAAC,EAAE,EAAE,OAAO,CAAC,CAAC;QACvC,OAAO,CAAC,SAAS,EAAE,CAAC;;AAExB,KAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,SAAS,CAAC,MAAK;AACX,QAAA,OAAO,CAAC,SAAS,CAAC,EAAE,EAAE,WAAW,CAAC,CAAC;AACnC,QAAA,OAAO,CAAC,iBAAiB,CAAC,EAAE,EAAE,OAAO,CAAC,CAAC;AACvC,QAAA,OAAO,MAAK;AACR,YAAA,OAAO,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;AACxB,YAAA,OAAO,CAAC,iBAAiB,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC;YACrC,OAAO,CAAC,SAAS,EAAE,CAAC;AACxB,SAAC,CAAC;;AAEN,KAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IAET,eAAe,CAAC,MAAK;;AAEjB,QAAA,IACI,QAAQ,CAAC,QAAQ,KAAK,QAAQ,CAAC,KAAK;YACpC,QAAQ,CAAC,KAAK,GAAG,CAAC;YAClB,CAAC,QAAQ,CAAC,OAAO,EAAE,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC,EACrD;AACE,YAAA,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;SAC7B;AACL,KAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEzB,OAAO,CAAC,QAAQ,CAAC,QAAQ,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAC;AAC/C;;;;"}
File without changes