@ovotech/element-native 5.4.3 → 5.5.0

package/dist/components/ActionCard/IndicatorIconShape.js

@@ -1,7 +1,47 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import Svg, { Path } from 'react-native-svg';
-import styled from '../../styled.native';
-const StyledPath = styled(Path)(({ theme, color }) => `
-  fill: ${color ?? theme.color.brand.brand}
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IndicatorIconShape = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_svg_1 = __importStar(require("react-native-svg"));
+const styled_native_1 = __importDefault(require("../../styled.native"));
+const StyledPath = (0, styled_native_1.default)(react_native_svg_1.Path)(({ theme, color }) => `
+  fill: ${color !== null && color !== void 0 ? color : theme.color.brand.brand}
 `);
-export const IndicatorIconShape = ({ color }) => (_jsx(Svg, { width: 32, height: 48, children: _jsx(StyledPath, { color: color, d: "M0 9.5 32 1v47H10.5L0 9.5Z" }) }));
+const IndicatorIconShape = ({ color }) => ((0, jsx_runtime_1.jsx)(react_native_svg_1.default, { 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.js

@@ -1 +1,5 @@
-export { ActionCard } from './ActionCard';
+"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/ActionList.js

@@ -1,25 +1,48 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children, cloneElement, } from 'react';
-import { TouchableOpacity, View, } from 'react-native';
-import { useBreakpoint } from '../../hooks';
-import { getValidChildren } from '../../utils';
-import { Badge } from '../Badge';
-import { StyledActionInner, StyledActionList, StyledActionNodeWrapper, StyledActionText, StyledActionWrapper, StyledHintText, StyledLeftIcon, StyledRightIcon, StyledTextWrapper, } from './styled';
-const ActionList = ({ children, inverted, borderBottom, ...rest }) => {
-    const validChildren = getValidChildren(children);
-    const childCount = Children.count(validChildren);
-    return (_jsx(StyledActionList, { ...rest, children: Children.map(validChildren, (child, index) => cloneElement(child, {
-            fullWidth: true,
-            index,
-            hasBorder: (childCount > 1 && index !== childCount - 1) || borderBottom,
-            inverted: child.props.inverted ?? inverted, // prioritise child prop
-            inList: true,
-            iconRight: child.props.iconRight ?? 'chevron-right-small',
-        })) }));
+"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;
 };
-const ActionWrapper = ({ children, accessibilityRole, accessibilityLabel, accessibilityHint, activeOpacity = 0.75, fullWidth, hasBorder = false, inverted = false, inList, onPress, testID, standalone = false, ref, ...rest }) => (_jsx(StyledActionWrapper, { ref: ref, hasBorder: hasBorder, inverted: inverted, testID: testID, inList: inList, ...rest, children: _jsx(TouchableOpacity, { activeOpacity: activeOpacity, accessible: true, accessibilityRole: accessibilityRole, accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint, onPress: onPress, children: _jsx(StyledActionInner, { fullWidth: fullWidth, inList: inList, standalone: standalone, children: children }) }) }));
-const Action = ({ accessibilityRole = 'link', accessibilityLabel, accessibilityHint, children, fullWidth = false, inverted = false, onPress, testID, iconLeft, iconRight, standalone = false, badgeVariant = 'info', badgeText, hint, ref, ...rest }) => {
-    const { smallAndUp } = useBreakpoint();
-    return (_jsxs(ActionWrapper, { ref: ref, accessibilityRole: accessibilityRole, accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint, fullWidth: fullWidth, inverted: inverted, onPress: onPress, testID: testID, standalone: standalone, hint: hint, badgeText: badgeText, ...rest, children: [iconLeft ? (_jsx(StyledLeftIcon, { inverted: inverted, name: iconLeft, size: 16 })) : null, _jsxs(View, { children: [typeof children === 'string' ? (_jsxs(StyledTextWrapper, { children: [_jsx(StyledActionText, { smallAndUp: smallAndUp, inverted: inverted, children: children }), badgeText ? (_jsx(Badge, { variant: badgeVariant, children: badgeText })) : null] })) : (_jsx(StyledActionNodeWrapper, { children: children })), hint ? (_jsx(StyledHintText, { inverted: inverted, children: hint })) : null] }), iconRight ? (_jsx(StyledRightIcon, { inverted: inverted, name: iconRight, size: 16 })) : null] }));
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActionList = exports.Action = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const hooks_1 = require("../../hooks");
+const utils_1 = require("../../utils");
+const Badge_1 = require("../Badge");
+const styled_1 = require("./styled");
+const ActionList = (_a) => {
+    var { children, inverted, borderBottom } = _a, rest = __rest(_a, ["children", "inverted", "borderBottom"]);
+    const validChildren = (0, utils_1.getValidChildren)(children);
+    const childCount = react_1.Children.count(validChildren);
+    return ((0, jsx_runtime_1.jsx)(styled_1.StyledActionList, Object.assign({}, rest, { children: react_1.Children.map(validChildren, (child, index) => {
+            var _a, _b;
+            return (0, react_1.cloneElement)(child, {
+                fullWidth: true,
+                index,
+                hasBorder: (childCount > 1 && index !== childCount - 1) || borderBottom,
+                inverted: (_a = child.props.inverted) !== null && _a !== void 0 ? _a : inverted, // prioritise child prop
+                inList: true,
+                iconRight: (_b = child.props.iconRight) !== null && _b !== void 0 ? _b : 'chevron-right-small',
+            });
+        }) })));
 };
-export { Action, ActionList };
+exports.ActionList = ActionList;
+const ActionWrapper = (_a) => {
+    var { children, accessibilityRole, accessibilityLabel, accessibilityHint, activeOpacity = 0.75, fullWidth, hasBorder = false, inverted = false, inList, onPress, testID, standalone = false, ref } = _a, rest = __rest(_a, ["children", "accessibilityRole", "accessibilityLabel", "accessibilityHint", "activeOpacity", "fullWidth", "hasBorder", "inverted", "inList", "onPress", "testID", "standalone", "ref"]);
+    return ((0, jsx_runtime_1.jsx)(styled_1.StyledActionWrapper, Object.assign({ ref: ref, hasBorder: hasBorder, inverted: inverted, testID: testID, inList: inList }, rest, { children: (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { activeOpacity: activeOpacity, accessible: true, accessibilityRole: accessibilityRole, accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint, onPress: onPress, children: (0, jsx_runtime_1.jsx)(styled_1.StyledActionInner, { fullWidth: fullWidth, inList: inList, standalone: standalone, children: children }) }) })));
+};
+const Action = (_a) => {
+    var { accessibilityRole = 'link', accessibilityLabel, accessibilityHint, children, fullWidth = false, inverted = false, onPress, testID, iconLeft, iconRight, standalone = false, badgeVariant = 'info', badgeText, hint, ref } = _a, rest = __rest(_a, ["accessibilityRole", "accessibilityLabel", "accessibilityHint", "children", "fullWidth", "inverted", "onPress", "testID", "iconLeft", "iconRight", "standalone", "badgeVariant", "badgeText", "hint", "ref"]);
+    const { smallAndUp } = (0, hooks_1.useBreakpoint)();
+    return ((0, jsx_runtime_1.jsxs)(ActionWrapper, Object.assign({ ref: ref, accessibilityRole: accessibilityRole, accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint, fullWidth: fullWidth, inverted: inverted, onPress: onPress, testID: testID, standalone: standalone, hint: hint, badgeText: badgeText }, rest, { children: [iconLeft ? ((0, jsx_runtime_1.jsx)(styled_1.StyledLeftIcon, { inverted: inverted, name: iconLeft, size: 16 })) : null, (0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [typeof children === 'string' ? ((0, jsx_runtime_1.jsxs)(styled_1.StyledTextWrapper, { children: [(0, jsx_runtime_1.jsx)(styled_1.StyledActionText, { smallAndUp: smallAndUp, inverted: inverted, children: children }), badgeText ? ((0, jsx_runtime_1.jsx)(Badge_1.Badge, { variant: badgeVariant, children: badgeText })) : null] })) : ((0, jsx_runtime_1.jsx)(styled_1.StyledActionNodeWrapper, { children: children })), hint ? ((0, jsx_runtime_1.jsx)(styled_1.StyledHintText, { inverted: inverted, children: hint })) : null] }), iconRight ? ((0, jsx_runtime_1.jsx)(styled_1.StyledRightIcon, { inverted: inverted, name: iconRight, size: 16 })) : null] })));
+};
+exports.Action = Action;

package/dist/components/ActionList/index.js

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

package/dist/components/ActionList/styled.js

@@ -1,72 +1,108 @@
-import { numToPx } from '@ovotech/element-core';
-import styled, { css } from '../../styled.native';
-import { styledComponentWithBreakpoints } from '../../utils';
-import { HintText } from '../HintText';
-import { Icon } from '../Icon';
-const StyledList = styled.View(({ theme, smallAndUp }) => 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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledHintText = exports.StyledTextWrapper = exports.StyledLeftIcon = exports.StyledRightIcon = exports.StyledActionNodeWrapper = exports.StyledActionText = exports.StyledActionInner = exports.StyledActionWrapper = exports.StyledActionList = void 0;
+const element_core_1 = require("@ovotech/element-core");
+const styled_native_1 = __importStar(require("../../styled.native"));
+const utils_1 = require("../../utils");
+const HintText_1 = require("../HintText");
+const Icon_1 = require("../Icon");
+const StyledList = styled_native_1.default.View(({ theme, smallAndUp }) => (0, styled_native_1.css) `
     flex-direction: column;
-    margin-top: ${numToPx(smallAndUp ? theme.space[300] : theme.space[200])};
-    margin-bottom: ${numToPx(smallAndUp ? theme.space[300] : theme.space[200])};
+    margin-top: ${(0, element_core_1.numToPx)(smallAndUp ? theme.space[300] : theme.space[200])};
+    margin-bottom: ${(0, element_core_1.numToPx)(smallAndUp ? theme.space[300] : theme.space[200])};
   `);
-export const StyledActionList = styledComponentWithBreakpoints(StyledList);
-export const StyledActionWrapper = styled.View(({ theme, hasBorder, inverted, inList, hint, badgeText }) => css `
+exports.StyledActionList = (0, utils_1.styledComponentWithBreakpoints)(StyledList);
+exports.StyledActionWrapper = styled_native_1.default.View(({ theme, hasBorder, inverted, inList, hint, badgeText }) => (0, styled_native_1.css) `
     width: 100%;
     align-self: flex-start;
-    border-bottom-width: ${hasBorder ? numToPx(theme.border.width.sm) : 0};
+    border-bottom-width: ${hasBorder ? (0, element_core_1.numToPx)(theme.border.width.sm) : 0};
     border-bottom-style: solid;
     border-bottom-color: ${inverted
     ? theme.color.surface.dim
     : theme.color.brand.fixed.onBrand};
-    padding: ${inList && (hint || badgeText) ? numToPx(theme.space[200]) : 0} 0;
+    padding: ${inList && (hint || badgeText) ? (0, element_core_1.numToPx)(theme.space[200]) : 0} 0;
   `);
-export const StyledActionInner = styled.View(({ fullWidth, standalone }) => css `
+exports.StyledActionInner = styled_native_1.default.View(({ fullWidth, standalone }) => (0, styled_native_1.css) `
     flex-direction: row;
     justify-content: ${fullWidth ? 'space-between' : 'flex-start'};
     align-items: center;
     min-height: ${standalone ? '' : '44px'};
   `);
-export const StyledActionText = styled.Text(({ theme, smallAndUp, inverted = false }) => {
+exports.StyledActionText = styled_native_1.default.Text(({ theme, smallAndUp, inverted = false }) => {
     const fontSize = smallAndUp
         ? theme.font.size.md.mediaQuery.lg
         : theme.font.size.md.mediaQuery.sm;
-    return css `
+    return (0, styled_native_1.css) `
     color: ${inverted
         ? theme.color.surface.bright
         : theme.color.surface.onSurface};
     font-family: ${theme.native.font.family.bold};
-    font-size: ${numToPx(fontSize)};
-    line-height: ${numToPx(theme.font.lineHeight.md.mediaQuery.sm)};
+    font-size: ${(0, element_core_1.numToPx)(fontSize)};
+    line-height: ${(0, element_core_1.numToPx)(theme.font.lineHeight.md.mediaQuery.sm)};
   `;
 });
-export const StyledActionNodeWrapper = styled.View `
+exports.StyledActionNodeWrapper = styled_native_1.default.View `
   display: flex;
   flex: 1;
   flex-direction: row;
 `;
-export const StyledRightIcon = styled(Icon)(({ theme, inverted }) => {
-    return css `
+exports.StyledRightIcon = (0, styled_native_1.default)(Icon_1.Icon)(({ theme, inverted }) => {
+    return (0, styled_native_1.css) `
     color: ${inverted
         ? theme.color.surface.bright
         : theme.color.surface.onSurface};
-    margin-left: ${numToPx(theme.space[100])};
+    margin-left: ${(0, element_core_1.numToPx)(theme.space[100])};
     margin-top: 2px; /* compensation for the line-height of the text */
   `;
 });
-export const StyledLeftIcon = styled(Icon)(({ theme, inverted, }) => {
-    return css `
+exports.StyledLeftIcon = (0, styled_native_1.default)(Icon_1.Icon)(({ theme, inverted, }) => {
+    return (0, styled_native_1.css) `
     color: ${inverted
         ? theme.color.surface.bright
         : theme.color.surface.onSurface};
-    margin-right: ${numToPx(theme.space[100])};
+    margin-right: ${(0, element_core_1.numToPx)(theme.space[100])};
   `;
 });
-export const StyledTextWrapper = styled.View(({ theme }) => css `
+exports.StyledTextWrapper = styled_native_1.default.View(({ theme }) => (0, styled_native_1.css) `
     flex-direction: row;
     align-items: center;
-    gap: ${numToPx(theme.space[200])};
+    gap: ${(0, element_core_1.numToPx)(theme.space[200])};
   `);
-export const StyledHintText = styled(HintText)(({ theme, inverted = false }) => {
-    return css `
+exports.StyledHintText = (0, styled_native_1.default)(HintText_1.HintText)(({ theme, inverted = false }) => {
+    return (0, styled_native_1.css) `
     color: ${inverted
         ? theme.color.surface.bright
         : theme.color.surface.onSurfaceVariant};

package/dist/components/Badge/Badge.js

@@ -1,22 +1,70 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { numToPx } from '@ovotech/element-core';
-import styled, { css, useTheme } from '../../styled.native';
-const StyledBadge = styled.View(({ inverted, theme, $surface, $message }) => css `
-    padding: ${numToPx(theme.space[50])} ${numToPx(theme.space[200])}
-      ${numToPx(theme.space[100])} ${numToPx(theme.space[200])};
+"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.Badge = 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 StyledBadge = styled_native_1.default.View(({ inverted, theme, $surface, $message }) => (0, styled_native_1.css) `
+    padding: ${(0, element_core_1.numToPx)(theme.space[50])} ${(0, element_core_1.numToPx)(theme.space[200])}
+      ${(0, element_core_1.numToPx)(theme.space[100])} ${(0, element_core_1.numToPx)(theme.space[200])};
     border-radius: 16px;
-    border: ${numToPx(theme.border.width.md)} solid ${theme.color.brand.onBrand};
+    border: ${(0, element_core_1.numToPx)(theme.border.width.md)} solid ${theme.color.brand.onBrand};
     background-color: ${inverted ? $message : $surface};
     align-self: flex-start;
   `);
-const StyledBadgeText = styled.Text(({ inverted, theme, $surface, $message }) => css `
+const StyledBadgeText = styled_native_1.default.Text(({ inverted, theme, $surface, $message }) => (0, styled_native_1.css) `
     font-family: ${theme.native.font.family.bold};
-    line-height: ${numToPx(theme.font.lineHeight.md.mediaQuery.sm)};
+    line-height: ${(0, element_core_1.numToPx)(theme.font.lineHeight.md.mediaQuery.sm)};
     color: ${inverted ? $surface : $message};
-    font-size: ${numToPx(theme.font.size.md.mediaQuery.sm)};
+    font-size: ${(0, element_core_1.numToPx)(theme.font.size.md.mediaQuery.sm)};
   `);
-export const Badge = ({ children, variant = 'neutral', inverted = false, customVariant, ...rest }) => {
-    const theme = useTheme();
+const Badge = (_a) => {
+    var { children, variant = 'neutral', inverted = false, customVariant } = _a, rest = __rest(_a, ["children", "variant", "inverted", "customVariant"]);
+    const theme = (0, styled_native_1.useTheme)();
     // check if variant is primitive, otherwise use alert colours
     const isPrimitive = Object.keys(theme.color).includes(variant);
     let message = isPrimitive
@@ -29,10 +77,11 @@ export const Badge = ({ children, variant = 'neutral', inverted = false, customV
             theme.color[variant]['20']
         : // @ts-ignore we're checking the variants above...
             theme.color.alert[`${variant}Tint`];
-    if (customVariant?.backgroundColor !== undefined &&
-        customVariant?.color !== undefined) {
+    if ((customVariant === null || customVariant === void 0 ? void 0 : customVariant.backgroundColor) !== undefined &&
+        (customVariant === null || customVariant === void 0 ? void 0 : customVariant.color) !== undefined) {
         message = customVariant.color;
         surface = customVariant.backgroundColor;
     }
-    return (_jsx(StyledBadge, { inverted: inverted, "$surface": surface, "$message": message, ...rest, children: _jsx(StyledBadgeText, { inverted: inverted, "$surface": surface, "$message": message, children: children }) }));
+    return ((0, jsx_runtime_1.jsx)(StyledBadge, Object.assign({ inverted: inverted, "$surface": surface, "$message": message }, rest, { children: (0, jsx_runtime_1.jsx)(StyledBadgeText, { inverted: inverted, "$surface": surface, "$message": message, children: children }) })));
 };
+exports.Badge = Badge;

package/dist/components/Badge/index.js

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

package/dist/components/Button/Button.js

@@ -1,9 +1,24 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useBreakpoint } from '../../hooks';
-import { StyledButtonIcon, StyledButtonText, StyledButtonWrapper, StyledInner, } from './Button.styles';
-export const DEFAULT_BUTTON_VARIANT = 'surface';
-const Button = ({ iconLeft, iconRight, children, fullWidth = false, variant = DEFAULT_BUTTON_VARIANT, inverted = false, size = 'default', accessibilityRole = 'button', activeOpacity = 0.8, ref, ...rest }) => {
-    const { smallAndUp } = useBreakpoint();
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonDestructive = exports.Button = exports.DEFAULT_BUTTON_VARIANT = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const hooks_1 = require("../../hooks");
+const Button_styles_1 = require("./Button.styles");
+exports.DEFAULT_BUTTON_VARIANT = 'surface';
+const Button = (_a) => {
+    var { iconLeft, iconRight, children, fullWidth = false, variant = exports.DEFAULT_BUTTON_VARIANT, inverted = false, size = 'default', accessibilityRole = 'button', activeOpacity = 0.8, ref } = _a, rest = __rest(_a, ["iconLeft", "iconRight", "children", "fullWidth", "variant", "inverted", "size", "accessibilityRole", "activeOpacity", "ref"]);
+    const { smallAndUp } = (0, hooks_1.useBreakpoint)();
     const isIconOnly = !children;
     const iconSizes = {
         small: 14,
@@ -11,7 +26,8 @@ const Button = ({ iconLeft, iconRight, children, fullWidth = false, variant = DE
         large: 20,
     };
     const iconSize = iconSizes[size];
-    return (_jsx(StyledButtonWrapper, { accessible: true, accessibilityRole: accessibilityRole, activeOpacity: activeOpacity, ...rest, ref: ref, children: _jsxs(StyledInner, { fullWidth: fullWidth, variant: variant, inverted: inverted, size: size, iconLeft: iconLeft, iconRight: iconRight, iconOnly: isIconOnly, children: [iconLeft && (_jsx(StyledButtonIcon, { iconLeft: true, iconOnly: isIconOnly, name: iconLeft, inverted: inverted, variant: variant, size: iconSize })), children ? (_jsx(StyledButtonText, { smallAndUp: smallAndUp, variant: variant, inverted: inverted, size: size, children: children })) : null, iconRight && (_jsx(StyledButtonIcon, { iconRight: true, iconOnly: isIconOnly, name: iconRight, inverted: inverted, variant: variant, size: iconSize }))] }) }));
+    return ((0, jsx_runtime_1.jsx)(Button_styles_1.StyledButtonWrapper, Object.assign({ accessible: true, accessibilityRole: accessibilityRole, activeOpacity: activeOpacity }, rest, { ref: ref, children: (0, jsx_runtime_1.jsxs)(Button_styles_1.StyledInner, { fullWidth: fullWidth, variant: variant, inverted: inverted, size: size, iconLeft: iconLeft, iconRight: iconRight, iconOnly: isIconOnly, children: [iconLeft && ((0, jsx_runtime_1.jsx)(Button_styles_1.StyledButtonIcon, { iconLeft: true, iconOnly: isIconOnly, name: iconLeft, inverted: inverted, variant: variant, size: iconSize })), children ? ((0, jsx_runtime_1.jsx)(Button_styles_1.StyledButtonText, { smallAndUp: smallAndUp, variant: variant, inverted: inverted, size: size, children: children })) : null, iconRight && ((0, jsx_runtime_1.jsx)(Button_styles_1.StyledButtonIcon, { iconRight: true, iconOnly: isIconOnly, name: iconRight, inverted: inverted, variant: variant, size: iconSize }))] }) })));
 };
-const ButtonDestructive = (props) => (_jsx(Button, { variant: "destructive", ...props }));
-export { Button, ButtonDestructive };
+exports.Button = Button;
+const ButtonDestructive = (props) => ((0, jsx_runtime_1.jsx)(Button, Object.assign({ variant: "destructive" }, props)));
+exports.ButtonDestructive = ButtonDestructive;

package/dist/components/Button/Button.styles.js

@@ -1,13 +1,49 @@
-import { numToPx } from '@ovotech/element-core';
-import styled, { css } from '../../styled.native';
-import { Icon } from '../Icon/Icon';
-export const StyledButtonWrapper = styled.TouchableOpacity `
+"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.StyledButtonText = exports.StyledButtonIcon = exports.StyledInner = exports.StyledButtonWrapper = void 0;
+const element_core_1 = require("@ovotech/element-core");
+const styled_native_1 = __importStar(require("../../styled.native"));
+const Icon_1 = require("../Icon/Icon");
+exports.StyledButtonWrapper = styled_native_1.default.TouchableOpacity `
   align-self: flex-start;
   flex-direction: row;
   align-items: flex-start;
 `;
-export const StyledInner = styled.View(({ theme, fullWidth, inverted, variant, size, iconOnly, iconRight, iconLeft, }) => {
-    const borderRadius = numToPx(theme.border.radius['3xl']);
+exports.StyledInner = styled_native_1.default.View(({ theme, fullWidth, inverted, variant, size, iconOnly, iconRight, iconLeft, }) => {
+    const borderRadius = (0, element_core_1.numToPx)(theme.border.radius['3xl']);
     const backgroundColor = getBackgroundColor(theme, variant, inverted);
     const borderColor = getBorderColor(theme, variant, inverted);
     const minHeights = {
@@ -15,34 +51,34 @@ export const StyledInner = styled.View(({ theme, fullWidth, inverted, variant, s
         small: theme.space[800],
         large: theme.border.radius['3xl'] * 2 - theme.border.width.sm * 2,
     };
-    const minHeight = minHeights[size];
+    const minHeight = (0, element_core_1.numToPx)(minHeights[size]);
     let top, right, bottom, left;
     if (size === 'default') {
-        top = numToPx(theme.space[100]);
-        bottom = numToPx(theme.space[100]);
-        right = numToPx(theme.space[iconRight ? 300 : 500]);
-        left = numToPx(theme.space[iconLeft ? 300 : 500]);
+        top = (0, element_core_1.numToPx)(theme.space[100]);
+        bottom = (0, element_core_1.numToPx)(theme.space[100]);
+        right = (0, element_core_1.numToPx)(theme.space[iconRight ? 300 : 500]);
+        left = (0, element_core_1.numToPx)(theme.space[iconLeft ? 300 : 500]);
     }
     else if (size === 'small') {
-        top = numToPx(theme.space[50]);
-        bottom = numToPx(theme.space[50]);
-        right = numToPx(theme.space[iconRight ? 200 : 300]);
-        left = numToPx(theme.space[iconLeft ? 200 : 300]);
+        top = (0, element_core_1.numToPx)(theme.space[50]);
+        bottom = (0, element_core_1.numToPx)(theme.space[50]);
+        right = (0, element_core_1.numToPx)(theme.space[iconRight ? 200 : 300]);
+        left = (0, element_core_1.numToPx)(theme.space[iconLeft ? 200 : 300]);
     }
     else {
-        top = numToPx(theme.space[200]);
-        bottom = numToPx(theme.space[200]);
-        right = numToPx(theme.space[iconRight ? 500 : 800]);
-        left = numToPx(theme.space[iconLeft ? 500 : 800]);
+        top = (0, element_core_1.numToPx)(theme.space[200]);
+        bottom = (0, element_core_1.numToPx)(theme.space[200]);
+        right = (0, element_core_1.numToPx)(theme.space[iconRight ? 500 : 800]);
+        left = (0, element_core_1.numToPx)(theme.space[iconLeft ? 500 : 800]);
     }
     const padding = `${top} ${right} ${bottom} ${left}`;
-    return css `
+    return (0, styled_native_1.css) `
       padding: ${iconOnly ? '0' : padding};
       background-color: ${backgroundColor};
       border-radius: ${borderRadius};
       min-height: ${minHeight};
       border-style: solid;
-      border-width: ${numToPx(theme.border.width.md)};
+      border-width: ${(0, element_core_1.numToPx)(theme.border.width.md)};
       border-color: ${borderColor};
       justify-content: center;
       align-items: center;
@@ -51,15 +87,15 @@ export const StyledInner = styled.View(({ theme, fullWidth, inverted, variant, s
       min-width: ${iconOnly ? minHeight : 'auto'};
     `;
 });
-export const StyledButtonIcon = styled(Icon)(({ theme, inverted, variant, iconLeft, iconRight, iconOnly }) => {
+exports.StyledButtonIcon = (0, styled_native_1.default)(Icon_1.Icon)(({ theme, inverted, variant, iconLeft, iconRight, iconOnly }) => {
     const color = getIconColor(theme, inverted, variant);
-    return css `
-    margin-left: ${iconRight && !iconOnly ? numToPx(theme.space[100]) : '0'};
-    margin-right: ${iconLeft && !iconOnly ? numToPx(theme.space[100]) : '0'};
+    return (0, styled_native_1.css) `
+    margin-left: ${iconRight && !iconOnly ? (0, element_core_1.numToPx)(theme.space[100]) : '0'};
+    margin-right: ${iconLeft && !iconOnly ? (0, element_core_1.numToPx)(theme.space[100]) : '0'};
     color: ${color};
   `;
 });
-export const StyledButtonText = styled.Text(({ theme, smallAndUp, inverted, variant, size }) => {
+exports.StyledButtonText = styled_native_1.default.Text(({ theme, smallAndUp, inverted, variant, size }) => {
     const fontSizes = {
         default: smallAndUp
             ? theme.font.size.lg.mediaQuery.sm
@@ -69,11 +105,11 @@ export const StyledButtonText = styled.Text(({ theme, smallAndUp, inverted, vari
     };
     const fontSize = fontSizes[size];
     const color = getTextColor(theme, inverted, variant);
-    return css `
+    return (0, styled_native_1.css) `
     color: ${color};
     font-family: ${theme.native.font.family.bold};
-    font-size: ${numToPx(fontSize)};
-    line-height: ${numToPx(theme.font.lineHeight.md.mediaQuery.sm)};
+    font-size: ${(0, element_core_1.numToPx)(fontSize)};
+    line-height: ${(0, element_core_1.numToPx)(theme.font.lineHeight.md.mediaQuery.sm)};
     text-align: center;
     flex-shrink: 2;
   `;

package/dist/components/Button/index.js

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