@ovotech/element-native 1.0.0 → 2.0.0-beta.0

package/dist/components/Accordion/Accordion.d.ts

@@ -1,22 +1,5 @@
-import React, { ReactNode, ComponentProps } from 'react';
-import { TouchableOpacity, TouchableOpacityProps } from 'react-native';
-export declare const Accordion: React.ForwardRefExoticComponent<TouchableOpacityProps & {
-    title: ReactNode;
-    expanded?: boolean | undefined;
-    children?: ReactNode;
-    onToggle?: CallableFunction | undefined;
-    inline?: boolean | undefined;
-    headingComponent?: string | React.ComponentType<any> | undefined;
-} & React.RefAttributes<TouchableOpacity>>;
-declare const StyledAccordionGroup: import("styled-components").StyledComponent<(props: {
-    [x: string]: any;
-    [x: number]: any;
-    [x: symbol]: any;
-} & {
-    theme?: import("../../theme/theme").Theme | undefined;
-} & {
-    as?: string | React.ComponentType<any> | undefined;
-    forwardedAs?: string | React.ComponentType<any> | undefined;
-}) => JSX.Element, import("../../theme/theme").Theme, {}, never>;
-export declare const AccordionGroup: ({ children, ...rest }: ComponentProps<typeof StyledAccordionGroup>) => JSX.Element;
-export {};
+import React, { ComponentClass } from 'react';
+import { AnimateProps } from 'react-native-reanimated';
+import { AccordionProps } from './types';
+export declare function withAnimated<T extends object>(WrappedComponent: React.ComponentType<T>): ComponentClass<AnimateProps<T>>;
+export declare const Accordion: ({ expanded, first, headingComponent, last, title, children, onToggle, }: AccordionProps) => JSX.Element;

package/dist/components/Accordion/Accordion.js

@@ -1,8 +1,19 @@
 "use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -37,69 +48,92 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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.AccordionGroup = exports.Accordion = void 0;
+exports.Accordion = exports.withAnimated = void 0;
 var react_1 = __importStar(require("react"));
 var react_native_1 = require("react-native");
-var hooks_1 = require("../../hooks");
-var styled_native_1 = __importStar(require("../../styled.native"));
-var Card_1 = require("../Card");
+var react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+var theme_1 = require("../../theme");
 var Heading_1 = require("../Heading");
-var Icon_1 = require("../Icon");
-var AccordionHeader = styled_native_1.default.TouchableOpacity(function (_a) {
-    var _b = _a.theme, accordion = _b.accordion, card = _b.card, smallAndUp = _a.smallAndUp;
-    return "\n    flex-direction: row;\n    padding: ".concat(smallAndUp
-        ? accordion.header.paddingVertical[1]
-        : accordion.header.paddingVertical[0], " ").concat(smallAndUp ? card.padding[1] : card.padding[0], ";\n");
-});
-var AccordionHeading = styled_native_1.default.Text(function (_a) {
-    var accordion = _a.theme.accordion;
-    return "\n    color: ".concat(accordion.header.color, ";\n    margin: 0;\n    flex: 1;\n  ");
-});
-var AccordionContent = styled_native_1.default.View(function (_a) {
-    var card = _a.theme.card, smallAndUp = _a.smallAndUp;
-    return "\n    padding: ".concat(smallAndUp ? card.padding[1] : card.padding[0], ";\n    padding-top: 0;\n  ");
-});
-var AccordionIcon = (0, styled_native_1.default)(Icon_1.Icon)(function (_a) {
-    var accordion = _a.theme.accordion;
-    return "\n    margin-right: ".concat(accordion.header.iconGap, ";\n    align-self: center;\n    flex-shrink: 0;\n  ");
-});
-exports.Accordion = (0, react_1.forwardRef)(function (_a, ref) {
-    var children = _a.children, title = _a.title, _b = _a.expanded, expanded = _b === void 0 ? false : _b, onToggle = _a.onToggle, _c = _a.headingComponent, Heading = _c === void 0 ? Heading_1.Heading3 : _c, rest = __rest(_a, ["children", "title", "expanded", "onToggle", "headingComponent"]);
-    var breakpoints = (0, hooks_1.useBreakpoint)();
-    var accordion = (0, react_1.useContext)(styled_native_1.ThemeContext).accordion;
-    var _d = (0, react_1.useState)(expanded), isExpanded = _d[0], setIsExpanded = _d[1];
-    return (react_1.default.createElement(react_native_1.View, __assign({}, rest),
-        react_1.default.createElement(AccordionHeader, __assign({}, breakpoints, { ref: ref, accessibilityState: { expanded: isExpanded }, onPress: function () {
-                setIsExpanded(!isExpanded);
-                onToggle && onToggle(!isExpanded);
-            } }),
-            react_1.default.createElement(AccordionIcon, { name: isExpanded ? 'minus' : 'plus', size: accordion.header.iconSize, color: accordion.header.color }),
-            react_1.default.createElement(AccordionHeading, { as: Heading },
-                react_1.default.createElement(react_native_1.Text, { style: { flex: 1 } }, title))),
-        isExpanded ? (react_1.default.createElement(AccordionContent, __assign({}, breakpoints), children)) : null));
-});
-var StyledAccordionGroup = (0, styled_native_1.default)(Card_1.Card)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 0;\n"], ["\n  padding: 0;\n"])));
-var Border = styled_native_1.default.View(function (_a) {
-    var card = _a.theme.card;
-    return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    border: 0 solid ", ";\n    border-top-width: ", ";\n  "], ["\n    border: 0 solid ", ";\n    border-top-width: ", ";\n  "])), card.borderColor, card.borderWidth);
-});
-var AccordionGroup = function (_a) {
-    var children = _a.children, rest = __rest(_a, ["children"]);
-    return (react_1.default.createElement(StyledAccordionGroup, __assign({}, rest), react_1.Children.map(children, function (child, index) {
-        return index === 0 ? child : react_1.default.createElement(Border, null, child);
-    })));
+var Icon_1 = require("./Icon");
+var hooks_1 = require("./hooks");
+var styles_1 = require("./styles");
+var _a = theme_1.theme.colors, canvas = _a.canvas, canvasMuted = _a.canvasMuted, primary = _a.primary, greyDarker = _a.brand.grey.darker;
+function withAnimated(WrappedComponent) {
+    var displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
+    // eslint-disable-next-line react/prefer-stateless-function
+    var WithAnimated = /** @class */ (function (_super) {
+        __extends(WithAnimated, _super);
+        function WithAnimated() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        WithAnimated.prototype.render = function () {
+            return react_1.default.createElement(WrappedComponent, __assign({}, this.props));
+        };
+        WithAnimated.displayName = "WithAnimated(".concat(displayName, ")");
+        return WithAnimated;
+    }(react_1.default.Component));
+    return react_native_reanimated_1.default.createAnimatedComponent(WithAnimated);
+}
+exports.withAnimated = withAnimated;
+var Accordion = function (_a) {
+    var _b = _a.expanded, expanded = _b === void 0 ? false : _b, first = _a.first, _c = _a.headingComponent, headingComponent = _c === void 0 ? Heading_1.Heading3 : _c, last = _a.last, title = _a.title, children = _a.children, onToggle = _a.onToggle;
+    var AnimatedHeading = (0, react_1.useMemo)(function () { return withAnimated(headingComponent); }, [
+        headingComponent,
+    ]);
+    var _d = (0, hooks_1.useLayout)(0), layout = _d[0], onLayout = _d[1];
+    var open = (0, react_native_reanimated_1.useSharedValue)(expanded);
+    var handleHeightContent = (0, react_1.useMemo)(function () { return layout.height || 100; }, [
+        layout.height,
+    ]);
+    var size = (0, react_native_reanimated_1.useSharedValue)(handleHeightContent);
+    (0, react_1.useEffect)(function () {
+        (0, react_native_reanimated_1.runOnUI)(function () {
+            'worklet';
+            if (expanded && handleHeightContent) {
+                size.value = handleHeightContent;
+            }
+        })();
+    }, [handleHeightContent, expanded, size]);
+    (0, react_1.useEffect)(function () {
+        (0, react_native_reanimated_1.runOnUI)(function () {
+            'worklet';
+            if (handleHeightContent) {
+                size.value = handleHeightContent;
+            }
+        })();
+    }, [handleHeightContent, size]);
+    var progress = (0, react_native_reanimated_1.useDerivedValue)(function () { return (0, react_native_reanimated_1.withTiming)(open.value ? 1 : 0); });
+    var style = (0, react_native_reanimated_1.useAnimatedStyle)(function () { return ({
+        height: size.value * progress.value + 1,
+    }); });
+    var toggleOpen = (0, react_1.useCallback)(function () {
+        onToggle === null || onToggle === void 0 ? void 0 : onToggle(!open.value);
+        if (size.value === 0) {
+            (0, react_native_reanimated_1.runOnUI)(function () {
+                'worklet';
+                size.value = handleHeightContent;
+            })();
+        }
+        open.value = !open.value;
+    }, [handleHeightContent, open, size]);
+    var containerAnimatedStyle = (0, react_1.useMemo)(function () { return [styles_1.styles.content, style]; }, [style]);
+    var headerStyle = (0, react_native_reanimated_1.useAnimatedStyle)(function () { return ({
+        color: (0, react_native_reanimated_1.interpolateColor)(progress.value, [0, 1], [greyDarker, primary]),
+    }); });
+    var backgroundStyle = (0, react_native_reanimated_1.useAnimatedStyle)(function () { return ({
+        backgroundColor: (0, react_native_reanimated_1.interpolateColor)(progress.value, [0, 1], [canvas, canvasMuted]),
+    }); });
+    return (react_1.default.createElement(react_native_reanimated_1.default.View, { style: [
+            backgroundStyle,
+            styles_1.styles.accordion,
+            first ? styles_1.styles.topItem : null,
+            last ? styles_1.styles.bottomItem : null,
+        ] },
+        react_1.default.createElement(react_native_1.TouchableOpacity, { accessibilityState: { expanded: expanded }, onPress: toggleOpen, style: styles_1.styles.accordionHeader },
+            react_1.default.createElement(AnimatedHeading, { style: [headerStyle, styles_1.styles.accordionHeaderText] }, title),
+            react_1.default.createElement(Icon_1.AccordionIcon, { animationTiming: progress })),
+        react_1.default.createElement(react_native_reanimated_1.default.View, { style: containerAnimatedStyle },
+            react_1.default.createElement(react_native_1.View, { onLayout: onLayout, style: styles_1.styles.container }, children))));
 };
-exports.AccordionGroup = AccordionGroup;
-var templateObject_1, templateObject_2;
+exports.Accordion = Accordion;

package/dist/components/Accordion/Group.d.ts

@@ -0,0 +1,3 @@
+import { PropsWithChildren } from 'react';
+import { AccordionGroupProps } from './types';
+export declare const AccordionGroup: ({ children, }: PropsWithChildren<AccordionGroupProps>) => JSX.Element;

package/dist/components/Accordion/Group.js

@@ -0,0 +1,41 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccordionGroup = void 0;
+var react_1 = __importStar(require("react"));
+var react_native_1 = require("react-native");
+var AccordionGroup = function (_a) {
+    var children = _a.children;
+    var childCount = react_1.Children.count(children);
+    return (react_1.default.createElement(react_native_1.View, null, react_1.Children.map(children, function (child, i) {
+        return (0, react_1.isValidElement)(child)
+            ? (0, react_1.cloneElement)(child, {
+                first: i === 0,
+                last: i === childCount - 1,
+            })
+            : child;
+    })));
+};
+exports.AccordionGroup = AccordionGroup;

package/dist/components/Accordion/Icon.d.ts

@@ -0,0 +1,4 @@
+import { SharedValue } from 'react-native-reanimated';
+export declare function AccordionIcon({ animationTiming, }: {
+    animationTiming: SharedValue<number>;
+}): JSX.Element;

package/dist/components/Accordion/Icon.js

@@ -0,0 +1,68 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccordionIcon = void 0;
+var react_1 = __importDefault(require("react"));
+var react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+var react_native_svg_1 = require("react-native-svg");
+var theme_1 = require("../../theme");
+var _a = theme_1.theme.colors, canvas = _a.canvas, primary = _a.primary, primaryMuted = _a.primaryMuted;
+var OVO_LOGO_ANGLE = 105;
+var AnimatedPath = react_native_reanimated_1.default.createAnimatedComponent(react_native_svg_1.Path);
+function AccordionIcon(_a) {
+    var animationTiming = _a.animationTiming;
+    var outerAnimatedStyles = (0, react_native_reanimated_1.useAnimatedStyle)(function () { return ({
+        backgroundColor: (0, react_native_reanimated_1.interpolateColor)(animationTiming.value, [0, 1], [primaryMuted, primary]),
+        height: 36 - animationTiming.value * 4,
+        margin: 2 * animationTiming.value,
+        transform: [{ rotateZ: animationTiming.value * -OVO_LOGO_ANGLE + 'deg' }],
+    }); });
+    var innerAnimatedStyles = (0, react_native_reanimated_1.useAnimatedStyle)(function () { return ({
+        transform: [{ rotateZ: animationTiming.value * OVO_LOGO_ANGLE + 'deg' }],
+    }); });
+    var plusAnimatedProps = (0, react_native_reanimated_1.useAnimatedProps)(function () { return ({
+        opacity: 1 - animationTiming.value,
+    }); });
+    var minusAnimatedProps = (0, react_native_reanimated_1.useAnimatedProps)(function () { return ({
+        opacity: animationTiming.value,
+    }); });
+    return (react_1.default.createElement(react_native_reanimated_1.default.View, { style: [
+            {
+                backgroundColor: primaryMuted,
+                aspectRatio: 1,
+                alignItems: 'center',
+                justifyContent: 'center',
+            },
+            outerAnimatedStyles,
+        ] },
+        react_1.default.createElement(react_native_reanimated_1.default.View, { style: innerAnimatedStyles },
+            react_1.default.createElement(react_native_svg_1.Svg, { width: "16", height: "16", viewBox: "0 0 16 16" },
+                react_1.default.createElement(AnimatedPath, { animatedProps: plusAnimatedProps, d: "M9 9H16V6.99H9V0H6.99V7H0V9.01H7V16.01H9.01V9.01L9 9Z", fill: primary }),
+                react_1.default.createElement(AnimatedPath, { animatedProps: minusAnimatedProps, d: "M16.3826 9.66663V7.66663H0.462646V9.66663H16.3826Z", fill: canvas })))));
+}
+exports.AccordionIcon = AccordionIcon;

package/dist/components/Accordion/hooks.d.ts

@@ -0,0 +1,6 @@
+import type { LayoutChangeEvent } from 'react-native';
+export declare const useLayout: (defaultHeight?: number) => readonly [{
+    height: number;
+    width: number;
+    measured: boolean;
+}, (e: LayoutChangeEvent) => void];

package/dist/components/Accordion/hooks.js

@@ -0,0 +1,43 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLayout = void 0;
+var react_1 = __importStar(require("react"));
+var useLayout = function (defaultHeight) {
+    var _a = (0, react_1.useState)({ height: defaultHeight || 0, width: 0, measured: false }), layout = _a[0], setLayout = _a[1];
+    var onLayout = react_1.default.useCallback(function (e) {
+        var _a = e.nativeEvent.layout, height = _a.height, width = _a.width;
+        if (height === layout.height && width === layout.width) {
+            return;
+        }
+        setLayout({
+            height: height,
+            width: width,
+            measured: true
+        });
+    }, [layout.height, layout.width]);
+    return [layout, onLayout];
+};
+exports.useLayout = useLayout;

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

@@ -1 +1,4 @@
-export { Accordion, AccordionGroup } from './Accordion';
+export { Accordion } from './Accordion';
+export { AccordionGroup } from './Group';
+export { AccordionIcon } from './Icon';
+export { AccordionProps } from './types';

package/dist/components/Accordion/index.js

@@ -1,6 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AccordionGroup = exports.Accordion = void 0;
+exports.AccordionIcon = exports.AccordionGroup = exports.Accordion = void 0;
 var Accordion_1 = require("./Accordion");
 Object.defineProperty(exports, "Accordion", { enumerable: true, get: function () { return Accordion_1.Accordion; } });
-Object.defineProperty(exports, "AccordionGroup", { enumerable: true, get: function () { return Accordion_1.AccordionGroup; } });
+var Group_1 = require("./Group");
+Object.defineProperty(exports, "AccordionGroup", { enumerable: true, get: function () { return Group_1.AccordionGroup; } });
+var Icon_1 = require("./Icon");
+Object.defineProperty(exports, "AccordionIcon", { enumerable: true, get: function () { return Icon_1.AccordionIcon; } });

package/dist/components/Accordion/styles.d.ts

@@ -0,0 +1,46 @@
+declare const styles: {
+    accordion: {
+        width: string;
+        borderWidth: number;
+        borderBottomWidth: number;
+        borderColor: string;
+    };
+    topItem: {
+        borderTopLeftRadius: number;
+        borderTopRightRadius: number;
+    };
+    bottomItem: {
+        borderBottomLeftRadius: number;
+        borderBottomRightRadius: number;
+        borderBottomWidth: number;
+    };
+    accordionHeader: {
+        paddingTop: number;
+        paddingRight: number;
+        paddingBottom: number;
+        paddingLeft: number;
+        flexDirection: "row";
+        alignItems: "flex-start";
+        justifyContent: "space-between";
+    };
+    accordionHeaderText: {
+        paddingRight: number;
+        marginTop: number;
+        marginBottom: number;
+        flexShrink: number;
+    };
+    content: {
+        overflow: "hidden";
+    };
+    container: {
+        position: "absolute";
+        top: number;
+        left: number;
+        right: number;
+        paddingTop: number;
+        paddingRight: number;
+        paddingBottom: number;
+        paddingLeft: number;
+    };
+};
+export { styles };

package/dist/components/Accordion/styles.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.styles = void 0;
+var react_native_1 = require("react-native");
+var theme_1 = require("../../theme");
+var greyBase = theme_1.theme.colors.brand.grey.base;
+var styles = react_native_1.StyleSheet.create({
+    accordion: {
+        width: '100%',
+        borderWidth: parseInt(theme_1.theme.borderWidths.standard),
+        borderBottomWidth: 0,
+        borderColor: greyBase,
+    },
+    topItem: {
+        borderTopLeftRadius: parseInt(theme_1.theme.radii.small),
+        borderTopRightRadius: parseInt(theme_1.theme.radii.small),
+    },
+    bottomItem: {
+        borderBottomLeftRadius: parseInt(theme_1.theme.radii.small),
+        borderBottomRightRadius: parseInt(theme_1.theme.radii.small),
+        borderBottomWidth: parseInt(theme_1.theme.borderWidths.standard),
+    },
+    accordionHeader: {
+        paddingTop: parseInt(theme_1.theme.space[5]),
+        paddingRight: 18,
+        paddingBottom: 18,
+        paddingLeft: parseInt(theme_1.theme.space[3]),
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        justifyContent: 'space-between',
+    },
+    accordionHeaderText: {
+        paddingRight: parseInt(theme_1.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_1.theme.space[12]),
+        paddingBottom: parseInt(theme_1.theme.space[6]),
+        paddingLeft: parseInt(theme_1.theme.space[3]),
+    },
+});
+exports.styles = styles;

package/dist/components/Accordion/types.d.ts

@@ -0,0 +1,20 @@
+import { PropsWithChildren, ReactNode } from 'react';
+export declare type AccordionProps = PropsWithChildren<{
+    title: ReactNode;
+    expanded?: boolean;
+    children?: ReactNode;
+    onToggle?: CallableFunction;
+    /**
+     * @deprecated as it no longer affects styling
+     */
+    inline?: boolean;
+    headingComponent?: React.ComponentType<any>;
+    first?: boolean;
+    last?: boolean;
+}>;
+export declare type AccordionGroupProps = {
+    /**
+     * @deprecated as it no longer affects styling
+     */
+    inline?: boolean;
+};

package/dist/components/Accordion/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/components/Badge/Badge.d.ts

@@ -3,7 +3,6 @@ export declare type BadgeVariantName = 'default' | 'error' | 'success' | 'warnin
 export declare type BadgeVariant = {
     background: string;
     foreground: string;
-    borderColor: string;
 };
 declare const StyledBadge: import("styled-components").StyledComponent<typeof import("react-native").View, import("../../theme/theme").Theme, {
     variant?: BadgeVariantName | (string & {}) | undefined;

package/dist/components/Badge/Badge.js

@@ -61,15 +61,13 @@ var StyledBadge = styled_native_1.default.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 (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    padding: ", " ", ";\n    border-radius: ", ";\n    background-color: ", ";\n    border: ", " solid ", ";\n    align-self: flex-start;\n  "], ["\n    padding: ", " ", ";\n    border-radius: ", ";\n    background-color: ", ";\n    border: ", " solid ", ";\n    align-self: flex-start;\n  "])), badge.paddingVertical, badge.paddingHorizontal, badge.borderRadius, currentVariant.background, badge.borderWidth, currentVariant.borderColor);
+    return (0, styled_native_1.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 StyledBadgeText = styled_native_1.default.Text(function (_a) {
-    var badge = _a.theme.badge, _b = _a.variant, variant = _b === void 0 ? 'default' : _b, smallAndUp = _a.smallAndUp;
+    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 (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    font-weight: ", ";\n    line-height: ", ";\n    color: ", ";\n    font-size: ", ";\n  "], ["\n    font-weight: ", ";\n    line-height: ", ";\n    color: ", ";\n    font-size: ", ";\n  "])), badge.fontWeight, smallAndUp
-        ? (0, theme_1.calculateLineHeight)(badge.fontSize[1], badge.lineHeight)
-        : (0, theme_1.calculateLineHeight)(badge.fontSize[0], badge.lineHeight), currentVariant.foreground, smallAndUp ? badge.fontSize[1] : badge.fontSize[0]);
+    return (0, styled_native_1.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, (0, theme_1.calculateLineHeight)(badge.fontSize[1], badge.lineHeight), currentVariant.foreground, badge.fontSize[1]);
 });
 var Badge = function (_a) {
     var children = _a.children, variant = _a.variant, rest = __rest(_a, ["children", "variant"]);

package/dist/components/CTAButton/CTAButton.d.ts

@@ -1,6 +1,6 @@
 import React, { PropsWithChildren, ComponentProps, Ref } from 'react';
 import { TouchableOpacityProps, TouchableOpacity } from 'react-native';
-import { IconName } from '../Icon/Icon';
+import { IconName } from '../../providers/types';
 export declare type CTAVariantName = 'primary' | 'secondary' | 'destructive' | 'missionPrimary' | 'missionSecondary';
 export declare type CTAVariant = {
     background: string;

package/dist/components/CTAButton/CTAButton.js

@@ -80,7 +80,7 @@ var StyledCTAButtonText = styled_native_1.default.Text(function (_a) {
     var fontSize = smallAndUp ? cta.fontSize[1] : cta.fontSize[0];
     // @ts-ignore to support additional palettes.
     var currentVariant = cta.variants[variant];
-    return (0, styled_native_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    color: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    font-weight: ", ";\n    line-height: ", ";\n    text-align: left;\n    flex-shrink: 2;\n  "], ["\n    color: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    font-weight: ", ";\n    line-height: ", ";\n    text-align: left;\n    flex-shrink: 2;\n  "])), currentVariant.foreground, cta.font, fontSize, cta.fontWeight, (0, theme_1.calculateLineHeight)(fontSize, cta.lineHeight));
+    return (0, styled_native_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    color: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    font-weight: ", ";\n    line-height: ", ";\n    text-align: left;\n    flex-shrink: 2;\n  "], ["\n    color: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    font-weight: ", ";\n    line-height: ", ";\n    text-align: left;\n    flex-shrink: 2;\n  "])), currentVariant.foreground, cta.fontFamily, fontSize, cta.fontWeight, (0, theme_1.calculateLineHeight)(fontSize, cta.lineHeight));
 });
 var CTAButton = function (_a) {
     var _b = _a.iconLeft, iconLeft = _b === void 0 ? 'off' : _b, _c = _a.iconRight, iconRight = _c === void 0 ? 'off' : _c, children = _a.children, _d = _a.fullWidth, fullWidth = _d === void 0 ? 'small' : _d, _e = _a.variant, variant = _e === void 0 ? 'primary' : _e, rest = __rest(_a, ["iconLeft", "iconRight", "children", "fullWidth", "variant"]);

package/dist/components/CTALink/CTALink.js

@@ -33,31 +33,11 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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.SecondaryCTALink = exports.PrimaryCTALink = exports.CTALink = void 0;
 var react_1 = __importStar(require("react"));
 var CTAButton_1 = require("../CTAButton");
-var CTALink = (0, react_1.forwardRef)(function (_a, ref) {
-    var iconRight = _a.iconRight, opensInNewWindow = _a.opensInNewWindow, rest = __rest(_a, ["iconRight", "opensInNewWindow"]);
-    if (!iconRight && opensInNewWindow) {
-        iconRight = 'new-window';
-    }
-    else if (!iconRight) {
-        iconRight = 'chevron-right';
-    }
-    return react_1.default.createElement(CTAButton_1.CTAButton, __assign({ iconRight: iconRight }, rest, { ref: ref }));
-});
+var CTALink = (0, react_1.forwardRef)(function (props, ref) { return react_1.default.createElement(CTAButton_1.CTAButton, __assign({}, props, { ref: ref })); });
 exports.CTALink = CTALink;
 var PrimaryCTALink = (0, react_1.forwardRef)(function (props, ref) { return react_1.default.createElement(CTALink, __assign({ variant: "primary", ref: ref }, props)); });
 exports.PrimaryCTALink = PrimaryCTALink;

package/dist/components/Card/Card.js

@@ -19,11 +19,12 @@ var react_1 = __importDefault(require("react"));
 var hooks_1 = require("../../hooks");
 var styled_native_1 = __importDefault(require("../../styled.native"));
 var StyledCard = styled_native_1.default.View(function (_a) {
-    var card = _a.theme.card, smallAndUp = _a.smallAndUp, _b = _a.inline, inline = _b === void 0 ? false : _b;
-    var padding = smallAndUp ? card.padding[1] : card.padding[0];
-    return "\n      background: ".concat(card.background, ";\n      border-radius: ").concat(card.borderRadius, ";\n      border: ").concat(card.borderWidth, " solid ").concat(card.borderColor, ";\n      padding: ").concat(padding, ";\n      ").concat(inline
-        ? ''
-        : "\n              shadow-color: ".concat(card.shadow.color, ";\n              shadow-opacity: ").concat(card.shadow.opacity, ";\n              shadow-offset: ").concat(card.shadow.offset, ";\n              shadow-radius: ").concat(card.shadow.radius, ";\n              elevation: ").concat(card.shadow.elevation, ";\n            "), "\n    ");
+    var _b = _a.theme, card = _b.card, radii = _b.radii, smallAndUp = _a.smallAndUp, _c = _a.inline, inline = _c === void 0 ? false : _c;
+    var padding = smallAndUp
+        ? "".concat(card.padding[2], " ").concat(card.padding[1])
+        : "".concat(card.padding[1], " ").concat(card.padding[0]);
+    var borderRadius = smallAndUp ? radii.medium : radii.small;
+    return "\n      background: ".concat(card.background, ";\n      border: ").concat(inline ? "".concat(card.borderWidth, " solid ").concat(card.borderColor) : 'none', ";\n      padding: ").concat(padding, ";\n      border-radius: ").concat(borderRadius, ";\n    ");
 });
 var Card = function (props) {
     var breakpoints = (0, hooks_1.useBreakpoint)();