@ledgerhq/lumen-ui-rnative 0.0.45 → 0.0.46

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

@@ -1,65 +1,75 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cva } from 'class-variance-authority';
 import { forwardRef } from 'react';
-import { View, Pressable, Text } from 'react-native';
-const tileVariants = {
-    root: cva(['relative flex w-full items-center gap-8 p-8', 'rounded-sm text-base'], {
-        variants: {
-            appearance: {
-                'no-background': 'bg-base-transparent',
-                card: 'bg-surface',
+import { StyleSheet, View, Text } from 'react-native';
+import { useStyleSheet } from '../../../styles';
+import { Pressable } from '../Utility';
+const useStyles = ({ appearance, disabled, pressed, }) => {
+    return useStyleSheet((t) => {
+        const bgColors = {
+            'no-background': t.colors.bg.baseTransparent,
+            card: t.colors.bg.surface,
+        };
+        const pressedBgColors = {
+            'no-background': t.colors.bg.baseTransparentPressed,
+            card: t.colors.bg.surfacePressed,
+        };
+        return {
+            container: StyleSheet.flatten([
+                {
+                    position: 'relative',
+                    flexDirection: 'column',
+                    width: '100%',
+                    alignItems: 'center',
+                    gap: t.spacings.s8,
+                    padding: t.spacings.s8,
+                    borderRadius: t.borderRadius.sm,
+                    backgroundColor: bgColors[appearance],
+                },
+                pressed &&
+                    !disabled && {
+                    backgroundColor: pressedBgColors[appearance],
+                },
+            ]),
+            contentWrapper: {
+                width: t.sizes.full,
+                alignItems: 'center',
+                gap: t.spacings.s8,
             },
-            pressed: {
-                true: '',
-                false: '',
+            leadingWrapper: {
+                alignItems: 'center',
+                justifyContent: 'center',
             },
-            disabled: {
-                true: '',
-                false: '',
+            textWrapper: {
+                width: t.sizes.full,
+                alignItems: 'center',
+                gap: t.spacings.s4,
             },
-        },
-        compoundVariants: [
-            {
-                appearance: 'no-background',
-                pressed: true,
-                disabled: false,
-                className: 'bg-base-transparent-pressed',
+            titleWrapper: {
+                width: t.sizes.full,
+                alignItems: 'center',
             },
-            {
-                appearance: 'card',
-                pressed: true,
-                disabled: false,
-                className: 'bg-surface-pressed',
-            },
-        ],
-        defaultVariants: {
-            appearance: 'no-background',
-            pressed: false,
-            disabled: false,
-        },
-    }),
-    title: cva('w-full truncate text-center body-3-semi-bold', {
-        variants: {
-            disabled: {
-                true: 'text-disabled',
-                false: 'text-base',
-            },
-        },
-        defaultVariants: {
-            disabled: false,
-        },
-    }),
-    description: cva('w-full overflow-hidden truncate text-center body-3', {
-        variants: {
-            disabled: {
-                true: 'text-disabled',
-                false: 'text-muted',
-            },
-        },
-        defaultVariants: {
-            disabled: false,
-        },
-    }),
+            title: StyleSheet.flatten([
+                t.typographies.body3SemiBold,
+                {
+                    width: t.sizes.full,
+                    textAlign: 'center',
+                    color: disabled ? t.colors.text.disabled : t.colors.text.base,
+                },
+            ]),
+            description: StyleSheet.flatten([
+                t.typographies.body3,
+                {
+                    width: t.sizes.full,
+                    textAlign: 'center',
+                    color: disabled ? t.colors.text.disabled : t.colors.text.muted,
+                },
+            ]),
+        };
+    }, [appearance, disabled, pressed]);
+};
+const TileContent = ({ appearance, disabled, pressed, leadingContent, title, description, trailingContent, }) => {
+    const styles = useStyles({ appearance, disabled, pressed });
+    return (_jsx(View, { style: styles.container, children: _jsxs(View, { style: styles.contentWrapper, children: [_jsx(View, { style: styles.leadingWrapper, children: leadingContent }), _jsxs(View, { style: styles.textWrapper, children: [_jsxs(View, { style: styles.titleWrapper, children: [_jsx(Text, { numberOfLines: 1, style: styles.title, children: title }), description && (_jsx(Text, { numberOfLines: 1, style: styles.description, children: description }))] }), trailingContent] })] }) }));
 };
 /**
  * A tile list item component that displays a spot icon at the top, title and optional description,
@@ -69,6 +79,9 @@ const tileVariants = {
  * @see {@link https://ldls.vercel.app/?path=/docs/components-Tile-overview--docs Storybook}
  * @see {@link https://ldls.vercel.app/?path=/docs/components-Tile-implementation--docs#dos-and-donts Guidelines}
  *
+ * @warning The `lx` prop should only be used for layout adjustments like margins or positioning.
+ * Do not use it to modify the tile's core appearance (colors, padding, etc). Use the `appearance` prop instead.
+ *
  * @example
  * // Basic tile item
  * import { Tile, Spot } from '@ledgerhq/lumen-ui-rnative';
@@ -82,6 +95,7 @@ const tileVariants = {
  *   onLongPress={() => console.log('Long pressed!')}
  * />
  */
-export const Tile = forwardRef(({ title, description, leadingContent, trailingContent, appearance = 'no-background', disabled = false, onPress, onLongPress, ...props }, ref) => {
-    return (_jsx(Pressable, { ref: ref, onPress: onPress, onLongPress: onLongPress, disabled: disabled, ...props, children: ({ pressed }) => (_jsx(View, { className: tileVariants.root({ appearance, pressed, disabled }), children: _jsxs(View, { className: 'w-full items-center gap-8', children: [_jsx(View, { className: 'items-center justify-center', children: leadingContent }), _jsxs(View, { className: 'w-full items-center gap-4', children: [_jsxs(View, { className: 'w-full items-center', children: [_jsx(Text, { numberOfLines: 1, className: tileVariants.title({ disabled }), children: title }), description && (_jsx(Text, { numberOfLines: 1, className: tileVariants.description({ disabled }), children: description }))] }), trailingContent] })] }) })) }));
+export const Tile = forwardRef(({ lx = {}, style, title, description, leadingContent, trailingContent, appearance = 'no-background', disabled = false, ...props }, ref) => {
+    return (_jsx(Pressable, { ref: ref, lx: lx, style: style, disabled: disabled, accessibilityRole: 'button', accessibilityState: { disabled }, ...props, children: ({ pressed }) => (_jsx(TileContent, { appearance: appearance, disabled: disabled, pressed: pressed, leadingContent: leadingContent, title: title, description: description, trailingContent: trailingContent })) }));
 });
+Tile.displayName = 'Tile';

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

@@ -1 +1 @@
-{"version":3,"file":"Tile.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Tile/Tile.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAavE,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CAgC3B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,IAAI,EAAE,KAuBlB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAwBjC,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAuBjC,CAAC;AAEF,eAAO,MAAM,8BAA8B,EAAE,KAmC5C,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KA0B5B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAoB9B,CAAC"}
+{"version":3,"file":"Tile.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Tile/Tile.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAavE,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CAgC3B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,IAAI,EAAE,KAuBlB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAwBjC,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAuBjC,CAAC;AAEF,eAAO,MAAM,8BAA8B,EAAE,KAmC5C,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAwC5B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAoB9B,CAAC"}

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

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { View } from 'react-native';
 import { Settings, Plus, User, Wallet, Cart, Apps, Chart1, } from '../../Symbols';
 import { Spot } from '../Spot/Spot';
 import { Tag } from '../Tag/Tag';
+import { Box } from '../Utility';
 import { Tile } from './Tile';
 const meta = {
     component: Tile,
@@ -43,7 +43,7 @@ export const Base = {
         title: 'Item with Spot and Description',
         description: 'Additional information',
         leadingContent: _jsx(Spot, { appearance: 'icon', icon: Settings }),
-        className: 'max-w-256',
+        lx: { maxWidth: 's256' },
     },
     parameters: {
         docs: {
@@ -55,7 +55,7 @@ export const Base = {
   leadingContent={<Spot appearance="icon" icon={Settings} />}
   onLongPress={() => console.log('Secondary action')}
   onPress={() => console.log('Primary action')}
-  className="max-w-256"
+  lx={{ maxWidth: 's256' }}
 />
 `,
             },
@@ -68,7 +68,7 @@ export const WithTrailingContent = {
         description: 'Additional information',
         leadingContent: _jsx(Spot, { appearance: 'icon', icon: Settings }),
         trailingContent: _jsx(Tag, { label: 'New', appearance: 'base' }),
-        className: 'max-w-256',
+        lx: { maxWidth: 's256' },
     },
     parameters: {
         docs: {
@@ -80,7 +80,7 @@ export const WithTrailingContent = {
   leadingContent={<Spot appearance="icon" icon={Settings} />}
   trailingContent={<Tag label="New" appearance="base" />}
   onLongPress={() => console.log('Long press - secondary action')}
-  className="max-w-256"
+  lx={{ maxWidth: 's256' }}
 />
 `,
             },
@@ -93,7 +93,7 @@ export const WithSecondaryAction = {
         description: 'LongPress to trigger secondary action',
         leadingContent: _jsx(Spot, { appearance: 'icon', icon: Settings }),
         onLongPress: () => alert('Long press - secondary action'),
-        className: 'max-w-256',
+        lx: { maxWidth: 's256' },
     },
     parameters: {
         docs: {
@@ -104,7 +104,7 @@ export const WithSecondaryAction = {
   description="Additional information"
   onLongPress={() => // do stuff}
   leadingContent={<Spot appearance="icon" icon={Settings} />}
-  className="max-w-256"
+  lx={{ maxWidth: 's256' }}
 />
 `,
             },
@@ -112,11 +112,21 @@ export const WithSecondaryAction = {
     },
 };
 export const LeadingContentVariantsShowcase = {
-    render: () => (_jsxs(View, { className: 'flex flex-row', children: [_jsx(Tile, { title: 'User', description: 'With description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: User }), className: 'max-w-128' }), _jsx(Tile, { title: 'Wallet', description: 'With description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Wallet }), className: 'max-w-128' }), _jsx(Tile, { title: 'Cart', description: 'With description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Cart }), className: 'max-w-128' }), _jsx(Tile, { title: 'Apps', description: 'With description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Apps }), className: 'max-w-128' }), _jsx(Tile, { title: 'Chart', description: 'With description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Chart1 }), className: 'max-w-128' })] })),
+    render: () => (_jsxs(Box, { lx: { flexDirection: 'row' }, children: [_jsx(Tile, { title: 'User', description: 'With description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: User }), lx: { maxWidth: 's128' } }), _jsx(Tile, { title: 'Wallet', description: 'With description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Wallet }), lx: { maxWidth: 's128' } }), _jsx(Tile, { title: 'Cart', description: 'With description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Cart }), lx: { maxWidth: 's128' } }), _jsx(Tile, { title: 'Apps', description: 'With description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Apps }), lx: { maxWidth: 's128' } }), _jsx(Tile, { title: 'Chart', description: 'With description', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Chart1 }), lx: { maxWidth: 's128' } })] })),
 };
 export const HorizontalList = {
-    render: () => (_jsxs(View, { className: 'flex flex-col gap-16', children: [_jsx(View, { className: 'flex w-480 flex-row bg-base', children: Array.from({ length: 5 }).map((_, i) => (_jsx(Tile, { title: `Item ${i + 1}`, description: `Description ${i + 1}`, leadingContent: _jsx(Spot, { appearance: 'icon', icon: Apps }) }, `list-1-${i}`))) }), _jsx(View, { className: 'flex w-480 flex-row overflow-x-auto bg-base', children: Array.from({ length: 5 }).map((_, i) => (_jsx(Tile, { title: 'Long Title that should truncate appropriately', description: 'Long description that should truncate appropriately', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Apps }), className: 'w-208 shrink-0' }, `list-2-${i}`))) })] })),
+    render: () => (_jsxs(Box, { lx: { flexDirection: 'column', gap: 's16' }, children: [_jsx(Box, { lx: {
+                    position: 'relative',
+                    flexDirection: 'row',
+                    width: 's480',
+                    backgroundColor: 'base',
+                }, children: Array.from({ length: 12 }).map((_, i) => (_jsx(Tile, { title: `Item ${i + 1}`, description: `Description ${i + 1}`, leadingContent: _jsx(Spot, { appearance: 'icon', icon: Apps }) }, `list-1-${i}`))) }), _jsx(Box, { lx: {
+                    flexDirection: 'row',
+                    width: 's480',
+                    position: 'relative',
+                    backgroundColor: 'base',
+                }, children: Array.from({ length: 8 }).map((_, i) => (_jsx(Tile, { title: 'Long Title that should truncate appropriately', description: 'Long description that should truncate appropriately', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Apps }), lx: { width: 's176', flexShrink: 0 } }, `list-2-${i}`))) })] })),
 };
 export const ResponsiveLayout = {
-    render: () => (_jsxs(View, { className: 'flex w-full flex-col gap-16', children: [_jsx(View, { children: _jsx(Tile, { title: 'Item fill width', description: 'Description fill width', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Apps }) }) }), _jsx(View, { className: 'flex items-center justify-center', children: _jsx(Tile, { className: 'w-224', title: 'Long Item with fixed width', description: 'lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Plus }) }) })] })),
+    render: () => (_jsxs(Box, { lx: { width: 'full', flexDirection: 'column', gap: 's16' }, children: [_jsx(Box, { children: _jsx(Tile, { title: 'Item fill width', description: 'Description fill width', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Apps }) }) }), _jsx(Box, { lx: { alignItems: 'center', justifyContent: 'center' }, children: _jsx(Tile, { lx: { width: 's224' }, title: 'Long Item with fixed width', description: 'lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.', leadingContent: _jsx(Spot, { appearance: 'icon', icon: Plus }) }) })] })),
 };

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

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { PressableProps } from 'react-native';
+import { StyledPressableProps } from '../../../styles';
 export type TileProps = {
     /**
      * Custom content to display at the top (leading area) of the tile.
@@ -35,11 +35,11 @@ export type TileProps = {
     /**
      * Callback function when the tile is pressed.
      */
-    onPress?: PressableProps['onPress'];
+    onPress?: StyledPressableProps['onPress'];
     /**
      * Callback function when the tile is long pressed.
      * Can be used to perform secondary actions.
      */
-    onLongPress?: PressableProps['onLongPress'];
-} & Omit<PressableProps, 'onPress' | 'onLongPress' | 'disabled'>;
+    onLongPress?: StyledPressableProps['onLongPress'];
+} & Omit<StyledPressableProps, 'onPress' | 'onLongPress' | 'disabled'>;
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Tile/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,MAAM,SAAS,GAAG;IACtB;;;OAGG;IACH,cAAc,EAAE,SAAS,CAAC;IAC1B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B;;;;;OAKG;IACH,UAAU,CAAC,EAAE,eAAe,GAAG,MAAM,CAAC;IACtC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;IACpC;;;OAGG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC,aAAa,CAAC,CAAC;CAC7C,GAAG,IAAI,CAAC,cAAc,EAAE,SAAS,GAAG,aAAa,GAAG,UAAU,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Tile/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAEvD,MAAM,MAAM,SAAS,GAAG;IACtB;;;OAGG;IACH,cAAc,EAAE,SAAS,CAAC;IAC1B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B;;;;;OAKG;IACH,UAAU,CAAC,EAAE,eAAe,GAAG,MAAM,CAAC;IACtC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,oBAAoB,CAAC,SAAS,CAAC,CAAC;IAC1C;;;OAGG;IACH,WAAW,CAAC,EAAE,oBAAoB,CAAC,aAAa,CAAC,CAAC;CACnD,GAAG,IAAI,CAAC,oBAAoB,EAAE,SAAS,GAAG,aAAa,GAAG,UAAU,CAAC,CAAC"}

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

@@ -26,6 +26,14 @@ import type { TooltipProps, TooltipTriggerProps, TooltipContentProps } from './t
  * }
  */
 export declare const Tooltip: React.FC<TooltipProps>;
+/**
+ * The trigger element that opens the tooltip when pressed.
+ *
+ * @example
+ * <TooltipTrigger asChild>
+ *   <Button>Help</Button>
+ * </TooltipTrigger>
+ */
 export declare const TooltipTrigger: React.FC<TooltipTriggerProps>;
 export declare const TooltipContent: React.FC<TooltipContentProps>;
 //# sourceMappingURL=Tooltip.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAUvE,OAAO,KAAK,EACV,YAAY,EACZ,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,SAAS,CAAC;AAEjB;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA4B1C,CAAC;AAGF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAkCxD,CAAC;AAGF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAiBxD,CAAC"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAUvE,OAAO,KAAK,EACV,YAAY,EACZ,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,SAAS,CAAC;AAEjB;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA4B1C,CAAC;AAGF;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAmCxD,CAAC;AAGF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAiBxD,CAAC"}

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

@@ -43,7 +43,15 @@ export const Tooltip = ({ children, onOpenChange }) => {
     return (_jsx(TooltipContextProvider, { tooltipId: tooltipId, open: internalOpen, setOpen: setOpen, contentData: contentData, setContentData: setContentData, children: children }));
 };
 Tooltip.displayName = 'Tooltip';
-export const TooltipTrigger = ({ children, asChild = false, ...props }) => {
+/**
+ * The trigger element that opens the tooltip when pressed.
+ *
+ * @example
+ * <TooltipTrigger asChild>
+ *   <Button>Help</Button>
+ * </TooltipTrigger>
+ */
+export const TooltipTrigger = ({ children, asChild = false, style, ...props }) => {
     const { tooltipId, setOpen, contentData } = useTooltipSafeContext({
         consumerName: 'TooltipTrigger',
         contextRequired: true,
@@ -65,7 +73,7 @@ export const TooltipTrigger = ({ children, asChild = false, ...props }) => {
         }
     };
     const Comp = asChild ? SlotPressable : Pressable;
-    return (_jsx(Comp, { ...props, onPress: handlePress, children: children }));
+    return (_jsx(Comp, { ...props, style: style, onPress: handlePress, children: children }));
 };
 TooltipTrigger.displayName = 'TooltipTrigger';
 export const TooltipContent = ({ title, content, }) => {

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

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Tooltip/Tooltip.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAMvE,OAAO,EAAE,OAAO,EAAkC,MAAM,WAAW,CAAC;AAEpE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CAI9B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,CAAC,CAAC;AAEtC,eAAO,MAAM,IAAI,EAAE,KAiBlB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KA6B/B,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAuClC,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAqBhC,CAAC"}
+{"version":3,"file":"Tooltip.stories.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Tooltip/Tooltip.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAOvE,OAAO,EAAE,OAAO,EAAkC,MAAM,WAAW,CAAC;AAEpE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CAI9B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,CAAC,CAAC;AAEtC,eAAO,MAAM,IAAI,EAAE,KAwBlB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAoC/B,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAgDlC,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KA8BhC,CAAC"}

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

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Text, View } from 'react-native';
 import { Information } from '../../Symbols';
 import { Button } from '../Button';
 import { InteractiveIcon } from '../InteractiveIcon';
+import { Box } from '../Utility/Box';
+import { Text } from '../Utility/Text';
 import { GlobalTooltipBottomSheet } from './GlobalTooltipBottomSheet';
 import { Tooltip, TooltipTrigger, TooltipContent } from './Tooltip';
 const meta = {
@@ -12,16 +13,38 @@ const meta = {
 };
 export default meta;
 export const Base = {
-    render: () => (_jsxs(_Fragment, { children: [_jsx(View, { className: 'flex min-h-400 items-center justify-center p-24', children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { children: "Press me" }) }), _jsx(TooltipContent, { title: 'My tooltip title', content: _jsx(Text, { children: "This is a helpful tooltip" }) })] }) }), _jsx(GlobalTooltipBottomSheet, {})] })),
+    render: () => (_jsxs(_Fragment, { children: [_jsx(Box, { lx: {
+                    minHeight: 's400',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    padding: 's24',
+                }, children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { children: "Press me" }) }), _jsx(TooltipContent, { title: 'My tooltip title', content: _jsx(Text, { typography: 'body2', children: "This is a helpful tooltip" }) })] }) }), _jsx(GlobalTooltipBottomSheet, {})] })),
 };
 export const WithCustomContent = {
-    render: () => (_jsxs(_Fragment, { children: [_jsx(View, { className: 'flex min-h-400 items-center justify-center p-24', children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { children: "Press me" }) }), _jsx(TooltipContent, { title: 'My tooltip title', content: _jsxs(View, { className: 'flex items-start gap-12', children: [_jsx(Text, { className: 'text-muted', children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." }), _jsx(Button, { size: 'sm', appearance: 'accent', children: "Custom tooltip action" })] }) })] }) }), _jsx(GlobalTooltipBottomSheet, {})] })),
+    render: () => (_jsxs(_Fragment, { children: [_jsx(Box, { lx: {
+                    minHeight: 's400',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    padding: 's24',
+                }, children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { children: "Press me" }) }), _jsx(TooltipContent, { title: 'My tooltip title', content: _jsxs(Box, { lx: { alignItems: 'flex-start', gap: 's12' }, children: [_jsx(Text, { typography: 'body2', lx: { color: 'muted' }, children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." }), _jsx(Button, { size: 'sm', appearance: 'accent', children: "Custom tooltip action" })] }) })] }) }), _jsx(GlobalTooltipBottomSheet, {})] })),
 };
 export const WithMultipleTooltips = {
-    render: () => (_jsxs(_Fragment, { children: [_jsxs(View, { className: 'flex min-h-400 flex-row items-center justify-center gap-16 p-24', children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { children: "Tooltip 1" }) }), _jsx(TooltipContent, { title: 'First', content: _jsx(Text, { children: "First tooltip content" }) })] }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { children: "Tooltip 2" }) }), _jsx(TooltipContent, { title: 'Second', content: _jsx(Text, { children: "Second tooltip content" }) })] }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(InteractiveIcon, { iconType: 'filled', accessibilityLabel: 'Info', children: _jsx(Information, {}) }) }), _jsx(TooltipContent, { title: 'Third', content: _jsx(Text, { children: "Third tooltip content" }) })] })] }), _jsx(GlobalTooltipBottomSheet, {})] })),
+    render: () => (_jsxs(_Fragment, { children: [_jsxs(Box, { lx: {
+                    minHeight: 's400',
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    gap: 's16',
+                    padding: 's24',
+                }, children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { children: "Tooltip 1" }) }), _jsx(TooltipContent, { title: 'First', content: _jsx(Text, { typography: 'body2', children: "First tooltip content" }) })] }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { children: "Tooltip 2" }) }), _jsx(TooltipContent, { title: 'Second', content: _jsx(Text, { typography: 'body2', children: "Second tooltip content" }) })] }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(InteractiveIcon, { iconType: 'filled', accessibilityLabel: 'Info', children: _jsx(Information, {}) }) }), _jsx(TooltipContent, { title: 'Third', content: _jsx(Text, { typography: 'body2', children: "Third tooltip content" }) })] })] }), _jsx(GlobalTooltipBottomSheet, {})] })),
 };
 export const WithChangeCallback = {
     render: () => {
-        return (_jsxs(_Fragment, { children: [_jsx(View, { className: 'flex min-h-400 items-center justify-center p-24', children: _jsxs(Tooltip, { onOpenChange: (newOpen) => alert(`Opened changes to: ${newOpen}`), children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { children: "Press me" }) }), _jsx(TooltipContent, { title: 'My tooltip title', content: _jsx(Text, { children: "This is a helpful tooltip" }) })] }) }), _jsx(GlobalTooltipBottomSheet, {})] }));
+        return (_jsxs(_Fragment, { children: [_jsx(Box, { lx: {
+                        minHeight: 's400',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        padding: 's24',
+                    }, children: _jsxs(Tooltip, { onOpenChange: (newOpen) => alert(`Opened changes to: ${newOpen}`), children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { children: "Press me" }) }), _jsx(TooltipContent, { title: 'My tooltip title', content: _jsx(Text, { typography: 'body2', children: "This is a helpful tooltip" }) })] }) }), _jsx(GlobalTooltipBottomSheet, {})] }));
     },
 };

package/dist/src/lib/Components/Utility/Box/Box.d.ts

@@ -1,5 +1,4 @@
 import { View } from 'react-native';
-import { type StyledViewProps } from '../../../../styles';
 /**
  * Box - A layout primitive component with token-constrained style props.
  *
@@ -34,6 +33,7 @@ import { type StyledViewProps } from '../../../../styles';
  * <Box lx={{ marginTop: 's4' }} style={{ width: 127 }} />
  * ```
  */
-export declare const Box: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<import("../../../../styles").LumenViewStyleLX & import("react-native").ViewProps & import("react").RefAttributes<View>>>;
-export type BoxProps = StyledViewProps;
+export declare const Box: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<{
+    lx?: import("../../../../styles").LumenViewStyle;
+} & import("react-native").ViewProps & import("react").RefAttributes<View>>>;
 //# sourceMappingURL=Box.d.ts.map

package/dist/src/lib/Components/Utility/Box/Box.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/Utility/Box/Box.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAoB,KAAK,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE5E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,GAAG,wMAAyB,CAAC;AAE1C,MAAM,MAAM,QAAQ,GAAG,eAAe,CAAC"}
+{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/Utility/Box/Box.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAGpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,GAAG;;4EAAyB,CAAC"}

package/dist/src/lib/Components/Utility/Box/index.d.ts

@@ -1,2 +1,3 @@
 export * from './Box';
+export * from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/src/lib/Components/Utility/Box/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/Utility/Box/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/Utility/Box/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC"}

package/dist/src/lib/Components/Utility/Box/index.js

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

package/dist/src/lib/Components/Utility/Box/types.d.ts

@@ -0,0 +1,3 @@
+import { StyledViewProps } from '../../../../styles';
+export type BoxProps = StyledViewProps;
+//# sourceMappingURL=types.d.ts.map

package/dist/src/lib/Components/Utility/Box/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/Utility/Box/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,MAAM,QAAQ,GAAG,eAAe,CAAC"}

package/dist/src/lib/Components/Utility/Box/types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/lib/Components/Utility/Pressable/Pressable.d.ts

@@ -28,7 +28,9 @@
  * </Pressable>
  * ```
  */
-export declare const Pressable: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<import("../../../../styles").LumenPressableStyleLX & Omit<import("react-native").PressableProps, "style"> & {
-    style?: import("react-native").ViewStyle | ((state: import("react-native").PressableStateCallbackType) => import("react-native").ViewStyle) | (import("react-native").ViewStyle | ((state: import("react-native").PressableStateCallbackType) => import("react-native").ViewStyle) | (import("react-native").ViewStyle | ((state: import("react-native").PressableStateCallbackType) => import("react-native").ViewStyle) | (import("react-native").ViewStyle | ((state: import("react-native").PressableStateCallbackType) => import("react-native").ViewStyle) | (import("react-native").ViewStyle | ((state: import("react-native").PressableStateCallbackType) => import("react-native").ViewStyle) | (import("react-native").ViewStyle | ((state: import("react-native").PressableStateCallbackType) => import("react-native").ViewStyle) | (import("react-native").ViewStyle | ((state: import("react-native").PressableStateCallbackType) => import("react-native").ViewStyle) | (import("react-native").ViewStyle | ((state: import("react-native").PressableStateCallbackType) => import("react-native").ViewStyle) | (import("react-native").ViewStyle | ((state: import("react-native").PressableStateCallbackType) => import("react-native").ViewStyle) | (import("react-native").ViewStyle | ((state: import("react-native").PressableStateCallbackType) => import("react-native").ViewStyle) | (import("react-native").ViewStyle | ((state: import("react-native").PressableStateCallbackType) => import("react-native").ViewStyle) | (import("react-native").ViewStyle | ((state: import("react-native").PressableStateCallbackType) => import("react-native").ViewStyle) | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+export declare const Pressable: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<{
+    lx?: import("../../../../styles").LumenViewStyle;
+} & Omit<import("react-native").PressableProps, "style"> & {
+    style?: import("../../../../styles").PressableStyleItem;
 } & import("react").RefAttributes<import("react-native").View>>>;
 //# sourceMappingURL=Pressable.d.ts.map

package/dist/src/lib/Components/Utility/Pressable/Pressable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pressable.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/Utility/Pressable/Pressable.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,SAAS;;gEAAqC,CAAC"}
+{"version":3,"file":"Pressable.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/Utility/Pressable/Pressable.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,SAAS;;;;gEAAqC,CAAC"}

package/dist/src/lib/Components/Utility/Pressable/types.d.ts

@@ -1,3 +1,3 @@
-import { StyledPressableProps } from '../../../../styles';
-export type PressableProps = StyledPressableProps;
+import { StyledViewProps } from '../../../../styles';
+export type PressableProps = StyledViewProps;
 //# sourceMappingURL=types.d.ts.map

package/dist/src/lib/Components/Utility/Pressable/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/Utility/Pressable/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAE1D,MAAM,MAAM,cAAc,GAAG,oBAAoB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/Utility/Pressable/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,MAAM,cAAc,GAAG,eAAe,CAAC"}

package/dist/src/lib/Components/Utility/Text/Text.d.ts

@@ -1,5 +1,4 @@
 import { Text as RNText } from 'react-native';
-import { type StyledTextProps } from '../../../../styles';
 /**
  * Text - A typography component with typography support and token-constrained style props.
  *
@@ -33,8 +32,8 @@ import { type StyledTextProps } from '../../../../styles';
  * />
  * ```
  */
-export declare const Text: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<import("../../../../styles").LumenTextStyleLX & import("react-native").TextProps & {
+export declare const Text: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<{
+    lx?: import("../../../../styles").LumenTextStyle;
     typography?: keyof import("../../../../styles").LumenStyleSheetTheme["typographies"];
-} & import("react").RefAttributes<RNText>>>;
-export type TextProps = StyledTextProps;
+} & import("react-native").TextProps & import("react").RefAttributes<RNText>>>;
 //# sourceMappingURL=Text.d.ts.map

package/dist/src/lib/Components/Utility/Text/Text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/Utility/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,IAAI,MAAM,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAoB,KAAK,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE5E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,eAAO,MAAM,IAAI;uBArBV,iEAAqC;2CAqBA,CAAC;AAE7C,MAAM,MAAM,SAAS,GAAG,eAAe,CAAC"}
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/Utility/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,IAAI,MAAM,EAAE,MAAM,cAAc,CAAC;AAG9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,eAAO,MAAM,IAAI;;uBAJW,iEAIf;8EAA+B,CAAC"}

package/dist/src/lib/Components/Utility/Text/index.d.ts

@@ -1,3 +1,3 @@
 export * from './Text';
-export type { TextProps } from './Text';
+export type { TextProps } from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/src/lib/Components/Utility/Text/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/Utility/Text/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/Utility/Text/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,YAAY,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC"}

package/dist/src/lib/Components/Utility/Text/types.d.ts

@@ -0,0 +1,3 @@
+import { StyledTextProps } from '../../../../styles';
+export type TextProps = StyledTextProps;
+//# sourceMappingURL=types.d.ts.map

package/dist/src/lib/Components/Utility/Text/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/Utility/Text/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,MAAM,SAAS,GAAG,eAAe,CAAC"}

package/dist/src/lib/Components/Utility/Text/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -1,7 +1,4 @@
-import { FC, PropsWithChildren, ReactNode } from 'react';
-export type WrapProps = PropsWithChildren & {
-    if: boolean;
-    with: (children: ReactNode) => JSX.Element;
-};
+import { FC } from 'react';
+import { WrapProps } from './types';
 export declare const Wrap: FC<WrapProps>;
 //# sourceMappingURL=Wrap.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Wrap.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Wrap/Wrap.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzD,MAAM,MAAM,SAAS,GAAG,iBAAiB,GAAG;IAC1C,EAAE,EAAE,OAAO,CAAC;IACZ,IAAI,EAAE,CAAC,QAAQ,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;CAC5C,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CAM9B,CAAC"}
+{"version":3,"file":"Wrap.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Wrap/Wrap.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAC3B,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CAM9B,CAAC"}

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

@@ -0,0 +1,6 @@
+import { PropsWithChildren, ReactNode } from 'react';
+export type WrapProps = PropsWithChildren & {
+    if: boolean;
+    with: (children: ReactNode) => JSX.Element;
+};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Wrap/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAErD,MAAM,MAAM,SAAS,GAAG,iBAAiB,GAAG;IAC1C,EAAE,EAAE,OAAO,CAAC;IACZ,IAAI,EAAE,CAAC,QAAQ,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;CAC5C,CAAC"}

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

@@ -0,0 +1 @@
+export {};

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

@@ -9,7 +9,7 @@ export * from './IconButton';
 export * from './InteractiveIcon';
 export * from './Link';
 export * from './ListItem';
-export * from './Search';
+export * from './SearchInput';
 export * from './Select';
 export * from './Spot';
 export * from './Switch';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC"}

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

@@ -9,7 +9,7 @@ export * from './IconButton';
 export * from './InteractiveIcon';
 export * from './Link';
 export * from './ListItem';
-export * from './Search';
+export * from './SearchInput';
 export * from './Select';
 export * from './Spot';
 export * from './Switch';