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

package/dist/components/SelectField/Select.js

@@ -41,47 +41,45 @@ var Icon_1 = require("../Icon");
 var P_1 = require("../P");
 var Strong_1 = require("../Strong");
 var SelectInput = styled_native_1.default.TouchableOpacity(function (_a) {
-    var _b = _a.theme, semantic = _b.semantic, core = _b.core, hasError = _a.hasError;
-    return (0, styled_native_1.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, (0, element_core_1.numToPx)(core.borderWidth.small), (0, element_core_1.numToPx)(core.radius.small), (0, element_core_1.numToPx)(core.space[2]));
+    var theme = _a.theme, hasError = _a.hasError;
+    return (0, styled_native_1.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, (0, element_core_1.numToPx)(theme.border.width.md), (0, element_core_1.numToPx)(theme.border.radius.sm), (0, element_core_1.numToPx)(theme.space[200]), (0, element_core_1.numToPx)(theme.space[350]), (0, element_core_1.numToPx)(theme.space[1100]));
 });
-var DropdownWrapper = styled_native_1.default.View(function (_a) {
-    var core = _a.theme.core;
-    return (0, styled_native_1.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_native_1.default.TouchableOpacity(function (_a) {
+    var theme = _a.theme;
+    return (0, styled_native_1.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_native_1.default.SafeAreaView(function (_a) {
-    var core = _a.theme.core;
-    return (0, styled_native_1.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  "])), (0, element_core_1.numToPx)(core.radius.small), core.color.brand.white);
+    var theme = _a.theme;
+    return (0, styled_native_1.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  "])), (0, element_core_1.numToPx)(theme.border.radius.sm), theme.color.surface.bright);
 });
 var SelectOption = styled_native_1.default.TouchableOpacity(function (_a) {
-    var _b = _a.theme, semantic = _b.semantic, core = _b.core, isLastOption = _a.isLastOption;
-    return (0, styled_native_1.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, (0, element_core_1.numToPx)(core.space[4]));
+    var theme = _a.theme, isLastOption = _a.isLastOption;
+    return (0, styled_native_1.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, (0, element_core_1.numToPx)(theme.space[400]));
 });
 var Radio = styled_native_1.default.View(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, isChecked = _a.isChecked;
-    return (0, styled_native_1.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  "])), (0, element_core_1.numToPx)(core.borderWidth.small), isChecked
-        ? semantic.focus.outline
-        : semantic.border.functional);
+    var theme = _a.theme, isChecked = _a.isChecked;
+    return (0, styled_native_1.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', (0, element_core_1.numToPx)(theme.space[600]), (0, element_core_1.numToPx)(theme.space[600]), (0, element_core_1.numToPx)(theme.space[600]), (0, element_core_1.numToPx)(theme.border.width.md), theme.input.color[isChecked ? 'selected' : 'border']);
 });
 var RadioDot = styled_native_1.default.View(function (_a) {
-    var semantic = _a.theme.semantic, isChecked = _a.isChecked;
-    return (0, styled_native_1.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 (0, styled_native_1.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, (0, element_core_1.numToPx)(theme.space[100]), (0, element_core_1.numToPx)(theme.space[300]), (0, element_core_1.numToPx)(theme.space[300]), (0, element_core_1.numToPx)(theme.space[300]), isChecked ? 1 : 0);
 });
 var StyledP = (0, styled_native_1.default)(P_1.P)(function (_a) {
-    var core = _a.theme.core;
-    return (0, styled_native_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "], ["\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "])), (0, element_core_1.numToPx)(core.space[3]), (0, element_core_1.numToPx)(core.space[3]));
+    var theme = _a.theme;
+    return (0, styled_native_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "], ["\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "])), (0, element_core_1.numToPx)(theme.space[300]), (0, element_core_1.numToPx)(theme.space[300]));
 });
 var StyledCategory = (0, styled_native_1.default)(P_1.P)(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic;
-    return (0, styled_native_1.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  "])), (0, element_core_1.numToPx)(core.fontSize.label.large), semantic.message.secondary, semantic.surface.cutout, (0, element_core_1.numToPx)(core.space[1]), (0, element_core_1.numToPx)(core.space[4]));
+    var theme = _a.theme;
+    return (0, styled_native_1.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  "])), (0, element_core_1.numToPx)(theme.font.size.xs.mediaQuery.lg), theme.color.surface.onSurface, theme.color.surface.surface, (0, element_core_1.numToPx)(theme.space[100]), (0, element_core_1.numToPx)(theme.space[400]));
 });
 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 = (0, react_1.useState)(false), isOpen = _h[0], setOpen = _h[1];
     var _j = (0, react_1.useState)(defaultSelected), selected = _j[0], setSelected = _j[1];
-    var height = react_native_1.Dimensions.get('window').height;
-    var dropdownContainerMaxHeight = height * 0.7;
     var handleOptionPress = function (val) {
         onSelected(val);
         setOpen(false);
@@ -92,7 +90,7 @@ var Select = function (_a) {
         label: "-- ".concat(noOptionMessage, " --"),
         value: 'default',
     };
-    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, jsx_runtime_1.jsxs)(SelectInput, { testID: testID, hasError: hasError, onPress: function () { return setOpen(!isOpen); }, children: [(0, jsx_runtime_1.jsx)(P_1.P, { style: { marginTop: 0, marginBottom: 0 }, children: selected.value === 'default' ? '' : selected.label }), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "chevron-down", size: 16, style: { marginLeft: 'auto' } })] }), (0, jsx_runtime_1.jsx)(react_native_1.Modal, { transparent: true, visible: isOpen, animationType: "fade", onRequestClose: function () { return setOpen(false); }, children: (0, jsx_runtime_1.jsx)(DropdownWrapper, { children: (0, jsx_runtime_1.jsx)(DropdownContainer, { style: { maxHeight: dropdownContainerMaxHeight }, children: (0, jsx_runtime_1.jsxs)(react_native_1.ScrollView, { nestedScrollEnabled: true, testID: "".concat(testID, "-OptionsScrollView"), children: [(0, jsx_runtime_1.jsxs)(SelectOption, { accessible: true, accessibilityRole: "radio", onPress: function () { return handleOptionPress(requiredOption); }, children: [(0, jsx_runtime_1.jsx)(StyledP, { children: (0, jsx_runtime_1.jsx)(Strong_1.Strong, { children: requiredOption.label }) }), (0, jsx_runtime_1.jsx)(Radio, { isChecked: selected.value === requiredOption.value, children: (0, jsx_runtime_1.jsx)(RadioDot, { isChecked: selected.value === requiredOption.value }) })] }), Object.keys(optionsByCategories).map(function (category) { return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [category !== 'undefined' ? ((0, jsx_runtime_1.jsx)(StyledCategory, { children: category })) : null, optionsByCategories[category].map(function (option, i) { return ((0, jsx_runtime_1.jsxs)(SelectOption, { accessible: true, accessibilityRole: "radio", isLastOption: i === optionsByCategories[category].length - 1, onPress: function () { return handleOptionPress(option); }, children: [(0, jsx_runtime_1.jsx)(StyledP, { children: (0, jsx_runtime_1.jsx)(Strong_1.Strong, { children: option.label }) }), (0, jsx_runtime_1.jsx)(Radio, { isChecked: selected.value === option.value, children: (0, jsx_runtime_1.jsx)(RadioDot, { isChecked: selected.value === option.value }) })] }, option.label)); })] }, category)); })] }) }) }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, jsx_runtime_1.jsxs)(SelectInput, { testID: testID, hasError: hasError, onPress: function () { return setOpen(!isOpen); }, children: [(0, jsx_runtime_1.jsx)(P_1.P, { style: { marginTop: 0, marginBottom: 0 }, children: selected.value === 'default' ? '' : selected.label }), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "chevron-down", size: 16, style: { marginLeft: 'auto' } })] }), (0, jsx_runtime_1.jsx)(react_native_1.Modal, { transparent: true, visible: isOpen, animationType: "fade", onRequestClose: function () { return setOpen(false); }, children: (0, jsx_runtime_1.jsx)(DropdownWrapper, { onPress: function () { return setOpen(false); }, children: (0, jsx_runtime_1.jsx)(DropdownContainer, { children: (0, jsx_runtime_1.jsxs)(react_native_1.ScrollView, { nestedScrollEnabled: true, testID: "".concat(testID, "-OptionsScrollView"), children: [(0, jsx_runtime_1.jsxs)(SelectOption, { accessible: true, accessibilityRole: "radio", onPress: function () { return handleOptionPress(requiredOption); }, children: [(0, jsx_runtime_1.jsx)(StyledP, { children: (0, jsx_runtime_1.jsx)(Strong_1.Strong, { children: requiredOption.label }) }), (0, jsx_runtime_1.jsx)(Radio, { isChecked: selected.value === requiredOption.value, children: (0, jsx_runtime_1.jsx)(RadioDot, { isChecked: selected.value === requiredOption.value }) })] }), Object.keys(optionsByCategories).map(function (category) { return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [category !== 'undefined' ? ((0, jsx_runtime_1.jsx)(StyledCategory, { children: category })) : null, optionsByCategories[category].map(function (option, i) { return ((0, jsx_runtime_1.jsxs)(SelectOption, { accessible: true, accessibilityRole: "radio", isLastOption: i === optionsByCategories[category].length - 1, onPress: function () { return handleOptionPress(option); }, children: [(0, jsx_runtime_1.jsx)(StyledP, { children: (0, jsx_runtime_1.jsx)(Strong_1.Strong, { children: option.label }) }), (0, jsx_runtime_1.jsx)(Radio, { isChecked: selected.value === option.value, children: (0, jsx_runtime_1.jsx)(RadioDot, { isChecked: selected.value === option.value }) })] }, option.label)); })] }, category)); })] }) }) }) })] }));
 };
 exports.Select = Select;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/dist/components/SkeletonCircle/SkeletonCircle.d.ts

@@ -1,6 +1,6 @@
 import { ViewProps } from 'react-native';
 type Props = ViewProps & {
-    size?: string;
+    width?: string;
 };
-export declare const SkeletonCircle: ({ size, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const SkeletonCircle: ({ width, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/SkeletonCircle/SkeletonCircle.js

@@ -31,15 +31,15 @@ var element_core_1 = require("@ovotech/element-core");
 var styled_native_1 = __importDefault(require("../../styled.native"));
 var SkeletonAnimation_1 = require("../SkeletonAnimation");
 var StyledSkeletonCircleWrapper = styled_native_1.default.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_native_1.default.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((0, element_core_1.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((0, element_core_1.pxToNumber)(width) / 2, "px;\n  ");
 });
 var SkeletonCircle = function (_a) {
-    var _b = _a.size, size = _b === void 0 ? '120px' : _b, rest = __rest(_a, ["size"]);
-    return ((0, jsx_runtime_1.jsx)(SkeletonAnimation_1.SkeletonAnimation, { children: (0, jsx_runtime_1.jsx)(StyledSkeletonCircleWrapper, __assign({ size: size }, rest, { children: (0, jsx_runtime_1.jsx)(StyledSkeletonCircle, { size: size }) })) }));
+    var _b = _a.width, width = _b === void 0 ? '120px' : _b, rest = __rest(_a, ["width"]);
+    return ((0, jsx_runtime_1.jsx)(SkeletonAnimation_1.SkeletonAnimation, { children: (0, jsx_runtime_1.jsx)(StyledSkeletonCircleWrapper, __assign({ width: width }, rest, { children: (0, jsx_runtime_1.jsx)(StyledSkeletonCircle, { width: width }) })) }));
 };
 exports.SkeletonCircle = SkeletonCircle;

package/dist/components/SkeletonHeading/SkeletonHeading.js

@@ -28,14 +28,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SkeletonHeading = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_native_1 = __importDefault(require("../../styled.native"));
-var Heading3_1 = require("../Heading3");
+var Heading_1 = require("../Heading");
 var SkeletonAnimation_1 = require("../SkeletonAnimation");
 var StyledSkeletonHeading = styled_native_1.default.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  ");
 });
 var SkeletonHeading = function (_a) {
-    var _b = _a.size, size = _b === void 0 ? '70%' : _b, _c = _a.headingComponent, Heading = _c === void 0 ? Heading3_1.Heading3 : _c, rest = __rest(_a, ["size", "headingComponent"]);
+    var _b = _a.size, size = _b === void 0 ? '70%' : _b, _c = _a.headingComponent, Heading = _c === void 0 ? Heading_1.Heading3 : _c, rest = __rest(_a, ["size", "headingComponent"]);
     return ((0, jsx_runtime_1.jsx)(SkeletonAnimation_1.SkeletonAnimation, { children: (0, jsx_runtime_1.jsx)(StyledSkeletonHeading, __assign({ "aria-hidden": "true", size: size, as: Heading }, rest, { children: "\u00A0" })) }));
 };
 exports.SkeletonHeading = SkeletonHeading;

package/dist/components/SkeletonText/SkeletonText.js

@@ -33,10 +33,10 @@ var styled_native_1 = __importDefault(require("../../styled.native"));
 var P_1 = require("../P");
 var SkeletonAnimation_1 = require("../SkeletonAnimation");
 var StyledSkeletonText = styled_native_1.default.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((0, element_core_1.numToPx)(core.space[2]), ";\n    height: ").concat(aboveSmallBreakpoint
-        ? (0, element_core_1.numToPx)(core.fontSize.body.large)
-        : (0, element_core_1.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((0, element_core_1.numToPx)(theme.space[200]), ";\n    height: ").concat(aboveSmallBreakpoint
+        ? (0, element_core_1.numToPx)(theme.font.size.md.mediaQuery.lg)
+        : (0, element_core_1.numToPx)(theme.font.size.md.mediaQuery.sm), ";\n\n    ").concat(short ? 'width: 50%' : '', ";\n  ");
 });
 var SkeletonText = function (_a) {
     var _b = _a.lines, lines = _b === void 0 ? 1 : _b, rest = __rest(_a, ["lines"]);

package/dist/components/Spinner/Spinner.js

@@ -42,7 +42,7 @@ var calculateSvgProps = function (size) {
 };
 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 = (0, react_1.useContext)(styled_native_1.ThemeContext).core;
+    var theme = (0, react_1.useContext)(styled_native_1.ThemeContext);
     var rotation = (0, react_native_reanimated_1.useSharedValue)(0);
     var animatedStyles = (0, react_native_reanimated_1.useAnimatedStyle)(function () {
         return {
@@ -66,6 +66,6 @@ var Spinner = function (_a) {
     }, []);
     var rectangleSize = size in semanticSizes ? semanticSizes[size] : size;
     var _e = calculateSvgProps(rectangleSize), viewBox = _e.viewBox, y = _e.y;
-    return ((0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [{ width: viewBox }, animatedStyles], accessible: true, accessibilityLabel: accessibilityLabel, children: (0, jsx_runtime_1.jsx)(react_native_svg_1.default, { width: "".concat(viewBox), height: "".concat(viewBox), viewBox: "0 0 ".concat(viewBox, " ").concat(viewBox), children: (0, jsx_runtime_1.jsx)(react_native_svg_1.Rect, { y: "".concat(y), width: "".concat(rectangleSize), height: "".concat(rectangleSize), transform: "rotate(-15 0 ".concat(y, ")"), fill: core.color.brand[inverted ? 'white' : 'ovo'] }) }) }));
+    return ((0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [{ width: viewBox }, animatedStyles], accessible: true, accessibilityLabel: accessibilityLabel, children: (0, jsx_runtime_1.jsx)(react_native_svg_1.default, { width: "".concat(viewBox), height: "".concat(viewBox), viewBox: "0 0 ".concat(viewBox, " ").concat(viewBox), children: (0, jsx_runtime_1.jsx)(react_native_svg_1.Rect, { y: "".concat(y), width: "".concat(rectangleSize), height: "".concat(rectangleSize), transform: "rotate(-15 0 ".concat(y, ")"), fill: theme.color.brand[inverted ? 'onBrand' : 'brand'] }) }) }));
 };
 exports.Spinner = Spinner;

package/dist/components/Stack/Stack.js

@@ -41,8 +41,10 @@ var Stack = function (_a) {
 };
 exports.Stack = Stack;
 var StyledStackItem = styled_native_1.default.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 (0, element_core_1.numToPx)(space[spaceKey]); };
+    var theme = _a.theme, spaceBetween = _a.spaceBetween, smallAndUp = _a.smallAndUp, mediumAndUp = _a.mediumAndUp, largeAndUp = _a.largeAndUp;
+    var formatter = function (spaceKey) {
+        return (0, element_core_1.numToPx)(theme.space[String(spaceKey * 100)]);
+    };
     var breakpoints = { smallAndUp: smallAndUp, mediumAndUp: mediumAndUp, largeAndUp: largeAndUp };
     return (0, utils_1.responsiveStyle)('margin-top', spaceBetween, breakpoints, formatter);
 });