@utilitywarehouse/hearth-react-native 0.3.0 → 0.4.0

package/.storybook/preview.tsx

@@ -73,6 +73,9 @@ const preview = {
           'Hooks',
           'Layout Components',
           'All Components',
+          'Primitives',
+          'Typography',
+          'Forms',
         ],
       },
     },

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
 
-> @utilitywarehouse/hearth-react-native@0.3.0 build /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.4.0 build /home/runner/work/hearth/hearth/packages/react-native
 > tsc
 

package/.turbo/turbo-lint.log

@@ -1,6 +1,8 @@
 
-> @utilitywarehouse/hearth-react-native@0.3.0 lint /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.4.0 lint /home/runner/work/hearth/hearth/packages/react-native
 > TIMING=1 eslint --max-warnings 0
 
 Rule | Time (ms) | Relative
 :----|----------:|--------:
+Rule | Time (ms) | Relative
+:----|----------:|--------:

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @utilitywarehouse/hearth-react-native
 
+## 0.4.0
+
+### Minor Changes
+
+- [#511](https://github.com/utilitywarehouse/hearth/pull/511) [`04f804c`](https://github.com/utilitywarehouse/hearth/commit/04f804ca93d6e8881f649a0374a3b878c3217623) Thanks [@jordmccord](https://github.com/jordmccord)! - Adds `DatePicker` and `DatePickerInput` components
+
+### Patch Changes
+
+- [#511](https://github.com/utilitywarehouse/hearth/pull/511) [`04f804c`](https://github.com/utilitywarehouse/hearth/commit/04f804ca93d6e8881f649a0374a3b878c3217623) Thanks [@jordmccord](https://github.com/jordmccord)! - Fixes `useTheme` typing
+
+## 0.3.1
+
+### Patch Changes
+
+- [#472](https://github.com/utilitywarehouse/hearth/pull/472) [`009fe4b`](https://github.com/utilitywarehouse/hearth/commit/009fe4bff4fc54e424f22629040f715d3d4714ea) Thanks [@jordmccord](https://github.com/jordmccord)! - Add `image` prop to `Checkbox` and `Radio` components
+
+- [#500](https://github.com/utilitywarehouse/hearth/pull/500) [`cc49e74`](https://github.com/utilitywarehouse/hearth/commit/cc49e74e3736b9647e8c5576ce45020add258625) Thanks [@jordmccord](https://github.com/jordmccord)! - - Updated dependencies [[`8dac8c1`](https://github.com/utilitywarehouse/hearth/commit/8dac8c1def9083d8e4efa1385e0ee7be23428c46)]:
+
+  - @utilitywarehouse/hearth-react-native-icons@0.4.0
+
+- [#499](https://github.com/utilitywarehouse/hearth/pull/499) [`7b6781c`](https://github.com/utilitywarehouse/hearth/commit/7b6781cc054cf9f1ed4969a2c663abceb526c249) Thanks [@jordmccord](https://github.com/jordmccord)! - Fixes dark mode styles for several components
+
 ## 0.3.0
 
 ### Minor Changes

package/build/components/Alert/AlertCloseButton.js

@@ -2,14 +2,36 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { CloseSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import { StyleSheet } from 'react-native-unistyles';
 import { UnstyledIconButton } from '../UnstyledIconButton';
-const AlertCloseButton = ({ style, icon = CloseSmallIcon, ...props }) => (_jsx(UnstyledIconButton, { ...props, size: "sm", style: [styles.icon, style], icon: icon }));
+import { useAlertContext } from './Alert.context';
+const AlertCloseButton = ({ style, icon = CloseSmallIcon, ...props }) => {
+    const { colorScheme } = useAlertContext();
+    styles.useVariants({ colorScheme });
+    return (_jsx(UnstyledIconButton, { ...props, size: "sm", style: [styles.button, style], icon: icon, iconStyle: styles.icon }));
+};
 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';
 export default AlertCloseButton;

package/build/components/Alert/AlertIcon.js

@@ -14,6 +14,7 @@ const AlertIcon = (props) => {
         }
         return InfoMediumIcon;
     })();
+    styles.useVariants({ colorScheme });
     return _jsx(Icon, { ...props, as: props.as ?? asProp, style: styles.icon });
 };
 AlertIcon.displayName = 'AlertIcon';
@@ -24,7 +25,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,
+                },
+            },
+        },
     },
 }));
 export default AlertIcon;

package/build/components/Alert/AlertIconButton.js

@@ -1,6 +1,32 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ChevronRightSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { StyleSheet } from 'react-native-unistyles';
 import { UnstyledIconButton } from '../UnstyledIconButton';
-const AlertIconButton = ({ style, icon = ChevronRightSmallIcon, ...props }) => (_jsx(UnstyledIconButton, { ...props, size: "sm", style: style, icon: icon }));
+import { useAlertContext } from './Alert.context';
+const AlertIconButton = ({ style, icon = ChevronRightSmallIcon, ...props }) => {
+    const { colorScheme } = useAlertContext();
+    styles.useVariants({ colorScheme });
+    return (_jsx(UnstyledIconButton, { ...props, size: "sm", style: style, icon: icon, iconStyle: styles.icon }));
+};
+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';
 export default AlertIconButton;

package/build/components/Alert/AlertLink.js

@@ -1,7 +1,53 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { StyleSheet } from 'react-native-unistyles';
 import { Link } from '../Link';
+import { useAlertContext } from './Alert.context';
 const AlertLink = ({ children, ...props }) => {
-    return _jsx(Link, { ...props, children: children });
+    const { colorScheme } = useAlertContext();
+    styles.useVariants({ colorScheme });
+    return (_jsx(Link, { ...props, textStyle: styles.text, iconStyle: styles.icon, children: children }));
 };
+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/build/components/Alert/AlertText.d.ts

@@ -1,6 +1,6 @@
 import { TextProps } from 'react-native';
 declare const AlertText: {
-    ({ children, ...props }: TextProps & {
+    ({ children, style, ...props }: TextProps & {
         semibold?: boolean;
     }): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/build/components/Alert/AlertText.js

@@ -1,7 +1,31 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { StyleSheet } from 'react-native-unistyles';
 import { BodyText } from '../BodyText';
-const AlertText = ({ children, ...props }) => {
-    return (_jsx(BodyText, { size: "md", ...props, children: children }));
+import { useAlertContext } from './Alert.context';
+const AlertText = ({ children, style, ...props }) => {
+    const { colorScheme } = useAlertContext();
+    styles.useVariants({ colorScheme });
+    return (_jsx(BodyText, { size: "md", style: [styles.text, style], ...props, children: children }));
 };
+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;

package/build/components/Alert/AlertTitle.d.ts

@@ -1,6 +1,6 @@
 import type { TextProps } from 'react-native';
 declare const AlertTitle: {
-    ({ children, ...props }: TextProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, style, ...props }: TextProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default AlertTitle;

package/build/components/Alert/AlertTitle.js

@@ -1,7 +1,31 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { StyleSheet } from 'react-native-unistyles';
 import { DetailText } from '../DetailText';
-const AlertTitle = ({ children, ...props }) => {
-    return (_jsx(DetailText, { size: "md", ...props, children: children }));
+import { useAlertContext } from './Alert.context';
+const AlertTitle = ({ children, style, ...props }) => {
+    const { colorScheme } = useAlertContext();
+    styles.useVariants({ colorScheme });
+    return (_jsx(DetailText, { size: "md", style: [styles.title, style], ...props, children: children }));
 };
+const styles = StyleSheet.create(theme => ({
+    title: {
+        variants: {
+            colorScheme: {
+                info: {
+                    color: theme.color.feedback.info.foreground,
+                },
+                positive: {
+                    color: theme.color.feedback.positive.foreground,
+                },
+                danger: {
+                    color: theme.color.feedback.danger.foreground,
+                },
+                warning: {
+                    color: theme.color.feedback.warning.foreground,
+                },
+            },
+        },
+    },
+}));
 AlertTitle.displayName = 'AlertTitle';
 export default AlertTitle;

package/build/components/Badge/BadgeIcon.js

@@ -40,6 +40,78 @@ const styles = StyleSheet.create(theme => ({
             },
         },
         compoundVariants: [
+            // Emphasis
+            {
+                colorScheme: 'info',
+                variant: 'emphasis',
+                styles: {
+                    color: theme.color.feedback.info.foreground.default,
+                },
+            },
+            {
+                colorScheme: 'danger',
+                variant: 'emphasis',
+                styles: {
+                    color: theme.color.feedback.danger.foreground.default,
+                },
+            },
+            {
+                colorScheme: 'positive',
+                variant: 'emphasis',
+                styles: {
+                    color: theme.color.feedback.positive.foreground.default,
+                },
+            },
+            {
+                colorScheme: 'warning',
+                variant: 'emphasis',
+                styles: {
+                    color: theme.color.feedback.warning.foreground.default,
+                },
+            },
+            {
+                colorScheme: 'functional',
+                variant: 'emphasis',
+                styles: {
+                    color: theme.color.feedback.functional.foreground.default,
+                },
+            },
+            // Subtle
+            {
+                colorScheme: 'info',
+                variant: 'subtle',
+                styles: {
+                    color: theme.color.feedback.info.foreground.default,
+                },
+            },
+            {
+                colorScheme: 'danger',
+                variant: 'subtle',
+                styles: {
+                    color: theme.color.feedback.danger.foreground.default,
+                },
+            },
+            {
+                colorScheme: 'positive',
+                variant: 'subtle',
+                styles: {
+                    color: theme.color.feedback.positive.foreground.default,
+                },
+            },
+            {
+                colorScheme: 'warning',
+                variant: 'subtle',
+                styles: {
+                    color: theme.color.feedback.warning.foreground.default,
+                },
+            },
+            {
+                colorScheme: 'functional',
+                variant: 'subtle',
+                styles: {
+                    color: theme.color.feedback.functional.foreground.default,
+                },
+            },
             // Outline
             {
                 colorScheme: 'info',

package/build/components/Badge/BadgeText.js

@@ -36,6 +36,78 @@ const styles = StyleSheet.create(theme => ({
             },
         },
         compoundVariants: [
+            // Emphasis
+            {
+                colorScheme: 'info',
+                variant: 'emphasis',
+                styles: {
+                    color: theme.color.feedback.info.foreground.default,
+                },
+            },
+            {
+                colorScheme: 'danger',
+                variant: 'emphasis',
+                styles: {
+                    color: theme.color.feedback.danger.foreground.default,
+                },
+            },
+            {
+                colorScheme: 'positive',
+                variant: 'emphasis',
+                styles: {
+                    color: theme.color.feedback.positive.foreground.default,
+                },
+            },
+            {
+                colorScheme: 'warning',
+                variant: 'emphasis',
+                styles: {
+                    color: theme.color.feedback.warning.foreground.default,
+                },
+            },
+            {
+                colorScheme: 'functional',
+                variant: 'emphasis',
+                styles: {
+                    color: theme.color.feedback.functional.foreground.default,
+                },
+            },
+            // Subtle
+            {
+                colorScheme: 'info',
+                variant: 'subtle',
+                styles: {
+                    color: theme.color.feedback.info.foreground.default,
+                },
+            },
+            {
+                colorScheme: 'danger',
+                variant: 'subtle',
+                styles: {
+                    color: theme.color.feedback.danger.foreground.default,
+                },
+            },
+            {
+                colorScheme: 'positive',
+                variant: 'subtle',
+                styles: {
+                    color: theme.color.feedback.positive.foreground.default,
+                },
+            },
+            {
+                colorScheme: 'warning',
+                variant: 'subtle',
+                styles: {
+                    color: theme.color.feedback.warning.foreground.default,
+                },
+            },
+            {
+                colorScheme: 'functional',
+                variant: 'subtle',
+                styles: {
+                    color: theme.color.feedback.functional.foreground.default,
+                },
+            },
             // Outline
             {
                 colorScheme: 'info',

package/build/components/Button/ButtonRoot.js

@@ -177,6 +177,7 @@ const styles = StyleSheet.create(theme => ({
                 colorScheme: 'affirmative',
                 styles: {
                     backgroundColor: theme.color.interactive.affirmative.surface.strong.default,
+                    borderColor: theme.color.interactive.affirmative.border.strong,
                     _web: {
                         _hover: {
                             backgroundColor: theme.color.interactive.affirmative.surface.strong.hover,

package/build/components/Checkbox/Checkbox.d.ts

@@ -10,12 +10,12 @@ declare const CheckboxIcon: import("react").ForwardRefExoticComponent<import("re
 }>;
 declare const CheckboxLabel: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("../Label/Label.props").default> & Omit<import("../Label/Label.props").default, "ref">>;
 declare const Checkbox: {
-    ({ children, label, disabled, checked, helperIcon, helperText, invalidText, validText, validationStatus: validation, showValidationIcon, type, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, label, disabled, checked, helperIcon, helperText, invalidText, validText, validationStatus: validation, showValidationIcon, type, image, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 declare const CheckboxTile: {
     ({ type, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
-export { Checkbox, CheckboxGroup, CheckboxIndicator, CheckboxIcon, CheckboxLabel, CheckboxTile };
+export { Checkbox, CheckboxGroup, CheckboxIcon, CheckboxIndicator, CheckboxLabel, CheckboxTile };
 export default Checkbox;

package/build/components/Checkbox/Checkbox.js

@@ -1,15 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { createCheckbox } from '@gluestack-ui/checkbox';
-import StyledCheckbox from './CheckboxRoot';
-import StyledCheckboxIndicator from './CheckboxIndicator';
-import StyledCheckboxIcon from './CheckboxIcon';
-import StyledCheckboxLabel from './CheckboxLabel';
-import StyledCheckboxGroup from './CheckboxGroupRoot';
+import { useFormFieldContext } from '../FormField';
 import { Helper } from '../Helper';
 import { useCheckboxGroupContext } from './CheckboxGroup.context';
-import { useFormFieldContext } from '../FormField';
-import CheckboxTileRoot from './CheckboxTileRoot';
+import StyledCheckboxGroup from './CheckboxGroupRoot';
+import StyledCheckboxIcon from './CheckboxIcon';
+import CheckboxImage from './CheckboxImage';
+import StyledCheckboxIndicator from './CheckboxIndicator';
+import StyledCheckboxLabel from './CheckboxLabel';
+import StyledCheckbox from './CheckboxRoot';
 import CheckboxTextContent from './CheckboxTextContent';
+import CheckboxTileRoot from './CheckboxTileRoot';
 const CheckboxComponent = createCheckbox({
     Root: StyledCheckbox,
     Group: StyledCheckboxGroup,
@@ -25,12 +26,12 @@ CheckboxGroup.displayName = 'CheckboxGroup';
 CheckboxIndicator.displayName = 'CheckboxIndicator';
 CheckboxIcon.displayName = 'CheckboxIcon';
 CheckboxLabel.displayName = 'CheckboxLabel';
-const Checkbox = ({ children, label, disabled, checked, helperIcon, helperText, invalidText, validText, validationStatus: validation, showValidationIcon, type = 'default', ...props }) => {
+const Checkbox = ({ children, label, disabled, checked, helperIcon, helperText, invalidText, validText, validationStatus: validation, showValidationIcon, type = 'default', image, ...props }) => {
     const { validationStatus: fieldValidationStatus } = useFormFieldContext();
     const { validationStatus: groupValidationStatus, type: groupType } = useCheckboxGroupContext();
     const validationStatus = fieldValidationStatus ?? groupValidationStatus ?? validation ?? 'initial';
     const checkboxType = groupType ?? type;
-    const checkboxChildren = children ? (children) : (_jsxs(_Fragment, { children: [_jsx(CheckboxIndicator, { children: _jsx(CheckboxIcon, {}) }), _jsxs(CheckboxTextContent, { children: [!!label && _jsx(CheckboxLabel, { children: label }), !!helperText && _jsx(Helper, { disabled: disabled, icon: helperIcon, text: helperText }), validationStatus === 'invalid' && !!invalidText && (_jsx(Helper, { showIcon: showValidationIcon, disabled: disabled, validationStatus: "invalid", text: invalidText })), validationStatus === 'valid' && !!validText && (_jsx(Helper, { disabled: disabled, showIcon: showValidationIcon, validationStatus: "valid", text: validText }))] })] }));
+    const checkboxChildren = children ? (children) : (_jsxs(_Fragment, { children: [_jsx(CheckboxIndicator, { children: _jsx(CheckboxIcon, {}) }), image ? _jsx(CheckboxImage, { ...image }) : null, _jsxs(CheckboxTextContent, { children: [!!label && _jsx(CheckboxLabel, { children: label }), !!helperText && _jsx(Helper, { disabled: disabled, icon: helperIcon, text: helperText }), validationStatus === 'invalid' && !!invalidText && (_jsx(Helper, { showIcon: showValidationIcon, disabled: disabled, validationStatus: "invalid", text: invalidText })), validationStatus === 'valid' && !!validText && (_jsx(Helper, { disabled: disabled, showIcon: showValidationIcon, validationStatus: "valid", text: validText }))] })] }));
     return (
     // @ts-expect-error - type
     _jsx(CheckboxComponent, { ...props, isDisabled: disabled, isChecked: checked, children: checkboxType === 'tile' ? (_jsx(CheckboxTileRoot, { children: checkboxChildren })) : (checkboxChildren) }));
@@ -40,5 +41,5 @@ const CheckboxTile = ({ type = 'tile', ...props }) => {
 };
 CheckboxTile.displayName = 'CheckboxTile';
 Checkbox.displayName = 'Checkbox';
-export { Checkbox, CheckboxGroup, CheckboxIndicator, CheckboxIcon, CheckboxLabel, CheckboxTile };
+export { Checkbox, CheckboxGroup, CheckboxIcon, CheckboxIndicator, CheckboxLabel, CheckboxTile };
 export default Checkbox;

package/build/components/Checkbox/Checkbox.props.d.ts

@@ -1,5 +1,5 @@
 import type { ComponentType } from 'react';
-import type { PressableProps, ViewProps } from 'react-native';
+import type { ImageProps, PressableProps, ViewProps } from 'react-native';
 type CheckboxBaseProps = {
     onChange?: (isSelected: boolean) => void;
     disabled?: boolean;
@@ -20,6 +20,7 @@ type CheckboxWithChildrenProps = {
     invalidText?: never;
     validText?: never;
     showValidationIcon?: never;
+    image?: never;
 } & CheckboxBaseProps;
 type CheckboxWithoutChildrenProps = {
     children?: never;
@@ -29,6 +30,7 @@ type CheckboxWithoutChildrenProps = {
     invalidText?: string;
     validText?: string;
     showValidationIcon?: boolean;
+    image?: ImageProps;
 } & CheckboxBaseProps;
 type CheckboxProps = CheckboxWithChildrenProps | CheckboxWithoutChildrenProps;
 export default CheckboxProps;

package/build/components/Checkbox/CheckboxIcon.js

@@ -10,7 +10,7 @@ const CheckboxIcon = ({ style, ...props }) => {
 };
 const styles = StyleSheet.create(theme => ({
     icon: {
-        color: theme.color.icon.inverted,
+        color: theme.components.checkbox.checked.icon.color,
     },
 }));
 CheckboxIcon.displayName = 'CheckboxIcon';

package/build/components/Checkbox/CheckboxImage.d.ts

@@ -0,0 +1,6 @@
+import { ImageProps } from 'react-native';
+declare const CheckboxImage: {
+    ({ source, style, ...props }: ImageProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default CheckboxImage;

package/build/components/Checkbox/CheckboxImage.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Image } from 'react-native';
+const CheckboxImage = ({ source, style, ...props }) => (_jsx(Image, { source: source, style: style, ...props }));
+CheckboxImage.displayName = 'CheckboxImage';
+export default CheckboxImage;

package/build/components/Checkbox/CheckboxTileRoot.js

@@ -18,7 +18,7 @@ const styles = StyleSheet.create(theme => ({
         gap: theme.components.checkbox.gap,
         padding: theme.components.checkbox.tile.padding,
         borderWidth: theme.components.checkbox.tile.borderWidth,
-        borderColor: theme.color.border.subtle,
+        borderColor: theme.color.border.strong,
         borderRadius: theme.components.checkbox.tile.borderRadius,
         backgroundColor: theme.color.surface.neutral.strong,
         variants: {

package/build/components/Checkbox/index.d.ts

@@ -1,5 +1,6 @@
-export { default as Checkbox, CheckboxIndicator, CheckboxLabel, CheckboxIcon, CheckboxTile, } from './Checkbox';
+export { default as Checkbox, CheckboxIcon, CheckboxIndicator, CheckboxLabel, CheckboxTile, } from './Checkbox';
+export type { default as CheckboxProps } from './Checkbox.props';
 export { default as CheckboxGroup } from './CheckboxGroup';
 export { default as CheckboxGroupTextContent } from './CheckboxGroupTextContent';
+export { default as CheckboxImage } from './CheckboxImage';
 export { default as CheckboxTextContent } from './CheckboxTextContent';
-export type { default as CheckboxProps } from './Checkbox.props';

package/build/components/Checkbox/index.js

@@ -1,4 +1,5 @@
-export { default as Checkbox, CheckboxIndicator, CheckboxLabel, CheckboxIcon, CheckboxTile, } from './Checkbox';
+export { default as Checkbox, CheckboxIcon, CheckboxIndicator, CheckboxLabel, CheckboxTile, } from './Checkbox';
 export { default as CheckboxGroup } from './CheckboxGroup';
 export { default as CheckboxGroupTextContent } from './CheckboxGroupTextContent';
+export { default as CheckboxImage } from './CheckboxImage';
 export { default as CheckboxTextContent } from './CheckboxTextContent';

package/build/components/CurrencyInput/CurrencyInput.js

@@ -21,7 +21,7 @@ const CurrencyInput = ({ validationStatus = 'initial', disabled, focused, readon
         }
     };
     const displayValue = autoFormatThousands && typeof value === 'string' ? formatThousands(value) : value;
-    return (_jsxs(Input, { validationStatus: validationStatusFromContext, disabled: formFieldDisabled ?? disabled, readonly: readonly, focused: focused, style: styles.wrap, children: [_jsx(InputSlot, { children: _jsx(DetailText, { size: "4xl", style: styles.text, children: "\u00A3" }) }), _jsx(InputField, { inputMode: "decimal", inBottomSheet: inBottomSheet, ...rest, placeholder: getPlaceholder, keyboardType: "decimal-pad", style: styles.input, value: displayValue, onChangeText: handleChangeText })] }));
+    return (_jsxs(Input, { validationStatus: validationStatusFromContext, disabled: formFieldDisabled ?? disabled, readonly: readonly, focused: focused, style: styles.wrap, children: [_jsx(InputSlot, { children: _jsx(DetailText, { size: "4xl", style: styles.text, accessible: false, children: "\u00A3" }) }), _jsx(InputField, { inputMode: "decimal", inBottomSheet: inBottomSheet, accessibilityHint: 'Enter the amount in pounds and pence, for example "10.99"', ...rest, placeholder: getPlaceholder, keyboardType: "decimal-pad", style: styles.input, value: displayValue, onChangeText: handleChangeText })] }));
 };
 CurrencyInput.displayName = 'CurrencyInput';
 const styles = StyleSheet.create(theme => ({

package/build/components/DatePicker/DatePicker.context.d.ts

@@ -0,0 +1,19 @@
+import type { DatePickerBaseProps, DateType } from './DatePicker.props';
+import { CalendarViews } from './enums';
+export interface DatePickerContextType extends DatePickerBaseProps {
+    showOutsideDays: boolean;
+    firstDayOfWeek: number;
+    calendarView: CalendarViews;
+    currentDate: DateType;
+    currentYear: number;
+    numerals: 'latn';
+    setCalendarView: (value: CalendarViews) => void;
+    onSelectDate: (date: DateType) => void;
+    onSelectMonth: (month: number) => void;
+    onSelectYear: (year: number) => void;
+    onChangeMonth: (value: number) => void;
+    onChangeYear: (value: number) => void;
+    closeDatePicker: () => void;
+}
+export declare const DatePickerContext: import("react").Context<DatePickerContextType>;
+export declare const useDatePickerContext: () => DatePickerContextType;

package/build/components/DatePicker/DatePicker.context.js

@@ -0,0 +1,3 @@
+import { createContext, useContext } from 'react';
+export const DatePickerContext = createContext({});
+export const useDatePickerContext = () => useContext(DatePickerContext);