@estuary-solutions/rn-core-ui 0.0.5 → 0.1.0

package/lib/module/Cards/Paper.js

@@ -0,0 +1,42 @@
+"use strict";
+
+import React from 'react';
+import { View } from 'react-native';
+import { useTheme } from '../theme/useTheme';
+
+/** Variant catalogues shared with the Figma kit contract (figma/kit.json). */
+import { jsx as _jsx } from "react/jsx-runtime";
+export const PAPER_VARIANTS = ['elevation', 'outlined'];
+export const PAPER_ELEVATIONS = [0, 1, 2, 3];
+
+/** Theme elevation level; 0 is flat. Rendered with `boxShadow` (New Architecture). */
+
+const Paper = /*#__PURE__*/React.forwardRef(function Paper({
+  elevation = 1,
+  square = false,
+  variant = 'elevation',
+  style,
+  ...rest
+}, ref) {
+  const theme = useTheme();
+  const isRaised = variant === 'elevation' && elevation > 0;
+  const baseStyle = {
+    backgroundColor: isRaised ? theme.color.surface.raised : theme.color.surface.default,
+    borderRadius: square ? 0 : theme.radius.md
+  };
+  const elevationStyle = isRaised ? {
+    boxShadow: theme.elevation[elevation]
+  } : {};
+  const outlinedStyle = variant === 'outlined' ? {
+    borderWidth: 1,
+    borderColor: theme.color.border.default
+  } : {};
+  return /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    style: [baseStyle, elevationStyle, outlinedStyle, style],
+    ...rest
+  });
+});
+Paper.displayName = 'Paper';
+export default Paper;
+//# sourceMappingURL=Paper.js.map

package/lib/module/Cards/Paper.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","useTheme","jsx","_jsx","PAPER_VARIANTS","PAPER_ELEVATIONS","Paper","forwardRef","elevation","square","variant","style","rest","ref","theme","isRaised","baseStyle","backgroundColor","color","surface","raised","default","borderRadius","radius","md","elevationStyle","boxShadow","outlinedStyle","borderWidth","borderColor","border","displayName"],"sourceRoot":"../../../src","sources":["Cards/Paper.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAyC,cAAc;AAEpE,SAASC,QAAQ,QAAQ,mBAAmB;;AAE5C;AAAA,SAAAC,GAAA,IAAAC,IAAA;AACA,OAAO,MAAMC,cAAc,GAAG,CAAC,WAAW,EAAE,UAAU,CAAU;AAChE,OAAO,MAAMC,gBAAgB,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAU;;AAGrD;;AAUA,MAAMC,KAAK,gBAAGP,KAAK,CAACQ,UAAU,CAAmB,SAASD,KAAKA,CAC7D;EAAEE,SAAS,GAAG,CAAC;EAAEC,MAAM,GAAG,KAAK;EAAEC,OAAO,GAAG,WAAW;EAAEC,KAAK;EAAE,GAAGC;AAAK,CAAC,EACxEC,GAAG,EACH;EACA,MAAMC,KAAK,GAAGb,QAAQ,CAAC,CAAC;EACxB,MAAMc,QAAQ,GAAGL,OAAO,KAAK,WAAW,IAAIF,SAAS,GAAG,CAAC;EAEzD,MAAMQ,SAAoB,GAAG;IAC3BC,eAAe,EAAEF,QAAQ,GACrBD,KAAK,CAACI,KAAK,CAACC,OAAO,CAACC,MAAM,GAC1BN,KAAK,CAACI,KAAK,CAACC,OAAO,CAACE,OAAO;IAC/BC,YAAY,EAAEb,MAAM,GAAG,CAAC,GAAGK,KAAK,CAACS,MAAM,CAACC;EAC1C,CAAC;EAED,MAAMC,cAAyB,GAAGV,QAAQ,GACtC;IAAEW,SAAS,EAAEZ,KAAK,CAACN,SAAS,CAACA,SAAS;EAAE,CAAC,GACzC,CAAC,CAAC;EAEN,MAAMmB,aAAwB,GAC5BjB,OAAO,KAAK,UAAU,GAClB;IAAEkB,WAAW,EAAE,CAAC;IAAEC,WAAW,EAAEf,KAAK,CAACI,KAAK,CAACY,MAAM,CAACT;EAAQ,CAAC,GAC3D,CAAC,CAAC;EAER,oBACElB,IAAA,CAACH,IAAI;IACHa,GAAG,EAAEA,GAAI;IACTF,KAAK,EAAE,CAACK,SAAS,EAAES,cAAc,EAAEE,aAAa,EAAEhB,KAAK,CAAE;IAAA,GACrDC;EAAI,CACT,CAAC;AAEN,CAAC,CAAC;AAEFN,KAAK,CAACyB,WAAW,GAAG,OAAO;AAE3B,eAAezB,KAAK","ignoreList":[]}

package/lib/module/DraggableFlatList/CellDecorators.js

@@ -0,0 +1,97 @@
+"use strict";
+
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import Animated, { interpolate, useAnimatedStyle } from 'react-native-reanimated';
+import { useDraggableFlatListContext } from '../context/DraggableFlatList/draggableFlatListContext';
+import { useOnCellActiveAnimation } from '../hooks/DraggableFlatList/useOnCellActiveAnimation';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ScaleDecorator = ({
+  activeScale = 1.1,
+  children
+}) => {
+  const {
+    isActive,
+    onActiveAnim
+  } = useOnCellActiveAnimation({
+    animationConfig: {
+      mass: 0.1,
+      restDisplacementThreshold: 0.0001
+    }
+  });
+  const {
+    horizontal
+  } = useDraggableFlatListContext();
+  const style = useAnimatedStyle(() => {
+    const animScale = interpolate(onActiveAnim.value, [0, 1], [1, activeScale]);
+    const scale = isActive ? animScale : 1;
+    return {
+      transform: [{
+        scaleX: scale
+      }, {
+        scaleY: scale
+      }]
+    };
+  }, [isActive]);
+  return /*#__PURE__*/_jsx(Animated.View, {
+    style: [style, horizontal && styles.horizontal],
+    children: children
+  });
+};
+export const ShadowDecorator = ({
+  elevation = 10,
+  color = 'black',
+  opacity = 0.25,
+  radius = 5,
+  children
+}) => {
+  const {
+    isActive,
+    onActiveAnim
+  } = useOnCellActiveAnimation();
+  const {
+    horizontal
+  } = useDraggableFlatListContext();
+  const style = useAnimatedStyle(() => {
+    const shadowOpacity = onActiveAnim.value * opacity;
+    return {
+      elevation: isActive ? elevation : 0,
+      shadowRadius: isActive ? radius : 0,
+      shadowColor: isActive ? color : 'transparent',
+      shadowOpacity: isActive ? shadowOpacity : 0
+    };
+  }, [isActive, onActiveAnim]);
+  return /*#__PURE__*/_jsx(Animated.View, {
+    style: [style, horizontal && styles.horizontal],
+    children: children
+  });
+};
+export const OpacityDecorator = ({
+  activeOpacity = 0.25,
+  children
+}) => {
+  const {
+    isActive,
+    onActiveAnim
+  } = useOnCellActiveAnimation();
+  const {
+    horizontal
+  } = useDraggableFlatListContext();
+  const style = useAnimatedStyle(() => {
+    const opacity = interpolate(onActiveAnim.value, [0, 1], [1, activeOpacity]);
+    return {
+      opacity: isActive ? opacity : 1
+    };
+  }, [isActive]);
+  return /*#__PURE__*/_jsx(Animated.View, {
+    style: [style, horizontal && styles.horizontal],
+    children: children
+  });
+};
+const styles = StyleSheet.create({
+  horizontal: {
+    flexDirection: 'row',
+    flex: 1
+  }
+});
+//# sourceMappingURL=CellDecorators.js.map

package/lib/module/DraggableFlatList/CellDecorators.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","StyleSheet","Animated","interpolate","useAnimatedStyle","useDraggableFlatListContext","useOnCellActiveAnimation","jsx","_jsx","ScaleDecorator","activeScale","children","isActive","onActiveAnim","animationConfig","mass","restDisplacementThreshold","horizontal","style","animScale","value","scale","transform","scaleX","scaleY","View","styles","ShadowDecorator","elevation","color","opacity","radius","shadowOpacity","shadowRadius","shadowColor","OpacityDecorator","activeOpacity","create","flexDirection","flex"],"sourceRoot":"../../../src","sources":["DraggableFlatList/CellDecorators.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/DraggableFlatList/CellDecorators.web.js

@@ -0,0 +1,83 @@
+"use strict";
+
+/// <reference lib="dom" />
+import React from 'react';
+import { useDraggableFlatListContext } from '../context/DraggableFlatList/draggableFlatListContext';
+import { useOnCellActiveAnimation } from '../hooks/DraggableFlatList/useOnCellActiveAnimation';
+
+// Web counterparts of CellDecorators.tsx: plain CSS transitions instead of reanimated worklets.
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ScaleDecorator = ({
+  activeScale = 1.1,
+  children
+}) => {
+  const {
+    isActive
+  } = useOnCellActiveAnimation({
+    animationConfig: {
+      mass: 0.1,
+      restDisplacementThreshold: 0.0001
+    }
+  });
+  const {
+    horizontal
+  } = useDraggableFlatListContext();
+  const scale = isActive ? activeScale : 1;
+  return /*#__PURE__*/_jsx("div", {
+    style: {
+      transform: `scale(${scale})`,
+      transition: 'transform 0.2s ease',
+      ...(horizontal && {
+        display: 'inline-block'
+      })
+    },
+    children: children
+  });
+};
+export const ShadowDecorator = ({
+  elevation = 10,
+  opacity = 0.25,
+  radius = 5,
+  children
+}) => {
+  const {
+    isActive
+  } = useOnCellActiveAnimation();
+  const {
+    horizontal
+  } = useDraggableFlatListContext();
+  const boxShadow = isActive ? `0px ${elevation}px ${radius}px rgba(0, 0, 0, ${opacity})` : 'none';
+  return /*#__PURE__*/_jsx("div", {
+    style: {
+      boxShadow,
+      transition: 'box-shadow 0.2s ease',
+      ...(horizontal && {
+        display: 'inline-block'
+      })
+    },
+    children: children
+  });
+};
+export const OpacityDecorator = ({
+  activeOpacity = 0.25,
+  children
+}) => {
+  const {
+    isActive
+  } = useOnCellActiveAnimation();
+  const {
+    horizontal
+  } = useDraggableFlatListContext();
+  const opacity = isActive ? activeOpacity : 1;
+  return /*#__PURE__*/_jsx("div", {
+    style: {
+      opacity,
+      transition: 'opacity 0.2s ease',
+      ...(horizontal && {
+        display: 'inline-block'
+      })
+    },
+    children: children
+  });
+};
+//# sourceMappingURL=CellDecorators.web.js.map

package/lib/module/DraggableFlatList/CellDecorators.web.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useDraggableFlatListContext","useOnCellActiveAnimation","jsx","_jsx","ScaleDecorator","activeScale","children","isActive","animationConfig","mass","restDisplacementThreshold","horizontal","scale","style","transform","transition","display","ShadowDecorator","elevation","opacity","radius","boxShadow","OpacityDecorator","activeOpacity"],"sourceRoot":"../../../src","sources":["DraggableFlatList/CellDecorators.web.tsx"],"mappings":";;AAAA;AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,2BAA2B,QAAQ,uDAAuD;AACnG,SAASC,wBAAwB,QAAQ,qDAAqD;;AAE9F;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAOA,OAAO,MAAMC,cAAc,GAAGA,CAAC;EAAEC,WAAW,GAAG,GAAG;EAAEC;AAAqB,CAAC,KAAK;EAC7E,MAAM;IAAEC;EAAS,CAAC,GAAGN,wBAAwB,CAAC;IAC5CO,eAAe,EAAE;MAAEC,IAAI,EAAE,GAAG;MAAEC,yBAAyB,EAAE;IAAO;EAClE,CAAC,CAAC;EACF,MAAM;IAAEC;EAAW,CAAC,GAAGX,2BAA2B,CAAU,CAAC;EAC7D,MAAMY,KAAK,GAAGL,QAAQ,GAAGF,WAAW,GAAG,CAAC;EAExC,oBACEF,IAAA;IACEU,KAAK,EAAE;MACLC,SAAS,EAAE,SAASF,KAAK,GAAG;MAC5BG,UAAU,EAAE,qBAAqB;MACjC,IAAIJ,UAAU,IAAI;QAAEK,OAAO,EAAE;MAAe,CAAC;IAC/C,CAAE;IAAAV,QAAA,EACDA;EAAQ,CACN,CAAC;AAEV,CAAC;AAUD,OAAO,MAAMW,eAAe,GAAGA,CAAC;EAC9BC,SAAS,GAAG,EAAE;EACdC,OAAO,GAAG,IAAI;EACdC,MAAM,GAAG,CAAC;EACVd;AACW,CAAC,KAAK;EACjB,MAAM;IAAEC;EAAS,CAAC,GAAGN,wBAAwB,CAAC,CAAC;EAC/C,MAAM;IAAEU;EAAW,CAAC,GAAGX,2BAA2B,CAAU,CAAC;EAC7D,MAAMqB,SAAS,GAAGd,QAAQ,GACtB,OAAOW,SAAS,MAAME,MAAM,oBAAoBD,OAAO,GAAG,GAC1D,MAAM;EAEV,oBACEhB,IAAA;IACEU,KAAK,EAAE;MACLQ,SAAS;MACTN,UAAU,EAAE,sBAAsB;MAClC,IAAIJ,UAAU,IAAI;QAAEK,OAAO,EAAE;MAAe,CAAC;IAC/C,CAAE;IAAAV,QAAA,EACDA;EAAQ,CACN,CAAC;AAEV,CAAC;AAOD,OAAO,MAAMgB,gBAAgB,GAAGA,CAAC;EAC/BC,aAAa,GAAG,IAAI;EACpBjB;AACY,CAAC,KAAK;EAClB,MAAM;IAAEC;EAAS,CAAC,GAAGN,wBAAwB,CAAC,CAAC;EAC/C,MAAM;IAAEU;EAAW,CAAC,GAAGX,2BAA2B,CAAU,CAAC;EAC7D,MAAMmB,OAAO,GAAGZ,QAAQ,GAAGgB,aAAa,GAAG,CAAC;EAE5C,oBACEpB,IAAA;IACEU,KAAK,EAAE;MACLM,OAAO;MACPJ,UAAU,EAAE,mBAAmB;MAC/B,IAAIJ,UAAU,IAAI;QAAEK,OAAO,EAAE;MAAe,CAAC;IAC/C,CAAE;IAAAV,QAAA,EACDA;EAAQ,CACN,CAAC;AAEV,CAAC","ignoreList":[]}

package/lib/module/DraggableFlatList/CellRendererComponent.js

@@ -0,0 +1,187 @@
+"use strict";
+
+import React from 'react';
+import { findNodeHandle } from 'react-native';
+import Animated, { runOnUI, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
+import { typedMemo } from '../utils/DraggableFlatList/typedMemo';
+import { WEB } from '../utils';
+import { CellProvider } from '../context/DraggableFlatList/cellContext';
+import { useRefs } from '../context/DraggableFlatList/refContext';
+import { useDraggableFlatListContext } from '../context/DraggableFlatList/draggableFlatListContext';
+import { useAnimatedValues } from '../context/DraggableFlatList/animatedValueContext';
+import { useStableCallback } from '../hooks/DraggableFlatList/useStableCallback';
+import { useCellTranslate } from '../hooks/DraggableFlatList/useCellTranslate';
+import { jsx as _jsx } from "react/jsx-runtime";
+function CellRendererComponent(props) {
+  const {
+    item,
+    index,
+    onLayout,
+    children,
+    ...rest
+  } = props;
+  const viewRef = React.useRef(null);
+  const {
+    cellDataRef,
+    propsRef,
+    containerRef
+  } = useRefs();
+  const {
+    horizontalAnim,
+    scrollOffset
+  } = useAnimatedValues();
+  const {
+    activeKey,
+    keyExtractor,
+    horizontal,
+    layoutAnimationDisabled
+  } = useDraggableFlatListContext();
+  const key = keyExtractor(item, index);
+  const offset = useSharedValue(-1);
+  const size = useSharedValue(-1);
+  const heldTanslate = useSharedValue(0);
+  const translate = useCellTranslate({
+    cellOffset: offset,
+    cellSize: size,
+    cellIndex: index
+  });
+  const isActive = activeKey === key;
+  const animStyle = useAnimatedStyle(() => {
+    // When activeKey becomes null at the end of a drag and the list reorders,
+    // the animated style may apply before the next paint, causing a flicker.
+    // Solution is to hold over the last animated value until the next onLayout.
+    // (Not required in web)
+    if (translate.value && !WEB) {
+      heldTanslate.value = translate.value;
+    }
+    const t = activeKey ? translate.value : heldTanslate.value;
+    return {
+      transform: [horizontalAnim.value ? {
+        translateX: t
+      } : {
+        translateY: t
+      }]
+    };
+  }, [translate, activeKey]);
+  const updateCellMeasurements = useStableCallback(() => {
+    const onSuccess = (x, y, w, h) => {
+      if (WEB && horizontal) {
+        x += scrollOffset.value;
+      }
+      const cellOffset = horizontal ? x : y;
+      const cellSize = horizontal ? w : h;
+      cellDataRef.current.set(key, {
+        measurements: {
+          size: cellSize,
+          offset: cellOffset
+        }
+      });
+      size.value = cellSize;
+      offset.value = cellOffset;
+    };
+    const onFail = () => {
+      if (propsRef.current?.debug) {
+        console.log(`## on measure fail, index: ${index}`);
+      }
+    };
+    const containerNode = containerRef.current;
+    const viewNode = viewRef.current;
+    const nodeHandle = containerNode;
+    if (viewNode && nodeHandle) {
+      //@ts-ignore
+      viewNode.measureLayout(nodeHandle, onSuccess, onFail);
+    }
+  });
+  const onCellLayout = useStableCallback(e => {
+    heldTanslate.value = 0;
+    updateCellMeasurements();
+    if (onLayout && e) {
+      onLayout(e);
+    }
+  });
+  React.useEffect(() => {
+    if (WEB) {
+      // onLayout isn't called on web when the cell index changes, so we manually re-measure
+      requestAnimationFrame(() => {
+        onCellLayout();
+      });
+    }
+  }, [index, onCellLayout]);
+  const baseStyle = React.useMemo(() => {
+    return {
+      elevation: isActive ? 1 : 0,
+      zIndex: isActive ? 999 : 0,
+      flexDirection: horizontal ? 'row' : 'column'
+    };
+  }, [isActive, horizontal]);
+  const {
+    itemEnteringAnimation,
+    itemExitingAnimation,
+    itemLayoutAnimation
+  } = propsRef.current;
+  React.useEffect(() => {
+    // NOTE: Keep an eye on reanimated LayoutAnimation refactor:
+    // https://github.com/software-mansion/react-native-reanimated/pull/3332/files
+    // We might have to change the way we register/unregister LayouAnimations:
+    // - get native module: https://github.com/software-mansion/react-native-reanimated/blob/cf59766460d05eb30357913455318d8a95909468/src/reanimated2/NativeReanimated/NativeReanimated.ts#L18
+    // - register layout animation for tag: https://github.com/software-mansion/react-native-reanimated/blob/cf59766460d05eb30357913455318d8a95909468/src/reanimated2/NativeReanimated/NativeReanimated.ts#L99
+    if (!propsRef.current.enableLayoutAnimationExperimental) {
+      return;
+    }
+    const tag = findNodeHandle(viewRef.current);
+    runOnUI((t, _layoutDisabled) => {
+      'worklet';
+
+      if (!t) {
+        return;
+      }
+      const config = global.LayoutAnimationRepository.configs[t];
+      if (config) {
+        stashConfig(t, config);
+      }
+      const stashedConfig = getStashedConfig(t);
+      if (_layoutDisabled) {
+        global.LayoutAnimationRepository.removeConfig(t);
+      } else if (stashedConfig) {
+        global.LayoutAnimationRepository.registerConfig(t, stashedConfig);
+      }
+    })(tag, layoutAnimationDisabled);
+  }, [layoutAnimationDisabled]);
+  return /*#__PURE__*/_jsx(Animated.View, {
+    ...rest,
+    ref: viewRef,
+    onLayout: onCellLayout,
+    entering: itemEnteringAnimation,
+    exiting: itemExitingAnimation,
+    layout: propsRef.current.enableLayoutAnimationExperimental ? itemLayoutAnimation : undefined,
+    style: [props.style, baseStyle, animStyle],
+    pointerEvents: activeKey ? 'none' : 'auto',
+    children: /*#__PURE__*/_jsx(CellProvider, {
+      isActive: isActive,
+      children: children
+    })
+  });
+}
+export default typedMemo(CellRendererComponent);
+runOnUI(() => {
+  'worklet';
+
+  global.RNDFLLayoutAnimationConfigStash = {};
+})();
+function stashConfig(tag, config) {
+  'worklet';
+
+  if (!global.RNDFLLayoutAnimationConfigStash) {
+    global.RNDFLLayoutAnimationConfigStash = {};
+  }
+  global.RNDFLLayoutAnimationConfigStash[tag] = config;
+}
+function getStashedConfig(tag) {
+  'worklet';
+
+  if (!global.RNDFLLayoutAnimationConfigStash) {
+    return null;
+  }
+  return global.RNDFLLayoutAnimationConfigStash[tag];
+}
+//# sourceMappingURL=CellRendererComponent.js.map

package/lib/module/DraggableFlatList/CellRendererComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","findNodeHandle","Animated","runOnUI","useAnimatedStyle","useSharedValue","typedMemo","WEB","CellProvider","useRefs","useDraggableFlatListContext","useAnimatedValues","useStableCallback","useCellTranslate","jsx","_jsx","CellRendererComponent","props","item","index","onLayout","children","rest","viewRef","useRef","cellDataRef","propsRef","containerRef","horizontalAnim","scrollOffset","activeKey","keyExtractor","horizontal","layoutAnimationDisabled","key","offset","size","heldTanslate","translate","cellOffset","cellSize","cellIndex","isActive","animStyle","value","t","transform","translateX","translateY","updateCellMeasurements","onSuccess","x","y","w","h","current","set","measurements","onFail","debug","console","log","containerNode","viewNode","nodeHandle","measureLayout","onCellLayout","e","useEffect","requestAnimationFrame","baseStyle","useMemo","elevation","zIndex","flexDirection","itemEnteringAnimation","itemExitingAnimation","itemLayoutAnimation","enableLayoutAnimationExperimental","tag","_layoutDisabled","config","global","LayoutAnimationRepository","configs","stashConfig","stashedConfig","getStashedConfig","removeConfig","registerConfig","View","ref","entering","exiting","layout","undefined","style","pointerEvents","RNDFLLayoutAnimationConfigStash"],"sourceRoot":"../../../src","sources":["DraggableFlatList/CellRendererComponent.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SACEC,cAAc,QAKT,cAAc;AACrB,OAAOC,QAAQ,IACbC,OAAO,EACPC,gBAAgB,EAChBC,cAAc,QACT,yBAAyB;AAEhC,SAASC,SAAS,QAAQ,sCAAsC;AAChE,SAASC,GAAG,QAAQ,UAAU;AAC9B,SAASC,YAAY,QAAQ,0CAA0C;AACvE,SAASC,OAAO,QAAQ,yCAAyC;AACjE,SAASC,2BAA2B,QAAQ,uDAAuD;AACnG,SAASC,iBAAiB,QAAQ,mDAAmD;AACrF,SAASC,iBAAiB,QAAQ,8CAA8C;AAChF,SAASC,gBAAgB,QAAQ,6CAA6C;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAU/E,SAASC,qBAAqBA,CAAIC,KAAe,EAAE;EACjD,MAAM;IAAEC,IAAI;IAAEC,KAAK;IAAEC,QAAQ;IAAEC,QAAQ;IAAE,GAAGC;EAAK,CAAC,GAAGL,KAAK;EAE1D,MAAMM,OAAO,GAAGvB,KAAK,CAACwB,MAAM,CAAgB,IAAI,CAAC;EACjD,MAAM;IAAEC,WAAW;IAAEC,QAAQ;IAAEC;EAAa,CAAC,GAAGlB,OAAO,CAAI,CAAC;EAE5D,MAAM;IAAEmB,cAAc;IAAEC;EAAa,CAAC,GAAGlB,iBAAiB,CAAC,CAAC;EAC5D,MAAM;IAAEmB,SAAS;IAAEC,YAAY;IAAEC,UAAU;IAAEC;EAAwB,CAAC,GACpEvB,2BAA2B,CAAI,CAAC;EAElC,MAAMwB,GAAG,GAAGH,YAAY,CAACb,IAAI,EAAEC,KAAK,CAAC;EACrC,MAAMgB,MAAM,GAAG9B,cAAc,CAAC,CAAC,CAAC,CAAC;EACjC,MAAM+B,IAAI,GAAG/B,cAAc,CAAC,CAAC,CAAC,CAAC;EAC/B,MAAMgC,YAAY,GAAGhC,cAAc,CAAC,CAAC,CAAC;EAEtC,MAAMiC,SAAS,GAAGzB,gBAAgB,CAAC;IACjC0B,UAAU,EAAEJ,MAAM;IAClBK,QAAQ,EAAEJ,IAAI;IACdK,SAAS,EAAEtB;EACb,CAAC,CAAC;EAEF,MAAMuB,QAAQ,GAAGZ,SAAS,KAAKI,GAAG;EAElC,MAAMS,SAAS,GAAGvC,gBAAgB,CAAC,MAAM;IACvC;IACA;IACA;IACA;IACA,IAAIkC,SAAS,CAACM,KAAK,IAAI,CAACrC,GAAG,EAAE;MAC3B8B,YAAY,CAACO,KAAK,GAAGN,SAAS,CAACM,KAAK;IACtC;IACA,MAAMC,CAAC,GAAGf,SAAS,GAAGQ,SAAS,CAACM,KAAK,GAAGP,YAAY,CAACO,KAAK;IAC1D,OAAO;MACLE,SAAS,EAAE,CAAClB,cAAc,CAACgB,KAAK,GAAG;QAAEG,UAAU,EAAEF;MAAE,CAAC,GAAG;QAAEG,UAAU,EAAEH;MAAE,CAAC;IAC1E,CAAC;EACH,CAAC,EAAE,CAACP,SAAS,EAAER,SAAS,CAAC,CAAC;EAE1B,MAAMmB,sBAAsB,GAAGrC,iBAAiB,CAAC,MAAM;IACrD,MAAMsC,SAAyC,GAAGA,CAACC,CAAC,EAAEC,CAAC,EAAEC,CAAC,EAAEC,CAAC,KAAK;MAChE,IAAI/C,GAAG,IAAIyB,UAAU,EAAE;QACrBmB,CAAC,IAAItB,YAAY,CAACe,KAAK;MACzB;MACA,MAAML,UAAU,GAAGP,UAAU,GAAGmB,CAAC,GAAGC,CAAC;MACrC,MAAMZ,QAAQ,GAAGR,UAAU,GAAGqB,CAAC,GAAGC,CAAC;MACnC7B,WAAW,CAAC8B,OAAO,CAACC,GAAG,CAACtB,GAAG,EAAE;QAC3BuB,YAAY,EAAE;UAAErB,IAAI,EAAEI,QAAQ;UAAEL,MAAM,EAAEI;QAAW;MACrD,CAAC,CAAC;MAEFH,IAAI,CAACQ,KAAK,GAAGJ,QAAQ;MACrBL,MAAM,CAACS,KAAK,GAAGL,UAAU;IAC3B,CAAC;IAED,MAAMmB,MAAM,GAAGA,CAAA,KAAM;MACnB,IAAIhC,QAAQ,CAAC6B,OAAO,EAAEI,KAAK,EAAE;QAC3BC,OAAO,CAACC,GAAG,CAAC,8BAA8B1C,KAAK,EAAE,CAAC;MACpD;IACF,CAAC;IAED,MAAM2C,aAAa,GAAGnC,YAAY,CAAC4B,OAAO;IAC1C,MAAMQ,QAAQ,GAAGxC,OAAO,CAACgC,OAAO;IAChC,MAAMS,UAAU,GAAGF,aAAa;IAEhC,IAAIC,QAAQ,IAAIC,UAAU,EAAE;MAC1B;MACAD,QAAQ,CAACE,aAAa,CAACD,UAAU,EAAEd,SAAS,EAAEQ,MAAM,CAAC;IACvD;EACF,CAAC,CAAC;EAEF,MAAMQ,YAAY,GAAGtD,iBAAiB,CAAEuD,CAAqB,IAAK;IAChE9B,YAAY,CAACO,KAAK,GAAG,CAAC;IACtBK,sBAAsB,CAAC,CAAC;IACxB,IAAI7B,QAAQ,IAAI+C,CAAC,EAAE;MACjB/C,QAAQ,CAAC+C,CAAC,CAAC;IACb;EACF,CAAC,CAAC;EAEFnE,KAAK,CAACoE,SAAS,CAAC,MAAM;IACpB,IAAI7D,GAAG,EAAE;MACP;MACA8D,qBAAqB,CAAC,MAAM;QAC1BH,YAAY,CAAC,CAAC;MAChB,CAAC,CAAC;IACJ;EACF,CAAC,EAAE,CAAC/C,KAAK,EAAE+C,YAAY,CAAC,CAAC;EAEzB,MAAMI,SAAS,GAAGtE,KAAK,CAACuE,OAAO,CAAC,MAAM;IACpC,OAAO;MACLC,SAAS,EAAE9B,QAAQ,GAAG,CAAC,GAAG,CAAC;MAC3B+B,MAAM,EAAE/B,QAAQ,GAAG,GAAG,GAAG,CAAC;MAC1BgC,aAAa,EAAE1C,UAAU,GAAI,KAAK,GAAc;IAClD,CAAC;EACH,CAAC,EAAE,CAACU,QAAQ,EAAEV,UAAU,CAAC,CAAC;EAE1B,MAAM;IAAE2C,qBAAqB;IAAEC,oBAAoB;IAAEC;EAAoB,CAAC,GACxEnD,QAAQ,CAAC6B,OAAO;EAElBvD,KAAK,CAACoE,SAAS,CAAC,MAAM;IACpB;IACA;IACA;IACA;IACA;IACA,IAAI,CAAC1C,QAAQ,CAAC6B,OAAO,CAACuB,iCAAiC,EAAE;MACvD;IACF;IACA,MAAMC,GAAG,GAAG9E,cAAc,CAACsB,OAAO,CAACgC,OAAO,CAAC;IAE3CpD,OAAO,CAAC,CAAC0C,CAAgB,EAAEmC,eAAe,KAAK;MAC7C,SAAS;;MACT,IAAI,CAACnC,CAAC,EAAE;QACN;MACF;MACA,MAAMoC,MAAM,GAAGC,MAAM,CAACC,yBAAyB,CAACC,OAAO,CAACvC,CAAC,CAAC;MAC1D,IAAIoC,MAAM,EAAE;QACVI,WAAW,CAACxC,CAAC,EAAEoC,MAAM,CAAC;MACxB;MACA,MAAMK,aAAa,GAAGC,gBAAgB,CAAC1C,CAAC,CAAC;MACzC,IAAImC,eAAe,EAAE;QACnBE,MAAM,CAACC,yBAAyB,CAACK,YAAY,CAAC3C,CAAC,CAAC;MAClD,CAAC,MAAM,IAAIyC,aAAa,EAAE;QACxBJ,MAAM,CAACC,yBAAyB,CAACM,cAAc,CAAC5C,CAAC,EAAEyC,aAAa,CAAC;MACnE;IACF,CAAC,CAAC,CAACP,GAAG,EAAE9C,uBAAuB,CAAC;EAClC,CAAC,EAAE,CAACA,uBAAuB,CAAC,CAAC;EAE7B,oBACElB,IAAA,CAACb,QAAQ,CAACwF,IAAI;IAAA,GACRpE,IAAI;IACRqE,GAAG,EAAEpE,OAAQ;IACbH,QAAQ,EAAE8C,YAAa;IACvB0B,QAAQ,EAAEjB,qBAAsB;IAChCkB,OAAO,EAAEjB,oBAAqB;IAC9BkB,MAAM,EACJpE,QAAQ,CAAC6B,OAAO,CAACuB,iCAAiC,GAC9CD,mBAAmB,GACnBkB,SACL;IACDC,KAAK,EAAE,CAAC/E,KAAK,CAAC+E,KAAK,EAAE1B,SAAS,EAAE3B,SAAS,CAAE;IAC3CsD,aAAa,EAAEnE,SAAS,GAAG,MAAM,GAAG,MAAO;IAAAT,QAAA,eAC3CN,IAAA,CAACP,YAAY;MAACkC,QAAQ,EAAEA,QAAS;MAAArB,QAAA,EAAEA;IAAQ,CAAe;EAAC,CAC9C,CAAC;AAEpB;AAEA,eAAef,SAAS,CAACU,qBAAqB,CAAC;AAU/Cb,OAAO,CAAC,MAAM;EACZ,SAAS;;EACT+E,MAAM,CAACgB,+BAA+B,GAAG,CAAC,CAAC;AAC7C,CAAC,CAAC,CAAC,CAAC;AAEJ,SAASb,WAAWA,CAACN,GAAW,EAAEE,MAAe,EAAE;EACjD,SAAS;;EACT,IAAI,CAACC,MAAM,CAACgB,+BAA+B,EAAE;IAC3ChB,MAAM,CAACgB,+BAA+B,GAAG,CAAC,CAAC;EAC7C;EACAhB,MAAM,CAACgB,+BAA+B,CAACnB,GAAG,CAAC,GAAGE,MAAM;AACtD;AAEA,SAASM,gBAAgBA,CAACR,GAAW,EAAE;EACrC,SAAS;;EACT,IAAI,CAACG,MAAM,CAACgB,+BAA+B,EAAE;IAC3C,OAAO,IAAI;EACb;EACA,OAAOhB,MAAM,CAACgB,+BAA+B,CAACnB,GAAG,CAAC;AACpD","ignoreList":[]}