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

package/dist/components/SubLabelText/SubLabelText.js

@@ -32,11 +32,11 @@ var element_core_1 = require("@ovotech/element-core");
 var styled_native_1 = __importStar(require("../../styled.native"));
 var utils_1 = require("../../utils");
 var StyledSubLabelText = styled_native_1.default.Text(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
+    var theme = _a.theme, smallAndUp = _a.smallAndUp;
     var fontSize = smallAndUp
-        ? core.fontSize.body.large
-        : core.fontSize.body.small;
-    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n    "])), core.fontFamily.body.native, (0, element_core_1.numToPx)(core.lineHeight.body.small), semantic.message.secondary, (0, element_core_1.numToPx)(fontSize));
+        ? theme.font.size.md.mediaQuery.lg
+        : theme.font.size.md.mediaQuery.sm;
+    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-family: ", ";\n    line-height: ", ";\n    color: ", ";\n    font-size: ", ";\n  "], ["\n    font-family: ", ";\n    line-height: ", ";\n    color: ", ";\n    font-size: ", ";\n  "])), theme.native.font.family.book, (0, element_core_1.numToPx)(theme.font.lineHeight.md.mediaQuery.sm), theme.color.surface.onSurfaceVariant, (0, element_core_1.numToPx)(fontSize));
 });
 var SubLabelText = (0, utils_1.styledComponentWithBreakpoints)(StyledSubLabelText);
 exports.SubLabelText = SubLabelText;

package/dist/components/Tabs/Tab.js

@@ -56,24 +56,19 @@ var react_1 = require("react");
 var hooks_1 = require("../../hooks");
 var styled_native_1 = __importStar(require("../../styled.native"));
 var TabText = styled_native_1.default.Text(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, _c = _a.active, active = _c === void 0 ? false : _c;
-    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-size: ", ";\n    font-family: ", ";\n    line-height: ", ";\n    color: ", ";\n    text-align: center;\n    padding: ", " ", ";\n  "], ["\n    font-size: ", ";\n    font-family: ", ";\n    line-height: ", ";\n    color: ", ";\n    text-align: center;\n    padding: ", " ", ";\n  "])), (0, element_core_1.numToPx)(core.fontSize.body.small), core.fontFamily.bodyBold.native, (0, element_core_1.numToPx)(core.lineHeight.body.small), active ? semantic.focus.outline : semantic.message.base, (0, element_core_1.numToPx)(core.space[3]), (0, element_core_1.numToPx)(core.space[2]));
+    var theme = _a.theme, _b = _a.active, active = _b === void 0 ? false : _b;
+    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-size: ", ";\n    font-family: ", ";\n    line-height: ", ";\n    color: ", ";\n    text-align: center;\n    padding: ", " ", ";\n  "], ["\n    font-size: ", ";\n    font-family: ", ";\n    line-height: ", ";\n    color: ", ";\n    text-align: center;\n    padding: ", " ", ";\n  "])), (0, element_core_1.numToPx)(theme.font.size.md.mediaQuery.sm), theme.native.font.family.bold, (0, element_core_1.numToPx)(theme.font.lineHeight.md.mediaQuery.sm), active
+        ? theme.color.outline.outer
+        : theme.color.surface.onSurface, (0, element_core_1.numToPx)(theme.space[300]), (0, element_core_1.numToPx)(theme.space[200]));
 });
 var TabTouchable = styled_native_1.default.TouchableOpacity(function (_a) {
-    var _b = _a.active, active = _b === void 0 ? false : _b, _c = _a.first, first = _c === void 0 ? false : _c, _d = _a.last, last = _d === void 0 ? false : _d, _e = _a.stretch, stretch = _e === void 0 ? false : _e, _f = _a.theme, core = _f.core, semantic = _f.semantic, inline = _a.inline;
-    var borderWidth = (0, element_core_1.numToPx)(core.borderWidth.small);
-    var borderColor = semantic.border.differentiated;
-    return (0, styled_native_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      flex-grow: ", ";\n\n      border-bottom-width: ", ";\n      border-bottom-style: solid;\n      border-bottom-color: ", ";\n\n      border-top-width: ", ";\n      border-top-style: solid;\n      border-top-color: ", ";\n\n      border-left-width: ", ";\n      border-left-style: solid;\n      border-left-color: ", ";\n\n      border-right-width: ", ";\n      border-right-style: solid;\n      border-right-color: ", ";\n\n      ", "\n\n      ", "\n    \n      ", "\n    \n      ", "\n    "], ["\n      flex-grow: ", ";\n\n      border-bottom-width: ", ";\n      border-bottom-style: solid;\n      border-bottom-color: ", ";\n\n      border-top-width: ", ";\n      border-top-style: solid;\n      border-top-color: ", ";\n\n      border-left-width: ", ";\n      border-left-style: solid;\n      border-left-color: ", ";\n\n      border-right-width: ", ";\n      border-right-style: solid;\n      border-right-color: ", ";\n\n      ", "\n\n      ", "\n    \n      ", "\n    \n      ", "\n    "])), stretch ? 1 : 0, borderWidth, borderColor, borderWidth, borderColor, borderWidth, borderColor, borderWidth, borderColor, active
-        ? (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n            border-bottom-color: ", ";\n            border-bottom-width: ", ";\n          "], ["\n            border-bottom-color: ", ";\n            border-bottom-width: ", ";\n          "])), semantic.focus.outline, (0, element_core_1.numToPx)(core.borderWidth.medium)) : '', !inline
-        ? (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n            border-top-color: transparent;\n            border-top-width: 0;\n          "], ["\n            border-top-color: transparent;\n            border-top-width: 0;\n          "]))) : '', last && inline
-        ? ''
-        : (0, styled_native_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n            border-right-color: transparent;\n            border-right-width: 0;\n          "], ["\n            border-right-color: transparent;\n            border-right-width: 0;\n          "]))), first && inline
-        ? ''
-        : (0, styled_native_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n            border-left-color: transparent;\n            border-left-width: 0;\n          "], ["\n            border-left-color: transparent;\n            border-left-width: 0;\n          "]))));
+    var _b = _a.active, active = _b === void 0 ? false : _b, _c = _a.stretch, stretch = _c === void 0 ? false : _c, theme = _a.theme;
+    return (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    flex-grow: ", ";\n\n    border-bottom-width: ", ";\n    border-bottom-style: solid;\n    border-bottom-color: ", ";\n\n    ", "\n  "], ["\n    flex-grow: ", ";\n\n    border-bottom-width: ", ";\n    border-bottom-style: solid;\n    border-bottom-color: ", ";\n\n    ", "\n  "])), stretch ? 1 : 0, (0, element_core_1.numToPx)(theme.border.width.sm), theme.color.surface.border, active
+        ? (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          border-bottom-color: ", ";\n          border-bottom-width: ", ";\n        "], ["\n          border-bottom-color: ", ";\n          border-bottom-width: ", ";\n        "])), theme.color.outline.outer, (0, element_core_1.numToPx)(theme.border.width.md)) : '');
 });
 exports.Tab = (0, react_1.forwardRef)(function (_a, ref) {
     var active = _a.active, _b = _a.fullWidth, fullWidth = _b === void 0 ? false : _b, children = _a.children, rest = __rest(_a, ["active", "fullWidth", "children"]);
     var breakpoints = (0, hooks_1.useBreakpoint)();
     return ((0, jsx_runtime_1.jsx)(TabTouchable, __assign({ accessible: true, accessibilityRole: "tab", accessibilityState: { selected: active }, active: active, stretch: fullWidth, ref: ref }, rest, { children: (0, jsx_runtime_1.jsx)(TabText, __assign({ active: active }, breakpoints, { children: children })) })));
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/components/Tabs/TabList.d.ts

@@ -5,7 +5,6 @@ type TabListProps = ViewProps & {
     setActiveTab?: (i: number) => void;
     activeTab?: number;
     tabRefs?: React.RefObject<any>[];
-    inline?: boolean;
 };
-export declare const TabList: ({ children, setActiveTab, activeTab, tabRefs, fullWidth, inline, ...rest }: TabListProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TabList: ({ children, setActiveTab, activeTab, tabRefs, fullWidth, ...rest }: TabListProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Tabs/TabList.js

@@ -56,11 +56,11 @@ var react_1 = require("react");
 var styled_native_1 = __importStar(require("../../styled.native"));
 var utils_1 = require("../../utils");
 var StyledTabList = styled_native_1.default.View(function (_a) {
-    var core = _a.theme.core;
-    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    flex-direction: row;\n    margin: -", ";\n  "], ["\n    flex-direction: row;\n    margin: -", ";\n  "])), (0, element_core_1.numToPx)(core.borderWidth.small));
+    var theme = _a.theme;
+    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    flex-direction: row;\n    margin: -", ";\n  "], ["\n    flex-direction: row;\n    margin: -", ";\n  "])), (0, element_core_1.numToPx)(theme.border.width.sm));
 });
 var TabList = function (_a) {
-    var children = _a.children, setActiveTab = _a.setActiveTab, activeTab = _a.activeTab, tabRefs = _a.tabRefs, fullWidth = _a.fullWidth, inline = _a.inline, rest = __rest(_a, ["children", "setActiveTab", "activeTab", "tabRefs", "fullWidth", "inline"]);
+    var children = _a.children, setActiveTab = _a.setActiveTab, activeTab = _a.activeTab, tabRefs = _a.tabRefs, fullWidth = _a.fullWidth, rest = __rest(_a, ["children", "setActiveTab", "activeTab", "tabRefs", "fullWidth"]);
     var validChildren = (0, utils_1.getValidChildren)(children);
     return ((0, jsx_runtime_1.jsx)(StyledTabList, __assign({ accessible: true, accessibilityRole: "tablist" }, rest, { children: react_1.Children.map(validChildren, function (child, i) {
             return (0, react_1.cloneElement)(child, {
@@ -68,9 +68,6 @@ var TabList = function (_a) {
                 active: activeTab === i,
                 fullWidth: fullWidth,
                 ref: tabRefs === null || tabRefs === void 0 ? void 0 : tabRefs[i],
-                first: i === 0,
-                last: react_1.Children.count(validChildren) - 1 === i,
-                inline: inline,
             });
         }) })));
 };

package/dist/components/Tabs/TabPanel.js

@@ -54,8 +54,8 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var element_core_1 = require("@ovotech/element-core");
 var styled_native_1 = __importStar(require("../../styled.native"));
 var StyledView = styled_native_1.default.View(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic;
-    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    padding: ", ";\n    border-top-width: ", ";\n    border-style: solid;\n    border-color: ", ";\n    z-index: -1;\n  "], ["\n    padding: ", ";\n    border-top-width: ", ";\n    border-style: solid;\n    border-color: ", ";\n    z-index: -1;\n  "])), (0, element_core_1.numToPx)(core.space[4]), (0, element_core_1.numToPx)(core.borderWidth.small), semantic.border.differentiated);
+    var theme = _a.theme;
+    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    padding: ", ";\n    border-top-width: ", ";\n    border-style: solid;\n    border-color: ", ";\n    z-index: -1;\n  "], ["\n    padding: ", ";\n    border-top-width: ", ";\n    border-style: solid;\n    border-color: ", ";\n    z-index: -1;\n  "])), (0, element_core_1.numToPx)(theme.space[400]), (0, element_core_1.numToPx)(theme.border.width.sm), theme.color.input.borderDim);
 });
 var TabPanel = function (_a) {
     var rest = __rest(_a, []);

package/dist/components/Tabs/Tabs.d.ts

@@ -1,10 +1,9 @@
 import { ReactNode } from 'react';
 type TabsProps = {
     defaultSelected?: number;
-    inline?: boolean;
     children: ReactNode;
     onSelected?: (activeTab: number) => void;
     fullWidth?: boolean;
 };
-export declare const Tabs: ({ children, defaultSelected, onSelected, fullWidth, inline, ...rest }: TabsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tabs: ({ children, defaultSelected, onSelected, fullWidth, ...rest }: TabsProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Tabs/Tabs.js

@@ -59,14 +59,12 @@ var Card_1 = require("../Card");
 var TabList_1 = require("./TabList");
 var TabPanel_1 = require("./TabPanel");
 var TabsCard = (0, styled_native_1.default)(Card_1.Card)(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, inline = _a.inline;
-    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    padding: 0;\n    border: ", " solid\n      ", ";\n    background: transparent;\n  "], ["\n    padding: 0;\n    border: ", " solid\n      ", ";\n    background: transparent;\n  "])), (0, element_core_1.numToPx)(core.borderWidth.small), inline ? semantic.border.differentiated : 'transparent');
+    var theme = _a.theme;
+    return (0, styled_native_1.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  "])), (0, element_core_1.numToPx)(theme.border.width.sm));
 });
 var Tabs = function (_a) {
-    var children = _a.children, _b = _a.defaultSelected, defaultSelected = _b === void 0 ? 0 : _b, onSelected = _a.onSelected, fullWidth = _a.fullWidth, inline = _a.inline, rest = __rest(_a, ["children", "defaultSelected", "onSelected", "fullWidth", "inline"]);
+    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 = (0, react_1.useState)(defaultSelected), activeTab = _c[0], setActiveTab = _c[1];
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore there is no way to properly type it
     var tabList = (0, utils_1.filterChildrenByType)(children, TabList_1.TabList);
     var tabPanels = (0, utils_1.filterChildrenByType)(children, TabPanel_1.TabPanel);
     var tabRefs = tabPanels.map(function () { return (0, react_1.createRef)(); });
@@ -79,13 +77,12 @@ var Tabs = function (_a) {
             loaded.current = true;
         }
     }, [onSelected, activeTab]);
-    return ((0, jsx_runtime_1.jsxs)(TabsCard, __assign({ inline: inline }, rest, { children: [tabList.map(function (child) {
+    return ((0, jsx_runtime_1.jsxs)(TabsCard, __assign({}, rest, { children: [tabList.map(function (child) {
                 return (0, react_1.cloneElement)(child, {
                     setActiveTab: setActiveTab,
                     activeTab: activeTab,
                     tabRefs: tabRefs,
                     fullWidth: fullWidth,
-                    inline: inline,
                 });
             }), tabPanels
                 .filter(function (_, index) { return index === activeTab; })

package/dist/components/TextareaInput/TextareaInput.js

@@ -56,8 +56,8 @@ var react_1 = require("react");
 var styled_native_1 = __importStar(require("../../styled.native"));
 var Input_1 = require("../Input/Input");
 var StyledInput = (0, styled_native_1.default)(Input_1.Input)(function (_a) {
-    var core = _a.theme.core, rows = _a.rows;
-    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    padding: ", ";\n    padding-top: ", ";\n    height: ", "px;\n  "], ["\n    padding: ", ";\n    padding-top: ", ";\n    height: ", "px;\n  "])), (0, element_core_1.numToPx)(core.space[2]), (0, element_core_1.numToPx)(core.space[3]), core.space[8] * rows);
+    var theme = _a.theme, rows = _a.rows;
+    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    padding: ", ";\n    padding-top: ", ";\n    height: ", "px;\n  "], ["\n    padding: ", ";\n    padding-top: ", ";\n    height: ", "px;\n  "])), (0, element_core_1.numToPx)(theme.space[200]), (0, element_core_1.numToPx)(theme.space[300]), theme.space[800] * rows);
 });
 var TextareaInput = (0, react_1.forwardRef)(function (_a, ref) {
     var _b = _a.rows, rows = _b === void 0 ? 3 : _b, rest = __rest(_a, ["rows"]);

package/dist/components/Toast/Toast.js

@@ -55,30 +55,24 @@ var ToastsContainer = function (_a) {
 };
 exports.ToastsContainer = ToastsContainer;
 var StyledView = styled_native_1.default.View(function (_a) {
-    var core = _a.theme.core, variant = _a.variant;
+    var theme = _a.theme, variant = _a.variant;
     return (0, styled_native_1.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, (0, element_core_1.numToPx)(core.space[2]), (0, element_core_1.numToPx)(core.space[3]), (0, element_core_1.numToPx)(core.space[2]), (0, element_core_1.numToPx)(core.space[4]), (0, element_core_1.numToPx)(core.radius.max));
+        ? theme.color.alert.success
+        : theme.color.alert.error, (0, element_core_1.numToPx)(theme.space[200]), (0, element_core_1.numToPx)(theme.space[200]), (0, element_core_1.numToPx)(theme.space[200]), (0, element_core_1.numToPx)(theme.space[400]), (0, element_core_1.numToPx)(theme.border.radius['2xl']));
 });
 var StyledP = (0, styled_native_1.default)(P_1.P)(function (_a) {
-    var semantic = _a.theme.semantic;
-    return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    color: ", ";\n  "], ["\n    color: ", ";\n  "])), semantic.inverted.message.base);
+    var theme = _a.theme;
+    return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    color: ", ";\n  "], ["\n    color: ", ";\n  "])), theme.color.surface.bright);
 });
-var StyledThinBorder = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(function (_a) {
-    var core = _a.theme.core, variant = _a.variant;
-    return (0, styled_native_1.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 = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(function (_a) {
-    var core = _a.theme.core, variant = _a.variant;
-    return (0, styled_native_1.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 StyledBorder = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(function (_a) {
+    var theme = _a.theme, variant = _a.variant;
+    return (0, styled_native_1.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 = (0, styled_native_1.default)(react_native_1.TouchableOpacity)(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic;
-    return (0, styled_native_1.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, (0, element_core_1.numToPx)(core.radius.max), (0, element_core_1.numToPx)(core.space[7]), (0, element_core_1.numToPx)(core.space[7]), (0, element_core_1.numToPx)(core.space[2]));
+    var theme = _a.theme;
+    return (0, styled_native_1.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, (0, element_core_1.numToPx)(theme.border.radius['2xl']), (0, element_core_1.numToPx)(theme.space[700]), (0, element_core_1.numToPx)(theme.space[700]), (0, element_core_1.numToPx)(theme.space[200]));
 });
 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;
@@ -127,7 +121,7 @@ var CustomToastWithTimeIndicator = function (_a) {
                     (_a = textRef.current) === null || _a === void 0 ? void 0 : _a.measureInWindow(function (_x, _y, _width, height) {
                         setTextHeight(height);
                     });
-                }, children: message }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { position: 'absolute', bottom: 0 }, children: [(0, jsx_runtime_1.jsx)(StyledThinBorder, { variant: variant, style: style }), (0, jsx_runtime_1.jsx)(StyledThickBorder, { variant: variant, style: style })] })] }));
+                }, children: message }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: { position: 'absolute', bottom: 0 }, children: (0, jsx_runtime_1.jsx)(StyledBorder, { 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;
@@ -136,9 +130,7 @@ var CustomToast = function (_a) {
     var actionRef = (0, react_1.useRef)(null);
     var _b = (0, react_1.useState)(0), textHeight = _b[0], setTextHeight = _b[1];
     var _c = (0, react_1.useState)(0), actionHeight = _c[0], setActionHeight = _c[1];
-    var toastHeight = Math.floor(textHeight) === Math.floor(actionHeight) && !dismissible // handling multiline
-        ? textHeight
-        : textHeight + actionHeight;
+    var toastHeight = textHeight + actionHeight;
     var handleAction = function () {
         if (action && actionTitle) {
             action();
@@ -159,11 +151,11 @@ var CustomToast = function (_a) {
                             (_a = textRef.current) === null || _a === void 0 ? void 0 : _a.measureInWindow(function (_x, _y, _width, height) {
                                 setTextHeight(height);
                             });
-                        }, children: message }), action && actionTitle ? ((0, jsx_runtime_1.jsx)(ActionList_1.Action, { ref: actionRef, style: { width: 'auto' }, inverted: true, inline: true, iconRight: "chevron-right-small", onPress: handleAction, onLayout: function () {
+                        }, children: message }), action && actionTitle ? ((0, jsx_runtime_1.jsx)(ActionList_1.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 ? ((0, jsx_runtime_1.jsx)(StyledCloseIcon, { onPress: function () { return react_native_toast_1.toast.dismiss(id); }, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "cross", color: "#fff", size: 14 }) })) : null] }));
 };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/components/Toggle/Toggle.js

@@ -32,12 +32,12 @@ var LabelText_1 = require("../LabelText");
 var styles_1 = require("./styles");
 var Input = function (_a) {
     var checked = _a.checked, labelPosition = _a.labelPosition, testID = _a.testID, rest = __rest(_a, ["checked", "labelPosition", "testID"]);
-    var core = (0, react_1.useContext)(native_1.ThemeContext).core;
-    var leftVal = (0, react_1.useRef)(new react_native_1.Animated.Value(checked ? core.space[6] : core.space[1])).current;
+    var theme = (0, react_1.useContext)(native_1.ThemeContext);
+    var leftVal = (0, react_1.useRef)(new react_native_1.Animated.Value(checked ? theme.space[600] : theme.space[100])).current;
     (0, react_1.useEffect)(function () {
         react_native_1.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]);
@@ -46,11 +46,7 @@ var Input = function (_a) {
                 }, checked: checked }) }) })));
 };
 exports.Toggle = (0, react_1.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 _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 ((0, jsx_runtime_1.jsxs)(styles_1.StyledWrapper, __assign({ ref: ref, accessible: true, accessibilityRole: "checkbox", activeOpacity: activeOpacity, accessibilityState: { checked: checked }, hitSlop: 10, hasLabel: hasLabel, labelPosition: labelPosition, inline: inline }, rest, { children: [hasLabel ? ((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] })) : null, (0, jsx_runtime_1.jsx)(Input, { checked: checked, testID: testID, labelPosition: hasLabel ? labelPosition : undefined })] })));
 });