@ovotech/element-native 4.4.8 → 4.5.0

package/dist/components/SkeletonCTA/index.js

@@ -1,5 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SkeletonCTA = void 0;
-var SkeletonCTA_1 = require("./SkeletonCTA");
-Object.defineProperty(exports, "SkeletonCTA", { enumerable: true, get: function () { return SkeletonCTA_1.SkeletonCTA; } });
+export { SkeletonCTA } from './SkeletonCTA';

package/dist/components/SkeletonCircle/SkeletonCircle.js

@@ -1,45 +1,12 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SkeletonCircle = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-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 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 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 }) })) }));
-};
-exports.SkeletonCircle = SkeletonCircle;
+import { jsx as _jsx } from "react/jsx-runtime";
+import { pxToNumber } from '@ovotech/element-core';
+import styled from '../../styled.native';
+import { SkeletonAnimation } from '../SkeletonAnimation';
+const StyledSkeletonCircleWrapper = styled.View(({ size }) => `width: ${size}; max-width: 100%;`);
+const StyledSkeletonCircle = styled.View(({ theme: { core }, size }) => `
+    background-color: ${core.color.neutral.light};
+    height: 0;
+    padding-bottom: 100%;
+    border-radius: ${pxToNumber(size) / 2}px;
+  `);
+export const SkeletonCircle = ({ size = '120px', ...rest }) => (_jsx(SkeletonAnimation, { children: _jsx(StyledSkeletonCircleWrapper, { size: size, ...rest, children: _jsx(StyledSkeletonCircle, { size: size }) }) }));

package/dist/components/SkeletonCircle/index.js

@@ -1,5 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SkeletonCircle = void 0;
-var SkeletonCircle_1 = require("./SkeletonCircle");
-Object.defineProperty(exports, "SkeletonCircle", { enumerable: true, get: function () { return SkeletonCircle_1.SkeletonCircle; } });
+export { SkeletonCircle } from './SkeletonCircle';

package/dist/components/SkeletonHeading/SkeletonHeading.js

@@ -1,41 +1,9 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-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 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 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"]);
-    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;
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from '../../styled.native';
+import { Heading3 } from '../Heading3';
+import { SkeletonAnimation } from '../SkeletonAnimation';
+const StyledSkeletonHeading = styled.View(({ theme: { core }, size }) => `
+    background-color: ${core.color.neutral.light};
+    width: ${size};
+  `);
+export const SkeletonHeading = ({ size = '70%', headingComponent: Heading = Heading3, ...rest }) => (_jsx(SkeletonAnimation, { children: _jsx(StyledSkeletonHeading, { "aria-hidden": "true", size: size, as: Heading, ...rest, children: "\u00A0" }) }));

package/dist/components/SkeletonHeading/index.js

@@ -1,5 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SkeletonHeading = void 0;
-var SkeletonHeading_1 = require("./SkeletonHeading");
-Object.defineProperty(exports, "SkeletonHeading", { enumerable: true, get: function () { return SkeletonHeading_1.SkeletonHeading; } });
+export { SkeletonHeading } from './SkeletonHeading';

package/dist/components/SkeletonText/SkeletonText.js

@@ -1,52 +1,27 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SkeletonText = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var element_core_1 = require("@ovotech/element-core");
-var hooks_1 = require("../../hooks");
-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  ");
+import { jsx as _jsx } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import { useBreakpoint } from '../../hooks';
+import styled from '../../styled.native';
+import { P } from '../P';
+import { SkeletonAnimation } from '../SkeletonAnimation';
+const StyledSkeletonText = styled.View(({ theme: { core }, aboveSmallBreakpoint, short }) => {
+    return `
+    background-color: ${core.color.neutral.light};
+    margin-bottom: ${numToPx(core.space[2])};
+    height: ${aboveSmallBreakpoint
+        ? numToPx(core.fontSize.body.large)
+        : numToPx(core.fontSize.body.small)};
+
+    ${short ? 'width: 50%' : ''};
+  `;
 });
-var SkeletonText = function (_a) {
-    var _b = _a.lines, lines = _b === void 0 ? 1 : _b, rest = __rest(_a, ["lines"]);
-    var generatedLines = [];
-    var smallAndUp = (0, hooks_1.useBreakpoint)().smallAndUp;
-    for (var i = 1; i <= lines; i++) {
-        generatedLines.push((0, jsx_runtime_1.jsx)(StyledSkeletonText, { short: i === lines, aboveSmallBreakpoint: smallAndUp }, "line-".concat(i)));
+export const SkeletonText = ({ lines = 1, ...rest }) => {
+    const generatedLines = [];
+    const { smallAndUp } = useBreakpoint();
+    for (let i = 1; i <= lines; i++) {
+        generatedLines.push(_jsx(StyledSkeletonText, { short: i === lines, aboveSmallBreakpoint: smallAndUp }, `line-${i}`));
     }
     return (
     // @ts-ignore styled components stuff
-    (0, jsx_runtime_1.jsx)(P_1.P, __assign({ as: SkeletonAnimation_1.SkeletonAnimation }, rest, { children: generatedLines })));
+    _jsx(P, { as: SkeletonAnimation, ...rest, children: generatedLines }));
 };
-exports.SkeletonText = SkeletonText;

package/dist/components/SkeletonText/index.js

@@ -1,5 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SkeletonText = void 0;
-var SkeletonText_1 = require("./SkeletonText");
-Object.defineProperty(exports, "SkeletonText", { enumerable: true, get: function () { return SkeletonText_1.SkeletonText; } });
+export { SkeletonText } from './SkeletonText';

package/dist/components/Small/Small.d.ts

@@ -1,6 +1,4 @@
-/// <reference types="react" />
-import { Text } from 'react-native';
-export declare const Small: import("react").ForwardRefExoticComponent<Omit<Omit<{
+export declare const Small: (props: Omit<{
     [x: string]: any;
     [x: number]: any;
     [x: symbol]: any;
@@ -222,9 +220,9 @@ export declare const Small: import("react").ForwardRefExoticComponent<Omit<Omit<
                 large: number;
             };
             customMediaQuery: {
-                'small-and-up': number;
-                'medium-and-up': number;
-                'large-and-up': number;
+                "small-and-up": number;
+                "medium-and-up": number;
+                "large-and-up": number;
             };
             opacity: {
                 solid: number;
@@ -238,22 +236,22 @@ export declare const Small: import("react").ForwardRefExoticComponent<Omit<Omit<
                 max: number;
             };
             space: {
-                '0': number;
-                '1': number;
-                '2': number;
-                '3': number;
-                '4': number;
-                '5': number;
-                '6': number;
-                '7': number;
-                '8': number;
-                '9': number;
-                '10': number;
-                '11': number;
-                '12': number;
-                '13': number;
-                '14': number;
-                '15': number;
+                "0": number;
+                "1": number;
+                "2": number;
+                "3": number;
+                "4": number;
+                "5": number;
+                "6": number;
+                "7": number;
+                "8": number;
+                "9": number;
+                "10": number;
+                "11": number;
+                "12": number;
+                "13": number;
+                "14": number;
+                "15": number;
             };
             transition: {
                 slow: number;
@@ -309,22 +307,22 @@ export declare const Small: import("react").ForwardRefExoticComponent<Omit<Omit<
             };
             data: {
                 branded: {
-                    '1': string;
-                    '2': string;
-                    '3': string;
-                    '4': string;
+                    "1": string;
+                    "2": string;
+                    "3": string;
+                    "4": string;
                 };
                 electric: {
-                    '1': string;
-                    '2': string;
-                    '3': string;
-                    '4': string;
+                    "1": string;
+                    "2": string;
+                    "3": string;
+                    "4": string;
                 };
                 gas: {
-                    '1': string;
-                    '2': string;
-                    '3': string;
-                    '4': string;
+                    "1": string;
+                    "2": string;
+                    "3": string;
+                    "4": string;
                 };
             };
             focus: {
@@ -573,4 +571,4 @@ export declare const Small: import("react").ForwardRefExoticComponent<Omit<Omit<
 } & {
     as?: string | import("react").ComponentType<any> | undefined;
     forwardedAs?: string | import("react").ComponentType<any> | undefined;
-}, import("../../hooks").BreakpointNames>, "ref"> & import("react").RefAttributes<Text>>;
+}, import("../../hooks").BreakpointNames> & object) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Small/Small.js

@@ -1,39 +1,8 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Small = void 0;
-var element_core_1 = require("@ovotech/element-core");
-var styled_native_1 = __importStar(require("../../styled.native"));
-var utils_1 = require("../../utils");
-var StyledSmall = styled_native_1.default.Text(function (_a) {
-    var core = _a.theme.core, smallAndUp = _a.smallAndUp;
-    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-size: ", ";\n    line-height: ", ";\n  "], ["\n    font-size: ", ";\n    line-height: ", ";\n  "])), (0, element_core_1.numToPx)(core.fontSize.small[smallAndUp ? 'large' : 'small']), (0, element_core_1.numToPx)(core.lineHeight.small[smallAndUp ? 'large' : 'small']));
-});
-exports.Small = (0, utils_1.styledComponentWithBreakpoints)(StyledSmall);
-var templateObject_1;
+import { numToPx } from '@ovotech/element-core';
+import styled, { css } from '../../styled.native';
+import { styledComponentWithBreakpoints } from '../../utils';
+const StyledSmall = styled.Text(({ theme: { core }, smallAndUp }) => css `
+    font-size: ${numToPx(core.fontSize.small[smallAndUp ? 'large' : 'small'])};
+    line-height: ${numToPx(core.lineHeight.small[smallAndUp ? 'large' : 'small'])};
+  `);
+export const Small = styledComponentWithBreakpoints(StyledSmall);

package/dist/components/Small/index.js

@@ -1,5 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Small = void 0;
-var Small_1 = require("./Small");
-Object.defineProperty(exports, "Small", { enumerable: true, get: function () { return Small_1.Small; } });
+export { Small } from './Small';

package/dist/components/Spinner/Spinner.js

@@ -1,71 +1,43 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Spinner = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
-var react_native_svg_1 = __importStar(require("react-native-svg"));
-var styled_native_1 = require("../../styled.native");
-var semanticSizes = {
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useEffect, useMemo } from 'react';
+import { View } from 'react-native';
+import Animated, { cancelAnimation, Easing, useAnimatedStyle, useSharedValue, withRepeat, withTiming, } from 'react-native-reanimated';
+import { ThemeContext } from '../../styled.native';
+const semanticSizes = {
     large: 65,
     small: 32,
 };
-// based on values in the Figma `y` point is 3.5 times smaller side length, `viewBox` is 1.25 times larger side length
-var calculateSvgProps = function (size) {
-    return {
-        viewBox: size * 1.25,
-        y: size / 3.5,
-    };
-};
-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 rotation = (0, react_native_reanimated_1.useSharedValue)(0);
-    var animatedStyles = (0, react_native_reanimated_1.useAnimatedStyle)(function () {
-        return {
-            transform: [
-                // needed for correct 3d animation
-                { perspective: 1000 },
-                {
-                    rotateY: "".concat(rotation.value, "deg"),
-                },
-            ],
-        };
-    }, [rotation.value]);
-    (0, react_1.useEffect)(function () {
+export const Spinner = ({ inverted = false, size = 'small', accessibilityLabel = 'Loading', }) => {
+    const { core } = useContext(ThemeContext);
+    const rotation = useSharedValue(0);
+    const rectSize = size in semanticSizes
+        ? semanticSizes[size]
+        : size;
+    const halfRectSize = rectSize / 2;
+    const containerStyle = useMemo(() => ({
+        width: rectSize,
+        height: rectSize,
+    }), [rectSize]);
+    const rectStyles = useMemo(() => ({
+        width: rectSize,
+        height: rectSize,
+        backgroundColor: core.color.brand[inverted ? 'white' : 'ovo'],
+        transform: [{ rotate: '-15deg' }],
+    }), [rectSize]);
+    const animatedStyles = useAnimatedStyle(() => ({
+        transform: [{ rotateY: `${rotation.value}deg` }],
+        transformOrigin: [halfRectSize, halfRectSize, 0],
+    }));
+    useEffect(() => {
+        cancelAnimation(rotation);
         // rotate svg from right to left on 360deg during 2 seconds and repeat that 200 times
-        rotation.value = (0, react_native_reanimated_1.withRepeat)((0, react_native_reanimated_1.withTiming)(-360, {
+        rotation.value = withRepeat(withTiming(-360, {
             duration: 2000,
-            easing: react_native_reanimated_1.Easing.linear,
-        }), 200);
+            easing: Easing.linear,
+        }), 200, // number of repeats, don't want to set infinite cause it might affect performance
+        false);
         // cancel animation if component is unmounted
-        return function () { return (0, react_native_reanimated_1.cancelAnimation)(rotation); };
+        return () => cancelAnimation(rotation);
     }, []);
-    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 (_jsx(View, { style: [containerStyle], accessible: true, accessibilityLabel: accessibilityLabel, children: _jsx(Animated.View, { style: animatedStyles, children: _jsx(View, { style: rectStyles }) }) }));
 };
-exports.Spinner = Spinner;

package/dist/components/Spinner/index.js

@@ -1,5 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Spinner = void 0;
-var Spinner_1 = require("./Spinner");
-Object.defineProperty(exports, "Spinner", { enumerable: true, get: function () { return Spinner_1.Spinner; } });
+export { Spinner } from './Spinner';

package/dist/components/Stack/Stack.js

@@ -1,49 +1,17 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
+import { jsx as _jsx } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import { Children } from 'react';
+import { View } from 'react-native';
+import styled from '../../styled.native';
+import { getValidChildren, responsiveStyle, styledComponentWithBreakpoints, } from '../../utils';
+const Stack = ({ children, spaceBetween, ...rest }) => {
+    const validChildren = getValidChildren(children);
+    return (_jsx(View, { ...rest, children: Children.map(validChildren, (child, index) => index === 0 ? (child) : (_jsx(StackItem, { spaceBetween: spaceBetween, children: child }))) }));
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Stack = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var element_core_1 = require("@ovotech/element-core");
-var react_1 = require("react");
-var react_native_1 = require("react-native");
-var styled_native_1 = __importDefault(require("../../styled.native"));
-var utils_1 = require("../../utils");
-var Stack = function (_a) {
-    var children = _a.children, spaceBetween = _a.spaceBetween, rest = __rest(_a, ["children", "spaceBetween"]);
-    var validChildren = (0, utils_1.getValidChildren)(children);
-    return ((0, jsx_runtime_1.jsx)(react_native_1.View, __assign({}, rest, { children: react_1.Children.map(validChildren, function (child, index) {
-            return index === 0 ? (child) : ((0, jsx_runtime_1.jsx)(StackItem, { spaceBetween: spaceBetween, children: child }));
-        }) })));
-};
-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 breakpoints = { smallAndUp: smallAndUp, mediumAndUp: mediumAndUp, largeAndUp: largeAndUp };
-    return (0, utils_1.responsiveStyle)('margin-top', spaceBetween, breakpoints, formatter);
+const StyledStackItem = styled.View(({ theme: { core: { space }, }, spaceBetween, smallAndUp, mediumAndUp, largeAndUp, }) => {
+    const formatter = (spaceKey) => numToPx(space[spaceKey]);
+    const breakpoints = { smallAndUp, mediumAndUp, largeAndUp };
+    return responsiveStyle('margin-top', spaceBetween, breakpoints, formatter);
 });
-var StackItem = (0, utils_1.styledComponentWithBreakpoints)(StyledStackItem);
+const StackItem = styledComponentWithBreakpoints(StyledStackItem);
+export { Stack };

package/dist/components/Stack/index.js

@@ -1,5 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Stack = void 0;
-var Stack_1 = require("./Stack");
-Object.defineProperty(exports, "Stack", { enumerable: true, get: function () { return Stack_1.Stack; } });
+export { Stack } from './Stack';