@ledgerhq/lumen-ui-rnative 0.0.72 → 0.0.73

package/.storybook/preview-head.html

@@ -17,6 +17,7 @@
 
   .sbdocs-a {
     color: rgb(126, 78, 165) !important;
+    text-decoration: underline !important;
     cursor: pointer;
   }
 

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/lumen-ui-rnative",
-  "version": "0.0.71",
+  "version": "0.0.72",
   "license": "Apache-2.0",
   "keywords": [
     "react-native",

package/dist/src/lib/Components/BottomSheet/BottomSheet.stories.d.ts

@@ -19,6 +19,10 @@ declare const meta: {
                 format: boolean;
                 type: string;
             };
+            story: {
+                inline: boolean;
+                iframeHeight: number;
+            };
         };
     };
     argTypes: {

package/dist/src/lib/Components/BottomSheet/BottomSheet.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BottomSheet.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/BottomSheet/BottomSheet.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAG5D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAU5C,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0E0B,CAAC;AAErC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AAE1C,eAAO,MAAM,IAAI,EAAE,KAmDlB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAiD3B,CAAC;AAEF,eAAO,MAAM,8BAA8B,EAAE,KAwC5C,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,KAwCzC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KA4C1B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KA2CxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAoEzB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAkF7B,CAAC"}
+{"version":3,"file":"BottomSheet.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/BottomSheet/BottomSheet.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAG5D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAU5C,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8E0B,CAAC;AAErC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AAE1C,eAAO,MAAM,IAAI,EAAE,KAmDlB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAiD3B,CAAC;AAEF,eAAO,MAAM,8BAA8B,EAAE,KAwC5C,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,KAwCzC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KA4C1B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KA2CxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAoEzB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAkF7B,CAAC"}

package/dist/src/lib/Components/BottomSheet/BottomSheet.stories.js

@@ -16,6 +16,10 @@ const meta = {
                 format: true,
                 type: 'code',
             },
+            story: {
+                inline: false,
+                iframeHeight: 400,
+            },
         },
     },
     argTypes: {

package/dist/src/lib/Components/Icon/Icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Icon/Icon.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAY,MAAM,SAAS,CAAC;AAqC9C,eAAO,MAAM,IAAI;4DAQd,SAAS;;CAkBX,CAAC"}
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Icon/Icon.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAY,MAAM,SAAS,CAAC;AAsC9C,eAAO,MAAM,IAAI;4DAQd,SAAS;;CAkBX,CAAC"}

package/dist/src/lib/Components/Icon/Icon.js

@@ -7,6 +7,7 @@ const iconSizeMap = {
     16: 's16',
     20: 's20',
     24: 's24',
+    32: 's32',
     40: 's40',
     48: 's48',
     56: 's56',

package/dist/src/lib/Components/Icon/Icon.stories.js

@@ -8,7 +8,7 @@ const meta = {
     title: 'Symbols/Interface Icons',
 };
 export default meta;
-const sizes = [12, 16, 20, 24, 40, 48, 56];
+const sizes = [12, 16, 20, 24, 32, 40, 48, 56];
 const iconNames = Object.keys(Icons);
 const IconCard = ({ name, size = 24, color }) => {
     const { theme } = useTheme();

package/dist/src/lib/Components/Icon/types.d.ts

@@ -2,7 +2,7 @@ import { Ref } from 'react';
 import { Svg, SvgProps } from 'react-native-svg';
 import { LumenTextStyle } from '../../../styles';
 import { TextProps } from '../Utility';
-export type IconSize = 12 | 16 | 20 | 24 | 40 | 48 | 56;
+export type IconSize = 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56;
 export type IconProps = {
     /**
      * The size of the icon.

package/dist/src/lib/Components/Icon/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Icon/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAEvC,MAAM,MAAM,QAAQ,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAExD,MAAM,MAAM,SAAS,GAAG;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IAChC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,GAAG,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC;CAChB,GAAG,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,GACxB,IAAI,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Icon/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAEvC,MAAM,MAAM,QAAQ,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAE7D,MAAM,MAAM,SAAS,GAAG;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IAChC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,GAAG,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC;CAChB,GAAG,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,GACxB,IAAI,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC"}

package/dist/src/lib/Components/InteractiveIcon/InteractiveIcon.d.ts

@@ -29,7 +29,7 @@ import { InteractiveIconProps } from './types';
  * </InteractiveIcon>
  */
 export declare const InteractiveIcon: {
-    ({ iconType, children, disabled, style, lx, ...props }: InteractiveIconProps): import("react/jsx-runtime").JSX.Element;
+    ({ iconType, children, disabled, hitSlop: hitSlopProp, hitSlopType, style, lx, ...props }: InteractiveIconProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 //# sourceMappingURL=InteractiveIcon.d.ts.map

package/dist/src/lib/Components/InteractiveIcon/InteractiveIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InteractiveIcon.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/InteractiveIcon/InteractiveIcon.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AA0C/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,eAAe;4DAOzB,oBAAoB;;CAqBtB,CAAC"}
+{"version":3,"file":"InteractiveIcon.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/InteractiveIcon/InteractiveIcon.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAgB,oBAAoB,EAAE,MAAM,SAAS,CAAC;AA0C7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,eAAe;+FASzB,oBAAoB;;CA+BtB,CAAC"}

package/dist/src/lib/Components/InteractiveIcon/InteractiveIcon.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Children, isValidElement } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { useStyleSheet } from '../../../styles';
 import { InjectStylesIntoChildren } from '../../utils/components/InjectStylesIntoChildren';
 import { Pressable } from '../Utility';
+import { HIT_SLOP_MAP } from './types';
 const useStyles = ({ iconType, pressed, disabled, }) => {
     return useStyleSheet((t) => {
         const backgroundStyle = {
@@ -57,8 +59,14 @@ const useStyles = ({ iconType, pressed, disabled, }) => {
  *   <Settings size={20} />
  * </InteractiveIcon>
  */
-export const InteractiveIcon = ({ iconType, children, disabled = false, style, lx, ...props }) => {
-    return (_jsx(Pressable, { lx: lx, style: [style, { alignItems: 'center', justifyContent: 'center' }], accessibilityRole: 'button', accessibilityState: { disabled: !!disabled }, disabled: disabled, ...props, children: ({ pressed }) => (_jsx(InteractiveIconContent, { iconType: iconType, pressed: pressed, disabled: !!disabled, children: children })) }));
+export const InteractiveIcon = ({ iconType, children, disabled = false, hitSlop: hitSlopProp, hitSlopType = 'comfortable', style, lx, ...props }) => {
+    const child = Children.only(children);
+    let iconSize = 20;
+    if (isValidElement(child) && 'size' in child.props) {
+        iconSize = child.props.size ?? 20;
+    }
+    const resolvedHitSlop = hitSlopProp ?? HIT_SLOP_MAP[hitSlopType]?.[iconSize];
+    return (_jsx(Pressable, { lx: lx, style: [style, { alignItems: 'center', justifyContent: 'center' }], accessibilityRole: 'button', accessibilityState: { disabled: !!disabled }, disabled: disabled, hitSlop: resolvedHitSlop, ...props, children: ({ pressed }) => (_jsx(InteractiveIconContent, { iconType: iconType, pressed: pressed, disabled: !!disabled, children: children })) }));
 };
 const InteractiveIconContent = ({ iconType, pressed, disabled, children, }) => {
     const styles = useStyles({ iconType, pressed, disabled });

package/dist/src/lib/Components/InteractiveIcon/types.d.ts

@@ -1,10 +1,27 @@
 import { PropsWithChildren } from 'react';
+import { Insets } from 'react-native';
 import { StyledPressableProps } from '../../../styles';
+import { IconSize } from '../Icon';
+export declare const HIT_SLOP_MAP: Partial<Record<HitSlopType, Partial<Record<IconSize, Insets>>>>;
+/**
+ * Preset for the touchable area around the icon.
+ * - `comfortable`: Increases hit area across both axes in a 1:1 ratio.
+ * - `compact-horizontal`: Larger hit area on the horizontal axis.
+ * - `compact-vertical`: Larger hit area on the vertical axis.
+ */
+export type HitSlopType = 'comfortable' | 'compact-horizontal' | 'compact-vertical';
 export type InteractiveIconProps = {
     /**
      * The visual style of the icon button.
      * Choose 'filled' for icons with solid backgrounds or 'stroked' for outlined icons.
      */
     iconType: 'filled' | 'stroked';
+    /**
+     * Preset for the touchable area. Ignored if `hitSlop` is passed explicitly.
+     * Automatically applies insets based on the child's icon size.
+     *
+     * @default 'comfortable'
+     */
+    hitSlopType?: HitSlopType;
 } & PropsWithChildren & Omit<StyledPressableProps, 'children'>;
 //# sourceMappingURL=types.d.ts.map

package/dist/src/lib/Components/InteractiveIcon/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/InteractiveIcon/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAEvD,MAAM,MAAM,oBAAoB,GAAG;IACjC;;;OAGG;IACH,QAAQ,EAAE,QAAQ,GAAG,SAAS,CAAC;CAChC,GAAG,iBAAiB,GACnB,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/InteractiveIcon/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAEnC,eAAO,MAAM,YAAY,EAAE,OAAO,CAChC,MAAM,CAAC,WAAW,EAAE,OAAO,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC,CAwBvD,CAAC;AAEF;;;;;GAKG;AACH,MAAM,MAAM,WAAW,GACnB,aAAa,GACb,oBAAoB,GACpB,kBAAkB,CAAC;AAEvB,MAAM,MAAM,oBAAoB,GAAG;IACjC;;;OAGG;IACH,QAAQ,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC/B;;;;;OAKG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B,GAAG,iBAAiB,GACnB,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC,CAAC"}

package/dist/src/lib/Components/InteractiveIcon/types.js

@@ -1 +1,24 @@
-export {};
+export const HIT_SLOP_MAP = {
+    comfortable: {
+        12: { top: 16, bottom: 16, left: 16, right: 16 },
+        16: { top: 14, bottom: 14, left: 14, right: 14 },
+        20: { top: 12, bottom: 12, left: 12, right: 12 },
+        24: { top: 10, bottom: 10, left: 10, right: 10 },
+        32: { top: 6, bottom: 6, left: 6, right: 6 },
+        40: { top: 2, bottom: 2, left: 2, right: 2 },
+    },
+    'compact-vertical': {
+        12: { top: 14, bottom: 14, left: 10, right: 10 },
+        16: { top: 12, bottom: 12, left: 8, right: 8 },
+        20: { top: 10, bottom: 10, left: 6, right: 6 },
+        24: { top: 8, bottom: 8, left: 4, right: 4 },
+        32: { top: 4, bottom: 4, left: 0, right: 0 },
+    },
+    'compact-horizontal': {
+        12: { top: 10, bottom: 10, left: 14, right: 14 },
+        16: { top: 8, bottom: 8, left: 12, right: 12 },
+        20: { top: 6, bottom: 6, left: 10, right: 10 },
+        24: { top: 4, bottom: 4, left: 8, right: 8 },
+        32: { top: 0, bottom: 0, left: 4, right: 4 },
+    },
+};

package/dist/src/lib/Components/Utility/Gradient/LinearGradient/LinearGradient.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LinearGradient.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/lib/Components/Utility/Gradient/LinearGradient/LinearGradient.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAIvE,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,cAAc,CAcrC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,cAAc,CAAC,CAAC;AAE7C,eAAO,MAAM,IAAI,EAAE,KAUlB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAoC/B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAwB1B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KA4B/B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAyC7B,CAAC"}
+{"version":3,"file":"LinearGradient.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/lib/Components/Utility/Gradient/LinearGradient/LinearGradient.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAIvE,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,cAAc,CAcrC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,cAAc,CAAC,CAAC;AAE7C,eAAO,MAAM,IAAI,EAAE,KAUlB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAoC/B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAwB1B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KA0B/B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAyC7B,CAAC"}

package/dist/src/lib/Components/Utility/Gradient/LinearGradient/LinearGradient.stories.js

@@ -78,8 +78,6 @@ export const WithMultipleStops = {
         },
     },
     render: (args) => {
-        const { theme } = useTheme();
-        console.log({ theme });
         return (_jsxs(Box, { lx: { gap: 's12' }, children: [_jsx(LinearGradient, { ...args }), _jsxs(Box, { lx: { flexDirection: 'row', justifyContent: 'space-between' }, children: [_jsx(Text, { children: "accent" }), _jsx(Text, { children: "warning" }), _jsx(Text, { children: "errorStrong" })] })] }));
     },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/lumen-ui-rnative",
-  "version": "0.0.72",
+  "version": "0.0.73",
   "license": "Apache-2.0",
   "keywords": [
     "react-native",
@@ -27,7 +27,7 @@
     "./styles": "./src/styles/index.ts"
   },
   "dependencies": {
-    "@ledgerhq/lumen-utils-shared": "0.0.19",
+    "@ledgerhq/lumen-utils-shared": "0.0.20",
     "i18next": "^23.7.0",
     "react-i18next": "^14.0.0"
   },
@@ -37,7 +37,7 @@
   "peerDependencies": {
     "@types/react": "^19.0.0",
     "@gorhom/bottom-sheet": "^5.0.0",
-    "@ledgerhq/lumen-design-core": "0.0.52",
+    "@ledgerhq/lumen-design-core": "0.0.53",
     "react": "^19.0.0",
     "react-native": "~0.79.7",
     "react-native-reanimated": "^3.0.0",

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

@@ -22,6 +22,10 @@ const meta = {
         format: true,
         type: 'code',
       },
+      story: {
+        inline: false,
+        iframeHeight: 400,
+      },
     },
   },
   argTypes: {

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

@@ -12,7 +12,7 @@ const meta: Meta = {
 
 export default meta;
 
-const sizes: IconSize[] = [12, 16, 20, 24, 40, 48, 56];
+const sizes: IconSize[] = [12, 16, 20, 24, 32, 40, 48, 56];
 
 type IconName = keyof typeof Icons;
 const iconNames = Object.keys(Icons) as IconName[];

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

@@ -33,7 +33,7 @@ describe('Icon', () => {
     expect(svg.props.strokeWidth).toBe(iconTokens.borderWidth.s24);
   });
 
-  it.each([12, 16, 20, 24, 40, 48, 56] as IconSize[])(
+  it.each([12, 16, 20, 24, 32, 40, 48, 56] as IconSize[])(
     'should apply correct dimensions for size %i',
     (size) => {
       renderWithProvider(

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

@@ -9,6 +9,7 @@ const iconSizeMap = {
   16: 's16',
   20: 's20',
   24: 's24',
+  32: 's32',
   40: 's40',
   48: 's48',
   56: 's56',

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

@@ -3,7 +3,7 @@ import { Svg, SvgProps } from 'react-native-svg';
 import { LumenTextStyle } from '../../../styles';
 import { TextProps } from '../Utility';
 
-export type IconSize = 12 | 16 | 20 | 24 | 40 | 48 | 56;
+export type IconSize = 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56;
 
 export type IconProps = {
   /**

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

@@ -1,10 +1,11 @@
-import { PropsWithChildren } from 'react';
+import { Children, isValidElement, PropsWithChildren } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { useStyleSheet } from '../../../styles';
 
 import { InjectStylesIntoChildren } from '../../utils/components/InjectStylesIntoChildren';
+import { IconProps, IconSize } from '../Icon';
 import { Pressable } from '../Utility';
-import { InteractiveIconProps } from './types';
+import { HIT_SLOP_MAP, InteractiveIconProps } from './types';
 
 type IconType = InteractiveIconProps['iconType'];
 
@@ -79,10 +80,21 @@ export const InteractiveIcon = ({
   iconType,
   children,
   disabled = false,
+  hitSlop: hitSlopProp,
+  hitSlopType = 'comfortable',
   style,
   lx,
   ...props
 }: InteractiveIconProps) => {
+  const child = Children.only(children);
+
+  let iconSize: IconSize = 20;
+  if (isValidElement<IconProps>(child) && 'size' in child.props) {
+    iconSize = child.props.size ?? 20;
+  }
+
+  const resolvedHitSlop = hitSlopProp ?? HIT_SLOP_MAP[hitSlopType]?.[iconSize];
+
   return (
     <Pressable
       lx={lx}
@@ -90,6 +102,7 @@ export const InteractiveIcon = ({
       accessibilityRole='button'
       accessibilityState={{ disabled: !!disabled }}
       disabled={disabled}
+      hitSlop={resolvedHitSlop}
       {...props}
     >
       {({ pressed }) => (

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

@@ -1,5 +1,45 @@
 import { PropsWithChildren } from 'react';
+import { Insets } from 'react-native';
 import { StyledPressableProps } from '../../../styles';
+import { IconSize } from '../Icon';
+
+export const HIT_SLOP_MAP: Partial<
+  Record<HitSlopType, Partial<Record<IconSize, Insets>>>
+> = {
+  comfortable: {
+    12: { top: 16, bottom: 16, left: 16, right: 16 },
+    16: { top: 14, bottom: 14, left: 14, right: 14 },
+    20: { top: 12, bottom: 12, left: 12, right: 12 },
+    24: { top: 10, bottom: 10, left: 10, right: 10 },
+    32: { top: 6, bottom: 6, left: 6, right: 6 },
+    40: { top: 2, bottom: 2, left: 2, right: 2 },
+  },
+  'compact-vertical': {
+    12: { top: 14, bottom: 14, left: 10, right: 10 },
+    16: { top: 12, bottom: 12, left: 8, right: 8 },
+    20: { top: 10, bottom: 10, left: 6, right: 6 },
+    24: { top: 8, bottom: 8, left: 4, right: 4 },
+    32: { top: 4, bottom: 4, left: 0, right: 0 },
+  },
+  'compact-horizontal': {
+    12: { top: 10, bottom: 10, left: 14, right: 14 },
+    16: { top: 8, bottom: 8, left: 12, right: 12 },
+    20: { top: 6, bottom: 6, left: 10, right: 10 },
+    24: { top: 4, bottom: 4, left: 8, right: 8 },
+    32: { top: 0, bottom: 0, left: 4, right: 4 },
+  },
+};
+
+/**
+ * Preset for the touchable area around the icon.
+ * - `comfortable`: Increases hit area across both axes in a 1:1 ratio.
+ * - `compact-horizontal`: Larger hit area on the horizontal axis.
+ * - `compact-vertical`: Larger hit area on the vertical axis.
+ */
+export type HitSlopType =
+  | 'comfortable'
+  | 'compact-horizontal'
+  | 'compact-vertical';
 
 export type InteractiveIconProps = {
   /**
@@ -7,5 +47,12 @@ export type InteractiveIconProps = {
    * Choose 'filled' for icons with solid backgrounds or 'stroked' for outlined icons.
    */
   iconType: 'filled' | 'stroked';
+  /**
+   * Preset for the touchable area. Ignored if `hitSlop` is passed explicitly.
+   * Automatically applies insets based on the child's icon size.
+   *
+   * @default 'comfortable'
+   */
+  hitSlopType?: HitSlopType;
 } & PropsWithChildren &
   Omit<StyledPressableProps, 'children'>;

package/src/lib/Components/Utility/Gradient/LinearGradient/LinearGradient.stories.tsx

@@ -114,8 +114,6 @@ export const WithMultipleStops: Story = {
     },
   },
   render: (args) => {
-    const { theme } = useTheme();
-    console.log({ theme });
     return (
       <Box lx={{ gap: 's12' }}>
         <LinearGradient {...args} />