@utilitywarehouse/hearth-react-native 0.1.0 → 0.3.0

package/build/components/IconContainer/IconContainer.js

@@ -0,0 +1,161 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { StyleSheet, withUnistyles } from 'react-native-unistyles';
+import { Icon } from '../Icon';
+const IconContainer = withUnistyles(({ icon: IconComp, size = 'md', radiusNone = false, variant = 'subtle', color = 'pig', style, ...props }) => {
+    styles.useVariants({ size, radiusNone, variant, color });
+    return (_jsx(View, { style: [styles.container, style], ...props, children: IconComp ? _jsx(Icon, { as: IconComp, style: styles.icon }) : null }));
+});
+IconContainer.displayName = 'IconContainer';
+const styles = StyleSheet.create(theme => ({
+    container: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        overflow: 'hidden',
+        variants: {
+            size: {
+                sm: {
+                    width: theme.components.iconContainer.sm.width,
+                    height: theme.components.iconContainer.sm.height,
+                    padding: theme.components.iconContainer.sm.padding,
+                    borderRadius: theme.components.iconContainer.sm.borderRadiusRounded,
+                },
+                md: {
+                    width: theme.components.iconContainer.md.width,
+                    height: theme.components.iconContainer.md.height,
+                    padding: theme.components.iconContainer.md.padding,
+                    borderRadius: theme.components.iconContainer.md.borderRadiusRounded,
+                },
+                lg: {
+                    width: theme.components.iconContainer.lg.width,
+                    height: theme.components.iconContainer.lg.height,
+                    padding: theme.components.iconContainer.lg.padding,
+                    borderRadius: theme.components.iconContainer.lg.borderRadiusRounded,
+                },
+            },
+            radiusNone: {
+                true: {
+                    borderRadius: 0,
+                },
+                false: {},
+            },
+            variant: {
+                subtle: {},
+                emphasis: {},
+            },
+            color: {
+                pig: {},
+                energy: {},
+                broadband: {},
+                mobile: {},
+                insurance: {},
+                cashback: {},
+                highlight: {},
+            },
+        },
+        compoundVariants: [
+            {
+                variant: 'emphasis',
+                color: 'pig',
+                styles: {
+                    backgroundColor: theme.color.surface.pig.default,
+                },
+            },
+            {
+                variant: 'subtle',
+                color: 'pig',
+                styles: {
+                    backgroundColor: theme.color.surface.pig.subtle,
+                },
+            },
+            {
+                variant: 'emphasis',
+                color: 'energy',
+                styles: {
+                    backgroundColor: theme.color.surface.energy.default,
+                },
+            },
+            {
+                variant: 'subtle',
+                color: 'energy',
+                styles: {
+                    backgroundColor: theme.color.surface.energy.subtle,
+                },
+            },
+            {
+                variant: 'emphasis',
+                color: 'broadband',
+                styles: {
+                    backgroundColor: theme.color.surface.broadband.default,
+                },
+            },
+            {
+                variant: 'subtle',
+                color: 'broadband',
+                styles: {
+                    backgroundColor: theme.color.surface.broadband.subtle,
+                },
+            },
+            {
+                variant: 'emphasis',
+                color: 'mobile',
+                styles: {
+                    backgroundColor: theme.color.surface.mobile.default,
+                },
+            },
+            {
+                variant: 'subtle',
+                color: 'mobile',
+                styles: {
+                    backgroundColor: theme.color.surface.mobile.subtle,
+                },
+            },
+            {
+                variant: 'emphasis',
+                color: 'insurance',
+                styles: {
+                    backgroundColor: theme.color.surface.insurance.default,
+                },
+            },
+            {
+                variant: 'subtle',
+                color: 'insurance',
+                styles: {
+                    backgroundColor: theme.color.surface.insurance.subtle,
+                },
+            },
+            {
+                variant: 'emphasis',
+                color: 'cashback',
+                styles: {
+                    backgroundColor: theme.color.surface.cashback.default,
+                },
+            },
+            {
+                variant: 'subtle',
+                color: 'cashback',
+                styles: {
+                    backgroundColor: theme.color.surface.cashback.subtle,
+                },
+            },
+            {
+                variant: 'emphasis',
+                color: 'highlight',
+                styles: {
+                    backgroundColor: theme.color.surface.highlight.default,
+                },
+            },
+            {
+                variant: 'subtle',
+                color: 'highlight',
+                styles: {
+                    backgroundColor: theme.color.surface.highlight.subtle,
+                },
+            },
+        ],
+    },
+    icon: {
+        color: theme.color.icon.primary,
+    },
+}));
+export default IconContainer;

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

@@ -0,0 +1,15 @@
+import type { ComponentType } from 'react';
+import type { ViewProps } from 'react-native';
+export interface IconContainerProps extends ViewProps {
+    /** Icon component to render inside the container */
+    icon: ComponentType;
+    /** Size of the container */
+    size?: 'sm' | 'md' | 'lg';
+    /** If true, removes border radius from the container */
+    radiusNone?: boolean;
+    /** Background style of the container */
+    variant?: 'subtle' | 'emphasis';
+    /** Background color token of the container */
+    color?: 'pig' | 'energy' | 'broadband' | 'mobile' | 'insurance' | 'cashback' | 'highlight';
+}
+export default IconContainerProps;

package/build/components/IconContainer/IconContainer.props.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,2 @@
+export { default as IconContainer } from './IconContainer';
+export type { default as IconContainerProps } from './IconContainer.props';

package/build/components/IconContainer/index.js

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

package/build/components/Icons/CircleIcon.js

@@ -1,10 +1,10 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { createIcon } from '@gluestack-ui/icon';
-import { Svg, Path } from 'react-native-svg';
+import { Path, Svg } from 'react-native-svg';
 const CircleIcon = createIcon({
     Root: Svg,
     viewBox: '0 0 24 24',
-    path: (_jsx(_Fragment, { children: _jsx(Path, { d: "M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z", fill: "currentColor", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })),
+    path: (_jsx(Path, { d: "M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z", fill: "currentColor", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })),
 });
 CircleIcon.displayName = 'CircleIcon';
 export default CircleIcon;

package/build/components/InlineLink/InlineLinkRoot.js

@@ -21,7 +21,7 @@ const styles = StyleSheet.create(theme => ({
                 borderRadius: theme.borderRadius.xs,
                 outlineStyle: 'solid',
                 outlineWidth: 2,
-                outlineColor: theme.components.focus.border,
+                outlineColor: theme.color.focus.primary,
                 outlineOffset: 1,
                 boxShadow: 'none',
             },
@@ -41,7 +41,7 @@ const styles = StyleSheet.create(theme => ({
                     textDecorationColor: theme.components.inlineLink.inverted.color,
                     _web: {
                         '_focus-visible': {
-                            outlineColor: theme.components.focus.borderInverted,
+                            outlineColor: theme.color.focus.inverted,
                         },
                     },
                 },

package/build/components/Input/Input.d.ts

@@ -8,16 +8,22 @@ export declare const InputComponent: import("@gluestack-ui/input/lib/typescript/
     };
 }, import("..").IconProps & {
     as?: ComponentType;
-}, import("react-native").ViewProps, import("react-native").TextInputProps>;
+}, import("react-native").ViewProps, import("react-native").TextInputProps & {
+    inBottomSheet?: boolean;
+}>;
 export declare const InputSlot: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("react-native").ViewProps> & import("react-native").ViewProps & import("@gluestack-ui/input/lib/typescript/types").IInputSlotProps>;
-export declare const InputField: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("react-native").TextInputProps> & import("react-native").TextInputProps & import("@gluestack-ui/input/lib/typescript/types").IInputProps>;
+export declare const InputField: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("react-native").TextInputProps & {
+    inBottomSheet?: boolean;
+}> & import("react-native").TextInputProps & {
+    inBottomSheet?: boolean;
+} & import("@gluestack-ui/input/lib/typescript/types").IInputProps>;
 export declare const InputIcon: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("..").IconProps & {
     as?: ComponentType;
 }> & import("..").IconProps & {
     as?: ComponentType;
 }>;
 declare const Input: {
-    ({ validationStatus, children, disabled, focused, readonly, leadingIcon, trailingIcon, type, showPasswordToggle, onClear, format, loading, clearable, required, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
+    ({ validationStatus, children, disabled, focused, readonly, leadingIcon, trailingIcon, type, showPasswordToggle, onClear, format, loading, clearable, required, inBottomSheet, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default Input;

package/build/components/Input/Input.js

@@ -1,17 +1,15 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
 import { createInput } from '@gluestack-ui/input';
-import InputRoot from './InputRoot';
-import InputSlotComponent from './InputSlot';
-import InputIconComponent from './InputIcon';
-import InputFieldComponent from './InputField';
+import { useState } from 'react';
+import { CloseSmallIcon, EyeOffSmallIcon, EyeSmallIcon, SearchMediumIcon, } from '@utilitywarehouse/hearth-react-native-icons';
+import { useTheme } from '../../hooks';
 import { useFormFieldContext } from '../FormField';
-import { CalendarMediumIcon, CloseSmallIcon, EyeSmallIcon, EyeOffSmallIcon, SearchMediumIcon, } from '@utilitywarehouse/hearth-react-native-icons';
-import { UnstyledIconButton } from '../UnstyledIconButton';
 import { Spinner } from '../Spinner';
-import { useTheme } from '../../hooks';
-import { DetailText } from '../DetailText';
-import { Platform } from 'react-native';
+import { UnstyledIconButton } from '../UnstyledIconButton';
+import InputFieldComponent from './InputField';
+import InputIconComponent from './InputIcon';
+import InputRoot from './InputRoot';
+import InputSlotComponent from './InputSlot';
 export const InputComponent = createInput({
     Icon: InputIconComponent,
     Slot: InputSlotComponent,
@@ -21,31 +19,13 @@ export const InputComponent = createInput({
 export const InputSlot = InputComponent.Slot;
 export const InputField = InputComponent.Input;
 export const InputIcon = InputComponent.Icon;
-const Input = ({ validationStatus = 'initial', children, disabled, focused, readonly, leadingIcon, trailingIcon, type, showPasswordToggle = true, onClear, format, loading, clearable = false, required, ...props }) => {
+const Input = ({ validationStatus = 'initial', children, disabled, focused, readonly, leadingIcon, trailingIcon, type, showPasswordToggle = true, onClear, format, loading, clearable = false, required, inBottomSheet = false, ...props }) => {
     const formFieldContext = useFormFieldContext();
     const { disabled: formFieldDisabled } = formFieldContext;
     const validationStatusFromContext = formFieldContext?.validationStatus ?? validationStatus;
     const isRequired = formFieldContext?.required ?? required;
     const [fieldType, setFieldType] = useState(type === 'password' ? 'password' : 'text');
-    const { components } = useTheme();
-    const defaultFornat = (() => {
-        if (type === 'currency') {
-            return '0.00';
-        }
-        if (type === 'date') {
-            return 'DD/MM/YYYY';
-        }
-        return;
-    })();
-    const getPlaceholder = (() => {
-        if (type === 'currency') {
-            return props.placeholder ?? format ?? defaultFornat;
-        }
-        if (type === 'date') {
-            return props.placeholder ?? format ?? defaultFornat;
-        }
-        return props.placeholder;
-    })();
+    const { color } = useTheme();
     const shouldShowPasswordToggle = type === 'password' && showPasswordToggle;
     const shouldShowClear = clearable && !!props?.value;
     const toggleFieldType = () => {
@@ -57,25 +37,13 @@ const Input = ({ validationStatus = 'initial', children, disabled, focused, read
         }
         return leadingIcon;
     })();
-    const trailingIconComponent = (() => {
-        if (type === 'date') {
-            return CalendarMediumIcon;
-        }
-        return trailingIcon;
-    })();
     const getInputMode = (() => {
-        if (type === 'currency') {
-            return 'decimal';
-        }
         if (type === 'search') {
             return 'search';
         }
         return undefined;
     })();
-    return (_jsx(InputComponent, { ...(children ? props : {}), validationStatus: validationStatusFromContext, isInvalid: validationStatusFromContext === 'invalid', isReadOnly: readonly, isDisabled: formFieldDisabled ?? disabled, isFocused: focused, type: type, isRequired: isRequired, children: children ? (_jsx(_Fragment, { children: children })) : (_jsxs(_Fragment, { children: [!!leadingIconComponent && (_jsx(InputSlot, { children: _jsx(InputIcon, { as: leadingIconComponent }) })), type === 'currency' && (_jsx(InputSlot, { children: _jsx(DetailText, { size: "4xl", style: {
-                            // todo: fix this
-                            ...(Platform.OS === 'ios' && { lineHeight: 46 }),
-                        }, children: "\u00A3" }) })), _jsx(InputField, { type: fieldType, inputMode: getInputMode, ...props, placeholder: getPlaceholder }), shouldShowClear && (_jsx(InputSlot, { children: _jsx(UnstyledIconButton, { onPress: onClear, icon: CloseSmallIcon }) })), loading && (_jsx(InputSlot, { children: _jsx(Spinner, { size: "xs", color: components.icon.color }) })), shouldShowPasswordToggle && (_jsx(InputSlot, { children: _jsx(UnstyledIconButton, { onPress: toggleFieldType, icon: fieldType === 'password' ? EyeSmallIcon : EyeOffSmallIcon }) })), !!trailingIconComponent && (_jsx(InputSlot, { children: _jsx(InputIcon, { as: trailingIconComponent }) }))] })) }));
+    return (_jsx(InputComponent, { ...(children ? props : {}), validationStatus: validationStatusFromContext, isInvalid: validationStatusFromContext === 'invalid', isReadOnly: readonly, isDisabled: formFieldDisabled ?? disabled, isFocused: focused, type: type, isRequired: isRequired, children: children ? (_jsx(_Fragment, { children: children })) : (_jsxs(_Fragment, { children: [!!leadingIconComponent && (_jsx(InputSlot, { children: _jsx(InputIcon, { as: leadingIconComponent }) })), _jsx(InputField, { type: fieldType, inputMode: getInputMode, inBottomSheet: inBottomSheet, ...props }), shouldShowClear && (_jsx(InputSlot, { children: _jsx(UnstyledIconButton, { onPress: onClear, icon: CloseSmallIcon }) })), loading && (_jsx(InputSlot, { children: _jsx(Spinner, { size: "xs", color: color.icon.primary }) })), shouldShowPasswordToggle && (_jsx(InputSlot, { children: _jsx(UnstyledIconButton, { onPress: toggleFieldType, icon: fieldType === 'password' ? EyeSmallIcon : EyeOffSmallIcon }) })), !!trailingIcon && (_jsx(InputSlot, { children: _jsx(InputIcon, { as: trailingIcon }) }))] })) }));
 };
 Input.displayName = 'Input';
 export default Input;

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

@@ -24,6 +24,7 @@ export interface InputBaseProps {
     readonly?: boolean;
     focused?: boolean;
     placeholder?: string;
+    inBottomSheet?: boolean;
 }
 export interface InputWithChildrenProps extends InputBaseProps, ViewProps {
     children: ViewProps['children'];
@@ -59,22 +60,6 @@ interface PasswordInputSpecificProps extends InputWithoutChildrenBaseProps {
     clearable?: never;
     onClear?: never;
 }
-interface DateInputSpecificProps extends InputWithoutChildrenBaseProps {
-    type: 'date';
-    format?: string;
-    showPasswordToggle?: never;
-    loading?: never;
-    clearable?: never;
-    onClear?: never;
-}
-interface CurrencyInputSpecificProps extends InputWithoutChildrenBaseProps {
-    type: 'currency';
-    format?: string;
-    showPasswordToggle?: never;
-    loading?: never;
-    clearable?: never;
-    onClear?: never;
-}
 interface SearchInputSpecificProps extends InputWithoutChildrenBaseProps {
     type: 'search';
     loading?: boolean;
@@ -83,7 +68,7 @@ interface SearchInputSpecificProps extends InputWithoutChildrenBaseProps {
     showPasswordToggle?: never;
     format?: never;
 }
-export type InputWithoutChildrenProps = TextInputSpecificProps | PasswordInputSpecificProps | DateInputSpecificProps | CurrencyInputSpecificProps | SearchInputSpecificProps;
+export type InputWithoutChildrenProps = TextInputSpecificProps | PasswordInputSpecificProps | SearchInputSpecificProps;
 /**
  * Props for the Input component.
  * This is a discriminated union type where the 'type' property

package/build/components/Input/InputField.d.ts

@@ -1,6 +1,8 @@
 import { TextInputProps } from 'react-native';
 declare const InputField: {
-    ({ style, onFocus, onBlur, ...props }: TextInputProps): import("react/jsx-runtime").JSX.Element;
+    ({ style, onFocus, onBlur, inBottomSheet, ...props }: TextInputProps & {
+        inBottomSheet?: boolean;
+    }): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default InputField;

package/build/components/Input/InputField.js

@@ -1,47 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useBottomSheetInternal } from '@gorhom/bottom-sheet';
-import { useCallback, useEffect } from 'react';
-import { TextInput as RNTextInput, } from 'react-native';
+import { BottomSheetTextInput } from '@gorhom/bottom-sheet';
+import { TextInput as RNTextInput } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { useTheme } from '../../hooks';
 import { useInputContext } from './Input.context';
-const InputField = ({ style, onFocus, onBlur, ...props }) => {
+const InputField = ({ style, onFocus, onBlur, inBottomSheet = false, ...props }) => {
     const { disabled, focused = false, type } = useInputContext();
     styles.useVariants({ focused, type });
-    const { components, color } = useTheme();
-    // Copied from @gorhom/bottom-sheet BottomSheetTextInput
-    const bottomSheetContext = useBottomSheetInternal(true);
-    const handleOnFocus = useCallback((args) => {
-        if (bottomSheetContext) {
-            bottomSheetContext.shouldHandleKeyboardEvents.value = true;
-        }
-        if (onFocus) {
-            onFocus(args);
-        }
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [onFocus, bottomSheetContext?.shouldHandleKeyboardEvents]);
-    const handleOnBlur = useCallback((args) => {
-        if (bottomSheetContext) {
-            bottomSheetContext.shouldHandleKeyboardEvents.value = false;
-        }
-        if (onBlur) {
-            onBlur(args);
-        }
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [onBlur, bottomSheetContext?.shouldHandleKeyboardEvents]);
-    useEffect(() => {
-        return () => {
-            // Reset the flag on unmount
-            if (bottomSheetContext) {
-                bottomSheetContext.shouldHandleKeyboardEvents.value = false;
-            }
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [bottomSheetContext?.shouldHandleKeyboardEvents]);
-    // End of copied code
-    return (_jsx(RNTextInput, { placeholderTextColor: components.input.placeholderColor, selectionColor: color.purple[700], cursorColor: color.purple[700], verticalAlign: "middle", "aria-disabled": disabled, onFocus: handleOnFocus, onBlur: handleOnBlur, ...props, style: [styles.input, style] }));
+    const { color } = useTheme();
+    if (inBottomSheet) {
+        return (_jsx(BottomSheetTextInput, { placeholderTextColor: color.text.secondary, selectionColor: color.purple[700], cursorColor: color.purple[700], verticalAlign: "middle", "aria-disabled": disabled, ...props, style: [styles.input, style] }));
+    }
+    return (_jsx(RNTextInput, { placeholderTextColor: color.text.secondary, selectionColor: color.purple[700], cursorColor: color.purple[700], verticalAlign: "middle", "aria-disabled": disabled, ...props, style: [styles.input, style] }));
 };
 InputField.displayName = 'InputField';
 const styles = StyleSheet.create(theme => ({
@@ -51,7 +21,7 @@ const styles = StyleSheet.create(theme => ({
         width: 'auto',
         justifyContent: 'center',
         alignItems: 'center',
-        color: theme.components.text.color,
+        color: theme.color.text.primary,
         fontSize: theme.typography.mobile.bodyText.md.fontSize,
         fontFamily: theme.typography.mobile.bodyText.fontFamily,
         fontWeight: theme.typography.mobile.bodyText.fontWeight,
@@ -64,13 +34,6 @@ const styles = StyleSheet.create(theme => ({
                 text: {},
                 password: {},
                 search: {},
-                currency: {
-                    fontSize: theme.typography.mobile.detailText['4xl'].fontSize,
-                    fontFamily: theme.typography.mobile.detailText.fontFamily,
-                    fontWeight: theme.typography.mobile.detailText.fontWeight,
-                    paddingTop: 0,
-                    paddingBottom: 0,
-                },
                 date: {},
             },
         },

package/build/components/Input/InputIcon.js

@@ -10,7 +10,7 @@ const InputIcon = ({ children, ...props }) => {
 InputIcon.displayName = 'InputIcon';
 const styles = StyleSheet.create(theme => ({
     icon: {
-        color: theme.components.icon.color,
+        color: theme.color.icon.primary,
     },
 }));
 export default InputIcon;

package/build/components/Input/InputRoot.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
-import { StyleSheet } from 'react-native-unistyles';
 import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
 import { InputContext } from './Input.context';
 const InputRoot = ({ children, style, states, validationStatus, type, ...props }) => {
     const { focus = false, disabled = false, readonly = false } = states || {};
@@ -12,18 +12,18 @@ const InputRoot = ({ children, style, states, validationStatus, type, ...props }
 InputRoot.displayName = 'InputRoot';
 const styles = StyleSheet.create(theme => ({
     container: {
-        borderColor: theme.components.input.borderColor,
+        borderColor: theme.color.border.strong,
         height: theme.components.input.height,
         borderRadius: theme.components.input.borderRadius,
         flexDirection: 'row',
         overflow: 'hidden',
         alignContent: 'center',
         paddingHorizontal: theme.components.input.paddingHorizontal,
-        backgroundColor: theme.components.input.backgroundColor,
+        backgroundColor: theme.color.surface.neutral.strong,
         gap: theme.components.input.gap,
         outlineStyle: 'solid',
         outlineWidth: theme.components.input.borderWidth,
-        outlineColor: theme.components.input.borderColor,
+        outlineColor: theme.color.border.strong,
         variants: {
             focus: {
                 true: {
@@ -32,12 +32,12 @@ const styles = StyleSheet.create(theme => ({
             },
             validationStatus: {
                 invalid: {
-                    borderColor: theme.components.input.borderColorInvalid,
-                    outlineColor: theme.components.input.borderColorInvalid,
+                    borderColor: theme.color.feedback.danger.border,
+                    outlineColor: theme.color.feedback.danger.border,
                 },
                 valid: {
-                    borderColor: theme.components.input.borderColorValid,
-                    outlineColor: theme.components.input.borderColorValid,
+                    borderColor: theme.color.feedback.positive.border,
+                    outlineColor: theme.color.feedback.positive.border,
                 },
                 initial: {},
             },
@@ -48,7 +48,7 @@ const styles = StyleSheet.create(theme => ({
             },
             readonly: {
                 true: {
-                    borderColor: theme.components.input.borderColorReadOnly,
+                    borderColor: theme.color.border.subtle,
                 },
             },
             type: {

package/build/components/Label/Label.js

@@ -8,7 +8,7 @@ const Label = ({ children, nested, disabled, style, ...props }) => {
 Label.displayName = 'Label';
 const styles = StyleSheet.create(theme => ({
     text: {
-        color: theme.components.text.color,
+        color: theme.color.text.primary,
         variants: {
             disabled: {
                 true: {

package/build/components/Link/LinkRoot.js

@@ -21,7 +21,7 @@ const styles = StyleSheet.create(theme => ({
                 borderRadius: theme.borderRadius.xs,
                 outlineStyle: 'solid',
                 outlineWidth: 2,
-                outlineColor: theme.components.focus.border,
+                outlineColor: theme.color.focus.primary,
                 outlineOffset: 1,
                 boxShadow: 'none',
             },
@@ -36,7 +36,7 @@ const styles = StyleSheet.create(theme => ({
                 true: {
                     _web: {
                         '_focus-visible': {
-                            outlineColor: theme.components.focus.borderInverted,
+                            outlineColor: theme.color.focus.inverted,
                         },
                     },
                 },

package/build/components/List/List.d.ts

@@ -1,6 +1,6 @@
 import type ListProps from './List.props';
 declare const List: {
-    ({ children, headingText, headingHelperText, headingLinkText, headingLinkHref, headingLinkOnPress, headingLinkTarget, headingLinkDisabled, headingLinkIcon, headingLinkIconPosition, headingLinkShowIcon, ...props }: ListProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, heading, helperText, linkText, linkHref, linkIcon, linkIconPosition, linkOnPress, linkTarget, linkShowIcon, ...props }: ListProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default List;

package/build/components/List/List.js

@@ -4,7 +4,7 @@ import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { Card } from '../Card';
 import { ListContext } from './List.context';
-import { ListHeading } from './ListHeading';
+import { SectionHeader } from '../SectionHeader';
 import { ListItem } from './ListItem';
 const markFirstListItem = (children) => {
     let found = false;
@@ -33,16 +33,18 @@ const markFirstListItem = (children) => {
     };
     return recursiveClone(children);
 };
-const List = ({ children, headingText, headingHelperText, headingLinkText, headingLinkHref, headingLinkOnPress, headingLinkTarget, headingLinkDisabled, headingLinkIcon, headingLinkIconPosition, headingLinkShowIcon, ...props }) => {
+const List = ({ children, heading, helperText, linkText, linkHref, linkIcon, linkIconPosition, linkOnPress, linkTarget, linkShowIcon, ...props }) => {
     const { loading, disabled, divider = true, container = 'none' } = props;
     const containerToCard = {
         variant: container === 'subtleWhite' || container === 'subtleWarmWhite' ? 'subtle' : 'emphasis',
-        colorScheme: container === 'subtleWhite' || container === 'emphasisWhite' ? 'white' : 'warmWhite',
+        colorScheme: container === 'subtleWhite' || container === 'emphasisWhite'
+            ? 'neutralStrong'
+            : 'neutralSubtle',
     };
     const updatedChildren = markFirstListItem(children);
     const value = useMemo(() => ({ loading, disabled, divider, container }), [loading, disabled, divider, container]);
     styles.useVariants({ disabled });
-    return (_jsx(ListContext.Provider, { value: value, children: _jsxs(View, { ...props, style: [styles.container, props.style], children: [headingText ? (_jsx(ListHeading, { text: headingText, helperText: headingHelperText, linkText: headingLinkText, linkHref: headingLinkHref, linkOnPress: headingLinkOnPress, linkTarget: headingLinkTarget, linkDisabled: headingLinkDisabled, linkIcon: headingLinkIcon, linkIconPosition: headingLinkIconPosition, linkShowIcon: headingLinkShowIcon })) : null, container === 'none' ? (_jsx(View, { children: updatedChildren })) : (_jsx(Card, { ...containerToCard, noPadding: true, style: styles.card, children: _jsx(_Fragment, { children: updatedChildren }) }))] }) }));
+    return (_jsx(ListContext.Provider, { value: value, children: _jsxs(View, { ...props, style: [styles.container, props.style], children: [heading ? (_jsx(SectionHeader, { heading: heading, helperText: helperText, linkText: linkText, linkHref: linkHref, linkOnPress: linkOnPress, linkTarget: linkTarget, linkIcon: linkIcon, linkIconPosition: linkIconPosition, linkShowIcon: linkShowIcon })) : null, container === 'none' ? (_jsx(View, { children: updatedChildren })) : (_jsx(Card, { ...containerToCard, noPadding: true, style: styles.card, children: _jsx(_Fragment, { children: updatedChildren }) }))] }) }));
 };
 List.displayName = 'List';
 const styles = StyleSheet.create(theme => ({

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

@@ -2,16 +2,15 @@ import type { ViewProps } from 'react-native';
 import { ComponentType } from 'react';
 interface ListProps extends ViewProps {
     container?: 'none' | 'subtleWhite' | 'emphasisWhite' | 'subtleWarmWhite' | 'emphasisWarmWhite';
-    headingText?: string;
-    headingHelperText?: string;
-    headingLinkText?: string;
-    headingLinkHref?: string;
-    headingLinkOnPress?: () => void;
-    headingLinkTarget?: '_blank' | '_self' | '_parent' | '_top';
-    headingLinkDisabled?: boolean;
-    headingLinkIcon?: ComponentType;
-    headingLinkIconPosition?: 'left' | 'right';
-    headingLinkShowIcon?: boolean;
+    heading?: string;
+    helperText?: string;
+    linkText?: string;
+    linkHref?: string;
+    linkIcon?: ComponentType;
+    linkIconPosition?: 'left' | 'right';
+    linkOnPress?: () => void;
+    linkTarget?: '_blank' | '_self' | '_parent' | '_top';
+    linkShowIcon?: boolean;
     disabled?: boolean;
     loading?: boolean;
     divider?: boolean;

package/build/components/List/ListItem/ListItemHelperText.js

@@ -7,7 +7,7 @@ const ListItemHelperText = ({ children, ...props }) => {
 ListItemHelperText.displayName = 'ListItemHelperText';
 const styles = StyleSheet.create(theme => ({
     text: {
-        color: theme.components.text.colorSecondary,
+        color: theme.color.text.secondary,
     },
 }));
 export default ListItemHelperText;