@ovotech/element-native 3.5.0 → 3.6.0-canary-0ed6e33-174

package/dist/components/Toggle/styles.js

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledToggleDot = exports.StyledToggleInput = exports.StyledToggleInputWrapper = exports.StyledWrapper = void 0;
+var react_native_1 = require("react-native");
+var styled_native_1 = __importDefault(require("../../styled.native"));
+exports.StyledWrapper = styled_native_1.default.TouchableOpacity(function (_a) {
+    var core = _a.theme.core, hasLabel = _a.hasLabel, labelPosition = _a.labelPosition;
+    return "\n    width: ".concat(hasLabel ? '100%' : core.space[11], ";\n    display: flex;\n    flex-direction: row").concat(labelPosition === 'left' ? '' : '-reverse', ";\n    justify-content: space-between;\n    position: relative;\n  ");
+});
+exports.StyledToggleInputWrapper = styled_native_1.default.View(function (_a) {
+    var core = _a.theme.core, labelPosition = _a.labelPosition;
+    return "\n    width: ".concat(core.space[11], ";\n    height: ").concat(core.space[6], ";\n    ").concat(labelPosition
+        ? labelPosition === 'left'
+            ? 'margin-left: 10px;'
+            : 'margin-right: 10px;'
+        : null, "\n    ");
+});
+exports.StyledToggleInput = styled_native_1.default.View(function (_a) {
+    var core = _a.theme.core, checked = _a.checked;
+    return "\n      width: ".concat(core.space[11], ";\n      height: ").concat(core.space[6], ";\n      justify-content: center;\n      border-radius: ").concat(core.radius.large, ";\n      background: ").concat(checked ? core.color.brand.ovo : core.color.neutral.lighter, ";\n    ");
+});
+exports.StyledToggleDot = (0, styled_native_1.default)(react_native_1.Animated.View)(function (_a) {
+    var core = _a.theme.core, checked = _a.checked;
+    return "\n  position: absolute;\n  width: ".concat(core.space[4], ";\n  height: ").concat(core.space[4], ";\n  border-radius: ").concat(core.space[4], ";\n  background-color: ").concat(checked ? core.color.brand.white : core.color.neutral.dark, ";\n");
+});

package/dist/components/index.d.ts

@@ -1,55 +1,59 @@
 export * from './Accordion';
-export * from './ActionList';
 export * from './ActionCard';
+export * from './ActionList';
 export * from './Badge';
 export * from './Card';
 export * from './Checkbox';
 export * from './CTAButton';
 export * from './CTALink';
+export * from './CurrencyField';
+export * from './CurrencyInput';
+export * from './DataTable';
 export * from './DateField';
 export * from './DescriptionList';
 export * from './Disclosure';
 export * from './Divider';
+export * from './Em';
+export * from './EmailField';
+export * from './EmailInput';
 export * from './ErrorSummaryNotification';
 export * from './Field';
+export * from './FilterSelect';
 export * from './Grid';
-export * from './NavHeader';
 export * from './Heading1';
 export * from './Heading2';
 export * from './Heading3';
 export * from './Heading4';
 export * from './Icon';
+export * from './Label';
+export * from './Lead';
+export * from './LineThrough';
 export * from './List';
 export * from './Margin';
+export * from './NavHeader';
 export * from './Notification';
-export * from './Radio';
-export * from './Stack';
-export * from './Tabs';
-export * from './TextGroup';
+export * from './NumberField';
+export * from './NumberInput';
 export * from './P';
-export * from './Strong';
-export * from './Small';
-export * from './Em';
-export * from './LineThrough';
-export * from './TextField';
-export * from './TextLink';
-export * from './DataTable';
-export * from './SelectField';
-export * from './CurrencyField';
 export * from './PasswordField';
-export * from './EmailField';
-export * from './TextareaField';
-export * from './NumberField';
+export * from './PasswordInput';
 export * from './PhoneField';
 export * from './PhoneInput';
-export * from './TextInput';
-export * from './EmailInput';
-export * from './NumberInput';
-export * from './TextareaInput';
-export * from './PasswordInput';
-export * from './CurrencyInput';
+export * from './Radio';
+export * from './SelectField';
 export * from './SkeletonCircle';
 export * from './SkeletonCTA';
 export * from './SkeletonHeading';
 export * from './SkeletonText';
-export * from './FilterSelect';
+export * from './Small';
+export * from './Spinner';
+export * from './Stack';
+export * from './Strong';
+export * from './Tabs';
+export * from './TextareaField';
+export * from './TextareaInput';
+export * from './TextField';
+export * from './TextGroup';
+export * from './TextInput';
+export * from './TextLink';
+export * from './Toggle';

package/dist/components/index.js

@@ -15,57 +15,61 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./Accordion"), exports);
-__exportStar(require("./ActionList"), exports);
 __exportStar(require("./ActionCard"), exports);
+__exportStar(require("./ActionList"), exports);
 __exportStar(require("./Badge"), exports);
 __exportStar(require("./Card"), exports);
 __exportStar(require("./Checkbox"), exports);
 __exportStar(require("./CTAButton"), exports);
 __exportStar(require("./CTALink"), exports);
+__exportStar(require("./CurrencyField"), exports);
+__exportStar(require("./CurrencyInput"), exports);
+__exportStar(require("./DataTable"), exports);
 __exportStar(require("./DateField"), exports);
 __exportStar(require("./DescriptionList"), exports);
 __exportStar(require("./Disclosure"), exports);
 __exportStar(require("./Divider"), exports);
+__exportStar(require("./Em"), exports);
+__exportStar(require("./EmailField"), exports);
+__exportStar(require("./EmailInput"), exports);
 __exportStar(require("./ErrorSummaryNotification"), exports);
 __exportStar(require("./Field"), exports);
+__exportStar(require("./FilterSelect"), exports);
 __exportStar(require("./Grid"), exports);
-__exportStar(require("./NavHeader"), exports);
 __exportStar(require("./Heading1"), exports);
 __exportStar(require("./Heading2"), exports);
 __exportStar(require("./Heading3"), exports);
 __exportStar(require("./Heading4"), exports);
 __exportStar(require("./Icon"), exports);
+__exportStar(require("./Label"), exports);
+__exportStar(require("./Lead"), exports);
+__exportStar(require("./LineThrough"), exports);
 __exportStar(require("./List"), exports);
 __exportStar(require("./Margin"), exports);
+__exportStar(require("./NavHeader"), exports);
 __exportStar(require("./Notification"), exports);
-__exportStar(require("./Radio"), exports);
-__exportStar(require("./Stack"), exports);
-__exportStar(require("./Tabs"), exports);
-__exportStar(require("./TextGroup"), exports);
+__exportStar(require("./NumberField"), exports);
+__exportStar(require("./NumberInput"), exports);
 __exportStar(require("./P"), exports);
-__exportStar(require("./Strong"), exports);
-__exportStar(require("./Small"), exports);
-__exportStar(require("./Em"), exports);
-__exportStar(require("./LineThrough"), exports);
-__exportStar(require("./TextField"), exports);
-__exportStar(require("./TextLink"), exports);
-__exportStar(require("./DataTable"), exports);
-__exportStar(require("./SelectField"), exports);
-__exportStar(require("./CurrencyField"), exports);
 __exportStar(require("./PasswordField"), exports);
-__exportStar(require("./EmailField"), exports);
-__exportStar(require("./TextareaField"), exports);
-__exportStar(require("./NumberField"), exports);
+__exportStar(require("./PasswordInput"), exports);
 __exportStar(require("./PhoneField"), exports);
 __exportStar(require("./PhoneInput"), exports);
-__exportStar(require("./TextInput"), exports);
-__exportStar(require("./EmailInput"), exports);
-__exportStar(require("./NumberInput"), exports);
-__exportStar(require("./TextareaInput"), exports);
-__exportStar(require("./PasswordInput"), exports);
-__exportStar(require("./CurrencyInput"), exports);
+__exportStar(require("./Radio"), exports);
+__exportStar(require("./SelectField"), exports);
 __exportStar(require("./SkeletonCircle"), exports);
 __exportStar(require("./SkeletonCTA"), exports);
 __exportStar(require("./SkeletonHeading"), exports);
 __exportStar(require("./SkeletonText"), exports);
-__exportStar(require("./FilterSelect"), exports);
+__exportStar(require("./Small"), exports);
+__exportStar(require("./Spinner"), exports);
+__exportStar(require("./Stack"), exports);
+__exportStar(require("./Strong"), exports);
+__exportStar(require("./Tabs"), exports);
+__exportStar(require("./TextareaField"), exports);
+__exportStar(require("./TextareaInput"), exports);
+__exportStar(require("./TextField"), exports);
+__exportStar(require("./TextGroup"), exports);
+__exportStar(require("./TextInput"), exports);
+__exportStar(require("./TextLink"), exports);
+__exportStar(require("./Toggle"), exports);

package/dist/esm/components/ActionCard/ActionCard.js

@@ -20,7 +20,9 @@ import { CloseIconShape } from './CloseIconShape';
 import { IndicatorIconShape } from './IndicatorIconShape';
 var StyledCard = styled.Pressable(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic, inline = _a.inline, inverted = _a.inverted, reducedBottomPadding = _a.reducedBottomPadding;
-    return "\n      border-radius: ".concat(inline ? core.space[6] : 0, ";\n      background-color: ").concat(inverted ? semantic.inverted.surface : semantic.surface.elevated, ";\n      padding-bottom: ").concat(reducedBottomPadding ? core.space[1] : core.space[4], ";\n      padding: ").concat(core.space[4], ";\n      overflow: hidden;\n      border-width: 0;\n      width: 100%;\n    ");
+    var paddingVal = inline ? core.space[4] : core.space[6];
+    var reducedBottomPaddingVal = inline ? core.space[3] : core.space[5];
+    return "\n      border-radius: ".concat(inline ? core.space[6] : 0, ";\n      background-color: ").concat(inverted ? semantic.inverted.surface : semantic.surface.elevated, ";\n      padding: ").concat(paddingVal, ";\n      padding-bottom: ").concat(reducedBottomPadding ? reducedBottomPaddingVal : paddingVal, ";\n      overflow: hidden;\n      border-width: 0;\n      width: 100%;\n    ");
 });
 var StyledP = styled(P)(function (_a) {
     var semantic = _a.theme.semantic, inverted = _a.inverted;
@@ -35,21 +37,21 @@ export var ActionCard = function (_a) {
         }
     }, []);
     var Heading = inline ? Heading3 : Heading2;
+    var cardPadding = parseInt(core.space[inline ? 4 : 6]);
+    var negativeMarginAdjustment = -cardPadding;
     return (_jsx(StyledCard, __assign({ onPress: onPressIndicator, inline: inline, inverted: inverted, reducedBottomPadding: Boolean(buttonTitle && !ctaVariant), testID: "".concat(testID, "-card") }, { children: _jsxs(View, __assign({ style: { flexDirection: 'row' } }, { children: [_jsx(View, __assign({ style: { flex: 1 } }, { children: _jsxs(Stack, __assign({ spaceBetween: 2 }, { children: [_jsx(Heading, __assign({ style: {
                                     color: inverted
                                         ? semantic.inverted.message.link
                                         : semantic.message.branded,
-                                    paddingRight: image || !onPressCloseButton ? 0 : parseInt(core.space[6]),
+                                    paddingRight: image || !onPressCloseButton ? 0 : cardPadding,
                                 }, testID: "".concat(testID, "-heading") }, { children: title })), _jsxs(View, { children: [typeof body === 'string' ? (_jsx(View, __assign({ style: {
-                                            paddingRight: !image && !title && onPressCloseButton
-                                                ? parseInt(core.space[6])
-                                                : 0,
+                                            paddingRight: !image && !title && onPressCloseButton ? cardPadding : 0,
                                         } }, { children: _jsx(StyledP, __assign({ inverted: inverted }, { children: body })) }))) : (body), buttonTitle && onPressActionButton && !onPressIndicator ? (!ctaVariant ? (_jsx(Margin, __assign({ top: 2 }, { children: _jsx(Action, __assign({ inverted: inverted, inline: true, onPress: onPressActionButton, testID: "".concat(testID, "-button") }, { children: buttonTitle })) }))) : (_jsx(Margin, __assign({ top: 4 }, { children: _jsx(CTAButton, __assign({ onPress: onPressActionButton, testID: "".concat(testID, "-button"), variant: ctaVariant }, { children: buttonTitle })) })))) : null] })] })) })), image ? (_jsx(MaskedView, __assign({ style: {
                         flex: 1,
                         flexDirection: 'row',
                         height: '100%',
-                        marginTop: -16,
-                        marginRight: -16,
+                        marginTop: negativeMarginAdjustment,
+                        marginRight: negativeMarginAdjustment,
                     }, maskElement: _jsx(View, { style: {
                             width: '100%',
                             height: 165,
@@ -67,16 +69,16 @@ export var ActionCard = function (_a) {
                             right: 0,
                         }, accessible: true, accessibilityRole: "image", accessibilityLabel: accessibilityLabel }) }))) : null, onPressIndicator ? (_jsxs(Pressable, __assign({ style: {
                         position: 'absolute',
-                        right: -16,
-                        bottom: -16,
+                        right: negativeMarginAdjustment,
+                        bottom: negativeMarginAdjustment,
                     }, onPress: onPressIndicator, testID: "".concat(testID, "-indicator-button") }, { children: [_jsx(IndicatorIconShape, {}), _jsx(Icon, { size: 14, style: {
                                 position: 'absolute',
                                 right: inline ? 8 : 6,
                                 bottom: 16,
                             }, color: semantic.surface.elevated, name: "chevron-right", accessibilityLabel: "chevron-right" })] }))) : null, onPressCloseButton && !onPressIndicator ? (_jsxs(Pressable, __assign({ style: {
                         position: 'absolute',
-                        right: -16,
-                        top: -16,
+                        right: negativeMarginAdjustment,
+                        top: negativeMarginAdjustment,
                     }, onPress: onPressCloseButton, testID: "".concat(testID, "-close-button") }, { children: [_jsx(CloseIconShape, {}), _jsx(Icon, { size: 14, style: {
                                 position: 'absolute',
                                 top: inline ? 14 : 12,

package/dist/esm/components/DescriptionList/styled.js

@@ -28,8 +28,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { View } from 'react-native';
 import styled, { css } from '../../styled.native';
 import { styledComponentWithBreakpoints } from '../../utils';
-import { ListWrapper } from '../List/List';
-export var Dl = ListWrapper;
+export var Dl = styled.View(function (_a) {
+    var core = _a.theme.core, smallAndUp = _a.smallAndUp;
+    return "\n  flex-direction: column;\n  flex: 1;\n  margin-vertical: ".concat(smallAndUp ? core.space[3] : core.space[2], ";\n");
+});
 var StyledDtText = styled.Text(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic;
     return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-family: ", ";\n    line-height: ", ";\n    font-size: ", ";\n    color: ", ";\n\n    flex: 1;\n  "], ["\n    font-family: ", ";\n    line-height: ", ";\n    font-size: ", ";\n    color: ", ";\n\n    flex: 1;\n  "])), core.fontFamily.bodyBold.native, core.lineHeight.body.small, core.fontSize.body.small, semantic.message.base);

package/dist/esm/components/ErrorSummaryNotification/ErrorSummaryNotification.js

@@ -25,6 +25,7 @@ import { createRef, useEffect } from 'react';
 import { findNodeHandle, AccessibilityInfo, } from 'react-native';
 import { Ul, Li } from '../List';
 import { ErrorNotification } from '../Notification';
+import { P } from '../P';
 var ErrorSummaryNotification = function (_a) {
     var errors = _a.errors, scrollViewRef = _a.scrollViewRef, _b = _a.scrollPos, scrollPos = _b === void 0 ? { x: 0, y: 0 } : _b, rest = __rest(_a, ["errors", "scrollViewRef", "scrollPos"]);
     var ref = createRef();
@@ -42,7 +43,7 @@ var ErrorSummaryNotification = function (_a) {
     }, [errors, scrollViewRef.current, ref.current]);
     return (_jsx(ErrorNotification, __assign({ ref: ref }, rest, { children: errors.length === 0 ? null : (_jsx(Ul, { children: errors.map(function (_a) {
                 var message = _a.message, fieldId = _a.id;
-                return (_jsx(Li, { children: message }, fieldId));
+                return (_jsx(Li, { children: _jsx(P, { children: message }) }, fieldId));
             }) })) })));
 };
 export { ErrorSummaryNotification };

package/dist/esm/components/Label/Label.js

@@ -0,0 +1,12 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled, { css } from '../../styled.native';
+import { styledComponentWithBreakpoints } from '../../utils';
+var StyledLabel = styled.Text(function (_a) {
+    var core = _a.theme.core, smallAndUp = _a.smallAndUp;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n  "])), core.fontFamily.body.native, core.fontSize.label[smallAndUp ? 'large' : 'small'], core.lineHeight.label[smallAndUp ? 'large' : 'small']);
+});
+export var Label = styledComponentWithBreakpoints(StyledLabel);
+var templateObject_1;

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

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

package/dist/esm/components/Lead/Lead.js

@@ -0,0 +1,12 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled, { css } from '../../styled.native';
+import { styledComponentWithBreakpoints } from '../../utils';
+var StyledLead = styled.Text(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "])), core.fontFamily.body.native, core.fontSize.lead[smallAndUp ? 'large' : 'small'], core.lineHeight.lead[smallAndUp ? 'large' : 'small'], semantic.message.branded);
+});
+export var Lead = styledComponentWithBreakpoints(StyledLead);
+var templateObject_1;

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

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

package/dist/esm/components/List/List.js

@@ -9,80 +9,32 @@ var __assign = (this && this.__assign) || function () {
     };
     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, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Children } from 'react';
-import { styledComponentWithBreakpoints } from '../../utils';
-import { P } from '../P';
+import { View } from 'react-native';
+import { Margin } from '../Margin';
 import { Stack } from '../Stack';
-import { StyledBullet, StyledLi, StyledList, StyledOlItem, StyledUlItem, UlBullet, } from './styled';
-var Bullet = styledComponentWithBreakpoints(StyledBullet);
-var ListWrapper = styledComponentWithBreakpoints(StyledList);
-var ListBulletItem = function (_a) {
-    var children = _a.children, _b = _a.showBullets, showBullets = _b === void 0 ? true : _b, level = _a.level;
-    return (_jsxs(StyledUlItem, __assign({ level: level }, { children: [_jsx(UlBullet, { visible: showBullets }), children] })));
-};
-var ListNumberedItem = function (_a) {
-    var children = _a.children, prefix = _a.prefix, level = _a.level;
-    return (_jsxs(StyledOlItem, __assign({ level: level }, { children: [_jsx(Bullet, { children: prefix }), children] })));
+import { FlexRow, LiContent, SquareBullet, TextBullet } from './styled';
+var ListItem = function (_a) {
+    var children = _a.children, _b = _a.showBullets, showBullets = _b === void 0 ? true : _b, prefix = _a.prefix;
+    return (_jsxs(FlexRow, { children: [prefix ? (_jsx(TextBullet, { children: prefix })) : (_jsx(SquareBullet, { visible: showBullets })), _jsx(LiContent, { children: children })] }));
 };
 var renderList = function (_a) {
-    var arrayChildren = _a.arrayChildren, _b = _a.level, level = _b === void 0 ? 0 : _b, showBullets = _a.showBullets, listType = _a.listType;
-    return Children.map(arrayChildren, function (child, index) {
-        var _a;
-        var lvl = level;
-        var PADDING = 3;
-        lvl = lvl + PADDING;
-        // @ts-ignore doesn't recognise child props.
-        var nestedChildren = ((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.children) || {};
-        var nestedLists = [];
-        var childrenToRender = Array.from(nestedChildren).filter(function (ch) {
-            var _a, _b;
-            if (typeof ch == 'object' &&
-                // @ts-ignore Missing types for React Children
-                (((_a = ch === null || ch === void 0 ? void 0 : ch.type) === null || _a === void 0 ? void 0 : _a.name) === 'Ul' || ((_b = ch === null || ch === void 0 ? void 0 : ch.type) === null || _b === void 0 ? void 0 : _b.name) === 'Ol')) {
-                nestedLists.push(ch);
-                return false;
-            }
-            else {
-                return true;
-            }
-        });
-        return (_jsxs(_Fragment, { children: [childrenToRender.length > 0 && listType === 'ul' ? (_jsx(ListBulletItem, __assign({ showBullets: showBullets, level: level }, { children: _jsx(P, { children: childrenToRender }) }))) : null, childrenToRender.length > 0 && listType === 'ol' ? (_jsx(ListNumberedItem, __assign({ level: level, prefix: "".concat(index + 1, ".") }, { children: _jsx(P, { children: childrenToRender }) }))) : null, nestedLists.length > 0
-                    ? nestedLists.map(function (obj) {
-                        var _a, _b, _c, _d;
-                        return renderList({
-                            //@ts-ignore
-                            arrayChildren: (_b = (_a = obj === null || obj === void 0 ? void 0 : obj.props) === null || _a === void 0 ? void 0 : _a.children) !== null && _b !== void 0 ? _b : obj,
-                            level: lvl,
-                            showBullets: showBullets,
-                            //@ts-ignore
-                            listType: (_d = (_c = obj.type) === null || _c === void 0 ? void 0 : _c.name) === null || _d === void 0 ? void 0 : _d.toLowerCase(),
-                        });
-                    })
-                    : null] }));
+    var children = _a.children, listType = _a.listType, showBullets = _a.showBullets;
+    return Children.map(children, function (child, index) {
+        return (_jsx(ListItem, __assign({ prefix: listType === 'ol' ? "".concat(index + 1, ".") : undefined, showBullets: showBullets }, { children: child })));
     });
 };
 var Li = function (_a) {
-    var children = _a.children, rest = __rest(_a, ["children"]);
-    return _jsx(StyledLi, __assign({}, rest, { children: children }));
+    var children = _a.children;
+    return _jsx(View, __assign({ style: { flexDirection: 'column' } }, { children: children }));
 };
-var Ul = function (_a) {
-    var children = _a.children, _b = _a.showBullets, showBullets = _b === void 0 ? true : _b, rest = __rest(_a, ["children", "showBullets"]);
-    return (_jsx(ListWrapper, __assign({}, rest, { children: _jsx(Stack, __assign({ spaceBetween: 2 }, { children: renderList({ arrayChildren: children, listType: 'ul', showBullets: showBullets }) })) })));
+var Ul = function (props) {
+    var children = props.children, showBullets = props.showBullets;
+    return (_jsx(Margin, __assign({ top: 2 }, { children: _jsx(Stack, __assign({ spaceBetween: 2 }, { children: renderList({ children: children, listType: 'ul', showBullets: showBullets }) })) })));
 };
-var Ol = function (_a) {
-    var children = _a.children, rest = __rest(_a, ["children"]);
-    return (_jsx(ListWrapper, __assign({}, rest, { children: _jsx(Stack, __assign({ spaceBetween: 2 }, { children: renderList({ arrayChildren: children, listType: 'ol' }) })) })));
+var Ol = function (props) {
+    var children = props.children;
+    return (_jsx(Margin, __assign({ top: 2 }, { children: _jsx(Stack, __assign({ spaceBetween: 2 }, { children: renderList({ children: children, listType: 'ol' }) })) })));
 };
-export { Ul, Ol, Li, ListWrapper };
+export { Li, Ol, Ul };

package/dist/esm/components/List/styled.js

@@ -4,15 +4,15 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 import styled, { css } from '../../styled.native';
 import { pxToNumber } from '../../utils';
-export var UlBullet = styled.View(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, _c = _a.visible, visible = _c === void 0 ? true : _c, smallAndUp = _a.smallAndUp;
+export var SquareBullet = styled.View(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, visible = _a.visible, smallAndUp = _a.smallAndUp;
     var lineHeight = smallAndUp
         ? core.lineHeight.body.large
         : core.lineHeight.body.small;
     var topMargin = (pxToNumber(lineHeight) - pxToNumber(core.space[2])) / 2;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    margin-right: ", ";\n    margin-top: ", "px;\n    width: ", ";\n    height: ", ";\n    background-color: ", ";\n  "], ["\n    margin-right: ", ";\n    margin-top: ", "px;\n    width: ", ";\n    height: ", ";\n    background-color: ", ";\n  "])), core.space[2], topMargin, core.space[2], core.space[2], visible ? semantic.message.base : 'transparent');
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    align-self: flex-start;\n    width: ", ";\n    height: ", ";\n    margin-right: ", ";\n    margin-top: ", "px;\n    background-color: ", ";\n  "], ["\n    align-self: flex-start;\n    width: ", ";\n    height: ", ";\n    margin-right: ", ";\n    margin-top: ", "px;\n    background-color: ", ";\n  "])), core.space[2], core.space[2], core.space[2], topMargin, visible ? semantic.message.base : 'transparent');
 });
-export var StyledBullet = styled.Text(function (_a) {
+export var TextBullet = styled.Text(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
     var fontSize = smallAndUp
         ? core.fontSize.body.large
@@ -20,25 +20,8 @@ export var StyledBullet = styled.Text(function (_a) {
     var lineHeight = smallAndUp
         ? core.lineHeight.body.large
         : core.lineHeight.body.small;
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n      margin-right: ", ";\n      text-align: left;\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n      margin-right: ", ";\n      text-align: left;\n    "])), core.fontFamily.body.native, lineHeight, semantic.message.base, fontSize, core.space[1]);
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      margin-right: ", ";\n      min-width: ", ";\n      min-height: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      text-align: left;\n      color: ", ";\n    "], ["\n      margin-right: ", ";\n      min-width: ", ";\n      min-height: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      text-align: left;\n      color: ", ";\n    "])), core.space[1], core.space[3], core.space[3], fontSize, lineHeight, semantic.message.base);
 });
-export var StyledUlItem = styled.View(function (_a) {
-    var core = _a.theme.core, level = _a.level;
-    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: flex-start;\n    padding-left: ", ";\n  "], ["\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: flex-start;\n    padding-left: ", ";\n  "])), core.space[level]);
-});
-export var StyledOlItem = StyledUlItem;
-export var StyledList = styled.View(function (_a) {
-    var core = _a.theme.core, smallAndUp = _a.smallAndUp;
-    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    flex-direction: column;\n    flex: 1;\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "], ["\n    flex-direction: column;\n    flex: 1;\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "])), smallAndUp ? core.space[3] : core.space[2], smallAndUp ? core.space[3] : core.space[2]);
-});
-export var StyledLi = styled.Text(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
-    var fontSize = smallAndUp
-        ? core.fontSize.body.large
-        : core.fontSize.body.small;
-    var lineHeight = smallAndUp
-        ? core.lineHeight.body.large
-        : core.lineHeight.body.large;
-    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n      flex: 1;\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n      flex: 1;\n    "])), core.fontFamily.body.native, lineHeight, semantic.message.base, fontSize);
-});
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+export var FlexRow = styled.View(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex-direction: row;\n"], ["\n  flex-direction: row;\n"])));
+export var LiContent = styled.View(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  flex-direction: column;\n  flex: 1;\n"], ["\n  flex-direction: column;\n  flex: 1;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -23,11 +23,13 @@ import { P } from '../P';
 import { Strong } from '../Strong';
 var SelectInput = styled.TouchableOpacity(function (_a) {
     var _b = _a.theme, semantic = _b.semantic, core = _b.core, hasError = _a.hasError;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      flex-direction: row;\n      align-items: center;\n      background-color: ", ";\n      border-color: ", ";\n      border-width: ", "\n      border-radius: ", ";\n      padding-vertical: ", "\n      padding-left: ", "\n      padding-right: 14px;\n      height: 44px;\n    "], ["\n      flex-direction: row;\n      align-items: center;\n      background-color: ", ";\n      border-color: ", ";\n      border-width: ", "\n      border-radius: ", ";\n      padding-vertical: ", "\n      padding-left: ", "\n      padding-right: 14px;\n      height: 44px;\n    "])), core.color.brand.white, hasError ? semantic.error.border : semantic.border.functional, core.borderWidth.small, core.radius.small, core.space[2], core.space[2]);
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      flex-direction: row;\n      align-items: center;\n      background-color: ", ";\n      border-color: ", ";\n      border-width: ", ";\n      border-radius: ", ";\n      padding: ", ";\n      padding-right: 14px;\n      height: 44px;\n    "], ["\n      flex-direction: row;\n      align-items: center;\n      background-color: ", ";\n      border-color: ", ";\n      border-width: ", ";\n      border-radius: ", ";\n      padding: ", ";\n      padding-right: 14px;\n      height: 44px;\n    "])), core.color.brand.white, hasError
+        ? semantic.error.border
+        : semantic.border.functional, core.borderWidth.small, core.radius.small, core.space[2]);
 });
 var DropdownWrapper = styled.View(function (_a) {
     var core = _a.theme.core;
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    flex: 1;\n    justify-content: center;\n    align-items: center;\n    // 40 is an opacity for hex https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4\n    background-color: ", "40;\n  "], ["\n    flex: 1;\n    justify-content: center;\n    align-items: center;\n    // 40 is an opacity for hex https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4\n    background-color: ", "40;\n  "])), core.color.neutral.darkest);
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    flex: 1;\n    justify-content: center;\n    align-items: center;\n    /* 40 is an opacity for hex https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4 */\n    background-color: ", "40;\n  "], ["\n    flex: 1;\n    justify-content: center;\n    align-items: center;\n    /* 40 is an opacity for hex https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4 */\n    background-color: ", "40;\n  "])), core.color.neutral.darkest);
 });
 var DropdownContainer = styled.SafeAreaView(function (_a) {
     var core = _a.theme.core;
@@ -53,7 +55,7 @@ var StyledP = styled(P)(function (_a) {
 });
 var StyledCategory = styled(P)(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic;
-    return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    font-size: ", ";\n    color: ", "\n    background-color: ", ";\n    padding-horizontal: ", ";\n    padding-vertical: ", ";\n  "], ["\n    font-size: ", ";\n    color: ", "\n    background-color: ", ";\n    padding-horizontal: ", ";\n    padding-vertical: ", ";\n  "])), core.fontSize.label.large, semantic.message.secondary, semantic.surface.cutout, core.space[4], core.space[1]);
+    return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    font-size: ", ";\n    color: ", ";\n    background-color: ", ";\n    padding-horizontal: ", ";\n    padding-vertical: ", ";\n  "], ["\n    font-size: ", ";\n    color: ", ";\n    background-color: ", ";\n    padding-horizontal: ", ";\n    padding-vertical: ", ";\n  "])), core.fontSize.label.large, semantic.message.secondary, semantic.surface.cutout, core.space[4], core.space[1]);
 });
 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;

package/dist/esm/components/Spinner/Spinner.js

@@ -0,0 +1,55 @@
+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 { useContext, useEffect } from 'react';
+import Animated, { cancelAnimation, Easing, useAnimatedStyle, useSharedValue, withRepeat, withTiming, } from 'react-native-reanimated';
+import Svg, { Rect } from 'react-native-svg';
+import { ThemeContext } from '../../styled.native';
+var semanticSizes = {
+    large: 65,
+    small: 32,
+};
+// based on values in the Figma `y` point is 3.5 times smaller side length, `viewBox` is 1.25 times larger side length
+var calculateSvgProps = function (size) {
+    return {
+        viewBox: size * 1.25,
+        y: size / 3.5,
+    };
+};
+export var Spinner = function (_a) {
+    var _b = _a.inverted, inverted = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? 'small' : _c, _d = _a.accessibilityLabel, accessibilityLabel = _d === void 0 ? 'Loading' : _d;
+    var core = useContext(ThemeContext).core;
+    var rotation = useSharedValue(0);
+    var animatedStyles = useAnimatedStyle(function () {
+        return {
+            transform: [
+                // needed for correct 3d animation
+                { perspective: 1000 },
+                {
+                    rotateY: "".concat(rotation.value, "deg"),
+                },
+            ],
+        };
+    }, [rotation.value]);
+    useEffect(function () {
+        // rotate svg from right to left on 360deg during 2 seconds and repeat that 200 times
+        rotation.value = withRepeat(withTiming(-360, {
+            duration: 2000,
+            easing: Easing.linear,
+        }), 200);
+        // cancel animation if component is unmounted
+        return function () { return cancelAnimation(rotation); };
+    }, []);
+    var rectangleSize = size in semanticSizes ? semanticSizes[size] : size;
+    var _e = calculateSvgProps(rectangleSize), viewBox = _e.viewBox, y = _e.y;
+    return (_jsx(Animated.View, __assign({ style: [{ width: viewBox }, animatedStyles], accessible: true, accessibilityLabel: accessibilityLabel }, { children: _jsx(Svg, __assign({ width: "".concat(viewBox), height: "".concat(viewBox), viewBox: "0 0 ".concat(viewBox, " ").concat(viewBox) }, { children: _jsx(Rect, { y: "".concat(y), width: "".concat(rectangleSize), height: "".concat(rectangleSize), transform: "rotate(-15 0 ".concat(y, ")"), fill: core.color.brand[inverted ? 'white' : 'ovo'] }) })) })));
+};

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

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