@utilitywarehouse/hearth-react-native 0.2.0 → 0.3.1

package/docs/components/AllComponents.web.tsx

@@ -3,6 +3,7 @@ import React, { useCallback, useEffect, useRef } from 'react';
 import { BottomSheetModalMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
 import {
   BroadbandMediumIcon,
+  CashbackCardMediumIcon,
   ChevronRightMediumIcon,
   ElectricityMediumIcon,
   InsuranceMediumIcon,
@@ -24,6 +25,9 @@ import {
   Card,
   Center,
   Checkbox,
+  CurrencyInput,
+  DescriptionList,
+  DescriptionListItem,
   DetailText,
   Divider,
   Flex,
@@ -32,6 +36,7 @@ import {
   Heading,
   Icon,
   IconButton,
+  IconContainer,
   InlineLink,
   Input,
   LI,
@@ -49,12 +54,17 @@ import {
   Skeleton,
   Spinner,
   Switch,
+  Tab,
+  TabPanel,
+  Tabs,
+  TabsList,
   Textarea,
   ToggleButtonCard,
   ToggleButtonCardGroup,
   UL,
   useColorMode,
 } from '../../src';
+import { addReactNativePrefix } from '../heplers';
 
 const ComponentWrapper = ({
   name,
@@ -66,8 +76,15 @@ const ComponentWrapper = ({
   children?: ViewProps['children'];
 }) => {
   const navigate = () => {
+    let target = link;
+    if (
+      typeof window !== 'undefined' &&
+      window.top?.location.href.includes('hearth.prod.uw.systems/?path=')
+    ) {
+      target = addReactNativePrefix(link);
+    }
     if (window.top) {
-      window.top.location.href = link;
+      window.top.location.href = target;
     }
   };
   return (
@@ -203,6 +220,22 @@ const AllComponents: React.FC = () => {
               </View>
             </Center>
           </ComponentWrapper>
+          <ComponentWrapper name="Currency Input" link="/?path=/docs/forms-currency-input--docs">
+            <Center flex={1} padding="200">
+              <CurrencyInput />
+            </Center>
+          </ComponentWrapper>
+          <ComponentWrapper
+            name="Description List"
+            link="/?path=/docs/components-description-list--docs"
+          >
+            <Center flex={1} padding="200">
+              <DescriptionList>
+                <DescriptionListItem heading="This is a" description="Description list" />
+                <DescriptionListItem heading="So is this" description="12-34-56" />
+              </DescriptionList>
+            </Center>
+          </ComponentWrapper>
           <ComponentWrapper name="Detail Text" link="/?path=/docs/typography-detail-text--docs">
             <Center flex={1}>
               <DetailText>This is some Detail Text</DetailText>
@@ -255,11 +288,51 @@ const AllComponents: React.FC = () => {
               <Heading>This is a Heading</Heading>
             </Center>
           </ComponentWrapper>
-          <ComponentWrapper name="Icon Button" link="/?path=/docs/components-iconbutton--docs">
+          <ComponentWrapper name="Icon Button" link="/?path=/docs/components-icon-button--docs">
             <Center flex={1}>
               <IconButton icon={ChevronRightMediumIcon} size="md" onPress={() => null} />
             </Center>
           </ComponentWrapper>
+          <ComponentWrapper
+            name="Icon Container"
+            link="/?path=/docs/components-icon-container--docs"
+          >
+            <Center flex={1}>
+              <Flex direction="row" space="sm">
+                <IconContainer
+                  icon={ElectricityMediumIcon}
+                  size="sm"
+                  variant="emphasis"
+                  color="energy"
+                />
+                <IconContainer
+                  icon={BroadbandMediumIcon}
+                  size="sm"
+                  variant="emphasis"
+                  color="broadband"
+                />
+                <IconContainer
+                  icon={MobileMediumIcon}
+                  size="sm"
+                  variant="emphasis"
+                  color="mobile"
+                />
+                <IconContainer
+                  icon={InsuranceMediumIcon}
+                  size="sm"
+                  variant="emphasis"
+                  color="insurance"
+                />
+                <IconContainer
+                  icon={CashbackCardMediumIcon}
+                  size="sm"
+                  variant="emphasis"
+                  color="cashback"
+                />
+              </Flex>
+            </Center>
+          </ComponentWrapper>
+
           <ComponentWrapper name="Icons" link="/?path=/docs/components-icons--docs">
             <Center flex={1}>
               <Flex direction="row" space="lg">
@@ -353,7 +426,7 @@ const AllComponents: React.FC = () => {
             name="Section Header"
             link="/?path=/docs/components-section-header--docs"
           >
-            <Center flex={1}>
+            <Center flex={1} p="300">
               <SectionHeader heading="Heading" helperText="Supporting text" linkText="More" />
             </Center>
           </ComponentWrapper>
@@ -395,7 +468,26 @@ const AllComponents: React.FC = () => {
               <Switch value={switchEnabled} onValueChange={toggleSwitch} />
             </Center>
           </ComponentWrapper>
-
+          <ComponentWrapper name="Tabs" link="/?path=/docs/components-tabs--docs">
+            <Center flex={1}>
+              <Tabs defaultValue="tab-1">
+                <TabsList>
+                  <Tab value="tab-1">Tab 1</Tab>
+                  <Tab value="tab-2">Tab 2</Tab>
+                  <Tab value="tab-3">Tab 3</Tab>
+                </TabsList>
+                <TabPanel value="tab-1">
+                  <BodyText>I'm the first tab's content</BodyText>
+                </TabPanel>
+                <TabPanel value="tab-2">
+                  <BodyText>I'm the second tab's content</BodyText>
+                </TabPanel>
+                <TabPanel value="tab-3">
+                  <BodyText>I'm the third tab's content</BodyText>
+                </TabPanel>
+              </Tabs>
+            </Center>
+          </ComponentWrapper>
           <ComponentWrapper name="Textarea" link="/?path=/docs/forms-textarea--docs">
             <Center flex={1}>
               <Textarea numberOfLines={3} placeholder="This is a textarea" />
@@ -441,9 +533,7 @@ const AllComponents: React.FC = () => {
 };
 
 const styles = StyleSheet.create(theme => ({
-  container: {
-    gap: theme.space['2'],
-  },
+  container: {},
   component: {
     borderColor: theme.color.warmWhite[300],
     borderWidth: theme.borderWidth['1'],
@@ -457,7 +547,6 @@ const styles = StyleSheet.create(theme => ({
     },
   },
   componentWrap: {
-    padding: theme.space['4'],
     flexGrow: 1,
     flex: 1,
   },

package/docs/components/NextPrevPage.tsx

@@ -1,6 +1,7 @@
-import { View, StyleSheet } from 'react-native';
-import { Card, CardAction, Heading, Link } from '../../src';
 import { ChevronLeftSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { StyleSheet, View } from 'react-native';
+import { Card, CardAction, Heading, Link } from '../../src';
+import { addReactNativePrefix } from '../heplers';
 
 type NextPrevPageProps = {
   nextLink?: string;
@@ -16,8 +17,15 @@ const NextPrevPage: React.FC<NextPrevPageProps> = ({
   prevTitle,
 }) => {
   const openLink = (link: string) => {
+    let target = link;
+    if (
+      typeof window !== 'undefined' &&
+      window.top?.location.href.includes('hearth.prod.uw.systems/?path=')
+    ) {
+      target = addReactNativePrefix(link);
+    }
     if (window.top) {
-      window.top.location.href = link;
+      window.top.location.href = target;
     }
   };
   return (

package/docs/components/UsageWrap.tsx

@@ -8,10 +8,10 @@ const UsageWrap: FC<PropsWithChildren> = ({ children }) => {
       <Box
         mt="300"
         p="200"
-        bg={colorMode === 'dark' ? 'background' : 'white'}
+        bg="backgroundPrimary"
         borderRadius="md"
         borderWidth="1"
-        borderColor="grey1000"
+        borderColor="borderSubtle"
         width="100%"
         position="relative"
       >

package/docs/components/index.ts

@@ -1,11 +1,10 @@
-export { default as VariantTitle } from './VariantTitle';
-export { default as UsageWrap } from './UsageWrap';
+export { default as AdvancedInputExample } from './AdvancedInputExample';
 export { default as BackToTopButton } from './BackToTopButton';
-export { default as ViewFigmaButton } from './ViewFigmaButton';
-export { default as DocComponentWrap } from './DocComponentWrap';
 export { default as BadgeList } from './BadgeList';
-export { default as AdvancedInputExample } from './AdvancedInputExample';
+export { default as DocComponentWrap } from './DocComponentWrap';
+export { default as NextPrevPage } from './NextPrevPage';
 export { default as SwitchExample } from './SwitchExample';
 export { default as SwitchList } from './SwitchList';
-export { default as AdvancedRadioExample } from './AdvancedRadioExample';
-export { default as NextPrevPage } from './NextPrevPage';
+export { default as UsageWrap } from './UsageWrap';
+export { default as VariantTitle } from './VariantTitle';
+export { default as ViewFigmaButton } from './ViewFigmaButton';

package/docs/heplers/addReactNativePrefix.ts

@@ -0,0 +1,8 @@
+const addReactNativePrefix = (url: string) => {
+  if (!url.startsWith('/?path=/docs/')) return url;
+  return url.replace(/(\/\?path=\/docs\/)([^/]+)/, (full, prefix, slug) => {
+    if (slug.startsWith('react-native_')) return full; // already prefixed
+    return `${prefix}react-native_${slug}`;
+  });
+};
+export default addReactNativePrefix;

package/docs/heplers/index.ts

@@ -0,0 +1 @@
+export { default as addReactNativePrefix } from './addReactNativePrefix';

package/docs/introduction.mdx

@@ -1,7 +1,7 @@
 import { Meta } from '@storybook/addon-docs/blocks';
+import pig from '../../../shared/storybook/assets/images/react-native-pig.png';
 import { version } from '../package.json';
 import { Box } from '../src';
-import pig from './assets/react-native-pig.png';
 import { BackToTopButton, NextPrevPage } from './components';
 
 <Meta title="Introduction" />
@@ -39,7 +39,7 @@ npm install @utilitywarehouse/hearth-react-native
 To install the peer dependencies, you can run the following command:
 
 ```console
-npm install react-native-unistyles react-native-edge-to-edge react-native-nitro-modules@0.28.1 @gorhom/bottom-sheet react-native-svg react-native-reanimated react-native-worklets react-native-gesture-handler
+npm install react-native-unistyles react-native-edge-to-edge react-native-nitro-modules@0.28.1 @gorhom/bottom-sheet react-native-svg react-native-reanimated react-native-worklets react-native-gesture-handler @utilitywarehouse/hearth-react-native-icons
 ```
 
 For more information on how to install and configure `react-native-svg`, `react-native-gesture-handler` and `react-native-reanimated`,
@@ -63,7 +63,7 @@ The `@utilitywarehouse/hearth-react-native` library uses a few packages under th
 as well as fonts and icons. Feel free to additionally install these packages if you need to use them in your project.
 
 ```console
-npm install @utilitywarehouse/hearth-tokens @utilitywarehouse/hearth-react-native-icons
+npm install @utilitywarehouse/hearth-tokens
 ```
 
 You will need to include the **Comic Hams**, **DM Mono** and **DM Sans** fonts.

package/docs/theme-tokens.mdx

@@ -429,6 +429,48 @@ Available spacing values:
 | `900` | 72px | Maximum spacing |
 | `1000` | 80px | Hero spacing |
 
+There is also responsive layout spacing for different screen sizes:
+
+| Token  | Mobile (base) | Tablet (md) | Desktop (lg) | Usage (guideline)                     |
+| ------ | ------------- | ----------- | ------------ | ------------------------------------- |
+| `none` | 0px           | 0px         | 0px          | Reset / collapse spacing              |
+| `2xs`  | 2px           | 2px         | 2px          | Hairline gaps, separators             |
+| `xs`   | 4px           | 4px         | 4px          | Tight padding, icon nudge             |
+| `sm`   | 8px           | 8px         | 8px          | Compact component gap                 |
+| `md`   | 12px          | 12px        | 12px         | Dense layouts, inline stacks          |
+| `lg`   | 16px          | 16px        | 16px         | Base section spacing                  |
+| `xl`   | 20px          | 24px        | 24px         | Larger grouping / outer padding       |
+| `2xl`  | 28px          | 28px        | 40px         | Major vertical rhythm / page sections |
+
+There are built in responsive layout spacings for mobile, tablet and desktop. They live under `theme.space.xs` etc,
+which are responsive values that adapt based on screen size. For example, `theme.space.xl` is `20px` on mobile, and `24px` on tablet and desktop.
+
+These responsive layout spacings live under `theme.layout.[mobile|tablet|desktop].spacing` and are intended for macro
+layout structure (page/frame scaffolding) rather than component-level internal spacing (which should prefer the core `space` scale).
+
+```tsx
+const styles = StyleSheet.create(theme => ({
+  pageSection: {
+    padding: theme.space.xl, // 20px on mobile, 24px on tablet/desktop
+  },
+}));
+
+// or using the layout tokens directly:
+const styles = StyleSheet.create(theme => ({
+  pageSection: {
+    // Example: use responsive spacing tokens
+    paddingHorizontal: theme.layout.mobile.spacing.lg,
+    paddingTop: theme.layout.mobile.spacing.xl,
+    // Or use responsive object syntax
+    gap: {
+      base: theme.layout.mobile.spacing.md,
+      md: theme.layout.tablet.spacing.lg,
+      lg: theme.layout.desktop.spacing.xl,
+    },
+  },
+}));
+```
+
 Percentage-based spacing is also available:
 
 - `1/2`, `1/3`, `2/3`, `1/4`, `3/4`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -20,23 +20,22 @@
     "@gluestack-ui/radio": "0.1.33",
     "@gluestack-ui/spinner": "0.1.14",
     "@gluestack-ui/switch": "0.1.22",
-    "@gluestack-ui/textarea": "0.1.23",
-    "@utilitywarehouse/hearth-react-native-icons": "^0.1.0"
+    "@gluestack-ui/textarea": "0.1.23"
   },
   "devDependencies": {
     "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
     "@chromatic-com/storybook": "^4.1.1",
     "@figma/code-connect": "^1.3.3",
     "@gorhom/bottom-sheet": "5.1.6",
-    "@storybook/addon-a11y": "^9.1.3",
-    "@storybook/addon-docs": "^9.1.3",
-    "@storybook/addon-vitest": "^9.1.3",
-    "@storybook/react-native-web-vite": "^9.1.3",
+    "@storybook/addon-a11y": "^9.1.6",
+    "@storybook/addon-docs": "^9.1.6",
+    "@storybook/addon-vitest": "^9.1.6",
+    "@storybook/react-native-web-vite": "^9.1.6",
     "@types/prismjs": "^1.26.5",
     "@types/react": "^19.1.10",
     "@vitest/browser": "^3.2.4",
     "@vitest/coverage-v8": "^3.2.4",
-    "eslint-plugin-storybook": "9.1.3",
+    "eslint-plugin-storybook": "9.1.6",
     "playwright": "^1.53.1",
     "prismjs": "^1.30.0",
     "react": "^19.1.0",
@@ -49,16 +48,18 @@
     "react-native-unistyles": "3.0.10",
     "react-native-web": "^0.20.0",
     "remark-gfm": "^4.0.1",
-    "storybook": "^9.1.3",
+    "storybook": "^9.1.6",
     "typescript": "^5.7.3",
     "vite": "^7.1.3",
     "vitest": "^3.2.4",
     "@utilitywarehouse/hearth-fonts": "^0.0.3",
-    "@utilitywarehouse/hearth-react-icons": "^0.1.1",
-    "@utilitywarehouse/hearth-tokens": "^0.0.8"
+    "@utilitywarehouse/hearth-react-native-icons": "^0.4.0",
+    "@utilitywarehouse/hearth-react-icons": "^0.4.0",
+    "@utilitywarehouse/hearth-tokens": "^0.1.0"
   },
   "peerDependencies": {
     "@gorhom/bottom-sheet": "^5.0.0",
+    "@utilitywarehouse/hearth-react-native-icons": "~0.4.0",
     "react": ">=17 || ^18.0.0 || ^19.0.0",
     "react-native": ">=0.77",
     "react-native-gesture-handler": "^2.22.0",
@@ -75,11 +76,10 @@
     "lint": "TIMING=1 eslint --max-warnings 0",
     "build": "tsc",
     "watch": "tsc --watch",
-    "watch:lab": "tsc --p tsconfig.lab.json  --watch",
     "figma:create": "figma connect create",
     "figma:publish": "figma connect publish",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "storybook": "storybook dev -p 6006",
+    "dev": "storybook dev -p 6006",
     "build:storybook": "storybook build"
   }
 }

package/src/components/Alert/AlertCloseButton.tsx

@@ -3,22 +3,50 @@ import { ComponentType } from 'react';
 import { ViewStyle } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { UnstyledIconButton, UnstyledIconButtonProps } from '../UnstyledIconButton';
+import { useAlertContext } from './Alert.context';
 
 const AlertCloseButton = ({
   style,
   icon = CloseSmallIcon,
   ...props
-}: Omit<UnstyledIconButtonProps, 'icon'> & { icon?: ComponentType }) => (
-  <UnstyledIconButton {...props} size="sm" style={[styles.icon, style as ViewStyle]} icon={icon} />
-);
+}: Omit<UnstyledIconButtonProps, 'icon'> & { icon?: ComponentType }) => {
+  const { colorScheme } = useAlertContext();
+  styles.useVariants({ colorScheme });
+  return (
+    <UnstyledIconButton
+      {...props}
+      size="sm"
+      style={[styles.button, style as ViewStyle]}
+      icon={icon}
+      iconStyle={styles.icon as ViewStyle}
+    />
+  );
+};
 
 const styles = StyleSheet.create(theme => ({
-  icon: {
+  button: {
     alignSelf: 'flex-start',
-    color: theme.color.icon.primary,
     minWidth: 20,
     minHeight: 20,
   },
+  icon: {
+    variants: {
+      colorScheme: {
+        info: {
+          color: theme.color.feedback.info.foreground.default,
+        },
+        positive: {
+          color: theme.color.feedback.positive.foreground.default,
+        },
+        danger: {
+          color: theme.color.feedback.danger.foreground.default,
+        },
+        warning: {
+          color: theme.color.feedback.warning.foreground.default,
+        },
+      },
+    },
+  },
 }));
 
 AlertCloseButton.displayName = 'AlertCloseButton';

package/src/components/Alert/AlertIcon.tsx

@@ -19,6 +19,7 @@ const AlertIcon = (props: IconProps) => {
     }
     return InfoMediumIcon;
   })();
+  styles.useVariants({ colorScheme });
   return <Icon {...props} as={props.as ?? asProp} style={styles.icon} />;
 };
 
@@ -31,7 +32,22 @@ const styles = StyleSheet.create(theme => ({
     minWidth: 24,
     minHeight: 24,
     alignSelf: 'flex-start',
-    color: theme.color.icon.primary,
+    variants: {
+      colorScheme: {
+        info: {
+          color: theme.color.feedback.info.foreground.default,
+        },
+        positive: {
+          color: theme.color.feedback.positive.foreground.default,
+        },
+        danger: {
+          color: theme.color.feedback.danger.foreground.default,
+        },
+        warning: {
+          color: theme.color.feedback.warning.foreground.default,
+        },
+      },
+    },
   },
 }));
 

package/src/components/Alert/AlertIconButton.tsx

@@ -1,15 +1,48 @@
+import { ChevronRightSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import { ComponentType } from 'react';
 import { ViewStyle } from 'react-native';
-import { ChevronRightSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { StyleSheet } from 'react-native-unistyles';
 import { UnstyledIconButton, UnstyledIconButtonProps } from '../UnstyledIconButton';
+import { useAlertContext } from './Alert.context';
 
 const AlertIconButton = ({
   style,
   icon = ChevronRightSmallIcon,
   ...props
-}: Omit<UnstyledIconButtonProps, 'icon'> & { icon?: ComponentType }) => (
-  <UnstyledIconButton {...props} size="sm" style={style as ViewStyle} icon={icon} />
-);
+}: Omit<UnstyledIconButtonProps, 'icon'> & { icon?: ComponentType }) => {
+  const { colorScheme } = useAlertContext();
+  styles.useVariants({ colorScheme });
+  return (
+    <UnstyledIconButton
+      {...props}
+      size="sm"
+      style={style as ViewStyle}
+      icon={icon}
+      iconStyle={styles.icon as ViewStyle}
+    />
+  );
+};
+
+const styles = StyleSheet.create(theme => ({
+  icon: {
+    variants: {
+      colorScheme: {
+        info: {
+          color: theme.color.feedback.info.foreground.default,
+        },
+        positive: {
+          color: theme.color.feedback.positive.foreground.default,
+        },
+        danger: {
+          color: theme.color.feedback.danger.foreground.default,
+        },
+        warning: {
+          color: theme.color.feedback.warning.foreground.default,
+        },
+      },
+    },
+  },
+}));
 
 AlertIconButton.displayName = 'AlertIconButton';
 

package/src/components/Alert/AlertLink.tsx

@@ -1,9 +1,60 @@
+import { StyleSheet } from 'react-native-unistyles';
 import { Link, LinkProps } from '../Link';
+import { useAlertContext } from './Alert.context';
 
 const AlertLink = ({ children, ...props }: LinkProps) => {
-  return <Link {...props}>{children}</Link>;
+  const { colorScheme } = useAlertContext();
+  styles.useVariants({ colorScheme });
+  return (
+    <Link {...props} textStyle={styles.text} iconStyle={styles.icon}>
+      {children}
+    </Link>
+  );
 };
 
+const styles = StyleSheet.create(theme => ({
+  text: {
+    variants: {
+      colorScheme: {
+        info: {
+          color: theme.color.feedback.info.foreground.default,
+          textDecorationColor: theme.color.feedback.info.foreground.default,
+        },
+        positive: {
+          color: theme.color.feedback.positive.foreground.default,
+          textDecorationColor: theme.color.feedback.positive.foreground.default,
+        },
+        danger: {
+          color: theme.color.feedback.danger.foreground.default,
+          textDecorationColor: theme.color.feedback.danger.foreground.default,
+        },
+        warning: {
+          color: theme.color.feedback.warning.foreground.default,
+          textDecorationColor: theme.color.feedback.warning.foreground.default,
+        },
+      },
+    },
+  },
+  icon: {
+    variants: {
+      colorScheme: {
+        info: {
+          color: theme.color.feedback.info.foreground.default,
+        },
+        positive: {
+          color: theme.color.feedback.positive.foreground.default,
+        },
+        danger: {
+          color: theme.color.feedback.danger.foreground.default,
+        },
+        warning: {
+          color: theme.color.feedback.warning.foreground.default,
+        },
+      },
+    },
+  },
+}));
+
 AlertLink.displayName = 'AlertLink';
 
 export default AlertLink;

package/src/components/Alert/AlertText.tsx

@@ -1,14 +1,39 @@
-import { TextProps } from 'react-native';
+import { TextProps, TextStyle } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
 import { BodyText } from '../BodyText';
+import { useAlertContext } from './Alert.context';
 
-const AlertText = ({ children, ...props }: TextProps & { semibold?: boolean }) => {
+const AlertText = ({ children, style, ...props }: TextProps & { semibold?: boolean }) => {
+  const { colorScheme } = useAlertContext();
+  styles.useVariants({ colorScheme });
   return (
-    <BodyText size="md" {...props}>
+    <BodyText size="md" style={[styles.text as TextStyle, style]} {...props}>
       {children}
     </BodyText>
   );
 };
 
+const styles = StyleSheet.create(theme => ({
+  text: {
+    variants: {
+      colorScheme: {
+        info: {
+          color: theme.color.feedback.info.foreground.default,
+        },
+        positive: {
+          color: theme.color.feedback.positive.foreground.default,
+        },
+        danger: {
+          color: theme.color.feedback.danger.foreground.default,
+        },
+        warning: {
+          color: theme.color.feedback.warning.foreground.default,
+        },
+      },
+    },
+  },
+}));
+
 AlertText.displayName = 'AlertText';
 
 export default AlertText;