@ledgerhq/lumen-ui-rnative 0.1.46 → 0.1.47

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
 

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

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

package/src/lib/Components/Icon/Icon.mdx

@@ -0,0 +1,211 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as IconsStories from './Icon.stories';
+import { Box } from '../Utility';
+import { CustomTabs, Tab } from '../../../../.storybook/components';
+import {
+  DoVsDontRow,
+  DoBlockItem,
+  DontBlockItem,
+} from '../../../../.storybook/components/DoVsDont';
+import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
+
+<Meta title='Symbols/Interface Icons' of={IconsStories} />
+
+# Icons
+
+<CustomTabs>
+  <Tab label="Overview">
+
+Icons are essential elements that communicate meaning quickly and visually. They support navigation, clarify actions, and enhance the overall user experience. A well-designed icon set ensures clarity, consistency, and scalability across platforms.
+
+---
+
+## Figma Library
+
+All icons are designed and managed in our Figma Foundations library. This is the single source of truth for our icon set.
+
+- 🔗 **[Figma - Icons Library](https://www.figma.com/design/zSkvGGiqcnhywp2l3HTHxA/1.Symbol-Library?node-id=50-5110&m=dev)**
+
+---
+
+## Interactive Example
+
+<Canvas of={IconsStories.Base} />
+<Controls of={IconsStories.Base} />
+
+## 📏 Sizing
+
+Our icons are designed to be scalable and are available in 7 standard sizes to fit various contexts within the UI.
+
+The available sizes are: **16px, 20px, 24px, 32px, 40px, 48px, and 56px**
+
+The thickness of each icon is automatically managed by our token system when you apply a size variable, ensuring visual consistency at any scale.
+
+<Canvas of={IconsStories.Sizes} />
+
+---
+
+## Icon Gallery
+
+Here's a preview of all the icons available in our design system. To use an icon, just reference its name.
+
+<Canvas of={IconsStories.Gallery} />
+
+</Tab>
+<Tab label="Implementation">
+
+## Setup
+
+Install and set up the library with our [Setup Guide →](?path=/docs/getting-started-setup--docs).
+
+## Basic Usage
+
+Import and use specific icons from the symbols library:
+
+```tsx
+import { ArrowUp, Settings, Plus } from '@ledgerhq/lumen-ui-rnative/symbols';
+
+function MyComponent() {
+  return (
+    <Box lx={{ flexDirection: 'row', gap: 's8' }}>
+      <ArrowUp size={24} />
+      <Settings size={20} />
+      <Plus size={16} />
+    </Box>
+  );
+}
+```
+
+### Size Variants
+
+Icons support predefined size variants that ensure consistent visual hierarchy:
+
+```tsx
+import { ArrowUp } from '@ledgerhq/lumen-ui-rnative/symbols';
+
+function IconSizes() {
+  return (
+    <Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's8' }}>
+      <ArrowUp size={16} />
+      <ArrowUp size={20} />
+      <ArrowUp size={24} /> {/* Default size */}
+      <ArrowUp size={40} />
+      <ArrowUp size={48} />
+      <ArrowUp size={56} />
+    </Box>
+  );
+}
+```
+
+### Within Buttons
+
+The Button component supports icons with automatic size adjustment based on the button size:
+
+```tsx
+import { Button } from '@ledgerhq/lumen-ui-rnative';
+import { ArrowRight } from '@ledgerhq/lumen-ui-rnative/symbols';
+
+function MyComponent() {
+  return (
+    <Button size='m' appearance='base' icon={ArrowRight}>
+      Continue
+    </Button>
+  );
+}
+```
+
+### Accessibility
+
+Always provide proper accessibility attributes for interactive icons:
+
+```tsx
+import { Information } from '@ledgerhq/lumen-ui-rnative/symbols';
+
+function AccessibleIcon() {
+  return (
+    <Information size={20} accessibilityLabel='Account verification required' />
+  );
+}
+```
+
+### With Semantic Colors
+
+Icons inherit the current text color and can be styled with semantic color tokens:
+
+```tsx
+import {
+  CheckmarkCircle,
+  DeleteCircle,
+  Clock,
+} from '@ledgerhq/lumen-ui-rnative/symbols';
+
+function SemanticIcons() {
+  return (
+    <Box lx={{ flexDirection: 'row', gap: 's8' }}>
+      <CheckmarkCircle size={24} lx={{ color: 'success' }} />
+      <DeleteCircle size={24} lx={{ color: 'error' }} />
+      <Clock size={24} lx={{ color: 'warning' }} />
+    </Box>
+  );
+}
+```
+
+## Do's and Don'ts
+
+<Box lx={{ flexDirection: 'column', gap: 's24' }}>
+
+  <DoVsDontRow>
+    <DoBlockItem
+      title='Use predefined size variants'
+      description='Standard sizes ensure consistent visual hierarchy'
+    >
+
+```tsx
+<ArrowUp size={24} />
+```
+
+    </DoBlockItem>
+    <DontBlockItem
+      title="Don't use custom sizes"
+      description='Avoid non-standard sizes or arbitrary prop overrides'
+    >
+
+{/* prettier-ignore */}
+```tsx
+<ArrowUp size={23} />
+```
+
+    </DontBlockItem>
+
+  </DoVsDontRow>
+
+  <DoVsDontRow>
+    <DoBlockItem
+      title='Use semantic colors for icons'
+      description='Use semantic color tokens and inherit text color'
+    >
+
+```tsx
+<ArrowUp lx={{ color: 'success' }} />
+```
+
+    </DoBlockItem>
+    <DontBlockItem
+      title="Don't use arbitrary colors"
+      description='Avoid arbitrary color values or overriding currentColor unnecessarily'
+    >
+
+{/* prettier-ignore */}
+```tsx
+<ArrowUp color='#ff0000' />
+```
+
+    </DontBlockItem>
+
+  </DoVsDontRow>
+
+  <CommonRulesDoAndDont />
+</Box>
+
+</Tab>
+</CustomTabs>

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

@@ -7,6 +7,7 @@ import { Box, Text, Pressable } from '../Utility';
 import type { IconSize } from './types';
 
 const meta: Meta = {
+  id: 'rnative-icon',
   title: 'Symbols/Interface Icons',
 };
 
@@ -90,7 +91,7 @@ const IconCard = ({ name, size = 24, color }: IconCardProps) => {
   );
 };
 
-export const Icon: StoryObj<IconStoryProps> = {
+export const Base: StoryObj<IconStoryProps> = {
   args: {
     size: 24,
     name: 'Home',
@@ -139,7 +140,7 @@ export const Icon: StoryObj<IconStoryProps> = {
   },
 };
 
-export const IconSizes: StoryObj = {
+export const Sizes: StoryObj = {
   render: () => {
     const { theme } = useTheme();
 

package/src/lib/Components/IconButton/IconButton.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/IconButton' of={IconButtonStories} />
+<Meta title='Core/IconButton' of={IconButtonStories} />
 
 # IconButton
 

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

@@ -12,7 +12,8 @@ const iconMap = {
 } as const;
 
 const meta: Meta<typeof IconButton> = {
-  title: 'Action/IconButton',
+  id: 'rnative-iconbutton',
+  title: 'Core/IconButton',
   component: IconButton,
   argTypes: {
     icon: {

package/src/lib/Components/InteractiveIcon/InteractiveIcon.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/InteractiveIcon' of={InteractiveIconStories} />
+<Meta title='Core/InteractiveIcon' of={InteractiveIconStories} />
 
 # InteractiveIcon
 

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

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

package/src/lib/Components/InteractiveIcon/InteractiveIcon.tsx

@@ -72,8 +72,7 @@ const useStyles = ({
  * The InteractiveIcon provides two visual styles - 'filled' and 'stroked' - optimized for different icon types and use cases.
  * It ensures proper pressed states and accessibility features while maintaining a minimal footprint.
  *
- * @see {@link https://ldls.vercel.app/?path=/docs/components-interactiveicon-overview--docs Storybook}
- * @see {@link https://ldls.vercel.app/?path=/docs/components-interactiveicon-implementation--docs#dos-and-donts Guidelines}
+ * @see {@link https://ldls-react-native.vercel.app/?path=/docs/rnative-interactiveicon--docs Guidelines}
  *
  * @component
  *

package/src/lib/Components/Link/Link.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/Link' of={LinkStories} />
+<Meta title='Core/Link' of={LinkStories} />
 
 # Link
 

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

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

package/src/lib/Components/Link/Link.tsx

@@ -73,8 +73,7 @@ const useStyles = ({ appearance, size, underline, pressed }: StyleParams) => {
  * A customizable link component that supports base and accent color appearances, optional underline, sizes, icons, and external link handling.
  * Opens URLs using React Native's Linking API.
  *
- * @see {@link https://ldls.vercel.app/?path=/docs/components-link-overview--docs Storybook}
- * @see {@link https://ldls.vercel.app/?path=/docs/components-link-implementation--docs#dos-and-donts Guidelines}
+ * @see {@link https://ldls-react-native.vercel.app/?path=/docs/rnative-link--docs Guidelines}
  *
  * @warning The `lx` prop should only be used for layout adjustments like margins or positioning.
  * Do not use it to modify the link's core appearance (colors, padding, etc). Use the `appearance` and `underline` props instead.