@ovotech/element-native 3.3.2 → 3.4.0-canary-951cfd3-142

package/dist/components/{SkeletonLoading/Skeleton.d.ts → Em/Em.d.ts}

@@ -1,10 +1,10 @@
-export declare const Skeleton: import("styled-components").StyledComponent<typeof import("react-native").View, {
+export declare const Em: import("styled-components").StyledComponent<typeof import("react-native").Text, {
     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 | 10 | 5 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
+        space: Record<0 | 2 | 1 | 3 | 4 | 5 | 10 | 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", {

package/dist/components/Em/Em.js

@@ -0,0 +1,13 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Em = void 0;
+var styled_native_1 = __importDefault(require("../../styled.native"));
+exports.Em = styled_native_1.default.Text(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-family: 'System font';\n  font-style: italic;\n"], ["\n  font-family: 'System font';\n  font-style: italic;\n"])));
+var templateObject_1;

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

@@ -0,0 +1 @@
+export { Em } from './Em';

package/dist/components/Em/index.js

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

package/dist/components/{TextField → EmailField}/EmailField.js

@@ -26,7 +26,7 @@ exports.EmailField = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var Field_1 = require("../Field");
-var EmailInput_1 = require("../Input/EmailInput");
+var EmailInput_1 = require("../EmailInput");
 exports.EmailField = (0, react_1.forwardRef)(function (_a, ref) {
     var rest = __rest(_a, []);
     return ((0, jsx_runtime_1.jsx)(Field_1.Field, __assign({}, rest, { ref: ref }, { children: (0, jsx_runtime_1.jsx)(EmailInput_1.EmailInput, {}) })));

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

@@ -0,0 +1 @@
+export { EmailField } from './EmailField';

package/dist/components/EmailField/index.js

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

package/dist/components/{Input → EmailInput}/EmailInput.js

@@ -14,6 +14,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.EmailInput = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var Input_1 = require("./Input");
+var Input_1 = require("../Input/Input");
 var EmailInput = (0, react_1.forwardRef)(function (props, ref) { return ((0, jsx_runtime_1.jsx)(Input_1.Input, __assign({}, props, { keyboardType: "email-address", autoCapitalize: "none", autoCorrect: false, ref: ref }))); });
 exports.EmailInput = EmailInput;

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

@@ -0,0 +1 @@
+export { EmailInput } from './EmailInput';

package/dist/components/EmailInput/index.js

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

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

@@ -11,7 +11,7 @@ declare const ErrorText: import("react").ForwardRefExoticComponent<Pick<Omit<{
             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 | 10 | 5 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
+            space: Record<0 | 2 | 1 | 3 | 4 | 5 | 10 | 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", {

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

@@ -10,7 +10,7 @@ declare const Col: import("react").ForwardRefExoticComponent<Pick<Omit<{
             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 | 10 | 5 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
+            space: Record<0 | 2 | 1 | 3 | 4 | 5 | 10 | 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", {

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

@@ -6,7 +6,7 @@ declare const StyledRow: import("styled-components").StyledComponent<typeof impo
         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 | 10 | 5 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
+        space: Record<0 | 2 | 1 | 3 | 4 | 5 | 10 | 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", {

package/dist/components/Heading1/Heading1.d.ts

@@ -0,0 +1,3 @@
+import { PropsWithChildren } from 'react';
+import { TextProps } from 'react-native';
+export declare const Heading1: ({ accessibilityRole, ...rest }: PropsWithChildren<TextProps>) => JSX.Element;

package/dist/components/{Heading/Heading.js → Heading1/Heading1.js}

@@ -49,7 +49,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Heading4 = exports.Heading3 = exports.Heading2 = exports.Heading1 = void 0;
+exports.Heading1 = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var hooks_1 = require("../../hooks");
 var styled_native_1 = __importStar(require("../../styled.native"));
@@ -68,37 +68,4 @@ var Heading1 = function (_a) {
     return ((0, jsx_runtime_1.jsx)(StyledHeading1, __assign({ accessibilityRole: accessibilityRole }, breakpoints, rest)));
 };
 exports.Heading1 = Heading1;
-var StyledHeading2 = styled_native_1.default.Text(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
-    var fontSize = core.fontSize.heading2[smallAndUp ? 'large' : 'small'];
-    return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "], ["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "])), core.fontFamily.heading.native, fontSize, core.lineHeight.heading2[smallAndUp ? 'large' : 'small'], calculateLetterSpacing(fontSize, core.letterSpacing.extraCompressed), semantic.message.branded);
-});
-var Heading2 = function (_a) {
-    var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'header' : _b, rest = __rest(_a, ["accessibilityRole"]);
-    var breakpoints = (0, hooks_1.useBreakpoint)();
-    return ((0, jsx_runtime_1.jsx)(StyledHeading2, __assign({ accessibilityRole: accessibilityRole }, breakpoints, rest)));
-};
-exports.Heading2 = Heading2;
-var StyledHeading3 = styled_native_1.default.Text(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
-    var fontSize = core.fontSize.heading3[smallAndUp ? 'large' : 'small'];
-    return (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "], ["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "])), core.fontFamily.bodyBold.native, fontSize, core.lineHeight.heading3[smallAndUp ? 'large' : 'small'], calculateLetterSpacing(fontSize, core.letterSpacing.compressed), semantic.message.branded);
-});
-var Heading3 = function (_a) {
-    var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'header' : _b, rest = __rest(_a, ["accessibilityRole"]);
-    var breakpoints = (0, hooks_1.useBreakpoint)();
-    return ((0, jsx_runtime_1.jsx)(StyledHeading3, __assign({ accessibilityRole: accessibilityRole }, breakpoints, rest)));
-};
-exports.Heading3 = Heading3;
-var StyledHeading4 = styled_native_1.default.Text(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
-    var fontSize = core.fontSize.heading4[smallAndUp ? 'large' : 'small'];
-    return (0, styled_native_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "], ["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "])), core.fontFamily.bodyBold.native, fontSize, core.lineHeight.heading4[smallAndUp ? 'large' : 'small'], calculateLetterSpacing(fontSize, core.letterSpacing.compressed), semantic.message.branded);
-});
-var Heading4 = function (_a) {
-    var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'header' : _b, rest = __rest(_a, ["accessibilityRole"]);
-    var breakpoints = (0, hooks_1.useBreakpoint)();
-    return ((0, jsx_runtime_1.jsx)(StyledHeading4, __assign({ accessibilityRole: accessibilityRole }, breakpoints, rest)));
-};
-exports.Heading4 = Heading4;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+var templateObject_1;

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

@@ -0,0 +1 @@
+export { Heading1 } from './Heading1';

package/dist/components/Heading1/index.js

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

package/dist/components/Heading2/Heading2.d.ts

@@ -0,0 +1,3 @@
+import { PropsWithChildren } from 'react';
+import { TextProps } from 'react-native';
+export declare const Heading2: ({ accessibilityRole, ...rest }: PropsWithChildren<TextProps>) => JSX.Element;

package/dist/components/Heading2/Heading2.js

@@ -0,0 +1,71 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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.Heading2 = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var hooks_1 = require("../../hooks");
+var styled_native_1 = __importStar(require("../../styled.native"));
+var utils_1 = require("../../utils");
+var calculateLetterSpacing = function (fontSize, letterSpacing) {
+    return (0, utils_1.numToPx)((0, utils_1.pxToNumber)(fontSize) * letterSpacing);
+};
+var StyledHeading2 = styled_native_1.default.Text(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
+    var fontSize = core.fontSize.heading2[smallAndUp ? 'large' : 'small'];
+    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "], ["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "])), core.fontFamily.heading.native, fontSize, core.lineHeight.heading2[smallAndUp ? 'large' : 'small'], calculateLetterSpacing(fontSize, core.letterSpacing.extraCompressed), semantic.message.branded);
+});
+var Heading2 = function (_a) {
+    var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'header' : _b, rest = __rest(_a, ["accessibilityRole"]);
+    var breakpoints = (0, hooks_1.useBreakpoint)();
+    return ((0, jsx_runtime_1.jsx)(StyledHeading2, __assign({ accessibilityRole: accessibilityRole }, breakpoints, rest)));
+};
+exports.Heading2 = Heading2;
+var templateObject_1;

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

@@ -0,0 +1 @@
+export { Heading2 } from './Heading2';

package/dist/components/Heading2/index.js

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

package/dist/components/Heading3/Heading3.d.ts

@@ -0,0 +1,3 @@
+import { PropsWithChildren } from 'react';
+import { TextProps } from 'react-native';
+export declare const Heading3: ({ accessibilityRole, ...rest }: PropsWithChildren<TextProps>) => JSX.Element;

package/dist/components/Heading3/Heading3.js

@@ -0,0 +1,71 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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.Heading3 = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var hooks_1 = require("../../hooks");
+var styled_native_1 = __importStar(require("../../styled.native"));
+var utils_1 = require("../../utils");
+var calculateLetterSpacing = function (fontSize, letterSpacing) {
+    return (0, utils_1.numToPx)((0, utils_1.pxToNumber)(fontSize) * letterSpacing);
+};
+var StyledHeading3 = styled_native_1.default.Text(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
+    var fontSize = core.fontSize.heading3[smallAndUp ? 'large' : 'small'];
+    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "], ["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "])), core.fontFamily.bodyBold.native, fontSize, core.lineHeight.heading3[smallAndUp ? 'large' : 'small'], calculateLetterSpacing(fontSize, core.letterSpacing.compressed), semantic.message.branded);
+});
+var Heading3 = function (_a) {
+    var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'header' : _b, rest = __rest(_a, ["accessibilityRole"]);
+    var breakpoints = (0, hooks_1.useBreakpoint)();
+    return ((0, jsx_runtime_1.jsx)(StyledHeading3, __assign({ accessibilityRole: accessibilityRole }, breakpoints, rest)));
+};
+exports.Heading3 = Heading3;
+var templateObject_1;

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

@@ -0,0 +1 @@
+export { Heading3 } from './Heading3';

package/dist/components/Heading3/index.js

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

package/dist/components/Heading4/Heading4.d.ts

@@ -0,0 +1,3 @@
+import { PropsWithChildren } from 'react';
+import { TextProps } from 'react-native';
+export declare const Heading4: ({ accessibilityRole, ...rest }: PropsWithChildren<TextProps>) => JSX.Element;

package/dist/components/Heading4/Heading4.js

@@ -0,0 +1,71 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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.Heading4 = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var hooks_1 = require("../../hooks");
+var styled_native_1 = __importStar(require("../../styled.native"));
+var utils_1 = require("../../utils");
+var calculateLetterSpacing = function (fontSize, letterSpacing) {
+    return (0, utils_1.numToPx)((0, utils_1.pxToNumber)(fontSize) * letterSpacing);
+};
+var StyledHeading4 = styled_native_1.default.Text(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
+    var fontSize = core.fontSize.heading4[smallAndUp ? 'large' : 'small'];
+    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "], ["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "])), core.fontFamily.bodyBold.native, fontSize, core.lineHeight.heading4[smallAndUp ? 'large' : 'small'], calculateLetterSpacing(fontSize, core.letterSpacing.compressed), semantic.message.branded);
+});
+var Heading4 = function (_a) {
+    var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'header' : _b, rest = __rest(_a, ["accessibilityRole"]);
+    var breakpoints = (0, hooks_1.useBreakpoint)();
+    return ((0, jsx_runtime_1.jsx)(StyledHeading4, __assign({ accessibilityRole: accessibilityRole }, breakpoints, rest)));
+};
+exports.Heading4 = Heading4;
+var templateObject_1;

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

@@ -0,0 +1 @@
+export { Heading4 } from './Heading4';

package/dist/components/Heading4/index.js

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

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

@@ -11,7 +11,7 @@ declare const HintText: import("react").ForwardRefExoticComponent<Pick<Omit<{
             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 | 10 | 5 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
+            space: Record<0 | 2 | 1 | 3 | 4 | 5 | 10 | 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", {

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

@@ -11,7 +11,7 @@ declare const LabelText: import("react").ForwardRefExoticComponent<Pick<Omit<{
             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 | 10 | 5 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
+            space: Record<0 | 2 | 1 | 3 | 4 | 5 | 10 | 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", {