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

package/dist/components/ErrorText/ErrorText.d.ts

@@ -57,10 +57,6 @@ declare const ErrorText: import("react").ForwardRefExoticComponent<Omit<Omit<{
                 "60": string;
                 "70": string;
             };
-            outline: {
-                outer: string;
-                inner: string;
-            };
             alert: {
                 success: string;
                 successTint: string;
@@ -97,6 +93,10 @@ declare const ErrorText: import("react").ForwardRefExoticComponent<Omit<Omit<{
                     onBrandVariant: string;
                 };
             };
+            outline: {
+                outer: string;
+                inner: string;
+            };
             surface: {
                 surface: string;
                 bright: string;

package/dist/components/Grid/Col.d.ts

@@ -56,10 +56,6 @@ declare const Col: import("react").ForwardRefExoticComponent<Omit<Omit<{
                 "60": string;
                 "70": string;
             };
-            outline: {
-                outer: string;
-                inner: string;
-            };
             alert: {
                 success: string;
                 successTint: string;
@@ -96,6 +92,10 @@ declare const Col: import("react").ForwardRefExoticComponent<Omit<Omit<{
                     onBrandVariant: string;
                 };
             };
+            outline: {
+                outer: string;
+                inner: string;
+            };
             surface: {
                 surface: string;
                 bright: string;

package/dist/components/Grid/Row.d.ts

@@ -52,10 +52,6 @@ declare const StyledRow: import("styled-components").StyledComponent<typeof impo
             "60": string;
             "70": string;
         };
-        outline: {
-            outer: string;
-            inner: string;
-        };
         alert: {
             success: string;
             successTint: string;
@@ -92,6 +88,10 @@ declare const StyledRow: import("styled-components").StyledComponent<typeof impo
                 onBrandVariant: string;
             };
         };
+        outline: {
+            outer: string;
+            inner: string;
+        };
         surface: {
             surface: string;
             bright: string;

package/dist/components/HintText/HintText.d.ts

@@ -57,10 +57,6 @@ declare const HintText: import("react").ForwardRefExoticComponent<Omit<Omit<{
                 "60": string;
                 "70": string;
             };
-            outline: {
-                outer: string;
-                inner: string;
-            };
             alert: {
                 success: string;
                 successTint: string;
@@ -97,6 +93,10 @@ declare const HintText: import("react").ForwardRefExoticComponent<Omit<Omit<{
                     onBrandVariant: string;
                 };
             };
+            outline: {
+                outer: string;
+                inner: string;
+            };
             surface: {
                 surface: string;
                 bright: string;

package/dist/components/LabelText/LabelText.d.ts

@@ -57,10 +57,6 @@ declare const LabelText: import("react").ForwardRefExoticComponent<Omit<Omit<{
                 "60": string;
                 "70": string;
             };
-            outline: {
-                outer: string;
-                inner: string;
-            };
             alert: {
                 success: string;
                 successTint: string;
@@ -97,6 +93,10 @@ declare const LabelText: import("react").ForwardRefExoticComponent<Omit<Omit<{
                     onBrandVariant: string;
                 };
             };
+            outline: {
+                outer: string;
+                inner: string;
+            };
             surface: {
                 surface: string;
                 bright: string;

package/dist/components/LineThrough/LineThrough.d.ts

@@ -50,10 +50,6 @@ export declare const LineThrough: import("styled-components").StyledComponent<ty
             "60": string;
             "70": string;
         };
-        outline: {
-            outer: string;
-            inner: string;
-        };
         alert: {
             success: string;
             successTint: string;
@@ -90,6 +86,10 @@ export declare const LineThrough: import("styled-components").StyledComponent<ty
                 onBrandVariant: string;
             };
         };
+        outline: {
+            outer: string;
+            inner: string;
+        };
         surface: {
             surface: string;
             bright: string;

package/dist/components/List/styled.d.ts

@@ -53,10 +53,6 @@ export declare const SquareBullet: import("styled-components").StyledComponent<t
             "60": string;
             "70": string;
         };
-        outline: {
-            outer: string;
-            inner: string;
-        };
         alert: {
             success: string;
             successTint: string;
@@ -93,6 +89,10 @@ export declare const SquareBullet: import("styled-components").StyledComponent<t
                 onBrandVariant: string;
             };
         };
+        outline: {
+            outer: string;
+            inner: string;
+        };
         surface: {
             surface: string;
             bright: string;
@@ -622,10 +622,6 @@ export declare const TextBullet: import("styled-components").StyledComponent<typ
             "60": string;
             "70": string;
         };
-        outline: {
-            outer: string;
-            inner: string;
-        };
         alert: {
             success: string;
             successTint: string;
@@ -662,6 +658,10 @@ export declare const TextBullet: import("styled-components").StyledComponent<typ
                 onBrandVariant: string;
             };
         };
+        outline: {
+            outer: string;
+            inner: string;
+        };
         surface: {
             surface: string;
             bright: string;
@@ -1189,10 +1189,6 @@ export declare const FlexRow: import("styled-components").StyledComponent<typeof
             "60": string;
             "70": string;
         };
-        outline: {
-            outer: string;
-            inner: string;
-        };
         alert: {
             success: string;
             successTint: string;
@@ -1229,6 +1225,10 @@ export declare const FlexRow: import("styled-components").StyledComponent<typeof
                 onBrandVariant: string;
             };
         };
+        outline: {
+            outer: string;
+            inner: string;
+        };
         surface: {
             surface: string;
             bright: string;
@@ -1756,10 +1756,6 @@ export declare const LiContent: import("styled-components").StyledComponent<type
             "60": string;
             "70": string;
         };
-        outline: {
-            outer: string;
-            inner: string;
-        };
         alert: {
             success: string;
             successTint: string;
@@ -1796,6 +1792,10 @@ export declare const LiContent: import("styled-components").StyledComponent<type
                 onBrandVariant: string;
             };
         };
+        outline: {
+            outer: string;
+            inner: string;
+        };
         surface: {
             surface: string;
             bright: string;

package/dist/components/Margin/Margin.d.ts

@@ -63,10 +63,6 @@ declare const StyledMargin: import("styled-components").StyledComponent<typeof i
             "60": string;
             "70": string;
         };
-        outline: {
-            outer: string;
-            inner: string;
-        };
         alert: {
             success: string;
             successTint: string;
@@ -103,6 +99,10 @@ declare const StyledMargin: import("styled-components").StyledComponent<typeof i
                 onBrandVariant: string;
             };
         };
+        outline: {
+            outer: string;
+            inner: string;
+        };
         surface: {
             surface: string;
             bright: string;

package/dist/components/NavHeader/NavHeader.styles.d.ts

@@ -51,10 +51,6 @@ export declare const NavWrapper: import("styled-components").StyledComponent<imp
             "60": string;
             "70": string;
         };
-        outline: {
-            outer: string;
-            inner: string;
-        };
         alert: {
             success: string;
             successTint: string;
@@ -91,6 +87,10 @@ export declare const NavWrapper: import("styled-components").StyledComponent<imp
                 onBrandVariant: string;
             };
         };
+        outline: {
+            outer: string;
+            inner: string;
+        };
         surface: {
             surface: string;
             bright: string;
@@ -620,10 +620,6 @@ export declare const NavContainer: import("styled-components").StyledComponent<t
             "60": string;
             "70": string;
         };
-        outline: {
-            outer: string;
-            inner: string;
-        };
         alert: {
             success: string;
             successTint: string;
@@ -660,6 +656,10 @@ export declare const NavContainer: import("styled-components").StyledComponent<t
                 onBrandVariant: string;
             };
         };
+        outline: {
+            outer: string;
+            inner: string;
+        };
         surface: {
             surface: string;
             bright: string;
@@ -1190,10 +1190,6 @@ export declare const ExpandedTitle: import("styled-components").StyledComponent<
             "60": string;
             "70": string;
         };
-        outline: {
-            outer: string;
-            inner: string;
-        };
         alert: {
             success: string;
             successTint: string;
@@ -1230,6 +1226,10 @@ export declare const ExpandedTitle: import("styled-components").StyledComponent<
                 onBrandVariant: string;
             };
         };
+        outline: {
+            outer: string;
+            inner: string;
+        };
         surface: {
             surface: string;
             bright: string;
@@ -1761,10 +1761,6 @@ export declare const CollapsedTitleWrapper: import("styled-components").StyledCo
             "60": string;
             "70": string;
         };
-        outline: {
-            outer: string;
-            inner: string;
-        };
         alert: {
             success: string;
             successTint: string;
@@ -1801,6 +1797,10 @@ export declare const CollapsedTitleWrapper: import("styled-components").StyledCo
                 onBrandVariant: string;
             };
         };
+        outline: {
+            outer: string;
+            inner: string;
+        };
         surface: {
             surface: string;
             bright: string;
@@ -2328,10 +2328,6 @@ export declare const CollapsedTitle: import("styled-components").StyledComponent
             "60": string;
             "70": string;
         };
-        outline: {
-            outer: string;
-            inner: string;
-        };
         alert: {
             success: string;
             successTint: string;
@@ -2368,6 +2364,10 @@ export declare const CollapsedTitle: import("styled-components").StyledComponent
                 onBrandVariant: string;
             };
         };
+        outline: {
+            outer: string;
+            inner: string;
+        };
         surface: {
             surface: string;
             bright: string;
@@ -2895,10 +2895,6 @@ export declare const HeaderGap: import("styled-components").StyledComponent<type
             "60": string;
             "70": string;
         };
-        outline: {
-            outer: string;
-            inner: string;
-        };
         alert: {
             success: string;
             successTint: string;
@@ -2935,6 +2931,10 @@ export declare const HeaderGap: import("styled-components").StyledComponent<type
                 onBrandVariant: string;
             };
         };
+        outline: {
+            outer: string;
+            inner: string;
+        };
         surface: {
             surface: string;
             bright: string;
@@ -3464,10 +3464,6 @@ export declare const BackActionWrapper: import("styled-components").StyledCompon
             "60": string;
             "70": string;
         };
-        outline: {
-            outer: string;
-            inner: string;
-        };
         alert: {
             success: string;
             successTint: string;
@@ -3504,6 +3500,10 @@ export declare const BackActionWrapper: import("styled-components").StyledCompon
                 onBrandVariant: string;
             };
         };
+        outline: {
+            outer: string;
+            inner: string;
+        };
         surface: {
             surface: string;
             bright: string;

package/dist/components/Notification/Notification.d.ts

@@ -54,10 +54,6 @@ export declare const NotificationContentBox: import("styled-components").StyledC
             "60": string;
             "70": string;
         };
-        outline: {
-            outer: string;
-            inner: string;
-        };
         alert: {
             success: string;
             successTint: string;
@@ -94,6 +90,10 @@ export declare const NotificationContentBox: import("styled-components").StyledC
                 onBrandVariant: string;
             };
         };
+        outline: {
+            outer: string;
+            inner: string;
+        };
         surface: {
             surface: string;
             bright: string;
@@ -621,10 +621,6 @@ export declare const NotificationTitleBox: import("styled-components").StyledCom
             "60": string;
             "70": string;
         };
-        outline: {
-            outer: string;
-            inner: string;
-        };
         alert: {
             success: string;
             successTint: string;
@@ -661,6 +657,10 @@ export declare const NotificationTitleBox: import("styled-components").StyledCom
                 onBrandVariant: string;
             };
         };
+        outline: {
+            outer: string;
+            inner: string;
+        };
         surface: {
             surface: string;
             bright: string;

package/dist/components/PasswordInput/PasswordInput.styled.d.ts

@@ -51,10 +51,6 @@ export declare const StyledPressable: import("styled-components").StyledComponen
             "60": string;
             "70": string;
         };
-        outline: {
-            outer: string;
-            inner: string;
-        };
         alert: {
             success: string;
             successTint: string;
@@ -91,6 +87,10 @@ export declare const StyledPressable: import("styled-components").StyledComponen
                 onBrandVariant: string;
             };
         };
+        outline: {
+            outer: string;
+            inner: string;
+        };
         surface: {
             surface: string;
             bright: string;

package/dist/components/SelectField/Select.d.ts

@@ -63,10 +63,6 @@ declare const SelectOption: import("styled-components").StyledComponent<typeof i
             "60": string;
             "70": string;
         };
-        outline: {
-            outer: string;
-            inner: string;
-        };
         alert: {
             success: string;
             successTint: string;
@@ -103,6 +99,10 @@ declare const SelectOption: import("styled-components").StyledComponent<typeof i
                 onBrandVariant: string;
             };
         };
+        outline: {
+            outer: string;
+            inner: string;
+        };
         surface: {
             surface: string;
             bright: string;

package/dist/components/Stack/Stack.d.ts

@@ -1,9 +1,8 @@
 import { SpaceKey } from '@ovotech/element-core';
-import { ReactNode } from 'react';
-import { ViewProps } from 'react-native';
-type Props = ViewProps & {
+import { ComponentProps } from 'react';
+import { View } from 'react-native';
+interface Props extends ComponentProps<typeof View> {
     spaceBetween: SpaceKey | SpaceKey[];
-    children: ReactNode;
-};
+}
 declare const Stack: ({ children, spaceBetween, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export { Stack };

package/dist/components/Stack/Stack.js

@@ -28,24 +28,23 @@ 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 styled_components_1 = __importDefault(require("styled-components"));
+var hooks_1 = require("../../hooks");
+var styled_native_1 = require("../../styled.native");
 var utils_1 = require("../../utils");
+var StyledStack = (0, styled_components_1.default)(react_native_1.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 = (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 theme = _a.theme, spaceBetween = _a.spaceBetween, smallAndUp = _a.smallAndUp, mediumAndUp = _a.mediumAndUp, largeAndUp = _a.largeAndUp;
+    var breakpoints = (0, hooks_1.useBreakpoint)();
+    var theme = (0, styled_native_1.useTheme)();
     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);
-});
-var StackItem = (0, utils_1.styledComponentWithBreakpoints)(StyledStackItem);
+    var gapStyle = (0, utils_1.responsiveStyle)('gap', spaceBetween, breakpoints, formatter);
+    return ((0, jsx_runtime_1.jsx)(StyledStack, __assign({ gapStyle: gapStyle }, rest, { children: children })));
+};
+exports.Stack = Stack;

package/dist/components/Strong/Strong.d.ts

@@ -50,10 +50,6 @@ export declare const Strong: import("styled-components").StyledComponent<typeof
             "60": string;
             "70": string;
         };
-        outline: {
-            outer: string;
-            inner: string;
-        };
         alert: {
             success: string;
             successTint: string;
@@ -90,6 +86,10 @@ export declare const Strong: import("styled-components").StyledComponent<typeof
                 onBrandVariant: string;
             };
         };
+        outline: {
+            outer: string;
+            inner: string;
+        };
         surface: {
             surface: string;
             bright: string;

package/dist/components/SubLabelText/SubLabelText.d.ts

@@ -57,10 +57,6 @@ declare const SubLabelText: import("react").ForwardRefExoticComponent<Omit<Omit<
                 "60": string;
                 "70": string;
             };
-            outline: {
-                outer: string;
-                inner: string;
-            };
             alert: {
                 success: string;
                 successTint: string;
@@ -97,6 +93,10 @@ declare const SubLabelText: import("react").ForwardRefExoticComponent<Omit<Omit<
                     onBrandVariant: string;
                 };
             };
+            outline: {
+                outer: string;
+                inner: string;
+            };
             surface: {
                 surface: string;
                 bright: string;

package/dist/components/Toggle/styles.d.ts

@@ -52,10 +52,6 @@ export declare const StyledWrapper: import("styled-components").StyledComponent<
             "60": string;
             "70": string;
         };
-        outline: {
-            outer: string;
-            inner: string;
-        };
         alert: {
             success: string;
             successTint: string;
@@ -92,6 +88,10 @@ export declare const StyledWrapper: import("styled-components").StyledComponent<
                 onBrandVariant: string;
             };
         };
+        outline: {
+            outer: string;
+            inner: string;
+        };
         surface: {
             surface: string;
             bright: string;
@@ -623,10 +623,6 @@ export declare const StyledToggleInputWrapper: import("styled-components").Style
             "60": string;
             "70": string;
         };
-        outline: {
-            outer: string;
-            inner: string;
-        };
         alert: {
             success: string;
             successTint: string;
@@ -663,6 +659,10 @@ export declare const StyledToggleInputWrapper: import("styled-components").Style
                 onBrandVariant: string;
             };
         };
+        outline: {
+            outer: string;
+            inner: string;
+        };
         surface: {
             surface: string;
             bright: string;
@@ -1192,10 +1192,6 @@ export declare const StyledToggleInput: import("styled-components").StyledCompon
             "60": string;
             "70": string;
         };
-        outline: {
-            outer: string;
-            inner: string;
-        };
         alert: {
             success: string;
             successTint: string;
@@ -1232,6 +1228,10 @@ export declare const StyledToggleInput: import("styled-components").StyledCompon
                 onBrandVariant: string;
             };
         };
+        outline: {
+            outer: string;
+            inner: string;
+        };
         surface: {
             surface: string;
             bright: string;
@@ -1761,10 +1761,6 @@ export declare const StyledToggleDot: import("styled-components").StyledComponen
             "60": string;
             "70": string;
         };
-        outline: {
-            outer: string;
-            inner: string;
-        };
         alert: {
             success: string;
             successTint: string;
@@ -1801,6 +1797,10 @@ export declare const StyledToggleDot: import("styled-components").StyledComponen
                 onBrandVariant: string;
             };
         };
+        outline: {
+            outer: string;
+            inner: string;
+        };
         surface: {
             surface: string;
             bright: string;