@ledgerhq/lumen-ui-rnative 0.1.7 → 0.1.9

package/src/styles/lx/createStyledPressable.tsx

@@ -5,6 +5,8 @@ import type {
   PressableStateCallbackType,
   ViewStyle,
 } from 'react-native';
+import { useHapticFeedbackWithPressIn } from '../../lib/Haptics';
+import type { HapticFeedback } from '../../lib/Haptics/types';
 import { StyledPressableProps, PressableStyleItem } from '../types';
 import { areLxPropsEqual } from './areLxPropsEqual';
 import { useResolveViewStyle } from './resolveStyle';
@@ -40,26 +42,52 @@ const resolveStyleFunctions = (
  * Factory function to create a styled Pressable component.
  *
  * Supports `style` as an object, function, or array of objects/functions (including nested).
+ * Supports `hapticFeedback` to trigger vibration on press-in (`true` = medium, or an impact style string).
  *
  * ```tsx
  * // Create a styled Pressable
  * const Pressable = createStyledPressable(RNPressable);
  *
+ * // Usage with haptic feedback
+ * <Pressable hapticFeedback onPress={handlePress} />
+ * <Pressable hapticFeedback="light" onPress={handlePress} />
+ *
  * // Usage with array of styles
  * <Pressable style={[props.style, ({ pressed }) => ({ opacity: pressed ? 0.8 : 1 })]} />
  * ```
  */
 export const createStyledPressable = (Component: typeof Pressable) => {
   const StyledComponent = memo(
-    ({ lx = {}, ref, style, ...props }: StyledPressableProps) => {
+    ({
+      lx = {},
+      ref,
+      style,
+      hapticFeedback,
+      onPressIn,
+      ...props
+    }: StyledPressableProps) => {
       const resolvedStyle = useResolveViewStyle(lx);
+      const intensity: HapticFeedback | undefined =
+        hapticFeedback === true ? 'medium' : (hapticFeedback ?? undefined);
+
+      const { handlePressIn } = useHapticFeedbackWithPressIn({
+        hapticFeedback: intensity,
+        onPressIn: onPressIn ?? undefined,
+      });
 
       if (!hasStyleFunction(style)) {
         const finalStyle = StyleSheet.flatten([
           style as ViewStyle,
           resolvedStyle,
         ]);
-        return <Component ref={ref} {...props} style={finalStyle} />;
+        return (
+          <Component
+            ref={ref}
+            {...props}
+            {...(handlePressIn !== undefined && { onPressIn: handlePressIn })}
+            style={finalStyle}
+          />
+        );
       }
 
       const mergedStyle = (state: PressableStateCallbackType): ViewStyle => {
@@ -67,7 +95,14 @@ export const createStyledPressable = (Component: typeof Pressable) => {
         return StyleSheet.flatten([resolvedBareStyle, resolvedStyle]);
       };
 
-      return <Component ref={ref} {...props} style={mergedStyle} />;
+      return (
+        <Component
+          ref={ref}
+          {...props}
+          {...(handlePressIn !== undefined && { onPressIn: handlePressIn })}
+          style={mergedStyle}
+        />
+      );
     },
     areLxPropsEqual,
   );

package/src/styles/types/factories.types.ts

@@ -9,6 +9,7 @@ import {
   View as RNView,
   Pressable as RNPressable,
 } from 'react-native';
+import type { ImpactFeedbackStyle } from '../../lib/Haptics';
 import { LumenTextStyle, LumenViewStyle } from './lx.types';
 import { LumenTypographyTokenName } from './theme.types';
 
@@ -58,5 +59,11 @@ export type StyledPressableProps = {
    * Support LX property - [see documentation](/?path=/docs/style-system-lx--docs).
    */
   lx?: LumenViewStyle;
+  /**
+   * Triggers haptic feedback on press-in.
+   * - `true` — default medium intensity.
+   * - Impact style: `"light"` | `"medium"` | `"heavy"` | `"soft"` | `"rigid"`.
+   */
+  hapticFeedback?: ImpactFeedbackStyle | true;
 } & ExtendRNPressableProps &
   ComponentPropsWithRef<typeof RNPressable>;

package/.storybook/Decorator.tsx

@@ -1,123 +0,0 @@
-import {
-  enterpriseThemes,
-  ledgerLiveThemes,
-  websitesThemes,
-} from '@ledgerhq/lumen-design-core';
-import {
-  DocsContainer,
-  DocsContainerProps,
-} from '@storybook/addon-docs/blocks';
-import type { Decorator } from '@storybook/react-native-web-vite';
-import { PropsWithChildren, ReactNode } from 'react';
-
-import { ColorSchemeName } from 'react-native';
-import { GestureHandlerRootView } from 'react-native-gesture-handler';
-import { BottomSheetModalProvider, ThemeProvider } from '../src/lib/Components';
-
-type BrandThemes = typeof ledgerLiveThemes;
-
-const mappingThemes: Record<string, BrandThemes> = {
-  'ledger-live': ledgerLiveThemes,
-  enterprise: enterpriseThemes as unknown as BrandThemes,
-  websites: websitesThemes as unknown as BrandThemes,
-};
-
-const getThemeFromGlobals = (
-  mode?: ColorSchemeName | string,
-  brand?: string,
-): { mode: ColorSchemeName; theme: BrandThemes } => ({
-  mode: (mode as ColorSchemeName) ?? 'light',
-  theme: mappingThemes[brand ?? 'ledger-live'] ?? mappingThemes['ledger-live'],
-});
-
-type StorybookProvidersProps = PropsWithChildren<{
-  mode: ColorSchemeName;
-  theme: BrandThemes;
-}>;
-
-const StorybookProviders = ({
-  mode,
-  theme,
-  children,
-}: StorybookProvidersProps) => (
-  <ThemeProvider colorScheme={mode} themes={theme}>
-    <GestureHandlerRootView
-      style={{ flex: 1, width: '100%', alignItems: 'flex-start' }}
-    >
-      <BottomSheetModalProvider>{children}</BottomSheetModalProvider>
-    </GestureHandlerRootView>
-  </ThemeProvider>
-);
-
-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',
-]);
-
-export const withProvidersDecorator: Decorator = (Story, context) => {
-  const { mode, theme } = getThemeFromGlobals(
-    context.globals.mode,
-    context.globals.brand,
-  );
-
-  return (
-    <StorybookProviders mode={mode} theme={theme}>
-      <Story />
-    </StorybookProviders>
-  );
-};
-
-type DocsContainerContext = {
-  store: {
-    globals: {
-      globals: {
-        mode?: ColorSchemeName;
-        brand?: string;
-      };
-    };
-  };
-};
-
-export const withProvidersDocsContainer = ({
-  children,
-  context,
-  ...rest
-}: PropsWithChildren<DocsContainerProps>): ReactNode => {
-  const docsContext = context as unknown as DocsContainerContext;
-  const { mode, theme } = getThemeFromGlobals(
-    docsContext.store?.globals?.globals?.mode,
-    docsContext.store?.globals?.globals?.brand,
-  );
-
-  return (
-    <DocsContainer context={context} {...rest}>
-      <StorybookProviders mode={mode} theme={theme}>
-        {children}
-      </StorybookProviders>
-    </DocsContainer>
-  );
-};

package/.storybook/components/CustomTabs.tsx

@@ -1,85 +0,0 @@
-import React from 'react';
-import { Box, Pressable, Text } from '../../src/lib/Components/Utility';
-import { Folder } from '../../src/lib/Symbols/Icons/Folder';
-
-type TabProps = {
-  label: string;
-  children: React.ReactNode;
-};
-
-type CustomTabsProps = {
-  children: React.ReactNode;
-};
-
-export const CustomTabs = ({ children }: CustomTabsProps) => {
-  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 (
-      <Text typography='body3' lx={{ color: 'muted' }}>
-        No tabs found
-      </Text>
-    );
-  }
-
-  return (
-    <Box style={{ maxWidth: '100%' }}>
-      {/* Tab buttons */}
-      <Box lx={{ flexDirection: 'row', gap: 's24', marginBottom: 's24' }}>
-        {tabs.map((tab, idx) => {
-          const isActive = active === idx;
-          return (
-            <Pressable
-              key={idx}
-              lx={{
-                alignItems: 'center',
-                gap: 's8',
-                borderRadius: 'lg',
-                padding: 's12',
-              }}
-              style={({ pressed }) => ({ opacity: pressed ? 0.8 : 1 })}
-              onPress={() => setActive(idx)}
-            >
-              {/* Folder Icon */}
-              <Box
-                lx={{
-                  borderRadius: 'lg',
-                  padding: 's8',
-                  ...(isActive && { backgroundColor: 'accent' }),
-                }}
-              >
-                <Folder size={24} />
-              </Box>
-
-              {/* Label */}
-              <Text
-                typography='body3'
-                lx={{ color: isActive ? 'base' : 'muted' }}
-              >
-                {tab.props.label}
-              </Text>
-            </Pressable>
-          );
-        })}
-      </Box>
-
-      {/* Tab content */}
-      <Box lx={{ padding: 's24' }}>
-        {tabs.map((tab, idx) => {
-          if (idx !== active) return null;
-          return <Box key={idx}>{tab.props.children}</Box>;
-        })}
-      </Box>
-    </Box>
-  );
-};
-
-export const Tab = ({ children }: TabProps) => {
-  return <Box>{children}</Box>;
-};

package/.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx

@@ -1,57 +0,0 @@
-import { DoVsDontRow } from './DoVsDontRow';
-import { DoBlockItem } from './DoBlock';
-import { DontBlockItem } from './DontBlock';
-
-## Common Do's and Don'ts
-
-<DoVsDontRow>
-  {/* prettier-ignore */}
-  <DoBlockItem
-    title='Use lx for layout positioning'
-    description='Only use lx for layout-related utilities (positioning, margins, display properties).'
-  >
-    ```tsx
-    <Component lx={{ marginTop: 's4', position: 'absolute', top: 0, display: 'none', md: 'hidden' }}>
-        Submit
-    </Component>
-    ```
-  </DoBlockItem>
-  {/* prettier-ignore */}
-  <DontBlockItem
-    title='lx is not allowed for core styling'
-    description='Core styling, internal spacing, and typography cannot be modified using lx'
-  >
-    ```tsx
-    <Component lx={{ backgroundColor: '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/components/DoVsDont/DoBlock.tsx

@@ -1,39 +0,0 @@
-import { PropsWithChildren } from 'react';
-import { Box, Text } from '../../../src/lib/Components/Utility';
-
-type DoBlockItemProps = {
-  title?: string;
-  description?: string;
-} & PropsWithChildren;
-
-export const DoBlockItem = ({
-  title,
-  description,
-  children,
-}: DoBlockItemProps) => {
-  return (
-    <Box lx={{ gap: 's12' }} {...{ 'data-type': 'do-item' }}>
-      {/* Header */}
-      {(title || description) && (
-        <Box lx={{ gap: 's4' }}>
-          {title && (
-            <Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's8' }}>
-              <Text style={{ color: '#10B981' }}>✓</Text>
-              <Text typography='body2SemiBold' lx={{ color: 'base' }}>
-                {title}
-              </Text>
-            </Box>
-          )}
-          {description && (
-            <Text typography='body3' lx={{ color: 'muted' }}>
-              {description}
-            </Text>
-          )}
-        </Box>
-      )}
-
-      {/* Code Block */}
-      <Box>{children}</Box>
-    </Box>
-  );
-};

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

@@ -1,14 +0,0 @@
-import { PropsWithChildren } from 'react';
-import { Box } from '../../../src/lib/Components/Utility';
-
-type DoVsDontRowProps = PropsWithChildren & {};
-
-export const DoVsDontRow = ({ children }: DoVsDontRowProps) => {
-  return (
-    <Box lx={{ gap: 's16' }}>
-      <Box lx={{ flexDirection: 'row', gap: 's16', flexWrap: 'wrap' }}>
-        {children}
-      </Box>
-    </Box>
-  );
-};

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

@@ -1,39 +0,0 @@
-import { PropsWithChildren } from 'react';
-import { Box, Text } from '../../../src/lib/Components/Utility';
-
-type DontBlockItemProps = {
-  title?: string;
-  description?: string;
-} & PropsWithChildren;
-
-export const DontBlockItem = ({
-  title,
-  description,
-  children,
-}: DontBlockItemProps) => {
-  return (
-    <Box lx={{ gap: 's12' }} {...{ 'data-type': 'dont-item' }}>
-      {/* Header */}
-      {(title || description) && (
-        <Box lx={{ gap: 's4' }}>
-          {title && (
-            <Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's8' }}>
-              <Text style={{ color: '#EF4444' }}>✕</Text>
-              <Text typography='body2SemiBold' lx={{ color: 'base' }}>
-                {title}
-              </Text>
-            </Box>
-          )}
-          {description && (
-            <Text typography='body3' lx={{ color: 'muted' }}>
-              {description}
-            </Text>
-          )}
-        </Box>
-      )}
-
-      {/* Code Block */}
-      <Box>{children}</Box>
-    </Box>
-  );
-};

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

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

package/.storybook/components/index.ts

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

package/.storybook/docs/Changelog.mdx

@@ -1,43 +0,0 @@
-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.
-
-
-### @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/getting-started/setup.mdx

@@ -1,125 +0,0 @@
-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.77.0 react@^18.3.1
-```
-
-
-
-## Setup ThemeProvider
-
-The `ThemeProvider` will manage themes, colorScheme, locale, rtl and other global state...
-
-```tsx
-import { ThemeProvider } from '@ledgerhq/lumen-ui-rnative';
-import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
-
-function App() {
-  return (
-    <ThemeProvider 
-      themes={ledgerLiveThemes}
-      colorScheme="dark"
-      locale="en"
-    >
-      <YourApp />
-    </ThemeProvider>
-  );
-}
-```
-
-## Themes
-
-Use the themes prop to pass theme objects to the ThemeProvider.
-
-Three themes are currently available:
-- enterprise
-- ledger-live
-- websites
-
-Once provided, the active theme can be accessed using Lumen style-system utilities.
-
-```tsx
-import { ThemeProvider } from '@ledgerhq/lumen-ui-rnative';
-import { ledgerLiveThemes, enterpriseThemes, websitesThemes } from '@ledgerhq/lumen-design-core';
-
-function App() {
-  return (
-    <ThemeProvider themes={ledgerLiveThemes}>
-      <App />
-    </ThemeProvider>
-```
-
-## Color Scheme
-
-The `colorScheme` prop controls the theme color scheme.
-If not provided, the theme will follow the device settings.
-
-- `"dark"` - Forces dark color scheme
-- `"light"` - Forces light color scheme
-
-
-```tsx
-<ThemeProvider 
-  themes={ledgerLiveThemes}
-  colorScheme="dark"
->
-  <App />
-</ThemeProvider>
-```
-
-The ThemeProvider's colorScheme is controlled; you can use the [`useTheme`](/?path=/docs/style-system-usetheme--docs) hook to get the theme mode at runtime:
-
-```tsx
-import { useTheme } from '@ledgerhq/lumen-ui-rnative/styles';
-
-const ThemeToggle = () => {
-  const { colorScheme } = useTheme();
-  
-  return (
-    <View>
-      Current: {colorScheme}
-    </View>
-  );
-};
-```
-
-
-## (Optional) Setup AI Assistant
-
-For better AI assistance (Cursor, Claude, VS Code Copilot, etc.), reference the included rules.
-
-**For Cursor**, add to your `.cursorrules`:
-
-```
-@node_modules/@ledgerhq/lumen-ui-rnative/ai-rules/RULES.md
-```
-
-[Learn more about AI rules →](https://www.npmjs.com/package/@ledgerhq/lumen-ui-rnative#-ai-assistant-setup)
-
-## 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, Languages } from '@ledgerhq/lumen-ui-rnative';
-
-function AppProviders() {
-  const [locale, setLocale] = useState<SupportedLocale>(Languages.en.id);
-  return (
-    <ThemeProvider locale={locale}>
-      <App />
-      <Button onClick={() => setLocale('fr')}>Switch to French</Button>
-    </ThemeProvider>
-  );
-}
-```

package/.storybook/docs/lumen.svg

@@ -1,13 +0,0 @@
-<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/docs/style-system/lx/BorderRadius/BorderRadius.mdx

@@ -1,15 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-import { BorderRadiusTable } from './BorderRadiusTable';
-
-<Meta title='Style System/Theme/Border Radius' />
-
-# 🔘 Border Radius
-
-Our border radius system provides consistent corner rounding values for UI elements.
-
-## Border Radius Values
-
-Border radius values are accessed through `theme.borderRadius.*` and can be used for rounded corners on boxes, cards, buttons, and other UI elements.
-
-<BorderRadiusTable />
-