@utilitywarehouse/hearth-react-native 0.1.0 → 0.3.0

package/docs/theme-tokens.mdx

@@ -120,28 +120,35 @@ These colors represent the core brand identity and various services:
 ```tsx
 const styles = StyleSheet.create(theme => ({
   brandButton: {
-    backgroundColor: theme.color.surface.brand.default.color,
-    borderColor: theme.components.button.border.primary,
+    backgroundColor: theme.color.surface.brand.default,
+    borderColor: theme.color.border.strong,
   },
   energyCard: {
-    backgroundColor: theme.color.surface.energy.default.color,
+    backgroundColor: theme.color.surface.energy.default,
     color: theme.color.text.inverted,
   },
   broadbandAccent: {
-    backgroundColor: theme.color.surface.broadband.subtle.color,
+    backgroundColor: theme.color.surface.broadband.subtle,
+  },
+  highlightElement: {
+    backgroundColor: theme.color.surface.highlight.default,
+  },
+  neutralSurface: {
+    backgroundColor: theme.color.surface.neutral.subtle,
   },
 }));
 ```
 
 Available brand and service colors:
 
-- **Brand**: `purple` - Primary brand color
-- **Energy**: `energyBlue` - Energy service
-- **Broadband**: `broadbandGreen` - Broadband service
-- **Mobile**: `mobileRose` - Mobile service
-- **Insurance**: `insuranceOrange` - Insurance service
-- **Cashback**: `cashbackLilac` - Cashback service
-- **Pig**: `piggyPink` - Savings/Piggy service
+- **Brand**: `brand` - Primary brand color (purple)
+- **Energy**: `energy` - Energy service (blue)
+- **Broadband**: `broadband` - Broadband service (green)
+- **Mobile**: `mobile` - Mobile service (rose/pink)
+- **Insurance**: `insurance` - Insurance service (orange)
+- **Cashback**: `cashback` - Cashback service (lilac)
+- **Pig**: `pig` - Savings/Piggy service (pink)
+- **Highlight**: `highlight` - Attention/highlight color (yellow)
 
 ### Semantic Colors
 
@@ -184,16 +191,24 @@ const styles = StyleSheet.create(theme => ({
 ```tsx
 const styles = StyleSheet.create(theme => ({
   primaryButton: {
-    backgroundColor: theme.color.interactive.brand.surface.strong.defaultColor,
-    color: theme.color.interactive.brand.foreground.strong.color,
+    backgroundColor: theme.color.interactive.brand.surface.strong.default,
+    color: theme.color.interactive.brand.foreground.strong,
   },
   destructiveButton: {
-    backgroundColor: theme.color.interactive.destructive.surface.strong.defaultColor,
-    color: theme.color.interactive.destructive.foreground.strong.color,
+    backgroundColor: theme.color.interactive.destructive.surface.strong.default,
+    color: theme.color.interactive.destructive.foreground.strong,
   },
   affirmativeButton: {
-    backgroundColor: theme.color.interactive.affirmative.surface.strong.defaultColor,
-    color: theme.color.interactive.affirmative.foreground.strong.color,
+    backgroundColor: theme.color.interactive.affirmative.surface.strong.default,
+    color: theme.color.interactive.affirmative.foreground.strong,
+  },
+  functionalButton: {
+    backgroundColor: theme.color.interactive.functional.surface.strong.default,
+    color: theme.color.interactive.functional.foreground.strong,
+  },
+  highlightButton: {
+    backgroundColor: theme.color.interactive.highlight.surface.strong.default,
+    color: theme.color.interactive.highlight.foreground.strong,
   },
 }));
 ```
@@ -203,21 +218,29 @@ const styles = StyleSheet.create(theme => ({
 ```tsx
 const styles = StyleSheet.create(theme => ({
   errorMessage: {
-    backgroundColor: theme.color.feedback.danger.subtle.color,
-    color: theme.color.feedback.danger.default.color,
-    borderColor: theme.color.feedback.danger.default.color,
+    backgroundColor: theme.color.feedback.danger.surface.subtle,
+    color: theme.color.feedback.danger.foreground.subtle,
+    borderColor: theme.color.feedback.danger.border,
   },
   successMessage: {
-    backgroundColor: theme.color.feedback.positive.subtle.color,
-    color: theme.color.feedback.positive.default.color,
+    backgroundColor: theme.color.feedback.positive.surface.subtle,
+    color: theme.color.feedback.positive.foreground.subtle,
+    borderColor: theme.color.feedback.positive.border,
   },
   warningMessage: {
-    backgroundColor: theme.color.feedback.warning.subtle.color,
-    color: theme.color.feedback.warning.default.color,
+    backgroundColor: theme.color.feedback.warning.surface.subtle,
+    color: theme.color.feedback.warning.foreground.subtle,
+    borderColor: theme.color.feedback.warning.border,
   },
   infoMessage: {
-    backgroundColor: theme.color.feedback.info.subtle.color,
-    color: theme.color.feedback.info.default.color,
+    backgroundColor: theme.color.feedback.info.surface.subtle,
+    color: theme.color.feedback.info.foreground.subtle,
+    borderColor: theme.color.feedback.info.border,
+  },
+  functionalMessage: {
+    backgroundColor: theme.color.feedback.functional.surface.subtle,
+    color: theme.color.feedback.functional.foreground.subtle,
+    borderColor: theme.color.feedback.functional.border,
   },
 }));
 ```
@@ -406,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.1.0",
+  "version": "0.3.0",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -21,45 +21,48 @@
     "@gluestack-ui/spinner": "0.1.14",
     "@gluestack-ui/switch": "0.1.22",
     "@gluestack-ui/textarea": "0.1.23",
-    "@gorhom/bottom-sheet": "^5.1.6",
     "@utilitywarehouse/hearth-react-native-icons": "^0.1.0"
   },
   "devDependencies": {
     "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
-    "@chromatic-com/storybook": "^4.0.1",
+    "@chromatic-com/storybook": "^4.1.1",
     "@figma/code-connect": "^1.3.3",
-    "@storybook/addon-a11y": "^9.0.17",
-    "@storybook/addon-docs": "^9.0.17",
-    "@storybook/addon-vitest": "^9.0.17",
-    "@storybook/react-native-web-vite": "^9.0.17",
-    "@types/react": "^19.1.8",
+    "@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",
+    "@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.0.17",
+    "eslint-plugin-storybook": "9.1.3",
     "playwright": "^1.53.1",
+    "prismjs": "^1.30.0",
     "react": "^19.1.0",
     "react-native": "0.80.0",
     "react-native-edge-to-edge": "1.6.1",
     "react-native-gesture-handler": "2.26.0",
-    "react-native-nitro-modules": "^0.26.4",
-    "react-native-reanimated": "3.18.0",
-    "react-native-svg": "^15.12.0",
-    "react-native-unistyles": "3.0.7",
+    "react-native-nitro-modules": "^0.28.0",
+    "react-native-reanimated": "3.19.1",
+    "react-native-svg": "^15.12.1",
+    "react-native-unistyles": "3.0.10",
     "react-native-web": "^0.20.0",
     "remark-gfm": "^4.0.1",
-    "storybook": "^9.0.17",
+    "storybook": "^9.1.3",
     "typescript": "^5.7.3",
-    "vite": "^6.3.5",
+    "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.7"
+    "@utilitywarehouse/hearth-tokens": "^0.0.8"
   },
   "peerDependencies": {
+    "@gorhom/bottom-sheet": "^5.0.0",
     "react": ">=17 || ^18.0.0 || ^19.0.0",
     "react-native": ">=0.77",
     "react-native-gesture-handler": "^2.22.0",
-    "react-native-reanimated": "3.x",
+    "react-native-reanimated": "3.x || ^4.x",
     "react-native-svg": ">=13.4.0",
     "react-native-unistyles": ">=>3.0.0",
     "react-native-web": ">=0.19"
@@ -72,11 +75,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/Accordion/Accordion.docs.mdx

@@ -1,6 +1,4 @@
-import { Meta, Canvas, Story, Controls } from '@storybook/addon-docs/blocks';
-import * as Stories from './Accordion.stories';
-import { Center, BodyText, Alert, Box, Card, List, ListItem, Flex } from '../../';
+import { Canvas, Controls, Meta, Story } from '@storybook/addon-docs/blocks';
 import {
   Accordion,
   AccordionContent,
@@ -12,7 +10,9 @@ import {
   AccordionTrigger,
   Badge,
 } from '../';
-import { ViewFigmaButton, BackToTopButton, UsageWrap } from '../../../docs/components';
+import { Alert, BodyText, Box, Card, Center, Flex, List, ListItem } from '../../';
+import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
+import * as Stories from './Accordion.stories';
 
 <Meta title="Components / Accordion" />
 
@@ -79,25 +79,18 @@ const MyComponent = () => {
 
 ## Props
 
-| Property            | Type                        | Description                                                                                                                                                | Default    |
-| ------------------- | --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- |
-| `defaultValue`      | `Array<string>`             | The default value of the accordion.                                                                                                                        | `-`        |
-| `value`             | `Array<string>`             | The controlled value of the accordion.                                                                                                                     | `-`        |
-| `onValueChange`     | `(value: string[]) => void` | Callback function that is called when the value of the accordion changes.                                                                                  | `-`        |
-| `type`              | `'single' \| 'multiple'`    | The type of accordion. If set to 'single', only one item can be expanded at a time. If set to 'multiple', multiple items can be expanded at the same time. | `'single'` |
-| `collapsible`       | `boolean`                   | If true, the accordion can be collapsed.                                                                                                                   | `false`    |
-| `disabled`          | `boolean`                   | If true, the accordion is disabled.                                                                                                                        | `false`    |
-| `noPadding`         | `boolean`                   | If true, no horizontal padding is applied to the accordion items.                                                                                          | `false`    |
-| `contentNoPadding`  | `boolean`                   | If true, no horizontal padding is applied to the accordion content.                                                                                        | `false`    |
-| `headingText`       | `string`                    | The text to display in the heading of the list.                                                                                                            | `-`        |
-| `headingHelperText` | `string`                    | The supporting text to display in the heading of the list.                                                                                                 | `-`        |
-
-### `AccordionHeading`
-
-| Name         | Type     | Description                                                | Default |
-| ------------ | -------- | ---------------------------------------------------------- | ------- |
-| `text`       | `string` | The text to display in the heading of the list.            | `-`     |
-| `helperText` | `string` | The supporting text to display in the heading of the list. | `-`     |
+| Property           | Type                        | Description                                                                                                                                                | Default    |
+| ------------------ | --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- |
+| `defaultValue`     | `Array<string>`             | The default value of the accordion.                                                                                                                        | `-`        |
+| `value`            | `Array<string>`             | The controlled value of the accordion.                                                                                                                     | `-`        |
+| `onValueChange`    | `(value: string[]) => void` | Callback function that is called when the value of the accordion changes.                                                                                  | `-`        |
+| `type`             | `'single' \| 'multiple'`    | The type of accordion. If set to 'single', only one item can be expanded at a time. If set to 'multiple', multiple items can be expanded at the same time. | `'single'` |
+| `collapsible`      | `boolean`                   | If true, the accordion can be collapsed.                                                                                                                   | `false`    |
+| `disabled`         | `boolean`                   | If true, the accordion is disabled.                                                                                                                        | `false`    |
+| `noPadding`        | `boolean`                   | If true, no horizontal padding is applied to the accordion items.                                                                                          | `false`    |
+| `contentNoPadding` | `boolean`                   | If true, no horizontal padding is applied to the accordion content.                                                                                        | `false`    |
+| `heading`          | `string`                    | The text to display in the heading of the list.                                                                                                            | `-`        |
+| `helperText`       | `string`                    | The helper text to display in the heading of the list.                                                                                                     | `-`        |
 
 ### `AccordionItem`
 
@@ -120,8 +113,8 @@ state of the items or when you want to customise the header and content.
     <Accordion
       type="multiple"
       defaultValue={['item-1']}
-      headingText="Frequently Asked Questions"
-      headingHelperText="Click to expand"
+      heading="Frequently Asked Questions"
+      helperText="Click to expand"
     >
       <AccordionItem title="How do I place an order?" value="item-1">
         <BodyText> Lorem ipsum dolor sit amet consectetur, adipisicing elit.</BodyText>
@@ -143,10 +136,8 @@ import {
   AccordionItem,
   AccordionTitleText,
   AccordionTrigger,
-  AccordionHeading,
-  AccordionHeadingText,
-  AccordionHeadingHelperText,
-} from '@utilitywarehouse/native-ui/lab';
+  SectionHeader,
+} from '@utilitywarehouse/native-ui';
 import {
   ChevronDownSmallIcon,
   ChevronUpSmallIcon,
@@ -155,12 +146,7 @@ import {
 const MyComponent = () => {
   return (
     <Accordion type="multiple" defaultValue={['item-1']}>
-      <AccordionHeading>
-        <AccordionHeadingTextContent>
-          <AccordionHeadingText>Frequently Asked Questions</AccordionHeadingText>
-          <AccordionHeadingHelperText>Click to expand</AccordionHeadingHelperText>
-        </AccordionHeadingTextContent>
-      </AccordionHeading>
+      <SectionHeader heading="Frequently Asked Questions" helperText="Click to expand" />
       <AccordionItem value="a">
         <AccordionHeader>
           <AccordionTrigger>
@@ -224,8 +210,8 @@ You can add a heading and helper text to the accordion to provide context for th
     <Accordion
       type="multiple"
       defaultValue={['item-1']}
-      headingText="Frequently Asked Questions"
-      headingHelperText="Click to expand"
+      heading="Frequently Asked Questions"
+      helperText="Click to expand"
     >
       <AccordionItem title="How do I place an order?" value="item-1">
         <BodyText> Lorem ipsum dolor sit amet consectetur, adipisicing elit.</BodyText>
@@ -249,8 +235,8 @@ const MyComponent = () => {
     <Accordion
       type="multiple"
       defaultValue={['item-1']}
-      headingText="Frequently Asked Questions"
-      headingHelperText="Click to expand"
+      heading="Frequently Asked Questions"
+      helperText="Click to expand"
     >
       <AccordionItem title="How do I place an order?" value="item-1">
         <BodyText> Lorem ipsum dolor sit amet consectetur, adipisicing elit.</BodyText>

package/src/components/Accordion/Accordion.props.ts

@@ -38,6 +38,6 @@ export interface AccordionProps extends ViewProps {
    * @default false
    */
   contentNoPadding?: boolean;
-  headingText?: string;
-  headingHelperText?: string;
+  heading?: string;
+  helperText?: string;
 }

package/src/components/Accordion/Accordion.stories.tsx

@@ -1,19 +1,19 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import {
+  ChevronDownSmallIcon,
+  ChevronUpSmallIcon,
+} from '@utilitywarehouse/hearth-react-native-icons';
 import {
   Accordion,
-  AccordionItem,
-  AccordionHeader,
-  AccordionTrigger,
-  AccordionTitleText,
-  AccordionIcon,
   AccordionContent,
   AccordionContentText,
+  AccordionHeader,
+  AccordionIcon,
+  AccordionItem,
+  AccordionTitleText,
+  AccordionTrigger,
 } from '.';
-import { Meta, StoryObj } from '@storybook/react-vite';
 import { BodyText } from '../../components';
-import {
-  ChevronDownSmallIcon,
-  ChevronUpSmallIcon,
-} from '@utilitywarehouse/hearth-react-native-icons';
 
 const meta = {
   title: 'Stories / Accordion',

package/src/components/Accordion/Accordion.tsx

@@ -1,20 +1,20 @@
-import { Children, isValidElement, useMemo } from 'react';
 import { createAccordion } from '@gluestack-ui/accordion';
-import AccordionRoot from './AccordionRoot';
-import AccordionContentTextComponent from './AccordionContentText';
-import AccordionIconComponent from './AccordionIcon';
+import {
+  ChevronDownSmallIcon,
+  ChevronUpSmallIcon,
+} from '@utilitywarehouse/hearth-react-native-icons';
+import { Children, isValidElement, useMemo } from 'react';
+import { SectionHeader } from '../SectionHeader';
+import { AccordionProps } from './Accordion.props';
 import AccordionContentComponent from './AccordionContent';
+import AccordionContentTextComponent from './AccordionContentText';
 import AccordionHeaderComponent from './AccordionHeader';
+import AccordionIconComponent from './AccordionIcon';
+import { AccordionItemProps } from './AccordionItem.props';
 import AccordionItemRoot from './AccordionItemRoot';
+import AccordionRoot from './AccordionRoot';
 import AccordionTitleTextComponent from './AccordionTitleText';
 import AccordionTriggerComponent from './AccordionTrigger';
-import { AccordionProps } from './Accordion.props';
-import { AccordionItemProps } from './AccordionItem.props';
-import {
-  ChevronDownSmallIcon,
-  ChevronUpSmallIcon,
-} from '@utilitywarehouse/hearth-react-native-icons';
-import { AccordionHeading } from './AccordionHeading';
 
 const AccordionComponent = createAccordion({
   Root: AccordionRoot,
@@ -39,8 +39,8 @@ const Accordion = ({
   children,
   collapsible,
   type = 'multiple',
-  headingText,
-  headingHelperText,
+  heading,
+  helperText,
   ...props
 }: AccordionProps) => (
   <AccordionComponent
@@ -50,7 +50,7 @@ const Accordion = ({
     contentNoPadding={props.contentNoPadding}
     {...props}
   >
-    {headingText ? <AccordionHeading text={headingText} helperText={headingHelperText} /> : null}
+    {heading ? <SectionHeader heading={heading} helperText={helperText} /> : null}
     {children}
   </AccordionComponent>
 );

package/src/components/Accordion/AccordionIcon.tsx

@@ -2,8 +2,8 @@ import { Icon, IconProps } from '../../components/Icon';
 import { useTheme } from '../../hooks';
 
 const AccordionIcon = ({ as, ...props }: IconProps) => {
-  const { components } = useTheme();
-  return <Icon as={as} color={components.icon.color} {...props} />;
+  const { color } = useTheme();
+  return <Icon as={as} color={color.icon.primary} {...props} />;
 };
 
 AccordionIcon.displayName = 'AccordionIcon';

package/src/components/Accordion/AccordionItemRoot.tsx

@@ -1,8 +1,8 @@
 import { useMemo } from 'react';
 import { View } from 'react-native';
-import { AccordionItemProps } from './AccordionItem.props';
-import AccordionItemContext from './AccordionItem.context';
 import { StyleSheet } from 'react-native-unistyles';
+import AccordionItemContext from './AccordionItem.context';
+import { AccordionItemProps } from './AccordionItem.props';
 
 const AccordionItem = ({ children, style, noPadding, disabled, ...props }: AccordionItemProps) => {
   const context = useMemo(() => ({ noPadding, disabled }), [noPadding, disabled]);
@@ -20,7 +20,7 @@ AccordionItem.displayName = 'AccordionItemRoot';
 const styles = StyleSheet.create(theme => ({
   item: {
     borderBottomWidth: theme.components.divider.borderWidth,
-    borderBottomColor: theme.components.divider.color,
+    borderBottomColor: theme.color.border.subtle,
   },
 }));
 

package/src/components/Accordion/AccordionTrigger.tsx

@@ -1,7 +1,7 @@
 import { Pressable, PressableProps } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
 import { useAccordionContext } from './Accordion.context';
 import { useAccordionItemContext } from './AccordionItem.context';
-import { StyleSheet } from 'react-native-unistyles';
 
 const AccordionTrigger = ({
   states,
@@ -29,11 +29,11 @@ const styles = StyleSheet.create(theme => ({
     width: '100%',
     _web: {
       _hover: {
-        backgroundColor: theme.components.accordion.item.backgroundColorHover,
+        backgroundColor: theme.color.interactive.neutral.surface.subtle.hover,
       },
       '_focus-visible': theme.helpers.focusVisible,
       _active: {
-        backgroundColor: theme.components.accordion.item.backgroundColorActive,
+        backgroundColor: theme.color.interactive.neutral.surface.subtle.active,
       },
     },
     variants: {
@@ -44,7 +44,7 @@ const styles = StyleSheet.create(theme => ({
       },
       active: {
         true: {
-          backgroundColor: theme.components.accordion.item.backgroundColorActive,
+          backgroundColor: theme.color.interactive.neutral.surface.subtle.active,
         },
       },
     },

package/src/components/Accordion/index.ts

@@ -1,11 +1,10 @@
 export {
   default as Accordion,
-  AccordionItem,
-  AccordionHeader,
-  AccordionTrigger,
   AccordionContent,
   AccordionContentText,
+  AccordionHeader,
   AccordionIcon,
+  AccordionItem,
   AccordionTitleText,
+  AccordionTrigger,
 } from './Accordion';
-export * from './AccordionHeader';

package/src/components/Alert/Alert.docs.mdx

@@ -1,18 +1,18 @@
-import { Meta, Primary, Controls, Story, Canvas } from '@storybook/addon-docs/blocks';
-import * as Stories from './Alert.stories';
+import { Canvas, Controls, Meta, Primary, Story } from '@storybook/addon-docs/blocks';
 import {
   Alert,
-  Center,
+  AlertCloseButton,
+  AlertContent,
   AlertIcon,
+  AlertIconButton,
+  AlertLink,
   AlertText,
   AlertTitle,
-  AlertLink,
-  AlertIconButton,
-  AlertCloseButton,
-  AlertContent,
+  Center,
 } from '../../';
+import * as Stories from './Alert.stories';
 
-import { ViewFigmaButton, BackToTopButton, UsageWrap } from '../../../docs/components';
+import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
 
 <Meta title="Components / Alert" />
 
@@ -42,7 +42,7 @@ The Alert offers different colour schemes, the colour scheme is mapped to an ico
 
 <UsageWrap>
   <Alert
-    colorScheme="blue"
+    colorScheme="info"
     title="Information"
     text="Unlock the power of knowledge with the following information."
   />
@@ -54,7 +54,7 @@ import { Alert } from '@utilitywarehouse/native-ui';
 const MyComponent = () => {
   return (
     <Alert
-      colorScheme="blue"
+      colorScheme="info"
       title="Information"
       text="Unlock the power of knowledge with the following information."
     />
@@ -64,22 +64,22 @@ const MyComponent = () => {
 
 ## Props
 
-| Property            | Type                                     | Description                                                       | Default |
-| ------------------- | ---------------------------------------- | ----------------------------------------------------------------- | ------- |
-| `colorScheme`       | `'blue' \| 'green' \| 'orange' \| 'red'` | The colour scheme of the alert. Mapped to an icon.                | 'blue'  |
-| `title`             | `string`                                 | The title of the alert.                                           |         |
-| `text`              | `string`                                 | The text of the alert.                                            |         |
-| `link`              | `string`                                 | The text of the link.                                             |         |
-| `linkTestID`        | `string`                                 | The testID of the link.                                           |         |
-| `iconButtonTestID`  | `string`                                 | The testID of the icon button.                                    |         |
-| `onPress`           | `() => void`                             | A callback function to be called when the alert is tapped.        |         |
-| `onPressLink`       | `() => void`                             | A callback function to be called when the link is tapped.         |         |
-| `onPressIconButton` | `() => void`                             | A callback function to be called when the icon button is tapped.  |         |
-| `onClose`           | `() => void`                             | A callback function to be called when the close button is tapped. |         |
+| Property            | Type                                            | Description                                                       | Default |
+| ------------------- | ----------------------------------------------- | ----------------------------------------------------------------- | ------- |
+| `colorScheme`       | `'info' \| 'positive' \| 'warning' \| 'danger'` | The colour scheme of the alert. Mapped to an icon.                | 'info'  |
+| `title`             | `string`                                        | The title of the alert.                                           |         |
+| `text`              | `string`                                        | The text of the alert.                                            |         |
+| `link`              | `string`                                        | The text of the link.                                             |         |
+| `linkTestID`        | `string`                                        | The testID of the link.                                           |         |
+| `iconButtonTestID`  | `string`                                        | The testID of the icon button.                                    |         |
+| `onPress`           | `() => void`                                    | A callback function to be called when the alert is tapped.        |         |
+| `onPressLink`       | `() => void`                                    | A callback function to be called when the link is tapped.         |         |
+| `onPressIconButton` | `() => void`                                    | A callback function to be called when the icon button is tapped.  |         |
+| `onClose`           | `() => void`                                    | A callback function to be called when the close button is tapped. |         |
 
 ## Variants
 
-The `Alert` component has four colour schemes: blue, green, orange and red. Each colour scheme is mapped to an icon.
+The `Alert` component has four colour schemes: info, positive, warning and danger. Each colour scheme is mapped to an icon.
 
 <Canvas of={Stories.Variants} />
 
@@ -88,7 +88,7 @@ The `Alert` component has four colour schemes: blue, green, orange and red. Each
 If you need to use the Alert component in a more advanced way, you can use the parts of the component directly.
 
 <UsageWrap>
-  <Alert colorScheme="blue">
+  <Alert colorScheme="info">
     <AlertIcon />
     <AlertContent>
       <AlertTitle>Information</AlertTitle>
@@ -116,7 +116,7 @@ import { InfoMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
 
 const MyComponent = () => {
   return (
-    <Alert colorScheme="blue">
+    <Alert colorScheme="info">
       <AlertIcon as={InfoMediumIcon} />
       <AlertContent>
         <AlertTitle>Information</AlertTitle>