related-ui-components 1.1.6

package/README.md

@@ -0,0 +1,200 @@
+# Related RN Component Library
+
+## Introduction
+
+Internal React Native component library designed to streamline development across all company mobile applications. This library implements our design system with ready-to-use, customizable components that maintain consistency while accelerating development.
+
+## Table of Contents
+
+- [Installation](#installation)
+- [Components](#components)
+- [Theming](#theming)
+
+## Installation
+
+### Prerequisites
+
+- React Native ≥ 0.66.0
+- React ≥ 17.0.2
+- Node.js ≥ 14.0.0
+
+### Setup
+
+```bash
+# Using yarn
+yarn add @related/ui-components
+
+# Using npm
+npm install @related/ui-components
+```
+## Components
+
+Our component library includes a comprehensive set of pre-built UI components designed for React Native applications. Each component is fully documented with examples, props, and customization options.
+
+| Component | Description |
+|-----------|-------------|
+| [Badges](./src/components/Badges/README.md) | Reward badges |
+| [Banner](./src/components/Banner/README.md) | Advertisement banner with multiple themes |
+| [BrandIcon](./src/components/BrandIcon/README.md) | Display brand-specific icons with consistent styling. |
+| [Card](./src/components/Card/templates/README.md) | Container component for grouping related content with multiple themes. |
+| [CloseIcon](./src/components/CloseIcon/README.md) | Standard close button for modals, popups, and other dismissible elements. |
+| [Filters](./src/components/Filters/README.md) | Interactive filtering components for data lists and collections. |
+| [Input](./src/components/Input/README.md) | Text input components with validation and styling options. |
+| [LockOverlay](./src/components/LockOverlay/README.md) | Overlay component to indicate locked content or functionality. |
+| [Popup](./src/components/Popup/README.md) | Modal dialog components for alerts, confirmations, and user interactions. |
+| [ProgressBar](./src/components/ProgressBar/README.md) | Visual indicators for progress tracking. |
+| [RedemptionOption](./src/components/RedemptionOption/README.md) | Components for displaying and selecting redemption options. |
+| [ScratchCard](./src/components/ScratchCard/README.md) | Interactive scratch card component for revealing hidden content. |
+| [UnlockRewards](./src/components/UnlockRewards/README.md) | Components for displaying and interacting with reward unlocking functionality. |
+| [Wheel](./src/components/Wheel/README.md) | Spin the wheel component |
+
+## Theming
+
+Our component library supports a flexible theming system through the `ThemeProvider`. The system automatically detects and applies the user's system color preference (light or dark mode) while allowing for custom theme overrides.
+
+### Theme Structure
+
+Themes are defined using the `ThemeType` interface which includes colors for:
+
+- Core UI elements (background, surface, primary, secondary, etc.)
+- Text and icons
+- Borders and dividers
+- UI states
+- Form-specific elements
+
+### Using the Theme Provider
+
+Wrap your application with the `ThemeProvider` component:
+
+```tsx
+import { ThemeProvider } from '@related/ui-components';
+
+export default function App() {
+  return (
+    <ThemeProvider>
+      {/* Your application */}
+    </ThemeProvider>
+  );
+}
+```
+
+### Customizing Themes
+
+You can customize the light and dark themes by providing `customLightTheme` and/or `customDarkTheme` props:
+
+```tsx
+import { ThemeProvider, ThemeType } from '@related/ui-components';
+
+// Create custom theme overrides
+const customLightTheme: Partial<ThemeType> = {
+  primary: '#0066CC',
+  secondary: '#FF6B00',
+  // Override any other properties as needed
+};
+
+const customDarkTheme: Partial<ThemeType> = {
+  primary: '#4D94FF',
+  secondary: '#FF9E4D',
+  // Override any other properties as needed
+};
+
+export default function App() {
+  return (
+    <ThemeProvider 
+      customLightTheme={customLightTheme}
+      customDarkTheme={customDarkTheme}
+    >
+      {/* Your application */}
+    </ThemeProvider>
+  );
+}
+```
+
+### Accessing Theme in Components
+
+Use the `useTheme` hook to access the current theme within your components:
+
+```tsx
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { useTheme } from '@related/ui-components';
+
+const MyComponent = () => {
+  const theme = useTheme();
+  
+  return (
+    <View style={[styles.container, { backgroundColor: theme.background }]}>
+      <Text style={{ color: theme.text }}>
+        Themed Component
+      </Text>
+      <View style={[styles.card, { 
+        backgroundColor: theme.surface,
+        borderColor: theme.border 
+      }]}>
+        <Text style={{ color: theme.text }}>
+          This card uses theme colors
+        </Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 16,
+  },
+  card: {
+    borderWidth: 1,
+    borderRadius: 8,
+    padding: 16,
+    marginTop: 8,
+  },
+});
+
+export default MyComponent;
+```
+
+### System Theme Detection
+
+The `ThemeProvider` automatically detects the user's system color scheme preference using React Native's `useColorScheme` hook and applies the appropriate theme. No additional configuration is required for this behavior.
+
+### Available Theme Properties
+
+The full list of available theme properties can be found in the `ThemeType` interface:
+
+```ts
+interface ThemeType {
+  // Core
+  background: string;    // Main screen background
+  surface: string;       // Background for components like cards, dialogs, sheets
+  primary: string;       // Main accent color for interactive elements
+  secondary: string;     // Secondary accent color
+  error: string;         // Error states, destructive actions
+  success: string;       // Success states
+  warning: string;       // Warning states
+  info: string;          // Informational states
+
+  // Text & Icons
+  text: string;          // Default text color
+  onPrimary: string;     // Text/icon color on primary background
+  onSecondary: string;   // Text/icon color on secondary background
+  onError: string;       // Text/icon color on error background
+  onBackground: string;  // Text/icon color explicitly for background
+  onSurface: string;     // Text/icon color explicitly for surface
+
+  // Borders & Dividers
+  border: string;        // Borders for inputs, cards, etc.
+  divider: string;       // Separators, lines
+
+  // UI States
+  disabled: string;      // Disabled state elements
+
+  // Form Specific
+  inputBackground: string;    // Background of text inputs
+  inputText: string;          // Color of text entered into inputs
+  labelText: string;          // Color of labels for inputs
+  placeholderText: string;    // Color of placeholder text in inputs
+  helper: string;             // Helper text below inputs
+}
+```

package/lib/commonjs/app/_layout.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = RootLayout;
+var _expoFont = require("expo-font");
+var _expoRouter = require("expo-router");
+var SplashScreen = _interopRequireWildcard(require("expo-splash-screen"));
+var _expoStatusBar = require("expo-status-bar");
+var _react = require("react");
+require("react-native-reanimated");
+var _ThemeContext = require("@/theme/ThemeContext");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// Prevent the splash screen from auto-hiding before asset loading is complete.
+SplashScreen.preventAutoHideAsync();
+function RootLayout() {
+  const [loaded] = (0, _expoFont.useFonts)({
+    SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf')
+  });
+  (0, _react.useEffect)(() => {
+    if (loaded) {
+      SplashScreen.hideAsync();
+    }
+  }, [loaded]);
+  if (!loaded) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ThemeContext.ThemeProvider, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_expoRouter.Stack, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_expoRouter.Stack.Screen, {
+        name: "+not-found"
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_expoStatusBar.StatusBar, {
+      style: "auto"
+    })]
+  });
+}
+//# sourceMappingURL=_layout.js.map

package/lib/commonjs/app/_layout.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_expoFont","require","_expoRouter","SplashScreen","_interopRequireWildcard","_expoStatusBar","_react","_ThemeContext","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","preventAutoHideAsync","RootLayout","loaded","useFonts","SpaceMono","useEffect","hideAsync","jsxs","ThemeProvider","children","jsx","Stack","Screen","name","StatusBar","style"],"sourceRoot":"..\\..\\..\\src","sources":["app/_layout.tsx"],"mappings":";;;;;;AACA,IAAAA,SAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AACA,IAAAE,YAAA,GAAAC,uBAAA,CAAAH,OAAA;AACA,IAAAI,cAAA,GAAAJ,OAAA;AACA,IAAAK,MAAA,GAAAL,OAAA;AACAA,OAAA;AACA,IAAAM,aAAA,GAAAN,OAAA;AAAmD,IAAAO,WAAA,GAAAP,OAAA;AAAA,SAAAQ,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAN,wBAAAM,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAGnD;AACAf,YAAY,CAAC0B,oBAAoB,CAAC,CAAC;AAEpB,SAASC,UAAUA,CAAA,EAAG;EACnC,MAAM,CAACC,MAAM,CAAC,GAAG,IAAAC,kBAAQ,EAAC;IACxBC,SAAS,EAAEhC,OAAO,CAAC,uCAAuC;EAC5D,CAAC,CAAC;EAEF,IAAAiC,gBAAS,EAAC,MAAM;IACd,IAAIH,MAAM,EAAE;MACV5B,YAAY,CAACgC,SAAS,CAAC,CAAC;IAC1B;EACF,CAAC,EAAE,CAACJ,MAAM,CAAC,CAAC;EAEZ,IAAI,CAACA,MAAM,EAAE;IACX,OAAO,IAAI;EACb;EAEA,oBACI,IAAAvB,WAAA,CAAA4B,IAAA,EAAC7B,aAAA,CAAA8B,aAAa;IAAAC,QAAA,gBACd,IAAA9B,WAAA,CAAA+B,GAAA,EAACrC,WAAA,CAAAsC,KAAK;MAAAF,QAAA,eAEJ,IAAA9B,WAAA,CAAA+B,GAAA,EAACrC,WAAA,CAAAsC,KAAK,CAACC,MAAM;QAACC,IAAI,EAAC;MAAY,CAAE;IAAC,CAC7B,CAAC,eACR,IAAAlC,WAAA,CAAA+B,GAAA,EAAClC,cAAA,CAAAsC,SAAS;MAACC,KAAK,EAAC;IAAM,CAAE,CAAC;EAAA,CACX,CAAC;AAEtB","ignoreList":[]}

package/lib/commonjs/app/index.js

@@ -0,0 +1,153 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = RewardsScreen;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _vectorIcons = require("@expo/vector-icons");
+var _UnlockRewards = _interopRequireDefault(require("@/components/UnlockRewards/UnlockRewards"));
+var _theme = require("@/theme");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// Added TouchableOpacity
+
+// Adjust path if needed
+
+function RewardsScreen() {
+  const [showRewards, setShowRewards] = (0, _react.useState)(false);
+
+  // --- Define a NEW "Cosmic Explorer" theme ---
+  const cosmicActiveIconStyle = {
+    backgroundColor: "#2a2a4e",
+    // Dark blue-purple base
+    borderColor: "#7DF9FF",
+    // Bright cyan border
+    borderWidth: 1.5,
+    borderRadius: 25,
+    // Circular
+    padding: 10
+  };
+  const cosmicInactiveIconStyle = {
+    backgroundColor: "#4a4a6e",
+    // Muted purple-grey
+    borderRadius: 25,
+    // Circular
+    padding: 10,
+    opacity: 0.7 // Slightly faded
+  };
+  const theme = (0, _theme.useTheme)();
+
+  // --- New "Cosmic Explorer" Rewards Data ---
+  const rewardsData = [{
+    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+      name: "water-outline",
+      size: 24,
+      color: theme.onSecondary
+    }),
+    activeIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+      name: "water",
+      size: 24,
+      color: theme.primary
+    }),
+    title: "Aqua Guardian",
+    description: "Maintain water usage below the community average for a month.",
+    isActive: false,
+    status: "0/1",
+    statusBackgroundColor: theme.disabled,
+    statusTextColor: theme.text
+  }, {
+    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+      name: "build-outline",
+      size: 24,
+      color: theme.helper
+    }),
+    activeIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+      name: "build-outline",
+      size: 24,
+      color: theme.onPrimary
+    }),
+    title: "Leak Detective",
+    description: "Successfully report and fix a water leak on your property.",
+    isActive: true,
+    status: "1/1",
+    statusBackgroundColor: theme.primary,
+    statusTextColor: theme.onPrimary
+  }, {
+    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+      name: "leaf-outline",
+      size: 24,
+      color: theme.onSecondary
+    }),
+    activeIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+      name: "leaf",
+      size: 24,
+      color: theme.primary
+    }),
+    title: "Eco-Warrior",
+    description: "Implement a rainwater harvesting system or greywater recycling.",
+    isActive: false,
+    status: "0/1",
+    statusBackgroundColor: theme.disabled,
+    statusTextColor: theme.text
+  }];
+  const handleOpenRewards = () => {
+    setShowRewards(true);
+  };
+  const handleCloseRewards = () => {
+    setShowRewards(false);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: styles.container,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_UnlockRewards.default, {
+      title: "Your Rewards",
+      description: "Complete tasks to unlock special benefits",
+      rewards: rewardsData
+      // onClose={handleClose}
+      ,
+      showCloseIcon: true,
+      closeIconVariant: "nested",
+      topBackgroundHeight: 200,
+      customCloseIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+        name: "close-circle",
+        size: 28,
+        color: theme.primary
+      })
+    })
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 20
+    // backgroundColor: "#0a0a1e", // Very dark background for the screen
+  },
+  // Custom button style
+  button: {
+    backgroundColor: "#302b63",
+    // Use a gradient color
+    paddingVertical: 12,
+    paddingHorizontal: 30,
+    borderRadius: 25,
+    shadowColor: "#7DF9FF",
+    shadowOffset: {
+      width: 0,
+      height: 4
+    },
+    shadowOpacity: 0.3,
+    shadowRadius: 5,
+    elevation: 6
+  },
+  buttonText: {
+    color: "#E0E0FF",
+    fontSize: 16,
+    fontWeight: "bold",
+    textAlign: "center"
+  }
+});
+//# sourceMappingURL=index.js.map

package/lib/commonjs/app/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_vectorIcons","_UnlockRewards","_interopRequireDefault","_theme","_jsxRuntime","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","RewardsScreen","showRewards","setShowRewards","useState","cosmicActiveIconStyle","backgroundColor","borderColor","borderWidth","borderRadius","padding","cosmicInactiveIconStyle","opacity","theme","useTheme","rewardsData","icon","jsx","Ionicons","name","size","color","onSecondary","activeIcon","primary","title","description","isActive","status","statusBackgroundColor","disabled","statusTextColor","text","helper","onPrimary","handleOpenRewards","handleCloseRewards","View","style","styles","container","children","rewards","showCloseIcon","closeIconVariant","topBackgroundHeight","customCloseIcon","StyleSheet","create","flex","justifyContent","alignItems","button","paddingVertical","paddingHorizontal","shadowColor","shadowOffset","width","height","shadowOpacity","shadowRadius","elevation","buttonText","fontSize","fontWeight","textAlign"],"sourceRoot":"..\\..\\..\\src","sources":["app/index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/Badges/Badge.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Badge = void 0;
+var _index = require("../../theme/index.js");
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// Badge props
+
+// Simple Badge component
+const Badge = ({
+  icon,
+  isActive = false,
+  size,
+  style,
+  activeStyle,
+  inactiveStyle,
+  activeIcon,
+  label,
+  labelStyle
+}) => {
+  const theme = (0, _index.useTheme)();
+  const styles = _reactNative.StyleSheet.create({
+    badge: {
+      borderRadius: 12,
+      justifyContent: "center",
+      alignItems: "center",
+      backgroundColor: theme.secondary,
+      padding: 8
+    },
+    activeBadge: {
+      backgroundColor: theme.primary
+    },
+    label: {
+      fontSize: 12,
+      color: theme.text,
+      marginTop: 4,
+      textAlign: "center",
+      fontWeight: "500"
+    }
+  });
+  const badgeStyles = [styles.badge, size ? {
+    width: size,
+    height: size
+  } : {}, style, isActive ? [styles.activeBadge, activeStyle] : inactiveStyle];
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: {
+      alignItems: "center"
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: badgeStyles,
+      children: isActive && activeIcon ? activeIcon : icon
+    }), label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [styles.label, labelStyle],
+      children: label
+    })]
+  });
+};
+exports.Badge = Badge;
+var _default = exports.default = Badge;
+//# sourceMappingURL=Badge.js.map

package/lib/commonjs/components/Badges/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_index","require","_react","_interopRequireDefault","_reactNative","_jsxRuntime","e","__esModule","default","Badge","icon","isActive","size","style","activeStyle","inactiveStyle","activeIcon","label","labelStyle","theme","useTheme","styles","StyleSheet","create","badge","borderRadius","justifyContent","alignItems","backgroundColor","secondary","padding","activeBadge","primary","fontSize","color","text","marginTop","textAlign","fontWeight","badgeStyles","width","height","jsxs","View","children","jsx","Text","exports","_default"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Badges/Badge.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,YAAA,GAAAH,OAAA;AAQsB,IAAAI,WAAA,GAAAJ,OAAA;AAAA,SAAAE,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEtB;;AAiBA;AACO,MAAMG,KAA2B,GAAGA,CAAC;EAC1CC,IAAI;EACJC,QAAQ,GAAG,KAAK;EAChBC,IAAI;EACJC,KAAK;EACLC,WAAW;EACXC,aAAa;EACbC,UAAU;EACVC,KAAK;EACLC;AACF,CAAC,KAAK;EACJ,MAAMC,KAAK,GAAG,IAAAC,eAAQ,EAAC,CAAC;EAExB,MAAMC,MAAM,GAAGC,uBAAU,CAACC,MAAM,CAAC;IAC/BC,KAAK,EAAE;MACLC,YAAY,EAAE,EAAE;MAChBC,cAAc,EAAE,QAAQ;MACxBC,UAAU,EAAE,QAAQ;MACpBC,eAAe,EAAET,KAAK,CAACU,SAAS;MAChCC,OAAO,EAAE;IACX,CAAC;IACDC,WAAW,EAAE;MACXH,eAAe,EAAET,KAAK,CAACa;IACzB,CAAC;IACDf,KAAK,EAAE;MACHgB,QAAQ,EAAE,EAAE;MACZC,KAAK,EAAEf,KAAK,CAACgB,IAAI;MACjBC,SAAS,EAAE,CAAC;MACZC,SAAS,EAAE,QAAQ;MACnBC,UAAU,EAAE;IACd;EACJ,CAAC,CAAC;EAEF,MAAMC,WAAW,GAAG,CAClBlB,MAAM,CAACG,KAAK,EACZZ,IAAI,GAAG;IAAE4B,KAAK,EAAE5B,IAAI;IAAE6B,MAAM,EAAE7B;EAAK,CAAC,GAAG,CAAC,CAAC,EACzCC,KAAK,EACLF,QAAQ,GAAG,CAACU,MAAM,CAACU,WAAW,EAAEjB,WAAW,CAAC,GAAGC,aAAa,CAC7D;EAED,oBACE,IAAAV,WAAA,CAAAqC,IAAA,EAACtC,YAAA,CAAAuC,IAAI;IAAC9B,KAAK,EAAE;MAAEc,UAAU,EAAE;IAAS,CAAE;IAAAiB,QAAA,gBACpC,IAAAvC,WAAA,CAAAwC,GAAA,EAACzC,YAAA,CAAAuC,IAAI;MAAC9B,KAAK,EAAE0B,WAAY;MAAAK,QAAA,EACtBjC,QAAQ,IAAIK,UAAU,GAAGA,UAAU,GAAGN;IAAI,CACvC,CAAC,EACNO,KAAK,iBAAI,IAAAZ,WAAA,CAAAwC,GAAA,EAACzC,YAAA,CAAA0C,IAAI;MAACjC,KAAK,EAAE,CAACQ,MAAM,CAACJ,KAAK,EAAEC,UAAU,CAAE;MAAA0B,QAAA,EAAE3B;IAAK,CAAO,CAAC;EAAA,CAC7D,CAAC;AAEX,CAAC;AAAC8B,OAAA,CAAAtC,KAAA,GAAAA,KAAA;AAAA,IAAAuC,QAAA,GAAAD,OAAA,CAAAvC,OAAA,GAEaC,KAAK","ignoreList":[]}