@ovotech/element-native 5.1.1 → 5.2.0-canary-9460c0f-363

package/dist/components/index.d.ts

@@ -2,10 +2,9 @@ export * from './Accordion';
 export * from './ActionCard';
 export * from './ActionList';
 export * from './Badge';
+export * from './Button';
 export * from './Card';
 export * from './Checkbox';
-export * from './Button';
-export * from './Link';
 export * from './CurrencyField';
 export * from './CurrencyInput';
 export * from './DataTable';
@@ -21,6 +20,7 @@ export * from './Grid';
 export * from './Heading';
 export * from './Icon';
 export * from './LineThrough';
+export * from './Link';
 export * from './List';
 export * from './Margin';
 export * from './NavHeader';
@@ -32,22 +32,22 @@ export * from './PasswordField';
 export * from './PasswordInput';
 export * from './PhoneField';
 export * from './PhoneInput';
+export * from './Pictogram';
 export * from './Radio';
+export * from './RadioCard';
 export * from './SegmentedControls';
 export * from './SelectField';
-export * from './SkeletonCircle';
 export * from './SkeletonButton';
+export * from './SkeletonCircle';
 export * from './SkeletonHeading';
 export * from './SkeletonText';
 export * from './Spinner';
 export * from './Stack';
 export * from './Strong';
 export * from './Tabs';
-export * from './TextareaField';
-export * from './TextareaInput';
 export * from './TextField';
 export * from './TextInput';
-export * from './Toggle';
+export * from './TextareaField';
+export * from './TextareaInput';
 export * from './Toast';
-export * from './RadioCard';
-export * from './Pictogram';
+export * from './Toggle';

package/dist/components/index.js

@@ -18,10 +18,9 @@ __exportStar(require("./Accordion"), exports);
 __exportStar(require("./ActionCard"), exports);
 __exportStar(require("./ActionList"), exports);
 __exportStar(require("./Badge"), exports);
+__exportStar(require("./Button"), exports);
 __exportStar(require("./Card"), exports);
 __exportStar(require("./Checkbox"), exports);
-__exportStar(require("./Button"), exports);
-__exportStar(require("./Link"), exports);
 __exportStar(require("./CurrencyField"), exports);
 __exportStar(require("./CurrencyInput"), exports);
 __exportStar(require("./DataTable"), exports);
@@ -37,6 +36,7 @@ __exportStar(require("./Grid"), exports);
 __exportStar(require("./Heading"), exports);
 __exportStar(require("./Icon"), exports);
 __exportStar(require("./LineThrough"), exports);
+__exportStar(require("./Link"), exports);
 __exportStar(require("./List"), exports);
 __exportStar(require("./Margin"), exports);
 __exportStar(require("./NavHeader"), exports);
@@ -48,22 +48,22 @@ __exportStar(require("./PasswordField"), exports);
 __exportStar(require("./PasswordInput"), exports);
 __exportStar(require("./PhoneField"), exports);
 __exportStar(require("./PhoneInput"), exports);
+__exportStar(require("./Pictogram"), exports);
 __exportStar(require("./Radio"), exports);
+__exportStar(require("./RadioCard"), exports);
 __exportStar(require("./SegmentedControls"), exports);
 __exportStar(require("./SelectField"), exports);
-__exportStar(require("./SkeletonCircle"), exports);
 __exportStar(require("./SkeletonButton"), exports);
+__exportStar(require("./SkeletonCircle"), exports);
 __exportStar(require("./SkeletonHeading"), exports);
 __exportStar(require("./SkeletonText"), exports);
 __exportStar(require("./Spinner"), exports);
 __exportStar(require("./Stack"), exports);
 __exportStar(require("./Strong"), exports);
 __exportStar(require("./Tabs"), exports);
-__exportStar(require("./TextareaField"), exports);
-__exportStar(require("./TextareaInput"), exports);
 __exportStar(require("./TextField"), exports);
 __exportStar(require("./TextInput"), exports);
-__exportStar(require("./Toggle"), exports);
+__exportStar(require("./TextareaField"), exports);
+__exportStar(require("./TextareaInput"), exports);
 __exportStar(require("./Toast"), exports);
-__exportStar(require("./RadioCard"), exports);
-__exportStar(require("./Pictogram"), exports);
+__exportStar(require("./Toggle"), exports);

package/dist/esm/components/Button/Button.js

@@ -24,7 +24,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { numToPx } from '@ovotech/element-core';
 import { forwardRef } from 'react';
 import { useBreakpoint } from '../../hooks';
-import { StyledButtonWrapper, StyledInner, StyledButtonIcon, StyledButtonText, } from './Button.styles';
+import { StyledButtonIcon, StyledButtonText, StyledButtonWrapper, StyledInner, } from './Button.styles';
 var ButtonWrapper = function (_a) {
     var children = _a.children, _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'button' : _b, _c = _a.activeOpacity, activeOpacity = _c === void 0 ? 0.8 : _c, rest = __rest(_a, ["children", "accessibilityRole", "activeOpacity"]);
     return (_jsx(StyledButtonWrapper, __assign({ accessible: true, accessibilityRole: accessibilityRole, activeOpacity: activeOpacity }, rest, { children: children })));

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

@@ -22,24 +22,23 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 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';
+import styled from 'styled-components';
+import { useBreakpoint } from '../../hooks';
+import { useTheme } from '../../styled.native';
+import { responsiveStyle } from '../../utils';
+var StyledStack = styled(View)(function (_a) {
+    var gapStyle = _a.gapStyle;
+    return "\n  ".concat(gapStyle, "\n");
+});
 var Stack = function (_a) {
     var children = _a.children, spaceBetween = _a.spaceBetween, rest = __rest(_a, ["children", "spaceBetween"]);
-    var validChildren = getValidChildren(children);
-    return (_jsx(View, __assign({}, rest, { children: Children.map(validChildren, function (child, index) {
-            return index === 0 ? (child) : (_jsx(StackItem, { spaceBetween: spaceBetween, children: child }));
-        }) })));
-};
-var StyledStackItem = styled.View(function (_a) {
-    var theme = _a.theme, spaceBetween = _a.spaceBetween, smallAndUp = _a.smallAndUp, mediumAndUp = _a.mediumAndUp, largeAndUp = _a.largeAndUp;
+    var breakpoints = useBreakpoint();
+    var theme = useTheme();
     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);
-});
-var StackItem = styledComponentWithBreakpoints(StyledStackItem);
+    var gapStyle = responsiveStyle('gap', spaceBetween, breakpoints, formatter);
+    return (_jsx(StyledStack, __assign({ gapStyle: gapStyle }, rest, { children: children })));
+};
 export { Stack };

package/dist/esm/components/index.js

@@ -2,10 +2,9 @@ export * from './Accordion';
 export * from './ActionCard';
 export * from './ActionList';
 export * from './Badge';
+export * from './Button';
 export * from './Card';
 export * from './Checkbox';
-export * from './Button';
-export * from './Link';
 export * from './CurrencyField';
 export * from './CurrencyInput';
 export * from './DataTable';
@@ -21,6 +20,7 @@ export * from './Grid';
 export * from './Heading';
 export * from './Icon';
 export * from './LineThrough';
+export * from './Link';
 export * from './List';
 export * from './Margin';
 export * from './NavHeader';
@@ -32,22 +32,22 @@ export * from './PasswordField';
 export * from './PasswordInput';
 export * from './PhoneField';
 export * from './PhoneInput';
+export * from './Pictogram';
 export * from './Radio';
+export * from './RadioCard';
 export * from './SegmentedControls';
 export * from './SelectField';
-export * from './SkeletonCircle';
 export * from './SkeletonButton';
+export * from './SkeletonCircle';
 export * from './SkeletonHeading';
 export * from './SkeletonText';
 export * from './Spinner';
 export * from './Stack';
 export * from './Strong';
 export * from './Tabs';
-export * from './TextareaField';
-export * from './TextareaInput';
 export * from './TextField';
 export * from './TextInput';
-export * from './Toggle';
+export * from './TextareaField';
+export * from './TextareaInput';
 export * from './Toast';
-export * from './RadioCard';
-export * from './Pictogram';
+export * from './Toggle';

package/dist/styled.native.d.ts

@@ -54,10 +54,6 @@ declare const styled: styledComponents.ReactNativeStyledInterface<{
             "60": string;
             "70": string;
         };
-        outline: {
-            outer: string;
-            inner: string;
-        };
         alert: {
             success: string;
             successTint: string;
@@ -94,6 +90,10 @@ declare const styled: styledComponents.ReactNativeStyledInterface<{
                 onBrandVariant: string;
             };
         };
+        outline: {
+            outer: string;
+            inner: string;
+        };
         surface: {
             surface: string;
             bright: string;
@@ -620,10 +620,6 @@ declare const styled: styledComponents.ReactNativeStyledInterface<{
             "60": string;
             "70": string;
         };
-        outline: {
-            outer: string;
-            inner: string;
-        };
         alert: {
             success: string;
             successTint: string;
@@ -660,6 +656,10 @@ declare const styled: styledComponents.ReactNativeStyledInterface<{
                 onBrandVariant: string;
             };
         };
+        outline: {
+            outer: string;
+            inner: string;
+        };
         surface: {
             surface: string;
             bright: string;
@@ -1186,10 +1186,6 @@ declare const styled: styledComponents.ReactNativeStyledInterface<{
             "60": string;
             "70": string;
         };
-        outline: {
-            outer: string;
-            inner: string;
-        };
         alert: {
             success: string;
             successTint: string;
@@ -1226,6 +1222,10 @@ declare const styled: styledComponents.ReactNativeStyledInterface<{
                 onBrandVariant: string;
             };
         };
+        outline: {
+            outer: string;
+            inner: string;
+        };
         surface: {
             surface: string;
             bright: string;
@@ -1752,10 +1752,6 @@ declare const styled: styledComponents.ReactNativeStyledInterface<{
             "60": string;
             "70": string;
         };
-        outline: {
-            outer: string;
-            inner: string;
-        };
         alert: {
             success: string;
             successTint: string;
@@ -1792,6 +1788,10 @@ declare const styled: styledComponents.ReactNativeStyledInterface<{
                 onBrandVariant: string;
             };
         };
+        outline: {
+            outer: string;
+            inner: string;
+        };
         surface: {
             surface: string;
             bright: string;
@@ -2318,10 +2318,6 @@ declare const styled: styledComponents.ReactNativeStyledInterface<{
             "60": string;
             "70": string;
         };
-        outline: {
-            outer: string;
-            inner: string;
-        };
         alert: {
             success: string;
             successTint: string;
@@ -2358,6 +2354,10 @@ declare const styled: styledComponents.ReactNativeStyledInterface<{
                 onBrandVariant: string;
             };
         };
+        outline: {
+            outer: string;
+            inner: string;
+        };
         surface: {
             surface: string;
             bright: string;
@@ -2884,10 +2884,6 @@ declare const styled: styledComponents.ReactNativeStyledInterface<{
             "60": string;
             "70": string;
         };
-        outline: {
-            outer: string;
-            inner: string;
-        };
         alert: {
             success: string;
             successTint: string;
@@ -2924,6 +2920,10 @@ declare const styled: styledComponents.ReactNativeStyledInterface<{
                 onBrandVariant: string;
             };
         };
+        outline: {
+            outer: string;
+            inner: string;
+        };
         surface: {
             surface: string;
             bright: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ovotech/element-native",
-  "version": "5.1.1",
+  "version": "5.2.0-canary-9460c0f-363",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
@@ -14,10 +14,10 @@
   },
   "dependencies": {
     "@backpackapp-io/react-native-toast": "^0.10.0",
+    "@ovotech/element-core": "4.1.0-canary-9460c0f-363",
     "deepmerge": "^4.2.2",
     "lodash.groupby": "^4.6.0",
-    "react-native-reanimated-carousel": "^3.5.1",
-    "@ovotech/element-core": "4.0.1"
+    "react-native-reanimated-carousel": "^3.5.1"
   },
   "devDependencies": {
     "@babel/core": "^7.11.5",