@utilitywarehouse/hearth-react-native 0.7.0 → 0.8.0

package/build/components/ExpandableCard/ExpandableCardGroup.props.d.ts

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+import type { ViewProps } from 'react-native';
+export interface ExpandableCardGroupProps extends ViewProps {
+    /**
+     * Section heading
+     */
+    heading?: string;
+    /**
+     * Helper text displayed below the heading
+     */
+    helperText?: string;
+    /**
+     * Trailing content for the header (e.g., a link)
+     */
+    headerTrailingContent?: ReactNode;
+    /**
+     * The ExpandableCard children
+     */
+    children: ReactNode;
+    /**
+     * Test ID for testing
+     */
+    testID?: string;
+}
+export default ExpandableCardGroupProps;

package/build/components/ExpandableCard/ExpandableCardGroup.props.js

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

package/build/components/ExpandableCard/ExpandableCardHelperText.d.ts

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

package/build/components/ExpandableCard/ExpandableCardHelperText.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StyleSheet } from 'react-native-unistyles';
+import { BodyText } from '../BodyText';
+const ExpandableCardHelperText = ({ children, ...props }) => {
+    return (_jsx(BodyText, { size: "md", ...props, style: [styles.text, props.style], children: children }));
+};
+ExpandableCardHelperText.displayName = 'ExpandableCardHelperText';
+const styles = StyleSheet.create(theme => ({
+    text: {
+        color: theme.color.text.secondary,
+    },
+}));
+export default ExpandableCardHelperText;

package/build/components/ExpandableCard/ExpandableCardIcon.d.ts

@@ -0,0 +1,9 @@
+import { ComponentType } from 'react';
+import { IconProps } from '../Icon';
+declare const ExpandableCardIcon: {
+    ({ children, ...props }: IconProps & {
+        as?: ComponentType;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default ExpandableCardIcon;

package/build/components/ExpandableCard/ExpandableCardIcon.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Platform } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { Icon } from '../Icon';
+const ExpandableCardIcon = ({ children, ...props }) => {
+    return (_jsx(Icon, { ...props, style: Platform.OS === 'web'
+            ? // @ts-expect-error - style prop type issue
+                { ...styles.icon, ...props.style }
+            : [styles.icon, props.style], children: children }));
+};
+ExpandableCardIcon.displayName = 'ExpandableCardIcon';
+const styles = StyleSheet.create(theme => ({
+    icon: {
+        color: theme.color.icon.primary,
+        width: 24,
+        height: 24,
+    },
+}));
+export default ExpandableCardIcon;

package/build/components/ExpandableCard/ExpandableCardLeadingContent.d.ts

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

package/build/components/ExpandableCard/ExpandableCardLeadingContent.js

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

package/build/components/ExpandableCard/ExpandableCardText.d.ts

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

package/build/components/ExpandableCard/ExpandableCardText.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { BodyText } from '../BodyText';
+const ExpandableCardText = ({ children, ...props }) => {
+    return (_jsx(BodyText, { size: "lg", ...props, children: children }));
+};
+ExpandableCardText.displayName = 'ExpandableCardText';
+export default ExpandableCardText;

package/build/components/ExpandableCard/ExpandableCardTrailingContent.d.ts

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

package/build/components/ExpandableCard/ExpandableCardTrailingContent.js

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

package/build/components/ExpandableCard/ExpandableCardTrailingIcon.d.ts

@@ -0,0 +1,9 @@
+import { ComponentType } from 'react';
+import { IconProps } from '../Icon';
+declare const ExpandableCardTrailingIcon: {
+    ({ children, ...props }: IconProps & {
+        as?: ComponentType;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default ExpandableCardTrailingIcon;

package/build/components/ExpandableCard/ExpandableCardTrailingIcon.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Platform } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { Icon } from '../Icon';
+const ExpandableCardTrailingIcon = ({ children, ...props }) => {
+    return (_jsx(Icon, { ...props, style: Platform.OS === 'web'
+            ? // @ts-expect-error - style prop type issue
+                { ...styles.icon, ...props.style }
+            : [styles.icon, props.style], children: children }));
+};
+ExpandableCardTrailingIcon.displayName = 'ExpandableCardTrailingIcon';
+const styles = StyleSheet.create(theme => ({
+    icon: {
+        color: theme.color.icon.primary,
+    },
+}));
+export default ExpandableCardTrailingIcon;

package/build/components/ExpandableCard/ExpandableCardTrigger.d.ts

@@ -0,0 +1,17 @@
+declare const ExpandableCardTrigger: import("react").ForwardRefExoticComponent<import("./ExpandableCardTrigger.props").ExpandableCardTriggerProps & {
+    states?: {
+        active?: boolean;
+        disabled?: boolean;
+    };
+} & Omit<import("react-native").PressableProps, "children"> & {
+    tabIndex?: 0 | -1 | undefined;
+} & {
+    children?: import("react").ReactNode | (({ hovered, pressed, focused, focusVisible, disabled, }: {
+        hovered?: boolean | undefined;
+        pressed?: boolean | undefined;
+        focused?: boolean | undefined;
+        focusVisible?: boolean | undefined;
+        disabled?: boolean | undefined;
+    }) => import("react").ReactNode);
+} & import("react").RefAttributes<unknown>>;
+export default ExpandableCardTrigger;

package/build/components/ExpandableCard/ExpandableCardTrigger.js

@@ -0,0 +1,7 @@
+import { createPressable } from '@gluestack-ui/pressable';
+import ExpandableCardTriggerRoot from './ExpandableCardTriggerRoot';
+const ExpandableCardTrigger = createPressable({
+    Root: ExpandableCardTriggerRoot,
+});
+ExpandableCardTrigger.displayName = 'ExpandableCardTrigger';
+export default ExpandableCardTrigger;

package/build/components/ExpandableCard/ExpandableCardTrigger.props.d.ts

@@ -0,0 +1,44 @@
+import type { ComponentType } from 'react';
+import type { PressableProps } from 'react-native';
+import type BadgeProps from '../Badge/Badge.props';
+export interface ExpandableCardTriggerProps extends Omit<PressableProps, 'children'> {
+    /**
+     * The main heading text
+     */
+    heading?: string;
+    /**
+     * Optional helper text displayed below the heading
+     */
+    helperText?: string;
+    /**
+     * Leading icon component
+     */
+    leadingIcon?: ComponentType;
+    /**
+     * Content to display on the left side (e.g., icon, avatar)
+     */
+    leadingContent?: React.ReactNode;
+    /**
+     * Optional badge to display
+     */
+    badge?: BadgeProps;
+    /**
+     * Position of the badge relative to the heading
+     * @default 'bottom'
+     */
+    badgePosition?: 'top' | 'bottom';
+    /**
+     * Optional numeric value to display
+     */
+    numericValue?: string | number;
+    /**
+     * Whether the expandable card is expanded
+     */
+    isExpanded: boolean;
+    /**
+     * Whether the trigger is disabled
+     */
+    disabled?: boolean;
+    children?: React.ReactNode;
+}
+export default ExpandableCardTriggerProps;

package/build/components/ExpandableCard/ExpandableCardTrigger.props.js

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

package/build/components/ExpandableCard/ExpandableCardTriggerRoot.d.ts

@@ -0,0 +1,11 @@
+import type ExpandableCardTriggerProps from './ExpandableCardTrigger.props';
+declare const ExpandableCardTriggerRoot: {
+    ({ heading, helperText, leadingIcon, leadingContent, badge, badgePosition, numericValue, isExpanded, disabled, states, children, ...props }: ExpandableCardTriggerProps & {
+        states?: {
+            active?: boolean;
+            disabled?: boolean;
+        };
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default ExpandableCardTriggerRoot;

package/build/components/ExpandableCard/ExpandableCardTriggerRoot.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ChevronDownSmallIcon, ChevronUpSmallIcon, } from '@utilitywarehouse/hearth-react-native-icons';
+import { Pressable } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { Badge } from '../Badge';
+import { DetailText } from '../DetailText';
+import ExpandableCardContent from './ExpandableCardContent';
+import ExpandableCardHelperText from './ExpandableCardHelperText';
+import ExpandableCardIcon from './ExpandableCardIcon';
+import ExpandableCardLeadingContent from './ExpandableCardLeadingContent';
+import ExpandableCardText from './ExpandableCardText';
+import ExpandableCardTrailingContent from './ExpandableCardTrailingContent';
+import ExpandableCardTrailingIcon from './ExpandableCardTrailingIcon';
+const ExpandableCardTriggerRoot = ({ heading, helperText, leadingIcon, leadingContent, badge, badgePosition = 'bottom', numericValue, isExpanded, disabled, states, children, ...props }) => {
+    const { active } = states || { active: false };
+    const testID = props.testID || 'expandable-card-trigger';
+    styles.useVariants({
+        active,
+        disabled: !!disabled,
+    });
+    const renderLeadingContent = () => {
+        if (leadingIcon) {
+            return (_jsx(ExpandableCardLeadingContent, { children: _jsx(ExpandableCardIcon, { as: leadingIcon }) }));
+        }
+        if (leadingContent) {
+            return _jsx(ExpandableCardLeadingContent, { children: leadingContent });
+        }
+        return null;
+    };
+    const renderTopBadge = () => {
+        if (badgePosition === 'top' && badge) {
+            return _jsx(Badge, { ...badge });
+        }
+        return null;
+    };
+    const renderBottomBadge = () => {
+        if (badgePosition === 'bottom' && badge) {
+            return _jsx(Badge, { ...badge });
+        }
+        return null;
+    };
+    const renderDefaultContent = () => (_jsxs(_Fragment, { children: [renderLeadingContent(), _jsxs(ExpandableCardContent, { children: [renderTopBadge(), _jsx(ExpandableCardText, { children: heading }), helperText && _jsx(ExpandableCardHelperText, { children: helperText }), renderBottomBadge()] }), numericValue && (_jsx(DetailText, { size: "lg", style: styles.numericValue, children: numericValue })), _jsx(ExpandableCardTrailingContent, { style: styles.chevron, children: _jsx(ExpandableCardTrailingIcon, { as: isExpanded ? ChevronUpSmallIcon : ChevronDownSmallIcon }) })] }));
+    return (_jsx(Pressable, { ...props, testID: testID, style: [styles.container, props.style], disabled: disabled, accessibilityRole: "button", accessibilityState: { expanded: isExpanded, disabled }, accessibilityLabel: `${heading}${helperText ? `, ${helperText}` : ''}`, children: children || renderDefaultContent() }));
+};
+ExpandableCardTriggerRoot.displayName = 'ExpandableCardTriggerRoot';
+const styles = StyleSheet.create(theme => ({
+    container: {
+        paddingVertical: theme.components.card.mobile.padding,
+        paddingHorizontal: theme.components.card.mobile.padding,
+        flexDirection: 'row',
+        width: '100%',
+        gap: theme.components.expandableCard.gapHorizontal,
+        variants: {
+            disabled: {
+                true: {
+                    cursor: 'auto',
+                    opacity: theme.opacity.disabled,
+                },
+                false: {
+                    _web: {
+                        _hover: {
+                            backgroundColor: theme.color.interactive.neutral.surface.subtle.hover,
+                        },
+                        _active: {
+                            backgroundColor: theme.color.interactive.neutral.surface.subtle.active,
+                        },
+                    },
+                },
+            },
+            active: {
+                true: {},
+            },
+        },
+        compoundVariants: [
+            {
+                disabled: false,
+                active: true,
+                styles: {
+                    backgroundColor: theme.color.interactive.neutral.surface.subtle.active,
+                },
+            },
+        ],
+    },
+    chevron: {
+        justifyContent: 'center',
+    },
+    numericValue: {
+        alignSelf: 'center',
+    },
+}));
+export default ExpandableCardTriggerRoot;

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

@@ -0,0 +1,14 @@
+export { default as ExpandableCard } from './ExpandableCard';
+export type { default as ExpandableCardProps } from './ExpandableCard.props';
+export { default as ExpandableCardContent } from './ExpandableCardContent';
+export { default as ExpandableCardExpandedContent } from './ExpandableCardExpandedContent';
+export { default as ExpandableCardGroup } from './ExpandableCardGroup';
+export type { default as ExpandableCardGroupProps } from './ExpandableCardGroup.props';
+export { default as ExpandableCardHelperText } from './ExpandableCardHelperText';
+export { default as ExpandableCardIcon } from './ExpandableCardIcon';
+export { default as ExpandableCardLeadingContent } from './ExpandableCardLeadingContent';
+export { default as ExpandableCardText } from './ExpandableCardText';
+export { default as ExpandableCardTrailingContent } from './ExpandableCardTrailingContent';
+export { default as ExpandableCardTrailingIcon } from './ExpandableCardTrailingIcon';
+export { default as ExpandableCardTrigger } from './ExpandableCardTrigger';
+export type { default as ExpandableCardTriggerProps } from './ExpandableCardTrigger.props';

package/build/components/ExpandableCard/index.js

@@ -0,0 +1,11 @@
+export { default as ExpandableCard } from './ExpandableCard';
+export { default as ExpandableCardContent } from './ExpandableCardContent';
+export { default as ExpandableCardExpandedContent } from './ExpandableCardExpandedContent';
+export { default as ExpandableCardGroup } from './ExpandableCardGroup';
+export { default as ExpandableCardHelperText } from './ExpandableCardHelperText';
+export { default as ExpandableCardIcon } from './ExpandableCardIcon';
+export { default as ExpandableCardLeadingContent } from './ExpandableCardLeadingContent';
+export { default as ExpandableCardText } from './ExpandableCardText';
+export { default as ExpandableCardTrailingContent } from './ExpandableCardTrailingContent';
+export { default as ExpandableCardTrailingIcon } from './ExpandableCardTrailingIcon';
+export { default as ExpandableCardTrigger } from './ExpandableCardTrigger';

package/build/components/HighlightBanner/HighlightBanner.d.ts

@@ -0,0 +1,6 @@
+import type HighlightBannerProps from './HighlightBanner.props';
+declare const HighlightBanner: {
+    ({ heading, headingColor, image, imageContainerHeight, description, link, button, variant, style, ...props }: HighlightBannerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default HighlightBanner;

package/build/components/HighlightBanner/HighlightBanner.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Image, View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { BodyText } from '../BodyText';
+import { Card } from '../Card';
+const HighlightBanner = ({ heading, headingColor, image, imageContainerHeight, description, link, button, variant = 'emphasis', style, ...props }) => {
+    styles.useVariants({ headingColor, variant });
+    return (_jsx(Card, { variant: variant, noPadding: true, style: style, ...props, children: _jsxs(View, { style: [styles.container], children: [_jsx(View, { style: [styles.header], children: _jsx(BodyText, { size: "md", textAlign: "center", weight: "semibold", children: heading }) }), _jsx(View, { style: styles.imageContainer(imageContainerHeight), children: _jsx(Image, { resizeMode: "cover", ...image, style: [styles.image, image?.style] }) }), _jsxs(View, { style: styles.footer, children: [_jsx(BodyText, { size: "md", textAlign: "center", children: description }), link && _jsx(View, { style: styles.linkContainer, children: link }), button && _jsx(View, { style: styles.buttonContainer, children: button })] })] }) }));
+};
+HighlightBanner.displayName = 'HighlightBanner';
+const styles = StyleSheet.create(theme => ({
+    container: {
+        overflow: 'hidden',
+        flex: 1,
+        width: '100%',
+    },
+    header: {
+        padding: theme.components.banner.highlight.padding,
+        alignItems: 'center',
+        justifyContent: 'center',
+        variants: {
+            headingColor: {
+                highlight: {
+                    backgroundColor: theme.color.surface.highlight.subtle,
+                },
+                pig: {
+                    backgroundColor: theme.color.surface.pig.subtle,
+                },
+                energy: {
+                    backgroundColor: theme.color.surface.energy.subtle,
+                },
+                broadband: {
+                    backgroundColor: theme.color.surface.broadband.subtle,
+                },
+                mobile: {
+                    backgroundColor: theme.color.surface.mobile.subtle,
+                },
+                insurance: {
+                    backgroundColor: theme.color.surface.insurance.subtle,
+                },
+                cashback: {
+                    backgroundColor: theme.color.surface.cashback.subtle,
+                },
+            },
+            variant: {
+                emphasis: {
+                    borderColor: theme.color.border.strong,
+                    borderBottomWidth: theme.borderWidth[2],
+                },
+                subtle: {
+                    borderColor: theme.color.border.subtle,
+                },
+            },
+        },
+    },
+    imageContainer: (height = 200) => ({
+        width: '100%',
+        height,
+    }),
+    image: {
+        width: '100%',
+        height: '100%',
+    },
+    footer: {
+        padding: theme.components.banner.highlight.padding,
+        gap: theme.components.banner.highlight.content.gap,
+        variants: {
+            variant: {
+                emphasis: {
+                    borderColor: theme.color.border.strong,
+                    borderTopWidth: theme.borderWidth[2],
+                },
+                subtle: {
+                    borderColor: theme.color.border.subtle,
+                },
+            },
+        },
+    },
+    linkContainer: {
+        alignItems: 'center',
+    },
+    buttonContainer: {
+        alignItems: 'stretch',
+    },
+}));
+export default HighlightBanner;

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

@@ -0,0 +1,14 @@
+import { ReactElement } from 'react';
+import { ImageProps } from 'react-native';
+import CardProps from '../Card/Card.props';
+interface HighlightBannerProps extends Omit<CardProps, 'noPadding' | 'variant' | 'space' | 'gap' | 'rowGap' | 'columnGap' | 'flexDirection' | 'flexWrap' | 'alignItems' | 'justifyContent'> {
+    heading?: string;
+    headingColor?: 'pig' | 'energy' | 'broadband' | 'mobile' | 'insurance' | 'cashback' | 'highlight';
+    variant?: 'emphasis' | 'subtle';
+    image?: ImageProps;
+    imageContainerHeight?: number;
+    description?: string;
+    link?: ReactElement;
+    button?: ReactElement;
+}
+export default HighlightBannerProps;

package/build/components/HighlightBanner/HighlightBanner.props.js

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

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

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

package/build/components/HighlightBanner/index.js

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

package/build/components/Spinner/Spinner.js

@@ -7,9 +7,7 @@ import { Circle, G, Svg } from 'react-native-svg';
 import { StyleSheet } from 'react-native-unistyles';
 import { useTheme } from '../../hooks';
 import { getFlattenedColorValue } from '../../utils';
-// @ts-expect-error - Animated.View type issue
 const AnimatedSvg = Animated.createAnimatedComponent(Svg);
-// @ts-expect-error - Animated.View type issue
 const AnimatedCircle = Animated.createAnimatedComponent(Circle);
 const SpinnerRoot = ({ size = 'md', color, ...props }) => {
     const { components } = useTheme();

package/build/components/Spinner/Spinner.web.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import type SpinnerProps from './Spinner.props';
-declare const Spinner: import("react").ComponentType<SpinnerProps>;
+declare const Spinner: React.ComponentType<SpinnerProps>;
 export default Spinner;

package/build/components/Spinner/Spinner.web.js

@@ -8,9 +8,7 @@ import { Circle, G, Svg } from 'react-native-svg';
 import { StyleSheet } from 'react-native-unistyles';
 import { useTheme } from '../../hooks';
 import { getFlattenedColorValue } from '../../utils';
-// @ts-expect-error - Animated.View type issue
 const AnimatedSvg = Animated.createAnimatedComponent(Svg);
-// @ts-expect-error - Animated.View type issue
 const AnimatedCircle = Animated.createAnimatedComponent(Circle);
 const SpinnerRoot = ({ size = 'md', color, ...props }) => {
     const { components } = useTheme();

package/build/components/Switch/Switch.web.js

@@ -6,7 +6,6 @@ import Animated, { Easing, interpolateColor, useAnimatedStyle, useReducedMotion,
 import { StyleSheet } from 'react-native-unistyles';
 import { useTheme } from '../../hooks';
 import { Icon } from '../Icon';
-// @ts-expect-error - Animated.View type issue
 const AnimatedView = Animated.createAnimatedComponent(View);
 const CustomSwitch = ({ value = false, onValueChange, disabled = false, size = 'medium', ...accessibilityProps }) => {
     const { components, color } = useTheme();

package/build/components/Tabs/TabsList.js

@@ -6,7 +6,6 @@ import Animated, { runOnJS, useAnimatedScrollHandler, useAnimatedStyle, useShare
 import { StyleSheet } from 'react-native-unistyles';
 import { UnstyledIconButton } from '../UnstyledIconButton';
 import { useTabsContext } from './Tabs.context';
-// @ts-expect-error - Animated.View type issue
 const Indicator = Animated.createAnimatedComponent(View);
 const SCROLL_STEP_RATIO = 0.6;
 const SCROLL_BUTTON_HITSLOP = { top: 10, bottom: 10, left: 10, right: 10 };
@@ -60,11 +59,7 @@ const TabsList = ({ children, style, ...rest }) => {
         }
         return;
     }, [updateScrollState]);
-    return (_jsxs(View, { style: [styles.wrapper, style], ...rest, accessibilityRole: "tablist", children: [canScrollLeft && (_jsx(View, { style: [styles.iconButtonWrap, styles.scrollButtonLeft], accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", ...(Platform.OS === 'web' ? { 'aria-hidden': true } : {}), children: _jsx(UnstyledIconButton, { accessibilityLabel: undefined, icon: ChevronLeftSmallIcon, onPress: () => scrollBy(-1), style: styles.iconButton, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", hitSlop: SCROLL_BUTTON_HITSLOP, ...(Platform.OS === 'web' ? { 'aria-hidden': true, tabIndex: -1 } : {}) }) })), _jsx(Animated.ScrollView, { ref: scrollRef, horizontal: true, showsHorizontalScrollIndicator: false, onLayout: onLayoutContainer, onContentSizeChange: onContentSizeChange, onScroll: onScrollHandler, scrollEventThrottle: 16, bounces: false, contentContainerStyle: styles.scrollContent, children: _jsxs(View, { style: styles.container, children: [children, _jsx(Indicator
-                        // @ts-expect-error - Animated.View type issue
-                        , { 
-                            // @ts-expect-error - Animated.View type issue
-                            accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", style: [styles.indicator, indicatorStyle] })] }) }), canScrollRight && (_jsx(View, { style: [styles.iconButtonWrap, styles.scrollButtonRight], accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", ...(Platform.OS === 'web' ? { 'aria-hidden': true } : {}), children: _jsx(UnstyledIconButton, { accessibilityLabel: undefined, icon: ChevronRightSmallIcon, onPress: () => scrollBy(1), style: styles.iconButton, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", hitSlop: SCROLL_BUTTON_HITSLOP, ...(Platform.OS === 'web' ? { 'aria-hidden': true, tabIndex: -1 } : {}) }) }))] }));
+    return (_jsxs(View, { style: [styles.wrapper, style], ...rest, accessibilityRole: "tablist", children: [canScrollLeft && (_jsx(View, { style: [styles.iconButtonWrap, styles.scrollButtonLeft], accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", ...(Platform.OS === 'web' ? { 'aria-hidden': true } : {}), children: _jsx(UnstyledIconButton, { accessibilityLabel: undefined, icon: ChevronLeftSmallIcon, onPress: () => scrollBy(-1), style: styles.iconButton, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", hitSlop: SCROLL_BUTTON_HITSLOP, ...(Platform.OS === 'web' ? { 'aria-hidden': true, tabIndex: -1 } : {}) }) })), _jsx(Animated.ScrollView, { ref: scrollRef, horizontal: true, showsHorizontalScrollIndicator: false, onLayout: onLayoutContainer, onContentSizeChange: onContentSizeChange, onScroll: onScrollHandler, scrollEventThrottle: 16, bounces: false, contentContainerStyle: styles.scrollContent, children: _jsxs(View, { style: styles.container, children: [children, _jsx(Indicator, { accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", style: [styles.indicator, indicatorStyle] })] }) }), canScrollRight && (_jsx(View, { style: [styles.iconButtonWrap, styles.scrollButtonRight], accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", ...(Platform.OS === 'web' ? { 'aria-hidden': true } : {}), children: _jsx(UnstyledIconButton, { accessibilityLabel: undefined, icon: ChevronRightSmallIcon, onPress: () => scrollBy(1), style: styles.iconButton, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", hitSlop: SCROLL_BUTTON_HITSLOP, ...(Platform.OS === 'web' ? { 'aria-hidden': true, tabIndex: -1 } : {}) }) }))] }));
 };
 TabsList.displayName = 'TabsList';
 const styles = StyleSheet.create(theme => ({

package/build/components/index.d.ts

@@ -1,6 +1,7 @@
 export * from './Accordion';
 export * from './Alert';
 export * from './Badge';
+export * from './Banner';
 export * from './BodyText';
 export * from './BottomSheet';
 export * from './Box';
@@ -16,11 +17,14 @@ export * from './DatePickerInput';
 export * from './DescriptionList';
 export * from './DetailText';
 export * from './Divider';
+export * from './Expandable';
+export * from './ExpandableCard';
 export * from './Flex';
 export * from './FormField';
 export * from './Grid';
 export * from './Heading';
 export * from './Helper';
+export * from './HighlightBanner';
 export * from './HTMLElements';
 export * from './Icon';
 export * from './IconButton';

package/build/components/index.js

@@ -2,6 +2,7 @@
 export * from './Accordion';
 export * from './Alert';
 export * from './Badge';
+export * from './Banner';
 export * from './BodyText';
 export * from './BottomSheet';
 export * from './Box';
@@ -17,11 +18,14 @@ export * from './DatePickerInput';
 export * from './DescriptionList';
 export * from './DetailText';
 export * from './Divider';
+export * from './Expandable';
+export * from './ExpandableCard';
 export * from './Flex';
 export * from './FormField';
 export * from './Grid';
 export * from './Heading';
 export * from './Helper';
+export * from './HighlightBanner';
 export * from './HTMLElements';
 export * from './Icon';
 export * from './IconButton';