@ovotech/element-native 3.7.0 → 3.8.0-canary-9bfdab2-202

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

@@ -5,6 +5,7 @@ export declare const StyledAccordion: import("styled-components").StyledComponen
         borderWidth: Record<"small" | "medium" | "large", string>;
         breakpoint: Record<"small" | "medium" | "large", string | number>;
         mediaQuery: Record<"small" | "medium" | "large", string>;
+        customMediaQuery: Record<"small-and-up" | "medium-and-up" | "large-and-up", 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>;
@@ -36,12 +37,20 @@ export declare const StyledAccordion: import("styled-components").StyledComponen
     };
     semantic: {
         surface: Record<"base" | "cutout" | "elevated", string>;
-        message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
+        message: Record<"base" | "link" | "secondary" | "branded" | "error", string>;
+        branded: Record<"message" | "heading" | "surface", string>;
         border: Record<"graphic" | "differentiated" | "functional", string>;
         focus: Record<"surface" | "outline" | "hover", string>;
-        inverted: Record<"surface" | "border", string> & {
+        inverted: Record<"surface" | "surfaceAlt" | "border" | "borderAlt", string> & {
             message: Record<"base" | "link" | "secondary" | "branded", string>;
         };
+        neutral: {
+            border: string;
+            surface: string;
+            surfaceEmphasis: string;
+            message: string;
+            messageOnEmphasis: string;
+        };
         success: {
             border: string;
             surface: string;
@@ -241,6 +250,7 @@ export declare const StyledAccordionHeader: import("styled-components").StyledCo
         borderWidth: Record<"small" | "medium" | "large", string>;
         breakpoint: Record<"small" | "medium" | "large", string | number>;
         mediaQuery: Record<"small" | "medium" | "large", string>;
+        customMediaQuery: Record<"small-and-up" | "medium-and-up" | "large-and-up", 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>;
@@ -272,12 +282,20 @@ export declare const StyledAccordionHeader: import("styled-components").StyledCo
     };
     semantic: {
         surface: Record<"base" | "cutout" | "elevated", string>;
-        message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
+        message: Record<"base" | "link" | "secondary" | "branded" | "error", string>;
+        branded: Record<"message" | "heading" | "surface", string>;
         border: Record<"graphic" | "differentiated" | "functional", string>;
         focus: Record<"surface" | "outline" | "hover", string>;
-        inverted: Record<"surface" | "border", string> & {
+        inverted: Record<"surface" | "surfaceAlt" | "border" | "borderAlt", string> & {
             message: Record<"base" | "link" | "secondary" | "branded", string>;
         };
+        neutral: {
+            border: string;
+            surface: string;
+            surfaceEmphasis: string;
+            message: string;
+            messageOnEmphasis: string;
+        };
         success: {
             border: string;
             surface: string;
@@ -473,6 +491,7 @@ export declare const StyledContainer: import("styled-components").StyledComponen
         borderWidth: Record<"small" | "medium" | "large", string>;
         breakpoint: Record<"small" | "medium" | "large", string | number>;
         mediaQuery: Record<"small" | "medium" | "large", string>;
+        customMediaQuery: Record<"small-and-up" | "medium-and-up" | "large-and-up", 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>;
@@ -504,12 +523,20 @@ export declare const StyledContainer: import("styled-components").StyledComponen
     };
     semantic: {
         surface: Record<"base" | "cutout" | "elevated", string>;
-        message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
+        message: Record<"base" | "link" | "secondary" | "branded" | "error", string>;
+        branded: Record<"message" | "heading" | "surface", string>;
         border: Record<"graphic" | "differentiated" | "functional", string>;
         focus: Record<"surface" | "outline" | "hover", string>;
-        inverted: Record<"surface" | "border", string> & {
+        inverted: Record<"surface" | "surfaceAlt" | "border" | "borderAlt", string> & {
             message: Record<"base" | "link" | "secondary" | "branded", string>;
         };
+        neutral: {
+            border: string;
+            surface: string;
+            surfaceEmphasis: string;
+            message: string;
+            messageOnEmphasis: string;
+        };
         success: {
             border: string;
             surface: string;

package/dist/components/ActionCard/ActionCard.js

@@ -75,7 +75,7 @@ var ActionCard = function (_a) {
                                     paddingRight: image || !onPressCloseButton ? 0 : cardPadding,
                                 }, testID: "".concat(testID, "-heading") }, { children: title })), (0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [typeof body === 'string' ? ((0, jsx_runtime_1.jsx)(react_native_1.View, __assign({ style: {
                                             paddingRight: !image && !title && onPressCloseButton ? cardPadding : 0,
-                                        } }, { 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: {
+                                        } }, { 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"), iconRight: "chevron-right-small" }, { 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

@@ -17,5 +17,5 @@ declare type ActionProps = PropsWithChildren<ViewProps & {
     inList?: boolean;
 }>;
 declare const ActionList: ({ children, inverted, ...rest }: ActionListProps) => JSX.Element;
-declare const Action: import("react").ForwardRefExoticComponent<Pick<ActionProps, "onPress" | "inline" | keyof ViewProps | "fullWidth" | "iconLeft" | "iconRight" | "inverted" | "inList"> & import("react").RefAttributes<View>>;
+declare const Action: import("react").ForwardRefExoticComponent<Pick<ActionProps, "onPress" | "inverted" | "inline" | keyof ViewProps | "fullWidth" | "iconLeft" | "iconRight" | "inList"> & import("react").RefAttributes<View>>;
 export { ActionList, Action };

package/dist/components/ActionList/ActionList.js

@@ -32,13 +32,14 @@ var ActionList = function (_a) {
     var children = _a.children, inverted = _a.inverted, rest = __rest(_a, ["children", "inverted"]);
     var childCount = children.length;
     return ((0, jsx_runtime_1.jsx)(styled_1.StyledActionList, __assign({}, rest, { children: react_1.Children.map(children, function (child, index) {
-            var _a;
+            var _a, _b;
             return (0, react_1.cloneElement)(child, {
                 fullWidth: 'always',
                 index: index,
                 hasBorder: childCount > 1 && index !== childCount - 1,
                 inverted: (_a = child.props.inverted) !== null && _a !== void 0 ? _a : inverted,
                 inList: true,
+                iconRight: (_b = child.props.iconRight) !== null && _b !== void 0 ? _b : 'chevron-right-small',
             });
         }) })));
 };

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

@@ -12,6 +12,7 @@ export declare const StyledActionList: import("react").ForwardRefExoticComponent
             borderWidth: Record<"small" | "medium" | "large", string>;
             breakpoint: Record<"small" | "medium" | "large", string | number>;
             mediaQuery: Record<"small" | "medium" | "large", string>;
+            customMediaQuery: Record<"small-and-up" | "medium-and-up" | "large-and-up", 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>;
@@ -43,12 +44,20 @@ export declare const StyledActionList: import("react").ForwardRefExoticComponent
         };
         semantic: {
             surface: Record<"base" | "cutout" | "elevated", string>;
-            message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
+            message: Record<"base" | "link" | "secondary" | "branded" | "error", string>;
+            branded: Record<"message" | "heading" | "surface", string>;
             border: Record<"graphic" | "differentiated" | "functional", string>;
             focus: Record<"surface" | "outline" | "hover", string>;
-            inverted: Record<"surface" | "border", string> & {
+            inverted: Record<"surface" | "surfaceAlt" | "border" | "borderAlt", string> & {
                 message: Record<"base" | "link" | "secondary" | "branded", string>;
             };
+            neutral: {
+                border: string;
+                surface: string;
+                surfaceEmphasis: string;
+                message: string;
+                messageOnEmphasis: string;
+            };
             success: {
                 border: string;
                 surface: string;
@@ -248,6 +257,7 @@ export declare const StyledActionWrapper: import("styled-components").StyledComp
         borderWidth: Record<"small" | "medium" | "large", string>;
         breakpoint: Record<"small" | "medium" | "large", string | number>;
         mediaQuery: Record<"small" | "medium" | "large", string>;
+        customMediaQuery: Record<"small-and-up" | "medium-and-up" | "large-and-up", 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>;
@@ -279,12 +289,20 @@ export declare const StyledActionWrapper: import("styled-components").StyledComp
     };
     semantic: {
         surface: Record<"base" | "cutout" | "elevated", string>;
-        message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
+        message: Record<"base" | "link" | "secondary" | "branded" | "error", string>;
+        branded: Record<"message" | "heading" | "surface", string>;
         border: Record<"graphic" | "differentiated" | "functional", string>;
         focus: Record<"surface" | "outline" | "hover", string>;
-        inverted: Record<"surface" | "border", string> & {
+        inverted: Record<"surface" | "surfaceAlt" | "border" | "borderAlt", string> & {
             message: Record<"base" | "link" | "secondary" | "branded", string>;
         };
+        neutral: {
+            border: string;
+            surface: string;
+            surfaceEmphasis: string;
+            message: string;
+            messageOnEmphasis: string;
+        };
         success: {
             border: string;
             surface: string;
@@ -483,6 +501,7 @@ export declare const StyledActionInner: import("styled-components").StyledCompon
         borderWidth: Record<"small" | "medium" | "large", string>;
         breakpoint: Record<"small" | "medium" | "large", string | number>;
         mediaQuery: Record<"small" | "medium" | "large", string>;
+        customMediaQuery: Record<"small-and-up" | "medium-and-up" | "large-and-up", 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>;
@@ -514,12 +533,20 @@ export declare const StyledActionInner: import("styled-components").StyledCompon
     };
     semantic: {
         surface: Record<"base" | "cutout" | "elevated", string>;
-        message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
+        message: Record<"base" | "link" | "secondary" | "branded" | "error", string>;
+        branded: Record<"message" | "heading" | "surface", string>;
         border: Record<"graphic" | "differentiated" | "functional", string>;
         focus: Record<"surface" | "outline" | "hover", string>;
-        inverted: Record<"surface" | "border", string> & {
+        inverted: Record<"surface" | "surfaceAlt" | "border" | "borderAlt", string> & {
             message: Record<"base" | "link" | "secondary" | "branded", string>;
         };
+        neutral: {
+            border: string;
+            surface: string;
+            surfaceEmphasis: string;
+            message: string;
+            messageOnEmphasis: string;
+        };
         success: {
             border: string;
             surface: string;
@@ -718,6 +745,7 @@ export declare const StyledActionText: import("styled-components").StyledCompone
         borderWidth: Record<"small" | "medium" | "large", string>;
         breakpoint: Record<"small" | "medium" | "large", string | number>;
         mediaQuery: Record<"small" | "medium" | "large", string>;
+        customMediaQuery: Record<"small-and-up" | "medium-and-up" | "large-and-up", 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>;
@@ -749,12 +777,20 @@ export declare const StyledActionText: import("styled-components").StyledCompone
     };
     semantic: {
         surface: Record<"base" | "cutout" | "elevated", string>;
-        message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
+        message: Record<"base" | "link" | "secondary" | "branded" | "error", string>;
+        branded: Record<"message" | "heading" | "surface", string>;
         border: Record<"graphic" | "differentiated" | "functional", string>;
         focus: Record<"surface" | "outline" | "hover", string>;
-        inverted: Record<"surface" | "border", string> & {
+        inverted: Record<"surface" | "surfaceAlt" | "border" | "borderAlt", string> & {
             message: Record<"base" | "link" | "secondary" | "branded", string>;
         };
+        neutral: {
+            border: string;
+            surface: string;
+            surfaceEmphasis: string;
+            message: string;
+            messageOnEmphasis: string;
+        };
         success: {
             border: string;
             surface: string;
@@ -954,6 +990,7 @@ export declare const StyledRightIcon: import("styled-components").StyledComponen
         borderWidth: Record<"small" | "medium" | "large", string>;
         breakpoint: Record<"small" | "medium" | "large", string | number>;
         mediaQuery: Record<"small" | "medium" | "large", string>;
+        customMediaQuery: Record<"small-and-up" | "medium-and-up" | "large-and-up", 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>;
@@ -985,12 +1022,20 @@ export declare const StyledRightIcon: import("styled-components").StyledComponen
     };
     semantic: {
         surface: Record<"base" | "cutout" | "elevated", string>;
-        message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
+        message: Record<"base" | "link" | "secondary" | "branded" | "error", string>;
+        branded: Record<"message" | "heading" | "surface", string>;
         border: Record<"graphic" | "differentiated" | "functional", string>;
         focus: Record<"surface" | "outline" | "hover", string>;
-        inverted: Record<"surface" | "border", string> & {
+        inverted: Record<"surface" | "surfaceAlt" | "border" | "borderAlt", string> & {
             message: Record<"base" | "link" | "secondary" | "branded", string>;
         };
+        neutral: {
+            border: string;
+            surface: string;
+            surfaceEmphasis: string;
+            message: string;
+            messageOnEmphasis: string;
+        };
         success: {
             border: string;
             surface: string;
@@ -1189,6 +1234,7 @@ export declare const StyledLeftIcon: import("styled-components").StyledComponent
         borderWidth: Record<"small" | "medium" | "large", string>;
         breakpoint: Record<"small" | "medium" | "large", string | number>;
         mediaQuery: Record<"small" | "medium" | "large", string>;
+        customMediaQuery: Record<"small-and-up" | "medium-and-up" | "large-and-up", 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>;
@@ -1220,12 +1266,20 @@ export declare const StyledLeftIcon: import("styled-components").StyledComponent
     };
     semantic: {
         surface: Record<"base" | "cutout" | "elevated", string>;
-        message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
+        message: Record<"base" | "link" | "secondary" | "branded" | "error", string>;
+        branded: Record<"message" | "heading" | "surface", string>;
         border: Record<"graphic" | "differentiated" | "functional", string>;
         focus: Record<"surface" | "outline" | "hover", string>;
-        inverted: Record<"surface" | "border", string> & {
+        inverted: Record<"surface" | "surfaceAlt" | "border" | "borderAlt", string> & {
             message: Record<"base" | "link" | "secondary" | "branded", string>;
         };
+        neutral: {
+            border: string;
+            surface: string;
+            surfaceEmphasis: string;
+            message: string;
+            messageOnEmphasis: string;
+        };
         success: {
             border: string;
             surface: string;

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

@@ -1,6 +1,6 @@
 import { Theme, BadgeColors } from '@ovotech/element-core';
 import { ComponentProps } from 'react';
-export declare type SemanticVariants = Exclude<keyof Theme['semantic'], 'surface' | 'message' | 'border' | 'focus' | 'inverted' | 'data'>;
+export declare type SemanticVariants = Exclude<keyof Theme['semantic'], 'surface' | 'message' | 'border' | 'focus' | 'inverted' | 'data' | 'neutral' | 'branded'>;
 export declare type BadgeVariantName = BadgeColors | SemanticVariants;
 declare const StyledBadge: import("styled-components").StyledComponent<typeof import("react-native").View, {
     core: {
@@ -8,6 +8,7 @@ declare const StyledBadge: import("styled-components").StyledComponent<typeof im
         borderWidth: Record<"small" | "medium" | "large", string>;
         breakpoint: Record<"small" | "medium" | "large", string | number>;
         mediaQuery: Record<"small" | "medium" | "large", string>;
+        customMediaQuery: Record<"small-and-up" | "medium-and-up" | "large-and-up", 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>;
@@ -39,12 +40,20 @@ declare const StyledBadge: import("styled-components").StyledComponent<typeof im
     };
     semantic: {
         surface: Record<"base" | "cutout" | "elevated", string>;
-        message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
+        message: Record<"base" | "link" | "secondary" | "branded" | "error", string>;
+        branded: Record<"message" | "heading" | "surface", string>;
         border: Record<"graphic" | "differentiated" | "functional", string>;
         focus: Record<"surface" | "outline" | "hover", string>;
-        inverted: Record<"surface" | "border", string> & {
+        inverted: Record<"surface" | "surfaceAlt" | "border" | "borderAlt", string> & {
             message: Record<"base" | "link" | "secondary" | "branded", string>;
         };
+        neutral: {
+            border: string;
+            surface: string;
+            surfaceEmphasis: string;
+            message: string;
+            messageOnEmphasis: string;
+        };
         success: {
             border: string;
             surface: string;

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

@@ -1,9 +1,11 @@
+import { Breakpoints } from '../../hooks';
 export declare const Card: import("styled-components").StyledComponent<typeof import("react-native").View, {
     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>;
+        customMediaQuery: Record<"small-and-up" | "medium-and-up" | "large-and-up", 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>;
@@ -35,12 +37,20 @@ export declare const Card: import("styled-components").StyledComponent<typeof im
     };
     semantic: {
         surface: Record<"base" | "cutout" | "elevated", string>;
-        message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
+        message: Record<"base" | "link" | "secondary" | "branded" | "error", string>;
+        branded: Record<"message" | "heading" | "surface", string>;
         border: Record<"graphic" | "differentiated" | "functional", string>;
         focus: Record<"surface" | "outline" | "hover", string>;
-        inverted: Record<"surface" | "border", string> & {
+        inverted: Record<"surface" | "surfaceAlt" | "border" | "borderAlt", string> & {
             message: Record<"base" | "link" | "secondary" | "branded", string>;
         };
+        neutral: {
+            border: string;
+            surface: string;
+            surfaceEmphasis: string;
+            message: string;
+            messageOnEmphasis: string;
+        };
         success: {
             border: string;
             surface: string;
@@ -229,6 +239,7 @@ export declare const Card: import("styled-components").StyledComponent<typeof im
             };
         };
     };
-}, {
+}, Breakpoints & {
     inline?: boolean | undefined;
+    inverted?: boolean | undefined;
 }, never>;

package/dist/components/Card/Card.js

@@ -6,8 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Card = void 0;
 var styled_native_1 = __importDefault(require("../../styled.native"));
 exports.Card = styled_native_1.default.View(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, _c = _a.inline, inline = _c === void 0 ? false : _c;
-    return "\n      background: ".concat(semantic.surface.elevated, ";\n      border: ").concat(inline
-        ? "".concat(core.borderWidth.small, " solid ").concat(semantic.border.differentiated)
-        : 'none', ";\n      padding: ").concat(core.space[4], ";\n      border-radius: ").concat(core.radius.small, ";\n    ");
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, _c = _a.inline, inline = _c === void 0 ? false : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, smallAndUp = _a.smallAndUp;
+    return "\n      background: ".concat(inverted ? semantic.inverted.surface : semantic.surface.elevated, ";\n      padding: ").concat(inline ? core.space[smallAndUp ? 6 : 4] : core.space[smallAndUp ? 9 : 6], ";\n      border-radius: ").concat(inline ? core.radius.max : 0, ";\n    ");
 });