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

package/dist/components/ActionList/styled.js

@@ -0,0 +1,57 @@
+"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 __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.StyledLeftIcon = exports.StyledRightIcon = exports.StyledActionText = exports.StyledActionInner = exports.StyledActionWrapper = exports.StyledActionList = void 0;
+var styled_native_1 = __importStar(require("../../styled.native"));
+var Icon_1 = require("../Icon");
+var List_1 = require("../List/List");
+exports.StyledActionList = List_1.ListWrapper;
+exports.StyledActionWrapper = styled_native_1.default.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");
+});
+exports.StyledActionInner = styled_native_1.default.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"])));
+exports.StyledActionText = styled_native_1.default.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 (0, styled_native_1.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);
+});
+exports.StyledRightIcon = (0, styled_native_1.default)(Icon_1.Icon)(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, inverted = _a.inverted, marginTop = _a.marginTop;
+    return (0, styled_native_1.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]);
+});
+exports.StyledLeftIcon = (0, styled_native_1.default)(Icon_1.Icon)(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, inverted = _a.inverted;
+    return (0, styled_native_1.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/components/Badge/Badge.d.ts

@@ -229,7 +229,7 @@ declare const StyledBadge: import("styled-components").StyledComponent<typeof im
             };
         };
     };
-}, {
+} & object, {
     customVariant?: {
         backgroundColor: string;
         foregroundColor: string;

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

@@ -13,7 +13,7 @@ declare const CTAButton: ({ iconLeft, iconRight, children, fullWidth, variant, .
 declare type CTAProps = Omit<ComponentProps<typeof CTAButton>, 'variant' | 'ref'> & {
     ref: Ref<TouchableOpacity>;
 };
-declare const PrimaryCTAButton: import("react").ForwardRefExoticComponent<Pick<CTAProps, keyof TouchableOpacityProps | "fullWidth" | "iconLeft" | "iconRight"> & import("react").RefAttributes<TouchableOpacity>>;
-declare const SecondaryCTAButton: import("react").ForwardRefExoticComponent<Pick<CTAProps, keyof TouchableOpacityProps | "fullWidth" | "iconLeft" | "iconRight"> & import("react").RefAttributes<TouchableOpacity>>;
-declare const DestructiveCTAButton: import("react").ForwardRefExoticComponent<Pick<CTAProps, keyof TouchableOpacityProps | "fullWidth" | "iconLeft" | "iconRight"> & import("react").RefAttributes<TouchableOpacity>>;
+declare const PrimaryCTAButton: import("react").ForwardRefExoticComponent<Pick<CTAProps, "iconLeft" | "iconRight" | "fullWidth" | keyof TouchableOpacityProps> & import("react").RefAttributes<TouchableOpacity>>;
+declare const SecondaryCTAButton: import("react").ForwardRefExoticComponent<Pick<CTAProps, "iconLeft" | "iconRight" | "fullWidth" | keyof TouchableOpacityProps> & import("react").RefAttributes<TouchableOpacity>>;
+declare const DestructiveCTAButton: import("react").ForwardRefExoticComponent<Pick<CTAProps, "iconLeft" | "iconRight" | "fullWidth" | keyof TouchableOpacityProps> & import("react").RefAttributes<TouchableOpacity>>;
 export { CTAButton, PrimaryCTAButton, SecondaryCTAButton, DestructiveCTAButton, };

package/dist/components/CTALink/CTALink.d.ts

@@ -4,8 +4,8 @@ import { CTAButton } from '../CTAButton';
 declare type CTALinkProps = Omit<ComponentProps<typeof CTAButton>, 'ref'> & {
     ref: Ref<TouchableOpacity>;
 };
-declare const CTALink: import("react").ForwardRefExoticComponent<Pick<CTALinkProps, "variant" | keyof import("react-native/types").TouchableOpacityProps | "fullWidth" | "iconLeft" | "iconRight"> & import("react").RefAttributes<TouchableOpacity>>;
+declare const CTALink: import("react").ForwardRefExoticComponent<Pick<CTALinkProps, "iconLeft" | "iconRight" | "fullWidth" | keyof import("react-native/types").TouchableOpacityProps | "variant"> & import("react").RefAttributes<TouchableOpacity>>;
 declare type CTAProps = Omit<ComponentProps<typeof CTALink>, 'variant'>;
-declare const PrimaryCTALink: import("react").ForwardRefExoticComponent<Pick<CTAProps, "key" | keyof import("react-native/types").TouchableOpacityProps | "fullWidth" | "iconLeft" | "iconRight"> & import("react").RefAttributes<TouchableOpacity>>;
-declare const SecondaryCTALink: import("react").ForwardRefExoticComponent<Pick<CTAProps, "key" | keyof import("react-native/types").TouchableOpacityProps | "fullWidth" | "iconLeft" | "iconRight"> & import("react").RefAttributes<TouchableOpacity>>;
+declare const PrimaryCTALink: import("react").ForwardRefExoticComponent<Pick<CTAProps, "key" | "iconLeft" | "iconRight" | "fullWidth" | keyof import("react-native/types").TouchableOpacityProps> & import("react").RefAttributes<TouchableOpacity>>;
+declare const SecondaryCTALink: import("react").ForwardRefExoticComponent<Pick<CTAProps, "key" | "iconLeft" | "iconRight" | "fullWidth" | keyof import("react-native/types").TouchableOpacityProps> & import("react").RefAttributes<TouchableOpacity>>;
 export { CTALink, PrimaryCTALink, SecondaryCTALink };

package/dist/components/Card/Card.d.ts

@@ -225,6 +225,6 @@ export declare const Card: import("styled-components").StyledComponent<typeof im
             };
         };
     };
-}, {
+} & object, {
     inline?: boolean | undefined;
 }, never>;

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

@@ -226,7 +226,7 @@ export declare const StyledTableContainer: import("styled-components").StyledCom
             };
         };
     };
-}, {}, never>;
+} & object, {}, never>;
 export declare const TableHeader: import("styled-components").StyledComponent<typeof import("react-native").View, import("../../theme/theme").Theme & {
     core: {
         radius: Record<"small" | "medium" | "large" | "max", string>;
@@ -454,7 +454,7 @@ export declare const TableHeader: import("styled-components").StyledComponent<ty
             };
         };
     };
-}, {
+} & object, {
     cellWidth: string;
 } & Breakpoints, never>;
 export declare const TableHeaderText: import("styled-components").StyledComponent<typeof import("react-native").Text, import("../../theme/theme").Theme & {
@@ -684,7 +684,7 @@ export declare const TableHeaderText: import("styled-components").StyledComponen
             };
         };
     };
-}, Breakpoints, never>;
+} & object, Breakpoints, never>;
 export declare const TableCaptionText: import("styled-components").StyledComponent<typeof import("react-native").Text, import("../../theme/theme").Theme & {
     core: {
         radius: Record<"small" | "medium" | "large" | "max", string>;
@@ -912,7 +912,7 @@ export declare const TableCaptionText: import("styled-components").StyledCompone
             };
         };
     };
-}, Breakpoints, never>;
+} & object, Breakpoints, never>;
 export declare const CellText: import("styled-components").StyledComponent<typeof import("react-native").Text, import("../../theme/theme").Theme & {
     core: {
         radius: Record<"small" | "medium" | "large" | "max", string>;
@@ -1140,7 +1140,7 @@ export declare const CellText: import("styled-components").StyledComponent<typeo
             };
         };
     };
-}, Breakpoints, never>;
+} & object, Breakpoints, never>;
 export declare const TableCaption: import("styled-components").StyledComponent<typeof import("react-native").View, import("../../theme/theme").Theme & {
     core: {
         radius: Record<"small" | "medium" | "large" | "max", string>;
@@ -1368,7 +1368,7 @@ export declare const TableCaption: import("styled-components").StyledComponent<t
             };
         };
     };
-}, Breakpoints, never>;
+} & object, Breakpoints, never>;
 export declare const TableRow: import("styled-components").StyledComponent<typeof import("react-native").View, import("../../theme/theme").Theme & {
     core: {
         radius: Record<"small" | "medium" | "large" | "max", string>;
@@ -1596,7 +1596,7 @@ export declare const TableRow: import("styled-components").StyledComponent<typeo
             };
         };
     };
-}, {
+} & object, {
     stripe: boolean;
 }, never>;
 export declare const TableRowHeading: import("styled-components").StyledComponent<typeof import("react-native").View, import("../../theme/theme").Theme & {
@@ -1826,7 +1826,7 @@ export declare const TableRowHeading: import("styled-components").StyledComponen
             };
         };
     };
-}, {}, never>;
+} & object, {}, never>;
 export declare const TableBody: import("styled-components").StyledComponent<typeof import("react-native").View, import("../../theme/theme").Theme & {
     core: {
         radius: Record<"small" | "medium" | "large" | "max", string>;
@@ -2054,7 +2054,7 @@ export declare const TableBody: import("styled-components").StyledComponent<type
             };
         };
     };
-}, {}, never>;
+} & object, {}, never>;
 export declare const TableCell: import("styled-components").StyledComponent<typeof import("react-native").View, import("../../theme/theme").Theme & {
     core: {
         radius: Record<"small" | "medium" | "large" | "max", string>;
@@ -2282,7 +2282,7 @@ export declare const TableCell: import("styled-components").StyledComponent<type
             };
         };
     };
-}, {
+} & object, {
     cellWidth: string;
 } & Breakpoints, never>;
 export declare const RowHeading: import("styled-components").StyledComponent<typeof import("react-native").View, import("../../theme/theme").Theme & {
@@ -2512,6 +2512,6 @@ export declare const RowHeading: import("styled-components").StyledComponent<typ
             };
         };
     };
-}, {
+} & object, {
     cellWidth: string;
 } & Breakpoints, never>;

package/dist/components/DescriptionList/styled.d.ts

@@ -232,7 +232,7 @@ export declare const Dl: import("react").ForwardRefExoticComponent<Pick<Omit<{
                 };
             };
         };
-    }) | undefined;
+    } & object) | undefined;
 } & {
     as?: string | import("react").ComponentType<any> | undefined;
     forwardedAs?: string | import("react").ComponentType<any> | undefined;

package/dist/components/Divider/Divider.js

@@ -32,7 +32,9 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_native_1 = __importStar(require("../../styled.native"));
 var StyledDivider = styled_native_1.default.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 (0, styled_native_1.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 (0, styled_native_1.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);
 });
 var Divider = function (_a) {
     var type = _a.type, width = _a.width;

package/dist/components/ErrorText/ErrorText.d.ts

@@ -232,7 +232,7 @@ declare const ErrorText: import("react").ForwardRefExoticComponent<Pick<Omit<{
                 };
             };
         };
-    }) | undefined;
+    } & object) | undefined;
 } & {
     as?: string | import("react").ComponentType<any> | undefined;
     forwardedAs?: string | import("react").ComponentType<any> | undefined;

package/dist/components/FormGroup/FormGroup.js

@@ -34,6 +34,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var react_native_1 = require("react-native");
 var styled_native_1 = __importDefault(require("../../styled.native"));
 var FormGroupWrapper = styled_native_1.default.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 ((0, jsx_runtime_1.jsx)(FormGroupWrapper, __assign({}, rest, { children: (0, jsx_runtime_1.jsx)(react_native_1.View, __assign({ style: { flex: 1 } }, { children: children })) })));

package/dist/components/Grid/Col.d.ts

@@ -231,7 +231,7 @@ declare const Col: import("react").ForwardRefExoticComponent<Pick<Omit<{
                 };
             };
         };
-    }) | undefined;
+    } & object) | undefined;
 } & {
     as?: string | import("react").ComponentType<any> | undefined;
     forwardedAs?: string | import("react").ComponentType<any> | undefined;

package/dist/components/Grid/Row.d.ts

@@ -227,7 +227,7 @@ declare const StyledRow: import("styled-components").StyledComponent<typeof impo
             };
         };
     };
-}, {
+} & object, {
     isNested?: boolean | undefined;
 } & {
     children?: import("react").ReactNode;

package/dist/components/HintText/HintText.d.ts

@@ -232,7 +232,7 @@ declare const HintText: import("react").ForwardRefExoticComponent<Pick<Omit<{
                 };
             };
         };
-    }) | undefined;
+    } & object) | undefined;
 } & {
     as?: string | import("react").ComponentType<any> | undefined;
     forwardedAs?: string | import("react").ComponentType<any> | undefined;

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

@@ -1,9 +1,9 @@
 /// <reference types="react" />
 import { SvgProps } from 'react-native-svg';
-import { IconName } from '../../providers';
+import { IconNameExtended } from '../../providers';
 export declare type IconBase = React.FunctionComponent<SvgProps>;
 export declare type IconProps = SvgProps & {
-    name: IconName | (string & {});
+    name: IconNameExtended;
     color?: string;
     size: string | number;
 };

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

@@ -7,8 +7,8 @@ export declare type CurrencyInputProps = InputProps & {
 declare const CurrencyInput: import("react").ForwardRefExoticComponent<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/Input/EmailInput.d.ts

@@ -3,8 +3,8 @@ import { TextInput } from 'react-native';
 declare const EmailInput: import("react").ForwardRefExoticComponent<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<TextInput>>;
 export { EmailInput };

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

@@ -1,18 +1,18 @@
 import { ReactNode } from 'react';
 import { TextInput, TextInputProps } from 'react-native';
-import { IconName } from '../../providers/types';
+import { IconNameExtended } from '../../providers/types';
 export declare type InputProps = TextInputProps & {
     invalid?: boolean;
     stretch?: boolean;
-    iconLeft?: IconName | (string & object);
-    iconRight?: IconName | (string & object);
+    iconLeft?: IconNameExtended;
+    iconRight?: IconNameExtended;
     rightSlot?: ReactNode;
 };
 declare const Input: import("react").ForwardRefExoticComponent<TextInputProps & {
     invalid?: boolean | undefined;
     stretch?: boolean | undefined;
-    iconLeft?: IconName | undefined;
-    iconRight?: IconName | undefined;
+    iconLeft?: string | undefined;
+    iconRight?: string | undefined;
     rightSlot?: ReactNode;
 } & import("react").RefAttributes<TextInput>>;
 export { Input };

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

@@ -3,8 +3,8 @@ import { TextInput as RNTextInput } from 'react-native';
 declare const NumberInput: import("react").ForwardRefExoticComponent<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<RNTextInput>>;
 export { NumberInput };

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

@@ -3,8 +3,8 @@ import { TextInput as RNTextInput } from 'react-native';
 declare const PasswordInput: import("react").ForwardRefExoticComponent<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/Input/PasswordInput.styled.d.ts

@@ -226,6 +226,6 @@ export declare const StyledPressable: import("styled-components").StyledComponen
             };
         };
     };
-}, {
+} & object, {
     focused: boolean;
 }, never>;

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

@@ -1,9 +1,10 @@
+import { IconNameExtended } from '../../providers';
 export declare const useTogglePasswordVisibility: () => {
     isPasswordVisible: boolean;
     handlePasswordVisibility: () => void;
 };
 declare type PasswordVisibilityToggleProps = {
-    iconName: string;
+    iconName: IconNameExtended;
     visibilityToggleLabel: string;
     handlePasswordVisibility: () => void;
 };

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

@@ -3,8 +3,8 @@ import { TextInput } from 'react-native';
 declare const PhoneInput: import("react").ForwardRefExoticComponent<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<TextInput>>;
 export { PhoneInput };

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

@@ -3,8 +3,8 @@ import { TextInput as RNTextInput } from 'react-native';
 declare const TextInput: import("react").ForwardRefExoticComponent<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<RNTextInput>>;
 export { TextInput };

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

@@ -7,8 +7,8 @@ declare type TextareaInputProps = InputProps & {
 declare const TextareaInput: import("react").ForwardRefExoticComponent<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/LabelText/LabelText.d.ts

@@ -232,7 +232,7 @@ declare const LabelText: import("react").ForwardRefExoticComponent<Pick<Omit<{
                 };
             };
         };
-    }) | undefined;
+    } & object) | undefined;
 } & {
     as?: string | import("react").ComponentType<any> | undefined;
     forwardedAs?: string | import("react").ComponentType<any> | undefined;

package/dist/components/List/List.d.ts

@@ -232,7 +232,7 @@ declare const ListWrapper: import("react").ForwardRefExoticComponent<Pick<Omit<{
                 };
             };
         };
-    }) | undefined;
+    } & object) | undefined;
 } & {
     as?: string | import("react").ComponentType<any> | undefined;
     forwardedAs?: string | import("react").ComponentType<any> | undefined;
@@ -473,7 +473,7 @@ declare const Li: import("react").ForwardRefExoticComponent<Pick<Omit<{
                 };
             };
         };
-    }) | undefined;
+    } & object) | undefined;
 } & {
     as?: string | import("react").ComponentType<any> | undefined;
     forwardedAs?: string | import("react").ComponentType<any> | undefined;
@@ -714,7 +714,7 @@ declare const Dl: import("react").ForwardRefExoticComponent<Pick<Omit<{
                 };
             };
         };
-    }) | undefined;
+    } & object) | undefined;
 } & {
     as?: string | import("react").ComponentType<any> | undefined;
     forwardedAs?: string | import("react").ComponentType<any> | undefined;

package/dist/components/Margin/Margin.d.ts

@@ -239,12 +239,15 @@ declare const StyledMargin: import("styled-components").StyledComponent<typeof i
             };
         };
     };
-}, MProps, never>;
+} & object, MProps, never>;
 declare type Props = Omit<ComponentProps<typeof StyledMargin>, 'mTop' | 'mBottom' | 'mLeft' | 'mRight' | 'breakpoints'> & {
     top?: SpaceKey | SpaceKey[];
     bottom?: SpaceKey | SpaceKey[];
     left?: SpaceKey | SpaceKey[];
     right?: SpaceKey | SpaceKey[];
+    horizontal?: SpaceKey | SpaceKey[];
+    vertical?: SpaceKey | SpaceKey[];
+    all?: SpaceKey | SpaceKey[];
 };
 declare const Margin: ({ top, bottom, left, right, ...rest }: Props) => JSX.Element;
 export { Margin };

package/dist/components/Notification/Notification.d.ts

@@ -229,7 +229,7 @@ export declare const NotificationContentBox: import("styled-components").StyledC
             };
         };
     };
-}, {}, never>;
+} & object, {}, never>;
 export declare const NotificationTitleBox: import("styled-components").StyledComponent<typeof import("react-native").View, import("../../theme/theme").Theme & {
     core: {
         radius: Record<"small" | "medium" | "large" | "max", string>;
@@ -457,7 +457,7 @@ export declare const NotificationTitleBox: import("styled-components").StyledCom
             };
         };
     };
-}, {
+} & object, {
     variant: NotificationVariantName;
     noMargin?: boolean | undefined;
     dismissible: boolean;

package/dist/components/Radio/Radio.js

@@ -38,7 +38,7 @@ var StyledRadioInputWrapper = styled_native_1.default.View(function (_a) {
 });
 var StyledRadioInput = styled_native_1.default.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
@@ -46,7 +46,7 @@ var StyledRadioInput = styled_native_1.default.View(function (_a) {
 });
 var StyledRadioInputDot = styled_native_1.default.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/components/SelectField/Select.d.ts

@@ -1,6 +1,7 @@
 declare type SelectOption = {
     label: string;
     value: string;
+    category?: string;
 };
 export declare type SelectProps = {
     defaultSelected?: SelectOption;
@@ -237,7 +238,7 @@ declare const SelectOption: import("styled-components").StyledComponent<typeof i
             };
         };
     };
-}, {
+} & object, {
     isLastOption: boolean;
 }, never>;
 export declare const Select: ({ options, defaultSelected, noOptionMessage, onSelected, hasError, testID, }: SelectProps) => JSX.Element;

package/dist/components/SelectField/Select.js

@@ -37,18 +37,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-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));
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Select = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
+var lodash_groupby_1 = __importDefault(require("lodash.groupby"));
 var react_1 = require("react");
 var react_native_1 = require("react-native");
 var styled_native_1 = __importStar(require("../../styled.native"));
@@ -82,7 +77,11 @@ var RadioDot = styled_native_1.default.View(function (_a) {
 });
 var StyledP = (0, styled_native_1.default)(Text_1.P)(function (_a) {
     var core = _a.theme.core;
-    return (0, styled_native_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    margin-top: ", ";\n  "], ["\n    margin-top: ", ";\n  "])), core.space[3]);
+    return (0, styled_native_1.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 = (0, styled_native_1.default)(Text_1.P)(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic;
+    return (0, styled_native_1.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]);
 });
 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;
@@ -93,10 +92,12 @@ var Select = function (_a) {
         setOpen(false);
         setSelected(val);
     };
-    var extendedOptions = __spreadArray([
-        { label: "-- ".concat(noOptionMessage, " --"), value: 'default' }
-    ], options, true);
-    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, jsx_runtime_1.jsxs)(SelectInput, __assign({ testID: testID, hasError: hasError, onPress: function () { return setOpen(!isOpen); } }, { children: [(0, jsx_runtime_1.jsx)(Text_1.P, __assign({ style: { marginTop: 0, marginBottom: 0 } }, { children: selected.value === 'default' ? '' : selected.label })), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "chevron-down", size: 16, style: { marginLeft: 'auto' } })] })), (0, jsx_runtime_1.jsx)(react_native_1.Modal, __assign({ transparent: true, visible: isOpen, animationType: "fade", onRequestClose: function () { return setOpen(false); } }, { children: (0, jsx_runtime_1.jsx)(DropdownWrapper, { children: (0, jsx_runtime_1.jsx)(DropdownContainer, { children: (0, jsx_runtime_1.jsx)(react_native_1.ScrollView, __assign({ nestedScrollEnabled: true }, { children: extendedOptions.map(function (option, i) { return ((0, jsx_runtime_1.jsxs)(SelectOption, __assign({ accessibilityRole: "radio", isLastOption: i === extendedOptions.length - 1, onPress: function () { return handleOptionPress(option); } }, { children: [(0, jsx_runtime_1.jsx)(StyledP, { children: (0, jsx_runtime_1.jsx)(Text_1.Strong, { children: option.label }) }), (0, jsx_runtime_1.jsx)(Radio, __assign({ isChecked: selected.value === option.value }, { children: (0, jsx_runtime_1.jsx)(RadioDot, { isChecked: selected.value === option.value }) }))] }), option.label)); }) })) }) }) }))] }));
+    var optionsByCategories = (0, lodash_groupby_1.default)(options, 'category');
+    var requiredOption = {
+        label: "-- ".concat(noOptionMessage, " --"),
+        value: 'default',
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, jsx_runtime_1.jsxs)(SelectInput, __assign({ testID: testID, hasError: hasError, onPress: function () { return setOpen(!isOpen); } }, { children: [(0, jsx_runtime_1.jsx)(Text_1.P, __assign({ style: { marginTop: 0, marginBottom: 0 } }, { children: selected.value === 'default' ? '' : selected.label })), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "chevron-down", size: 16, style: { marginLeft: 'auto' } })] })), (0, jsx_runtime_1.jsx)(react_native_1.Modal, __assign({ transparent: true, visible: isOpen, animationType: "fade", onRequestClose: function () { return setOpen(false); } }, { children: (0, jsx_runtime_1.jsx)(DropdownWrapper, { children: (0, jsx_runtime_1.jsx)(DropdownContainer, { children: (0, jsx_runtime_1.jsxs)(react_native_1.ScrollView, __assign({ nestedScrollEnabled: true }, { children: [(0, jsx_runtime_1.jsxs)(SelectOption, __assign({ accessibilityRole: "radio", onPress: function () { return handleOptionPress(requiredOption); } }, { children: [(0, jsx_runtime_1.jsx)(StyledP, { children: (0, jsx_runtime_1.jsx)(Text_1.Strong, { children: requiredOption.label }) }), (0, jsx_runtime_1.jsx)(Radio, __assign({ isChecked: selected.value === requiredOption.value }, { children: (0, jsx_runtime_1.jsx)(RadioDot, { isChecked: selected.value === requiredOption.value }) }))] })), Object.keys(optionsByCategories).map(function (category) { return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [category !== 'undefined' ? ((0, jsx_runtime_1.jsx)(StyledCategory, { children: category })) : null, optionsByCategories[category].map(function (option, i) { return ((0, jsx_runtime_1.jsxs)(SelectOption, __assign({ accessibilityRole: "radio", isLastOption: i === optionsByCategories[category].length - 1, onPress: function () { return handleOptionPress(option); } }, { children: [(0, jsx_runtime_1.jsx)(StyledP, { children: (0, jsx_runtime_1.jsx)(Text_1.Strong, { children: option.label }) }), (0, jsx_runtime_1.jsx)(Radio, __assign({ isChecked: selected.value === option.value }, { children: (0, jsx_runtime_1.jsx)(RadioDot, { isChecked: selected.value === option.value }) }))] }), option.label)); })] }, category)); })] })) }) }) }))] }));
 };
 exports.Select = Select;
-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/components/SkeletonLoading/Skeleton.d.ts

@@ -225,4 +225,4 @@ export declare const Skeleton: import("styled-components").StyledComponent<typeo
             };
         };
     };
-}, {}, never>;
+} & object, {}, never>;

package/dist/components/SubLabelText/SubLabelText.d.ts

@@ -232,7 +232,7 @@ declare const SubLabelText: import("react").ForwardRefExoticComponent<Pick<Omit<
                 };
             };
         };
-    }) | undefined;
+    } & object) | undefined;
 } & {
     as?: string | import("react").ComponentType<any> | undefined;
     forwardedAs?: string | import("react").ComponentType<any> | undefined;