@hero-design/rn 7.5.0 → 7.6.0

package/lib/index.js

@@ -1750,7 +1750,8 @@ var systemPalette = {
   invertedText: palette.white,
   outline: palette.greyLight60,
   archived: palette.greyLight45,
-  black: palette.black
+  black: palette.black,
+  inactiveBackground: palette.greyDark30
 };
 
 var BASE_WIDTH = 390; // Based on iPhone 13's viewport size
@@ -2257,25 +2258,6 @@ var getProgressTheme = function getProgressTheme(theme) {
   };
 };
 
-var getSpinnerTheme = function getSpinnerTheme(theme) {
-  var color = {
-    "default": theme.colors.primary
-  };
-  var space = {
-    spinnerDot: theme.space.medium,
-    spinnerDotPadding: theme.space.small,
-    spinnerTextPaddingTop: theme.space.small
-  };
-  var radii = {
-    "default": theme.radii.medium
-  };
-  return {
-    color: color,
-    space: space,
-    radii: radii
-  };
-};
-
 var getRadioTheme = function getRadioTheme(theme) {
   var colors = {
     circle: theme.colors.black,
@@ -2307,6 +2289,102 @@ var getRadioTheme = function getRadioTheme(theme) {
   };
 };
 
+var getSectionHeadingTheme = function getSectionHeadingTheme(theme) {
+  var colors = {
+    background: theme.colors.outline
+  };
+  var space = {
+    headingVerticalPadding: theme.space.small,
+    headingHorizontalPadding: theme.space.medium,
+    headingMarginBottom: theme.space.medium,
+    iconMarginRight: theme.space.small
+  };
+  return {
+    colors: colors,
+    space: space
+  };
+};
+
+var getSelectTheme = function getSelectTheme(theme) {
+  var colors = {
+    option: theme.colors.platformBackground,
+    checkedOption: theme.colors.primaryBackground,
+    footerText: theme.colors.primary
+  };
+  var space = {
+    optionPadding: theme.space.medium,
+    optionListPadding: theme.space.medium,
+    optionListSpacing: theme.space.xsmall
+  };
+  var radii = {
+    option: theme.radii.base
+  };
+  return {
+    space: space,
+    colors: colors,
+    radii: radii
+  };
+};
+
+var getSpinnerTheme = function getSpinnerTheme(theme) {
+  var color = {
+    "default": theme.colors.primary
+  };
+  var space = {
+    spinnerDot: theme.space.medium,
+    spinnerDotPadding: theme.space.small,
+    spinnerTextPaddingTop: theme.space.small
+  };
+  var radii = {
+    "default": theme.radii.medium
+  };
+  return {
+    color: color,
+    space: space,
+    radii: radii
+  };
+};
+
+var getSwitchTheme = function getSwitchTheme(theme) {
+  var colors = {
+    thumb: theme.colors.platformBackground,
+    active: theme.colors.primary,
+    inactive: theme.colors.inactiveBackground
+  };
+  var thumbSizes = {
+    small: theme.space.medium,
+    medium: theme.space.medium * 1.3
+  };
+  var widths = {
+    small: theme.space.xxxlarge,
+    medium: theme.space.xxxxlarge
+  };
+  var heights = {
+    small: theme.space.large,
+    medium: theme.space.large * 1.2
+  };
+  var spaces = {
+    small: theme.space.xsmall,
+    medium: theme.space.xsmall,
+    inactive: 0
+  };
+  var radii = {
+    rounded: theme.radii.rounded
+  };
+  var borderWidths = {
+    "default": theme.borderWidths.base
+  };
+  return {
+    colors: colors,
+    thumbSizes: thumbSizes,
+    widths: widths,
+    heights: heights,
+    spaces: spaces,
+    radii: radii,
+    borderWidths: borderWidths
+  };
+};
+
 var getTabsTheme = function getTabsTheme(theme) {
   var colors = {
     active: theme.colors.primary,
@@ -2387,7 +2465,7 @@ var getTextInputTheme = function getTextInputTheme(theme) {
     labelLeft: theme.space.medium,
     labelTop: theme.lineHeights.small / -2,
     labelHorizontalPadding: theme.space.xsmall,
-    prefixMarginRight: theme.space.small
+    inputHorizontalMargin: theme.space.small
   };
   var fontSizes = {
     text: theme.fontSizes.large
@@ -2456,9 +2534,12 @@ var getTheme = function getTheme() {
       drawer: getDrawerTheme(globalTheme),
       fab: getFABTheme(globalTheme),
       icon: getIconTheme(globalTheme),
-      spinner: getSpinnerTheme(globalTheme),
       progress: getProgressTheme(globalTheme),
       radio: getRadioTheme(globalTheme),
+      sectionHeading: getSectionHeadingTheme(globalTheme),
+      select: getSelectTheme(globalTheme),
+      spinner: getSpinnerTheme(globalTheme),
+      "switch": getSwitchTheme(globalTheme),
       tabs: getTabsTheme(globalTheme),
       tag: getTagTheme(globalTheme),
       textInput: getTextInputTheme(globalTheme),
@@ -14858,7 +14939,7 @@ var Divider = function Divider(_ref) {
 };
 
 var AnimatedPressable$1 = ReactNative.Animated.createAnimatedComponent(ReactNative.Pressable);
-var StyledWrapper$3 = index$2(ReactNative.View)(_objectSpread2(_objectSpread2({}, ReactNative.StyleSheet.absoluteFillObject), {}, {
+var StyledWrapper$4 = index$2(ReactNative.View)(_objectSpread2(_objectSpread2({}, ReactNative.StyleSheet.absoluteFillObject), {}, {
   flexDirection: 'column-reverse'
 }));
 var StyledBottomSheet = index$2(ReactNative.Animated.View)(function (_ref) {
@@ -14921,7 +15002,7 @@ var StyledIconWrapper$1 = index$2(ReactNative.View)(function (_ref6) {
   };
 });
 
-var Footer = function Footer(_ref) {
+var Footer$1 = function Footer(_ref) {
   var children = _ref.children,
       showDivider = _ref.showDivider;
   return /*#__PURE__*/React__default["default"].createElement(ReactNative.View, null, showDivider ? /*#__PURE__*/React__default["default"].createElement(Divider, null) : null, /*#__PURE__*/React__default["default"].createElement(StyledFooter, null, children));
@@ -15384,7 +15465,7 @@ var Header = function Header(_ref) {
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(StyledHeaderWrapper, null, typeof content === 'string' ? /*#__PURE__*/React__default["default"].createElement(StyledHeader, {
     adjacentIcon: showCloseButton
   }, /*#__PURE__*/React__default["default"].createElement(Typography.Text, {
-    fontSize: "xlarge",
+    fontSize: "large",
     fontWeight: "semi-bold"
   }, content)) : /*#__PURE__*/React__default["default"].createElement(ReactNative.View, {
     style: {
@@ -15405,6 +15486,7 @@ var BottomSheet = function BottomSheet(_ref) {
       children = _ref.children,
       onOpen = _ref.onOpen,
       onRequestClose = _ref.onRequestClose,
+      onDismiss = _ref.onDismiss,
       _ref$showCloseButton = _ref.showCloseButton,
       showCloseButton = _ref$showCloseButton === void 0 ? true : _ref$showCloseButton,
       _ref$hasBackdrop = _ref.hasBackdrop,
@@ -15440,6 +15522,7 @@ var BottomSheet = function BottomSheet(_ref) {
 
       if (endValueOfTransition === 0 && value === endValueOfTransition) {
         setVisibility(false);
+        onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
       }
     });
     return function () {
@@ -15473,7 +15556,7 @@ var BottomSheet = function BottomSheet(_ref) {
     transparent: true,
     testID: testID,
     onShow: onOpen
-  }, /*#__PURE__*/React__default["default"].createElement(StyledWrapper$3, {
+  }, /*#__PURE__*/React__default["default"].createElement(StyledWrapper$4, {
     pointerEvents: "box-none"
   }, /*#__PURE__*/React__default["default"].createElement(StyledBackdrop$2, {
     style: {
@@ -15497,7 +15580,7 @@ var BottomSheet = function BottomSheet(_ref) {
     showDivider: showDivider,
     onRequestClose: onRequestClose,
     showCloseButton: showCloseButton
-  }) : null, children, footer ? /*#__PURE__*/React__default["default"].createElement(Footer, {
+  }) : null, children, footer ? /*#__PURE__*/React__default["default"].createElement(Footer$1, {
     showDivider: showDivider
   }, footer) : null)));
 };
@@ -15546,7 +15629,7 @@ var Card = function Card(_ref) {
   }), children);
 };
 
-var StyledWrapper$2 = index$2(ReactNative.Animated.View)(function () {
+var StyledWrapper$3 = index$2(ReactNative.Animated.View)(function () {
   return {
     margin: 0,
     padding: 0,
@@ -15606,7 +15689,7 @@ var Collapse = function Collapse(_ref) {
     var height = _ref2.height;
     setContentHeight(height);
   }, [contentHeight]);
-  return /*#__PURE__*/React__default["default"].createElement(StyledWrapper$2, {
+  return /*#__PURE__*/React__default["default"].createElement(StyledWrapper$3, {
     style: [style, {
       height: collapseAnim
     }],
@@ -16201,7 +16284,7 @@ var ProgressCircle = function ProgressCircle(_ref2) {
   }, "".concat(value, "%")))));
 };
 
-var StyledWrapper$1 = index$2(ReactNative.View)(function (_ref) {
+var StyledWrapper$2 = index$2(ReactNative.View)(function (_ref) {
   var theme = _ref.theme;
   return {
     height: theme.__hd__.progress.sizes.barHeight,
@@ -16256,7 +16339,7 @@ var ProgressBar = function ProgressBar(_ref) {
     outputRange: [999, 0],
     extrapolate: 'clamp'
   });
-  return /*#__PURE__*/React__default["default"].createElement(StyledWrapper$1, _extends$3({}, nativeProps, {
+  return /*#__PURE__*/React__default["default"].createElement(StyledWrapper$2, _extends$3({}, nativeProps, {
     testID: testID,
     style: style
   }), /*#__PURE__*/React__default["default"].createElement(StyledInner, {
@@ -16419,7 +16502,7 @@ var InnerCircle = index$2(ReactNative.View)(function (_ref3) {
     backgroundColor: theme.__hd__.radio.colors.checkedCircle
   };
 });
-var Spacer = index$2(ReactNative.View)(function (_ref4) {
+var Spacer$1 = index$2(ReactNative.View)(function (_ref4) {
   var theme = _ref4.theme;
   return {
     marginTop: theme.__hd__.radio.space.groupTopMargin
@@ -16451,10 +16534,25 @@ var Radio = function Radio(_ref) {
   })));
 };
 
+function getKey$1(option, index, keyExtractor) {
+  var key = '';
+
+  if (keyExtractor !== undefined) {
+    key = keyExtractor(option, index);
+  } else if (option.key !== undefined) {
+    key = option.key;
+  } else {
+    key = index;
+  }
+
+  return key;
+}
+
 var RadioGroup = function RadioGroup(_ref) {
   var value = _ref.value,
       _onPress = _ref.onPress,
       options = _ref.options,
+      keyExtractor = _ref.keyExtractor,
       style = _ref.style,
       testID = _ref.testID;
   return /*#__PURE__*/React__default["default"].createElement(ReactNative.View, {
@@ -16462,8 +16560,8 @@ var RadioGroup = function RadioGroup(_ref) {
     testID: testID
   }, options.map(function (option, index) {
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
-      key: option.value
-    }, index !== 0 && /*#__PURE__*/React__default["default"].createElement(Spacer, null), /*#__PURE__*/React__default["default"].createElement(Radio, {
+      key: getKey$1(option, index, keyExtractor)
+    }, index !== 0 && /*#__PURE__*/React__default["default"].createElement(Spacer$1, null), /*#__PURE__*/React__default["default"].createElement(Radio, {
       text: option.text,
       checked: option.value === value,
       onPress: function onPress() {
@@ -16480,10 +16578,10 @@ var CompoundRadio = {
 var StyledHeading = index$2(ReactNative.View)(function (_ref) {
   var theme = _ref.theme;
   return {
-    paddingVertical: theme.space.small,
-    paddingHorizontal: theme.space.medium,
-    backgroundColor: theme.colors.outline,
-    marginBottom: theme.space.medium,
+    paddingVertical: theme.__hd__.sectionHeading.space.headingVerticalPadding,
+    paddingHorizontal: theme.__hd__.sectionHeading.space.headingHorizontalPadding,
+    backgroundColor: theme.__hd__.sectionHeading.colors.background,
+    marginBottom: theme.__hd__.sectionHeading.space.headingMarginBottom,
     display: 'flex',
     flexDirection: 'row',
     alignContent: 'center',
@@ -16493,10 +16591,10 @@ var StyledHeading = index$2(ReactNative.View)(function (_ref) {
 var StyledIconWrapper = index$2(ReactNative.View)(function (_ref2) {
   var theme = _ref2.theme;
   return {
-    marginRight: theme.space.small
+    marginRight: theme.__hd__.sectionHeading.space.iconMarginRight
   };
 });
-var StyledWrapper = index$2(ReactNative.View)(function () {
+var StyledWrapper$1 = index$2(ReactNative.View)(function () {
   return {
     display: 'flex',
     flexDirection: 'row'
@@ -16530,7 +16628,7 @@ var SectionHeading = function SectionHeading(_ref) {
   return /*#__PURE__*/React__default["default"].createElement(StyledHeading, {
     style: style,
     testID: testID
-  }, /*#__PURE__*/React__default["default"].createElement(StyledWrapper, null, /*#__PURE__*/React__default["default"].createElement(StyledIconWrapper, null, icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
+  }, /*#__PURE__*/React__default["default"].createElement(StyledWrapper$1, null, /*#__PURE__*/React__default["default"].createElement(StyledIconWrapper, null, icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
     icon: icon,
     size: ICON_SIZE_MAP[fontSize],
     intent: ICON_INTENT_MAP[intent]
@@ -16541,6 +16639,337 @@ var SectionHeading = function SectionHeading(_ref) {
   }, text)), rightChildren);
 };
 
+var Container = index$2(ReactNative.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'
+  };
+});
+var Label = index$2(Typography.Text)(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    position: 'absolute',
+    left: theme.__hd__.textInput.space.labelLeft,
+    top: theme.__hd__.textInput.space.labelTop,
+    backgroundColor: theme.__hd__.textInput.colors.labelBackground,
+    zIndex: 1,
+    paddingHorizontal: theme.__hd__.textInput.space.labelHorizontalPadding
+  };
+});
+var StyledTextInput = index$2(ReactNative.TextInput)(function (_ref3) {
+  var theme = _ref3.theme;
+  return {
+    flex: 1,
+    fontSize: theme.__hd__.textInput.fontSizes.text,
+    marginHorizontal: theme.__hd__.textInput.space.inputHorizontalMargin
+  };
+});
+
+var _excluded$1 = ["label", "prefix", "suffix", "style", "textStyle", "testID", "accessibilityLabelledBy"];
+
+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);
+
+  return /*#__PURE__*/React__default["default"].createElement(Container, {
+    style: style,
+    testID: testID
+  }, label && /*#__PURE__*/React__default["default"].createElement(Label, {
+    nativeID: accessibilityLabelledBy,
+    testID: "input-label",
+    fontSize: "small"
+  }, label), prefix && /*#__PURE__*/React__default["default"].createElement(Icon, {
+    testID: "input-prefix",
+    icon: prefix,
+    size: "xsmall"
+  }), /*#__PURE__*/React__default["default"].createElement(StyledTextInput, _extends$3({
+    style: textStyle,
+    testID: "text-input" // @ts-ignore
+    ,
+    accessibilityLabelledBy: accessibilityLabelledBy
+  }, nativeProps)), suffix && /*#__PURE__*/React__default["default"].createElement(Icon, {
+    testID: "input-suffix",
+    icon: suffix,
+    size: "xsmall"
+  }));
+};
+
+var OptionWrapper = index$2(ReactNative.TouchableOpacity)(function (_ref) {
+  var theme = _ref.theme,
+      themeSelected = _ref.themeSelected;
+  return {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    borderRadius: theme.__hd__.select.radii.option,
+    padding: theme.__hd__.select.space.optionPadding,
+    backgroundColor: themeSelected ? theme.__hd__.select.colors.checkedOption : theme.__hd__.select.colors.option
+  };
+});
+var OptionListWrapper = index$2(ReactNative.View)(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    padding: theme.__hd__.select.space.optionListPadding
+  };
+});
+var Spacer = index$2(ReactNative.View)(function (_ref3) {
+  var theme = _ref3.theme;
+  return {
+    marginTop: theme.__hd__.select.space.optionListSpacing
+  };
+});
+var FooterText = index$2(Typography.Text)(function (_ref4) {
+  var theme = _ref4.theme;
+  return {
+    color: theme.__hd__.select.colors.footerText
+  };
+});
+
+function Footer(_ref) {
+  var label = _ref.label,
+      onPress = _ref.onPress;
+  return /*#__PURE__*/React__default["default"].createElement(ReactNative.TouchableOpacity, {
+    onPress: onPress
+  }, /*#__PURE__*/React__default["default"].createElement(FooterText, {
+    fontSize: "large",
+    fontWeight: "semi-bold"
+  }, label));
+}
+
+function Option(_ref) {
+  var text = _ref.text,
+      selected = _ref.selected,
+      onPress = _ref.onPress;
+  return /*#__PURE__*/React__default["default"].createElement(OptionWrapper, {
+    themeSelected: selected,
+    onPress: onPress
+  }, /*#__PURE__*/React__default["default"].createElement(ReactNative.View, {
+    style: {
+      flex: 1
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(Typography.Text, {
+    fontSize: "large"
+  }, text)), selected && /*#__PURE__*/React__default["default"].createElement(Icon, {
+    icon: "checkmark",
+    size: "small"
+  }));
+}
+
+function getKey(option, index, keyExtractor) {
+  var key = '';
+
+  if (keyExtractor !== undefined) {
+    key = keyExtractor(option, index);
+  } else if (option.key !== undefined) {
+    key = option.key;
+  } else {
+    key = index;
+  }
+
+  return key;
+}
+
+function OptionList(_ref2) {
+  var value = _ref2.value,
+      options = _ref2.options,
+      _onPress = _ref2.onPress,
+      keyExtractor = _ref2.keyExtractor;
+  return /*#__PURE__*/React__default["default"].createElement(OptionListWrapper, null, options.map(function (opt, index) {
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
+      key: getKey(opt, index, keyExtractor)
+    }, index !== 0 && /*#__PURE__*/React__default["default"].createElement(Spacer, null), /*#__PURE__*/React__default["default"].createElement(Option, {
+      text: opt.text,
+      selected: value.includes(opt.value),
+      onPress: function onPress() {
+        if (value.includes(opt.value)) {
+          _onPress(value.filter(function (val) {
+            return val !== opt.value;
+          }));
+        } else {
+          _onPress([].concat(_toConsumableArray$1(value), [opt.value]));
+        }
+      }
+    }));
+  }));
+}
+
+function MultiSelect(_ref) {
+  var options = _ref.options,
+      value = _ref.value,
+      testID = _ref.testID,
+      style = _ref.style,
+      label = _ref.label,
+      footerLabel = _ref.footerLabel,
+      _onPress = _ref.onPress;
+  var theme = useTheme();
+
+  var _useState = React.useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+
+  var _useState3 = React.useState(value),
+      _useState4 = _slicedToArray(_useState3, 2),
+      selectingValue = _useState4[0],
+      setSelectingValue = _useState4[1];
+
+  var displayedValue = options.filter(function (opt) {
+    return value.includes(opt.value);
+  }).map(function (opt) {
+    return opt.text;
+  }).join(', ');
+  return /*#__PURE__*/React__default["default"].createElement(ReactNative.TouchableOpacity, {
+    onPress: function onPress() {
+      return setOpen(true);
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(TextInput, {
+    label: label,
+    value: displayedValue,
+    onPressIn: function onPressIn() {
+      return setOpen(true);
+    },
+    editable: false // when input is not editable on Android, the text color is gray
+    // hence, adding this to make the text color the same as iOS
+    ,
+    textStyle: {
+      color: theme.colors.text
+    },
+    suffix: "arrow-down",
+    multiline: true,
+    style: style,
+    testID: testID
+  }), /*#__PURE__*/React__default["default"].createElement(BottomSheet, {
+    open: open,
+    onRequestClose: function onRequestClose() {
+      return setOpen(false);
+    },
+    onDismiss: function onDismiss() {
+      return setSelectingValue(value);
+    },
+    header: label,
+    footer: /*#__PURE__*/React__default["default"].createElement(Footer, {
+      label: footerLabel,
+      onPress: function onPress() {
+        setOpen(false);
+
+        _onPress(selectingValue);
+      }
+    })
+  }, /*#__PURE__*/React__default["default"].createElement(OptionList, {
+    options: options,
+    value: selectingValue,
+    onPress: setSelectingValue
+  })));
+}
+
+var CompoundSelect = {
+  Multi: MultiSelect
+};
+
+var StyledWrapper = index$2(ReactNative.View)(function (_ref) {
+  var theme = _ref.theme,
+      themeChecked = _ref.themeChecked,
+      themeSize = _ref.themeSize;
+  return {
+    height: theme.__hd__["switch"].heights[themeSize],
+    width: theme.__hd__["switch"].widths[themeSize],
+    paddingHorizontal: theme.__hd__["switch"].spaces[themeSize],
+    borderRadius: theme.__hd__["switch"].radii.rounded,
+    backgroundColor: themeChecked ? theme.__hd__["switch"].colors.active : theme.__hd__["switch"].colors.inactive
+  };
+});
+var StyledDisabledWrapper = index$2(ReactNative.View)(function (_ref2) {
+  var theme = _ref2.theme,
+      themeSize = _ref2.themeSize;
+  return {
+    position: 'absolute',
+    height: theme.__hd__["switch"].heights[themeSize],
+    width: theme.__hd__["switch"].widths[themeSize],
+    borderRadius: theme.__hd__["switch"].radii.rounded,
+    backgroundColor: theme.__hd__["switch"].colors.thumb,
+    zIndex: 9999,
+    opacity: 0.8
+  };
+});
+var StyledThumbWrapper = index$2(ReactNative.View)(function (_ref3) {
+  var theme = _ref3.theme,
+      themeSize = _ref3.themeSize;
+  return {
+    height: theme.__hd__["switch"].heights[themeSize],
+    width: theme.__hd__["switch"].widths[themeSize],
+    borderRadius: theme.__hd__["switch"].radii.rounded,
+    display: 'flex',
+    justifyContent: 'center'
+  };
+});
+var StyledKnot = index$2(ReactNative.Animated.View)(function (_ref4) {
+  var theme = _ref4.theme,
+      themeSize = _ref4.themeSize;
+  return {
+    width: theme.__hd__["switch"].thumbSizes[themeSize],
+    height: theme.__hd__["switch"].thumbSizes[themeSize],
+    backgroundColor: theme.__hd__["switch"].colors.thumb,
+    borderRadius: theme.__hd__["switch"].radii.rounded
+  };
+});
+
+var Switch = function Switch(_ref) {
+  var _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'medium' : _ref$size,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      checked = _ref.checked,
+      onPress = _ref.onPress,
+      style = _ref.style,
+      testID = _ref.testID;
+  var theme = useTheme();
+  var offset = checked ? theme.__hd__["switch"].widths[size] - theme.__hd__["switch"].thumbSizes[size] - theme.__hd__["switch"].spaces[size] * 2 : theme.__hd__["switch"].spaces.inactive;
+
+  var _useState = React.useState(function () {
+    return new ReactNative.Animated.Value(offset);
+  }),
+      _useState2 = _slicedToArray(_useState, 1),
+      animatedOffset = _useState2[0];
+
+  React.useEffect(function () {
+    ReactNative.Animated.timing(animatedOffset, {
+      toValue: offset,
+      easing: ReactNative.Easing.inOut(ReactNative.Easing.cubic),
+      useNativeDriver: false
+    }).start();
+  }, [checked]);
+  return /*#__PURE__*/React__default["default"].createElement(ReactNative.TouchableWithoutFeedback, {
+    testID: testID,
+    onPress: onPress,
+    disabled: disabled
+  }, /*#__PURE__*/React__default["default"].createElement(StyledWrapper, {
+    themeChecked: checked,
+    themeSize: size,
+    style: style
+  }, disabled && /*#__PURE__*/React__default["default"].createElement(StyledDisabledWrapper, {
+    themeSize: size
+  }), /*#__PURE__*/React__default["default"].createElement(StyledThumbWrapper, {
+    themeSize: size
+  }, /*#__PURE__*/React__default["default"].createElement(StyledKnot, {
+    themeSize: size,
+    style: {
+      left: animatedOffset
+    }
+  }))));
+};
+
 var childrenWithOverriddenStyle = function childrenWithOverriddenStyle(children) {
   return React.Children.map(children, function (child) {
     var element = child;
@@ -17192,7 +17621,7 @@ var StyledText = index$2(ReactNative.Text)(function (_ref2) {
   };
 });
 
-var _excluded$1 = ["content", "intent", "style", "testID"];
+var _excluded = ["content", "intent", "style", "testID"];
 
 var Tag = function Tag(_ref) {
   var content = _ref.content,
@@ -17200,7 +17629,7 @@ var Tag = function Tag(_ref) {
       intent = _ref$intent === void 0 ? 'info' : _ref$intent,
       style = _ref.style,
       testID = _ref.testID,
-      nativeProps = _objectWithoutProperties$1(_ref, _excluded$1);
+      nativeProps = _objectWithoutProperties$1(_ref, _excluded);
 
   return /*#__PURE__*/React__default["default"].createElement(StyledView, _extends$3({}, nativeProps, {
     themeIntent: intent,
@@ -17211,71 +17640,6 @@ var Tag = function Tag(_ref) {
   }, content));
 };
 
-var Container = index$2(ReactNative.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'
-  };
-});
-var Label = index$2(Typography.Text)(function (_ref2) {
-  var theme = _ref2.theme;
-  return {
-    position: 'absolute',
-    left: theme.__hd__.textInput.space.labelLeft,
-    top: theme.__hd__.textInput.space.labelTop,
-    backgroundColor: theme.__hd__.textInput.colors.labelBackground,
-    zIndex: 1,
-    paddingHorizontal: theme.__hd__.textInput.space.labelHorizontalPadding
-  };
-});
-var Prefix = index$2(Icon)(function (_ref3) {
-  var theme = _ref3.theme;
-  return {
-    marginRight: theme.__hd__.textInput.space.prefixMarginRight
-  };
-});
-var StyledTextInput = index$2(ReactNative.TextInput)(function (_ref4) {
-  var theme = _ref4.theme;
-  return {
-    flex: 1,
-    fontSize: theme.__hd__.textInput.fontSizes.text
-  };
-});
-
-var _excluded = ["label", "prefix", "style", "testID", "accessibilityLabelledBy"];
-
-var TextInput = function TextInput(_ref) {
-  var label = _ref.label,
-      prefix = _ref.prefix,
-      style = _ref.style,
-      testID = _ref.testID,
-      accessibilityLabelledBy = _ref.accessibilityLabelledBy,
-      nativeProps = _objectWithoutProperties$1(_ref, _excluded);
-
-  return /*#__PURE__*/React__default["default"].createElement(Container, {
-    style: style,
-    testID: testID
-  }, label && /*#__PURE__*/React__default["default"].createElement(Label, {
-    nativeID: accessibilityLabelledBy,
-    testID: "input-label",
-    fontSize: "small"
-  }, label), prefix && /*#__PURE__*/React__default["default"].createElement(Prefix, {
-    testID: "input-prefix",
-    icon: prefix,
-    size: "xsmall"
-  }), /*#__PURE__*/React__default["default"].createElement(StyledTextInput, _extends$3({
-    testID: "text-input" // @ts-ignore
-    ,
-    accessibilityLabelledBy: accessibilityLabelledBy
-  }, nativeProps)));
-};
-
 exports.Alert = Alert;
 exports.Avatar = Avatar;
 exports.Badge = Badge$1;
@@ -17292,7 +17656,9 @@ exports.Icon = Icon;
 exports.Progress = Progress;
 exports.Radio = CompoundRadio;
 exports.SectionHeading = SectionHeading;
+exports.Select = CompoundSelect;
 exports.Spinner = Spinner;
+exports.Switch = Switch;
 exports.Tabs = index;
 exports.Tag = Tag;
 exports.TextInput = TextInput;