@ornikar/bumper 2.8.0 → 2.8.1-canary.1768927687.5a0439490957cfbbe8b8c5136c5fc68b0828466d.0

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.8.1-canary.1768927687.5a0439490957cfbbe8b8c5136c5fc68b0828466d.0](https://github.com/ornikar/kitt/compare/@ornikar/bumper@2.8.0...@ornikar/bumper@2.8.1-canary.1768927687.5a0439490957cfbbe8b8c5136c5fc68b0828466d.0) (2026-01-20)
+
+
+### Features
+
+* **bumper:** add Image primitive [OSE-22653] ([#2854](https://github.com/ornikar/kitt/issues/2854)) ([ff6ef30](https://github.com/ornikar/kitt/commit/ff6ef30e9b68525d893591297955718f331d4c5f))
+* **bumper:** add ScrollView primitive [OSE-22231] ([#2853](https://github.com/ornikar/kitt/issues/2853)) ([c1657e6](https://github.com/ornikar/kitt/commit/c1657e677d375077e44e3908fa00afe3d9568ea1))
+* **bumper:** create Icon component OSE-22651 ([#2850](https://github.com/ornikar/kitt/issues/2850)) ([badab32](https://github.com/ornikar/kitt/commit/badab3252d3ed42a97dafa5084baca4c4c34c24b))
+* **bumper:** create TypographyIcon OSE-22633 ([#2855](https://github.com/ornikar/kitt/issues/2855)) ([297fe14](https://github.com/ornikar/kitt/commit/297fe148e19d80fa39a225fff62279ba901bc876))
+
+
+
 ## [2.8.0](https://github.com/ornikar/kitt/compare/@ornikar/bumper@2.7.1...@ornikar/bumper@2.8.0) (2026-01-19)
 
 

package/dist/definitions/index.d.ts

@@ -2,14 +2,19 @@ export { BumperDecorator } from './shared/storybook/BumperDecorator';
 export { BumperProvider } from './system/core/provider/BumperProvider';
 export type { CenterProps } from './system/core/primitives/Center';
 export { Center } from './system/core/primitives/Center';
+export type { ImageProps } from './system/core/primitives/Image/Image';
+export { Image } from './system/core/primitives/Image/Image';
 export type { PressableProps } from './system/core/primitives/Pressable';
 export { Pressable } from './system/core/primitives/Pressable';
+export type { ScrollViewProps } from './system/core/primitives/ScrollView/ScrollView';
+export { ScrollView } from './system/core/primitives/ScrollView/ScrollView';
 export type { HStackProps, StackProps, VStackProps } from './system/core/primitives/Stack';
 export { HStack, Stack, VStack } from './system/core/primitives/Stack';
 export type { ViewProps } from './system/core/primitives/View';
 export { View } from './system/core/primitives/View';
 export type { TypographyTextProps } from './system/content/typography/Typography';
 export { Typography } from './system/content/typography/Typography';
+export type { TypographyIconProps } from './system/content/typography/TypographyIcon';
 export { useBreakpointValue } from './system/core/breakpoints/hooks/useBreakpointValue';
 export { useCurrentBreakpointName } from './system/core/breakpoints/hooks/useCurrentBreakpointName';
 export { useWindowSize } from './system/core/breakpoints/hooks/useWindowSize';

package/dist/definitions/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AACrE,OAAO,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAGvE,YAAY,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AACzD,YAAY,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAC;AACzE,OAAO,EAAE,SAAS,EAAE,MAAM,oCAAoC,CAAC;AAC/D,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC3F,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAC;AACvE,YAAY,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAC/D,OAAO,EAAE,IAAI,EAAE,MAAM,+BAA+B,CAAC;AAGrD,YAAY,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAClF,OAAO,EAAE,UAAU,EAAE,MAAM,wCAAwC,CAAC;AAGpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,oDAAoD,CAAC;AACxF,OAAO,EAAE,wBAAwB,EAAE,MAAM,0DAA0D,CAAC;AACpG,OAAO,EAAE,aAAa,EAAE,MAAM,+CAA+C,CAAC;AAC9E,YAAY,EAAE,sBAAsB,EAAE,MAAM,4CAA4C,CAAC;AACzF,OAAO,EAAE,iBAAiB,EAAE,MAAM,4CAA4C,CAAC;AAC/E,YAAY,EAAE,kBAAkB,EAAE,MAAM,kDAAkD,CAAC;AAC3F,OAAO,EAAE,qBAAqB,EAAE,MAAM,kDAAkD,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AACrE,OAAO,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAGvE,YAAY,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AACzD,YAAY,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AACvE,OAAO,EAAE,KAAK,EAAE,MAAM,sCAAsC,CAAC;AAC7D,YAAY,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAC;AACzE,OAAO,EAAE,SAAS,EAAE,MAAM,oCAAoC,CAAC;AAC/D,YAAY,EAAE,eAAe,EAAE,MAAM,gDAAgD,CAAC;AACtF,OAAO,EAAE,UAAU,EAAE,MAAM,gDAAgD,CAAC;AAC5E,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC3F,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAC;AACvE,YAAY,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAC/D,OAAO,EAAE,IAAI,EAAE,MAAM,+BAA+B,CAAC;AAGrD,YAAY,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAClF,OAAO,EAAE,UAAU,EAAE,MAAM,wCAAwC,CAAC;AACpE,YAAY,EAAE,mBAAmB,EAAE,MAAM,4CAA4C,CAAC;AAGtF,OAAO,EAAE,kBAAkB,EAAE,MAAM,oDAAoD,CAAC;AACxF,OAAO,EAAE,wBAAwB,EAAE,MAAM,0DAA0D,CAAC;AACpG,OAAO,EAAE,aAAa,EAAE,MAAM,+CAA+C,CAAC;AAC9E,YAAY,EAAE,sBAAsB,EAAE,MAAM,4CAA4C,CAAC;AACzF,OAAO,EAAE,iBAAiB,EAAE,MAAM,4CAA4C,CAAC;AAC/E,YAAY,EAAE,kBAAkB,EAAE,MAAM,kDAAkD,CAAC;AAC3F,OAAO,EAAE,qBAAqB,EAAE,MAAM,kDAAkD,CAAC"}

package/dist/definitions/system/content/icon/Icon.d.ts

@@ -0,0 +1,18 @@
+import type { ColorTokens, GetProps, WithMediaProps } from '@tamagui/core';
+import type { ReactElement, ReactNode } from 'react';
+declare const IconContainer: import("@tamagui/core").TamaguiComponent<import("@tamagui/core").TamaDefer, import("@tamagui/core").TamaguiElement, import("@tamagui/core").RNTamaguiViewNonStyleProps, import("@tamagui/core").StackStyleBase, {
+    size?: import("@tamagui/core").SizeTokens | undefined;
+}, import("@tamagui/core").StaticConfigPublic>;
+type IconContainerProps = GetProps<typeof IconContainer>;
+interface InternalIconProps {
+    icon: ReactElement;
+    color?: ColorTokens;
+    size?: IconContainerProps['size'];
+    testID?: IconContainerProps['testID'];
+    /** @ignore */
+    alignSelf?: IconContainerProps['alignSelf'];
+}
+export type IconProps = InternalIconProps & WithMediaProps<InternalIconProps>;
+export declare function Icon({ icon, color, size, testID, alignSelf }: IconProps): ReactNode;
+export {};
+//# sourceMappingURL=Icon.d.ts.map

package/dist/definitions/system/content/icon/Icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../../src/system/content/icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE3E,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrD,QAAA,MAAM,aAAa;;8CAYjB,CAAC;AAEH,KAAK,kBAAkB,GAAG,QAAQ,CAAC,OAAO,aAAa,CAAC,CAAC;AAEzD,UAAU,iBAAiB;IACzB,IAAI,EAAE,YAAY,CAAC;IACnB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,IAAI,CAAC,EAAE,kBAAkB,CAAC,MAAM,CAAC,CAAC;IAClC,MAAM,CAAC,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IACtC,cAAc;IACd,SAAS,CAAC,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAC;CAC7C;AAED,MAAM,MAAM,SAAS,GAAG,iBAAiB,GAAG,cAAc,CAAC,iBAAiB,CAAC,CAAC;AAE9E,wBAAgB,IAAI,CAAC,EAAE,IAAI,EAAE,KAA0B,EAAE,IAAiB,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,SAAS,GAAG,SAAS,CAUrH"}

package/dist/definitions/system/content/typography/Typography.d.ts

@@ -1,6 +1,7 @@
-import type { GetProps, TamaguiComponent, WithMediaProps } from '@tamagui/core';
+import type { ColorTokens, GetProps, TamaguiComponent, WithMediaProps } from '@tamagui/core';
 import { type Except } from 'type-fest';
-import type { BodyFontVariants, ContentCapsVariants, FontVariants, HeadingFontVariants, LabelFontVariants } from '../../core/tokens/fonts';
+import type { BodyFontVariants, ContentCapsVariants, HeadingFontVariants, LabelFontVariants } from '../../core/tokens/fonts';
+import { TypographyIcon } from './TypographyIcon';
 type PropsWithoutMedia<A> = {
     [Key in keyof A as Key extends `$${string}` ? never : Key]?: A[Key];
 };
@@ -10,11 +11,10 @@ declare const InternalTypography: TamaguiComponent<import("@tamagui/core").TamaD
     weight?: "bold" | "semibold" | "regular" | undefined;
 }, import("@tamagui/core").StaticConfigPublic>;
 export type InternalTypographyProps = GetProps<typeof InternalTypography>;
-export type TypographyVariantContextValue = FontVariants | null;
-export type TypographyWeightContextValue = 'regular' | 'bold' | 'semibold' | null;
-export type TypograhyColorContextValue = InternalTypographyProps['color'] | null;
-type TypographyExcludedFontStyleProps = 'fontFamily' | 'fontSize' | 'lineHeight' | 'fontStyle' | 'fontVariant' | 'fontWeight';
-type TypographyPropsWithoutFontStyleProps = Except<InternalTypographyProps, TypographyExcludedFontStyleProps>;
+type TypographyExcludedFontStyleProps = 'fontFamily' | 'fontSize' | 'lineHeight' | 'fontStyle' | 'fontVariant' | 'fontWeight' | 'color';
+type TypographyPropsWithoutFontStyleProps = Except<InternalTypographyProps, TypographyExcludedFontStyleProps> & {
+    color: ColorTokens;
+};
 export interface BodyProps extends TypographyPropsWithoutFontStyleProps {
     variant?: BodyFontVariants;
     weight?: 'regular' | 'bold';
@@ -39,6 +39,7 @@ export declare const Typography: {
     Header4: TamaguiComponent<TypographyTextProps>;
     Header5: TamaguiComponent<TypographyTextProps>;
     Header6: TamaguiComponent<TypographyTextProps>;
+    Icon: typeof TypographyIcon;
 };
 export {};
 //# sourceMappingURL=Typography.d.ts.map

package/dist/definitions/system/content/typography/Typography.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Typography.d.ts","sourceRoot":"","sources":["../../../../../src/system/content/typography/Typography.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAuB,gBAAgB,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAGrG,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,KAAK,EACV,gBAAgB,EAChB,mBAAmB,EACnB,YAAY,EACZ,mBAAmB,EACnB,iBAAiB,EAClB,MAAM,yBAAyB,CAAC;AAIjC,KAAK,iBAAiB,CAAC,CAAC,IAAI;KAEzB,GAAG,IAAI,MAAM,CAAC,IAAI,GAAG,SAAS,IAAI,MAAM,EAAE,GAAG,KAAK,GAAG,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC;CACpE,CAAC;AAEF,KAAK,6BAA6B,CAAC,CAAC,IAAI,iBAAiB,CAAC,CAAC,CAAC,GAAG,cAAc,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC;AAEpG,QAAA,MAAM,kBAAkB;;;8CAgCtB,CAAC;AAEH,MAAM,MAAM,uBAAuB,GAAG,QAAQ,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAE1E,MAAM,MAAM,6BAA6B,GAAG,YAAY,GAAG,IAAI,CAAC;AAChE,MAAM,MAAM,4BAA4B,GAAG,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,IAAI,CAAC;AAClF,MAAM,MAAM,0BAA0B,GAAG,uBAAuB,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC;AAOjF,KAAK,gCAAgC,GACjC,YAAY,GACZ,UAAU,GACV,YAAY,GACZ,WAAW,GACX,aAAa,GACb,YAAY,CAAC;AAEjB,KAAK,oCAAoC,GAAG,MAAM,CAAC,uBAAuB,EAAE,gCAAgC,CAAC,CAAC;AAE9G,MAAM,WAAW,SAAU,SAAQ,oCAAoC;IACrE,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,MAAM,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;CAC7B;AACD,MAAM,WAAW,iBAAkB,SAAQ,oCAAoC;IAC7E,OAAO,EAAE,mBAAmB,GAAG,iBAAiB,CAAC;IACjD,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB;AACD,MAAM,WAAW,gBAAiB,SAAQ,oCAAoC;IAC5E,OAAO,EAAE,mBAAmB,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,MAAM,mBAAmB,GAC3B,6BAA6B,CAAC,SAAS,CAAC,GACxC,6BAA6B,CAAC,iBAAiB,CAAC,GAChD,6BAA6B,CAAC,gBAAgB,CAAC,CAAC;AAuDpD,eAAO,MAAM,UAAU;;;;;;;;;;;CAQtB,CAAC"}
+{"version":3,"file":"Typography.d.ts","sourceRoot":"","sources":["../../../../../src/system/content/typography/Typography.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAuB,gBAAgB,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAElH,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,KAAK,EACV,gBAAgB,EAChB,mBAAmB,EAEnB,mBAAmB,EACnB,iBAAiB,EAClB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAclD,KAAK,iBAAiB,CAAC,CAAC,IAAI;KAEzB,GAAG,IAAI,MAAM,CAAC,IAAI,GAAG,SAAS,IAAI,MAAM,EAAE,GAAG,KAAK,GAAG,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC;CACpE,CAAC;AAEF,KAAK,6BAA6B,CAAC,CAAC,IAAI,iBAAiB,CAAC,CAAC,CAAC,GAAG,cAAc,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC;AAEpG,QAAA,MAAM,kBAAkB;;;8CAgCtB,CAAC;AAEH,MAAM,MAAM,uBAAuB,GAAG,QAAQ,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAG1E,KAAK,gCAAgC,GACjC,YAAY,GACZ,UAAU,GACV,YAAY,GACZ,WAAW,GACX,aAAa,GACb,YAAY,GACZ,OAAO,CAAC;AAEZ,KAAK,oCAAoC,GAAG,MAAM,CAAC,uBAAuB,EAAE,gCAAgC,CAAC,GAAG;IAC9G,KAAK,EAAE,WAAW,CAAC;CACpB,CAAC;AAEF,MAAM,WAAW,SAAU,SAAQ,oCAAoC;IACrE,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,MAAM,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;CAC7B;AACD,MAAM,WAAW,iBAAkB,SAAQ,oCAAoC;IAC7E,OAAO,EAAE,mBAAmB,GAAG,iBAAiB,CAAC;IACjD,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB;AACD,MAAM,WAAW,gBAAiB,SAAQ,oCAAoC;IAC5E,OAAO,EAAE,mBAAmB,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,MAAM,mBAAmB,GAC3B,6BAA6B,CAAC,SAAS,CAAC,GACxC,6BAA6B,CAAC,iBAAiB,CAAC,GAChD,6BAA6B,CAAC,gBAAgB,CAAC,CAAC;AA0DpD,eAAO,MAAM,UAAU;;;;;;;;;;;;CAStB,CAAC"}

package/dist/definitions/system/content/typography/TypographyIcon.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from 'react';
+import type { Except } from 'type-fest';
+import type { IconProps } from '../icon/Icon';
+import type { TypographyTextProps } from './Typography';
+export interface TypographyIconProps extends Except<IconProps, 'color'> {
+    color?: TypographyTextProps['color'];
+}
+export declare function TypographyIcon({ color, ...props }: TypographyIconProps): ReactNode;
+//# sourceMappingURL=TypographyIcon.d.ts.map

package/dist/definitions/system/content/typography/TypographyIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TypographyIcon.d.ts","sourceRoot":"","sources":["../../../../../src/system/content/typography/TypographyIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAIxD,MAAM,WAAW,mBAAoB,SAAQ,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC;IACrE,KAAK,CAAC,EAAE,mBAAmB,CAAC,OAAO,CAAC,CAAC;CACtC;AAgBD,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,GAAG,SAAS,CAMlF"}

package/dist/definitions/system/content/typography/TypographyView.d.ts

@@ -0,0 +1,18 @@
+import type { GetProps } from '@tamagui/core';
+import type { ReactNode } from 'react';
+declare const InternalTypographyView: import("@tamagui/core").TamaguiComponent<import("@tamagui/core").TamaDefer, import("@tamagui/core").TamaguiElement, import("@tamagui/core").RNTamaguiViewNonStyleProps, import("@tamagui/core").StackStyleBase, {}, import("@tamagui/core").StaticConfigPublic>;
+type TypographyViewProps = GetProps<typeof InternalTypographyView>;
+/**
+ *
+ * A wrapper component that applies typography styles to its children in order to maintain consistent style between web and native
+ * In native, it simply renders a View as it renders correctly by default
+ * In web, it ensures that the display is set to inline-flex when inside a Typography context
+ *
+ * React Native Web includes this implementation in its codebase
+ * but Tamagui does not use React Native Webview, we need to implement it ourselves
+ *
+ * Inside a Typography component, always use TypographyView to wrap external components like Icon or Svg
+ */
+export declare function TypographyView(props: TypographyViewProps): ReactNode;
+export {};
+//# sourceMappingURL=TypographyView.d.ts.map

package/dist/definitions/system/content/typography/TypographyView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TypographyView.d.ts","sourceRoot":"","sources":["../../../../../src/system/content/typography/TypographyView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAE9C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,QAAA,MAAM,sBAAsB,iQAE1B,CAAC;AAEH,KAAK,mBAAmB,GAAG,QAAQ,CAAC,OAAO,sBAAsB,CAAC,CAAC;AAEnE;;;;;;;;;;GAUG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,GAAG,SAAS,CAWpE"}

package/dist/definitions/system/content/typography/utils/getVariantAndWeightValues.d.ts

@@ -1,5 +1,6 @@
 import type { FontVariants } from '../../../core/tokens/fonts';
-import type { InternalTypographyProps, TypographyTextProps, TypographyVariantContextValue, TypographyWeightContextValue } from '../Typography';
+import type { InternalTypographyProps, TypographyTextProps } from '../Typography';
+import type { TypographyVariantContextValue, TypographyWeightContextValue } from './typographyContext';
 interface VariantAndWeightValues {
     weight: InternalTypographyProps['weight'] | undefined;
     variant: FontVariants | undefined;

package/dist/definitions/system/content/typography/utils/getVariantAndWeightValues.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getVariantAndWeightValues.d.ts","sourceRoot":"","sources":["../../../../../../src/system/content/typography/utils/getVariantAndWeightValues.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE/D,OAAO,KAAK,EACV,uBAAuB,EACvB,mBAAmB,EACnB,6BAA6B,EAC7B,4BAA4B,EAC7B,MAAM,eAAe,CAAC;AAEvB,UAAU,sBAAsB;IAC9B,MAAM,EAAE,uBAAuB,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC;IACtD,OAAO,EAAE,YAAY,GAAG,SAAS,CAAC;CACnC;AAED,wBAAgB,yBAAyB,CACvC,UAAU,EAAE,mBAAmB,CAAC,QAAQ,CAAC,EACzC,WAAW,EAAE,mBAAmB,CAAC,SAAS,CAAC,EAC3C,6BAA6B,EAAE,4BAA4B,EAC3D,8BAA8B,EAAE,6BAA6B,GAC5D,sBAAsB,CAuBxB"}
+{"version":3,"file":"getVariantAndWeightValues.d.ts","sourceRoot":"","sources":["../../../../../../src/system/content/typography/utils/getVariantAndWeightValues.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE/D,OAAO,KAAK,EAAE,uBAAuB,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAClF,OAAO,KAAK,EAAE,6BAA6B,EAAE,4BAA4B,EAAE,MAAM,qBAAqB,CAAC;AAEvG,UAAU,sBAAsB;IAC9B,MAAM,EAAE,uBAAuB,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC;IACtD,OAAO,EAAE,YAAY,GAAG,SAAS,CAAC;CACnC;AAED,wBAAgB,yBAAyB,CACvC,UAAU,EAAE,mBAAmB,CAAC,QAAQ,CAAC,EACzC,WAAW,EAAE,mBAAmB,CAAC,SAAS,CAAC,EAC3C,6BAA6B,EAAE,4BAA4B,EAC3D,8BAA8B,EAAE,6BAA6B,GAC5D,sBAAsB,CAuBxB"}

package/dist/definitions/system/content/typography/utils/typographyContext.d.ts

@@ -0,0 +1,16 @@
+import type { FontVariants } from '../../../core/tokens/fonts';
+import type { TypographyTextProps } from '../Typography';
+export type TypographyVariantContextValue = FontVariants | null;
+export type TypographyWeightContextValue = 'regular' | 'bold' | 'semibold' | null;
+export type TypograhyColorContextValue = TypographyTextProps['color'] | null;
+type TypographyContextValue = boolean;
+export declare const TypographyVariantContext: import("react").Context<TypographyVariantContextValue>;
+export declare const TypographyWeightContext: import("react").Context<TypographyWeightContextValue>;
+export declare const TypograhyColorContext: import("react").Context<TypograhyColorContextValue>;
+export declare const TypographyContext: import("react").Context<boolean>;
+export declare const useTypographyColor: () => TypograhyColorContextValue;
+export declare const useTypographyVariant: () => TypographyVariantContextValue;
+export declare const useTypographyWeight: () => TypographyWeightContextValue;
+export declare const useTypographyContext: () => TypographyContextValue;
+export {};
+//# sourceMappingURL=typographyContext.d.ts.map

package/dist/definitions/system/content/typography/utils/typographyContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typographyContext.d.ts","sourceRoot":"","sources":["../../../../../../src/system/content/typography/utils/typographyContext.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAEzD,MAAM,MAAM,6BAA6B,GAAG,YAAY,GAAG,IAAI,CAAC;AAChE,MAAM,MAAM,4BAA4B,GAAG,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,IAAI,CAAC;AAClF,MAAM,MAAM,0BAA0B,GAAG,mBAAmB,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC;AAC7E,KAAK,sBAAsB,GAAG,OAAO,CAAC;AAEtC,eAAO,MAAM,wBAAwB,wDAAqD,CAAC;AAC3F,eAAO,MAAM,uBAAuB,uDAAoD,CAAC;AACzF,eAAO,MAAM,qBAAqB,qDAAkD,CAAC;AACrF,eAAO,MAAM,iBAAiB,kCAAgC,CAAC;AAE/D,eAAO,MAAM,kBAAkB,QAAO,0BAErC,CAAC;AAEF,eAAO,MAAM,oBAAoB,QAAO,6BAEvC,CAAC;AAEF,eAAO,MAAM,mBAAmB,QAAO,4BAEtC,CAAC;AAEF,eAAO,MAAM,oBAAoB,QAAO,sBAEvC,CAAC"}

package/dist/definitions/system/core/primitives/Image/Image.d.ts

@@ -0,0 +1,3 @@
+export type { ImageProps } from '@tamagui/image';
+export { Image } from '@tamagui/image';
+//# sourceMappingURL=Image.d.ts.map

package/dist/definitions/system/core/primitives/Image/Image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../../../../src/system/core/primitives/Image/Image.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/definitions/system/core/primitives/ScrollView/ScrollView.d.ts

@@ -0,0 +1,3 @@
+export type { ScrollViewProps } from '@tamagui/scroll-view';
+export { ScrollView } from '@tamagui/scroll-view';
+//# sourceMappingURL=ScrollView.d.ts.map

package/dist/definitions/system/core/primitives/ScrollView/ScrollView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollView.d.ts","sourceRoot":"","sources":["../../../../../../src/system/core/primitives/ScrollView/ScrollView.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/index-metro.es.android.js

@@ -1,10 +1,12 @@
 import { makeDecorator } from '@storybook/preview-api';
-import { createFont, createTokens, createTamagui, TamaguiProvider, styled, View, Stack, Text, useMedia } from '@tamagui/core';
+import { createFont, createTokens, createTamagui, TamaguiProvider, styled, View, Stack, useStyle, Text, useMedia } from '@tamagui/core';
 export { Stack, View } from '@tamagui/core';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { jsx } from 'react/jsx-runtime';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { useContext, createContext, useMemo } from 'react';
+import { cloneElement, createContext, useContext, useMemo } from 'react';
+export { Image } from '@tamagui/image';
+export { ScrollView } from '@tamagui/scroll-view';
 export { useWindowDimensions as useWindowSize } from 'react-native';
 
 const createColorScale = colorScale => colorScale;
@@ -405,7 +407,7 @@ const Center = styled(View, {
   alignItems: 'center'
 });
 
-const _excluded = ["as"];
+const _excluded$1 = ["as"];
 /**
  * A polymorphic Pressable component that can render as any Tamagui primitive.
  */
@@ -413,7 +415,7 @@ function Pressable(_ref) {
   let {
       as
     } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded);
+    rest = _objectWithoutProperties(_ref, _excluded$1);
   const Component = styled(as !== null && as !== void 0 ? as : View, {
     name: 'Pressable',
     role: 'button',
@@ -431,6 +433,107 @@ const VStack = styled(Stack, {
   flexDirection: 'column'
 });
 
+const IconContainer = styled(View, {
+  name: 'Icon',
+  variants: {
+    size: {
+      '...size': (size, {
+        tokens
+      }) => {
+        return {
+          width: tokens.size[size],
+          height: tokens.size[size]
+        };
+      }
+    }
+  }
+});
+function Icon({
+  icon,
+  color = '$content.base.hi',
+  size = '$size.20',
+  testID,
+  alignSelf
+}) {
+  const style = useStyle({
+    color
+  });
+  const clonedIcon = /*#__PURE__*/cloneElement(icon, {
+    color: style.color
+  });
+  return /*#__PURE__*/jsx(IconContainer, {
+    size: size,
+    testID: testID,
+    alignSelf: alignSelf,
+    children: clonedIcon
+  });
+}
+
+const TypographyVariantContext = /*#__PURE__*/createContext(null);
+const TypographyWeightContext = /*#__PURE__*/createContext(null);
+const TypograhyColorContext = /*#__PURE__*/createContext(null);
+const TypographyContext = /*#__PURE__*/createContext(false);
+const useTypographyColor = () => {
+  return useContext(TypograhyColorContext);
+};
+const useTypographyVariant = () => {
+  return useContext(TypographyVariantContext);
+};
+const useTypographyWeight = () => {
+  return useContext(TypographyWeightContext);
+};
+const useTypographyContext = () => {
+  return useContext(TypographyContext);
+};
+
+const InternalTypographyView = styled(View, {
+  name: 'TypographyView'
+});
+/**
+ *
+ * A wrapper component that applies typography styles to its children in order to maintain consistent style between web and native
+ * In native, it simply renders a View as it renders correctly by default
+ * In web, it ensures that the display is set to inline-flex when inside a Typography context
+ *
+ * React Native Web includes this implementation in its codebase
+ * but Tamagui does not use React Native Webview, we need to implement it ourselves
+ *
+ * Inside a Typography component, always use TypographyView to wrap external components like Icon or Svg
+ */
+function TypographyView(props) {
+  const isInTypographyContext = useTypographyContext();
+  return /*#__PURE__*/jsx(InternalTypographyView, _objectSpread(_objectSpread({}, props), {}, {
+    "$platform-web": isInTypographyContext ? _objectSpread(_objectSpread({}, props['$platform-web']), {}, {
+      display: 'inline-flex'
+    }) : props['$platform-web']
+  }));
+}
+
+const _excluded = ["color"];
+function TypographyIconInternal(props) {
+  return /*#__PURE__*/jsx(TypographyView, {
+    children: /*#__PURE__*/jsx(Icon, _objectSpread({}, props))
+  });
+}
+function TypographyIconInheritColor(props) {
+  const typographyColorAncestorValue = useTypographyColor();
+  return /*#__PURE__*/jsx(TypographyIconInternal, _objectSpread({
+    color: typographyColorAncestorValue || undefined
+  }, props));
+}
+function TypographyIcon(_ref) {
+  let {
+      color
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  if (color) {
+    return /*#__PURE__*/jsx(TypographyIconInternal, _objectSpread({
+      color: color
+    }, props));
+  }
+  return /*#__PURE__*/jsx(TypographyIconInheritColor, _objectSpread({}, props));
+}
+
 function getVariantAndWeightValues(weightProp, variantProp, typographyWeightAncestorValue, typographyVariantAncestorValue) {
   const computedVariant = variantProp || typographyVariantAncestorValue || undefined;
   if (computedVariant) {
@@ -501,16 +604,14 @@ const InternalTypography = styled(Text, {
     weight: 'regular'
   }
 });
-const TypographyVariantContext = /*#__PURE__*/createContext(null);
-const TypographyWeightContext = /*#__PURE__*/createContext(null);
-const TypograhyColorContext = /*#__PURE__*/createContext(null);
 
 // Remove font-related style props from InternalTypography Props
 
 const TypographyBase = InternalTypography.styleable((props, ref) => {
-  const typographyVariantAncestorValue = useContext(TypographyVariantContext);
-  const typographyWeightAncestorValue = useContext(TypographyWeightContext);
-  const typographyColorAncestorValue = useContext(TypograhyColorContext);
+  const typographyVariantAncestorValue = useTypographyVariant();
+  const typographyWeightAncestorValue = useTypographyWeight();
+  const typographyColorAncestorValue = useTypographyColor();
+  const typographyContext = useTypographyContext();
   const {
     variant,
     weight
@@ -523,6 +624,10 @@ const TypographyBase = InternalTypography.styleable((props, ref) => {
     weight: weight,
     variant: variant
   }));
+  content = typographyContext ? content : /*#__PURE__*/jsx(TypographyContext.Provider, {
+    value: true,
+    children: content
+  });
 
   // If a variant is provided, we set it in the context for children to be able to inherit variant value
   content = props.variant ? /*#__PURE__*/jsx(TypographyVariantContext.Provider, {
@@ -560,7 +665,8 @@ const Typography = {
   Header3: createHeading(3),
   Header4: createHeading(4),
   Header5: createHeading(5),
-  Header6: createHeading(6)
+  Header6: createHeading(6),
+  Icon: TypographyIcon
 };
 
 function getValueForBreakpoint(breakpoint, {