@ovotech/element-native 4.4.8 → 4.5.0

package/dist/components/Radio/Radio.js

@@ -1,68 +1,52 @@
-"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 __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Radio = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var element_core_1 = require("@ovotech/element-core");
-var react_1 = require("react");
-var react_native_1 = require("react-native");
-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    ");
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+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 } }) => {
+    return `
+      width: ${numToPx(core.space[6])};
+      height: ${numToPx(core.space[6])};
+      margin-right: 10px;
+    `;
 });
-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
+const StyledRadioInput = styled.View(({ theme: { core, semantic }, invalid, checked }) => {
+    return `
+      width: ${numToPx(core.space[6])};
+      height: ${numToPx(core.space[6])};
+      border: ${numToPx(core.borderWidth.small)} solid;
+      align-items: center;
+      justify-content: center;
+      border-radius: ${numToPx(core.space[6])};
+      border-color: ${invalid
         ? semantic.message.error
         : checked
             ? core.color.blue.dark
-            : semantic.border.functional, ";\n      background: ").concat(checked ? core.color.blue.lightest : 'transparent', ";\n    ");
+            : semantic.border.functional};
+      background: ${checked ? core.color.blue.lightest : 'transparent'};
+    `;
 });
-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    ");
+const StyledRadioInputDot = styled.View(({ theme: { core }, checked }) => {
+    return `
+      width: ${numToPx(core.space[3])};
+      height: ${numToPx(core.space[3])};
+      border-radius: ${numToPx(core.space[3])};
+      background: ${core.color.blue.dark};
+      opacity: ${checked ? 1 : 0};
+    `;
 });
-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 }) }) })));
+const Input = ({ checked, invalid, testID, ...rest }) => {
+    return (_jsx(StyledRadioInputWrapper, { ...rest, children: _jsx(StyledRadioInput, { invalid: invalid, checked: checked, testID: testID, children: _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 Radio = (0, react_1.forwardRef)(function (_a, ref) {
-    var label = _a.label, hint = _a.hint, checked = _a.checked, invalid = _a.invalid, 
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    value = _a.value, // "value" is needed for RadioGroup, but isn't actually used in the radio anywhere
-    _b = _a.activeOpacity, // "value" is needed for RadioGroup, but isn't actually used in the radio anywhere
-    activeOpacity = _b === void 0 ? 0.8 : _b, testID = _a.testID, rest = __rest(_a, ["label", "hint", "checked", "invalid", "value", "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, { children: [(0, jsx_runtime_1.jsx)(Input, { checked: checked, invalid: invalid, testID: testID }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flexShrink: 1 }, children: [(0, jsx_runtime_1.jsx)(LabelText_1.LabelText, { children: label }), hint ? (0, jsx_runtime_1.jsx)(HintText_1.HintText, { children: hint }) : null] })] }) })));
-});
-exports.Radio = Radio;
+const StyledWrapper = styled.View(({ theme: { core } }) => `
+    padding-top: ${numToPx(core.space[3])};
+    flex-direction: row;
+  `);
+const Radio = ({ label, hint, checked, invalid, 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+value, // "value" is needed for RadioGroup, but isn't actually used in the radio anywhere
+activeOpacity = 0.8, testID, ref, ...rest }) => {
+    return (_jsx(TouchableOpacity, { ref: ref, accessible: true, accessibilityRole: "radio", activeOpacity: activeOpacity, accessibilityState: { checked }, ...rest, children: _jsxs(StyledWrapper, { children: [_jsx(Input, { checked: checked, invalid: invalid, testID: testID }), _jsxs(View, { style: { flexShrink: 1 }, children: [_jsx(LabelText, { children: label }), hint ? _jsx(HintText, { children: hint }) : null] })] }) }));
+};
+export { Radio };

package/dist/components/Radio/RadioField.js

@@ -1,49 +1,21 @@
-"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);
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Children, cloneElement } from 'react';
+import { View } from 'react-native';
+import { callAll, getValidChildren } from '../../utils';
+import { ErrorText } from '../ErrorText';
+import { FormGroup } from '../FormGroup';
+import { HintText } from '../HintText';
+import { LabelText } from '../LabelText';
+import { Stack } from '../Stack';
+const RadioField = ({ label, hint, error, children, optional = false, value, onValueChange, ...rest }) => {
+    const hasError = !!error;
+    const validChildren = getValidChildren(children);
+    return (_jsx(FormGroup, { ...rest, error: hasError, children: _jsxs(Stack, { spaceBetween: 1, children: [_jsxs(View, { children: [_jsxs(LabelText, { children: [label, optional ? ' (optional)' : null] }), hint ? _jsx(HintText, { children: hint }) : null, error ? _jsx(ErrorText, { children: error }) : null] }), _jsx(View, { accessible: true, accessibilityRole: "radiogroup", children: Children.map(validChildren, child => cloneElement(child, {
+                        invalid: hasError ? true : child.props.invalid,
+                        checked: child.props.checked != null
+                            ? child.props.checked
+                            : value && (value === child.props.value ? true : false),
+                        onPress: callAll(onValueChange && (() => onValueChange(child.props.value)), child.props.onPress),
+                    })) })] }) }));
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RadioField = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var react_native_1 = require("react-native");
-var utils_1 = require("../../utils");
-var ErrorText_1 = require("../ErrorText");
-var FormGroup_1 = require("../FormGroup");
-var HintText_1 = require("../HintText");
-var LabelText_1 = require("../LabelText");
-var Stack_1 = require("../Stack");
-var RadioField = function (_a) {
-    var label = _a.label, hint = _a.hint, error = _a.error, children = _a.children, _b = _a.optional, optional = _b === void 0 ? false : _b, value = _a.value, onValueChange = _a.onValueChange, rest = __rest(_a, ["label", "hint", "error", "children", "optional", "value", "onValueChange"]);
-    var hasError = !!error;
-    var validChildren = (0, utils_1.getValidChildren)(children);
-    return ((0, jsx_runtime_1.jsx)(FormGroup_1.FormGroup, __assign({}, rest, { error: hasError, children: (0, jsx_runtime_1.jsxs)(Stack_1.Stack, { spaceBetween: 1, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, jsx_runtime_1.jsxs)(LabelText_1.LabelText, { children: [label, optional ? ' (optional)' : null] }), hint ? (0, jsx_runtime_1.jsx)(HintText_1.HintText, { children: hint }) : null, error ? (0, jsx_runtime_1.jsx)(ErrorText_1.ErrorText, { children: error }) : null] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { accessible: true, accessibilityRole: "radiogroup", children: react_1.Children.map(validChildren, function (child) {
-                        return (0, react_1.cloneElement)(child, {
-                            invalid: hasError ? true : child.props.invalid,
-                            checked: child.props.checked != null
-                                ? child.props.checked
-                                : value && (value === child.props.value ? true : false),
-                            onPress: (0, utils_1.callAll)(onValueChange && (function () { return onValueChange(child.props.value); }), child.props.onPress),
-                        });
-                    }) })] }) })));
-};
-exports.RadioField = RadioField;
+export { RadioField };

package/dist/components/Radio/index.js

@@ -1,7 +1,2 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RadioField = exports.Radio = void 0;
-var Radio_1 = require("./Radio");
-Object.defineProperty(exports, "Radio", { enumerable: true, get: function () { return Radio_1.Radio; } });
-var RadioField_1 = require("./RadioField");
-Object.defineProperty(exports, "RadioField", { enumerable: true, get: function () { return RadioField_1.RadioField; } });
+export { Radio } from './Radio';
+export { RadioField } from './RadioField';

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

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

package/dist/components/RadioCard/RadioCard.js

@@ -1,72 +1,57 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-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 __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RadioCard = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var element_core_1 = require("@ovotech/element-core");
-var react_1 = require("react");
-var react_native_1 = require("react-native");
-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    ");
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+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 } }) => {
+    return `
+      width: ${numToPx(core.space[6])};
+      height: ${numToPx(core.space[6])};
+      margin-top: ${numToPx(core.space[2])};
+    `;
 });
-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
+const StyledRadioInput = styled.View(({ theme: { core, semantic }, invalid, checked }) => {
+    return `
+      width: ${numToPx(core.space[6])};
+      height: ${numToPx(core.space[6])};
+      border: ${numToPx(core.borderWidth.small)} solid;
+      align-items: center;
+      justify-content: center;
+      border-radius: ${numToPx(core.space[6])};
+      border-color: ${invalid
         ? semantic.message.error
         : checked
             ? core.color.blue.dark
-            : semantic.border.functional, ";\n      background: ").concat(checked ? core.color.blue.lightest : 'transparent', ";\n    ");
+            : semantic.border.functional};
+      background: ${checked ? core.color.blue.lightest : 'transparent'};
+    `;
 });
-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    ");
+const StyledRadioInputDot = styled.View(({ theme: { core }, checked }) => {
+    return `
+      width: ${numToPx(core.space[3])};
+      height: ${numToPx(core.space[3])};
+      border-radius: ${numToPx(core.space[3])};
+      background: ${core.color.blue.dark};
+      opacity: ${checked ? 1 : 0};
+    `;
 });
-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 }) }) })));
+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 `
+    align-items: center;
+    background: ${semantic.surface.elevated};
+    padding: ${numToPx(core.space[2])};
+    min-width: 82px;
+    border-radius: ${numToPx(core.radius.small)};
+    border: ${numToPx(core.borderWidth.medium)} solid;
+    border-color: ${invalid
+    ? semantic.message.error
+    : checked
+        ? core.color.blue.dark
+        : '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] }) }));
 };
-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
-        : checked
-            ? core.color.blue.dark
-            : '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 templateObject_1;

package/dist/components/RadioCard/index.js

@@ -1,5 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RadioCard = void 0;
-var RadioCard_1 = require("./RadioCard");
-Object.defineProperty(exports, "RadioCard", { enumerable: true, get: function () { return RadioCard_1.RadioCard; } });
+export { RadioCard } from './RadioCard';

package/dist/components/SegmentedControls/SegmentedControls.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 import { ViewProps } from 'react-native';
 export type Segment = {
     key: string;

package/dist/components/SegmentedControls/SegmentedControls.js

@@ -1,100 +1,48 @@
-"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);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SegmentedControls = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
-var styled_native_1 = __importStar(require("../../styled.native"));
-var SegmentButton_1 = require("./components/SegmentButton");
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Animated, { useAnimatedStyle, useSharedValue, withSpring, } from 'react-native-reanimated';
+import styled, { useTheme } from '../../styled.native';
+import { SegmentButton } from './components/SegmentButton';
 /* These settings were found to be nice and fast whilst maintaining spring */
-var springSettings = {
+const springSettings = {
     damping: 25,
     mass: 0.25,
 };
-var SegmentedControls = function (_a) {
-    var activeSegment = _a.activeSegment, setActiveSegment = _a.setActiveSegment, segments = _a.segments, _b = _a.inline, inline = _b === void 0 ? false : _b, multipleRows = _a.multipleRows, _c = _a.size, size = _c === void 0 ? 'large' : _c, rest = __rest(_a, ["activeSegment", "setActiveSegment", "segments", "inline", "multipleRows", "size"]);
-    var animatedX = (0, react_native_reanimated_1.useSharedValue)(0);
-    var animatedY = (0, react_native_reanimated_1.useSharedValue)(0);
-    var animatedHeight = (0, react_native_reanimated_1.useSharedValue)(0);
-    var animatedWidth = (0, react_native_reanimated_1.useSharedValue)(0);
-    var theme = (0, styled_native_1.useTheme)();
-    var animatedBackgroundStyle = (0, react_native_reanimated_1.useAnimatedStyle)(function () { return ({
-        transform: [
-            {
-                translateX: animatedX.value,
-            },
-            {
-                translateY: animatedY.value + theme.core.space[size === 'small' ? 1 : 2],
-            } /* accounting for margin from top & bottom */,
-        ],
+export const SegmentedControls = ({ activeSegment, setActiveSegment, segments, inline = false, multipleRows, size = 'large', ...rest }) => {
+    const animatedX = useSharedValue(0);
+    const animatedY = useSharedValue(0);
+    const animatedHeight = useSharedValue(0);
+    const animatedWidth = useSharedValue(0);
+    const theme = useTheme();
+    const animatedBackgroundStyle = useAnimatedStyle(() => ({
+        left: animatedX.value,
+        top: animatedY.value + theme.core.space[size === 'small' ? 2 : 3],
         width: animatedWidth.value,
         height: animatedHeight.value,
         position: 'absolute',
         borderRadius: theme.core.radius.max,
         backgroundColor: theme.semantic.surface.elevated,
-    }); }, [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;
-                return ((0, jsx_runtime_1.jsx)(SegmentButton_1.SegmentButton, { isSelected: activeSegment.key === segment.key, label: segment.label, accessibilityLabel: segment.accessibilityLabel, accessibilityHint: segment.accessibilityHint, setAnimatedValues: function (x, y, width) {
-                        animatedX.value = (0, react_native_reanimated_1.withSpring)(x, springSettings);
-                        animatedY.value = (0, react_native_reanimated_1.withSpring)(y, springSettings);
+    }), [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);
+                    animatedY.value = withSpring(y, springSettings);
+                    animatedWidth.value = width;
+                }, onPress: () => setActiveSegment(segment), onLayout: (width, height, x, y) => {
+                    if (activeSegment.key === segment.key) {
+                        animatedX.value = x;
+                        animatedY.value = y;
+                        animatedHeight.value = height;
                         animatedWidth.value = width;
-                    }, onPress: function () { return setActiveSegment(segment); }, onLayout: function (width, height, x, y) {
-                        if (activeSegment.key === segment.key) {
-                            animatedX.value = x;
-                            animatedY.value = y;
-                            animatedHeight.value = height;
-                            animatedWidth.value = width;
-                        }
-                    }, multipleRows: multipleRows, size: size, inline: inline, testID: "".concat((_a = rest.testID) !== null && _a !== void 0 ? _a : 'segment', "-").concat(segment.key), segmentCount: (_b = segments.length) !== null && _b !== void 0 ? _b : 0 }, segment.key));
-            })] })));
+                    }
+                }, multipleRows: multipleRows, size: size, inline: inline, testID: `${rest.testID ?? 'segment'}-${segment.key}`, segmentCount: segments.length ?? 0 }, segment.key)))] }));
 };
-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");
-});
+const SegmentsContainer = styled.View(({ theme: { core, semantic }, $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;
+`);

package/dist/components/SegmentedControls/components/SegmentButton.d.ts

@@ -1,3 +1,4 @@
+import { type JSX } from 'react';
 type SegmentButtonProps = {
     isSelected: boolean;
     label: string;