@ledgerhq/lumen-ui-react 0.0.76 → 0.0.78

package/ai-rules/RULES.md

@@ -238,8 +238,45 @@ const InteractiveList = () => (
 - Import compound components together: `Select, SelectTrigger, SelectContent, SelectItem, SelectItemText`
 - Example: `import { Button, Banner, Tag } from '@ledgerhq/lumen-ui-react'`
 
+### Available Components
+
+Below is a complete list of all available Lumen components. Click any component name to view its documentation and interactive examples in Storybook.
+
+- [AddressInput](https://ldls.vercel.app/?path=/docs/input-addressinput--docs) - Input field for cryptocurrency addresses
+- [AmountDisplay](https://ldls.vercel.app/?path=/docs/communication-amountdisplay--docs) - Display formatted amounts with currency
+- [AmountInput](https://ldls.vercel.app/?path=/docs/input-amountinput--docs) - Input field for amount values
+- [Banner](https://ldls.vercel.app/?path=/docs/communication-banner--docs) - Alert and notification banners
+- [Button](https://ldls.vercel.app/?path=/docs/action-button--docs) - Primary action button component
+- [CardButton](https://ldls.vercel.app/?path=/docs/action-cardbutton--docs) - Card-style interactive button
+- [Checkbox](https://ldls.vercel.app/?path=/docs/selection-checkbox--docs) - Checkbox input for selections
+- [Dialog](https://ldls.vercel.app/?path=/docs/containment-dialog--docs) - Modal dialog and sheet component
+- [Divider](https://ldls.vercel.app/?path=/docs/layout-divider--docs) - Visual separator line
+- [Icon](https://ldls.vercel.app/?path=/docs/symbols-interface-icons--docs) - Interface icon components
+- [IconButton](https://ldls.vercel.app/?path=/docs/action-iconbutton--docs) - Button with icon only
+- [InteractiveIcon](https://ldls.vercel.app/?path=/docs/action-interactiveicon--docs) - Interactive icon with states
+- [Link](https://ldls.vercel.app/?path=/docs/action-link--docs) - Hyperlink component
+- [ListItem](https://ldls.vercel.app/?path=/docs/containment-listitem--docs) - List item with flexible composition
+- [Menu](https://ldls.vercel.app/?path=/docs/selection-menu--docs) - Dropdown menu component
+- [NavBar](https://ldls.vercel.app/?path=/docs/navigation-navbar--docs) - Top navigation bar
+- [SearchInput](https://ldls.vercel.app/?path=/docs/input-searchinput--docs) - Search input field
+- [Select](https://ldls.vercel.app/?path=/docs/selection-select--docs) - Dropdown select component
+- [SideBar](https://ldls.vercel.app/?path=/docs/navigation-sidebar--docs) - Side navigation panel
+- [Skeleton](https://ldls.vercel.app/?path=/docs/communication-skeleton--docs) - Loading placeholder skeleton
+- [Spinner](https://ldls.vercel.app/?path=/docs/communication-spinner--docs) - Loading spinner indicator
+- [Spot](https://ldls.vercel.app/?path=/docs/communication-spot--docs) - Icon container with background
+- [Stepper](https://ldls.vercel.app/?path=/docs/feedback-stepper--docs) - Multi-step progress indicator
+- [Subheader](https://ldls.vercel.app/?path=/docs/communication-subheader--docs) - Section subheader component
+- [Switch](https://ldls.vercel.app/?path=/docs/selection-switch--docs) - Toggle switch component
+- [Tag](https://ldls.vercel.app/?path=/docs/communication-tag--docs) - Label and tag component
+- [TextInput](https://ldls.vercel.app/?path=/docs/input-textinput--docs) - Text input field
+- [Tile](https://ldls.vercel.app/?path=/docs/containment-tile--docs) - Content container tile
+- [TileButton](https://ldls.vercel.app/?path=/docs/action-tilebutton--docs) - Interactive tile button
+- [Tooltip](https://ldls.vercel.app/?path=/docs/communication-tooltip--docs) - Tooltip overlay component
+
 ### Icons
 
+[View all available icons in Storybook →](https://ldls.vercel.app/?path=/docs/symbols-interface-icons--docs)
+
 - Always import icons from `/symbols` entry point
 - Import: `import { ArrowRight, CheckCircle } from '@ledgerhq/lumen-ui-react/symbols'`
 - Use as components: `<ArrowRight size={20} />`
@@ -320,3 +357,83 @@ Use ONLY the unique part after the last hyphen of the CSS variable name.
 - Transform: replace `/` with `-`
 - Result: `body-3` (transform `body/3` → `body-3`)
 - Example: `/* heading/2-semi-bold */` → `heading-3-semi-bold`
+
+---
+
+## React Native Components
+
+Lumen also provides a comprehensive set of React Native components via `@ledgerhq/lumen-ui-rnative`.
+
+### Available React Native Components
+
+Below is a complete list of all available Lumen React Native components. Click any component name to view its documentation and interactive examples in Storybook.
+
+**Components:**
+
+- [Button](https://ldls.vercel.app/?path=/docs/action-button--docs) - Primary action button component
+- [CardButton](https://ldls.vercel.app/?path=/docs/action-cardbutton--docs) - Card-style interactive button
+- [IconButton](https://ldls.vercel.app/?path=/docs/action-iconbutton--docs) - Button with icon only
+- [InteractiveIcon](https://ldls.vercel.app/?path=/docs/action-interactiveicon--docs) - Interactive icon with states
+- [Link](https://ldls.vercel.app/?path=/docs/action-link--docs) - Hyperlink component
+- [TileButton](https://ldls.vercel.app/?path=/docs/action-tilebutton--docs) - Interactive tile button
+- [AmountDisplay](https://ldls.vercel.app/?path=/docs/communication-amountdisplay--docs) - Display formatted amounts with currency
+- [Banner](https://ldls.vercel.app/?path=/docs/communication-banner--docs) - Alert and notification banners
+- [Spinner](https://ldls.vercel.app/?path=/docs/communication-spinner--docs) - Loading spinner indicator
+- [Spot](https://ldls.vercel.app/?path=/docs/communication-spot--docs) - Icon container with background
+- [Subheader](https://ldls.vercel.app/?path=/docs/communication-subheader--docs) - Section subheader component
+- [Tag](https://ldls.vercel.app/?path=/docs/communication-tag--docs) - Label and tag component
+- [Tooltip](https://ldls.vercel.app/?path=/docs/communication-tooltip--docs) - Tooltip overlay component
+- [BottomSheet](https://ldls.vercel.app/?path=/docs/containment-bottomsheet--docs) - Bottom sheet modal component
+- [ListItem](https://ldls.vercel.app/?path=/docs/containment-listitem--docs) - List item with flexible composition
+- [Tile](https://ldls.vercel.app/?path=/docs/containment-tile--docs) - Content container tile
+- [AddressInput](https://ldls.vercel.app/?path=/docs/input-addressinput--docs) - Input field for cryptocurrency addresses
+- [AmountInput](https://ldls.vercel.app/?path=/docs/input-amountinput--docs) - Input field for amount values
+- [SearchInput](https://ldls.vercel.app/?path=/docs/input-searchinput--docs) - Search input field
+- [TextInput](https://ldls.vercel.app/?path=/docs/input-textinput--docs) - Text input field
+- [Divider](https://ldls.vercel.app/?path=/docs/layout-divider--docs) - Visual separator line
+- [TabBar](https://ldls.vercel.app/?path=/docs/navigation-tabbar--docs) - Bottom tab navigation bar
+- [Checkbox](https://ldls.vercel.app/?path=/docs/selection-checkbox--docs) - Checkbox input for selections
+- [Select](https://ldls.vercel.app/?path=/docs/selection-select--docs) - Dropdown select component
+- [Switch](https://ldls.vercel.app/?path=/docs/selection-switch--docs) - Toggle switch component
+
+**Symbols:**
+
+- [Icon](https://ldls.vercel.app/?path=/docs/symbols-interface-icons--docs) - Interface icon components
+
+**Utility Components:**
+
+- [Box](https://ldls.vercel.app/?path=/docs/utility-box--docs) - Layout container with style props
+- [LinearGradient](https://ldls.vercel.app/?path=/docs/utility-lineargradient--docs) - Linear gradient component
+- [Pressable](https://ldls.vercel.app/?path=/docs/utility-pressable--docs) - Pressable wrapper with visual feedback
+- [RadialGradient](https://ldls.vercel.app/?path=/docs/utility-radialgradient--docs) - Radial gradient component
+- [Text](https://ldls.vercel.app/?path=/docs/utility-text--docs) - Text component with style props
+
+### React Native Style System
+
+Lumen React Native uses a custom style system called `lx` that provides type-safe access to design tokens. Explore the style system documentation:
+
+- [Colors](https://ldls.vercel.app/?path=/docs/style-system-theme-colors--docs) - Semantic color tokens for background, text, and borders
+- [Spacings](https://ldls.vercel.app/?path=/docs/style-system-theme-spacings--docs) - Spacing scale for padding, margin, and gaps
+- [Sizes](https://ldls.vercel.app/?path=/docs/style-system-theme-sizes--docs) - Size tokens for width and height
+- [Shadows](https://ldls.vercel.app/?path=/docs/style-system-theme-shadows--docs) - Elevation shadow styles
+- [Border Width](https://ldls.vercel.app/?path=/docs/style-system-theme-border-width--docs) - Border width tokens
+- [Border Radius](https://ldls.vercel.app/?path=/docs/style-system-theme-border-radius--docs) - Border radius tokens
+
+#### Style System Usage
+
+```tsx
+import { Box, Text } from '@ledgerhq/lumen-ui-rnative';
+
+// Using lx prop for type-safe styling
+<Box
+  lx={{
+    backgroundColor: 'base',
+    padding: 16,
+    borderRadius: 'md',
+    borderWidth: 1,
+    borderColor: 'muted',
+  }}
+>
+  <Text lx={{ color: 'base', fontSize: 'body-2' }}>Styled with design tokens</Text>
+</Box>;
+```

package/dist/i18n/locales/de.json.d.ts

@@ -21,6 +21,11 @@ declare const _default: {
     },
     "navBar": {
       "goBackAriaLabel": "Zurück"
+    },
+    "sideBar": {
+      "navigationAriaLabel": "Seitennavigation",
+      "collapseAriaLabel": "Seitenleiste einklappen",
+      "expandAriaLabel": "Seitenleiste ausklappen"
     }
   }
 }

package/dist/i18n/locales/de.json.js

@@ -1,4 +1,4 @@
-const e = { addressInput: { qrCodeAriaLabel: "QR-Code scannen" }, baseInput: { clearInputAriaLabel: "Eingabe löschen" }, spinner: { loadingAriaLabel: "Wird geladen" }, dialogHeader: { goBackAriaLabel: "Zurück", closeAriaLabel: "Schließen" }, banner: { closeAriaLabel: "Schließen" }, link: { opensInNewTabAriaLabel: "(Öffnet in neuem Tab)" }, navBar: { goBackAriaLabel: "Zurück" } }, a = {
+const e = { addressInput: { qrCodeAriaLabel: "QR-Code scannen" }, baseInput: { clearInputAriaLabel: "Eingabe löschen" }, spinner: { loadingAriaLabel: "Wird geladen" }, dialogHeader: { goBackAriaLabel: "Zurück", closeAriaLabel: "Schließen" }, banner: { closeAriaLabel: "Schließen" }, link: { opensInNewTabAriaLabel: "(Öffnet in neuem Tab)" }, navBar: { goBackAriaLabel: "Zurück" }, sideBar: { navigationAriaLabel: "Seitennavigation", collapseAriaLabel: "Seitenleiste einklappen", expandAriaLabel: "Seitenleiste ausklappen" } }, a = {
   components: e
 };
 export {

package/dist/i18n/locales/en.json.d.ts

@@ -21,6 +21,11 @@ declare const _default: {
     },
     "navBar": {
       "goBackAriaLabel": "Go back"
+    },
+    "sideBar": {
+      "navigationAriaLabel": "Sidebar navigation",
+      "collapseAriaLabel": "Collapse sidebar",
+      "expandAriaLabel": "Expand sidebar"
     }
   }
 }

package/dist/i18n/locales/en.json.js

@@ -1,4 +1,4 @@
-const a = { addressInput: { qrCodeAriaLabel: "Scan QR code" }, baseInput: { clearInputAriaLabel: "Clear input" }, spinner: { loadingAriaLabel: "Loading" }, dialogHeader: { goBackAriaLabel: "Go back", closeAriaLabel: "Close" }, banner: { closeAriaLabel: "Close" }, link: { opensInNewTabAriaLabel: "(opens in a new tab)" }, navBar: { goBackAriaLabel: "Go back" } }, e = {
+const a = { addressInput: { qrCodeAriaLabel: "Scan QR code" }, baseInput: { clearInputAriaLabel: "Clear input" }, spinner: { loadingAriaLabel: "Loading" }, dialogHeader: { goBackAriaLabel: "Go back", closeAriaLabel: "Close" }, banner: { closeAriaLabel: "Close" }, link: { opensInNewTabAriaLabel: "(opens in a new tab)" }, navBar: { goBackAriaLabel: "Go back" }, sideBar: { navigationAriaLabel: "Sidebar navigation", collapseAriaLabel: "Collapse sidebar", expandAriaLabel: "Expand sidebar" } }, e = {
   components: a
 };
 export {

package/dist/i18n/locales/es.json.d.ts

@@ -21,6 +21,11 @@ declare const _default: {
     },
     "navBar": {
       "goBackAriaLabel": "Volver"
+    },
+    "sideBar": {
+      "navigationAriaLabel": "Navegación lateral",
+      "collapseAriaLabel": "Contraer barra lateral",
+      "expandAriaLabel": "Expandir barra lateral"
     }
   }
 }

package/dist/i18n/locales/es.json.js

@@ -1,4 +1,4 @@
-const a = { addressInput: { qrCodeAriaLabel: "Escanear código QR" }, baseInput: { clearInputAriaLabel: "Borrar entrada" }, spinner: { loadingAriaLabel: "Cargando" }, dialogHeader: { goBackAriaLabel: "Volver", closeAriaLabel: "Cerrar" }, banner: { closeAriaLabel: "Cerrar" }, link: { opensInNewTabAriaLabel: "(se abre en una pestaña nueva)" }, navBar: { goBackAriaLabel: "Volver" } }, e = {
+const a = { addressInput: { qrCodeAriaLabel: "Escanear código QR" }, baseInput: { clearInputAriaLabel: "Borrar entrada" }, spinner: { loadingAriaLabel: "Cargando" }, dialogHeader: { goBackAriaLabel: "Volver", closeAriaLabel: "Cerrar" }, banner: { closeAriaLabel: "Cerrar" }, link: { opensInNewTabAriaLabel: "(se abre en una pestaña nueva)" }, navBar: { goBackAriaLabel: "Volver" }, sideBar: { navigationAriaLabel: "Navegación lateral", collapseAriaLabel: "Contraer barra lateral", expandAriaLabel: "Expandir barra lateral" } }, e = {
   components: a
 };
 export {

package/dist/i18n/locales/fr.json.d.ts

@@ -21,6 +21,11 @@ declare const _default: {
     },
     "navBar": {
       "goBackAriaLabel": "Retour"
+    },
+    "sideBar": {
+      "navigationAriaLabel": "Navigation latérale",
+      "collapseAriaLabel": "Réduire la barre latérale",
+      "expandAriaLabel": "Développer la barre latérale"
     }
   }
 }

package/dist/i18n/locales/fr.json.js

@@ -1,7 +1,7 @@
-const e = { addressInput: { qrCodeAriaLabel: "Scanner le code QR" }, baseInput: { clearInputAriaLabel: "Effacer la saisie" }, spinner: { loadingAriaLabel: "Chargement" }, dialogHeader: { goBackAriaLabel: "Retour", closeAriaLabel: "Fermer" }, banner: { closeAriaLabel: "Fermer" }, link: { opensInNewTabAriaLabel: "(s'ouvre dans un nouvel onglet)" }, navBar: { goBackAriaLabel: "Retour" } }, a = {
-  components: e
+const a = { addressInput: { qrCodeAriaLabel: "Scanner le code QR" }, baseInput: { clearInputAriaLabel: "Effacer la saisie" }, spinner: { loadingAriaLabel: "Chargement" }, dialogHeader: { goBackAriaLabel: "Retour", closeAriaLabel: "Fermer" }, banner: { closeAriaLabel: "Fermer" }, link: { opensInNewTabAriaLabel: "(s'ouvre dans un nouvel onglet)" }, navBar: { goBackAriaLabel: "Retour" }, sideBar: { navigationAriaLabel: "Navigation latérale", collapseAriaLabel: "Réduire la barre latérale", expandAriaLabel: "Développer la barre latérale" } }, e = {
+  components: a
 };
 export {
-  e as components,
-  a as default
+  a as components,
+  e as default
 };

package/dist/i18n/locales/ja.json.d.ts

@@ -21,6 +21,11 @@ declare const _default: {
     },
     "navBar": {
       "goBackAriaLabel": "戻る"
+    },
+    "sideBar": {
+      "navigationAriaLabel": "サイドバーナビゲーション",
+      "collapseAriaLabel": "サイドバーを折りたたむ",
+      "expandAriaLabel": "サイドバーを展開する"
     }
   }
 }

package/dist/i18n/locales/ja.json.js

@@ -1,4 +1,4 @@
-const a = { addressInput: { qrCodeAriaLabel: "QRコードをスキャン" }, baseInput: { clearInputAriaLabel: "インプットを削除" }, spinner: { loadingAriaLabel: "読み込み中" }, dialogHeader: { goBackAriaLabel: "戻る", closeAriaLabel: "閉じる" }, banner: { closeAriaLabel: "閉じる" }, link: { opensInNewTabAriaLabel: "（新しいタブで開く）" }, navBar: { goBackAriaLabel: "戻る" } }, e = {
+const a = { addressInput: { qrCodeAriaLabel: "QRコードをスキャン" }, baseInput: { clearInputAriaLabel: "インプットを削除" }, spinner: { loadingAriaLabel: "読み込み中" }, dialogHeader: { goBackAriaLabel: "戻る", closeAriaLabel: "閉じる" }, banner: { closeAriaLabel: "閉じる" }, link: { opensInNewTabAriaLabel: "（新しいタブで開く）" }, navBar: { goBackAriaLabel: "戻る" }, sideBar: { navigationAriaLabel: "サイドバーナビゲーション", collapseAriaLabel: "サイドバーを折りたたむ", expandAriaLabel: "サイドバーを展開する" } }, e = {
   components: a
 };
 export {

package/dist/i18n/locales/ko.json.d.ts

@@ -21,6 +21,11 @@ declare const _default: {
     },
     "navBar": {
       "goBackAriaLabel": "돌아가기"
+    },
+    "sideBar": {
+      "navigationAriaLabel": "사이드바 탐색",
+      "collapseAriaLabel": "사이드바 접기",
+      "expandAriaLabel": "사이드바 펼치기"
     }
   }
 }

package/dist/i18n/locales/ko.json.js

@@ -1,4 +1,4 @@
-const a = { addressInput: { qrCodeAriaLabel: "QR 코드 스캔" }, baseInput: { clearInputAriaLabel: "입력 값 지우기" }, spinner: { loadingAriaLabel: "로딩중" }, dialogHeader: { goBackAriaLabel: "돌아가기", closeAriaLabel: "닫기" }, banner: { closeAriaLabel: "닫기" }, link: { opensInNewTabAriaLabel: "(새 탭에서 열기)" }, navBar: { goBackAriaLabel: "돌아가기" } }, e = {
+const a = { addressInput: { qrCodeAriaLabel: "QR 코드 스캔" }, baseInput: { clearInputAriaLabel: "입력 값 지우기" }, spinner: { loadingAriaLabel: "로딩중" }, dialogHeader: { goBackAriaLabel: "돌아가기", closeAriaLabel: "닫기" }, banner: { closeAriaLabel: "닫기" }, link: { opensInNewTabAriaLabel: "(새 탭에서 열기)" }, navBar: { goBackAriaLabel: "돌아가기" }, sideBar: { navigationAriaLabel: "사이드바 탐색", collapseAriaLabel: "사이드바 접기", expandAriaLabel: "사이드바 펼치기" } }, e = {
   components: a
 };
 export {

package/dist/i18n/locales/pt.json.d.ts

@@ -21,6 +21,11 @@ declare const _default: {
     },
     "navBar": {
       "goBackAriaLabel": "Voltar"
+    },
+    "sideBar": {
+      "navigationAriaLabel": "Navegação lateral",
+      "collapseAriaLabel": "Recolher barra lateral",
+      "expandAriaLabel": "Expandir barra lateral"
     }
   }
 }

package/dist/i18n/locales/pt.json.js

@@ -1,4 +1,4 @@
-const a = { addressInput: { qrCodeAriaLabel: "Escanear QR Code" }, baseInput: { clearInputAriaLabel: "Limpar input" }, spinner: { loadingAriaLabel: "Carregando" }, dialogHeader: { goBackAriaLabel: "Voltar", closeAriaLabel: "Fechar" }, banner: { closeAriaLabel: "Fechar" }, link: { opensInNewTabAriaLabel: "(abre em uma nova aba)" }, navBar: { goBackAriaLabel: "Voltar" } }, e = {
+const a = { addressInput: { qrCodeAriaLabel: "Escanear QR Code" }, baseInput: { clearInputAriaLabel: "Limpar input" }, spinner: { loadingAriaLabel: "Carregando" }, dialogHeader: { goBackAriaLabel: "Voltar", closeAriaLabel: "Fechar" }, banner: { closeAriaLabel: "Fechar" }, link: { opensInNewTabAriaLabel: "(abre em uma nova aba)" }, navBar: { goBackAriaLabel: "Voltar" }, sideBar: { navigationAriaLabel: "Navegação lateral", collapseAriaLabel: "Recolher barra lateral", expandAriaLabel: "Expandir barra lateral" } }, e = {
   components: a
 };
 export {

package/dist/i18n/locales/ru.json.d.ts

@@ -21,6 +21,11 @@ declare const _default: {
     },
     "navBar": {
       "goBackAriaLabel": "Назад"
+    },
+    "sideBar": {
+      "navigationAriaLabel": "Боковая навигация",
+      "collapseAriaLabel": "Свернуть боковую панель",
+      "expandAriaLabel": "Развернуть боковую панель"
     }
   }
 }

package/dist/i18n/locales/ru.json.js

@@ -1,4 +1,4 @@
-const a = { addressInput: { qrCodeAriaLabel: "Сканировать QR-код" }, baseInput: { clearInputAriaLabel: "Очистить поле" }, spinner: { loadingAriaLabel: "Загрузка" }, dialogHeader: { goBackAriaLabel: "Назад", closeAriaLabel: "Закрыть" }, banner: { closeAriaLabel: "Закрыть" }, link: { opensInNewTabAriaLabel: "(открывается в новой вкладке)" }, navBar: { goBackAriaLabel: "Назад" } }, e = {
+const a = { addressInput: { qrCodeAriaLabel: "Сканировать QR-код" }, baseInput: { clearInputAriaLabel: "Очистить поле" }, spinner: { loadingAriaLabel: "Загрузка" }, dialogHeader: { goBackAriaLabel: "Назад", closeAriaLabel: "Закрыть" }, banner: { closeAriaLabel: "Закрыть" }, link: { opensInNewTabAriaLabel: "(открывается в новой вкладке)" }, navBar: { goBackAriaLabel: "Назад" }, sideBar: { navigationAriaLabel: "Боковая навигация", collapseAriaLabel: "Свернуть боковую панель", expandAriaLabel: "Развернуть боковую панель" } }, e = {
   components: a
 };
 export {

package/dist/i18n/locales/th.json.d.ts

@@ -21,6 +21,11 @@ declare const _default: {
     },
     "navBar": {
       "goBackAriaLabel": "ย้อนกลับ"
+    },
+    "sideBar": {
+      "navigationAriaLabel": "การนำทางแถบด้านข้าง",
+      "collapseAriaLabel": "ย่อแถบด้านข้าง",
+      "expandAriaLabel": "ขยายแถบด้านข้าง"
     }
   }
 }

package/dist/i18n/locales/th.json.js

@@ -1,4 +1,4 @@
-const a = { addressInput: { qrCodeAriaLabel: "สแกน QR Code" }, baseInput: { clearInputAriaLabel: "ล้างอินพุต" }, spinner: { loadingAriaLabel: "กำลังโหลด" }, dialogHeader: { goBackAriaLabel: "ย้อนกลับ", closeAriaLabel: "ปิด" }, banner: { closeAriaLabel: "ปิด" }, link: { opensInNewTabAriaLabel: "(เปิดในแท็บใหม่)" }, navBar: { goBackAriaLabel: "ย้อนกลับ" } }, e = {
+const a = { addressInput: { qrCodeAriaLabel: "สแกน QR Code" }, baseInput: { clearInputAriaLabel: "ล้างอินพุต" }, spinner: { loadingAriaLabel: "กำลังโหลด" }, dialogHeader: { goBackAriaLabel: "ย้อนกลับ", closeAriaLabel: "ปิด" }, banner: { closeAriaLabel: "ปิด" }, link: { opensInNewTabAriaLabel: "(เปิดในแท็บใหม่)" }, navBar: { goBackAriaLabel: "ย้อนกลับ" }, sideBar: { navigationAriaLabel: "การนำทางแถบด้านข้าง", collapseAriaLabel: "ย่อแถบด้านข้าง", expandAriaLabel: "ขยายแถบด้านข้าง" } }, e = {
   components: a
 };
 export {

package/dist/i18n/locales/tr.json.d.ts

@@ -21,6 +21,11 @@ declare const _default: {
     },
     "navBar": {
       "goBackAriaLabel": "Geri dön"
+    },
+    "sideBar": {
+      "navigationAriaLabel": "Kenar çubuğu gezintisi",
+      "collapseAriaLabel": "Kenar çubuğunu daralt",
+      "expandAriaLabel": "Kenar çubuğunu genişlet"
     }
   }
 }

package/dist/i18n/locales/tr.json.js

@@ -1,4 +1,4 @@
-const a = { addressInput: { qrCodeAriaLabel: "Karekodu okut" }, baseInput: { clearInputAriaLabel: "Girdiyi temizle" }, spinner: { loadingAriaLabel: "Yükleniyor" }, dialogHeader: { goBackAriaLabel: "Geri dön", closeAriaLabel: "Kapat" }, banner: { closeAriaLabel: "Kapat" }, link: { opensInNewTabAriaLabel: "(yeni sekmede açılır)" }, navBar: { goBackAriaLabel: "Geri dön" } }, e = {
+const a = { addressInput: { qrCodeAriaLabel: "Karekodu okut" }, baseInput: { clearInputAriaLabel: "Girdiyi temizle" }, spinner: { loadingAriaLabel: "Yükleniyor" }, dialogHeader: { goBackAriaLabel: "Geri dön", closeAriaLabel: "Kapat" }, banner: { closeAriaLabel: "Kapat" }, link: { opensInNewTabAriaLabel: "(yeni sekmede açılır)" }, navBar: { goBackAriaLabel: "Geri dön" }, sideBar: { navigationAriaLabel: "Kenar çubuğu gezintisi", collapseAriaLabel: "Kenar çubuğunu daralt", expandAriaLabel: "Kenar çubuğunu genişlet" } }, e = {
   components: a
 };
 export {

package/dist/i18n/locales/zh.json.d.ts

@@ -21,6 +21,11 @@ declare const _default: {
     },
     "navBar": {
       "goBackAriaLabel": "返回"
+    },
+    "sideBar": {
+      "navigationAriaLabel": "侧边栏导航",
+      "collapseAriaLabel": "收起侧边栏",
+      "expandAriaLabel": "展开侧边栏"
     }
   }
 }

package/dist/i18n/locales/zh.json.js

@@ -1,4 +1,4 @@
-const a = { addressInput: { qrCodeAriaLabel: "扫描二维码" }, baseInput: { clearInputAriaLabel: "清空输入框" }, spinner: { loadingAriaLabel: "加载中" }, dialogHeader: { goBackAriaLabel: "返回", closeAriaLabel: "关闭" }, banner: { closeAriaLabel: "关闭" }, link: { opensInNewTabAriaLabel: "（在新选项卡中打开）" }, navBar: { goBackAriaLabel: "返回" } }, e = {
+const a = { addressInput: { qrCodeAriaLabel: "扫描二维码" }, baseInput: { clearInputAriaLabel: "清空输入框" }, spinner: { loadingAriaLabel: "加载中" }, dialogHeader: { goBackAriaLabel: "返回", closeAriaLabel: "关闭" }, banner: { closeAriaLabel: "关闭" }, link: { opensInNewTabAriaLabel: "（在新选项卡中打开）" }, navBar: { goBackAriaLabel: "返回" }, sideBar: { navigationAriaLabel: "侧边栏导航", collapseAriaLabel: "收起侧边栏", expandAriaLabel: "展开侧边栏" } }, e = {
   components: a
 };
 export {

package/dist/index.js

@@ -1,119 +1,127 @@
 import { Languages as t } from "./i18n/languages.js";
-import { AddressInput as n } from "./lib/Components/AddressInput/AddressInput.js";
-import { AmountInput as p } from "./lib/Components/AmountInput/AmountInput.js";
+import { AddressInput as i } from "./lib/Components/AddressInput/AddressInput.js";
+import { AmountInput as a } from "./lib/Components/AmountInput/AmountInput.js";
 import { AmountDisplay as m } from "./lib/Components/AmountDisplay/AmountDisplay.js";
-import { Banner as l } from "./lib/Components/Banner/Banner.js";
-import { BaseInput as f } from "./lib/Components/BaseInput/BaseInput.js";
-import { Button as T } from "./lib/Components/Button/Button.js";
-import { BaseButton as I } from "./lib/Components/Button/BaseButton.js";
-import { CardButton as d } from "./lib/Components/CardButton/CardButton.js";
-import { Checkbox as B } from "./lib/Components/Checkbox/Checkbox.js";
-import { Dialog as h, DialogBody as M, DialogContent as C, DialogFooter as L, DialogTrigger as D } from "./lib/Components/Dialog/Dialog.js";
-import { DialogHeader as k } from "./lib/Components/Dialog/DialogHeader/DialogHeader.js";
-import { Divider as N } from "./lib/Components/Divider/Divider.js";
-import { IconButton as y } from "./lib/Components/IconButton/IconButton.js";
-import { InteractiveIcon as P } from "./lib/Components/InteractiveIcon/InteractiveIcon.js";
-import { Link as F } from "./lib/Components/Link/Link.js";
-import { ListItem as j, ListItemContent as q, ListItemDescription as z, ListItemIcon as E, ListItemLeading as J, ListItemSpot as K, ListItemTitle as O, ListItemTrailing as Q, ListItemTruncate as U } from "./lib/Components/ListItem/ListItem.js";
-import { Menu as W, MenuCheckboxItem as X, MenuContent as Y, MenuGroup as Z, MenuItem as _, MenuLabel as $, MenuPortal as ee, MenuRadioGroup as oe, MenuRadioItem as te, MenuSeparator as re, MenuSub as ne, MenuSubContent as ie, MenuSubTrigger as pe, MenuTrigger as ae } from "./lib/Components/Menu/Menu.js";
-import { NavBar as ue, NavBarBackButton as le, NavBarCoinCapsule as xe, NavBarTitle as fe, NavBarTrailing as Se } from "./lib/Components/NavBar/NavBar.js";
-import { SearchInput as ce } from "./lib/Components/SearchInput/SearchInput.js";
-import { Select as ge, SelectContent as de, SelectGroup as se, SelectItem as Be, SelectItemText as be, SelectLabel as he, SelectSeparator as Me, SelectTrigger as Ce } from "./lib/Components/Select/Select.js";
-import { Skeleton as De } from "./lib/Components/Skeleton/Skeleton.js";
-import { Spinner as ke } from "./lib/Components/Spinner/Spinner.js";
-import { Spot as Ne } from "./lib/Components/Spot/Spot.js";
-import { Subheader as ye, SubheaderAction as Ge, SubheaderCount as Pe, SubheaderDescription as Re, SubheaderInfo as Fe, SubheaderRow as He, SubheaderShowMore as je, SubheaderTitle as qe } from "./lib/Components/Subheader/Subheader.js";
-import { Switch as Ee } from "./lib/Components/Switch/Switch.js";
-import { Tag as Ke } from "./lib/Components/Tag/Tag.js";
-import { TextInput as Qe } from "./lib/Components/TextInput/TextInput.js";
-import { Tile as Ve, TileContent as We, TileDescription as Xe, TileSecondaryAction as Ye, TileSpot as Ze, TileTitle as _e, TileTrailingContent as $e } from "./lib/Components/Tile/Tile.js";
-import { TileButton as oo } from "./lib/Components/TileButton/TileButton.js";
-import { Tooltip as ro, TooltipContent as no, TooltipProvider as io, TooltipTrigger as po } from "./lib/Components/Tooltip/Tooltip.js";
-import { ThemeProvider as mo, useTheme as uo } from "./lib/Components/ThemeProvider/ThemeProvider.js";
+import { Avatar as l } from "./lib/Components/Avatar/Avatar.js";
+import { Banner as f } from "./lib/Components/Banner/Banner.js";
+import { BaseInput as T } from "./lib/Components/BaseInput/BaseInput.js";
+import { Button as d } from "./lib/Components/Button/Button.js";
+import { BaseButton as c } from "./lib/Components/Button/BaseButton.js";
+import { CardButton as B } from "./lib/Components/CardButton/CardButton.js";
+import { Checkbox as h } from "./lib/Components/Checkbox/Checkbox.js";
+import { Dialog as L, DialogBody as M, DialogContent as D, DialogFooter as v, DialogTrigger as A } from "./lib/Components/Dialog/Dialog.js";
+import { DialogHeader as N } from "./lib/Components/Dialog/DialogHeader/DialogHeader.js";
+import { Divider as y } from "./lib/Components/Divider/Divider.js";
+import { IconButton as P } from "./lib/Components/IconButton/IconButton.js";
+import { InteractiveIcon as F } from "./lib/Components/InteractiveIcon/InteractiveIcon.js";
+import { Link as j } from "./lib/Components/Link/Link.js";
+import { ListItem as z, ListItemContent as E, ListItemDescription as J, ListItemIcon as K, ListItemLeading as O, ListItemSpot as Q, ListItemTitle as U, ListItemTrailing as V, ListItemTruncate as W } from "./lib/Components/ListItem/ListItem.js";
+import { Menu as Y, MenuCheckboxItem as Z, MenuContent as _, MenuGroup as $, MenuItem as ee, MenuLabel as oe, MenuPortal as te, MenuRadioGroup as re, MenuRadioItem as ie, MenuSeparator as ne, MenuSub as ae, MenuSubContent as pe, MenuSubTrigger as me, MenuTrigger as ue } from "./lib/Components/Menu/Menu.js";
+import { NavBar as xe, NavBarBackButton as fe, NavBarCoinCapsule as Se, NavBarTitle as Te, NavBarTrailing as ge } from "./lib/Components/NavBar/NavBar.js";
+import { SearchInput as Ie } from "./lib/Components/SearchInput/SearchInput.js";
+import { Select as se, SelectContent as Be, SelectGroup as be, SelectItem as he, SelectItemText as Ce, SelectLabel as Le, SelectSeparator as Me, SelectTrigger as De } from "./lib/Components/Select/Select.js";
+import { SideBar as Ae, SideBarCollapseToggle as ke, SideBarItem as Ne, SideBarLeading as we, SideBarTrailing as ye } from "./lib/Components/SideBar/SideBar.js";
+import { Skeleton as Pe } from "./lib/Components/Skeleton/Skeleton.js";
+import { Spinner as Fe } from "./lib/Components/Spinner/Spinner.js";
+import { Spot as je } from "./lib/Components/Spot/Spot.js";
+import { Subheader as ze, SubheaderAction as Ee, SubheaderCount as Je, SubheaderDescription as Ke, SubheaderInfo as Oe, SubheaderRow as Qe, SubheaderShowMore as Ue, SubheaderTitle as Ve } from "./lib/Components/Subheader/Subheader.js";
+import { Switch as Xe } from "./lib/Components/Switch/Switch.js";
+import { Tag as Ze } from "./lib/Components/Tag/Tag.js";
+import { TextInput as $e } from "./lib/Components/TextInput/TextInput.js";
+import { Tile as oo, TileContent as to, TileDescription as ro, TileSecondaryAction as io, TileSpot as no, TileTitle as ao, TileTrailingContent as po } from "./lib/Components/Tile/Tile.js";
+import { TileButton as uo } from "./lib/Components/TileButton/TileButton.js";
+import { Tooltip as xo, TooltipContent as fo, TooltipProvider as So, TooltipTrigger as To } from "./lib/Components/Tooltip/Tooltip.js";
+import { ThemeProvider as Io, useTheme as co } from "./lib/Components/ThemeProvider/ThemeProvider.js";
 export {
-  n as AddressInput,
+  i as AddressInput,
   m as AmountDisplay,
-  p as AmountInput,
-  l as Banner,
-  I as BaseButton,
-  f as BaseInput,
-  T as Button,
-  d as CardButton,
-  B as Checkbox,
-  h as Dialog,
+  a as AmountInput,
+  l as Avatar,
+  f as Banner,
+  c as BaseButton,
+  T as BaseInput,
+  d as Button,
+  B as CardButton,
+  h as Checkbox,
+  L as Dialog,
   M as DialogBody,
-  C as DialogContent,
-  L as DialogFooter,
-  k as DialogHeader,
-  D as DialogTrigger,
-  N as Divider,
-  y as IconButton,
-  P as InteractiveIcon,
+  D as DialogContent,
+  v as DialogFooter,
+  N as DialogHeader,
+  A as DialogTrigger,
+  y as Divider,
+  P as IconButton,
+  F as InteractiveIcon,
   t as Languages,
-  F as Link,
-  j as ListItem,
-  q as ListItemContent,
-  z as ListItemDescription,
-  E as ListItemIcon,
-  J as ListItemLeading,
-  K as ListItemSpot,
-  O as ListItemTitle,
-  Q as ListItemTrailing,
-  U as ListItemTruncate,
-  W as Menu,
-  X as MenuCheckboxItem,
-  Y as MenuContent,
-  Z as MenuGroup,
-  _ as MenuItem,
-  $ as MenuLabel,
-  ee as MenuPortal,
-  oe as MenuRadioGroup,
-  te as MenuRadioItem,
-  re as MenuSeparator,
-  ne as MenuSub,
-  ie as MenuSubContent,
-  pe as MenuSubTrigger,
-  ae as MenuTrigger,
-  ue as NavBar,
-  le as NavBarBackButton,
-  xe as NavBarCoinCapsule,
-  fe as NavBarTitle,
-  Se as NavBarTrailing,
-  ce as SearchInput,
-  ge as Select,
-  de as SelectContent,
-  se as SelectGroup,
-  Be as SelectItem,
-  be as SelectItemText,
-  he as SelectLabel,
+  j as Link,
+  z as ListItem,
+  E as ListItemContent,
+  J as ListItemDescription,
+  K as ListItemIcon,
+  O as ListItemLeading,
+  Q as ListItemSpot,
+  U as ListItemTitle,
+  V as ListItemTrailing,
+  W as ListItemTruncate,
+  Y as Menu,
+  Z as MenuCheckboxItem,
+  _ as MenuContent,
+  $ as MenuGroup,
+  ee as MenuItem,
+  oe as MenuLabel,
+  te as MenuPortal,
+  re as MenuRadioGroup,
+  ie as MenuRadioItem,
+  ne as MenuSeparator,
+  ae as MenuSub,
+  pe as MenuSubContent,
+  me as MenuSubTrigger,
+  ue as MenuTrigger,
+  xe as NavBar,
+  fe as NavBarBackButton,
+  Se as NavBarCoinCapsule,
+  Te as NavBarTitle,
+  ge as NavBarTrailing,
+  Ie as SearchInput,
+  se as Select,
+  Be as SelectContent,
+  be as SelectGroup,
+  he as SelectItem,
+  Ce as SelectItemText,
+  Le as SelectLabel,
   Me as SelectSeparator,
-  Ce as SelectTrigger,
-  De as Skeleton,
-  ke as Spinner,
-  Ne as Spot,
-  ye as Subheader,
-  Ge as SubheaderAction,
-  Pe as SubheaderCount,
-  Re as SubheaderDescription,
-  Fe as SubheaderInfo,
-  He as SubheaderRow,
-  je as SubheaderShowMore,
-  qe as SubheaderTitle,
-  Ee as Switch,
-  Ke as Tag,
-  Qe as TextInput,
-  mo as ThemeProvider,
-  Ve as Tile,
-  oo as TileButton,
-  We as TileContent,
-  Xe as TileDescription,
-  Ye as TileSecondaryAction,
-  Ze as TileSpot,
-  _e as TileTitle,
-  $e as TileTrailingContent,
-  ro as Tooltip,
-  no as TooltipContent,
-  io as TooltipProvider,
-  po as TooltipTrigger,
-  uo as useTheme
+  De as SelectTrigger,
+  Ae as SideBar,
+  ke as SideBarCollapseToggle,
+  Ne as SideBarItem,
+  we as SideBarLeading,
+  ye as SideBarTrailing,
+  Pe as Skeleton,
+  Fe as Spinner,
+  je as Spot,
+  ze as Subheader,
+  Ee as SubheaderAction,
+  Je as SubheaderCount,
+  Ke as SubheaderDescription,
+  Oe as SubheaderInfo,
+  Qe as SubheaderRow,
+  Ue as SubheaderShowMore,
+  Ve as SubheaderTitle,
+  Xe as Switch,
+  Ze as Tag,
+  $e as TextInput,
+  Io as ThemeProvider,
+  oo as Tile,
+  uo as TileButton,
+  to as TileContent,
+  ro as TileDescription,
+  io as TileSecondaryAction,
+  no as TileSpot,
+  ao as TileTitle,
+  po as TileTrailingContent,
+  xo as Tooltip,
+  fo as TooltipContent,
+  So as TooltipProvider,
+  To as TooltipTrigger,
+  co as useTheme
 };