@ledgerhq/lumen-ui-rnative 0.1.30 → 0.1.32

package/src/lib/Components/TextInput/TextInput.stories.tsx

@@ -66,11 +66,51 @@ export const WithContent: Story = {
   },
 };
 
+export const WithLabelAndPlaceholder: Story = {
+  render: (args) => <TextInputStory {...args} />,
+  args: {
+    label: 'Phone',
+    placeholder: '+1 (555) 000-0000',
+    editable: true,
+    hideClearButton: false,
+    keyboardType: 'phone-pad',
+  },
+};
+
 export const WithError: Story = {
   render: (args) => <TextInputStory {...args} initialValue='ab' />,
   args: {
     label: 'Username',
-    errorMessage: 'Username must be at least 3 characters',
+    helperText: 'Username must be at least 3 characters',
+    status: 'error',
+    editable: true,
+    hideClearButton: false,
+    keyboardType: 'default',
+  },
+};
+
+export const WithSuccess: Story = {
+  render: (args) => (
+    <TextInputStory
+      {...args}
+      initialValue='0x742d35Cc6634C0532925a3b844Bc9e7595f0bEb27'
+    />
+  ),
+  args: {
+    label: 'Address',
+    helperText: 'Address verified',
+    status: 'success',
+    editable: true,
+    hideClearButton: false,
+    keyboardType: 'default',
+  },
+};
+
+export const WithNeutralHint: Story = {
+  render: (args) => <TextInputStory {...args} />,
+  args: {
+    label: 'Address',
+    helperText: 'Enter your ETH address',
     editable: true,
     hideClearButton: false,
     keyboardType: 'default',

package/src/lib/Components/TextInput/TextInput.test.tsx

@@ -0,0 +1,90 @@
+import { describe, expect, it } from '@jest/globals';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
+import { render, screen } from '@testing-library/react-native';
+import type { ReactElement } from 'react';
+import { CheckmarkCircleFill } from '../../Symbols/Icons/CheckmarkCircleFill';
+import { DeleteCircleFill } from '../../Symbols/Icons/DeleteCircleFill';
+import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
+import { TextInput } from './TextInput';
+
+const { colors } = ledgerLiveThemes.dark;
+
+const renderWithProvider = (
+  component: ReactElement,
+): ReturnType<typeof render> => {
+  return render(
+    <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
+      {component}
+    </ThemeProvider>,
+  );
+};
+
+describe('TextInput', () => {
+  describe('Placeholder and label (BaseInput parity with web)', () => {
+    it('uses the provided placeholder when label and placeholder are both set', async () => {
+      await renderWithProvider(
+        <TextInput
+          label='Username'
+          placeholder='jane.doe'
+          value=''
+          onChangeText={() => {}}
+        />,
+      );
+
+      expect(screen.getByPlaceholderText('jane.doe')).toBeTruthy();
+    });
+  });
+
+  describe('Helper text', () => {
+    it('renders neutral helper text without feedback icons', () => {
+      renderWithProvider(
+        <TextInput label='Address' helperText='Enter your ETH address' />,
+      );
+
+      const helperText = screen.getByText('Enter your ETH address');
+
+      expect(helperText).toBeTruthy();
+      expect(helperText.props.style).toEqual(
+        expect.objectContaining({ color: colors.text.muted }),
+      );
+      expect(screen.UNSAFE_queryByType(DeleteCircleFill)).toBeNull();
+      expect(screen.UNSAFE_queryByType(CheckmarkCircleFill)).toBeNull();
+    });
+
+    it('renders error helper text with an error icon', () => {
+      renderWithProvider(
+        <TextInput
+          label='Address'
+          helperText='Invalid address format'
+          status='error'
+        />,
+      );
+
+      const helperText = screen.getByText('Invalid address format');
+
+      expect(helperText.props.style).toEqual(
+        expect.objectContaining({ color: colors.text.error }),
+      );
+      expect(screen.UNSAFE_getByType(DeleteCircleFill)).toBeTruthy();
+      expect(screen.UNSAFE_queryByType(CheckmarkCircleFill)).toBeNull();
+    });
+
+    it('renders success helper text with a success icon', () => {
+      renderWithProvider(
+        <TextInput
+          label='Address'
+          helperText='Address verified'
+          status='success'
+        />,
+      );
+
+      const helperText = screen.getByText('Address verified');
+
+      expect(helperText.props.style).toEqual(
+        expect.objectContaining({ color: colors.text.success }),
+      );
+      expect(screen.UNSAFE_getByType(CheckmarkCircleFill)).toBeTruthy();
+      expect(screen.UNSAFE_queryByType(DeleteCircleFill)).toBeNull();
+    });
+  });
+});

package/src/lib/Components/TextInput/TextInput.tsx

@@ -8,7 +8,7 @@ import { type TextInputProps } from './types';
  * - **Automatic clear button** appears when input has content
  * - **Floating label** with smooth animations
  * - **Suffix elements** for icons, buttons, or custom content
- * - **Error state styling** with errorMessage support
+ * - **Helper text** with optional `status` (`error` | `success`) for border and helper feedback styling
  * - **Container-based spacing** with padding and gap for clean layout
  * - **Flexible styling** via style props
  * - **React Native TextInput** with proper mobile behavior
@@ -28,12 +28,13 @@ import { type TextInputProps } from './types';
  * // Basic input with automatic clear button
  * <TextInput label="Title" value={title} onChangeText={setTitle} />
  *
- * // Input with error state
+ * // Input with error helper
  * <TextInput
  *   label="Email"
  *   value={email}
  *   onChangeText={setEmail}
- *   errorMessage="Please enter a valid email address"
+ *   helperText="Please enter a valid email address"
+ *   status="error"
  * />
  *
  * // Input with suffix element

package/src/lib/Components/Trend/Trend.mdx

@@ -0,0 +1,106 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as TrendStories from './Trend.stories';
+import { CustomTabs, Tab } from '../../../../.storybook/components';
+import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
+import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
+
+<Meta title='Communication/Trend' of={TrendStories} />
+
+# Trend
+
+<CustomTabs>
+<Tab label="Overview">
+
+## Introduction
+
+A compact indicator used to communicate directional change in a numeric value, typically a percentage. It combines an icon and a formatted label to convey whether a value has gone up, down, or stayed flat.
+
+> View in [Figma](https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=892-5393).
+
+## Anatomy
+
+- **Icon:** A directional triangle (up or down) or a minus symbol that visually reinforces the direction of change at a glance.
+- **Value:** The numeric percentage formatted to exactly two decimal places, ensuring consistent alignment across lists and tables.
+
+## Properties
+
+### Overview
+
+<Canvas of={TrendStories.Base} />
+<Controls of={TrendStories.Base} />
+
+### Variants
+
+The variant is derived automatically from the `value` prop. No manual selection needed! This ensures the color and icon always stay in sync with the actual data.
+
+- **Positive** - value greater than 0: green color, triangle up icon
+- **Negative** - value less than 0: red color, triangle down icon
+- **Neutral** - value equal to 0: muted color, minus icon
+
+<Canvas of={TrendStories.VariantShowcase} />
+
+---
+
+### Size
+
+Two sizes are available to accommodate different layout densities. Use `md` in most contexts and `sm` when space is constrained, such as inside a table cell or a compact list item.
+
+- **md** (default) - standard body text and icon sizes
+- **sm** - smaller text and icon, suitable for dense UIs
+
+<Canvas of={TrendStories.SizeShowcase} />
+
+---
+
+### Disabled
+
+When `disabled` is `true`, the icon and text both render in a muted, non-interactive style regardless of the underlying value. Use this when the data is unavailable, loading, or the surrounding context is non-interactive.
+
+<Canvas of={TrendStories.DisabledShowcase} />
+
+</Tab>
+<Tab label="Implementation">
+
+## Setup
+
+Install and set up the library with our [Setup Guide →](?path=/docs/getting-started-setup--docs).
+
+### Basic Usage
+
+Pass any numeric value - the component handles color, icon, and formatting automatically.
+
+```tsx
+import { Trend } from '@ledgerhq/lumen-ui-rnative';
+
+function MyComponent() {
+  return <Trend value={5.25} />;
+}
+```
+
+### Sizes
+
+Choose `sm` for dense layouts like tables or compact list rows, and `md` for standard content areas.
+
+```tsx
+<Trend value={3.14} size='md' />
+<Trend value={3.14} size='sm' />
+```
+
+### Disabled State
+
+Wrap or pass `disabled` when the value is unavailable or the parent context is non-interactive. The component style updates automatically - no extra styling needed.
+
+```tsx
+<Trend value={5.25} disabled />
+```
+
+### Layout Adjustments
+
+Use `lx` for layout only - not for overriding colors or typography. The component's visual appearance is controlled exclusively via props.
+
+```tsx
+<Trend value={-1.5} lx={{ marginTop: 's4' }} />
+```
+
+</Tab>
+</CustomTabs>

package/src/lib/Components/Trend/Trend.stories.tsx

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
+import { Box } from '../Utility/Box';
+import { Trend } from './Trend';
+
+const meta: Meta<typeof Trend> = {
+  component: Trend,
+  title: 'Communication/Trend',
+  argTypes: {
+    value: {
+      control: 'number',
+    },
+    size: {
+      control: 'radio',
+      options: ['sm', 'md'],
+    },
+    disabled: {
+      control: 'boolean',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Trend>;
+
+export const Base: Story = {
+  args: {
+    value: 5.25,
+    size: 'md',
+    disabled: false,
+  },
+};
+
+export const VariantShowcase: Story = {
+  render: () => (
+    <Box lx={{ flexDirection: 'column', gap: 's8' }}>
+      <Trend value={5.25} />
+      <Trend value={-3.14} />
+      <Trend value={0} />
+    </Box>
+  ),
+};
+
+export const SizeShowcase: Story = {
+  render: () => (
+    <Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's16' }}>
+      <Trend value={5.25} size='md' />
+      <Trend value={5.25} size='sm' />
+    </Box>
+  ),
+};
+
+export const DisabledShowcase: Story = {
+  render: () => (
+    <Box lx={{ flexDirection: 'column', gap: 's8' }}>
+      <Trend value={5.25} disabled />
+      <Trend value={-3.14} disabled />
+      <Trend value={0} disabled />
+    </Box>
+  ),
+};

package/src/lib/Components/Trend/Trend.test.tsx

@@ -0,0 +1,125 @@
+import { describe, it, expect } from '@jest/globals';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
+import { render } from '@testing-library/react-native';
+import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
+import { Trend } from './Trend';
+
+const TestWrapper = ({ children }: { children: React.ReactNode }) => (
+  <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
+    {children}
+  </ThemeProvider>
+);
+
+describe('Trend Component', () => {
+  it('should render positive value', () => {
+    const { getByText } = render(
+      <TestWrapper>
+        <Trend value={5.5} />
+      </TestWrapper>,
+    );
+    expect(getByText('5.50%')).toBeTruthy();
+  });
+
+  it('should render negative value', () => {
+    const { getByText } = render(
+      <TestWrapper>
+        <Trend value={-3.2} />
+      </TestWrapper>,
+    );
+    expect(getByText('-3.20%')).toBeTruthy();
+  });
+
+  it('should render neutral when value is zero', () => {
+    const { getByText } = render(
+      <TestWrapper>
+        <Trend value={0} />
+      </TestWrapper>,
+    );
+    expect(getByText('0.00%')).toBeTruthy();
+  });
+
+  it('should render with sm size', () => {
+    const { getByText } = render(
+      <TestWrapper>
+        <Trend value={1.5} size='sm' />
+      </TestWrapper>,
+    );
+    expect(getByText('1.50%')).toBeTruthy();
+  });
+
+  it('should render with md size', () => {
+    const { getByText } = render(
+      <TestWrapper>
+        <Trend value={1.5} size='md' />
+      </TestWrapper>,
+    );
+    expect(getByText('1.50%')).toBeTruthy();
+  });
+
+  it('should render in disabled state', () => {
+    const { getByText } = render(
+      <TestWrapper>
+        <Trend value={5} disabled />
+      </TestWrapper>,
+    );
+    expect(getByText('5.00%')).toBeTruthy();
+  });
+
+  it('should pass testID to root element', () => {
+    const { getByTestId } = render(
+      <TestWrapper>
+        <Trend testID='trend-id' value={10} />
+      </TestWrapper>,
+    );
+    expect(getByTestId('trend-id')).toBeTruthy();
+  });
+
+  it('should format value to 2 decimal places', () => {
+    const { getByText } = render(
+      <TestWrapper>
+        <Trend value={1.123456} />
+      </TestWrapper>,
+    );
+    expect(getByText('1.12%')).toBeTruthy();
+  });
+
+  it('should render all variants side by side', () => {
+    const { getByText } = render(
+      <TestWrapper>
+        <Trend value={10} />
+        <Trend value={-10} />
+        <Trend value={0} />
+      </TestWrapper>,
+    );
+    expect(getByText('10.00%')).toBeTruthy();
+    expect(getByText('-10.00%')).toBeTruthy();
+    expect(getByText('0.00%')).toBeTruthy();
+  });
+
+  it('should expose positive accessibility label', () => {
+    const { getByLabelText } = render(
+      <TestWrapper>
+        <Trend value={5.5} />
+      </TestWrapper>,
+    );
+    expect(getByLabelText('Trending up by 5.50%')).toBeTruthy();
+  });
+
+  it('should expose negative accessibility label with absolute value', () => {
+    const { getByLabelText } = render(
+      <TestWrapper>
+        <Trend value={-3.2} />
+      </TestWrapper>,
+    );
+    expect(getByLabelText('Trending down by 3.20%')).toBeTruthy();
+  });
+
+  it('should expose neutral accessibility label', () => {
+    const { getByLabelText } = render(
+      <TestWrapper>
+        <Trend value={0} />
+      </TestWrapper>,
+    );
+    expect(getByLabelText('No change, 0.00%')).toBeTruthy();
+  });
+});

package/src/lib/Components/Trend/Trend.tsx

@@ -0,0 +1,118 @@
+import { useDisabledContext } from '@ledgerhq/lumen-utils-shared';
+import { StyleSheet } from 'react-native';
+import { useCommonTranslation } from '../../../i18n';
+import type { LumenTextStyle } from '../../../styles';
+import { useStyleSheet } from '../../../styles';
+import { Minus, TriangleDown, TriangleUp } from '../../Symbols';
+import type { IconSize } from '../Icon';
+import { Box, Text } from '../Utility';
+import type { TrendProps } from './types';
+
+type TrendVariant = 'positive' | 'negative' | 'neutral';
+
+function getVariant(value: number): TrendVariant {
+  if (value === 0) {
+    return 'neutral';
+  }
+  return value > 0 ? 'positive' : 'negative';
+}
+
+export function Trend({
+  value,
+  size = 'md',
+  lx = {},
+  disabled: disabledProp = false,
+  style,
+  ...props
+}: TrendProps) {
+  const variant = getVariant(value);
+
+  const disabled = useDisabledContext({
+    consumerName: 'Trend',
+    mergeWith: { disabled: disabledProp },
+  });
+  const { t } = useCommonTranslation();
+
+  const styles = useStyles({ size, variant, disabled });
+
+  const Icon = {
+    positive: TriangleUp,
+    negative: TriangleDown,
+    neutral: Minus,
+  }[variant];
+
+  const iconSize = (
+    {
+      md: 16,
+      sm: 12,
+    } as const
+  )[size] as IconSize;
+
+  const iconColor = (
+    {
+      positive: 'success',
+      negative: 'error',
+      neutral: 'muted',
+    } as const
+  )[variant] as LumenTextStyle['color'];
+
+  const absoluteFormattedValue = `${Math.abs(value).toFixed(2)}%`;
+  const formattedValue =
+    value < 0 ? `-${absoluteFormattedValue}` : absoluteFormattedValue;
+
+  return (
+    <Box
+      accessible
+      accessibilityLabel={t(`components.trend.${variant}AriaLabel`, {
+        value: absoluteFormattedValue,
+      })}
+      accessibilityState={{ disabled }}
+      lx={lx}
+      style={[styles.container, style]}
+      {...props}
+    >
+      <Icon size={iconSize} color={disabled ? 'disabled' : iconColor} />
+      <Text style={styles.text}>{formattedValue}</Text>
+    </Box>
+  );
+}
+
+const useStyles = ({
+  size,
+  variant,
+  disabled,
+}: {
+  size: NonNullable<TrendProps['size']>;
+  variant: TrendVariant;
+  disabled: boolean;
+}) =>
+  useStyleSheet(
+    (t) => {
+      const color = {
+        positive: t.colors.text.success,
+        negative: t.colors.text.error,
+        neutral: t.colors.text.muted,
+      }[variant];
+
+      const sizeMap = {
+        sm: t.typographies.body3,
+        md: t.typographies.body2,
+      }[size];
+
+      return {
+        container: {
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: t.spacings.s2,
+        },
+        text: StyleSheet.flatten([
+          {
+            ...sizeMap,
+            color,
+          },
+          disabled && { color: t.colors.text.disabled },
+        ]),
+      };
+    },
+    [size, variant, disabled],
+  );

package/src/lib/Components/Trend/index.ts

@@ -0,0 +1,2 @@
+export * from './Trend';
+export * from './types';

package/src/lib/Components/Trend/types.ts

@@ -0,0 +1,20 @@
+import type { BoxProps } from '../Utility';
+
+export type TrendProps = {
+  /**
+   * The value to display in the trend. This value affects the appearance of the component in terms of color and icon.
+   * @required
+   */
+  value: number;
+  /**
+   * The size of the trend component.
+   * @default md
+   */
+  size?: 'sm' | 'md';
+  /**
+   * When `true`, shows a muted appearance on the trend, regardless of value.
+   *
+   * @default false
+   */
+  disabled?: boolean;
+} & Omit<BoxProps, 'children'>;

package/src/lib/Components/index.ts

@@ -4,15 +4,15 @@ export * from './AmountInput';
 export * from './Avatar';
 export * from './Banner';
 export * from './BottomSheet';
-export * from './DotCount';
-export * from './DotIndicator';
 export * from './Button';
 export * from './Card';
 export * from './CardButton';
-export * from './ContentBanner';
 export * from './Checkbox';
+export * from './ContentBanner';
 export * from './Divider';
+export * from './DotCount';
 export * from './DotIcon';
+export * from './DotIndicator';
 export * from './DotSymbol';
 export * from './Icon';
 export * from './IconButton';
@@ -37,9 +37,10 @@ export * from './Subheader';
 export * from './Switch';
 export * from './TabBar';
 export * from './Tag';
-export * from './Utility';
 export * from './TextInput';
 export * from './ThemeProvider';
 export * from './Tile';
 export * from './TileButton';
 export * from './Tooltip';
+export * from './Trend';
+export * from './Utility';

package/src/lib/Symbols/Icons/Ar.tsx

@@ -36,11 +36,11 @@ export const Ar = createIcon(
   <Svg width={24} height={24} fill='currentColor' viewBox='0 0 17 16'>
     <Path
       fill='currentColor'
-      d='M8.197 4.967a.166.166 0 1 1-.333 0 .166.166 0 0 1 .333 0m-3.848 6.83a.167.167 0 0 1-.23-.053.167.167 0 0 1 .283-.176.167.167 0 0 1-.053.229m3.848-6.164a.167.167 0 0 1-.166.167.17.17 0 0 1-.168-.167.167.167 0 0 1 .333 0m-3.283 5.812a.166.166 0 1 1-.176-.282.166.166 0 0 1 .176.282M8.197 6.3a.167.167 0 0 1-.166.167.17.17 0 0 1-.167-.167.166.166 0 1 1 .333 0M5.48 11.093a.166.166 0 1 1-.176-.282.166.166 0 0 1 .176.282m2.717-4.126a.166.166 0 1 1-.333 0 .166.166 0 0 1 .333 0m-2.15 3.774a.166.166 0 1 1 .054-.229.166.166 0 0 1-.054.229m2.15-3.108a.167.167 0 0 1-.334 0 .167.167 0 0 1 .334 0M6.612 10.39a.166.166 0 0 1-.228-.054.167.167 0 0 1 .052-.23.167.167 0 1 1 .176.283m.567-.352a.166.166 0 1 1-.175-.283.167.167 0 0 1 .23.054.167.167 0 0 1-.055.229M8.196 8.3a.167.167 0 0 1-.165.167.167.167 0 1 1 0-.334c.092 0 .165.075.165.167m.731 1.777a.167.167 0 1 1-.288-.166.167.167 0 0 1 .288.166m.577.333a.167.167 0 1 1-.289-.165.167.167 0 0 1 .289.165m.578.334a.167.167 0 0 1-.229.061.167.167 0 0 1 .167-.288c.08.046.107.147.062.227m.577.333a.167.167 0 1 1-.288-.166.167.167 0 0 1 .288.166m.577.333a.166.166 0 1 1-.289-.165.166.166 0 0 1 .289.165m.578.334a.167.167 0 0 1-.229.061.166.166 0 1 1 .228-.061'
+      d='M8.197 4.967a.166.166 0 1 1-.333 0 .166.166 0 0 1 .333 0m-3.848 6.83a.167.167 0 0 1-.23-.053.167.167 0 0 1 .283-.176.167.167 0 0 1-.053.229m3.848-6.164a.167.167 0 0 1-.166.167.17.17 0 0 1-.167-.167.167.167 0 0 1 .333 0m-3.283 5.812a.166.166 0 1 1-.176-.283.166.166 0 0 1 .176.283M8.197 6.3a.167.167 0 1 1-.334 0 .167.167 0 0 1 .334 0M5.48 11.093a.166.166 0 1 1-.175-.282.166.166 0 0 1 .175.282m2.717-4.126a.166.166 0 1 1-.333 0 .166.166 0 0 1 .333 0m-2.15 3.774a.166.166 0 1 1-.177-.282.166.166 0 0 1 .177.282m2.15-3.108a.167.167 0 0 1-.334 0 .167.167 0 0 1 .334 0M6.612 10.39a.166.166 0 1 1-.175-.283.166.166 0 0 1 .175.283m.567-.352a.166.166 0 1 1-.176-.283.166.166 0 0 1 .176.283M8.197 8.3a.167.167 0 0 1-.166.167.167.167 0 1 1 0-.334c.092 0 .166.075.166.167m.73 1.777a.167.167 0 1 1-.288-.166.167.167 0 0 1 .288.166m.577.333a.167.167 0 1 1-.289-.165.167.167 0 0 1 .289.165m.578.334a.167.167 0 0 1-.228.061.166.166 0 1 1 .228-.061m.577.333a.167.167 0 1 1-.288-.166.167.167 0 0 1 .288.166m.577.333a.167.167 0 1 1-.289-.165.167.167 0 0 1 .29.165m.578.334a.167.167 0 0 1-.228.061.166.166 0 1 1 .228-.061'
     />
     <Path
       fill='currentColor'
-      d='m3.364 7-.291-.581a.65.65 0 0 0-.36.581zm9 0h.65a.65.65 0 0 0-.342-.572zM8.03 14.667l-.29.581a.65.65 0 0 0 .599-.009zM8.013 1.349l.46-.46-.46-.459-.46.46zm-1.843.924a.65.65 0 1 0 .92.919l-.46-.46zm2.766.919a.65.65 0 1 0 .92-.92l-.46.46zM.775 13.966l-.635-.14-.14.634.635.14zm1.77 1.056a.65.65 0 0 0 .28-1.27l-.14.635zm-.714-2.826a.65.65 0 1 0-1.27-.28l.635.14zm13.116 1.77.14.634.635-.14-.14-.634zm-2.05-.214a.65.65 0 0 0 .28 1.27l-.14-.635zm2.263-1.836a.65.65 0 0 0-1.27.28l.636-.14zm-11.796.417h.65V7h-1.3v5.333zm0-5.333.29.581 4.667-2.333-.29-.581-.291-.582L3.073 6.42zM8.03 4.667l-.308.572 4.334 2.333.308-.572.308-.572-4.333-2.334zM12.364 7h-.65v5.333h1.3V7zm0 5.333-.309-.572-4.333 2.333.308.573.309.572 4.333-2.333zM8.03 14.667l.291-.582-4.667-2.333-.29.581-.291.582 4.667 2.333zM12.364 7l-.327-.562L7.73 8.94l.326.562.327.562 4.308-2.502zM8.055 9.502h-.65v5.172h1.3V9.502zm0 0 .306-.573L3.67 6.426 3.364 7l-.306.574 4.691 2.502zM8.03 4.667l.65-.004-.017-3.317-.65.003-.65.004.017 3.317zm-1.4-1.935.46.46 1.382-1.383-.46-.46-.459-.46L6.17 2.274zM8.013 1.35l-.46.46 1.383 1.383.46-.46.46-.46L8.471.89zm-4.65 10.984-.346-.55-2.589 1.633.347.55.346.55 2.59-1.633zm-.678 2.054.14-.635-1.91-.421-.14.635-.14.634 1.91.422zm-1.91-.421.634.14.422-1.91-.635-.14-.635-.14-.421 1.91zm11.589-1.633-.348.55 2.584 1.632.347-.55.347-.549-2.583-1.632zm.673 2.054.14.635 1.91-.422-.14-.634-.14-.635-1.91.421zm1.91-.421.635-.14-.422-1.91-.634.14-.635.14.421 1.91z'
+      d='m3.364 7-.29-.581a.65.65 0 0 0-.36.581zm9 0h.65a.65.65 0 0 0-.342-.572zM8.03 14.667l-.29.581a.65.65 0 0 0 .599-.009zM8.013 1.349l.46-.46-.46-.459-.46.46zm-1.843.924a.65.65 0 1 0 .92.919l-.46-.46zm2.766.919a.65.65 0 1 0 .92-.92l-.46.46zM.775 13.966l-.635-.14-.14.634.635.14zm1.77 1.056a.65.65 0 1 0 .28-1.27l-.14.635zm-.714-2.826a.65.65 0 0 0-1.27-.28l.635.14zm13.116 1.77.14.634.635-.14-.14-.634zm-2.05-.214a.65.65 0 0 0 .28 1.27l-.14-.635zm2.263-1.836a.65.65 0 0 0-1.27.28l.636-.14zm-11.796.417h.65V7h-1.3v5.333zm0-5.333.29.581 4.667-2.333-.29-.581-.291-.582L3.073 6.42zM8.03 4.667l-.308.572 4.334 2.333.308-.572.308-.572-4.333-2.334zM12.364 7h-.65v5.333h1.3V7zm0 5.333-.308-.572-4.334 2.333.308.573.309.572 4.333-2.333zM8.03 14.667l.291-.582-4.667-2.333-.29.581-.29.582 4.666 2.333zM12.364 7l-.327-.562L7.73 8.94l.326.562.327.562 4.308-2.502zM8.055 9.502h-.65v5.172h1.3V9.502zm0 0 .306-.573L3.67 6.426 3.364 7l-.306.574 4.691 2.502zM8.03 4.667l.65-.004-.017-3.317-.65.003-.65.004.017 3.317zm-1.4-1.935.46.46 1.382-1.383-.46-.46-.459-.46L6.17 2.274zM8.013 1.35l-.46.46 1.383 1.383.46-.46.46-.46L8.471.89zm-4.65 10.984-.346-.55-2.589 1.633.347.55.346.55 2.59-1.633zm-.678 2.054.14-.635-1.91-.421-.14.635-.14.634 1.91.422zm-1.91-.421.635.14.42-1.91-.634-.14-.635-.14-.421 1.91zm11.589-1.633-.348.55 2.584 1.632.347-.55.347-.549-2.583-1.632zm.673 2.054.14.635 1.91-.422-.14-.634-.14-.635-1.91.421zm1.91-.421.635-.14-.422-1.91-.634.14-.635.14.421 1.91z'
     />
   </Svg>,
 );

package/src/lib/Symbols/Icons/ArrowLeft.tsx

@@ -39,7 +39,7 @@ export const ArrowLeft = createIcon(
       strokeLinecap='round'
       strokeLinejoin='round'
       strokeWidth={1.3}
-      d='M3.333 8h9.334M3.333 8l3.334-3.333M3.333 8l3.334 3.333'
+      d='M3.333 8h9.334m-6 3.333L3.333 8l3.334-3.333'
     />
   </Svg>,
 );

package/src/lib/Symbols/Icons/ArrowRight.tsx

@@ -39,7 +39,7 @@ export const ArrowRight = createIcon(
       strokeLinecap='round'
       strokeLinejoin='round'
       strokeWidth={1.3}
-      d='M12.667 8H3.333m9.334 0-3.334 3.333M12.667 8 9.333 4.667'
+      d='M12.667 8H3.333m6-3.333L12.667 8l-3.334 3.333'
     />
   </Svg>,
 );