@utilitywarehouse/hearth-react-native 0.4.0 → 0.4.2

package/build/utils/getFlattenedColorValue.js

@@ -1,23 +1,6 @@
+import { resolveThemeValue } from './themeValueHelpers';
 export default function getFlattenedColorValue(value, colors) {
     if (!value)
         return undefined;
-    if (colors?.[value] && typeof colors?.[value] === 'string') {
-        return colors?.[value];
-    }
-    // Extract trailing digits as shade
-    const shadeMatch = value.match(/\d+$/);
-    if (!shadeMatch)
-        return value;
-    const shade = shadeMatch[0];
-    const base = value.slice(0, -shade.length);
-    if (shade && typeof base !== 'string')
-        return value;
-    const colorEntry = colors?.[base];
-    if (typeof colorEntry === 'object') {
-        return (colorEntry[shade] ?? value);
-    }
-    else if (typeof colorEntry === 'string') {
-        return colorEntry;
-    }
-    return value;
+    return resolveThemeValue(value, colors);
 }

package/build/utils/index.d.ts

@@ -5,3 +5,4 @@ export { default as getStyleValue } from './getStyleValue';
 export { default as hexWithOpacity } from './hexWithOpacity';
 export { default as isEqual } from './isEqual';
 export * from './styleUtils';
+export * from './themeValueHelpers';

package/build/utils/index.js

@@ -5,3 +5,4 @@ export { default as getStyleValue } from './getStyleValue';
 export { default as hexWithOpacity } from './hexWithOpacity';
 export { default as isEqual } from './isEqual';
 export * from './styleUtils';
+export * from './themeValueHelpers';

package/build/utils/styleUtils.d.ts

@@ -15,7 +15,3 @@ export declare const themeStyleMapping: {
  * Set of all possible ViewStyle property names
  */
 export declare const viewStyleProps: Set<string>;
-/**
- * Helper function to resolve a theme value
- */
-export declare const resolveThemeValue: (value: any, themeMapping: any) => any;

package/build/utils/styleUtils.js

@@ -218,53 +218,3 @@ export const viewStyleProps = new Set([
     // Z-index
     'zIndex',
 ]);
-/**
- * Helper function to convert camelCase back to nested object path
- * e.g., feedbackDangerSurfaceDefault -> ['feedback', 'danger', 'surface', 'default']
- */
-const camelCaseToPath = (camelCased) => {
-    // Split on uppercase letters but keep them
-    const parts = camelCased.split(/(?=[A-Z])/).map(part => part.toLowerCase());
-    return parts;
-};
-/**
- * Helper function to get nested value from object using path array
- */
-const getNestedValue = (obj, path) => {
-    return path.reduce((current, key) => {
-        return current && typeof current === 'object' ? current[key] : undefined;
-    }, obj);
-};
-/**
- * Helper function to resolve a theme value
- */
-export const resolveThemeValue = (value, themeMapping) => {
-    if (typeof value !== 'string' || !themeMapping || typeof themeMapping !== 'object') {
-        return value;
-    }
-    // First, try direct lookup for simple values
-    if (themeMapping[value] !== undefined) {
-        return themeMapping[value];
-    }
-    // Try camelCase to nested path conversion (e.g., feedbackDangerSurfaceDefault)
-    if (/^[a-z][a-zA-Z]*$/.test(value)) {
-        // Only camelCase strings without numbers
-        const path = camelCaseToPath(value);
-        const nestedValue = getNestedValue(themeMapping, path);
-        if (nestedValue !== undefined) {
-            return nestedValue;
-        }
-    }
-    // Then, try the existing numeric suffix pattern (e.g., broadbandBlue100)
-    const shadeMatch = value.match(/\d+$/);
-    if (shadeMatch) {
-        const shade = shadeMatch[0];
-        const base = value.slice(0, -shade.length);
-        const nested = themeMapping[base];
-        if (nested && typeof nested === 'object') {
-            return nested[shade] ?? value;
-        }
-    }
-    // If none of the approaches work, return the original value
-    return value;
-};

package/build/utils/themeValueHelpers.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Helper function to convert camelCase back to nested object path
+ * e.g., feedbackDangerSurfaceDefault -> ['feedback', 'danger', 'surface', 'default']
+ */
+export declare const camelCaseToPath: (camelCased: string) => string[];
+/**
+ * Helper function to get nested value from object using path array
+ */
+export declare const getNestedValue: (obj: any, path: string[]) => any;
+/**
+ * Helper function to resolve a theme value
+ * Supports:
+ * - Direct lookup (value -> themeMapping[value])
+ * - Camel case to nested path (feedbackDangerSurfaceDefault -> themeMapping.feedback.danger.surface.default)
+ * - Numeric suffix pattern (broadbandBlue100 -> themeMapping.broadbandBlue[100])
+ */
+export declare const resolveThemeValue: (value: any, themeMapping: any) => any;

package/build/utils/themeValueHelpers.js

@@ -0,0 +1,54 @@
+/**
+ * Helper function to convert camelCase back to nested object path
+ * e.g., feedbackDangerSurfaceDefault -> ['feedback', 'danger', 'surface', 'default']
+ */
+export const camelCaseToPath = (camelCased) => {
+    // Split on uppercase letters but keep them
+    const parts = camelCased.split(/(?=[A-Z])/).map(part => part.toLowerCase());
+    return parts;
+};
+/**
+ * Helper function to get nested value from object using path array
+ */
+export const getNestedValue = (obj, path) => {
+    return path.reduce((current, key) => {
+        return current && typeof current === 'object' ? current[key] : undefined;
+    }, obj);
+};
+/**
+ * Helper function to resolve a theme value
+ * Supports:
+ * - Direct lookup (value -> themeMapping[value])
+ * - Camel case to nested path (feedbackDangerSurfaceDefault -> themeMapping.feedback.danger.surface.default)
+ * - Numeric suffix pattern (broadbandBlue100 -> themeMapping.broadbandBlue[100])
+ */
+export const resolveThemeValue = (value, themeMapping) => {
+    if (typeof value !== 'string' || !themeMapping || typeof themeMapping !== 'object') {
+        return value;
+    }
+    // First, try direct lookup for simple values
+    if (themeMapping[value] !== undefined) {
+        return themeMapping[value];
+    }
+    // Try camelCase to nested path conversion (e.g., feedbackDangerSurfaceDefault)
+    if (/^[a-z][a-zA-Z]*$/.test(value)) {
+        // Only camelCase strings without numbers
+        const path = camelCaseToPath(value);
+        const nestedValue = getNestedValue(themeMapping, path);
+        if (nestedValue !== undefined) {
+            return nestedValue;
+        }
+    }
+    // Then, try the existing numeric suffix pattern (e.g., broadbandBlue100)
+    const shadeMatch = value.match(/\d+$/);
+    if (shadeMatch) {
+        const shade = shadeMatch[0];
+        const base = value.slice(0, -shade.length);
+        const nested = themeMapping[base];
+        if (nested && typeof nested === 'object') {
+            return nested[shade] ?? value;
+        }
+    }
+    // If none of the approaches work, return the original value
+    return value;
+};

package/docs/getting-started.mdx

@@ -7,15 +7,23 @@ import { BackToTopButton, NextPrevPage } from './components';
 # Getting Started
 
 You can just start using the components from the `@utilitywarehouse/hearth-react-native` package.
+Although there are a few components that require a `BottomSheetModalProvider` to be wrapped around your app.
 
 ```tsx
-import { Box, Alert, BodyText } from '@utilitywarehouse/hearth-react-native';
+import {
+  Box,
+  Alert,
+  BodyText,
+  BottomSheetModalProvider,
+} from '@utilitywarehouse/hearth-react-native';
 
 const App: React.FC = () => (
-  <Box p="200">
-    <Alert variant="info" text="Welcome to Hearth React Native!" />
-    <BodyText>Start building your app with Hearth React Native components.</BodyText>
-  </Box>
+  <BottomSheetModalProvider>
+    <Box p="200">
+      <Alert variant="info" text="Welcome to Hearth React Native!" />
+      <BodyText>Start building your app with Hearth React Native components.</BodyText>
+    </Box>
+  </BottomSheetModalProvider>
 );
 ```
 

package/docs/introduction.mdx

@@ -23,8 +23,11 @@ Hearth React Native is a comprehensive design system library for React Native, p
 
 - [Installation](#installation)
 - [Additional packages](#additional-packages)
+- [Fonts](#fonts)
+  - [iOS Setup](#ios-setup)
   - [Linking the fonts to be used in your project](#linking-the-fonts-to-be-used-in-your-project)
-    - [Using Expo](#using-expo)
+  - [Android Setup](#android-setup)
+  - [Using Expo](#using-expo)
 - [Babel configuration](#babel-configuration)
 - [Jest configuration](#jest-configuration)
 
@@ -66,6 +69,8 @@ as well as fonts and icons. Feel free to additionally install these packages if
 npm install @utilitywarehouse/hearth-tokens
 ```
 
+## Fonts
+
 You will need to include the **Comic Hams**, **DM Mono** and **DM Sans** fonts.
 The easiest way to do this is to use the `@utilitywarehouse/hearth-fonts` package.
 
@@ -73,6 +78,14 @@ The easiest way to do this is to use the `@utilitywarehouse/hearth-fonts` packag
 npm install @utilitywarehouse/hearth-fonts
 ```
 
+### iOS Setup
+
+For iOS, copy the font files to your project's assets folder:
+
+```console
+mkdir -p src/assets/fonts && cp ./node_modules/@utilitywarehouse/hearth-fonts/files/ttf/* src/assets/fonts/
+```
+
 Next, create or update your `react-native.config.js` file in the root directory and paste the code below inside it:
 
 ```js
@@ -81,7 +94,7 @@ module.exports = {
     ios: {},
     android: {},
   },
-  assets: ['./node_modules/@utilitywarehouse/hearth-fornts/files/ttf'],
+  assets: ['./src/assets/fonts/'],
 };
 ```
 
@@ -93,7 +106,36 @@ Now we need to link them so we'll be able to use them in any files inside the pr
 npx react-native-asset
 ```
 
-#### Using Expo
+### Android Setup
+
+For Android, you need to copy the fonts to two locations:
+
+1. Copy TTF files to the assets folder:
+
+```console
+mkdir -p android/app/src/main/assets/fonts && cp ./node_modules/@utilitywarehouse/hearth-fonts/files/ttf/* android/app/src/main/assets/fonts/
+```
+
+2. Copy XML font family definitions to the resources folder:
+
+```console
+mkdir -p android/app/src/main/res/font && cp ./node_modules/@utilitywarehouse/hearth-fonts/files/xml/* android/app/src/main/res/font/
+```
+
+3. Update your `android/app/src/main/java/com/{yourapp}/MainApplication.kt` file to register the custom fonts:
+
+```kotlin
+import com.facebook.react.views.text.ReactFontManager;
+
+// ... inside your onCreate() or initialization method:
+ReactFontManager.getInstance().addCustomFont(this, "DM Sans", R.font.dm_sans)
+ReactFontManager.getInstance().addCustomFont(this, "DM Mono", R.font.dm_mono)
+ReactFontManager.getInstance().addCustomFont(this, "Comic Hams", R.font.comic_hams)
+```
+
+This approach ensures fonts work consistently across platforms with a single canonical name, as described in [this article](https://ospfranco.com/post/2023/08/11/react-native,-how-to-set-up-fonts-with-a-single-canonical-name/).
+
+### Using Expo
 
 If you are using Expo, you can use the `expo-font` and [`expo-xml-font`](https://github.com/Armster15/expo-xml-font) packages to load the fonts.
 Here is an example of how to load the fonts in your `App.tsx` file:
@@ -131,7 +173,7 @@ You will need to add the following Babel plugin to your `babel.config.js` file:
 const unistylesPluginOptions = {
   autoProcessImports: ['@utilitywarehouse/hearth-react-native'],
   autoProcessPaths: ['@utilitywarehouse/hearth-react-native'],
-  autoProcessRoot: 'src', // Adjust this to your project's structure
+  root: 'src', // Adjust this to your project's structure
   debug: false, // Set to true for debugging purposes
 };
 
@@ -152,7 +194,10 @@ If you are using Jest for testing, you will need to add the following configurat
 ```js
 module.exports = {
   // other Jest configurations...
-  setupFiles: ['react-native-unistyles/mocks'],
+  setupFiles: [
+    'react-native-unistyles/mocks',
+    './node_modules/react-native-gesture-handler/jestSetup.js',
+  ],
   // other Jest configurations...
 };
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -37,7 +37,7 @@
     "@vitest/coverage-v8": "^3.2.4",
     "chromatic": "^13.3.0",
     "eslint-plugin-storybook": "9.1.6",
-    "playwright": "^1.53.1",
+    "playwright": "^1.55.1",
     "prismjs": "^1.30.0",
     "react": "^19.1.0",
     "react-native": "0.80.0",
@@ -53,10 +53,10 @@
     "typescript": "^5.7.3",
     "vite": "^7.1.3",
     "vitest": "^3.2.4",
-    "@utilitywarehouse/hearth-fonts": "^0.0.3",
     "@utilitywarehouse/hearth-react-icons": "^0.5.0",
+    "@utilitywarehouse/hearth-fonts": "^0.0.4",
     "@utilitywarehouse/hearth-react-native-icons": "^0.5.0",
-    "@utilitywarehouse/hearth-tokens": "^0.1.0"
+    "@utilitywarehouse/hearth-tokens": "^0.1.3"
   },
   "peerDependencies": {
     "@gorhom/bottom-sheet": "^5.0.0",

package/src/components/Checkbox/CheckboxTextContent.tsx

@@ -1,14 +1,22 @@
-import FlexProps from '../Flex/Flex.props';
+import { StyleSheet } from 'react-native-unistyles';
 import { Flex } from '../Flex';
+import FlexProps from '../Flex/Flex.props';
 
-const CheckboxTextContent = ({ children, ...props }: FlexProps) => {
+const CheckboxTextContent = ({ children, style, ...props }: FlexProps) => {
   return (
-    <Flex direction="column" space="none" {...props}>
+    <Flex style={[styles.content, style]} direction="column" space="none" {...props}>
       {children}
     </Flex>
   );
 };
 
+const styles = StyleSheet.create({
+  content: {
+    flex: 1,
+    flexShrink: 1,
+  },
+});
+
 CheckboxTextContent.displayName = 'CheckboxTextContent';
 
 export default CheckboxTextContent;

package/src/components/CurrencyInput/CurrencyInput.docs.mdx

@@ -56,7 +56,7 @@ When using `CurrencyInput`, the component inherits React Native TextInput props
 | focused             | boolean                             | `false`     | Forces the focused visual state                                                                                           |
 | inBottomSheet       | boolean                             | `false`     | Use BottomSheetTextInput when true                                                                                        |
 | placeholder         | string                              | `'0.00'`    | Placeholder text                                                                                                          |
-| autoFormatThousands | boolean                             | `false`     | Automatically inserts thousand separators while the user types _(Only works with controlled components via onTextChange)_ |
+| disableGroupSeparator | boolean                             | `false`     | Disables automatic inserting of thousand separators while the user types _(Formatting only works with controlled components via onTextChange)_ |
 
 Note: When used inside `FormField`, `validationStatus` and `disabled` are read from the context unless explicitly overridden.
 
@@ -97,12 +97,12 @@ const MyComponent = () => {
 
 ## Formatting
 
-Enable automatic thousand separator formatting by setting `autoFormatThousands`.
+Automatic thousand separator formatting can be disabled by setting `disableGroupSeparator`.
 
-<Canvas of={Stories.AutoFormatThousands} />
+<Canvas of={Stories.DisableGroupSeparator} />
 
 ```tsx
-<CurrencyInput autoFormatThousands value="1234567.89" /> // displays 1,234,567.89
+<CurrencyInput disableGroupSeparator value="1234567.89" /> // displays 1234567.89
 ```
 
 Notes:

package/src/components/CurrencyInput/CurrencyInput.props.ts

@@ -8,8 +8,8 @@ export interface CurrencyInputBaseProps {
   placeholder?: string;
   inBottomSheet?: boolean;
   required?: boolean;
-  /** When true, automatically formats the numeric value with thousand separators (e.g. 1234 -> 1,234). */
-  autoFormatThousands?: boolean;
+  /** When not specifically disabled, the numeric value is automatically formatted with thousand separators (e.g. 1234 -> 1,234). */
+  disableGroupSeparator?: boolean;
 }
 
 export type CurrencyInputProps = CurrencyInputBaseProps &

package/src/components/CurrencyInput/CurrencyInput.stories.tsx

@@ -37,10 +37,10 @@ const meta = {
       description: 'Focused',
       defaultValue: false,
     },
-    autoFormatThousands: {
+    disableGroupSeparator: {
       control: 'boolean',
       description:
-        'Automatically add thousand separators while typing _(Only works with controlled components via onTextChange)_',
+        'Disable automatic adding of thousand separators while typing _(Formatting only works with controlled components via onTextChange)_',
       defaultValue: false,
     },
   },
@@ -50,26 +50,28 @@ const meta = {
     disabled: false,
     readonly: false,
     focused: false,
-    autoFormatThousands: false,
+    disableGroupSeparator: false,
   },
 } satisfies Meta<typeof CurrencyInput>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Playground: Story = {};
+export const Playground: Story = {
+  render: args => {
+    const [value, setValue] = useState('12345.67');
+    return <CurrencyInput {...args} value={value} onChangeText={setValue} />;
+  },
+};
 
-export const AutoFormatThousands: Story = {
+export const DisableGroupSeparator: Story = {
   parameters: {
-    controls: { include: ['autoFormatThousands'] },
+    controls: { include: ['disableGroupSeparator'] },
   },
-  args: { autoFormatThousands: true },
+  args: { disableGroupSeparator: true },
   render: args => {
-    const [value, setValue] = useState('1234.56');
-    const handleChange = (val: string) => {
-      setValue(val);
-    };
-    return <CurrencyInput {...args} value={value} onChangeText={handleChange} />;
+    const [value, setValue] = useState('12345.67');
+    return <CurrencyInput {...args} value={value} onChangeText={setValue} />;
   },
 };
 
@@ -105,10 +107,10 @@ export const States: Story = {
           <CurrencyInput disabled />
         </VariantTitle>
         <VariantTitle title="Readonly">
-          <CurrencyInput readonly />
+          <CurrencyInput readonly value="11666"/>
         </VariantTitle>
-        <VariantTitle title="Auto format thousands">
-          <CurrencyInput autoFormatThousands value="1234.56" />
+        <VariantTitle title="Disable auto format thousands">
+          <CurrencyInput disableGroupSeparator value="1234.56" />
         </VariantTitle>
       </Flex>
     );

package/src/components/CurrencyInput/CurrencyInput.tsx

@@ -14,7 +14,7 @@ const CurrencyInput = ({
   placeholder,
   inBottomSheet = false,
   required,
-  autoFormatThousands = false,
+  disableGroupSeparator = false,
   value,
   onChangeText,
   ...rest
@@ -27,7 +27,7 @@ const CurrencyInput = ({
   const getPlaceholder = placeholder ?? defaultFormat;
 
   const handleChangeText = (text: string) => {
-    if (autoFormatThousands) {
+    if (!disableGroupSeparator) {
       const formatted = formatThousands(text);
       onChangeText?.(formatted);
     } else {
@@ -36,7 +36,7 @@ const CurrencyInput = ({
   };
 
   const displayValue =
-    autoFormatThousands && typeof value === 'string' ? formatThousands(value) : value;
+    !disableGroupSeparator && typeof value === 'string' ? formatThousands(value) : value;
 
   return (
     <Input

package/src/components/Radio/RadioTextContent.tsx

@@ -1,14 +1,22 @@
-import FlexProps from '../Flex/Flex.props';
+import { StyleSheet } from 'react-native-unistyles';
 import { Flex } from '../Flex';
+import FlexProps from '../Flex/Flex.props';
 
-const RadioTextContent = ({ children, ...props }: FlexProps) => {
+const RadioTextContent = ({ children, style, ...props }: FlexProps) => {
   return (
-    <Flex direction="column" space="none" {...props}>
+    <Flex direction="column" space="none" style={[styles.content, style]} {...props}>
       {children}
     </Flex>
   );
 };
 
+const styles = StyleSheet.create({
+  content: {
+    flex: 1,
+    flexShrink: 1,
+  },
+});
+
 RadioTextContent.displayName = 'RadioTextContent';
 
 export default RadioTextContent;

package/src/core/themes.ts

@@ -1,4 +1,5 @@
 import { DimensionValue, Platform } from 'react-native';
+import { colors, colorsCommon, colorsDark } from '../legacyTokens';
 import {
   borderRadius,
   borderWidth,
@@ -280,6 +281,15 @@ export const lightTheme = {
   colorMode: 'light',
   isLight: true,
   isDark: false,
+  /**
+   * @deprecated This will be removed in the next major version. This is kept for backward compatibility
+   */
+  colors: {
+    ...colors,
+    ...colorsCommon,
+    white: '#ffffff',
+    black: '#000000',
+  },
   color: {
     ...restOfColors,
     ...light,
@@ -305,10 +315,31 @@ export const darkTheme = {
   colorMode: 'dark',
   isLight: false,
   isDark: true,
+  /**
+   * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
+   */
+  colors: {
+    ...colorsDark,
+    ...colorsCommon,
+    /**
+     * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
+     */
+    white: '#ffffff',
+    /**
+     * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
+     */
+    black: '#000000',
+  },
   color: {
     ...restOfColors,
     ...dark,
+    /**
+     * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
+     */
     white: '#ffffff',
+    /**
+     * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
+     */
     black: '#000000',
   },
   components: components.dark,

package/src/legacyTokens/common/brand.ts

@@ -0,0 +1,18 @@
+// HEY, DON'T EDIT THIS FILE DIRECTLY, IT'S BEEN MAGICALLY GENERATED.
+
+/**
+ * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
+ */
+export const brandMidnight = '#1e0a46';
+/**
+ * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
+ */
+export const brandWhite = '#ffffff';
+/**
+ * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
+ */
+export const brandPink = '#f495f9';
+/**
+ * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
+ */
+export const brandPrimaryPurple = '#550091';

package/src/legacyTokens/common/index.ts

@@ -0,0 +1,10 @@
+// HEY, DON'T EDIT THIS FILE DIRECTLY, IT'S BEEN MAGICALLY GENERATED.
+
+/**
+ * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
+ */
+export * from './brand';
+/**
+ * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
+ */
+export * from './service';

package/src/legacyTokens/common/service.ts

@@ -0,0 +1,22 @@
+// HEY, DON'T EDIT THIS FILE DIRECTLY, IT'S BEEN MAGICALLY GENERATED.
+
+/**
+ * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
+ */
+export const serviceGas = '#75A7FD';
+/**
+ * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
+ */
+export const serviceElectricity = '#62DD99';
+/**
+ * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
+ */
+export const serviceInsurance = '#F25192';
+/**
+ * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
+ */
+export const serviceMobile = '#FFD76F';
+/**
+ * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
+ */
+export const serviceLandline = '#A66DE8';

package/src/legacyTokens/dark/apple.ts

@@ -0,0 +1,30 @@
+// HEY, DON'T EDIT THIS FILE DIRECTLY, IT'S BEEN MAGICALLY GENERATED.
+
+/**
+ * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
+ */
+export const apple100 = '#03361b';
+/**
+ * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
+ */
+export const apple200 = '#087a3c';
+/**
+ * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
+ */
+export const apple300 = '#10b259';
+/**
+ * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
+ */
+export const apple600 = '#62dd99';
+/**
+ * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
+ */
+export const apple700 = '#96e6b7';
+/**
+ * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
+ */
+export const apple800 = '#c1f0d3';
+/**
+ * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
+ */
+export const apple950 = '#e5f9ed';