@ovotech/element-native 3.3.2 → 3.4.0-canary-d9e3d0a-143

package/dist/components/Accordion/Accordion.js

@@ -53,12 +53,12 @@ exports.Accordion = exports.withAnimated = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+var use_layout_1 = require("../../hooks/use-layout");
 var styled_native_1 = require("../../styled.native");
 var utils_1 = require("../../utils");
-var Heading_1 = require("../Heading");
+var Heading4_1 = require("../Heading4");
 var Group_1 = require("./Group");
 var Icon_1 = require("./Icon");
-var hooks_1 = require("./hooks");
 var styles_1 = require("./styles");
 function withAnimated(WrappedComponent) {
     var displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
@@ -81,11 +81,11 @@ var Accordion = function (_a) {
     var _b = _a.expanded, expanded = _b === void 0 ? false : _b, first = _a.first, last = _a.last, title = _a.title, children = _a.children, onToggle = _a.onToggle;
     var _c = (0, react_1.useContext)(styled_native_1.ThemeContext), core = _c.core, semantic = _c.semantic;
     var Header = (0, react_1.useContext)(Group_1.AccordionGroupContext).Header;
-    var AccordionHeading = Header !== null && Header !== void 0 ? Header : Heading_1.Heading4;
+    var AccordionHeading = Header !== null && Header !== void 0 ? Header : Heading4_1.Heading4;
     var AnimatedHeading = (0, react_1.useMemo)(function () { return withAnimated(AccordionHeading); }, [
         AccordionHeading,
     ]);
-    var _d = (0, hooks_1.useLayout)(0), layout = _d[0], onLayout = _d[1];
+    var _d = (0, use_layout_1.useLayout)(0), layout = _d[0], onLayout = _d[1];
     var _e = (0, react_1.useState)(expanded), open = _e[0], setOpen = _e[1];
     var handleHeightContent = (0, react_1.useMemo)(function () { return layout.height || 100; }, [
         layout.height,
@@ -125,7 +125,7 @@ var Accordion = function (_a) {
     var headerStyle = (0, react_native_reanimated_1.useAnimatedStyle)(function () { return ({
         color: (0, react_native_reanimated_1.interpolateColor)(progress.value, [0, 1], [semantic.message.branded, semantic.message.base]),
     }); });
-    return ((0, jsx_runtime_1.jsxs)(styles_1.StyledAccordion, __assign({ first: first, last: last }, { children: [(0, jsx_runtime_1.jsxs)(styles_1.StyledAccordionHeader, __assign({ accessibilityState: { expanded: open }, onPress: toggleOpen, testID: "accordionTitle" }, { children: [(0, jsx_runtime_1.jsx)(AnimatedHeading, __assign({ style: [
+    return ((0, jsx_runtime_1.jsxs)(styles_1.StyledAccordion, __assign({ first: first, last: last, isExpanded: open }, { children: [(0, jsx_runtime_1.jsxs)(styles_1.StyledAccordionHeader, __assign({ accessibilityState: { expanded: open }, onPress: toggleOpen, testID: "accordionTitle" }, { children: [(0, jsx_runtime_1.jsx)(AnimatedHeading, __assign({ style: [
                             headerStyle,
                             {
                                 paddingTop: (0, utils_1.pxToNumber)(core.space[1]),

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

@@ -5,7 +5,7 @@ export declare const StyledAccordion: import("styled-components").StyledComponen
         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", {
@@ -229,6 +229,7 @@ export declare const StyledAccordion: import("styled-components").StyledComponen
 }, {
     first?: boolean | undefined;
     last?: boolean | undefined;
+    isExpanded: boolean;
 }, never>;
 export declare const StyledAccordionHeader: import("styled-components").StyledComponent<typeof import("react-native").TouchableOpacity, {
     core: {
@@ -236,7 +237,7 @@ export declare const StyledAccordionHeader: import("styled-components").StyledCo
         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", {
@@ -464,7 +465,7 @@ export declare const StyledContainer: import("styled-components").StyledComponen
         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/Accordion/styles.js

@@ -34,8 +34,8 @@ exports.StyledContainer = exports.StyledAccordionHeader = exports.StyledAccordio
 var react_native_reanimated_1 = __importDefault(require("react-native-reanimated"));
 var styled_native_1 = __importStar(require("../../styled.native"));
 exports.StyledAccordion = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(function (_a) {
-    var _b = _a.theme, semantic = _b.semantic, core = _b.core, first = _a.first, last = _a.last;
-    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    width: 100%;\n    border-width: ", ";\n    border-color: ", ";\n    border-bottom-width: 0;\n\n    ", "\n\n    ", "\n  "], ["\n    width: 100%;\n    border-width: ", ";\n    border-color: ", ";\n    border-bottom-width: 0;\n\n    ", "\n\n    ", "\n  "])), core.borderWidth.small, semantic.border.differentiated, first
+    var _b = _a.theme, semantic = _b.semantic, core = _b.core, first = _a.first, last = _a.last, isExpanded = _a.isExpanded;
+    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    width: 100%;\n    border-width: ", ";\n    border-color: ", ";\n    border-bottom-width: 0;\n    background-color: ", ";\n    transition: background-color ", ";\n\n    ", "\n\n    ", "\n  "], ["\n    width: 100%;\n    border-width: ", ";\n    border-color: ", ";\n    border-bottom-width: 0;\n    background-color: ", ";\n    transition: background-color ", ";\n\n    ", "\n\n    ", "\n  "])), core.borderWidth.small, semantic.border.differentiated, isExpanded ? core.color.brand.white : 'transparent', core.transition.fast, first
         ? {
             borderTopLeftRadius: core.radius.small,
             borderTopRightRadius: core.radius.small,

package/dist/components/ActionCard/ActionCard.d.ts

@@ -0,0 +1,19 @@
+import { ReactElement } from 'react';
+import { ImageSourcePropType } from 'react-native';
+import { CTAVariantName } from '../CTAButton/CTAButton';
+export declare type ActionCardProps = {
+    title: string;
+    body?: string | ReactElement;
+    onPressCloseButton?: () => void;
+    onPressActionButton?: () => void;
+    onPressIndicator?: () => void;
+    onMount?: () => void;
+    ctaVariant?: CTAVariantName;
+    image?: ImageSourcePropType;
+    buttonTitle?: string;
+    accessibilityLabel?: string;
+    inverted?: boolean;
+    inline?: boolean;
+    testID?: string;
+};
+export declare const ActionCard: ({ onPressCloseButton, onPressActionButton, onPressIndicator, onMount, body, title, buttonTitle, ctaVariant, image, testID, accessibilityLabel, inverted, inline, }: ActionCardProps) => JSX.Element;

package/dist/components/ActionCard/ActionCard.js

@@ -0,0 +1,115 @@
+"use strict";
+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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActionCard = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var masked_view_1 = __importDefault(require("@react-native-masked-view/masked-view"));
+var react_1 = require("react");
+var react_native_1 = require("react-native");
+var __1 = require("../");
+var styled_native_1 = __importStar(require("../../styled.native"));
+var P_1 = require("../P");
+var CloseIconShape_1 = require("./CloseIconShape");
+var IndicatorIconShape_1 = require("./IndicatorIconShape");
+var StyledCard = styled_native_1.default.Pressable(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, inline = _a.inline, inverted = _a.inverted, reducedBottomPadding = _a.reducedBottomPadding;
+    return "\n      border-radius: ".concat(inline ? core.space[6] : 0, ";\n      background-color: ").concat(inverted ? semantic.inverted.surface : semantic.surface.elevated, ";\n      padding-bottom: ").concat(reducedBottomPadding ? core.space[1] : core.space[4], ";\n      padding: ").concat(core.space[4], ";\n      overflow: hidden;\n      border-width: 0;\n      width: 100%;\n    ");
+});
+var StyledP = (0, styled_native_1.default)(P_1.P)(function (_a) {
+    var semantic = _a.theme.semantic, inverted = _a.inverted;
+    return "\n    color: ".concat(inverted ? semantic.inverted.message.base : semantic.message.base, ";\n");
+});
+var ActionCard = function (_a) {
+    var onPressCloseButton = _a.onPressCloseButton, onPressActionButton = _a.onPressActionButton, onPressIndicator = _a.onPressIndicator, onMount = _a.onMount, body = _a.body, title = _a.title, buttonTitle = _a.buttonTitle, ctaVariant = _a.ctaVariant, image = _a.image, testID = _a.testID, _b = _a.accessibilityLabel, accessibilityLabel = _b === void 0 ? 'image' : _b, _c = _a.inverted, inverted = _c === void 0 ? true : _c, _d = _a.inline, inline = _d === void 0 ? false : _d;
+    var _e = (0, react_1.useContext)(styled_native_1.ThemeContext), core = _e.core, semantic = _e.semantic;
+    (0, react_1.useEffect)(function () {
+        if (onMount) {
+            onMount();
+        }
+    }, []);
+    var Heading = inline ? __1.Heading3 : __1.Heading2;
+    return ((0, jsx_runtime_1.jsx)(StyledCard, __assign({ onPress: onPressIndicator, inline: inline, inverted: inverted, reducedBottomPadding: Boolean(buttonTitle && !ctaVariant), testID: "".concat(testID, "-card") }, { children: (0, jsx_runtime_1.jsxs)(react_native_1.View, __assign({ style: { flexDirection: 'row' } }, { children: [(0, jsx_runtime_1.jsx)(react_native_1.View, __assign({ style: { flex: 1 } }, { children: (0, jsx_runtime_1.jsxs)(__1.Stack, __assign({ spaceBetween: 2 }, { children: [(0, jsx_runtime_1.jsx)(Heading, __assign({ style: {
+                                    color: inverted
+                                        ? semantic.inverted.message.link
+                                        : semantic.message.branded,
+                                    paddingRight: image || !onPressCloseButton ? 0 : parseInt(core.space[6]),
+                                }, testID: "".concat(testID, "-heading") }, { children: title })), (0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [typeof body === 'string' ? ((0, jsx_runtime_1.jsx)(react_native_1.View, __assign({ style: {
+                                            paddingRight: !image && !title && onPressCloseButton
+                                                ? parseInt(core.space[6])
+                                                : 0,
+                                        } }, { children: (0, jsx_runtime_1.jsx)(StyledP, __assign({ inverted: inverted }, { children: body })) }))) : (body), buttonTitle && onPressActionButton && !onPressIndicator ? (!ctaVariant ? ((0, jsx_runtime_1.jsx)(__1.Action, __assign({ inverted: inverted, onPress: onPressActionButton, testID: "".concat(testID, "-button") }, { children: buttonTitle }))) : ((0, jsx_runtime_1.jsx)(__1.Margin, __assign({ top: 4 }, { children: (0, jsx_runtime_1.jsx)(__1.CTAButton, __assign({ onPress: onPressActionButton, testID: "".concat(testID, "-button"), variant: ctaVariant }, { children: buttonTitle })) })))) : null] })] })) })), image ? ((0, jsx_runtime_1.jsx)(masked_view_1.default, __assign({ style: {
+                        flex: 1,
+                        flexDirection: 'row',
+                        height: '100%',
+                        marginTop: -16,
+                        marginRight: -16,
+                    }, maskElement: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
+                            width: '100%',
+                            height: 165,
+                            backgroundColor: 'olive',
+                            transform: [
+                                { rotate: '-16deg' },
+                                { translateX: 40 },
+                                { translateY: 25 },
+                            ],
+                        } }) }, { children: (0, jsx_runtime_1.jsx)(react_native_1.Image, { resizeMode: "cover", source: image, style: {
+                            width: '100%',
+                            height: 200,
+                            position: 'absolute',
+                            top: 0,
+                            right: 0,
+                        }, accessible: true, accessibilityRole: "image", accessibilityLabel: accessibilityLabel }) }))) : null, onPressIndicator ? ((0, jsx_runtime_1.jsxs)(react_native_1.Pressable, __assign({ style: {
+                        position: 'absolute',
+                        right: -16,
+                        bottom: -16,
+                    }, onPress: onPressIndicator, testID: "".concat(testID, "-indicator-button") }, { children: [(0, jsx_runtime_1.jsx)(IndicatorIconShape_1.IndicatorIconShape, {}), (0, jsx_runtime_1.jsx)(__1.Icon, { size: 14, style: {
+                                position: 'absolute',
+                                right: inline ? 8 : 6,
+                                bottom: 16,
+                            }, color: semantic.surface.elevated, name: "chevron-right", accessibilityLabel: "chevron-right" })] }))) : null, onPressCloseButton && !onPressIndicator ? ((0, jsx_runtime_1.jsxs)(react_native_1.Pressable, __assign({ style: {
+                        position: 'absolute',
+                        right: -16,
+                        top: -16,
+                    }, onPress: onPressCloseButton, testID: "".concat(testID, "-close-button") }, { children: [(0, jsx_runtime_1.jsx)(CloseIconShape_1.CloseIconShape, {}), (0, jsx_runtime_1.jsx)(__1.Icon, { size: 14, style: {
+                                position: 'absolute',
+                                top: inline ? 14 : 12,
+                                right: inline ? 14 : 12,
+                            }, color: semantic.surface.elevated, name: "cross", accessibilityLabel: "close" })] }))) : null] })) })));
+};
+exports.ActionCard = ActionCard;

package/dist/components/ActionCard/CloseIconShape.d.ts

@@ -0,0 +1,3 @@
+export declare const CloseIconShape: ({ color }: {
+    color?: string | undefined;
+}) => JSX.Element;

package/dist/components/ActionCard/CloseIconShape.js

@@ -0,0 +1,52 @@
+"use strict";
+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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CloseIconShape = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_native_svg_1 = __importStar(require("react-native-svg"));
+var styled_native_1 = __importDefault(require("../../styled.native"));
+var StyledPath = (0, styled_native_1.default)(react_native_svg_1.Path)(function (_a) {
+    var semantic = _a.theme.semantic, color = _a.color;
+    return "\n  fill: ".concat(color !== null && color !== void 0 ? color : semantic.message.branded, "\n");
+});
+var CloseIconShape = function (_a) {
+    var color = _a.color;
+    return ((0, jsx_runtime_1.jsxs)(react_native_svg_1.default, __assign({ width: 44, height: 44 }, { children: [(0, jsx_runtime_1.jsx)(StyledPath, { color: color, d: "M11.632 44 0 0h44v35.402L11.632 44Z" }), (0, jsx_runtime_1.jsx)(react_native_svg_1.Defs, { children: (0, jsx_runtime_1.jsx)(react_native_svg_1.ClipPath, __assign({ id: "a" }, { children: (0, jsx_runtime_1.jsx)(react_native_svg_1.Path, { fill: "#fff", d: "M16 16h12v12H16z" }) })) })] })));
+};
+exports.CloseIconShape = CloseIconShape;

package/dist/components/ActionCard/IndicatorIconShape.d.ts

@@ -0,0 +1,3 @@
+export declare const IndicatorIconShape: ({ color }: {
+    color?: string | undefined;
+}) => JSX.Element;

package/dist/components/ActionCard/IndicatorIconShape.js

@@ -0,0 +1,52 @@
+"use strict";
+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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IndicatorIconShape = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_native_svg_1 = __importStar(require("react-native-svg"));
+var styled_native_1 = __importDefault(require("../../styled.native"));
+var StyledPath = (0, styled_native_1.default)(react_native_svg_1.Path)(function (_a) {
+    var semantic = _a.theme.semantic, color = _a.color;
+    return "\n  fill: ".concat(color !== null && color !== void 0 ? color : semantic.message.branded, "\n");
+});
+var IndicatorIconShape = function (_a) {
+    var color = _a.color;
+    return ((0, jsx_runtime_1.jsx)(react_native_svg_1.default, __assign({ width: 32, height: 48 }, { children: (0, jsx_runtime_1.jsx)(StyledPath, { color: color, d: "M0 9.5 32 1v47H10.5L0 9.5Z" }) })));
+};
+exports.IndicatorIconShape = IndicatorIconShape;

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

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

package/dist/components/ActionCard/index.js

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

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

@@ -8,7 +8,7 @@ export declare const StyledActionWrapper: import("styled-components").StyledComp
         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", {
@@ -239,7 +239,7 @@ export declare const StyledActionInner: import("styled-components").StyledCompon
         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", {
@@ -469,7 +469,7 @@ export declare const StyledActionText: import("styled-components").StyledCompone
         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", {
@@ -701,7 +701,7 @@ export declare const StyledRightIcon: import("styled-components").StyledComponen
         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", {
@@ -932,7 +932,7 @@ export declare const StyledLeftIcon: import("styled-components").StyledComponent
         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/Badge/Badge.d.ts

@@ -8,7 +8,7 @@ declare const StyledBadge: import("styled-components").StyledComponent<typeof im
         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/Card/Card.d.ts

@@ -4,7 +4,7 @@ export declare const Card: import("styled-components").StyledComponent<typeof im
         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/{TextField → CurrencyField}/CurrencyField.js

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

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

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

package/dist/components/CurrencyField/index.js

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

package/dist/components/{Input → CurrencyInput}/CurrencyInput.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { TextInput } from 'react-native';
-import { InputProps } from './Input';
+import { InputProps } from '../Input/Input';
 export declare type CurrencyInputProps = InputProps & {
     currency?: 'GBP' | 'EUR' | 'AUD' | 'USD';
 };

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

@@ -26,7 +26,7 @@ exports.CurrencyInput = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var utils_1 = require("../../utils");
-var NumberInput_1 = require("./NumberInput");
+var NumberInput_1 = require("../NumberInput");
 var CurrencyInput = (0, react_1.forwardRef)(function (_a, ref) {
     var _b = _a.currency, currency = _b === void 0 ? 'GBP' : _b, invalid = _a.invalid, _c = _a.accessibilityLabel, accessibilityLabel = _c === void 0 ? '' : _c, rest = __rest(_a, ["currency", "invalid", "accessibilityLabel"]);
     var inputRef = (0, react_1.createRef)();

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

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

package/dist/components/CurrencyInput/index.js

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

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

@@ -5,7 +5,7 @@ export declare const StyledTableContainer: import("styled-components").StyledCom
         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", {
@@ -233,7 +233,7 @@ export declare const TableHeader: import("styled-components").StyledComponent<ty
         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", {
@@ -463,7 +463,7 @@ export declare const TableHeaderText: import("styled-components").StyledComponen
         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", {
@@ -691,7 +691,7 @@ export declare const TableCaptionText: import("styled-components").StyledCompone
         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", {
@@ -919,7 +919,7 @@ export declare const CellText: import("styled-components").StyledComponent<typeo
         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", {
@@ -1147,7 +1147,7 @@ export declare const TableCaption: import("styled-components").StyledComponent<t
         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", {
@@ -1375,7 +1375,7 @@ export declare const TableRow: import("styled-components").StyledComponent<typeo
         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", {
@@ -1605,7 +1605,7 @@ export declare const TableRowHeading: import("styled-components").StyledComponen
         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", {
@@ -1833,7 +1833,7 @@ export declare const TableBody: import("styled-components").StyledComponent<type
         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", {
@@ -2061,7 +2061,7 @@ export declare const TableCell: import("styled-components").StyledComponent<type
         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", {
@@ -2291,7 +2291,7 @@ export declare const RowHeading: import("styled-components").StyledComponent<typ
         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/DateField/DateField.js

@@ -48,7 +48,7 @@ var utils_1 = require("../../utils");
 var ErrorText_1 = require("../ErrorText");
 var FormGroup_1 = require("../FormGroup");
 var HintText_1 = require("../HintText");
-var Input_1 = require("../Input");
+var NumberInput_1 = require("../NumberInput");
 var LabelText_1 = require("../LabelText");
 var Stack_1 = require("../Stack");
 var SubLabelText_1 = require("../SubLabelText");
@@ -85,6 +85,6 @@ exports.DateField = (0, react_1.forwardRef)(function (_a, ref) {
             internalRef.current.focus();
         }
     }; };
-    return ((0, jsx_runtime_1.jsx)(FormGroup_1.FormGroup, __assign({ error: hasError }, { children: (0, jsx_runtime_1.jsxs)(Stack_1.Stack, __assign({ spaceBetween: 1 }, { children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, jsx_runtime_1.jsxs)(LabelText_1.LabelText, { children: [label, optional ? ' (optional)' : null] }), hint ? (0, jsx_runtime_1.jsx)(HintText_1.HintText, { children: hint }) : null, error ? (0, jsx_runtime_1.jsx)(ErrorText_1.ErrorText, { children: error }) : null] }), (0, jsx_runtime_1.jsxs)(InlineFields, __assign({ stretch: stretch }, { children: [(0, jsx_runtime_1.jsxs)(DayField, __assign({ spaceBetween: 1 }, { children: [(0, jsx_runtime_1.jsx)(react_native_1.TouchableWithoutFeedback, __assign({ onPress: focusRef(dayRef), accessible: false }, { children: (0, jsx_runtime_1.jsx)(SubLabelText_1.SubLabelText, { children: "Day" }) })), (0, jsx_runtime_1.jsx)(Input_1.NumberInput, { ref: (0, utils_1.mergeRefs)(dayRef, ref), accessibilityLabel: accessibilityLabel('Day'), invalid: hasError, value: value.day, onChangeText: handleChange('day'), testID: testID, stretch: true, editable: editable })] })), (0, jsx_runtime_1.jsxs)(MonthField, __assign({ spaceBetween: 1 }, { children: [(0, jsx_runtime_1.jsx)(react_native_1.TouchableWithoutFeedback, __assign({ onPress: focusRef(monthRef), accessible: false }, { children: (0, jsx_runtime_1.jsx)(SubLabelText_1.SubLabelText, { children: "Month" }) })), (0, jsx_runtime_1.jsx)(Input_1.NumberInput, { ref: monthRef, accessibilityLabel: accessibilityLabel('Month'), invalid: hasError, value: value.month, onChangeText: handleChange('month'), testID: "".concat(testID, "-month"), stretch: true, editable: editable })] })), (0, jsx_runtime_1.jsxs)(YearField, __assign({ spaceBetween: 1 }, { children: [(0, jsx_runtime_1.jsx)(react_native_1.TouchableWithoutFeedback, __assign({ onPress: focusRef(yearRef), accessible: false }, { children: (0, jsx_runtime_1.jsx)(SubLabelText_1.SubLabelText, { children: "Year" }) })), (0, jsx_runtime_1.jsx)(Input_1.NumberInput, { ref: yearRef, accessibilityLabel: accessibilityLabel('Year'), invalid: hasError, value: value.year, onChangeText: handleChange('year'), testID: "".concat(testID, "-year"), stretch: true, editable: editable })] }))] }))] })) })));
+    return ((0, jsx_runtime_1.jsx)(FormGroup_1.FormGroup, __assign({ error: hasError }, { children: (0, jsx_runtime_1.jsxs)(Stack_1.Stack, __assign({ spaceBetween: 1 }, { children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, jsx_runtime_1.jsxs)(LabelText_1.LabelText, { children: [label, optional ? ' (optional)' : null] }), hint ? (0, jsx_runtime_1.jsx)(HintText_1.HintText, { children: hint }) : null, error ? (0, jsx_runtime_1.jsx)(ErrorText_1.ErrorText, { children: error }) : null] }), (0, jsx_runtime_1.jsxs)(InlineFields, __assign({ stretch: stretch }, { children: [(0, jsx_runtime_1.jsxs)(DayField, __assign({ spaceBetween: 1 }, { children: [(0, jsx_runtime_1.jsx)(react_native_1.TouchableWithoutFeedback, __assign({ onPress: focusRef(dayRef), accessible: false }, { children: (0, jsx_runtime_1.jsx)(SubLabelText_1.SubLabelText, { children: "Day" }) })), (0, jsx_runtime_1.jsx)(NumberInput_1.NumberInput, { ref: (0, utils_1.mergeRefs)(dayRef, ref), accessibilityLabel: accessibilityLabel('Day'), invalid: hasError, value: value.day, onChangeText: handleChange('day'), testID: testID, stretch: true, editable: editable })] })), (0, jsx_runtime_1.jsxs)(MonthField, __assign({ spaceBetween: 1 }, { children: [(0, jsx_runtime_1.jsx)(react_native_1.TouchableWithoutFeedback, __assign({ onPress: focusRef(monthRef), accessible: false }, { children: (0, jsx_runtime_1.jsx)(SubLabelText_1.SubLabelText, { children: "Month" }) })), (0, jsx_runtime_1.jsx)(NumberInput_1.NumberInput, { ref: monthRef, accessibilityLabel: accessibilityLabel('Month'), invalid: hasError, value: value.month, onChangeText: handleChange('month'), testID: "".concat(testID, "-month"), stretch: true, editable: editable })] })), (0, jsx_runtime_1.jsxs)(YearField, __assign({ spaceBetween: 1 }, { children: [(0, jsx_runtime_1.jsx)(react_native_1.TouchableWithoutFeedback, __assign({ onPress: focusRef(yearRef), accessible: false }, { children: (0, jsx_runtime_1.jsx)(SubLabelText_1.SubLabelText, { children: "Year" }) })), (0, jsx_runtime_1.jsx)(NumberInput_1.NumberInput, { ref: yearRef, accessibilityLabel: accessibilityLabel('Year'), invalid: hasError, value: value.year, onChangeText: handleChange('year'), testID: "".concat(testID, "-year"), stretch: true, editable: editable })] }))] }))] })) })));
 });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -11,7 +11,7 @@ export declare const Dl: 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", {