@ovotech/element-native 4.4.9 → 5.0.0-canary-bcb1788-338

package/dist/components/Toggle/styles.js

@@ -8,22 +8,24 @@ var element_core_1 = require("@ovotech/element-core");
 var react_native_1 = require("react-native");
 var styled_native_1 = __importDefault(require("../../styled.native"));
 exports.StyledWrapper = styled_native_1.default.TouchableOpacity(function (_a) {
-    var core = _a.theme.core, hasLabel = _a.hasLabel, inline = _a.inline, labelPosition = _a.labelPosition;
-    return "\n    width: ".concat(hasLabel ? (inline ? undefined : '100%') : (0, element_core_1.numToPx)(core.space[11]), ";\n    display: flex;\n    flex-direction: row").concat(labelPosition === 'left' ? '' : '-reverse', ";\n    justify-content: space-between;\n    position: relative;\n  ");
+    var theme = _a.theme, hasLabel = _a.hasLabel, inline = _a.inline, labelPosition = _a.labelPosition;
+    return "\n    width: ".concat(hasLabel ? (inline ? undefined : '100%') : (0, element_core_1.numToPx)(theme.space[1100]), ";\n    display: flex;\n    flex-direction: row").concat(labelPosition === 'left' ? '' : '-reverse', ";\n    justify-content: space-between;\n    position: relative;\n  ");
 });
 exports.StyledToggleInputWrapper = styled_native_1.default.View(function (_a) {
-    var core = _a.theme.core, labelPosition = _a.labelPosition;
-    return "\n    width: ".concat((0, element_core_1.numToPx)(core.space[11]), ";\n    height: ").concat((0, element_core_1.numToPx)(core.space[6]), ";\n    ").concat(labelPosition
+    var theme = _a.theme, labelPosition = _a.labelPosition;
+    return "\n    width: ".concat((0, element_core_1.numToPx)(theme.space[1100]), ";\n    height: ").concat((0, element_core_1.numToPx)(theme.space[600]), ";\n    ").concat(labelPosition
         ? labelPosition === 'left'
             ? 'margin-left: 10px;'
             : 'margin-right: 10px;'
         : null, "\n    ");
 });
 exports.StyledToggleInput = styled_native_1.default.View(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, checked = _a.checked;
-    return "\n      width: ".concat((0, element_core_1.numToPx)(core.space[11]), ";\n      height: ").concat((0, element_core_1.numToPx)(core.space[6]), ";\n      justify-content: center;\n      border-radius: ").concat((0, element_core_1.numToPx)(core.radius.large), ";\n      background: ").concat(checked ? semantic.focus.outline : semantic.message.secondary, ";\n    ");
+    var theme = _a.theme, checked = _a.checked;
+    return "\n      width: ".concat((0, element_core_1.numToPx)(theme.space[1100]), ";\n      height: ").concat((0, element_core_1.numToPx)(theme.space[600]), ";\n      justify-content: center;\n      border-radius: ").concat((0, element_core_1.numToPx)(theme.border.radius.lg), ";\n      background: ").concat(checked
+        ? theme.color.outline.outer
+        : theme.color.surface.onSurfaceVariant, ";\n    ");
 });
 exports.StyledToggleDot = (0, styled_native_1.default)(react_native_1.Animated.View)(function (_a) {
-    var core = _a.theme.core, checked = _a.checked;
-    return "\n  position: absolute;\n  width: ".concat((0, element_core_1.numToPx)(core.space[4]), ";\n  height: ").concat((0, element_core_1.numToPx)(core.space[4]), ";\n  border-radius: ").concat((0, element_core_1.numToPx)(core.space[4]), ";\n  background-color: ").concat(checked ? core.color.brand.white : core.color.neutral.lighter, ";\n");
+    var theme = _a.theme, checked = _a.checked;
+    return "\n  position: absolute;\n  width: ".concat((0, element_core_1.numToPx)(theme.space[400]), ";\n  height: ").concat((0, element_core_1.numToPx)(theme.space[400]), ";\n  border-radius: ").concat((0, element_core_1.numToPx)(theme.space[400]), ";\n  background-color: ").concat(checked ? theme.color.brand.onBrand : theme.color.surface.dim, ";\n");
 });

package/dist/components/index.d.ts

@@ -4,33 +4,22 @@ export * from './ActionList';
 export * from './Badge';
 export * from './Card';
 export * from './Checkbox';
-export * from './CTAButton';
-export * from './CTALink';
+export * from './Button';
+export * from './Link';
 export * from './CurrencyField';
 export * from './CurrencyInput';
 export * from './DataTable';
 export * from './DateField';
-export * from './DescriptionList';
 export * from './Disclosure';
-export * from './Display0';
-export * from './Display1';
-export * from './Display2';
-export * from './Display3';
+export * from './Display';
 export * from './Divider';
 export * from './Em';
 export * from './EmailField';
 export * from './EmailInput';
-export * from './ErrorSummaryNotification';
 export * from './Field';
-export * from './FilterSelect';
 export * from './Grid';
-export * from './Heading1';
-export * from './Heading2';
-export * from './Heading3';
-export * from './Heading4';
+export * from './Heading';
 export * from './Icon';
-export * from './Label';
-export * from './Lead';
 export * from './LineThrough';
 export * from './List';
 export * from './Margin';
@@ -47,10 +36,9 @@ export * from './Radio';
 export * from './SegmentedControls';
 export * from './SelectField';
 export * from './SkeletonCircle';
-export * from './SkeletonCTA';
+export * from './SkeletonButton';
 export * from './SkeletonHeading';
 export * from './SkeletonText';
-export * from './Small';
 export * from './Spinner';
 export * from './Stack';
 export * from './Strong';
@@ -58,10 +46,8 @@ export * from './Tabs';
 export * from './TextareaField';
 export * from './TextareaInput';
 export * from './TextField';
-export * from './TextGroup';
 export * from './TextInput';
-export * from './TextLink';
 export * from './Toggle';
 export * from './Toast';
-export * from './ProductCarousel';
 export * from './RadioCard';
+export * from './Pictogram';

package/dist/components/index.js

@@ -20,33 +20,22 @@ __exportStar(require("./ActionList"), exports);
 __exportStar(require("./Badge"), exports);
 __exportStar(require("./Card"), exports);
 __exportStar(require("./Checkbox"), exports);
-__exportStar(require("./CTAButton"), exports);
-__exportStar(require("./CTALink"), exports);
+__exportStar(require("./Button"), exports);
+__exportStar(require("./Link"), exports);
 __exportStar(require("./CurrencyField"), exports);
 __exportStar(require("./CurrencyInput"), exports);
 __exportStar(require("./DataTable"), exports);
 __exportStar(require("./DateField"), exports);
-__exportStar(require("./DescriptionList"), exports);
 __exportStar(require("./Disclosure"), exports);
-__exportStar(require("./Display0"), exports);
-__exportStar(require("./Display1"), exports);
-__exportStar(require("./Display2"), exports);
-__exportStar(require("./Display3"), exports);
+__exportStar(require("./Display"), exports);
 __exportStar(require("./Divider"), exports);
 __exportStar(require("./Em"), exports);
 __exportStar(require("./EmailField"), exports);
 __exportStar(require("./EmailInput"), exports);
-__exportStar(require("./ErrorSummaryNotification"), exports);
 __exportStar(require("./Field"), exports);
-__exportStar(require("./FilterSelect"), exports);
 __exportStar(require("./Grid"), exports);
-__exportStar(require("./Heading1"), exports);
-__exportStar(require("./Heading2"), exports);
-__exportStar(require("./Heading3"), exports);
-__exportStar(require("./Heading4"), exports);
+__exportStar(require("./Heading"), exports);
 __exportStar(require("./Icon"), exports);
-__exportStar(require("./Label"), exports);
-__exportStar(require("./Lead"), exports);
 __exportStar(require("./LineThrough"), exports);
 __exportStar(require("./List"), exports);
 __exportStar(require("./Margin"), exports);
@@ -63,10 +52,9 @@ __exportStar(require("./Radio"), exports);
 __exportStar(require("./SegmentedControls"), exports);
 __exportStar(require("./SelectField"), exports);
 __exportStar(require("./SkeletonCircle"), exports);
-__exportStar(require("./SkeletonCTA"), exports);
+__exportStar(require("./SkeletonButton"), exports);
 __exportStar(require("./SkeletonHeading"), exports);
 __exportStar(require("./SkeletonText"), exports);
-__exportStar(require("./Small"), exports);
 __exportStar(require("./Spinner"), exports);
 __exportStar(require("./Stack"), exports);
 __exportStar(require("./Strong"), exports);
@@ -74,10 +62,8 @@ __exportStar(require("./Tabs"), exports);
 __exportStar(require("./TextareaField"), exports);
 __exportStar(require("./TextareaInput"), exports);
 __exportStar(require("./TextField"), exports);
-__exportStar(require("./TextGroup"), exports);
 __exportStar(require("./TextInput"), exports);
-__exportStar(require("./TextLink"), exports);
 __exportStar(require("./Toggle"), exports);
 __exportStar(require("./Toast"), exports);
-__exportStar(require("./ProductCarousel"), exports);
 __exportStar(require("./RadioCard"), exports);
+__exportStar(require("./Pictogram"), exports);

package/dist/esm/components/Accordion/Accordion.js

@@ -29,7 +29,7 @@ import { Component, useCallback, useContext, useEffect, useMemo, useState, } fro
 import Animated, { interpolateColor, runOnUI, useAnimatedStyle, useDerivedValue, useSharedValue, withTiming, } from 'react-native-reanimated';
 import { useLayout } from '../../hooks/use-layout';
 import { ThemeContext } from '../../styled.native';
-import { Heading4 } from '../Heading4';
+import { Heading4 } from '../Heading';
 import { AccordionGroupContext } from './Group';
 import { AccordionIcon } from './Icon';
 import { StyledAccordion, StyledAccordionHeader, StyledContainer, } from './styles';
@@ -50,13 +50,16 @@ export function withAnimated(WrappedComponent) {
     return Animated.createAnimatedComponent(WithAnimated);
 }
 export var Accordion = function (_a) {
-    var _b = _a.expanded, expanded = _b === void 0 ? false : _b, first = _a.first, last = _a.last, title = _a.title, children = _a.children, onToggle = _a.onToggle;
-    var _c = useContext(ThemeContext), core = _c.core, semantic = _c.semantic;
+    var _b = _a.expanded, expanded = _b === void 0 ? false : _b, first = _a.first, last = _a.last, title = _a.title, children = _a.children, onToggle = _a.onToggle, _c = _a.variant, variant = _c === void 0 ? 'default' : _c;
+    var theme = useContext(ThemeContext);
     var Header = useContext(AccordionGroupContext).Header;
     var AccordionHeading = Header !== null && Header !== void 0 ? Header : Heading4;
     var AnimatedHeading = useMemo(function () { return withAnimated(AccordionHeading); }, [AccordionHeading]);
     var _d = useLayout(0), layout = _d[0], onLayout = _d[1];
     var _e = useState(expanded), open = _e[0], setOpen = _e[1];
+    var initialHeadingColor = variant === 'default'
+        ? theme.color.brand.brand
+        : theme.color.surface.onSurface;
     var handleHeightContent = useMemo(function () { return layout.height || 100; }, [layout.height]);
     var size = useSharedValue(handleHeightContent);
     useEffect(function () {
@@ -91,16 +94,15 @@ export var Accordion = function (_a) {
     }, [handleHeightContent, open, size]);
     var containerAnimatedStyle = useMemo(function () { return [{ overflow: 'hidden' }, style]; }, [style]);
     var headerStyle = useAnimatedStyle(function () { return ({
-        color: interpolateColor(progress.value, [0, 1], [semantic.message.branded, semantic.message.base]),
+        color: interpolateColor(progress.value, [0, 1], [initialHeadingColor, theme.color.surface.onSurface]),
     }); }, [progress]);
-    return (_jsxs(StyledAccordion, { first: first, last: last, isExpanded: open, children: [_jsxs(StyledAccordionHeader, { accessibilityState: { expanded: open }, onPress: toggleOpen, testID: "accordionTitle", children: [_jsx(AnimatedHeading, { style: [
+    return (_jsxs(StyledAccordion, { first: first, last: last, isExpanded: open, "$variant": variant, children: [_jsxs(StyledAccordionHeader, { accessibilityState: { expanded: open }, onPress: toggleOpen, testID: "accordionTitle", children: [_jsx(AnimatedHeading, { style: [
                             headerStyle,
                             {
-                                paddingTop: core.space[1],
-                                paddingRight: core.space[3],
+                                paddingRight: theme.space[300],
                                 marginTop: 0,
                                 marginBottom: 0,
                                 flexShrink: 1,
                             },
-                        ], children: title }), _jsx(AccordionIcon, { animationTiming: progress })] }), _jsx(Animated.View, { style: containerAnimatedStyle, children: _jsx(StyledContainer, { onLayout: onLayout, children: children }) })] }));
+                        ], children: title }), _jsx(AccordionIcon, { animationTiming: progress, "$variant": variant })] }), _jsx(Animated.View, { style: containerAnimatedStyle, children: _jsx(StyledContainer, { onLayout: onLayout, children: children }) })] }));
 };

package/dist/esm/components/Accordion/Icon.js

@@ -6,11 +6,14 @@ import { ThemeContext } from '../../styled.native';
 var OVO_LOGO_ANGLE = 105;
 var AnimatedPath = Animated.createAnimatedComponent(Path);
 export function AccordionIcon(_a) {
-    var animationTiming = _a.animationTiming;
-    var _b = useContext(ThemeContext), core = _b.core, semantic = _b.semantic;
+    var animationTiming = _a.animationTiming, $variant = _a.$variant;
+    var color = useContext(ThemeContext).color;
+    var initialBgColor = $variant === 'default' ? color.surface.borderDim : color.brand.dark;
+    var expandedBgColor = $variant === 'default' ? color.brand.brand : color.brand.dark;
+    var initialIconColor = $variant === 'default' ? color.surface.onSurface : color.brand.onBrand;
     var outerAnimatedStyles = useAnimatedStyle(function () { return ({
-        backgroundColor: interpolateColor(animationTiming.value, [0, 1], [semantic.surface.cutout, semantic.message.branded]),
-        height: 36 - animationTiming.value * 4,
+        backgroundColor: interpolateColor(animationTiming.value, [0, 1], [initialBgColor, expandedBgColor]),
+        height: 32 - animationTiming.value,
         margin: 2 * animationTiming.value,
         transform: [{ rotateZ: animationTiming.value * -OVO_LOGO_ANGLE + 'deg' }],
     }); }, [animationTiming]);
@@ -25,11 +28,11 @@ export function AccordionIcon(_a) {
     }); }, [animationTiming]);
     return (_jsx(Animated.View, { style: [
             {
-                backgroundColor: semantic.surface.cutout,
+                backgroundColor: color.surface.dim,
                 aspectRatio: 1,
                 alignItems: 'center',
                 justifyContent: 'center',
             },
             outerAnimatedStyles,
-        ], children: _jsx(Animated.View, { style: innerAnimatedStyles, children: _jsxs(Svg, { width: "16", height: "16", viewBox: "0 0 16 16", children: [_jsx(AnimatedPath, { animatedProps: plusAnimatedProps, d: "M9 9H16V6.99H9V0H6.99V7H0V9.01H7V16.01H9.01V9.01L9 9Z", fill: semantic.message.secondary }), _jsx(AnimatedPath, { animatedProps: minusAnimatedProps, d: "M16.3826 9.66663V7.66663H0.462646V9.66663H16.3826Z", fill: core.color.brand.white })] }) }) }));
+        ], children: _jsx(Animated.View, { style: innerAnimatedStyles, children: _jsxs(Svg, { width: "14", height: "14", viewBox: "0 0 16 16", children: [_jsx(AnimatedPath, { animatedProps: plusAnimatedProps, d: "M9 9H16V6.99H9V0H6.99V7H0V9.01H7V16.01H9.01V9.01L9 9Z", fill: initialIconColor }), _jsx(AnimatedPath, { animatedProps: minusAnimatedProps, d: "M16.3826 9.66663V7.66663H0.462646V9.66663H16.3826Z", fill: color.brand.onBrand })] }) }) }));
 }

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

@@ -6,26 +6,32 @@ import { numToPx } from '@ovotech/element-core';
 import Animated from 'react-native-reanimated';
 import styled, { css } from '../../styled.native';
 export var StyledAccordion = styled(Animated.View)(function (_a) {
-    var _b = _a.theme, semantic = _b.semantic, core = _b.core, first = _a.first, last = _a.last, isExpanded = _a.isExpanded;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    width: 100%;\n    border-width: ", ";\n    border-color: ", ";\n    border-bottom-width: 0;\n    background-color: ", ";\n    transition: background-color ", ";\n\n    ", "\n\n    ", "\n  "], ["\n    width: 100%;\n    border-width: ", ";\n    border-color: ", ";\n    border-bottom-width: 0;\n    background-color: ", ";\n    transition: background-color ", ";\n\n    ", "\n\n    ", "\n  "])), numToPx(core.borderWidth.small), semantic.border.differentiated, isExpanded ? core.color.brand.white : 'transparent', core.transition.fast, first
+    var theme = _a.theme, first = _a.first, last = _a.last, isExpanded = _a.isExpanded, $variant = _a.$variant;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    width: 100%;\n    border-width: ", ";\n    border-color: ", ";\n    border-bottom-width: 0;\n    background-color: ", ";\n    transition: background-color ", ";\n\n    ", "\n\n    ", "\n  "], ["\n    width: 100%;\n    border-width: ", ";\n    border-color: ", ";\n    border-bottom-width: 0;\n    background-color: ", ";\n    transition: background-color ", ";\n\n    ", "\n\n    ", "\n  "])), numToPx(theme.border.width[$variant === 'default' ? 'sm' : 'md']), $variant === 'brand'
+        ? theme.color.brand.brand
+        : theme.color.surface.borderDim, $variant === 'brand'
+        ? theme.color.brand.bright
+        : isExpanded
+            ? theme.color.brand.onBrand
+            : 'transparent', theme.transition.duration.fast, first
         ? {
-            borderTopLeftRadius: core.radius.small,
-            borderTopRightRadius: core.radius.small,
+            borderTopLeftRadius: theme.border.radius.md,
+            borderTopRightRadius: theme.border.radius.md,
         }
         : null, last
         ? {
-            borderBottomLeftRadius: core.radius.small,
-            borderBottomRightRadius: core.radius.small,
-            borderBottomWidth: core.borderWidth.small,
+            borderBottomLeftRadius: theme.border.radius.md,
+            borderBottomRightRadius: theme.border.radius.md,
+            borderBottomWidth: numToPx(theme.border.width[$variant === 'default' ? 'sm' : 'md']),
         }
         : null);
 });
 export var StyledAccordionHeader = styled.TouchableOpacity(function (_a) {
-    var core = _a.theme.core;
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    padding-top: ", ";\n    padding-left: ", ";\n    padding-right: 18px;\n    padding-bottom: 18px;\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: space-between;\n  "], ["\n    padding-top: ", ";\n    padding-left: ", ";\n    padding-right: 18px;\n    padding-bottom: 18px;\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: space-between;\n  "])), numToPx(core.space[5]), numToPx(core.space[3]));
+    var theme = _a.theme;
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    padding-top: ", ";\n    padding-left: ", ";\n    padding-right: 18px;\n    padding-bottom: 18px;\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: space-between;\n  "], ["\n    padding-top: ", ";\n    padding-left: ", ";\n    padding-right: 18px;\n    padding-bottom: 18px;\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: space-between;\n  "])), numToPx(theme.space[500]), numToPx(theme.space[300]));
 });
 export var StyledContainer = styled.View(function (_a) {
-    var core = _a.theme.core;
-    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    padding-top: 0;\n    padding-right: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n  "], ["\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    padding-top: 0;\n    padding-right: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n  "])), numToPx(core.space[12]), numToPx(core.space[6]), numToPx(core.space[3]));
+    var theme = _a.theme;
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    padding-top: 0;\n    padding-right: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n  "], ["\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    padding-top: 0;\n    padding-right: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n  "])), numToPx(theme.space[1200]), numToPx(theme.space[600]), numToPx(theme.space[300]));
 });
 var templateObject_1, templateObject_2, templateObject_3;

package/dist/esm/components/ActionCard/ActionCard.js

@@ -14,33 +14,33 @@ import { numToPx } from '@ovotech/element-core';
 import MaskedView from '@react-native-masked-view/masked-view';
 import { useContext, useEffect } from 'react';
 import { Image, Pressable, View } from 'react-native';
-import { Action, CTAButton, Heading2, Heading3, Icon, Margin, Stack, } from '../';
+import { Action, Button, Heading2, Heading3, Icon, Margin, Stack } from '../';
 import styled, { ThemeContext } from '../../styled.native';
 import { P } from '../P';
 import { IndicatorIconShape } from './IndicatorIconShape';
 var StyledPressableCard = styled.Pressable(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, inline = _a.inline, inverted = _a.inverted, reducedBottomPadding = _a.reducedBottomPadding;
-    var paddingVal = inline ? core.space[4] : core.space[6];
-    var reducedBottomPaddingVal = inline ? core.space[3] : core.space[5];
-    return "\n      border-radius: ".concat(inline ? numToPx(core.space[6]) : 0, ";\n      background-color: ").concat(inverted ? semantic.inverted.surface : semantic.surface.elevated, ";\n      padding: ").concat(numToPx(paddingVal), ";\n      padding-bottom: ").concat(numToPx(reducedBottomPadding ? reducedBottomPaddingVal : paddingVal), ";\n      overflow: hidden;\n      border-width: 0;\n      width: 100%;\n    ");
+    var theme = _a.theme, inline = _a.inline, inverted = _a.inverted, reducedBottomPadding = _a.reducedBottomPadding;
+    var paddingVal = inline ? theme.space[400] : theme.space[600];
+    var reducedBottomPaddingVal = inline ? theme.space[300] : theme.space[500];
+    return "\n      border-radius: ".concat(inline ? numToPx(theme.space[600]) : 0, ";\n      background-color: ").concat(inverted ? theme.color.surface.dim : theme.color.surface.bright, ";\n      padding: ").concat(numToPx(paddingVal), ";\n      padding-bottom: ").concat(numToPx(reducedBottomPadding ? reducedBottomPaddingVal : paddingVal), ";\n      overflow: hidden;\n      border-width: 0;\n      width: 100%;\n    ");
 });
 var StyledCard = styled.View(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, inline = _a.inline, inverted = _a.inverted, reducedBottomPadding = _a.reducedBottomPadding;
-    var paddingVal = inline ? core.space[4] : core.space[6];
-    var reducedBottomPaddingVal = inline ? core.space[3] : core.space[5];
-    return "\n      border-radius: ".concat(inline ? numToPx(core.space[6]) : 0, ";\n      background-color: ").concat(inverted ? semantic.inverted.surface : semantic.surface.elevated, ";\n      padding: ").concat(numToPx(paddingVal), ";\n      padding-bottom: ").concat(numToPx(reducedBottomPadding ? reducedBottomPaddingVal : paddingVal), ";\n      overflow: hidden;\n      border-width: 0;\n      width: 100%;\n    ");
+    var theme = _a.theme, inline = _a.inline, inverted = _a.inverted, reducedBottomPadding = _a.reducedBottomPadding;
+    var paddingVal = inline ? theme.space[400] : theme.space[600];
+    var reducedBottomPaddingVal = inline ? theme.space[300] : theme.space[500];
+    return "\n      border-radius: ".concat(inline ? numToPx(theme.space[600]) : 0, ";\n      background-color: ").concat(inverted ? theme.color.surface.onSurface : theme.color.surface.bright, ";\n      padding: ").concat(numToPx(paddingVal), ";\n      padding-bottom: ").concat(numToPx(reducedBottomPadding ? reducedBottomPaddingVal : paddingVal), ";\n      overflow: hidden;\n      border-width: 0;\n      width: 100%;\n    ");
 });
 var StyledP = styled(P)(function (_a) {
-    var semantic = _a.theme.semantic, inverted = _a.inverted;
-    return "\n    color: ".concat(inverted ? semantic.inverted.message.base : semantic.message.base, ";\n");
+    var theme = _a.theme, inverted = _a.inverted;
+    return "\n    color: ".concat(inverted ? theme.color.surface.bright : theme.color.surface.onSurface, ";\n");
 });
 var CloseIconWrapper = styled.View(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic;
-    return "\n    padding: ".concat(numToPx(core.space[2]), ";\n    background-color: ").concat(semantic.surface.elevated, ";\n    border-radius: ").concat(numToPx(core.space[6]), ";\n");
+    var theme = _a.theme;
+    return "\n    padding: ".concat(numToPx(theme.space[200]), ";\n    background-color: ").concat(theme.color.surface.bright, ";\n    border-radius: ").concat(numToPx(theme.space[600]), ";\n");
 });
 export var ActionCard = function (_a) {
     var _b = _a.accessibilityLabel, accessibilityLabel = _b === void 0 ? 'image' : _b, _c = _a.actionIconName, actionIconName = _c === void 0 ? 'chevron-right-small' : _c, body = _a.body, buttonTitle = _a.buttonTitle, ctaVariant = _a.ctaVariant, image = _a.image, _d = _a.inline, inline = _d === void 0 ? false : _d, _e = _a.inverted, inverted = _e === void 0 ? false : _e, onMount = _a.onMount, onPressCloseButton = _a.onPressCloseButton, onPressActionButton = _a.onPressActionButton, onPressIndicator = _a.onPressIndicator, testID = _a.testID, title = _a.title;
-    var _f = useContext(ThemeContext), core = _f.core, semantic = _f.semantic;
+    var theme = useContext(ThemeContext);
     var hasSingleAction = (onPressActionButton && !onPressIndicator && !onPressCloseButton) ||
         (onPressIndicator && !onPressActionButton && !onPressCloseButton);
     var cardAction = hasSingleAction
@@ -55,16 +55,16 @@ export var ActionCard = function (_a) {
         }
     }, []);
     var Heading = inline ? Heading3 : Heading2;
-    var cardPadding = core.space[inline ? 4 : 6];
+    var cardPadding = theme.space[inline ? 400 : 600];
     var negativeMarginAdjustment = -cardPadding;
     return (_jsxs(RootContainer, __assign({}, (cardAction ? { onPress: cardAction } : {}), { inline: inline, inverted: inverted, reducedBottomPadding: Boolean(buttonTitle && !ctaVariant), testID: "".concat(testID, "-card"), accessibilityRole: cardAction ? 'button' : 'none', children: [_jsxs(View, { style: { flexDirection: 'row' }, children: [_jsx(View, { style: { flex: 1 }, children: _jsxs(Stack, { spaceBetween: 2, children: [_jsx(Heading, { style: {
                                         color: inverted
-                                            ? semantic.inverted.message.link
-                                            : semantic.message.branded,
+                                            ? theme.color.surface.bright
+                                            : theme.color.brand.brand,
                                         paddingRight: image || !onPressCloseButton ? 0 : cardPadding,
                                     }, testID: "".concat(testID, "-heading"), children: title }), _jsxs(View, { children: [typeof body === 'string' ? (_jsx(View, { style: {
                                                 paddingRight: !image && !title && onPressCloseButton ? cardPadding : 0,
-                                            }, children: _jsx(StyledP, { inverted: inverted, children: body }) })) : (body), buttonTitle && onPressActionButton && !onPressIndicator ? (!ctaVariant ? (_jsx(Margin, { top: 2, children: _jsx(Action, { inline: true, onPress: onPressActionButton, testID: "".concat(testID, "-button"), iconRight: actionIconName, inverted: inverted, children: buttonTitle }) })) : (_jsx(Margin, { top: 4, children: _jsx(CTAButton, { onPress: onPressActionButton, testID: "".concat(testID, "-button"), variant: ctaVariant, inverted: inverted, children: buttonTitle }) }))) : null] })] }) }), image ? (_jsx(MaskedView, { style: {
+                                            }, children: _jsx(StyledP, { inverted: inverted, children: body }) })) : (body), buttonTitle && onPressActionButton && !onPressIndicator ? (!ctaVariant ? (_jsx(Margin, { top: 2, children: _jsx(Action, { standalone: true, onPress: onPressActionButton, testID: "".concat(testID, "-button"), iconRight: actionIconName, inverted: inverted, children: buttonTitle }) })) : (_jsx(Margin, { top: 4, children: _jsx(Button, { onPress: onPressActionButton, testID: "".concat(testID, "-button"), variant: ctaVariant, inverted: inverted, children: buttonTitle }) }))) : null] })] }) }), image ? (_jsx(MaskedView, { style: {
                             flex: 1,
                             flexDirection: 'row',
                             height: '100%',
@@ -93,9 +93,9 @@ export var ActionCard = function (_a) {
                                     position: 'absolute',
                                     right: inline ? 8 : 6,
                                     bottom: 16,
-                                }, color: semantic.surface.elevated, name: "chevron-right", accessibilityLabel: "chevron-right" })] })) : null] }), onPressCloseButton && !onPressIndicator ? (_jsx(Pressable, { style: {
+                                }, color: theme.color.surface.bright, name: "chevron-right", accessibilityLabel: "chevron-right" })] })) : null] }), onPressCloseButton && !onPressIndicator ? (_jsx(Pressable, { style: {
                     position: 'absolute',
-                    right: core.space[2],
-                    top: core.space[2],
-                }, onPress: onPressCloseButton, testID: "".concat(testID, "-close-button"), children: _jsx(CloseIconWrapper, { inverted: inverted, children: _jsx(Icon, { name: "cross", size: "16", color: semantic.message.base }) }) })) : null] })));
+                    right: theme.space[200],
+                    top: theme.space[200],
+                }, onPress: onPressCloseButton, testID: "".concat(testID, "-close-button"), children: _jsx(CloseIconWrapper, { inverted: inverted, children: _jsx(Icon, { name: "cross", size: "16", color: theme.color.surface.onSurface }) }) })) : null] })));
 };

package/dist/esm/components/ActionCard/CloseIconShape.js

@@ -2,8 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Svg, { Path, ClipPath, Defs } from 'react-native-svg';
 import styled from '../../styled.native';
 var StyledPath = styled(Path)(function (_a) {
-    var semantic = _a.theme.semantic, color = _a.color;
-    return "\n  fill: ".concat(color !== null && color !== void 0 ? color : semantic.message.branded, "\n");
+    var theme = _a.theme, color = _a.color;
+    return "\n  fill: ".concat(color !== null && color !== void 0 ? color : theme.color.brand.brand, "\n");
 });
 export var CloseIconShape = function (_a) {
     var color = _a.color;

package/dist/esm/components/ActionCard/IndicatorIconShape.js

@@ -2,8 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import Svg, { Path } from 'react-native-svg';
 import styled from '../../styled.native';
 var StyledPath = styled(Path)(function (_a) {
-    var semantic = _a.theme.semantic, color = _a.color;
-    return "\n  fill: ".concat(color !== null && color !== void 0 ? color : semantic.message.branded, "\n");
+    var theme = _a.theme, color = _a.color;
+    return "\n  fill: ".concat(color !== null && color !== void 0 ? color : theme.color.brand.brand, "\n");
 });
 export var IndicatorIconShape = function (_a) {
     var color = _a.color;

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

@@ -22,12 +22,13 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Children, cloneElement, forwardRef, } from 'react';
-import { TouchableOpacity, } from 'react-native';
+import { TouchableOpacity, View, } from 'react-native';
 import { useBreakpoint } from '../../hooks';
 import { getValidChildren } from '../../utils';
-import { StyledActionInner, StyledActionList, StyledActionNodeWrapper, StyledActionText, StyledActionWrapper, StyledLeftIcon, StyledRightIcon, } from './styled';
+import { Badge } from '../Badge';
+import { StyledActionInner, StyledActionList, StyledActionNodeWrapper, StyledActionText, StyledActionWrapper, StyledHintText, StyledLeftIcon, StyledRightIcon, StyledTextWrapper, } from './styled';
 var ActionList = function (_a) {
-    var children = _a.children, inverted = _a.inverted, rest = __rest(_a, ["children", "inverted"]);
+    var children = _a.children, inverted = _a.inverted, borderBottom = _a.borderBottom, rest = __rest(_a, ["children", "inverted", "borderBottom"]);
     var validChildren = getValidChildren(children);
     var childCount = Children.count(validChildren);
     return (_jsx(StyledActionList, __assign({}, rest, { children: Children.map(validChildren, function (child, index) {
@@ -35,7 +36,7 @@ var ActionList = function (_a) {
             return cloneElement(child, {
                 fullWidth: true,
                 index: index,
-                hasBorder: childCount > 1 && index !== childCount - 1,
+                hasBorder: (childCount > 1 && index !== childCount - 1) || borderBottom,
                 inverted: (_a = child.props.inverted) !== null && _a !== void 0 ? _a : inverted, // prioritise child prop
                 inList: true,
                 iconRight: (_b = child.props.iconRight) !== null && _b !== void 0 ? _b : 'chevron-right-small',
@@ -43,12 +44,12 @@ var ActionList = function (_a) {
         }) })));
 };
 var ActionWrapper = forwardRef(function (_a, ref) {
-    var children = _a.children, accessibilityRole = _a.accessibilityRole, accessibilityLabel = _a.accessibilityLabel, accessibilityHint = _a.accessibilityHint, _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, _f = _a.standalone, standalone = _f === void 0 ? false : _f, rest = __rest(_a, ["children", "accessibilityRole", "accessibilityLabel", "accessibilityHint", "activeOpacity", "fullWidth", "hasBorder", "inverted", "inline", "inList", "onPress", "testID", "standalone"]);
-    return (_jsx(StyledActionWrapper, __assign({ ref: ref, hasBorder: hasBorder, inverted: inverted, testID: testID }, rest, { children: _jsx(TouchableOpacity, { hitSlop: inline ? 14 : null, activeOpacity: activeOpacity, accessible: true, accessibilityRole: accessibilityRole, accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint, onPress: onPress, children: _jsx(StyledActionInner, { fullWidth: fullWidth, inList: inList, inline: inline, standalone: standalone, children: children }) }) })));
+    var children = _a.children, accessibilityRole = _a.accessibilityRole, accessibilityLabel = _a.accessibilityLabel, accessibilityHint = _a.accessibilityHint, _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, inList = _a.inList, onPress = _a.onPress, testID = _a.testID, _e = _a.standalone, standalone = _e === void 0 ? false : _e, rest = __rest(_a, ["children", "accessibilityRole", "accessibilityLabel", "accessibilityHint", "activeOpacity", "fullWidth", "hasBorder", "inverted", "inList", "onPress", "testID", "standalone"]);
+    return (_jsx(StyledActionWrapper, __assign({ ref: ref, hasBorder: hasBorder, inverted: inverted, testID: testID, inList: inList }, rest, { children: _jsx(TouchableOpacity, { activeOpacity: activeOpacity, accessible: true, accessibilityRole: accessibilityRole, accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint, onPress: onPress, children: _jsx(StyledActionInner, { fullWidth: fullWidth, inList: inList, standalone: standalone, children: children }) }) })));
 });
 var Action = forwardRef(function (_a, ref) {
-    var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'link' : _b, accessibilityLabel = _a.accessibilityLabel, accessibilityHint = _a.accessibilityHint, children = _a.children, _c = _a.fullWidth, fullWidth = _c === void 0 ? false : _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, _f = _a.standalone, standalone = _f === void 0 ? false : _f, rest = __rest(_a, ["accessibilityRole", "accessibilityLabel", "accessibilityHint", "children", "fullWidth", "inverted", "inline", "onPress", "testID", "iconLeft", "iconRight", "standalone"]);
+    var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'link' : _b, accessibilityLabel = _a.accessibilityLabel, accessibilityHint = _a.accessibilityHint, children = _a.children, _c = _a.fullWidth, fullWidth = _c === void 0 ? false : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, onPress = _a.onPress, testID = _a.testID, iconLeft = _a.iconLeft, iconRight = _a.iconRight, _e = _a.standalone, standalone = _e === void 0 ? false : _e, _f = _a.badgeVariant, badgeVariant = _f === void 0 ? 'info' : _f, badgeText = _a.badgeText, hint = _a.hint, rest = __rest(_a, ["accessibilityRole", "accessibilityLabel", "accessibilityHint", "children", "fullWidth", "inverted", "onPress", "testID", "iconLeft", "iconRight", "standalone", "badgeVariant", "badgeText", "hint"]);
     var smallAndUp = useBreakpoint().smallAndUp;
-    return (_jsxs(ActionWrapper, __assign({ ref: ref, accessibilityRole: accessibilityRole, accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint, fullWidth: fullWidth, inverted: inverted, inline: inline, onPress: onPress, testID: testID, standalone: standalone }, rest, { children: [iconLeft ? (_jsx(StyledLeftIcon, { inverted: inverted, name: iconLeft, size: 16 })) : null, typeof children === 'string' ? (_jsx(StyledActionText, { smallAndUp: smallAndUp, inverted: inverted, inList: rest === null || rest === void 0 ? void 0 : rest.inList, children: children })) : (_jsx(StyledActionNodeWrapper, { children: children })), iconRight ? (_jsx(StyledRightIcon, { inverted: inverted, name: iconRight, size: 16 })) : null] })));
+    return (_jsxs(ActionWrapper, __assign({ ref: ref, accessibilityRole: accessibilityRole, accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint, fullWidth: fullWidth, inverted: inverted, onPress: onPress, testID: testID, standalone: standalone, hint: hint, badgeText: badgeText }, rest, { children: [iconLeft ? (_jsx(StyledLeftIcon, { inverted: inverted, name: iconLeft, size: 16 })) : null, _jsxs(View, { children: [typeof children === 'string' ? (_jsxs(StyledTextWrapper, { children: [_jsx(StyledActionText, { smallAndUp: smallAndUp, inverted: inverted, children: children }), badgeText ? (_jsx(Badge, { variant: badgeVariant, children: badgeText })) : null] })) : (_jsx(StyledActionNodeWrapper, { children: children })), hint ? (_jsx(StyledHintText, { inverted: inverted, children: hint })) : null] }), iconRight ? (_jsx(StyledRightIcon, { inverted: inverted, name: iconRight, size: 16 })) : null] })));
 });
 export { ActionList, Action };

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

@@ -5,36 +5,53 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 import { numToPx } from '@ovotech/element-core';
 import styled, { css } from '../../styled.native';
 import { styledComponentWithBreakpoints } from '../../utils';
+import { HintText } from '../HintText';
 import { Icon } from '../Icon';
 var StyledList = styled.View(function (_a) {
-    var core = _a.theme.core, smallAndUp = _a.smallAndUp;
-    return 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  "])), numToPx(smallAndUp ? core.space[3] : core.space[2]), numToPx(smallAndUp ? core.space[3] : core.space[2]));
+    var theme = _a.theme, smallAndUp = _a.smallAndUp;
+    return 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  "])), numToPx(smallAndUp ? theme.space[300] : theme.space[200]), numToPx(smallAndUp ? theme.space[300] : theme.space[200]));
 });
 export var StyledActionList = styledComponentWithBreakpoints(StyledList);
 export var StyledActionWrapper = styled.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 ? numToPx(core.borderWidth.small) : 0, ";\n  border-bottom-style: solid;\n  border-bottom-color: ").concat(inverted ? semantic.inverted.border : semantic.border.graphic, ";\n");
+    var theme = _a.theme, hasBorder = _a.hasBorder, inverted = _a.inverted, inList = _a.inList, hint = _a.hint, badgeText = _a.badgeText;
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    width: 100%;\n    align-self: flex-start;\n    border-bottom-width: ", ";\n    border-bottom-style: solid;\n    border-bottom-color: ", ";\n    padding: ", " 0;\n  "], ["\n    width: 100%;\n    align-self: flex-start;\n    border-bottom-width: ", ";\n    border-bottom-style: solid;\n    border-bottom-color: ", ";\n    padding: ", " 0;\n  "])), hasBorder ? numToPx(theme.border.width.sm) : 0, inverted
+        ? theme.color.surface.dim
+        : theme.color.brand.fixed.onBrand, inList && (hint || badgeText) ? numToPx(theme.space[200]) : 0);
 });
 export var StyledActionInner = styled.View(function (_a) {
-    var fullWidth = _a.fullWidth, inline = _a.inline, standalone = _a.standalone;
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: row;\n    justify-content: ", ";\n    align-items: center;\n    min-height: ", ";\n  "], ["\n    display: flex;\n    flex-direction: row;\n    justify-content: ", ";\n    align-items: center;\n    min-height: ", ";\n  "])), fullWidth ? 'space-between' : 'flex-start', inline || standalone ? '' : '44px');
+    var fullWidth = _a.fullWidth, standalone = _a.standalone;
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    flex-direction: row;\n    justify-content: ", ";\n    align-items: center;\n    min-height: ", ";\n  "], ["\n    flex-direction: row;\n    justify-content: ", ";\n    align-items: center;\n    min-height: ", ";\n  "])), fullWidth ? 'space-between' : 'flex-start', standalone ? '' : '44px');
 });
 export var StyledActionText = styled.Text(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp, _c = _a.inverted, inverted = _c === void 0 ? false : _c, _d = _a.inList, inList = _d === void 0 ? false : _d;
+    var theme = _a.theme, smallAndUp = _a.smallAndUp, _b = _a.inverted, inverted = _b === void 0 ? false : _b;
     var fontSize = smallAndUp
-        ? core.fontSize.body.large
-        : core.fontSize.body.small;
-    return 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, numToPx(fontSize), numToPx(core.lineHeight.body.small), inList ? 1 : 'none');
+        ? theme.font.size.md.mediaQuery.lg
+        : theme.font.size.md.mediaQuery.sm;
+    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    color: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n  "], ["\n    color: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n  "])), inverted
+        ? theme.color.surface.bright
+        : theme.color.surface.onSurface, theme.native.font.family.bold, numToPx(fontSize), numToPx(theme.font.lineHeight.md.mediaQuery.sm));
 });
-export var StyledActionNodeWrapper = styled.View(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex: 1;\n  flex-direction: row;\n"], ["\n  display: flex;\n  flex: 1;\n  flex-direction: row;\n"])));
+export var StyledActionNodeWrapper = styled.View(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  flex: 1;\n  flex-direction: row;\n"], ["\n  display: flex;\n  flex: 1;\n  flex-direction: row;\n"])));
 export var StyledRightIcon = styled(Icon)(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, inverted = _a.inverted;
-    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    color: ", ";\n    margin-left: ", ";\n    margin-top: 2px; /* compensation for the line-height of the text */\n  "], ["\n    color: ", ";\n    margin-left: ", ";\n    margin-top: 2px; /* compensation for the line-height of the text */\n  "])), inverted ? semantic.inverted.message.base : semantic.message.base, numToPx(core.space[1]));
+    var theme = _a.theme, inverted = _a.inverted;
+    return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    color: ", ";\n    margin-left: ", ";\n    margin-top: 2px; /* compensation for the line-height of the text */\n  "], ["\n    color: ", ";\n    margin-left: ", ";\n    margin-top: 2px; /* compensation for the line-height of the text */\n  "])), inverted
+        ? theme.color.surface.bright
+        : theme.color.surface.onSurface, numToPx(theme.space[100]));
 });
 export var StyledLeftIcon = styled(Icon)(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, inverted = _a.inverted;
-    return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    color: ", ";\n    margin-right: ", ";\n    margin-top: ", ";\n    align-self: flex-start;\n  "], ["\n    color: ", ";\n    margin-right: ", ";\n    margin-top: ", ";\n    align-self: flex-start;\n  "])), inverted ? semantic.inverted.message.base : semantic.message.base, numToPx(core.space[1]), numToPx(core.space[1]));
+    var theme = _a.theme, inverted = _a.inverted;
+    return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    color: ", ";\n    margin-right: ", ";\n  "], ["\n    color: ", ";\n    margin-right: ", ";\n  "])), inverted
+        ? theme.color.surface.bright
+        : theme.color.surface.onSurface, numToPx(theme.space[100]));
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+export var StyledTextWrapper = styled.View(function (_a) {
+    var theme = _a.theme;
+    return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    flex-direction: row;\n    align-items: center;\n    gap: ", ";\n  "], ["\n    flex-direction: row;\n    align-items: center;\n    gap: ", ";\n  "])), numToPx(theme.space[200]));
+});
+export var StyledHintText = styled(HintText)(function (_a) {
+    var theme = _a.theme, _b = _a.inverted, inverted = _b === void 0 ? false : _b;
+    return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    color: ", ";\n  "], ["\n    color: ", ";\n  "])), inverted
+        ? theme.color.surface.bright
+        : theme.color.surface.onSurfaceVariant);
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;