@ovotech/element-native 5.1.1-canary-4dfe40e-361 → 5.1.1

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

@@ -57,6 +57,10 @@ declare const ErrorText: import("react").ForwardRefExoticComponent<Omit<Omit<{
                 "60": string;
                 "70": string;
             };
+            outline: {
+                outer: string;
+                inner: string;
+            };
             alert: {
                 success: string;
                 successTint: string;
@@ -93,10 +97,6 @@ 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,6 +56,10 @@ declare const Col: import("react").ForwardRefExoticComponent<Omit<Omit<{
                 "60": string;
                 "70": string;
             };
+            outline: {
+                outer: string;
+                inner: string;
+            };
             alert: {
                 success: string;
                 successTint: string;
@@ -92,10 +96,6 @@ 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,6 +52,10 @@ declare const StyledRow: import("styled-components").StyledComponent<typeof impo
             "60": string;
             "70": string;
         };
+        outline: {
+            outer: string;
+            inner: string;
+        };
         alert: {
             success: string;
             successTint: string;
@@ -88,10 +92,6 @@ 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,6 +57,10 @@ declare const HintText: import("react").ForwardRefExoticComponent<Omit<Omit<{
                 "60": string;
                 "70": string;
             };
+            outline: {
+                outer: string;
+                inner: string;
+            };
             alert: {
                 success: string;
                 successTint: string;
@@ -93,10 +97,6 @@ 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,6 +57,10 @@ declare const LabelText: import("react").ForwardRefExoticComponent<Omit<Omit<{
                 "60": string;
                 "70": string;
             };
+            outline: {
+                outer: string;
+                inner: string;
+            };
             alert: {
                 success: string;
                 successTint: string;
@@ -93,10 +97,6 @@ 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,6 +50,10 @@ export declare const LineThrough: import("styled-components").StyledComponent<ty
             "60": string;
             "70": string;
         };
+        outline: {
+            outer: string;
+            inner: string;
+        };
         alert: {
             success: string;
             successTint: string;
@@ -86,10 +90,6 @@ 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,6 +53,10 @@ export declare const SquareBullet: import("styled-components").StyledComponent<t
             "60": string;
             "70": string;
         };
+        outline: {
+            outer: string;
+            inner: string;
+        };
         alert: {
             success: string;
             successTint: string;
@@ -89,10 +93,6 @@ export declare const SquareBullet: import("styled-components").StyledComponent<t
                 onBrandVariant: string;
             };
         };
-        outline: {
-            outer: string;
-            inner: string;
-        };
         surface: {
             surface: string;
             bright: string;
@@ -622,6 +622,10 @@ export declare const TextBullet: import("styled-components").StyledComponent<typ
             "60": string;
             "70": string;
         };
+        outline: {
+            outer: string;
+            inner: string;
+        };
         alert: {
             success: string;
             successTint: string;
@@ -658,10 +662,6 @@ export declare const TextBullet: import("styled-components").StyledComponent<typ
                 onBrandVariant: string;
             };
         };
-        outline: {
-            outer: string;
-            inner: string;
-        };
         surface: {
             surface: string;
             bright: string;
@@ -1189,6 +1189,10 @@ export declare const FlexRow: import("styled-components").StyledComponent<typeof
             "60": string;
             "70": string;
         };
+        outline: {
+            outer: string;
+            inner: string;
+        };
         alert: {
             success: string;
             successTint: string;
@@ -1225,10 +1229,6 @@ export declare const FlexRow: import("styled-components").StyledComponent<typeof
                 onBrandVariant: string;
             };
         };
-        outline: {
-            outer: string;
-            inner: string;
-        };
         surface: {
             surface: string;
             bright: string;
@@ -1756,6 +1756,10 @@ export declare const LiContent: import("styled-components").StyledComponent<type
             "60": string;
             "70": string;
         };
+        outline: {
+            outer: string;
+            inner: string;
+        };
         alert: {
             success: string;
             successTint: string;
@@ -1792,10 +1796,6 @@ 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,6 +63,10 @@ declare const StyledMargin: import("styled-components").StyledComponent<typeof i
             "60": string;
             "70": string;
         };
+        outline: {
+            outer: string;
+            inner: string;
+        };
         alert: {
             success: string;
             successTint: string;
@@ -99,10 +103,6 @@ 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,6 +51,10 @@ export declare const NavWrapper: import("styled-components").StyledComponent<imp
             "60": string;
             "70": string;
         };
+        outline: {
+            outer: string;
+            inner: string;
+        };
         alert: {
             success: string;
             successTint: string;
@@ -87,10 +91,6 @@ export declare const NavWrapper: import("styled-components").StyledComponent<imp
                 onBrandVariant: string;
             };
         };
-        outline: {
-            outer: string;
-            inner: string;
-        };
         surface: {
             surface: string;
             bright: string;
@@ -620,6 +620,10 @@ export declare const NavContainer: import("styled-components").StyledComponent<t
             "60": string;
             "70": string;
         };
+        outline: {
+            outer: string;
+            inner: string;
+        };
         alert: {
             success: string;
             successTint: string;
@@ -656,10 +660,6 @@ export declare const NavContainer: import("styled-components").StyledComponent<t
                 onBrandVariant: string;
             };
         };
-        outline: {
-            outer: string;
-            inner: string;
-        };
         surface: {
             surface: string;
             bright: string;
@@ -1190,6 +1190,10 @@ export declare const ExpandedTitle: import("styled-components").StyledComponent<
             "60": string;
             "70": string;
         };
+        outline: {
+            outer: string;
+            inner: string;
+        };
         alert: {
             success: string;
             successTint: string;
@@ -1226,10 +1230,6 @@ export declare const ExpandedTitle: import("styled-components").StyledComponent<
                 onBrandVariant: string;
             };
         };
-        outline: {
-            outer: string;
-            inner: string;
-        };
         surface: {
             surface: string;
             bright: string;
@@ -1761,6 +1761,10 @@ export declare const CollapsedTitleWrapper: import("styled-components").StyledCo
             "60": string;
             "70": string;
         };
+        outline: {
+            outer: string;
+            inner: string;
+        };
         alert: {
             success: string;
             successTint: string;
@@ -1797,10 +1801,6 @@ export declare const CollapsedTitleWrapper: import("styled-components").StyledCo
                 onBrandVariant: string;
             };
         };
-        outline: {
-            outer: string;
-            inner: string;
-        };
         surface: {
             surface: string;
             bright: string;
@@ -2328,6 +2328,10 @@ export declare const CollapsedTitle: import("styled-components").StyledComponent
             "60": string;
             "70": string;
         };
+        outline: {
+            outer: string;
+            inner: string;
+        };
         alert: {
             success: string;
             successTint: string;
@@ -2364,10 +2368,6 @@ export declare const CollapsedTitle: import("styled-components").StyledComponent
                 onBrandVariant: string;
             };
         };
-        outline: {
-            outer: string;
-            inner: string;
-        };
         surface: {
             surface: string;
             bright: string;
@@ -2895,6 +2895,10 @@ export declare const HeaderGap: import("styled-components").StyledComponent<type
             "60": string;
             "70": string;
         };
+        outline: {
+            outer: string;
+            inner: string;
+        };
         alert: {
             success: string;
             successTint: string;
@@ -2931,10 +2935,6 @@ export declare const HeaderGap: import("styled-components").StyledComponent<type
                 onBrandVariant: string;
             };
         };
-        outline: {
-            outer: string;
-            inner: string;
-        };
         surface: {
             surface: string;
             bright: string;
@@ -3464,6 +3464,10 @@ export declare const BackActionWrapper: import("styled-components").StyledCompon
             "60": string;
             "70": string;
         };
+        outline: {
+            outer: string;
+            inner: string;
+        };
         alert: {
             success: string;
             successTint: string;
@@ -3500,10 +3504,6 @@ 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,6 +54,10 @@ export declare const NotificationContentBox: import("styled-components").StyledC
             "60": string;
             "70": string;
         };
+        outline: {
+            outer: string;
+            inner: string;
+        };
         alert: {
             success: string;
             successTint: string;
@@ -90,10 +94,6 @@ export declare const NotificationContentBox: import("styled-components").StyledC
                 onBrandVariant: string;
             };
         };
-        outline: {
-            outer: string;
-            inner: string;
-        };
         surface: {
             surface: string;
             bright: string;
@@ -621,6 +621,10 @@ export declare const NotificationTitleBox: import("styled-components").StyledCom
             "60": string;
             "70": string;
         };
+        outline: {
+            outer: string;
+            inner: string;
+        };
         alert: {
             success: string;
             successTint: string;
@@ -657,10 +661,6 @@ 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,6 +51,10 @@ export declare const StyledPressable: import("styled-components").StyledComponen
             "60": string;
             "70": string;
         };
+        outline: {
+            outer: string;
+            inner: string;
+        };
         alert: {
             success: string;
             successTint: string;
@@ -87,10 +91,6 @@ 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,6 +63,10 @@ declare const SelectOption: import("styled-components").StyledComponent<typeof i
             "60": string;
             "70": string;
         };
+        outline: {
+            outer: string;
+            inner: string;
+        };
         alert: {
             success: string;
             successTint: string;
@@ -99,10 +103,6 @@ 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,8 +1,9 @@
 import { SpaceKey } from '@ovotech/element-core';
-import { ComponentProps } from 'react';
-import { View } from 'react-native';
-interface Props extends ComponentProps<typeof View> {
+import { ReactNode } from 'react';
+import { ViewProps } from 'react-native';
+type Props = ViewProps & {
     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,23 +28,24 @@ 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_components_1 = __importDefault(require("styled-components"));
-var hooks_1 = require("../../hooks");
-var styled_native_1 = require("../../styled.native");
+var styled_native_1 = __importDefault(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 breakpoints = (0, hooks_1.useBreakpoint)();
-    var theme = (0, styled_native_1.useTheme)();
+    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 formatter = function (spaceKey) {
         return (0, element_core_1.numToPx)(theme.space[String(spaceKey * 100)]);
     };
-    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;
+    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);

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

@@ -50,6 +50,10 @@ export declare const Strong: import("styled-components").StyledComponent<typeof
             "60": string;
             "70": string;
         };
+        outline: {
+            outer: string;
+            inner: string;
+        };
         alert: {
             success: string;
             successTint: string;
@@ -86,10 +90,6 @@ 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,6 +57,10 @@ declare const SubLabelText: import("react").ForwardRefExoticComponent<Omit<Omit<
                 "60": string;
                 "70": string;
             };
+            outline: {
+                outer: string;
+                inner: string;
+            };
             alert: {
                 success: string;
                 successTint: string;
@@ -93,10 +97,6 @@ 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,6 +52,10 @@ export declare const StyledWrapper: import("styled-components").StyledComponent<
             "60": string;
             "70": string;
         };
+        outline: {
+            outer: string;
+            inner: string;
+        };
         alert: {
             success: string;
             successTint: string;
@@ -88,10 +92,6 @@ export declare const StyledWrapper: import("styled-components").StyledComponent<
                 onBrandVariant: string;
             };
         };
-        outline: {
-            outer: string;
-            inner: string;
-        };
         surface: {
             surface: string;
             bright: string;
@@ -623,6 +623,10 @@ export declare const StyledToggleInputWrapper: import("styled-components").Style
             "60": string;
             "70": string;
         };
+        outline: {
+            outer: string;
+            inner: string;
+        };
         alert: {
             success: string;
             successTint: string;
@@ -659,10 +663,6 @@ export declare const StyledToggleInputWrapper: import("styled-components").Style
                 onBrandVariant: string;
             };
         };
-        outline: {
-            outer: string;
-            inner: string;
-        };
         surface: {
             surface: string;
             bright: string;
@@ -1192,6 +1192,10 @@ export declare const StyledToggleInput: import("styled-components").StyledCompon
             "60": string;
             "70": string;
         };
+        outline: {
+            outer: string;
+            inner: string;
+        };
         alert: {
             success: string;
             successTint: string;
@@ -1228,10 +1232,6 @@ export declare const StyledToggleInput: import("styled-components").StyledCompon
                 onBrandVariant: string;
             };
         };
-        outline: {
-            outer: string;
-            inner: string;
-        };
         surface: {
             surface: string;
             bright: string;
@@ -1761,6 +1761,10 @@ export declare const StyledToggleDot: import("styled-components").StyledComponen
             "60": string;
             "70": string;
         };
+        outline: {
+            outer: string;
+            inner: string;
+        };
         alert: {
             success: string;
             successTint: string;
@@ -1797,10 +1801,6 @@ export declare const StyledToggleDot: import("styled-components").StyledComponen
                 onBrandVariant: string;
             };
         };
-        outline: {
-            outer: string;
-            inner: string;
-        };
         surface: {
             surface: string;
             bright: string;