@ledgerhq/lumen-ui-rnative 0.0.42

package/.storybook/Decorator.tsx

@@ -0,0 +1,58 @@
+import {
+  enterpriseThemes,
+  ledgerLiveThemes,
+  websitesThemes,
+} from '@ledgerhq/lumen-design-core';
+import type { Decorator } from '@storybook/react-native-web-vite';
+
+import { ColorSchemeName } from 'react-native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { ThemeProvider } from '../src/lib/Components';
+
+const createThemeDecorator = (
+  globalName: string,
+  themeClasses: string[],
+): Decorator => {
+  return (Story, context) => {
+    const selectedValue = context.globals[globalName] as string | undefined;
+    const htmlElement = document.documentElement;
+
+    htmlElement.classList.remove(...themeClasses);
+
+    if (selectedValue) {
+      htmlElement.classList.add(selectedValue);
+    }
+
+    return <Story />;
+  };
+};
+
+export const withBrandDecorator = createThemeDecorator('brand', [
+  'ledger-live',
+  'enterprise',
+  'websites',
+]);
+
+export const withModeDecorator = createThemeDecorator('mode', [
+  'light',
+  'dark',
+]);
+
+const mappingThemes = {
+  'ledger-live': ledgerLiveThemes,
+  enterprise: enterpriseThemes,
+  websites: websitesThemes,
+} as any;
+
+export const withProvidersDecorator: Decorator = (Story, context) => {
+  const mode = context.globals.mode as ColorSchemeName;
+  const currentTheme = mappingThemes[context.globals.brand];
+
+  return (
+    <ThemeProvider colorScheme={mode} themes={currentTheme}>
+      <GestureHandlerRootView style={{ flex: 1, width: '100%' }}>
+        <Story />
+      </GestureHandlerRootView>
+    </ThemeProvider>
+  );
+};

package/.storybook/components/CustomTabs.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { Folder } from '../../src/lib/Symbols/Icons/Folder';
+import { cn } from '../../src/lib/utils';
+
+type TabProps = {
+  label: string;
+  children: React.ReactNode;
+};
+
+type CustomTabsProps = {
+  children: React.ReactNode;
+};
+
+export const CustomTabs: React.FC<CustomTabsProps> = ({ children }) => {
+  const [active, setActive] = React.useState<number>(0);
+
+  // Extract Tab components from children
+  const tabs = React.Children.toArray(children).filter(
+    (child): child is React.ReactElement<TabProps> =>
+      React.isValidElement(child) && child.type === Tab,
+  );
+
+  if (tabs.length === 0) {
+    return <div className='text-muted'>No tabs found</div>;
+  }
+
+  return (
+    <div>
+      {/* Tab buttons */}
+      <div className='mb-24 flex gap-24'>
+        {tabs.map((tab, idx) => (
+          <button
+            key={idx}
+            className={cn(
+              'group relative flex flex-col items-center gap-8 rounded-lg p-12 transition-all duration-200 focus:outline-none',
+              active === idx
+                ? 'text-active-subtle'
+                : 'text-muted hover:text-active',
+            )}
+            onClick={() => setActive(idx)}
+          >
+            {/* Folder Icon */}
+            <div
+              className={cn(
+                'rounded-lg p-8 transition-all duration-200',
+                active === idx
+                  ? 'bg-accent text-base'
+                  : 'group-hover:opacity-80',
+              )}
+            >
+              <Folder size={24} />
+            </div>
+
+            {/* Label */}
+            <span
+              className={cn(
+                'transition-colors duration-200 body-3',
+                active === idx
+                  ? 'text-black'
+                  : 'group-hover:text-active group-hover:opacity-80',
+              )}
+            >
+              {tab.props.label}
+            </span>
+          </button>
+        ))}
+      </div>
+
+      {/* Tab content */}
+      <div className='p-24'>
+        {tabs.map((tab, idx) => {
+          if (idx !== active) return null;
+          return <div key={idx}>{tab.props.children}</div>;
+        })}
+      </div>
+    </div>
+  );
+};
+
+export const Tab: React.FC<TabProps> = ({ children }) => {
+  return <div>{children}</div>;
+};

package/.storybook/components/DoVsDont/DoBlock.tsx

@@ -0,0 +1,43 @@
+import { cn } from '@ledgerhq/lumen-utils-shared';
+import React from 'react';
+
+type DoBlockItemProps = {
+  title?: string;
+  description?: string;
+  children: React.ReactNode;
+  className?: string;
+};
+
+export const DoBlockItem: React.FC<DoBlockItemProps> = ({
+  title,
+  description,
+  children,
+  className,
+}) => {
+  return (
+    <div
+      className={cn('flex flex-col gap-12', className)}
+      {...{ 'data-type': 'do-item' }}
+    >
+      {/* Header */}
+      {(title || description) && (
+        <div className='!-mb-16 flex flex-col gap-4'>
+          {title && (
+            <div className='flex items-center gap-8'>
+              <span className='text-[#10B981]'>✓</span>
+              <h4 className='!m-0 text-base body-2-semi-bold'>{title}</h4>
+            </div>
+          )}
+          {description && (
+            <p className='!m-0 text-muted body-3'>{description}</p>
+          )}
+        </div>
+      )}
+
+      {/* Code Block */}
+      <div className='[&_pre]:!m-0 [&_pre]:!rounded-xs [&_pre]:!border-2 [&_pre]:!border-[#10B981] [&_pre]:!bg-[#F0FDF4]'>
+        {children}
+      </div>
+    </div>
+  );
+};

package/.storybook/components/DoVsDont/DoVsDontRow.tsx

@@ -0,0 +1,20 @@
+import { cn } from '@ledgerhq/lumen-utils-shared';
+import React from 'react';
+
+type DoVsDontRowProps = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+export const DoVsDontRow: React.FC<DoVsDontRowProps> = ({
+  children,
+  className,
+}) => {
+  return (
+    <div className={cn('flex flex-col gap-16', className)}>
+      <div className='!-mb-16 grid grid-cols-1 gap-16 md:grid-cols-2'>
+        {children}
+      </div>
+    </div>
+  );
+};

package/.storybook/components/DoVsDont/DontBlock.tsx

@@ -0,0 +1,43 @@
+import { cn } from '@ledgerhq/lumen-utils-shared';
+import React from 'react';
+
+type DontBlockItemProps = {
+  title?: string;
+  description?: string;
+  children: React.ReactNode;
+  className?: string;
+};
+
+export const DontBlockItem: React.FC<DontBlockItemProps> = ({
+  title,
+  description,
+  children,
+  className,
+}) => {
+  return (
+    <div
+      className={cn('flex flex-col gap-12', className)}
+      {...{ 'data-type': 'dont-item' }}
+    >
+      {/* Header */}
+      {(title || description) && (
+        <div className='!-mb-16 flex flex-col gap-4'>
+          {title && (
+            <div className='flex items-center gap-8'>
+              <span className='text-[#EF4444]'>✕</span>
+              <h4 className='!m-0 text-base body-2-semi-bold'>{title}</h4>
+            </div>
+          )}
+          {description && (
+            <p className='!m-0 text-muted body-3'>{description}</p>
+          )}
+        </div>
+      )}
+
+      {/* Code Block */}
+      <div className='[&_pre]:!m-0 [&_pre]:!rounded-xs [&_pre]:!border-2 [&_pre]:!border-[#EF4444] [&_pre]:!bg-[#FEF2F2]'>
+        {children}
+      </div>
+    </div>
+  );
+};

package/.storybook/components/DoVsDont/index.ts

@@ -0,0 +1,3 @@
+export * from './DoVsDontRow';
+export * from './DoBlock';
+export * from './DontBlock';

package/.storybook/components/index.ts

@@ -0,0 +1,2 @@
+export * from './CustomTabs';
+export * from './DoVsDont';

package/.storybook/docs/Changelog.mdx

@@ -0,0 +1,44 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title='Getting Started/Changelog' />
+
+# Changelog
+
+Stay up to date with the latest changes and releases for the Ledger Design Language System libraries.
+
+## Library Releases
+
+### @ledgerhq/lumen-ui-rnative
+
+React Native components for mobile applications built with the Ledger Design Language System.
+
+[View React Native Library Releases →](https://github.com/LedgerHQ/lumen/releases?q=%40ledgerhq%2Flumen-ui-rnative%40&expanded=true)
+
+---
+
+### @ledgerhq/lumen-ui-react
+
+React components for web applications built with the Ledger Design Language System.
+
+[View React Library Releases →](https://github.com/LedgerHQ/lumen/releases?q=%40ledgerhq%2Flumen-ui-react%40&expanded=true)
+
+---
+
+### @ledgerhq/lumen-design-core
+
+Design tokens, themes, and core utilities shared across all Ledger applications.
+
+[View Design Core Releases →](https://github.com/LedgerHQ/lumen/releases?q=%22%40ledgerhq%2Flumen-design-core%22&expanded=true)
+
+---
+
+## Release Process
+
+All releases follow semantic versioning and are automatically published to npm. Each release includes:
+
+- 🩹 **Fixes**: Bug fixes and minor improvements
+- ✨ **Features**: New components and capabilities
+- 🧱 **Dependencies**: Updated dependency versions
+- ⚠️ **Breaking Changes**: Changes that may require code updates
+
+For detailed information about specific releases, please visit the release pages linked above.

package/.storybook/docs/CommonRulesDoAndDont.mdx

@@ -0,0 +1,57 @@
+import { DoVsDontRow } from '../components/DoVsDont/DoVsDontRow';
+import { DoBlockItem } from '../components/DoVsDont/DoBlock';
+import { DontBlockItem } from '../components/DoVsDont/DontBlock';
+
+## Common Do's and Don'ts
+
+<DoVsDontRow>
+  {/* prettier-ignore */}
+  <DoBlockItem
+    title='Use className for layout positioning'
+    description='Only use className for layout-related utilities (positioning, margins, display properties).'
+  >
+    ```tsx
+    <Component className='mt-4 absolute top-0 md:hidden'>
+        Submit
+    </Component>
+    ```
+  </DoBlockItem>
+  {/* prettier-ignore */}
+  <DontBlockItem
+    title='ClassName is not allowed for core styling'
+    description='Core styling, internal spacing, and typography cannot be modified using className'
+  >
+    ```tsx
+    <Component className='bg-accent'>
+      Submit
+    </Component>
+    ```
+  </DontBlockItem>
+</DoVsDontRow>
+
+<DoVsDontRow>
+
+{/* prettier-ignore */}
+<DoBlockItem
+  title='Import specific icons'
+  description='Use specific icons for better performance and tree-shaking'
+>
+  ```tsx 
+  import { Check } from '@ledgerhq/lumen-ui-rnative/symbols';
+
+  <Component icon={Check}> Label</Component>
+  ```
+</DoBlockItem>
+
+  <DontBlockItem
+    title="Don't import all icons"
+    description='Avoid importing entire icon set for better bundle size'
+  >
+    ```tsx 
+    import * as Icons from '@ledgerhq/lumen-ui-rnative/symbols';
+    
+    <Component icon={Icons.Check}> Label</Component>
+    ```
+  </DontBlockItem>
+</DoVsDontRow>
+

package/.storybook/docs/getting-started/StyleSystem.mdx

@@ -0,0 +1,133 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Getting Started/Style System" />
+
+# Style System
+
+The Ledger Design System provides `LumenStyleSheet` for creating theme-aware styles in React Native.
+
+## LumenStyleSheet.useCreate
+
+Use `LumenStyleSheet.useCreate` to create styles that automatically adapt to the current theme (light/dark mode).
+
+```tsx
+import { LumenStyleSheet } from '@ledgerhq/lumen-ui-rnative/styles';
+import { View, Text } from 'react-native';
+
+const MyComponent = () => {
+  const styles = LumenStyleSheet.useCreate((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>
+  );
+};
+```
+
+## Dynamic Styles
+
+Create dynamic style functions that adapt to props or state:
+
+```tsx
+import { LumenStyleSheet } from '@ledgerhq/lumen-ui-rnative/styles';
+import { View, Text } from 'react-native';
+
+const Button = ({ appearance, disabled }) => {
+  const styles = LumenStyleSheet.useCreate((theme) => {
+    const getBackgroundColor = () => {
+      if (disabled) return theme.colors.bg.muted;
+      if (appearance === 'accent') return theme.colors.bg.accent;
+      return theme.colors.bg.base;
+    };
+
+    return {
+      button: {
+        backgroundColor: getBackgroundColor(),
+        padding: theme.spacings.s16,
+        opacity: disabled ? 0.5 : 1,
+      },
+      text: {
+        ...theme.typographies.body2,
+        color: appearance === 'accent' 
+          ? theme.colors.text.onAccent 
+          : theme.colors.text.base,
+      },
+    };
+  });
+
+  return (
+    <View style={styles.button}>
+      <Text style={styles.text}>Press me</Text>
+    </View>
+  );
+};
+```
+
+## Theme Integration
+
+`LumenStyleSheet.useCreate` automatically receives the current theme from the [ThemeProvider](/docs/getting-started-theme--docs).
+When the theme mode changes (light/dark), your styles update automatically.
+
+
+## Theme Tokens Reference
+
+### Typographies
+
+Typography semantic tokens are available in the theme.
+It provides a preset of font size, weight, line height and letter spacing.
+
+```tsx
+const styles = LumenStyleSheet.useCreate((theme) => ({
+  title: { 
+    alignItems: 'center',
+    ...theme.typographies.heading1 
+    },
+  body: {
+    flex: 1,
+    ...theme.typographies.body1 
+  },
+}));
+```
+
+### Spacing
+
+Use for width, height, padding, margin, and gap.
+
+```tsx
+const styles = LumenStyleSheet.useCreate((theme) => ({
+  container: {
+    padding: theme.spacings.s16,
+    marginBottom: theme.spacings.s24,
+    gap: theme.spacings.s8,
+  },
+}));
+```
+
+### Colors & Shadows
+
+Apply semantic colors for backgrounds, text, borders, and elevation.
+
+```tsx
+const styles = LumenStyleSheet.useCreate((theme) => ({
+  card: {
+    backgroundColor: theme.colors.bg.surface,
+    borderColor: theme.colors.border.base,
+    ...theme.shadows.md,
+  },
+  label: {
+    color: theme.colors.text.muted,
+  },
+}));
+```
+

package/.storybook/docs/getting-started/ThemeProvider.mdx

@@ -0,0 +1,85 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Getting Started/Theme" />
+
+# Theme Provider
+
+The ThemeProvider manages your app's theme mode (light/dark) and provides theme tokens to all components.
+
+## Basic Setup
+
+Wrap your app with `ThemeProvider` and pass your theme objects:
+
+```tsx
+import { ThemeProvider } from '@ledgerhq/lumen-ui-rnative';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
+
+function App() {
+  return (
+    <ThemeProvider 
+      themes={ledgerLiveThemes}
+      colorScheme="dark"
+    >
+      <YourApp />
+    </ThemeProvider>
+  );
+}
+```
+
+## Color Scheme
+
+The `colorScheme` prop controls the theme color scheme.
+If not provided, the theme will follow the device settings.
+
+- `"dark"` - Forces dark mode
+- `"light"` - Forces light mode
+
+
+
+```tsx
+<ThemeProvider 
+  themes={ledgerLiveThemes}
+  colorScheme="dark"
+>
+  <App />
+</ThemeProvider>
+```
+
+## Changing Theme Mode
+
+If the ThemeProvider is uncontrolled, you can use the `LumenStyleSheet.useTheme` hook to control theme mode at runtime:
+
+```tsx
+import { LumenStyleSheet } from '@ledgerhq/lumen-ui-rnative/styles';
+
+const ThemeToggle = () => {
+  const { colorScheme, toggleColorScheme, setColorScheme } = LumenStyleSheet.useTheme();
+  
+  return (
+    <Button onPress={toggleColorScheme}>
+      Current: {colorScheme}
+    </Button>
+  );
+};
+```
+
+When the colorScheme changes, `Appearance.setColorScheme` is automatically called to update the system theme.
+
+
+## Internationalization
+The ThemeProvider also manages the app’s locale using React Context.  
+You can just pass the locale to the `ThemeProvider` and the translations will be loaded automatically.
+
+```tsx
+import { ThemeProvider, type SupportedLocale } from '@ledgerhq/lumen-ui-rnative';
+
+function AppProviders() {
+  const [locale, setLocale] = useState<SupportedLocale>('en');
+  return (
+    <ThemeProvider locale={locale}>
+      <App />
+      <Button onClick={() => setLocale('fr')}>Switch to French</Button>
+    </ThemeProvider>
+  );
+}
+```

package/.storybook/docs/getting-started/setup.mdx

@@ -0,0 +1,51 @@
+import { Meta, Story, Canvas, Controls } from '@storybook/addon-docs/blocks';
+
+<Meta title="Getting Started/Setup" />
+
+## Installation
+Install the packages and their peer dependencies:
+
+```bash
+# Install the UI Kit
+npm install @ledgerhq/lumen-ui-rnative @ledgerhq/lumen-design-core
+
+# Install peer dependencies
+npm install react-native@^0.75.0 react@^18.3.1 nativewind@^4.1.0 tailwindcss@^3.4.0 class-variance-authority
+```
+
+#### **About NativeWind**
+
+The `nativewind` dependency is used for styling React Native components with Tailwind CSS utilities.  
+It provides the `className` prop support and ensures consistent styling across platforms.
+
+### NativeWind Configuration
+
+Setup ledger custom tailwind preset in your `tailwind.config.ts`:
+
+```typescript
+import type { Config } from 'tailwindcss';
+import { ledgerLivePreset } from '@ledgerhq/lumen-design-core';
+
+const config = {
+  content: [
+    "./src/**/*.{js,ts,jsx,tsx}", // Your project's files
+    "./node_modules/@ledgerhq/lumen-ui-rnative/dist/**/*.{js,ts,jsx,tsx}" // Ledger UI Kit components
+  ],
+  presets: [ledgerLivePreset], // the installed tailwind preset
+} satisfies Config;
+
+export default config;
+```
+
+### Metro Configuration
+
+Add NativeWind to your `metro.config.js`:
+
+```javascript
+const { getDefaultConfig } = require('expo/metro-config');
+const { withNativeWind } = require('nativewind/metro');
+
+const config = getDefaultConfig(__dirname);
+
+module.exports = withNativeWind(config, { input: './global.css' });
+```

package/.storybook/docs/lumen.svg

@@ -0,0 +1,13 @@
+<svg width="189" height="67" viewBox="0 0 189 67" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M25.6141 8.52017H4.50857V21.156H0.910645V4.92224H25.6141V8.52017ZM0.910645 45.8594H4.50857V58.4952H25.6141V62.0931H0.910645V45.8594Z" fill="black"/>
+<path d="M142.619 8.52023H121.514V4.9223H146.217V21.156H142.619V8.52023ZM121.514 58.4953H142.619V45.8595H146.217V62.0932H121.514V58.4953Z" fill="black"/>
+<path d="M110.139 27.6525V30.8174C111.123 28.391 113.233 27.125 115.906 27.125C119.352 27.125 121.673 29.1998 121.673 33.701V45.2354H116.398V34.6505C116.398 32.4702 115.378 31.4504 113.585 31.4504C111.686 31.4504 110.455 32.7164 110.455 35.178V45.2354H105.18V27.6525H110.139Z" fill="black"/>
+<path d="M103.488 39.7847C102.925 43.4068 99.6194 45.7629 95.1182 45.7629C89.8785 45.7629 86.1157 42.6683 86.1157 36.444C86.1157 30.1844 89.8785 27.125 95.1182 27.125C100.041 27.125 103.769 30.2196 103.769 36.444C103.769 36.9011 103.769 37.3231 103.734 37.7451H91.1444C91.3203 40.488 92.8676 41.7892 95.1182 41.7892C96.8765 41.7892 97.826 41.0155 98.2128 39.7847H103.488ZM95.1182 31.0636C93.0434 31.0636 91.5313 32.224 91.2148 34.5802H98.7051C98.4238 32.224 97.0523 31.0636 95.1182 31.0636Z" fill="black"/>
+<path d="M25.687 45.1879V21.8275H30.626V41.1158H40.6409V45.1879H25.687Z" fill="black"/>
+<path d="M47.2227 38.3079C47.2227 40.4176 48.1717 41.4024 49.8594 41.4026C51.6879 41.4026 52.8837 40.1716 52.8838 37.7805V37.0354C54.2343 37.2797 55.7342 37.7285 56.4639 38.4797C57.524 39.5716 58.0123 42.3503 58.1572 43.8938H58.1592V45.2356H53.165V42.2112C52.1804 44.5319 50.106 45.7628 47.5391 45.7629C44.1983 45.7629 41.9473 43.688 41.9473 39.2571V27.6526H47.2227V38.3079ZM58.1592 28.9954H58.1562C58.0105 30.5404 57.5227 33.3135 56.4639 34.4036C55.7341 35.1546 54.2342 35.6012 52.8838 35.845V27.6526H58.1592V28.9954Z" fill="black"/>
+<path d="M64.1841 45.2352H58.9097V43.8846C59.0556 42.3394 59.5439 39.5692 60.6021 38.4794C61.3321 37.7278 62.8331 37.2793 64.1841 37.035V45.2352ZM79.7632 27.1249C82.9983 27.125 85.2134 29.1296 85.2134 33.5253V45.2352H79.939V34.4745C79.9389 32.3998 79.0595 31.4501 77.4771 31.4501C75.7892 31.4502 74.6988 32.6811 74.6987 35.0018V45.2352H69.4243V34.4745C69.4243 32.3998 68.5448 31.4501 66.9624 31.4501C65.2746 31.4502 64.1842 32.6811 64.1841 35.0018V35.8446C62.8332 35.6009 61.3321 35.1546 60.6021 34.4032C59.6755 33.4492 59.1864 31.2065 58.981 29.6259L58.9097 28.995V27.6522H63.8677V30.6415C64.8172 28.3205 66.7869 27.1249 69.2837 27.1249C71.6749 27.1249 73.5032 28.2503 74.2769 30.6063C75.2615 28.3205 77.2664 27.1249 79.7632 27.1249Z" fill="black"/>
+<path d="M124.961 14.9203C125.08 16.6076 125.664 20.3194 127.054 21.7094C128.359 23.0136 131.692 23.5439 133.484 23.6722L133.821 23.6927C132.145 23.7743 128.446 24.2857 127.054 25.6771C125.663 27.0685 125.079 30.7862 124.961 32.4711L124.967 32.473H124.956L124.961 32.4711C124.844 30.7862 124.26 27.0687 122.869 25.6771C121.477 24.2858 117.778 23.7743 116.102 23.6927C117.778 23.6112 121.477 23.1006 122.869 21.7094C124.259 20.3194 124.843 16.6076 124.961 14.9203Z" fill="#D4A0FF"/>
+<path d="M124.961 14.9203C125.08 16.6076 125.664 20.3194 127.054 21.7094C128.359 23.0136 131.692 23.5439 133.484 23.6722L133.821 23.6927C132.145 23.7743 128.446 24.2857 127.054 25.6771C125.663 27.0685 125.079 30.7862 124.961 32.4711L124.967 32.473H124.956L124.961 32.4711C124.844 30.7862 124.26 27.0687 122.869 25.6771C121.477 24.2858 117.778 23.7743 116.102 23.6927C117.778 23.6112 121.477 23.1006 122.869 21.7094C124.259 20.3194 124.843 16.6076 124.961 14.9203Z" fill="#D4A0FF"/>
+<rect width="57.1925" height="21.6937" transform="translate(155.226 62.0458) rotate(-90)" fill="#F9F1FF"/>
+<path d="M171.072 56.007L171.072 58.087L160.315 54.3L160.315 51.8943L171.072 48.1019L171.072 50.182L168.42 51.0749L168.42 55.1193L171.072 56.007ZM166.854 54.5941L166.854 51.6001L162.521 53.0551L162.521 53.1391L166.854 54.5941ZM171.072 46.9809L160.315 46.9809L160.315 45.0322L169.439 45.0322L169.439 40.2944L171.072 40.2944L171.072 46.9809ZM171.072 38.8989L160.315 38.8989L160.315 34.865C160.315 32.391 161.823 31.0726 163.876 31.0726C165.946 31.0726 167.438 32.4068 167.438 34.8912L167.438 36.9502L171.072 36.9502L171.072 38.8989ZM165.835 36.9502L165.835 35.1538C165.835 33.7041 165.021 33.0581 163.876 33.0581C162.731 33.0581 161.943 33.7041 161.943 35.1643L161.943 36.9502L165.835 36.9502ZM171.072 29.6758L160.315 29.6758L160.315 27.7271L164.869 27.7271L164.869 22.7424L160.315 22.7424L160.315 20.7885L171.072 20.7885L171.072 22.7424L166.503 22.7424L166.503 27.7271L171.072 27.7271L171.072 29.6758ZM171.072 17.5835L171.072 19.6635L160.315 15.8764L160.315 13.4708L171.072 9.67842L171.072 11.7584L168.42 12.6514L168.42 16.6958L171.072 17.5835ZM166.854 16.1706L166.854 13.1766L162.521 14.6316L162.521 14.7156L166.854 16.1706Z" fill="#D4A0FF"/>
+</svg>

package/.storybook/font.css

@@ -0,0 +1 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;600;800&display=swap');