@ovotech/element-native 3.2.3 → 3.3.0-canary-8dfcb66-130

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

@@ -5,13 +5,13 @@ declare const ListWrapper: import("react").ForwardRefExoticComponent<Pick<Omit<{
     [x: number]: any;
     [x: symbol]: any;
 } & {
-    theme?: (import("../../theme/theme").Theme & {
+    theme?: {
         core: {
             radius: Record<"small" | "medium" | "large" | "max", string>;
             borderWidth: Record<"small" | "medium" | "large", string>;
             breakpoint: Record<"small" | "medium" | "large", string | number>;
             mediaQuery: Record<"small" | "medium" | "large", string>;
-            space: Record<0 | 2 | 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15, string>;
+            space: Record<0 | 2 | 1 | 3 | 4 | 10 | 5 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
             transition: Record<"medium" | "slow" | "fast", string>;
             opacity: Record<"solid" | "transparent" | "translucent", string | number>;
             color: Record<"neutral" | "red" | "orange" | "yellow" | "green" | "blue", {
@@ -25,16 +25,16 @@ declare const ListWrapper: import("react").ForwardRefExoticComponent<Pick<Omit<{
             }> & {
                 brand: Record<string, string>;
             };
-            fontFamily: Record<"heading" | "body" | "mono" | "bodyBold", {
+            fontFamily: Record<"body" | "mono" | "heading" | "bodyBold", {
                 native: string;
                 web: string;
             }>;
             fontWeight: Record<"bold" | "book" | "black", string | number>;
-            fontSize: Record<"small" | "body" | "label" | "lead" | "heading1" | "heading2" | "heading3" | "heading4", {
+            fontSize: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
                 small: string | number;
                 large: string | number;
             }>;
-            lineHeight: Record<"small" | "body" | "label" | "lead" | "heading1" | "heading2" | "heading3" | "heading4", {
+            lineHeight: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
                 small: string | number;
                 large: string | number;
             }>;
@@ -42,10 +42,10 @@ declare const ListWrapper: import("react").ForwardRefExoticComponent<Pick<Omit<{
         };
         semantic: {
             surface: Record<"base" | "cutout" | "elevated", string>;
-            message: Record<"base" | "link" | "error" | "secondary" | "branded", string>;
+            message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
             border: Record<"graphic" | "differentiated" | "functional", string>;
             focus: Record<"surface" | "outline" | "hover", string>;
-            inverted: Record<"border" | "surface", string> & {
+            inverted: Record<"surface" | "border", string> & {
                 message: Record<"base" | "link" | "secondary" | "branded", string>;
             };
             success: {
@@ -76,7 +76,7 @@ declare const ListWrapper: import("react").ForwardRefExoticComponent<Pick<Omit<{
                 message: string;
                 messageOnEmphasis: string;
             };
-            data: Record<"gas" | "branded" | "electric", Record<2 | 1 | 3 | 4, string>>;
+            data: Record<"branded" | "gas" | "electric", Record<2 | 1 | 3 | 4, string>>;
         };
         component: {
             heading1: {
@@ -232,7 +232,7 @@ declare const ListWrapper: import("react").ForwardRefExoticComponent<Pick<Omit<{
                 };
             };
         };
-    } & object) | undefined;
+    } | undefined;
 } & {
     as?: string | import("react").ComponentType<any> | undefined;
     forwardedAs?: string | import("react").ComponentType<any> | undefined;
@@ -246,13 +246,13 @@ declare const Li: import("react").ForwardRefExoticComponent<Pick<Omit<{
     [x: number]: any;
     [x: symbol]: any;
 } & {
-    theme?: (import("../../theme/theme").Theme & {
+    theme?: {
         core: {
             radius: Record<"small" | "medium" | "large" | "max", string>;
             borderWidth: Record<"small" | "medium" | "large", string>;
             breakpoint: Record<"small" | "medium" | "large", string | number>;
             mediaQuery: Record<"small" | "medium" | "large", string>;
-            space: Record<0 | 2 | 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15, string>;
+            space: Record<0 | 2 | 1 | 3 | 4 | 10 | 5 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
             transition: Record<"medium" | "slow" | "fast", string>;
             opacity: Record<"solid" | "transparent" | "translucent", string | number>;
             color: Record<"neutral" | "red" | "orange" | "yellow" | "green" | "blue", {
@@ -266,16 +266,16 @@ declare const Li: import("react").ForwardRefExoticComponent<Pick<Omit<{
             }> & {
                 brand: Record<string, string>;
             };
-            fontFamily: Record<"heading" | "body" | "mono" | "bodyBold", {
+            fontFamily: Record<"body" | "mono" | "heading" | "bodyBold", {
                 native: string;
                 web: string;
             }>;
             fontWeight: Record<"bold" | "book" | "black", string | number>;
-            fontSize: Record<"small" | "body" | "label" | "lead" | "heading1" | "heading2" | "heading3" | "heading4", {
+            fontSize: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
                 small: string | number;
                 large: string | number;
             }>;
-            lineHeight: Record<"small" | "body" | "label" | "lead" | "heading1" | "heading2" | "heading3" | "heading4", {
+            lineHeight: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
                 small: string | number;
                 large: string | number;
             }>;
@@ -283,10 +283,10 @@ declare const Li: import("react").ForwardRefExoticComponent<Pick<Omit<{
         };
         semantic: {
             surface: Record<"base" | "cutout" | "elevated", string>;
-            message: Record<"base" | "link" | "error" | "secondary" | "branded", string>;
+            message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
             border: Record<"graphic" | "differentiated" | "functional", string>;
             focus: Record<"surface" | "outline" | "hover", string>;
-            inverted: Record<"border" | "surface", string> & {
+            inverted: Record<"surface" | "border", string> & {
                 message: Record<"base" | "link" | "secondary" | "branded", string>;
             };
             success: {
@@ -317,7 +317,7 @@ declare const Li: import("react").ForwardRefExoticComponent<Pick<Omit<{
                 message: string;
                 messageOnEmphasis: string;
             };
-            data: Record<"gas" | "branded" | "electric", Record<2 | 1 | 3 | 4, string>>;
+            data: Record<"branded" | "gas" | "electric", Record<2 | 1 | 3 | 4, string>>;
         };
         component: {
             heading1: {
@@ -473,260 +473,9 @@ declare const Li: import("react").ForwardRefExoticComponent<Pick<Omit<{
                 };
             };
         };
-    } & object) | undefined;
+    } | undefined;
 } & {
     as?: string | import("react").ComponentType<any> | undefined;
     forwardedAs?: string | import("react").ComponentType<any> | undefined;
 }, import("../../hooks").BreakpointNames>, string | number | symbol> & import("react").RefAttributes<Text>>;
-/**
- * @deprecated This component has been deprecated and will be removed in a future release.
- * Please use the DescriptionList component instead.
- * */
-declare const Dl: import("react").ForwardRefExoticComponent<Pick<Omit<{
-    [x: string]: any;
-    [x: number]: any;
-    [x: symbol]: any;
-} & {
-    theme?: (import("../../theme/theme").Theme & {
-        core: {
-            radius: Record<"small" | "medium" | "large" | "max", string>;
-            borderWidth: Record<"small" | "medium" | "large", string>;
-            breakpoint: Record<"small" | "medium" | "large", string | number>;
-            mediaQuery: Record<"small" | "medium" | "large", string>;
-            space: Record<0 | 2 | 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15, string>;
-            transition: Record<"medium" | "slow" | "fast", string>;
-            opacity: Record<"solid" | "transparent" | "translucent", string | number>;
-            color: Record<"neutral" | "red" | "orange" | "yellow" | "green" | "blue", {
-                lightest: string;
-                lighter: string;
-                light: string;
-                base: string;
-                dark: string;
-                darker: string;
-                darkest: string;
-            }> & {
-                brand: Record<string, string>;
-            };
-            fontFamily: Record<"heading" | "body" | "mono" | "bodyBold", {
-                native: string;
-                web: string;
-            }>;
-            fontWeight: Record<"bold" | "book" | "black", string | number>;
-            fontSize: Record<"small" | "body" | "label" | "lead" | "heading1" | "heading2" | "heading3" | "heading4", {
-                small: string | number;
-                large: string | number;
-            }>;
-            lineHeight: Record<"small" | "body" | "label" | "lead" | "heading1" | "heading2" | "heading3" | "heading4", {
-                small: string | number;
-                large: string | number;
-            }>;
-            letterSpacing: Record<"base" | "compressed" | "extraCompressed", number>;
-        };
-        semantic: {
-            surface: Record<"base" | "cutout" | "elevated", string>;
-            message: Record<"base" | "link" | "error" | "secondary" | "branded", string>;
-            border: Record<"graphic" | "differentiated" | "functional", string>;
-            focus: Record<"surface" | "outline" | "hover", string>;
-            inverted: Record<"border" | "surface", string> & {
-                message: Record<"base" | "link" | "secondary" | "branded", string>;
-            };
-            success: {
-                border: string;
-                surface: string;
-                surfaceEmphasis: string;
-                message: string;
-                messageOnEmphasis: string;
-            };
-            warning: {
-                border: string;
-                surface: string;
-                surfaceEmphasis: string;
-                message: string;
-                messageOnEmphasis: string;
-            };
-            error: {
-                border: string;
-                surface: string;
-                surfaceEmphasis: string;
-                message: string;
-                messageOnEmphasis: string;
-            };
-            info: {
-                border: string;
-                surface: string;
-                surfaceEmphasis: string;
-                message: string;
-                messageOnEmphasis: string;
-            };
-            data: Record<"gas" | "branded" | "electric", Record<2 | 1 | 3 | 4, string>>;
-        };
-        component: {
-            heading1: {
-                fontFamily: string;
-                fontWeight: string | number;
-                fontSize: {
-                    small: string | number;
-                    large: string | number;
-                };
-                lineHeight: {
-                    small: string | number;
-                    large: string | number;
-                };
-            };
-            heading2: {
-                fontFamily: string;
-                fontWeight: string | number;
-                fontSize: {
-                    small: string | number;
-                    large: string | number;
-                };
-                lineHeight: {
-                    small: string | number;
-                    large: string | number;
-                };
-            };
-            heading3: {
-                fontFamily: string;
-                fontWeight: string | number;
-                fontSize: {
-                    small: string | number;
-                    large: string | number;
-                };
-                lineHeight: {
-                    small: string | number;
-                    large: string | number;
-                };
-            };
-            heading4: {
-                fontFamily: string;
-                fontWeight: string | number;
-                fontSize: {
-                    small: string | number;
-                    large: string | number;
-                };
-                lineHeight: {
-                    small: string | number;
-                    large: string | number;
-                };
-            };
-            lead: {
-                fontFamily: string;
-                fontWeight: string | number;
-                fontSize: {
-                    small: string | number;
-                    large: string | number;
-                };
-                lineHeight: {
-                    small: string | number;
-                    large: string | number;
-                };
-            };
-            body: {
-                fontFamily: string;
-                fontWeight: string | number;
-                fontSize: {
-                    small: string | number;
-                    large: string | number;
-                };
-                lineHeight: {
-                    small: string | number;
-                    large: string | number;
-                };
-            };
-            small: {
-                fontFamily: string;
-                fontWeight: string | number;
-                fontSize: {
-                    small: string | number;
-                    large: string | number;
-                };
-                lineHeight: {
-                    small: string | number;
-                    large: string | number;
-                };
-            };
-            label: {
-                fontFamily: string;
-                fontWeight: string | number;
-                fontSize: {
-                    small: string | number;
-                    large: string | number;
-                };
-                lineHeight: {
-                    small: string | number;
-                    large: string | number;
-                };
-            };
-            cta: {
-                primary: {
-                    message: string;
-                    surface: string;
-                    messageHover: string;
-                    surfaceHover: string;
-                    messageFocused: string;
-                    surfaceFocused: string;
-                    outlineFocused: string;
-                    backgroundFocused: string;
-                };
-                secondary: {
-                    message: string;
-                    surface: string;
-                    messageHover: string;
-                    surfaceHover: string;
-                    messageFocused: string;
-                    surfaceFocused: string;
-                    outlineFocused: string;
-                    backgroundFocused: string;
-                };
-                destructive: {
-                    message: string;
-                    surface: string;
-                    messageHover: string;
-                    surfaceHover: string;
-                    messageFocused: string;
-                    surfaceFocused: string;
-                    outlineFocused: string;
-                    backgroundFocused: string;
-                };
-            };
-            badge: {
-                variants: {
-                    red: {
-                        foreground: string;
-                        background: string;
-                    };
-                    orange: {
-                        foreground: string;
-                        background: string;
-                    };
-                    yellow: {
-                        foreground: string;
-                        background: string;
-                    };
-                    green: {
-                        foreground: string;
-                        background: string;
-                    };
-                    blue: {
-                        foreground: string;
-                        background: string;
-                    };
-                };
-            };
-        };
-    } & object) | undefined;
-} & {
-    as?: string | import("react").ComponentType<any> | undefined;
-    forwardedAs?: string | import("react").ComponentType<any> | undefined;
-}, import("../../hooks").BreakpointNames>, string | number | symbol> & import("react").RefAttributes<View>>;
-/**
- * @deprecated This component has been deprecated and will be removed in a future release.
- * Please use the DescriptionList component instead.
- * */
-declare const Dt: ({ children, ...rest }: PropsWithChildren<ViewProps>) => JSX.Element;
-/**
- * @deprecated This component has been deprecated and will be removed in a future release.
- * Please use the DescriptionList component instead.
- * */
-declare const Dd: ({ children, ...rest }: PropsWithChildren<ViewProps>) => JSX.Element;
-export { Ul, Ol, Li, Dl, Dt, Dd, ListWrapper };
+export { Ul, Ol, Li, ListWrapper };

package/dist/components/List/List.js

@@ -49,11 +49,10 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ListWrapper = exports.Dd = exports.Dt = exports.Dl = exports.Li = exports.Ol = exports.Ul = void 0;
+exports.ListWrapper = exports.Li = exports.Ol = exports.Ul = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var react_native_1 = require("react-native");
-var hooks_1 = require("../../hooks");
 var styled_native_1 = __importStar(require("../../styled.native"));
 var utils_1 = require("../../utils");
 var Stack_1 = require("../Stack");
@@ -113,56 +112,4 @@ var StyledLi = styled_native_1.default.Text(function (_a) {
 });
 var Li = (0, utils_1.styledComponentWithBreakpoints)(StyledLi);
 exports.Li = Li;
-/**
- * @deprecated This component has been deprecated and will be removed in a future release.
- * Please use the DescriptionList component instead.
- * */
-var Dl = ListWrapper;
-exports.Dl = Dl;
-var StyledDtText = styled_native_1.default.Text(function (_a) {
-    var list = _a.theme.list, smallAndUp = _a.smallAndUp;
-    var fontSize = smallAndUp
-        ? list.listItem.fontSize[1]
-        : list.listItem.fontSize[0];
-    var lineHeight = smallAndUp
-        ? list.listItem.lineHeight[1]
-        : list.listItem.lineHeight[0];
-    return (0, styled_native_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n      flex: 1;\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n      flex: 1;\n    "])), list.descriptionTerm.fontFamily, lineHeight, list.descriptionTerm.color, fontSize);
-});
-var DtText = (0, utils_1.styledComponentWithBreakpoints)(StyledDtText);
-var StyledDtItem = styled_native_1.default.View(function (_a) {
-    var core = _a.theme.core, smallAndUp = _a.smallAndUp;
-    var marginTop = smallAndUp ? core.space[4] : core.space[3];
-    return (0, styled_native_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      margin-top: ", ";\n      margin-bottom: ", ";\n      flex-direction: row;\n    "], ["\n      margin-top: ", ";\n      margin-bottom: ", ";\n      flex-direction: row;\n    "])), marginTop, core.space[1]);
-});
-var DtItem = (0, utils_1.styledComponentWithBreakpoints)(StyledDtItem);
-/**
- * @deprecated This component has been deprecated and will be removed in a future release.
- * Please use the DescriptionList component instead.
- * */
-var Dt = function (_a) {
-    var children = _a.children, rest = __rest(_a, ["children"]);
-    return ((0, jsx_runtime_1.jsx)(DtItem, __assign({}, rest, { children: (0, jsx_runtime_1.jsx)(DtText, { children: children }) })));
-};
-exports.Dt = Dt;
-var StyledDdText = styled_native_1.default.Text(function (_a) {
-    var _b = _a.theme, text = _b.text, list = _b.list, smallAndUp = _a.smallAndUp;
-    var fontSize = smallAndUp
-        ? list.listItem.fontSize[1]
-        : list.listItem.fontSize[0];
-    var lineHeight = smallAndUp
-        ? list.listItem.lineHeight[1]
-        : list.listItem.lineHeight[0];
-    return (0, styled_native_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n      flex: 1;\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n      flex: 1;\n    "])), text.fontFamily, lineHeight, text.color, fontSize);
-});
-/**
- * @deprecated This component has been deprecated and will be removed in a future release.
- * Please use the DescriptionList component instead.
- * */
-var Dd = function (_a) {
-    var children = _a.children, rest = __rest(_a, ["children"]);
-    var breakpoints = (0, hooks_1.useBreakpoint)();
-    return ((0, jsx_runtime_1.jsx)(react_native_1.View, __assign({ style: { flexDirection: 'row' } }, rest, { children: (0, jsx_runtime_1.jsx)(StyledDdText, __assign({}, breakpoints, { children: children })) })));
-};
-exports.Dd = Dd;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -1 +1 @@
-export { Ol, Ul, Li, Dl, Dt, Dd } from './List';
+export { Ol, Ul, Li } from './List';

package/dist/components/List/index.js

@@ -1,10 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Dd = exports.Dt = exports.Dl = exports.Li = exports.Ul = exports.Ol = void 0;
+exports.Li = exports.Ul = exports.Ol = void 0;
 var List_1 = require("./List");
 Object.defineProperty(exports, "Ol", { enumerable: true, get: function () { return List_1.Ol; } });
 Object.defineProperty(exports, "Ul", { enumerable: true, get: function () { return List_1.Ul; } });
 Object.defineProperty(exports, "Li", { enumerable: true, get: function () { return List_1.Li; } });
-Object.defineProperty(exports, "Dl", { enumerable: true, get: function () { return List_1.Dl; } });
-Object.defineProperty(exports, "Dt", { enumerable: true, get: function () { return List_1.Dt; } });
-Object.defineProperty(exports, "Dd", { enumerable: true, get: function () { return List_1.Dd; } });

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

@@ -1,7 +1,7 @@
+import { Theme } from '@ovotech/element-core';
 import { ComponentProps } from 'react';
 import { Breakpoints } from '../../hooks';
-import { Theme } from '../../theme';
-declare type SpaceKey = keyof Theme['space'] | 0;
+declare type SpaceKey = keyof Theme['core']['space'] | 0;
 declare type MProps = {
     mTop?: SpaceKey | SpaceKey[];
     mBottom?: SpaceKey | SpaceKey[];
@@ -12,13 +12,13 @@ declare type MProps = {
     all?: SpaceKey | SpaceKey[];
     breakpoints: Breakpoints;
 };
-declare const StyledMargin: import("styled-components").StyledComponent<typeof import("react-native").View, import("../../theme/theme").Theme & {
+declare const StyledMargin: import("styled-components").StyledComponent<typeof import("react-native").View, {
     core: {
         radius: Record<"small" | "medium" | "large" | "max", string>;
         borderWidth: Record<"small" | "medium" | "large", string>;
         breakpoint: Record<"small" | "medium" | "large", string | number>;
         mediaQuery: Record<"small" | "medium" | "large", string>;
-        space: Record<0 | 2 | 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15, string>;
+        space: Record<0 | 2 | 1 | 3 | 4 | 10 | 5 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
         transition: Record<"medium" | "slow" | "fast", string>;
         opacity: Record<"solid" | "transparent" | "translucent", string | number>;
         color: Record<"neutral" | "red" | "orange" | "yellow" | "green" | "blue", {
@@ -32,16 +32,16 @@ declare const StyledMargin: import("styled-components").StyledComponent<typeof i
         }> & {
             brand: Record<string, string>;
         };
-        fontFamily: Record<"heading" | "body" | "mono" | "bodyBold", {
+        fontFamily: Record<"body" | "mono" | "heading" | "bodyBold", {
             native: string;
             web: string;
         }>;
         fontWeight: Record<"bold" | "book" | "black", string | number>;
-        fontSize: Record<"small" | "body" | "label" | "lead" | "heading1" | "heading2" | "heading3" | "heading4", {
+        fontSize: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
             small: string | number;
             large: string | number;
         }>;
-        lineHeight: Record<"small" | "body" | "label" | "lead" | "heading1" | "heading2" | "heading3" | "heading4", {
+        lineHeight: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
             small: string | number;
             large: string | number;
         }>;
@@ -49,10 +49,10 @@ declare const StyledMargin: import("styled-components").StyledComponent<typeof i
     };
     semantic: {
         surface: Record<"base" | "cutout" | "elevated", string>;
-        message: Record<"base" | "link" | "error" | "secondary" | "branded", string>;
+        message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
         border: Record<"graphic" | "differentiated" | "functional", string>;
         focus: Record<"surface" | "outline" | "hover", string>;
-        inverted: Record<"border" | "surface", string> & {
+        inverted: Record<"surface" | "border", string> & {
             message: Record<"base" | "link" | "secondary" | "branded", string>;
         };
         success: {
@@ -83,7 +83,7 @@ declare const StyledMargin: import("styled-components").StyledComponent<typeof i
             message: string;
             messageOnEmphasis: string;
         };
-        data: Record<"gas" | "branded" | "electric", Record<2 | 1 | 3 | 4, string>>;
+        data: Record<"branded" | "gas" | "electric", Record<2 | 1 | 3 | 4, string>>;
     };
     component: {
         heading1: {
@@ -239,7 +239,7 @@ declare const StyledMargin: import("styled-components").StyledComponent<typeof i
             };
         };
     };
-} & object, MProps, never>;
+}, MProps, never>;
 declare type Props = Omit<ComponentProps<typeof StyledMargin>, 'mTop' | 'mBottom' | 'mLeft' | 'mRight' | 'breakpoints'> & {
     top?: SpaceKey | SpaceKey[];
     bottom?: SpaceKey | SpaceKey[];