@vkontakte/vkui 7.0.0-dev-efd91c.3 → 7.0.0

package/dist/lib/sheet/useBottomSheet.js

@@ -10,7 +10,7 @@ import { CSSTransitionController } from "./controllers/CSSTransitionController.j
  *
  * ## Возможности
  *
- * - [x] есть возможность открывать до определенного размера (см. `initialSnapPoint`)
+ * - [x] есть возможность открывать до определенного размера (см. `snapPoint`)
  * - [x] есть возможность закрыть при сильном смахивании вниз
  * - [x] есть возможность отключить взаимодействие на определённых элементах используя data-атрибут
  * - [x] есть возможность отключить взаимодействие на определённых элементах используя stopPropagation()
@@ -18,7 +18,7 @@ import { CSSTransitionController } from "./controllers/CSSTransitionController.j
  * ## Анимации
  *
  * - [x] оверлей становится светлее в зависимости от процента сворачивания
- *    - [x] при `initialSnapPoint !== 'auto'` процент высчитывается относительно переданного `initialSnapPoint`
+ *    - [x] при `snapPoint !== 'auto'` процент высчитывается относительно переданного `snapPoint.initial`
  * - [x] при перетаскивании за пределы есть анимация натяжения
  *   > note: в `ModalPage` этого эффекта нет при высоте 100% из-за `max-block-size: 100%`
  *
@@ -30,23 +30,18 @@ import { CSSTransitionController } from "./controllers/CSSTransitionController.j
  * - [x] ⚠️ не блокирует взаимодействие с элементами вне корневого элемента
  *
  * @private
- */ export const useBottomSheet = (enabled, { blocked, initialSnapPoint, sheetCSSProperty, backdropCSSProperty, onDismiss: onDismissProp })=>{
+ */ export const useBottomSheet = (enabled, { blocked, snapPoint, sheetCSSProperty, backdropCSSProperty, onSnapPointChange: onSnapPointChangeProp, onDismiss: onDismissProp })=>{
     const [sheetScrollEl, setSheetScrollEl] = useState(null);
     const [sheetEl, setSheetEl] = useState(null);
     const [backdropEl, setBackdropEl] = useState(null);
-    const initialStyle = useMemo(()=>{
-        if (!enabled) {
-            return;
-        }
-        const { unit, currentSnapPoint } = BottomSheetController.parseInitialSnapPoint(initialSnapPoint);
-        return unit === '%' ? {
-            [sheetCSSProperty]: `${currentSnapPoint}${unit}`
-        } : undefined;
-    }, [
+    const initialStyle = useMemo(()=>enabled && snapPoint !== 'auto' ? {
+            [sheetCSSProperty]: `${snapPoint.initial}%`
+        } : undefined, [
         enabled,
-        initialSnapPoint,
+        snapPoint,
         sheetCSSProperty
     ]);
+    const onSnapPointChange = useStableCallback(onSnapPointChangeProp || noop);
     const onDismiss = useStableCallback(onDismissProp || noop);
     const bsController = useMemo(()=>{
         if (!enabled || sheetEl === null) {
@@ -56,6 +51,7 @@ import { CSSTransitionController } from "./controllers/CSSTransitionController.j
             sheetScrollEl: sheetScrollEl || null,
             sheetTransitionController: new CSSTransitionController(sheetEl, sheetCSSProperty),
             backdropTransitionController: backdropEl ? new CSSTransitionController(backdropEl, backdropCSSProperty) : null,
+            onSnapPointChange,
             onDismiss
         });
     }, [
@@ -65,6 +61,7 @@ import { CSSTransitionController } from "./controllers/CSSTransitionController.j
         sheetScrollEl,
         backdropEl,
         backdropCSSProperty,
+        onSnapPointChange,
         onDismiss
     ]);
     const onPanStart = function onPanStart(event) {
@@ -80,10 +77,10 @@ import { CSSTransitionController } from "./controllers/CSSTransitionController.j
     };
     useIsomorphicLayoutEffect(function init() {
         if (bsController) {
-            bsController.init(initialSnapPoint);
+            bsController.init(snapPoint);
         }
     }, [
-        initialSnapPoint,
+        snapPoint,
         bsController
     ]);
     useIsomorphicLayoutEffect(()=>function unmount() {

package/dist/lib/sheet/useBottomSheet.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/sheet/useBottomSheet.ts"],"sourcesContent":["'use client';\n\nimport {\n  type CSSProperties,\n  type Dispatch,\n  type SetStateAction,\n  type UIEvent,\n  type UIEventHandler,\n  useMemo,\n  useState,\n} from 'react';\nimport { noop } from '@vkontakte/vkjs';\nimport { useStableCallback } from '../../hooks/useStableCallback';\nimport { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect';\nimport { BottomSheetController, type InitialSnapPoint } from './controllers/BottomSheetController';\nimport { CSSTransitionController } from './controllers/CSSTransitionController';\n\nexport type UseBottomSheetOptions = {\n  sheetCSSProperty: string;\n  backdropCSSProperty: string;\n  initialSnapPoint?: InitialSnapPoint;\n  blocked?: boolean;\n  onDismiss?: VoidFunction;\n};\n\nexport type UseBottomSheetHandlers = {\n  onTouchStart: UIEventHandler<HTMLElement>;\n  onTouchMove: UIEventHandler<HTMLElement>;\n  onTouchEnd: UIEventHandler<HTMLElement>;\n  onTouchCancel: UIEventHandler<HTMLElement>;\n  onMouseDown: UIEventHandler<HTMLElement>;\n  onMouseMove: UIEventHandler<HTMLElement>;\n  onMouseUp: UIEventHandler<HTMLElement>;\n  onMouseLeave: UIEventHandler<HTMLElement>;\n};\n\nexport type UseBottomSheetResult = [\n  {\n    initialStyle?: CSSProperties;\n    setSheetEl: Dispatch<SetStateAction<HTMLElement | null>>;\n    setSheetScrollEl: Dispatch<SetStateAction<HTMLElement | null>>;\n    setBackdropEl: Dispatch<SetStateAction<HTMLElement | null>>;\n  },\n  UseBottomSheetHandlers | undefined,\n];\n\n/**\n * # Checklist\n *\n * ## Возможности\n *\n * - [x] есть возможность открывать до определенного размера (см. `initialSnapPoint`)\n * - [x] есть возможность закрыть при сильном смахивании вниз\n * - [x] есть возможность отключить взаимодействие на определённых элементах используя data-атрибут\n * - [x] есть возможность отключить взаимодействие на определённых элементах используя stopPropagation()\n *\n * ## Анимации\n *\n * - [x] оверлей становится светлее в зависимости от процента сворачивания\n *    - [x] при `initialSnapPoint !== 'auto'` процент высчитывается относительно переданного `initialSnapPoint`\n * - [x] при перетаскивании за пределы есть анимация натяжения\n *   > note: в `ModalPage` этого эффекта нет при высоте 100% из-за `max-block-size: 100%`\n *\n * ## Пограничные кейсы\n *\n * - [x] ⚠️ не блокирует взаимодействие с _горизонтальным_ скроллом\n * - [x] ⚠️ не блокирует взаимодействие с _вертикальным_ скроллом\n * - [x] ⚠️ не блокирует взаимодействие с полями ввода\n * - [x] ⚠️ не блокирует взаимодействие с элементами вне корневого элемента\n *\n * @private\n */\nexport const useBottomSheet = (\n  enabled: boolean,\n  {\n    blocked,\n    initialSnapPoint,\n    sheetCSSProperty,\n    backdropCSSProperty,\n    onDismiss: onDismissProp,\n  }: UseBottomSheetOptions,\n): UseBottomSheetResult => {\n  const [sheetScrollEl, setSheetScrollEl] = useState<HTMLElement | null>(null);\n  const [sheetEl, setSheetEl] = useState<HTMLElement | null>(null);\n  const [backdropEl, setBackdropEl] = useState<HTMLElement | null>(null);\n\n  const initialStyle = useMemo<CSSProperties | undefined>(() => {\n    if (!enabled) {\n      return;\n    }\n\n    const { unit, currentSnapPoint } =\n      BottomSheetController.parseInitialSnapPoint(initialSnapPoint);\n\n    return unit === '%' ? { [sheetCSSProperty]: `${currentSnapPoint}${unit}` } : undefined;\n  }, [enabled, initialSnapPoint, sheetCSSProperty]);\n\n  const onDismiss = useStableCallback(onDismissProp || noop);\n  const bsController = useMemo<BottomSheetController | null>(() => {\n    if (!enabled || sheetEl === null) {\n      return null;\n    }\n\n    return new BottomSheetController(sheetEl, {\n      sheetScrollEl: sheetScrollEl || null,\n      sheetTransitionController: new CSSTransitionController<string>(sheetEl, sheetCSSProperty),\n      backdropTransitionController: backdropEl\n        ? new CSSTransitionController(backdropEl, backdropCSSProperty)\n        : null,\n      onDismiss,\n    });\n  }, [\n    enabled,\n    sheetEl,\n    sheetCSSProperty,\n    sheetScrollEl,\n    backdropEl,\n    backdropCSSProperty,\n    onDismiss,\n  ]);\n\n  const onPanStart = function onPanStart(event: UIEvent<HTMLElement>) {\n    if (!blocked) {\n      bsController!.panStart(event.nativeEvent);\n    }\n  };\n\n  const onPanMove = function onPanMove(event: UIEvent<HTMLElement>) {\n    bsController!.panMove(event.nativeEvent);\n  };\n\n  const onPanEnd = function onPanEnd() {\n    bsController!.panEnd();\n  };\n\n  useIsomorphicLayoutEffect(\n    function init() {\n      if (bsController) {\n        bsController.init(initialSnapPoint);\n      }\n    },\n    [initialSnapPoint, bsController],\n  );\n\n  useIsomorphicLayoutEffect(\n    () =>\n      function unmount() {\n        if (bsController) {\n          bsController.destroy();\n        }\n      },\n    [bsController],\n  );\n\n  return [\n    {\n      initialStyle,\n      setSheetEl,\n      setSheetScrollEl,\n      setBackdropEl,\n    },\n    bsController !== null\n      ? {\n          onTouchStart: onPanStart,\n          onTouchMove: onPanMove,\n          onTouchEnd: onPanEnd,\n          onTouchCancel: onPanEnd,\n          onMouseDown: onPanStart,\n          onMouseMove: onPanMove,\n          onMouseUp: onPanEnd,\n          onMouseLeave: onPanEnd,\n        }\n      : undefined,\n  ];\n};\n"],"names":["useMemo","useState","noop","useStableCallback","useIsomorphicLayoutEffect","BottomSheetController","CSSTransitionController","useBottomSheet","enabled","blocked","initialSnapPoint","sheetCSSProperty","backdropCSSProperty","onDismiss","onDismissProp","sheetScrollEl","setSheetScrollEl","sheetEl","setSheetEl","backdropEl","setBackdropEl","initialStyle","unit","currentSnapPoint","parseInitialSnapPoint","undefined","bsController","sheetTransitionController","backdropTransitionController","onPanStart","event","panStart","nativeEvent","onPanMove","panMove","onPanEnd","panEnd","init","unmount","destroy","onTouchStart","onTouchMove","onTouchEnd","onTouchCancel","onMouseDown","onMouseMove","onMouseUp","onMouseLeave"],"mappings":"AAAA;AAEA,SAMEA,OAAO,EACPC,QAAQ,QACH,QAAQ;AACf,SAASC,IAAI,QAAQ,kBAAkB;AACvC,SAASC,iBAAiB,QAAQ,mCAAgC;AAClE,SAASC,yBAAyB,QAAQ,kCAA+B;AACzE,SAASC,qBAAqB,QAA+B,yCAAsC;AACnG,SAASC,uBAAuB,QAAQ,2CAAwC;AA+BhF;;;;;;;;;;;;;;;;;;;;;;;;;CAyBC,GACD,OAAO,MAAMC,iBAAiB,CAC5BC,SACA,EACEC,OAAO,EACPC,gBAAgB,EAChBC,gBAAgB,EAChBC,mBAAmB,EACnBC,WAAWC,aAAa,EACF;IAExB,MAAM,CAACC,eAAeC,iBAAiB,GAAGf,SAA6B;IACvE,MAAM,CAACgB,SAASC,WAAW,GAAGjB,SAA6B;IAC3D,MAAM,CAACkB,YAAYC,cAAc,GAAGnB,SAA6B;IAEjE,MAAMoB,eAAerB,QAAmC;QACtD,IAAI,CAACQ,SAAS;YACZ;QACF;QAEA,MAAM,EAAEc,IAAI,EAAEC,gBAAgB,EAAE,GAC9BlB,sBAAsBmB,qBAAqB,CAACd;QAE9C,OAAOY,SAAS,MAAM;YAAE,CAACX,iBAAiB,EAAE,GAAGY,mBAAmBD,MAAM;QAAC,IAAIG;IAC/E,GAAG;QAACjB;QAASE;QAAkBC;KAAiB;IAEhD,MAAME,YAAYV,kBAAkBW,iBAAiBZ;IACrD,MAAMwB,eAAe1B,QAAsC;QACzD,IAAI,CAACQ,WAAWS,YAAY,MAAM;YAChC,OAAO;QACT;QAEA,OAAO,IAAIZ,sBAAsBY,SAAS;YACxCF,eAAeA,iBAAiB;YAChCY,2BAA2B,IAAIrB,wBAAgCW,SAASN;YACxEiB,8BAA8BT,aAC1B,IAAIb,wBAAwBa,YAAYP,uBACxC;YACJC;QACF;IACF,GAAG;QACDL;QACAS;QACAN;QACAI;QACAI;QACAP;QACAC;KACD;IAED,MAAMgB,aAAa,SAASA,WAAWC,KAA2B;QAChE,IAAI,CAACrB,SAAS;YACZiB,aAAcK,QAAQ,CAACD,MAAME,WAAW;QAC1C;IACF;IAEA,MAAMC,YAAY,SAASA,UAAUH,KAA2B;QAC9DJ,aAAcQ,OAAO,CAACJ,MAAME,WAAW;IACzC;IAEA,MAAMG,WAAW,SAASA;QACxBT,aAAcU,MAAM;IACtB;IAEAhC,0BACE,SAASiC;QACP,IAAIX,cAAc;YAChBA,aAAaW,IAAI,CAAC3B;QACpB;IACF,GACA;QAACA;QAAkBgB;KAAa;IAGlCtB,0BACE,IACE,SAASkC;YACP,IAAIZ,cAAc;gBAChBA,aAAaa,OAAO;YACtB;QACF,GACF;QAACb;KAAa;IAGhB,OAAO;QACL;YACEL;YACAH;YACAF;YACAI;QACF;QACAM,iBAAiB,OACb;YACEc,cAAcX;YACdY,aAAaR;YACbS,YAAYP;YACZQ,eAAeR;YACfS,aAAaf;YACbgB,aAAaZ;YACba,WAAWX;YACXY,cAAcZ;QAChB,IACAV;KACL;AACH,EAAE"}
+{"version":3,"sources":["../../../src/lib/sheet/useBottomSheet.ts"],"sourcesContent":["'use client';\n\nimport {\n  type CSSProperties,\n  type Dispatch,\n  type SetStateAction,\n  type UIEvent,\n  type UIEventHandler,\n  useMemo,\n  useState,\n} from 'react';\nimport { noop } from '@vkontakte/vkjs';\nimport { useStableCallback } from '../../hooks/useStableCallback';\nimport { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect';\nimport {\n  BottomSheetController,\n  type SnapPoint,\n  type SnapPointChange,\n} from './controllers/BottomSheetController';\nimport { CSSTransitionController } from './controllers/CSSTransitionController';\n\nexport type UseBottomSheetOptions = {\n  sheetCSSProperty: string;\n  backdropCSSProperty: string;\n  snapPoint: SnapPoint;\n  blocked?: boolean;\n  onSnapPointChange?: SnapPointChange;\n  onDismiss?: VoidFunction;\n};\n\nexport type UseBottomSheetHandlers = {\n  onTouchStart: UIEventHandler<HTMLElement>;\n  onTouchMove: UIEventHandler<HTMLElement>;\n  onTouchEnd: UIEventHandler<HTMLElement>;\n  onTouchCancel: UIEventHandler<HTMLElement>;\n  onMouseDown: UIEventHandler<HTMLElement>;\n  onMouseMove: UIEventHandler<HTMLElement>;\n  onMouseUp: UIEventHandler<HTMLElement>;\n  onMouseLeave: UIEventHandler<HTMLElement>;\n};\n\nexport type UseBottomSheetResult = [\n  {\n    initialStyle?: CSSProperties;\n    setSheetEl: Dispatch<SetStateAction<HTMLElement | null>>;\n    setSheetScrollEl: Dispatch<SetStateAction<HTMLElement | null>>;\n    setBackdropEl: Dispatch<SetStateAction<HTMLElement | null>>;\n  },\n  UseBottomSheetHandlers | undefined,\n];\n\n/**\n * # Checklist\n *\n * ## Возможности\n *\n * - [x] есть возможность открывать до определенного размера (см. `snapPoint`)\n * - [x] есть возможность закрыть при сильном смахивании вниз\n * - [x] есть возможность отключить взаимодействие на определённых элементах используя data-атрибут\n * - [x] есть возможность отключить взаимодействие на определённых элементах используя stopPropagation()\n *\n * ## Анимации\n *\n * - [x] оверлей становится светлее в зависимости от процента сворачивания\n *    - [x] при `snapPoint !== 'auto'` процент высчитывается относительно переданного `snapPoint.initial`\n * - [x] при перетаскивании за пределы есть анимация натяжения\n *   > note: в `ModalPage` этого эффекта нет при высоте 100% из-за `max-block-size: 100%`\n *\n * ## Пограничные кейсы\n *\n * - [x] ⚠️ не блокирует взаимодействие с _горизонтальным_ скроллом\n * - [x] ⚠️ не блокирует взаимодействие с _вертикальным_ скроллом\n * - [x] ⚠️ не блокирует взаимодействие с полями ввода\n * - [x] ⚠️ не блокирует взаимодействие с элементами вне корневого элемента\n *\n * @private\n */\nexport const useBottomSheet = (\n  enabled: boolean,\n  {\n    blocked,\n    snapPoint,\n    sheetCSSProperty,\n    backdropCSSProperty,\n    onSnapPointChange: onSnapPointChangeProp,\n    onDismiss: onDismissProp,\n  }: UseBottomSheetOptions,\n): UseBottomSheetResult => {\n  const [sheetScrollEl, setSheetScrollEl] = useState<HTMLElement | null>(null);\n  const [sheetEl, setSheetEl] = useState<HTMLElement | null>(null);\n  const [backdropEl, setBackdropEl] = useState<HTMLElement | null>(null);\n\n  const initialStyle = useMemo<CSSProperties | undefined>(\n    () =>\n      enabled && snapPoint !== 'auto' ? { [sheetCSSProperty]: `${snapPoint.initial}%` } : undefined,\n    [enabled, snapPoint, sheetCSSProperty],\n  );\n\n  const onSnapPointChange = useStableCallback(onSnapPointChangeProp || noop);\n  const onDismiss = useStableCallback(onDismissProp || noop);\n  const bsController = useMemo<BottomSheetController | null>(() => {\n    if (!enabled || sheetEl === null) {\n      return null;\n    }\n\n    return new BottomSheetController(sheetEl, {\n      sheetScrollEl: sheetScrollEl || null,\n      sheetTransitionController: new CSSTransitionController<string>(sheetEl, sheetCSSProperty),\n      backdropTransitionController: backdropEl\n        ? new CSSTransitionController(backdropEl, backdropCSSProperty)\n        : null,\n      onSnapPointChange,\n      onDismiss,\n    });\n  }, [\n    enabled,\n    sheetEl,\n    sheetCSSProperty,\n    sheetScrollEl,\n    backdropEl,\n    backdropCSSProperty,\n    onSnapPointChange,\n    onDismiss,\n  ]);\n\n  const onPanStart = function onPanStart(event: UIEvent<HTMLElement>) {\n    if (!blocked) {\n      bsController!.panStart(event.nativeEvent);\n    }\n  };\n\n  const onPanMove = function onPanMove(event: UIEvent<HTMLElement>) {\n    bsController!.panMove(event.nativeEvent);\n  };\n\n  const onPanEnd = function onPanEnd() {\n    bsController!.panEnd();\n  };\n\n  useIsomorphicLayoutEffect(\n    function init() {\n      if (bsController) {\n        bsController.init(snapPoint);\n      }\n    },\n    [snapPoint, bsController],\n  );\n\n  useIsomorphicLayoutEffect(\n    () =>\n      function unmount() {\n        if (bsController) {\n          bsController.destroy();\n        }\n      },\n    [bsController],\n  );\n\n  return [\n    {\n      initialStyle,\n      setSheetEl,\n      setSheetScrollEl,\n      setBackdropEl,\n    },\n    bsController !== null\n      ? {\n          onTouchStart: onPanStart,\n          onTouchMove: onPanMove,\n          onTouchEnd: onPanEnd,\n          onTouchCancel: onPanEnd,\n          onMouseDown: onPanStart,\n          onMouseMove: onPanMove,\n          onMouseUp: onPanEnd,\n          onMouseLeave: onPanEnd,\n        }\n      : undefined,\n  ];\n};\n"],"names":["useMemo","useState","noop","useStableCallback","useIsomorphicLayoutEffect","BottomSheetController","CSSTransitionController","useBottomSheet","enabled","blocked","snapPoint","sheetCSSProperty","backdropCSSProperty","onSnapPointChange","onSnapPointChangeProp","onDismiss","onDismissProp","sheetScrollEl","setSheetScrollEl","sheetEl","setSheetEl","backdropEl","setBackdropEl","initialStyle","initial","undefined","bsController","sheetTransitionController","backdropTransitionController","onPanStart","event","panStart","nativeEvent","onPanMove","panMove","onPanEnd","panEnd","init","unmount","destroy","onTouchStart","onTouchMove","onTouchEnd","onTouchCancel","onMouseDown","onMouseMove","onMouseUp","onMouseLeave"],"mappings":"AAAA;AAEA,SAMEA,OAAO,EACPC,QAAQ,QACH,QAAQ;AACf,SAASC,IAAI,QAAQ,kBAAkB;AACvC,SAASC,iBAAiB,QAAQ,mCAAgC;AAClE,SAASC,yBAAyB,QAAQ,kCAA+B;AACzE,SACEC,qBAAqB,QAGhB,yCAAsC;AAC7C,SAASC,uBAAuB,QAAQ,2CAAwC;AAgChF;;;;;;;;;;;;;;;;;;;;;;;;;CAyBC,GACD,OAAO,MAAMC,iBAAiB,CAC5BC,SACA,EACEC,OAAO,EACPC,SAAS,EACTC,gBAAgB,EAChBC,mBAAmB,EACnBC,mBAAmBC,qBAAqB,EACxCC,WAAWC,aAAa,EACF;IAExB,MAAM,CAACC,eAAeC,iBAAiB,GAAGjB,SAA6B;IACvE,MAAM,CAACkB,SAASC,WAAW,GAAGnB,SAA6B;IAC3D,MAAM,CAACoB,YAAYC,cAAc,GAAGrB,SAA6B;IAEjE,MAAMsB,eAAevB,QACnB,IACEQ,WAAWE,cAAc,SAAS;YAAE,CAACC,iBAAiB,EAAE,GAAGD,UAAUc,OAAO,CAAC,CAAC,CAAC;QAAC,IAAIC,WACtF;QAACjB;QAASE;QAAWC;KAAiB;IAGxC,MAAME,oBAAoBV,kBAAkBW,yBAAyBZ;IACrE,MAAMa,YAAYZ,kBAAkBa,iBAAiBd;IACrD,MAAMwB,eAAe1B,QAAsC;QACzD,IAAI,CAACQ,WAAWW,YAAY,MAAM;YAChC,OAAO;QACT;QAEA,OAAO,IAAId,sBAAsBc,SAAS;YACxCF,eAAeA,iBAAiB;YAChCU,2BAA2B,IAAIrB,wBAAgCa,SAASR;YACxEiB,8BAA8BP,aAC1B,IAAIf,wBAAwBe,YAAYT,uBACxC;YACJC;YACAE;QACF;IACF,GAAG;QACDP;QACAW;QACAR;QACAM;QACAI;QACAT;QACAC;QACAE;KACD;IAED,MAAMc,aAAa,SAASA,WAAWC,KAA2B;QAChE,IAAI,CAACrB,SAAS;YACZiB,aAAcK,QAAQ,CAACD,MAAME,WAAW;QAC1C;IACF;IAEA,MAAMC,YAAY,SAASA,UAAUH,KAA2B;QAC9DJ,aAAcQ,OAAO,CAACJ,MAAME,WAAW;IACzC;IAEA,MAAMG,WAAW,SAASA;QACxBT,aAAcU,MAAM;IACtB;IAEAhC,0BACE,SAASiC;QACP,IAAIX,cAAc;YAChBA,aAAaW,IAAI,CAAC3B;QACpB;IACF,GACA;QAACA;QAAWgB;KAAa;IAG3BtB,0BACE,IACE,SAASkC;YACP,IAAIZ,cAAc;gBAChBA,aAAaa,OAAO;YACtB;QACF,GACF;QAACb;KAAa;IAGhB,OAAO;QACL;YACEH;YACAH;YACAF;YACAI;QACF;QACAI,iBAAiB,OACb;YACEc,cAAcX;YACdY,aAAaR;YACbS,YAAYP;YACZQ,eAAeR;YACfS,aAAaf;YACbgB,aAAaZ;YACba,WAAWX;YACXY,cAAcZ;QAChB,IACAV;KACL;AACH,EAAE"}