@ovotech/element-native 5.6.0 → 5.7.0

package/dist/components/index.d.ts

@@ -2,6 +2,7 @@ export * from './Accordion';
 export * from './ActionCard';
 export * from './ActionList';
 export * from './Badge';
+export * from './BottomActionBar';
 export * from './Button';
 export * from './Card';
 export * from './Cards';
@@ -40,6 +41,7 @@ export * from './PhoneInput';
 export * from './Pictogram';
 export * from './Radio';
 export * from './RadioCard';
+export * from './Rail';
 export * from './RemoteImage';
 export * from './ScreenView';
 export * from './SegmentedControls';

package/dist/components/index.js

@@ -18,6 +18,7 @@ __exportStar(require("./Accordion"), exports);
 __exportStar(require("./ActionCard"), exports);
 __exportStar(require("./ActionList"), exports);
 __exportStar(require("./Badge"), exports);
+__exportStar(require("./BottomActionBar"), exports);
 __exportStar(require("./Button"), exports);
 __exportStar(require("./Card"), exports);
 __exportStar(require("./Cards"), exports);
@@ -56,6 +57,7 @@ __exportStar(require("./PhoneInput"), exports);
 __exportStar(require("./Pictogram"), exports);
 __exportStar(require("./Radio"), exports);
 __exportStar(require("./RadioCard"), exports);
+__exportStar(require("./Rail"), exports);
 __exportStar(require("./RemoteImage"), exports);
 __exportStar(require("./ScreenView"), exports);
 __exportStar(require("./SegmentedControls"), exports);

package/dist/esm/components/ActionList/ActionListItems/DataListItem.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useFontScaling } from '../../../hooks/use-font-scaling';
 import { useTheme } from '../../../styled.native';
 import { Icon } from '../../Icon';
 import { LabelText } from '../../LabelText';
@@ -9,9 +10,10 @@ export const DataListItem = ({ testID, graphic, progressRingPercentage, heading,
     const theme = useTheme();
     const isError = statusText === 'Error';
     const hasProgressRing = progressRingPercentage !== undefined;
+    const { isFontScalingLarge } = useFontScaling();
     const IconContent = (graphic === null || graphic === void 0 ? void 0 : graphic.type) === 'icon' ? (_jsx(GraphicContainer, { isIcon: true, hasProgress: hasProgressRing, children: _jsx(Icon, { name: graphic.icon, size: 24, color: graphic.iconColor ? graphic.iconColor : theme.color.brand.brand }) })) : null;
     return (_jsxs(ActionListItemWrapper, { testID: testID, children: [(graphic === null || graphic === void 0 ? void 0 : graphic.type) === 'icon' &&
                 (hasProgressRing ? (_jsx(ProgressRing, { percentage: progressRingPercentage, children: IconContent })) : (IconContent)), (graphic === null || graphic === void 0 ? void 0 : graphic.type) === 'image' && (_jsx(GraphicContainer, { children: _jsx(StyledImage, { source: typeof graphic.image === 'string'
                         ? { uri: graphic.image }
-                        : graphic.image, resizeMode: "cover", accessibilityLabel: 'Data List Image' }) })), _jsxs(LeftTextContainer, { children: [heading && _jsx(LabelText, { children: heading }), subHeading && _jsx(P, { size: "sm", children: subHeading }), statusText && (_jsx(StatusText, { size: "sm", isError: isError, children: statusText }))] }), _jsxs(RightTextContainer, { children: [_jsxs(DirectionAndValueTextContainer, { children: [directionLabel && (_jsx(DirectionLabelContainer, { children: _jsx(OnSurfaceP, { size: "sm", children: directionLabel }) })), valueText && (_jsx(ValueTextContainer, { children: _jsx(DataValueText, { isError: isError, size: "lg", children: valueText }) }))] }), valueSubText && _jsx(OnSurfaceP, { size: "sm", children: valueSubText })] })] }));
+                        : graphic.image, resizeMode: "cover", accessibilityLabel: 'Data List Image' }) })), _jsxs(LeftTextContainer, { children: [heading && _jsx(LabelText, { children: heading }), subHeading && _jsx(P, { size: "sm", children: subHeading }), statusText && (_jsx(StatusText, { size: "sm", isError: isError, children: statusText }))] }), _jsxs(RightTextContainer, { children: [_jsxs(DirectionAndValueTextContainer, { children: [directionLabel && (_jsx(DirectionLabelContainer, { scaledUpFont: isFontScalingLarge, children: _jsx(OnSurfaceP, { size: "sm", children: directionLabel }) })), valueText && (_jsx(ValueTextContainer, { scaledUpFont: isFontScalingLarge, children: _jsx(DataValueText, { isError: isError, size: "lg", children: valueText }) }))] }), valueSubText && _jsx(OnSurfaceP, { size: "sm", children: valueSubText })] })] }));
 };

package/dist/esm/components/ActionList/ActionListItems/ToggleListItem.js

@@ -1,9 +1,8 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useTheme } from '../../../styled.native';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Switch } from 'react-native';
+import { HintText } from '../../HintText';
 import { P } from '../../P';
-import { Toggle } from '../../Toggle';
-import { ActionListItemWrapper } from './styles';
+import { ActionListItemWrapper, TextContainer } from './styles';
 export const ToggleListItem = ({ testID, heading, hintText, checked, onToggle, }) => {
-    const theme = useTheme();
-    return (_jsx(ActionListItemWrapper, { testID: testID ? `${testID}-toggle` : undefined, children: _jsx(Toggle, { checked: checked, onPress: onToggle, accessibilityLabel: typeof heading === 'string' ? heading : undefined, label: _jsx(P, { children: heading }), hint: hintText, toggleBackgroundColor: theme.color.brand.brand }) }));
+    return (_jsxs(ActionListItemWrapper, { testID: testID ? `${testID}-toggle` : undefined, children: [_jsxs(TextContainer, { children: [_jsx(P, { children: heading }), hintText && _jsx(HintText, { children: hintText })] }), _jsx(Switch, { value: checked, onValueChange: onToggle, accessibilityRole: "switch", accessibilityLabel: heading, accessibilityState: { checked } })] }));
 };

package/dist/esm/components/ActionList/ActionListItems/styles.js

@@ -11,6 +11,11 @@ export const ActionListItemWrapper = styled(View)(({ theme }) => {
     padding: ${numToPx(theme.space[400])} 0;
   `;
 });
+export const TextContainer = styled(View)(() => {
+    return css `
+    flex: 1;
+  `;
+});
 // Editable List Item
 export const EditableListContainer = styled(View)(({ theme }) => {
     return css `
@@ -46,11 +51,6 @@ export const NavigationListContainer = styled(View)(({ theme }) => {
     gap: ${numToPx(theme.space[100])};
   `;
 });
-export const TextContainer = styled(View)(() => {
-    return css `
-    flex: 1;
-  `;
-});
 export const SubHeading = styled(P)(({ theme }) => {
     return css `
     color: ${theme.color.alert.info};
@@ -60,12 +60,14 @@ export const SubHeading = styled(P)(({ theme }) => {
 export const LeftTextContainer = styled(View)(({ theme }) => {
     return css `
     flex: 1;
+    min-width: 0;
+    flex-shrink: 1;
     gap: ${numToPx(theme.space[100])};
   `;
 });
 export const RightTextContainer = styled(View)(({ theme }) => {
     return css `
-    flex: 1;
+    flex-shrink: 1;
     gap: ${numToPx(theme.space[100])};
     align-items: flex-end;
   `;
@@ -81,9 +83,9 @@ export const StatusText = styled(P)(({ theme, isError, }) => {
     color: ${isError ? theme.color.alert.error : theme.color.alert.info};
   `;
 });
-export const ValueTextContainer = styled(View)(({ theme }) => {
+export const ValueTextContainer = styled(View)(({ theme, scaledUpFont, }) => {
     return css `
-    min-width: ${numToPx(theme.space[2400])};
+    min-width: ${scaledUpFont ? 138 : numToPx(theme.space[2400])};
     align-items: flex-end;
   `;
 });
@@ -92,24 +94,24 @@ export const DataValueText = styled(P)(({ theme, isError, }) => {
     color: ${isError ? theme.color.alert.error : theme.color.surface.onSurface};
   `;
 });
-export const DirectionLabelContainer = styled(View)(({ theme }) => {
+export const DirectionLabelContainer = styled(View)(({ theme, scaledUpFont }) => {
     return css `
-    min-width: ${numToPx(theme.space[600])};
-    align-items: flex-end;
-  `;
+      min-width: ${scaledUpFont
+        ? numToPx(theme.space[900])
+        : numToPx(theme.space[600])};
+      align-items: flex-end;
+    `;
 });
 export const OnSurfaceP = styled(P)(({ theme }) => {
     return css `
     color: ${theme.color.surface.onSurfaceVariant};
   `;
 });
-export const DirectionAndValueTextContainer = styled(View)(({ theme }) => {
+export const DirectionAndValueTextContainer = styled(View)(() => {
     return css `
     align-items: flex-end;
     justify-content: space-between;
-    width: 100%;
     flex-direction: row;
-    margin-left: ${numToPx(theme.space[300])};
   `;
 });
 export const PROGESS_RING_INNER = 42;

package/dist/esm/components/BottomActionBar/BottomActionBar.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import styled, { useTheme } from '../../styled.native';
+import { Button } from '../Button';
+import { Stack } from '../Stack';
+import { useOverlayContext } from './OverlayProvider';
+const BottomActionContainer = styled.View(({ theme, background }) => ({
+    width: '100%',
+    bottom: 0,
+    position: 'absolute',
+    borderTopWidth: theme.border.width.sm,
+    borderTopColor: theme.color.surface.border,
+    backgroundColor: background === 'surface'
+        ? theme.color.surface.surface
+        : background === 'bright'
+            ? theme.color.surface.bright
+            : 'transparent',
+    paddingTop: theme.space[300],
+    paddingHorizontal: theme.space[400],
+}));
+export const BottomActionBar = ({ surfaceAction, outlineAction, background = 'surface', }) => {
+    const theme = useTheme();
+    const overlay = useOverlayContext();
+    const insets = useSafeAreaInsets();
+    const paddingBottom = insets.bottom + theme.space[100];
+    React.useEffect(() => {
+        overlay.mount('BottomAction', _jsx(BottomActionContainer, { background: background, pointerEvents: "auto", style: { paddingBottom: paddingBottom }, children: _jsxs(Stack, { spaceBetween: 3, children: [surfaceAction && (_jsx(Button, { fullWidth: true, variant: "surface", onPress: surfaceAction.onPress, children: surfaceAction.label })), outlineAction && (_jsx(Button, { fullWidth: true, variant: "outline", onPress: outlineAction.onPress, children: outlineAction.label }))] }) }));
+        return () => overlay.unmount('BottomAction');
+    }, [
+        overlay,
+        background,
+        paddingBottom,
+        surfaceAction === null || surfaceAction === void 0 ? void 0 : surfaceAction.label,
+        surfaceAction === null || surfaceAction === void 0 ? void 0 : surfaceAction.onPress,
+        outlineAction === null || outlineAction === void 0 ? void 0 : outlineAction.label,
+        outlineAction === null || outlineAction === void 0 ? void 0 : outlineAction.onPress,
+    ]);
+    return null;
+};

package/dist/esm/components/BottomActionBar/OverlayProvider.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import styled from '../../styled.native';
+const OverlayContext = React.createContext(null);
+const StyledView = styled.View({
+    flex: 1,
+});
+export const BottomActionBarOverlayProvider = ({ children }) => {
+    const [entries, setEntries] = React.useState([]);
+    const api = React.useMemo(() => ({
+        mount: (key, node) => {
+            setEntries(prev => {
+                const next = prev.filter(e => e.key !== key);
+                next.push({ key, node });
+                return next;
+            });
+        },
+        unmount: key => {
+            setEntries(prev => prev.filter(e => e.key !== key));
+        },
+    }), []);
+    return (_jsx(OverlayContext.Provider, { value: api, children: _jsxs(StyledView, { children: [children, _jsx(View, { style: StyleSheet.absoluteFill, pointerEvents: "box-none", children: entries.map(e => (_jsx(React.Fragment, { children: e.node }, e.key))) })] }) }));
+};
+export const useOverlayContext = () => {
+    const ctx = React.useContext(OverlayContext);
+    if (!ctx)
+        throw new Error('BottomActionOverlayProvider is missing above in the tree');
+    return ctx;
+};

package/dist/esm/components/BottomActionBar/index.js

@@ -0,0 +1,2 @@
+export { BottomActionBar } from './BottomActionBar';
+export { BottomActionBarOverlayProvider } from './OverlayProvider';

package/dist/esm/components/Cards/IllustrationTextCard/IllustrationTextCard.styles.js

@@ -5,6 +5,7 @@ export const CardWithIllustrationText = styled(CardWithMinHeight)(({ theme, isSm
     paddingTop: hasBadge ? theme.space[800] : theme.space[400],
     display: 'flex',
     flexDirection: isSmall ? 'column-reverse' : 'row',
+    justifyContent: 'space-between',
 }));
 export const TextContent = styled(View)(({ isSmall, theme }) => ({
     flex: isSmall ? undefined : 1,
@@ -17,8 +18,6 @@ export const HeadingContainer = styled(View)(({ theme, isSmall }) => ({
 export const ImageContent = styled(View)(({ theme, isSmall, hasBadge }) => ({
     width: isSmall ? theme.space[1600] : theme.space[3000],
     height: isSmall ? theme.space[1600] : theme.space[3000],
-    justifyContent: 'center',
-    alignItems: 'center',
     alignSelf: isSmall ? undefined : 'center',
     marginTop: hasBadge && !isSmall ? -theme.space[400] : 0,
 }));

package/dist/esm/components/Cards/OfferCard/OfferCard.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from 'react';
+import { useTheme } from '../../../styled.native';
+import { Icon } from '../../Icon';
+import { P } from '../../P';
+import { ContainerWithCardBadge } from '../components';
+import { checkIsSmall } from '../utils';
+import { CardImage, CardWithOffer, EyebrowContainer, EyebrowText, HeadingText, IllustrationContainer, ImageContainer, SubHeadingContainer, TextContent, } from './OfferCard.styles';
+const GraphicContent = ({ graphic }) => {
+    if (!graphic) {
+        return null;
+    }
+    const resizeMode = graphic.type === 'image' ? 'cover' : 'contain';
+    return (_jsx(CardImage, { source: typeof graphic.source === 'string'
+            ? { uri: graphic.source }
+            : graphic.source, resizeMode: resizeMode }));
+};
+export const OfferCard = ({ badgeText, graphic, eyebrowText, eyebrowIcon, heading, subHeading, size = 'default', onPress, }) => {
+    const theme = useTheme();
+    const hasBadge = !!badgeText;
+    const isSmall = checkIsSmall(size);
+    const [cardHeight, setCardHeight] = useState(0);
+    const onLayout = useCallback((e) => {
+        const { height: layoutHeight } = e.nativeEvent.layout;
+        setCardHeight(layoutHeight);
+    }, []);
+    const CardContent = (_jsxs(CardWithOffer, { isSmall: isSmall, onPress: onPress, onLayout: onLayout, children: [_jsxs(TextContent, { isSmall: isSmall, hasBadge: hasBadge, children: [(eyebrowIcon || eyebrowText) && (_jsxs(EyebrowContainer, { children: [eyebrowIcon && (_jsx(Icon, { name: eyebrowIcon, color: theme.color.brand.dim })), eyebrowText && _jsx(EyebrowText, { size: "sm", children: eyebrowText })] })), _jsx(HeadingText, { isSmall: isSmall, children: heading }), subHeading && (_jsx(SubHeadingContainer, { children: _jsx(P, { size: "sm", children: subHeading }) }))] }), (graphic === null || graphic === void 0 ? void 0 : graphic.type) === 'illustration' && (_jsx(IllustrationContainer, { hasBadge: hasBadge, isSmall: isSmall, children: _jsx(GraphicContent, { graphic: graphic }) })), (graphic === null || graphic === void 0 ? void 0 : graphic.type) === 'image' && (_jsx(ImageContainer, { isSmall: isSmall, cardHeight: cardHeight, children: _jsx(GraphicContent, { graphic: graphic }) }))] }));
+    if (!hasBadge) {
+        return CardContent;
+    }
+    return (_jsx(ContainerWithCardBadge, { badgeText: badgeText, children: CardContent }));
+};

package/dist/esm/components/Cards/OfferCard/OfferCard.styles.js

@@ -0,0 +1,55 @@
+import { Image, View } from 'react-native';
+import { Heading4, P } from '../..';
+import styled from '../../../styled.native';
+import { CardWithMinHeight, SMALL_CARD_HEIGHT } from '../shared.styles';
+export const CardWithOffer = styled(CardWithMinHeight)(({ isSmall }) => ({
+    padding: 0,
+    display: 'flex',
+    flexDirection: isSmall ? 'column-reverse' : 'row',
+    borderWidth: 0,
+    justifyContent: 'space-between',
+}));
+export const TextContent = styled(View)(({ isSmall, hasBadge, theme }) => ({
+    flex: isSmall ? undefined : 1,
+    paddingHorizontal: theme.space[400],
+    paddingTop: !isSmall && hasBadge ? theme.space[800] : theme.space[400],
+    paddingBottom: theme.space[400],
+    alignSelf: isSmall ? undefined : 'flex-end',
+}));
+export const EyebrowContainer = styled(View)(({ theme }) => ({
+    flexDirection: 'row',
+    gap: theme.space[50],
+    marginBottom: theme.space[100],
+}));
+export const EyebrowText = styled(P)(({ theme }) => ({
+    color: theme.color.brand.dim,
+}));
+export const HeadingText = styled(Heading4)(({ isSmall, theme }) => ({
+    color: theme.color.surface.onSurface,
+    fontSize: isSmall ? theme.font.size.md.mediaQuery.sm : undefined,
+    lineHeight: isSmall ? theme.font.lineHeight.md.mediaQuery.sm : undefined,
+}));
+export const SubHeadingContainer = styled(View)(({ theme }) => ({
+    marginTop: theme.space[100],
+}));
+export const IllustrationContainer = styled(View)(({ theme, isSmall, hasBadge }) => ({
+    width: isSmall ? theme.space[1600] : theme.space[3000],
+    height: isSmall ? theme.space[1600] : theme.space[3000],
+    alignSelf: isSmall ? undefined : 'center',
+    marginBottom: isSmall ? 0 : theme.space[400],
+    marginTop: hasBadge ? theme.space[800] : theme.space[400],
+    marginLeft: isSmall ? theme.space[400] : 0,
+}));
+export const ImageContainer = styled(View)(({ theme, isSmall, cardHeight = 0 }) => ({
+    height: isSmall
+        ? theme.space[2400]
+        : cardHeight > 0
+            ? cardHeight
+            : SMALL_CARD_HEIGHT,
+    width: !isSmall ? theme.space[3500] : undefined,
+    flexShrink: 0,
+}));
+export const CardImage = styled(Image)({
+    width: '100%',
+    height: '100%',
+});

package/dist/esm/components/Cards/OfferCard/index.js

@@ -0,0 +1 @@
+export * from './OfferCard';

package/dist/esm/components/Notification/Notification.js

@@ -16,30 +16,38 @@ import { useTheme } from '../../styled.native';
 import { Icon } from '../Icon';
 import { P } from '../P';
 import { Strong } from '../Strong';
-import { ContentContainer, DismissButton, NotificationBox, NotificationContentBox, NotificationShadow, StyledIcon, TitleContainer, VariantIconBackground, VariantIconContainer, } from './Notification.styles';
+import { ContentContainer, DismissButton, NotificationBox, NotificationContentBox, NotificationShadow, StyledIcon, TappableNotification, TitleContainer, VariantIconBackground, VariantIconContainer, } from './Notification.styles';
 import { mapVariantToIconName } from './utils';
 export const Notification = (_a) => {
-    var { variant = 'info', children, title, subtitle, noMargin, isTappable = false, dismissible, onDismiss, ref } = _a, rest = __rest(_a, ["variant", "children", "title", "subtitle", "noMargin", "isTappable", "dismissible", "onDismiss", "ref"]);
+    var { variant = 'info', children, title, subtitle, noMargin, onPress, dismissible = true, onDismiss, ref } = _a, rest = __rest(_a, ["variant", "children", "title", "subtitle", "noMargin", "onPress", "dismissible", "onDismiss", "ref"]);
     const [dismissed, setDismissed] = useState(false);
     if (dismissed) {
         return null;
     }
-    if (isTappable || dismissible) {
-        return (_jsx(NotificationShadow, { children: _jsx(NotificationContent, Object.assign({ variant: variant, title: title, subtitle: subtitle, noMargin: noMargin, isTappable: isTappable, dismissible: dismissible, onDismiss: onDismiss, setDismissed: setDismissed, ref: ref }, rest, { children: children })) }));
+    const isClickable = !!onPress;
+    if (isClickable || dismissible) {
+        return (_jsx(NotificationShadow, { children: _jsx(NotificationContent, Object.assign({ variant: variant, title: title, subtitle: subtitle, noMargin: noMargin, onPress: isClickable ? onPress : undefined, dismissible: dismissible, onDismiss: onDismiss, setDismissed: setDismissed, ref: ref }, rest, { children: children })) }));
     }
-    return (_jsx(NotificationContent, Object.assign({ variant: variant, title: title, subtitle: subtitle, noMargin: noMargin, isTappable: isTappable, dismissible: dismissible, onDismiss: onDismiss, setDismissed: setDismissed, ref: ref }, rest, { children: children })));
+    return (_jsx(NotificationContent, Object.assign({ variant: variant, title: title, subtitle: subtitle, noMargin: noMargin, onPress: onPress, dismissible: dismissible, onDismiss: onDismiss, setDismissed: setDismissed, ref: ref }, rest, { children: children })));
 };
 const NotificationContent = (_a) => {
-    var { variant = 'info', children, title, subtitle, noMargin, dismissible, onDismiss, setDismissed, ref } = _a, rest = __rest(_a, ["variant", "children", "title", "subtitle", "noMargin", "dismissible", "onDismiss", "setDismissed", "ref"]);
+    var { variant = 'info', children, title, subtitle, noMargin, dismissible, onDismiss, setDismissed, onPress, ref } = _a, rest = __rest(_a, ["variant", "children", "title", "subtitle", "noMargin", "dismissible", "onDismiss", "setDismissed", "onPress", "ref"]);
     const theme = useTheme();
-    return (_jsx(View, Object.assign({ ref: ref }, rest, { children: _jsxs(NotificationBox, { noMargin: noMargin, testID: "nb-notification", children: [_jsx(VariantIconBackground, { variant: variant, children: _jsx(VariantIconContainer, { children: _jsx(StyledIcon, { variant: variant, size: theme.unit[800], name: mapVariantToIconName(variant) }) }) }), _jsxs(ContentContainer, { children: [_jsxs(TitleContainer, { children: [title && (_jsx(P, { size: "md", children: _jsx(Strong, { children: title }) })), subtitle && _jsx(P, { size: "sm", children: subtitle }), children && (_jsx(NotificationContentBox, { testID: "el-notification-box", children: children }))] }), dismissible ? (_jsx(DismissButton, { accessible: true, accessibilityLabel: "Dismiss", testID: "nb-notification-dismiss", onPress: () => {
-                                setDismissed(true);
-                                if (onDismiss) {
-                                    onDismiss();
-                                }
-                            }, children: _jsx(Icon, { color: theme.button.surface.color.fgInverted, name: "cross", size: theme.space[400] }) })) : null] })] }) })));
+    const hasChildren = !!children;
+    const handleDismiss = () => {
+        if (onDismiss) {
+            onDismiss();
+        }
+        setDismissed(true);
+    };
+    return (_jsxs(View, Object.assign({ ref: ref }, rest, { children: [!!onPress && (_jsx(TappableNotification, { dismissible: dismissible, hasChildren: hasChildren, onPress: onPress })), _jsxs(NotificationBox, { noMargin: noMargin, testID: "nb-notification", children: [_jsx(VariantIconBackground, { variant: variant, children: _jsx(VariantIconContainer, { children: _jsx(StyledIcon, { variant: variant, size: theme.unit[800], name: mapVariantToIconName(variant) }) }) }), _jsxs(ContentContainer, { children: [_jsxs(TitleContainer, { children: [title && (_jsx(P, { size: "md", children: _jsx(Strong, { children: title }) })), subtitle && _jsx(P, { size: "sm", children: subtitle }), children && (_jsx(NotificationContentBox, { testID: "el-notification-box", children: children }))] }), dismissible ? (_jsx(DismissButton, { accessible: true, accessibilityLabel: "Dismiss", testID: "nb-notification-dismiss", hitSlop: {
+                                    top: theme.space[300],
+                                    right: theme.space[400],
+                                    bottom: theme.space[100],
+                                    left: theme.space[100],
+                                }, onPress: handleDismiss, children: _jsx(Icon, { color: theme.button.surface.color.fgInverted, name: "cross", size: theme.space[400] }) })) : null] })] })] })));
 };
 export const SuccessNotification = (props) => (_jsx(Notification, Object.assign({ variant: "success" }, props)));
 export const InfoNotification = (props) => (_jsx(Notification, Object.assign({ variant: "info" }, props)));
 export const WarningNotification = (props) => (_jsx(Notification, Object.assign({ variant: "warning" }, props)));
-export const ErrorNotification = (props) => (_jsx(Notification, Object.assign({ variant: "error" }, props)));
+export const ErrorNotification = (props) => (_jsx(Notification, Object.assign({ variant: "error", dismissible: false }, props)));

package/dist/esm/components/Notification/Notification.styles.js

@@ -7,7 +7,7 @@ export const NotificationShadow = styled(View)(({ theme }) => {
     return css `
     shadow-color: ${theme.color.brand.dark};
     shadow-offset: 0 ${numToPx(theme.space[100])};
-    shadow-opacity: ${theme.opacity.transparent};
+    shadow-opacity: 0.1;
     shadow-radius: ${numToPx(theme.space[100])};
     elevation: 6;
   `;
@@ -27,6 +27,25 @@ export const NotificationContentBox = styled.View(({ theme }) => {
     padding-right: ${numToPx(theme.space[300])};
   `;
 });
+export const TappableNotification = styled.TouchableOpacity(({ dismissible, hasChildren, theme }) => {
+    return css `
+    position: absolute;
+    left: 0;
+    height: ${hasChildren ? numToPx(theme.space[1200]) : '80%'};
+    width: ${dismissible ? '86%' : '100%'};
+    z-index: 1;
+    border-top-left-radius: ${numToPx(theme.border.radius.md)};
+    border-top-right-radius: ${dismissible
+        ? 0
+        : numToPx(theme.border.radius.md)};
+    border-bottom-right-radius: ${dismissible
+        ? numToPx(theme.border.radius.md)
+        : 0};
+    border-bottom-left-radius: ${hasChildren
+        ? 0
+        : numToPx(theme.border.radius.md)};
+  `;
+});
 export const DismissButton = styled.TouchableOpacity(({ theme }) => {
     return css `
     display: flex;

package/dist/esm/components/Radio/Radio.js

@@ -10,56 +10,21 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { numToPx } from '@ovotech/element-core';
 import { TouchableOpacity, View, } from 'react-native';
-import styled from '../../styled.native';
+import { useTheme } from '../../styled.native';
 import { HintText } from '../HintText';
 import { LabelText } from '../LabelText';
-const StyledRadioInputWrapper = styled.View(({ theme }) => {
-    return `
-      width: ${numToPx(theme.space[600])};
-      height: ${numToPx(theme.space[600])};
-      margin-right: 10px;
-    `;
-});
-const StyledRadioInput = styled.View(({ theme, invalid, checked }) => {
-    return `
-      width: ${numToPx(theme.space[600])};
-      height: ${numToPx(theme.space[600])};
-      border: ${numToPx(theme.border.width.md)} solid;
-      align-items: center;
-      justify-content: center;
-      border-radius: ${numToPx(theme.space[600])};
-      border-color: ${invalid
-        ? theme.input.color.borderError
-        : checked
-            ? theme.input.color.selected
-            : theme.input.color.border};
-      background: ${checked ? theme.input.color.selectedTint : 'transparent'};
-    `;
-});
-const StyledRadioInputDot = styled.View(({ theme, checked }) => {
-    return `
-      width: ${numToPx(theme.space[300])};
-      height: ${numToPx(theme.space[300])};
-      border-radius: ${numToPx(theme.space[300])};
-      background: ${theme.input.color.selected};
-      opacity: ${checked ? 1 : 0};
-    `;
-});
+import { StyledRadioInput, StyledRadioInputDot, StyledRadioInputWrapper, StyledWrapper, } from './Radio.styles';
 const Input = (_a) => {
     var { checked, invalid, testID } = _a, rest = __rest(_a, ["checked", "invalid", "testID"]);
     return (_jsx(StyledRadioInputWrapper, Object.assign({}, rest, { children: _jsx(StyledRadioInput, { invalid: invalid, checked: checked, testID: testID, children: _jsx(StyledRadioInputDot, { checked: checked }) }) })));
 };
-const StyledWrapper = styled.View(({ theme }) => `
-    padding-top: ${numToPx(theme.space[300])};
-    flex-direction: row;
-  `);
 const Radio = (_a) => {
     var { label, hint, checked, invalid, 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     value, // "value" is needed for RadioGroup, but isn't actually used in the radio anywhere
     activeOpacity = 0.8, testID, ref } = _a, rest = __rest(_a, ["label", "hint", "checked", "invalid", "value", "activeOpacity", "testID", "ref"]);
-    return (_jsx(TouchableOpacity, Object.assign({ ref: ref, accessible: true, accessibilityRole: "radio", activeOpacity: activeOpacity, accessibilityState: { checked } }, rest, { children: _jsxs(StyledWrapper, { children: [_jsx(Input, { checked: checked, invalid: invalid, testID: testID }), _jsxs(View, { style: { flexShrink: 1 }, children: [_jsx(LabelText, { children: label }), hint ? _jsx(HintText, { children: hint }) : null] })] }) })));
+    const theme = useTheme();
+    return (_jsx(TouchableOpacity, Object.assign({ ref: ref, accessible: true, accessibilityRole: "radio", activeOpacity: activeOpacity, accessibilityState: { checked } }, rest, { children: _jsxs(StyledWrapper, { children: [_jsx(Input, { checked: checked, invalid: invalid, testID: testID }), _jsxs(View, { style: { flexShrink: 1 }, children: [_jsx(LabelText, { style: { fontFamily: theme.native.font.family.book }, children: label }), hint ? _jsx(HintText, { children: hint }) : null] })] }) })));
 };
 export { Radio };

package/dist/esm/components/Radio/Radio.styles.js

@@ -0,0 +1,38 @@
+import { numToPx } from '@ovotech/element-core';
+import styled, { css } from '../../styled.native';
+export const StyledWrapper = styled.View(({ theme }) => css `
+    padding-top: ${numToPx(theme.space[300])};
+    flex-direction: row;
+  `);
+export const StyledRadioInputDot = styled.View(({ theme, checked }) => {
+    return css `
+      width: ${numToPx(theme.space[300])};
+      height: ${numToPx(theme.space[300])};
+      border-radius: ${numToPx(theme.space[300])};
+      background: ${theme.input.color.selected};
+      opacity: ${checked ? 1 : 0};
+    `;
+});
+export const StyledRadioInput = styled.View(({ theme, invalid, checked }) => {
+    return css `
+    width: ${numToPx(theme.space[600])};
+    height: ${numToPx(theme.space[600])};
+    border: ${numToPx(theme.border.width.md)} solid;
+    align-items: center;
+    justify-content: center;
+    border-radius: ${numToPx(theme.space[600])};
+    border-color: ${invalid
+        ? theme.input.color.borderError
+        : checked
+            ? theme.input.color.selected
+            : theme.input.color.border};
+    background: ${checked ? theme.input.color.selectedTint : 'transparent'};
+  `;
+});
+export const StyledRadioInputWrapper = styled.View(({ theme }) => {
+    return css `
+    width: ${numToPx(theme.space[600])};
+    height: ${numToPx(theme.space[600])};
+    margin-right: 10px;
+  `;
+});

package/dist/esm/components/Rail/Rail.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useMemo } from 'react';
+import { View, } from 'react-native';
+import { Icon } from '../Icon';
+import { P } from '../P';
+import { Strong } from '../Strong';
+import { RailIndicator } from './RailIndicator';
+import { Header, HeadingText, IconContainer, RailItemWrapper, StyledRail, } from './styles';
+import { useRailPaging } from './useRailPaging';
+const DEFAULT_MAX_CHILDREN = 6;
+export const Rail = ({ children, indicator = true, icon, heading, subHeading, maxChildren = DEFAULT_MAX_CHILDREN, }) => {
+    const allItems = useMemo(() => React.Children.toArray(children), [children]);
+    const items = useMemo(() => allItems.slice(0, Math.max(0, maxChildren)), [allItems, maxChildren]);
+    const paging = useRailPaging({ itemCount: items.length });
+    const hasIndicator = indicator && paging.isScrollable;
+    return (_jsxs(View, { children: [_jsxs(Header, { children: [icon && (_jsx(IconContainer, { children: _jsx(Icon, { name: icon, size: 24 }) })), (heading || subHeading) && (_jsxs(HeadingText, { children: [heading && (_jsx(P, { size: "lg", children: _jsx(Strong, { children: heading }) })), subHeading && _jsx(P, { size: "sm", children: subHeading })] }))] }), _jsxs(View, { onLayout: e => paging.onContainerLayout(e.nativeEvent.layout.width), children: [_jsx(StyledRail, { horizontal: true, hasIndicator: hasIndicator, showsHorizontalScrollIndicator: false, contentContainerStyle: { flexDirection: 'row' }, decelerationRate: "fast", snapToOffsets: paging.snapOffsets, snapToAlignment: "start", disableIntervalMomentum: true, scrollEventThrottle: 16, onMomentumScrollEnd: (e) => paging.onMomentumEnd(e.nativeEvent.contentOffset.x), onContentSizeChange: w => paging.onContentSizeChange(w), children: items.map((child, index) => (_jsx(RailItemWrapper, { onLayout: (e) => {
+                                if (index !== 0)
+                                    return;
+                                paging.onItemLayout(e.nativeEvent.layout.width);
+                            }, children: child }, `Rail-item-${index}`))) }), hasIndicator && (_jsx(RailIndicator, { dotCount: items.length, activeStartIndex: paging.activeStartIndex, visibleCount: paging.visibleCount }))] })] }));
+};

package/dist/esm/components/Rail/RailIndicator.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from 'react';
+import Animated, { useAnimatedStyle, useDerivedValue, withTiming, } from 'react-native-reanimated';
+import { useTheme } from '../../styled.native';
+import { DotContainer, RailIndicatorContainer } from './styles';
+export const RailIndicator = ({ dotCount, activeStartIndex, visibleCount, }) => {
+    const theme = useTheme();
+    const DOT = theme.space[200];
+    const GAP = theme.space[200];
+    const PADDING = theme.space[350];
+    const [containerWidth, setContainerWidth] = useState(0);
+    const onContainerLayout = useCallback((e) => {
+        var _a, _b, _c;
+        const w = (_c = (_b = (_a = e === null || e === void 0 ? void 0 : e.nativeEvent) === null || _a === void 0 ? void 0 : _a.layout) === null || _b === void 0 ? void 0 : _b.width) !== null && _c !== void 0 ? _c : 0;
+        if (w > 0)
+            setContainerWidth(w);
+    }, []);
+    if (dotCount <= 0)
+        return null;
+    const start = Math.min(Math.max(0, activeStartIndex), dotCount - 1);
+    const visible = Math.max(1, Math.min(visibleCount, dotCount - start));
+    const rowWidth = useMemo(() => {
+        return dotCount * DOT + (dotCount - 1) * GAP;
+    }, [dotCount, DOT, GAP]);
+    const step = DOT + GAP;
+    const animatedLeft = useDerivedValue(() => {
+        if (containerWidth <= 0)
+            return 0;
+        const innerWidth = Math.max(0, containerWidth - 2 * PADDING);
+        const rowLeft = PADDING + Math.max(0, (innerWidth - rowWidth) / 2);
+        return withTiming(rowLeft + start * step, { duration: 150 });
+    }, [containerWidth, PADDING, rowWidth, start, step]);
+    const animatedWidth = useDerivedValue(() => {
+        const w = visible * DOT + Math.max(0, visible - 1) * GAP;
+        return withTiming(w, { duration: 150 });
+    }, [visible, DOT, GAP]);
+    const pillStyle = useAnimatedStyle(() => ({
+        position: 'absolute',
+        left: animatedLeft.value,
+        width: animatedWidth.value,
+        opacity: containerWidth > 0 ? 1 : 0,
+    }));
+    return (_jsxs(RailIndicatorContainer, { onLayout: onContainerLayout, children: [Array.from({ length: dotCount }).map((_, index) => (_jsx(DotContainer, { isActive: false }, `dot-${index}`))), _jsx(Animated.View, { pointerEvents: "none", style: pillStyle, children: _jsx(DotContainer, { isActive: true, style: { width: '100%' } }) })] }));
+};

package/dist/esm/components/Rail/index.js

@@ -0,0 +1 @@
+export { Rail } from './Rail';