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

package/dist/esm/components/Tabs/Tabs.js

@@ -1,3 +1,29 @@
+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 { jsxs as _jsxs } from "react/jsx-runtime";
 import { numToPx } from '@ovotech/element-core';
 import { useState, cloneElement, useEffect, createRef, useRef, } from 'react';
@@ -6,21 +32,18 @@ import { filterChildrenByType } from '../../utils';
 import { Card } from '../Card';
 import { TabList } from './TabList';
 import { TabPanel } from './TabPanel';
-const TabsCard = styled(Card)(({ theme: { core, semantic }, inline }) => css `
-    padding: 0;
-    border: ${numToPx(core.borderWidth.small)} solid
-      ${inline ? semantic.border.differentiated : 'transparent'};
-    background: transparent;
-  `);
-export const Tabs = ({ children, defaultSelected = 0, onSelected, fullWidth, inline, ...rest }) => {
-    const [activeTab, setActiveTab] = useState(defaultSelected);
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore there is no way to properly type it
-    const tabList = filterChildrenByType(children, TabList);
-    const tabPanels = filterChildrenByType(children, TabPanel);
-    const tabRefs = tabPanels.map(() => createRef());
-    const loaded = useRef(false);
-    useEffect(() => {
+var TabsCard = styled(Card)(function (_a) {
+    var theme = _a.theme;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    padding: 0;\n    border: ", " solid transparent;\n    background: transparent;\n  "], ["\n    padding: 0;\n    border: ", " solid transparent;\n    background: transparent;\n  "])), numToPx(theme.border.width.sm));
+});
+export var Tabs = function (_a) {
+    var children = _a.children, _b = _a.defaultSelected, defaultSelected = _b === void 0 ? 0 : _b, onSelected = _a.onSelected, fullWidth = _a.fullWidth, rest = __rest(_a, ["children", "defaultSelected", "onSelected", "fullWidth"]);
+    var _c = useState(defaultSelected), activeTab = _c[0], setActiveTab = _c[1];
+    var tabList = filterChildrenByType(children, TabList);
+    var tabPanels = filterChildrenByType(children, TabPanel);
+    var tabRefs = tabPanels.map(function () { return createRef(); });
+    var loaded = useRef(false);
+    useEffect(function () {
         if (loaded.current) {
             onSelected && onSelected(activeTab);
         }
@@ -28,15 +51,19 @@ export const Tabs = ({ children, defaultSelected = 0, onSelected, fullWidth, inl
             loaded.current = true;
         }
     }, [onSelected, activeTab]);
-    return (_jsxs(TabsCard, { inline: inline, ...rest, children: [tabList.map((child) => cloneElement(child, {
-                setActiveTab,
-                activeTab,
-                tabRefs,
-                fullWidth,
-                inline,
-            })), tabPanels
-                .filter((_, index) => index === activeTab)
-                .map((child, index) => cloneElement(child, {
-                hidden: activeTab !== index,
-            }))] }));
+    return (_jsxs(TabsCard, __assign({}, rest, { children: [tabList.map(function (child) {
+                return cloneElement(child, {
+                    setActiveTab: setActiveTab,
+                    activeTab: activeTab,
+                    tabRefs: tabRefs,
+                    fullWidth: fullWidth,
+                });
+            }), tabPanels
+                .filter(function (_, index) { return index === activeTab; })
+                .map(function (child, index) {
+                return cloneElement(child, {
+                    hidden: activeTab !== index,
+                });
+            })] })));
 };
+var templateObject_1;

package/dist/esm/components/TextField/TextField.js

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

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

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

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

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

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

@@ -1,13 +1,41 @@
+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';
-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 }));
-};
+var StyledInput = styled(Input)(function (_a) {
+    var theme = _a.theme, 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(theme.space[200]), numToPx(theme.space[300]), theme.space[800] * 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 })));
+});
 export { TextareaInput };
+var templateObject_1;

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

@@ -1,3 +1,18 @@
+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';
@@ -8,68 +23,57 @@ import styled, { css } from '../../styled.native';
 import { Action } from '../ActionList';
 import { Icon } from '../Icon';
 import { P } from '../P';
-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, }) => {
+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 theme = _a.theme, 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'
+        ? theme.color.alert.success
+        : theme.color.alert.error, numToPx(theme.space[200]), numToPx(theme.space[200]), numToPx(theme.space[200]), numToPx(theme.space[400]), numToPx(theme.border.radius['2xl']));
+});
+var StyledP = styled(P)(function (_a) {
+    var theme = _a.theme;
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    color: ", ";\n  "], ["\n    color: ", ";\n  "])), theme.color.surface.bright);
+});
+var StyledBorder = styled(Animated.View)(function (_a) {
+    var theme = _a.theme, variant = _a.variant;
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    background-color: ", ";\n    height: 4px;\n  "], ["\n    background-color: ", ";\n    height: 4px;\n  "])), variant === 'default'
+        ? theme.color.alert.successTint
+        : theme.color.alert.errorTint);
+});
+var StyledCloseIcon = styled(TouchableOpacity)(function (_a) {
+    var theme = _a.theme;
+    return css(templateObject_4 || (templateObject_4 = __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  "])), theme.color.surface.onSurface, numToPx(theme.border.radius['2xl']), numToPx(theme.space[700]), numToPx(theme.space[700]), numToPx(theme.space[200]));
+});
+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;
     return action || dismissible
         ? toast.loading(message, {
             id: 'clipboard',
             position: ToastPosition.BOTTOM,
             disableShadow: true,
-            customToast: t => (_jsx(CustomToast, { ...t, dismissible: dismissible, action: action, actionTitle: actionTitle, variant: variant }, message)),
+            customToast: function (t) { return (_jsx(CustomToast, __assign({}, t, { dismissible: dismissible, action: action, actionTitle: actionTitle, variant: variant }), message)); },
         })
         : toast(message, {
             id: 'clipboard',
             position: ToastPosition.BOTTOM,
-            duration,
+            duration: duration,
             disableShadow: true,
-            customToast: t => (_jsx(CustomToastWithTimeIndicator, { ...t, variant: variant }, message)),
+            customToast: function (t) { return (_jsx(CustomToastWithTimeIndicator, __assign({}, t, { variant: variant }), message)); },
         });
 };
-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(() => {
+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 () {
         return {
             width: withTiming(sharedWidth.value, {
                 duration: duration,
@@ -77,36 +81,36 @@ const CustomToastWithTimeIndicator = ({ message, duration = 5000, variant, }) =>
             }),
         };
     });
-    useEffect(() => {
+    useEffect(function () {
         sharedWidth.value = 0;
     }, []);
     return (_jsxs(StyledView, { variant: variant, style: {
             width: toastWidth,
             height: textHeight + toastPadding,
             flexWrap: 'wrap',
-        }, children: [_jsx(StyledP, { ref: textRef, onLayout: () => {
-                    textRef.current?.measureInWindow((_x, _y, _width, height) => {
+        }, 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) {
                         setTextHeight(height);
                     });
-                }, children: message }), _jsxs(View, { style: { position: 'absolute', bottom: 0 }, children: [_jsx(StyledThinBorder, { variant: variant, style: style }), _jsx(StyledThickBorder, { variant: variant, style: style })] })] }));
+                }, children: message }), _jsx(View, { style: { position: 'absolute', bottom: 0 }, children: _jsx(StyledBorder, { variant: variant, style: style }) })] }));
 };
-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;
-    const handleAction = () => {
+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 = textHeight + actionHeight;
+    var handleAction = function () {
         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: {
@@ -114,13 +118,16 @@ const CustomToast = ({ id, message, dismissible, action, actionTitle, width, var
                     flexWrap: 'wrap',
                     justifyContent: 'space-between',
                     flex: 1,
-                }, children: [_jsx(StyledP, { ref: textRef, onLayout: () => {
-                            textRef.current?.measureInWindow((_x, _y, _width, height) => {
+                }, 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) {
                                 setTextHeight(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) => {
+                        }, children: message }), action && actionTitle ? (_jsx(Action, { ref: actionRef, style: { width: 'auto' }, inverted: true, standalone: 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) {
                                 setActionHeight(height);
                             });
-                        }, children: actionTitle })) : null] }), dismissible ? (_jsx(StyledCloseIcon, { onPress: () => toast.dismiss(id), children: _jsx(Icon, { name: "cross", color: "#fff", size: 14 }) })) : null] }));
+                        }, children: actionTitle })) : null] }), dismissible ? (_jsx(StyledCloseIcon, { onPress: function () { return toast.dismiss(id); }, children: _jsx(Icon, { name: "cross", color: "#fff", size: 14 }) })) : null] }));
 };
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -1,25 +1,49 @@
+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 { useEffect, useRef } from 'react';
-import { Animated, View } from 'react-native';
-import { useTheme } from '../../styled.native';
+import { forwardRef, useContext, useEffect, useRef } from 'react';
+import { Animated, View, } from 'react-native';
+import { ThemeContext } from 'styled-components/native';
 import { HintText } from '../HintText/HintText';
 import { LabelText } from '../LabelText';
 import { StyledToggleDot, StyledToggleInputWrapper, StyledToggleInput, StyledWrapper, } from './styles';
-const Input = ({ checked, labelPosition, testID, ...rest }) => {
-    const { core } = useTheme();
-    const leftVal = useRef(new Animated.Value(checked ? core.space[6] : core.space[1])).current;
-    useEffect(() => {
+var Input = function (_a) {
+    var checked = _a.checked, labelPosition = _a.labelPosition, testID = _a.testID, rest = __rest(_a, ["checked", "labelPosition", "testID"]);
+    var theme = useContext(ThemeContext);
+    var leftVal = useRef(new Animated.Value(checked ? theme.space[600] : theme.space[100])).current;
+    useEffect(function () {
         Animated.timing(leftVal, {
-            toValue: checked ? core.space[6] : core.space[1],
-            duration: 150, // i.e. theme.core.transition.fast
+            toValue: checked ? theme.space[600] : theme.space[100],
+            duration: theme.transition.duration.fast,
             useNativeDriver: true,
         }).start();
     }, [checked]);
-    return (_jsx(StyledToggleInputWrapper, { labelPosition: labelPosition, ...rest, children: _jsx(StyledToggleInput, { checked: checked, testID: testID, children: _jsx(StyledToggleDot, { style: {
+    return (_jsx(StyledToggleInputWrapper, __assign({ labelPosition: labelPosition }, rest, { children: _jsx(StyledToggleInput, { checked: checked, testID: testID, children: _jsx(StyledToggleDot, { style: {
                     transform: [{ translateX: leftVal }],
-                }, 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 })] }));
+                }, checked: checked }) }) })));
 };
+export var Toggle = forwardRef(function (_a, ref) {
+    var _b = _a.activeOpacity, 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,37 +1,25 @@
 import { numToPx } from '@ovotech/element-core';
 import { Animated } from 'react-native';
 import styled from '../../styled.native';
-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
+export var StyledWrapper = styled.TouchableOpacity(function (_a) {
+    var theme = _a.theme, hasLabel = _a.hasLabel, inline = _a.inline, labelPosition = _a.labelPosition;
+    return "\n    width: ".concat(hasLabel ? (inline ? undefined : '100%') : numToPx(theme.space[1100]), ";\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 theme = _a.theme, labelPosition = _a.labelPosition;
+    return "\n    width: ".concat(numToPx(theme.space[1100]), ";\n    height: ").concat(numToPx(theme.space[600]), ";\n    ").concat(labelPosition
         ? labelPosition === 'left'
             ? 'margin-left: 10px;'
             : 'margin-right: 10px;'
-        : ''}
-    `;
+        : null, "\n    ");
+});
+export var StyledToggleInput = styled.View(function (_a) {
+    var theme = _a.theme, checked = _a.checked;
+    return "\n      width: ".concat(numToPx(theme.space[1100]), ";\n      height: ").concat(numToPx(theme.space[600]), ";\n      justify-content: center;\n      border-radius: ").concat(numToPx(theme.border.radius.lg), ";\n      background: ").concat(checked
+        ? theme.color.outline.outer
+        : theme.color.surface.onSurfaceVariant, ";\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 var StyledToggleDot = styled(Animated.View)(function (_a) {
+    var theme = _a.theme, checked = _a.checked;
+    return "\n  position: absolute;\n  width: ".concat(numToPx(theme.space[400]), ";\n  height: ").concat(numToPx(theme.space[400]), ";\n  border-radius: ").concat(numToPx(theme.space[400]), ";\n  background-color: ").concat(checked ? theme.color.brand.onBrand : theme.color.surface.dim, ";\n");
 });
-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/components/index.js

@@ -4,33 +4,22 @@ export * from './ActionList';
 export * from './Badge';
 export * from './Card';
 export * from './Checkbox';
-export * from './CTAButton';
-export * from './CTALink';
+export * from './Button';
+export * from './Link';
 export * from './CurrencyField';
 export * from './CurrencyInput';
 export * from './DataTable';
 export * from './DateField';
-export * from './DescriptionList';
 export * from './Disclosure';
-export * from './Display0';
-export * from './Display1';
-export * from './Display2';
-export * from './Display3';
+export * from './Display';
 export * from './Divider';
 export * from './Em';
 export * from './EmailField';
 export * from './EmailInput';
-export * from './ErrorSummaryNotification';
 export * from './Field';
-export * from './FilterSelect';
 export * from './Grid';
-export * from './Heading1';
-export * from './Heading2';
-export * from './Heading3';
-export * from './Heading4';
+export * from './Heading';
 export * from './Icon';
-export * from './Label';
-export * from './Lead';
 export * from './LineThrough';
 export * from './List';
 export * from './Margin';
@@ -47,10 +36,9 @@ export * from './Radio';
 export * from './SegmentedControls';
 export * from './SelectField';
 export * from './SkeletonCircle';
-export * from './SkeletonCTA';
+export * from './SkeletonButton';
 export * from './SkeletonHeading';
 export * from './SkeletonText';
-export * from './Small';
 export * from './Spinner';
 export * from './Stack';
 export * from './Strong';
@@ -58,10 +46,8 @@ export * from './Tabs';
 export * from './TextareaField';
 export * from './TextareaInput';
 export * from './TextField';
-export * from './TextGroup';
 export * from './TextInput';
-export * from './TextLink';
 export * from './Toggle';
 export * from './Toast';
-export * from './ProductCarousel';
 export * from './RadioCard';
+export * from './Pictogram';