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

package/dist/esm/components/LabelText/LabelText.js

@@ -6,11 +6,14 @@ import { numToPx } from '@ovotech/element-core';
 import styled, { css } from '../../styled.native';
 import { styledComponentWithBreakpoints } from '../../utils';
 var StyledLabelText = styled.Text(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
+    var theme = _a.theme, smallAndUp = _a.smallAndUp;
     var fontSize = smallAndUp
-        ? core.fontSize.body.large
-        : core.fontSize.body.small;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n    "])), core.fontFamily.bodyBold.native, numToPx(core.lineHeight.body.small), semantic.message.base, numToPx(fontSize));
+        ? theme.font.size.md.mediaQuery.lg
+        : theme.font.size.md.mediaQuery.sm;
+    var lineHeight = smallAndUp
+        ? theme.font.lineHeight.md.mediaQuery.lg
+        : theme.font.lineHeight.md.mediaQuery.sm;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-family: ", ";\n    line-height: ", ";\n    color: ", ";\n    font-size: ", ";\n  "], ["\n    font-family: ", ";\n    line-height: ", ";\n    color: ", ";\n    font-size: ", ";\n  "])), theme.native.font.family.bold, numToPx(lineHeight), theme.color.surface.onSurface, numToPx(fontSize));
 });
 var LabelText = styledComponentWithBreakpoints(StyledLabelText);
 export { LabelText };

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

@@ -5,22 +5,22 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 import { numToPx } from '@ovotech/element-core';
 import styled, { css } from '../../styled.native';
 export var SquareBullet = styled.View(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, visible = _a.visible, smallAndUp = _a.smallAndUp;
+    var theme = _a.theme, visible = _a.visible, smallAndUp = _a.smallAndUp;
     var lineHeight = smallAndUp
-        ? core.lineHeight.body.large
-        : core.lineHeight.body.small;
-    var topMargin = (lineHeight - core.space[2]) / 2;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    align-self: flex-start;\n    width: ", ";\n    height: ", ";\n    margin-right: ", ";\n    margin-top: ", ";\n    background-color: ", ";\n  "], ["\n    align-self: flex-start;\n    width: ", ";\n    height: ", ";\n    margin-right: ", ";\n    margin-top: ", ";\n    background-color: ", ";\n  "])), numToPx(core.space[2]), numToPx(core.space[2]), numToPx(core.space[2]), numToPx(topMargin), visible ? semantic.message.base : 'transparent');
+        ? theme.font.lineHeight.md.mediaQuery.lg
+        : theme.font.lineHeight.md.mediaQuery.sm;
+    var topMargin = (lineHeight - theme.space[200]) / 2;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    align-self: flex-start;\n    width: ", ";\n    height: ", ";\n    margin-right: 10px;\n    margin-top: ", ";\n    background-color: ", ";\n    transform: rotate(-15deg);\n  "], ["\n    align-self: flex-start;\n    width: ", ";\n    height: ", ";\n    margin-right: 10px;\n    margin-top: ", ";\n    background-color: ", ";\n    transform: rotate(-15deg);\n  "])), numToPx(theme.space[200]), numToPx(theme.space[200]), numToPx(topMargin), visible ? theme.color.brand.brand : 'transparent');
 });
 export var TextBullet = styled.Text(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
+    var theme = _a.theme, smallAndUp = _a.smallAndUp;
     var fontSize = smallAndUp
-        ? core.fontSize.body.large
-        : core.fontSize.body.small;
+        ? theme.font.size.md.mediaQuery.lg
+        : theme.font.size.md.mediaQuery.sm;
     var lineHeight = smallAndUp
-        ? core.lineHeight.body.large
-        : core.lineHeight.body.small;
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      margin-right: ", ";\n      min-width: ", ";\n      min-height: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      text-align: left;\n      color: ", ";\n    "], ["\n      margin-right: ", ";\n      min-width: ", ";\n      min-height: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      text-align: left;\n      color: ", ";\n    "])), numToPx(core.space[1]), numToPx(core.space[3]), numToPx(core.space[3]), numToPx(fontSize), numToPx(lineHeight), semantic.message.base);
+        ? theme.font.lineHeight.md.mediaQuery.lg
+        : theme.font.lineHeight.md.mediaQuery.sm;
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    min-width: ", ";\n    min-height: ", ";\n    margin-right: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    text-align: left;\n    color: ", ";\n  "], ["\n    min-width: ", ";\n    min-height: ", ";\n    margin-right: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    text-align: left;\n    color: ", ";\n  "])), numToPx(theme.space[300]), numToPx(theme.space[300]), numToPx(theme.space[100]), theme.native.font.family.book, numToPx(fontSize), numToPx(lineHeight), theme.color.surface.onSurface);
 });
 export var FlexRow = styled.View(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex-direction: row;\n"], ["\n  flex-direction: row;\n"])));
 export var LiContent = styled.View(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  flex-direction: column;\n  flex: 1;\n"], ["\n  flex-direction: column;\n  flex: 1;\n"])));

package/dist/esm/components/Margin/Margin.js

@@ -26,8 +26,10 @@ import { useBreakpoint } from '../../hooks';
 import styled from '../../styled.native';
 import { responsiveStyle } from '../../utils';
 var StyledMargin = styled.View(function (_a) {
-    var space = _a.theme.core.space, mTop = _a.mTop, mBottom = _a.mBottom, mLeft = _a.mLeft, mRight = _a.mRight, horizontal = _a.horizontal, vertical = _a.vertical, all = _a.all, breakpoints = _a.breakpoints;
-    var formatter = function (spaceKey) { return numToPx(space[spaceKey]); };
+    var theme = _a.theme, mTop = _a.mTop, mBottom = _a.mBottom, mLeft = _a.mLeft, mRight = _a.mRight, horizontal = _a.horizontal, vertical = _a.vertical, all = _a.all, breakpoints = _a.breakpoints;
+    var formatter = function (spaceKey) {
+        return numToPx(theme.space[String(spaceKey * 100)]);
+    };
     return "\n    ".concat(horizontal
         ? "\n            ".concat(responsiveStyle('margin-left', horizontal, breakpoints, formatter), "\n            ").concat(responsiveStyle('margin-right', horizontal, breakpoints, formatter), "\n          ")
         : '', "\n    ").concat(vertical

package/dist/esm/components/NavHeader/NavHeader.js

@@ -1,15 +1,13 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import Animated, { Easing, FadeInDown, FadeInUp, FadeOutDown, FadeOutUp, useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
-import { useTheme } from '../../styled.native';
 import { Action } from '../ActionList';
-import { IconButton } from './IconButton';
-import { ActionWrapper, CollapsedTitle, CollapsedTitleWrapper, ExpandedTitle, IconButtonWrapper, NavContainer, NavWrapper, } from './NavHeader.styles';
+import { Button } from '../Button';
+import { BackActionWrapper, CollapsedTitle, CollapsedTitleWrapper, ExpandedTitle, NavContainer, NavWrapper, HeaderGap, } from './NavHeader.styles';
 var FADE_ANIMATION_DURATION = 200;
 export var NavHeader = function (_a) {
     var title = _a.title, scrolled = _a.scrolled, canGoBack = _a.canGoBack, rightActionConfig = _a.rightActionConfig, _b = _a.topOffset, topOffset = _b === void 0 ? 0 : _b, _c = _a.backButtonText, backButtonText = _c === void 0 ? 'Back' : _c, onHeaderHeightChange = _a.onHeaderHeightChange, onBackButtonPress = _a.onBackButtonPress;
     var hasRightAction = !!rightActionConfig;
     var hasTitle = title !== undefined && (title === null || title === void 0 ? void 0 : title.length) > 0;
-    var theme = useTheme();
     var layoutHeight = useSharedValue(0);
     var animatedHeightStyle = useAnimatedStyle(function () {
         return {
@@ -32,13 +30,5 @@ export var NavHeader = function (_a) {
     };
     // NavWrapper will recieve height of the NavContainer and animate it
     // content inside NavContainer is the only dynamic part of NavHeader
-    return (_jsx(NavWrapper, { collapsed: scrolled, style: animatedHeightStyle, children: _jsxs(NavContainer, { topOffset: topOffset, onLayout: onLayout, titleVisible: hasTitle, children: [_jsx(Animated.View, { style: {
-                        width: scrolled ? '33.3%' : '100%',
-                        // Important for maintaining white space above the title on main app screens.
-                        height: !canGoBack ? theme.core.space[10] : undefined,
-                    }, children: canGoBack && (_jsx(ActionWrapper, { collapsed: scrolled, children: _jsx(Action, { iconLeft: "chevron-left-small", inline: true, onPress: onBackButtonPress, children: backButtonText }) })) }), scrolled ? (_jsxs(_Fragment, { children: [_jsx(CollapsedTitleWrapper, { titleVisible: hasTitle, children: _jsx(CollapsedTitle, { numberOfLines: 1, ellipsizeMode: "tail", entering: FadeInDown.delay(FADE_ANIMATION_DURATION), exiting: FadeOutDown.duration(FADE_ANIMATION_DURATION), children: title }) }), _jsx(IconButtonWrapper, { children: _jsx(IconButton, { rightActionConfig: rightActionConfig, size: "small", animation: FadeInDown.delay(FADE_ANIMATION_DURATION) }) })] })) : (_jsxs(_Fragment, { children: [_jsx(ExpandedTitle
-                        // if we don't have right action leave more space for the title text in expanded state
-                        , { 
-                            // if we don't have right action leave more space for the title text in expanded state
-                            fullWidth: !scrolled && !hasRightAction, numberOfLines: 2, ellipsizeMode: "tail", hasBackButton: canGoBack, titleVisible: hasTitle, entering: FadeInUp.delay(FADE_ANIMATION_DURATION), exiting: FadeOutUp.duration(FADE_ANIMATION_DURATION), children: title }), _jsx(IconButtonWrapper, { children: _jsx(IconButton, { rightActionConfig: rightActionConfig, size: "large", animation: FadeInUp.delay(FADE_ANIMATION_DURATION) }) })] }))] }) }));
+    return (_jsx(NavWrapper, { collapsed: scrolled, style: animatedHeightStyle, children: _jsxs(NavContainer, { topOffset: topOffset, hasTitle: hasTitle, onLayout: onLayout, children: [_jsx(BackActionWrapper, { collapsed: scrolled, hasBackButton: canGoBack, children: canGoBack && (_jsx(Action, { standalone: true, iconLeft: "chevron-left-small", onPress: onBackButtonPress, children: backButtonText })) }), scrolled ? (_jsxs(_Fragment, { children: [_jsx(CollapsedTitleWrapper, { entering: FadeInDown.delay(FADE_ANIMATION_DURATION), exiting: FadeOutDown.duration(FADE_ANIMATION_DURATION), children: _jsx(CollapsedTitle, { numberOfLines: 1, ellipsizeMode: "tail", children: title }) }), _jsx(HeaderGap, { hasRightAction: hasRightAction }), hasRightAction && (_jsx(_Fragment, { children: _jsx(Animated.View, { entering: FadeInDown.delay(FADE_ANIMATION_DURATION), exiting: FadeOutDown.duration(FADE_ANIMATION_DURATION), accessibilityRole: "button", accessibilityLabel: rightActionConfig === null || rightActionConfig === void 0 ? void 0 : rightActionConfig.accessibilityLabel, accessibilityHint: rightActionConfig === null || rightActionConfig === void 0 ? void 0 : rightActionConfig.accessibilityHint, children: _jsx(Button, { iconRight: rightActionConfig.iconName, onPress: rightActionConfig.onActionPress }) }) }))] })) : (_jsxs(_Fragment, { children: [_jsx(ExpandedTitle, { hasRightAction: !hasRightAction, hasTitle: hasTitle, numberOfLines: 2, ellipsizeMode: "tail", hasBackButton: canGoBack, entering: FadeInUp.delay(FADE_ANIMATION_DURATION), exiting: FadeOutUp.duration(FADE_ANIMATION_DURATION), children: title }), hasRightAction && (_jsx(Animated.View, { entering: FadeInUp.delay(FADE_ANIMATION_DURATION), exiting: FadeOutUp.duration(FADE_ANIMATION_DURATION), accessibilityRole: "button", accessibilityLabel: rightActionConfig === null || rightActionConfig === void 0 ? void 0 : rightActionConfig.accessibilityLabel, accessibilityHint: rightActionConfig === null || rightActionConfig === void 0 ? void 0 : rightActionConfig.accessibilityHint, children: _jsx(Button, { iconRight: rightActionConfig.iconName, onPress: rightActionConfig.onActionPress }) }))] }))] }) }));
 };

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

@@ -7,43 +7,33 @@ import Animated from 'react-native-reanimated';
 import styled, { css } from '../../styled.native';
 var Z_INDEX = 1000;
 export var NavWrapper = styled(Animated.View)(function (_a) {
-    var _b = _a.theme, semantic = _b.semantic, core = _b.core, collapsed = _a.collapsed;
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    width: 100%;\n    position: absolute;\n\n    /* yes, it is not a good move, but we want header to be the topmost element on the screen and we can't control app zIndex */\n    z-index: ", ";\n    background-color: ", ";\n\n    ", "\n  "], ["\n    width: 100%;\n    position: absolute;\n\n    /* yes, it is not a good move, but we want header to be the topmost element on the screen and we can't control app zIndex */\n    z-index: ", ";\n    background-color: ", ";\n\n    ", "\n  "])), Z_INDEX, semantic.surface.base, collapsed
-        ? css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          border-bottom-width: ", ";\n          border-bottom-style: solid;\n          border-bottom-color: ", ";\n        "], ["\n          border-bottom-width: ", ";\n          border-bottom-style: solid;\n          border-bottom-color: ", ";\n        "])), numToPx(core.borderWidth.small), semantic.border.differentiated) : '');
+    var theme = _a.theme, collapsed = _a.collapsed;
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    width: 100%;\n    position: absolute;\n\n    /* yes, it is not a good move, but we want header to be the topmost element on the screen and we can't control app zIndex */\n    z-index: ", ";\n    background-color: ", ";\n\n    ", "\n  "], ["\n    width: 100%;\n    position: absolute;\n\n    /* yes, it is not a good move, but we want header to be the topmost element on the screen and we can't control app zIndex */\n    z-index: ", ";\n    background-color: ", ";\n\n    ", "\n  "])), Z_INDEX, theme.color.surface.surface, collapsed
+        ? css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          border-bottom-width: ", ";\n          border-bottom-style: solid;\n          border-bottom-color: ", ";\n        "], ["\n          border-bottom-width: ", ";\n          border-bottom-style: solid;\n          border-bottom-color: ", ";\n        "])), numToPx(theme.border.width.sm), theme.color.input.borderDim) : '');
 });
 export var NavContainer = styled.View(function (_a) {
-    var core = _a.theme.core, topOffset = _a.topOffset, titleVisible = _a.titleVisible;
-    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    position: absolute;\n\n    /* NavWrapper zIndex + 1 so it is always on top of the wrapper */\n    z-index: ", ";\n    width: ", ";\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n  "], ["\n    position: absolute;\n\n    /* NavWrapper zIndex + 1 so it is always on top of the wrapper */\n    z-index: ", ";\n    width: ", ";\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n  "])), Z_INDEX + 1, titleVisible ? '100%' : '50%', topOffset
+    var theme = _a.theme, topOffset = _a.topOffset, hasTitle = _a.hasTitle;
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    position: absolute;\n\n    /* NavWrapper zIndex + 1 so it is always on top of the wrapper */\n    z-index: ", ";\n    width: 100%;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n  "], ["\n    position: absolute;\n\n    /* NavWrapper zIndex + 1 so it is always on top of the wrapper */\n    z-index: ", ";\n    width: 100%;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n  "])), Z_INDEX + 1, topOffset
         ? topOffset
-        : numToPx(core.space[titleVisible ? 2 : 4]), numToPx(core.space[titleVisible ? 2 : 4]), numToPx(core.space[4]), numToPx(core.space[4]));
+        : numToPx(theme.space[hasTitle ? 200 : 400]), numToPx(theme.space[hasTitle ? 200 : 400]), numToPx(theme.space[400]), numToPx(theme.space[400]));
 });
 export var ExpandedTitle = styled(Animated.Text)(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, hasBackButton = _a.hasBackButton, fullWidth = _a.fullWidth, titleVisible = _a.titleVisible;
-    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    width: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n    ", ";\n  "], ["\n    width: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n    ", ";\n  "])), fullWidth ? '100%' : '65%', core.fontFamily.heading.native, numToPx(core.fontSize.heading1[hasBackButton ? 'small' : 'large']), numToPx(hasBackButton ? core.lineHeight.heading1.small : core.space[13]), semantic.message.branded, !titleVisible && 'height: 0;');
+    var theme = _a.theme, hasBackButton = _a.hasBackButton, hasRightAction = _a.hasRightAction, hasTitle = _a.hasTitle;
+    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    width: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n    ", ";\n  "], ["\n    width: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n    ", ";\n  "])), hasRightAction ? '100%' : '65%', theme.native.font.family.bold, numToPx(theme.font.size['4xl'].mediaQuery[hasBackButton ? 'sm' : 'lg']), numToPx(hasBackButton
+        ? theme.font.lineHeight['4xl'].mediaQuery.sm
+        : theme.space[1300]), theme.color.brand.brand, !hasTitle && 'height: 0;');
 });
-export var CollapsedTitleWrapper = styled(Animated.View)(function (_a) {
-    var titleVisible = _a.titleVisible;
-    return "\n  width: ".concat(titleVisible ? '33.3%' : '0', ";\n  align-items: center;\n  justify-content: center;\n");
+export var CollapsedTitleWrapper = styled(Animated.View)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 33.3%;\n  align-items: center;\n"], ["\n  width: 33.3%;\n  align-items: center;\n"])));
+export var CollapsedTitle = styled.Text(function (_a) {
+    var theme = _a.theme;
+    return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "])), theme.native.font.family.bold, numToPx(theme.font.size.xl.mediaQuery.sm), numToPx(theme.font.lineHeight.xl.mediaQuery.sm), theme.color.brand.brand);
 });
-export var CollapsedTitle = styled(Animated.Text)(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic;
-    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "])), core.fontFamily.heading.native, numToPx(core.fontSize.heading4.small), numToPx(core.lineHeight.heading4.small), semantic.message.branded);
+export var HeaderGap = styled.View(function (_a) {
+    var hasRightAction = _a.hasRightAction;
+    return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    width: ", ";\n  "], ["\n    width: ", ";\n  "])), hasRightAction ? '20%' : '33.3%');
 });
-export var IconButtonWrapper = styled.View(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  width: 33.3%;\n  flex-direction: row;\n  justify-content: flex-end;\n"], ["\n  width: 33.3%;\n  flex-direction: row;\n  justify-content: flex-end;\n"])));
-var iconButtonSharedStyles = css(function (_a) {
-    var semantic = _a.theme.semantic;
-    return "\n    border-radius: 100px;\n    background-color: ".concat(semantic.inverted.surface, ";\n    align-items: center;\n    justify-content: center;\n");
+export var BackActionWrapper = styled(Animated.View)(function (_a) {
+    var theme = _a.theme, collapsed = _a.collapsed, hasBackButton = _a.hasBackButton;
+    return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    margin-bottom: ", ";\n    width: ", ";\n\n    /* Important for maintaining white space above the title on main app screens */\n    height: ", ";\n  "], ["\n    margin-bottom: ", ";\n    width: ", ";\n\n    /* Important for maintaining white space above the title on main app screens */\n    height: ", ";\n  "])), collapsed ? '0' : numToPx(theme.space[400]), collapsed ? '33.3%' : '100%', hasBackButton ? numToPx(theme.space[1000]) : undefined);
 });
-export var StyledIconButtonS = styled(Animated.View)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: 28px;\n  height: 28px;\n  opacity: ", ";\n  ", ";\n"], ["\n  width: 28px;\n  height: 28px;\n  opacity: ", ";\n  ", ";\n"])), function (_a) {
-    var $pressed = _a.$pressed;
-    return ($pressed ? 0.8 : 1);
-}, iconButtonSharedStyles);
-export var StyledIconButtonL = styled(Animated.View)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  width: 36px;\n  height: 36px;\n  opacity: ", ";\n  ", ";\n"], ["\n  width: 36px;\n  height: 36px;\n  opacity: ", ";\n  ", ";\n"])), function (_a) {
-    var $pressed = _a.$pressed;
-    return ($pressed ? 0.8 : 1);
-}, iconButtonSharedStyles);
-export var ActionWrapper = styled.View(function (_a) {
-    var core = _a.theme.core, collapsed = _a.collapsed;
-    return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    margin-bottom: ", ";\n  "], ["\n    margin-bottom: ", ";\n  "])), collapsed ? '0' : numToPx(core.space[2]));
-});
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

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

@@ -31,40 +31,40 @@ import { View } from 'react-native';
 import styled, { css } from '../../styled.native';
 import { Icon } from '../Icon';
 var NotificationBox = styled.View(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, noMargin = _a.noMargin;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    position: relative;\n    margin-bottom: ", ";\n    border: ", " solid\n      ", ";\n    border-radius: ", ";\n    overflow: hidden;\n  "], ["\n    position: relative;\n    margin-bottom: ", ";\n    border: ", " solid\n      ", ";\n    border-radius: ", ";\n    overflow: hidden;\n  "])), noMargin ? 0 : numToPx(core.space[4]), numToPx(core.borderWidth.small), semantic.surface.elevated, numToPx(core.radius.max));
+    var theme = _a.theme, noMargin = _a.noMargin, variant = _a.variant;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    position: relative;\n    margin-bottom: ", ";\n    border: ", " solid\n      ", ";\n    border-radius: ", ";\n    overflow: hidden;\n  "], ["\n    position: relative;\n    margin-bottom: ", ";\n    border: ", " solid\n      ", ";\n    border-radius: ", ";\n    overflow: hidden;\n  "])), noMargin ? 0 : numToPx(theme.space[400]), numToPx(theme.border.width.sm), theme.color.alert[variant], numToPx(theme.border.radius['2xl']));
 });
 export var NotificationContentBox = styled.View(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic;
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      background-color: ", ";\n      padding-top: ", ";\n      padding-bottom: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n    "], ["\n      background-color: ", ";\n      padding-top: ", ";\n      padding-bottom: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n    "])), semantic.surface.elevated, numToPx(core.space[2]), numToPx(core.space[3]), numToPx(core.space[4]), numToPx(core.space[4]));
+    var theme = _a.theme;
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    background-color: ", ";\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n  "], ["\n    background-color: ", ";\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n  "])), theme.color.surface.bright, numToPx(theme.space[200]), numToPx(theme.space[300]), numToPx(theme.space[400]), numToPx(theme.space[400]));
 });
 export var NotificationTitleBox = styled.View(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, variant = _a.variant, dismissible = _a.dismissible;
-    var currentVariant = semantic[variant];
-    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    background-color: ", ";\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n    min-height: 44px;\n  "], ["\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    background-color: ", ";\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n    min-height: 44px;\n  "])), currentVariant.surface, numToPx(core.space[2]), numToPx(core.space[2]), numToPx(core.space[4]), dismissible
-        ? numToPx(core.space[3])
-        : numToPx(core.space[4]));
+    var theme = _a.theme, variant = _a.variant, dismissible = _a.dismissible;
+    var currentVariant = theme.color.alert["".concat(variant, "Tint")];
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    background-color: ", ";\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n    min-height: 44px;\n  "], ["\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    background-color: ", ";\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n    min-height: 44px;\n  "])), currentVariant, numToPx(theme.space[200]), numToPx(theme.space[200]), numToPx(theme.space[400]), dismissible
+        ? numToPx(theme.space[300])
+        : numToPx(theme.space[400]));
 });
 var NotificationTitleText = styled.Text(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, variant = _a.variant;
-    var currentVariant = semantic[variant];
-    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    font-size: ", ";\n    font-family: ", ";\n    color: ", ";\n  "], ["\n    font-size: ", ";\n    font-family: ", ";\n    color: ", ";\n  "])), numToPx(core.fontSize.body.small), core.fontFamily.bodyBold.native, currentVariant.message);
+    var theme = _a.theme, variant = _a.variant;
+    var currentVariant = theme.color.alert[variant];
+    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    font-size: ", ";\n    font-family: ", ";\n    color: ", ";\n  "], ["\n    font-size: ", ";\n    font-family: ", ";\n    color: ", ";\n  "])), numToPx(theme.font.size.md.mediaQuery.sm), theme.native.font.family.bold, currentVariant);
 });
 var DismissButton = styled.TouchableOpacity(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic;
-    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      width: 28px;\n      height: 28px;\n      background: ", ";\n      border: ", " solid\n        ", ";\n      border-radius: ", ";\n    "], ["\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      width: 28px;\n      height: 28px;\n      background: ", ";\n      border: ", " solid\n        ", ";\n      border-radius: ", ";\n    "])), semantic.inverted.surface, numToPx(core.borderWidth.small), core.color.brand.forest, numToPx(core.radius.max));
+    var theme = _a.theme;
+    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 28px;\n    height: 28px;\n    background: ", ";\n    border: ", " solid ", ";\n    border-radius: ", ";\n  "], ["\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 28px;\n    height: 28px;\n    background: ", ";\n    border: ", " solid ", ";\n    border-radius: ", ";\n  "])), theme.button.surface.color.bg, numToPx(theme.border.width.sm), theme.color.surface.link, numToPx(theme.border.radius['2xl']));
 });
 var StyledIcon = styled(Icon)(function (_a) {
-    var semantic = _a.theme.semantic;
-    return "\n    color: ".concat(semantic.inverted.message.base, ";\n  ");
+    var theme = _a.theme;
+    return "\n    color: ".concat(theme.color.surface.bright, ";\n  ");
 });
 export var Notification = forwardRef(function (_a, ref) {
-    var _b = _a.variant, variant = _b === void 0 ? 'neutral' : _b, children = _a.children, title = _a.title, noMargin = _a.noMargin, dismissible = _a.dismissible, onDismiss = _a.onDismiss, rest = __rest(_a, ["variant", "children", "title", "noMargin", "dismissible", "onDismiss"]);
+    var _b = _a.variant, variant = _b === void 0 ? 'info' : _b, children = _a.children, title = _a.title, noMargin = _a.noMargin, dismissible = _a.dismissible, onDismiss = _a.onDismiss, rest = __rest(_a, ["variant", "children", "title", "noMargin", "dismissible", "onDismiss"]);
     var _c = useState(false), dismissed = _c[0], setDismissed = _c[1];
     if (dismissed || (!title && !children)) {
         return null;
     }
-    return (_jsx(View, __assign({ ref: ref }, rest, { children: _jsxs(NotificationBox, { noMargin: noMargin, testID: "nb-notification", children: [_jsxs(NotificationTitleBox, { variant: variant, dismissible: dismissible, children: [_jsx(NotificationTitleText, { variant: variant, children: title }), dismissible ? (_jsx(DismissButton, { accessible: true, accessibilityLabel: "Dismiss", testID: "nb-notification-dismiss", onPress: function () {
+    return (_jsx(View, __assign({ ref: ref }, rest, { children: _jsxs(NotificationBox, { variant: variant, noMargin: noMargin, testID: "nb-notification", children: [_jsxs(NotificationTitleBox, { variant: variant, dismissible: dismissible, children: [_jsx(NotificationTitleText, { variant: variant, children: title }), dismissible ? (_jsx(DismissButton, { accessible: true, accessibilityLabel: "Dismiss", testID: "nb-notification-dismiss", onPress: function () {
                                 setDismissed(true);
                                 if (onDismiss) {
                                     onDismiss();

package/dist/esm/components/P/P.js

@@ -19,8 +19,10 @@ import { forwardRef } from 'react';
 import { useBreakpoint } from '../../hooks';
 import styled, { css } from '../../styled.native';
 var StyledP = styled.Text(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp, inverted = _a.inverted;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "])), core.fontFamily.body.native, numToPx(core.fontSize.body[smallAndUp ? 'large' : 'small']), numToPx(core.lineHeight.body[smallAndUp ? 'large' : 'small']), inverted ? semantic.inverted.message.base : semantic.message.base);
+    var theme = _a.theme, smallAndUp = _a.smallAndUp, inverted = _a.inverted, _b = _a.size, size = _b === void 0 ? 'md' : _b;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      color: ", ";\n    "], ["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      color: ", ";\n    "])), theme.native.font.family.book, numToPx(theme.font.size[size].mediaQuery[smallAndUp ? 'lg' : 'sm']), numToPx(theme.font.lineHeight[size].mediaQuery[smallAndUp ? 'lg' : 'sm']), inverted
+        ? theme.color.surface.surface
+        : theme.color.surface.onSurface);
 });
 export var P = forwardRef(function (props, ref) {
     var breakpoints = useBreakpoint();

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

@@ -6,7 +6,7 @@ import { numToPx } from '@ovotech/element-core';
 import { Pressable } from 'react-native';
 import styled, { css } from '../../styled.native';
 export var StyledPressable = styled(Pressable)(function (_a) {
-    var core = _a.theme.core, focused = _a.focused;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    position: absolute;\n    width: ", ";\n    z-index: 1;\n    top: ", ";\n    right: ", ";\n  "], ["\n    display: flex;\n    align-items: center;\n    position: absolute;\n    width: ", ";\n    z-index: 1;\n    top: ", ";\n    right: ", ";\n  "])), numToPx(core.space[4]), focused ? '16px' : '14px', numToPx(core.space[3]));
+    var theme = _a.theme, focused = _a.focused;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    position: absolute;\n    width: ", ";\n    z-index: 1;\n    top: ", ";\n    right: ", ";\n  "], ["\n    display: flex;\n    align-items: center;\n    position: absolute;\n    width: ", ";\n    z-index: 1;\n    top: ", ";\n    right: ", ";\n  "])), numToPx(theme.space[400]), focused ? '16px' : '14px', numToPx(theme.space[300]));
 });
 var templateObject_1;

package/dist/esm/components/ProductCarousel/NavigationDots.js

@@ -20,9 +20,9 @@ var Dot = function (_a) {
             outputRange = [-width, 0, width];
         }
         var backgroundColor = interpolateColor(animatedValue === null || animatedValue === void 0 ? void 0 : animatedValue.value, inputRange, [
-            theme.core.color.brand.forest,
-            theme.core.color.brand.energised,
-            theme.core.color.brand.forest,
+            theme.color.brand.dim,
+            theme.color.brand.bold,
+            theme.color.brand.dim,
         ]);
         return {
             transform: [
@@ -38,7 +38,7 @@ var Dot = function (_a) {
 var SDotsContainer = styled.View(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  bottom: 20px;\n  flex-direction: row;\n  gap: 10px;\n"], ["\n  position: absolute;\n  bottom: 20px;\n  flex-direction: row;\n  gap: 10px;\n"])));
 var SDot = styled.View(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  width: ", "px;\n  height: ", "px;\n  border-radius: 50px;\n  overflow: hidden;\n"], ["\n  background-color: ", ";\n  width: ", "px;\n  height: ", "px;\n  border-radius: 50px;\n  overflow: hidden;\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.core.color.brand.forest;
+    return theme.color.brand.dim;
 }, function (_a) {
     var $width = _a.$width;
     return $width;

package/dist/esm/components/ProductCarousel/ProductCarousel.js

@@ -45,12 +45,12 @@ export function ProductCarousel(_a) {
                                     bottom: 32,
                                     left: 16,
                                     right: 16,
-                                }, children: _jsx(Icon, { name: "arrow-left", size: 32, color: theme.core.color.brand.white }) }), _jsx(SActionPressable, { "$next": true, onPress: function () { var _a; return (_a = carouselRef.current) === null || _a === void 0 ? void 0 : _a.next(); }, "$top": arrowsDistanceFromTop, mediumAndUp: mediumAndUp, hitSlop: {
+                                }, children: _jsx(Icon, { name: "arrow-left", size: 32, color: theme.color.brand.onBrand }) }), _jsx(SActionPressable, { "$next": true, onPress: function () { var _a; return (_a = carouselRef.current) === null || _a === void 0 ? void 0 : _a.next(); }, "$top": arrowsDistanceFromTop, mediumAndUp: mediumAndUp, hitSlop: {
                                     top: 32,
                                     bottom: 32,
                                     left: 16,
                                     right: 16,
-                                }, children: _jsx(Icon, { name: "arrow-right", size: 32, color: theme.core.color.brand.white }) })] })), showDots && data.length > 1 && (_jsx(NavigationDots, { data: data, animatedValue: progressValue }))] })] }));
+                                }, children: _jsx(Icon, { name: "arrow-right", size: 32, color: theme.color.brand.onBrand }) })] })), showDots && data.length > 1 && (_jsx(NavigationDots, { data: data, animatedValue: progressValue }))] })] }));
 }
 var Card = function (_a) {
     var children = _a.children, animationValue = _a.animationValue, height = _a.height, width = _a.width;
@@ -91,8 +91,8 @@ var SActionPressable = styled.Pressable(templateObject_2 || (templateObject_2 =
 }, function (_a) {
     var theme = _a.theme, $next = _a.$next, mediumAndUp = _a.mediumAndUp;
     return $next
-        ? "right: ".concat(mediumAndUp ? '25%' : numToPx(theme.core.space[14]))
-        : "left: ".concat(mediumAndUp ? '25%' : numToPx(theme.core.space[14]));
+        ? "right: ".concat(mediumAndUp ? '25%' : numToPx(theme.space[1400]))
+        : "left: ".concat(mediumAndUp ? '25%' : numToPx(theme.space[1400]));
 });
 var SkewLine = function (props) { return (_jsx(Svg, __assign({ width: "100%", height: 69 }, props, { children: _jsx(Path, { fill: "#0A9828", d: "M768 0 0 68.776h768V0Z" }) }))); };
 var templateObject_1, templateObject_2;

package/dist/esm/components/Radio/Radio.js

@@ -28,28 +28,28 @@ import styled from '../../styled.native';
 import { HintText } from '../HintText';
 import { LabelText } from '../LabelText';
 var StyledRadioInputWrapper = styled.View(function (_a) {
-    var core = _a.theme.core;
-    return "\n      width: ".concat(numToPx(core.space[6]), ";\n      height: ").concat(numToPx(core.space[6]), ";\n      margin-right: 10px;\n    ");
+    var theme = _a.theme;
+    return "\n      width: ".concat(numToPx(theme.space[600]), ";\n      height: ").concat(numToPx(theme.space[600]), ";\n      margin-right: 10px;\n    ");
 });
 var StyledRadioInput = styled.View(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, invalid = _a.invalid, checked = _a.checked;
-    return "\n      width: ".concat(numToPx(core.space[6]), ";\n      height: ").concat(numToPx(core.space[6]), ";\n      border: ").concat(numToPx(core.borderWidth.small), " solid;\n      align-items: center;\n      justify-content: center;\n      border-radius: ").concat(numToPx(core.space[6]), ";\n      border-color: ").concat(invalid
-        ? semantic.message.error
+    var theme = _a.theme, invalid = _a.invalid, checked = _a.checked;
+    return "\n      width: ".concat(numToPx(theme.space[600]), ";\n      height: ").concat(numToPx(theme.space[600]), ";\n      border: ").concat(numToPx(theme.border.width.md), " solid;\n      align-items: center;\n      justify-content: center;\n      border-radius: ").concat(numToPx(theme.space[600]), ";\n      border-color: ").concat(invalid
+        ? theme.input.color.borderError
         : checked
-            ? core.color.blue.dark
-            : semantic.border.functional, ";\n      background: ").concat(checked ? core.color.blue.lightest : 'transparent', ";\n    ");
+            ? theme.input.color.selected
+            : theme.input.color.border, ";\n      background: ").concat(checked ? theme.input.color.selectedTint : 'transparent', ";\n    ");
 });
 var StyledRadioInputDot = styled.View(function (_a) {
-    var core = _a.theme.core, checked = _a.checked;
-    return "\n      width: ".concat(numToPx(core.space[3]), ";\n      height: ").concat(numToPx(core.space[3]), ";\n      border-radius: ").concat(numToPx(core.space[3]), ";\n      background: ").concat(core.color.blue.dark, ";\n      opacity: ").concat(checked ? 1 : 0, ";\n    ");
+    var theme = _a.theme, checked = _a.checked;
+    return "\n      width: ".concat(numToPx(theme.space[300]), ";\n      height: ").concat(numToPx(theme.space[300]), ";\n      border-radius: ").concat(numToPx(theme.space[300]), ";\n      background: ").concat(theme.input.color.selected, ";\n      opacity: ").concat(checked ? 1 : 0, ";\n    ");
 });
 var Input = function (_a) {
     var checked = _a.checked, invalid = _a.invalid, testID = _a.testID, rest = __rest(_a, ["checked", "invalid", "testID"]);
     return (_jsx(StyledRadioInputWrapper, __assign({}, rest, { children: _jsx(StyledRadioInput, { invalid: invalid, checked: checked, testID: testID, children: _jsx(StyledRadioInputDot, { checked: checked }) }) })));
 };
 var StyledWrapper = styled.View(function (_a) {
-    var core = _a.theme.core;
-    return "\n    padding-top: ".concat(numToPx(core.space[3]), ";\n    flex-direction: row;\n  ");
+    var theme = _a.theme;
+    return "\n    padding-top: ".concat(numToPx(theme.space[300]), ";\n    flex-direction: row;\n  ");
 });
 var Radio = forwardRef(function (_a, ref) {
     var label = _a.label, hint = _a.hint, checked = _a.checked, invalid = _a.invalid, 

package/dist/esm/components/RadioCard/RadioCard.js

@@ -32,35 +32,35 @@ import { css } from 'styled-components';
 import styled from '../../styled.native';
 import { LabelText } from '../LabelText';
 var StyledRadioInputWrapper = styled.View(function (_a) {
-    var core = _a.theme.core;
-    return "\n      width: ".concat(numToPx(core.space[6]), ";\n      height: ").concat(numToPx(core.space[6]), ";\n      margin-top: ").concat(numToPx(core.space[2]), ";\n    ");
+    var theme = _a.theme;
+    return "\n      width: ".concat(numToPx(theme.space[600]), ";\n      height: ").concat(numToPx(theme.space[600]), ";\n      margin-top: ").concat(numToPx(theme.space[200]), ";\n    ");
 });
 var StyledRadioInput = styled.View(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, invalid = _a.invalid, checked = _a.checked;
-    return "\n      width: ".concat(numToPx(core.space[6]), ";\n      height: ").concat(numToPx(core.space[6]), ";\n      border: ").concat(numToPx(core.borderWidth.small), " solid;\n      align-items: center;\n      justify-content: center;\n      border-radius: ").concat(numToPx(core.space[6]), ";\n      border-color: ").concat(invalid
-        ? semantic.message.error
+    var theme = _a.theme, invalid = _a.invalid, checked = _a.checked;
+    return "\n      width: ".concat(numToPx(theme.space[600]), ";\n      height: ").concat(numToPx(theme.space[600]), ";\n      border: ").concat(numToPx(theme.border.width.md), " solid;\n      align-items: center;\n      justify-content: center;\n      border-radius: ").concat(numToPx(theme.space[600]), ";\n      border-color: ").concat(invalid
+        ? theme.input.color.borderError
         : checked
-            ? core.color.blue.dark
-            : semantic.border.functional, ";\n      background: ").concat(checked ? core.color.blue.lightest : 'transparent', ";\n    ");
+            ? theme.input.color.selected
+            : theme.input.color.border, ";\n      background: ").concat(checked ? theme.input.color.selectedTint : 'transparent', ";\n    ");
 });
 var StyledRadioInputDot = styled.View(function (_a) {
-    var core = _a.theme.core, checked = _a.checked;
-    return "\n      width: ".concat(numToPx(core.space[3]), ";\n      height: ").concat(numToPx(core.space[3]), ";\n      border-radius: ").concat(numToPx(core.space[3]), ";\n      background: ").concat(core.color.blue.dark, ";\n      opacity: ").concat(checked ? 1 : 0, ";\n    ");
+    var theme = _a.theme, checked = _a.checked;
+    return "\n      width: ".concat(numToPx(theme.space[300]), ";\n      height: ").concat(numToPx(theme.space[300]), ";\n      border-radius: ").concat(numToPx(theme.space[300]), ";\n      background: ").concat(theme.input.color.selected, ";\n      opacity: ").concat(checked ? 1 : 0, ";\n    ");
 });
 var Input = function (_a) {
     var checked = _a.checked, invalid = _a.invalid, testID = _a.testID, rest = __rest(_a, ["checked", "invalid", "testID"]);
     return (_jsx(StyledRadioInputWrapper, __assign({}, rest, { children: _jsx(StyledRadioInput, { invalid: invalid, checked: checked, testID: testID, children: _jsx(StyledRadioInputDot, { checked: checked }) }) })));
 };
 var StyledWrapper = styled.View(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, checked = _a.checked, invalid = _a.invalid;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    align-items: center;\n    background: ", ";\n    padding: ", ";\n    min-width: 82px;\n    border-radius: ", ";\n    border: ", " solid;\n    border-color: ", ";\n  "], ["\n    align-items: center;\n    background: ", ";\n    padding: ", ";\n    min-width: 82px;\n    border-radius: ", ";\n    border: ", " solid;\n    border-color: ", ";\n  "])), semantic.surface.elevated, numToPx(core.space[2]), numToPx(core.radius.small), numToPx(core.borderWidth.medium), invalid
-        ? semantic.message.error
+    var theme = _a.theme, checked = _a.checked, invalid = _a.invalid;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    align-items: center;\n    background: ", ";\n    padding: ", ";\n    min-width: 82px;\n    border-radius: ", ";\n    border: ", " solid;\n    border-color: ", ";\n  "], ["\n    align-items: center;\n    background: ", ";\n    padding: ", ";\n    min-width: 82px;\n    border-radius: ", ";\n    border: ", " solid;\n    border-color: ", ";\n  "])), theme.color.surface.bright, numToPx(theme.space[200]), numToPx(theme.border.radius.lg), numToPx(theme.border.width.md), invalid
+        ? theme.input.color.borderError
         : checked
-            ? core.color.blue.dark
+            ? theme.input.color.selected
             : 'transparent');
 });
 export var RadioCard = forwardRef(function (_a, ref) {
-    var label = _a.label, checked = _a.checked, invalid = _a.invalid, _b = _a.activeOpacity, activeOpacity = _b === void 0 ? 0.8 : _b, testID = _a.testID, _c = _a.hasInput, hasInput = _c === void 0 ? true : _c, rest = __rest(_a, ["label", "checked", "invalid", "activeOpacity", "testID", "hasInput"]);
-    return (_jsx(TouchableOpacity, __assign({ ref: ref, accessible: true, accessibilityRole: "radio", activeOpacity: activeOpacity, accessibilityState: { checked: checked } }, rest, { children: _jsxs(StyledWrapper, { checked: checked, invalid: invalid, children: [typeof label === 'string' ? _jsx(LabelText, { children: label }) : label, hasInput ? (_jsx(Input, { checked: checked, invalid: invalid, testID: testID })) : null] }) })));
+    var label = _a.label, checked = _a.checked, invalid = _a.invalid, _b = _a.activeOpacity, activeOpacity = _b === void 0 ? 0.8 : _b, testID = _a.testID, rest = __rest(_a, ["label", "checked", "invalid", "activeOpacity", "testID"]);
+    return (_jsx(TouchableOpacity, __assign({ ref: ref, accessible: true, accessibilityRole: "radio", activeOpacity: activeOpacity, accessibilityState: { checked: checked } }, rest, { children: _jsxs(StyledWrapper, { checked: checked, invalid: invalid, children: [typeof label === 'string' ? _jsx(LabelText, { children: label }) : label, _jsx(Input, { checked: checked, invalid: invalid, testID: testID })] }) })));
 });
 var templateObject_1;

package/dist/esm/components/SegmentedControls/SegmentedControls.js

@@ -42,14 +42,14 @@ export var SegmentedControls = function (_a) {
                 translateX: animatedX.value,
             },
             {
-                translateY: animatedY.value + theme.core.space[size === 'small' ? 1 : 2],
+                translateY: animatedY.value + theme.space[size === 'small' ? 100 : 200],
             } /* accounting for margin from top & bottom */,
         ],
         width: animatedWidth.value,
         height: animatedHeight.value,
         position: 'absolute',
-        borderRadius: theme.core.radius.max,
-        backgroundColor: theme.semantic.surface.elevated,
+        borderRadius: theme.border.radius['2xl'],
+        backgroundColor: theme.color.surface.bright,
     }); }, [animatedX, animatedY, animatedWidth, animatedHeight]);
     return (_jsxs(SegmentsContainer, __assign({ "$inline": inline, "$multipleRows": multipleRows }, rest, { children: [_jsx(Animated.View, { style: animatedBackgroundStyle }), segments.map(function (segment) {
                 var _a, _b;
@@ -68,6 +68,6 @@ export var SegmentedControls = function (_a) {
             })] })));
 };
 var SegmentsContainer = styled.View(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, $inline = _a.$inline, $multipleRows = _a.$multipleRows;
-    return "\n  flex-direction: row;\n  flex-wrap: ".concat($multipleRows ? '' : 'no-', "wrap;\n  justify-content: ").concat($multipleRows ? 'space-between' : 'space-around', ";\n  align-items: center;\n  width: ").concat($inline ? 'auto' : '100%', ";\n  align-self: ").concat($inline ? 'flex-start' : 'stretch', ";\n  padding: ").concat(core.space[1], "px;\n  background-color: ").concat(semantic.surface.cutout, ";\n  border-radius: ").concat(core.radius.max, "px;\n");
+    var theme = _a.theme, $inline = _a.$inline, $multipleRows = _a.$multipleRows;
+    return "\n  flex-direction: row;\n  flex-wrap: ".concat($multipleRows ? '' : 'no-', "wrap;\n  justify-content: ").concat($multipleRows ? 'space-between' : 'space-around', ";\n  align-items: center;\n  width: ").concat($inline ? 'auto' : '100%', ";\n  align-self: ").concat($inline ? 'flex-start' : 'stretch', ";\n  padding: ").concat(theme.space[100], "px;\n  background-color: ").concat(theme.color.surface.dim, ";\n  border-radius: ").concat(theme.border.radius['2xl'], "px;\n");
 });

package/dist/esm/components/SegmentedControls/components/SegmentButton.js

@@ -78,12 +78,12 @@ export var SegmentButton = function (_a) {
 var SSegmentsWrapper = styled.View(function (_a) {
     var theme = _a.theme, $size = _a.$size, multiline = _a.multiline;
     return "\n  ".concat(multiline
-        ? "padding: 4px ".concat(theme.core.space[$size === 'small' ? 4 : 6], "px;")
-        : "padding: ".concat($size === 'small' ? 2 : 8, "px ").concat(theme.core.space[$size === 'small' ? 3 : 4], "px;"), "\n  align-items: center;\n  justify-content: center;\n");
+        ? "padding: 4px ".concat(theme.space[$size === 'small' ? 400 : 600], "px;")
+        : "padding: ".concat($size === 'small' ? 2 : 8, "px ").concat(theme.space[$size === 'small' ? 300 : 400], "px;"), "\n  align-items: center;\n  justify-content: center;\n");
 });
 var SSegmentText = styled(AnimatedP)(function (_a) {
     var $isSelected = _a.$isSelected, theme = _a.theme;
     return "\n    font-family: ".concat($isSelected
-        ? theme.core.fontFamily.bodyBold.native
-        : theme.core.fontFamily.body.native, ";\n    color: ").concat(theme.semantic.message.base, ";\n  ");
+        ? theme.native.font.family.bold
+        : theme.native.font.family.book, ";\n    color: ").concat(theme.color.surface.onSurface, ";\n  ");
 });