@ovotech/element-native 5.4.3 → 5.6.0

package/dist/components/LargeValueReference/styles.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LargeValue = exports.LargeValueContainer = exports.StyledLargeValueReferenceWrapper = void 0;
+const element_core_1 = require("@ovotech/element-core");
+const styled_native_1 = __importDefault(require("../../styled.native"));
+const P_1 = require("../P");
+exports.StyledLargeValueReferenceWrapper = styled_native_1.default.View(({ theme, backgroundTheme }) => `
+  align-items: center;
+  max-width: ${'100%'};
+  gap: ${(0, element_core_1.numToPx)(theme.space[200])};
+  padding: ${(0, element_core_1.numToPx)(theme.space[400])};
+  background-color: ${theme.color.surface[backgroundTheme]};
+  border-radius: ${(0, element_core_1.numToPx)(theme.border.radius.lg)};
+  border: ${(0, element_core_1.numToPx)(theme.border.width.sm)} solid ${theme.color.surface.borderDim};
+`);
+exports.LargeValueContainer = styled_native_1.default.View(({ theme }) => `
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: ${(0, element_core_1.numToPx)(theme.space[200])};
+`);
+exports.LargeValue = (0, styled_native_1.default)(P_1.P)(() => `
+  font-family: monospace;
+  letter-spacing: 2px;
+`);

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

@@ -37,6 +37,7 @@ export declare const LineThrough: import("styled-components").StyledComponent<ty
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -79,6 +80,7 @@ export declare const LineThrough: import("styled-components").StyledComponent<ty
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -87,6 +89,7 @@ export declare const LineThrough: import("styled-components").StyledComponent<ty
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {

package/dist/components/LineThrough/LineThrough.js

@@ -1,4 +1,10 @@
-import styled from '../../styled.native';
-export const LineThrough = styled.Text `
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LineThrough = void 0;
+const styled_native_1 = __importDefault(require("../../styled.native"));
+exports.LineThrough = styled_native_1.default.Text `
   text-decoration: line-through;
 `;

package/dist/components/LineThrough/index.js

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

package/dist/components/Link/Link.js

@@ -1,24 +1,73 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { numToPx } from '@ovotech/element-core';
-import styled, { css } from '../../styled.native';
-import { getText } from '../../utils/utils';
-import { Button } from '../Button';
-import { Icon } from '../Icon';
-const Link = (props) => _jsx(Button, { ...props, ref: props.ref });
-const StyledText = styled.Text(({ theme }) => css `
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextLink = exports.Link = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const element_core_1 = require("@ovotech/element-core");
+const styled_native_1 = __importStar(require("../../styled.native"));
+const utils_1 = require("../../utils/utils");
+const Button_1 = require("../Button");
+const Icon_1 = require("../Icon");
+const Link = (props) => (0, jsx_runtime_1.jsx)(Button_1.Button, Object.assign({}, props, { ref: props.ref }));
+exports.Link = Link;
+const StyledText = styled_native_1.default.Text(({ theme }) => (0, styled_native_1.css) `
     font-family: ${theme.native.font.family.book};
-    font-size: ${numToPx(theme.font.size.md.mediaQuery.sm)};
+    font-size: ${(0, element_core_1.numToPx)(theme.font.size.md.mediaQuery.sm)};
     color: ${theme.color.surface.link};
     text-decoration: underline;
     text-decoration-color: ${theme.color.surface.link};
   `);
-const StyledIcon = styled(Icon)(({ theme }) => css `
+const StyledIcon = (0, styled_native_1.default)(Icon_1.Icon)(({ theme }) => (0, styled_native_1.css) `
     color: ${theme.color.surface.link};
   `);
-const TextLink = ({ children, opensInNewWindow = false, accessibilityLabel, ref, ...rest }) => {
+const TextLink = (_a) => {
+    var { children, opensInNewWindow = false, accessibilityLabel, ref } = _a, rest = __rest(_a, ["children", "opensInNewWindow", "accessibilityLabel", "ref"]);
     const updatedAccessibilityLabel = opensInNewWindow
-        ? `${accessibilityLabel ? accessibilityLabel : getText(children)} (opens in new window)`
+        ? `${accessibilityLabel ? accessibilityLabel : (0, utils_1.getText)(children)} (opens in new window)`
         : accessibilityLabel;
-    return (_jsxs(StyledText, { ...rest, accessibilityLabel: updatedAccessibilityLabel, ref: ref, children: [_jsx(StyledText, { children: children }), opensInNewWindow && (_jsxs(_Fragment, { children: ["\u00A0", _jsx(StyledIcon, { size: 12, name: "new-window" })] }))] }));
+    return ((0, jsx_runtime_1.jsxs)(StyledText, Object.assign({}, rest, { accessibilityLabel: updatedAccessibilityLabel, ref: ref, children: [(0, jsx_runtime_1.jsx)(StyledText, { children: children }), opensInNewWindow && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["\u00A0", (0, jsx_runtime_1.jsx)(StyledIcon, { size: 12, name: "new-window" })] }))] })));
 };
-export { Link, TextLink };
+exports.TextLink = TextLink;

package/dist/components/Link/index.js

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

package/dist/components/List/List.js

@@ -1,26 +1,31 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children } from 'react';
-import { View } from 'react-native';
-import { getValidChildren } from '../../utils';
-import { Margin } from '../Margin';
-import { Stack } from '../Stack';
-import { FlexRow, LiContent, SquareBullet, TextBullet } from './styled';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Ul = exports.Ol = exports.Li = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const utils_1 = require("../../utils");
+const Margin_1 = require("../Margin");
+const Stack_1 = require("../Stack");
+const styled_1 = require("./styled");
 const ListItem = ({ children, showBullets = true, prefix, }) => {
-    return (_jsxs(FlexRow, { children: [prefix ? (_jsx(TextBullet, { children: prefix })) : (_jsx(SquareBullet, { visible: showBullets })), _jsx(LiContent, { children: children })] }));
+    return ((0, jsx_runtime_1.jsxs)(styled_1.FlexRow, { children: [prefix ? ((0, jsx_runtime_1.jsx)(styled_1.TextBullet, { children: prefix })) : ((0, jsx_runtime_1.jsx)(styled_1.SquareBullet, { visible: showBullets })), (0, jsx_runtime_1.jsx)(styled_1.LiContent, { children: children })] }));
 };
 const renderList = ({ children, listType, showBullets, }) => {
-    const validChildren = getValidChildren(children);
-    return Children.map(validChildren, (child, index) => (_jsx(ListItem, { prefix: listType === 'ol' ? `${index + 1}.` : undefined, showBullets: showBullets, children: child })));
+    const validChildren = (0, utils_1.getValidChildren)(children);
+    return react_1.Children.map(validChildren, (child, index) => ((0, jsx_runtime_1.jsx)(ListItem, { prefix: listType === 'ol' ? `${index + 1}.` : undefined, showBullets: showBullets, children: child })));
 };
 const Li = ({ children }) => {
-    return _jsx(View, { style: { flexDirection: 'column' }, children: children });
+    return (0, jsx_runtime_1.jsx)(react_native_1.View, { style: { flexDirection: 'column' }, children: children });
 };
+exports.Li = Li;
 const Ul = (props) => {
     const { children, showBullets } = props;
-    return (_jsx(Margin, { top: 2, children: _jsx(Stack, { spaceBetween: 2, children: renderList({ children, listType: 'ul', showBullets }) }) }));
+    return ((0, jsx_runtime_1.jsx)(Margin_1.Margin, { top: 2, children: (0, jsx_runtime_1.jsx)(Stack_1.Stack, { spaceBetween: 2, children: renderList({ children, listType: 'ul', showBullets }) }) }));
 };
+exports.Ul = Ul;
 const Ol = (props) => {
     const { children } = props;
-    return (_jsx(Margin, { top: 2, children: _jsx(Stack, { spaceBetween: 2, children: renderList({ children, listType: 'ol' }) }) }));
+    return ((0, jsx_runtime_1.jsx)(Margin_1.Margin, { top: 2, children: (0, jsx_runtime_1.jsx)(Stack_1.Stack, { spaceBetween: 2, children: renderList({ children, listType: 'ol' }) }) }));
 };
-export { Li, Ol, Ul };
+exports.Ol = Ol;

package/dist/components/List/index.js

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

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

@@ -39,6 +39,7 @@ export declare const SquareBullet: import("styled-components").StyledComponent<t
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -81,6 +82,7 @@ export declare const SquareBullet: import("styled-components").StyledComponent<t
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -89,6 +91,7 @@ export declare const SquareBullet: import("styled-components").StyledComponent<t
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -616,6 +619,7 @@ export declare const TextBullet: import("styled-components").StyledComponent<typ
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -658,6 +662,7 @@ export declare const TextBullet: import("styled-components").StyledComponent<typ
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -666,6 +671,7 @@ export declare const TextBullet: import("styled-components").StyledComponent<typ
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -1191,6 +1197,7 @@ export declare const FlexRow: import("styled-components").StyledComponent<typeof
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -1233,6 +1240,7 @@ export declare const FlexRow: import("styled-components").StyledComponent<typeof
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -1241,6 +1249,7 @@ export declare const FlexRow: import("styled-components").StyledComponent<typeof
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {
@@ -1766,6 +1775,7 @@ export declare const LiContent: import("styled-components").StyledComponent<type
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -1808,6 +1818,7 @@ export declare const LiContent: import("styled-components").StyledComponent<type
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -1816,6 +1827,7 @@ export declare const LiContent: import("styled-components").StyledComponent<type
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {

package/dist/components/List/styled.js

@@ -1,42 +1,78 @@
-import { numToPx } from '@ovotech/element-core';
-import styled, { css } from '../../styled.native';
-export const SquareBullet = styled.View(({ theme, visible, smallAndUp }) => {
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LiContent = exports.FlexRow = exports.TextBullet = exports.SquareBullet = void 0;
+const element_core_1 = require("@ovotech/element-core");
+const styled_native_1 = __importStar(require("../../styled.native"));
+exports.SquareBullet = styled_native_1.default.View(({ theme, visible, smallAndUp }) => {
     const lineHeight = smallAndUp
         ? theme.font.lineHeight.md.mediaQuery.lg
         : theme.font.lineHeight.md.mediaQuery.sm;
     const topMargin = (lineHeight - theme.space[200]) / 2;
-    return css `
+    return (0, styled_native_1.css) `
     align-self: flex-start;
-    width: ${numToPx(theme.space[200])};
-    height: ${numToPx(theme.space[200])};
+    width: ${(0, element_core_1.numToPx)(theme.space[200])};
+    height: ${(0, element_core_1.numToPx)(theme.space[200])};
     margin-right: 10px;
-    margin-top: ${numToPx(topMargin)};
+    margin-top: ${(0, element_core_1.numToPx)(topMargin)};
     background-color: ${visible ? theme.color.brand.brand : 'transparent'};
     transform: rotate(-15deg);
   `;
 });
-export const TextBullet = styled.Text(({ theme, smallAndUp }) => {
+exports.TextBullet = styled_native_1.default.Text(({ theme, smallAndUp }) => {
     const fontSize = smallAndUp
         ? theme.font.size.md.mediaQuery.lg
         : theme.font.size.md.mediaQuery.sm;
     const lineHeight = smallAndUp
         ? theme.font.lineHeight.md.mediaQuery.lg
         : theme.font.lineHeight.md.mediaQuery.sm;
-    return css `
-    min-width: ${numToPx(theme.space[300])};
-    min-height: ${numToPx(theme.space[300])};
-    margin-right: ${numToPx(theme.space[100])};
+    return (0, styled_native_1.css) `
+    min-width: ${(0, element_core_1.numToPx)(theme.space[300])};
+    min-height: ${(0, element_core_1.numToPx)(theme.space[300])};
+    margin-right: ${(0, element_core_1.numToPx)(theme.space[100])};
     font-family: ${theme.native.font.family.book};
-    font-size: ${numToPx(fontSize)};
-    line-height: ${numToPx(lineHeight)};
+    font-size: ${(0, element_core_1.numToPx)(fontSize)};
+    line-height: ${(0, element_core_1.numToPx)(lineHeight)};
     text-align: left;
     color: ${theme.color.surface.onSurface};
   `;
 });
-export const FlexRow = styled.View `
+exports.FlexRow = styled_native_1.default.View `
   flex-direction: row;
 `;
-export const LiContent = styled.View `
+exports.LiContent = styled_native_1.default.View `
   flex-direction: column;
   flex: 1;
 `;

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

@@ -50,6 +50,7 @@ declare const StyledMargin: import("styled-components").StyledComponent<typeof i
             "30": string;
             "40": string;
             "50": string;
+            "55": string;
             "56": string;
             "60": string;
             "70": string;
@@ -92,6 +93,7 @@ declare const StyledMargin: import("styled-components").StyledComponent<typeof i
             onBrandVariant: string;
             aiGradientFrom: string;
             aiGradientTo: string;
+            accessible: string;
             fixed: {
                 brand: string;
                 dark: string;
@@ -100,6 +102,7 @@ declare const StyledMargin: import("styled-components").StyledComponent<typeof i
                 bright: string;
                 onBrand: string;
                 onBrandVariant: string;
+                accessible: string;
             };
         };
         outline: {

package/dist/components/Margin/Margin.js

@@ -1,36 +1,54 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { numToPx } from '@ovotech/element-core';
-import { useBreakpoint } from '../../hooks';
-import styled from '../../styled.native';
-import { responsiveStyle } from '../../utils';
-const StyledMargin = styled.View(({ theme, mTop, mBottom, mLeft, mRight, horizontal, vertical, all, breakpoints, }) => {
-    const formatter = (spaceKey) => numToPx(theme.space[String(spaceKey * 100)]);
+"use strict";
+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.Margin = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const element_core_1 = require("@ovotech/element-core");
+const hooks_1 = require("../../hooks");
+const styled_native_1 = __importDefault(require("../../styled.native"));
+const utils_1 = require("../../utils");
+const StyledMargin = styled_native_1.default.View(({ theme, mTop, mBottom, mLeft, mRight, horizontal, vertical, all, breakpoints, }) => {
+    const formatter = (spaceKey) => (0, element_core_1.numToPx)(theme.space[String(spaceKey * 100)]);
     return `
     ${horizontal
         ? `
-            ${responsiveStyle('margin-left', horizontal, breakpoints, formatter)}
-            ${responsiveStyle('margin-right', horizontal, breakpoints, formatter)}
+            ${(0, utils_1.responsiveStyle)('margin-left', horizontal, breakpoints, formatter)}
+            ${(0, utils_1.responsiveStyle)('margin-right', horizontal, breakpoints, formatter)}
           `
         : ''}
     ${vertical
         ? `
-            ${responsiveStyle('margin-top', vertical, breakpoints, formatter)}
-            ${responsiveStyle('margin-bottom', vertical, breakpoints, formatter)}
+            ${(0, utils_1.responsiveStyle)('margin-top', vertical, breakpoints, formatter)}
+            ${(0, utils_1.responsiveStyle)('margin-bottom', vertical, breakpoints, formatter)}
           `
         : ''}
-    ${mTop ? responsiveStyle('margin-top', mTop, breakpoints, formatter) : ''}
+    ${mTop ? (0, utils_1.responsiveStyle)('margin-top', mTop, breakpoints, formatter) : ''}
     ${mBottom
-        ? responsiveStyle('margin-bottom', mBottom, breakpoints, formatter)
+        ? (0, utils_1.responsiveStyle)('margin-bottom', mBottom, breakpoints, formatter)
         : ''}
-    ${mLeft ? responsiveStyle('margin-left', mLeft, breakpoints, formatter) : ''}
+    ${mLeft ? (0, utils_1.responsiveStyle)('margin-left', mLeft, breakpoints, formatter) : ''}
     ${mRight
-        ? responsiveStyle('margin-right', mRight, breakpoints, formatter)
+        ? (0, utils_1.responsiveStyle)('margin-right', mRight, breakpoints, formatter)
         : ''}
-    ${all ? responsiveStyle('margin', all, breakpoints, formatter) : ''}
+    ${all ? (0, utils_1.responsiveStyle)('margin', all, breakpoints, formatter) : ''}
   `;
 });
-const Margin = ({ top, bottom, left, right, ...rest }) => {
-    const breakpoints = useBreakpoint();
-    return (_jsx(StyledMargin, { ...rest, breakpoints: breakpoints, mTop: top, mBottom: bottom, mLeft: left, mRight: right }));
+const Margin = (_a) => {
+    var { top, bottom, left, right } = _a, rest = __rest(_a, ["top", "bottom", "left", "right"]);
+    const breakpoints = (0, hooks_1.useBreakpoint)();
+    return ((0, jsx_runtime_1.jsx)(StyledMargin, Object.assign({}, rest, { breakpoints: breakpoints, mTop: top, mBottom: bottom, mLeft: left, mRight: right })));
 };
-export { Margin };
+exports.Margin = Margin;

package/dist/components/Margin/index.js

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