@ovotech/element-native 3.0.0 → 3.1.0-canary-9ecd91d-105

package/dist/components/Text/Text.d.ts

@@ -232,7 +232,7 @@ export declare const P: import("react").ForwardRefExoticComponent<Pick<Omit<{
                 };
             };
         };
-    }) | undefined;
+    } & object) | undefined;
 } & {
     as?: string | import("react").ComponentType<any> | undefined;
     forwardedAs?: string | import("react").ComponentType<any> | undefined;
@@ -469,7 +469,7 @@ export declare const Small: import("react").ForwardRefExoticComponent<Pick<Omit<
                 };
             };
         };
-    }) | undefined;
+    } & object) | undefined;
 } & {
     as?: string | import("react").ComponentType<any> | undefined;
     forwardedAs?: string | import("react").ComponentType<any> | undefined;
@@ -701,7 +701,7 @@ export declare const Strong: import("styled-components").StyledComponent<typeof
             };
         };
     };
-}, {}, never>;
+} & object, {}, never>;
 export declare const Em: import("styled-components").StyledComponent<typeof import("react-native").Text, import("../../theme/theme").Theme & {
     core: {
         radius: Record<"small" | "medium" | "large" | "max", string>;
@@ -929,7 +929,7 @@ export declare const Em: import("styled-components").StyledComponent<typeof impo
             };
         };
     };
-}, {}, never>;
+} & object, {}, never>;
 export declare const LineThrough: import("styled-components").StyledComponent<typeof import("react-native").Text, import("../../theme/theme").Theme & {
     core: {
         radius: Record<"small" | "medium" | "large" | "max", string>;
@@ -1157,5 +1157,5 @@ export declare const LineThrough: import("styled-components").StyledComponent<ty
             };
         };
     };
-}, {}, never>;
+} & object, {}, never>;
 export declare const TextGroup: ({ children, ...rest }: PropsWithChildren<ViewProps>) => JSX.Element;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/components/index.d.ts

@@ -1,4 +1,5 @@
 export * from './Accordion';
+export * from './ActionList';
 export * from './Badge';
 export * from './Card';
 export * from './Checkbox';

package/dist/components/index.js

@@ -15,6 +15,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./Accordion"), exports);
+__exportStar(require("./ActionList"), exports);
 __exportStar(require("./Badge"), exports);
 __exportStar(require("./Card"), exports);
 __exportStar(require("./Checkbox"), exports);

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

@@ -30,6 +30,7 @@ import Animated, { interpolateColor, runOnUI, useAnimatedStyle, useDerivedValue,
 import { ThemeContext } from '../../styled.native';
 import { pxToNumber } from '../../utils';
 import { Heading4 } from '../Heading';
+import { AccordionGroupContext } from './Group';
 import { AccordionIcon } from './Icon';
 import { useLayout } from './hooks';
 import { StyledAccordion, StyledAccordionHeader, StyledContainer, } from './styles';
@@ -50,13 +51,15 @@ export function withAnimated(WrappedComponent) {
     return Animated.createAnimatedComponent(WithAnimated);
 }
 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 ? Heading4 : _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 _b = _a.expanded, expanded = _b === void 0 ? false : _b, first = _a.first, last = _a.last, title = _a.title, children = _a.children, onToggle = _a.onToggle;
+    var _c = useContext(ThemeContext), core = _c.core, semantic = _c.semantic;
+    var Header = useContext(AccordionGroupContext).Header;
+    var AccordionHeading = Header !== null && Header !== void 0 ? Header : Heading4;
+    var AnimatedHeading = useMemo(function () { return withAnimated(AccordionHeading); }, [
+        AccordionHeading,
     ]);
-    var _e = useLayout(0), layout = _e[0], onLayout = _e[1];
-    var _f = useState(expanded), open = _f[0], setOpen = _f[1];
+    var _d = useLayout(0), layout = _d[0], onLayout = _d[1];
+    var _e = useState(expanded), open = _e[0], setOpen = _e[1];
     var handleHeightContent = useMemo(function () { return layout.height || 100; }, [
         layout.height,
     ]);

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

@@ -1,15 +1,29 @@
+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 { Children, cloneElement, isValidElement, } from 'react';
+import { Children, cloneElement, createContext, isValidElement, } from 'react';
 import { View } from 'react-native';
+export var AccordionGroupContext = createContext({
+    Header: undefined,
+});
 export var AccordionGroup = function (_a) {
-    var children = _a.children;
+    var children = _a.children, headingComponent = _a.headingComponent;
     var childCount = Children.count(children);
-    return (_jsx(View, { children: Children.map(children, function (child, i) {
-            return isValidElement(child)
-                ? cloneElement(child, {
-                    first: i === 0,
-                    last: i === childCount - 1,
-                })
-                : child;
-        }) }));
+    return (_jsx(AccordionGroupContext.Provider, __assign({ value: { Header: headingComponent } }, { children: _jsx(View, { children: Children.map(children, function (child, i) {
+                return isValidElement(child)
+                    ? cloneElement(child, {
+                        first: i === 0,
+                        last: i === childCount - 1,
+                    })
+                    : child;
+            }) }) })));
 };

package/dist/esm/components/ActionList/ActionList.js

@@ -0,0 +1,56 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, cloneElement, } from 'react';
+import { TouchableOpacity, } from 'react-native';
+import { useBreakpoint } from '../../hooks';
+import { StyledActionInner, StyledActionList, StyledActionText, StyledActionWrapper, StyledLeftIcon, StyledRightIcon, } from './styled';
+var ACTION_TYPES = {
+    back: 'chevron-left-small',
+    // edit: 'arrow-right', /* TODO: add pencil + paper icon */
+    external: 'new-window',
+    link: 'chevron-right-small',
+};
+var ActionList = function (_a) {
+    var children = _a.children, inverted = _a.inverted, rest = __rest(_a, ["children", "inverted"]);
+    var childCount = children.length;
+    return (_jsx(StyledActionList, __assign({}, rest, { children: Children.map(children, function (child, index) {
+            var _a;
+            return cloneElement(child, {
+                index: index,
+                hasBorder: childCount > 1 && index !== childCount - 1,
+                inList: childCount !== 1 ? true : false,
+                inverted: (_a = child.props.inverted) !== null && _a !== void 0 ? _a : inverted, // prioritise child prop
+            });
+        }) })));
+};
+var ActionWrapper = function (_a) {
+    var children = _a.children, accessibilityRole = _a.accessibilityRole, _b = _a.activeOpacity, activeOpacity = _b === void 0 ? 0.75 : _b, _c = _a.hasBorder, hasBorder = _c === void 0 ? false : _c, _d = _a.inList, inList = _d === void 0 ? false : _d, _e = _a.inverted, inverted = _e === void 0 ? false : _e, onPress = _a.onPress, testID = _a.testID, rest = __rest(_a, ["children", "accessibilityRole", "activeOpacity", "hasBorder", "inList", "inverted", "onPress", "testID"]);
+    return (_jsx(StyledActionWrapper, __assign({ hasBorder: hasBorder, inList: inList, inverted: inverted, testID: testID }, rest, { children: _jsx(TouchableOpacity, __assign({ activeOpacity: activeOpacity, accessibilityRole: accessibilityRole, onPress: onPress }, { children: _jsx(StyledActionInner, { children: children }) })) })));
+};
+var Action = function (_a) {
+    var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'link' : _b, _c = _a.actionType, actionType = _c === void 0 ? 'link' : _c, children = _a.children, _d = _a.inverted, inverted = _d === void 0 ? false : _d, onPress = _a.onPress, testID = _a.testID, rest = __rest(_a, ["accessibilityRole", "actionType", "children", "inverted", "onPress", "testID"]);
+    var smallAndUp = useBreakpoint().smallAndUp;
+    return (_jsxs(ActionWrapper, __assign({ accessibilityRole: accessibilityRole, inverted: inverted, onPress: onPress, testID: testID }, rest, { children: [actionType === 'back' ? (_jsx(StyledLeftIcon, { inverted: inverted, name: ACTION_TYPES['back'], size: 16 })) : null, _jsx(StyledActionText, __assign({ smallAndUp: smallAndUp, inverted: inverted }, { children: children })), actionType !== 'back' ? (_jsx(StyledRightIcon, { inverted: inverted, name: ACTION_TYPES[actionType], marginTop: actionType === 'link' ? 1 : 0, size: 16 })) : null] })));
+};
+export { ActionList, Action };

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

@@ -0,0 +1 @@
+export * from './ActionList';

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

@@ -0,0 +1,31 @@
+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 { Icon } from '../Icon';
+import { ListWrapper } from '../List/List';
+export var StyledActionList = ListWrapper;
+export var StyledActionWrapper = styled.View(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, hasBorder = _a.hasBorder, inList = _a.inList, inverted = _a.inverted;
+    return "\n  width: ".concat(inList ? '100%' : 'auto', ";\n  align-self: ").concat(inList ? 'center' : 'flex-start', ";\n  border-bottom-width: ").concat(hasBorder ? core.borderWidth.small : 0, ";\n  border-bottom-style: solid;\n  border-bottom-color: ").concat(inverted ? semantic.inverted.border : semantic.border.graphic, ";\n");
+});
+export var StyledActionInner = styled.View(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  min-height: 44px;\n"], ["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  min-height: 44px;\n"])));
+export var StyledActionText = styled.Text(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp, _c = _a.inverted, inverted = _c === void 0 ? false : _c;
+    var fontSize = smallAndUp
+        ? core.fontSize.body.large
+        : core.fontSize.body.small;
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    color: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n  "], ["\n    color: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n  "])), inverted ? semantic.inverted.message.base : semantic.message.base, core.fontFamily.bodyBold.native, fontSize, core.lineHeight.body.small);
+});
+export var StyledRightIcon = styled(Icon)(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, inverted = _a.inverted, marginTop = _a.marginTop;
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    color: ", ";\n    margin-left: ", ";\n    margin-top: ", ";\n  "], ["\n    color: ", ";\n    margin-left: ", ";\n    margin-top: ", ";\n  "])), inverted ? semantic.inverted.message.base : semantic.message.base, core.space[1], core.space[marginTop]);
+});
+export var StyledLeftIcon = styled(Icon)(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, inverted = _a.inverted;
+    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      color: ", ";\n      margin-right: ", ";\n    "], ["\n      color: ", ";\n      margin-right: ", ";\n    "])), inverted
+        ? semantic.inverted.message.base
+        : semantic.message.base, core.space[1]);
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/esm/components/Divider/Divider.js

@@ -6,7 +6,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import styled, { css } from '../../styled.native';
 var StyledDivider = styled.View(function (_a) {
     var semantic = _a.theme.semantic, _b = _a.type, type = _b === void 0 ? 'default' : _b, _c = _a.width, width = _c === void 0 ? '100%' : _c;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      height: 1px;\n      background: ", ";\n      width: ", ";\n    "], ["\n      height: 1px;\n      background: ", ";\n      width: ", ";\n    "])), type === 'default' ? semantic.border.graphic : semantic.border.differentiated, width);
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      height: 1px;\n      background: ", ";\n      width: ", ";\n    "], ["\n      height: 1px;\n      background: ", ";\n      width: ", ";\n    "])), type === 'default'
+        ? semantic.border.graphic
+        : semantic.border.differentiated, width);
 });
 export var Divider = function (_a) {
     var type = _a.type, width = _a.width;

package/dist/esm/components/FormGroup/FormGroup.js

@@ -28,6 +28,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { View } from 'react-native';
 import styled from '../../styled.native';
 var FormGroupWrapper = styled.View(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  flex-direction: row;\n"], ["\n  flex-direction: row;\n"])));
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 var FormGroup = function (_a) {
     var children = _a.children, error = _a.error, rest = __rest(_a, ["children", "error"]);
     return (_jsx(FormGroupWrapper, __assign({}, rest, { children: _jsx(View, __assign({ style: { flex: 1 } }, { children: children })) })));

package/dist/esm/components/Radio/Radio.js

@@ -32,7 +32,7 @@ var StyledRadioInputWrapper = styled.View(function (_a) {
 });
 var StyledRadioInput = styled.View(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic, invalid = _a.invalid, checked = _a.checked;
-    return "\n      width: ".concat(core.space[6], ";\n      height: ").concat(core.space[6], ";\n      border: ").concat(core.borderWidth.small, " solid;\n      align-items: center;\n      justify-content: center;\n      border-radius: 50%;\n      border-color: ").concat(invalid
+    return "\n      width: ".concat(core.space[6], ";\n      height: ").concat(core.space[6], ";\n      border: ").concat(core.borderWidth.small, " solid;\n      align-items: center;\n      justify-content: center;\n      border-radius: ").concat(core.space[6], ";\n      border-color: ").concat(invalid
         ? semantic.error.border
         : checked
             ? core.color.blue.dark
@@ -40,7 +40,7 @@ var StyledRadioInput = styled.View(function (_a) {
 });
 var StyledRadioInputDot = styled.View(function (_a) {
     var core = _a.theme.core, checked = _a.checked;
-    return "\n      width: ".concat(core.space[3], ";\n      height: ").concat(core.space[3], ";\n      border-radius: 50%;\n      background: ").concat(core.color.blue.dark, ";\n      opacity: ").concat(checked ? 1 : 0, ";\n    ");
+    return "\n      width: ".concat(core.space[3], ";\n      height: ").concat(core.space[3], ";\n      border-radius: ").concat(core.space[3], ";\n      background: ").concat(core.color.blue.dark, ";\n      opacity: ").concat(checked ? 1 : 0, ";\n    ");
 });
 var Input = function (_a) {
     var checked = _a.checked, invalid = _a.invalid, testID = _a.testID, rest = __rest(_a, ["checked", "invalid", "testID"]);

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

@@ -13,17 +13,9 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import groupBy from 'lodash.groupby';
+import { Fragment, useState } from 'react';
 import { Modal, ScrollView, View } from 'react-native';
 import styled, { css } from '../../styled.native';
 import { Icon } from '../Icon';
@@ -56,7 +48,11 @@ var RadioDot = styled.View(function (_a) {
 });
 var StyledP = styled(P)(function (_a) {
     var core = _a.theme.core;
-    return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    margin-top: ", ";\n  "], ["\n    margin-top: ", ";\n  "])), core.space[3]);
+    return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "], ["\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "])), core.space[3], core.space[3]);
+});
+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]);
 });
 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;
@@ -67,9 +63,11 @@ export var Select = function (_a) {
         setOpen(false);
         setSelected(val);
     };
-    var extendedOptions = __spreadArray([
-        { label: "-- ".concat(noOptionMessage, " --"), value: 'default' }
-    ], options, true);
-    return (_jsxs(View, { children: [_jsxs(SelectInput, __assign({ testID: testID, hasError: hasError, onPress: function () { return setOpen(!isOpen); } }, { children: [_jsx(P, __assign({ style: { marginTop: 0, marginBottom: 0 } }, { children: selected.value === 'default' ? '' : selected.label })), _jsx(Icon, { name: "chevron-down", size: 16, style: { marginLeft: 'auto' } })] })), _jsx(Modal, __assign({ transparent: true, visible: isOpen, animationType: "fade", onRequestClose: function () { return setOpen(false); } }, { children: _jsx(DropdownWrapper, { children: _jsx(DropdownContainer, { children: _jsx(ScrollView, __assign({ nestedScrollEnabled: true }, { children: extendedOptions.map(function (option, i) { return (_jsxs(SelectOption, __assign({ accessibilityRole: "radio", isLastOption: i === extendedOptions.length - 1, onPress: function () { return handleOptionPress(option); } }, { children: [_jsx(StyledP, { children: _jsx(Strong, { children: option.label }) }), _jsx(Radio, __assign({ isChecked: selected.value === option.value }, { children: _jsx(RadioDot, { isChecked: selected.value === option.value }) }))] }), option.label)); }) })) }) }) }))] }));
+    var optionsByCategories = groupBy(options, 'category');
+    var requiredOption = {
+        label: "-- ".concat(noOptionMessage, " --"),
+        value: 'default',
+    };
+    return (_jsxs(View, { children: [_jsxs(SelectInput, __assign({ testID: testID, hasError: hasError, onPress: function () { return setOpen(!isOpen); } }, { children: [_jsx(P, __assign({ style: { marginTop: 0, marginBottom: 0 } }, { children: selected.value === 'default' ? '' : selected.label })), _jsx(Icon, { name: "chevron-down", size: 16, style: { marginLeft: 'auto' } })] })), _jsx(Modal, __assign({ transparent: true, visible: isOpen, animationType: "fade", onRequestClose: function () { return setOpen(false); } }, { children: _jsx(DropdownWrapper, { children: _jsx(DropdownContainer, { children: _jsxs(ScrollView, __assign({ nestedScrollEnabled: true }, { children: [_jsxs(SelectOption, __assign({ accessibilityRole: "radio", onPress: function () { return handleOptionPress(requiredOption); } }, { children: [_jsx(StyledP, { children: _jsx(Strong, { children: requiredOption.label }) }), _jsx(Radio, __assign({ isChecked: selected.value === requiredOption.value }, { children: _jsx(RadioDot, { isChecked: selected.value === requiredOption.value }) }))] })), Object.keys(optionsByCategories).map(function (category) { return (_jsxs(Fragment, { children: [category !== 'undefined' ? (_jsx(StyledCategory, { children: category })) : null, optionsByCategories[category].map(function (option, i) { return (_jsxs(SelectOption, __assign({ accessibilityRole: "radio", isLastOption: i === optionsByCategories[category].length - 1, onPress: function () { return handleOptionPress(option); } }, { children: [_jsx(StyledP, { children: _jsx(Strong, { children: option.label }) }), _jsx(Radio, __assign({ isChecked: selected.value === option.value }, { children: _jsx(RadioDot, { isChecked: selected.value === option.value }) }))] }), option.label)); })] }, category)); })] })) }) }) }))] }));
 };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/dist/esm/components/index.js

@@ -1,4 +1,5 @@
 export * from './Accordion';
+export * from './ActionList';
 export * from './Badge';
 export * from './Card';
 export * from './Checkbox';

package/dist/esm/utils/utils.js

@@ -78,6 +78,7 @@ function getErrorMessage(id, errors) {
     }) || { message: null })
         .message;
 }
+// eslint-disable-next-line @typescript-eslint/ban-types
 function callAll() {
     var fns = [];
     for (var _i = 0; _i < arguments.length; _i++) {

package/dist/providers/IconsProvider.d.ts

@@ -1,7 +1,7 @@
 import { PropsWithChildren } from 'react';
 import { IconsType } from './types';
 declare const defaultIcons: IconsType;
-declare function useIcons<T extends IconsType = {}>(): IconsType & T;
+declare function useIcons<T extends IconsType = string & object>(): IconsType & T;
 declare function IconsProvider({ children, icons, }: PropsWithChildren<{
     icons?: IconsType;
 }>): JSX.Element;

package/dist/providers/types.d.ts

@@ -1,4 +1,5 @@
 import { FunctionComponent } from 'react';
 import { SvgProps } from 'react-native-svg';
 export declare type IconName = 'arrow-down' | 'arrow-left' | 'arrow-right' | 'arrow-up' | 'caret-down' | 'caret-left' | 'caret-right' | 'caret-up' | 'chart' | 'check' | 'chevron-down' | 'chevron-left' | 'chevron-left-small' | 'chevron-left-small-first' | 'chevron-right' | 'chevron-right-small' | 'chevron-right-small-last' | 'chevron-up' | 'cross' | 'dollar' | 'download' | 'electricity' | 'euro' | 'gas' | 'help' | 'hide' | 'home' | 'info' | 'link' | 'logo' | 'minus' | 'new-window' | 'payment-card' | 'plus' | 'pound' | 'search' | 'show' | 'user';
+export declare type IconNameExtended = IconName | string;
 export declare type IconsType = Record<string, FunctionComponent<SvgProps>>;

package/dist/styled.native.d.ts

@@ -228,7 +228,7 @@ declare const styled: styledComponents.ReactNativeStyledInterface<import("./them
             };
         };
     };
-}>, css: import("styled-components").ThemedCssFunction<import("./theme/theme").Theme & {
+} & object>, css: import("styled-components").ThemedCssFunction<import("./theme/theme").Theme & {
     core: {
         radius: Record<"small" | "medium" | "large" | "max", string>;
         borderWidth: Record<"small" | "medium" | "large", string>;
@@ -455,7 +455,7 @@ declare const styled: styledComponents.ReactNativeStyledInterface<import("./them
             };
         };
     };
-}>, ThemeProvider: import("styled-components").ThemeProviderComponent<import("./theme/theme").Theme & {
+} & object>, ThemeProvider: import("styled-components").ThemeProviderComponent<import("./theme/theme").Theme & {
     core: {
         radius: Record<"small" | "medium" | "large" | "max", string>;
         borderWidth: Record<"small" | "medium" | "large", string>;
@@ -682,7 +682,7 @@ declare const styled: styledComponents.ReactNativeStyledInterface<import("./them
             };
         };
     };
-}, import("./theme/theme").Theme & {
+} & object, import("./theme/theme").Theme & {
     core: {
         radius: Record<"small" | "medium" | "large" | "max", string>;
         borderWidth: Record<"small" | "medium" | "large", string>;
@@ -909,7 +909,7 @@ declare const styled: styledComponents.ReactNativeStyledInterface<import("./them
             };
         };
     };
-}>, ThemeContext: import("react").Context<import("./theme/theme").Theme & {
+} & object>, ThemeContext: import("react").Context<import("./theme/theme").Theme & {
     core: {
         radius: Record<"small" | "medium" | "large" | "max", string>;
         borderWidth: Record<"small" | "medium" | "large", string>;
@@ -1136,7 +1136,7 @@ declare const styled: styledComponents.ReactNativeStyledInterface<import("./them
             };
         };
     };
-}>, useTheme: () => import("./theme/theme").Theme & {
+} & object>, useTheme: () => import("./theme/theme").Theme & {
     core: {
         radius: Record<"small" | "medium" | "large" | "max", string>;
         borderWidth: Record<"small" | "medium" | "large", string>;
@@ -1363,6 +1363,6 @@ declare const styled: styledComponents.ReactNativeStyledInterface<import("./them
             };
         };
     };
-};
+} & object;
 export { css, ThemeProvider, ThemeContext, useTheme };
 export default styled;

package/dist/theme/create-theme.d.ts

@@ -14,5 +14,5 @@ declare type OneLevelPartial<T> = {
 };
 export declare type RequiredThemeKeys = Pick<Theme, 'borderWidths' | 'radii' | 'breakpoints' | 'shadows' | 'space' | 'fonts' | 'lineHeights' | 'fontSizes' | 'responsiveFontSizes' | 'responsiveLineHeights' | 'colors'>;
 export declare const defaultTokens: RequiredThemeKeys;
-export declare function createTheme<T, A = {}>(customTheme: ThreeLevelPartial<Theme> & T, additional?: ThreeLevelPartial<Theme> & A): Theme & T & A;
+export declare function createTheme<T, A = object>(customTheme: ThreeLevelPartial<Theme> & T, additional?: ThreeLevelPartial<Theme> & A): Theme & T & A;
 export {};

package/dist/theme/index.d.ts

@@ -226,6 +226,6 @@ export declare const theme: import("./theme").Theme & {
             };
         };
     };
-};
+} & object;
 export declare type Theme = typeof theme;
 export declare const calculateLineHeight: (size: string, lineHeight?: number) => string;

package/dist/utils/utils.js

@@ -88,6 +88,7 @@ function getErrorMessage(id, errors) {
         .message;
 }
 exports.getErrorMessage = getErrorMessage;
+// eslint-disable-next-line @typescript-eslint/ban-types
 function callAll() {
     var fns = [];
     for (var _i = 0; _i < arguments.length; _i++) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ovotech/element-native",
-  "version": "3.0.0",
+  "version": "3.1.0-canary-9ecd91d-105",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
@@ -13,7 +13,7 @@
     "url": "@ovotech/element"
   },
   "dependencies": {
-    "@ovotech/element-core": "^2.0.0",
+    "@ovotech/element-core": "^2.0.0-canary-9ecd91d-105",
     "deepmerge": "^4.2.2"
   },
   "devDependencies": {
@@ -23,6 +23,7 @@
     "@testing-library/react-native": "^11.5.2",
     "@testing-library/user-event": "^14.4.3",
     "@types/jest": "^28.1.1",
+    "@types/lodash.groupby": "^4.6.7",
     "@types/react": "18.0.24",
     "@types/react-is": "^18.2.0",
     "@types/react-native": "^0.72.0",
@@ -33,6 +34,7 @@
     "babel-plugin-require-context-hook": "^1.0.0",
     "jest": "^28.1.1",
     "jest-styled-components": "^7.0.3",
+    "lodash.groupby": "^4.6.0",
     "metro-react-native-babel-preset": "^0.77.0",
     "react": "18.2.0",
     "react-is": "^16.13.0",

package/dist/components/Input/TelInput.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-import { TextInput } from 'react-native';
-declare const TelInput: React.ForwardRefExoticComponent<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<TextInput>>;
-export { TelInput };

package/dist/components/Input/TelInput.js

@@ -1,41 +0,0 @@
-"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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TelInput = void 0;
-var react_1 = __importStar(require("react"));
-var Input_1 = require("./Input");
-var TelInput = (0, react_1.forwardRef)(function (props, ref) { return (react_1.default.createElement(Input_1.Input, __assign({}, props, { keyboardType: "phone-pad", autoCapitalize: "none", autoCorrect: false, ref: ref }))); });
-exports.TelInput = TelInput;