@ovotech/element-native 3.4.1 → 3.5.0-canary-8ac6eb7-155

package/dist/components/Accordion/styles.d.ts

@@ -203,6 +203,10 @@ export declare const StyledAccordion: import("styled-components").StyledComponen
         };
         badge: {
             variants: {
+                neutral: {
+                    foreground: string;
+                    background: string;
+                };
                 red: {
                     foreground: string;
                     background: string;
@@ -435,6 +439,10 @@ export declare const StyledAccordionHeader: import("styled-components").StyledCo
         };
         badge: {
             variants: {
+                neutral: {
+                    foreground: string;
+                    background: string;
+                };
                 red: {
                     foreground: string;
                     background: string;
@@ -663,6 +671,10 @@ export declare const StyledContainer: import("styled-components").StyledComponen
         };
         badge: {
             variants: {
+                neutral: {
+                    foreground: string;
+                    background: string;
+                };
                 red: {
                     foreground: string;
                     background: string;

package/dist/components/ActionCard/ActionCard.js

@@ -73,7 +73,7 @@ var ActionCard = function (_a) {
                                             paddingRight: !image && !title && onPressCloseButton
                                                 ? parseInt(core.space[6])
                                                 : 0,
-                                        } }, { children: (0, jsx_runtime_1.jsx)(StyledP, __assign({ inverted: inverted }, { children: body })) }))) : (body), buttonTitle && onPressActionButton && !onPressIndicator ? (!ctaVariant ? ((0, jsx_runtime_1.jsx)(__1.Action, __assign({ inverted: inverted, onPress: onPressActionButton, testID: "".concat(testID, "-button") }, { children: buttonTitle }))) : ((0, jsx_runtime_1.jsx)(__1.Margin, __assign({ top: 4 }, { children: (0, jsx_runtime_1.jsx)(__1.CTAButton, __assign({ onPress: onPressActionButton, testID: "".concat(testID, "-button"), variant: ctaVariant }, { children: buttonTitle })) })))) : null] })] })) })), image ? ((0, jsx_runtime_1.jsx)(masked_view_1.default, __assign({ style: {
+                                        } }, { children: (0, jsx_runtime_1.jsx)(StyledP, __assign({ inverted: inverted }, { children: body })) }))) : (body), buttonTitle && onPressActionButton && !onPressIndicator ? (!ctaVariant ? ((0, jsx_runtime_1.jsx)(__1.Margin, __assign({ top: 2 }, { children: (0, jsx_runtime_1.jsx)(__1.Action, __assign({ inverted: inverted, inline: true, onPress: onPressActionButton, testID: "".concat(testID, "-button") }, { children: buttonTitle })) }))) : ((0, jsx_runtime_1.jsx)(__1.Margin, __assign({ top: 4 }, { children: (0, jsx_runtime_1.jsx)(__1.CTAButton, __assign({ onPress: onPressActionButton, testID: "".concat(testID, "-button"), variant: ctaVariant }, { children: buttonTitle })) })))) : null] })] })) })), image ? ((0, jsx_runtime_1.jsx)(masked_view_1.default, __assign({ style: {
                         flex: 1,
                         flexDirection: 'row',
                         height: '100%',

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

@@ -13,6 +13,7 @@ declare type ActionProps = PropsWithChildren<ViewProps & {
     iconLeft?: IconName | 'off';
     iconRight?: IconName | 'off';
     inverted?: boolean;
+    inline?: boolean;
     onPress?: () => void;
     fullWidth?: FullWidthOptions;
     ref?: Ref<View>;
@@ -20,5 +21,5 @@ declare type ActionProps = PropsWithChildren<ViewProps & {
     inList?: boolean;
 }>;
 declare const ActionList: ({ children, inverted, ...rest }: ActionListProps) => JSX.Element;
-declare const Action: ({ accessibilityRole, actionType, children, fullWidth, inverted, onPress, testID, ...rest }: ActionProps) => JSX.Element;
+declare const Action: ({ accessibilityRole, actionType, children, fullWidth, inverted, inline, onPress, testID, ...rest }: ActionProps) => JSX.Element;
 export { ActionList, Action };

package/dist/components/ActionList/ActionList.js

@@ -50,11 +50,11 @@ var ActionList = function (_a) {
 };
 exports.ActionList = ActionList;
 var ActionWrapper = function (_a) {
-    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, inList: rest === null || rest === void 0 ? void 0 : rest.inList }, { 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, _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"]);
+    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 })) })) })));
 };
 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.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 _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"]);
     var smallAndUp = (0, hooks_1.useBreakpoint)().smallAndUp;
     var isBackAction = actionType === 'back';
     var updatedIconRight = null;
@@ -64,6 +64,6 @@ var Action = function (_a) {
     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, 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] })));
+    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] })));
 };
 exports.Action = Action;

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

@@ -1,7 +1,247 @@
+/// <reference types="react" />
 import { Theme } from '@ovotech/element-core';
 import { FullWidthOptions } from '../../hooks';
-import { ListWrapper } from '../List/List';
-export declare const StyledActionList: typeof ListWrapper;
+export declare const StyledActionList: import("react").ForwardRefExoticComponent<Pick<Omit<{
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+} & {
+    theme?: {
+        core: {
+            radius: Record<"small" | "medium" | "large" | "max", string>;
+            borderWidth: Record<"small" | "medium" | "large", string>;
+            breakpoint: Record<"small" | "medium" | "large", string | number>;
+            mediaQuery: Record<"small" | "medium" | "large", string>;
+            space: Record<0 | 2 | 1 | 3 | 4 | 5 | 10 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
+            transition: Record<"medium" | "slow" | "fast", string>;
+            opacity: Record<"solid" | "transparent" | "translucent", string | number>;
+            color: Record<"neutral" | "red" | "orange" | "yellow" | "green" | "blue", {
+                lightest: string;
+                lighter: string;
+                light: string;
+                base: string;
+                dark: string;
+                darker: string;
+                darkest: string;
+            }> & {
+                brand: Record<string, string>;
+            };
+            fontFamily: Record<"body" | "mono" | "heading" | "bodyBold", {
+                native: string;
+                web: string;
+            }>;
+            fontWeight: Record<"bold" | "book" | "black", string | number>;
+            fontSize: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
+                small: string | number;
+                large: string | number;
+            }>;
+            lineHeight: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
+                small: string | number;
+                large: string | number;
+            }>;
+            letterSpacing: Record<"base" | "compressed" | "extraCompressed", number>;
+        };
+        semantic: {
+            surface: Record<"base" | "cutout" | "elevated", string>;
+            message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
+            border: Record<"graphic" | "differentiated" | "functional", string>;
+            focus: Record<"surface" | "outline" | "hover", string>;
+            inverted: Record<"surface" | "border", string> & {
+                message: Record<"base" | "link" | "secondary" | "branded", string>;
+            };
+            success: {
+                border: string;
+                surface: string;
+                surfaceEmphasis: string;
+                message: string;
+                messageOnEmphasis: string;
+            };
+            warning: {
+                border: string;
+                surface: string;
+                surfaceEmphasis: string;
+                message: string;
+                messageOnEmphasis: string;
+            };
+            error: {
+                border: string;
+                surface: string;
+                surfaceEmphasis: string;
+                message: string;
+                messageOnEmphasis: string;
+            };
+            info: {
+                border: string;
+                surface: string;
+                surfaceEmphasis: string;
+                message: string;
+                messageOnEmphasis: string;
+            };
+            data: Record<"branded" | "gas" | "electric", Record<2 | 1 | 3 | 4, string>>;
+        };
+        component: {
+            heading1: {
+                fontFamily: string;
+                fontWeight: string | number;
+                fontSize: {
+                    small: string | number;
+                    large: string | number;
+                };
+                lineHeight: {
+                    small: string | number;
+                    large: string | number;
+                };
+            };
+            heading2: {
+                fontFamily: string;
+                fontWeight: string | number;
+                fontSize: {
+                    small: string | number;
+                    large: string | number;
+                };
+                lineHeight: {
+                    small: string | number;
+                    large: string | number;
+                };
+            };
+            heading3: {
+                fontFamily: string;
+                fontWeight: string | number;
+                fontSize: {
+                    small: string | number;
+                    large: string | number;
+                };
+                lineHeight: {
+                    small: string | number;
+                    large: string | number;
+                };
+            };
+            heading4: {
+                fontFamily: string;
+                fontWeight: string | number;
+                fontSize: {
+                    small: string | number;
+                    large: string | number;
+                };
+                lineHeight: {
+                    small: string | number;
+                    large: string | number;
+                };
+            };
+            lead: {
+                fontFamily: string;
+                fontWeight: string | number;
+                fontSize: {
+                    small: string | number;
+                    large: string | number;
+                };
+                lineHeight: {
+                    small: string | number;
+                    large: string | number;
+                };
+            };
+            body: {
+                fontFamily: string;
+                fontWeight: string | number;
+                fontSize: {
+                    small: string | number;
+                    large: string | number;
+                };
+                lineHeight: {
+                    small: string | number;
+                    large: string | number;
+                };
+            };
+            small: {
+                fontFamily: string;
+                fontWeight: string | number;
+                fontSize: {
+                    small: string | number;
+                    large: string | number;
+                };
+                lineHeight: {
+                    small: string | number;
+                    large: string | number;
+                };
+            };
+            label: {
+                fontFamily: string;
+                fontWeight: string | number;
+                fontSize: {
+                    small: string | number;
+                    large: string | number;
+                };
+                lineHeight: {
+                    small: string | number;
+                    large: string | number;
+                };
+            };
+            cta: {
+                primary: {
+                    message: string;
+                    surface: string;
+                    messageHover: string;
+                    surfaceHover: string;
+                    messageFocused: string;
+                    surfaceFocused: string;
+                    outlineFocused: string;
+                    backgroundFocused: string;
+                };
+                secondary: {
+                    message: string;
+                    surface: string;
+                    messageHover: string;
+                    surfaceHover: string;
+                    messageFocused: string;
+                    surfaceFocused: string;
+                    outlineFocused: string;
+                    backgroundFocused: string;
+                };
+                destructive: {
+                    message: string;
+                    surface: string;
+                    messageHover: string;
+                    surfaceHover: string;
+                    messageFocused: string;
+                    surfaceFocused: string;
+                    outlineFocused: string;
+                    backgroundFocused: string;
+                };
+            };
+            badge: {
+                variants: {
+                    neutral: {
+                        foreground: string;
+                        background: string;
+                    };
+                    red: {
+                        foreground: string;
+                        background: string;
+                    };
+                    orange: {
+                        foreground: string;
+                        background: string;
+                    };
+                    yellow: {
+                        foreground: string;
+                        background: string;
+                    };
+                    green: {
+                        foreground: string;
+                        background: string;
+                    };
+                    blue: {
+                        foreground: string;
+                        background: string;
+                    };
+                };
+            };
+        };
+    } | undefined;
+} & {
+    as?: string | import("react").ComponentType<any> | undefined;
+    forwardedAs?: string | import("react").ComponentType<any> | undefined;
+}, import("../../hooks").BreakpointNames>, string | number | symbol> & import("react").RefAttributes<import("react-native/types").View>>;
 export declare const StyledActionWrapper: import("styled-components").StyledComponent<typeof import("react-native").View, {
     core: {
         radius: Record<"small" | "medium" | "large" | "max", string>;
@@ -206,6 +446,10 @@ export declare const StyledActionWrapper: import("styled-components").StyledComp
         };
         badge: {
             variants: {
+                neutral: {
+                    foreground: string;
+                    background: string;
+                };
                 red: {
                     foreground: string;
                     background: string;
@@ -437,6 +681,10 @@ export declare const StyledActionInner: import("styled-components").StyledCompon
         };
         badge: {
             variants: {
+                neutral: {
+                    foreground: string;
+                    background: string;
+                };
                 red: {
                     foreground: string;
                     background: string;
@@ -462,6 +710,7 @@ export declare const StyledActionInner: import("styled-components").StyledCompon
     };
 }, {
     fullWidth?: FullWidthOptions | undefined;
+    inline?: boolean | undefined;
 }, never>;
 export declare const StyledActionText: import("styled-components").StyledComponent<typeof import("react-native").Text, {
     core: {
@@ -667,6 +916,10 @@ export declare const StyledActionText: import("styled-components").StyledCompone
         };
         badge: {
             variants: {
+                neutral: {
+                    foreground: string;
+                    background: string;
+                };
                 red: {
                     foreground: string;
                     background: string;
@@ -899,6 +1152,10 @@ export declare const StyledRightIcon: import("styled-components").StyledComponen
         };
         badge: {
             variants: {
+                neutral: {
+                    foreground: string;
+                    background: string;
+                };
                 red: {
                     foreground: string;
                     background: string;
@@ -1130,6 +1387,10 @@ export declare const StyledLeftIcon: import("styled-components").StyledComponent
         };
         badge: {
             variants: {
+                neutral: {
+                    foreground: string;
+                    background: string;
+                };
                 red: {
                     foreground: string;
                     background: string;

package/dist/components/ActionList/styled.js

@@ -29,34 +29,36 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledLeftIcon = exports.StyledRightIcon = exports.StyledActionText = exports.StyledActionInner = exports.StyledActionWrapper = exports.StyledActionList = void 0;
 var styled_native_1 = __importStar(require("../../styled.native"));
+var utils_1 = require("../../utils");
 var Icon_1 = require("../Icon");
-var List_1 = require("../List/List");
-exports.StyledActionList = List_1.ListWrapper;
+var StyledList = styled_native_1.default.View(function (_a) {
+    var core = _a.theme.core, smallAndUp = _a.smallAndUp;
+    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    flex-direction: column;\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "], ["\n    flex-direction: column;\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "])), smallAndUp ? core.space[3] : core.space[2], smallAndUp ? core.space[3] : core.space[2]);
+});
+exports.StyledActionList = (0, utils_1.styledComponentWithBreakpoints)(StyledList);
 exports.StyledActionWrapper = styled_native_1.default.View(function (_a) {
     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");
+    var fullWidth = _a.fullWidth, inline = _a.inline;
+    return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: row;\n    justify-content: ", ";\n    align-items: center;\n    ", ";\n  "], ["\n    display: flex;\n    flex-direction: row;\n    justify-content: ", ";\n    align-items: center;\n    ", ";\n  "])), fullWidth === 'always' ? 'space-between' : 'flex-start', !inline ? 'min-height: 44px' : '');
 });
 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, _d = _a.inList, inList = _d === void 0 ? false : _d;
     var fontSize = smallAndUp
         ? core.fontSize.body.large
         : core.fontSize.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      flex: ", ";\n    "], ["\n      color: ", ";\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      flex: ", ";\n    "])), inverted
+    return (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      color: ", ";\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      flex: ", ";\n    "], ["\n      color: ", ";\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      flex: ", ";\n    "])), inverted
         ? semantic.inverted.message.base
         : semantic.message.base, core.fontFamily.bodyBold.native, fontSize, core.lineHeight.body.small, inList ? 1 : 'none');
 });
 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_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]);
+    return (0, styled_native_1.css)(templateObject_4 || (templateObject_4 = __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_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]);
+    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]);
 });
-var templateObject_1, templateObject_2, templateObject_3;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/components/Badge/Badge.d.ts

@@ -206,6 +206,10 @@ declare const StyledBadge: import("styled-components").StyledComponent<typeof im
         };
         badge: {
             variants: {
+                neutral: {
+                    foreground: string;
+                    background: string;
+                };
                 red: {
                     foreground: string;
                     background: string;

package/dist/components/Card/Card.d.ts

@@ -202,6 +202,10 @@ export declare const Card: import("styled-components").StyledComponent<typeof im
         };
         badge: {
             variants: {
+                neutral: {
+                    foreground: string;
+                    background: string;
+                };
                 red: {
                     foreground: string;
                     background: string;

package/dist/components/DataTable/TableRow.js

@@ -12,15 +12,21 @@ var __assign = (this && this.__assign) || function () {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TableRow = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
+var jsx_runtime_1 = require("react/jsx-runtime");
 var react_is_1 = require("react-is");
+var react_native_1 = require("react-native");
 var hooks_1 = require("../../hooks");
 var styles_1 = require("./styles");
 var TableRow = function (_a) {
     var data = _a.data, index = _a.index, striped = _a.striped, rowHeadings = _a.rowHeadings, columnWidths = _a.columnWidths;
     var breakpoints = (0, hooks_1.useBreakpoint)();
     var cells = data.map(function (cellData, i) {
+        if (typeof cellData === 'object' &&
+            (cellData === null || cellData === void 0 ? void 0 : cellData.hasOwnProperty('isSeparator')) &&
+            (cellData === null || cellData === void 0 ? void 0 : cellData.hasOwnProperty('content'))) {
+            return ((0, jsx_runtime_1.jsx)(styles_1.StyledSeparatorRow, __assign({ testID: "separatorRow", width: react_native_1.Dimensions.get('window').width }, { children: (0, jsx_runtime_1.jsx)(styles_1.SeparatorRowText, __assign({}, breakpoints, { children: cellData === null || cellData === void 0 ? void 0 : cellData.content })) }), i));
+        }
         if (rowHeadings && i === 0) {
             return ((0, react_1.createElement)(styles_1.RowHeading, __assign({}, breakpoints, { key: i, testID: "rowHeader", cellWidth: columnWidths[i] }), (0, react_is_1.isElement)(cellData) ? (cellData) : ((0, jsx_runtime_1.jsx)(styles_1.TableHeaderText, __assign({}, breakpoints, { children: cellData })))));
         }