@ovotech/element-native 4.4.8 → 4.5.0

package/dist/esm/components/TextGroup/TextGroup.js

@@ -1,39 +1,20 @@
-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;
-};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Children, cloneElement, isValidElement, } from 'react';
 import { View } from 'react-native';
 import { getValidChildren } from '../../utils';
-export var TextGroup = function (_a) {
-    var children = _a.children, rest = __rest(_a, ["children"]);
-    var validChildren = getValidChildren(children);
-    return (_jsx(View, __assign({}, rest, { children: Children.map(validChildren, function (child, index) {
+export const TextGroup = ({ children, ...rest }) => {
+    const validChildren = getValidChildren(children);
+    return (_jsx(View, { ...rest, children: Children.map(validChildren, (child, index) => {
             if (!isValidElement(child)) {
                 return;
             }
-            var style = __assign(__assign(__assign({}, child.props.style), (index === 0 ? { marginTop: 0 } : {})), { marginBottom: 0 });
-            return cloneElement(child, {
-                style: style,
+            const typedChild = child;
+            const newStyles = {
+                ...(index === 0 ? { marginTop: 0 } : {}),
+                marginBottom: 0,
+            };
+            return cloneElement(typedChild, {
+                style: [typedChild.props.style, newStyles],
             });
-        }) })));
+        }) }));
 };

package/dist/esm/components/TextInput/TextInput.js

@@ -1,16 +1,4 @@
-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 } from "react/jsx-runtime";
-import { forwardRef } from 'react';
 import { Input } from '../Input/Input';
-var TextInput = forwardRef(function (props, ref) { return (_jsx(Input, __assign({}, props, { keyboardType: "default", ref: ref }))); });
+const TextInput = ({ ref, ...props }) => (_jsx(Input, { keyboardType: "default", ref: ref, ...props }));
 export { TextInput };

package/dist/esm/components/TextLink/TextLink.js

@@ -1,49 +1,21 @@
-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;
-};
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from 'react';
 import { Text } from 'react-native';
 import styled, { css } from '../../styled.native';
 import { getText } from '../../utils/utils';
 import { Icon } from '../Icon';
-var StyledText = styled.Text(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-family: ", ";\n    color: ", ";\n    text-decoration: underline;\n    text-decoration-color: ", ";\n  "], ["\n    font-family: ", ";\n    color: ", ";\n    text-decoration: underline;\n    text-decoration-color: ", ";\n  "])), core.fontFamily.body.native, semantic.message.link, semantic.message.link);
-});
-var StyledIcon = styled(Icon)(function (_a) {
-    var semantic = _a.theme.semantic;
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    color: ", ";\n  "], ["\n    color: ", ";\n  "])), semantic.message.branded);
-});
-var TextLink = forwardRef(function (_a, ref) {
-    var children = _a.children, _b = _a.opensInNewWindow, opensInNewWindow = _b === void 0 ? false : _b, accessibilityLabel = _a.accessibilityLabel, rest = __rest(_a, ["children", "opensInNewWindow", "accessibilityLabel"]);
-    var updatedAccessibilityLabel = opensInNewWindow
-        ? "".concat(accessibilityLabel ? accessibilityLabel : getText(children), " (opens in new window)")
+const StyledText = styled.Text(({ theme: { core, semantic } }) => css `
+    font-family: ${core.fontFamily.body.native};
+    color: ${semantic.message.link};
+    text-decoration: underline;
+    text-decoration-color: ${semantic.message.link};
+  `);
+const StyledIcon = styled(Icon)(({ theme: { semantic } }) => css `
+    color: ${semantic.message.branded};
+  `);
+const TextLink = ({ children, opensInNewWindow = false, accessibilityLabel, ref, ...rest }) => {
+    const updatedAccessibilityLabel = opensInNewWindow
+        ? `${accessibilityLabel ? accessibilityLabel : getText(children)} (opens in new window)`
         : accessibilityLabel;
-    return (_jsxs(Text, __assign({}, rest, { accessibilityLabel: updatedAccessibilityLabel, ref: ref, children: [_jsx(StyledText, { children: children }), opensInNewWindow && (_jsxs(_Fragment, { children: ["\u00A0", _jsx(StyledIcon, { size: 12, name: "new-window" })] }))] })));
-});
+    return (_jsxs(Text, { ...rest, accessibilityLabel: updatedAccessibilityLabel, ref: ref, children: [_jsx(StyledText, { children: children }), opensInNewWindow && (_jsxs(_Fragment, { children: ["\u00A0", _jsx(StyledIcon, { size: 12, name: "new-window" })] }))] }));
+};
 export { TextLink };
-var templateObject_1, templateObject_2;

package/dist/esm/components/TextareaField/TextareaField.js

@@ -1,30 +1,6 @@
-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;
-};
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
 import { Field } from '../Field';
 import { TextareaInput } from '../TextareaInput';
-export var TextareaField = forwardRef(function (_a, ref) {
-    var rest = __rest(_a, []);
-    return (_jsx(Field, __assign({}, rest, { ref: ref, children: _jsx(TextareaInput, {}) })));
-});
+export const TextareaField = ({ ref, ...rest }) => {
+    return (_jsx(Field, { ...rest, children: _jsx(TextareaInput, { ref: ref }) }));
+};

package/dist/esm/components/TextareaInput/TextareaInput.js

@@ -1,41 +1,13 @@
-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;
-};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { numToPx } from '@ovotech/element-core';
-import { forwardRef } from 'react';
 import styled, { css } from '../../styled.native';
 import { Input } from '../Input/Input';
-var StyledInput = styled(Input)(function (_a) {
-    var core = _a.theme.core, rows = _a.rows;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    padding: ", ";\n    padding-top: ", ";\n    height: ", "px;\n  "], ["\n    padding: ", ";\n    padding-top: ", ";\n    height: ", "px;\n  "])), numToPx(core.space[2]), numToPx(core.space[3]), core.space[8] * rows);
-});
-var TextareaInput = forwardRef(function (_a, ref) {
-    var _b = _a.rows, rows = _b === void 0 ? 3 : _b, rest = __rest(_a, ["rows"]);
-    return (_jsx(StyledInput, __assign({}, rest, { keyboardType: "default", multiline: true, textAlignVertical: "top", rows: rows, ref: ref })));
-});
+const StyledInput = styled(Input)(({ theme: { core }, rows }) => css `
+    padding: ${numToPx(core.space[2])};
+    padding-top: ${numToPx(core.space[3])};
+    height: ${core.space[8] * rows}px;
+  `);
+const TextareaInput = ({ rows = 3, ref, ...rest }) => {
+    return (_jsx(StyledInput, { ...rest, keyboardType: "default", multiline: true, textAlignVertical: "top", rows: rows, ref: ref }));
+};
 export { TextareaInput };
-var templateObject_1;

package/dist/esm/components/Toast/Toast.js

@@ -1,18 +1,3 @@
-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);
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { toast, ToastPosition, Toasts, } from '@backpackapp-io/react-native-toast';
 import { numToPx } from '@ovotech/element-core';
@@ -23,63 +8,68 @@ import styled, { css } from '../../styled.native';
 import { Action } from '../ActionList';
 import { Icon } from '../Icon';
 import { P } from '../P';
-export var ToastsContainer = function (_a) {
-    var _b = _a.top, top = _b === void 0 ? -80 : _b;
-    return (_jsx(Toasts, { extraInsets: { top: top } }));
-};
-var StyledView = styled.View(function (_a) {
-    var core = _a.theme.core, variant = _a.variant;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    background-color: ", ";\n    overflow: hidden;\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-right: ", ";\n    padding-left: ", ";\n    border-radius: ", ";\n    flex-direction: row;\n  "], ["\n    background-color: ", ";\n    overflow: hidden;\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-right: ", ";\n    padding-left: ", ";\n    border-radius: ", ";\n    flex-direction: row;\n  "])), variant === 'default'
-        ? core.color.brand.forest
-        : core.color.red.darkest, numToPx(core.space[2]), numToPx(core.space[3]), numToPx(core.space[2]), numToPx(core.space[4]), numToPx(core.radius.max));
-});
-var StyledP = styled(P)(function (_a) {
-    var semantic = _a.theme.semantic;
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    color: ", ";\n  "], ["\n    color: ", ";\n  "])), semantic.inverted.message.base);
-});
-var StyledThinBorder = styled(Animated.View)(function (_a) {
-    var core = _a.theme.core, variant = _a.variant;
-    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    background-color: ", ";\n    height: 1px;\n  "], ["\n    background-color: ", ";\n    height: 1px;\n  "])), variant === 'default'
-        ? core.color.brand.energised
-        : core.color.red.light);
-});
-var StyledThickBorder = styled(Animated.View)(function (_a) {
-    var core = _a.theme.core, variant = _a.variant;
-    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    background-color: ", ";\n    height: 3px;\n  "], ["\n    background-color: ", ";\n    height: 3px;\n  "])), variant === 'default'
-        ? core.color.brand.leaf
-        : core.color.red.base);
-});
-var StyledCloseIcon = styled(TouchableOpacity)(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic;
-    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    background-color: ", ";\n    border-radius: ", ";\n    width: ", ";\n    height: ", ";\n    padding: ", ";\n    align-items: center;\n    justify-content: center;\n  "], ["\n    background-color: ", ";\n    border-radius: ", ";\n    width: ", ";\n    height: ", ";\n    padding: ", ";\n    align-items: center;\n    justify-content: center;\n  "])), semantic.inverted.surface, numToPx(core.radius.max), numToPx(core.space[7]), numToPx(core.space[7]), numToPx(core.space[2]));
-});
-export var showToast = function (_a) {
-    var message = _a.message, _b = _a.dismissible, dismissible = _b === void 0 ? false : _b, action = _a.action, actionTitle = _a.actionTitle, _c = _a.variant, variant = _c === void 0 ? 'default' : _c, _d = _a.duration, duration = _d === void 0 ? 5000 : _d;
+export const ToastsContainer = ({ top = -80 }) => (_jsx(Toasts, { extraInsets: { top } }));
+const StyledView = styled.View(({ theme: { core }, variant }) => css `
+    background-color: ${variant === 'default'
+    ? core.color.brand.forest
+    : core.color.red.darkest};
+    overflow: hidden;
+    padding-top: ${numToPx(core.space[2])};
+    padding-bottom: ${numToPx(core.space[3])};
+    padding-right: ${numToPx(core.space[2])};
+    padding-left: ${numToPx(core.space[4])};
+    border-radius: ${numToPx(core.radius.max)};
+    flex-direction: row;
+  `);
+const StyledP = styled(P)(({ theme: { semantic } }) => css `
+    color: ${semantic.inverted.message.base};
+  `);
+const StyledThinBorder = styled(Animated.View)(({ theme: { core }, variant }) => css `
+    background-color: ${variant === 'default'
+    ? core.color.brand.energised
+    : core.color.red.light};
+    height: 1px;
+  `);
+const StyledThickBorder = styled(Animated.View)(({ theme: { core }, variant }) => css `
+    background-color: ${variant === 'default'
+    ? core.color.brand.leaf
+    : core.color.red.base};
+    height: 3px;
+  `);
+const StyledCloseIcon = styled(TouchableOpacity)(({ theme: { core, semantic } }) => css `
+    background-color: ${semantic.inverted.surface};
+    border-radius: ${numToPx(core.radius.max)};
+    width: ${numToPx(core.space[7])};
+    height: ${numToPx(core.space[7])};
+    padding: ${numToPx(core.space[2])};
+    align-items: center;
+    justify-content: center;
+  `);
+export const showToast = ({ message, dismissible = false, action, actionTitle, variant = 'default', duration = 5000, }) => {
     return action || dismissible
         ? toast.loading(message, {
             id: 'clipboard',
             position: ToastPosition.BOTTOM,
             disableShadow: true,
-            customToast: function (t) { return (_jsx(CustomToast, __assign({}, t, { dismissible: dismissible, action: action, actionTitle: actionTitle, variant: variant }), message)); },
+            customToast: t => (_jsx(CustomToast, { ...t, dismissible: dismissible, action: action, actionTitle: actionTitle, variant: variant }, message)),
         })
         : toast(message, {
             id: 'clipboard',
             position: ToastPosition.BOTTOM,
-            duration: duration,
+            duration,
             disableShadow: true,
-            customToast: function (t) { return (_jsx(CustomToastWithTimeIndicator, __assign({}, t, { variant: variant }), message)); },
+            customToast: t => (_jsx(CustomToastWithTimeIndicator, { ...t, variant: variant }, message)),
         });
 };
-var CustomToastWithTimeIndicator = function (_a) {
-    var message = _a.message, _b = _a.duration, duration = _b === void 0 ? 5000 : _b, variant = _a.variant;
-    var toastPadding = 20;
-    var textRef = useRef(null);
-    var _c = useState(0), textHeight = _c[0], setTextHeight = _c[1];
-    var windowWidth = Dimensions.get('window').width;
-    var screenPadding = 32;
-    var toastWidth = windowWidth - screenPadding;
-    var sharedWidth = useSharedValue(toastWidth);
-    var style = useAnimatedStyle(function () {
+const CustomToastWithTimeIndicator = ({ message, duration = 5000, variant, }) => {
+    const toastPadding = 20;
+    const textRef = useRef(null);
+    const [textHeight, setTextHeight] = useState(0);
+    const windowWidth = Dimensions.get('window').width;
+    const screenPadding = 32;
+    const toastWidth = windowWidth - screenPadding;
+    const sharedWidth = useSharedValue(toastWidth);
+    const style = useAnimatedStyle(() => {
         return {
             width: withTiming(sharedWidth.value, {
                 duration: duration,
@@ -87,38 +77,36 @@ var CustomToastWithTimeIndicator = function (_a) {
             }),
         };
     });
-    useEffect(function () {
+    useEffect(() => {
         sharedWidth.value = 0;
     }, []);
     return (_jsxs(StyledView, { variant: variant, style: {
             width: toastWidth,
             height: textHeight + toastPadding,
             flexWrap: 'wrap',
-        }, children: [_jsx(StyledP, { ref: textRef, onLayout: function () {
-                    var _a;
-                    (_a = textRef.current) === null || _a === void 0 ? void 0 : _a.measureInWindow(function (_x, _y, _width, height) {
+        }, children: [_jsx(StyledP, { ref: textRef, onLayout: () => {
+                    textRef.current?.measureInWindow((_x, _y, _width, height) => {
                         setTextHeight(height);
                     });
                 }, children: message }), _jsxs(View, { style: { position: 'absolute', bottom: 0 }, children: [_jsx(StyledThinBorder, { variant: variant, style: style }), _jsx(StyledThickBorder, { variant: variant, style: style })] })] }));
 };
-var CustomToast = function (_a) {
-    var id = _a.id, message = _a.message, dismissible = _a.dismissible, action = _a.action, actionTitle = _a.actionTitle, width = _a.width, variant = _a.variant;
-    var toastPadding = 20;
-    var textRef = useRef(null);
-    var actionRef = useRef(null);
-    var _b = useState(0), textHeight = _b[0], setTextHeight = _b[1];
-    var _c = useState(0), actionHeight = _c[0], setActionHeight = _c[1];
-    var toastHeight = Math.floor(textHeight) === Math.floor(actionHeight) && !dismissible // handling multiline
+const CustomToast = ({ id, message, dismissible, action, actionTitle, width, variant, }) => {
+    const toastPadding = 20;
+    const textRef = useRef(null);
+    const actionRef = useRef(null);
+    const [textHeight, setTextHeight] = useState(0);
+    const [actionHeight, setActionHeight] = useState(0);
+    const toastHeight = Math.floor(textHeight) === Math.floor(actionHeight) && !dismissible // handling multiline
         ? textHeight
         : textHeight + actionHeight;
-    var handleAction = function () {
+    const handleAction = () => {
         if (action && actionTitle) {
             action();
             toast.dismiss(id);
         }
     };
     return (_jsxs(StyledView, { variant: variant, style: {
-            width: width,
+            width,
             height: toastHeight + toastPadding,
             alignItems: action ? 'flex-start' : 'center',
         }, children: [_jsxs(View, { style: {
@@ -126,16 +114,13 @@ var CustomToast = function (_a) {
                     flexWrap: 'wrap',
                     justifyContent: 'space-between',
                     flex: 1,
-                }, children: [_jsx(StyledP, { ref: textRef, onLayout: function () {
-                            var _a;
-                            (_a = textRef.current) === null || _a === void 0 ? void 0 : _a.measureInWindow(function (_x, _y, _width, height) {
+                }, children: [_jsx(StyledP, { ref: textRef, onLayout: () => {
+                            textRef.current?.measureInWindow((_x, _y, _width, height) => {
                                 setTextHeight(height);
                             });
-                        }, children: message }), action && actionTitle ? (_jsx(Action, { ref: actionRef, style: { width: 'auto' }, inverted: true, inline: true, iconRight: "chevron-right-small", onPress: handleAction, onLayout: function () {
-                            var _a;
-                            (_a = actionRef.current) === null || _a === void 0 ? void 0 : _a.measureInWindow(function (_x, _y, _width, height) {
+                        }, children: message }), action && actionTitle ? (_jsx(Action, { ref: actionRef, style: { width: 'auto' }, inverted: true, inline: true, iconRight: "chevron-right-small", onPress: handleAction, onLayout: () => {
+                            actionRef.current?.measureInWindow((_x, _y, _width, height) => {
                                 setActionHeight(height);
                             });
-                        }, children: actionTitle })) : null] }), dismissible ? (_jsx(StyledCloseIcon, { onPress: function () { return toast.dismiss(id); }, children: _jsx(Icon, { name: "cross", color: "#fff", size: 14 }) })) : null] }));
+                        }, children: actionTitle })) : null] }), dismissible ? (_jsx(StyledCloseIcon, { onPress: () => toast.dismiss(id), children: _jsx(Icon, { name: "cross", color: "#fff", size: 14 }) })) : null] }));
 };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/esm/components/Toggle/Toggle.js

@@ -1,53 +1,25 @@
-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;
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useContext, useEffect, useRef } from 'react';
-import { Animated, View, } from 'react-native';
-import { ThemeContext } from 'styled-components/native';
+import { useEffect, useRef } from 'react';
+import { Animated, View } from 'react-native';
+import { useTheme } from '../../styled.native';
 import { HintText } from '../HintText/HintText';
 import { LabelText } from '../LabelText';
 import { StyledToggleDot, StyledToggleInputWrapper, StyledToggleInput, StyledWrapper, } from './styles';
-var Input = function (_a) {
-    var checked = _a.checked, labelPosition = _a.labelPosition, testID = _a.testID, rest = __rest(_a, ["checked", "labelPosition", "testID"]);
-    var core = useContext(ThemeContext).core;
-    var leftVal = useRef(new Animated.Value(checked ? core.space[6] : core.space[1])).current;
-    useEffect(function () {
+const Input = ({ checked, labelPosition, testID, ...rest }) => {
+    const { core } = useTheme();
+    const leftVal = useRef(new Animated.Value(checked ? core.space[6] : core.space[1])).current;
+    useEffect(() => {
         Animated.timing(leftVal, {
             toValue: checked ? core.space[6] : core.space[1],
             duration: 150, // i.e. theme.core.transition.fast
             useNativeDriver: true,
         }).start();
     }, [checked]);
-    return (_jsx(StyledToggleInputWrapper, __assign({ labelPosition: labelPosition }, rest, { children: _jsx(StyledToggleInput, { checked: checked, testID: testID, children: _jsx(StyledToggleDot, { style: {
+    return (_jsx(StyledToggleInputWrapper, { labelPosition: labelPosition, ...rest, children: _jsx(StyledToggleInput, { checked: checked, testID: testID, children: _jsx(StyledToggleDot, { style: {
                     transform: [{ translateX: leftVal }],
-                }, checked: checked }) }) })));
+                }, checked: checked }) }) }));
+};
+export const Toggle = ({ activeOpacity = 0.8, checked = false, label, hint, inline, labelPosition = 'left', testID, ref, ...rest }) => {
+    const hasLabel = label !== undefined;
+    return (_jsxs(StyledWrapper, { ref: ref, accessible: true, accessibilityRole: "checkbox", activeOpacity: activeOpacity, accessibilityState: { checked }, hitSlop: 10, hasLabel: hasLabel, labelPosition: labelPosition, inline: inline, ...rest, children: [hasLabel ? (_jsxs(View, { style: { flexShrink: 1 }, children: [_jsx(LabelText, { children: label }), hint ? _jsx(HintText, { children: hint }) : null] })) : null, _jsx(Input, { checked: checked, testID: testID, labelPosition: hasLabel ? labelPosition : undefined })] }));
 };
-export var Toggle = forwardRef(function (_a, ref) {
-    var 
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    _b = _a.activeOpacity, 
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    activeOpacity = _b === void 0 ? 0.8 : _b, _c = _a.checked, checked = _c === void 0 ? false : _c, label = _a.label, hint = _a.hint, inline = _a.inline, _d = _a.labelPosition, labelPosition = _d === void 0 ? 'left' : _d, testID = _a.testID, rest = __rest(_a, ["activeOpacity", "checked", "label", "hint", "inline", "labelPosition", "testID"]);
-    var hasLabel = label !== undefined;
-    return (_jsxs(StyledWrapper, __assign({ ref: ref, accessible: true, accessibilityRole: "checkbox", activeOpacity: activeOpacity, accessibilityState: { checked: checked }, hitSlop: 10, hasLabel: hasLabel, labelPosition: labelPosition, inline: inline }, rest, { children: [hasLabel ? (_jsxs(View, { style: { flexShrink: 1 }, children: [_jsx(LabelText, { children: label }), hint ? _jsx(HintText, { children: hint }) : null] })) : null, _jsx(Input, { checked: checked, testID: testID, labelPosition: hasLabel ? labelPosition : undefined })] })));
-});

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

@@ -1,23 +1,37 @@
 import { numToPx } from '@ovotech/element-core';
 import { Animated } from 'react-native';
 import styled from '../../styled.native';
-export var StyledWrapper = styled.TouchableOpacity(function (_a) {
-    var core = _a.theme.core, hasLabel = _a.hasLabel, inline = _a.inline, labelPosition = _a.labelPosition;
-    return "\n    width: ".concat(hasLabel ? (inline ? undefined : '100%') : numToPx(core.space[11]), ";\n    display: flex;\n    flex-direction: row").concat(labelPosition === 'left' ? '' : '-reverse', ";\n    justify-content: space-between;\n    position: relative;\n  ");
-});
-export var StyledToggleInputWrapper = styled.View(function (_a) {
-    var core = _a.theme.core, labelPosition = _a.labelPosition;
-    return "\n    width: ".concat(numToPx(core.space[11]), ";\n    height: ").concat(numToPx(core.space[6]), ";\n    ").concat(labelPosition
+export const StyledWrapper = styled.TouchableOpacity(({ theme: { core }, hasLabel, inline, labelPosition }) => `
+    width: ${hasLabel ? (inline ? undefined : '100%') : numToPx(core.space[11])};
+    display: flex;
+    flex-direction: row${labelPosition === 'left' ? '' : '-reverse'};
+    justify-content: space-between;
+    position: relative;
+  `);
+export const StyledToggleInputWrapper = styled.View(({ theme: { core }, labelPosition }) => {
+    return `
+    width: ${numToPx(core.space[11])};
+    height: ${numToPx(core.space[6])};
+    ${labelPosition
         ? labelPosition === 'left'
             ? 'margin-left: 10px;'
             : 'margin-right: 10px;'
-        : null, "\n    ");
-});
-export var StyledToggleInput = styled.View(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, checked = _a.checked;
-    return "\n      width: ".concat(numToPx(core.space[11]), ";\n      height: ").concat(numToPx(core.space[6]), ";\n      justify-content: center;\n      border-radius: ").concat(numToPx(core.radius.large), ";\n      background: ").concat(checked ? semantic.focus.outline : semantic.message.secondary, ";\n    ");
+        : ''}
+    `;
 });
-export var StyledToggleDot = styled(Animated.View)(function (_a) {
-    var core = _a.theme.core, checked = _a.checked;
-    return "\n  position: absolute;\n  width: ".concat(numToPx(core.space[4]), ";\n  height: ").concat(numToPx(core.space[4]), ";\n  border-radius: ").concat(numToPx(core.space[4]), ";\n  background-color: ").concat(checked ? core.color.brand.white : core.color.neutral.lighter, ";\n");
+export const StyledToggleInput = styled.View(({ theme: { core, semantic }, checked }) => {
+    return `
+      width: ${numToPx(core.space[11])};
+      height: ${numToPx(core.space[6])};
+      justify-content: center;
+      border-radius: ${numToPx(core.radius.large)};
+      background: ${checked ? semantic.focus.outline : semantic.message.secondary};
+    `;
 });
+export const StyledToggleDot = styled(Animated.View)(({ theme: { core }, checked }) => `
+  position: absolute;
+  width: ${numToPx(core.space[4])};
+  height: ${numToPx(core.space[4])};
+  border-radius: ${numToPx(core.space[4])};
+  background-color: ${checked ? core.color.brand.white : core.color.neutral.lighter};
+`);

package/dist/esm/hooks/use-breakpoint.js

@@ -1,9 +1,9 @@
 import { useContext } from 'react';
 import { useWindowDimensions } from 'react-native';
 import { ThemeContext } from '../styled.native';
-export var useBreakpoint = function () {
-    var breakpoint = useContext(ThemeContext).core.breakpoint;
-    var width = useWindowDimensions().width;
+export const useBreakpoint = () => {
+    const { core: { breakpoint }, } = useContext(ThemeContext);
+    const { width } = useWindowDimensions();
     return {
         smallAndUp: width > Number(breakpoint.small),
         mediumAndUp: width > Number(breakpoint.medium),

package/dist/esm/hooks/use-full-width.js

@@ -1,11 +1,10 @@
 import { useState, useEffect } from 'react';
 import { useBreakpoint } from './use-breakpoint';
-export var useFullWidth = function (fullWidth) {
-    if (fullWidth === void 0) { fullWidth = 'small'; }
-    var _a = useState(true), isFullWidth = _a[0], setIsfullWidth = _a[1];
-    var smallAndUp = useBreakpoint().smallAndUp;
-    useEffect(function () {
-        var values = {
+export const useFullWidth = (fullWidth = 'small') => {
+    const [isFullWidth, setIsfullWidth] = useState(true);
+    const { smallAndUp } = useBreakpoint();
+    useEffect(() => {
+        const values = {
             small: !smallAndUp,
             always: true,
             never: false,

package/dist/esm/hooks/use-layout.js

@@ -1,14 +1,14 @@
 import { useCallback, useState } from 'react';
-export var useLayout = function (defaultHeight) {
-    var _a = useState({ height: defaultHeight || 0, width: 0, measured: false }), layout = _a[0], setLayout = _a[1];
-    var onLayout = useCallback(function (e) {
-        var _a = e.nativeEvent.layout, height = _a.height, width = _a.width;
+export const useLayout = (defaultHeight) => {
+    const [layout, setLayout] = useState({ height: defaultHeight || 0, width: 0, measured: false });
+    const onLayout = useCallback((e) => {
+        const { height, width } = e.nativeEvent.layout;
         if (height === layout.height && width === layout.width) {
             return;
         }
         setLayout({
-            height: height,
-            width: width,
+            height,
+            width,
             measured: true,
         });
     }, [layout.height, layout.width]);