@codeleap/mobile 1.9.32 → 2.0.1

package/dist/components/{Switch.d.ts → Switch/index.d.ts}

@@ -1,7 +1,9 @@
 import * as React from 'react';
-import { SwitchStyles, SwitchComposition, ComponentVariants, StylesOf, FormTypes } from '@codeleap/common';
+import { ComponentVariants, StylesOf, FormTypes } from '@codeleap/common';
 import { ComponentPropsWithRef, ReactNode } from 'react';
 import { Switch as NativeSwitch } from 'react-native';
+import { SwitchStyles, SwitchComposition } from './styles';
+export * from './styles';
 declare type NativeSwitchProps = Omit<ComponentPropsWithRef<typeof NativeSwitch>, 'thumbColor' | 'trackColor'>;
 declare type SwitchProps = NativeSwitchProps & {
     variants?: ComponentVariants<typeof SwitchStyles>['variants'];
@@ -10,4 +12,3 @@ declare type SwitchProps = NativeSwitchProps & {
     validate?: FormTypes.ValidatorFunctionWithoutForm | string;
 };
 export declare const Switch: React.FC<SwitchProps>;
-export {};

package/dist/components/{Switch.js → Switch/index.js}

@@ -22,6 +22,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 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)
@@ -39,8 +42,9 @@ var React = __importStar(require("react"));
 var common_1 = require("@codeleap/common");
 var react_1 = require("react");
 var react_native_1 = require("react-native");
-var TextInput_1 = require("./TextInput");
-var View_1 = require("./View");
+var TextInput_1 = require("../TextInput");
+var View_1 = require("../View");
+__exportStar(require("./styles"), exports);
 exports.Switch = (0, react_1.forwardRef)(function (switchProps, ref) {
     var _a = switchProps.variants, variants = _a === void 0 ? [] : _a, _b = switchProps.style, style = _b === void 0 ? {} : _b, _c = switchProps.styles, styles = _c === void 0 ? {} : _c, validate = switchProps.validate, label = switchProps.label, value = switchProps.value, props = __rest(switchProps, ["variants", "style", "styles", "validate", "label", "value"]);
     var variantStyles = (0, common_1.useDefaultComponentStyle)('Switch', {
@@ -67,10 +71,10 @@ exports.Switch = (0, react_1.forwardRef)(function (switchProps, ref) {
     var trackColor = backgroundColor || Theme.colors.gray;
     return (<View_1.View style={getStyles('wrapper')}>
         <View_1.View style={getStyles('inputWrapper')}>
-          <react_native_1.Switch thumbColor={thumbColor} trackColor={{ false: trackColor, true: trackColor }} ios_backgroundColor={trackColor} value={value} {...props}/>
+          <react_native_1.Switch thumbColor={thumbColor} trackColor={{ false: trackColor, true: trackColor }} ios_backgroundColor={trackColor} value={value} ref={ref} {...props}/>
           <TextInput_1.InputLabel label={label} style={getStyles('label')}/>
         </View_1.View>
         <TextInput_1.FormError message={error.message} style={getStyles('error')}/>
       </View_1.View>);
 });
-//# sourceMappingURL=Switch.js.map
+//# sourceMappingURL=index.js.map

package/dist/components/Switch/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Switch/index.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,54 @@
+export declare type SwitchParts = 'wrapper' | 'label' | 'input' | 'error' | 'inputWrapper';
+export declare type SwitchComposition = SwitchParts | `${SwitchParts}:disabled` | `${SwitchParts}:on`;
+export declare const SwitchStyles: {
+    default: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<SwitchComposition, any>>;
+    inline: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<SwitchComposition, any>>;
+    block: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<SwitchComposition, any>>;
+    flex: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<SwitchComposition, any>>;
+    inlineFlex: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<SwitchComposition, any>>;
+    absolute: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<SwitchComposition, any>>;
+    relative: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<SwitchComposition, any>>;
+    fixed: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<SwitchComposition, any>>;
+    sticky: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<SwitchComposition, any>>;
+    hidden: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<SwitchComposition, any>>;
+    full: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<SwitchComposition, any>>;
+    noWrap: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<SwitchComposition, any>>;
+    fullWidth: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<SwitchComposition, any>>;
+    fullHeight: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<SwitchComposition, any>>;
+    fullView: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<SwitchComposition, any>>;
+    fullViewWidth: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<SwitchComposition, any>>;
+    fullViewHeight: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<SwitchComposition, any>>;
+    whole: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<SwitchComposition, any>>;
+    centerRow: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<SwitchComposition, any>>;
+    row: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<SwitchComposition, any>>;
+    listStyles: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<SwitchComposition, any>>;
+    column: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<SwitchComposition, any>>;
+    center: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<SwitchComposition, any>>;
+    alignStart: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<SwitchComposition, any>>;
+    alignEnd: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<SwitchComposition, any>>;
+    alignCenter: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<SwitchComposition, any>>;
+    alignStretch: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<SwitchComposition, any>>;
+    alignSelfCenter: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<SwitchComposition, any>>;
+    alignSelfStart: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<SwitchComposition, any>>;
+    alignSelfStretch: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<SwitchComposition, any>>;
+    alignSelfEnd: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<SwitchComposition, any>>;
+    justifyStart: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<SwitchComposition, any>>;
+    justifyEnd: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<SwitchComposition, any>>;
+    justifyCenter: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<SwitchComposition, any>>;
+    justifySpaceBetween: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<SwitchComposition, any>>;
+    justifySpaceAround: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<SwitchComposition, any>>;
+    textRight: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<SwitchComposition, any>>;
+    textLeft: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<SwitchComposition, any>>;
+    textCenter: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<SwitchComposition, any>>;
+    blur: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<SwitchComposition, any>>;
+    elevated: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<SwitchComposition, any>>;
+    neumorphism: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<SwitchComposition, any>>;
+    scrollX: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<SwitchComposition, any>>;
+    scrollY: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<SwitchComposition, any>>;
+    scrollXY: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<SwitchComposition, any>>;
+    wrap: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<SwitchComposition, any>>;
+    debRed: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<SwitchComposition, any>>;
+    debGreen: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<SwitchComposition, any>>;
+    debBlue: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<SwitchComposition, any>>;
+    debYellow: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<SwitchComposition, any>>;
+};

package/dist/components/Switch/styles.js

@@ -0,0 +1,34 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SwitchStyles = void 0;
+var common_1 = require("@codeleap/common");
+var createSwitchStyle = (0, common_1.createDefaultVariantFactory)();
+var presets = (0, common_1.includePresets)(function (styles) { return createSwitchStyle(function () { return ({ wrapper: styles }); }); });
+exports.SwitchStyles = __assign(__assign({}, presets), { default: createSwitchStyle(function (theme) { return ({
+        wrapper: {},
+        inputWrapper: __assign(__assign({}, theme.presets.row), theme.presets.alignCenter),
+        label: __assign({}, theme.spacing.marginLeft(0.5)),
+        input: {
+            color: theme.colors.white,
+            backgroundColor: theme.colors.gray,
+        },
+        'input:on': {
+            color: theme.colors.primary,
+            backgroundColor: theme.colors.gray,
+        },
+        error: {
+            color: theme.colors.negative,
+        },
+    }); }) });
+//# sourceMappingURL=styles.js.map

package/dist/components/Switch/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/Switch/styles.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA,2CAA8E;AAQ9E,IAAM,iBAAiB,GAAG,IAAA,oCAA2B,GAAqB,CAAA;AAE1E,IAAM,OAAO,GAAG,IAAA,uBAAc,EAAC,UAAC,MAAM,IAAK,OAAA,iBAAiB,CAAC,cAAM,OAAA,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,EAArB,CAAqB,CAAC,EAA9C,CAA8C,CACxF,CAAA;AAEY,QAAA,YAAY,yBACpB,OAAO,KACV,OAAO,EAAE,iBAAiB,CAAC,UAAC,KAAK,IAAK,OAAA,CAAC;QACrC,OAAO,EAAE,EAAE;QACX,YAAY,wBACP,KAAK,CAAC,OAAO,CAAC,GAAG,GACjB,KAAK,CAAC,OAAO,CAAC,WAAW,CAC7B;QACD,KAAK,eACA,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,GAAG,CAAC,CACjC;QACD,KAAK,EAAE;YACL,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK;YACzB,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI;SACnC;QACD,UAAU,EAAE;YACV,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO;YAC3B,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI;SACnC;QACD,KAAK,EAAE;YACL,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,QAAQ;SAC7B;KACF,CAAC,EApBoC,CAoBpC,CAAC,IACJ"}

package/dist/components/{Text.d.ts → Text/index.d.ts}

@@ -1,16 +1,18 @@
 import * as React from 'react';
 import { ComponentPropsWithoutRef } from 'react';
-import { ComponentVariants, BaseViewProps, TextStyles } from '@codeleap/common';
+import { ComponentVariants, BaseViewProps } from '@codeleap/common';
 import { Animated, Text as NativeText } from 'react-native';
 import { MotiProps } from 'moti';
+import { TextStyles } from './styles';
+export * from './styles';
 export declare type TextProps = ComponentPropsWithoutRef<typeof NativeText> & {
-    text?: string;
+    text?: React.ReactNode;
     variants?: ComponentVariants<typeof TextStyles>['variants'];
     animated?: boolean;
     colorChangeConfig?: Partial<Animated.TimingAnimationConfig>;
 } & BaseViewProps & MotiProps;
 export declare const Text: React.ForwardRefExoticComponent<import("react-native").TextProps & {
-    text?: string;
+    text?: React.ReactNode;
     variants?: ComponentVariants<typeof TextStyles>['variants'];
     animated?: boolean;
     colorChangeConfig?: Partial<Animated.TimingAnimationConfig>;

package/dist/components/{Text.js → Text/index.js}

@@ -22,6 +22,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 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)
@@ -40,7 +43,8 @@ var react_1 = require("react");
 var common_1 = require("@codeleap/common");
 var react_native_1 = require("react-native");
 var moti_1 = require("moti");
-var hooks_1 = require("../utils/hooks");
+var utils_1 = require("../../utils");
+__exportStar(require("./styles"), exports);
 var MotiText = react_native_1.Animated.createAnimatedComponent(moti_1.MotiText);
 exports.Text = (0, react_1.forwardRef)(function (textProps, ref) {
     var _a = textProps.variants, variants = _a === void 0 ? [] : _a, text = textProps.text, children = textProps.children, style = textProps.style, colorChangeConfig = textProps.colorChangeConfig, props = __rest(textProps, ["variants", "text", "children", "style", "colorChangeConfig"]);
@@ -49,7 +53,7 @@ exports.Text = (0, react_1.forwardRef)(function (textProps, ref) {
         rootElement: 'text',
     });
     var styles = react_native_1.StyleSheet.flatten([variantStyles.text, style]);
-    var animatedColor = (0, hooks_1.useAnimateColor)(styles.color, colorChangeConfig);
+    var animatedColor = (0, utils_1.useAnimateColor)(styles.color, colorChangeConfig);
     var Component = textProps.animated ? MotiText : react_native_1.Text;
     var colorStyle = { color: props.animated ? animatedColor : styles.color };
     // @ts-ignore
@@ -57,4 +61,4 @@ exports.Text = (0, react_1.forwardRef)(function (textProps, ref) {
     {text || children}
   </Component>;
 });
-//# sourceMappingURL=Text.js.map
+//# sourceMappingURL=index.js.map

package/dist/components/Text/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Text/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAA8B;AAC9B,+BAA4D;AAC5D,2CAKyB;AACzB,6CAAuE;AACvE,6BAAuD;AACvD,qCAA6C;AAG7C,2CAAwB;AASxB,IAAM,QAAQ,GAAG,uBAAQ,CAAC,uBAAuB,CAAC,eAAS,CAAC,CAAA;AAE/C,QAAA,IAAI,GAAG,IAAA,kBAAU,EAAwB,UAAC,SAAS,EAAE,GAAG;IAC3D,IAAA,KAAsE,SAAS,SAAlE,EAAb,QAAQ,mBAAG,EAAE,KAAA,EAAE,IAAI,GAAmD,SAAS,KAA5D,EAAE,QAAQ,GAAyC,SAAS,SAAlD,EAAE,KAAK,GAAkC,SAAS,MAA3C,EAAE,iBAAiB,GAAe,SAAS,kBAAxB,EAAK,KAAK,UAAK,SAAS,EAAjF,8DAAqE,CAAF,CAAc;IAEvF,IAAM,aAAa,GAAG,IAAA,iCAAwB,EAAC,MAAM,EAAE;QACrD,QAAQ,UAAA;QACR,WAAW,EAAE,MAAM;KACpB,CAAC,CAAA;IAEF,IAAM,MAAM,GAAG,yBAAU,CAAC,OAAO,CAAC,CAAC,aAAa,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAA;IAE9D,IAAM,aAAa,GAAG,IAAA,uBAAe,EAAC,MAAM,CAAC,KAAK,EAAE,iBAAiB,CAAC,CAAA;IAEtE,IAAM,SAAS,GAAG,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,mBAAU,CAAA;IAE5D,IAAM,UAAU,GAAG,EAAE,KAAK,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,CAAA;IAE3E,aAAa;IACb,OAAO,CAAC,SAAS,CAAC,IAAI,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CACjE;IAAA,CAAC,IAAI,IAAI,QAAQ,CACnB;EAAA,EAAE,SAAS,CAAC,CAAA;AAEd,CAAC,CAAC,CAAA"}

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

@@ -0,0 +1,65 @@
+export declare type TextComposition = 'text';
+export declare const TextStyles: {
+    default: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<"text", any>>;
+    h1: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<"text", any>>;
+    h2: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<"text", any>>;
+    h3: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<"text", any>>;
+    h4: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<"text", any>>;
+    h5: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<"text", any>>;
+    h6: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<"text", any>>;
+    p1: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<"text", any>>;
+    p2: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<"text", any>>;
+    p3: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<"text", any>>;
+    p4: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<"text", any>>;
+    link: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<"text", any>>;
+    OSAlertBody: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<"text", any>>;
+    inline: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<"text", any>>;
+    block: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<"text", any>>;
+    flex: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<"text", any>>;
+    inlineFlex: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<"text", any>>;
+    absolute: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<"text", any>>;
+    relative: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<"text", any>>;
+    fixed: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<"text", any>>;
+    sticky: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<"text", any>>;
+    hidden: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<"text", any>>;
+    full: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<"text", any>>;
+    noWrap: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<"text", any>>;
+    fullWidth: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<"text", any>>;
+    fullHeight: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<"text", any>>;
+    fullView: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<"text", any>>;
+    fullViewWidth: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<"text", any>>;
+    fullViewHeight: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<"text", any>>;
+    whole: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<"text", any>>;
+    centerRow: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<"text", any>>;
+    row: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<"text", any>>;
+    listStyles: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<"text", any>>;
+    column: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<"text", any>>;
+    center: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<"text", any>>;
+    alignStart: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<"text", any>>;
+    alignEnd: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<"text", any>>;
+    alignCenter: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<"text", any>>;
+    alignStretch: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<"text", any>>;
+    alignSelfCenter: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<"text", any>>;
+    alignSelfStart: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<"text", any>>;
+    alignSelfStretch: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<"text", any>>;
+    alignSelfEnd: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<"text", any>>;
+    justifyStart: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<"text", any>>;
+    justifyEnd: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<"text", any>>;
+    justifyCenter: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<"text", any>>;
+    justifySpaceBetween: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<"text", any>>;
+    justifySpaceAround: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<"text", any>>;
+    textRight: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<"text", any>>;
+    textLeft: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<"text", any>>;
+    textCenter: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<"text", any>>;
+    blur: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<"text", any>>;
+    elevated: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<"text", any>>;
+    neumorphism: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<"text", any>>;
+    scrollX: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<"text", any>>;
+    scrollY: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<"text", any>>;
+    scrollXY: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<"text", any>>;
+    wrap: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<"text", any>>;
+    debRed: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<"text", any>>;
+    debGreen: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<"text", any>>;
+    debBlue: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<"text", any>>;
+    debYellow: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<"text", any>>;
+};

package/dist/components/Text/styles.js

@@ -0,0 +1,23 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextStyles = void 0;
+var common_1 = require("@codeleap/common");
+var createTextStyle = (0, common_1.createDefaultVariantFactory)();
+var presets = (0, common_1.includePresets)(function (styles) { return createTextStyle(function () { return ({ text: styles }); }); });
+exports.TextStyles = __assign(__assign({}, presets), { default: createTextStyle(function (theme) { return ({
+        text: __assign({ fontFamily: theme.typography.fontFamily }, (0, common_1.assignTextStyle)('p1')(theme).text),
+    }); }), h1: (0, common_1.assignTextStyle)('h1'), h2: (0, common_1.assignTextStyle)('h2'), h3: (0, common_1.assignTextStyle)('h3'), h4: (0, common_1.assignTextStyle)('h4'), h5: (0, common_1.assignTextStyle)('h5'), h6: (0, common_1.assignTextStyle)('h6'), p1: (0, common_1.assignTextStyle)('p1'), p2: (0, common_1.assignTextStyle)('p2'), p3: (0, common_1.assignTextStyle)('p3'), p4: (0, common_1.assignTextStyle)('p4'), link: (0, common_1.assignTextStyle)('p1'), OSAlertBody: createTextStyle(function (theme) { return ({
+        text: __assign(__assign({}, (0, common_1.assignTextStyle)('p1')(theme).text), theme.presets.textCenter),
+    }); }) });
+//# sourceMappingURL=styles.js.map

package/dist/components/Text/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/Text/styles.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA,2CAA+F;AAG/F,IAAM,eAAe,GAAG,IAAA,oCAA2B,GAAmB,CAAA;AAEtE,IAAM,OAAO,GAAG,IAAA,uBAAc,EAAC,UAAC,MAAM,IAAK,OAAA,eAAe,CAAC,cAAM,OAAA,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,EAAlB,CAAkB,CAAC,EAAzC,CAAyC,CACnF,CAAA;AAEY,QAAA,UAAU,yBAClB,OAAO,KACV,OAAO,EAAE,eAAe,CAAC,UAAC,KAAK,IAAK,OAAA,CAAC;QACnC,IAAI,aACF,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,UAAU,IACpC,IAAA,wBAAe,EAAC,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC,IAAI,CACrC;KACF,CAAC,EALkC,CAKlC,CAAC,EACH,EAAE,EAAE,IAAA,wBAAe,EAAC,IAAI,CAAC,EACzB,EAAE,EAAE,IAAA,wBAAe,EAAC,IAAI,CAAC,EACzB,EAAE,EAAE,IAAA,wBAAe,EAAC,IAAI,CAAC,EACzB,EAAE,EAAE,IAAA,wBAAe,EAAC,IAAI,CAAC,EACzB,EAAE,EAAE,IAAA,wBAAe,EAAC,IAAI,CAAC,EACzB,EAAE,EAAE,IAAA,wBAAe,EAAC,IAAI,CAAC,EACzB,EAAE,EAAE,IAAA,wBAAe,EAAC,IAAI,CAAC,EACzB,EAAE,EAAE,IAAA,wBAAe,EAAC,IAAI,CAAC,EACzB,EAAE,EAAE,IAAA,wBAAe,EAAC,IAAI,CAAC,EACzB,EAAE,EAAE,IAAA,wBAAe,EAAC,IAAI,CAAC,EACzB,IAAI,EAAE,IAAA,wBAAe,EAAC,IAAI,CAAC,EAC3B,WAAW,EAAE,eAAe,CAAC,UAAC,KAAK,IAAK,OAAA,CAAC;QACvC,IAAI,wBACC,IAAA,wBAAe,EAAC,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC,IAAI,GACjC,KAAK,CAAC,OAAO,CAAC,UAAU,CAC5B;KACF,CAAC,EALsC,CAKtC,CAAC,IACJ"}

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

@@ -0,0 +1,9 @@
+export declare const InputLabel: ({ label, variants, styles, style, asteriskStyle, required, wrapperStyle }: {
+    label: any;
+    variants?: any[];
+    styles?: {};
+    style: any;
+    asteriskStyle?: any;
+    required?: boolean;
+    wrapperStyle?: any;
+}) => any;

package/dist/components/TextInput/Label.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputLabel = void 0;
+var react_1 = __importDefault(require("react"));
+var common_1 = require("@codeleap/common");
+var react_native_1 = require("react-native");
+var Text_1 = require("../Text");
+var View_1 = require("../View");
+var InputLabel = function (_a) {
+    var label = _a.label, _b = _a.variants, variants = _b === void 0 ? [] : _b, _c = _a.styles, styles = _c === void 0 ? {} : _c, style = _a.style, _d = _a.asteriskStyle, asteriskStyle = _d === void 0 ? null : _d, _e = _a.required, required = _e === void 0 ? false : _e, _f = _a.wrapperStyle, wrapperStyle = _f === void 0 ? null : _f;
+    var labelStyles = (0, common_1.useDefaultComponentStyle)('TextInput', {
+        variants: variants,
+        styles: styles,
+        transform: react_native_1.StyleSheet.flatten,
+    });
+    if (!label)
+        return null;
+    switch (typeof label) {
+        case 'string':
+            return <View_1.View style={wrapperStyle || labelStyles.labelWrapper}>
+        <Text_1.Text style={style || labelStyles.label} text={label}/>
+        {required && <Text_1.Text style={asteriskStyle || labelStyles.requiredAsterisk} text={' *'}/>}
+      </View_1.View>;
+        case 'object':
+            return label;
+        default:
+            return null;
+    }
+};
+exports.InputLabel = InputLabel;
+//# sourceMappingURL=Label.js.map

package/dist/components/TextInput/Label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.js","sourceRoot":"","sources":["../../../src/components/TextInput/Label.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAAyB;AACzB,2CAA2D;AAC3D,6CAAyC;AACzC,gCAA8B;AAC9B,gCAA8B;AAEvB,IAAM,UAAU,GAAG,UAAC,EAAyG;QAAvG,KAAK,WAAA,EAAE,gBAAa,EAAb,QAAQ,mBAAG,EAAE,KAAA,EAAE,cAAW,EAAX,MAAM,mBAAG,EAAE,KAAA,EAAE,KAAK,WAAA,EAAE,qBAAoB,EAApB,aAAa,mBAAG,IAAI,KAAA,EAAE,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAAE,oBAAmB,EAAnB,YAAY,mBAAG,IAAI,KAAA;IAChI,IAAM,WAAW,GAAG,IAAA,iCAAwB,EAAC,WAAW,EAAE;QACxD,QAAQ,UAAA;QAAE,MAAM,QAAA;QAAE,SAAS,EAAE,yBAAU,CAAC,OAAO;KAChD,CAAC,CAAA;IAEF,IAAI,CAAC,KAAK;QAAE,OAAO,IAAI,CAAA;IAEvB,QAAQ,OAAO,KAAK,EAAE;QACpB,KAAK,QAAQ;YACX,OAAO,CAAC,WAAI,CAAC,KAAK,CAAC,CAAE,YAAY,IAAI,WAAW,CAAC,YAAY,CAAC,CAC5D;QAAA,CAAC,WAAI,CAAC,KAAK,CAAC,CAAC,KAAK,IAAI,WAAW,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,EACrD;QAAA,CAAC,QAAQ,IAAI,CAAC,WAAI,CAAC,KAAK,CAAC,CAAC,aAAa,IAAI,WAAW,CAAC,gBAAgB,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,EAAG,CACzF;MAAA,EAAE,WAAI,CAAC,CAAA;QACT,KAAK,QAAQ;YACX,OAAO,KAAK,CAAA;QACd;YACE,OAAO,IAAI,CAAA;KACd;AACH,CAAC,CAAA;AAlBY,QAAA,UAAU,cAkBtB"}

package/dist/components/{TextInput.d.ts → TextInput/index.d.ts}

@@ -1,15 +1,15 @@
 import * as React from 'react';
-import { ComponentVariants, FormTypes, IconPlaceholder, TextInputComposition, TextInputStyles } from '@codeleap/common';
+import { ComponentVariants, FormTypes } from '@codeleap/common';
 import { ComponentPropsWithoutRef } from 'react';
-import { ViewProps } from './View';
-import { StylesOf } from '../types/utility';
+import { ViewProps } from '../View';
+import { StylesOf } from '../../types';
 import { TextInput as NativeTextInput } from 'react-native';
-import { TouchableProps } from './Touchable';
-import { TextInputMaskProps } from '../modules/types/textInputMask';
-declare type IconProp = {
-    name: IconPlaceholder;
-    action?: () => void;
-};
+import { TouchableProps } from '../Touchable';
+import { TextInputMaskProps } from '../../modules/textInputMask';
+export { InputLabel } from './Label';
+export * from './styles';
+import { InputIconComposition, TextInputComposition, TextInputStyles } from './styles';
+import { ActionIconProps } from '../ActionIcon';
 declare type NativeProps = ComponentPropsWithoutRef<typeof NativeTextInput>;
 export declare type TextInputProps = Partial<TextInputMaskProps> & ComponentVariants<typeof TextInputStyles> & Omit<NativeProps, 'value'> & {
     multiline?: boolean;
@@ -19,8 +19,8 @@ export declare type TextInputProps = Partial<TextInputMaskProps> & ComponentVari
     type?: string;
     label?: React.ReactNode;
     debugName: string;
-    leftIcon?: IconProp;
-    rightIcon?: IconProp;
+    leftIcon?: Partial<ActionIconProps>;
+    rightIcon?: Partial<ActionIconProps>;
     styles?: StylesOf<TextInputComposition>;
     validate?: FormTypes.ValidatorFunctionWithoutForm | string;
     value?: string;
@@ -30,7 +30,7 @@ export declare type TextInputProps = Partial<TextInputMaskProps> & ComponentVari
     onPress?: () => void;
     masking?: FormTypes.TextField['masking'];
     innerWrapperProps?: ViewProps;
-    wrapperProps?: TouchableProps | ViewProps;
+    wrapperProps?: TouchableProps;
     onChangeMask?: TextInputMaskProps['onChangeText'];
     required?: boolean;
 };
@@ -39,18 +39,14 @@ export declare const TextInput: React.ForwardRefExoticComponent<Partial<TextInpu
     line: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
     box: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
     pill: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
+    inline: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
     block: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
     flex: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
+    inlineFlex: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
     absolute: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
     relative: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
     fixed: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
     sticky: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
-    row: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
-    center: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
-    column: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
-    wrap: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
-    inline: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
-    inlineFlex: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
     hidden: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
     full: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
     noWrap: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
@@ -61,7 +57,10 @@ export declare const TextInput: React.ForwardRefExoticComponent<Partial<TextInpu
     fullViewHeight: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
     whole: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
     centerRow: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
+    row: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
     listStyles: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
+    column: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
+    center: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
     alignStart: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
     alignEnd: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
     alignCenter: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
@@ -84,6 +83,7 @@ export declare const TextInput: React.ForwardRefExoticComponent<Partial<TextInpu
     scrollX: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
     scrollY: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
     scrollXY: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
+    wrap: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
     debRed: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
     debGreen: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
     debBlue: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
@@ -93,18 +93,14 @@ export declare const TextInput: React.ForwardRefExoticComponent<Partial<TextInpu
     line: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
     box: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
     pill: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
+    inline: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
     block: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
     flex: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
+    inlineFlex: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
     absolute: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
     relative: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
     fixed: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
     sticky: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
-    row: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
-    center: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
-    column: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
-    wrap: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
-    inline: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
-    inlineFlex: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
     hidden: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
     full: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
     noWrap: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
@@ -115,7 +111,10 @@ export declare const TextInput: React.ForwardRefExoticComponent<Partial<TextInpu
     fullViewHeight: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
     whole: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
     centerRow: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
+    row: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
     listStyles: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
+    column: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
+    center: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
     alignStart: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
     alignEnd: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
     alignCenter: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
@@ -138,6 +137,7 @@ export declare const TextInput: React.ForwardRefExoticComponent<Partial<TextInpu
     scrollX: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
     scrollY: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
     scrollXY: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
+    wrap: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
     debRed: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
     debGreen: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
     debBlue: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
@@ -150,8 +150,8 @@ export declare const TextInput: React.ForwardRefExoticComponent<Partial<TextInpu
     type?: string;
     label?: React.ReactNode;
     debugName: string;
-    leftIcon?: IconProp;
-    rightIcon?: IconProp;
+    leftIcon?: Partial<ActionIconProps>;
+    rightIcon?: Partial<ActionIconProps>;
     styles?: StylesOf<TextInputComposition>;
     validate?: FormTypes.ValidatorFunctionWithoutForm | string;
     value?: string;
@@ -161,7 +161,7 @@ export declare const TextInput: React.ForwardRefExoticComponent<Partial<TextInpu
     onPress?: () => void;
     masking?: FormTypes.TextField['masking'];
     innerWrapperProps?: ViewProps;
-    wrapperProps?: TouchableProps | ViewProps;
+    wrapperProps?: TouchableProps;
     onChangeMask?: TextInputMaskProps['onChangeText'];
     required?: boolean;
 } & React.RefAttributes<NativeTextInput>>;
@@ -169,17 +169,10 @@ export declare const FormError: ({ message, ...props }: {
     [x: string]: any;
     message: any;
 }) => any;
-export declare const InputIcon: React.FC<{
-    style: any;
-    wrapperStyle: any;
-} & IconProp>;
-export declare const InputLabel: ({ label, variants, styles, style, asteriskStyle, required, wrapperStyle }: {
-    label: any;
-    variants?: any[];
-    styles?: {};
-    style: any;
-    asteriskStyle?: any;
-    required?: boolean;
-    wrapperStyle?: any;
-}) => any;
-export {};
+declare type InputIconProps = {
+    styles: StylesOf<InputIconComposition>;
+    commonStyles: StylesOf<InputIconComposition>;
+    isFocused: boolean;
+    showError: boolean;
+} & Omit<ActionIconProps, 'styles'>;
+export declare const InputIcon: React.FC<InputIconProps>;