@ovotech/element-native 3.6.0-canary-8d21eaa-177 → 3.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. package/dist/components/ActionList/ActionList.d.ts +7 -3
  2. package/dist/components/ActionList/ActionList.js +18 -7
  3. package/dist/components/ActionList/index.d.ts +1 -1
  4. package/dist/components/ActionList/index.js +15 -4
  5. package/dist/components/ActionList/styled.js +1 -1
  6. package/dist/components/NavHeader/NavHeader.d.ts +2 -3
  7. package/dist/components/NavHeader/NavHeader.js +5 -32
  8. package/dist/components/NavHeader/NavHeader.styles.d.ts +3 -4
  9. package/dist/components/NavHeader/NavHeader.styles.js +11 -11
  10. package/dist/components/P/P.d.ts +242 -4
  11. package/dist/components/P/P.js +2 -18
  12. package/dist/components/SkeletonText/SkeletonText.js +1 -3
  13. package/dist/components/index.d.ts +0 -2
  14. package/dist/components/index.js +0 -2
  15. package/dist/esm/components/ActionList/ActionList.js +19 -8
  16. package/dist/esm/components/ActionList/index.js +1 -1
  17. package/dist/esm/components/ActionList/styled.js +1 -1
  18. package/dist/esm/components/NavHeader/NavHeader.js +6 -33
  19. package/dist/esm/components/NavHeader/NavHeader.styles.js +11 -11
  20. package/dist/esm/components/P/P.js +2 -18
  21. package/dist/esm/components/SkeletonText/SkeletonText.js +1 -3
  22. package/dist/esm/components/index.js +0 -2
  23. package/package.json +4 -9
  24. package/dist/components/Spinner/Spinner.d.ts +0 -8
  25. package/dist/components/Spinner/Spinner.js +0 -82
  26. package/dist/components/Spinner/index.d.ts +0 -1
  27. package/dist/components/Spinner/index.js +0 -5
  28. package/dist/components/Toast/Toast.d.ts +0 -13
  29. package/dist/components/Toast/Toast.js +0 -168
  30. package/dist/components/Toast/index.d.ts +0 -1
  31. package/dist/components/Toast/index.js +0 -6
  32. package/dist/esm/components/Spinner/Spinner.js +0 -55
  33. package/dist/esm/components/Spinner/index.js +0 -1
  34. package/dist/esm/components/Toast/Toast.js +0 -140
  35. package/dist/esm/components/Toast/index.js +0 -1
package/dist/components/ActionList/ActionList.d.ts CHANGED
@@ -2,12 +2,16 @@ import { ComponentProps, PropsWithChildren, Ref } from 'react';
2
2
  import { AccessibilityRole, View, ViewProps } from 'react-native';
3
3
  import { IconName } from '../../providers';
4
4
  import { StyledActionList } from './styled';
5
+ declare const ACTION_TYPES: {
6
+ [key: string]: IconName;
7
+ };
5
8
  declare type FullWidthOptions = 'always' | 'never' | 'small';
6
9
  declare type ActionListProps = ComponentProps<typeof StyledActionList>;
7
10
  declare type ActionProps = PropsWithChildren<ViewProps & {
8
11
  accessibilityRole?: AccessibilityRole;
9
- iconLeft?: IconName;
10
- iconRight?: IconName;
12
+ actionType?: keyof typeof ACTION_TYPES;
13
+ iconLeft?: IconName | 'off';
14
+ iconRight?: IconName | 'off';
11
15
  inverted?: boolean;
12
16
  inline?: boolean;
13
17
  onPress?: () => void;
@@ -17,5 +21,5 @@ declare type ActionProps = PropsWithChildren<ViewProps & {
17
21
  inList?: boolean;
18
22
  }>;
19
23
  declare const ActionList: ({ children, inverted, ...rest }: ActionListProps) => JSX.Element;
20
- declare const Action: import("react").ForwardRefExoticComponent<Pick<ActionProps, "onPress" | "inline" | keyof ViewProps | "fullWidth" | "iconLeft" | "iconRight" | "inverted" | "inList"> & import("react").RefAttributes<View>>;
24
+ declare const Action: ({ accessibilityRole, actionType, children, fullWidth, inverted, inline, onPress, testID, ...rest }: ActionProps) => JSX.Element;
21
25
  export { ActionList, Action };
package/dist/components/ActionList/ActionList.js CHANGED
@@ -28,6 +28,12 @@ var react_1 = require("react");
28
28
  var react_native_1 = require("react-native");
29
29
  var hooks_1 = require("../../hooks");
30
30
  var styled_1 = require("./styled");
31
+ var ACTION_TYPES = {
32
+ back: 'chevron-left-small',
33
+ // edit: 'arrow-right', /* TODO: add pencil + paper icon */
34
+ external: 'new-window',
35
+ link: 'chevron-right-small',
36
+ };
31
37
  var ActionList = function (_a) {
32
38
  var children = _a.children, inverted = _a.inverted, rest = __rest(_a, ["children", "inverted"]);
33
39
  var childCount = children.length;
@@ -43,16 +49,21 @@ var ActionList = function (_a) {
43
49
  }) })));
44
50
  };
45
51
  exports.ActionList = ActionList;
46
- var ActionWrapper = (0, react_1.forwardRef)(function (_a, ref) {
52
+ var ActionWrapper = function (_a) {
47
53
  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, _e = _a.inline, inline = _e === void 0 ? false : _e, inList = _a.inList, onPress = _a.onPress, testID = _a.testID, rest = __rest(_a, ["children", "accessibilityRole", "activeOpacity", "fullWidth", "hasBorder", "inverted", "inline", "inList", "onPress", "testID"]);
48
- return ((0, jsx_runtime_1.jsx)(styled_1.StyledActionWrapper, __assign({ ref: ref, hasBorder: hasBorder, inverted: inverted, testID: testID }, rest, { children: (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, __assign({ hitSlop: inline ? 24 : null, activeOpacity: activeOpacity, accessibilityRole: accessibilityRole, onPress: onPress }, { children: (0, jsx_runtime_1.jsx)(styled_1.StyledActionInner, __assign({ fullWidth: fullWidth, inList: inList, inline: inline }, { children: children })) })) })));
49
- });
50
- var Action = (0, react_1.forwardRef)(function (_a, ref) {
51
- var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'link' : _b, children = _a.children, _c = _a.fullWidth, fullWidth = _c === void 0 ? 'never' : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, _e = _a.inline, inline = _e === void 0 ? false : _e, onPress = _a.onPress, testID = _a.testID, iconLeft = _a.iconLeft, iconRight = _a.iconRight, rest = __rest(_a, ["accessibilityRole", "children", "fullWidth", "inverted", "inline", "onPress", "testID", "iconLeft", "iconRight"]);
54
+ 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({ hitSlop: inline ? 24 : null, activeOpacity: activeOpacity, accessibilityRole: accessibilityRole, onPress: onPress }, { children: (0, jsx_runtime_1.jsx)(styled_1.StyledActionInner, __assign({ fullWidth: fullWidth, inList: inList, inline: inline }, { children: children })) })) })));
55
+ };
56
+ var Action = function (_a) {
57
+ 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, _f = _a.inline, inline = _f === void 0 ? false : _f, onPress = _a.onPress, testID = _a.testID, rest = __rest(_a, ["accessibilityRole", "actionType", "children", "fullWidth", "inverted", "inline", "onPress", "testID"]);
52
58
  var smallAndUp = (0, hooks_1.useBreakpoint)().smallAndUp;
59
+ var isBackAction = actionType === 'back';
60
+ var updatedIconRight = null;
61
+ if (!isBackAction) {
62
+ updatedIconRight = ACTION_TYPES[actionType];
63
+ }
53
64
  if (fullWidth === 'small') {
54
65
  fullWidth = smallAndUp ? 'never' : 'always';
55
66
  }
56
- return ((0, jsx_runtime_1.jsxs)(ActionWrapper, __assign({ ref: ref, accessibilityRole: accessibilityRole, fullWidth: fullWidth, inverted: inverted, inline: inline, onPress: onPress, testID: testID }, rest, { children: [iconLeft ? ((0, jsx_runtime_1.jsx)(styled_1.StyledLeftIcon, { inverted: inverted, name: iconLeft, size: 16 })) : null, (0, jsx_runtime_1.jsx)(styled_1.StyledActionText, __assign({ smallAndUp: smallAndUp, inverted: inverted, inList: rest === null || rest === void 0 ? void 0 : rest.inList }, { children: children })), iconRight ? ((0, jsx_runtime_1.jsx)(styled_1.StyledRightIcon, { inverted: inverted, name: iconRight, marginTop: iconRight === 'chevron-right-small' ? 1 : 0, size: 16 })) : null] })));
57
- });
67
+ return ((0, jsx_runtime_1.jsxs)(ActionWrapper, __assign({ accessibilityRole: accessibilityRole, fullWidth: fullWidth, inverted: inverted, inline: inline, 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, inList: rest === null || rest === void 0 ? void 0 : rest.inList }, { children: children })), updatedIconRight ? ((0, jsx_runtime_1.jsx)(styled_1.StyledRightIcon, { inverted: inverted, name: updatedIconRight, marginTop: actionType === 'link' ? 1 : 0, size: 16 })) : null] })));
68
+ };
58
69
  exports.Action = Action;
package/dist/components/ActionList/index.d.ts CHANGED
@@ -1 +1 @@
1
- export { Action, ActionList } from './ActionList';
1
+ export * from './ActionList';
package/dist/components/ActionList/index.js CHANGED
@@ -1,6 +1,17 @@
1
1
  "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __exportStar = (this && this.__exportStar) || function(m, exports) {
14
+ for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
15
+ };
2
16
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.ActionList = exports.Action = void 0;
4
- var ActionList_1 = require("./ActionList");
5
- Object.defineProperty(exports, "Action", { enumerable: true, get: function () { return ActionList_1.Action; } });
6
- Object.defineProperty(exports, "ActionList", { enumerable: true, get: function () { return ActionList_1.ActionList; } });
17
+ __exportStar(require("./ActionList"), exports);
package/dist/components/ActionList/styled.js CHANGED
@@ -59,6 +59,6 @@ exports.StyledRightIcon = (0, styled_native_1.default)(Icon_1.Icon)(function (_a
59
59
  });
60
60
  exports.StyledLeftIcon = (0, styled_native_1.default)(Icon_1.Icon)(function (_a) {
61
61
  var _b = _a.theme, core = _b.core, semantic = _b.semantic, inverted = _a.inverted;
62
- return (0, styled_native_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n color: ", ";\n margin-right: ", ";\n margin-top: ", ";\n align-self: start;\n "], ["\n color: ", ";\n margin-right: ", ";\n margin-top: ", ";\n align-self: start;\n "])), inverted ? semantic.inverted.message.base : semantic.message.base, core.space[1], core.space[1]);
62
+ return (0, styled_native_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n color: ", ";\n margin-right: ", ";\n "], ["\n color: ", ";\n margin-right: ", ";\n "])), inverted ? semantic.inverted.message.base : semantic.message.base, core.space[1]);
63
63
  });
64
64
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
package/dist/components/NavHeader/NavHeader.d.ts CHANGED
@@ -4,7 +4,6 @@ export declare type NavHeaderProps = {
4
4
  scrolled: boolean;
5
5
  rightActionConfig?: RightActionConfig;
6
6
  canGoBack?: boolean;
7
- backButtonText?: string;
8
- onBackButtonPress?: () => void;
7
+ goBack?: () => void;
9
8
  };
10
- export declare const NavHeader: ({ title, scrolled, rightActionConfig, canGoBack, backButtonText, onBackButtonPress, }: NavHeaderProps) => JSX.Element;
9
+ export declare const NavHeader: ({ title, scrolled, rightActionConfig, canGoBack, goBack, }: NavHeaderProps) => JSX.Element;
package/dist/components/NavHeader/NavHeader.js CHANGED
@@ -37,48 +37,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
37
37
  exports.NavHeader = void 0;
38
38
  var jsx_runtime_1 = require("react/jsx-runtime");
39
39
  var element_core_1 = require("@ovotech/element-core");
40
- var react_1 = require("react");
41
40
  var react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
42
41
  var ActionList_1 = require("../ActionList");
43
42
  var IconButton_1 = require("./IconButton");
44
43
  var NavHeader_styles_1 = require("./NavHeader.styles");
45
- var FADE_ANIMATION_DURATION = 200;
46
- var ONLY_TITLE_CONTAINER_HEIGHT = 108;
47
- var TITLE_AND_BACK_CONTAINER_HEIGHT = 92;
44
+ var FADE_ANIMATION_DURATION = 250; // ms
48
45
  var NavHeader = function (_a) {
49
- var title = _a.title, scrolled = _a.scrolled, rightActionConfig = _a.rightActionConfig, canGoBack = _a.canGoBack, _b = _a.backButtonText, backButtonText = _b === void 0 ? 'Back' : _b, onBackButtonPress = _a.onBackButtonPress;
50
- var hasRightAction = !!rightActionConfig;
51
- var initialContainerHeight = canGoBack
52
- ? TITLE_AND_BACK_CONTAINER_HEIGHT
53
- : ONLY_TITLE_CONTAINER_HEIGHT;
54
- var animatedContainerHeight = (0, react_native_reanimated_1.useSharedValue)(initialContainerHeight);
55
- var animatedHeightStyle = (0, react_native_reanimated_1.useAnimatedStyle)(function () {
56
- return {
57
- height: animatedContainerHeight.value,
58
- };
59
- });
60
- (0, react_1.useEffect)(function () {
61
- if (scrolled) {
62
- animatedContainerHeight.value = (0, react_native_reanimated_1.withTiming)(56, {
63
- duration: FADE_ANIMATION_DURATION,
64
- easing: react_native_reanimated_1.Easing.linear,
65
- });
66
- }
67
- else {
68
- animatedContainerHeight.value = (0, react_native_reanimated_1.withTiming)(initialContainerHeight, {
69
- duration: FADE_ANIMATION_DURATION,
70
- easing: react_native_reanimated_1.Easing.linear,
71
- });
72
- }
73
- }, [scrolled]);
74
- return ((0, jsx_runtime_1.jsxs)(NavHeader_styles_1.NavContainer, __assign({ collapsed: scrolled, style: [animatedHeightStyle] }, { children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, __assign({ style: {
46
+ var title = _a.title, scrolled = _a.scrolled, rightActionConfig = _a.rightActionConfig, canGoBack = _a.canGoBack, goBack = _a.goBack;
47
+ return ((0, jsx_runtime_1.jsxs)(NavHeader_styles_1.NavContainer, { children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, __assign({ style: {
75
48
  width: scrolled ? '33.3%' : '100%',
76
49
  // when back button is off we have small margin top for title, to write less code we can just set height
77
50
  height: !canGoBack ? parseInt(element_core_1.theme.core.space[10]) : undefined,
78
- } }, { children: canGoBack && ((0, jsx_runtime_1.jsx)(ActionList_1.Action, __assign({ iconLeft: "chevron-left-small", inline: true, onPress: onBackButtonPress }, { children: backButtonText }))) })), scrolled ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(NavHeader_styles_1.CollapsedTitleWrapper, { children: (0, jsx_runtime_1.jsx)(NavHeader_styles_1.CollapsedTitle, __assign({ numberOfLines: 1, ellipsizeMode: "tail", entering: react_native_reanimated_1.FadeInDown.delay(FADE_ANIMATION_DURATION), exiting: react_native_reanimated_1.FadeOutDown.duration(FADE_ANIMATION_DURATION) }, { children: title })) }), (0, jsx_runtime_1.jsx)(NavHeader_styles_1.IconButtonWrapper, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { rightActionConfig: rightActionConfig, size: "small", animation: react_native_reanimated_1.FadeInDown.delay(FADE_ANIMATION_DURATION) }) })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(NavHeader_styles_1.ExpandedTitle
51
+ } }, { children: canGoBack && ((0, jsx_runtime_1.jsx)(ActionList_1.Action, __assign({ actionType: "back", onPress: goBack }, { children: "Back" }))) })), scrolled ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(NavHeader_styles_1.CollapsedTitleWrapper, { children: (0, jsx_runtime_1.jsx)(NavHeader_styles_1.CollapsedTitle, __assign({ numberOfLines: 1, ellipsizeMode: "tail", entering: react_native_reanimated_1.FadeInDown.delay(FADE_ANIMATION_DURATION), exiting: react_native_reanimated_1.FadeOutDown.duration(FADE_ANIMATION_DURATION) }, { children: title })) }), (0, jsx_runtime_1.jsx)(NavHeader_styles_1.IconButtonWrapper, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { rightActionConfig: rightActionConfig, size: "small", animation: react_native_reanimated_1.FadeInDown.delay(FADE_ANIMATION_DURATION) }) })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(NavHeader_styles_1.ExpandedTitle
79
52
  // if we don't have right action leave more space for the title text in expanded state
80
53
  , __assign({
81
54
  // if we don't have right action leave more space for the title text in expanded state
82
- fullWidth: !scrolled && !hasRightAction, numberOfLines: 1, ellipsizeMode: "tail", hasBackButton: canGoBack, entering: react_native_reanimated_1.FadeInUp.delay(FADE_ANIMATION_DURATION), exiting: react_native_reanimated_1.FadeOutUp.duration(FADE_ANIMATION_DURATION) }, { children: title })), (0, jsx_runtime_1.jsx)(NavHeader_styles_1.IconButtonWrapper, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { rightActionConfig: rightActionConfig, size: "large", animation: react_native_reanimated_1.FadeInUp.delay(FADE_ANIMATION_DURATION) }) })] }))] })));
55
+ fullWidth: !scrolled && !rightActionConfig, numberOfLines: 1, ellipsizeMode: "tail", hasBackButton: canGoBack, entering: react_native_reanimated_1.FadeInUp.delay(FADE_ANIMATION_DURATION), exiting: react_native_reanimated_1.FadeOutUp.duration(FADE_ANIMATION_DURATION) }, { children: title })), (0, jsx_runtime_1.jsx)(NavHeader_styles_1.IconButtonWrapper, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { rightActionConfig: rightActionConfig, size: "large", animation: react_native_reanimated_1.FadeInUp.delay(FADE_ANIMATION_DURATION) }) })] }))] }));
83
56
  };
84
57
  exports.NavHeader = NavHeader;
package/dist/components/NavHeader/NavHeader.styles.d.ts CHANGED
@@ -1,5 +1,6 @@
1
+ import { View } from 'react-native';
1
2
  import Animated from 'react-native-reanimated';
2
- export declare const NavContainer: import("styled-components").StyledComponent<typeof Animated.View, {
3
+ export declare const NavContainer: import("styled-components").StyledComponent<typeof View, {
3
4
  core: {
4
5
  radius: Record<"small" | "medium" | "large" | "max", string>;
5
6
  borderWidth: Record<"small" | "medium" | "large", string>;
@@ -230,9 +231,7 @@ export declare const NavContainer: import("styled-components").StyledComponent<t
230
231
  };
231
232
  };
232
233
  };
233
- }, {
234
- collapsed: boolean;
235
- }, never>;
234
+ }, {}, never>;
236
235
  export declare const ExpandedTitle: import("styled-components").StyledComponent<typeof Animated.Text, {
237
236
  core: {
238
237
  radius: Record<"small" | "medium" | "large" | "max", string>;
package/dist/components/NavHeader/NavHeader.styles.js CHANGED
@@ -31,38 +31,38 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
31
31
  };
32
32
  Object.defineProperty(exports, "__esModule", { value: true });
33
33
  exports.StyledIconButtonL = exports.StyledIconButtonS = exports.IconButtonWrapper = exports.CollapsedTitle = exports.CollapsedTitleWrapper = exports.ExpandedTitle = exports.NavContainer = void 0;
34
+ var react_native_1 = require("react-native");
34
35
  var react_native_reanimated_1 = __importDefault(require("react-native-reanimated"));
35
36
  var styled_native_1 = __importStar(require("../../styled.native"));
36
- exports.NavContainer = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(function (_a) {
37
- var _b = _a.theme, semantic = _b.semantic, core = _b.core, collapsed = _a.collapsed;
38
- return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: 100%;\n background-color: ", ";\n padding: ", ";\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n flex-wrap: wrap;\n ", "\n "], ["\n width: 100%;\n background-color: ", ";\n padding: ", ";\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n flex-wrap: wrap;\n ", "\n "])), semantic.surface.base, core.space[2], collapsed
39
- ? (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-bottom-width: 1px;\n border-bottom-style: solid;\n border-bottom-color: ", ";\n "], ["\n border-bottom-width: 1px;\n border-bottom-style: solid;\n border-bottom-color: ", ";\n "])), semantic.border.differentiated) : '');
37
+ exports.NavContainer = (0, styled_native_1.default)(react_native_1.View)(function (_a) {
38
+ var _b = _a.theme, semantic = _b.semantic, core = _b.core;
39
+ return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n background-color: ", ";\n padding: ", ";\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n flex-wrap: wrap;\n "], ["\n width: 100%;\n background-color: ", ";\n padding: ", ";\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n flex-wrap: wrap;\n "])), semantic.surface.base, core.space[2]);
40
40
  });
41
41
  exports.ExpandedTitle = (0, styled_native_1.default)(react_native_reanimated_1.default.Text)(function (_a) {
42
42
  var _b = _a.theme, core = _b.core, semantic = _b.semantic, hasBackButton = _a.hasBackButton, fullWidth = _a.fullWidth;
43
- return (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: ", ";\n font-family: ", ";\n font-size: ", ";\n line-height: ", ";\n height: ", ";\n color: ", ";\n "], ["\n width: ", ";\n font-family: ", ";\n font-size: ", ";\n line-height: ", ";\n height: ", ";\n color: ", ";\n "])), fullWidth ? '100%' : '65%', core.fontFamily.heading.native, core.fontSize.heading1[hasBackButton ? 'small' : 'large'], hasBackButton
43
+ return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: ", ";\n font-family: ", ";\n font-size: ", ";\n line-height: ", ";\n height: ", ";\n color: ", ";\n "], ["\n width: ", ";\n font-family: ", ";\n font-size: ", ";\n line-height: ", ";\n height: ", ";\n color: ", ";\n "])), fullWidth ? '100%' : '65%', core.fontFamily.heading.native, core.fontSize.heading1[hasBackButton ? 'small' : 'large'], hasBackButton
44
44
  ? core.lineHeight.heading1.small
45
45
  : core.space[13], hasBackButton ? core.lineHeight.heading1.small : core.space[13], semantic.message.branded);
46
46
  });
47
- exports.CollapsedTitleWrapper = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: center;\n justify-content: center;\n width: 33.3%;\n height: ", ";\n"], ["\n align-items: center;\n justify-content: center;\n width: 33.3%;\n height: ", ";\n"])), function (_a) {
47
+ exports.CollapsedTitleWrapper = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-items: center;\n justify-content: center;\n width: 33.3%;\n height: ", ";\n"], ["\n align-items: center;\n justify-content: center;\n width: 33.3%;\n height: ", ";\n"])), function (_a) {
48
48
  var core = _a.theme.core;
49
49
  return core.lineHeight.heading4.small;
50
50
  });
51
51
  exports.CollapsedTitle = (0, styled_native_1.default)(react_native_reanimated_1.default.Text)(function (_a) {
52
52
  var _b = _a.theme, core = _b.core, semantic = _b.semantic;
53
- return (0, styled_native_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n font-family: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n "], ["\n font-family: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n "])), core.fontFamily.heading.native, core.fontSize.heading4.small, core.lineHeight.heading4.small, semantic.message.branded);
53
+ return (0, styled_native_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n font-family: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n "], ["\n font-family: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n "])), core.fontFamily.heading.native, core.fontSize.heading4.small, core.lineHeight.heading4.small, semantic.message.branded);
54
54
  });
55
- exports.IconButtonWrapper = styled_native_1.default.View(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n width: 33.3%;\n flex-direction: row;\n justify-content: flex-end;\n"], ["\n width: 33.3%;\n flex-direction: row;\n justify-content: flex-end;\n"])));
55
+ exports.IconButtonWrapper = styled_native_1.default.View(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n width: 33.3%;\n flex-direction: row;\n justify-content: flex-end;\n"], ["\n width: 33.3%;\n flex-direction: row;\n justify-content: flex-end;\n"])));
56
56
  var iconButtonSharedStyles = (0, styled_native_1.css)(function (_a) {
57
57
  var semantic = _a.theme.semantic;
58
58
  return "\n border-radius: 100px;\n background-color: ".concat(semantic.inverted.surface, ";\n align-items: center;\n justify-content: center;\n");
59
59
  });
60
- exports.StyledIconButtonS = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n width: 28px;\n height: 28px;\n opacity: ", ";\n ", ";\n"], ["\n width: 28px;\n height: 28px;\n opacity: ", ";\n ", ";\n"])), function (_a) {
60
+ exports.StyledIconButtonS = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n width: 28px;\n height: 28px;\n opacity: ", ";\n ", ";\n"], ["\n width: 28px;\n height: 28px;\n opacity: ", ";\n ", ";\n"])), function (_a) {
61
61
  var $pressed = _a.$pressed;
62
62
  return ($pressed ? 0.8 : 1);
63
63
  }, iconButtonSharedStyles);
64
- exports.StyledIconButtonL = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n width: 36px;\n height: 36px;\n opacity: ", ";\n ", ";\n"], ["\n width: 36px;\n height: 36px;\n opacity: ", ";\n ", ";\n"])), function (_a) {
64
+ exports.StyledIconButtonL = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n width: 36px;\n height: 36px;\n opacity: ", ";\n ", ";\n"], ["\n width: 36px;\n height: 36px;\n opacity: ", ";\n ", ";\n"])), function (_a) {
65
65
  var $pressed = _a.$pressed;
66
66
  return ($pressed ? 0.8 : 1);
67
67
  }, iconButtonSharedStyles);
68
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
68
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
package/dist/components/P/P.d.ts CHANGED
@@ -1,5 +1,243 @@
1
1
  /// <reference types="react" />
2
- import { TextProps } from 'react-native';
3
- export declare const P: import("react").ForwardRefExoticComponent<TextProps & {
4
- children?: import("react").ReactNode;
5
- } & import("react").RefAttributes<unknown>>;
2
+ import { Text } from 'react-native';
3
+ export declare const P: import("react").ForwardRefExoticComponent<Pick<Omit<{
4
+ [x: string]: any;
5
+ [x: number]: any;
6
+ [x: symbol]: any;
7
+ } & {
8
+ theme?: {
9
+ core: {
10
+ radius: Record<"small" | "medium" | "large" | "max", string>;
11
+ borderWidth: Record<"small" | "medium" | "large", string>;
12
+ breakpoint: Record<"small" | "medium" | "large", string | number>;
13
+ mediaQuery: Record<"small" | "medium" | "large", string>;
14
+ space: Record<0 | 2 | 1 | 3 | 4 | 5 | 10 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
15
+ transition: Record<"medium" | "slow" | "fast", string>;
16
+ opacity: Record<"solid" | "transparent" | "translucent", string | number>;
17
+ color: Record<"neutral" | "red" | "orange" | "yellow" | "green" | "blue", {
18
+ lightest: string;
19
+ lighter: string;
20
+ light: string;
21
+ base: string;
22
+ dark: string;
23
+ darker: string;
24
+ darkest: string;
25
+ }> & {
26
+ brand: Record<string, string>;
27
+ };
28
+ fontFamily: Record<"body" | "mono" | "heading" | "bodyBold", {
29
+ native: string;
30
+ web: string;
31
+ }>;
32
+ fontWeight: Record<"bold" | "book" | "black", string | number>;
33
+ fontSize: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
34
+ small: string | number;
35
+ large: string | number;
36
+ }>;
37
+ lineHeight: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
38
+ small: string | number;
39
+ large: string | number;
40
+ }>;
41
+ letterSpacing: Record<"base" | "compressed" | "extraCompressed", number>;
42
+ };
43
+ semantic: {
44
+ surface: Record<"base" | "cutout" | "elevated", string>;
45
+ message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
46
+ border: Record<"graphic" | "differentiated" | "functional", string>;
47
+ focus: Record<"surface" | "outline" | "hover", string>;
48
+ inverted: Record<"surface" | "border", string> & {
49
+ message: Record<"base" | "link" | "secondary" | "branded", string>;
50
+ };
51
+ success: {
52
+ border: string;
53
+ surface: string;
54
+ surfaceEmphasis: string;
55
+ message: string;
56
+ messageOnEmphasis: string;
57
+ };
58
+ warning: {
59
+ border: string;
60
+ surface: string;
61
+ surfaceEmphasis: string;
62
+ message: string;
63
+ messageOnEmphasis: string;
64
+ };
65
+ error: {
66
+ border: string;
67
+ surface: string;
68
+ surfaceEmphasis: string;
69
+ message: string;
70
+ messageOnEmphasis: string;
71
+ };
72
+ info: {
73
+ border: string;
74
+ surface: string;
75
+ surfaceEmphasis: string;
76
+ message: string;
77
+ messageOnEmphasis: string;
78
+ };
79
+ data: Record<"branded" | "gas" | "electric", Record<2 | 1 | 3 | 4, string>>;
80
+ };
81
+ component: {
82
+ heading1: {
83
+ fontFamily: string;
84
+ fontWeight: string | number;
85
+ fontSize: {
86
+ small: string | number;
87
+ large: string | number;
88
+ };
89
+ lineHeight: {
90
+ small: string | number;
91
+ large: string | number;
92
+ };
93
+ };
94
+ heading2: {
95
+ fontFamily: string;
96
+ fontWeight: string | number;
97
+ fontSize: {
98
+ small: string | number;
99
+ large: string | number;
100
+ };
101
+ lineHeight: {
102
+ small: string | number;
103
+ large: string | number;
104
+ };
105
+ };
106
+ heading3: {
107
+ fontFamily: string;
108
+ fontWeight: string | number;
109
+ fontSize: {
110
+ small: string | number;
111
+ large: string | number;
112
+ };
113
+ lineHeight: {
114
+ small: string | number;
115
+ large: string | number;
116
+ };
117
+ };
118
+ heading4: {
119
+ fontFamily: string;
120
+ fontWeight: string | number;
121
+ fontSize: {
122
+ small: string | number;
123
+ large: string | number;
124
+ };
125
+ lineHeight: {
126
+ small: string | number;
127
+ large: string | number;
128
+ };
129
+ };
130
+ lead: {
131
+ fontFamily: string;
132
+ fontWeight: string | number;
133
+ fontSize: {
134
+ small: string | number;
135
+ large: string | number;
136
+ };
137
+ lineHeight: {
138
+ small: string | number;
139
+ large: string | number;
140
+ };
141
+ };
142
+ body: {
143
+ fontFamily: string;
144
+ fontWeight: string | number;
145
+ fontSize: {
146
+ small: string | number;
147
+ large: string | number;
148
+ };
149
+ lineHeight: {
150
+ small: string | number;
151
+ large: string | number;
152
+ };
153
+ };
154
+ small: {
155
+ fontFamily: string;
156
+ fontWeight: string | number;
157
+ fontSize: {
158
+ small: string | number;
159
+ large: string | number;
160
+ };
161
+ lineHeight: {
162
+ small: string | number;
163
+ large: string | number;
164
+ };
165
+ };
166
+ label: {
167
+ fontFamily: string;
168
+ fontWeight: string | number;
169
+ fontSize: {
170
+ small: string | number;
171
+ large: string | number;
172
+ };
173
+ lineHeight: {
174
+ small: string | number;
175
+ large: string | number;
176
+ };
177
+ };
178
+ cta: {
179
+ primary: {
180
+ message: string;
181
+ surface: string;
182
+ messageHover: string;
183
+ surfaceHover: string;
184
+ messageFocused: string;
185
+ surfaceFocused: string;
186
+ outlineFocused: string;
187
+ backgroundFocused: string;
188
+ };
189
+ secondary: {
190
+ message: string;
191
+ surface: string;
192
+ messageHover: string;
193
+ surfaceHover: string;
194
+ messageFocused: string;
195
+ surfaceFocused: string;
196
+ outlineFocused: string;
197
+ backgroundFocused: string;
198
+ };
199
+ destructive: {
200
+ message: string;
201
+ surface: string;
202
+ messageHover: string;
203
+ surfaceHover: string;
204
+ messageFocused: string;
205
+ surfaceFocused: string;
206
+ outlineFocused: string;
207
+ backgroundFocused: string;
208
+ };
209
+ };
210
+ badge: {
211
+ variants: {
212
+ neutral: {
213
+ foreground: string;
214
+ background: string;
215
+ };
216
+ red: {
217
+ foreground: string;
218
+ background: string;
219
+ };
220
+ orange: {
221
+ foreground: string;
222
+ background: string;
223
+ };
224
+ yellow: {
225
+ foreground: string;
226
+ background: string;
227
+ };
228
+ green: {
229
+ foreground: string;
230
+ background: string;
231
+ };
232
+ blue: {
233
+ foreground: string;
234
+ background: string;
235
+ };
236
+ };
237
+ };
238
+ };
239
+ } | undefined;
240
+ } & {
241
+ as?: string | import("react").ComponentType<any> | undefined;
242
+ forwardedAs?: string | import("react").ComponentType<any> | undefined;
243
+ }, import("../../hooks").BreakpointNames>, string | number | symbol> & import("react").RefAttributes<Text>>;
package/dist/components/P/P.js CHANGED
@@ -3,17 +3,6 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
3
3
  if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
4
  return cooked;
5
5
  };
6
- var __assign = (this && this.__assign) || function () {
7
- __assign = Object.assign || function(t) {
8
- for (var s, i = 1, n = arguments.length; i < n; i++) {
9
- s = arguments[i];
10
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
11
- t[p] = s[p];
12
- }
13
- return t;
14
- };
15
- return __assign.apply(this, arguments);
16
- };
17
6
  var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
18
7
  if (k2 === undefined) k2 = k;
19
8
  var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -39,16 +28,11 @@ var __importStar = (this && this.__importStar) || function (mod) {
39
28
  };
40
29
  Object.defineProperty(exports, "__esModule", { value: true });
41
30
  exports.P = void 0;
42
- var jsx_runtime_1 = require("react/jsx-runtime");
43
- var react_1 = require("react");
44
- var hooks_1 = require("../../hooks");
45
31
  var styled_native_1 = __importStar(require("../../styled.native"));
32
+ var utils_1 = require("../../utils");
46
33
  var StyledP = styled_native_1.default.Text(function (_a) {
47
34
  var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
48
35
  return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n font-family: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n "], ["\n font-family: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n "])), core.fontFamily.body.native, core.fontSize.body[smallAndUp ? 'large' : 'small'], core.lineHeight.body[smallAndUp ? 'large' : 'small'], semantic.message.base);
49
36
  });
50
- exports.P = (0, react_1.forwardRef)(function (props, ref) {
51
- var breakpoints = (0, hooks_1.useBreakpoint)();
52
- return (0, jsx_runtime_1.jsx)(StyledP, __assign({}, props, breakpoints, { ref: ref }));
53
- });
37
+ exports.P = (0, utils_1.styledComponentWithBreakpoints)(StyledP);
54
38
  var templateObject_1;
package/dist/components/SkeletonText/SkeletonText.js CHANGED
@@ -42,8 +42,6 @@ var SkeletonText = function (_a) {
42
42
  for (var i = 1; i <= lines; i++) {
43
43
  generatedLines.push((0, jsx_runtime_1.jsx)(StyledSkeletonText, { short: i === lines, aboveSmallBreakpoint: smallAndUp }, "line-".concat(i)));
44
44
  }
45
- return (
46
- // @ts-ignore styled components stuff
47
- (0, jsx_runtime_1.jsx)(P_1.P, __assign({ as: SkeletonAnimation_1.SkeletonAnimation }, rest, { children: generatedLines })));
45
+ return ((0, jsx_runtime_1.jsx)(P_1.P, __assign({ as: SkeletonAnimation_1.SkeletonAnimation }, rest, { children: generatedLines })));
48
46
  };
49
47
  exports.SkeletonText = SkeletonText;
package/dist/components/index.d.ts CHANGED
@@ -46,7 +46,6 @@ export * from './SkeletonCTA';
46
46
  export * from './SkeletonHeading';
47
47
  export * from './SkeletonText';
48
48
  export * from './Small';
49
- export * from './Spinner';
50
49
  export * from './Stack';
51
50
  export * from './Strong';
52
51
  export * from './Tabs';
@@ -57,4 +56,3 @@ export * from './TextGroup';
57
56
  export * from './TextInput';
58
57
  export * from './TextLink';
59
58
  export * from './Toggle';
60
- export * from './Toast';
package/dist/components/index.js CHANGED
@@ -62,7 +62,6 @@ __exportStar(require("./SkeletonCTA"), exports);
62
62
  __exportStar(require("./SkeletonHeading"), exports);
63
63
  __exportStar(require("./SkeletonText"), exports);
64
64
  __exportStar(require("./Small"), exports);
65
- __exportStar(require("./Spinner"), exports);
66
65
  __exportStar(require("./Stack"), exports);
67
66
  __exportStar(require("./Strong"), exports);
68
67
  __exportStar(require("./Tabs"), exports);
@@ -73,4 +72,3 @@ __exportStar(require("./TextGroup"), exports);
73
72
  __exportStar(require("./TextInput"), exports);
74
73
  __exportStar(require("./TextLink"), exports);
75
74
  __exportStar(require("./Toggle"), exports);
76
- __exportStar(require("./Toast"), exports);
package/dist/esm/components/ActionList/ActionList.js CHANGED
@@ -21,10 +21,16 @@ var __rest = (this && this.__rest) || function (s, e) {
21
21
  return t;
22
22
  };
23
23
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
24
- import { Children, cloneElement, forwardRef, } from 'react';
24
+ import { Children, cloneElement, } from 'react';
25
25
  import { TouchableOpacity, } from 'react-native';
26
26
  import { useBreakpoint } from '../../hooks';
27
27
  import { StyledActionInner, StyledActionList, StyledActionText, StyledActionWrapper, StyledLeftIcon, StyledRightIcon, } from './styled';
28
+ var ACTION_TYPES = {
29
+ back: 'chevron-left-small',
30
+ // edit: 'arrow-right', /* TODO: add pencil + paper icon */
31
+ external: 'new-window',
32
+ link: 'chevron-right-small',
33
+ };
28
34
  var ActionList = function (_a) {
29
35
  var children = _a.children, inverted = _a.inverted, rest = __rest(_a, ["children", "inverted"]);
30
36
  var childCount = children.length;
@@ -39,16 +45,21 @@ var ActionList = function (_a) {
39
45
  });
40
46
  }) })));
41
47
  };
42
- var ActionWrapper = forwardRef(function (_a, ref) {
48
+ var ActionWrapper = function (_a) {
43
49
  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, _e = _a.inline, inline = _e === void 0 ? false : _e, inList = _a.inList, onPress = _a.onPress, testID = _a.testID, rest = __rest(_a, ["children", "accessibilityRole", "activeOpacity", "fullWidth", "hasBorder", "inverted", "inline", "inList", "onPress", "testID"]);
44
- return (_jsx(StyledActionWrapper, __assign({ ref: ref, hasBorder: hasBorder, inverted: inverted, testID: testID }, rest, { children: _jsx(TouchableOpacity, __assign({ hitSlop: inline ? 24 : null, activeOpacity: activeOpacity, accessibilityRole: accessibilityRole, onPress: onPress }, { children: _jsx(StyledActionInner, __assign({ fullWidth: fullWidth, inList: inList, inline: inline }, { children: children })) })) })));
45
- });
46
- var Action = forwardRef(function (_a, ref) {
47
- var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'link' : _b, children = _a.children, _c = _a.fullWidth, fullWidth = _c === void 0 ? 'never' : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, _e = _a.inline, inline = _e === void 0 ? false : _e, onPress = _a.onPress, testID = _a.testID, iconLeft = _a.iconLeft, iconRight = _a.iconRight, rest = __rest(_a, ["accessibilityRole", "children", "fullWidth", "inverted", "inline", "onPress", "testID", "iconLeft", "iconRight"]);
50
+ return (_jsx(StyledActionWrapper, __assign({ hasBorder: hasBorder, inverted: inverted, testID: testID }, rest, { children: _jsx(TouchableOpacity, __assign({ hitSlop: inline ? 24 : null, activeOpacity: activeOpacity, accessibilityRole: accessibilityRole, onPress: onPress }, { children: _jsx(StyledActionInner, __assign({ fullWidth: fullWidth, inList: inList, inline: inline }, { children: children })) })) })));
51
+ };
52
+ var Action = function (_a) {
53
+ 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, _f = _a.inline, inline = _f === void 0 ? false : _f, onPress = _a.onPress, testID = _a.testID, rest = __rest(_a, ["accessibilityRole", "actionType", "children", "fullWidth", "inverted", "inline", "onPress", "testID"]);
48
54
  var smallAndUp = useBreakpoint().smallAndUp;
55
+ var isBackAction = actionType === 'back';
56
+ var updatedIconRight = null;
57
+ if (!isBackAction) {
58
+ updatedIconRight = ACTION_TYPES[actionType];
59
+ }
49
60
  if (fullWidth === 'small') {
50
61
  fullWidth = smallAndUp ? 'never' : 'always';
51
62
  }
52
- return (_jsxs(ActionWrapper, __assign({ ref: ref, accessibilityRole: accessibilityRole, fullWidth: fullWidth, inverted: inverted, inline: inline, onPress: onPress, testID: testID }, rest, { children: [iconLeft ? (_jsx(StyledLeftIcon, { inverted: inverted, name: iconLeft, size: 16 })) : null, _jsx(StyledActionText, __assign({ smallAndUp: smallAndUp, inverted: inverted, inList: rest === null || rest === void 0 ? void 0 : rest.inList }, { children: children })), iconRight ? (_jsx(StyledRightIcon, { inverted: inverted, name: iconRight, marginTop: iconRight === 'chevron-right-small' ? 1 : 0, size: 16 })) : null] })));
53
- });
63
+ return (_jsxs(ActionWrapper, __assign({ accessibilityRole: accessibilityRole, fullWidth: fullWidth, inverted: inverted, inline: inline, 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, inList: rest === null || rest === void 0 ? void 0 : rest.inList }, { children: children })), updatedIconRight ? (_jsx(StyledRightIcon, { inverted: inverted, name: updatedIconRight, marginTop: actionType === 'link' ? 1 : 0, size: 16 })) : null] })));
64
+ };
54
65
  export { ActionList, Action };