@ledgerhq/lumen-ui-rnative 0.0.44 → 0.0.46

package/.storybook/docs/style-system/lx.mdx

@@ -0,0 +1,144 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Style System/lx" />
+
+# lx Property
+
+The `lx` prop is a type-safe styling API that provides autocomplete for design tokens directly on components.
+
+### Overview
+
+Instead of writing raw style values, `lx` constrains you to design system tokens, ensuring consistency across your app.
+
+The `lx` prop is available on utility components that already integrate it:
+- [**Box**](/?path=/docs/utility-box--docs) - Layout container (wraps `View`)
+- [**Text**](/?path=/docs/utility-text--docs) - Typography (wraps `Text`)
+- [**Pressable**](/?path=/docs/utility-pressable--docs) - Interactive container (wraps `Pressable`)
+
+```tsx
+import { Box, Text } from '@ledgerhq/lumen-ui-rnative';
+
+<Box lx={{ padding: 's16', backgroundColor: 'accent', borderRadius: 'md' }}>
+  <Text typography='body1' lx={{ color: 'onAccent' }}>Hello</Text>
+</Box>
+```
+
+---
+
+### View Style Tokens
+
+These tokens are available on `Box` and `Pressable` (and the `lx` prop of `Text` for layout).
+
+#### Spacing
+
+Used for `padding`, `margin`, `gap`, and positioning (`top`, `left`, etc.):
+
+```tsx
+<Box lx={{ 
+  padding: 's16',
+  marginTop: 's8',
+  gap: 's12',
+  paddingHorizontal: 's24',
+}} />
+```
+
+#### Sizes
+
+Used for `width`, `height`, `minWidth`, `maxWidth`, `minHeight`, `maxHeight`:
+
+```tsx
+<Box lx={{ width: 's48', height: 's48', maxWidth: 's320' }} />
+```
+
+#### Background Colors
+
+```tsx
+<Box lx={{ backgroundColor: 'accent' }} />
+<Box lx={{ backgroundColor: 'surface' }} />
+<Box lx={{ backgroundColor: 'muted' }} />
+```
+
+#### Border
+
+```tsx
+<Box lx={{ 
+  borderRadius: 'md',
+  borderWidth: 's1',
+  borderColor: 'base',
+}} />
+```
+
+#### Flex Layout
+
+Standard React Native flex properties are passed through:
+
+```tsx
+<Box lx={{
+  flex: 1,
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+}} />
+```
+
+---
+
+### Text Style Tokens
+
+These tokens are **only available on the `Text` component**, in addition to view tokens.
+
+#### Text Color
+
+```tsx
+<Text lx={{ color: 'base' }} />
+<Text lx={{ color: 'muted' }} />
+<Text lx={{ color: 'interactive' }} />
+<Text lx={{ color: 'onAccent' }} />
+```
+
+#### Typography
+
+Preset font size, weight, line height, and letter spacing:
+
+```tsx
+<Text typography='heading1' />
+<Text typography='body1' />
+<Text typography='body2SemiBold' />
+```
+
+#### Text Decoration
+
+```tsx
+<Text lx={{ textDecorationLine: 'underline' }} />
+<Text lx={{ textAlign: 'center' }} />
+<Text lx={{ textTransform: 'uppercase' }} />
+```
+
+---
+
+### Escape Hatch
+
+For values not covered by tokens, use the `style` prop:
+
+```tsx
+<Box 
+  lx={{ padding: 's16', borderRadius: 'md' }}
+  style={{ width: 127, shadowOpacity: 0.1 }}
+/>
+```
+
+### Pressable and Pressed State
+
+For `Pressable`, the `lx` prop only accepts static objects. Use the `style` prop for pressed-state styling:
+
+```tsx
+<Pressable
+  lx={{ padding: 's16', backgroundColor: 'accent' }}
+  style={({ pressed }) => ({ opacity: pressed ? 0.8 : 1 })}
+>
+  <Text>Press me</Text>
+</Pressable>
+```
+
+See [Pressable documentation](/?path=/docs/utility-pressable--docs) for more details.
+

package/.storybook/docs/style-system/styleSystem.mdx

@@ -0,0 +1,54 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Style System/Style System" />
+
+# Style System
+
+Three approaches for styling, from constrained to fully customizable:
+
+- [**lx prop**](/?path=/docs/style-system-lx--docs) — Design tokens only → Layout composition, quick styling
+- [**useStyleSheet**](/?path=/docs/style-system-usestylesheet--docs) — Full customizability, built-in memoization → Complex styles, custom components
+- [**useTheme**](/?path=/docs/style-system-usetheme--docs) — Full customizability → Theme/color scheme control
+
+---
+
+### lx Prop (Recommended)
+
+The `lx` prop is available on **all Design System components**.  
+It enables type-safe, design-token-only styling for rapid, consistent layout styling.
+
+```tsx
+import { Box, Text } from '@ledgerhq/lumen-ui-rnative';
+
+<Box lx={{ gap: 's16', backgroundColor: 'accent', borderRadius: 'md' }}>
+  <Text typography='body1' lx={{ color: 'onAccent' }}>Hello</Text>
+  <Button lx={{ marginTop: 's16' }}>Click me</Button>
+</Box>
+```
+
+### useStyleSheet
+
+Wrapper on top of useTheme to create theme-aware stylesheets with **built-in memoization**. Allow full customizability.
+
+```tsx
+import { useStyleSheet } from '@ledgerhq/lumen-ui-rnative/styles';
+
+const styles = useStyleSheet((theme) => ({
+  container: {
+    backgroundColor: theme.colors.bg.base,
+    padding: theme.spacings.s16,
+  },
+}), []);
+```
+
+### useTheme
+
+Direct design-tokens access from the theme object.
+
+```tsx
+import { useTheme } from '@ledgerhq/lumen-ui-rnative/styles';
+
+const { theme } = useTheme();
+```
+
+---

package/.storybook/docs/style-system/useStyleSheet.mdx

@@ -0,0 +1,83 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Style System/useStyleSheet" />
+
+# useStyleSheet
+
+`useStyleSheet` is a hook for creating memoized, theme-aware stylesheets in React Native.
+
+### Basic Usage
+
+```tsx
+import { useStyleSheet } from '@ledgerhq/lumen-ui-rnative/styles';
+import { View, Text } from 'react-native';
+
+const MyComponent = () => {
+  const styles = useStyleSheet((theme) => ({
+    container: {
+      backgroundColor: theme.colors.bg.base,
+      padding: theme.spacings.s16,
+      borderRadius: theme.borderRadius.md,
+    },
+    text: {
+      ...theme.typographies.body1,
+      color: theme.colors.text.base,
+    },
+  }), []);
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.text}>Hello World</Text>
+    </View>
+  );
+};
+```
+
+### Memoization
+
+Styles are memoized based on the dependency array (second argument). Re-renders only create new styles when dependencies change:
+
+```tsx
+const styles = useStyleSheet(
+  (theme) => ({
+    container: {
+      backgroundColor: isActive ? theme.colors.bg.accent : theme.colors.bg.base,
+      padding: theme.spacings.s16,
+    },
+  }),
+  [isActive] // Only recreate when isActive changes
+);
+```
+
+### Pressed State Pattern
+
+For Pressable components, pass `pressed` state to `useStyleSheet`:
+
+```tsx
+import { useStyleSheet } from '@ledgerhq/lumen-ui-rnative/styles';
+import { Pressable } from '@ledgerhq/lumen-ui-rnative';
+
+const InteractiveCard = () => {
+  return (
+    <Pressable lx={{ borderRadius: 'md' }}>
+      {({ pressed }) => <CardContent pressed={pressed} />}
+    </Pressable>
+  );
+};
+
+const CardContent = ({ pressed }: { pressed: boolean }) => {
+  const styles = useStyleSheet(
+    (theme) => ({
+      container: {
+        backgroundColor: pressed 
+          ? theme.colors.bg.accentPressed 
+          : theme.colors.bg.accent,
+        padding: theme.spacings.s16,
+      },
+    }),
+    [pressed]
+  );
+
+  return <View style={styles.container}>...</View>;
+};
+```

package/.storybook/docs/style-system/useTheme.mdx

@@ -0,0 +1,41 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Style System/useTheme" />
+
+# useTheme
+
+The `useTheme` hook provides access to the current theme and color scheme controls.
+
+### Basic Usage
+
+```tsx
+import { useTheme } from '@ledgerhq/lumen-ui-rnative/styles';
+
+const MyComponent = () => {
+  const { theme, colorScheme } = useTheme();
+
+  return (
+    <View style={{ backgroundColor: theme.colors.bg.base }}>
+      <Text style={{ color: theme.colors.text.base }}>
+        Current mode: {colorScheme}
+      </Text>
+    </View>
+  );
+};
+```
+
+### Theme Toggle Example
+
+```tsx
+import { useTheme } from '@ledgerhq/lumen-ui-rnative/styles';
+
+const ThemeToggle = () => {
+  const { colorScheme, toggleColorScheme } = useTheme();
+
+  return (
+    <Button onPress={toggleColorScheme}>
+      Current: {colorScheme}
+    </Button>
+  );
+};
+```

package/.storybook/main.ts

@@ -3,7 +3,6 @@ import { fileURLToPath } from 'node:url';
 import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
 import type { StorybookConfig } from '@storybook/react-native-web-vite';
 import { mergeConfig } from 'vite';
-import { commonjsExportsShim } from './vite-plugins/commonjs-exports-shim';
 
 const config: StorybookConfig = {
   stories: [
@@ -17,11 +16,7 @@ const config: StorybookConfig = {
   ],
   framework: {
     name: getAbsolutePath('@storybook/react-native-web-vite'),
-    options: {
-      pluginReactOptions: {
-        jsxImportSource: 'nativewind',
-      },
-    },
+    options: {},
   },
   typescript: {
     reactDocgen: 'react-docgen-typescript',
@@ -36,15 +31,7 @@ const config: StorybookConfig = {
     };
 
     return mergeConfig(config, {
-      plugins: [nxViteTsPaths(), commonjsExportsShim()],
-      css: {
-        postcss: {
-          plugins: [
-            (await import('tailwindcss')).default,
-            (await import('autoprefixer')).default,
-          ],
-        },
-      },
+      plugins: [nxViteTsPaths()],
     });
   },
 

package/.storybook/preview-head.html

@@ -1,6 +1,6 @@
 <style>
   body {
-    background-color: #f2f2f2;
+    background-color: #ffffff;
   }
 
   .dark body {
@@ -8,7 +8,7 @@
   }
 
   .sbdocs-preview {
-    background-color: #f2f2f2;
+    background-color: #ffffff;
   }
 
   .dark .sbdocs-preview {

package/.storybook/{preview.ts → preview.tsx}

@@ -1,9 +1,10 @@
 import type { Preview } from '@storybook/react-native-web-vite';
-import '../src/global.css';
+
 import {
   withBrandDecorator,
   withModeDecorator,
   withProvidersDecorator,
+  withProvidersDocsContainer,
 } from './Decorator';
 import './font.css';
 
@@ -49,22 +50,22 @@ const preview: Preview = {
       storySort: {
         order: [
           'Getting Started',
-          ['Introduction', 'Quick Start'],
-          'Tailwind',
-          ['Introduction', 'Setup guide', 'Configuration'],
-          'Foundations',
-          ['Docs', 'Colors', 'Border', 'Spacing', 'Size', 'Height', 'Width'],
+          ['Setup', 'Changelog'],
+          'Style System',
+          ['Style System', 'useTheme', 'useStyleSheet', 'lx'],
           'Symbols',
           'Action',
-          ['CardButton', 'InteractiveIcon', 'Link', 'Input', 'Search'],
           'Communication',
           'Containment',
           'Selection',
-          'Text Input',
+          'Input',
         ],
       },
     },
     tags: ['autodocs'],
+    docs: {
+      container: withProvidersDocsContainer,
+    },
     actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {
       matchers: {

package/README.md

@@ -1,82 +1,5 @@
 # @ledgerhq/lumen-ui-rnative
 
-**React Native UI component library for Ledger Design System** - Native mobile components built with NativeWind and design tokens.
+## 📦 Setup
 
-## 📦 Installation
-
-```bash
-npm install @ledgerhq/lumen-ui-rnative @ledgerhq/lumen-design-core
-
-# Install peer dependencies
-npm install react-native-svg nativewind
-```
-
-→ [View @ledgerhq/lumen-ui-rnative on npm](https://www.npmjs.com/package/@ledgerhq/lumen-ui-rnative?activeTab=readme)  
-→ [View @ledgerhq/lumen-design-core on npm](https://www.npmjs.com/package/@ledgerhq/lumen-design-core?activeTab=readme)
-
-## ⚡ Setup
-
-### 1. Configure NativeWind
-
-Install and configure NativeWind in your React Native project:
-
-```bash
-npm install nativewind
-npm install --dev tailwindcss
-```
-
-Create `tailwind.config.js`:
-
-```typescript
-import type { Config } from 'tailwindcss';
-import { ledgerLivePreset } from '@ledgerhq/lumen-design-core';
-
-const config = {
-  content: [
-    "./App.{js,jsx,ts,tsx}",
-    "./src/**/*.{js,jsx,ts,tsx}",
-    "./node_modules/@ledgerhq/lumen-ui-rnative/src/**/*.{js,jsx,ts,tsx}"
-  ],
-  presets: [ledgerLivePreset],
-} satisfies Config;
-
-export default config;
-```
-
-_Using [@ledgerhq/lumen-design-core](https://www.npmjs.com/package/@ledgerhq/lumen-design-core?activeTab=readme) preset_
-
-### 2. Start Using Components
-
-```tsx
-import { Button } from '@ledgerhq/lumen-ui-rnative';
-import { ArrowRight } from '@ledgerhq/lumen-ui-rnative/symbols';
-
-export default function App() {
-  return (
-    <Button appearance="accent" icon={ArrowRight}>
-      Get Started
-    </Button>
-  );
-}
-```
----
-
-## 🔧 Icon Usage
-
-```tsx
-import { Settings, ArrowRight, CheckCircle } from '@ledgerhq/lumen-ui-rnative/symbols';
-
-// Use icons directly as components with size prop
-<Settings size={24} />
-<ArrowRight size={20} className="text-accent" />
-<CheckCircle size={16} />
-
-// Available sizes: 16, 20, 24, 40, 48, 56
-```
-
----
-
-## 📚 Documentation
-
-- [📱 React Native Setup Guide](https://nativewind.dev/getting-started/react-native)
-- [🏠 Main Repository](https://github.com/LedgerHQ/lumen)
+See docs: https://ldls.vercel.app/?path=/docs/react-native_getting-started-setup--docs

package/babel.config.js

@@ -10,7 +10,6 @@ export default function (api) {
           useBuiltIns: 'usage',
         },
       ],
-      'nativewind/babel',
     ],
     plugins: ['react-native-worklets/plugin'],
     env: {

package/dist/package.json

@@ -1,14 +1,13 @@
 {
   "name": "@ledgerhq/lumen-ui-rnative",
-  "version": "0.0.43",
+  "version": "0.0.45",
   "license": "Apache-2.0",
   "keywords": [
     "react-native",
     "ui",
     "components",
     "design-system",
-    "mobile",
-    "nativewind"
+    "mobile"
   ],
   "type": "module",
   "main": "./src/index.ts",
@@ -25,19 +24,17 @@
       "import": "./src/lib/Symbols/index.ts",
       "default": "./src/lib/Symbols/index.ts"
     },
-    "./styles": "./src/styles/index.ts",
-    "./ToRemove": "./src/lib/Components/_ToRemove/ToRemove.tsx"
+    "./styles": "./src/styles/index.ts"
   },
   "dependencies": {
-    "@ledgerhq/lumen-utils-shared": "0.0.11",
+    "@ledgerhq/lumen-utils-shared": "0.0.12",
     "i18next": "^23.7.0",
     "react-i18next": "^14.0.0"
   },
   "peerDependencies": {
     "react": "~18.3.1",
     "react-native": "~0.77.3",
-    "react-native-svg": "^15.0.0",
-    "nativewind": "~4.1.23"
+    "react-native-svg": "^15.0.0"
   },
   "nx": {
     "tags": [

package/dist/src/lib/Components/AddressInput/AddressInput.d.ts

@@ -1,46 +1,10 @@
 import React from 'react';
 import { TextInput } from 'react-native';
-import { type BaseInputProps } from '../BaseInput';
-export type AddressInputProps = Omit<BaseInputProps, 'prefix' | 'label'> & {
-    /**
-     * Custom suffix element to show instead of the QR code icon.
-     * Default suffix is a QR code scanner when empty (if onQrCodeClick provided), clear button when content.
-     * — both can be overridden with a custom suffix.
-     *
-     * @default QrCodeIcon
-     */
+export declare const AddressInput: React.ForwardRefExoticComponent<Omit<import("../BaseInput").BaseInputProps, "label" | "prefix"> & {
     suffix?: React.ReactNode;
-    /**
-     * Custom prefix text to show instead of the "To:" prefix.
-     * @default "To:"
-     */
     prefix?: string;
-    /**
-     * Callback fired when the QR code scanner icon is clicked.
-     * When provided, the QR code scanner icon will be displayed when input is empty.
-     * When not provided, no QR code scanner icon will be shown.
-     */
     onQrCodeClick?: () => void;
-};
-export declare const AddressInput: React.ForwardRefExoticComponent<Omit<BaseInputProps, "label" | "prefix"> & {
-    /**
-     * Custom suffix element to show instead of the QR code icon.
-     * Default suffix is a QR code scanner when empty (if onQrCodeClick provided), clear button when content.
-     * — both can be overridden with a custom suffix.
-     *
-     * @default QrCodeIcon
-     */
-    suffix?: React.ReactNode;
-    /**
-     * Custom prefix text to show instead of the "To:" prefix.
-     * @default "To:"
-     */
-    prefix?: string;
-    /**
-     * Callback fired when the QR code scanner icon is clicked.
-     * When provided, the QR code scanner icon will be displayed when input is empty.
-     * When not provided, no QR code scanner icon will be shown.
-     */
-    onQrCodeClick?: () => void;
-} & React.RefAttributes<TextInput>>;
+} & {
+    lx?: import("../../../styles").LumenViewStyle;
+} & import("react-native").ViewProps & React.RefAttributes<TextInput>>;
 //# sourceMappingURL=AddressInput.d.ts.map

package/dist/src/lib/Components/AddressInput/AddressInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AddressInput.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/AddressInput/AddressInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAQ,SAAS,EAAE,MAAM,cAAc,CAAC;AAG/C,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAG9D,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,cAAc,EAAE,QAAQ,GAAG,OAAO,CAAC,GAAG;IACzE;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,YAAY;IArBvB;;;;;;OAMG;aACM,KAAK,CAAC,SAAS;IACxB;;;OAGG;aACM,MAAM;IACf;;;;OAIG;oBACa,MAAM,IAAI;mCAyC1B,CAAC"}
+{"version":3,"file":"AddressInput.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/AddressInput/AddressInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAQ,SAAS,EAAE,MAAM,cAAc,CAAC;AAQ/C,eAAO,MAAM,YAAY;;;;;;sEAiCvB,CAAC"}

package/dist/src/lib/Components/AddressInput/AddressInput.js

@@ -2,18 +2,26 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { Text } from 'react-native';
 import { useCommonTranslation } from '../../../i18n';
+import { useStyleSheet } from '../../../styles';
 import { QrCode } from '../../Symbols';
 import { BaseInput } from '../BaseInput';
 import { InteractiveIcon } from '../InteractiveIcon';
 export const AddressInput = React.forwardRef(({ prefix = 'To:', suffix, onQrCodeClick, ...props }, ref) => {
     const { t } = useCommonTranslation();
-    const actualPrefix = (_jsx(Text, { className: 'text-nowrap text-base group-has-[:disabled]:text-disabled', accessible: false, 
-        // TODO: use theme object here
-        style: { fontSize: 16, fontWeight: '500' }, children: prefix }));
+    const styles = useStyles();
+    const actualPrefix = (_jsx(Text, { accessible: false, style: styles.prefix, children: prefix }));
     const actualSuffix = suffix ||
-        (onQrCodeClick && (_jsx(InteractiveIcon, { iconType: 'filled', onPress: onQrCodeClick, accessibilityLabel: t('components.addressInput.qrCodeAriaLabel'), children: _jsx(QrCode, { size: 20 }) })));
-    return (_jsx(BaseInput, { ref: ref, prefix: actualPrefix, suffix: actualSuffix, 
-        // TODO: use theme object here
-        style: { fontSize: 16, fontWeight: '500' }, ...props }));
+        (onQrCodeClick && (_jsx(InteractiveIcon, { iconType: 'stroked', onPress: onQrCodeClick, accessibilityLabel: t('components.addressInput.qrCodeAriaLabel'), children: _jsx(QrCode, { size: 20 }) })));
+    return (_jsx(BaseInput, { ref: ref, prefix: actualPrefix, suffix: actualSuffix, ...props }));
 });
+const useStyles = () => {
+    return useStyleSheet((t) => {
+        return {
+            prefix: {
+                ...t.typographies.body1,
+                color: t.colors.text.base,
+            },
+        };
+    }, []);
+};
 AddressInput.displayName = 'AddressInput';

package/dist/src/lib/Components/AddressInput/AddressInput.stories.d.ts

@@ -3,5 +3,11 @@ import { AddressInput } from './AddressInput';
 declare const meta: Meta<typeof AddressInput>;
 export default meta;
 type Story = StoryObj<typeof AddressInput>;
-export declare const WebPreviewWarning: Story;
+export declare const Base: Story;
+export declare const WithContent: Story;
+export declare const WithCustomPrefix: Story;
+export declare const WithoutQrCode: Story;
+export declare const WithError: Story;
+export declare const DisabledAddressInput: Story;
+export declare const WithHiddenClearButton: Story;
 //# sourceMappingURL=AddressInput.stories.d.ts.map

package/dist/src/lib/Components/AddressInput/AddressInput.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AddressInput.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/AddressInput/AddressInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAEvE,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CAYnC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,YAAY,CAAC,CAAC;AAE3C,eAAO,MAAM,iBAAiB,EAAE,KAgB/B,CAAC"}
+{"version":3,"file":"AddressInput.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/AddressInput/AddressInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAGvE,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CAkCnC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,YAAY,CAAC,CAAC;AA6B3C,eAAO,MAAM,IAAI,EAAE,KAQlB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KASzB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAQ9B,CAAC;AA2BF,eAAO,MAAM,aAAa,EAAE,KAQ3B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAUvB,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KASlC,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KASnC,CAAC"}