@ledgerhq/lumen-ui-rnative 0.1.46 → 0.1.48

package/src/lib/Animations/Pulse/Pulse.stories.tsx

@@ -18,7 +18,8 @@ const usdFormatter = (value: number): FormattedValue => {
 };
 
 const meta: Meta<typeof Pulse> = {
-  title: 'Animations/Pulse',
+  id: 'rnative-pulse',
+  title: 'Primitives/Pulse',
   component: Pulse,
   parameters: {
     layout: 'centered',

package/src/lib/Animations/Spin/Spin.mdx

@@ -7,7 +7,7 @@ import {
 } from '../../../../.storybook/components';
 import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 
-<Meta title='Animations/Spin' of={SpinStories} />
+<Meta title='Primitives/Spin' of={SpinStories} />
 
 # Spin
 

package/src/lib/Animations/Spin/Spin.stories.tsx

@@ -5,7 +5,8 @@ import { Box, Text } from '../../Components/Utility';
 import { Spin } from './Spin';
 
 const meta: Meta<typeof Spin> = {
-  title: 'Animations/Spin',
+  id: 'rnative-spin',
+  title: 'Primitives/Spin',
   component: Spin,
   parameters: {
     layout: 'centered',

package/src/lib/Components/AddressInput/AddressInput.mdx

@@ -5,12 +5,12 @@ import { CustomTabs, Tab } from '../../../../.storybook/components';
 import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
 import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 
-<Meta title='Input/AddressInput' of={AddressInputStories} />
+<Meta title='Core/AddressInput' of={AddressInputStories} />
 
 # AddressInput
 
 <CustomTabs>
-  <Tab label="Overview" path='Input/AddressInput'>
+  <Tab label="Overview" path='Core/AddressInput'>
 
 ## Introduction
 

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

@@ -6,7 +6,8 @@ import type { AddressInputProps } from './types';
 
 const meta: Meta<typeof AddressInput> = {
   component: AddressInput,
-  title: 'Input/AddressInput',
+  id: 'rnative-addressinput',
+  title: 'Core/AddressInput',
   parameters: {
     docs: {
       source: {

package/src/lib/Components/AmountDisplay/AmountDisplay.mdx

@@ -10,7 +10,7 @@ import {
 } from '../../../../.storybook/components';
 import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 
-<Meta title='Communication/AmountDisplay' of={AmountDisplayStories} />
+<Meta title='Core/AmountDisplay' of={AmountDisplayStories} />
 
 # AmountDisplay
 

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

@@ -44,7 +44,8 @@ const btcFormatter = (value: number): FormattedValue => {
 
 const meta: Meta<typeof AmountDisplay> = {
   component: AmountDisplay,
-  title: 'Communication/AmountDisplay',
+  id: 'rnative-amountdisplay',
+  title: 'Core/AmountDisplay',
   args: {
     formatter: eurFormatter,
     hidden: false,

package/src/lib/Components/AmountDisplay/AmountDisplay.tsx

@@ -255,8 +255,7 @@ DigitStripList.displayName = 'DigitStripList';
  * This component uses a formatter function pattern that gives you full control over how amounts are displayed,
  * including currency position, decimal separators, and precision. Use the `hidden` prop for privacy features.
  *
- * @see {@link https://ldls.vercel.app/?path=/docs/communication-amountdisplay-overview--docs Storybook}
- * @see {@link https://ldls.vercel.app/?path=/docs/communication-amountdisplay-implementation--docs#dos-and-donts Guidelines}
+ * @see {@link https://ldls-react-native.vercel.app/?path=/docs/rnative-amountdisplay--docs Guidelines}
  *
  * @example
  * ```tsx

package/src/lib/Components/AmountInput/AmountInput.mdx

@@ -5,7 +5,7 @@ import { CustomTabs, Tab } from '../../../../.storybook/components';
 import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
 import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 
-<Meta title='Input/AmountInput' of={AmountInputStories} />
+<Meta title='Core/AmountInput' of={AmountInputStories} />
 
 # AmountInput
 

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

@@ -17,7 +17,8 @@ const SIZES: { size: AmountInputSize; value: string }[] = [
 
 const meta: Meta<typeof AmountInput> = {
   component: AmountInput,
-  title: 'Input/AmountInput',
+  id: 'rnative-amountinput',
+  title: 'Core/AmountInput',
   parameters: {
     docs: {
       source: {
@@ -200,6 +201,20 @@ export const WithoutThousandsSeparator: Story = {
   },
 };
 
+export const DecimalSeparatorComma: Story = {
+  render: (args) => <AmountInputStory {...args} />,
+  args: {
+    value: '1234.5',
+    currencyText: '€',
+    currencyPosition: 'right',
+    allowDecimals: true,
+    thousandsSeparator: true,
+    decimalSeparator: ',',
+    isInvalid: false,
+    editable: true,
+  },
+};
+
 export const ErrorState: Story = {
   render: (args) => <AmountInputStory {...args} />,
   args: {

package/src/lib/Components/AmountInput/AmountInput.tsx

@@ -42,6 +42,7 @@ export const AmountInput = ({
   maxDecimalLength = 9,
   allowDecimals = true,
   thousandsSeparator = true,
+  decimalSeparator = '.',
   value,
   onChangeText,
   isInvalid = false,
@@ -64,6 +65,7 @@ export const AmountInput = ({
       thousandsSeparator,
       maxIntegerLength,
       maxDecimalLength,
+      decimalSeparator,
     },
   });
 

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

@@ -69,6 +69,14 @@ export type AmountInputProps = Omit<
    * @default true
    */
   thousandsSeparator?: boolean;
+  /**
+   * Character used to display the decimal separator (e.g. `1 234,5` vs `1 234.5`).
+   * Typing always accepts both `,` and `.` regardless of this value, so it stays
+   * compatible with any locale keyboard. The value returned by `onChangeText`
+   * uses this separator.
+   * @default '.'
+   */
+  decimalSeparator?: '.' | ',';
   /**
    * Mark input as invalid (e.g. for error display)
    * @default false

package/src/lib/Components/AmountInput/useAmountInputFormatting/useAmountInputFormatting.test.ts

@@ -7,6 +7,7 @@ const defaultFormatOptions = {
   thousandsSeparator: true,
   maxIntegerLength: 9,
   maxDecimalLength: 9,
+  decimalSeparator: '.' as const,
 };
 
 describe('useAmountInputFormatting', () => {
@@ -59,4 +60,23 @@ describe('useAmountInputFormatting', () => {
 
     expect(onChangeText).toHaveBeenCalledWith('1 000');
   });
+
+  it('displays and emits the configured decimal separator', () => {
+    const onChangeText = jest.fn();
+    const { result } = renderHook(() =>
+      useAmountInputFormatting({
+        value: '1234.5',
+        onChangeText,
+        formatOptions: { ...defaultFormatOptions, decimalSeparator: ',' },
+      }),
+    );
+
+    expect(result.current.formattedValue).toBe('1 234,5');
+
+    act(() => {
+      result.current.handleChangeText('12,5');
+    });
+
+    expect(onChangeText).toHaveBeenCalledWith('12,5');
+  });
 });

package/src/lib/Components/AmountInput/useAmountInputFormatting/useAmountInputFormatting.ts

@@ -6,6 +6,7 @@ type FormatOptions = {
   thousandsSeparator: boolean;
   maxIntegerLength: number;
   maxDecimalLength: number;
+  decimalSeparator: '.' | ',';
 };
 
 type UseAmountInputFormattingArgs = {
@@ -32,6 +33,7 @@ export const useAmountInputFormatting = ({
       formatOptions.thousandsSeparator,
       formatOptions.maxIntegerLength,
       formatOptions.maxDecimalLength,
+      formatOptions.decimalSeparator,
     ],
   );
 

package/src/lib/Components/Avatar/Avatar.mdx

@@ -6,7 +6,7 @@ import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/
 import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 import { Box } from '../Utility';
 
-<Meta title='Communication/Avatar' of={AvatarStories} />
+<Meta title='Core/Avatar' of={AvatarStories} />
 
 # Avatar
 

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

@@ -6,7 +6,8 @@ import { Avatar } from './Avatar';
 
 const meta = {
   component: Avatar,
-  title: 'Communication/Avatar',
+  id: 'rnative-avatar',
+  title: 'Core/Avatar',
   parameters: {
     docs: {
       source: {

package/src/lib/Components/Avatar/Avatar.tsx

@@ -74,10 +74,10 @@ const useStyles = ({
  * When the image fails to load or no src is provided, displays a User icon fallback.
  * Supports an optional notification indicator.
  *
- * @see {@link https://lumen-ldls.vercel.app/?path=/docs/react-native_communication-avatar--docs Storybook}
+ * @see {@link https://ldls-react-native.vercel.app/?path=/docs/rnative-avatar--docs Storybook}
  *
  * @example
- * import { Avatar } from '@ledgerhq/lumen-ui-react';
+ * import { Avatar } from '@ledgerhq/lumen-ui-rnative';
  *
  * <Avatar src="https://example.com/photo.jpg" size="md" />
  *

package/src/lib/Components/Banner/Banner.mdx

@@ -6,7 +6,7 @@ import { CustomTabs, Tab } from '../../../../.storybook/components';
 import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
 import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 
-<Meta title='Components/Banner' of={BannerStories} />
+<Meta title='Core/Banner' of={BannerStories} />
 
 # Banner
 

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

@@ -6,7 +6,8 @@ import { Banner } from './Banner';
 
 const meta: Meta<typeof Banner> = {
   component: Banner,
-  title: 'Communication/Banner',
+  id: 'rnative-banner',
+  title: 'Core/Banner',
   parameters: {
     docs: {
       source: {

package/src/lib/Components/Banner/Banner.tsx

@@ -102,8 +102,7 @@ const iconsMap: Record<Appearance, ComponentType<IconProps>> = {
  *
  * The appearance determines the color scheme and icon used.
  *
- * @see {@link https://ldls.vercel.app/?path=/docs/communication-banner-overview--docs Storybook}
- * @see {@link https://ldls.vercel.app/?path=/docs/communication-banner-implementation--docs#dos-and-donts Guidelines}
+ * @see {@link https://ldls-react-native.vercel.app/?path=/docs/rnative-banner--docs Guidelines}
  *
  * @warning The `lx` prop should only be used for layout adjustments like margins or positioning.
  * Do not use it to modify the banner's core appearance (colors, padding, etc). Use the `appearance` prop instead.

package/src/lib/Components/BottomSheet/BottomSheet.mdx

@@ -6,7 +6,7 @@ import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/
 import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 import { Box } from '../Utility';
 
-<Meta title="Components/BottomSheet" of={BottomSheetStories} />
+<Meta title='Core/BottomSheet' of={BottomSheetStories} />
 
 # BottomSheet
 

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

@@ -19,7 +19,8 @@ import { useBottomSheetRef } from './useBottomSheetRef';
 const meta = {
   component: BottomSheet,
   subcomponents: { BottomSheetHeader },
-  title: 'Containment/BottomSheet',
+  id: 'rnative-bottomsheet',
+  title: 'Core/BottomSheet',
   parameters: {
     docs: {
       source: {

package/src/lib/Components/Button/Button.mdx

@@ -6,7 +6,7 @@ import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/
 import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 import { Box } from '../Utility';
 
-<Meta title='Action/Button' of={ButtonStories} />
+<Meta title='Core/Button' of={ButtonStories} />
 
 # Button
 
@@ -53,7 +53,7 @@ Buttons' contents can be of two types:
 - text (default)
 - icon-text
 
-> Note: For `icon-only` buttons, use the [IconButton](https://ldls.vercel.app/?path=/docs/action-iconbutton--docs) component instead. It's specifically designed for icon-only interactions with proper accessibility support.
+> Note: For `icon-only` buttons, use the [IconButton](https://ldls-react-native.vercel.app/?path=/docs/rnative-iconbutton--docs) component instead. It's specifically designed for icon-only interactions with proper accessibility support.
 
 <Canvas of={ButtonStories.ContentTypesShowcase} />
 
@@ -65,7 +65,7 @@ Buttons come in four different sizes:
 - `md` (**48px**, default)
 - `lg` (**56px**)
 
-> Note: For `xs` size (32 px), use the [IconButton](/docs/action-iconbutton--docs) component instead.
+> Note: For `xs` size (32 px), use the [IconButton](/docs/rnative-iconbutton--docs) component instead.
 
 <Canvas of={ButtonStories.SizesShowcase} />
 

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

@@ -6,7 +6,8 @@ import { Button } from './Button';
 
 const meta: Meta<typeof Button> = {
   component: Button,
-  title: 'Action/Button',
+  id: 'rnative-button',
+  title: 'Core/Button',
   parameters: {
     docs: {
       source: {

package/src/lib/Components/Button/Button.tsx

@@ -6,8 +6,7 @@ import type { ButtonProps } from './types';
  *
  * When in loading state, it displays a spinner. If an icon is provided without children, it renders as an icon-only button.
  *
- * @see {@link https://ldls.vercel.app/?path=/docs/react-native_action-button--docs Storybook}
- * @see {@link https://ldls.vercel.app/?path=/docs/react-native_action-button--docs#dos-and-donts Guidelines}
+ * @see {@link https://ldls-react-native.vercel.app/?path=/docs/rnative-button--docs Guidelines}
  *
  * @example
  * // Basic primary button

package/src/lib/Components/Card/Card.mdx

@@ -22,7 +22,7 @@ import {
 } from '../../../../.storybook/components';
 import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 
-<Meta title='Components/Card' of={CardStories} />
+<Meta title='Core/Card' of={CardStories} />
 
 # Card
 

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

@@ -21,7 +21,8 @@ import {
 
 const meta: Meta<typeof Card> = {
   component: Card,
-  title: 'Containment/Card',
+  id: 'rnative-card',
+  title: 'Core/Card',
   subcomponents: {
     CardHeader,
     CardLeading,

package/src/lib/Components/Card/Card.tsx

@@ -130,7 +130,7 @@ const useCardStyles = ({
  * - `type="expandable"`: only CardHeader is pressable, toggles footer visibility.
  * - `type="info"`: data-display only, no built-in press handling.
  *
- * @see {@link https://ldls.vercel.app/?path=/docs/react-native_containment-card--docs Storybook}
+ * @see {@link https://ldls-react-native.vercel.app/?path=/docs/rnative-card--docs Storybook}
  *
  * @warning The `lx` prop should only be used for layout adjustments like margins or positioning.
  * Do not use it to modify the card's core appearance (colors, padding, etc).

package/src/lib/Components/CardButton/CardButton.mdx

@@ -6,7 +6,7 @@ import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/
 import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 import { Box } from '../Utility';
 
-<Meta title='Action/CardButton' of={CardButtonStories} />
+<Meta title='Core/CardButton' of={CardButtonStories} />
 
 # CardButton
 

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

@@ -5,7 +5,8 @@ import { CardButton } from './CardButton';
 
 const meta: Meta<typeof CardButton> = {
   component: CardButton,
-  title: 'Action/CardButton',
+  id: 'rnative-cardbutton',
+  title: 'Core/CardButton',
   parameters: {
     docs: {
       source: {

package/src/lib/Components/CardButton/CardButton.tsx

@@ -97,8 +97,7 @@ const useStyles = ({
  *
  * It supports different appearances. Takes only the necessary width based on content. The chevron can be hidden if needed.
  *
- * @see {@link https://ldls.vercel.app/?path=/docs/react-native_action-cardbutton--docs Storybook}
- * @see {@link https://ldls.vercel.app/?path=/docs/react-native_action-cardbutton--docs#dos-and-donts Guidelines}
+ * @see {@link https://ldls-react-native.vercel.app/?path=/docs/rnative-cardbutton--docs Guidelines}
  *
  * @warning The `lx` prop should only be used for layout adjustments like margins or positioning.
  * Do not use it to modify the card button's core appearance (colors, padding, etc). Use the `appearance` prop instead.

package/src/lib/Components/Checkbox/Checkbox.mdx

@@ -6,7 +6,7 @@ import { CustomTabs, Tab } from '../../../../.storybook/components';
 import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
 import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 
-<Meta title="Components/Checkbox" of={CheckboxStories} />
+<Meta title='Core/Checkbox' of={CheckboxStories} />
 
 # Checkbox
 

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

@@ -3,7 +3,8 @@ import { Box, Text } from '../Utility';
 import { Checkbox } from './Checkbox';
 
 const meta: Meta<typeof Checkbox> = {
-  title: 'Selection/Checkbox',
+  id: 'rnative-checkbox',
+  title: 'Core/Checkbox',
   component: Checkbox,
   parameters: {
     layout: 'fullscreen',

package/src/lib/Components/Checkbox/Checkbox.tsx

@@ -12,8 +12,7 @@ import type { CheckboxProps } from './types';
  * The checkbox follows the design system tokens and supports checked, unchecked,
  * disabled, and focus states with proper hover and active interactions.
  *
- * @see {@link https://ldls.vercel.app/?path=/docs/react-native_selection-checkbox--docs Storybook}
- * @see {@link https://ldls.vercel.app/?path=/docs/react-native_selection-checkbox--docs#dos-and-donts Guidelines}
+ * @see {@link https://ldls-react-native.vercel.app/?path=/docs/rnative-checkbox--docs Guidelines}
  *
  * @warning The `lx` prop should only be used for layout adjustments like margins or positioning.
  * Do not use it to modify the checkbox's core appearance.

package/src/lib/Components/ContentBanner/ContentBanner.mdx

@@ -11,7 +11,7 @@ import { CustomTabs, Tab } from '../../../../.storybook/components';
 import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
 import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 
-<Meta title='Components/ContentBanner' of={ContentBannerStories} />
+<Meta title='Core/ContentBanner' of={ContentBannerStories} />
 
 # ContentBanner
 

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

@@ -14,7 +14,8 @@ import {
 
 const meta: Meta<typeof ContentBanner> = {
   component: ContentBanner,
-  title: 'Communication/ContentBanner',
+  id: 'rnative-contentbanner',
+  title: 'Core/ContentBanner',
   parameters: {
     docs: {
       source: {

package/src/lib/Components/ContentBanner/ContentBanner.tsx

@@ -136,7 +136,7 @@ export const ContentBannerDescription = ({
  * A content banner component for displaying a composable banner with an optional
  * leading visual, title, description, and close button.
  *
- * @see {@link https://ldls.vercel.app/?path=/docs/communication-contentbanner-overview--docs Storybook}
+ * @see {@link https://ldls-react-native.vercel.app/?path=/docs/rnative-contentbanner--docs Storybook}
  *
  * @warning The `lx` prop should only be used for layout adjustments like margins or positioning.
  * Do not use it to modify the banner's core appearance (colors, padding, etc).

package/src/lib/Components/DescriptionItem/DescriptionItem.mdx

@@ -2,7 +2,7 @@ import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
 import * as DescriptionItemStories from './DescriptionItem.stories';
 import { CustomTabs, Tab } from '../../../../.storybook/components';
 
-<Meta title='Containment/DescriptionItem' of={DescriptionItemStories} />
+<Meta title='Core/DescriptionItem' of={DescriptionItemStories} />
 
 # DescriptionItem
 

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

@@ -20,7 +20,8 @@ const Container = ({ children }: { children: React.ReactNode }) => (
 
 const meta: Meta<typeof DescriptionItem> = {
   component: DescriptionItem,
-  title: 'Containment/DescriptionItem',
+  id: 'rnative-descriptionitem',
+  title: 'Core/DescriptionItem',
   subcomponents: {
     DescriptionItemLeading,
     DescriptionItemLabel,

package/src/lib/Components/DescriptionItem/DescriptionItem.tsx

@@ -25,7 +25,7 @@ const [DescriptionItemSizeProvider, useDescriptionItemSizeContext] =
  * Composed with DescriptionItemLeading / DescriptionItemLabel (key side)
  * and DescriptionItemTrailing / DescriptionItemValue (value side).
  *
- * @see {@link https://ldls.vercel.app/?path=/docs/containment-descriptionitem--docs Storybook}
+ * @see {@link https://ldls-react-native.vercel.app/?path=/docs/rnative-descriptionitem--docs Storybook}
  *
  * @example
  * <DescriptionItem size="md">

package/src/lib/Components/Divider/Divider.mdx

@@ -7,7 +7,7 @@ import {
 } from '../../../../.storybook/components';
 import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 
-<Meta title='Layout/Divider' of={DividerStories} />
+<Meta title='Core/Divider' of={DividerStories} />
 
 # Divider
 

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

@@ -5,7 +5,8 @@ import { Divider } from './Divider';
 
 const meta: Meta<typeof Divider> = {
   component: Divider,
-  title: 'Layout/Divider',
+  id: 'rnative-divider',
+  title: 'Core/Divider',
   parameters: {
     actions: { disable: true },
   },

package/src/lib/Components/Divider/Divider.tsx

@@ -7,7 +7,7 @@ import type { DividerProps } from './types';
  * The Divider renders a horizontal or vertical line to create visual separation
  * between content areas. It uses design system tokens for consistent styling.
  *
- * @see {@link https://ldls.vercel.app/?path=/docs/layout-divider--docs Storybook}
+ * @see {@link https://ldls-react-native.vercel.app/?path=/docs/rnative-divider--docs Storybook}
  *
  * @example
  * // Horizontal divider (default)

package/src/lib/Components/DotCount/DotCount.mdx

@@ -2,7 +2,7 @@ import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
 import * as DotCountStories from './DotCount.stories';
 import { CustomTabs, Tab } from '../../../../.storybook/components';
 
-<Meta title='Communication/DotCount' of={DotCountStories} />
+<Meta title='Core/DotCount' of={DotCountStories} />
 
 # DotCount
 

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

@@ -10,7 +10,8 @@ import { DotCount } from './DotCount';
 
 const meta = {
   component: DotCount,
-  title: 'Communication/DotCount',
+  id: 'rnative-dotcount',
+  title: 'Core/DotCount',
   parameters: {
     docs: {
       source: {

package/src/lib/Components/DotIcon/DotIcon.mdx

@@ -2,7 +2,7 @@ import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
 import * as DotIconStories from './DotIcon.stories';
 import { CustomTabs, Tab } from '../../../../.storybook/components';
 
-<Meta title='Communication/DotIcon' of={DotIconStories} />
+<Meta title='Core/DotIcon' of={DotIconStories} />
 
 # DotIcon
 

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

@@ -7,7 +7,8 @@ import { DotIcon, mediaImageDotIconSizeMap } from './DotIcon';
 
 const meta = {
   component: DotIcon,
-  title: 'Communication/DotIcon',
+  id: 'rnative-doticon',
+  title: 'Core/DotIcon',
   parameters: {
     docs: {
       source: {

package/src/lib/Components/DotIndicator/DotIndicator.mdx

@@ -2,7 +2,7 @@ import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
 import * as DotIndicatorStories from './DotIndicator.stories';
 import { CustomTabs, Tab } from '../../../../.storybook/components';
 
-<Meta title='Communication/DotIndicator' of={DotIndicatorStories} />
+<Meta title='Core/DotIndicator' of={DotIndicatorStories} />
 
 # DotIndicator
 

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

@@ -8,7 +8,8 @@ import { DotIndicator } from './DotIndicator';
 
 const meta = {
   component: DotIndicator,
-  title: 'Communication/DotIndicator',
+  id: 'rnative-dotindicator',
+  title: 'Core/DotIndicator',
   parameters: {
     docs: {
       source: {

package/src/lib/Components/DotSymbol/DotSymbol.mdx

@@ -2,7 +2,7 @@ import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
 import * as DotSymbolStories from './DotSymbol.stories';
 import { CustomTabs, Tab } from '../../../../.storybook/components';
 
-<Meta title='Communication/DotSymbol' of={DotSymbolStories} />
+<Meta title='Core/DotSymbol' of={DotSymbolStories} />
 
 # DotSymbol