@ovotech/element-native 3.1.1 → 3.2.0-canary-94fa122-112

package/dist/components/ActionList/ActionList.d.ts

@@ -5,6 +5,7 @@ import { StyledActionList } from './styled';
 declare const ACTION_TYPES: {
     [key: string]: IconName;
 };
+declare type FullWidthOptions = 'always' | 'never' | 'small';
 declare type ActionListProps = ComponentProps<typeof StyledActionList>;
 declare type ActionProps = PropsWithChildren<ViewProps & {
     accessibilityRole?: AccessibilityRole;
@@ -13,10 +14,10 @@ declare type ActionProps = PropsWithChildren<ViewProps & {
     iconRight?: IconName | 'off';
     inverted?: boolean;
     onPress?: () => void;
-    fullWidth?: 'always' | 'never' | 'small';
+    fullWidth?: FullWidthOptions;
     ref?: Ref<View>;
     testID?: string;
 }>;
 declare const ActionList: ({ children, inverted, ...rest }: ActionListProps) => JSX.Element;
-declare const Action: ({ accessibilityRole, actionType, children, inverted, onPress, testID, ...rest }: ActionProps) => JSX.Element;
+declare const Action: ({ accessibilityRole, actionType, children, fullWidth, inverted, onPress, testID, ...rest }: ActionProps) => JSX.Element;
 export { ActionList, Action };

package/dist/components/ActionList/ActionList.js

@@ -40,21 +40,29 @@ var ActionList = function (_a) {
     return ((0, jsx_runtime_1.jsx)(styled_1.StyledActionList, __assign({}, rest, { children: react_1.Children.map(children, function (child, index) {
             var _a;
             return (0, react_1.cloneElement)(child, {
+                fullWidth: 'always',
                 index: index,
                 hasBorder: childCount > 1 && index !== childCount - 1,
-                inList: childCount !== 1 ? true : false,
                 inverted: (_a = child.props.inverted) !== null && _a !== void 0 ? _a : inverted, // prioritise child prop
             });
         }) })));
 };
 exports.ActionList = ActionList;
 var ActionWrapper = function (_a) {
-    var children = _a.children, accessibilityRole = _a.accessibilityRole, _b = _a.activeOpacity, activeOpacity = _b === void 0 ? 0.75 : _b, _c = _a.hasBorder, hasBorder = _c === void 0 ? false : _c, _d = _a.inList, inList = _d === void 0 ? false : _d, _e = _a.inverted, inverted = _e === void 0 ? false : _e, onPress = _a.onPress, testID = _a.testID, rest = __rest(_a, ["children", "accessibilityRole", "activeOpacity", "hasBorder", "inList", "inverted", "onPress", "testID"]);
-    return ((0, jsx_runtime_1.jsx)(styled_1.StyledActionWrapper, __assign({ hasBorder: hasBorder, inList: inList, inverted: inverted, testID: testID }, rest, { children: (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, __assign({ activeOpacity: activeOpacity, accessibilityRole: accessibilityRole, onPress: onPress }, { children: (0, jsx_runtime_1.jsx)(styled_1.StyledActionInner, { children: children }) })) })));
+    var children = _a.children, accessibilityRole = _a.accessibilityRole, _b = _a.activeOpacity, activeOpacity = _b === void 0 ? 0.75 : _b, fullWidth = _a.fullWidth, _c = _a.hasBorder, hasBorder = _c === void 0 ? false : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, onPress = _a.onPress, testID = _a.testID, rest = __rest(_a, ["children", "accessibilityRole", "activeOpacity", "fullWidth", "hasBorder", "inverted", "onPress", "testID"]);
+    return ((0, jsx_runtime_1.jsx)(styled_1.StyledActionWrapper, __assign({ hasBorder: hasBorder, inverted: inverted, testID: testID }, rest, { children: (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, __assign({ activeOpacity: activeOpacity, accessibilityRole: accessibilityRole, onPress: onPress }, { children: (0, jsx_runtime_1.jsx)(styled_1.StyledActionInner, __assign({ fullWidth: fullWidth }, { children: children })) })) })));
 };
 var Action = function (_a) {
-    var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'link' : _b, _c = _a.actionType, actionType = _c === void 0 ? 'link' : _c, children = _a.children, _d = _a.inverted, inverted = _d === void 0 ? false : _d, onPress = _a.onPress, testID = _a.testID, rest = __rest(_a, ["accessibilityRole", "actionType", "children", "inverted", "onPress", "testID"]);
+    var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'link' : _b, _c = _a.actionType, actionType = _c === void 0 ? 'link' : _c, children = _a.children, _d = _a.fullWidth, fullWidth = _d === void 0 ? 'never' : _d, _e = _a.inverted, inverted = _e === void 0 ? false : _e, onPress = _a.onPress, testID = _a.testID, rest = __rest(_a, ["accessibilityRole", "actionType", "children", "fullWidth", "inverted", "onPress", "testID"]);
     var smallAndUp = (0, hooks_1.useBreakpoint)().smallAndUp;
-    return ((0, jsx_runtime_1.jsxs)(ActionWrapper, __assign({ accessibilityRole: accessibilityRole, inverted: inverted, onPress: onPress, testID: testID }, rest, { children: [actionType === 'back' ? ((0, jsx_runtime_1.jsx)(styled_1.StyledLeftIcon, { inverted: inverted, name: ACTION_TYPES['back'], size: 16 })) : null, (0, jsx_runtime_1.jsx)(styled_1.StyledActionText, __assign({ smallAndUp: smallAndUp, inverted: inverted }, { children: children })), actionType !== 'back' ? ((0, jsx_runtime_1.jsx)(styled_1.StyledRightIcon, { inverted: inverted, name: ACTION_TYPES[actionType], marginTop: actionType === 'link' ? 1 : 0, size: 16 })) : null] })));
+    var isBackAction = actionType === 'back';
+    var updatedIconRight = null;
+    if (!isBackAction) {
+        updatedIconRight = ACTION_TYPES[actionType];
+    }
+    if (fullWidth === 'small') {
+        fullWidth = smallAndUp ? 'never' : 'always';
+    }
+    return ((0, jsx_runtime_1.jsxs)(ActionWrapper, __assign({ accessibilityRole: accessibilityRole, fullWidth: fullWidth, inverted: inverted, onPress: onPress, testID: testID }, rest, { children: [isBackAction ? ((0, jsx_runtime_1.jsx)(styled_1.StyledLeftIcon, { inverted: inverted, name: ACTION_TYPES.back, size: 16 })) : null, (0, jsx_runtime_1.jsx)(styled_1.StyledActionText, __assign({ smallAndUp: smallAndUp, inverted: inverted }, { children: children })), updatedIconRight ? ((0, jsx_runtime_1.jsx)(styled_1.StyledRightIcon, { inverted: inverted, name: updatedIconRight, marginTop: actionType === 'link' ? 1 : 0, size: 16 })) : null] })));
 };
 exports.Action = Action;

package/dist/components/ActionList/styled.d.ts

@@ -1,4 +1,5 @@
 import { Theme } from '@ovotech/element-core';
+import { FullWidthOptions } from '../../hooks';
 import { ListWrapper } from '../List/List';
 export declare const StyledActionList: typeof ListWrapper;
 export declare const StyledActionWrapper: import("styled-components").StyledComponent<typeof import("react-native").View, import("../../theme/theme").Theme & {
@@ -230,7 +231,6 @@ export declare const StyledActionWrapper: import("styled-components").StyledComp
     };
 } & object, {
     hasBorder?: boolean | undefined;
-    inList?: boolean | undefined;
     inverted?: boolean | undefined;
 }, never>;
 export declare const StyledActionInner: import("styled-components").StyledComponent<typeof import("react-native").View, import("../../theme/theme").Theme & {
@@ -460,7 +460,9 @@ export declare const StyledActionInner: import("styled-components").StyledCompon
             };
         };
     };
-} & object, {}, never>;
+} & object, {
+    fullWidth?: FullWidthOptions | undefined;
+}, never>;
 export declare const StyledActionText: import("styled-components").StyledComponent<typeof import("react-native").Text, import("../../theme/theme").Theme & {
     core: {
         radius: Record<"small" | "medium" | "large" | "max", string>;

package/dist/components/ActionList/styled.js

@@ -33,25 +33,28 @@ var Icon_1 = require("../Icon");
 var List_1 = require("../List/List");
 exports.StyledActionList = List_1.ListWrapper;
 exports.StyledActionWrapper = styled_native_1.default.View(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, hasBorder = _a.hasBorder, inList = _a.inList, inverted = _a.inverted;
-    return "\n  width: ".concat(inList ? '100%' : 'auto', ";\n  align-self: ").concat(inList ? 'center' : 'flex-start', ";\n  border-bottom-width: ").concat(hasBorder ? core.borderWidth.small : 0, ";\n  border-bottom-style: solid;\n  border-bottom-color: ").concat(inverted ? semantic.inverted.border : semantic.border.graphic, ";\n");
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, hasBorder = _a.hasBorder, inverted = _a.inverted;
+    return "\n  width: 100%;\n  align-self: flex-start;\n  border-bottom-width: ".concat(hasBorder ? core.borderWidth.small : 0, ";\n  border-bottom-style: solid;\n  border-bottom-color: ").concat(inverted ? semantic.inverted.border : semantic.border.graphic, ";\n");
+});
+exports.StyledActionInner = styled_native_1.default.View(function (_a) {
+    var fullWidth = _a.fullWidth;
+    return "\n  display: flex;\n  flex-direction: row;\n  justify-content: ".concat(fullWidth === 'always' ? 'space-between' : 'flex-start', ";\n  align-items: center;\n  min-height: 44px;\n");
 });
-exports.StyledActionInner = styled_native_1.default.View(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  min-height: 44px;\n"], ["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  min-height: 44px;\n"])));
 exports.StyledActionText = styled_native_1.default.Text(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp, _c = _a.inverted, inverted = _c === void 0 ? false : _c;
     var fontSize = smallAndUp
         ? core.fontSize.body.large
         : core.fontSize.body.small;
-    return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    color: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n  "], ["\n    color: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n  "])), inverted ? semantic.inverted.message.base : semantic.message.base, core.fontFamily.bodyBold.native, fontSize, core.lineHeight.body.small);
+    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    color: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n  "], ["\n    color: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n  "])), inverted ? semantic.inverted.message.base : semantic.message.base, core.fontFamily.bodyBold.native, fontSize, core.lineHeight.body.small);
 });
 exports.StyledRightIcon = (0, styled_native_1.default)(Icon_1.Icon)(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic, inverted = _a.inverted, marginTop = _a.marginTop;
-    return (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    color: ", ";\n    margin-left: ", ";\n    margin-top: ", ";\n  "], ["\n    color: ", ";\n    margin-left: ", ";\n    margin-top: ", ";\n  "])), inverted ? semantic.inverted.message.base : semantic.message.base, core.space[1], core.space[marginTop]);
+    return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    color: ", ";\n    margin-left: ", ";\n    margin-top: ", ";\n  "], ["\n    color: ", ";\n    margin-left: ", ";\n    margin-top: ", ";\n  "])), inverted ? semantic.inverted.message.base : semantic.message.base, core.space[1], core.space[marginTop]);
 });
 exports.StyledLeftIcon = (0, styled_native_1.default)(Icon_1.Icon)(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic, inverted = _a.inverted;
-    return (0, styled_native_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      color: ", ";\n      margin-right: ", ";\n    "], ["\n      color: ", ";\n      margin-right: ", ";\n    "])), inverted
+    return (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      color: ", ";\n      margin-right: ", ";\n    "], ["\n      color: ", ";\n      margin-right: ", ";\n    "])), inverted
         ? semantic.inverted.message.base
         : semantic.message.base, core.space[1]);
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/components/CTAButton/CTAButton.d.ts

@@ -13,7 +13,7 @@ declare const CTAButton: ({ iconLeft, iconRight, children, fullWidth, variant, .
 declare type CTAProps = Omit<ComponentProps<typeof CTAButton>, 'variant' | 'ref'> & {
     ref: Ref<TouchableOpacity>;
 };
-declare const PrimaryCTAButton: import("react").ForwardRefExoticComponent<Pick<CTAProps, "iconLeft" | "iconRight" | "fullWidth" | keyof TouchableOpacityProps> & import("react").RefAttributes<TouchableOpacity>>;
-declare const SecondaryCTAButton: import("react").ForwardRefExoticComponent<Pick<CTAProps, "iconLeft" | "iconRight" | "fullWidth" | keyof TouchableOpacityProps> & import("react").RefAttributes<TouchableOpacity>>;
-declare const DestructiveCTAButton: import("react").ForwardRefExoticComponent<Pick<CTAProps, "iconLeft" | "iconRight" | "fullWidth" | keyof TouchableOpacityProps> & import("react").RefAttributes<TouchableOpacity>>;
+declare const PrimaryCTAButton: import("react").ForwardRefExoticComponent<Pick<CTAProps, "fullWidth" | "iconLeft" | "iconRight" | keyof TouchableOpacityProps> & import("react").RefAttributes<TouchableOpacity>>;
+declare const SecondaryCTAButton: import("react").ForwardRefExoticComponent<Pick<CTAProps, "fullWidth" | "iconLeft" | "iconRight" | keyof TouchableOpacityProps> & import("react").RefAttributes<TouchableOpacity>>;
+declare const DestructiveCTAButton: import("react").ForwardRefExoticComponent<Pick<CTAProps, "fullWidth" | "iconLeft" | "iconRight" | keyof TouchableOpacityProps> & import("react").RefAttributes<TouchableOpacity>>;
 export { CTAButton, PrimaryCTAButton, SecondaryCTAButton, DestructiveCTAButton, };

package/dist/components/CTALink/CTALink.d.ts

@@ -4,8 +4,8 @@ import { CTAButton } from '../CTAButton';
 declare type CTALinkProps = Omit<ComponentProps<typeof CTAButton>, 'ref'> & {
     ref: Ref<TouchableOpacity>;
 };
-declare const CTALink: import("react").ForwardRefExoticComponent<Pick<CTALinkProps, "iconLeft" | "iconRight" | "fullWidth" | keyof import("react-native/types").TouchableOpacityProps | "variant"> & import("react").RefAttributes<TouchableOpacity>>;
+declare const CTALink: import("react").ForwardRefExoticComponent<Pick<CTALinkProps, "fullWidth" | "iconLeft" | "iconRight" | keyof import("react-native/types").TouchableOpacityProps | "variant"> & import("react").RefAttributes<TouchableOpacity>>;
 declare type CTAProps = Omit<ComponentProps<typeof CTALink>, 'variant'>;
-declare const PrimaryCTALink: import("react").ForwardRefExoticComponent<Pick<CTAProps, "key" | "iconLeft" | "iconRight" | "fullWidth" | keyof import("react-native/types").TouchableOpacityProps> & import("react").RefAttributes<TouchableOpacity>>;
-declare const SecondaryCTALink: import("react").ForwardRefExoticComponent<Pick<CTAProps, "key" | "iconLeft" | "iconRight" | "fullWidth" | keyof import("react-native/types").TouchableOpacityProps> & import("react").RefAttributes<TouchableOpacity>>;
+declare const PrimaryCTALink: import("react").ForwardRefExoticComponent<Pick<CTAProps, "key" | "fullWidth" | "iconLeft" | "iconRight" | keyof import("react-native/types").TouchableOpacityProps> & import("react").RefAttributes<TouchableOpacity>>;
+declare const SecondaryCTALink: import("react").ForwardRefExoticComponent<Pick<CTAProps, "key" | "fullWidth" | "iconLeft" | "iconRight" | keyof import("react-native/types").TouchableOpacityProps> & import("react").RefAttributes<TouchableOpacity>>;
 export { CTALink, PrimaryCTALink, SecondaryCTALink };

package/dist/components/Notification/Notification.js

@@ -84,7 +84,7 @@ var StyledIcon = (0, styled_native_1.default)(Icon_1.Icon)(function (_a) {
 exports.Notification = (0, react_1.forwardRef)(function (_a, ref) {
     var _b = _a.variant, variant = _b === void 0 ? 'info' : _b, children = _a.children, title = _a.title, noMargin = _a.noMargin, dismissible = _a.dismissible, onDismiss = _a.onDismiss, rest = __rest(_a, ["variant", "children", "title", "noMargin", "dismissible", "onDismiss"]);
     var _c = (0, react_1.useState)(false), dismissed = _c[0], setDismissed = _c[1];
-    if (dismissed || !children) {
+    if (dismissed || (!title && !children)) {
         return null;
     }
     return ((0, jsx_runtime_1.jsx)(react_native_1.View, __assign({ ref: ref }, rest, { children: (0, jsx_runtime_1.jsxs)(NotificationBox, __assign({ noMargin: noMargin, testID: "nb-notification" }, { children: [(0, jsx_runtime_1.jsxs)(exports.NotificationTitleBox, __assign({ variant: variant, dismissible: dismissible }, { children: [(0, jsx_runtime_1.jsx)(NotificationTitleText, __assign({ variant: variant }, { children: title })), dismissible ? ((0, jsx_runtime_1.jsx)(DismissButton, __assign({ accessibilityLabel: "Dismiss", testID: "nb-notification-dismiss", onPress: function () {

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

@@ -37,20 +37,28 @@ var ActionList = function (_a) {
     return (_jsx(StyledActionList, __assign({}, rest, { children: Children.map(children, function (child, index) {
             var _a;
             return cloneElement(child, {
+                fullWidth: 'always',
                 index: index,
                 hasBorder: childCount > 1 && index !== childCount - 1,
-                inList: childCount !== 1 ? true : false,
                 inverted: (_a = child.props.inverted) !== null && _a !== void 0 ? _a : inverted, // prioritise child prop
             });
         }) })));
 };
 var ActionWrapper = function (_a) {
-    var children = _a.children, accessibilityRole = _a.accessibilityRole, _b = _a.activeOpacity, activeOpacity = _b === void 0 ? 0.75 : _b, _c = _a.hasBorder, hasBorder = _c === void 0 ? false : _c, _d = _a.inList, inList = _d === void 0 ? false : _d, _e = _a.inverted, inverted = _e === void 0 ? false : _e, onPress = _a.onPress, testID = _a.testID, rest = __rest(_a, ["children", "accessibilityRole", "activeOpacity", "hasBorder", "inList", "inverted", "onPress", "testID"]);
-    return (_jsx(StyledActionWrapper, __assign({ hasBorder: hasBorder, inList: inList, inverted: inverted, testID: testID }, rest, { children: _jsx(TouchableOpacity, __assign({ activeOpacity: activeOpacity, accessibilityRole: accessibilityRole, onPress: onPress }, { children: _jsx(StyledActionInner, { children: children }) })) })));
+    var children = _a.children, accessibilityRole = _a.accessibilityRole, _b = _a.activeOpacity, activeOpacity = _b === void 0 ? 0.75 : _b, fullWidth = _a.fullWidth, _c = _a.hasBorder, hasBorder = _c === void 0 ? false : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, onPress = _a.onPress, testID = _a.testID, rest = __rest(_a, ["children", "accessibilityRole", "activeOpacity", "fullWidth", "hasBorder", "inverted", "onPress", "testID"]);
+    return (_jsx(StyledActionWrapper, __assign({ hasBorder: hasBorder, inverted: inverted, testID: testID }, rest, { children: _jsx(TouchableOpacity, __assign({ activeOpacity: activeOpacity, accessibilityRole: accessibilityRole, onPress: onPress }, { children: _jsx(StyledActionInner, __assign({ fullWidth: fullWidth }, { children: children })) })) })));
 };
 var Action = function (_a) {
-    var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'link' : _b, _c = _a.actionType, actionType = _c === void 0 ? 'link' : _c, children = _a.children, _d = _a.inverted, inverted = _d === void 0 ? false : _d, onPress = _a.onPress, testID = _a.testID, rest = __rest(_a, ["accessibilityRole", "actionType", "children", "inverted", "onPress", "testID"]);
+    var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'link' : _b, _c = _a.actionType, actionType = _c === void 0 ? 'link' : _c, children = _a.children, _d = _a.fullWidth, fullWidth = _d === void 0 ? 'never' : _d, _e = _a.inverted, inverted = _e === void 0 ? false : _e, onPress = _a.onPress, testID = _a.testID, rest = __rest(_a, ["accessibilityRole", "actionType", "children", "fullWidth", "inverted", "onPress", "testID"]);
     var smallAndUp = useBreakpoint().smallAndUp;
-    return (_jsxs(ActionWrapper, __assign({ accessibilityRole: accessibilityRole, inverted: inverted, onPress: onPress, testID: testID }, rest, { children: [actionType === 'back' ? (_jsx(StyledLeftIcon, { inverted: inverted, name: ACTION_TYPES['back'], size: 16 })) : null, _jsx(StyledActionText, __assign({ smallAndUp: smallAndUp, inverted: inverted }, { children: children })), actionType !== 'back' ? (_jsx(StyledRightIcon, { inverted: inverted, name: ACTION_TYPES[actionType], marginTop: actionType === 'link' ? 1 : 0, size: 16 })) : null] })));
+    var isBackAction = actionType === 'back';
+    var updatedIconRight = null;
+    if (!isBackAction) {
+        updatedIconRight = ACTION_TYPES[actionType];
+    }
+    if (fullWidth === 'small') {
+        fullWidth = smallAndUp ? 'never' : 'always';
+    }
+    return (_jsxs(ActionWrapper, __assign({ accessibilityRole: accessibilityRole, fullWidth: fullWidth, inverted: inverted, onPress: onPress, testID: testID }, rest, { children: [isBackAction ? (_jsx(StyledLeftIcon, { inverted: inverted, name: ACTION_TYPES.back, size: 16 })) : null, _jsx(StyledActionText, __assign({ smallAndUp: smallAndUp, inverted: inverted }, { children: children })), updatedIconRight ? (_jsx(StyledRightIcon, { inverted: inverted, name: updatedIconRight, marginTop: actionType === 'link' ? 1 : 0, size: 16 })) : null] })));
 };
 export { ActionList, Action };

package/dist/esm/components/ActionList/styled.js

@@ -7,25 +7,28 @@ import { Icon } from '../Icon';
 import { ListWrapper } from '../List/List';
 export var StyledActionList = ListWrapper;
 export var StyledActionWrapper = styled.View(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, hasBorder = _a.hasBorder, inList = _a.inList, inverted = _a.inverted;
-    return "\n  width: ".concat(inList ? '100%' : 'auto', ";\n  align-self: ").concat(inList ? 'center' : 'flex-start', ";\n  border-bottom-width: ").concat(hasBorder ? core.borderWidth.small : 0, ";\n  border-bottom-style: solid;\n  border-bottom-color: ").concat(inverted ? semantic.inverted.border : semantic.border.graphic, ";\n");
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, hasBorder = _a.hasBorder, inverted = _a.inverted;
+    return "\n  width: 100%;\n  align-self: flex-start;\n  border-bottom-width: ".concat(hasBorder ? core.borderWidth.small : 0, ";\n  border-bottom-style: solid;\n  border-bottom-color: ").concat(inverted ? semantic.inverted.border : semantic.border.graphic, ";\n");
+});
+export var StyledActionInner = styled.View(function (_a) {
+    var fullWidth = _a.fullWidth;
+    return "\n  display: flex;\n  flex-direction: row;\n  justify-content: ".concat(fullWidth === 'always' ? 'space-between' : 'flex-start', ";\n  align-items: center;\n  min-height: 44px;\n");
 });
-export var StyledActionInner = styled.View(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  min-height: 44px;\n"], ["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  min-height: 44px;\n"])));
 export var StyledActionText = styled.Text(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp, _c = _a.inverted, inverted = _c === void 0 ? false : _c;
     var fontSize = smallAndUp
         ? core.fontSize.body.large
         : core.fontSize.body.small;
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    color: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n  "], ["\n    color: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n  "])), inverted ? semantic.inverted.message.base : semantic.message.base, core.fontFamily.bodyBold.native, fontSize, core.lineHeight.body.small);
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    color: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n  "], ["\n    color: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n  "])), inverted ? semantic.inverted.message.base : semantic.message.base, core.fontFamily.bodyBold.native, fontSize, core.lineHeight.body.small);
 });
 export var StyledRightIcon = styled(Icon)(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic, inverted = _a.inverted, marginTop = _a.marginTop;
-    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    color: ", ";\n    margin-left: ", ";\n    margin-top: ", ";\n  "], ["\n    color: ", ";\n    margin-left: ", ";\n    margin-top: ", ";\n  "])), inverted ? semantic.inverted.message.base : semantic.message.base, core.space[1], core.space[marginTop]);
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    color: ", ";\n    margin-left: ", ";\n    margin-top: ", ";\n  "], ["\n    color: ", ";\n    margin-left: ", ";\n    margin-top: ", ";\n  "])), inverted ? semantic.inverted.message.base : semantic.message.base, core.space[1], core.space[marginTop]);
 });
 export var StyledLeftIcon = styled(Icon)(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic, inverted = _a.inverted;
-    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      color: ", ";\n      margin-right: ", ";\n    "], ["\n      color: ", ";\n      margin-right: ", ";\n    "])), inverted
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      color: ", ";\n      margin-right: ", ";\n    "], ["\n      color: ", ";\n      margin-right: ", ";\n    "])), inverted
         ? semantic.inverted.message.base
         : semantic.message.base, core.space[1]);
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+var templateObject_1, templateObject_2, templateObject_3;

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

@@ -58,7 +58,7 @@ var StyledIcon = styled(Icon)(function (_a) {
 export var Notification = forwardRef(function (_a, ref) {
     var _b = _a.variant, variant = _b === void 0 ? 'info' : _b, children = _a.children, title = _a.title, noMargin = _a.noMargin, dismissible = _a.dismissible, onDismiss = _a.onDismiss, rest = __rest(_a, ["variant", "children", "title", "noMargin", "dismissible", "onDismiss"]);
     var _c = useState(false), dismissed = _c[0], setDismissed = _c[1];
-    if (dismissed || !children) {
+    if (dismissed || (!title && !children)) {
         return null;
     }
     return (_jsx(View, __assign({ ref: ref }, rest, { children: _jsxs(NotificationBox, __assign({ noMargin: noMargin, testID: "nb-notification" }, { children: [_jsxs(NotificationTitleBox, __assign({ variant: variant, dismissible: dismissible }, { children: [_jsx(NotificationTitleText, __assign({ variant: variant }, { children: title })), dismissible ? (_jsx(DismissButton, __assign({ accessibilityLabel: "Dismiss", testID: "nb-notification-dismiss", onPress: function () {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ovotech/element-native",
-  "version": "3.1.1",
+  "version": "3.2.0-canary-94fa122-112",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
@@ -13,7 +13,7 @@
     "url": "@ovotech/element"
   },
   "dependencies": {
-    "@ovotech/element-core": "^2.0.0",
+    "@ovotech/element-core": "^2.0.0-canary-94fa122-112",
     "deepmerge": "^4.2.2",
     "lodash.groupby": "^4.6.0"
   },
@@ -57,8 +57,8 @@
   },
   "sideEffects": false,
   "scripts": {
-    "build": "tsc && tsc --module ES6 --outDir dist/esm --declaration false",
-    "quickbuild": "tsc --module ES6 --outDir dist/esm --declaration false",
+    "build": "tsc --project tsconfig.build.json && tsc --project tsconfig.build.json --module ES6 --outDir dist/esm --declaration false",
+    "quickbuild": "tsc --project tsconfig.build.json --module ES6 --outDir dist/esm --declaration false",
     "test": "jest --maxWorkers 4",
     "typecheck": "tsc --noEmit"
   }

package/dist/components/Input/TelInput.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-import { TextInput } from 'react-native';
-declare const TelInput: React.ForwardRefExoticComponent<import("react-native/types").TextInputProps & {
-    invalid?: boolean | undefined;
-    stretch?: boolean | undefined;
-    iconLeft?: (string & {}) | import("../../providers").IconName | undefined;
-    iconRight?: (string & {}) | import("../../providers").IconName | undefined;
-    rightSlot?: React.ReactNode;
-} & React.RefAttributes<TextInput>>;
-export { TelInput };

package/dist/components/Input/TelInput.js

@@ -1,41 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TelInput = void 0;
-var react_1 = __importStar(require("react"));
-var Input_1 = require("./Input");
-var TelInput = (0, react_1.forwardRef)(function (props, ref) { return (react_1.default.createElement(Input_1.Input, __assign({}, props, { keyboardType: "phone-pad", autoCapitalize: "none", autoCorrect: false, ref: ref }))); });
-exports.TelInput = TelInput;

package/dist/esm/components/Input/TelInput.js

@@ -1,15 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import React, { forwardRef } from 'react';
-import { Input } from './Input';
-var TelInput = forwardRef(function (props, ref) { return (React.createElement(Input, __assign({}, props, { keyboardType: "phone-pad", autoCapitalize: "none", autoCorrect: false, ref: ref }))); });
-export { TelInput };

package/dist/esm/providers/icons/HidePassword.js

@@ -1,15 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import React from 'react';
-import { Path, Svg } from 'react-native-svg';
-export var HidePassword = function (props) { return (React.createElement(Svg, __assign({ viewBox: "0 0 16 16" }, props),
-    React.createElement(Path, { d: "M15.8125 1.3125L14.5781 0.078125L10.7093 3.947C9.8406 3.65492 8.93342 3.5 8 3.5C4.89086 3.5 2.07286 5.21886 0 8C0.996343 9.33679 2.16484 10.4282 3.45507 11.2012L0.0937505 14.5625L1.32813 15.7969L5.12836 11.9966C6.04613 12.3251 7.00825 12.5 8 12.5C11.1091 12.5 13.9271 10.7811 16 8C14.9683 6.61581 13.7521 5.49476 12.4072 4.71779L15.8125 1.3125ZM9.3408 5.31545C8.93732 5.11358 8.48195 5 8 5C6.34286 5 5 6.34286 5 8C5 8.48195 5.11358 8.93732 5.31545 9.3408L6.50731 8.14894C6.50247 8.09995 6.5 8.05026 6.5 8C6.5 7.17171 7.17171 6.5 8 6.5C8.05026 6.5 8.09995 6.50247 8.14894 6.50731L9.3408 5.31545ZM9.46198 7.66302L10.6083 6.51665C10.8576 6.9541 11 7.46039 11 8C11 9.65714 9.65714 11 8 11C7.46039 11 6.9541 10.8576 6.51665 10.6083L7.66302 9.46198C7.77134 9.48686 7.88414 9.5 8 9.5C8.82829 9.5 9.5 8.82829 9.5 8C9.5 7.88414 9.48686 7.77134 9.46198 7.66302Z", fill: "currentColor", fillRule: "evenodd" }))); };

package/dist/esm/providers/icons/Payment.js

@@ -1,15 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import React from 'react';
-import { Path, Svg } from 'react-native-svg';
-export var Payment = function (props) { return (React.createElement(Svg, __assign({ viewBox: "0 0 16 16" }, props),
-    React.createElement(Path, { d: "M2 1H11C12.1 1 13 1.9 13 3V10C13 11.1 12.1 12 11 12H2C0.9 12 0 11.1 0 10V3C0 1.9 0.9 1 2 1ZM11 3H2V4.5H11V3ZM2 6.5V10H11V6.5H2ZM2 15.19H11.25C13.87 15.19 16 13.06 16 10.44V4.5H14V10.44C14 11.96 12.76 13.19 11.25 13.19H2V15.19Z", fill: "currentColor", fillRule: "evenodd" }))); };

package/dist/esm/providers/icons/ShowPassword.js

@@ -1,15 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import React from 'react';
-import { Path, Svg } from 'react-native-svg';
-export var ShowPassword = function (props) { return (React.createElement(Svg, __assign({ viewBox: "0 0 16 16" }, props),
-    React.createElement(Path, { d: "M8 3.5C4.89086 3.5 2.07286 5.21886 0 8C2.07286 10.7811 4.89086 12.5 8 12.5C11.1091 12.5 13.9271 10.7811 16 8C13.9271 5.21886 11.1091 3.5 8 3.5ZM8 5C9.65714 5 11 6.34286 11 8C11 9.65714 9.65714 11 8 11C6.34286 11 5 9.65714 5 8C5 6.34286 6.34286 5 8 5ZM8 6.5C7.17171 6.5 6.5 7.17171 6.5 8C6.5 8.82829 7.17171 9.5 8 9.5C8.82829 9.5 9.5 8.82829 9.5 8C9.5 7.17171 8.82829 6.5 8 6.5Z", fill: "currentColor" }))); };

package/dist/esm/providers/icons/Usage.js

@@ -1,15 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import React from 'react';
-import { Path, Svg } from 'react-native-svg';
-export var Usage = function (props) { return (React.createElement(Svg, __assign({ viewBox: "0 0 16 16" }, props),
-    React.createElement(Path, { d: "M2 14V0H0V16H16V14H2ZM5 10H3V13H5V10ZM6.33 3H8.33V13H6.33V3ZM11.67 9H9.67V13H11.67V9ZM13 7H15V13H13V7Z", fill: "currentColor", fillRule: "evenodd" }))); };

package/dist/providers/icons/HidePassword.d.ts

@@ -1,2 +0,0 @@
-import { SvgProps } from 'react-native-svg';
-export declare const HidePassword: (props: SvgProps) => JSX.Element;

package/dist/providers/icons/HidePassword.js

@@ -1,22 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.HidePassword = void 0;
-var react_1 = __importDefault(require("react"));
-var react_native_svg_1 = require("react-native-svg");
-var HidePassword = function (props) { return (react_1.default.createElement(react_native_svg_1.Svg, __assign({ viewBox: "0 0 16 16" }, props),
-    react_1.default.createElement(react_native_svg_1.Path, { d: "M15.8125 1.3125L14.5781 0.078125L10.7093 3.947C9.8406 3.65492 8.93342 3.5 8 3.5C4.89086 3.5 2.07286 5.21886 0 8C0.996343 9.33679 2.16484 10.4282 3.45507 11.2012L0.0937505 14.5625L1.32813 15.7969L5.12836 11.9966C6.04613 12.3251 7.00825 12.5 8 12.5C11.1091 12.5 13.9271 10.7811 16 8C14.9683 6.61581 13.7521 5.49476 12.4072 4.71779L15.8125 1.3125ZM9.3408 5.31545C8.93732 5.11358 8.48195 5 8 5C6.34286 5 5 6.34286 5 8C5 8.48195 5.11358 8.93732 5.31545 9.3408L6.50731 8.14894C6.50247 8.09995 6.5 8.05026 6.5 8C6.5 7.17171 7.17171 6.5 8 6.5C8.05026 6.5 8.09995 6.50247 8.14894 6.50731L9.3408 5.31545ZM9.46198 7.66302L10.6083 6.51665C10.8576 6.9541 11 7.46039 11 8C11 9.65714 9.65714 11 8 11C7.46039 11 6.9541 10.8576 6.51665 10.6083L7.66302 9.46198C7.77134 9.48686 7.88414 9.5 8 9.5C8.82829 9.5 9.5 8.82829 9.5 8C9.5 7.88414 9.48686 7.77134 9.46198 7.66302Z", fill: "currentColor", fillRule: "evenodd" }))); };
-exports.HidePassword = HidePassword;

package/dist/providers/icons/Payment.d.ts

@@ -1,2 +0,0 @@
-import { SvgProps } from 'react-native-svg';
-export declare const Payment: (props: SvgProps) => JSX.Element;

package/dist/providers/icons/Payment.js

@@ -1,22 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Payment = void 0;
-var react_1 = __importDefault(require("react"));
-var react_native_svg_1 = require("react-native-svg");
-var Payment = function (props) { return (react_1.default.createElement(react_native_svg_1.Svg, __assign({ viewBox: "0 0 16 16" }, props),
-    react_1.default.createElement(react_native_svg_1.Path, { d: "M2 1H11C12.1 1 13 1.9 13 3V10C13 11.1 12.1 12 11 12H2C0.9 12 0 11.1 0 10V3C0 1.9 0.9 1 2 1ZM11 3H2V4.5H11V3ZM2 6.5V10H11V6.5H2ZM2 15.19H11.25C13.87 15.19 16 13.06 16 10.44V4.5H14V10.44C14 11.96 12.76 13.19 11.25 13.19H2V15.19Z", fill: "currentColor", fillRule: "evenodd" }))); };
-exports.Payment = Payment;

package/dist/providers/icons/ShowPassword.d.ts

@@ -1,2 +0,0 @@
-import { SvgProps } from 'react-native-svg';
-export declare const ShowPassword: (props: SvgProps) => JSX.Element;

package/dist/providers/icons/ShowPassword.js

@@ -1,22 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ShowPassword = void 0;
-var react_1 = __importDefault(require("react"));
-var react_native_svg_1 = require("react-native-svg");
-var ShowPassword = function (props) { return (react_1.default.createElement(react_native_svg_1.Svg, __assign({ viewBox: "0 0 16 16" }, props),
-    react_1.default.createElement(react_native_svg_1.Path, { d: "M8 3.5C4.89086 3.5 2.07286 5.21886 0 8C2.07286 10.7811 4.89086 12.5 8 12.5C11.1091 12.5 13.9271 10.7811 16 8C13.9271 5.21886 11.1091 3.5 8 3.5ZM8 5C9.65714 5 11 6.34286 11 8C11 9.65714 9.65714 11 8 11C6.34286 11 5 9.65714 5 8C5 6.34286 6.34286 5 8 5ZM8 6.5C7.17171 6.5 6.5 7.17171 6.5 8C6.5 8.82829 7.17171 9.5 8 9.5C8.82829 9.5 9.5 8.82829 9.5 8C9.5 7.17171 8.82829 6.5 8 6.5Z", fill: "currentColor" }))); };
-exports.ShowPassword = ShowPassword;

package/dist/providers/icons/Usage.d.ts

@@ -1,2 +0,0 @@
-import { SvgProps } from 'react-native-svg';
-export declare const Usage: (props: SvgProps) => JSX.Element;

package/dist/providers/icons/Usage.js

@@ -1,22 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Usage = void 0;
-var react_1 = __importDefault(require("react"));
-var react_native_svg_1 = require("react-native-svg");
-var Usage = function (props) { return (react_1.default.createElement(react_native_svg_1.Svg, __assign({ viewBox: "0 0 16 16" }, props),
-    react_1.default.createElement(react_native_svg_1.Path, { d: "M2 14V0H0V16H16V14H2ZM5 10H3V13H5V10ZM6.33 3H8.33V13H6.33V3ZM11.67 9H9.67V13H11.67V9ZM13 7H15V13H13V7Z", fill: "currentColor", fillRule: "evenodd" }))); };
-exports.Usage = Usage;