@erquhart/heroui-native 1.0.0-beta.10.1

package/lib/module/components/skeleton/skeleton.js

@@ -0,0 +1,157 @@
+"use strict";
+
+import React, { useCallback, useMemo, useState } from 'react';
+import { StyleSheet, useWindowDimensions } from 'react-native';
+import Animated, { useSharedValue } from 'react-native-reanimated';
+import { AnimationSettingsProvider } from "../../helpers/contexts/animation-settings-context.js";
+import LinearGradientComponent from "./linear-gradient.js";
+import { SkeletonAnimationProvider, useSkeletonAnimation, useSkeletonPulseAnimation, useSkeletonRootAnimation, useSkeletonShimmerAnimation } from "./skeleton.animation.js";
+import { DISPLAY_NAME } from "./skeleton.constants.js";
+import styleSheet, { nativeStyles } from "./skeleton.styles.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+// --------------------------------------------------
+
+const ShimmerAnimation = ({
+  animation,
+  isAnimatedStyleActive = true
+}) => {
+  const {
+    rContainerStyle,
+    gradientColors
+  } = useSkeletonShimmerAnimation({
+    animation
+  });
+  const shimmerStyle = isAnimatedStyleActive ? [StyleSheet.absoluteFill, nativeStyles.borderCurve, rContainerStyle] : [StyleSheet.absoluteFill, nativeStyles.borderCurve];
+  return /*#__PURE__*/_jsx(Animated.View, {
+    style: shimmerStyle,
+    children: /*#__PURE__*/_jsx(LinearGradientComponent, {
+      colors: gradientColors
+    })
+  });
+};
+
+// --------------------------------------------------
+
+const PulseAnimation = ({
+  children,
+  animation,
+  isAnimatedStyleActive = true
+}) => {
+  const {
+    variant
+  } = useSkeletonAnimation();
+  const {
+    rContainerStyle
+  } = useSkeletonPulseAnimation({
+    animation
+  });
+  if (variant === 'pulse') {
+    const pulseStyle = isAnimatedStyleActive ? rContainerStyle : undefined;
+    return /*#__PURE__*/_jsx(Animated.View, {
+      style: pulseStyle,
+      children: children
+    });
+  }
+  return children;
+};
+
+// --------------------------------------------------
+
+const Skeleton = props => {
+  const {
+    children,
+    isLoading = true,
+    variant = 'shimmer',
+    animation,
+    isAnimatedStyleActive = true,
+    className,
+    style,
+    ...restProps
+  } = props;
+  const [componentWidth, setComponentWidth] = useState(0);
+  const [offset, setOffset] = useState(0);
+  const progress = useSharedValue(0);
+  const {
+    width: screenWidth
+  } = useWindowDimensions();
+  const {
+    isAllAnimationsDisabled,
+    entering,
+    exiting
+  } = useSkeletonRootAnimation({
+    animation,
+    isLoading,
+    variant,
+    progress
+  });
+  const tvStyles = styleSheet.skeleton({
+    className
+  });
+  const handleLayout = useCallback(event => {
+    if (componentWidth === 0) {
+      const {
+        width,
+        x
+      } = event.nativeEvent.layout;
+      setComponentWidth(width);
+      setOffset(x);
+    }
+  }, [componentWidth]);
+  const animationContextValue = useMemo(() => ({
+    isLoading,
+    variant,
+    progress,
+    componentWidth,
+    offset,
+    screenWidth
+  }), [isLoading, variant, progress, componentWidth, offset, screenWidth]);
+  const animationSettingsContextValue = useMemo(() => ({
+    isAllAnimationsDisabled
+  }), [isAllAnimationsDisabled]);
+  if (!isLoading) {
+    return /*#__PURE__*/_jsx(Animated.View, {
+      entering: entering,
+      exiting: exiting,
+      children: children
+    }, "content");
+  }
+  return /*#__PURE__*/_jsx(AnimationSettingsProvider, {
+    value: animationSettingsContextValue,
+    children: /*#__PURE__*/_jsx(SkeletonAnimationProvider, {
+      value: animationContextValue,
+      children: /*#__PURE__*/_jsx(PulseAnimation, {
+        animation: animation,
+        isAnimatedStyleActive: isAnimatedStyleActive,
+        children: /*#__PURE__*/_jsx(Animated.View, {
+          entering: entering,
+          exiting: exiting,
+          onLayout: handleLayout,
+          style: [nativeStyles.borderCurve, style],
+          className: tvStyles,
+          ...restProps,
+          children: variant === 'shimmer' && componentWidth > 0 && /*#__PURE__*/_jsx(ShimmerAnimation, {
+            animation: animation,
+            isAnimatedStyleActive: isAnimatedStyleActive
+          })
+        }, "skeleton")
+      })
+    })
+  });
+};
+
+// --------------------------------------------------
+
+Skeleton.displayName = DISPLAY_NAME.SKELETON;
+
+/**
+ * Skeleton component for displaying loading placeholders
+ *
+ * @component Skeleton - Animated loading placeholder that can display shimmer or pulse effects.
+ * Shows skeleton state when isLoading is true, otherwise displays children content.
+ * Supports customizable animations through the animation prop with shimmer and pulse configurations.
+ * Shape and size are controlled via className for maximum flexibility.
+ *
+ * @see Full documentation: https://heroui.com/components/skeleton
+ */
+export default Skeleton;
+//# sourceMappingURL=skeleton.js.map

package/lib/module/components/skeleton/skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","useMemo","useState","StyleSheet","useWindowDimensions","Animated","useSharedValue","AnimationSettingsProvider","LinearGradientComponent","SkeletonAnimationProvider","useSkeletonAnimation","useSkeletonPulseAnimation","useSkeletonRootAnimation","useSkeletonShimmerAnimation","DISPLAY_NAME","styleSheet","nativeStyles","jsx","_jsx","ShimmerAnimation","animation","isAnimatedStyleActive","rContainerStyle","gradientColors","shimmerStyle","absoluteFill","borderCurve","View","style","children","colors","PulseAnimation","variant","pulseStyle","undefined","Skeleton","props","isLoading","className","restProps","componentWidth","setComponentWidth","offset","setOffset","progress","width","screenWidth","isAllAnimationsDisabled","entering","exiting","tvStyles","skeleton","handleLayout","event","x","nativeEvent","layout","animationContextValue","animationSettingsContextValue","value","onLayout","displayName","SKELETON"],"sourceRoot":"../../../../src","sources":["components/skeleton/skeleton.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/skeleton/skeleton.md

@@ -0,0 +1,200 @@
+# Skeleton
+
+Displays a loading placeholder with shimmer or pulse animation effects.
+
+## Imports
+
+Note: Before importing this component, ensure you have completed the setup as per the [Quick Start guide](../../../README.md).
+
+```tsx
+import { Skeleton } from 'heroui-native';
+```
+
+## Usage
+
+### Basic Usage
+
+The Skeleton component creates an animated placeholder while content is loading.
+
+```tsx
+<Skeleton className="h-20 w-full rounded-lg" />
+```
+
+### With Content
+
+Show skeleton while loading, then display content when ready.
+
+```tsx
+<Skeleton isLoading={isLoading} className="h-20 rounded-lg">
+  <View className="h-20 bg-primary rounded-lg">
+    <Text>Loaded Content</Text>
+  </View>
+</Skeleton>
+```
+
+### Animation Variants
+
+Control the animation style with the `variant` prop.
+
+```tsx
+<Skeleton variant="shimmer" className="h-20 w-full rounded-lg" />
+<Skeleton variant="pulse" className="h-20 w-full rounded-lg" />
+<Skeleton variant="none" className="h-20 w-full rounded-lg" />
+```
+
+### Custom Shimmer Configuration
+
+Customize the shimmer effect with duration, speed, and highlight color.
+
+```tsx
+<Skeleton
+  className="h-16 w-full rounded-lg"
+  variant="shimmer"
+  animation={{
+    shimmer: {
+      duration: 2000,
+      speed: 2,
+      highlightColor: 'rgba(59, 130, 246, 0.3)',
+    },
+  }}
+>
+  ...
+</Skeleton>
+```
+
+### Custom Pulse Configuration
+
+Configure pulse animation with duration and opacity range.
+
+```tsx
+<Skeleton
+  className="h-16 w-full rounded-lg"
+  variant="pulse"
+  animation={{
+    pulse: {
+      duration: 500,
+      minOpacity: 0.1,
+      maxOpacity: 0.8,
+    },
+  }}
+>
+  ...
+</Skeleton>
+```
+
+### Shape Variations
+
+Create different skeleton shapes using className for styling.
+
+```tsx
+<Skeleton className="h-4 w-full rounded-md" />
+<Skeleton className="h-4 w-3/4 rounded-md" />
+<Skeleton className="h-4 w-1/2 rounded-md" />
+<Skeleton className="size-12 rounded-full" />
+```
+
+### Custom Enter/Exit Animations
+
+Apply custom Reanimated transitions when skeleton appears or disappears.
+
+```tsx
+<Skeleton
+  entering={FadeIn.duration(300)}
+  exiting={FadeOut.duration(300)}
+  isLoading={isLoading}
+  className="h-20 w-full rounded-lg"
+>
+  ...
+</Skeleton>
+```
+
+## Example
+
+```tsx
+import { Avatar, Card, Skeleton } from 'heroui-native';
+import { useState } from 'react';
+import { Image, Text, View } from 'react-native';
+
+export default function SkeletonExample() {
+  const [isLoading, setIsLoading] = useState(true);
+
+  return (
+    <Card className="p-4">
+      <View className="flex-row items-center gap-3 mb-4">
+        <Skeleton isLoading={isLoading} className="h-10 w-10 rounded-full">
+          <Avatar size="sm" alt="Avatar">
+            <Avatar.Image source={{ uri: 'https://i.pravatar.cc/150?img=4' }} />
+            <Avatar.Fallback />
+          </Avatar>
+        </Skeleton>
+
+        <View className="flex-1 gap-1">
+          <Skeleton isLoading={isLoading} className="h-3 w-32 rounded-md">
+            <Text className="font-semibold text-foreground">John Doe</Text>
+          </Skeleton>
+          <Skeleton isLoading={isLoading} className="h-3 w-24 rounded-md">
+            <Text className="text-sm text-muted">@johndoe</Text>
+          </Skeleton>
+        </View>
+      </View>
+
+      <Skeleton
+        isLoading={isLoading}
+        className="h-48 w-full rounded-lg"
+        animation={{
+          shimmer: {
+            duration: 1500,
+            speed: 1,
+          },
+        }}
+      >
+        <View className="h-48 bg-surface-tertiary rounded-lg overflow-hidden">
+          <Image
+            source={{
+              uri: 'https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/backgrounds/cards/car1.jpg',
+            }}
+            className="h-full w-full"
+          />
+        </View>
+      </Skeleton>
+    </Card>
+  );
+}
+```
+
+## API Reference
+
+### Skeleton
+
+| prop                    | type                             | default     | description                                                  |
+| ----------------------- | -------------------------------- | ----------- | ------------------------------------------------------------ |
+| `children`              | `React.ReactNode`                | -           | Content to show when not loading                             |
+| `isLoading`             | `boolean`                        | `true`      | Whether the skeleton is currently loading                    |
+| `variant`               | `'shimmer' \| 'pulse' \| 'none'` | `'shimmer'` | Animation variant                                            |
+| `animation`             | `SkeletonRootAnimation`          | -           | Animation configuration                                      |
+| `isAnimatedStyleActive` | `boolean`                        | `true`      | Whether animated styles (react-native-reanimated) are active |
+| `className`             | `string`                         | -           | Additional CSS classes for styling                           |
+| `...Animated.ViewProps` | `AnimatedProps<ViewProps>`       | -           | All Reanimated Animated.View props are supported             |
+
+#### SkeletonRootAnimation
+
+Animation configuration for Skeleton component. Can be:
+
+- `false` or `"disabled"`: Disable only root animations
+- `"disable-all"`: Disable all animations including children
+- `true` or `undefined`: Use default animations
+- `object`: Custom animation configuration
+
+| prop                     | type                                     | default                     | description                                     |
+| ------------------------ | ---------------------------------------- | --------------------------- | ----------------------------------------------- |
+| `state`                  | `'disabled' \| 'disable-all' \| boolean` | -                           | Disable animations while customizing properties |
+| `entering.value`         | `EntryOrExitLayoutType`                  | `FadeIn`                    | Custom entering animation                       |
+| `exiting.value`          | `EntryOrExitLayoutType`                  | `FadeOut`                   | Custom exiting animation                        |
+| `shimmer.duration`       | `number`                                 | `1500`                      | Animation duration in milliseconds              |
+| `shimmer.speed`          | `number`                                 | `1`                         | Speed multiplier for the animation              |
+| `shimmer.highlightColor` | `string`                                 | -                           | Highlight color for the shimmer effect          |
+| `shimmer.easing`         | `EasingFunction`                         | `Easing.linear`             | Easing function for the animation               |
+| `pulse.duration`         | `number`                                 | `1000`                      | Animation duration in milliseconds              |
+| `pulse.minOpacity`       | `number`                                 | `0.5`                       | Minimum opacity value                           |
+| `pulse.maxOpacity`       | `number`                                 | `1`                         | Maximum opacity value                           |
+| `pulse.easing`           | `EasingFunction`                         | `Easing.inOut(Easing.ease)` | Easing function for the animation               |

package/lib/module/components/skeleton/skeleton.styles.js

@@ -0,0 +1,59 @@
+"use strict";
+
+import { StyleSheet } from 'react-native';
+import { tv } from 'tailwind-variants';
+import { combineStyles } from "../../helpers/theme/utils/combine-styles.js";
+
+/**
+ * Main skeleton component styles
+ *
+ * @note ANIMATED PROPERTIES (cannot be set via className):
+ * The following property is animated and cannot be overridden using Tailwind classes:
+ * - `opacity` - Animated for pulse variant transitions (min: 0.5, max: 1)
+ *
+ * Note: The shimmer variant uses an internal overlay with `transform` (translateX) animation, which doesn't affect the className prop.
+ *
+ * To customize these properties, use the `animation` prop on `Skeleton`:
+ * ```tsx
+ * <Skeleton
+ *   variant="pulse"
+ *   animation={{
+ *     pulse: { minOpacity: 0.5, maxOpacity: 1, duration: 1000, easing: Easing.inOut(Easing.ease) }
+ *   }}
+ * />
+ * ```
+ *
+ * For shimmer variant:
+ * ```tsx
+ * <Skeleton
+ *   variant="shimmer"
+ *   animation={{
+ *     shimmer: { duration: 1500, speed: 1, highlightColor: '#ffffff', easing: Easing.linear }
+ *   }}
+ * />
+ * ```
+ *
+ * To completely disable animated styles and apply your own via className or style prop,
+ * set `isAnimatedStyleActive={false}` on `Skeleton`.
+ */
+const skeleton = tv({
+  base: 'bg-muted/30 overflow-hidden'
+});
+
+/**
+ * Native styles for border curve
+ */
+export const nativeStyles = StyleSheet.create({
+  borderCurve: {
+    borderCurve: 'continuous'
+  }
+});
+
+/**
+ * Combined skeleton styles
+ */
+const styleSheet = combineStyles({
+  skeleton
+});
+export default styleSheet;
+//# sourceMappingURL=skeleton.styles.js.map

package/lib/module/components/skeleton/skeleton.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["StyleSheet","tv","combineStyles","skeleton","base","nativeStyles","create","borderCurve","styleSheet"],"sourceRoot":"../../../../src","sources":["components/skeleton/skeleton.styles.ts"],"mappings":";;AAAA,SAASA,UAAU,QAAQ,cAAc;AACzC,SAASC,EAAE,QAAQ,mBAAmB;AACtC,SAASC,aAAa,QAAQ,6CAA0C;;AAExE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,QAAQ,GAAGF,EAAE,CAAC;EAClBG,IAAI,EAAE;AACR,CAAC,CAAC;;AAEF;AACA;AACA;AACA,OAAO,MAAMC,YAAY,GAAGL,UAAU,CAACM,MAAM,CAAC;EAC5CC,WAAW,EAAE;IACXA,WAAW,EAAE;EACf;AACF,CAAC,CAAC;;AAEF;AACA;AACA;AACA,MAAMC,UAAU,GAAGN,aAAa,CAAC;EAC/BC;AACF,CAAC,CAAC;AAEF,eAAeK,UAAU","ignoreList":[]}

package/lib/module/components/skeleton/skeleton.types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=skeleton.types.js.map

package/lib/module/components/skeleton/skeleton.types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["components/skeleton/skeleton.types.ts"],"mappings":"","ignoreList":[]}

package/lib/module/components/skeleton-group/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { default as SkeletonGroup } from "./skeleton-group.js";
+//# sourceMappingURL=index.js.map

package/lib/module/components/skeleton-group/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["default","SkeletonGroup"],"sourceRoot":"../../../../src","sources":["components/skeleton-group/index.ts"],"mappings":";;AAAA,SAASA,OAAO,IAAIC,aAAa,QAAQ,qBAAkB","ignoreList":[]}

package/lib/module/components/skeleton-group/skeleton-group.constants.js

@@ -0,0 +1,10 @@
+"use strict";
+
+/**
+ * Display names for SkeletonGroup components
+ */
+export const DISPLAY_NAME = {
+  SKELETON_GROUP_ROOT: 'HeroUINative.SkeletonGroup.Root',
+  SKELETON_GROUP_ITEM: 'HeroUINative.SkeletonGroup.Item'
+};
+//# sourceMappingURL=skeleton-group.constants.js.map

package/lib/module/components/skeleton-group/skeleton-group.constants.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["DISPLAY_NAME","SKELETON_GROUP_ROOT","SKELETON_GROUP_ITEM"],"sourceRoot":"../../../../src","sources":["components/skeleton-group/skeleton-group.constants.ts"],"mappings":";;AAAA;AACA;AACA;AACA,OAAO,MAAMA,YAAY,GAAG;EAC1BC,mBAAmB,EAAE,iCAAiC;EACtDC,mBAAmB,EAAE;AACvB,CAAC","ignoreList":[]}

package/lib/module/components/skeleton-group/skeleton-group.js

@@ -0,0 +1,82 @@
+"use strict";
+
+import React, { useMemo } from 'react';
+import { View } from 'react-native';
+import { createContext } from "../../helpers/utils/index.js";
+import Skeleton from "../skeleton/skeleton.js";
+import { DISPLAY_NAME } from "./skeleton-group.constants.js";
+import { skeletonGroupStyles } from "./skeleton-group.styles.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const [SkeletonGroupProvider, useSkeletonGroupContext] = createContext({
+  name: 'SkeletonGroupContext',
+  errorMessage: 'useSkeletonGroupContext: must be used within a SkeletonGroup'
+});
+
+// --------------------------------------------------
+
+const SkeletonGroupRoot = props => {
+  const {
+    children,
+    className,
+    style,
+    isSkeletonOnly = false,
+    ...restProps
+  } = props;
+  const containerStyles = skeletonGroupStyles({
+    className
+  });
+  const contextValue = useMemo(() => ({
+    ...restProps
+  }), [restProps]);
+  if (isSkeletonOnly && !restProps.isLoading) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(SkeletonGroupProvider, {
+    value: contextValue,
+    children: /*#__PURE__*/_jsx(View, {
+      className: containerStyles,
+      style: style,
+      children: children
+    })
+  });
+};
+
+// --------------------------------------------------
+
+const SkeletonGroupItem = props => {
+  const context = useSkeletonGroupContext();
+  const itemProps = {
+    ...context,
+    ...props
+  };
+  return /*#__PURE__*/_jsx(Skeleton, {
+    ...itemProps
+  });
+};
+
+// --------------------------------------------------
+
+SkeletonGroupRoot.displayName = DISPLAY_NAME.SKELETON_GROUP_ROOT;
+SkeletonGroupItem.displayName = DISPLAY_NAME.SKELETON_GROUP_ITEM;
+
+/**
+ * Compound SkeletonGroup component for managing multiple skeleton loading states
+ *
+ * @component SkeletonGroup - Root container that provides centralized control for all skeleton items.
+ * Passes isLoading, variant, and animation to child items via context.
+ *
+ * @component SkeletonGroup.Item - Individual skeleton item that inherits props from the parent group.
+ * Can override group props with its own props for specific customization.
+ *
+ * Props flow from SkeletonGroup to Items via context (isLoading, variant, animation).
+ * Items can override any inherited prop by passing their own values.
+ *
+ * @see Full documentation: https://heroui.com/components/skeleton-group
+ */
+const SkeletonGroup = Object.assign(SkeletonGroupRoot, {
+  /** @optional Individual skeleton item that inherits group settings */
+  Item: SkeletonGroupItem
+});
+export default SkeletonGroup;
+export { useSkeletonGroupContext };
+//# sourceMappingURL=skeleton-group.js.map

package/lib/module/components/skeleton-group/skeleton-group.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","View","createContext","Skeleton","DISPLAY_NAME","skeletonGroupStyles","jsx","_jsx","SkeletonGroupProvider","useSkeletonGroupContext","name","errorMessage","SkeletonGroupRoot","props","children","className","style","isSkeletonOnly","restProps","containerStyles","contextValue","isLoading","value","SkeletonGroupItem","context","itemProps","displayName","SKELETON_GROUP_ROOT","SKELETON_GROUP_ITEM","SkeletonGroup","Object","assign","Item"],"sourceRoot":"../../../../src","sources":["components/skeleton-group/skeleton-group.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAgC,OAAO;AAE9D,SAASC,IAAI,QAAQ,cAAc;AACnC,SAASC,aAAa,QAAQ,8BAAqB;AACnD,OAAOC,QAAQ,MAAM,yBAAsB;AAC3C,SAASC,YAAY,QAAQ,+BAA4B;AACzD,SAASC,mBAAmB,QAAQ,4BAAyB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAO9D,MAAM,CAACC,qBAAqB,EAAEC,uBAAuB,CAAC,GACpDP,aAAa,CAA4B;EACvCQ,IAAI,EAAE,sBAAsB;EAC5BC,YAAY,EACV;AACJ,CAAC,CAAC;;AAEJ;;AAEA,MAAMC,iBAAsE,GAC1EC,KAAK,IACF;EACH,MAAM;IACJC,QAAQ;IACRC,SAAS;IACTC,KAAK;IACLC,cAAc,GAAG,KAAK;IACtB,GAAGC;EACL,CAAC,GAAGL,KAAK;EAET,MAAMM,eAAe,GAAGd,mBAAmB,CAAC;IAAEU;EAAU,CAAC,CAAC;EAE1D,MAAMK,YAAY,GAAGpB,OAAO,CAC1B,OAAO;IACL,GAAGkB;EACL,CAAC,CAAC,EACF,CAACA,SAAS,CACZ,CAAC;EAED,IAAID,cAAc,IAAI,CAACC,SAAS,CAACG,SAAS,EAAE;IAC1C,OAAO,IAAI;EACb;EAEA,oBACEd,IAAA,CAACC,qBAAqB;IAACc,KAAK,EAAEF,YAAa;IAAAN,QAAA,eACzCP,IAAA,CAACN,IAAI;MAACc,SAAS,EAAEI,eAAgB;MAACH,KAAK,EAAEA,KAAM;MAAAF,QAAA,EAC5CA;IAAQ,CACL;EAAC,CACc,CAAC;AAE5B,CAAC;;AAED;;AAEA,MAAMS,iBAAmD,GAAIV,KAAK,IAAK;EACrE,MAAMW,OAAO,GAAGf,uBAAuB,CAAC,CAAC;EAEzC,MAAMgB,SAAS,GAAG;IAChB,GAAGD,OAAO;IACV,GAAGX;EACL,CAAC;EAED,oBAAON,IAAA,CAACJ,QAAQ;IAAA,GAAKsB;EAAS,CAAG,CAAC;AACpC,CAAC;;AAED;;AAEAb,iBAAiB,CAACc,WAAW,GAAGtB,YAAY,CAACuB,mBAAmB;AAChEJ,iBAAiB,CAACG,WAAW,GAAGtB,YAAY,CAACwB,mBAAmB;;AAEhE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,aAAa,GAAGC,MAAM,CAACC,MAAM,CAACnB,iBAAiB,EAAE;EACrD;EACAoB,IAAI,EAAET;AACR,CAAC,CAAC;AAEF,eAAeM,aAAa;AAC5B,SAASpB,uBAAuB","ignoreList":[]}