@ovotech/element-native 4.4.8 → 4.4.9

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

@@ -0,0 +1,104 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledButtonText = exports.StyledButtonIcon = exports.StyledInner = exports.StyledButtonWrapper = void 0;
+var element_core_1 = require("@ovotech/element-core");
+var styled_native_1 = __importStar(require("../../styled.native"));
+var Icon_1 = require("../Icon/Icon");
+exports.StyledButtonWrapper = styled_native_1.default.TouchableOpacity(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-self: flex-start;\n  flex-direction: row;\n  align-items: flex-start;\n"], ["\n  align-self: flex-start;\n  flex-direction: row;\n  align-items: flex-start;\n"])));
+exports.StyledInner = styled_native_1.default.View(function (_a) {
+    var theme = _a.theme, fullWidth = _a.fullWidth, inverted = _a.inverted, variant = _a.variant, size = _a.size, iconOnly = _a.iconOnly, iconRight = _a.iconRight, iconLeft = _a.iconLeft;
+    var borderRadius = (0, element_core_1.numToPx)(theme.border.radius['3xl']);
+    var backgroundColor = getBackgroundColor(theme, variant, inverted);
+    var borderColor = getBorderColor(theme, variant, inverted);
+    var minHeight = size === 'default'
+        ? (0, element_core_1.numToPx)(theme.space[1100])
+        : (0, element_core_1.numToPx)(theme.border.radius['3xl'] * 2 - theme.border.width.sm * 2);
+    var 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]);
+    }
+    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]);
+    }
+    var padding = "".concat(top, " ").concat(right, " ").concat(bottom, " ").concat(left);
+    return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      padding: ", ";\n      background-color: ", ";\n      border-radius: ", ";\n      min-height: ", ";\n      border-style: solid;\n      border-width: ", ";\n      border-color: ", ";\n      justify-content: center;\n      align-items: center;\n      flex-direction: row;\n      flex-grow: ", ";\n      min-width: ", ";\n    "], ["\n      padding: ", ";\n      background-color: ", ";\n      border-radius: ", ";\n      min-height: ", ";\n      border-style: solid;\n      border-width: ", ";\n      border-color: ", ";\n      justify-content: center;\n      align-items: center;\n      flex-direction: row;\n      flex-grow: ", ";\n      min-width: ", ";\n    "])), iconOnly ? '0' : padding, backgroundColor, borderRadius, minHeight, (0, element_core_1.numToPx)(theme.border.width.md), borderColor, fullWidth ? '1' : '0', iconOnly ? minHeight : 'auto');
+});
+exports.StyledButtonIcon = (0, styled_native_1.default)(Icon_1.Icon)(function (_a) {
+    var theme = _a.theme, inverted = _a.inverted, variant = _a.variant, iconLeft = _a.iconLeft, iconRight = _a.iconRight, iconOnly = _a.iconOnly;
+    var color = getIconColor(theme, inverted, variant);
+    return (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    margin-left: ", ";\n    margin-right: ", ";\n    color: ", ";\n  "], ["\n    margin-left: ", ";\n    margin-right: ", ";\n    color: ", ";\n  "])), iconRight && !iconOnly ? (0, element_core_1.numToPx)(theme.space[100]) : '0', iconLeft && !iconOnly ? (0, element_core_1.numToPx)(theme.space[100]) : '0', color);
+});
+exports.StyledButtonText = styled_native_1.default.Text(function (_a) {
+    var theme = _a.theme, smallAndUp = _a.smallAndUp, inverted = _a.inverted, variant = _a.variant, size = _a.size;
+    var fontSize = smallAndUp || size === 'large'
+        ? theme.font.size.lg.mediaQuery.sm
+        : theme.font.size.md.mediaQuery.sm;
+    var color = getTextColor(theme, inverted, variant);
+    return (0, styled_native_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    color: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    text-align: center;\n    flex-shrink: 2;\n  "], ["\n    color: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    text-align: center;\n    flex-shrink: 2;\n  "])), color, theme.native.font.family.bold, (0, element_core_1.numToPx)(fontSize), (0, element_core_1.numToPx)(theme.font.lineHeight.md.mediaQuery.sm));
+});
+// Helper functions
+var getBackgroundColor = function (theme, variant, inverted) {
+    var button = theme.button;
+    if (variant === 'outline' || variant === 'outline-variant') {
+        return 'transparent';
+    }
+    return inverted ? button.surface.color.bgInverted : button[variant].color.bg;
+};
+var getBorderColor = function (theme, variant, inverted) {
+    var button = theme.button;
+    if (variant === 'outline') {
+        return inverted ? button.surface.color.bgVariant : button.surface.color.bg;
+    }
+    if (variant === 'outline-variant') {
+        return button.surface.color.bgVariant;
+    }
+    return inverted ? button.surface.color.bgVariant : button[variant].color.bg;
+};
+var getIconColor = function (theme, inverted, variant) {
+    var button = theme.button;
+    if (variant === 'outline' || variant === 'outline-variant') {
+        return inverted ? button.surface.color.bgInverted : button.surface.color.bg;
+    }
+    return inverted ? button.surface.color.fgInverted : button[variant].color.fg;
+};
+var getTextColor = function (theme, inverted, variant) {
+    var button = theme.button;
+    if (variant === 'outline' || variant === 'outline-variant') {
+        return inverted ? button.surface.color.bgInverted : button.surface.color.bg;
+    }
+    return inverted ? button.surface.color.fgInverted : button[variant].color.fg;
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -0,0 +1 @@
+export { Button, ButtonDestructive, type ButtonVariantName } from './Button';

package/dist/components/Button/index.js

@@ -0,0 +1,6 @@
+"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; } });

package/dist/components/Display/Display.d.ts

@@ -0,0 +1,15 @@
+import { PropsWithChildren } from 'react';
+import { TextProps } from 'react-native';
+type DisplayBaseProps = {
+    inverted?: boolean;
+    level?: '1' | '2' | '3' | '4';
+    variant?: 'brand' | 'surface';
+};
+type DisplayProps = TextProps & DisplayBaseProps;
+type DisplaySubComponentProps = Omit<DisplayProps, 'level'>;
+export declare const Display: ({ accessibilityRole, level, variant, ...rest }: PropsWithChildren<DisplayProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const Display1: (props: PropsWithChildren<DisplaySubComponentProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const Display2: (props: PropsWithChildren<DisplaySubComponentProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const Display3: (props: PropsWithChildren<DisplaySubComponentProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const Display4: (props: PropsWithChildren<DisplaySubComponentProps>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Display/Display.js

@@ -0,0 +1,84 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Display4 = exports.Display3 = exports.Display2 = exports.Display1 = exports.Display = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var element_core_1 = require("@ovotech/element-core");
+var hooks_1 = require("../../hooks");
+var styled_native_1 = __importStar(require("../../styled.native"));
+var StyledDisplay = styled_native_1.default.Text(function (_a) {
+    var theme = _a.theme, smallAndUp = _a.smallAndUp, inverted = _a.inverted, level = _a.level, variant = _a.variant;
+    var tokenKey = "d".concat(level);
+    var fontSize = (0, element_core_1.numToPx)(theme.font.size[tokenKey].mediaQuery[smallAndUp ? 'lg' : 'sm']);
+    var lineHeight = (0, element_core_1.numToPx)(theme.font.lineHeight[tokenKey].mediaQuery[smallAndUp ? 'lg' : 'sm']);
+    var letterSpacing = (0, element_core_1.numToPx)(theme.font.letterSpacing[tokenKey].mediaQuery[smallAndUp ? 'lg' : 'sm']);
+    var color = inverted
+        ? theme.color.brand.onBrand
+        : variant === 'surface'
+            ? theme.color.surface.onSurface
+            : theme.color.brand.brand;
+    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "], ["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "])), theme.native.font.family.black, fontSize, lineHeight, letterSpacing, color);
+});
+var Display = function (_a) {
+    var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'header' : _b, level = _a.level, _c = _a.variant, variant = _c === void 0 ? 'brand' : _c, rest = __rest(_a, ["accessibilityRole", "level", "variant"]);
+    var breakpoints = (0, hooks_1.useBreakpoint)();
+    return ((0, jsx_runtime_1.jsx)(StyledDisplay, __assign({ accessible: true, accessibilityRole: accessibilityRole, level: level, variant: variant }, breakpoints, rest)));
+};
+exports.Display = Display;
+var Display1 = function (props) { return (0, jsx_runtime_1.jsx)(exports.Display, __assign({}, props, { level: "1" })); };
+exports.Display1 = Display1;
+var Display2 = function (props) { return (0, jsx_runtime_1.jsx)(exports.Display, __assign({}, props, { level: "2" })); };
+exports.Display2 = Display2;
+var Display3 = function (props) { return (0, jsx_runtime_1.jsx)(exports.Display, __assign({}, props, { level: "3" })); };
+exports.Display3 = Display3;
+var Display4 = function (props) { return (0, jsx_runtime_1.jsx)(exports.Display, __assign({}, props, { level: "4" })); };
+exports.Display4 = Display4;
+var templateObject_1;

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

@@ -0,0 +1 @@
+export { Display, Display1, Display2, Display3, Display4 } from './Display';

package/dist/components/Display/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Display4 = exports.Display3 = exports.Display2 = exports.Display1 = exports.Display = void 0;
+var Display_1 = require("./Display");
+Object.defineProperty(exports, "Display", { enumerable: true, get: function () { return Display_1.Display; } });
+Object.defineProperty(exports, "Display1", { enumerable: true, get: function () { return Display_1.Display1; } });
+Object.defineProperty(exports, "Display2", { enumerable: true, get: function () { return Display_1.Display2; } });
+Object.defineProperty(exports, "Display3", { enumerable: true, get: function () { return Display_1.Display3; } });
+Object.defineProperty(exports, "Display4", { enumerable: true, get: function () { return Display_1.Display4; } });

package/dist/components/Heading/Heading.d.ts

@@ -0,0 +1,12 @@
+import { PropsWithChildren } from 'react';
+import { TextProps } from 'react-native';
+type HeadingProps = {
+    inverted?: boolean;
+    level: 'xl' | '2xl' | '3xl' | '4xl';
+    variant?: 'brand' | 'surface';
+};
+export declare const Heading1: (props: PropsWithChildren<TextProps & Omit<HeadingProps, 'level'>>) => import("react/jsx-runtime").JSX.Element;
+export declare const Heading2: (props: PropsWithChildren<TextProps & Omit<HeadingProps, 'level'>>) => import("react/jsx-runtime").JSX.Element;
+export declare const Heading3: (props: PropsWithChildren<TextProps & Omit<HeadingProps, 'level'>>) => import("react/jsx-runtime").JSX.Element;
+export declare const Heading4: (props: PropsWithChildren<TextProps & Omit<HeadingProps, 'level'>>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Heading/Heading.js

@@ -0,0 +1,84 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Heading4 = exports.Heading3 = exports.Heading2 = exports.Heading1 = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var element_core_1 = require("@ovotech/element-core");
+var hooks_1 = require("../../hooks");
+var styled_native_1 = __importStar(require("../../styled.native"));
+var StyledHeading = styled_native_1.default.Text(function (_a) {
+    var theme = _a.theme, smallAndUp = _a.smallAndUp, inverted = _a.inverted, level = _a.level, variant = _a.variant;
+    var fontSize = theme.font.size[level].mediaQuery[smallAndUp ? 'lg' : 'sm'];
+    var lineHeight = (0, element_core_1.numToPx)(theme.font.lineHeight[level].mediaQuery[smallAndUp ? 'lg' : 'sm']);
+    var letterSpacing = (0, element_core_1.numToPx)(theme.font.letterSpacing[level].mediaQuery[smallAndUp ? 'lg' : 'sm']);
+    var color = inverted
+        ? theme.color.brand.onBrand
+        : variant === 'surface'
+            ? theme.color.surface.onSurface
+            : theme.color.brand.brand;
+    // H1 & H2 are black, others bold
+    var family = level === 'xl' || level === '2xl' ? 'bold' : 'black';
+    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "], ["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "])), theme.native.font.family[family], (0, element_core_1.numToPx)(fontSize), lineHeight, letterSpacing, color);
+});
+var Heading = function (_a) {
+    var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'header' : _b, rest = __rest(_a, ["accessibilityRole"]);
+    var breakpoints = (0, hooks_1.useBreakpoint)();
+    return ((0, jsx_runtime_1.jsx)(StyledHeading, __assign({ accessible: true, accessibilityRole: accessibilityRole }, breakpoints, rest)));
+};
+var Heading1 = function (props) { return (0, jsx_runtime_1.jsx)(Heading, __assign({}, props, { level: "4xl" })); };
+exports.Heading1 = Heading1;
+var Heading2 = function (props) { return (0, jsx_runtime_1.jsx)(Heading, __assign({}, props, { level: "3xl" })); };
+exports.Heading2 = Heading2;
+var Heading3 = function (props) { return (0, jsx_runtime_1.jsx)(Heading, __assign({}, props, { level: "2xl" })); };
+exports.Heading3 = Heading3;
+var Heading4 = function (props) { return (0, jsx_runtime_1.jsx)(Heading, __assign({}, props, { level: "xl" })); };
+exports.Heading4 = Heading4;
+var templateObject_1;

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

@@ -0,0 +1 @@
+export { Heading1, Heading2, Heading3, Heading4 } from './Heading';

package/dist/components/Heading/index.js

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

package/dist/components/Link/Link.d.ts

@@ -0,0 +1,15 @@
+import { ComponentProps, Ref } from 'react';
+import { TouchableOpacity, Text, TextProps } from 'react-native';
+import { Button } from '../Button';
+type LinkProps = Omit<ComponentProps<typeof Button>, 'ref'> & {
+    ref: Ref<TouchableOpacity>;
+};
+declare const Link: import("react").ForwardRefExoticComponent<Omit<LinkProps, "ref"> & import("react").RefAttributes<TouchableOpacity>>;
+type LinkAdditionalProps = {
+    inline?: boolean;
+    opensInNewWindow?: boolean;
+};
+declare const TextLink: import("react").ForwardRefExoticComponent<TextProps & LinkAdditionalProps & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<Text>>;
+export { TextLink, Link };

package/dist/components/Link/Link.js

@@ -0,0 +1,78 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Link = exports.TextLink = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var styled_native_1 = __importStar(require("../../styled.native"));
+var utils_1 = require("../../utils/utils");
+var Button_1 = require("../Button");
+var Icon_1 = require("../Icon");
+var element_core_1 = require("@ovotech/element-core");
+var Link = (0, react_1.forwardRef)(function (props, ref) { return (0, jsx_runtime_1.jsx)(Button_1.Button, __assign({}, props, { ref: ref })); });
+exports.Link = Link;
+var StyledText = styled_native_1.default.Text(function (_a) {
+    var theme = _a.theme;
+    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    color: ", ";\n    text-decoration: underline;\n    text-decoration-color: ", ";\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    color: ", ";\n    text-decoration: underline;\n    text-decoration-color: ", ";\n  "])), theme.native.font.family.book, (0, element_core_1.numToPx)(theme.font.size.md.mediaQuery.sm), theme.color.surface.link, theme.color.surface.link);
+});
+var StyledIcon = (0, styled_native_1.default)(Icon_1.Icon)(function (_a) {
+    var theme = _a.theme;
+    return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    color: ", ";\n  "], ["\n    color: ", ";\n  "])), theme.color.surface.link);
+});
+var TextLink = (0, react_1.forwardRef)(function (_a, ref) {
+    var children = _a.children, _b = _a.opensInNewWindow, opensInNewWindow = _b === void 0 ? false : _b, accessibilityLabel = _a.accessibilityLabel, rest = __rest(_a, ["children", "opensInNewWindow", "accessibilityLabel"]);
+    var updatedAccessibilityLabel = opensInNewWindow
+        ? "".concat(accessibilityLabel ? accessibilityLabel : (0, utils_1.getText)(children), " (opens in new window)")
+        : accessibilityLabel;
+    return ((0, jsx_runtime_1.jsxs)(StyledText, __assign({}, rest, { accessibilityLabel: updatedAccessibilityLabel, ref: ref, children: [(0, jsx_runtime_1.jsx)(StyledText, { children: children }), opensInNewWindow && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["\u00A0", (0, jsx_runtime_1.jsx)(StyledIcon, { size: 12, name: "new-window" })] }))] })));
+});
+exports.TextLink = TextLink;
+var templateObject_1, templateObject_2;

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

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

package/dist/components/Link/index.js

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

package/dist/components/Pictogram/Pictogram.d.ts

@@ -0,0 +1,8 @@
+import { SvgProps } from 'react-native-svg';
+import { PictogramNameExtended } from '../../providers';
+export type IconProps = SvgProps & {
+    name: PictogramNameExtended;
+    color?: string;
+    size?: string | number;
+};
+export declare const Pictogram: ({ name, size, color, testID, ...rest }: IconProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Pictogram/Pictogram.js

@@ -0,0 +1,38 @@
+"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 __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.Pictogram = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var providers_1 = require("../../providers");
+var styled_native_1 = require("../../styled.native");
+var Pictogram = function (_a) {
+    var name = _a.name, _b = _a.size, size = _b === void 0 ? '64' : _b, color = _a.color, testID = _a.testID, rest = __rest(_a, ["name", "size", "color", "testID"]);
+    var pictograms = (0, providers_1.usePictograms)();
+    var theme = (0, react_1.useContext)(styled_native_1.ThemeContext);
+    // @ts-ignore to support additional pictograms.
+    var Svg = name && pictograms[name];
+    return Svg ? ((0, jsx_runtime_1.jsx)(Svg, __assign({ testID: testID ? testID : "element-icon".concat(name ? "-".concat(name) : ''), color: color !== null && color !== void 0 ? color : theme.color.brand.brand, width: size, height: size }, rest))) : null;
+};
+exports.Pictogram = Pictogram;

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

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

package/dist/components/Pictogram/index.js

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

package/dist/components/SelectField/Select.js

@@ -80,6 +80,8 @@ var Select = function (_a) {
     var _b = _a.options, options = _b === void 0 ? [] : _b, _c = _a.defaultSelected, defaultSelected = _c === void 0 ? { label: '', value: 'default' } : _c, _d = _a.noOptionMessage, noOptionMessage = _d === void 0 ? 'No option selected' : _d, _e = _a.onSelected, onSelected = _e === void 0 ? function () { return null; } : _e, _f = _a.hasError, hasError = _f === void 0 ? false : _f, _g = _a.testID, testID = _g === void 0 ? 'select' : _g;
     var _h = (0, react_1.useState)(false), isOpen = _h[0], setOpen = _h[1];
     var _j = (0, react_1.useState)(defaultSelected), selected = _j[0], setSelected = _j[1];
+    var height = react_native_1.Dimensions.get('window').height;
+    var dropdownContainerMaxHeight = height * 0.7;
     var handleOptionPress = function (val) {
         onSelected(val);
         setOpen(false);
@@ -90,7 +92,7 @@ var Select = function (_a) {
         label: "-- ".concat(noOptionMessage, " --"),
         value: 'default',
     };
-    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, jsx_runtime_1.jsxs)(SelectInput, { testID: testID, hasError: hasError, onPress: function () { return setOpen(!isOpen); }, children: [(0, jsx_runtime_1.jsx)(P_1.P, { style: { marginTop: 0, marginBottom: 0 }, children: selected.value === 'default' ? '' : selected.label }), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "chevron-down", size: 16, style: { marginLeft: 'auto' } })] }), (0, jsx_runtime_1.jsx)(react_native_1.Modal, { transparent: true, visible: isOpen, animationType: "fade", onRequestClose: function () { return setOpen(false); }, children: (0, jsx_runtime_1.jsx)(DropdownWrapper, { children: (0, jsx_runtime_1.jsx)(DropdownContainer, { children: (0, jsx_runtime_1.jsxs)(react_native_1.ScrollView, { nestedScrollEnabled: true, testID: "".concat(testID, "-OptionsScrollView"), children: [(0, jsx_runtime_1.jsxs)(SelectOption, { accessible: true, accessibilityRole: "radio", onPress: function () { return handleOptionPress(requiredOption); }, children: [(0, jsx_runtime_1.jsx)(StyledP, { children: (0, jsx_runtime_1.jsx)(Strong_1.Strong, { children: requiredOption.label }) }), (0, jsx_runtime_1.jsx)(Radio, { isChecked: selected.value === requiredOption.value, children: (0, jsx_runtime_1.jsx)(RadioDot, { isChecked: selected.value === requiredOption.value }) })] }), Object.keys(optionsByCategories).map(function (category) { return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [category !== 'undefined' ? ((0, jsx_runtime_1.jsx)(StyledCategory, { children: category })) : null, optionsByCategories[category].map(function (option, i) { return ((0, jsx_runtime_1.jsxs)(SelectOption, { accessible: true, accessibilityRole: "radio", isLastOption: i === optionsByCategories[category].length - 1, onPress: function () { return handleOptionPress(option); }, children: [(0, jsx_runtime_1.jsx)(StyledP, { children: (0, jsx_runtime_1.jsx)(Strong_1.Strong, { children: option.label }) }), (0, jsx_runtime_1.jsx)(Radio, { isChecked: selected.value === option.value, children: (0, jsx_runtime_1.jsx)(RadioDot, { isChecked: selected.value === option.value }) })] }, option.label)); })] }, category)); })] }) }) }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, jsx_runtime_1.jsxs)(SelectInput, { testID: testID, hasError: hasError, onPress: function () { return setOpen(!isOpen); }, children: [(0, jsx_runtime_1.jsx)(P_1.P, { style: { marginTop: 0, marginBottom: 0 }, children: selected.value === 'default' ? '' : selected.label }), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "chevron-down", size: 16, style: { marginLeft: 'auto' } })] }), (0, jsx_runtime_1.jsx)(react_native_1.Modal, { transparent: true, visible: isOpen, animationType: "fade", onRequestClose: function () { return setOpen(false); }, children: (0, jsx_runtime_1.jsx)(DropdownWrapper, { children: (0, jsx_runtime_1.jsx)(DropdownContainer, { style: { maxHeight: dropdownContainerMaxHeight }, children: (0, jsx_runtime_1.jsxs)(react_native_1.ScrollView, { nestedScrollEnabled: true, testID: "".concat(testID, "-OptionsScrollView"), children: [(0, jsx_runtime_1.jsxs)(SelectOption, { accessible: true, accessibilityRole: "radio", onPress: function () { return handleOptionPress(requiredOption); }, children: [(0, jsx_runtime_1.jsx)(StyledP, { children: (0, jsx_runtime_1.jsx)(Strong_1.Strong, { children: requiredOption.label }) }), (0, jsx_runtime_1.jsx)(Radio, { isChecked: selected.value === requiredOption.value, children: (0, jsx_runtime_1.jsx)(RadioDot, { isChecked: selected.value === requiredOption.value }) })] }), Object.keys(optionsByCategories).map(function (category) { return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [category !== 'undefined' ? ((0, jsx_runtime_1.jsx)(StyledCategory, { children: category })) : null, optionsByCategories[category].map(function (option, i) { return ((0, jsx_runtime_1.jsxs)(SelectOption, { accessible: true, accessibilityRole: "radio", isLastOption: i === optionsByCategories[category].length - 1, onPress: function () { return handleOptionPress(option); }, children: [(0, jsx_runtime_1.jsx)(StyledP, { children: (0, jsx_runtime_1.jsx)(Strong_1.Strong, { children: option.label }) }), (0, jsx_runtime_1.jsx)(Radio, { isChecked: selected.value === option.value, children: (0, jsx_runtime_1.jsx)(RadioDot, { isChecked: selected.value === option.value }) })] }, option.label)); })] }, category)); })] }) }) }) })] }));
 };
 exports.Select = Select;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/dist/components/SkeletonButton/SkeletonButton.d.ts

@@ -0,0 +1,6 @@
+import { ViewProps } from 'react-native';
+type Props = ViewProps & {
+    width?: string;
+};
+export declare const SkeletonButton: ({ width, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/SkeletonButton/SkeletonButton.js

@@ -0,0 +1,42 @@
+"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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SkeletonButton = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var element_core_1 = require("@ovotech/element-core");
+var styled_native_1 = __importDefault(require("../../styled.native"));
+var P_1 = require("../P");
+var SkeletonAnimation_1 = require("../SkeletonAnimation");
+var StyledSkeletonCTA = styled_native_1.default.View(function (_a) {
+    var theme = _a.theme, width = _a.width;
+    return "\n    background-color: ".concat(theme.color.surface.dim, ";\n    width: ").concat(width, ";\n    height: ").concat((0, element_core_1.numToPx)(theme.space[1200]), ";\n    border-radius: ").concat((0, element_core_1.numToPx)(theme.border.radius['3xl']), ";\n  ");
+});
+var SkeletonButton = function (_a) {
+    var _b = _a.width, width = _b === void 0 ? '250px' : _b, rest = __rest(_a, ["width"]);
+    return ((0, jsx_runtime_1.jsx)(SkeletonAnimation_1.SkeletonAnimation, { children: (0, jsx_runtime_1.jsx)(StyledSkeletonCTA, __assign({ as: P_1.P, width: width }, rest)) }));
+};
+exports.SkeletonButton = SkeletonButton;

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

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

package/dist/components/SkeletonButton/index.js

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