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

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

@@ -32,7 +32,7 @@ var element_core_1 = require("@ovotech/element-core");
 var react_native_1 = require("react-native");
 var styled_native_1 = __importStar(require("../../styled.native"));
 exports.StyledPressable = (0, styled_native_1.default)(react_native_1.Pressable)(function (_a) {
-    var core = _a.theme.core, focused = _a.focused;
-    return (0, styled_native_1.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  "])), (0, element_core_1.numToPx)(core.space[4]), focused ? '16px' : '14px', (0, element_core_1.numToPx)(core.space[3]));
+    var theme = _a.theme, focused = _a.focused;
+    return (0, styled_native_1.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  "])), (0, element_core_1.numToPx)(theme.space[400]), focused ? '16px' : '14px', (0, element_core_1.numToPx)(theme.space[300]));
 });
 var templateObject_1;

package/dist/components/ProductCarousel/NavigationDots.js

@@ -47,9 +47,9 @@ var Dot = function (_a) {
             outputRange = [-width, 0, width];
         }
         var backgroundColor = (0, react_native_reanimated_1.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: [
@@ -65,7 +65,7 @@ var Dot = function (_a) {
 var SDotsContainer = styled_native_1.default.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_native_1.default.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/components/ProductCarousel/ProductCarousel.js

@@ -74,12 +74,12 @@ function ProductCarousel(_a) {
                                     bottom: 32,
                                     left: 16,
                                     right: 16,
-                                }, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "arrow-left", size: 32, color: theme.core.color.brand.white }) }), (0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "arrow-left", size: 32, color: theme.color.brand.onBrand }) }), (0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "arrow-right", size: 32, color: theme.core.color.brand.white }) })] })), showDots && data.length > 1 && ((0, jsx_runtime_1.jsx)(NavigationDots_1.NavigationDots, { data: data, animatedValue: progressValue }))] })] }));
+                                }, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "arrow-right", size: 32, color: theme.color.brand.onBrand }) })] })), showDots && data.length > 1 && ((0, jsx_runtime_1.jsx)(NavigationDots_1.NavigationDots, { data: data, animatedValue: progressValue }))] })] }));
 }
 exports.ProductCarousel = ProductCarousel;
 var Card = function (_a) {
@@ -121,8 +121,8 @@ var SActionPressable = styled_native_1.default.Pressable(templateObject_2 || (te
 }, function (_a) {
     var theme = _a.theme, $next = _a.$next, mediumAndUp = _a.mediumAndUp;
     return $next
-        ? "right: ".concat(mediumAndUp ? '25%' : (0, element_core_1.numToPx)(theme.core.space[14]))
-        : "left: ".concat(mediumAndUp ? '25%' : (0, element_core_1.numToPx)(theme.core.space[14]));
+        ? "right: ".concat(mediumAndUp ? '25%' : (0, element_core_1.numToPx)(theme.space[1400]))
+        : "left: ".concat(mediumAndUp ? '25%' : (0, element_core_1.numToPx)(theme.space[1400]));
 });
 var SkewLine = function (props) { return ((0, jsx_runtime_1.jsx)(react_native_svg_1.default, __assign({ width: "100%", height: 69 }, props, { children: (0, jsx_runtime_1.jsx)(react_native_svg_1.Path, { fill: "#0A9828", d: "M768 0 0 68.776h768V0Z" }) }))); };
 var templateObject_1, templateObject_2;

package/dist/components/Radio/Radio.js

@@ -34,28 +34,28 @@ var styled_native_1 = __importDefault(require("../../styled.native"));
 var HintText_1 = require("../HintText");
 var LabelText_1 = require("../LabelText");
 var StyledRadioInputWrapper = styled_native_1.default.View(function (_a) {
-    var core = _a.theme.core;
-    return "\n      width: ".concat((0, element_core_1.numToPx)(core.space[6]), ";\n      height: ").concat((0, element_core_1.numToPx)(core.space[6]), ";\n      margin-right: 10px;\n    ");
+    var theme = _a.theme;
+    return "\n      width: ".concat((0, element_core_1.numToPx)(theme.space[600]), ";\n      height: ").concat((0, element_core_1.numToPx)(theme.space[600]), ";\n      margin-right: 10px;\n    ");
 });
 var StyledRadioInput = styled_native_1.default.View(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, invalid = _a.invalid, checked = _a.checked;
-    return "\n      width: ".concat((0, element_core_1.numToPx)(core.space[6]), ";\n      height: ").concat((0, element_core_1.numToPx)(core.space[6]), ";\n      border: ").concat((0, element_core_1.numToPx)(core.borderWidth.small), " solid;\n      align-items: center;\n      justify-content: center;\n      border-radius: ").concat((0, element_core_1.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((0, element_core_1.numToPx)(theme.space[600]), ";\n      height: ").concat((0, element_core_1.numToPx)(theme.space[600]), ";\n      border: ").concat((0, element_core_1.numToPx)(theme.border.width.md), " solid;\n      align-items: center;\n      justify-content: center;\n      border-radius: ").concat((0, element_core_1.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_native_1.default.View(function (_a) {
-    var core = _a.theme.core, checked = _a.checked;
-    return "\n      width: ".concat((0, element_core_1.numToPx)(core.space[3]), ";\n      height: ").concat((0, element_core_1.numToPx)(core.space[3]), ";\n      border-radius: ").concat((0, element_core_1.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((0, element_core_1.numToPx)(theme.space[300]), ";\n      height: ").concat((0, element_core_1.numToPx)(theme.space[300]), ";\n      border-radius: ").concat((0, element_core_1.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 ((0, jsx_runtime_1.jsx)(StyledRadioInputWrapper, __assign({}, rest, { children: (0, jsx_runtime_1.jsx)(StyledRadioInput, { invalid: invalid, checked: checked, testID: testID, children: (0, jsx_runtime_1.jsx)(StyledRadioInputDot, { checked: checked }) }) })));
 };
 var StyledWrapper = styled_native_1.default.View(function (_a) {
-    var core = _a.theme.core;
-    return "\n    padding-top: ".concat((0, element_core_1.numToPx)(core.space[3]), ";\n    flex-direction: row;\n  ");
+    var theme = _a.theme;
+    return "\n    padding-top: ".concat((0, element_core_1.numToPx)(theme.space[300]), ";\n    flex-direction: row;\n  ");
 });
 var Radio = (0, react_1.forwardRef)(function (_a, ref) {
     var label = _a.label, hint = _a.hint, checked = _a.checked, invalid = _a.invalid, 

package/dist/components/RadioCard/RadioCard.d.ts

@@ -5,5 +5,4 @@ export declare const RadioCard: import("react").ForwardRefExoticComponent<Omit<T
     checked?: boolean | undefined;
     invalid?: boolean | undefined;
     activeOpacity?: number | undefined;
-    hasInput?: boolean | undefined;
 } & import("react").RefAttributes<TouchableOpacity>>;

package/dist/components/RadioCard/RadioCard.js

@@ -38,35 +38,35 @@ var styled_components_1 = require("styled-components");
 var styled_native_1 = __importDefault(require("../../styled.native"));
 var LabelText_1 = require("../LabelText");
 var StyledRadioInputWrapper = styled_native_1.default.View(function (_a) {
-    var core = _a.theme.core;
-    return "\n      width: ".concat((0, element_core_1.numToPx)(core.space[6]), ";\n      height: ").concat((0, element_core_1.numToPx)(core.space[6]), ";\n      margin-top: ").concat((0, element_core_1.numToPx)(core.space[2]), ";\n    ");
+    var theme = _a.theme;
+    return "\n      width: ".concat((0, element_core_1.numToPx)(theme.space[600]), ";\n      height: ").concat((0, element_core_1.numToPx)(theme.space[600]), ";\n      margin-top: ").concat((0, element_core_1.numToPx)(theme.space[200]), ";\n    ");
 });
 var StyledRadioInput = styled_native_1.default.View(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, invalid = _a.invalid, checked = _a.checked;
-    return "\n      width: ".concat((0, element_core_1.numToPx)(core.space[6]), ";\n      height: ").concat((0, element_core_1.numToPx)(core.space[6]), ";\n      border: ").concat((0, element_core_1.numToPx)(core.borderWidth.small), " solid;\n      align-items: center;\n      justify-content: center;\n      border-radius: ").concat((0, element_core_1.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((0, element_core_1.numToPx)(theme.space[600]), ";\n      height: ").concat((0, element_core_1.numToPx)(theme.space[600]), ";\n      border: ").concat((0, element_core_1.numToPx)(theme.border.width.md), " solid;\n      align-items: center;\n      justify-content: center;\n      border-radius: ").concat((0, element_core_1.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_native_1.default.View(function (_a) {
-    var core = _a.theme.core, checked = _a.checked;
-    return "\n      width: ".concat((0, element_core_1.numToPx)(core.space[3]), ";\n      height: ").concat((0, element_core_1.numToPx)(core.space[3]), ";\n      border-radius: ").concat((0, element_core_1.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((0, element_core_1.numToPx)(theme.space[300]), ";\n      height: ").concat((0, element_core_1.numToPx)(theme.space[300]), ";\n      border-radius: ").concat((0, element_core_1.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 ((0, jsx_runtime_1.jsx)(StyledRadioInputWrapper, __assign({}, rest, { children: (0, jsx_runtime_1.jsx)(StyledRadioInput, { invalid: invalid, checked: checked, testID: testID, children: (0, jsx_runtime_1.jsx)(StyledRadioInputDot, { checked: checked }) }) })));
 };
 var StyledWrapper = styled_native_1.default.View(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, checked = _a.checked, invalid = _a.invalid;
-    return (0, styled_components_1.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, (0, element_core_1.numToPx)(core.space[2]), (0, element_core_1.numToPx)(core.radius.small), (0, element_core_1.numToPx)(core.borderWidth.medium), invalid
-        ? semantic.message.error
+    var theme = _a.theme, checked = _a.checked, invalid = _a.invalid;
+    return (0, styled_components_1.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, (0, element_core_1.numToPx)(theme.space[200]), (0, element_core_1.numToPx)(theme.border.radius.lg), (0, element_core_1.numToPx)(theme.border.width.md), invalid
+        ? theme.input.color.borderError
         : checked
-            ? core.color.blue.dark
+            ? theme.input.color.selected
             : 'transparent');
 });
 exports.RadioCard = (0, react_1.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 ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, __assign({ ref: ref, accessible: true, accessibilityRole: "radio", activeOpacity: activeOpacity, accessibilityState: { checked: checked } }, rest, { children: (0, jsx_runtime_1.jsxs)(StyledWrapper, { checked: checked, invalid: invalid, children: [typeof label === 'string' ? (0, jsx_runtime_1.jsx)(LabelText_1.LabelText, { children: label }) : label, hasInput ? ((0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, __assign({ ref: ref, accessible: true, accessibilityRole: "radio", activeOpacity: activeOpacity, accessibilityState: { checked: checked } }, rest, { children: (0, jsx_runtime_1.jsxs)(StyledWrapper, { checked: checked, invalid: invalid, children: [typeof label === 'string' ? (0, jsx_runtime_1.jsx)(LabelText_1.LabelText, { children: label }) : label, (0, jsx_runtime_1.jsx)(Input, { checked: checked, invalid: invalid, testID: testID })] }) })));
 });
 var templateObject_1;

package/dist/components/SegmentedControls/SegmentedControls.js

@@ -68,14 +68,14 @@ 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 ((0, jsx_runtime_1.jsxs)(SegmentsContainer, __assign({ "$inline": inline, "$multipleRows": multipleRows }, rest, { children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: animatedBackgroundStyle }), segments.map(function (segment) {
                 var _a, _b;
@@ -95,6 +95,6 @@ var SegmentedControls = function (_a) {
 };
 exports.SegmentedControls = SegmentedControls;
 var SegmentsContainer = styled_native_1.default.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/components/SegmentedControls/components/SegmentButton.js

@@ -108,12 +108,12 @@ exports.SegmentButton = SegmentButton;
 var SSegmentsWrapper = styled_native_1.default.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 = (0, styled_native_1.default)(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  ");
 });