@hero-design/rn 7.18.1 → 7.19.0

package/.turbo/turbo-build.log

@@ -1,9 +1,9 @@
-@hero-design/rn:build: cache hit, replaying output 88f4ab56713298f1
+@hero-design/rn:build: cache hit, replaying output 06ac3ee82e3be55b
 @hero-design/rn:build: $ yarn build:js && yarn build:types
 @hero-design/rn:build: $ rollup -c
 @hero-design/rn:build: 
 @hero-design/rn:build: src/index.ts → lib/index.js, es/index.js...
 @hero-design/rn:build: (!) Plugin replace: @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
 @hero-design/rn:build: (!) Plugin node-resolve: preferring built-in module 'events' over local alternative at '/root/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
-@hero-design/rn:build: created lib/index.js, es/index.js in 21.7s
+@hero-design/rn:build: created lib/index.js, es/index.js in 21.1s
 @hero-design/rn:build: $ tsc --noEmit false --emitDeclarationOnly

package/es/index.js

@@ -1761,23 +1761,26 @@ var getCardTheme = function getCardTheme(theme) {
 
 var getCheckboxTheme = function getCheckboxTheme(theme) {
   var colors = {
-    borderColor: theme.colors.primary,
-    text: theme.colors.invertedText,
-    disabled: theme.colors.inactiveBackground
+    "default": theme.colors.globalPrimary,
+    disabledBorder: theme.colors.globalPrimaryLight
   };
   var space = {
     // to remove the empty space above the check icon
     // and also to center the check mark
-    iconTop: -theme.space.xsmall
+    iconTop: -scale(3),
+    wrapperPadding: theme.space.medium,
+    iconDescriptionPadding: theme.space.smallMedium
   };
   var sizes = {
-    base: theme.space.large
+    icon: scale(20)
   };
   var radii = {
-    base: theme.radii.base
+    wrapper: theme.radii.medium,
+    icon: theme.radii.base
   };
   var borderWidths = {
-    "default": theme.borderWidths.medium
+    wrapper: theme.borderWidths.base,
+    icon: theme.borderWidths.medium
   };
   return {
     colors: colors,
@@ -2007,11 +2010,12 @@ var getListTheme = function getListTheme(theme) {
     cardShadow: theme.radii.base,
     leadingStatus: theme.radii.rounded
   };
-  var offsets = {
-    cardShadow: {
+  var shadows = {
+    cardOffset: {
       width: 0,
       height: 2
-    }
+    },
+    cardElevation: 10
   };
   var widths = {
     leadingStatus: 8
@@ -2025,9 +2029,9 @@ var getListTheme = function getListTheme(theme) {
     colors: colors,
     space: space,
     radii: radii,
-    offsets: offsets,
     widths: widths,
-    opacity: opacity
+    opacity: opacity,
+    shadows: shadows
   };
 };
 
@@ -2100,13 +2104,9 @@ var getProgressTheme = function getProgressTheme(theme) {
 
 var getRadioTheme = function getRadioTheme(theme) {
   var colors = {
-    circle: theme.colors.black,
-    checkedCircle: theme.colors.primary,
-    wrapper: theme.colors.platformBackground,
-    checkedWrapper: theme.colors.primaryBackground
+    circle: theme.colors.globalPrimary
   };
   var space = {
-    wrapperPadding: theme.space.medium,
     circleLeftMargin: theme.space.small,
     groupTopMargin: theme.space.xsmall
   };
@@ -2117,15 +2117,11 @@ var getRadioTheme = function getRadioTheme(theme) {
   var borderWidths = {
     circle: theme.borderWidths.medium
   };
-  var radii = {
-    wrapper: theme.radii.base
-  };
   return {
     sizes: sizes,
     borderWidths: borderWidths,
     space: space,
-    colors: colors,
-    radii: radii
+    colors: colors
   };
 };
 
@@ -2221,9 +2217,13 @@ var getSpinnerTheme = function getSpinnerTheme(theme) {
 
 var getSwitchTheme = function getSwitchTheme(theme) {
   var colors = {
-    thumb: theme.colors.platformBackground,
-    active: theme.colors.primary,
-    inactive: theme.colors.inactiveBackground
+    backgroundColors: {
+      checked: theme.colors.primary,
+      unchecked: theme.colors.globalPrimaryLight,
+      'disabled-checked': theme.colors.primaryLight,
+      'disabled-unchecked': theme.colors.archived
+    },
+    thumb: theme.colors.platformBackground
   };
   var thumbSizes = {
     small: theme.space.medium,
@@ -2245,17 +2245,13 @@ var getSwitchTheme = function getSwitchTheme(theme) {
   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
+    radii: radii
   };
 };
 
@@ -14563,7 +14559,7 @@ var AccordionItem = function AccordionItem(_ref) {
     fontSize: "large",
     fontWeight: "semi-bold"
   }, header) : header, /*#__PURE__*/React.createElement(Icon, {
-    icon: "arrow-".concat(open ? 'up' : 'down'),
+    icon: open ? 'arrow-up' : 'arrow-down',
     intent: "primary",
     size: "small"
   })), /*#__PURE__*/React.createElement(StyledCollapse, {
@@ -18309,7 +18305,7 @@ function convertToFP(fn, arity, a) {
 var format = convertToFP(format$1, 2);
 var formatTime = format;
 
-var Wrapper$1 = index$7(View)(function () {
+var Wrapper = index$7(View)(function () {
   return {
     flex: 1,
     flexDirection: 'row',
@@ -18336,7 +18332,7 @@ function ContentNavigator(_ref) {
       fontSize = _ref$fontSize === void 0 ? 'medium' : _ref$fontSize,
       testID = _ref.testID,
       style = _ref.style;
-  return /*#__PURE__*/React.createElement(Wrapper$1, {
+  return /*#__PURE__*/React.createElement(Wrapper, {
     testID: testID,
     style: style
   }, /*#__PURE__*/React.createElement(CompoundButton.Icon, {
@@ -18683,42 +18679,73 @@ var index$6 = Object.assign(Card, {
 
 var StyledWrapper$5 = index$7(TouchableOpacity)(function (_ref) {
   var theme = _ref.theme,
-      disabled = _ref.disabled;
+      themeWithBorder = _ref.themeWithBorder,
+      themeDisabled = _ref.themeDisabled;
+  var borderStyle = {
+    borderRadius: theme.__hd__.checkbox.radii.wrapper,
+    borderWidth: theme.__hd__.checkbox.borderWidths.wrapper,
+    padding: theme.__hd__.checkbox.space.wrapperPadding,
+    borderColor: themeDisabled ? theme.__hd__.checkbox.colors.disabledBorder : theme.__hd__.checkbox.colors["default"]
+  };
+  return _objectSpread2({
+    flexDirection: 'row'
+  }, themeWithBorder && borderStyle);
+});
+var StyledDescription$1 = index$7(Typography.Text)(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    paddingRight: theme.__hd__.checkbox.space.iconDescriptionPadding,
+    flex: 1
+  };
+});
+var StyledCheckbox = index$7(View)(function (_ref3) {
+  var theme = _ref3.theme,
+      themeDisabled = _ref3.themeDisabled;
   return {
-    display: 'flex',
     flexDirection: 'row',
     justifyContent: 'center',
-    height: theme.__hd__.checkbox.sizes.base,
-    width: theme.__hd__.checkbox.sizes.base,
-    borderRadius: theme.__hd__.checkbox.radii.base,
-    borderWidth: theme.__hd__.checkbox.borderWidths["default"],
-    borderColor: disabled ? theme.__hd__.checkbox.colors.disabled : theme.__hd__.checkbox.colors.borderColor,
+    height: theme.__hd__.checkbox.sizes.icon,
+    width: theme.__hd__.checkbox.sizes.icon,
+    borderRadius: theme.__hd__.checkbox.radii.icon,
+    borderWidth: theme.__hd__.checkbox.borderWidths.icon,
+    borderColor: themeDisabled ? theme.__hd__.checkbox.colors.disabledBorder : theme.__hd__.checkbox.colors["default"],
     overflow: 'hidden'
   };
 });
+var StyledCheckMark = index$7(Icon)(function (_ref4) {
+  var theme = _ref4.theme;
+  return {
+    position: 'absolute',
+    top: theme.__hd__.checkbox.space.iconTop
+  };
+});
 
-var CheckBox = function CheckBox(_ref) {
+var Checkbox = function Checkbox(_ref) {
   var checked = _ref.checked,
-      disabled = _ref.disabled,
+      description = _ref.description,
+      _ref$withBorder = _ref.withBorder,
+      withBorder = _ref$withBorder === void 0 ? false : _ref$withBorder,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       onPress = _ref.onPress,
       style = _ref.style,
       testID = _ref.testID;
   return /*#__PURE__*/React.createElement(StyledWrapper$5, {
     onPress: onPress,
     disabled: disabled,
+    themeDisabled: disabled,
+    themeWithBorder: withBorder,
     style: style,
     testID: testID
-  }, checked && /*#__PURE__*/React.createElement(Icon, {
-    icon: "circle-ok",
-    intent: "primary",
-    size: "large",
-    style: _objectSpread2({
-      position: 'absolute',
-      top: defaultTheme.__hd__.checkbox.space.iconTop
-    }, disabled ? {
-      color: defaultTheme.__hd__.checkbox.colors.disabled
-    } : {})
-  }));
+  }, !!description && /*#__PURE__*/React.createElement(StyledDescription$1, {
+    intent: disabled ? 'subdued' : 'body'
+  }, description), /*#__PURE__*/React.createElement(StyledCheckbox, {
+    themeDisabled: disabled
+  }, checked && /*#__PURE__*/React.createElement(StyledCheckMark, {
+    icon: "box-check",
+    intent: disabled ? 'disabled-text' : 'text',
+    testID: "check-mark"
+  })));
 };
 
 var StyledContainer$3 = index$7(View)(function (_ref) {
@@ -18869,7 +18896,7 @@ var StyledErrorAndMaxLengthContainer = index$7(View)(function () {
 });
 
 var _excluded$5 = ["label", "prefix", "suffix", "style", "textStyle", "testID", "accessibilityLabelledBy", "error", "required", "editable", "disabled", "loading", "maxLength", "helpText", "value", "defaultValue"];
-var getVariant = function getVariant(_ref) {
+var getVariant$1 = function getVariant(_ref) {
   var disabled = _ref.disabled,
       error = _ref.error,
       editable = _ref.editable,
@@ -18934,7 +18961,7 @@ var TextInput = function TextInput(_ref2) {
       isFocused = _React$useState2[0],
       setIsFocused = _React$useState2[1];
 
-  var variant = getVariant({
+  var variant = getVariant$1({
     disabled: disabled,
     error: error,
     editable: editable,
@@ -19857,8 +19884,9 @@ var StyledListItemContainer$1 = index$7(TouchableHighlight)(function (_ref) {
         borderRadius: theme.__hd__.list.radii.card,
         shadowColor: theme.colors.shadow,
         shadowRadius: theme.__hd__.list.radii.cardShadow,
-        shadowOffset: theme.__hd__.list.offsets.cardShadow,
-        shadowOpacity: theme.__hd__.list.opacity.cardShadow
+        shadowOffset: theme.__hd__.list.shadows.cardOffset,
+        shadowOpacity: theme.__hd__.list.opacity.cardShadow,
+        elevation: theme.__hd__.list.shadows.cardElevation
       });
 
     default:
@@ -20613,70 +20641,60 @@ var Spinner = function Spinner(_ref) {
   }, /*#__PURE__*/React.createElement(AnimatedSpinner, null)));
 };
 
-var Wrapper = index$7(TouchableOpacity)(function (_ref) {
-  var theme = _ref.theme,
-      themeChecked = _ref.themeChecked;
-  return {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    borderRadius: theme.__hd__.radio.radii.wrapper,
-    padding: theme.__hd__.radio.space.wrapperPadding,
-    backgroundColor: themeChecked ? theme.__hd__.radio.colors.checkedWrapper : theme.__hd__.radio.colors.wrapper
-  };
-});
-var Circle = index$7(View)(function (_ref2) {
-  var theme = _ref2.theme,
-      themeChecked = _ref2.themeChecked;
+var Circle = index$7(View)(function (_ref) {
+  var theme = _ref.theme;
   return {
     height: theme.__hd__.radio.sizes.circle,
     width: theme.__hd__.radio.sizes.circle,
     borderRadius: theme.radii.rounded,
     borderWidth: theme.__hd__.radio.borderWidths.circle,
-    borderColor: themeChecked ? theme.__hd__.radio.colors.checkedCircle : theme.__hd__.radio.colors.circle,
+    borderColor: theme.__hd__.radio.colors.circle,
     alignItems: 'center',
     justifyContent: 'center'
   };
 });
-var InnerCircle = index$7(View)(function (_ref3) {
-  var theme = _ref3.theme;
+var InnerCircle = index$7(View)(function (_ref2) {
+  var theme = _ref2.theme;
   return {
     height: theme.__hd__.radio.sizes.innerCircle,
     width: theme.__hd__.radio.sizes.innerCircle,
     borderRadius: theme.radii.rounded,
-    backgroundColor: theme.__hd__.radio.colors.checkedCircle
+    backgroundColor: theme.__hd__.radio.colors.circle
   };
 });
-var Spacer = index$7(View)(function (_ref4) {
-  var theme = _ref4.theme;
+var Spacer = index$7(View)(function (_ref3) {
+  var theme = _ref3.theme;
   return {
     marginTop: theme.__hd__.radio.space.groupTopMargin
   };
 });
 
-var Radio = function Radio(_ref) {
-  var text = _ref.text,
-      _ref$checked = _ref.checked,
-      checked = _ref$checked === void 0 ? false : _ref$checked,
-      onPress = _ref.onPress,
-      style = _ref.style,
-      testID = _ref.testID;
-  return /*#__PURE__*/React.createElement(Wrapper, {
+var RadioCircle = function RadioCircle(_ref) {
+  var checked = _ref.checked,
+      text = _ref.text;
+  return /*#__PURE__*/React.createElement(Circle, null, checked && /*#__PURE__*/React.createElement(InnerCircle, {
+    testID: "".concat(text, "-selected-circle")
+  }));
+};
+
+var Radio = function Radio(_ref2) {
+  var text = _ref2.text,
+      _ref2$checked = _ref2.checked,
+      checked = _ref2$checked === void 0 ? false : _ref2$checked,
+      onPress = _ref2.onPress,
+      style = _ref2.style,
+      testID = _ref2.testID;
+  return /*#__PURE__*/React.createElement(List.BasicItem, {
     onPress: onPress,
-    themeChecked: checked,
+    selected: checked,
+    title: text,
+    suffix: /*#__PURE__*/React.createElement(RadioCircle, {
+      checked: checked,
+      text: text
+    }),
     style: style,
     testID: testID
-  }, /*#__PURE__*/React.createElement(View, {
-    style: {
-      flex: 1
-    }
-  }, /*#__PURE__*/React.createElement(Typography.Text, {
-    fontSize: "large"
-  }, text)), /*#__PURE__*/React.createElement(Circle, {
-    themeChecked: checked
-  }, checked && /*#__PURE__*/React.createElement(InnerCircle, {
-    testID: "".concat(text, "-selected-circle")
-  })));
+  });
 };
 
 function getKey(option, index, keyExtractor) {
@@ -21067,6 +21085,8 @@ function MultiSelect(_ref) {
     onPress: function onPress() {
       return setOpen(true);
     }
+  }, /*#__PURE__*/React.createElement(View, {
+    pointerEvents: "none"
   }, /*#__PURE__*/React.createElement(TextInput, {
     label: label,
     value: displayedValue,
@@ -21080,7 +21100,7 @@ function MultiSelect(_ref) {
     pointerEvents: "none",
     style: style,
     testID: testID
-  }))), /*#__PURE__*/React.createElement(BottomSheet, {
+  })))), /*#__PURE__*/React.createElement(BottomSheet, {
     open: open,
     onRequestClose: function onRequestClose() {
       return setOpen(false);
@@ -21221,6 +21241,8 @@ var SingleSelect = function SingleSelect(_ref) {
     onPress: function onPress() {
       return setOpen(true);
     }
+  }, /*#__PURE__*/React.createElement(View, {
+    pointerEvents: "none"
   }, /*#__PURE__*/React.createElement(TextInput, {
     label: label,
     value: displayedValue,
@@ -21234,7 +21256,7 @@ var SingleSelect = function SingleSelect(_ref) {
     pointerEvents: "none",
     style: style,
     testID: testID
-  }))), /*#__PURE__*/React.createElement(BottomSheet, {
+  })))), /*#__PURE__*/React.createElement(BottomSheet, {
     open: open,
     onRequestClose: function onRequestClose() {
       return setOpen(false);
@@ -21270,43 +21292,21 @@ var index$3 = Object.assign(SingleSelect, {
 
 var StyledWrapper = index$7(View)(function (_ref) {
   var theme = _ref.theme,
-      themeChecked = _ref.themeChecked,
+      themeVariant = _ref.themeVariant,
       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$7(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$7(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,
+    backgroundColor: theme.__hd__["switch"].colors.backgroundColors[themeVariant],
     display: 'flex',
     justifyContent: 'center'
   };
 });
-var StyledKnot = index$7(Animated.View)(function (_ref4) {
-  var theme = _ref4.theme,
-      themeSize = _ref4.themeSize;
+var StyledKnot = index$7(Animated.View)(function (_ref2) {
+  var theme = _ref2.theme,
+      themeSize = _ref2.themeSize;
   return {
     width: theme.__hd__["switch"].thumbSizes[themeSize],
     height: theme.__hd__["switch"].thumbSizes[themeSize],
@@ -21315,16 +21315,32 @@ var StyledKnot = index$7(Animated.View)(function (_ref4) {
   };
 });
 
-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 getVariant = function getVariant(_ref) {
+  var disabled = _ref.disabled,
+      checked = _ref.checked;
+
+  if (disabled) {
+    return checked ? 'disabled-checked' : 'disabled-unchecked';
+  }
+
+  return checked ? 'checked' : 'unchecked';
+};
+
+var Switch = function Switch(_ref2) {
+  var _ref2$size = _ref2.size,
+      size = _ref2$size === void 0 ? 'medium' : _ref2$size,
+      _ref2$disabled = _ref2.disabled,
+      disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
+      _ref2$checked = _ref2.checked,
+      checked = _ref2$checked === void 0 ? false : _ref2$checked,
+      onPress = _ref2.onPress,
+      style = _ref2.style,
+      testID = _ref2.testID;
   var theme = useTheme$1();
+  var variant = getVariant({
+    disabled: disabled,
+    checked: checked
+  });
   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 () {
@@ -21345,19 +21361,15 @@ var Switch = function Switch(_ref) {
     onPress: onPress,
     disabled: disabled
   }, /*#__PURE__*/React.createElement(StyledWrapper, {
-    themeChecked: checked,
+    themeVariant: variant,
     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 AnimatedPagerView = Animated.createAnimatedComponent(PagerView);
@@ -40654,4 +40666,4 @@ var index = Object.assign(RichTextEditor$1, {
   Toolbar: EditorToolbar
 });
 
-export { Accordion, Alert, Avatar, Badge$1 as Badge, BottomNavigation, BottomSheet, CompoundButton as Button, Calendar, index$6 as Card, CheckBox as Checkbox, Collapse, ContentNavigator, DatePicker, Divider, index$5 as Drawer, Empty, index$4 as FAB, Icon, List, PinInput, Progress, CompoundRadio as Radio, index as RichTextEditor, SectionHeading, index$3 as Select, Spinner, Switch, index$2 as Tabs, Tag, TextInput, ThemeProvider, TimePicker, Toast, index$1 as Toolbar, Typography, getTheme$1 as getTheme, scale, swagSystemPalette, defaultTheme as theme, useTheme, workSystemPalette };
+export { Accordion, Alert, Avatar, Badge$1 as Badge, BottomNavigation, BottomSheet, CompoundButton as Button, Calendar, index$6 as Card, Checkbox, Collapse, ContentNavigator, DatePicker, Divider, index$5 as Drawer, Empty, index$4 as FAB, Icon, List, PinInput, Progress, CompoundRadio as Radio, index as RichTextEditor, SectionHeading, index$3 as Select, Spinner, Switch, index$2 as Tabs, Tag, TextInput, ThemeProvider, TimePicker, Toast, index$1 as Toolbar, Typography, getTheme$1 as getTheme, scale, swagSystemPalette, defaultTheme as theme, useTheme, workSystemPalette };