@ovotech/element-native 4.4.6 → 4.4.7-canary-57d336e-328

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

@@ -5,6 +5,8 @@ import { StyledActionList } from './styled';
 type ActionListProps = ComponentProps<typeof StyledActionList>;
 type ActionProps = PropsWithChildren<ViewProps & {
     accessibilityRole?: AccessibilityRole;
+    accessibilityLabel?: string;
+    accessibilityHint?: string;
     iconLeft?: IconName;
     iconRight?: IconName;
     inverted?: boolean;

package/dist/components/ActionList/ActionList.js

@@ -47,12 +47,12 @@ var ActionList = function (_a) {
 };
 exports.ActionList = ActionList;
 var ActionWrapper = (0, react_1.forwardRef)(function (_a, ref) {
-    var children = _a.children, accessibilityRole = _a.accessibilityRole, _b = _a.activeOpacity, activeOpacity = _b === void 0 ? 0.75 : _b, fullWidth = _a.fullWidth, _c = _a.hasBorder, hasBorder = _c === void 0 ? false : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, _e = _a.inline, inline = _e === void 0 ? false : _e, inList = _a.inList, onPress = _a.onPress, testID = _a.testID, _f = _a.standalone, standalone = _f === void 0 ? false : _f, rest = __rest(_a, ["children", "accessibilityRole", "activeOpacity", "fullWidth", "hasBorder", "inverted", "inline", "inList", "onPress", "testID", "standalone"]);
-    return ((0, jsx_runtime_1.jsx)(styled_1.StyledActionWrapper, __assign({ ref: ref, hasBorder: hasBorder, inverted: inverted, testID: testID }, rest, { children: (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { hitSlop: inline ? 14 : null, activeOpacity: activeOpacity, accessible: true, accessibilityRole: accessibilityRole, onPress: onPress, children: (0, jsx_runtime_1.jsx)(styled_1.StyledActionInner, { fullWidth: fullWidth, inList: inList, inline: inline, standalone: standalone, children: children }) }) })));
+    var children = _a.children, accessibilityRole = _a.accessibilityRole, accessibilityLabel = _a.accessibilityLabel, accessibilityHint = _a.accessibilityHint, _b = _a.activeOpacity, activeOpacity = _b === void 0 ? 0.75 : _b, fullWidth = _a.fullWidth, _c = _a.hasBorder, hasBorder = _c === void 0 ? false : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, _e = _a.inline, inline = _e === void 0 ? false : _e, inList = _a.inList, onPress = _a.onPress, testID = _a.testID, _f = _a.standalone, standalone = _f === void 0 ? false : _f, rest = __rest(_a, ["children", "accessibilityRole", "accessibilityLabel", "accessibilityHint", "activeOpacity", "fullWidth", "hasBorder", "inverted", "inline", "inList", "onPress", "testID", "standalone"]);
+    return ((0, jsx_runtime_1.jsx)(styled_1.StyledActionWrapper, __assign({ ref: ref, hasBorder: hasBorder, inverted: inverted, testID: testID }, rest, { children: (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { hitSlop: inline ? 14 : null, activeOpacity: activeOpacity, accessible: true, accessibilityRole: accessibilityRole, accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint, onPress: onPress, children: (0, jsx_runtime_1.jsx)(styled_1.StyledActionInner, { fullWidth: fullWidth, inList: inList, inline: inline, standalone: standalone, children: children }) }) })));
 });
 var Action = (0, react_1.forwardRef)(function (_a, ref) {
-    var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'link' : _b, children = _a.children, _c = _a.fullWidth, fullWidth = _c === void 0 ? false : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, _e = _a.inline, inline = _e === void 0 ? false : _e, onPress = _a.onPress, testID = _a.testID, iconLeft = _a.iconLeft, iconRight = _a.iconRight, _f = _a.standalone, standalone = _f === void 0 ? false : _f, rest = __rest(_a, ["accessibilityRole", "children", "fullWidth", "inverted", "inline", "onPress", "testID", "iconLeft", "iconRight", "standalone"]);
+    var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'link' : _b, accessibilityLabel = _a.accessibilityLabel, accessibilityHint = _a.accessibilityHint, children = _a.children, _c = _a.fullWidth, fullWidth = _c === void 0 ? false : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, _e = _a.inline, inline = _e === void 0 ? false : _e, onPress = _a.onPress, testID = _a.testID, iconLeft = _a.iconLeft, iconRight = _a.iconRight, _f = _a.standalone, standalone = _f === void 0 ? false : _f, rest = __rest(_a, ["accessibilityRole", "accessibilityLabel", "accessibilityHint", "children", "fullWidth", "inverted", "inline", "onPress", "testID", "iconLeft", "iconRight", "standalone"]);
     var smallAndUp = (0, hooks_1.useBreakpoint)().smallAndUp;
-    return ((0, jsx_runtime_1.jsxs)(ActionWrapper, __assign({ ref: ref, accessibilityRole: accessibilityRole, fullWidth: fullWidth, inverted: inverted, inline: inline, onPress: onPress, testID: testID, standalone: standalone }, rest, { children: [iconLeft ? ((0, jsx_runtime_1.jsx)(styled_1.StyledLeftIcon, { inverted: inverted, name: iconLeft, size: 16 })) : null, typeof children === 'string' ? ((0, jsx_runtime_1.jsx)(styled_1.StyledActionText, { smallAndUp: smallAndUp, inverted: inverted, inList: rest === null || rest === void 0 ? void 0 : rest.inList, children: children })) : ((0, jsx_runtime_1.jsx)(styled_1.StyledActionNodeWrapper, { children: children })), iconRight ? ((0, jsx_runtime_1.jsx)(styled_1.StyledRightIcon, { inverted: inverted, name: iconRight, size: 16 })) : null] })));
+    return ((0, jsx_runtime_1.jsxs)(ActionWrapper, __assign({ ref: ref, accessibilityRole: accessibilityRole, accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint, fullWidth: fullWidth, inverted: inverted, inline: inline, onPress: onPress, testID: testID, standalone: standalone }, rest, { children: [iconLeft ? ((0, jsx_runtime_1.jsx)(styled_1.StyledLeftIcon, { inverted: inverted, name: iconLeft, size: 16 })) : null, typeof children === 'string' ? ((0, jsx_runtime_1.jsx)(styled_1.StyledActionText, { smallAndUp: smallAndUp, inverted: inverted, inList: rest === null || rest === void 0 ? void 0 : rest.inList, children: children })) : ((0, jsx_runtime_1.jsx)(styled_1.StyledActionNodeWrapper, { children: children })), iconRight ? ((0, jsx_runtime_1.jsx)(styled_1.StyledRightIcon, { inverted: inverted, name: iconRight, size: 16 })) : null] })));
 });
 exports.Action = Action;

package/dist/components/SegmentedControls/SegmentedControls.js

@@ -86,11 +86,7 @@ var SegmentedControls = function (_a) {
                     }, onPress: function () { return setActiveSegment(segment); }, onLayout: function (width, height, x, y) {
                         if (activeSegment.key === segment.key) {
                             animatedX.value = x;
-                            // (adrian.pop) - I couldn't figure out how to make the positioning work once the
-                            // 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.
-                            animatedY.value = y - height / (multipleRows ? 1.1 : 3);
+                            animatedY.value = y;
                             animatedHeight.value = height;
                             animatedWidth.value = width;
                         }
@@ -100,5 +96,5 @@ 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-apart', ";\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");
+    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");
 });

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

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -34,6 +45,12 @@ var react_native_reanimated_1 = __importStar(require("react-native-reanimated"))
 var styled_native_1 = __importDefault(require("../../../styled.native"));
 var P_1 = require("../../P");
 var AnimatedP = react_native_reanimated_1.default.createAnimatedComponent(P_1.P);
+var textSizeProps = {
+    numberOfLines: 1,
+    adjustsFontSizeToFit: true,
+    minimumFontScale: 0.95,
+    maxFontSizeMultiplier: 1.75,
+};
 var SegmentButton = function (_a) {
     var accessibilityLabel = _a.accessibilityLabel, accessibilityHint = _a.accessibilityHint, inline = _a.inline, isSelected = _a.isSelected, label = _a.label, multipleRows = _a.multipleRows, onLayout = _a.onLayout, onPress = _a.onPress, setAnimatedValues = _a.setAnimatedValues, segmentCount = _a.segmentCount, _b = _a.size, size = _b === void 0 ? 'large' : _b, testID = _a.testID;
     var xRef = (0, react_1.useRef)(0);
@@ -41,6 +58,7 @@ var SegmentButton = function (_a) {
     var widthRef = (0, react_1.useRef)(0);
     var heightRef = (0, react_1.useRef)(0);
     var hitslopVal = size === 'small' ? 8 : 4;
+    var fontScale = (0, react_native_1.useWindowDimensions)().fontScale;
     var fontWeightAnim = (0, react_native_reanimated_1.useSharedValue)(isSelected ? 1 : 0);
     var animatedStyleNormal = (0, react_native_reanimated_1.useAnimatedStyle)(function () {
         return {
@@ -61,20 +79,19 @@ var SegmentButton = function (_a) {
         if (!isSelected) {
             return;
         }
-        setAnimatedValues(xRef.current, 
-        // (adrian.pop) - I couldn't figure out how to make the positioning work once the
-        // 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 - heightRef.current / (multipleRows ? 1.1 : 3), widthRef.current);
+        setAnimatedValues(xRef.current, yRef.current, widthRef.current);
     }, [isSelected]);
     var handleLayout = function (event) {
         var _a = event.nativeEvent.layout, width = _a.width, height = _a.height, x = _a.x, y = _a.y;
         xRef.current = x;
-        yRef.current = y;
+        // (adrian.pop) - I couldn't figure out how to make the positioning work once the
+        // 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 ? 1.1 : 3 * fontScale);
         heightRef.current = height;
         widthRef.current = width;
-        onLayout(width, height, x, y);
+        onLayout(width, height, x, yRef.current);
     };
     return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onLayout: handleLayout, onPress: onPress, accessible: true, accessibilityRole: "checkbox", accessibilityState: { checked: isSelected }, accessibilityLabel: accessibilityLabel || label, accessibilityHint: accessibilityHint, hitSlop: {
             top: hitslopVal,
@@ -82,10 +99,10 @@ var SegmentButton = function (_a) {
         }, style: {
             flexGrow: inline || multipleRows ? undefined : 1,
             width: inline || multipleRows ? 'auto' : "".concat(100 / segmentCount, "%"),
-        }, testID: testID, children: (0, jsx_runtime_1.jsxs)(SSegmentsWrapper, { "$isSelected": isSelected, "$size": size, multiline: multipleRows, children: [(0, jsx_runtime_1.jsx)(SSegmentText, { style: {
+        }, testID: testID, children: (0, jsx_runtime_1.jsxs)(SSegmentsWrapper, { "$isSelected": isSelected, "$size": size, multiline: multipleRows, children: [(0, jsx_runtime_1.jsx)(SSegmentText, __assign({ style: {
                         opacity: 0,
                         fontWeight: '900',
-                    }, "$isSelected": false, children: label }), (0, jsx_runtime_1.jsx)(SSegmentText, { style: animatedStyleNormal, "$isSelected": false, numberOfLines: 1, adjustsFontSizeToFit: true, children: label }), (0, jsx_runtime_1.jsx)(SSegmentText, { style: animatedStyleBold, "$isSelected": true, numberOfLines: 1, adjustsFontSizeToFit: true, children: label })] }) }));
+                    }, "$isSelected": false }, textSizeProps, { children: label })), (0, jsx_runtime_1.jsx)(SSegmentText, __assign({ style: animatedStyleNormal, "$isSelected": false }, textSizeProps, { children: label })), (0, jsx_runtime_1.jsx)(SSegmentText, __assign({ style: animatedStyleBold, "$isSelected": true }, textSizeProps, { children: label }))] }) }));
 };
 exports.SegmentButton = SegmentButton;
 var SSegmentsWrapper = styled_native_1.default.View(function (_a) {

package/dist/components/SelectField/Select.js

@@ -43,7 +43,7 @@ var Strong_1 = require("../Strong");
 var SelectInput = styled_native_1.default.TouchableOpacity(function (_a) {
     var _b = _a.theme, semantic = _b.semantic, core = _b.core, hasError = _a.hasError;
     return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      flex-direction: row;\n      align-items: center;\n      background-color: transparent;\n      border-color: ", ";\n      border-width: ", ";\n      border-radius: ", ";\n      padding: ", ";\n      padding-right: 14px;\n      height: 44px;\n    "], ["\n      flex-direction: row;\n      align-items: center;\n      background-color: transparent;\n      border-color: ", ";\n      border-width: ", ";\n      border-radius: ", ";\n      padding: ", ";\n      padding-right: 14px;\n      height: 44px;\n    "])), hasError
-        ? semantic.error.border
+        ? semantic.error.message
         : semantic.border.functional, (0, element_core_1.numToPx)(core.borderWidth.small), (0, element_core_1.numToPx)(core.radius.small), (0, element_core_1.numToPx)(core.space[2]));
 });
 var DropdownWrapper = styled_native_1.default.View(function (_a) {

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

@@ -43,12 +43,12 @@ var ActionList = function (_a) {
         }) })));
 };
 var ActionWrapper = forwardRef(function (_a, ref) {
-    var children = _a.children, accessibilityRole = _a.accessibilityRole, _b = _a.activeOpacity, activeOpacity = _b === void 0 ? 0.75 : _b, fullWidth = _a.fullWidth, _c = _a.hasBorder, hasBorder = _c === void 0 ? false : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, _e = _a.inline, inline = _e === void 0 ? false : _e, inList = _a.inList, onPress = _a.onPress, testID = _a.testID, _f = _a.standalone, standalone = _f === void 0 ? false : _f, rest = __rest(_a, ["children", "accessibilityRole", "activeOpacity", "fullWidth", "hasBorder", "inverted", "inline", "inList", "onPress", "testID", "standalone"]);
-    return (_jsx(StyledActionWrapper, __assign({ ref: ref, hasBorder: hasBorder, inverted: inverted, testID: testID }, rest, { children: _jsx(TouchableOpacity, { hitSlop: inline ? 14 : null, activeOpacity: activeOpacity, accessible: true, accessibilityRole: accessibilityRole, onPress: onPress, children: _jsx(StyledActionInner, { fullWidth: fullWidth, inList: inList, inline: inline, standalone: standalone, children: children }) }) })));
+    var children = _a.children, accessibilityRole = _a.accessibilityRole, accessibilityLabel = _a.accessibilityLabel, accessibilityHint = _a.accessibilityHint, _b = _a.activeOpacity, activeOpacity = _b === void 0 ? 0.75 : _b, fullWidth = _a.fullWidth, _c = _a.hasBorder, hasBorder = _c === void 0 ? false : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, _e = _a.inline, inline = _e === void 0 ? false : _e, inList = _a.inList, onPress = _a.onPress, testID = _a.testID, _f = _a.standalone, standalone = _f === void 0 ? false : _f, rest = __rest(_a, ["children", "accessibilityRole", "accessibilityLabel", "accessibilityHint", "activeOpacity", "fullWidth", "hasBorder", "inverted", "inline", "inList", "onPress", "testID", "standalone"]);
+    return (_jsx(StyledActionWrapper, __assign({ ref: ref, hasBorder: hasBorder, inverted: inverted, testID: testID }, rest, { children: _jsx(TouchableOpacity, { hitSlop: inline ? 14 : null, activeOpacity: activeOpacity, accessible: true, accessibilityRole: accessibilityRole, accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint, onPress: onPress, children: _jsx(StyledActionInner, { fullWidth: fullWidth, inList: inList, inline: inline, standalone: standalone, children: children }) }) })));
 });
 var Action = forwardRef(function (_a, ref) {
-    var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'link' : _b, children = _a.children, _c = _a.fullWidth, fullWidth = _c === void 0 ? false : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, _e = _a.inline, inline = _e === void 0 ? false : _e, onPress = _a.onPress, testID = _a.testID, iconLeft = _a.iconLeft, iconRight = _a.iconRight, _f = _a.standalone, standalone = _f === void 0 ? false : _f, rest = __rest(_a, ["accessibilityRole", "children", "fullWidth", "inverted", "inline", "onPress", "testID", "iconLeft", "iconRight", "standalone"]);
+    var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'link' : _b, accessibilityLabel = _a.accessibilityLabel, accessibilityHint = _a.accessibilityHint, children = _a.children, _c = _a.fullWidth, fullWidth = _c === void 0 ? false : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, _e = _a.inline, inline = _e === void 0 ? false : _e, onPress = _a.onPress, testID = _a.testID, iconLeft = _a.iconLeft, iconRight = _a.iconRight, _f = _a.standalone, standalone = _f === void 0 ? false : _f, rest = __rest(_a, ["accessibilityRole", "accessibilityLabel", "accessibilityHint", "children", "fullWidth", "inverted", "inline", "onPress", "testID", "iconLeft", "iconRight", "standalone"]);
     var smallAndUp = useBreakpoint().smallAndUp;
-    return (_jsxs(ActionWrapper, __assign({ ref: ref, accessibilityRole: accessibilityRole, fullWidth: fullWidth, inverted: inverted, inline: inline, onPress: onPress, testID: testID, standalone: standalone }, rest, { children: [iconLeft ? (_jsx(StyledLeftIcon, { inverted: inverted, name: iconLeft, size: 16 })) : null, typeof children === 'string' ? (_jsx(StyledActionText, { smallAndUp: smallAndUp, inverted: inverted, inList: rest === null || rest === void 0 ? void 0 : rest.inList, children: children })) : (_jsx(StyledActionNodeWrapper, { children: children })), iconRight ? (_jsx(StyledRightIcon, { inverted: inverted, name: iconRight, size: 16 })) : null] })));
+    return (_jsxs(ActionWrapper, __assign({ ref: ref, accessibilityRole: accessibilityRole, accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint, fullWidth: fullWidth, inverted: inverted, inline: inline, onPress: onPress, testID: testID, standalone: standalone }, rest, { children: [iconLeft ? (_jsx(StyledLeftIcon, { inverted: inverted, name: iconLeft, size: 16 })) : null, typeof children === 'string' ? (_jsx(StyledActionText, { smallAndUp: smallAndUp, inverted: inverted, inList: rest === null || rest === void 0 ? void 0 : rest.inList, children: children })) : (_jsx(StyledActionNodeWrapper, { children: children })), iconRight ? (_jsx(StyledRightIcon, { inverted: inverted, name: iconRight, size: 16 })) : null] })));
 });
 export { ActionList, Action };

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

@@ -60,11 +60,7 @@ export var SegmentedControls = function (_a) {
                     }, onPress: function () { return setActiveSegment(segment); }, onLayout: function (width, height, x, y) {
                         if (activeSegment.key === segment.key) {
                             animatedX.value = x;
-                            // (adrian.pop) - I couldn't figure out how to make the positioning work once the
-                            // 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.
-                            animatedY.value = y - height / (multipleRows ? 1.1 : 3);
+                            animatedY.value = y;
                             animatedHeight.value = height;
                             animatedWidth.value = width;
                         }
@@ -73,5 +69,5 @@ 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-apart', ";\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");
+    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");
 });

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

@@ -1,10 +1,27 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
-import { Pressable } from 'react-native';
+import { Pressable, useWindowDimensions, } from 'react-native';
 import Animated, { useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
 import styled from '../../../styled.native';
 import { P } from '../../P';
 var AnimatedP = Animated.createAnimatedComponent(P);
+var textSizeProps = {
+    numberOfLines: 1,
+    adjustsFontSizeToFit: true,
+    minimumFontScale: 0.95,
+    maxFontSizeMultiplier: 1.75,
+};
 export var SegmentButton = function (_a) {
     var accessibilityLabel = _a.accessibilityLabel, accessibilityHint = _a.accessibilityHint, inline = _a.inline, isSelected = _a.isSelected, label = _a.label, multipleRows = _a.multipleRows, onLayout = _a.onLayout, onPress = _a.onPress, setAnimatedValues = _a.setAnimatedValues, segmentCount = _a.segmentCount, _b = _a.size, size = _b === void 0 ? 'large' : _b, testID = _a.testID;
     var xRef = useRef(0);
@@ -12,6 +29,7 @@ export var SegmentButton = function (_a) {
     var widthRef = useRef(0);
     var heightRef = useRef(0);
     var hitslopVal = size === 'small' ? 8 : 4;
+    var fontScale = useWindowDimensions().fontScale;
     var fontWeightAnim = useSharedValue(isSelected ? 1 : 0);
     var animatedStyleNormal = useAnimatedStyle(function () {
         return {
@@ -32,20 +50,19 @@ export var SegmentButton = function (_a) {
         if (!isSelected) {
             return;
         }
-        setAnimatedValues(xRef.current, 
-        // (adrian.pop) - I couldn't figure out how to make the positioning work once the
-        // 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 - heightRef.current / (multipleRows ? 1.1 : 3), widthRef.current);
+        setAnimatedValues(xRef.current, yRef.current, widthRef.current);
     }, [isSelected]);
     var handleLayout = function (event) {
         var _a = event.nativeEvent.layout, width = _a.width, height = _a.height, x = _a.x, y = _a.y;
         xRef.current = x;
-        yRef.current = y;
+        // (adrian.pop) - I couldn't figure out how to make the positioning work once the
+        // 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 ? 1.1 : 3 * fontScale);
         heightRef.current = height;
         widthRef.current = width;
-        onLayout(width, height, x, y);
+        onLayout(width, height, x, yRef.current);
     };
     return (_jsx(Pressable, { onLayout: handleLayout, onPress: onPress, accessible: true, accessibilityRole: "checkbox", accessibilityState: { checked: isSelected }, accessibilityLabel: accessibilityLabel || label, accessibilityHint: accessibilityHint, hitSlop: {
             top: hitslopVal,
@@ -53,10 +70,10 @@ export var SegmentButton = function (_a) {
         }, style: {
             flexGrow: inline || multipleRows ? undefined : 1,
             width: inline || multipleRows ? 'auto' : "".concat(100 / segmentCount, "%"),
-        }, testID: testID, children: _jsxs(SSegmentsWrapper, { "$isSelected": isSelected, "$size": size, multiline: multipleRows, children: [_jsx(SSegmentText, { style: {
+        }, testID: testID, children: _jsxs(SSegmentsWrapper, { "$isSelected": isSelected, "$size": size, multiline: multipleRows, children: [_jsx(SSegmentText, __assign({ style: {
                         opacity: 0,
                         fontWeight: '900',
-                    }, "$isSelected": false, children: label }), _jsx(SSegmentText, { style: animatedStyleNormal, "$isSelected": false, numberOfLines: 1, adjustsFontSizeToFit: true, children: label }), _jsx(SSegmentText, { style: animatedStyleBold, "$isSelected": true, numberOfLines: 1, adjustsFontSizeToFit: true, children: label })] }) }));
+                    }, "$isSelected": false }, textSizeProps, { children: label })), _jsx(SSegmentText, __assign({ style: animatedStyleNormal, "$isSelected": false }, textSizeProps, { children: label })), _jsx(SSegmentText, __assign({ style: animatedStyleBold, "$isSelected": true }, textSizeProps, { children: label }))] }) }));
 };
 var SSegmentsWrapper = styled.View(function (_a) {
     var theme = _a.theme, $size = _a.$size, multiline = _a.multiline;

package/dist/esm/components/SelectField/Select.js

@@ -14,7 +14,7 @@ import { Strong } from '../Strong';
 var SelectInput = styled.TouchableOpacity(function (_a) {
     var _b = _a.theme, semantic = _b.semantic, core = _b.core, hasError = _a.hasError;
     return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      flex-direction: row;\n      align-items: center;\n      background-color: transparent;\n      border-color: ", ";\n      border-width: ", ";\n      border-radius: ", ";\n      padding: ", ";\n      padding-right: 14px;\n      height: 44px;\n    "], ["\n      flex-direction: row;\n      align-items: center;\n      background-color: transparent;\n      border-color: ", ";\n      border-width: ", ";\n      border-radius: ", ";\n      padding: ", ";\n      padding-right: 14px;\n      height: 44px;\n    "])), hasError
-        ? semantic.error.border
+        ? semantic.error.message
         : semantic.border.functional, numToPx(core.borderWidth.small), numToPx(core.radius.small), numToPx(core.space[2]));
 });
 var DropdownWrapper = styled.View(function (_a) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ovotech/element-native",
-  "version": "4.4.6",
+  "version": "4.4.7-canary-57d336e-328",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
@@ -14,10 +14,10 @@
   },
   "dependencies": {
     "@backpackapp-io/react-native-toast": "^0.10.0",
+    "@ovotech/element-core": "3.2.1-canary-57d336e-328",
     "deepmerge": "^4.2.2",
     "lodash.groupby": "^4.6.0",
-    "react-native-reanimated-carousel": "^3.5.1",
-    "@ovotech/element-core": "3.2.0"
+    "react-native-reanimated-carousel": "^3.5.1"
   },
   "devDependencies": {
     "@babel/core": "^7.11.5",