@ovotech/element-native 4.4.8 → 4.4.9

package/dist/esm/components/Button/Button.js

@@ -0,0 +1,39 @@
+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;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import { forwardRef } from 'react';
+import { useBreakpoint } from '../../hooks';
+import { StyledButtonWrapper, StyledInner, StyledButtonIcon, StyledButtonText, } from './Button.styles';
+var ButtonWrapper = function (_a) {
+    var children = _a.children, _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'button' : _b, _c = _a.activeOpacity, activeOpacity = _c === void 0 ? 0.8 : _c, rest = __rest(_a, ["children", "accessibilityRole", "activeOpacity"]);
+    return (_jsx(StyledButtonWrapper, __assign({ accessible: true, accessibilityRole: accessibilityRole, activeOpacity: activeOpacity }, rest, { children: children })));
+};
+var Button = function (_a) {
+    var iconLeft = _a.iconLeft, iconRight = _a.iconRight, children = _a.children, _b = _a.fullWidth, fullWidth = _b === void 0 ? false : _b, _c = _a.variant, variant = _c === void 0 ? 'surface' : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, _e = _a.size, size = _e === void 0 ? 'default' : _e, rest = __rest(_a, ["iconLeft", "iconRight", "children", "fullWidth", "variant", "inverted", "size"]);
+    var smallAndUp = useBreakpoint().smallAndUp;
+    var isIconOnly = !children;
+    return (_jsx(ButtonWrapper, __assign({}, rest, { 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: size === 'default' ? numToPx(16) : numToPx(20) })), 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: size === 'default' ? numToPx(16) : numToPx(20) }))] }) })));
+};
+var ButtonDestructive = forwardRef(function (props, ref) { return (_jsx(Button, __assign({ variant: "destructive" }, props, { ref: ref }))); });
+export { Button, ButtonDestructive };

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

@@ -0,0 +1,78 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { numToPx } from '@ovotech/element-core';
+import styled, { css } from '../../styled.native';
+import { Icon } from '../Icon/Icon';
+export var StyledButtonWrapper = styled.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"])));
+export var StyledInner = styled.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 = numToPx(theme.border.radius['3xl']);
+    var backgroundColor = getBackgroundColor(theme, variant, inverted);
+    var borderColor = getBorderColor(theme, variant, inverted);
+    var minHeight = size === 'default'
+        ? numToPx(theme.space[1100])
+        : numToPx(theme.border.radius['3xl'] * 2 - theme.border.width.sm * 2);
+    var 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]);
+    }
+    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]);
+    }
+    var padding = "".concat(top, " ").concat(right, " ").concat(bottom, " ").concat(left);
+    return 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, numToPx(theme.border.width.md), borderColor, fullWidth ? '1' : '0', iconOnly ? minHeight : 'auto');
+});
+export var StyledButtonIcon = styled(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 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 ? numToPx(theme.space[100]) : '0', iconLeft && !iconOnly ? numToPx(theme.space[100]) : '0', color);
+});
+export var StyledButtonText = styled.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 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, numToPx(fontSize), 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/esm/components/Button/index.js

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

package/dist/esm/components/Display/Display.js

@@ -0,0 +1,53 @@
+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 __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 } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import { useBreakpoint } from '../../hooks';
+import styled, { css } from '../../styled.native';
+var StyledDisplay = styled.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 = numToPx(theme.font.size[tokenKey].mediaQuery[smallAndUp ? 'lg' : 'sm']);
+    var lineHeight = numToPx(theme.font.lineHeight[tokenKey].mediaQuery[smallAndUp ? 'lg' : 'sm']);
+    var letterSpacing = 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 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);
+});
+export 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 = useBreakpoint();
+    return (_jsx(StyledDisplay, __assign({ accessible: true, accessibilityRole: accessibilityRole, level: level, variant: variant }, breakpoints, rest)));
+};
+export var Display1 = function (props) { return _jsx(Display, __assign({}, props, { level: "1" })); };
+export var Display2 = function (props) { return _jsx(Display, __assign({}, props, { level: "2" })); };
+export var Display3 = function (props) { return _jsx(Display, __assign({}, props, { level: "3" })); };
+export var Display4 = function (props) { return _jsx(Display, __assign({}, props, { level: "4" })); };
+var templateObject_1;

package/dist/esm/components/Display/index.js

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

package/dist/esm/components/Heading/Heading.js

@@ -0,0 +1,54 @@
+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 __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 } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import { useBreakpoint } from '../../hooks';
+import styled, { css } from '../../styled.native';
+var StyledHeading = styled.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 = numToPx(theme.font.lineHeight[level].mediaQuery[smallAndUp ? 'lg' : 'sm']);
+    var letterSpacing = 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 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], 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 = useBreakpoint();
+    return (_jsx(StyledHeading, __assign({ accessible: true, accessibilityRole: accessibilityRole }, breakpoints, rest)));
+};
+export var Heading1 = function (props) { return _jsx(Heading, __assign({}, props, { level: "4xl" })); };
+export var Heading2 = function (props) { return _jsx(Heading, __assign({}, props, { level: "3xl" })); };
+export var Heading3 = function (props) { return _jsx(Heading, __assign({}, props, { level: "2xl" })); };
+export var Heading4 = function (props) { return _jsx(Heading, __assign({}, props, { level: "xl" })); };
+var templateObject_1;

package/dist/esm/components/Heading/index.js

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

package/dist/esm/components/Link/Link.js

@@ -0,0 +1,51 @@
+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 __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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import styled, { css } from '../../styled.native';
+import { getText } from '../../utils/utils';
+import { Button } from '../Button';
+import { Icon } from '../Icon';
+import { numToPx } from '@ovotech/element-core';
+var Link = forwardRef(function (props, ref) { return _jsx(Button, __assign({}, props, { ref: ref })); });
+var StyledText = styled.Text(function (_a) {
+    var theme = _a.theme;
+    return 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, numToPx(theme.font.size.md.mediaQuery.sm), theme.color.surface.link, theme.color.surface.link);
+});
+var StyledIcon = styled(Icon)(function (_a) {
+    var theme = _a.theme;
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    color: ", ";\n  "], ["\n    color: ", ";\n  "])), theme.color.surface.link);
+});
+var TextLink = 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 : getText(children), " (opens in new window)")
+        : accessibilityLabel;
+    return (_jsxs(StyledText, __assign({}, rest, { accessibilityLabel: updatedAccessibilityLabel, ref: ref, children: [_jsx(StyledText, { children: children }), opensInNewWindow && (_jsxs(_Fragment, { children: ["\u00A0", _jsx(StyledIcon, { size: 12, name: "new-window" })] }))] })));
+});
+export { TextLink, Link };
+var templateObject_1, templateObject_2;

package/dist/esm/components/Link/index.js

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

package/dist/esm/components/Pictogram/Pictogram.js

@@ -0,0 +1,34 @@
+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;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { usePictograms } from '../../providers';
+import { ThemeContext } from '../../styled.native';
+export 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 = usePictograms();
+    var theme = useContext(ThemeContext);
+    // @ts-ignore to support additional pictograms.
+    var Svg = name && pictograms[name];
+    return Svg ? (_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;
+};

package/dist/esm/components/Pictogram/index.js

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

package/dist/esm/components/SelectField/Select.js

@@ -6,7 +6,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { numToPx } from '@ovotech/element-core';
 import groupBy from 'lodash.groupby';
 import { Fragment, useState } from 'react';
-import { Modal, ScrollView, View } from 'react-native';
+import { Dimensions, Modal, ScrollView, View } from 'react-native';
 import styled, { css } from '../../styled.native';
 import { Icon } from '../Icon';
 import { P } from '../P';
@@ -51,6 +51,8 @@ export 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 = useState(false), isOpen = _h[0], setOpen = _h[1];
     var _j = useState(defaultSelected), selected = _j[0], setSelected = _j[1];
+    var height = Dimensions.get('window').height;
+    var dropdownContainerMaxHeight = height * 0.7;
     var handleOptionPress = function (val) {
         onSelected(val);
         setOpen(false);
@@ -61,6 +63,6 @@ export var Select = function (_a) {
         label: "-- ".concat(noOptionMessage, " --"),
         value: 'default',
     };
-    return (_jsxs(View, { children: [_jsxs(SelectInput, { testID: testID, hasError: hasError, onPress: function () { return setOpen(!isOpen); }, children: [_jsx(P, { style: { marginTop: 0, marginBottom: 0 }, children: selected.value === 'default' ? '' : selected.label }), _jsx(Icon, { name: "chevron-down", size: 16, style: { marginLeft: 'auto' } })] }), _jsx(Modal, { transparent: true, visible: isOpen, animationType: "fade", onRequestClose: function () { return setOpen(false); }, children: _jsx(DropdownWrapper, { children: _jsx(DropdownContainer, { children: _jsxs(ScrollView, { nestedScrollEnabled: true, testID: "".concat(testID, "-OptionsScrollView"), children: [_jsxs(SelectOption, { accessible: true, accessibilityRole: "radio", onPress: function () { return handleOptionPress(requiredOption); }, children: [_jsx(StyledP, { children: _jsx(Strong, { children: requiredOption.label }) }), _jsx(Radio, { isChecked: selected.value === requiredOption.value, children: _jsx(RadioDot, { isChecked: selected.value === requiredOption.value }) })] }), Object.keys(optionsByCategories).map(function (category) { return (_jsxs(Fragment, { children: [category !== 'undefined' ? (_jsx(StyledCategory, { children: category })) : null, optionsByCategories[category].map(function (option, i) { return (_jsxs(SelectOption, { accessible: true, accessibilityRole: "radio", isLastOption: i === optionsByCategories[category].length - 1, onPress: function () { return handleOptionPress(option); }, children: [_jsx(StyledP, { children: _jsx(Strong, { children: option.label }) }), _jsx(Radio, { isChecked: selected.value === option.value, children: _jsx(RadioDot, { isChecked: selected.value === option.value }) })] }, option.label)); })] }, category)); })] }) }) }) })] }));
+    return (_jsxs(View, { children: [_jsxs(SelectInput, { testID: testID, hasError: hasError, onPress: function () { return setOpen(!isOpen); }, children: [_jsx(P, { style: { marginTop: 0, marginBottom: 0 }, children: selected.value === 'default' ? '' : selected.label }), _jsx(Icon, { name: "chevron-down", size: 16, style: { marginLeft: 'auto' } })] }), _jsx(Modal, { transparent: true, visible: isOpen, animationType: "fade", onRequestClose: function () { return setOpen(false); }, children: _jsx(DropdownWrapper, { children: _jsx(DropdownContainer, { style: { maxHeight: dropdownContainerMaxHeight }, children: _jsxs(ScrollView, { nestedScrollEnabled: true, testID: "".concat(testID, "-OptionsScrollView"), children: [_jsxs(SelectOption, { accessible: true, accessibilityRole: "radio", onPress: function () { return handleOptionPress(requiredOption); }, children: [_jsx(StyledP, { children: _jsx(Strong, { children: requiredOption.label }) }), _jsx(Radio, { isChecked: selected.value === requiredOption.value, children: _jsx(RadioDot, { isChecked: selected.value === requiredOption.value }) })] }), Object.keys(optionsByCategories).map(function (category) { return (_jsxs(Fragment, { children: [category !== 'undefined' ? (_jsx(StyledCategory, { children: category })) : null, optionsByCategories[category].map(function (option, i) { return (_jsxs(SelectOption, { accessible: true, accessibilityRole: "radio", isLastOption: i === optionsByCategories[category].length - 1, onPress: function () { return handleOptionPress(option); }, children: [_jsx(StyledP, { children: _jsx(Strong, { children: option.label }) }), _jsx(Radio, { isChecked: selected.value === option.value, children: _jsx(RadioDot, { isChecked: selected.value === option.value }) })] }, option.label)); })] }, category)); })] }) }) }) })] }));
 };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/dist/esm/components/SkeletonButton/SkeletonButton.js

@@ -0,0 +1,35 @@
+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;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import styled from '../../styled.native';
+import { P } from '../P';
+import { SkeletonAnimation } from '../SkeletonAnimation';
+var StyledSkeletonCTA = styled.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(numToPx(theme.space[1200]), ";\n    border-radius: ").concat(numToPx(theme.border.radius['3xl']), ";\n  ");
+});
+export var SkeletonButton = function (_a) {
+    var _b = _a.width, width = _b === void 0 ? '250px' : _b, rest = __rest(_a, ["width"]);
+    return (_jsx(SkeletonAnimation, { children: _jsx(StyledSkeletonCTA, __assign({ as: P, width: width }, rest)) }));
+};

package/dist/esm/components/SkeletonButton/index.js

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

package/dist/esm/providers/PictogramsProvider.js

@@ -0,0 +1,183 @@
+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);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+import { AccountInCreditPositiveBalance, AccountInDebtNegativeBalance, AddYourCar, Archive, AssistanceDog, Awards, Battery13, Battery23, Battery33, BatteryEmpty, Bill, Bin, Boiler, BoilerEngineer, BoilerHeating, BoilerReplacement, BoilerService, BoilerWorking, Bus, Calendar, Car, ChargerChademo, ChargerCssCombo, ChargerType1, ChargerType2, Cloakroom, Clock, Comedy, Competition, Confirmation, ContactUs, CreatePaymentSchedule, CreditCard, Cursor, Customer, CustomerStar, DisbaledToilet, DownloadApp, Drink, EcoHome, Edit, Electric, ElectricCarEv, Emergency, EnergyAdvice, EnergyExperts, EstimatedCharge, EstimatedCharge2, EstimatedRange, EvCharger, ExitFees, ExternalDrains, Filter, FinalStatement, FlagIssue, Flats, Food, Gas, GetInTouch, Global, GreenerEnergy, GuitarMusic, Heart, HeatPump, Help, HistoryPayment, Home, HomeMove, Information, InternalDrains, Lasers, Leaf, Letter, Lifts, Lightbulb, List, LoadingAndFlexibility, Location, Lpg, Magnify, ManageMyAccount, Map, MensToilet, Merch, MeterReading, Mobile, Money, Msg, Music, MyPaymentCards, Navigation, Notification, NumberOfSeats, Oil, OpenLetter, Padlock, Parking, PayAsYouGo, PayByBankTransfer, PaygDrive, PaymentSchedule, PingDriver, Placeholder, Planet, Plug, Plumbing, PowerMove, Price, PriceCut, Queue, RealCharge, RealCharge2, ScheduledTopUps, Seats, SecurityDog, SemiDetached, SmartHome, SmartMeter, SmartThermostatA, SmartThermostatB, Smoke, SolarPanel, SpecialEffects, Sport, Star, StoreLocator, StrobeLights, StrobeLights2, Sun, TapsAndToilets, Terraced, TheGrid, ThumbsDown, ThumbsUp, Ticket, TimeRunningOut, Toilet, TopUp, TopUpCardOrKey, TopUpInPaypointShop, TopUpInStore, TopUpOnline, Torch, Train, Trees, Turbine, UnavailableCharger, Underground, Usage, Wallet, WarmHome, WaterSupplyPipe, WindEnergy, WomensToilet, Wrench, } from './pictograms';
+var defaultPictograms = {
+    information: Information,
+    'internal-drains': InternalDrains,
+    'account-in-credit-positive-balance': AccountInCreditPositiveBalance,
+    'account-in-debt-negative-balance': AccountInDebtNegativeBalance,
+    'add-your-car': AddYourCar,
+    archive: Archive,
+    'assistance-dog': AssistanceDog,
+    awards: Awards,
+    battery13: Battery13,
+    battery23: Battery23,
+    battery33: Battery33,
+    'battery-empty': BatteryEmpty,
+    bill: Bill,
+    bin: Bin,
+    'boiler-engineer': BoilerEngineer,
+    'boiler-heating': BoilerHeating,
+    'boiler-replacement': BoilerReplacement,
+    'boiler-service': BoilerService,
+    'boiler-working': BoilerWorking,
+    boiler: Boiler,
+    bus: Bus,
+    calendar: Calendar,
+    car: Car,
+    'charger-chademo': ChargerChademo,
+    'charger-css-combo': ChargerCssCombo,
+    'charger-type1': ChargerType1,
+    'charger-type2': ChargerType2,
+    cloakroom: Cloakroom,
+    clock: Clock,
+    comedy: Comedy,
+    competition: Competition,
+    confirmation: Confirmation,
+    'contact-us': ContactUs,
+    'create-payment-schedule': CreatePaymentSchedule,
+    'credit-card': CreditCard,
+    cursor: Cursor,
+    'customer-star': CustomerStar,
+    customer: Customer,
+    'disbaled-toilet': DisbaledToilet,
+    'download-app': DownloadApp,
+    drink: Drink,
+    'eco-home': EcoHome,
+    edit: Edit,
+    'electric-car-ev': ElectricCarEv,
+    electric: Electric,
+    emergency: Emergency,
+    'energy-advice': EnergyAdvice,
+    'energy-experts': EnergyExperts,
+    'estimated-charge2': EstimatedCharge2,
+    'estimated-charge': EstimatedCharge,
+    'estimated-range': EstimatedRange,
+    'ev-charger': EvCharger,
+    'exit-fees': ExitFees,
+    'external-drains': ExternalDrains,
+    filter: Filter,
+    'final-statement': FinalStatement,
+    'flag-issue': FlagIssue,
+    flats: Flats,
+    food: Food,
+    gas: Gas,
+    'get-in-touch': GetInTouch,
+    global: Global,
+    'greener-energy': GreenerEnergy,
+    'guitar-music': GuitarMusic,
+    heart: Heart,
+    'heat-pump': HeatPump,
+    help: Help,
+    'history-payment': HistoryPayment,
+    'home-move': HomeMove,
+    home: Home,
+    lasers: Lasers,
+    leaf: Leaf,
+    letter: Letter,
+    lifts: Lifts,
+    lightbulb: Lightbulb,
+    list: List,
+    'loading-and-flexibility': LoadingAndFlexibility,
+    location: Location,
+    lpg: Lpg,
+    magnify: Magnify,
+    'manage-my-account': ManageMyAccount,
+    map: Map,
+    'mens-toilet': MensToilet,
+    merch: Merch,
+    'meter-reading': MeterReading,
+    mobile: Mobile,
+    money: Money,
+    msg: Msg,
+    music: Music,
+    'my-payment-cards': MyPaymentCards,
+    navigation: Navigation,
+    notification: Notification,
+    'number-of-seats': NumberOfSeats,
+    oil: Oil,
+    'open-letter': OpenLetter,
+    padlock: Padlock,
+    parking: Parking,
+    'pay-as-you-go': PayAsYouGo,
+    'pay-by-bank-transfer': PayByBankTransfer,
+    'payg-drive': PaygDrive,
+    'payment-schedule': PaymentSchedule,
+    'ping-driver': PingDriver,
+    placeholder: Placeholder,
+    planet: Planet,
+    plug: Plug,
+    plumbing: Plumbing,
+    'power-move': PowerMove,
+    'price-cut': PriceCut,
+    price: Price,
+    queue: Queue,
+    'real-charge2': RealCharge2,
+    'real-charge': RealCharge,
+    'scheduled-top-ups': ScheduledTopUps,
+    seats: Seats,
+    'security-dog': SecurityDog,
+    'semi-detached': SemiDetached,
+    'smart-home': SmartHome,
+    'smart-meter': SmartMeter,
+    'smart-thermostat-a': SmartThermostatA,
+    'smart-thermostat-b': SmartThermostatB,
+    smoke: Smoke,
+    'solar-panel': SolarPanel,
+    'special-effects': SpecialEffects,
+    sport: Sport,
+    star: Star,
+    'store-locator': StoreLocator,
+    'strobe-lights2': StrobeLights2,
+    'strobe-lights': StrobeLights,
+    sun: Sun,
+    'taps-and-toilets': TapsAndToilets,
+    terraced: Terraced,
+    'the-grid': TheGrid,
+    'thumbs-down': ThumbsDown,
+    'thumbs-up': ThumbsUp,
+    ticket: Ticket,
+    'time-running-out': TimeRunningOut,
+    toilet: Toilet,
+    'top-up-in-paypoint-shop': TopUpInPaypointShop,
+    'top-up-in-store': TopUpInStore,
+    'top-up-card-or-key': TopUpCardOrKey,
+    'top-up-online': TopUpOnline,
+    'top-up': TopUp,
+    torch: Torch,
+    train: Train,
+    trees: Trees,
+    turbine: Turbine,
+    'unavailable-charger': UnavailableCharger,
+    underground: Underground,
+    usage: Usage,
+    wallet: Wallet,
+    'warm-home': WarmHome,
+    'water-supply-pipe': WaterSupplyPipe,
+    'wind-energy': WindEnergy,
+    'womens-toilet': WomensToilet,
+    wrench: Wrench,
+};
+var PictogramsContext = createContext(null);
+function usePictograms() {
+    var pictograms = useContext(PictogramsContext) || defaultPictograms;
+    return pictograms;
+}
+function PictogramsProvider(_a) {
+    var children = _a.children, _b = _a.pictograms, pictograms = _b === void 0 ? {} : _b;
+    var basePictograms = useContext(PictogramsContext) || defaultPictograms;
+    var mergedPictograms = __assign(__assign({}, basePictograms), pictograms);
+    return (_jsx(PictogramsContext.Provider, { value: mergedPictograms, children: children }));
+}
+export { usePictograms, PictogramsProvider, defaultPictograms };

package/dist/esm/providers/icons-types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/providers/pictograms/AccountInCreditPositiveBalance.js

@@ -0,0 +1,14 @@
+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);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Svg, { Path } from 'react-native-svg';
+export var AccountInCreditPositiveBalance = function (props) { return (_jsxs(Svg, __assign({ viewBox: "0 0 64 64" }, props, { children: [_jsx(Path, { fill: "currentColor", d: "M46.857 35.743c-6.138 0-11.114 4.975-11.114 11.114 0 6.139 4.975 11.114 11.114 11.114 6.139 0 11.114-4.975 11.114-11.114 0-6.139-4.975-11.114-11.114-11.114Zm0 19.231c-4.476 0-8.117-3.641-8.117-8.117 0-4.476 3.641-8.117 8.117-8.117 4.476 0 8.117 3.641 8.117 8.117 0 4.476-3.641 8.117-8.117 8.117ZM33.746 46.857c0-.507.03-1.009.087-1.501h-11.9l.535 1.998h11.289c-.006-.165-.01-.331-.01-.496h-.001v-.001ZM36.618 38.678H21.811v.029l.527 1.969h12.959c.379-.707.822-1.376 1.32-1.998h.001ZM41.751 31.999h-19.94v.104l.508 1.894h19.967l-.535-1.998Z" }), _jsx(Path, { fill: "currentColor", d: "M35.851 53.975H16.017V25.053h18.974V10.024h12.991v23.771a13 13 0 0 1 3.996.993V6.028H32L12.022 21.957v32.014a4 4 0 0 0 4 4h23.887a13.212 13.212 0 0 1-4.058-3.996Zm-3.856-42.832v10.914H18.306l13.689-10.914Z" }), _jsx(Path, { fill: "currentColor", d: "M41.751 31.999h-19.94v.104l.508 1.894h19.967l-.535-1.998ZM47.736 49.856h-2.133c.732-.489 1.009-1.27 1.009-2.035 0-.098 0-.196-.016-.293h2.295v-1.791h-2.865c-.163-.424-.277-.798-.277-1.286 0-.863.602-1.27 1.254-1.27.846 0 1.303.569 1.319 1.562l2.133-.569c-.082-1.335-.977-3.012-3.483-3.012-2.279 0-3.581 1.611-3.581 3.207 0 .537.081.977.212 1.367h-.928v1.791h1.579c.033.179.065.358.065.537 0 .96-.667 1.628-1.693 1.986v1.921h5.437c1.807 0 3.028-1.352 3.028-3.19l-2.149-.13c0 .732-.52 1.205-1.205 1.205h-.001Z" })] }))); };

package/dist/esm/providers/pictograms/AccountInDebtNegativeBalance.js

@@ -0,0 +1,14 @@
+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);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Svg, { Path } from 'react-native-svg';
+export var AccountInDebtNegativeBalance = function (props) { return (_jsxs(Svg, __assign({ viewBox: "0 0 64 64" }, props, { children: [_jsx(Path, { fill: "currentColor", d: "M46.857 35.743c-6.138 0-11.114 4.975-11.114 11.114 0 6.139 4.975 11.114 11.114 11.114 6.139 0 11.114-4.975 11.114-11.114 0-6.139-4.975-11.114-11.114-11.114Zm0 19.231c-4.476 0-8.117-3.641-8.117-8.117 0-4.476 3.641-8.117 8.117-8.117 4.476 0 8.117 3.641 8.117 8.117 0 4.476-3.641 8.117-8.117 8.117ZM33.746 46.857c0-.507.03-1.009.087-1.501h-11.9l.535 1.998h11.289c-.006-.165-.01-.331-.01-.496h-.001v-.001ZM36.618 38.678H21.811v.029l.527 1.969h12.959c.379-.707.822-1.376 1.32-1.998h.001ZM41.751 31.999h-19.94v.104l.508 1.894h19.967l-.535-1.998Z" }), _jsx(Path, { fill: "currentColor", d: "M35.851 53.975H16.017V25.053h18.974V10.024h12.991v23.771a13 13 0 0 1 3.996.993V6.028H32L12.022 21.957v32.014a4 4 0 0 0 4 4h23.887a13.212 13.212 0 0 1-4.058-3.996Zm-3.856-42.832v10.914H18.306l13.689-10.914Z" }), _jsx(Path, { fill: "currentColor", d: "M41.751 31.999h-19.94v.104l.508 1.894h19.967l-.535-1.998ZM48.094 49.778l-2.936.779.779 2.936 2.936-.779-.779-2.936ZM48.133 49.26l.699-8.491h-3.635l.698 8.491h2.238Z" })] }))); };