@ledgerhq/lumen-ui-rnative 0.1.29 → 0.1.31

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>,
 );

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

@@ -39,7 +39,7 @@ export const BasketPutIn = createIcon(
       strokeLinecap='round'
       strokeLinejoin='round'
       strokeWidth={1.3}
-      d='M5.5 12h6.667M5.5 12a1.167 1.167 0 1 0 0 2.333A1.167 1.167 0 0 0 5.5 12m6.667 0a1.167 1.167 0 1 0 0 2.333 1.167 1.167 0 0 0 0-2.333M3.762 4.667h1.571M8.667 4v3.333m0 0L7.333 6m1.334 1.333L10 6m-4.667 6-2-9.333H2m10 2h1.333a.667.667 0 0 1 .644.838l-1.066 4a.67.67 0 0 1-.644.495H4.905'
+      d='M5.5 12h6.667M5.5 12a1.167 1.167 0 1 0 0 2.333A1.167 1.167 0 0 0 5.5 12m6.667 0a1.167 1.167 0 1 0 0 2.333 1.167 1.167 0 0 0 0-2.333M3.762 4.667h1.571M8.667 4v3.333M10 6 8.667 7.333 7.333 6m-2 6-2-9.333H2m10 2h1.333a.667.667 0 0 1 .644.838l-1.066 4a.67.67 0 0 1-.644.495H4.905'
     />
   </Svg>,
 );

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

@@ -39,7 +39,7 @@ export const Clip = createIcon(
       strokeLinecap='round'
       strokeLinejoin='round'
       strokeWidth={1.3}
-      d='M8.967 6.253 5.28 9.94a1.083 1.083 0 0 0 0 1.547h-.007c.427.427 1.12.427 1.547 0l5.747-5.75a2.197 2.197 0 0 0 0-3.1l-.007-.007a2.19 2.19 0 0 0-3.1-.007h-.007L3.7 8.369a3.276 3.276 0 0 0-.007 4.639 3.283 3.283 0 0 0 4.64 0v-.007l4.2-4.2'
+      d='M8.967 6.253 5.28 9.94a1.083 1.083 0 0 0 0 1.547h-.007c.427.427 1.12.427 1.547 0l5.747-5.75a2.197 2.197 0 0 0 0-3.1l-.007-.007a2.19 2.19 0 0 0-3.1-.007h-.007L3.7 8.369a3.277 3.277 0 0 0-.007 4.639 3.283 3.283 0 0 0 4.64 0v-.007l4.2-4.2'
     />
   </Svg>,
 );

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

@@ -37,16 +37,8 @@ export const ClockFill = createIcon(
     <Path
       fill='currentColor'
       fillRule='evenodd'
-      d='M1.5 8c0-3.596 2.91-6.5 6.5-6.5a6.5 6.5 0 1 1 0 13c-3.596 0-6.5-2.91-6.5-6.5'
+      d='M8 1.5a6.5 6.5 0 1 1 0 13c-3.596 0-6.5-2.91-6.5-6.5 0-3.596 2.91-6.5 6.5-6.5m0 2.116a.65.65 0 0 0-.65.65V8c0 .359.291.65.65.65h3.1a.65.65 0 0 0 0-1.3H8.65V4.267a.65.65 0 0 0-.65-.65'
       clipRule='evenodd'
     />
-    <Path fill='currentColor' d='M11.1 8H8zM8 8V4.267z' />
-    <Path
-      stroke='#fff'
-      strokeLinecap='round'
-      strokeLinejoin='round'
-      strokeWidth={1.3}
-      d='M11.1 8H8V4.267'
-    />
   </Svg>,
 );

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

@@ -39,7 +39,7 @@ export const CloudDownload = createIcon(
       strokeLinecap='round'
       strokeLinejoin='round'
       strokeWidth={1.3}
-      d='M8 10.667V14m0 0-1.333-1.333M8 14l1.333-1.333m-4.4-1.334H4.66A3.33 3.33 0 0 1 1.327 8a3.32 3.32 0 0 1 2.879-3.293V4.7a3.98 3.98 0 0 1 3.78-2.713c2.207 0 4 1.786 4 4a2.67 2.67 0 0 1 2.667 2.666c0 1.467-1.2 2.667-2.667 2.667h-.94'
+      d='M8 10.667V14m1.333-1.333L8 14l-1.333-1.333m-1.734-1.334H4.66A3.33 3.33 0 0 1 1.327 8a3.32 3.32 0 0 1 2.879-3.293V4.7a3.98 3.98 0 0 1 3.78-2.713c2.207 0 4 1.786 4 4a2.67 2.67 0 0 1 2.667 2.666c0 1.467-1.2 2.667-2.667 2.667h-.94'
     />
   </Svg>,
 );

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

@@ -39,7 +39,7 @@ export const CloudUpload = createIcon(
       strokeLinecap='round'
       strokeLinejoin='round'
       strokeWidth={1.3}
-      d='M4.933 11.333H4.66A3.33 3.33 0 0 1 1.327 8a3.32 3.32 0 0 1 2.879-3.293V4.7a3.98 3.98 0 0 1 3.78-2.713c2.207 0 4 1.786 4 4a2.67 2.67 0 0 1 2.667 2.666c0 1.467-1.2 2.667-2.667 2.667h-.94M9.333 12 8 10.667m0 0L6.667 12M8 10.667V14'
+      d='M4.933 11.333H4.66A3.33 3.33 0 0 1 1.327 8a3.32 3.32 0 0 1 2.879-3.293V4.7a3.98 3.98 0 0 1 3.78-2.713c2.207 0 4 1.786 4 4a2.67 2.67 0 0 1 2.667 2.666c0 1.467-1.2 2.667-2.667 2.667h-.94m-4.38.68L8 10.667 9.333 12M8 10.667V14'
     />
   </Svg>,
 );

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

@@ -39,7 +39,7 @@ export const CoinsAddPlus = createIcon(
       strokeLinecap='round'
       strokeLinejoin='round'
       strokeWidth={1.3}
-      d='M5.333 12C3.493 12 2 11.4 2 10.667V5.333m0 0c0-.353.351-.692.976-.942S4.45 4 5.333 4s1.732.14 2.357.39.977.59.977.943M2 5.333c0 .354.351.693.976.943s1.473.39 2.357.39 1.732-.14 2.357-.39.977-.589.977-.943M7.333 10c0 .733 1.487 1.333 3.334 1.333 1.84 0 3.333-.6 3.333-1.333m-6.667 0v2.667C7.333 13.4 8.82 14 10.667 14c1.84 0 3.333-.6 3.333-1.333V10m-6.667 0c0-.74 1.487-1.333 3.334-1.333C12.507 8.667 14 9.26 14 10M8.667 5.333V7m2.666-3.667H14m-1.333 1.334V2M5.333 9.333C3.493 9.333 2 8.733 2 8'
+      d='M8.667 7V5.333c0-.353-.352-.692-.977-.942S6.217 4 5.333 4s-1.732.14-2.357.39S2 4.98 2 5.334v5.334C2 11.4 3.493 12 5.333 12M2 5.333c0 .354.351.693.976.943s1.473.39 2.357.39 1.732-.14 2.357-.39.977-.589.977-.943M7.333 10c0 .733 1.487 1.333 3.334 1.333 1.84 0 3.333-.6 3.333-1.333m-6.667 0v2.667C7.333 13.4 8.82 14 10.667 14c1.84 0 3.333-.6 3.333-1.333V10m-6.667 0c0-.74 1.487-1.333 3.334-1.333C12.507 8.667 14 9.26 14 10m-2.667-6.667H14m-1.333 1.334V2M5.333 9.333C3.493 9.333 2 8.733 2 8'
     />
   </Svg>,
 );

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

@@ -39,7 +39,7 @@ export const CoinsCheck = createIcon(
       strokeLinecap='round'
       strokeLinejoin='round'
       strokeWidth={1.3}
-      d='M5.333 12C3.493 12 2 11.4 2 10.667V5.333m0 0c0-.353.351-.692.976-.942S4.45 4 5.333 4s1.732.14 2.357.39.977.59.977.943M2 5.333c0 .354.351.693.976.943s1.473.39 2.357.39 1.732-.14 2.357-.39.977-.59.977-.943M7.333 10c0 .733 1.487 1.333 3.334 1.333 1.84 0 3.333-.6 3.333-1.333m-6.667 0v2.667C7.333 13.4 8.82 14 10.667 14c1.84 0 3.333-.6 3.333-1.333V10m-6.667 0c0-.74 1.487-1.333 3.334-1.333C12.507 8.667 14 9.26 14 10M8.667 5.333V7M5.333 9.333C3.493 9.333 2 8.733 2 8m12.667-5.375-2 2-1.2-1.2'
+      d='M8.667 7V5.333c0-.353-.352-.692-.977-.942S6.217 4 5.333 4s-1.732.14-2.357.39S2 4.98 2 5.334v5.334C2 11.4 3.493 12 5.333 12M2 5.333c0 .354.351.693.976.943s1.473.39 2.357.39 1.732-.14 2.357-.39.977-.589.977-.943M7.333 10c0 .733 1.487 1.333 3.334 1.333 1.84 0 3.333-.6 3.333-1.333m-6.667 0v2.667C7.333 13.4 8.82 14 10.667 14c1.84 0 3.333-.6 3.333-1.333V10m-6.667 0c0-.74 1.487-1.333 3.334-1.333C12.507 8.667 14 9.26 14 10m-8.667-.667C3.493 9.333 2 8.733 2 8m12.667-5.375-2 2-1.2-1.2'
     />
   </Svg>,
 );

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

@@ -39,7 +39,7 @@ export const CoinsCross = createIcon(
       strokeLinecap='round'
       strokeLinejoin='round'
       strokeWidth={1.3}
-      d='M2 5.333c0 .734 1.487 1.334 3.333 1.334M2 5.333v5.334C2 11.4 3.493 12 5.333 12M2 5.333c0-.353.351-.692.976-.942S4.45 4 5.333 4s1.732.14 2.357.39.977.59.977.943M2 5.333c0 .354.351.693.976.943s1.473.39 2.357.39m0 0c.884 0 1.732-.14 2.357-.39s.977-.59.977-.943m0 0V7m3-2.667 2-2m0 2-2-2M2 8c0 .733 1.487 1.327 3.333 1.327m-.006.006c-1.847 0-3.334-.6-3.334-1.333m5.34 2c0 .733 1.487 1.333 3.334 1.333 1.84 0 3.333-.6 3.333-1.333v2.667C14 13.4 12.506 14 10.666 14c-1.847 0-3.334-.6-3.334-1.333zm6.665 0c0-.74-1.493-1.333-3.333-1.333S7.33 9.26 7.33 10c0 .733 1.487 1.333 3.334 1.333 1.84 0 3.333-.6 3.333-1.333'
+      d='M2 5.333c0 .734 1.487 1.334 3.333 1.334m3.334-1.334c0-.353-.352-.692-.977-.942S6.217 4 5.333 4s-1.732.14-2.357.39S2 4.98 2 5.334v5.334C2 11.4 3.493 12 5.333 12M2 5.333c0 .354.351.693.976.943s1.473.39 2.357.39m0 0c.884 0 1.732-.14 2.357-.39s.977-.589.977-.943m0 0V7m3-2.667 2-2m0 2-2-2M2 8c0 .733 1.487 1.327 3.333 1.327m-.006.006c-1.847 0-3.334-.6-3.334-1.333m5.34 2c0 .733 1.487 1.333 3.334 1.333 1.84 0 3.333-.6 3.333-1.333v2.667C14 13.4 12.506 14 10.666 14c-1.847 0-3.334-.6-3.334-1.333zm6.665 0c0-.74-1.493-1.333-3.333-1.333S7.33 9.26 7.33 10c0 .733 1.487 1.333 3.334 1.333 1.84 0 3.333-.6 3.333-1.333'
     />
   </Svg>,
 );

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

@@ -39,7 +39,7 @@ export const ColorPalette = createIcon(
       strokeLinecap='round'
       strokeLinejoin='round'
       strokeWidth={1.3}
-      d='M11.148 5.285a1.334 1.334 0 0 1 1.569.594l1.103 1.885a1.334 1.334 0 0 1-.49 1.832l-6.705 3.822a4.46 4.46 0 0 1-2.21.585m-.083 0a2.334 2.334 0 0 0 2.334-2.335V3.331c0-.736-.597-1.333-1.334-1.333h-2c-.737 0-1.334.597-1.334 1.333v8.337a2.334 2.334 0 0 0 2.334 2.335m0 0a3.13 3.13 0 0 0 2.703-1.55l3.969-6.786a1.334 1.334 0 0 0-.491-1.832L8.588 2.738a1.334 1.334 0 0 0-1.812.485l-.11.187M4.5 11.668a.167.167 0 1 1-.334 0 .167.167 0 0 1 .334 0'
+      d='M11.148 5.285a1.334 1.334 0 0 1 1.569.594l1.103 1.885a1.334 1.334 0 0 1-.49 1.832l-6.705 3.822a4.46 4.46 0 0 1-2.21.585m-.083 0a2.334 2.334 0 0 0 2.334-2.335V3.331c0-.736-.597-1.333-1.334-1.333h-2c-.737 0-1.334.597-1.334 1.333v8.337a2.334 2.334 0 0 0 2.334 2.335m0 0a3.13 3.13 0 0 0 2.703-1.55l3.969-6.786a1.334 1.334 0 0 0-.491-1.832L8.588 2.738a1.334 1.334 0 0 0-1.812.485l-.11.188M4.5 11.669a.167.167 0 1 1-.334-.001.167.167 0 0 1 .334 0'
     />
   </Svg>,
 );

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

@@ -36,7 +36,7 @@ export const CryptoBitcoinCoin = createIcon(
   <Svg width={24} height={24} fill='currentColor' viewBox='0 0 16 16'>
     <Path
       fill='currentColor'
-      d='M14.65 8a.65.65 0 1 0-1.3 0h1.3M8 2.65a.65.65 0 0 0 0-1.3v1.3M11.033.683a.65.65 0 1 0 0 1.3v-1.3M14.01 4.96a.65.65 0 1 0 1.3 0h-1.3m-2.977-2.277a.65.65 0 1 0 0 1.3v-1.3m.977 2.277a.65.65 0 1 0 1.3 0h-1.3M6.667 10h-.65c0 .359.29.65.65.65zm.65-4a.65.65 0 0 0-1.3 0h1.3m1.373-.667a.65.65 0 0 0-1.3 0h1.3M7.39 6a.65.65 0 0 0 1.3 0h-1.3m1.3 4a.65.65 0 0 0-1.3 0h1.3m-1.3.667a.65.65 0 1 0 1.3 0h-1.3M6.667 8v-.65a.65.65 0 0 0-.65.65zM6.66 6v-.65a.65.65 0 0 0-.65.65zm0 2h-.65c0 .359.291.65.65.65zM14 8h-.65A5.35 5.35 0 0 1 8 13.35v1.3A6.65 6.65 0 0 0 14.65 8zm-6 6v-.65A5.35 5.35 0 0 1 2.65 8h-1.3A6.65 6.65 0 0 0 8 14.65zM2 8h.65A5.35 5.35 0 0 1 8 2.65v-1.3A6.65 6.65 0 0 0 1.35 8zm9.033-6.667v.65A2.976 2.976 0 0 1 14.01 4.96h1.3A4.276 4.276 0 0 0 11.033.683zm0 2v.65c.541 0 .977.436.977.977h1.3a2.275 2.275 0 0 0-2.277-2.277zM6.667 10h.65V6h-1.3v4zM8.04 5.333h-.65V6h1.3v-.667zm0 4.667h-.65v.667h1.3V10zM6.667 8v.65H9v-1.3H6.667zM9 8v.65c.19 0 .35.158.35.35h1.3c0-.915-.747-1.65-1.65-1.65zm1 1h-.65c0 .188-.162.35-.35.35v1.3c.906 0 1.65-.744 1.65-1.65zm-1 1v-.65H6.667v1.3H9zm-2.333 0h.65V8h-1.3v2zM6.66 6v.65h2.1v-1.3h-2.1zm2.1 0v.65c.19 0 .35.158.35.35h1.3c0-.915-.747-1.65-1.65-1.65zm1 1h-.65c0 .188-.162.35-.35.35v1.3c.906 0 1.65-.744 1.65-1.65zm-1 1v-.65h-2.1v1.3h2.1zm-2.1 0h.65V6h-1.3v2z'
+      d='M14.65 8a.65.65 0 1 0-1.3 0h1.3M8 2.65a.65.65 0 0 0 0-1.3v1.3M11.033.683a.65.65 0 1 0 0 1.3v-1.3M14.01 4.96a.65.65 0 1 0 1.3 0h-1.3m-2.977-2.277a.65.65 0 1 0 0 1.3v-1.3m.977 2.277a.65.65 0 1 0 1.3 0h-1.3M6.667 10h-.65c0 .359.29.65.65.65zm.65-4a.65.65 0 0 0-1.3 0h1.3m1.373-.667a.65.65 0 0 0-1.3 0h1.3M7.39 6a.65.65 0 0 0 1.3 0h-1.3m1.3 4a.65.65 0 0 0-1.3 0h1.3m-1.3.667a.65.65 0 1 0 1.3 0h-1.3M6.667 8v-.65a.65.65 0 0 0-.65.65zM6.66 6v-.65a.65.65 0 0 0-.65.65zm0 2h-.65c0 .359.291.65.65.65zM14 8h-.65A5.35 5.35 0 0 1 8 13.35v1.3A6.65 6.65 0 0 0 14.65 8zm-6 6v-.65A5.35 5.35 0 0 1 2.65 8h-1.3A6.65 6.65 0 0 0 8 14.65zM2 8h.65A5.35 5.35 0 0 1 8 2.65v-1.3A6.65 6.65 0 0 0 1.35 8zm9.033-6.667v.65A2.976 2.976 0 0 1 14.01 4.96h1.3A4.276 4.276 0 0 0 11.033.683zm0 2v.65c.541 0 .977.436.977.977h1.3a2.275 2.275 0 0 0-2.277-2.277zM6.667 10h.65V6h-1.3v4zM8.04 5.333h-.65V6h1.3v-.667zm0 4.667h-.65v.667h1.3V10zM6.667 8v.65H9v-1.3H6.667zM9 8v.65c.19 0 .35.159.35.35h1.3c0-.915-.747-1.65-1.65-1.65zm1 1h-.65c0 .188-.162.35-.35.35v1.3c.906 0 1.65-.744 1.65-1.65zm-1 1v-.65H6.667v1.3H9zm-2.333 0h.65V8h-1.3v2zM6.66 6v.65h2.1v-1.3h-2.1zm2.1 0v.65c.19 0 .35.159.35.35h1.3c0-.915-.747-1.65-1.65-1.65zm1 1h-.65c0 .188-.162.35-.35.35v1.3c.906 0 1.65-.744 1.65-1.65zm-1 1v-.65h-2.1v1.3h2.1zm-2.1 0h.65V6h-1.3v2z'
     />
   </Svg>,
 );

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

@@ -39,7 +39,7 @@ export const Csv = createIcon(
       strokeLinecap='round'
       strokeLinejoin='round'
       strokeWidth={1.3}
-      d='M10.333 14h1a2 2 0 0 0 2-2V5.673a2 2 0 0 0-.585-1.414l-1.673-1.673A2 2 0 0 0 9.66 2H4.667a2 2 0 0 0-2 2v4.667m10.666-3H11a1.333 1.333 0 0 1-1.333-1.334V2M8 6v3.333m0 0L9.333 8M8 9.333 6.667 8'
+      d='M10.333 14h1a2 2 0 0 0 2-2V5.673a2 2 0 0 0-.585-1.414l-1.673-1.673A2 2 0 0 0 9.66 2H4.667a2 2 0 0 0-2 2v4.667m10.666-3H11a1.333 1.333 0 0 1-1.333-1.334V2M8 6v3.333M6.667 8 8 9.333 9.333 8'
     />
     <Path
       fill='currentColor'

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

@@ -36,7 +36,7 @@ export const Discord = createIcon(
   <Svg width={24} height={24} fill='currentColor' viewBox='0 0 16 16'>
     <Path
       fill='currentColor'
-      d='M12.628 4.115c-.876-.37-1.8-.633-2.75-.782q-.195.323-.353.662c-1.012-.141-2.041-.141-3.053 0a7 7 0 0 0-.352-.662c-.95.15-1.876.413-2.753.784-1.741 2.379-2.213 4.699-1.977 6.985 1.02.696 2.16 1.225 3.374 1.565q.41-.511.722-1.076a7.4 7.4 0 0 1-1.138-.502q.144-.097.28-.194A8.5 8.5 0 0 0 8 11.591a8.5 8.5 0 0 0 3.373-.696q.136.104.279.194a7.5 7.5 0 0 1-1.14.502q.312.567.722 1.076a11.4 11.4 0 0 0 3.376-1.564c.277-2.652-.473-4.95-1.982-6.988M5.785 9.696c-.657 0-1.2-.551-1.2-1.23 0-.677.524-1.233 1.198-1.233s1.213.556 1.202 1.234-.53 1.229-1.2 1.229m4.43 0c-.659 0-1.2-.551-1.2-1.23 0-.677.524-1.233 1.2-1.233s1.21.556 1.199 1.234c-.012.678-.529 1.229-1.2 1.229'
+      d='M12.628 4.115c-.876-.37-1.8-.633-2.75-.782q-.195.323-.353.662c-1.012-.14-2.041-.14-3.053 0a7 7 0 0 0-.352-.662c-.95.15-1.876.413-2.753.784-1.741 2.379-2.213 4.699-1.977 6.985 1.02.696 2.16 1.225 3.374 1.565q.41-.511.722-1.076a7.5 7.5 0 0 1-1.138-.502q.144-.097.28-.194A8.5 8.5 0 0 0 8 11.591a8.5 8.5 0 0 0 3.373-.696q.136.104.279.194a7.5 7.5 0 0 1-1.14.503q.312.565.722 1.075a11.4 11.4 0 0 0 3.376-1.564c.277-2.652-.473-4.95-1.982-6.988M5.785 9.696c-.657 0-1.2-.551-1.2-1.23 0-.677.524-1.233 1.198-1.233s1.213.556 1.202 1.234-.53 1.229-1.2 1.229m4.43 0c-.659 0-1.2-.551-1.2-1.23 0-.677.524-1.233 1.2-1.233s1.21.556 1.199 1.234c-.012.678-.529 1.229-1.2 1.229'
     />
   </Svg>,
 );