@ovotech/element-native 5.4.3-canary-958358a-434 → 5.4.3

package/dist/components/ActionCard/IndicatorIconShape.js

@@ -1,47 +1,7 @@
-"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}
+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}
 `);
-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;
+export const IndicatorIconShape = ({ color }) => (_jsx(Svg, { width: 32, height: 48, children: _jsx(StyledPath, { color: color, d: "M0 9.5 32 1v47H10.5L0 9.5Z" }) }));

package/dist/components/ActionCard/index.js

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

package/dist/components/ActionList/ActionList.js

@@ -1,48 +1,25 @@
-"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;
+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',
+        })) }));
 };
-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',
-            });
-        }) })));
+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] }));
 };
-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;
+export { Action, ActionList };

package/dist/components/ActionList/index.js

@@ -1,6 +1 @@
-"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; } });
+export { Action, ActionList } from './ActionList';

package/dist/components/ActionList/styled.js

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

package/dist/components/Badge/Badge.js

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

package/dist/components/Badge/index.js

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

package/dist/components/Button/Button.js

@@ -1,24 +1,9 @@
-"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)();
+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();
     const isIconOnly = !children;
     const iconSizes = {
         small: 14,
@@ -26,8 +11,7 @@ const Button = (_a) => {
         large: 20,
     };
     const iconSize = iconSizes[size];
-    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 }))] }) })));
+    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 }))] }) }));
 };
-exports.Button = Button;
-const ButtonDestructive = (props) => ((0, jsx_runtime_1.jsx)(Button, Object.assign({ variant: "destructive" }, props)));
-exports.ButtonDestructive = ButtonDestructive;
+const ButtonDestructive = (props) => (_jsx(Button, { variant: "destructive", ...props }));
+export { Button, ButtonDestructive };

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

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

package/dist/components/Button/index.js

@@ -1,6 +1 @@
-"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; } });
+export { Button, ButtonDestructive } from './Button';