@hero-design/rn 7.8.0 → 7.10.1

package/es/index.js

@@ -1,6 +1,6 @@
 import * as ReactNative from 'react-native';
 import ReactNative__default, { Dimensions, StyleSheet as StyleSheet$1, Text as Text$1, View, TouchableOpacity, Image, Animated, Platform, TouchableWithoutFeedback, Pressable, Easing, Modal, TouchableHighlight, TextInput as TextInput$1, requireNativeComponent, UIManager, I18nManager, Keyboard, FlatList, LayoutAnimation } from 'react-native';
-import React, { createContext, useContext, createElement, forwardRef, useRef, useEffect, useState, useCallback, Children, useLayoutEffect, useImperativeHandle, useMemo } from 'react';
+import React, { useContext, createContext, createElement, forwardRef, useRef, useEffect, useState, useCallback, Children, useLayoutEffect, useImperativeHandle, useMemo } from 'react';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 function ownKeys(object, enumerableOnly) {
@@ -2621,6 +2621,7 @@ var systemPalette = {
   backgroundLight: palette$6.greyLight95,
   backgroundDark: palette$6.greyDark75,
   text: palette$6.greyDark75,
+  subduedText: palette$6.greyDark30,
   disabledText: palette$6.greyDark15,
   disabledLightText: palette$6.greyLight45,
   invertedText: palette$6.white,
@@ -2921,7 +2922,9 @@ var getButtonTheme = function getButtonTheme(theme) {
     "default": theme.fonts.semiBold
   };
   var fontSize = {
-    "default": theme.fontSizes.xlarge
+    "default": theme.fontSizes.xlarge,
+    utility: theme.fontSizes.large,
+    textVariant: theme.fontSizes.large
   };
   var lineHeight = {
     "default": theme.lineHeights.large
@@ -2931,13 +2934,16 @@ var getButtonTheme = function getButtonTheme(theme) {
   };
   var space = {
     buttonPadding: theme.space.medium,
-    iconPadding: theme.space.small
+    iconPadding: theme.space.small,
+    utilityPadding: theme.space.small,
+    utilityIconPadding: theme.space.smallMedium
   };
   var sizes = {
     iconSize: theme.fontSizes.xxlarge
   };
   var radii = {
-    "default": theme.space.xlarge
+    "default": theme.space.xlarge,
+    utilityRadii: theme.space.small
   };
   var colors = {
     primary: theme.colors.primary,
@@ -2950,7 +2956,8 @@ var getButtonTheme = function getButtonTheme(theme) {
     disabledText: theme.colors.disabledLightText,
     disabledBorder: theme.colors.disabledLightText,
     disabledBackground: theme.colors.disabledLightText,
-    invertedText: theme.colors.invertedText
+    invertedText: theme.colors.invertedText,
+    utilityBackground: theme.colors.backgroundLight
   };
   return {
     borderWidth: borderWidth,
@@ -2975,11 +2982,15 @@ var getCardTheme = function getCardTheme(theme) {
       danger: theme.colors.dangerMediumLight
     }
   };
+  var sizes = {
+    indicatorWidth: theme.space.medium
+  };
   var radii = {
     "default": theme.radii.large
   };
   return {
     colors: colors,
+    sizes: sizes,
     radii: radii
   };
 };
@@ -3135,7 +3146,8 @@ var getIconTheme = function getIconTheme(theme) {
     danger: theme.colors.danger,
     success: theme.colors.success,
     warning: theme.colors.warning,
-    disabledText: theme.colors.disabledText
+    disabledText: theme.colors.disabledText,
+    invertedText: theme.colors.invertedText
   };
   var sizes = {
     xsmall: theme.fontSizes.large,
@@ -3375,20 +3387,79 @@ var getTagTheme = function getTagTheme(theme) {
 var getTextInputTheme = function getTextInputTheme(theme) {
   var colors = {
     labelBackground: theme.colors.platformBackground,
-    border: theme.colors.text
+    asterisks: {
+      "default": theme.colors.danger,
+      error: theme.colors.danger,
+      disabled: theme.colors.disabledLightText,
+      readonly: theme.colors.disabledText,
+      filled: theme.colors.danger,
+      focused: theme.colors.danger
+    },
+    error: theme.colors.danger,
+    placeholderIfNotFocused: theme.colors.text,
+    placeholderIfFocued: theme.colors.disabledText,
+    label: theme.colors.text,
+    readonlyLabel: theme.colors.disabledText,
+    disabledLabel: theme.colors.disabledLightText,
+    text: theme.colors.text,
+    borders: {
+      "default": theme.colors.text,
+      error: theme.colors.danger,
+      disabled: theme.colors.disabledLightText,
+      readonly: theme.colors.disabledText,
+      filled: theme.colors.text,
+      focused: theme.colors.text
+    },
+    labels: {
+      "default": theme.colors.text,
+      error: theme.colors.text,
+      disabled: theme.colors.disabledLightText,
+      readonly: theme.colors.disabledText,
+      filled: theme.colors.text,
+      focused: theme.colors.text
+    },
+    labelsInsideTextInput: {
+      "default": theme.colors.text,
+      error: theme.colors.text,
+      disabled: theme.colors.disabledLightText,
+      readonly: theme.colors.disabledText,
+      filled: theme.colors.text,
+      focused: theme.colors.text
+    },
+    maxLengthLabels: {
+      "default": theme.colors.text,
+      error: theme.colors.danger,
+      disabled: theme.colors.disabledLightText,
+      readonly: theme.colors.disabledText,
+      filled: theme.colors.text,
+      focused: theme.colors.text
+    }
   };
   var space = {
     containerPadding: theme.space.medium,
     labelLeft: theme.space.medium,
     labelTop: theme.lineHeights.small / -2,
+    labelPaddingBottom: theme.space.small,
     labelHorizontalPadding: theme.space.xsmall,
-    inputHorizontalMargin: theme.space.small
+    inputHorizontalMargin: theme.space.small,
+    containerMarginVertical: theme.space.small,
+    errorContainerMarginLeft: theme.space.medium,
+    errorContainerMarginRight: theme.space.xsmall,
+    errorMarginLeft: theme.space.xsmall,
+    maxLengthLabelMarginLeft: theme.space.xsmall
   };
   var fontSizes = {
-    text: theme.fontSizes.large
+    text: theme.fontSizes.medium,
+    labelInsideTextInput: theme.fontSizes.medium,
+    error: theme.fontSizes.small,
+    maxLength: theme.fontSizes.small,
+    asteriskLabel: theme.fontSizes.medium
   };
   var borderWidths = {
-    container: theme.borderWidths.base
+    container: {
+      normal: theme.borderWidths.base,
+      focused: theme.borderWidths.medium
+    }
   };
   var radii = {
     container: theme.radii.medium
@@ -9933,6 +10004,68 @@ var icons = [
 		setId: 0,
 		iconIdx: 94
 	},
+	{
+		icon: {
+			paths: [
+				"M810.667 128h-597.333c-46.933 0-85.333 38.4-85.333 85.333v597.333c0 46.933 38.4 85.333 85.333 85.333h597.333c46.933 0 85.333-38.4 85.333-85.333v-597.333c0-46.933-38.4-85.333-85.333-85.333zM597.333 725.333h-85.333v-341.333h-85.333v-85.333h170.667v426.667z"
+			],
+			attrs: [
+				{
+				}
+			],
+			isMulticolor: false,
+			isMulticolor2: false,
+			grid: 0,
+			tags: [
+				"looks-one"
+			]
+		},
+		attrs: [
+			{
+			}
+		],
+		properties: {
+			order: 2599,
+			id: 306,
+			name: "looks-one",
+			prevSize: 32,
+			code: 59950
+		},
+		setIdx: 0,
+		setId: 0,
+		iconIdx: 95
+	},
+	{
+		icon: {
+			paths: [
+				"M810.667 128h-597.333c-46.933 0-85.333 38.4-85.333 85.333v597.333c0 46.933 38.4 85.333 85.333 85.333h597.333c46.933 0 85.333-38.4 85.333-85.333v-597.333c0-46.933-38.4-85.333-85.333-85.333zM640 469.333c0 47.36-38.4 85.333-85.333 85.333h-85.333v85.333h170.667v85.333h-256v-170.667c0-47.36 38.4-85.333 85.333-85.333h85.333v-85.333h-170.667v-85.333h170.667c46.933 0 85.333 37.973 85.333 85.333v85.333z"
+			],
+			attrs: [
+				{
+				}
+			],
+			isMulticolor: false,
+			isMulticolor2: false,
+			grid: 0,
+			tags: [
+				"looks-two"
+			]
+		},
+		attrs: [
+			{
+			}
+		],
+		properties: {
+			order: 2598,
+			id: 305,
+			name: "looks-two",
+			prevSize: 32,
+			code: 59951
+		},
+		setIdx: 0,
+		setId: 0,
+		iconIdx: 96
+	},
 	{
 		icon: {
 			paths: [
@@ -9956,7 +10089,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 95
+		iconIdx: 97
 	},
 	{
 		icon: {
@@ -9983,7 +10116,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 96
+		iconIdx: 98
 	},
 	{
 		icon: {
@@ -10008,7 +10141,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 97
+		iconIdx: 99
 	},
 	{
 		icon: {
@@ -10033,7 +10166,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 98
+		iconIdx: 100
 	},
 	{
 		icon: {
@@ -10060,7 +10193,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 99
+		iconIdx: 101
 	},
 	{
 		icon: {
@@ -10090,7 +10223,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 100
+		iconIdx: 102
 	},
 	{
 		icon: {
@@ -10115,7 +10248,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 101
+		iconIdx: 103
 	},
 	{
 		icon: {
@@ -10140,7 +10273,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 102
+		iconIdx: 104
 	},
 	{
 		icon: {
@@ -10165,7 +10298,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 103
+		iconIdx: 105
 	},
 	{
 		icon: {
@@ -10190,7 +10323,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 104
+		iconIdx: 106
 	},
 	{
 		icon: {
@@ -10216,7 +10349,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 105
+		iconIdx: 107
 	},
 	{
 		icon: {
@@ -10241,7 +10374,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 106
+		iconIdx: 108
 	},
 	{
 		icon: {
@@ -10266,7 +10399,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 107
+		iconIdx: 109
 	},
 	{
 		icon: {
@@ -10291,7 +10424,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 108
+		iconIdx: 110
 	},
 	{
 		icon: {
@@ -10316,7 +10449,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 109
+		iconIdx: 111
 	},
 	{
 		icon: {
@@ -10341,7 +10474,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 110
+		iconIdx: 112
 	},
 	{
 		icon: {
@@ -10370,7 +10503,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 111
+		iconIdx: 113
 	},
 	{
 		icon: {
@@ -10395,7 +10528,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 112
+		iconIdx: 114
 	},
 	{
 		icon: {
@@ -10420,7 +10553,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 113
+		iconIdx: 115
 	},
 	{
 		icon: {
@@ -10445,7 +10578,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 114
+		iconIdx: 116
 	},
 	{
 		icon: {
@@ -10470,7 +10603,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 115
+		iconIdx: 117
 	},
 	{
 		icon: {
@@ -10495,7 +10628,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 116
+		iconIdx: 118
 	},
 	{
 		icon: {
@@ -10526,7 +10659,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 117
+		iconIdx: 119
 	},
 	{
 		icon: {
@@ -10551,7 +10684,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 118
+		iconIdx: 120
 	},
 	{
 		icon: {
@@ -10582,7 +10715,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 119
+		iconIdx: 121
 	},
 	{
 		icon: {
@@ -10607,7 +10740,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 120
+		iconIdx: 122
 	},
 	{
 		icon: {
@@ -10632,7 +10765,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 121
+		iconIdx: 123
 	},
 	{
 		icon: {
@@ -10657,7 +10790,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 122
+		iconIdx: 124
 	},
 	{
 		icon: {
@@ -10682,7 +10815,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 123
+		iconIdx: 125
 	},
 	{
 		icon: {
@@ -10714,7 +10847,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 124
+		iconIdx: 126
 	},
 	{
 		icon: {
@@ -10739,7 +10872,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 125
+		iconIdx: 127
 	},
 	{
 		icon: {
@@ -10773,7 +10906,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 126
+		iconIdx: 128
 	},
 	{
 		icon: {
@@ -10799,7 +10932,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 127
+		iconIdx: 129
 	},
 	{
 		icon: {
@@ -10824,7 +10957,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 128
+		iconIdx: 130
 	},
 	{
 		icon: {
@@ -10851,7 +10984,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 129
+		iconIdx: 131
 	},
 	{
 		icon: {
@@ -10881,7 +11014,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 130
+		iconIdx: 132
 	},
 	{
 		icon: {
@@ -10906,7 +11039,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 131
+		iconIdx: 133
 	},
 	{
 		icon: {
@@ -10931,7 +11064,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 132
+		iconIdx: 134
 	},
 	{
 		icon: {
@@ -10957,7 +11090,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 133
+		iconIdx: 135
 	},
 	{
 		icon: {
@@ -10982,7 +11115,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 134
+		iconIdx: 136
 	},
 	{
 		icon: {
@@ -11008,7 +11141,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 135
+		iconIdx: 137
 	},
 	{
 		icon: {
@@ -11033,7 +11166,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 136
+		iconIdx: 138
 	},
 	{
 		icon: {
@@ -11058,7 +11191,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 137
+		iconIdx: 139
 	},
 	{
 		icon: {
@@ -11089,7 +11222,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 138
+		iconIdx: 140
 	},
 	{
 		icon: {
@@ -11114,7 +11247,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 139
+		iconIdx: 141
 	},
 	{
 		icon: {
@@ -11139,7 +11272,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 140
+		iconIdx: 142
 	},
 	{
 		icon: {
@@ -11164,7 +11297,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 141
+		iconIdx: 143
 	},
 	{
 		icon: {
@@ -11189,7 +11322,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 142
+		iconIdx: 144
 	},
 	{
 		icon: {
@@ -11215,7 +11348,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 143
+		iconIdx: 145
 	},
 	{
 		icon: {
@@ -11240,7 +11373,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 144
+		iconIdx: 146
 	},
 	{
 		icon: {
@@ -11265,7 +11398,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 145
+		iconIdx: 147
 	},
 	{
 		icon: {
@@ -11295,7 +11428,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 146
+		iconIdx: 148
 	},
 	{
 		icon: {
@@ -11320,7 +11453,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 147
+		iconIdx: 149
 	},
 	{
 		icon: {
@@ -11345,7 +11478,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 148
+		iconIdx: 150
 	},
 	{
 		icon: {
@@ -11370,7 +11503,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 149
+		iconIdx: 151
 	},
 	{
 		icon: {
@@ -11395,7 +11528,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 150
+		iconIdx: 152
 	},
 	{
 		icon: {
@@ -11420,7 +11553,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 151
+		iconIdx: 153
 	},
 	{
 		icon: {
@@ -11445,7 +11578,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 152
+		iconIdx: 154
 	},
 	{
 		icon: {
@@ -11470,7 +11603,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 153
+		iconIdx: 155
 	},
 	{
 		icon: {
@@ -11498,7 +11631,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 154
+		iconIdx: 156
 	},
 	{
 		icon: {
@@ -11523,7 +11656,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 155
+		iconIdx: 157
 	},
 	{
 		icon: {
@@ -11548,7 +11681,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 156
+		iconIdx: 158
 	},
 	{
 		icon: {
@@ -11573,7 +11706,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 157
+		iconIdx: 159
 	},
 	{
 		icon: {
@@ -11598,7 +11731,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 158
+		iconIdx: 160
 	},
 	{
 		icon: {
@@ -11625,7 +11758,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 159
+		iconIdx: 161
 	},
 	{
 		icon: {
@@ -11655,7 +11788,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 160
+		iconIdx: 162
 	},
 	{
 		icon: {
@@ -11680,7 +11813,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 161
+		iconIdx: 163
 	},
 	{
 		icon: {
@@ -11705,7 +11838,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 162
+		iconIdx: 164
 	},
 	{
 		icon: {
@@ -11730,7 +11863,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 163
+		iconIdx: 165
 	},
 	{
 		icon: {
@@ -11755,7 +11888,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 164
+		iconIdx: 166
 	},
 	{
 		icon: {
@@ -11781,7 +11914,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 165
+		iconIdx: 167
 	},
 	{
 		icon: {
@@ -11806,7 +11939,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 166
+		iconIdx: 168
 	},
 	{
 		icon: {
@@ -11832,7 +11965,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 167
+		iconIdx: 169
 	},
 	{
 		icon: {
@@ -11858,7 +11991,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 168
+		iconIdx: 170
 	},
 	{
 		icon: {
@@ -11884,7 +12017,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 169
+		iconIdx: 171
 	},
 	{
 		icon: {
@@ -11911,7 +12044,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 170
+		iconIdx: 172
 	},
 	{
 		icon: {
@@ -11937,7 +12070,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 171
+		iconIdx: 173
 	},
 	{
 		icon: {
@@ -11963,7 +12096,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 172
+		iconIdx: 174
 	},
 	{
 		icon: {
@@ -11990,7 +12123,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 173
+		iconIdx: 175
 	},
 	{
 		icon: {
@@ -12015,7 +12148,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 174
+		iconIdx: 176
 	},
 	{
 		icon: {
@@ -12041,7 +12174,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 175
+		iconIdx: 177
 	},
 	{
 		icon: {
@@ -12067,7 +12200,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 176
+		iconIdx: 178
 	},
 	{
 		icon: {
@@ -12094,7 +12227,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 177
+		iconIdx: 179
 	},
 	{
 		icon: {
@@ -12119,7 +12252,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 178
+		iconIdx: 180
 	},
 	{
 		icon: {
@@ -12145,7 +12278,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 179
+		iconIdx: 181
 	},
 	{
 		icon: {
@@ -12170,7 +12303,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 180
+		iconIdx: 182
 	},
 	{
 		icon: {
@@ -12196,7 +12329,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 181
+		iconIdx: 183
 	},
 	{
 		icon: {
@@ -12224,7 +12357,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 182
+		iconIdx: 184
 	},
 	{
 		icon: {
@@ -12254,7 +12387,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 183
+		iconIdx: 185
 	},
 	{
 		icon: {
@@ -12279,7 +12412,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 184
+		iconIdx: 186
 	},
 	{
 		icon: {
@@ -12304,7 +12437,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 185
+		iconIdx: 187
 	},
 	{
 		icon: {
@@ -12329,7 +12462,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 186
+		iconIdx: 188
 	},
 	{
 		icon: {
@@ -12356,7 +12489,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 187
+		iconIdx: 189
 	},
 	{
 		icon: {
@@ -12381,7 +12514,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 188
+		iconIdx: 190
 	},
 	{
 		icon: {
@@ -12406,7 +12539,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 189
+		iconIdx: 191
 	},
 	{
 		icon: {
@@ -12431,7 +12564,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 190
+		iconIdx: 192
 	},
 	{
 		icon: {
@@ -12457,7 +12590,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 191
+		iconIdx: 193
 	},
 	{
 		icon: {
@@ -12483,7 +12616,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 192
+		iconIdx: 194
 	},
 	{
 		icon: {
@@ -12510,7 +12643,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 193
+		iconIdx: 195
 	},
 	{
 		icon: {
@@ -12536,7 +12669,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 194
+		iconIdx: 196
 	},
 	{
 		icon: {
@@ -12561,7 +12694,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 195
+		iconIdx: 197
 	},
 	{
 		icon: {
@@ -12586,7 +12719,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 196
+		iconIdx: 198
 	},
 	{
 		icon: {
@@ -12611,7 +12744,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 197
+		iconIdx: 199
 	},
 	{
 		icon: {
@@ -12637,7 +12770,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 198
+		iconIdx: 200
 	},
 	{
 		icon: {
@@ -12662,7 +12795,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 199
+		iconIdx: 201
 	},
 	{
 		icon: {
@@ -12690,7 +12823,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 200
+		iconIdx: 202
 	},
 	{
 		icon: {
@@ -12716,7 +12849,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 201
+		iconIdx: 203
 	},
 	{
 		icon: {
@@ -12741,7 +12874,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 202
+		iconIdx: 204
 	},
 	{
 		icon: {
@@ -12769,7 +12902,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 203
+		iconIdx: 205
 	},
 	{
 		icon: {
@@ -12797,7 +12930,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 204
+		iconIdx: 206
 	},
 	{
 		icon: {
@@ -12825,7 +12958,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 205
+		iconIdx: 207
 	},
 	{
 		icon: {
@@ -12853,7 +12986,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 206
+		iconIdx: 208
 	},
 	{
 		icon: {
@@ -12878,7 +13011,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 207
+		iconIdx: 209
 	},
 	{
 		icon: {
@@ -12903,7 +13036,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 208
+		iconIdx: 210
 	},
 	{
 		icon: {
@@ -12930,7 +13063,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 209
+		iconIdx: 211
 	},
 	{
 		icon: {
@@ -12956,7 +13089,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 210
+		iconIdx: 212
 	},
 	{
 		icon: {
@@ -12981,7 +13114,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 211
+		iconIdx: 213
 	},
 	{
 		icon: {
@@ -13006,7 +13139,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 212
+		iconIdx: 214
 	},
 	{
 		icon: {
@@ -13031,7 +13164,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 213
+		iconIdx: 215
 	},
 	{
 		icon: {
@@ -13057,7 +13190,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 214
+		iconIdx: 216
 	},
 	{
 		icon: {
@@ -13082,7 +13215,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 215
+		iconIdx: 217
 	},
 	{
 		icon: {
@@ -13107,7 +13240,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 216
+		iconIdx: 218
 	},
 	{
 		icon: {
@@ -13132,7 +13265,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 217
+		iconIdx: 219
 	},
 	{
 		icon: {
@@ -13158,7 +13291,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 218
+		iconIdx: 220
 	},
 	{
 		icon: {
@@ -13183,7 +13316,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 219
+		iconIdx: 221
 	},
 	{
 		icon: {
@@ -13208,7 +13341,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 220
+		iconIdx: 222
 	},
 	{
 		icon: {
@@ -13233,7 +13366,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 221
+		iconIdx: 223
 	},
 	{
 		icon: {
@@ -13261,7 +13394,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 222
+		iconIdx: 224
 	},
 	{
 		icon: {
@@ -13286,7 +13419,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 223
+		iconIdx: 225
 	},
 	{
 		icon: {
@@ -13314,7 +13447,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 224
+		iconIdx: 226
 	},
 	{
 		icon: {
@@ -13339,7 +13472,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 225
+		iconIdx: 227
 	},
 	{
 		icon: {
@@ -13364,7 +13497,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 226
+		iconIdx: 228
 	},
 	{
 		icon: {
@@ -13389,7 +13522,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 227
+		iconIdx: 229
 	},
 	{
 		icon: {
@@ -13414,7 +13547,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 228
+		iconIdx: 230
 	},
 	{
 		icon: {
@@ -13439,7 +13572,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 229
+		iconIdx: 231
 	},
 	{
 		icon: {
@@ -13464,7 +13597,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 230
+		iconIdx: 232
 	},
 	{
 		icon: {
@@ -13489,7 +13622,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 231
+		iconIdx: 233
 	},
 	{
 		icon: {
@@ -13514,7 +13647,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 232
+		iconIdx: 234
 	},
 	{
 		icon: {
@@ -13539,7 +13672,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 233
+		iconIdx: 235
 	},
 	{
 		icon: {
@@ -13564,7 +13697,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 234
+		iconIdx: 236
 	},
 	{
 		icon: {
@@ -13591,7 +13724,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 235
+		iconIdx: 237
 	},
 	{
 		icon: {
@@ -13616,7 +13749,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 236
+		iconIdx: 238
 	},
 	{
 		icon: {
@@ -13641,7 +13774,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 237
+		iconIdx: 239
 	},
 	{
 		icon: {
@@ -13666,7 +13799,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 238
+		iconIdx: 240
 	},
 	{
 		icon: {
@@ -13691,7 +13824,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 239
+		iconIdx: 241
 	},
 	{
 		icon: {
@@ -13716,7 +13849,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 240
+		iconIdx: 242
 	},
 	{
 		icon: {
@@ -13745,7 +13878,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 241
+		iconIdx: 243
 	},
 	{
 		icon: {
@@ -13774,7 +13907,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 242
+		iconIdx: 244
 	},
 	{
 		icon: {
@@ -13799,7 +13932,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 243
+		iconIdx: 245
 	},
 	{
 		icon: {
@@ -13824,7 +13957,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 244
+		iconIdx: 246
 	},
 	{
 		icon: {
@@ -13851,7 +13984,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 245
+		iconIdx: 247
 	},
 	{
 		icon: {
@@ -13878,7 +14011,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 246
+		iconIdx: 248
 	},
 	{
 		icon: {
@@ -13903,7 +14036,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 247
+		iconIdx: 249
 	},
 	{
 		icon: {
@@ -13933,7 +14066,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 248
+		iconIdx: 250
 	},
 	{
 		icon: {
@@ -13958,7 +14091,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 249
+		iconIdx: 251
 	},
 	{
 		icon: {
@@ -13983,7 +14116,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 250
+		iconIdx: 252
 	},
 	{
 		icon: {
@@ -14011,7 +14144,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 251
+		iconIdx: 253
 	},
 	{
 		icon: {
@@ -14036,7 +14169,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 252
+		iconIdx: 254
 	},
 	{
 		icon: {
@@ -14067,7 +14200,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 253
+		iconIdx: 255
 	},
 	{
 		icon: {
@@ -14093,7 +14226,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 254
+		iconIdx: 256
 	},
 	{
 		icon: {
@@ -14118,7 +14251,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 255
+		iconIdx: 257
 	},
 	{
 		icon: {
@@ -14143,7 +14276,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 256
+		iconIdx: 258
 	},
 	{
 		icon: {
@@ -14171,7 +14304,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 257
+		iconIdx: 259
 	},
 	{
 		icon: {
@@ -14196,7 +14329,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 258
+		iconIdx: 260
 	},
 	{
 		icon: {
@@ -14221,7 +14354,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 259
+		iconIdx: 261
 	},
 	{
 		icon: {
@@ -14251,7 +14384,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 260
+		iconIdx: 262
 	},
 	{
 		icon: {
@@ -14284,7 +14417,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 261
+		iconIdx: 263
 	},
 	{
 		icon: {
@@ -14309,7 +14442,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 262
+		iconIdx: 264
 	},
 	{
 		icon: {
@@ -14341,7 +14474,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 263
+		iconIdx: 265
 	},
 	{
 		icon: {
@@ -14366,7 +14499,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 264
+		iconIdx: 266
 	},
 	{
 		icon: {
@@ -14391,7 +14524,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 265
+		iconIdx: 267
 	},
 	{
 		icon: {
@@ -14416,7 +14549,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 266
+		iconIdx: 268
 	},
 	{
 		icon: {
@@ -14441,7 +14574,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 267
+		iconIdx: 269
 	},
 	{
 		icon: {
@@ -14466,7 +14599,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 268
+		iconIdx: 270
 	},
 	{
 		icon: {
@@ -14491,7 +14624,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 269
+		iconIdx: 271
 	},
 	{
 		icon: {
@@ -14516,7 +14649,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 270
+		iconIdx: 272
 	},
 	{
 		icon: {
@@ -14541,7 +14674,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 271
+		iconIdx: 273
 	},
 	{
 		icon: {
@@ -14568,7 +14701,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 272
+		iconIdx: 274
 	},
 	{
 		icon: {
@@ -14593,7 +14726,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 273
+		iconIdx: 275
 	},
 	{
 		icon: {
@@ -14618,7 +14751,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 274
+		iconIdx: 276
 	},
 	{
 		icon: {
@@ -14647,7 +14780,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 275
+		iconIdx: 277
 	},
 	{
 		icon: {
@@ -14672,7 +14805,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 276
+		iconIdx: 278
 	},
 	{
 		icon: {
@@ -14697,7 +14830,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 277
+		iconIdx: 279
 	},
 	{
 		icon: {
@@ -14722,7 +14855,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 278
+		iconIdx: 280
 	},
 	{
 		icon: {
@@ -14747,7 +14880,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 279
+		iconIdx: 281
 	},
 	{
 		icon: {
@@ -14772,7 +14905,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 280
+		iconIdx: 282
 	},
 	{
 		icon: {
@@ -14797,7 +14930,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 281
+		iconIdx: 283
 	},
 	{
 		icon: {
@@ -14825,7 +14958,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 282
+		iconIdx: 284
 	},
 	{
 		icon: {
@@ -14850,7 +14983,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 283
+		iconIdx: 285
 	},
 	{
 		icon: {
@@ -14882,7 +15015,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 284
+		iconIdx: 286
 	},
 	{
 		icon: {
@@ -14907,7 +15040,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 285
+		iconIdx: 287
 	},
 	{
 		icon: {
@@ -14935,7 +15068,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 286
+		iconIdx: 288
 	},
 	{
 		icon: {
@@ -14960,7 +15093,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 287
+		iconIdx: 289
 	},
 	{
 		icon: {
@@ -14988,7 +15121,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 288
+		iconIdx: 290
 	},
 	{
 		icon: {
@@ -15013,7 +15146,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 289
+		iconIdx: 291
 	},
 	{
 		icon: {
@@ -15039,7 +15172,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 290
+		iconIdx: 292
 	},
 	{
 		icon: {
@@ -15067,7 +15200,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 291
+		iconIdx: 293
 	},
 	{
 		icon: {
@@ -15092,7 +15225,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 292
+		iconIdx: 294
 	},
 	{
 		icon: {
@@ -15117,7 +15250,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 293
+		iconIdx: 295
 	},
 	{
 		icon: {
@@ -15144,7 +15277,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 294
+		iconIdx: 296
 	},
 	{
 		icon: {
@@ -15169,7 +15302,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 295
+		iconIdx: 297
 	},
 	{
 		icon: {
@@ -15201,7 +15334,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 296
+		iconIdx: 298
 	},
 	{
 		icon: {
@@ -15227,7 +15360,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 297
+		iconIdx: 299
 	},
 	{
 		icon: {
@@ -15258,7 +15391,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 298
+		iconIdx: 300
 	},
 	{
 		icon: {
@@ -15283,7 +15416,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 299
+		iconIdx: 301
 	},
 	{
 		icon: {
@@ -15308,7 +15441,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 300
+		iconIdx: 302
 	},
 	{
 		icon: {
@@ -15339,7 +15472,7 @@ var icons = [
 		},
 		setIdx: 0,
 		setId: 0,
-		iconIdx: 301
+		iconIdx: 303
 	}
 ];
 var height = 1024;
@@ -15399,7 +15532,8 @@ var COLOR_INTENTS = {
   danger: 'danger',
   success: 'success',
   warning: 'warning',
-  'disabled-text': 'disabledText'
+  'disabled-text': 'disabledText',
+  'text-inverted': 'invertedText'
 };
 var StyledHeroIcon = index$5(HeroIcon)(function (_ref) {
   var themeIntent = _ref.themeIntent,
@@ -15472,7 +15606,7 @@ var Typography = {
   Text: Text
 };
 
-var Container$2 = index$5(View)(function (_ref) {
+var Container$1 = index$5(View)(function (_ref) {
   var theme = _ref.theme,
       _ref$themeVariant = _ref.themeVariant,
       themeVariant = _ref$themeVariant === void 0 ? 'default' : _ref$themeVariant,
@@ -15544,7 +15678,7 @@ var Alert = function Alert(_ref) {
       variant = _ref$variant === void 0 ? 'default' : _ref$variant,
       style = _ref.style,
       testID = _ref.testID;
-  return /*#__PURE__*/React.createElement(Container$2, {
+  return /*#__PURE__*/React.createElement(Container$1, {
     themeVariant: variant,
     themeIntent: intent,
     style: style,
@@ -15790,7 +15924,7 @@ var Badge$1 = Object.assign(Badge, {
   Status: Status
 });
 
-var IconList = ['activate', 'add-person', 'adjustment', 'alignment', 'bank', 'bell', 'billing', 'bookmark', 'box-check', 'box', 'buildings', 'cake', 'calendar-clock', 'calendar', 'candy-box-menu', 'carat-down-small', 'carat-down', 'carat-left', 'carat-right', 'carat-up', 'circle-add', 'circle-cancel', 'circle-check', 'circle-down', 'circle-info', 'circle-left', 'circle-ok', 'circle-pencil', 'circle-question', 'circle-remove', 'circle-right', 'circle-up', 'circle-warning', 'clock', 'cloud-download', 'cloud-upload', 'cog', 'coin', 'contacts', 'credit-card', 'diamond', 'direction-arrows', 'directory', 'document', 'dollar-coin-shine', 'double-buildings', 'edit-template', 'envelope', 'expense', 'eye-circle', 'eye-invisible', 'eye', 'face-meh', 'face-sad', 'face-smiley', 'feed', 'feedbacks', 'file-certified', 'file-clone', 'file-copy', 'file-csv', 'file-dispose', 'file-doc', 'file-excel', 'file-export', 'file-lock', 'file-pdf', 'file-powerpoint', 'file-search', 'file-secured', 'file-sheets', 'file-slide', 'file-verified', 'file-word', 'file', 'folder-user', 'folder', 'funnel-filter', 'global-dollar', 'globe', 'graduation-cap', 'graph', 'happy-sun', 'health-bag', 'heart', 'home', 'image', 'import', 'incident-siren', 'instapay', 'list', 'loading', 'loading-2', 'location', 'lock', 'media-content', 'menu', 'moneybag', 'moon', 'multiple-stars', 'multiple-users', 'node', 'open-folder', 'paperclip', 'payment-summary', 'pencil', 'phone', 'piggy-bank', 'plane', 'play-circle', 'print', 'raising-hands', 'reply', 'reschedule', 'rostering', 'save', 'schedule', 'search-person', 'send', 'speaker', 'star-medal', 'star', 'steps-circle', 'stopwatch', 'suitcase', 'survey', 'swag', 'switch', 'tag', 'target', 'teams', 'timesheet', 'touch-id', 'trash-bin', 'unlock', 'user', 'video-1', 'video-2', 'activate-outlined', 'add-person-outlined', 'add-section-outlined', 'add-time-outlined', 'add', 'adjustment-outlined', 'alignment-2-outlined', 'alignment-outlined', 'all-caps', 'arrow-down', 'arrow-left', 'arrow-right', 'arrow-up', 'at-sign', 'bell-outlined', 'billing-outlined', 'body-outlined', 'bold', 'bookmark-outlined', 'box-check-outlined', 'box-outlined', 'bullet-points', 'cake-outlined', 'calendar-dates-outlined', 'calendar-star-outlined', 'camera-outlined', 'cancel', 'checkmark', 'circle-add-outlined', 'circle-cancel-outlined', 'circle-down-outlined', 'circle-info-outlined', 'circle-left-outlined', 'circle-ok-outlined', 'circle-question-outlined', 'circle-remove-outlined', 'circle-right-outlined', 'circle-up-outlined', 'circle-warning-outlined', 'clock-2-outlined', 'clock-outlined', 'cog-outlined', 'coin-outlined', 'comment-outlined', 'contacts-outlined', 'credit-card-outlined', 'direction-arrows-outlined', 'directory-outlined', 'document-outlined', 'dollar-coin-shine-outlined', 'dollar-sign', 'double-buildings-outlined', 'double-left-arrows', 'double-right-arrows', 'download-outlined', 'edit-template-outlined', 'email-outlined', 'enter-arrow', 'envelope-outlined', 'expense-outlined', 'external-link', 'eye-invisible-outlined', 'eye-outlined', 'face-id', 'face-meh-outlined', 'face-open-smiley-outlined', 'face-sad-outlined', 'face-smiley-outlined', 'feed-outlined', 'file-certified-outlined', 'file-clone-outlined', 'file-copy-outlined', 'file-dispose-outlined', 'file-download-outlined', 'file-export-outlined', 'file-lock-outlined', 'file-outlined', 'file-search-outlined', 'file-secured-outlined', 'file-verified-outlined', 'folder-outlined', 'folder-user-outlined', 'funnel-filter-outline', 'graph-outlined', 'happy-sun-outlined', 'health-bag-outlined', 'heart-outlined', 'home-outlined', 'image-outlined', 'import-outlined', 'instapay-outlined', 'italic', 'link-1', 'link-2', 'list-outlined', 'location-outlined', 'lock-outlined', 'locked-file-outlined', 'log-out', 'media-content-outlined', 'menu-close', 'menu-expand', 'menu-fold-outlined', 'menu-unfold-outlined', 'moneybag-outlined', 'moon-outlined', 'more-horizontal', 'more-vertical', 'multiple-folders-outlined', 'multiple-users-outlined', 'node-outlined', 'number-points', 'number', 'payment-summary-outlined', 'payslip-outlined', 'pencil-outlined', 'percentage', 'phone-outlined', 'piggy-bank-outlined', 'plane-outlined', 'play-circle-outlined', 'print-outlined', 'qr-code-outlined', 're-assign', 'redeem', 'refresh', 'remove', 'reply-outlined', 'restart', 'return-arrow', 'rostering-outlined', 'save-outlined', 'schedule-outlined', 'search-outlined', 'send-outlined', 'share-1', 'share-2', 'single-down-arrow', 'single-left-arrow', 'single-right-arrow', 'single-up-arrow', 'speaker-outlined', 'star-outlined', 'stopwatch-outlined', 'strikethrough', 'suitcase-outlined', 'survey-outlined', 'switch-outlined', 'sync', 'target-outlined', 'timesheet-outlined', 'transfer', 'trash-bin-outlined', 'unavailable', 'underline', 'unlock-outlined', 'upload-outlined', 'user-circle-outlined', 'user-outlined', 'user-rectangle-outlined', 'video-1-outlined', 'video-2-outlined', 'wallet-outlined', 'warning'];
+var IconList = ['activate', 'add-person', 'adjustment', 'alignment', 'bank', 'bell', 'billing', 'bookmark', 'box-check', 'box', 'buildings', 'cake', 'calendar-clock', 'calendar', 'candy-box-menu', 'carat-down-small', 'carat-down', 'carat-left', 'carat-right', 'carat-up', 'circle-add', 'circle-cancel', 'circle-check', 'circle-down', 'circle-info', 'circle-left', 'circle-ok', 'circle-pencil', 'circle-question', 'circle-remove', 'circle-right', 'circle-up', 'circle-warning', 'clock', 'cloud-download', 'cloud-upload', 'cog', 'coin', 'contacts', 'credit-card', 'diamond', 'direction-arrows', 'directory', 'document', 'dollar-coin-shine', 'double-buildings', 'edit-template', 'envelope', 'expense', 'eye-circle', 'eye-invisible', 'eye', 'face-meh', 'face-sad', 'face-smiley', 'feed', 'feedbacks', 'file-certified', 'file-clone', 'file-copy', 'file-csv', 'file-dispose', 'file-doc', 'file-excel', 'file-export', 'file-lock', 'file-pdf', 'file-powerpoint', 'file-search', 'file-secured', 'file-sheets', 'file-slide', 'file-verified', 'file-word', 'file', 'folder-user', 'folder', 'funnel-filter', 'global-dollar', 'globe', 'graduation-cap', 'graph', 'happy-sun', 'health-bag', 'heart', 'home', 'image', 'import', 'incident-siren', 'instapay', 'list', 'loading', 'loading-2', 'location', 'lock', 'looks-one', 'looks-two', 'media-content', 'menu', 'moneybag', 'moon', 'multiple-stars', 'multiple-users', 'node', 'open-folder', 'paperclip', 'payment-summary', 'pencil', 'phone', 'piggy-bank', 'plane', 'play-circle', 'print', 'raising-hands', 'reply', 'reschedule', 'rostering', 'save', 'schedule', 'search-person', 'send', 'speaker', 'star-medal', 'star', 'steps-circle', 'stopwatch', 'suitcase', 'survey', 'swag', 'switch', 'tag', 'target', 'teams', 'timesheet', 'touch-id', 'trash-bin', 'unlock', 'user', 'video-1', 'video-2', 'activate-outlined', 'add-person-outlined', 'add-section-outlined', 'add-time-outlined', 'add', 'adjustment-outlined', 'alignment-2-outlined', 'alignment-outlined', 'all-caps', 'arrow-down', 'arrow-left', 'arrow-right', 'arrow-up', 'at-sign', 'bell-outlined', 'billing-outlined', 'body-outlined', 'bold', 'bookmark-outlined', 'box-check-outlined', 'box-outlined', 'bullet-points', 'cake-outlined', 'calendar-dates-outlined', 'calendar-star-outlined', 'camera-outlined', 'cancel', 'checkmark', 'circle-add-outlined', 'circle-cancel-outlined', 'circle-down-outlined', 'circle-info-outlined', 'circle-left-outlined', 'circle-ok-outlined', 'circle-question-outlined', 'circle-remove-outlined', 'circle-right-outlined', 'circle-up-outlined', 'circle-warning-outlined', 'clock-2-outlined', 'clock-outlined', 'cog-outlined', 'coin-outlined', 'comment-outlined', 'contacts-outlined', 'credit-card-outlined', 'direction-arrows-outlined', 'directory-outlined', 'document-outlined', 'dollar-coin-shine-outlined', 'dollar-sign', 'double-buildings-outlined', 'double-left-arrows', 'double-right-arrows', 'download-outlined', 'edit-template-outlined', 'email-outlined', 'enter-arrow', 'envelope-outlined', 'expense-outlined', 'external-link', 'eye-invisible-outlined', 'eye-outlined', 'face-id', 'face-meh-outlined', 'face-open-smiley-outlined', 'face-sad-outlined', 'face-smiley-outlined', 'feed-outlined', 'file-certified-outlined', 'file-clone-outlined', 'file-copy-outlined', 'file-dispose-outlined', 'file-download-outlined', 'file-export-outlined', 'file-lock-outlined', 'file-outlined', 'file-search-outlined', 'file-secured-outlined', 'file-verified-outlined', 'folder-outlined', 'folder-user-outlined', 'funnel-filter-outline', 'graph-outlined', 'happy-sun-outlined', 'health-bag-outlined', 'heart-outlined', 'home-outlined', 'image-outlined', 'import-outlined', 'instapay-outlined', 'italic', 'link-1', 'link-2', 'list-outlined', 'location-outlined', 'lock-outlined', 'locked-file-outlined', 'log-out', 'media-content-outlined', 'menu-close', 'menu-expand', 'menu-fold-outlined', 'menu-unfold-outlined', 'moneybag-outlined', 'moon-outlined', 'more-horizontal', 'more-vertical', 'multiple-folders-outlined', 'multiple-users-outlined', 'node-outlined', 'number-points', 'number', 'payment-summary-outlined', 'payslip-outlined', 'pencil-outlined', 'percentage', 'phone-outlined', 'piggy-bank-outlined', 'plane-outlined', 'play-circle-outlined', 'print-outlined', 'qr-code-outlined', 're-assign', 'redeem', 'refresh', 'remove', 'reply-outlined', 'restart', 'return-arrow', 'rostering-outlined', 'save-outlined', 'schedule-outlined', 'search-outlined', 'send-outlined', 'share-1', 'share-2', 'single-down-arrow', 'single-left-arrow', 'single-right-arrow', 'single-up-arrow', 'speaker-outlined', 'star-outlined', 'stopwatch-outlined', 'strikethrough', 'suitcase-outlined', 'survey-outlined', 'switch-outlined', 'sync', 'target-outlined', 'timesheet-outlined', 'transfer', 'trash-bin-outlined', 'unavailable', 'underline', 'unlock-outlined', 'upload-outlined', 'user-circle-outlined', 'user-outlined', 'user-rectangle-outlined', 'video-1-outlined', 'video-2-outlined', 'wallet-outlined', 'warning'];
 
 var isHeroIcon = function isHeroIcon(x) {
   return IconList.includes(x);
@@ -16069,12 +16203,15 @@ var StyledLoadingDot = index$5(View)(function (_ref2) {
         };
 
       case 'outlined-primary':
+      case 'text-primary':
         return genLoadingIndicatorStyles(theme, 'primary');
 
       case 'outlined-secondary':
+      case 'text-secondary':
         return genLoadingIndicatorStyles(theme, 'secondary');
 
       case 'outlined-danger':
+      case 'text-danger':
         return genLoadingIndicatorStyles(theme, 'danger');
     }
   };
@@ -16275,6 +16412,31 @@ var genOutlineTextStyles = function genOutlineTextStyles(theme, intent, pressed,
   }, textColorStyling());
 };
 
+var genTextVariantTextStyles = function genTextVariantTextStyles(theme, intent, pressed, disabled) {
+  var textColorStyling = function textColorStyling() {
+    if (disabled) {
+      return {
+        color: theme.__hd__.button.colors.disabledText
+      };
+    }
+
+    if (pressed) {
+      return {
+        color: theme.__hd__.button.colors[PRESSED_COLORS[intent]]
+      };
+    }
+
+    return {
+      color: theme.__hd__.button.colors[intent]
+    };
+  };
+
+  return _objectSpread2({
+    fontSize: theme.__hd__.button.fontSize.textVariant,
+    lineHeight: theme.__hd__.button.lineHeight["default"]
+  }, textColorStyling());
+};
+
 var StyledButtonContainer = index$5(View)(function (_ref) {
   var _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
@@ -16304,6 +16466,19 @@ var StyledButtonContainer = index$5(View)(function (_ref) {
 
     case 'outlined-danger':
       return genOutlineContainerStyles(theme, 'danger', pressed, disabled);
+
+    case 'text-primary':
+    case 'text-secondary':
+    case 'text-danger':
+      return {
+        width: '100%',
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: theme.__hd__.button.space.buttonPadding,
+        borderWidth: 0,
+        backgroundColor: 'transparent'
+      };
   }
 });
 var StyledButtonText = index$5(Typography.Text)(function (_ref2) {
@@ -16338,6 +16513,15 @@ var StyledButtonText = index$5(Typography.Text)(function (_ref2) {
 
       case 'outlined-danger':
         return genOutlineTextStyles(theme, 'danger', pressed, disabled);
+
+      case 'text-primary':
+        return genTextVariantTextStyles(theme, 'primary', pressed, disabled);
+
+      case 'text-secondary':
+        return genTextVariantTextStyles(theme, 'secondary', pressed, disabled);
+
+      case 'text-danger':
+        return genTextVariantTextStyles(theme, 'danger', pressed, disabled);
     }
   };
 
@@ -16391,6 +16575,15 @@ var StyledButtonIcon = index$5(Icon)(function (_ref4) {
 
       case 'outlined-danger':
         return genOutlineTextStyles(theme, 'danger', pressed, disabled);
+
+      case 'text-primary':
+        return genTextVariantTextStyles(theme, 'primary', pressed, disabled);
+
+      case 'text-secondary':
+        return genTextVariantTextStyles(theme, 'secondary', pressed, disabled);
+
+      case 'text-danger':
+        return genTextVariantTextStyles(theme, 'danger', pressed, disabled);
     }
   };
 
@@ -16409,6 +16602,11 @@ var OUTLINED_VARIANTS = {
   secondary: 'outlined-secondary',
   danger: 'outlined-danger'
 };
+var TEXT_VARIANTS = {
+  primary: 'text-primary',
+  secondary: 'text-secondary',
+  danger: 'text-danger'
+};
 var getThemeVariant = function getThemeVariant(variant, intent) {
   switch (variant) {
     case 'basic-transparent':
@@ -16419,6 +16617,9 @@ var getThemeVariant = function getThemeVariant(variant, intent) {
 
     case 'outlined':
       return OUTLINED_VARIANTS[intent];
+
+    case 'text':
+      return TEXT_VARIANTS[intent];
   }
 };
 
@@ -16503,8 +16704,65 @@ var IconButton = function IconButton(_ref) {
   }));
 };
 
+var ButtonContainer = index$5(TouchableOpacity)(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    width: '100%',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: theme.__hd__.button.space.utilityPadding,
+    borderRadius: theme.__hd__.button.radii.utilityRadii,
+    backgroundColor: theme.__hd__.button.colors.utilityBackground
+  };
+});
+var IconWrapper = index$5(View)(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    paddingRight: theme.__hd__.button.space.utilityIconPadding
+  };
+});
+var ButtonText = index$5(Typography.Text)(function (_ref3) {
+  var theme = _ref3.theme;
+  return {
+    flexShrink: 1,
+    textAlign: 'center',
+    fontSize: theme.__hd__.button.fontSize.utility,
+    fontFamily: theme.__hd__.button.fonts["default"]
+  };
+});
+
+var TEXT_INTENTS = {
+  primary: 'primary',
+  text: 'body'
+};
+
+var UtilityButton = function UtilityButton(_ref) {
+  var icon = _ref.icon,
+      onPress = _ref.onPress,
+      text = _ref.text,
+      testID = _ref.testID,
+      _ref$intent = _ref.intent,
+      intent = _ref$intent === void 0 ? 'text' : _ref$intent,
+      style = _ref.style,
+      hitSlop = _ref.hitSlop;
+  return /*#__PURE__*/React.createElement(ButtonContainer, {
+    style: style,
+    onPress: onPress,
+    testID: testID,
+    hitSlop: hitSlop
+  }, /*#__PURE__*/React.createElement(IconWrapper, null, /*#__PURE__*/React.createElement(Icon, {
+    icon: icon,
+    intent: intent,
+    testID: "".concat(testID, "-icon")
+  })), /*#__PURE__*/React.createElement(ButtonText, {
+    intent: TEXT_INTENTS[intent]
+  }, text));
+};
+
 var CompoundButton = Button;
 CompoundButton.Icon = IconButton;
+CompoundButton.Utility = UtilityButton;
 
 var Header = function Header(_ref) {
   var content = _ref.content,
@@ -16640,7 +16898,6 @@ var StyledDataCard = index$5(View)(function (_ref) {
   return {
     borderRadius: theme.__hd__.card.radii["default"],
     overflow: 'hidden',
-    flex: 1,
     flexDirection: 'row'
   };
 });
@@ -16649,7 +16906,7 @@ var Indicator = index$5(View)(function (_ref2) {
       themeIntent = _ref2.themeIntent;
   return {
     backgroundColor: theme.__hd__.card.colors.indicator[themeIntent],
-    width: scale(16),
+    width: theme.__hd__.card.sizes.indicatorWidth,
     height: '100%'
   };
 });
@@ -16676,7 +16933,6 @@ var StyledCard = index$5(View)(function (_ref) {
     overflow: 'hidden'
   };
   var dataStyles = {
-    flex: 1,
     flexDirection: 'row'
   };
 
@@ -16692,7 +16948,7 @@ var LeftDataCard = index$5(View)(function (_ref2) {
   var theme = _ref2.theme;
   return {
     backgroundColor: theme.__hd__.card.colors.dataCardIndicator,
-    width: scale(16),
+    width: theme.__hd__.card.sizes.indicatorWidth,
     height: '100%'
   };
 });
@@ -16871,7 +17127,7 @@ function ContentNavigator(_ref) {
 }
 
 var AnimatedPressable = Animated.createAnimatedComponent(Pressable);
-var StyledContainer$1 = index$5(View)(function (_ref) {
+var StyledContainer$2 = index$5(View)(function (_ref) {
   var theme = _ref.theme,
       enableShadow = _ref.enableShadow;
   return _objectSpread2(_objectSpread2({}, StyleSheet$1.absoluteFillObject), {}, {
@@ -16936,7 +17192,7 @@ var Drawer = function Drawer(_ref) {
       return animation.stop();
     };
   }, [visible]);
-  return /*#__PURE__*/React.createElement(StyledContainer$1, {
+  return /*#__PURE__*/React.createElement(StyledContainer$2, {
     testID: testID,
     enableShadow: enableShadow,
     pointerEvents: "box-none"
@@ -17122,7 +17378,7 @@ var ActionItem = function ActionItem(_ref) {
   }), /*#__PURE__*/React.createElement(StyledActionItemText, null, title));
 };
 
-var StyledContainer = index$5(View)({
+var StyledContainer$1 = index$5(View)({
   position: 'absolute',
   left: 0,
   right: 0,
@@ -17203,7 +17459,7 @@ var ActionGroup = function ActionGroup(_ref2) {
     inputRange: [0, 1],
     outputRange: [0, 0.9]
   });
-  return /*#__PURE__*/React.createElement(StyledContainer, {
+  return /*#__PURE__*/React.createElement(StyledContainer$1, {
     testID: testID,
     pointerEvents: "box-none",
     style: style
@@ -18054,22 +18310,18 @@ var OptionList$1 = function OptionList(_ref) {
   }));
 };
 
-var Container$1 = index$5(View)(function (_ref) {
+var StyledContainer = index$5(View)(function (_ref) {
   var theme = _ref.theme;
   return {
-    position: 'relative',
     width: '100%',
-    borderWidth: theme.__hd__.textInput.borderWidths.container,
-    borderRadius: theme.__hd__.textInput.radii.container,
-    padding: theme.__hd__.textInput.space.containerPadding,
-    flexDirection: 'row',
-    alignItems: 'center'
+    marginVertical: theme.__hd__.textInput.space.containerMarginVertical
   };
 });
-var Label = index$5(Typography.Text)(function (_ref2) {
+var StyledLabelContainer = index$5(View)(function (_ref2) {
   var theme = _ref2.theme;
   return {
     position: 'absolute',
+    flexDirection: 'row',
     left: theme.__hd__.textInput.space.labelLeft,
     top: theme.__hd__.textInput.space.labelTop,
     backgroundColor: theme.__hd__.textInput.colors.labelBackground,
@@ -18077,48 +18329,279 @@ var Label = index$5(Typography.Text)(function (_ref2) {
     paddingHorizontal: theme.__hd__.textInput.space.labelHorizontalPadding
   };
 });
-var StyledTextInput = index$5(TextInput$1)(function (_ref3) {
-  var theme = _ref3.theme;
+var StyledLabel = index$5(Typography.Text)(function (_ref3) {
+  var theme = _ref3.theme,
+      themeVariant = _ref3.themeVariant;
+  return {
+    color: theme.__hd__.textInput.colors.labels[themeVariant]
+  };
+});
+var StyledAsteriskLabel = index$5(Typography.Text)(function (_ref4) {
+  var theme = _ref4.theme,
+      themeVariant = _ref4.themeVariant;
+  return {
+    color: theme.__hd__.textInput.colors.asterisks[themeVariant]
+  };
+});
+var StyledLabelContainerInsideTextInput = index$5(View)(function () {
+  return _objectSpread2({
+    flexDirection: 'row',
+    zIndex: 9999,
+    alignItems: 'center'
+  }, StyleSheet$1.absoluteFillObject);
+});
+var StyledLabelInsideTextInput = index$5(Typography.Text)(function (_ref5) {
+  var theme = _ref5.theme,
+      themeVariant = _ref5.themeVariant;
+  return {
+    textAlignVertical: 'center',
+    alignContent: 'center',
+    fontSize: theme.__hd__.textInput.fontSizes.labelInsideTextInput,
+    alignItems: 'center',
+    color: theme.__hd__.textInput.colors.labelsInsideTextInput[themeVariant]
+  };
+});
+var StyledAsteriskLabelInsideTextInput = index$5(Typography.Text)(function (_ref6) {
+  var theme = _ref6.theme,
+      themeVariant = _ref6.themeVariant;
+  return {
+    color: theme.__hd__.textInput.colors.asterisks[themeVariant],
+    fontSize: theme.__hd__.textInput.fontSizes.asteriskLabel
+  };
+});
+var StyledErrorContainer = index$5(View)(function (_ref7) {
+  var theme = _ref7.theme;
+  return {
+    marginLeft: theme.__hd__.textInput.space.errorContainerMarginLeft,
+    marginRight: theme.__hd__.textInput.space.errorContainerMarginRight,
+    flexDirection: 'row',
+    alignItems: 'center',
+    flex: 1,
+    flexGrow: 4
+  };
+});
+var StyledError = index$5(Typography.Text)(function (_ref8) {
+  var theme = _ref8.theme;
+  return {
+    color: theme.__hd__.textInput.colors.error,
+    fontSize: theme.__hd__.textInput.fontSizes.error,
+    marginLeft: theme.__hd__.textInput.space.errorMarginLeft
+  };
+});
+var StyledMaxLengthMessage = index$5(Typography.Text)(function (_ref9) {
+  var theme = _ref9.theme,
+      themeVariant = _ref9.themeVariant;
   return {
+    color: theme.__hd__.textInput.colors.maxLengthLabels[themeVariant],
+    fontSize: theme.__hd__.textInput.fontSizes.maxLength,
+    marginRight: theme.__hd__.textInput.space.maxLengthLabelMarginLeft,
+    alignSelf: 'flex-end',
     flex: 1,
+    flexGrow: 1,
+    textAlign: 'right'
+  };
+});
+var StyledHelperText = index$5(Typography.Text)(function (_ref10) {
+  var theme = _ref10.theme;
+  return {
+    fontSize: theme.__hd__.textInput.fontSizes.error,
+    marginLeft: theme.__hd__.textInput.space.errorMarginLeft
+  };
+});
+var StyledTextInput = index$5(TextInput$1)(function (_ref11) {
+  var theme = _ref11.theme;
+  return {
+    textAlignVertical: 'center',
     fontSize: theme.__hd__.textInput.fontSizes.text,
+    alignSelf: 'stretch',
+    flexGrow: 2,
     marginHorizontal: theme.__hd__.textInput.space.inputHorizontalMargin
   };
 });
+var StyledBorderBackDrop = index$5(View)(function (_ref12) {
+  var _theme$__hd__$textInp;
+
+  var theme = _ref12.theme,
+      themeVariant = _ref12.themeVariant;
+  return _objectSpread2(_objectSpread2({}, StyleSheet$1.absoluteFillObject), {}, {
+    borderWidth: themeVariant === 'focused' ? theme.__hd__.textInput.borderWidths.container.focused : theme.__hd__.textInput.borderWidths.container.normal,
+    borderRadius: theme.__hd__.textInput.radii.container,
+    borderColor: (_theme$__hd__$textInp = theme.__hd__.textInput.colors.borders[themeVariant]) !== null && _theme$__hd__$textInp !== void 0 ? _theme$__hd__$textInp : theme.__hd__.textInput.colors.borders["default"]
+  });
+});
+var StyledTextInputContainer = index$5(View)(function (_ref13) {
+  var theme = _ref13.theme;
+  return {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: theme.__hd__.textInput.space.containerPadding
+  };
+});
+var StyledTextInputAndLabelContainer = index$5(View)(function () {
+  return {
+    flexDirection: 'row',
+    alignItems: 'center',
+    alignSelf: 'stretch',
+    flexGrow: 2
+  };
+});
+var StyledErrorAndHelpTextContainer = index$5(View)(function () {
+  return {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between'
+  };
+});
 
-var _excluded$1 = ["label", "prefix", "suffix", "style", "textStyle", "testID", "accessibilityLabelledBy"];
+var _excluded$1 = ["label", "prefix", "suffix", "style", "textStyle", "testID", "accessibilityLabelledBy", "error", "required", "editable", "disabled", "maxLength", "helpText", "value"];
+var getVariant = function getVariant(_ref) {
+  var disabled = _ref.disabled,
+      error = _ref.error,
+      editable = _ref.editable,
+      isFocused = _ref.isFocused,
+      isEmptyValue = _ref.isEmptyValue;
 
-var TextInput = function TextInput(_ref) {
-  var label = _ref.label,
-      prefix = _ref.prefix,
-      suffix = _ref.suffix,
-      style = _ref.style,
-      textStyle = _ref.textStyle,
-      testID = _ref.testID,
-      accessibilityLabelledBy = _ref.accessibilityLabelledBy,
-      nativeProps = _objectWithoutProperties$1(_ref, _excluded$1);
+  if (disabled) {
+    return 'disabled';
+  }
 
-  return /*#__PURE__*/React.createElement(Container$1, {
+  if (error) {
+    return 'error';
+  }
+
+  if (!editable) {
+    return 'readonly';
+  }
+
+  if (isFocused) {
+    return 'focused';
+  }
+
+  if (!isEmptyValue) {
+    return 'filled';
+  }
+
+  return 'default';
+};
+
+var TextInput = function TextInput(_ref2) {
+  var label = _ref2.label,
+      prefix = _ref2.prefix,
+      suffix = _ref2.suffix,
+      style = _ref2.style,
+      textStyle = _ref2.textStyle,
+      testID = _ref2.testID,
+      accessibilityLabelledBy = _ref2.accessibilityLabelledBy,
+      error = _ref2.error,
+      required = _ref2.required,
+      _ref2$editable = _ref2.editable,
+      editable = _ref2$editable === void 0 ? true : _ref2$editable,
+      _ref2$disabled = _ref2.disabled,
+      disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
+      maxLength = _ref2.maxLength,
+      helpText = _ref2.helpText,
+      _ref2$value = _ref2.value,
+      value = _ref2$value === void 0 ? '' : _ref2$value,
+      nativeProps = _objectWithoutProperties$1(_ref2, _excluded$1);
+
+  var textInputReference = useRef(null);
+  var isEmptyValue = value.length === 0;
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isFocused = _React$useState2[0],
+      setIsFocused = _React$useState2[1];
+
+  var variant = getVariant({
+    disabled: disabled,
+    error: error,
+    editable: editable,
+    isFocused: isFocused,
+    isEmptyValue: isEmptyValue
+  });
+  var shouldShowMaxLength = maxLength !== undefined;
+  var theme = useTheme();
+  return /*#__PURE__*/React.createElement(StyledContainer, {
     style: style,
+    pointerEvents: variant === 'disabled' ? 'none' : 'auto',
     testID: testID
-  }, label && /*#__PURE__*/React.createElement(Label, {
+  }, /*#__PURE__*/React.createElement(StyledTextInputContainer, null, /*#__PURE__*/React.createElement(StyledBorderBackDrop, {
+    themeVariant: variant
+  }), (isFocused || label && !isEmptyValue) && /*#__PURE__*/React.createElement(StyledLabelContainer, {
+    pointerEvents: "none"
+  }, required && /*#__PURE__*/React.createElement(StyledAsteriskLabel, {
+    themeVariant: variant,
+    fontSize: "small"
+  }, "*"), /*#__PURE__*/React.createElement(StyledLabel, {
     nativeID: accessibilityLabelledBy,
     testID: "input-label",
-    fontSize: "small"
-  }, label), prefix && /*#__PURE__*/React.createElement(Icon, {
+    fontSize: "small",
+    themeVariant: variant
+  }, label)), typeof prefix === 'string' ? /*#__PURE__*/React.createElement(Icon, {
+    intent: disabled ? 'disabled-text' : 'text',
     testID: "input-prefix",
     icon: prefix,
     size: "xsmall"
-  }), /*#__PURE__*/React.createElement(StyledTextInput, _extends$3({
-    style: textStyle,
-    testID: "text-input" // @ts-ignore
+  }) : prefix, /*#__PURE__*/React.createElement(StyledTextInputAndLabelContainer, null, !isFocused && isEmptyValue && /*#__PURE__*/React.createElement(StyledLabelContainerInsideTextInput, {
+    pointerEvents: "none"
+  }, required && /*#__PURE__*/React.createElement(StyledAsteriskLabelInsideTextInput, {
+    themeVariant: variant
+  }, "*"), /*#__PURE__*/React.createElement(StyledLabelInsideTextInput, {
+    nativeID: accessibilityLabelledBy,
+    testID: "input-label",
+    fontSize: "medium",
+    themeVariant: variant
+  }, label)), /*#__PURE__*/React.createElement(StyledTextInput // when input is not editable on Android, the text color is gray
+  // hence, adding this to make the text color the same as iOS
+  , _extends$3({
+    style: StyleSheet$1.flatten([{
+      color: theme.__hd__.textInput.colors.text
+    }, textStyle]),
+    testID: "text-input",
+    accessibilityState: {
+      disabled: disabled
+    } // @ts-ignore
     ,
     accessibilityLabelledBy: accessibilityLabelledBy
-  }, nativeProps)), suffix && /*#__PURE__*/React.createElement(Icon, {
+  }, nativeProps, {
+    onFocus: function onFocus(event) {
+      var _nativeProps$onFocus;
+
+      setIsFocused(true);
+      (_nativeProps$onFocus = nativeProps.onFocus) === null || _nativeProps$onFocus === void 0 ? void 0 : _nativeProps$onFocus.call(nativeProps, event);
+    },
+    onBlur: function onBlur(event) {
+      var _nativeProps$onBlur;
+
+      setIsFocused(false);
+      (_nativeProps$onBlur = nativeProps.onBlur) === null || _nativeProps$onBlur === void 0 ? void 0 : _nativeProps$onBlur.call(nativeProps, event);
+    },
+    ref: textInputReference,
+    editable: editable,
+    maxLength: maxLength,
+    value: value,
+    onChangeText: function onChangeText(text) {
+      var _nativeProps$onChange;
+
+      (_nativeProps$onChange = nativeProps.onChangeText) === null || _nativeProps$onChange === void 0 ? void 0 : _nativeProps$onChange.call(nativeProps, text);
+    },
+    placeholder: variant === 'focused' ? nativeProps.placeholder : undefined
+  }))), typeof suffix === 'string' ? /*#__PURE__*/React.createElement(Icon, {
+    intent: disabled ? 'disabled-text' : 'text',
     testID: "input-suffix",
     icon: suffix,
     size: "xsmall"
-  }));
+  }) : suffix), /*#__PURE__*/React.createElement(StyledErrorAndHelpTextContainer, null, error && /*#__PURE__*/React.createElement(StyledErrorContainer, null, /*#__PURE__*/React.createElement(Icon, {
+    testID: "input-error-icon",
+    icon: "circle-info",
+    size: "xsmall",
+    intent: "danger"
+  }), /*#__PURE__*/React.createElement(StyledError, {
+    testID: "input-error-message"
+  }, error)), shouldShowMaxLength && /*#__PURE__*/React.createElement(StyledMaxLengthMessage, {
+    themeVariant: variant,
+    fontSize: "small"
+  }, value.length, "/", maxLength), helpText && /*#__PURE__*/React.createElement(StyledHelperText, null, helpText)));
 };
 
 function MultiSelect(_ref) {