@ovotech/element-native 5.4.1 → 5.4.2-canary-317a648-425

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

@@ -1,14 +1,14 @@
 import { numToPx } from '@ovotech/element-core';
 import { Pressable } from 'react-native';
 import styled, { css } from '../../styled.native';
-export const StyledPressable = styled(Pressable)(({ theme: { core }, focused, }) => {
+export const StyledPressable = styled(Pressable)(({ theme, focused, }) => {
     return css `
     display: flex;
     align-items: center;
     position: absolute;
-    width: ${numToPx(core.space[4])};
+    width: ${numToPx(theme.space[400])};
     z-index: 1;
     top: ${focused ? '16px' : '14px'};
-    right: ${numToPx(core.space[3])};
+    right: ${numToPx(theme.space[300])};
   `;
 });

package/dist/components/PhoneField/PhoneField.d.ts

@@ -1,5 +1,5 @@
 import { FieldProps } from '../Field';
 import { InputProps } from '../Input/Input';
 type Props = Omit<FieldProps, 'children'> & InputProps;
-export declare const PhoneField: ({ ref, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const PhoneField: ({ ref, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/PhoneField/PhoneField.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Field } from '../Field';
 import { PhoneInput } from '../PhoneInput';
-export const PhoneField = ({ ref, ...rest }) => {
-    return (_jsx(Field, { ...rest, children: _jsx(PhoneInput, { ref: ref }) }));
+export const PhoneField = ({ ref, ...props }) => {
+    return (_jsx(Field, { ...props, children: _jsx(PhoneInput, { ref: ref }) }));
 };

package/dist/components/PhoneInput/PhoneInput.js

@@ -1,3 +1,3 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Input } from '../Input/Input';
-export const PhoneInput = (props) => (_jsx(Input, { keyboardType: "phone-pad", autoCapitalize: "none", autoCorrect: false, ...props }));
+export const PhoneInput = (props) => (_jsx(Input, { ...props, keyboardType: "phone-pad", autoCapitalize: "none", autoCorrect: false }));

package/dist/components/ProductCarousel/NavigationDots.js

@@ -14,9 +14,9 @@ const Dot = ({ animatedValue, index, length, width = 10 }) => {
             outputRange = [-width, 0, width];
         }
         const backgroundColor = interpolateColor(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: [
@@ -36,7 +36,7 @@ const SDotsContainer = styled.View `
   gap: 10px;
 `;
 const SDot = styled.View `
-  background-color: ${({ theme }) => theme.core.color.brand.forest};
+  background-color: ${({ theme }) => theme.color.brand.dim};
   width: ${({ $width }) => $width}px;
   height: ${({ $width }) => $width}px;
   border-radius: 50px;

package/dist/components/ProductCarousel/ProductCarousel.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { numToPx } from '@ovotech/element-core';
 import { useRef } from 'react';
-import { useWindowDimensions, View } from 'react-native';
+import { View, useWindowDimensions } from 'react-native';
 import Animated, { Extrapolation, interpolate, useAnimatedStyle, useSharedValue, } from 'react-native-reanimated';
 import Carousel from 'react-native-reanimated-carousel';
 import Svg, { Path } from 'react-native-svg';
@@ -24,12 +24,12 @@ export function ProductCarousel({ data, children, width, height, fullWidth, show
                                     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: () => carouselRef.current?.next(), "$top": arrowsDistanceFromTop, mediumAndUp: mediumAndUp, hitSlop: {
+                                }, children: _jsx(Icon, { name: "arrow-left", size: 32, color: theme.color.brand.onBrand }) }), _jsx(SActionPressable, { "$next": true, onPress: () => carouselRef.current?.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 }))] })] }));
 }
 const Card = ({ children, animationValue, height, width, }) => {
     const WIDTH = width / 1.3;
@@ -75,7 +75,7 @@ const SActionPressable = styled.Pressable `
   position: absolute;
   top: ${({ $top }) => ($top ? `${$top}px` : '30%')};
   ${({ theme, $next, mediumAndUp }) => $next
-    ? `right: ${mediumAndUp ? '25%' : numToPx(theme.core.space[14])}`
-    : `left: ${mediumAndUp ? '25%' : numToPx(theme.core.space[14])}`};
+    ? `right: ${mediumAndUp ? '25%' : numToPx(theme.space[1400])}`
+    : `left: ${mediumAndUp ? '25%' : numToPx(theme.space[1400])}`};
 `;
 const SkewLine = (props) => (_jsx(Svg, { width: "100%", height: 69, ...props, children: _jsx(Path, { fill: "#0A9828", d: "M768 0 0 68.776h768V0Z" }) }));

package/dist/components/ProductCarousel/anchor-point.js

@@ -34,7 +34,7 @@ export const withAnchorPoint = (transform, anchorPoint, size) => {
             translateY: size.height * (anchorPoint.y - defaultAnchorPoint.y),
         });
         injectedTransform = [...shiftTranslateY, ...injectedTransform];
-        // shift after rotation
+        // shift after rotation - injectedTransform is already an array here
         injectedTransform.push({
             translateY: size.height * (defaultAnchorPoint.y - anchorPoint.y),
         });

package/dist/components/Radio/Radio.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, Ref } from 'react';
+import { ReactNode } from 'react';
 import { TouchableOpacityProps, View } from 'react-native';
 type Props = Omit<TouchableOpacityProps, 'children'> & {
     label: ReactNode;
@@ -8,7 +8,7 @@ type Props = Omit<TouchableOpacityProps, 'children'> & {
     invalid?: boolean;
     onValueChange?: (value?: string) => void;
     activeOpacity?: number;
-    ref?: Ref<View>;
+    ref?: React.Ref<View>;
 };
 declare const Radio: ({ label, hint, checked, invalid, value, activeOpacity, testID, ref, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export { Radio };

package/dist/components/Radio/Radio.js

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

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

@@ -1,12 +1,11 @@
-import { ReactNode, Ref } from 'react';
+import { ReactNode } from 'react';
 import { TouchableOpacityProps, View } from 'react-native';
 type Props = Omit<TouchableOpacityProps, 'children'> & {
     label: ReactNode;
     checked?: boolean;
     invalid?: boolean;
     activeOpacity?: number;
-    hasInput?: boolean;
-    ref?: Ref<View>;
+    ref?: React.Ref<View>;
 };
-export declare const RadioCard: ({ label, checked, invalid, activeOpacity, testID, hasInput, ref, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const RadioCard: ({ label, checked, invalid, activeOpacity, testID, ref, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/RadioCard/RadioCard.js

@@ -4,54 +4,54 @@ import { TouchableOpacity, } from 'react-native';
 import { css } from 'styled-components';
 import styled from '../../styled.native';
 import { LabelText } from '../LabelText';
-const StyledRadioInputWrapper = styled.View(({ theme: { core } }) => {
+const StyledRadioInputWrapper = styled.View(({ theme }) => {
     return `
-      width: ${numToPx(core.space[6])};
-      height: ${numToPx(core.space[6])};
-      margin-top: ${numToPx(core.space[2])};
+      width: ${numToPx(theme.space[600])};
+      height: ${numToPx(theme.space[600])};
+      margin-top: ${numToPx(theme.space[200])};
     `;
 });
-const StyledRadioInput = styled.View(({ theme: { core, semantic }, invalid, checked }) => {
+const StyledRadioInput = styled.View(({ theme, invalid, checked }) => {
     return `
-      width: ${numToPx(core.space[6])};
-      height: ${numToPx(core.space[6])};
-      border: ${numToPx(core.borderWidth.small)} solid;
+      width: ${numToPx(theme.space[600])};
+      height: ${numToPx(theme.space[600])};
+      border: ${numToPx(theme.border.width.md)} solid;
       align-items: center;
       justify-content: center;
-      border-radius: ${numToPx(core.space[6])};
+      border-radius: ${numToPx(theme.space[600])};
       border-color: ${invalid
-        ? semantic.message.error
+        ? theme.input.color.borderError
         : checked
-            ? core.color.blue.dark
-            : semantic.border.functional};
-      background: ${checked ? core.color.blue.lightest : 'transparent'};
+            ? theme.input.color.selected
+            : theme.input.color.border};
+      background: ${checked ? theme.input.color.selectedTint : 'transparent'};
     `;
 });
-const StyledRadioInputDot = styled.View(({ theme: { core }, checked }) => {
+const StyledRadioInputDot = styled.View(({ theme, checked }) => {
     return `
-      width: ${numToPx(core.space[3])};
-      height: ${numToPx(core.space[3])};
-      border-radius: ${numToPx(core.space[3])};
-      background: ${core.color.blue.dark};
+      width: ${numToPx(theme.space[300])};
+      height: ${numToPx(theme.space[300])};
+      border-radius: ${numToPx(theme.space[300])};
+      background: ${theme.input.color.selected};
       opacity: ${checked ? 1 : 0};
     `;
 });
 const Input = ({ checked, invalid, testID, ...rest }) => {
     return (_jsx(StyledRadioInputWrapper, { ...rest, children: _jsx(StyledRadioInput, { invalid: invalid, checked: checked, testID: testID, children: _jsx(StyledRadioInputDot, { checked: checked }) }) }));
 };
-const StyledWrapper = styled.View(({ theme: { core, semantic }, checked, invalid }) => css `
+const StyledWrapper = styled.View(({ theme, checked, invalid }) => css `
     align-items: center;
-    background: ${semantic.surface.elevated};
-    padding: ${numToPx(core.space[2])};
+    background: ${theme.color.surface.bright};
+    padding: ${numToPx(theme.space[200])};
     min-width: 82px;
-    border-radius: ${numToPx(core.radius.small)};
-    border: ${numToPx(core.borderWidth.medium)} solid;
+    border-radius: ${numToPx(theme.border.radius.lg)};
+    border: ${numToPx(theme.border.width.md)} solid;
     border-color: ${invalid
-    ? semantic.message.error
+    ? theme.input.color.borderError
     : checked
-        ? core.color.blue.dark
+        ? theme.input.color.selected
         : 'transparent'};
   `);
-export const RadioCard = ({ label, checked, invalid, activeOpacity = 0.8, testID, hasInput = true, ref, ...rest }) => {
-    return (_jsx(TouchableOpacity, { ref: ref, accessible: true, accessibilityRole: "radio", activeOpacity: activeOpacity, accessibilityState: { 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] }) }));
+export const RadioCard = ({ label, checked, invalid, activeOpacity = 0.8, testID, ref, ...rest }) => {
+    return (_jsx(TouchableOpacity, { ref: ref, accessible: true, accessibilityRole: "radio", activeOpacity: activeOpacity, accessibilityState: { 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 })] }) }));
 };

package/dist/components/SegmentedControls/SegmentedControls.js

@@ -14,13 +14,13 @@ export const SegmentedControls = ({ activeSegment, setActiveSegment, segments, i
     const animatedWidth = useSharedValue(0);
     const theme = useTheme();
     const animatedBackgroundStyle = useAnimatedStyle(() => ({
+        position: 'absolute',
         left: animatedX.value,
-        top: animatedY.value + theme.core.space[size === 'small' ? 2 : 3],
+        top: animatedY.value + theme.space[size === 'small' ? 200 : 300],
         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, { "$inline": inline, "$multipleRows": multipleRows, ...rest, children: [_jsx(Animated.View, { style: animatedBackgroundStyle }), segments.map(segment => (_jsx(SegmentButton, { isSelected: activeSegment.key === segment.key, label: segment.label, accessibilityLabel: segment.accessibilityLabel, accessibilityHint: segment.accessibilityHint, setAnimatedValues: (x, y, width) => {
                     animatedX.value = withSpring(x, springSettings);
@@ -35,14 +35,14 @@ export const SegmentedControls = ({ activeSegment, setActiveSegment, segments, i
                     }
                 }, multipleRows: multipleRows, size: size, inline: inline, testID: `${rest.testID ?? 'segment'}-${segment.key}`, segmentCount: segments.length ?? 0 }, segment.key)))] }));
 };
-const SegmentsContainer = styled.View(({ theme: { core, semantic }, $inline, $multipleRows }) => `
+const SegmentsContainer = styled.View(({ theme, $inline, $multipleRows }) => `
   flex-direction: row;
   flex-wrap: ${$multipleRows ? '' : 'no-'}wrap;
   justify-content: ${$multipleRows ? 'space-between' : 'space-around'};
   align-items: center;
   width: ${$inline ? 'auto' : '100%'};
   align-self: ${$inline ? 'flex-start' : 'stretch'};
-  padding: ${core.space[1]}px;
-  background-color: ${semantic.surface.cutout};
-  border-radius: ${core.radius.max}px;
+  padding: ${theme.space[100]}px;
+  background-color: ${theme.color.surface.dim};
+  border-radius: ${theme.border.radius['2xl']}px;
 `);

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

@@ -47,7 +47,7 @@ export const SegmentButton = ({ accessibilityLabel, accessibilityHint, inline, i
         // choices go on the second row. The only way I could get it to work
         // was to hardcode the denominator to 3 for the single row ones
         // and 1.1 for the multiple row ones.
-        yRef.current = y - height / ((multipleRows ? 2.5 : 3) * fontScale);
+        yRef.current = y - height / (multipleRows ? 2.5 : 3 * fontScale);
         heightRef.current = height;
         widthRef.current = width;
         onLayout(width, height, x, yRef.current);
@@ -65,14 +65,14 @@ export const SegmentButton = ({ accessibilityLabel, accessibilityHint, inline, i
 };
 const SSegmentsWrapper = styled.View(({ theme, $size, multiline }) => `
   ${multiline
-    ? `padding: 4px ${theme.core.space[$size === 'small' ? 4 : 6]}px;`
-    : `padding: ${$size === 'small' ? 2 : 8}px ${theme.core.space[$size === 'small' ? 3 : 4]}px;`}
+    ? `padding: 4px ${theme.space[$size === 'small' ? 400 : 600]}px;`
+    : `padding: ${$size === 'small' ? 2 : 8}px ${theme.space[$size === 'small' ? 300 : 400]}px;`}
   align-items: center;
   justify-content: center;
 `);
 const SSegmentText = styled(AnimatedP)(({ $isSelected, theme }) => `
     font-family: ${$isSelected
-    ? theme.core.fontFamily.bodyBold.native
-    : theme.core.fontFamily.body.native};
-    color: ${theme.semantic.message.base};
+    ? theme.native.font.family.bold
+    : theme.native.font.family.book};
+    color: ${theme.color.surface.onSurface};
   `);