@ovotech/element-native 2.0.4 → 2.2.0-canary-1cac2ba-73

package/dist/components/Text/Text.js

@@ -55,22 +55,18 @@ var react_native_1 = require("react-native");
 var styled_native_1 = __importStar(require("../../styled.native"));
 var utils_1 = require("../../utils");
 var StyledP = styled_native_1.default.Text(function (_a) {
-    var text = _a.theme.text, smallAndUp = _a.smallAndUp;
-    var fontSize = smallAndUp ? text.p.fontSize[1] : text.p.fontSize[0];
-    var lineHeight = smallAndUp ? text.p.lineHeight[1] : text.p.lineHeight[0];
-    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-family: ", ";\n    font-weight: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "], ["\n    font-family: ", ";\n    font-weight: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "])), text.fontFamily, text.fontWeight, fontSize, lineHeight, text.color, smallAndUp ? text.p.marginTop[1] : text.p.marginTop[0], smallAndUp
-        ? text.p.marginBottom[1]
-        : text.p.marginBottom[0]);
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
+    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n    margin-bottom: ", ";\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n    margin-bottom: ", ";\n  "])), core.fontFamily.body.native, core.fontSize.body[smallAndUp ? 'large' : 'small'], core.lineHeight.body[smallAndUp ? 'large' : 'small'], semantic.message.base, core.space[3]);
 });
 exports.P = (0, utils_1.styledComponentWithBreakpoints)(StyledP);
 var StyledSmall = styled_native_1.default.Text(function (_a) {
-    var text = _a.theme.text, smallAndUp = _a.smallAndUp;
-    return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    font-size: ", ";\n  "], ["\n    font-size: ", ";\n  "])), smallAndUp ? text.small.fontSize[1] : text.small.fontSize[0]);
+    var core = _a.theme.core, smallAndUp = _a.smallAndUp;
+    return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    font-size: ", ";\n    line-height: ", ";\n  "], ["\n    font-size: ", ";\n    line-height: ", ";\n  "])), core.fontSize.small[smallAndUp ? 'large' : 'small'], core.lineHeight.small[smallAndUp ? 'large' : 'small']);
 });
 exports.Small = (0, utils_1.styledComponentWithBreakpoints)(StyledSmall);
 exports.Strong = styled_native_1.default.Text(function (_a) {
-    var text = _a.theme.text;
-    return "\n    font-family: ".concat(text.strong.fontFamily, ";\n    font-weight: ").concat(text.strong.fontWeight, ";\n  ");
+    var core = _a.theme.core;
+    return "\n    font-family: ".concat(core.fontFamily.bodyBold.native, ";\n  ");
 });
 exports.Em = styled_native_1.default.Text(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-family: 'System font';\n  font-style: italic;\n"], ["\n  font-family: 'System font';\n  font-style: italic;\n"])));
 exports.LineThrough = styled_native_1.default.Text(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  text-decoration: line-through;\n"], ["\n  text-decoration: line-through;\n"])));

package/dist/components/TextField/CurrencyField.d.ts

@@ -1,11 +1,12 @@
 import React from 'react';
 import { TextInput as NativeTextInput } from 'react-native';
 import { FieldProps } from '../Field';
-export declare const CurrencyField: React.ForwardRefExoticComponent<Omit<FieldProps, "children"> & import("react-native").TextInputProps & {
+export declare const CurrencyField: React.ForwardRefExoticComponent<Omit<FieldProps, "children"> & import("react-native/types").TextInputProps & {
     invalid?: boolean | undefined;
     stretch?: boolean | undefined;
     iconLeft?: (string & {}) | import("../../providers").IconName | undefined;
     iconRight?: (string & {}) | import("../../providers").IconName | undefined;
+    rightSlot?: React.ReactNode;
 } & {
     currency?: "GBP" | "EUR" | "AUD" | "USD" | undefined;
 } & React.RefAttributes<NativeTextInput>>;

package/dist/components/TextField/EmailField.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
 import { TextInput as NativeTextInput } from 'react-native';
 import { FieldProps } from '../Field';
-export declare const EmailField: React.ForwardRefExoticComponent<Omit<FieldProps, "children"> & import("react-native").TextInputProps & {
+export declare const EmailField: React.ForwardRefExoticComponent<Omit<FieldProps, "children"> & import("react-native/types").TextInputProps & {
     invalid?: boolean | undefined;
     stretch?: boolean | undefined;
     iconLeft?: (string & {}) | import("../../providers").IconName | undefined;
     iconRight?: (string & {}) | import("../../providers").IconName | undefined;
+    rightSlot?: React.ReactNode;
 } & React.RefAttributes<NativeTextInput>>;

package/dist/components/TextField/NumberField.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
 import { TextInput as NativeTextInput } from 'react-native';
 import { FieldProps } from '../Field';
-export declare const NumberField: React.ForwardRefExoticComponent<Omit<FieldProps, "children"> & import("react-native").TextInputProps & {
+export declare const NumberField: React.ForwardRefExoticComponent<Omit<FieldProps, "children"> & import("react-native/types").TextInputProps & {
     invalid?: boolean | undefined;
     stretch?: boolean | undefined;
     iconLeft?: (string & {}) | import("../../providers").IconName | undefined;
     iconRight?: (string & {}) | import("../../providers").IconName | undefined;
+    rightSlot?: React.ReactNode;
 } & React.RefAttributes<NativeTextInput>>;

package/dist/components/TextField/PasswordField.d.ts

@@ -1,9 +1,12 @@
 import React from 'react';
 import { TextInput as NativeTextInput } from 'react-native';
 import { FieldProps } from '../Field';
-export declare const PasswordField: React.ForwardRefExoticComponent<Omit<FieldProps, "children"> & import("react-native").TextInputProps & {
+export declare const PasswordField: React.ForwardRefExoticComponent<Omit<FieldProps, "children"> & import("react-native/types").TextInputProps & {
     invalid?: boolean | undefined;
     stretch?: boolean | undefined;
     iconLeft?: (string & {}) | import("../../providers").IconName | undefined;
     iconRight?: (string & {}) | import("../../providers").IconName | undefined;
+    rightSlot?: React.ReactNode;
+} & {
+    hasVisibilityToggle?: boolean | undefined;
 } & React.RefAttributes<NativeTextInput>>;

package/dist/components/TextField/PasswordField.js

@@ -50,7 +50,7 @@ var react_1 = __importStar(require("react"));
 var Field_1 = require("../Field");
 var PasswordInput_1 = require("../Input/PasswordInput");
 exports.PasswordField = (0, react_1.forwardRef)(function (_a, ref) {
-    var rest = __rest(_a, []);
+    var hasVisibilityToggle = _a.hasVisibilityToggle, rest = __rest(_a, ["hasVisibilityToggle"]);
     return (react_1.default.createElement(Field_1.Field, __assign({}, rest, { ref: ref }),
-        react_1.default.createElement(PasswordInput_1.PasswordInput, null)));
+        react_1.default.createElement(PasswordInput_1.PasswordInput, { hasVisibilityToggle: hasVisibilityToggle })));
 });

package/dist/components/TextField/PhoneField.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { TextInput as NativeTextInput } from 'react-native';
+import { FieldProps } from '../Field';
+export declare const PhoneField: React.ForwardRefExoticComponent<Omit<FieldProps, "children"> & import("react-native/types").TextInputProps & {
+    invalid?: boolean | undefined;
+    stretch?: boolean | undefined;
+    iconLeft?: (string & {}) | import("../../providers").IconName | undefined;
+    iconRight?: (string & {}) | import("../../providers").IconName | undefined;
+    rightSlot?: React.ReactNode;
+} & React.RefAttributes<NativeTextInput>>;

package/dist/components/TextField/PhoneField.js

@@ -0,0 +1,56 @@
+"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 __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.PhoneField = void 0;
+var react_1 = __importStar(require("react"));
+var Field_1 = require("../Field");
+var PhoneInput_1 = require("../Input/PhoneInput");
+exports.PhoneField = (0, react_1.forwardRef)(function (_a, ref) {
+    var rest = __rest(_a, []);
+    return (react_1.default.createElement(Field_1.Field, __assign({}, rest, { ref: ref }),
+        react_1.default.createElement(PhoneInput_1.PhoneInput, null)));
+});

package/dist/components/TextField/TelField.d.ts

@@ -1,9 +1,14 @@
 import React from 'react';
 import { TextInput as NativeTextInput } from 'react-native';
 import { FieldProps } from '../Field';
-export declare const TelField: React.ForwardRefExoticComponent<Omit<FieldProps, "children"> & import("react-native").TextInputProps & {
+/**
+ * @deprecated This component has been deprecated and will be removed in a future release.
+ * Please use the PhoneField component instead.
+ * */
+export declare const TelField: React.ForwardRefExoticComponent<Omit<FieldProps, "children"> & import("react-native/types").TextInputProps & {
     invalid?: boolean | undefined;
     stretch?: boolean | undefined;
     iconLeft?: (string & {}) | import("../../providers").IconName | undefined;
     iconRight?: (string & {}) | import("../../providers").IconName | undefined;
+    rightSlot?: React.ReactNode;
 } & React.RefAttributes<NativeTextInput>>;

package/dist/components/TextField/TelField.js

@@ -48,9 +48,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TelField = void 0;
 var react_1 = __importStar(require("react"));
 var Field_1 = require("../Field");
-var TelInput_1 = require("../Input/TelInput");
+var PhoneInput_1 = require("../Input/PhoneInput");
+/**
+ * @deprecated This component has been deprecated and will be removed in a future release.
+ * Please use the PhoneField component instead.
+ * */
 exports.TelField = (0, react_1.forwardRef)(function (_a, ref) {
     var rest = __rest(_a, []);
+    console.warn('TelField component has been deprecated and will be removed in a future release. Please use the PhoneField component instead.');
     return (react_1.default.createElement(Field_1.Field, __assign({}, rest, { ref: ref }),
-        react_1.default.createElement(TelInput_1.TelInput, null)));
+        react_1.default.createElement(PhoneInput_1.PhoneInput, null)));
 });

package/dist/components/TextField/TextField.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
 import { TextInput as NativeTextInput } from 'react-native';
 import { FieldProps } from '../Field';
-export declare const TextField: React.ForwardRefExoticComponent<Omit<FieldProps, "children"> & import("react-native").TextInputProps & {
+export declare const TextField: React.ForwardRefExoticComponent<Omit<FieldProps, "children"> & import("react-native/types").TextInputProps & {
     invalid?: boolean | undefined;
     stretch?: boolean | undefined;
     iconLeft?: (string & {}) | import("../../providers").IconName | undefined;
     iconRight?: (string & {}) | import("../../providers").IconName | undefined;
+    rightSlot?: React.ReactNode;
 } & React.RefAttributes<NativeTextInput>>;

package/dist/components/TextField/TextareaField.d.ts

@@ -1,11 +1,12 @@
 import React from 'react';
 import { TextInput as NativeTextInput } from 'react-native';
 import { FieldProps } from '../Field';
-export declare const TextareaField: React.ForwardRefExoticComponent<Omit<FieldProps, "children"> & import("react-native").TextInputProps & {
+export declare const TextareaField: React.ForwardRefExoticComponent<Omit<FieldProps, "children"> & import("react-native/types").TextInputProps & {
     invalid?: boolean | undefined;
     stretch?: boolean | undefined;
     iconLeft?: (string & {}) | import("../../providers").IconName | undefined;
     iconRight?: (string & {}) | import("../../providers").IconName | undefined;
+    rightSlot?: React.ReactNode;
 } & {
     rows?: number | undefined;
 } & React.RefAttributes<NativeTextInput>>;

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

@@ -2,6 +2,7 @@ export { CurrencyField } from './CurrencyField';
 export { TextField } from './TextField';
 export { NumberField } from './NumberField';
 export { TelField } from './TelField';
+export { PhoneField } from './PhoneField';
 export { EmailField } from './EmailField';
 export { PasswordField } from './PasswordField';
 export { TextareaField } from './TextareaField';

package/dist/components/TextField/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextareaField = exports.PasswordField = exports.EmailField = exports.TelField = exports.NumberField = exports.TextField = exports.CurrencyField = void 0;
+exports.TextareaField = exports.PasswordField = exports.EmailField = exports.PhoneField = exports.TelField = exports.NumberField = exports.TextField = exports.CurrencyField = void 0;
 var CurrencyField_1 = require("./CurrencyField");
 Object.defineProperty(exports, "CurrencyField", { enumerable: true, get: function () { return CurrencyField_1.CurrencyField; } });
 var TextField_1 = require("./TextField");
@@ -9,6 +9,8 @@ var NumberField_1 = require("./NumberField");
 Object.defineProperty(exports, "NumberField", { enumerable: true, get: function () { return NumberField_1.NumberField; } });
 var TelField_1 = require("./TelField");
 Object.defineProperty(exports, "TelField", { enumerable: true, get: function () { return TelField_1.TelField; } });
+var PhoneField_1 = require("./PhoneField");
+Object.defineProperty(exports, "PhoneField", { enumerable: true, get: function () { return PhoneField_1.PhoneField; } });
 var EmailField_1 = require("./EmailField");
 Object.defineProperty(exports, "EmailField", { enumerable: true, get: function () { return EmailField_1.EmailField; } });
 var PasswordField_1 = require("./PasswordField");

package/dist/components/TextLink/TextLink.js

@@ -56,8 +56,8 @@ var styled_native_1 = __importStar(require("../../styled.native"));
 var utils_1 = require("../../utils/utils");
 var Icon_1 = require("../Icon");
 var StyledText = styled_native_1.default.Text(function (_a) {
-    var textLink = _a.theme.textLink;
-    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    color: ", ";\n    text-decoration: underline;\n    text-decoration-color: ", ";\n    font-weight: ", ";\n  "], ["\n    color: ", ";\n    text-decoration: underline;\n    text-decoration-color: ", ";\n    font-weight: ", ";\n  "])), textLink.color, textLink.color, textLink.fontWeight);
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic;
+    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-family: ", ";\n    color: ", ";\n    text-decoration: underline;\n    text-decoration-color: ", ";\n  "], ["\n    font-family: ", ";\n    color: ", ";\n    text-decoration: underline;\n    text-decoration-color: ", ";\n  "])), core.fontFamily.body.native, semantic.message.link, semantic.message.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"]);

package/dist/components/index.d.ts

@@ -5,7 +5,9 @@ export * from './Checkbox';
 export * from './CTAButton';
 export * from './CTALink';
 export * from './DateField';
+export * from './DescriptionList';
 export * from './Disclosure';
+export * from './Divider';
 export * from './ErrorSummaryNotification';
 export * from './Field';
 export * from './Grid';
@@ -25,3 +27,4 @@ export * from './TextField';
 export * from './TextLink';
 export * from './DataTable';
 export * from './SkeletonLoading';
+export * from './SelectField';

package/dist/components/index.js

@@ -21,7 +21,9 @@ __exportStar(require("./Checkbox"), exports);
 __exportStar(require("./CTAButton"), exports);
 __exportStar(require("./CTALink"), exports);
 __exportStar(require("./DateField"), exports);
+__exportStar(require("./DescriptionList"), exports);
 __exportStar(require("./Disclosure"), exports);
+__exportStar(require("./Divider"), exports);
 __exportStar(require("./ErrorSummaryNotification"), exports);
 __exportStar(require("./Field"), exports);
 __exportStar(require("./Grid"), exports);
@@ -41,3 +43,4 @@ __exportStar(require("./TextField"), exports);
 __exportStar(require("./TextLink"), exports);
 __exportStar(require("./DataTable"), exports);
 __exportStar(require("./SkeletonLoading"), exports);
+__exportStar(require("./SelectField"), exports);

package/dist/esm/components/Accordion/Accordion.js

@@ -24,15 +24,14 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import React, { useCallback, useMemo, useEffect } from 'react';
-import { View, TouchableOpacity } from 'react-native';
-import Animated, { useSharedValue, useAnimatedStyle, useDerivedValue, withTiming, runOnUI, interpolateColor, } from 'react-native-reanimated';
-import { theme } from '../../theme';
+import React, { useCallback, useContext, useEffect, useMemo, useState, } from 'react';
+import Animated, { interpolateColor, runOnUI, useAnimatedStyle, useDerivedValue, useSharedValue, withTiming, } from 'react-native-reanimated';
+import { ThemeContext } from '../../styled.native';
+import { pxToNumber } from '../../utils';
 import { Heading3 } from '../Heading';
 import { AccordionIcon } from './Icon';
 import { useLayout } from './hooks';
-import { styles } from './styles';
-var _a = theme.colors, canvas = _a.canvas, canvasMuted = _a.canvasMuted, primary = _a.primary, greyDarker = _a.brand.grey.darker;
+import { StyledAccordion, StyledAccordionHeader, StyledContainer, } from './styles';
 export function withAnimated(WrappedComponent) {
     var displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
     // eslint-disable-next-line react/prefer-stateless-function
@@ -51,11 +50,12 @@ export function withAnimated(WrappedComponent) {
 }
 export var Accordion = function (_a) {
     var _b = _a.expanded, expanded = _b === void 0 ? false : _b, first = _a.first, _c = _a.headingComponent, headingComponent = _c === void 0 ? Heading3 : _c, last = _a.last, title = _a.title, children = _a.children, onToggle = _a.onToggle;
+    var _d = useContext(ThemeContext), core = _d.core, semantic = _d.semantic;
     var AnimatedHeading = useMemo(function () { return withAnimated(headingComponent); }, [
         headingComponent,
     ]);
-    var _d = useLayout(0), layout = _d[0], onLayout = _d[1];
-    var open = useSharedValue(expanded);
+    var _e = useLayout(0), layout = _e[0], onLayout = _e[1];
+    var _f = useState(expanded), open = _f[0], setOpen = _f[1];
     var handleHeightContent = useMemo(function () { return layout.height || 100; }, [
         layout.height,
     ]);
@@ -76,36 +76,37 @@ export var Accordion = function (_a) {
             }
         })();
     }, [handleHeightContent, size]);
-    var progress = useDerivedValue(function () { return withTiming(open.value ? 1 : 0); });
+    var progress = useDerivedValue(function () { return withTiming(open ? 1 : 0); });
     var style = useAnimatedStyle(function () { return ({
         height: size.value * progress.value + 1,
     }); });
     var toggleOpen = useCallback(function () {
-        onToggle === null || onToggle === void 0 ? void 0 : onToggle(!open.value);
+        onToggle === null || onToggle === void 0 ? void 0 : onToggle(!open);
         if (size.value === 0) {
             runOnUI(function () {
                 'worklet';
                 size.value = handleHeightContent;
             })();
         }
-        open.value = !open.value;
+        setOpen(function (o) { return !o; });
     }, [handleHeightContent, open, size]);
-    var containerAnimatedStyle = useMemo(function () { return [styles.content, style]; }, [style]);
+    var containerAnimatedStyle = useMemo(function () { return [{ overflow: 'hidden' }, style]; }, [style]);
     var headerStyle = useAnimatedStyle(function () { return ({
-        color: interpolateColor(progress.value, [0, 1], [greyDarker, primary]),
+        color: interpolateColor(progress.value, [0, 1], [semantic.message.branded, semantic.message.base]),
     }); });
-    var backgroundStyle = useAnimatedStyle(function () { return ({
-        backgroundColor: interpolateColor(progress.value, [0, 1], [canvas, canvasMuted]),
-    }); });
-    return (React.createElement(Animated.View, { style: [
-            backgroundStyle,
-            styles.accordion,
-            first ? styles.topItem : null,
-            last ? styles.bottomItem : null,
-        ] },
-        React.createElement(TouchableOpacity, { accessibilityState: { expanded: expanded }, onPress: toggleOpen, style: styles.accordionHeader },
-            React.createElement(AnimatedHeading, { style: [headerStyle, styles.accordionHeaderText] }, title),
+    return (React.createElement(StyledAccordion, { first: first, last: last },
+        React.createElement(StyledAccordionHeader, { accessibilityState: { expanded: open }, onPress: toggleOpen, testID: "accordionTitle" },
+            React.createElement(AnimatedHeading, { style: [
+                    headerStyle,
+                    {
+                        paddingTop: pxToNumber(core.space[1]),
+                        paddingRight: pxToNumber(core.space[3]),
+                        marginTop: 0,
+                        marginBottom: 0,
+                        flexShrink: 1,
+                    },
+                ] }, title),
             React.createElement(AccordionIcon, { animationTiming: progress })),
         React.createElement(Animated.View, { style: containerAnimatedStyle },
-            React.createElement(View, { onLayout: onLayout, style: styles.container }, children))));
+            React.createElement(StyledContainer, { onLayout: onLayout }, children))));
 };

package/dist/esm/components/Accordion/Icon.js

@@ -1,14 +1,14 @@
-import React from 'react';
-import Animated, { useAnimatedStyle, interpolateColor, useAnimatedProps, } from 'react-native-reanimated';
+import React, { useContext } from 'react';
+import Animated, { interpolateColor, useAnimatedProps, useAnimatedStyle, } from 'react-native-reanimated';
 import { Path, Svg } from 'react-native-svg';
-import { theme } from '../../theme';
-var _a = theme.colors, canvas = _a.canvas, primary = _a.primary, primaryMuted = _a.primaryMuted;
+import { ThemeContext } from '../../styled.native';
 var OVO_LOGO_ANGLE = 105;
 var AnimatedPath = Animated.createAnimatedComponent(Path);
 export function AccordionIcon(_a) {
     var animationTiming = _a.animationTiming;
+    var _b = useContext(ThemeContext), core = _b.core, semantic = _b.semantic;
     var outerAnimatedStyles = useAnimatedStyle(function () { return ({
-        backgroundColor: interpolateColor(animationTiming.value, [0, 1], [primaryMuted, primary]),
+        backgroundColor: interpolateColor(animationTiming.value, [0, 1], [semantic.surface.cutout, semantic.message.branded]),
         height: 36 - animationTiming.value * 4,
         margin: 2 * animationTiming.value,
         transform: [{ rotateZ: animationTiming.value * -OVO_LOGO_ANGLE + 'deg' }],
@@ -24,7 +24,7 @@ export function AccordionIcon(_a) {
     }); });
     return (React.createElement(Animated.View, { style: [
             {
-                backgroundColor: primaryMuted,
+                backgroundColor: semantic.surface.cutout,
                 aspectRatio: 1,
                 alignItems: 'center',
                 justifyContent: 'center',
@@ -33,6 +33,6 @@ export function AccordionIcon(_a) {
         ] },
         React.createElement(Animated.View, { style: innerAnimatedStyles },
             React.createElement(Svg, { width: "16", height: "16", viewBox: "0 0 16 16" },
-                React.createElement(AnimatedPath, { animatedProps: plusAnimatedProps, d: "M9 9H16V6.99H9V0H6.99V7H0V9.01H7V16.01H9.01V9.01L9 9Z", fill: primary }),
-                React.createElement(AnimatedPath, { animatedProps: minusAnimatedProps, d: "M16.3826 9.66663V7.66663H0.462646V9.66663H16.3826Z", fill: canvas })))));
+                React.createElement(AnimatedPath, { animatedProps: plusAnimatedProps, d: "M9 9H16V6.99H9V0H6.99V7H0V9.01H7V16.01H9.01V9.01L9 9Z", fill: semantic.message.secondary }),
+                React.createElement(AnimatedPath, { animatedProps: minusAnimatedProps, d: "M16.3826 9.66663V7.66663H0.462646V9.66663H16.3826Z", fill: core.color.brand.white })))));
 }

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

@@ -1,49 +1,30 @@
-import { StyleSheet } from 'react-native';
-import { theme } from '../../theme';
-var greyBase = theme.colors.brand.grey.base;
-var styles = StyleSheet.create({
-    accordion: {
-        width: '100%',
-        borderWidth: parseInt(theme.borderWidths.standard),
-        borderBottomWidth: 0,
-        borderColor: greyBase,
-    },
-    topItem: {
-        borderTopLeftRadius: parseInt(theme.radii.small),
-        borderTopRightRadius: parseInt(theme.radii.small),
-    },
-    bottomItem: {
-        borderBottomLeftRadius: parseInt(theme.radii.small),
-        borderBottomRightRadius: parseInt(theme.radii.small),
-        borderBottomWidth: parseInt(theme.borderWidths.standard),
-    },
-    accordionHeader: {
-        paddingTop: parseInt(theme.space[5]),
-        paddingRight: 18,
-        paddingBottom: 18,
-        paddingLeft: parseInt(theme.space[3]),
-        flexDirection: 'row',
-        alignItems: 'flex-start',
-        justifyContent: 'space-between',
-    },
-    accordionHeaderText: {
-        paddingRight: parseInt(theme.space[3]),
-        marginTop: 0,
-        marginBottom: 0,
-        flexShrink: 1,
-    },
-    content: {
-        overflow: 'hidden',
-    },
-    container: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        paddingTop: 0,
-        paddingRight: parseInt(theme.space[12]),
-        paddingBottom: parseInt(theme.space[6]),
-        paddingLeft: parseInt(theme.space[3]),
-    },
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import Animated from 'react-native-reanimated';
+import styled, { css } from '../../styled.native';
+export var StyledAccordion = styled(Animated.View)(function (_a) {
+    var _b = _a.theme, semantic = _b.semantic, core = _b.core, first = _a.first, last = _a.last;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    width: 100%;\n    border-width: ", ";\n    border-color: ", ";\n    border-bottom-width: 0;\n\n    ", "\n\n    ", "\n  "], ["\n    width: 100%;\n    border-width: ", ";\n    border-color: ", ";\n    border-bottom-width: 0;\n\n    ", "\n\n    ", "\n  "])), core.borderWidth.small, semantic.border.differentiated, first
+        ? {
+            borderTopLeftRadius: core.radius.small,
+            borderTopRightRadius: core.radius.small,
+        }
+        : null, last
+        ? {
+            borderBottomLeftRadius: core.radius.small,
+            borderBottomRightRadius: core.radius.small,
+            borderBottomWidth: core.borderWidth.small,
+        }
+        : null);
 });
-export { styles };
+export var StyledAccordionHeader = styled.TouchableOpacity(function (_a) {
+    var core = _a.theme.core;
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      padding-top: ", "\n      padding-left: ", "\n      padding-right: 18px;\n      padding-bottom: 18px;\n      flex-direction: row;\n      align-items: flex-start;\n      justify-content: space-between;\n    "], ["\n      padding-top: ", "\n      padding-left: ", "\n      padding-right: 18px;\n      padding-bottom: 18px;\n      flex-direction: row;\n      align-items: flex-start;\n      justify-content: space-between;\n    "])), core.space[5], core.space[3]);
+});
+export var StyledContainer = styled.View(function (_a) {
+    var core = _a.theme.core;
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    padding-top: 0;\n    padding-right: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n  "], ["\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    padding-top: 0;\n    padding-right: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n  "])), core.space[12], core.space[6], core.space[3]);
+});
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/esm/components/Badge/Badge.js

@@ -25,25 +25,46 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React from 'react';
-import { useBreakpoint } from '../../hooks';
 import styled, { css } from '../../styled.native';
-import { calculateLineHeight } from '../../theme';
 var StyledBadge = styled.View(function (_a) {
-    var badge = _a.theme.badge, _b = _a.variant, variant = _b === void 0 ? 'default' : _b;
-    // @ts-ignore to support additional palettes.
-    var currentVariant = badge.variants[variant];
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    padding: 0 ", ";\n    border-radius: ", ";\n    background-color: ", ";\n    align-self: flex-start;\n  "], ["\n    padding: 0 ", ";\n    border-radius: ", ";\n    background-color: ", ";\n    align-self: flex-start;\n  "])), badge.paddingHorizontal, badge.borderRadius, currentVariant.background);
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, component = _b.component, _c = _a.variant, variant = _c === void 0 ? 'info' : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, customVariant = _a.customVariant;
+    var surface;
+    var message;
+    if (variant in semantic) {
+        surface = semantic[variant].surface;
+        message = semantic[variant].message;
+    }
+    else {
+        surface = component.badge.variants[variant].background;
+        message = component.badge.variants[variant].foreground;
+    }
+    if ((customVariant === null || customVariant === void 0 ? void 0 : customVariant.foregroundColor) && (customVariant === null || customVariant === void 0 ? void 0 : customVariant.backgroundColor)) {
+        surface = customVariant.backgroundColor;
+        message = customVariant.foregroundColor;
+    }
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      padding: 0 ", ";\n      border-radius: 16px;\n      border: ", " solid ", ";\n      background-color: ", ";\n      align-self: flex-start;\n    "], ["\n      padding: 0 ", ";\n      border-radius: 16px;\n      border: ", " solid ", ";\n      background-color: ", ";\n      align-self: flex-start;\n    "])), core.space[2], core.borderWidth.medium, core.color.brand.white, inverted ? message : surface);
 });
 var StyledBadgeText = styled.Text(function (_a) {
-    var badge = _a.theme.badge, _b = _a.variant, variant = _b === void 0 ? 'default' : _b;
-    // @ts-ignore to support additional palettes.
-    var currentVariant = badge.variants[variant];
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    font-family: ", ";\n    font-weight: ", ";\n    line-height: ", ";\n    color: ", ";\n    font-size: ", ";\n  "], ["\n    font-family: ", ";\n    font-weight: ", ";\n    line-height: ", ";\n    color: ", ";\n    font-size: ", ";\n  "])), badge.fontFamily, badge.fontWeight, calculateLineHeight(badge.fontSize[1], badge.lineHeight), currentVariant.foreground, badge.fontSize[1]);
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, component = _b.component, _c = _a.variant, variant = _c === void 0 ? 'info' : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, customVariant = _a.customVariant;
+    var surface;
+    var message;
+    if (variant in semantic) {
+        surface = semantic[variant].surface;
+        message = semantic[variant].message;
+    }
+    else {
+        surface = component.badge.variants[variant].background;
+        message = component.badge.variants[variant].foreground;
+    }
+    if ((customVariant === null || customVariant === void 0 ? void 0 : customVariant.foregroundColor) && (customVariant === null || customVariant === void 0 ? void 0 : customVariant.backgroundColor)) {
+        surface = customVariant.backgroundColor;
+        message = customVariant.foregroundColor;
+    }
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n    "])), core.fontFamily.bodyBold.native, core.lineHeight.body.small, inverted ? surface : message, core.fontSize.body.small);
 });
 export var Badge = function (_a) {
-    var children = _a.children, variant = _a.variant, rest = __rest(_a, ["children", "variant"]);
-    var smallAndUp = useBreakpoint().smallAndUp;
-    return (React.createElement(StyledBadge, __assign({}, rest, { variant: variant }),
-        React.createElement(StyledBadgeText, { variant: variant, smallAndUp: smallAndUp }, children)));
+    var children = _a.children, variant = _a.variant, inverted = _a.inverted, rest = __rest(_a, ["children", "variant", "inverted"]);
+    return (React.createElement(StyledBadge, __assign({ variant: variant, inverted: inverted }, rest),
+        React.createElement(StyledBadgeText, { variant: variant, inverted: inverted }, children)));
 };
 var templateObject_1, templateObject_2;