@hero-design/rn 7.5.0 → 7.6.0

package/es/index.js

@@ -1,5 +1,5 @@
 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, requireNativeComponent, UIManager, I18nManager, Keyboard, FlatList, TextInput as TextInput$1 } 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 } from 'react-native';
 import React, { useContext, createElement, createContext, forwardRef, useRef, useEffect, useState, useCallback, Children } from 'react';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
@@ -1723,7 +1723,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
@@ -2230,25 +2231,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,
@@ -2280,6 +2262,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,
@@ -2360,7 +2438,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
@@ -2429,9 +2507,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),
@@ -14831,7 +14912,7 @@ var Divider = function Divider(_ref) {
 };
 
 var AnimatedPressable$1 = Animated.createAnimatedComponent(Pressable);
-var StyledWrapper$3 = index$2(View)(_objectSpread2(_objectSpread2({}, StyleSheet$1.absoluteFillObject), {}, {
+var StyledWrapper$4 = index$2(View)(_objectSpread2(_objectSpread2({}, StyleSheet$1.absoluteFillObject), {}, {
   flexDirection: 'column-reverse'
 }));
 var StyledBottomSheet = index$2(Animated.View)(function (_ref) {
@@ -14894,7 +14975,7 @@ var StyledIconWrapper$1 = index$2(View)(function (_ref6) {
   };
 });
 
-var Footer = function Footer(_ref) {
+var Footer$1 = function Footer(_ref) {
   var children = _ref.children,
       showDivider = _ref.showDivider;
   return /*#__PURE__*/React.createElement(View, null, showDivider ? /*#__PURE__*/React.createElement(Divider, null) : null, /*#__PURE__*/React.createElement(StyledFooter, null, children));
@@ -15357,7 +15438,7 @@ var Header = function Header(_ref) {
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledHeaderWrapper, null, typeof content === 'string' ? /*#__PURE__*/React.createElement(StyledHeader, {
     adjacentIcon: showCloseButton
   }, /*#__PURE__*/React.createElement(Typography.Text, {
-    fontSize: "xlarge",
+    fontSize: "large",
     fontWeight: "semi-bold"
   }, content)) : /*#__PURE__*/React.createElement(View, {
     style: {
@@ -15378,6 +15459,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,
@@ -15413,6 +15495,7 @@ var BottomSheet = function BottomSheet(_ref) {
 
       if (endValueOfTransition === 0 && value === endValueOfTransition) {
         setVisibility(false);
+        onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
       }
     });
     return function () {
@@ -15446,7 +15529,7 @@ var BottomSheet = function BottomSheet(_ref) {
     transparent: true,
     testID: testID,
     onShow: onOpen
-  }, /*#__PURE__*/React.createElement(StyledWrapper$3, {
+  }, /*#__PURE__*/React.createElement(StyledWrapper$4, {
     pointerEvents: "box-none"
   }, /*#__PURE__*/React.createElement(StyledBackdrop$2, {
     style: {
@@ -15470,7 +15553,7 @@ var BottomSheet = function BottomSheet(_ref) {
     showDivider: showDivider,
     onRequestClose: onRequestClose,
     showCloseButton: showCloseButton
-  }) : null, children, footer ? /*#__PURE__*/React.createElement(Footer, {
+  }) : null, children, footer ? /*#__PURE__*/React.createElement(Footer$1, {
     showDivider: showDivider
   }, footer) : null)));
 };
@@ -15519,7 +15602,7 @@ var Card = function Card(_ref) {
   }), children);
 };
 
-var StyledWrapper$2 = index$2(Animated.View)(function () {
+var StyledWrapper$3 = index$2(Animated.View)(function () {
   return {
     margin: 0,
     padding: 0,
@@ -15579,7 +15662,7 @@ var Collapse = function Collapse(_ref) {
     var height = _ref2.height;
     setContentHeight(height);
   }, [contentHeight]);
-  return /*#__PURE__*/React.createElement(StyledWrapper$2, {
+  return /*#__PURE__*/React.createElement(StyledWrapper$3, {
     style: [style, {
       height: collapseAnim
     }],
@@ -16174,7 +16257,7 @@ var ProgressCircle = function ProgressCircle(_ref2) {
   }, "".concat(value, "%")))));
 };
 
-var StyledWrapper$1 = index$2(View)(function (_ref) {
+var StyledWrapper$2 = index$2(View)(function (_ref) {
   var theme = _ref.theme;
   return {
     height: theme.__hd__.progress.sizes.barHeight,
@@ -16229,7 +16312,7 @@ var ProgressBar = function ProgressBar(_ref) {
     outputRange: [999, 0],
     extrapolate: 'clamp'
   });
-  return /*#__PURE__*/React.createElement(StyledWrapper$1, _extends$3({}, nativeProps, {
+  return /*#__PURE__*/React.createElement(StyledWrapper$2, _extends$3({}, nativeProps, {
     testID: testID,
     style: style
   }), /*#__PURE__*/React.createElement(StyledInner, {
@@ -16392,7 +16475,7 @@ var InnerCircle = index$2(View)(function (_ref3) {
     backgroundColor: theme.__hd__.radio.colors.checkedCircle
   };
 });
-var Spacer = index$2(View)(function (_ref4) {
+var Spacer$1 = index$2(View)(function (_ref4) {
   var theme = _ref4.theme;
   return {
     marginTop: theme.__hd__.radio.space.groupTopMargin
@@ -16424,10 +16507,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.createElement(View, {
@@ -16435,8 +16533,8 @@ var RadioGroup = function RadioGroup(_ref) {
     testID: testID
   }, options.map(function (option, index) {
     return /*#__PURE__*/React.createElement(React.Fragment, {
-      key: option.value
-    }, index !== 0 && /*#__PURE__*/React.createElement(Spacer, null), /*#__PURE__*/React.createElement(Radio, {
+      key: getKey$1(option, index, keyExtractor)
+    }, index !== 0 && /*#__PURE__*/React.createElement(Spacer$1, null), /*#__PURE__*/React.createElement(Radio, {
       text: option.text,
       checked: option.value === value,
       onPress: function onPress() {
@@ -16453,10 +16551,10 @@ var CompoundRadio = {
 var StyledHeading = index$2(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',
@@ -16466,10 +16564,10 @@ var StyledHeading = index$2(View)(function (_ref) {
 var StyledIconWrapper = index$2(View)(function (_ref2) {
   var theme = _ref2.theme;
   return {
-    marginRight: theme.space.small
+    marginRight: theme.__hd__.sectionHeading.space.iconMarginRight
   };
 });
-var StyledWrapper = index$2(View)(function () {
+var StyledWrapper$1 = index$2(View)(function () {
   return {
     display: 'flex',
     flexDirection: 'row'
@@ -16503,7 +16601,7 @@ var SectionHeading = function SectionHeading(_ref) {
   return /*#__PURE__*/React.createElement(StyledHeading, {
     style: style,
     testID: testID
-  }, /*#__PURE__*/React.createElement(StyledWrapper, null, /*#__PURE__*/React.createElement(StyledIconWrapper, null, icon && /*#__PURE__*/React.createElement(Icon, {
+  }, /*#__PURE__*/React.createElement(StyledWrapper$1, null, /*#__PURE__*/React.createElement(StyledIconWrapper, null, icon && /*#__PURE__*/React.createElement(Icon, {
     icon: icon,
     size: ICON_SIZE_MAP[fontSize],
     intent: ICON_INTENT_MAP[intent]
@@ -16514,6 +16612,337 @@ var SectionHeading = function SectionHeading(_ref) {
   }, text)), rightChildren);
 };
 
+var Container = index$2(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(TextInput$1)(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.createElement(Container, {
+    style: style,
+    testID: testID
+  }, label && /*#__PURE__*/React.createElement(Label, {
+    nativeID: accessibilityLabelledBy,
+    testID: "input-label",
+    fontSize: "small"
+  }, label), prefix && /*#__PURE__*/React.createElement(Icon, {
+    testID: "input-prefix",
+    icon: prefix,
+    size: "xsmall"
+  }), /*#__PURE__*/React.createElement(StyledTextInput, _extends$3({
+    style: textStyle,
+    testID: "text-input" // @ts-ignore
+    ,
+    accessibilityLabelledBy: accessibilityLabelledBy
+  }, nativeProps)), suffix && /*#__PURE__*/React.createElement(Icon, {
+    testID: "input-suffix",
+    icon: suffix,
+    size: "xsmall"
+  }));
+};
+
+var OptionWrapper = index$2(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(View)(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    padding: theme.__hd__.select.space.optionListPadding
+  };
+});
+var Spacer = index$2(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.createElement(TouchableOpacity, {
+    onPress: onPress
+  }, /*#__PURE__*/React.createElement(FooterText, {
+    fontSize: "large",
+    fontWeight: "semi-bold"
+  }, label));
+}
+
+function Option(_ref) {
+  var text = _ref.text,
+      selected = _ref.selected,
+      onPress = _ref.onPress;
+  return /*#__PURE__*/React.createElement(OptionWrapper, {
+    themeSelected: selected,
+    onPress: onPress
+  }, /*#__PURE__*/React.createElement(View, {
+    style: {
+      flex: 1
+    }
+  }, /*#__PURE__*/React.createElement(Typography.Text, {
+    fontSize: "large"
+  }, text)), selected && /*#__PURE__*/React.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.createElement(OptionListWrapper, null, options.map(function (opt, index) {
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: getKey(opt, index, keyExtractor)
+    }, index !== 0 && /*#__PURE__*/React.createElement(Spacer, null), /*#__PURE__*/React.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 = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+
+  var _useState3 = 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.createElement(TouchableOpacity, {
+    onPress: function onPress() {
+      return setOpen(true);
+    }
+  }, /*#__PURE__*/React.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.createElement(BottomSheet, {
+    open: open,
+    onRequestClose: function onRequestClose() {
+      return setOpen(false);
+    },
+    onDismiss: function onDismiss() {
+      return setSelectingValue(value);
+    },
+    header: label,
+    footer: /*#__PURE__*/React.createElement(Footer, {
+      label: footerLabel,
+      onPress: function onPress() {
+        setOpen(false);
+
+        _onPress(selectingValue);
+      }
+    })
+  }, /*#__PURE__*/React.createElement(OptionList, {
+    options: options,
+    value: selectingValue,
+    onPress: setSelectingValue
+  })));
+}
+
+var CompoundSelect = {
+  Multi: MultiSelect
+};
+
+var StyledWrapper = index$2(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(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(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(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 = useState(function () {
+    return new Animated.Value(offset);
+  }),
+      _useState2 = _slicedToArray(_useState, 1),
+      animatedOffset = _useState2[0];
+
+  useEffect(function () {
+    Animated.timing(animatedOffset, {
+      toValue: offset,
+      easing: Easing.inOut(Easing.cubic),
+      useNativeDriver: false
+    }).start();
+  }, [checked]);
+  return /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
+    testID: testID,
+    onPress: onPress,
+    disabled: disabled
+  }, /*#__PURE__*/React.createElement(StyledWrapper, {
+    themeChecked: checked,
+    themeSize: size,
+    style: style
+  }, disabled && /*#__PURE__*/React.createElement(StyledDisabledWrapper, {
+    themeSize: size
+  }), /*#__PURE__*/React.createElement(StyledThumbWrapper, {
+    themeSize: size
+  }, /*#__PURE__*/React.createElement(StyledKnot, {
+    themeSize: size,
+    style: {
+      left: animatedOffset
+    }
+  }))));
+};
+
 var childrenWithOverriddenStyle = function childrenWithOverriddenStyle(children) {
   return Children.map(children, function (child) {
     var element = child;
@@ -17165,7 +17594,7 @@ var StyledText = index$2(Text$1)(function (_ref2) {
   };
 });
 
-var _excluded$1 = ["content", "intent", "style", "testID"];
+var _excluded = ["content", "intent", "style", "testID"];
 
 var Tag = function Tag(_ref) {
   var content = _ref.content,
@@ -17173,7 +17602,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.createElement(StyledView, _extends$3({}, nativeProps, {
     themeIntent: intent,
@@ -17184,69 +17613,4 @@ var Tag = function Tag(_ref) {
   }, content));
 };
 
-var Container = index$2(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(TextInput$1)(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.createElement(Container, {
-    style: style,
-    testID: testID
-  }, label && /*#__PURE__*/React.createElement(Label, {
-    nativeID: accessibilityLabelledBy,
-    testID: "input-label",
-    fontSize: "small"
-  }, label), prefix && /*#__PURE__*/React.createElement(Prefix, {
-    testID: "input-prefix",
-    icon: prefix,
-    size: "xsmall"
-  }), /*#__PURE__*/React.createElement(StyledTextInput, _extends$3({
-    testID: "text-input" // @ts-ignore
-    ,
-    accessibilityLabelledBy: accessibilityLabelledBy
-  }, nativeProps)));
-};
-
-export { Alert, Avatar, Badge$1 as Badge, BottomNavigation, BottomSheet, CompoundButton as Button, Card, Collapse, ContentNavigator, Divider, Drawer, index$1 as FAB, Icon, Progress, CompoundRadio as Radio, SectionHeading, Spinner, index as Tabs, Tag, TextInput, ThemeProvider, Typography, getTheme, scale, theme, useTheme };
+export { Alert, Avatar, Badge$1 as Badge, BottomNavigation, BottomSheet, CompoundButton as Button, Card, Collapse, ContentNavigator, Divider, Drawer, index$1 as FAB, Icon, Progress, CompoundRadio as Radio, SectionHeading, CompoundSelect as Select, Spinner, Switch, index as Tabs, Tag, TextInput, ThemeProvider, Typography, getTheme, scale, theme, useTheme };