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

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

@@ -6,53 +6,51 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { numToPx } from '@ovotech/element-core';
 import groupBy from 'lodash.groupby';
 import { Fragment, useState } from 'react';
-import { Dimensions, Modal, ScrollView, View } from 'react-native';
+import { Modal, ScrollView, View } from 'react-native';
 import styled, { css } from '../../styled.native';
 import { Icon } from '../Icon';
 import { P } from '../P';
 import { Strong } from '../Strong';
 var SelectInput = styled.TouchableOpacity(function (_a) {
-    var _b = _a.theme, semantic = _b.semantic, core = _b.core, hasError = _a.hasError;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      flex-direction: row;\n      align-items: center;\n      background-color: transparent;\n      border-color: ", ";\n      border-width: ", ";\n      border-radius: ", ";\n      padding: ", ";\n      padding-right: 14px;\n      height: 44px;\n    "], ["\n      flex-direction: row;\n      align-items: center;\n      background-color: transparent;\n      border-color: ", ";\n      border-width: ", ";\n      border-radius: ", ";\n      padding: ", ";\n      padding-right: 14px;\n      height: 44px;\n    "])), hasError
-        ? semantic.error.message
-        : semantic.border.functional, numToPx(core.borderWidth.small), numToPx(core.radius.small), numToPx(core.space[2]));
+    var theme = _a.theme, hasError = _a.hasError;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      flex-direction: row;\n      align-items: center;\n      background-color: transparent;\n      border-color: ", ";\n      border-width: ", ";\n      border-radius: ", ";\n      padding: ", ";\n      padding-right: ", ";\n      height: ", ";\n    "], ["\n      flex-direction: row;\n      align-items: center;\n      background-color: transparent;\n      border-color: ", ";\n      border-width: ", ";\n      border-radius: ", ";\n      padding: ", ";\n      padding-right: ", ";\n      height: ", ";\n    "])), hasError
+        ? theme.input.color.borderError
+        : theme.input.color.border, numToPx(theme.border.width.md), numToPx(theme.border.radius.sm), numToPx(theme.space[200]), numToPx(theme.space[350]), numToPx(theme.space[1100]));
 });
-var DropdownWrapper = styled.View(function (_a) {
-    var core = _a.theme.core;
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    flex: 1;\n    justify-content: center;\n    align-items: center;\n\n    /* 40 is an opacity for hex https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4 */\n    background-color: ", "40;\n  "], ["\n    flex: 1;\n    justify-content: center;\n    align-items: center;\n\n    /* 40 is an opacity for hex https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4 */\n    background-color: ", "40;\n  "])), core.color.neutral.darkest);
+var DropdownWrapper = styled.TouchableOpacity(function (_a) {
+    var theme = _a.theme;
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    flex: 1;\n    justify-content: center;\n    align-items: center;\n\n    /* 80 is an opacity for hex https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4 */\n    background-color: ", "80;\n  "], ["\n    flex: 1;\n    justify-content: center;\n    align-items: center;\n\n    /* 80 is an opacity for hex https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4 */\n    background-color: ", "80;\n  "])), theme.color.brand.dark);
 });
 var DropdownContainer = styled.SafeAreaView(function (_a) {
-    var core = _a.theme.core;
-    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    width: 95%;\n    max-height: 70%;\n    border-radius: ", ";\n    background-color: ", ";\n  "], ["\n    width: 95%;\n    max-height: 70%;\n    border-radius: ", ";\n    background-color: ", ";\n  "])), numToPx(core.radius.small), core.color.brand.white);
+    var theme = _a.theme;
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    width: 95%;\n    max-height: 70%;\n    border-radius: ", ";\n    background-color: ", ";\n  "], ["\n    width: 95%;\n    max-height: 70%;\n    border-radius: ", ";\n    background-color: ", ";\n  "])), numToPx(theme.border.radius.sm), theme.color.surface.bright);
 });
 var SelectOption = styled.TouchableOpacity(function (_a) {
-    var _b = _a.theme, semantic = _b.semantic, core = _b.core, isLastOption = _a.isLastOption;
-    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    flex-direction: row;\n    align-items: center;\n    border-bottom-color: ", ";\n    border-bottom-width: ", "px;\n    padding: 0 ", ";\n  "], ["\n    flex-direction: row;\n    align-items: center;\n    border-bottom-color: ", ";\n    border-bottom-width: ", "px;\n    padding: 0 ", ";\n  "])), semantic.border.differentiated, isLastOption ? 0 : 1, numToPx(core.space[4]));
+    var theme = _a.theme, isLastOption = _a.isLastOption;
+    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    flex-direction: row;\n    align-items: center;\n    border-bottom-color: ", ";\n    border-bottom-width: ", "px;\n    padding: 0 ", ";\n  "], ["\n    flex-direction: row;\n    align-items: center;\n    border-bottom-color: ", ";\n    border-bottom-width: ", "px;\n    padding: 0 ", ";\n  "])), theme.color.input.borderDim, isLastOption ? 0 : 1, numToPx(theme.space[400]));
 });
 var Radio = styled.View(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, isChecked = _a.isChecked;
-    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    width: 24px;\n    height: 24px;\n    margin-left: auto;\n    border-radius: 24px;\n    border-width: ", ";\n    border-color: ", ";\n  "], ["\n    width: 24px;\n    height: 24px;\n    margin-left: auto;\n    border-radius: 24px;\n    border-width: ", ";\n    border-color: ", ";\n  "])), numToPx(core.borderWidth.small), isChecked
-        ? semantic.focus.outline
-        : semantic.border.functional);
+    var theme = _a.theme, isChecked = _a.isChecked;
+    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    background-color: ", ";\n    width: ", ";\n    height: ", ";\n    margin-left: auto;\n    border-radius: ", ";\n    border-width: ", ";\n    border-color: ", ";\n  "], ["\n    background-color: ", ";\n    width: ", ";\n    height: ", ";\n    margin-left: auto;\n    border-radius: ", ";\n    border-width: ", ";\n    border-color: ", ";\n  "])), isChecked
+        ? theme.input.color.selectedTint
+        : 'transparent', numToPx(theme.space[600]), numToPx(theme.space[600]), numToPx(theme.space[600]), numToPx(theme.border.width.md), theme.input.color[isChecked ? 'selected' : 'border']);
 });
 var RadioDot = styled.View(function (_a) {
-    var semantic = _a.theme.semantic, isChecked = _a.isChecked;
-    return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    background-color: ", ";\n    position: absolute;\n    top: 5px;\n    width: 12px;\n    height: 12px;\n    border-radius: 12px;\n    align-self: center;\n    opacity: ", ";\n  "], ["\n    background-color: ", ";\n    position: absolute;\n    top: 5px;\n    width: 12px;\n    height: 12px;\n    border-radius: 12px;\n    align-self: center;\n    opacity: ", ";\n  "])), semantic.focus.outline, isChecked ? 1 : 0);
+    var theme = _a.theme, isChecked = _a.isChecked;
+    return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    background-color: ", ";\n    position: absolute;\n    top: ", ";\n    width: ", ";\n    height: ", ";\n    border-radius: ", ";\n    align-self: center;\n    opacity: ", ";\n  "], ["\n    background-color: ", ";\n    position: absolute;\n    top: ", ";\n    width: ", ";\n    height: ", ";\n    border-radius: ", ";\n    align-self: center;\n    opacity: ", ";\n  "])), theme.input.color.selected, numToPx(theme.space[100]), numToPx(theme.space[300]), numToPx(theme.space[300]), numToPx(theme.space[300]), isChecked ? 1 : 0);
 });
 var StyledP = styled(P)(function (_a) {
-    var core = _a.theme.core;
-    return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "], ["\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "])), numToPx(core.space[3]), numToPx(core.space[3]));
+    var theme = _a.theme;
+    return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "], ["\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "])), numToPx(theme.space[300]), numToPx(theme.space[300]));
 });
 var StyledCategory = styled(P)(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic;
-    return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    font-size: ", ";\n    color: ", ";\n    background-color: ", ";\n    padding: ", " ", ";\n  "], ["\n    font-size: ", ";\n    color: ", ";\n    background-color: ", ";\n    padding: ", " ", ";\n  "])), numToPx(core.fontSize.label.large), semantic.message.secondary, semantic.surface.cutout, numToPx(core.space[1]), numToPx(core.space[4]));
+    var theme = _a.theme;
+    return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    font-size: ", ";\n    color: ", ";\n    background-color: ", ";\n    padding: ", " ", ";\n  "], ["\n    font-size: ", ";\n    color: ", ";\n    background-color: ", ";\n    padding: ", " ", ";\n  "])), numToPx(theme.font.size.xs.mediaQuery.lg), theme.color.surface.onSurface, theme.color.surface.surface, numToPx(theme.space[100]), numToPx(theme.space[400]));
 });
 export var Select = function (_a) {
     var _b = _a.options, options = _b === void 0 ? [] : _b, _c = _a.defaultSelected, defaultSelected = _c === void 0 ? { label: '', value: 'default' } : _c, _d = _a.noOptionMessage, noOptionMessage = _d === void 0 ? 'No option selected' : _d, _e = _a.onSelected, onSelected = _e === void 0 ? function () { return null; } : _e, _f = _a.hasError, hasError = _f === void 0 ? false : _f, _g = _a.testID, testID = _g === void 0 ? 'select' : _g;
     var _h = useState(false), isOpen = _h[0], setOpen = _h[1];
     var _j = useState(defaultSelected), selected = _j[0], setSelected = _j[1];
-    var height = Dimensions.get('window').height;
-    var dropdownContainerMaxHeight = height * 0.7;
     var handleOptionPress = function (val) {
         onSelected(val);
         setOpen(false);
@@ -63,6 +61,6 @@ export var Select = function (_a) {
         label: "-- ".concat(noOptionMessage, " --"),
         value: 'default',
     };
-    return (_jsxs(View, { children: [_jsxs(SelectInput, { testID: testID, hasError: hasError, onPress: function () { return setOpen(!isOpen); }, children: [_jsx(P, { style: { marginTop: 0, marginBottom: 0 }, children: selected.value === 'default' ? '' : selected.label }), _jsx(Icon, { name: "chevron-down", size: 16, style: { marginLeft: 'auto' } })] }), _jsx(Modal, { transparent: true, visible: isOpen, animationType: "fade", onRequestClose: function () { return setOpen(false); }, children: _jsx(DropdownWrapper, { children: _jsx(DropdownContainer, { style: { maxHeight: dropdownContainerMaxHeight }, children: _jsxs(ScrollView, { nestedScrollEnabled: true, testID: "".concat(testID, "-OptionsScrollView"), children: [_jsxs(SelectOption, { accessible: true, accessibilityRole: "radio", onPress: function () { return handleOptionPress(requiredOption); }, children: [_jsx(StyledP, { children: _jsx(Strong, { children: requiredOption.label }) }), _jsx(Radio, { isChecked: selected.value === requiredOption.value, children: _jsx(RadioDot, { isChecked: selected.value === requiredOption.value }) })] }), Object.keys(optionsByCategories).map(function (category) { return (_jsxs(Fragment, { children: [category !== 'undefined' ? (_jsx(StyledCategory, { children: category })) : null, optionsByCategories[category].map(function (option, i) { return (_jsxs(SelectOption, { accessible: true, accessibilityRole: "radio", isLastOption: i === optionsByCategories[category].length - 1, onPress: function () { return handleOptionPress(option); }, children: [_jsx(StyledP, { children: _jsx(Strong, { children: option.label }) }), _jsx(Radio, { isChecked: selected.value === option.value, children: _jsx(RadioDot, { isChecked: selected.value === option.value }) })] }, option.label)); })] }, category)); })] }) }) }) })] }));
+    return (_jsxs(View, { children: [_jsxs(SelectInput, { testID: testID, hasError: hasError, onPress: function () { return setOpen(!isOpen); }, children: [_jsx(P, { style: { marginTop: 0, marginBottom: 0 }, children: selected.value === 'default' ? '' : selected.label }), _jsx(Icon, { name: "chevron-down", size: 16, style: { marginLeft: 'auto' } })] }), _jsx(Modal, { transparent: true, visible: isOpen, animationType: "fade", onRequestClose: function () { return setOpen(false); }, children: _jsx(DropdownWrapper, { onPress: function () { return setOpen(false); }, children: _jsx(DropdownContainer, { children: _jsxs(ScrollView, { nestedScrollEnabled: true, testID: "".concat(testID, "-OptionsScrollView"), children: [_jsxs(SelectOption, { accessible: true, accessibilityRole: "radio", onPress: function () { return handleOptionPress(requiredOption); }, children: [_jsx(StyledP, { children: _jsx(Strong, { children: requiredOption.label }) }), _jsx(Radio, { isChecked: selected.value === requiredOption.value, children: _jsx(RadioDot, { isChecked: selected.value === requiredOption.value }) })] }), Object.keys(optionsByCategories).map(function (category) { return (_jsxs(Fragment, { children: [category !== 'undefined' ? (_jsx(StyledCategory, { children: category })) : null, optionsByCategories[category].map(function (option, i) { return (_jsxs(SelectOption, { accessible: true, accessibilityRole: "radio", isLastOption: i === optionsByCategories[category].length - 1, onPress: function () { return handleOptionPress(option); }, children: [_jsx(StyledP, { children: _jsx(Strong, { children: option.label }) }), _jsx(Radio, { isChecked: selected.value === option.value, children: _jsx(RadioDot, { isChecked: selected.value === option.value }) })] }, option.label)); })] }, category)); })] }) }) }) })] }));
 };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/dist/esm/components/SkeletonCircle/SkeletonCircle.js

@@ -25,14 +25,14 @@ import { pxToNumber } from '@ovotech/element-core';
 import styled from '../../styled.native';
 import { SkeletonAnimation } from '../SkeletonAnimation';
 var StyledSkeletonCircleWrapper = styled.View(function (_a) {
-    var size = _a.size;
-    return "width: ".concat(size, "; max-width: 100%;");
+    var width = _a.width;
+    return "width: ".concat(width, "; max-width: 100%;");
 });
 var StyledSkeletonCircle = styled.View(function (_a) {
-    var core = _a.theme.core, size = _a.size;
-    return "\n    background-color: ".concat(core.color.neutral.light, ";\n    height: 0;\n    padding-bottom: 100%;\n    border-radius: ").concat(pxToNumber(size) / 2, "px;\n  ");
+    var theme = _a.theme, width = _a.width;
+    return "\n    background-color: ".concat(theme.color.surface.dim, ";\n    height: 0;\n    padding-bottom: 100%;\n    border-radius: ").concat(pxToNumber(width) / 2, "px;\n  ");
 });
 export var SkeletonCircle = function (_a) {
-    var _b = _a.size, size = _b === void 0 ? '120px' : _b, rest = __rest(_a, ["size"]);
-    return (_jsx(SkeletonAnimation, { children: _jsx(StyledSkeletonCircleWrapper, __assign({ size: size }, rest, { children: _jsx(StyledSkeletonCircle, { size: size }) })) }));
+    var _b = _a.width, width = _b === void 0 ? '120px' : _b, rest = __rest(_a, ["width"]);
+    return (_jsx(SkeletonAnimation, { children: _jsx(StyledSkeletonCircleWrapper, __assign({ width: width }, rest, { children: _jsx(StyledSkeletonCircle, { width: width }) })) }));
 };

package/dist/esm/components/SkeletonHeading/SkeletonHeading.js

@@ -22,11 +22,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import styled from '../../styled.native';
-import { Heading3 } from '../Heading3';
+import { Heading3 } from '../Heading';
 import { SkeletonAnimation } from '../SkeletonAnimation';
 var StyledSkeletonHeading = styled.View(function (_a) {
-    var core = _a.theme.core, size = _a.size;
-    return "\n    background-color: ".concat(core.color.neutral.light, ";\n    width: ").concat(size, ";\n  ");
+    var theme = _a.theme, size = _a.size;
+    return "\n    background-color: ".concat(theme.color.surface.dim, ";\n    width: ").concat(size, ";\n  ");
 });
 export var SkeletonHeading = function (_a) {
     var _b = _a.size, size = _b === void 0 ? '70%' : _b, _c = _a.headingComponent, Heading = _c === void 0 ? Heading3 : _c, rest = __rest(_a, ["size", "headingComponent"]);

package/dist/esm/components/SkeletonText/SkeletonText.js

@@ -27,10 +27,10 @@ import styled from '../../styled.native';
 import { P } from '../P';
 import { SkeletonAnimation } from '../SkeletonAnimation';
 var StyledSkeletonText = styled.View(function (_a) {
-    var core = _a.theme.core, aboveSmallBreakpoint = _a.aboveSmallBreakpoint, short = _a.short;
-    return "\n    background-color: ".concat(core.color.neutral.light, ";\n    margin-bottom: ").concat(numToPx(core.space[2]), ";\n    height: ").concat(aboveSmallBreakpoint
-        ? numToPx(core.fontSize.body.large)
-        : numToPx(core.fontSize.body.small), ";\n\n    ").concat(short ? 'width: 50%' : '', ";\n  ");
+    var theme = _a.theme, aboveSmallBreakpoint = _a.aboveSmallBreakpoint, short = _a.short;
+    return "\n    background-color: ".concat(theme.color.surface.dim, ";\n    margin-bottom: ").concat(numToPx(theme.space[200]), ";\n    height: ").concat(aboveSmallBreakpoint
+        ? numToPx(theme.font.size.md.mediaQuery.lg)
+        : numToPx(theme.font.size.md.mediaQuery.sm), ";\n\n    ").concat(short ? 'width: 50%' : '', ";\n  ");
 });
 export var SkeletonText = function (_a) {
     var _b = _a.lines, lines = _b === void 0 ? 1 : _b, rest = __rest(_a, ["lines"]);

package/dist/esm/components/Spinner/Spinner.js

@@ -16,7 +16,7 @@ var calculateSvgProps = function (size) {
 };
 export var Spinner = function (_a) {
     var _b = _a.inverted, inverted = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? 'small' : _c, _d = _a.accessibilityLabel, accessibilityLabel = _d === void 0 ? 'Loading' : _d;
-    var core = useContext(ThemeContext).core;
+    var theme = useContext(ThemeContext);
     var rotation = useSharedValue(0);
     var animatedStyles = useAnimatedStyle(function () {
         return {
@@ -40,5 +40,5 @@ export var Spinner = function (_a) {
     }, []);
     var rectangleSize = size in semanticSizes ? semanticSizes[size] : size;
     var _e = calculateSvgProps(rectangleSize), viewBox = _e.viewBox, y = _e.y;
-    return (_jsx(Animated.View, { style: [{ width: viewBox }, animatedStyles], accessible: true, accessibilityLabel: accessibilityLabel, children: _jsx(Svg, { width: "".concat(viewBox), height: "".concat(viewBox), viewBox: "0 0 ".concat(viewBox, " ").concat(viewBox), children: _jsx(Rect, { y: "".concat(y), width: "".concat(rectangleSize), height: "".concat(rectangleSize), transform: "rotate(-15 0 ".concat(y, ")"), fill: core.color.brand[inverted ? 'white' : 'ovo'] }) }) }));
+    return (_jsx(Animated.View, { style: [{ width: viewBox }, animatedStyles], accessible: true, accessibilityLabel: accessibilityLabel, children: _jsx(Svg, { width: "".concat(viewBox), height: "".concat(viewBox), viewBox: "0 0 ".concat(viewBox, " ").concat(viewBox), children: _jsx(Rect, { y: "".concat(y), width: "".concat(rectangleSize), height: "".concat(rectangleSize), transform: "rotate(-15 0 ".concat(y, ")"), fill: theme.color.brand[inverted ? 'onBrand' : 'brand'] }) }) }));
 };

package/dist/esm/components/Stack/Stack.js

@@ -34,8 +34,10 @@ var Stack = function (_a) {
         }) })));
 };
 var StyledStackItem = styled.View(function (_a) {
-    var space = _a.theme.core.space, spaceBetween = _a.spaceBetween, smallAndUp = _a.smallAndUp, mediumAndUp = _a.mediumAndUp, largeAndUp = _a.largeAndUp;
-    var formatter = function (spaceKey) { return numToPx(space[spaceKey]); };
+    var theme = _a.theme, spaceBetween = _a.spaceBetween, smallAndUp = _a.smallAndUp, mediumAndUp = _a.mediumAndUp, largeAndUp = _a.largeAndUp;
+    var formatter = function (spaceKey) {
+        return numToPx(theme.space[String(spaceKey * 100)]);
+    };
     var breakpoints = { smallAndUp: smallAndUp, mediumAndUp: mediumAndUp, largeAndUp: largeAndUp };
     return responsiveStyle('margin-top', spaceBetween, breakpoints, formatter);
 });

package/dist/esm/components/Strong/Strong.js

@@ -1,5 +1,5 @@
 import styled from '../../styled.native';
 export var Strong = styled.Text(function (_a) {
-    var core = _a.theme.core;
-    return "\n    font-family: ".concat(core.fontFamily.bodyBold.native, ";\n  ");
+    var theme = _a.theme;
+    return "\n    font-family: ".concat(theme.native.font.family.bold, ";\n  ");
 });

package/dist/esm/components/SubLabelText/SubLabelText.js

@@ -6,11 +6,11 @@ import { numToPx } from '@ovotech/element-core';
 import styled, { css } from '../../styled.native';
 import { styledComponentWithBreakpoints } from '../../utils';
 var StyledSubLabelText = styled.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 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, numToPx(core.lineHeight.body.small), semantic.message.secondary, numToPx(fontSize));
+        ? theme.font.size.md.mediaQuery.lg
+        : theme.font.size.md.mediaQuery.sm;
+    return 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, numToPx(theme.font.lineHeight.md.mediaQuery.sm), theme.color.surface.onSurfaceVariant, numToPx(fontSize));
 });
 var SubLabelText = styledComponentWithBreakpoints(StyledSubLabelText);
 export { SubLabelText };

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

@@ -30,24 +30,19 @@ import { forwardRef } from 'react';
 import { useBreakpoint } from '../../hooks';
 import styled, { css } from '../../styled.native';
 var TabText = styled.Text(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, _c = _a.active, active = _c === void 0 ? false : _c;
-    return 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  "])), numToPx(core.fontSize.body.small), core.fontFamily.bodyBold.native, numToPx(core.lineHeight.body.small), active ? semantic.focus.outline : semantic.message.base, numToPx(core.space[3]), numToPx(core.space[2]));
+    var theme = _a.theme, _b = _a.active, active = _b === void 0 ? false : _b;
+    return 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  "])), numToPx(theme.font.size.md.mediaQuery.sm), theme.native.font.family.bold, numToPx(theme.font.lineHeight.md.mediaQuery.sm), active
+        ? theme.color.outline.outer
+        : theme.color.surface.onSurface, numToPx(theme.space[300]), numToPx(theme.space[200]));
 });
 var TabTouchable = styled.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 = numToPx(core.borderWidth.small);
-    var borderColor = semantic.border.differentiated;
-    return 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
-        ? 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, numToPx(core.borderWidth.medium)) : '', !inline
-        ? 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
-        ? ''
-        : 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
-        ? ''
-        : 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 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, numToPx(theme.border.width.sm), theme.color.surface.border, active
+        ? 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, numToPx(theme.border.width.md)) : '');
 });
 export var Tab = 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 = useBreakpoint();
     return (_jsx(TabTouchable, __assign({ accessible: true, accessibilityRole: "tab", accessibilityState: { selected: active }, active: active, stretch: fullWidth, ref: ref }, rest, { children: _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/esm/components/Tabs/TabList.js

@@ -30,11 +30,11 @@ import { Children, cloneElement } from 'react';
 import styled, { css } from '../../styled.native';
 import { callAll, getValidChildren } from '../../utils';
 var StyledTabList = styled.View(function (_a) {
-    var core = _a.theme.core;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    flex-direction: row;\n    margin: -", ";\n  "], ["\n    flex-direction: row;\n    margin: -", ";\n  "])), numToPx(core.borderWidth.small));
+    var theme = _a.theme;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    flex-direction: row;\n    margin: -", ";\n  "], ["\n    flex-direction: row;\n    margin: -", ";\n  "])), numToPx(theme.border.width.sm));
 });
 export 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 = getValidChildren(children);
     return (_jsx(StyledTabList, __assign({ accessible: true, accessibilityRole: "tablist" }, rest, { children: Children.map(validChildren, function (child, i) {
             return cloneElement(child, {
@@ -42,9 +42,6 @@ export var TabList = function (_a) {
                 active: activeTab === i,
                 fullWidth: fullWidth,
                 ref: tabRefs === null || tabRefs === void 0 ? void 0 : tabRefs[i],
-                first: i === 0,
-                last: Children.count(validChildren) - 1 === i,
-                inline: inline,
             });
         }) })));
 };

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

@@ -28,8 +28,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { numToPx } from '@ovotech/element-core';
 import styled, { css } from '../../styled.native';
 var StyledView = styled.View(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic;
-    return 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  "])), numToPx(core.space[4]), numToPx(core.borderWidth.small), semantic.border.differentiated);
+    var theme = _a.theme;
+    return 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  "])), numToPx(theme.space[400]), numToPx(theme.border.width.sm), theme.color.input.borderDim);
 });
 export var TabPanel = function (_a) {
     var rest = __rest(_a, []);

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

@@ -33,14 +33,12 @@ import { Card } from '../Card';
 import { TabList } from './TabList';
 import { TabPanel } from './TabPanel';
 var TabsCard = styled(Card)(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, inline = _a.inline;
-    return 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  "])), numToPx(core.borderWidth.small), inline ? semantic.border.differentiated : 'transparent');
+    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, 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 = 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 = filterChildrenByType(children, TabList);
     var tabPanels = filterChildrenByType(children, TabPanel);
     var tabRefs = tabPanels.map(function () { return createRef(); });
@@ -53,13 +51,12 @@ export var Tabs = function (_a) {
             loaded.current = true;
         }
     }, [onSelected, activeTab]);
-    return (_jsxs(TabsCard, __assign({ inline: inline }, rest, { children: [tabList.map(function (child) {
+    return (_jsxs(TabsCard, __assign({}, rest, { children: [tabList.map(function (child) {
                 return cloneElement(child, {
                     setActiveTab: setActiveTab,
                     activeTab: activeTab,
                     tabRefs: tabRefs,
                     fullWidth: fullWidth,
-                    inline: inline,
                 });
             }), tabPanels
                 .filter(function (_, index) { return index === activeTab; })

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

@@ -30,8 +30,8 @@ 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 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"]);

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

@@ -28,30 +28,24 @@ export var ToastsContainer = function (_a) {
     return (_jsx(Toasts, { extraInsets: { top: top } }));
 };
 var StyledView = styled.View(function (_a) {
-    var core = _a.theme.core, variant = _a.variant;
+    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'
-        ? 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));
+        ? 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 semantic = _a.theme.semantic;
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    color: ", ";\n  "], ["\n    color: ", ";\n  "])), semantic.inverted.message.base);
+    var theme = _a.theme;
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    color: ", ";\n  "], ["\n    color: ", ";\n  "])), theme.color.surface.bright);
 });
-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 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 _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]));
+    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;
@@ -99,7 +93,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 }), _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 }) })] }));
 };
 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;
@@ -108,9 +102,7 @@ var CustomToast = function (_a) {
     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
-        ? textHeight
-        : textHeight + actionHeight;
+    var toastHeight = textHeight + actionHeight;
     var handleAction = function () {
         if (action && actionTitle) {
             action();
@@ -131,11 +123,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 ? (_jsx(Action, { ref: actionRef, style: { width: 'auto' }, inverted: true, inline: true, iconRight: "chevron-right-small", onPress: handleAction, onLayout: function () {
+                        }, 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: function () { return toast.dismiss(id); }, children: _jsx(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/esm/components/Toggle/Toggle.js

@@ -29,12 +29,12 @@ 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;
+    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]);
@@ -43,11 +43,7 @@ var Input = function (_a) {
                 }, checked: checked }) }) })));
 };
 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 _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

@@ -2,22 +2,24 @@ 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  ");
+    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 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
+    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 _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    ");
+    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 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");
+    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");
 });

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';

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

@@ -2,7 +2,7 @@ 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 breakpoint = useContext(ThemeContext).breakpoint;
     var width = useWindowDimensions().width;
     return {
         smallAndUp: width > Number(breakpoint.small),

package/dist/esm/providers/IconsProvider.js

@@ -11,7 +11,7 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext } from 'react';
-import { Address, Advice, Archive, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Award, Battery, CalBook, Cal, CaretArrowDown, CaretArrowLeft, CaretArrowRight, CaretArrowUp, CaretDown, CaretLeft, CaretRight, CaretUp, ChartFilled, Chart, CheckCircle, Check, ChevronDown, ChevronLeftSmallFirst, ChevronLeftSmall, ChevronLeft, ChevronRightSmallLast, ChevronRightSmall, ChevronRight, ChevronUp, Circle, CloseCircle, Cross, Doc, Dollar, Download, EcoHome, Eco, Edit, ElectricCar, ElectricHome, Electricity, EnergyAdvice, Equals, Euro, Gas, GlobeAddress, HelpFilled, Help, Hide, HomeFilled, Home, HydroPower, Info, Link, Logo, MailOpen, Mail, Menu, MessageFilled, Message, Minus, Mobile, NewWindow, PaymentCardFilled, PaymentCard, Phone, Plus, Pound, PricingFilled, Pricing, Search, Security, ShopFilled, Shop, Show, SmartHome, SmartMeter, Solar, StarFilled, Star, Sun, Torch, Trees, Tune, UserFilled, User, Wallet, WarmHome, Warning, WebAddress, WindPower, } from './icons';
+import { Address, Advice, Archive, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Award, Battery, Cal, CalBook, CaretArrowDown, CaretArrowLeft, CaretArrowRight, CaretArrowUp, CaretDown, CaretLeft, CaretRight, CaretUp, Chart, ChartFilled, Check, CheckCircle, ChevronDown, ChevronLeft, ChevronLeftSmall, ChevronLeftSmallFirst, ChevronRight, ChevronRightSmall, ChevronRightSmallLast, ChevronUp, Circle, CloseCircle, Cross, Doc, Dollar, Download, Eco, EcoHome, Edit, ElectricCar, ElectricHome, Electricity, EnergyAdvice, Equals, Euro, Gas, GlobeAddress, Help, HelpFilled, Hide, Home, HomeFilled, HydroPower, Info, Link, Logo, Mail, MailOpen, Menu, Message, MessageFilled, Minus, Mobile, NewWindow, PaymentCard, PaymentCardFilled, Phone, Plus, Pound, Pricing, PricingFilled, Search, Security, Shop, ShopFilled, Show, SmartHome, SmartMeter, Solar, Star, StarFilled, Sun, Torch, Trees, Tune, User, UserFilled, Wallet, WarmHome, Warning, WebAddress, WindPower, } from './icons';
 var defaultIcons = {
     address: Address,
     advice: Advice,

package/dist/esm/providers/index.js

@@ -1,2 +1,4 @@
 export * from './IconsProvider';
-export * from './types';
+export * from './PictogramsProvider';
+export * from './icons-types';
+export * from './pictograms-types';