@ornikar/bumper 2.8.1-canary.1768839311.501438316959a9593513e74c70cb87b0597f2db6.0 → 2.8.1-canary.1769087114.a46790da1b5b6361954b6ad25766074d3ed69784.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ornikar/bumper",
-  "version": "2.8.1-canary.1768839311.501438316959a9593513e74c70cb87b0597f2db6.0",
+  "version": "2.8.1-canary.1769087114.a46790da1b5b6361954b6ad25766074d3ed69784.0",
   "license": "MIT",
   "repository": {
     "directory": "@ornikar/bumper",
@@ -28,14 +28,15 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.24.0",
-    "@ornikar/kitt-icons": "14.3.2-canary.1768839311.501438316959a9593513e74c70cb87b0597f2db6.0",
+    "@ornikar/kitt-icons": "^14.3.1",
     "@tamagui/core": "1.144.2",
+    "@tamagui/image": "1.144.2",
     "@tamagui/scroll-view": "1.144.2"
   },
   "peerDependencies": {
     "@storybook/preview-api": ">=8.6.15",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-native": ">=0.76.9"
   },
   "peerDependenciesMeta": {
@@ -53,13 +54,13 @@
     "@babel/core": "7.27.1",
     "@phosphor-icons/core": "2.1.1",
     "@testing-library/dom": "10.4.1",
-    "@testing-library/react": "16.3.1",
+    "@testing-library/react": "16.3.2",
     "@testing-library/react-native": "13.3.3",
-    "@types/react": "19.0.10",
-    "react": "19.0.0",
-    "react-dom": "19.0.0",
-    "react-native": "0.79.6",
-    "react-test-renderer": "19.0.0"
+    "@types/react": "18.3.27",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-native": "0.76.9",
+    "react-test-renderer": "18.3.1"
   },
   "expo": {},
   "exports": {

package/src/index.ts

@@ -4,6 +4,8 @@ export { BumperProvider } from './system/core/provider/BumperProvider';
 // Primitives
 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';
@@ -14,8 +16,10 @@ export type { ViewProps } from './system/core/primitives/View';
 export { View } from './system/core/primitives/View';
 
 // Typography
+export { Typography } from './system/content/typography';
 export type { TypographyTextProps } from './system/content/typography/Typography';
-export { Typography } from './system/content/typography/Typography';
+export type { TypographyIconProps } from './system/content/typography/TypographyIcon';
+export type { TypographyLinkProps } from './system/content/typography/TypographyLink';
 
 // Breakpoints
 export { useBreakpointValue } from './system/core/breakpoints/hooks/useBreakpointValue';

package/src/shared/storybook/StoryTitle.tsx

@@ -1,5 +1,5 @@
 import { styled } from '@tamagui/core';
-import { Typography } from '../../system/content/typography/Typography';
+import { Typography } from '../../system/content/typography';
 
 export const StoryTitle = styled(Typography.Text, {
   variants: {

package/src/shared/storybook/helpers/argsHelpers.ts

@@ -0,0 +1,47 @@
+import type { ArgTypes } from '@storybook/react';
+import {
+  SEMANTIC_TOKENS_BACKGROUND,
+  SEMANTIC_TOKENS_BORDER,
+  SEMANTIC_TOKENS_CONTENT,
+} from '../../../system/core/themes/themes';
+import { radiusTokens } from '../../../system/core/tokens/radius';
+import { sizeTokens } from '../../../system/core/tokens/size';
+import { spaceTokens } from '../../../system/core/tokens/space';
+
+const getTokenKey = (name: string) => `$${name}`;
+
+export const backgroundColorArgType: ArgTypes[string] = {
+  control: 'select',
+  options: SEMANTIC_TOKENS_BACKGROUND.map(getTokenKey),
+  description: 'Background color (semantic theme token)',
+};
+
+export const spaceArgType: ArgTypes[string] = {
+  control: 'select',
+  options: Object.keys(spaceTokens).map(getTokenKey),
+  description: 'Space value (space token)',
+};
+
+export const sizeArgType: ArgTypes[string] = {
+  control: 'select',
+  options: Object.keys(sizeTokens).map(getTokenKey),
+  description: 'Size value (size token)',
+};
+
+export const radiusArgType: ArgTypes[string] = {
+  control: 'select',
+  options: Object.keys(radiusTokens).map(getTokenKey),
+  description: 'Border radius (radius token)',
+};
+
+export const contentColorArgType: ArgTypes[string] = {
+  control: 'select',
+  options: SEMANTIC_TOKENS_CONTENT.map(getTokenKey),
+  description: 'Content color (semantic theme token)',
+};
+
+export const borderColorArgType: ArgTypes[string] = {
+  control: 'select',
+  options: SEMANTIC_TOKENS_BORDER.map(getTokenKey),
+  description: 'Border color (semantic theme token)',
+};

package/src/system/content/icon/Icon.features.stories.tsx

@@ -6,7 +6,7 @@ import {
 } from '@ornikar/kitt-icons/phosphor';
 import type { Meta, StoryObj } from '@storybook/react';
 import { HStack, VStack } from '../../core/primitives/Stack';
-import { Typography } from '../typography/Typography';
+import { Typography } from '../typography';
 import { Icon } from './Icon';
 
 const meta: Meta<typeof Icon> = {

package/src/system/content/icon/Icon.stories.tsx

@@ -1,5 +1,6 @@
 import { StarRegularIcon } from '@ornikar/kitt-icons/phosphor';
 import type { Meta, StoryObj } from '@storybook/react';
+import { contentColorArgType, sizeArgType } from '../../../shared/storybook/helpers/argsHelpers';
 import { Icon } from './Icon';
 
 const meta: Meta<typeof Icon> = {
@@ -7,28 +8,8 @@ const meta: Meta<typeof Icon> = {
   component: Icon,
   tags: ['autodocs'],
   argTypes: {
-    size: {
-      control: 'select',
-      options: ['$size.16', '$size.20', '$size.24', '$size.32', '$size.48', '$size.64', '$size.80', '$size.96'],
-      description: 'Icon size (uses size tokens)',
-    },
-    color: {
-      control: 'select',
-      options: [
-        '$content.base.low',
-        '$content.base.mid',
-        '$content.base.hi',
-        '$content.accent',
-        '$content.promo',
-        '$content.info',
-        '$content.success',
-        '$content.warning',
-        '$content.danger',
-        '$content.muted',
-        '$content.disabled',
-      ],
-      description: 'Icon color (semantic theme token)',
-    },
+    size: sizeArgType,
+    color: contentColorArgType,
   },
 };
 

package/src/system/content/icon/Icon.tsx

@@ -19,12 +19,8 @@ const IconContainer = styled(View, {
 
 type IconContainerProps = GetProps<typeof IconContainer>;
 
-interface IconElementProps {
-  color?: ColorTokens;
-}
-
-interface IconProps {
-  icon: ReactElement<IconElementProps>;
+interface InternalIconProps {
+  icon: ReactElement;
   color?: ColorTokens;
   size?: IconContainerProps['size'];
   testID?: IconContainerProps['testID'];
@@ -32,15 +28,9 @@ interface IconProps {
   alignSelf?: IconContainerProps['alignSelf'];
 }
 
-type IconWithMediaProps = IconProps & WithMediaProps<IconProps>;
+export type IconProps = InternalIconProps & WithMediaProps<InternalIconProps>;
 
-export function Icon({
-  icon,
-  color = '$content.base.hi',
-  size = '$size.20',
-  testID,
-  alignSelf,
-}: IconWithMediaProps): ReactNode {
+export function Icon({ icon, color = '$content.base.hi', size = '$size.20', testID, alignSelf }: IconProps): ReactNode {
   const style = useStyle({ color });
 
   const clonedIcon = cloneElement(icon, { color: style.color });

package/src/system/content/icon/__snapshots_web__/Icon.features.stories.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Bumper/Content/Icon/Features Colors 1`] = `
 <DocumentFragment>
   <div
-    class="css-view-g5y9jx r-flex-13awgt0"
+    class="css-view-175oi2r r-flex-13awgt0"
   >
     <span
       class=""
@@ -175,7 +175,7 @@ exports[`Bumper/Content/Icon/Features Colors 1`] = `
 exports[`Bumper/Content/Icon/Features Sizes 1`] = `
 <DocumentFragment>
   <div
-    class="css-view-g5y9jx r-flex-13awgt0"
+    class="css-view-175oi2r r-flex-13awgt0"
   >
     <span
       class=""

package/src/system/content/icon/__snapshots_web__/Icon.stories.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Bumper/Content/Icon Default 1`] = `
 <DocumentFragment>
   <div
-    class="css-view-g5y9jx r-flex-13awgt0"
+    class="css-view-175oi2r r-flex-13awgt0"
   >
     <span
       class=""

package/src/system/content/typography/Typography.features.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { VStack } from '../../core/primitives/Stack';
-import { Typography } from './Typography';
+import { Typography } from '.';
 
 const meta: Meta<typeof Typography.Text> = {
   title: 'Bumper/Content/Typography/Features',

package/src/system/content/typography/Typography.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { Typography } from './Typography';
+import { contentColorArgType } from '../../../shared/storybook/helpers/argsHelpers';
+import { Typography } from '.';
 
 const meta: Meta<typeof Typography.Text> = {
   title: 'Bumper/Content/Typography',
@@ -40,28 +41,7 @@ const meta: Meta<typeof Typography.Text> = {
       options: ['regular', 'semibold', 'bold'],
       description: 'Font weight (note: heading/label/content-caps variants have fixed weights)',
     },
-    color: {
-      control: 'select',
-      options: [
-        '$content.base.low',
-        '$content.base.mid',
-        '$content.base.hi',
-        '$content.base.onContrasted.low',
-        '$content.base.onContrasted.mid',
-        '$content.base.onContrasted.hi',
-        '$content.accent',
-        '$content.promo',
-        '$content.promo.onContrasted',
-        '$content.info',
-        '$content.success',
-        '$content.warning',
-        '$content.danger',
-        '$content.muted',
-        '$content.disabled',
-        '$content.disabled.onContrasted',
-      ],
-      description: 'Text color (semantic theme token)',
-    },
+    color: contentColorArgType,
   },
 };
 

package/src/system/content/typography/Typography.tsx

@@ -1,6 +1,5 @@
-import type { GetProps, GetThemeValueForKey, TamaguiComponent, WithMediaProps } from '@tamagui/core';
+import type { ColorTokens, GetProps, GetThemeValueForKey, TamaguiComponent, WithMediaProps } from '@tamagui/core';
 import { Text, styled } from '@tamagui/core';
-import { createContext, useContext } from 'react';
 import { type Except } from 'type-fest';
 import type {
   BodyFontVariants,
@@ -10,6 +9,16 @@ import type {
   LabelFontVariants,
 } from '../../core/tokens/fonts';
 import { getVariantAndWeightValues } from './utils/getVariantAndWeightValues';
+import {
+  TypograhyColorContext,
+  TypographyContext,
+  TypographyVariantContext,
+  TypographyWeightContext,
+  useTypographyColor,
+  useTypographyContext,
+  useTypographyVariant,
+  useTypographyWeight,
+} from './utils/typographyContext';
 
 // Should use type from tamagui (PropsWithoutMediaStyles) when fixed: https://github.com/tamagui/tamagui/pull/3783
 type PropsWithoutMedia<A> = {
@@ -55,14 +64,6 @@ const InternalTypography = styled(Text, {
 
 export type InternalTypographyProps = GetProps<typeof InternalTypography>;
 
-export type TypographyVariantContextValue = FontVariants | null;
-export type TypographyWeightContextValue = 'regular' | 'bold' | 'semibold' | null;
-export type TypograhyColorContextValue = InternalTypographyProps['color'] | null;
-
-const TypographyVariantContext = createContext<TypographyVariantContextValue>(null);
-const TypographyWeightContext = createContext<TypographyWeightContextValue>(null);
-const TypograhyColorContext = createContext<TypograhyColorContextValue>(null);
-
 // Remove font-related style props from InternalTypography Props
 type TypographyExcludedFontStyleProps =
   | 'fontFamily'
@@ -70,9 +71,12 @@ type TypographyExcludedFontStyleProps =
   | 'lineHeight'
   | 'fontStyle'
   | 'fontVariant'
-  | 'fontWeight';
+  | 'fontWeight'
+  | 'color';
 
-type TypographyPropsWithoutFontStyleProps = Except<InternalTypographyProps, TypographyExcludedFontStyleProps>;
+type TypographyPropsWithoutFontStyleProps = Except<InternalTypographyProps, TypographyExcludedFontStyleProps> & {
+  color: ColorTokens;
+};
 
 export interface BodyProps extends TypographyPropsWithoutFontStyleProps {
   variant?: BodyFontVariants;
@@ -92,10 +96,11 @@ export type TypographyTextProps =
   | OverrideTamaguiComponentProps<HeadingLabelProps>
   | OverrideTamaguiComponentProps<ContentCapsProps>;
 
-const TypographyBase = InternalTypography.styleable<TypographyTextProps, TypographyTextProps>((props, ref) => {
-  const typographyVariantAncestorValue = useContext(TypographyVariantContext);
-  const typographyWeightAncestorValue = useContext(TypographyWeightContext);
-  const typographyColorAncestorValue = useContext(TypograhyColorContext);
+export const TypographyBase = InternalTypography.styleable<TypographyTextProps, TypographyTextProps>((props, ref) => {
+  const typographyVariantAncestorValue = useTypographyVariant();
+  const typographyWeightAncestorValue = useTypographyWeight();
+  const typographyColorAncestorValue = useTypographyColor();
+  const typographyContext = useTypographyContext();
 
   const { variant, weight } = getVariantAndWeightValues(
     props.weight,
@@ -115,6 +120,8 @@ const TypographyBase = InternalTypography.styleable<TypographyTextProps, Typogra
     />
   );
 
+  content = typographyContext ? content : <TypographyContext.Provider value>{content}</TypographyContext.Provider>;
+
   // If a variant is provided, we set it in the context for children to be able to inherit variant value
   content = props.variant ? (
     <TypographyVariantContext.Provider value={props.variant}>{content}</TypographyVariantContext.Provider>
@@ -139,18 +146,8 @@ const TypographyBase = InternalTypography.styleable<TypographyTextProps, Typogra
   return content;
 });
 
-const createHeading = (level: number): TamaguiComponent<TypographyTextProps> => {
+export const createHeading = (level: number): TamaguiComponent<TypographyTextProps> => {
   return TypographyBase.styleable<TypographyTextProps, TypographyTextProps>((props, ref) => {
     return <TypographyBase ref={ref} {...props} role="heading" aria-level={level} />;
   });
 };
-
-export const Typography = {
-  Text: TypographyBase,
-  Header1: createHeading(1),
-  Header2: createHeading(2),
-  Header3: createHeading(3),
-  Header4: createHeading(4),
-  Header5: createHeading(5),
-  Header6: createHeading(6),
-};

package/src/system/content/typography/TypographyIcon.features.stories.tsx

@@ -0,0 +1,163 @@
+import {
+  CheckCircleRegularIcon,
+  InfoRegularIcon,
+  StarRegularIcon,
+  WarningRegularIcon,
+} from '@ornikar/kitt-icons/phosphor';
+import type { Meta, StoryObj } from '@storybook/react';
+import { HStack, VStack } from '../../core/primitives/Stack';
+import { TypographyIcon } from './TypographyIcon';
+import { Typography } from '.';
+
+const meta: Meta<typeof TypographyIcon> = {
+  title: 'Bumper/Content/TypographyIcon/Features',
+  component: TypographyIcon,
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const WithExplicitColor: Story = {
+  render: () => (
+    <HStack gap="$space.16" alignItems="center">
+      <VStack alignItems="center" gap="$space.8">
+        <TypographyIcon icon={<StarRegularIcon />} size="$size.24" color="$content.accent" />
+        <Typography.Text variant="body-xs" color="$content.base.mid">
+          Explicit accent
+        </Typography.Text>
+      </VStack>
+      <VStack alignItems="center" gap="$space.8">
+        <TypographyIcon icon={<CheckCircleRegularIcon />} size="$size.24" color="$content.success" />
+        <Typography.Text variant="body-xs" color="$content.base.mid">
+          Explicit success
+        </Typography.Text>
+      </VStack>
+      <VStack alignItems="center" gap="$space.8">
+        <TypographyIcon icon={<WarningRegularIcon />} size="$size.24" color="$content.warning" />
+        <Typography.Text variant="body-xs" color="$content.base.mid">
+          Explicit warning
+        </Typography.Text>
+      </VStack>
+      <VStack alignItems="center" gap="$space.8">
+        <TypographyIcon icon={<WarningRegularIcon />} size="$size.24" color="$content.danger" />
+        <Typography.Text variant="body-xs" color="$content.base.mid">
+          Explicit danger
+        </Typography.Text>
+      </VStack>
+    </HStack>
+  ),
+};
+
+export const InheritFromTypography: Story = {
+  render: () => (
+    <VStack gap="$space.24">
+      <VStack gap="$space.8">
+        <Typography.Text variant="body-s" color="$content.base.mid">
+          Icon inherits accent color from Typography
+        </Typography.Text>
+        <Typography.Text variant="body-m" color="$content.accent">
+          <TypographyIcon icon={<StarRegularIcon />} size="$size.20" /> This icon inherits the accent color
+        </Typography.Text>
+      </VStack>
+
+      <VStack gap="$space.8">
+        <Typography.Text variant="body-s" color="$content.base.mid">
+          Icon inherits success color from Typography
+        </Typography.Text>
+        <Typography.Text variant="body-m" color="$content.success">
+          <TypographyIcon icon={<CheckCircleRegularIcon />} size="$size.20" /> Operation completed successfully
+        </Typography.Text>
+      </VStack>
+
+      <VStack gap="$space.8">
+        <Typography.Text variant="body-s" color="$content.base.mid">
+          Icon inherits danger color from Typography
+        </Typography.Text>
+        <Typography.Text variant="body-m" color="$content.danger">
+          <TypographyIcon icon={<WarningRegularIcon />} size="$size.20" /> Error: Something went wrong
+        </Typography.Text>
+      </VStack>
+
+      <VStack gap="$space.8">
+        <Typography.Text variant="body-s" color="$content.base.mid">
+          Icon inherits warning color from Typography
+        </Typography.Text>
+        <Typography.Text variant="body-m" color="$content.warning">
+          <TypographyIcon icon={<InfoRegularIcon />} size="$size.20" /> Warning: Please review this item
+        </Typography.Text>
+      </VStack>
+    </VStack>
+  ),
+};
+
+export const OverrideInheritedColor: Story = {
+  render: () => (
+    <VStack gap="$space.24">
+      <VStack gap="$space.8">
+        <Typography.Text variant="body-s" color="$content.base.mid">
+          Typography is accent, but icon explicitly uses success color
+        </Typography.Text>
+        <Typography.Text variant="body-m" color="$content.accent">
+          <TypographyIcon icon={<CheckCircleRegularIcon />} size="$size.20" color="$content.success" /> Icon overrides
+          inherited color
+        </Typography.Text>
+      </VStack>
+
+      <VStack gap="$space.8">
+        <Typography.Text variant="body-s" color="$content.base.mid">
+          Typography is success, but icon explicitly uses danger color
+        </Typography.Text>
+        <Typography.Text variant="body-m" color="$content.success">
+          <TypographyIcon icon={<WarningRegularIcon />} size="$size.20" color="$content.danger" /> Mixed color scenario
+        </Typography.Text>
+      </VStack>
+    </VStack>
+  ),
+};
+
+export const DifferentSizes: Story = {
+  render: () => (
+    <VStack gap="$space.16">
+      <Typography.Text variant="heading-l" color="$content.accent">
+        <TypographyIcon icon={<StarRegularIcon />} size="$size.32" /> Large heading with size 32 icon
+      </Typography.Text>
+      <Typography.Text variant="body-m" color="$content.accent">
+        <TypographyIcon icon={<StarRegularIcon />} size="$size.20" /> Body text with size 20 icon
+      </Typography.Text>
+      <Typography.Text variant="body-s" color="$content.accent">
+        <TypographyIcon icon={<StarRegularIcon />} size="$size.16" /> Small text with size 16 icon
+      </Typography.Text>
+    </VStack>
+  ),
+};
+
+export const NestedTypographyInheritance: Story = {
+  render: () => (
+    <VStack gap="$space.24">
+      <VStack gap="$space.8">
+        <Typography.Text variant="body-s" color="$content.base.mid">
+          Nested Typography components - icon inherits from parent
+        </Typography.Text>
+        <Typography.Text variant="body-l" color="$content.accent">
+          <TypographyIcon icon={<StarRegularIcon />} size="$size.20" /> Parent text with icon
+          <Typography.Text variant="body-m">
+            <TypographyIcon icon={<CheckCircleRegularIcon />} size="$size.16" /> Nested text - icon inherits parent
+            color
+          </Typography.Text>
+        </Typography.Text>
+      </VStack>
+
+      <VStack gap="$space.8">
+        <Typography.Text variant="body-s" color="$content.base.mid">
+          Nested with override - child overrides parent color
+        </Typography.Text>
+        <Typography.Text variant="body-l" color="$content.accent">
+          <TypographyIcon icon={<StarRegularIcon />} size="$size.20" /> Parent accent color
+          <Typography.Text variant="body-m" color="$content.success">
+            <TypographyIcon icon={<CheckCircleRegularIcon />} size="$size.16" /> Child overrides to success
+          </Typography.Text>
+        </Typography.Text>
+      </VStack>
+    </VStack>
+  ),
+};

package/src/system/content/typography/TypographyIcon.stories.tsx

@@ -0,0 +1,35 @@
+import { StarRegularIcon } from '@ornikar/kitt-icons/phosphor';
+import type { Meta, StoryObj } from '@storybook/react';
+import { contentColorArgType } from '../../../shared/storybook/helpers/argsHelpers';
+import { TypographyIcon } from './TypographyIcon';
+
+const meta: Meta<typeof TypographyIcon> = {
+  title: 'Bumper/Content/TypographyIcon',
+  component: TypographyIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    icon: {
+      control: false,
+      description: 'The icon element to render',
+    },
+    size: {
+      control: 'select',
+      options: ['$size.16', '$size.20', '$size.24', '$size.32', '$size.48', '$size.64', '$size.80', '$size.96'],
+      description: 'Icon size (uses size tokens)',
+    },
+    color: {
+      ...contentColorArgType,
+      description: 'Icon color (semantic theme token). When omitted, inherits from parent Typography context.',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    icon: <StarRegularIcon />,
+    size: '$size.20',
+  },
+};

package/src/system/content/typography/TypographyIcon.tsx

@@ -0,0 +1,33 @@
+import { type ReactNode } from 'react';
+import type { Except } from 'type-fest';
+import type { IconProps } from '../icon/Icon';
+import { Icon } from '../icon/Icon';
+import type { TypographyTextProps } from './Typography';
+import { TypographyView } from './TypographyView';
+import { useTypographyColor } from './utils/typographyContext';
+
+export interface TypographyIconProps extends Except<IconProps, 'color'> {
+  color?: TypographyTextProps['color'];
+}
+
+function TypographyIconInternal(props: TypographyIconProps): ReactNode {
+  return (
+    <TypographyView>
+      <Icon {...props} />
+    </TypographyView>
+  );
+}
+
+function TypographyIconInheritColor(props: TypographyIconProps): ReactNode {
+  const typographyColorAncestorValue = useTypographyColor();
+
+  return <TypographyIconInternal color={typographyColorAncestorValue || undefined} {...props} />;
+}
+
+export function TypographyIcon({ color, ...props }: TypographyIconProps): ReactNode {
+  if (color) {
+    return <TypographyIconInternal color={color} {...props} />;
+  }
+
+  return <TypographyIconInheritColor {...props} />;
+}