@hero-design/rn 7.26.0 → 7.27.0

package/.turbo/turbo-build.log

@@ -1,9 +1,9 @@
-@hero-design/rn:build: cache hit, replaying output dc1d7211cad8d3cd
-@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 33.9s
-@hero-design/rn:build: $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json
+@hero-design/rn:build: cache hit, replaying output 94178e9908210053
+@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 23.5s
+@hero-design/rn:build: $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json

package/es/index.js

@@ -2466,7 +2466,8 @@ var getTagTheme = function getTagTheme(theme) {
     danger: theme.colors.onErrorSurface,
     dangerBackground: theme.colors.errorSurface,
     archived: theme.colors.onArchivedSurface,
-    archivedBackground: theme.colors.archivedSurface
+    archivedBackground: theme.colors.archivedSurface,
+    text: theme.colors.onDefaultGlobalSurface
   };
   var fonts = {
     "default": theme.fonts.neutral.semiBold
@@ -2629,7 +2630,7 @@ var getToastTheme = function getToastTheme(theme) {
 var getToolbarTheme = function getToolbarTheme(theme) {
   var colors = {
     background: theme.colors.defaultGlobalSurface,
-    border: theme.colors.primaryOutline,
+    border: theme.colors.secondaryOutline,
     primary: theme.colors.primary,
     secondary: theme.colors.secondary,
     info: theme.colors.info,
@@ -5630,6 +5631,20 @@ var usePrevious = function usePrevious(value) {
   }, [value]);
   return ref.current;
 };
+function usePropsOrInternalState(initialState, state, setState) {
+  var _React$useState = React.useState(initialState),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    internalState = _React$useState2[0],
+    setInternalState = _React$useState2[1];
+  return [state || internalState, setState || setInternalState];
+}
+var useDeprecation = function useDeprecation(message) {
+  var cond = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  useEffect(function () {
+    // eslint-disable-next-line no-console
+    console.warn(message);
+  }, [message, cond]);
+};
 
 var Collapse = function Collapse(_ref) {
   var _ref$open = _ref.open,
@@ -6301,14 +6316,6 @@ var AccordionItem = function AccordionItem(_ref) {
   }, content));
 };
 
-function usePropsOrInternalState(initialState, state, setState) {
-  var _React$useState = React.useState(initialState),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    internalState = _React$useState2[0],
-    setInternalState = _React$useState2[1];
-  return [state || internalState, setState || setInternalState];
-}
-
 var _excluded$h = ["key"];
 var Accordion = function Accordion(_ref) {
   var items = _ref.items,
@@ -10505,11 +10512,12 @@ var LeftDataCard = index$a(View)(function (_ref2) {
 
 var _excluded$8 = ["variant", "intent", "children"];
 var Card = function Card(_ref) {
-  var _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? 'basic' : _ref$variant,
+  var _variant = _ref.variant,
     intent = _ref.intent,
     children = _ref.children,
     nativeProps = _objectWithoutProperties(_ref, _excluded$8);
+  var variant = _variant === undefined ? 'basic' : _variant;
+  useDeprecation("Card's variant prop is deprecated and will be removed in the next major release.\nPlease remove it or use Card.Data instead.", _variant !== undefined);
   return /*#__PURE__*/React.createElement(StyledCard, _extends$1({}, nativeProps, {
     themeVariant: variant,
     themeIntent: intent
@@ -13008,6 +13016,7 @@ function MultiSelect(_ref) {
     inputProps = _ref.inputProps,
     onConfirm = _ref.onConfirm,
     onDimiss = _ref.onDimiss,
+    onDismiss = _ref.onDismiss,
     onEndReached = _ref.onEndReached,
     onQueryChange = _ref.onQueryChange,
     options = _ref.options,
@@ -13019,6 +13028,7 @@ function MultiSelect(_ref) {
     editable = _ref$editable === void 0 ? true : _ref$editable,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    required = _ref.required,
     numberOfLines = _ref.numberOfLines,
     style = _ref.style,
     testID = _ref.testID,
@@ -13053,7 +13063,9 @@ function MultiSelect(_ref) {
     }
   }, /*#__PURE__*/React.createElement(View, {
     pointerEvents: "none"
-  }, /*#__PURE__*/React.createElement(TextInput, _extends$1({}, inputProps, {
+  }, /*#__PURE__*/React.createElement(TextInput, _extends$1({
+    numberOfLines: numberOfLines
+  }, inputProps, {
     label: label,
     value: displayedValue,
     suffix: "arrow-down",
@@ -13061,7 +13073,7 @@ function MultiSelect(_ref) {
     error: error,
     editable: editable,
     disabled: disabled,
-    numberOfLines: numberOfLines,
+    required: required,
     pointerEvents: "none",
     style: style,
     testID: testID,
@@ -13073,7 +13085,7 @@ function MultiSelect(_ref) {
     onRequestClose: function onRequestClose() {
       return setOpen(false);
     },
-    onDismiss: onDimiss,
+    onDismiss: onDismiss || onDimiss,
     header: label,
     style: {
       paddingBottom: isKeyboardVisible ? keyboardHeight : 0
@@ -13186,6 +13198,7 @@ var SingleSelect = function SingleSelect(_ref) {
     inputProps = _ref.inputProps,
     onConfirm = _ref.onConfirm,
     onDimiss = _ref.onDimiss,
+    onDismiss = _ref.onDismiss,
     onEndReached = _ref.onEndReached,
     onQueryChange = _ref.onQueryChange,
     options = _ref.options,
@@ -13197,6 +13210,7 @@ var SingleSelect = function SingleSelect(_ref) {
     editable = _ref$editable === void 0 ? true : _ref$editable,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    required = _ref.required,
     numberOfLines = _ref.numberOfLines,
     style = _ref.style,
     testID = _ref.testID,
@@ -13222,7 +13236,9 @@ var SingleSelect = function SingleSelect(_ref) {
     }
   }, /*#__PURE__*/React.createElement(View, {
     pointerEvents: "none"
-  }, /*#__PURE__*/React.createElement(TextInput, _extends$1({}, inputProps, {
+  }, /*#__PURE__*/React.createElement(TextInput, _extends$1({
+    numberOfLines: numberOfLines
+  }, inputProps, {
     label: label,
     value: displayedValue,
     suffix: "arrow-down",
@@ -13230,7 +13246,7 @@ var SingleSelect = function SingleSelect(_ref) {
     error: error,
     editable: editable,
     disabled: disabled,
-    numberOfLines: numberOfLines,
+    required: required,
     pointerEvents: "none",
     style: style,
     testID: testID,
@@ -13242,7 +13258,7 @@ var SingleSelect = function SingleSelect(_ref) {
     onRequestClose: function onRequestClose() {
       return setOpen(false);
     },
-    onDismiss: onDimiss,
+    onDismiss: onDismiss || onDimiss,
     header: label,
     style: {
       paddingBottom: isKeyboardVisible ? keyboardHeight : 0
@@ -13652,6 +13668,8 @@ var ScrollableTab = function ScrollableTab(_ref2) {
     lazy = _ref2$lazy === void 0 ? false : _ref2$lazy,
     _ref2$lazyPreloadDist = _ref2.lazyPreloadDistance,
     lazyPreloadDistance = _ref2$lazyPreloadDist === void 0 ? 1 : _ref2$lazyPreloadDist,
+    _ref2$swipeEnabled = _ref2.swipeEnabled,
+    swipeEnabled = _ref2$swipeEnabled === void 0 ? true : _ref2$swipeEnabled,
     componentTestID = _ref2.testID;
   var flatListRef = React.useRef(null);
   var pagerViewRef = React.useRef(null);
@@ -13764,7 +13782,8 @@ var ScrollableTab = function ScrollableTab(_ref2) {
       if (selectedItem) {
         onTabPress(selectedItem.key);
       }
-    }
+    },
+    scrollEnabled: swipeEnabled
   }, tabs.map(function (tab, index) {
     var key = tab.key,
       component = tab.component,
@@ -13809,6 +13828,8 @@ var Tabs = function Tabs(_ref2) {
     lazy = _ref2$lazy === void 0 ? false : _ref2$lazy,
     _ref2$lazyPreloadDist = _ref2.lazyPreloadDistance,
     lazyPreloadDistance = _ref2$lazyPreloadDist === void 0 ? 1 : _ref2$lazyPreloadDist,
+    _ref2$swipeEnabled = _ref2.swipeEnabled,
+    swipeEnabled = _ref2$swipeEnabled === void 0 ? true : _ref2$swipeEnabled,
     componentTestID = _ref2.testID;
   var theme = useTheme$1();
   var insets = useSafeAreaInsets();
@@ -13889,7 +13910,8 @@ var Tabs = function Tabs(_ref2) {
       }
     }], {
       useNativeDriver: true
-    })
+    }),
+    scrollEnabled: swipeEnabled
   }, tabs.map(function (tab, index) {
     var key = tab.key,
       component = tab.component,
@@ -13910,34 +13932,57 @@ var index$2 = Object.assign(Tabs, {
   Scroll: ScrollableTab
 });
 
+var getFilledStyles = function getFilledStyles(themeIntent, theme) {
+  return {
+    textColor: theme.__hd__.tag.colors.text,
+    borderColor: theme.__hd__.tag.colors["".concat(themeIntent, "Background")],
+    backgroundColor: theme.__hd__.tag.colors["".concat(themeIntent, "Background")]
+  };
+};
+var getOutlinedStyles = function getOutlinedStyles(themeIntent, theme) {
+  return {
+    textColor: theme.__hd__.tag.colors[themeIntent],
+    borderColor: theme.__hd__.tag.colors[themeIntent],
+    backgroundColor: theme.__hd__.tag.colors["".concat(themeIntent, "Background")]
+  };
+};
 var StyledView = index$a(View)(function (_ref) {
   var themeIntent = _ref.themeIntent,
+    themeVariant = _ref.themeVariant,
     theme = _ref.theme;
+  var _ref2 = themeVariant === 'filled' ? getFilledStyles(themeIntent, theme) : getOutlinedStyles(themeIntent, theme),
+    borderColor = _ref2.borderColor,
+    backgroundColor = _ref2.backgroundColor;
   return {
     borderWidth: theme.__hd__.tag.borderWidths["default"],
     borderRadius: theme.__hd__.tag.radii["default"],
     paddingVertical: theme.__hd__.tag.space.verticalPadding,
     paddingHorizontal: theme.__hd__.tag.space.horizontalPadding,
-    borderColor: theme.__hd__.tag.colors[themeIntent],
-    backgroundColor: theme.__hd__.tag.colors["".concat(themeIntent, "Background")]
+    borderColor: borderColor,
+    backgroundColor: backgroundColor
   };
 });
-var StyledText = index$a(Text$1)(function (_ref2) {
-  var themeIntent = _ref2.themeIntent,
-    theme = _ref2.theme;
+var StyledText = index$a(Text$1)(function (_ref3) {
+  var themeIntent = _ref3.themeIntent,
+    themeVariant = _ref3.themeVariant,
+    theme = _ref3.theme;
+  var _ref4 = themeVariant === 'filled' ? getFilledStyles(themeIntent, theme) : getOutlinedStyles(themeIntent, theme),
+    textColor = _ref4.textColor;
   return {
     fontFamily: theme.__hd__.tag.fonts["default"],
     fontSize: theme.__hd__.tag.fontSizes["default"],
-    color: theme.__hd__.tag.colors[themeIntent],
+    color: textColor,
     includeFontPadding: false,
     textAlignVertical: 'center',
     textAlign: 'center'
   };
 });
 
-var _excluded = ["content", "intent", "style", "testID"];
+var _excluded = ["content", "variant", "intent", "style", "testID"];
 var Tag = function Tag(_ref) {
   var content = _ref.content,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'outlined' : _ref$variant,
     _ref$intent = _ref.intent,
     intent = _ref$intent === void 0 ? 'primary' : _ref$intent,
     style = _ref.style,
@@ -13945,11 +13990,13 @@ var Tag = function Tag(_ref) {
     nativeProps = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement(StyledView, _extends$1({}, nativeProps, {
     themeIntent: intent,
+    themeVariant: variant,
     style: style,
     testID: testID
-  }), /*#__PURE__*/React.createElement(StyledText, {
-    themeIntent: intent
-  }, content));
+  }), typeof content === 'string' ? /*#__PURE__*/React.createElement(StyledText, {
+    themeIntent: intent,
+    themeVariant: variant
+  }, content) : content);
 };
 
 var TimePickerAndroid = function TimePickerAndroid(_ref) {

package/lib/index.js

@@ -2495,7 +2495,8 @@ var getTagTheme = function getTagTheme(theme) {
     danger: theme.colors.onErrorSurface,
     dangerBackground: theme.colors.errorSurface,
     archived: theme.colors.onArchivedSurface,
-    archivedBackground: theme.colors.archivedSurface
+    archivedBackground: theme.colors.archivedSurface,
+    text: theme.colors.onDefaultGlobalSurface
   };
   var fonts = {
     "default": theme.fonts.neutral.semiBold
@@ -2658,7 +2659,7 @@ var getToastTheme = function getToastTheme(theme) {
 var getToolbarTheme = function getToolbarTheme(theme) {
   var colors = {
     background: theme.colors.defaultGlobalSurface,
-    border: theme.colors.primaryOutline,
+    border: theme.colors.secondaryOutline,
     primary: theme.colors.primary,
     secondary: theme.colors.secondary,
     info: theme.colors.info,
@@ -5659,6 +5660,20 @@ var usePrevious = function usePrevious(value) {
   }, [value]);
   return ref.current;
 };
+function usePropsOrInternalState(initialState, state, setState) {
+  var _React$useState = React__default["default"].useState(initialState),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    internalState = _React$useState2[0],
+    setInternalState = _React$useState2[1];
+  return [state || internalState, setState || setInternalState];
+}
+var useDeprecation = function useDeprecation(message) {
+  var cond = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  React.useEffect(function () {
+    // eslint-disable-next-line no-console
+    console.warn(message);
+  }, [message, cond]);
+};
 
 var Collapse = function Collapse(_ref) {
   var _ref$open = _ref.open,
@@ -6330,14 +6345,6 @@ var AccordionItem = function AccordionItem(_ref) {
   }, content));
 };
 
-function usePropsOrInternalState(initialState, state, setState) {
-  var _React$useState = React__default["default"].useState(initialState),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    internalState = _React$useState2[0],
-    setInternalState = _React$useState2[1];
-  return [state || internalState, setState || setInternalState];
-}
-
 var _excluded$h = ["key"];
 var Accordion = function Accordion(_ref) {
   var items = _ref.items,
@@ -10534,11 +10541,12 @@ var LeftDataCard = index$a(reactNative.View)(function (_ref2) {
 
 var _excluded$8 = ["variant", "intent", "children"];
 var Card = function Card(_ref) {
-  var _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? 'basic' : _ref$variant,
+  var _variant = _ref.variant,
     intent = _ref.intent,
     children = _ref.children,
     nativeProps = _objectWithoutProperties(_ref, _excluded$8);
+  var variant = _variant === undefined ? 'basic' : _variant;
+  useDeprecation("Card's variant prop is deprecated and will be removed in the next major release.\nPlease remove it or use Card.Data instead.", _variant !== undefined);
   return /*#__PURE__*/React__default["default"].createElement(StyledCard, _extends$1({}, nativeProps, {
     themeVariant: variant,
     themeIntent: intent
@@ -13037,6 +13045,7 @@ function MultiSelect(_ref) {
     inputProps = _ref.inputProps,
     onConfirm = _ref.onConfirm,
     onDimiss = _ref.onDimiss,
+    onDismiss = _ref.onDismiss,
     onEndReached = _ref.onEndReached,
     onQueryChange = _ref.onQueryChange,
     options = _ref.options,
@@ -13048,6 +13057,7 @@ function MultiSelect(_ref) {
     editable = _ref$editable === void 0 ? true : _ref$editable,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    required = _ref.required,
     numberOfLines = _ref.numberOfLines,
     style = _ref.style,
     testID = _ref.testID,
@@ -13082,7 +13092,9 @@ function MultiSelect(_ref) {
     }
   }, /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
     pointerEvents: "none"
-  }, /*#__PURE__*/React__default["default"].createElement(TextInput, _extends$1({}, inputProps, {
+  }, /*#__PURE__*/React__default["default"].createElement(TextInput, _extends$1({
+    numberOfLines: numberOfLines
+  }, inputProps, {
     label: label,
     value: displayedValue,
     suffix: "arrow-down",
@@ -13090,7 +13102,7 @@ function MultiSelect(_ref) {
     error: error,
     editable: editable,
     disabled: disabled,
-    numberOfLines: numberOfLines,
+    required: required,
     pointerEvents: "none",
     style: style,
     testID: testID,
@@ -13102,7 +13114,7 @@ function MultiSelect(_ref) {
     onRequestClose: function onRequestClose() {
       return setOpen(false);
     },
-    onDismiss: onDimiss,
+    onDismiss: onDismiss || onDimiss,
     header: label,
     style: {
       paddingBottom: isKeyboardVisible ? keyboardHeight : 0
@@ -13215,6 +13227,7 @@ var SingleSelect = function SingleSelect(_ref) {
     inputProps = _ref.inputProps,
     onConfirm = _ref.onConfirm,
     onDimiss = _ref.onDimiss,
+    onDismiss = _ref.onDismiss,
     onEndReached = _ref.onEndReached,
     onQueryChange = _ref.onQueryChange,
     options = _ref.options,
@@ -13226,6 +13239,7 @@ var SingleSelect = function SingleSelect(_ref) {
     editable = _ref$editable === void 0 ? true : _ref$editable,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    required = _ref.required,
     numberOfLines = _ref.numberOfLines,
     style = _ref.style,
     testID = _ref.testID,
@@ -13251,7 +13265,9 @@ var SingleSelect = function SingleSelect(_ref) {
     }
   }, /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
     pointerEvents: "none"
-  }, /*#__PURE__*/React__default["default"].createElement(TextInput, _extends$1({}, inputProps, {
+  }, /*#__PURE__*/React__default["default"].createElement(TextInput, _extends$1({
+    numberOfLines: numberOfLines
+  }, inputProps, {
     label: label,
     value: displayedValue,
     suffix: "arrow-down",
@@ -13259,7 +13275,7 @@ var SingleSelect = function SingleSelect(_ref) {
     error: error,
     editable: editable,
     disabled: disabled,
-    numberOfLines: numberOfLines,
+    required: required,
     pointerEvents: "none",
     style: style,
     testID: testID,
@@ -13271,7 +13287,7 @@ var SingleSelect = function SingleSelect(_ref) {
     onRequestClose: function onRequestClose() {
       return setOpen(false);
     },
-    onDismiss: onDimiss,
+    onDismiss: onDismiss || onDimiss,
     header: label,
     style: {
       paddingBottom: isKeyboardVisible ? keyboardHeight : 0
@@ -13681,6 +13697,8 @@ var ScrollableTab = function ScrollableTab(_ref2) {
     lazy = _ref2$lazy === void 0 ? false : _ref2$lazy,
     _ref2$lazyPreloadDist = _ref2.lazyPreloadDistance,
     lazyPreloadDistance = _ref2$lazyPreloadDist === void 0 ? 1 : _ref2$lazyPreloadDist,
+    _ref2$swipeEnabled = _ref2.swipeEnabled,
+    swipeEnabled = _ref2$swipeEnabled === void 0 ? true : _ref2$swipeEnabled,
     componentTestID = _ref2.testID;
   var flatListRef = React__default["default"].useRef(null);
   var pagerViewRef = React__default["default"].useRef(null);
@@ -13793,7 +13811,8 @@ var ScrollableTab = function ScrollableTab(_ref2) {
       if (selectedItem) {
         onTabPress(selectedItem.key);
       }
-    }
+    },
+    scrollEnabled: swipeEnabled
   }, tabs.map(function (tab, index) {
     var key = tab.key,
       component = tab.component,
@@ -13838,6 +13857,8 @@ var Tabs = function Tabs(_ref2) {
     lazy = _ref2$lazy === void 0 ? false : _ref2$lazy,
     _ref2$lazyPreloadDist = _ref2.lazyPreloadDistance,
     lazyPreloadDistance = _ref2$lazyPreloadDist === void 0 ? 1 : _ref2$lazyPreloadDist,
+    _ref2$swipeEnabled = _ref2.swipeEnabled,
+    swipeEnabled = _ref2$swipeEnabled === void 0 ? true : _ref2$swipeEnabled,
     componentTestID = _ref2.testID;
   var theme = useTheme$1();
   var insets = reactNativeSafeAreaContext.useSafeAreaInsets();
@@ -13918,7 +13939,8 @@ var Tabs = function Tabs(_ref2) {
       }
     }], {
       useNativeDriver: true
-    })
+    }),
+    scrollEnabled: swipeEnabled
   }, tabs.map(function (tab, index) {
     var key = tab.key,
       component = tab.component,
@@ -13939,34 +13961,57 @@ var index$2 = Object.assign(Tabs, {
   Scroll: ScrollableTab
 });
 
+var getFilledStyles = function getFilledStyles(themeIntent, theme) {
+  return {
+    textColor: theme.__hd__.tag.colors.text,
+    borderColor: theme.__hd__.tag.colors["".concat(themeIntent, "Background")],
+    backgroundColor: theme.__hd__.tag.colors["".concat(themeIntent, "Background")]
+  };
+};
+var getOutlinedStyles = function getOutlinedStyles(themeIntent, theme) {
+  return {
+    textColor: theme.__hd__.tag.colors[themeIntent],
+    borderColor: theme.__hd__.tag.colors[themeIntent],
+    backgroundColor: theme.__hd__.tag.colors["".concat(themeIntent, "Background")]
+  };
+};
 var StyledView = index$a(reactNative.View)(function (_ref) {
   var themeIntent = _ref.themeIntent,
+    themeVariant = _ref.themeVariant,
     theme = _ref.theme;
+  var _ref2 = themeVariant === 'filled' ? getFilledStyles(themeIntent, theme) : getOutlinedStyles(themeIntent, theme),
+    borderColor = _ref2.borderColor,
+    backgroundColor = _ref2.backgroundColor;
   return {
     borderWidth: theme.__hd__.tag.borderWidths["default"],
     borderRadius: theme.__hd__.tag.radii["default"],
     paddingVertical: theme.__hd__.tag.space.verticalPadding,
     paddingHorizontal: theme.__hd__.tag.space.horizontalPadding,
-    borderColor: theme.__hd__.tag.colors[themeIntent],
-    backgroundColor: theme.__hd__.tag.colors["".concat(themeIntent, "Background")]
+    borderColor: borderColor,
+    backgroundColor: backgroundColor
   };
 });
-var StyledText = index$a(reactNative.Text)(function (_ref2) {
-  var themeIntent = _ref2.themeIntent,
-    theme = _ref2.theme;
+var StyledText = index$a(reactNative.Text)(function (_ref3) {
+  var themeIntent = _ref3.themeIntent,
+    themeVariant = _ref3.themeVariant,
+    theme = _ref3.theme;
+  var _ref4 = themeVariant === 'filled' ? getFilledStyles(themeIntent, theme) : getOutlinedStyles(themeIntent, theme),
+    textColor = _ref4.textColor;
   return {
     fontFamily: theme.__hd__.tag.fonts["default"],
     fontSize: theme.__hd__.tag.fontSizes["default"],
-    color: theme.__hd__.tag.colors[themeIntent],
+    color: textColor,
     includeFontPadding: false,
     textAlignVertical: 'center',
     textAlign: 'center'
   };
 });
 
-var _excluded = ["content", "intent", "style", "testID"];
+var _excluded = ["content", "variant", "intent", "style", "testID"];
 var Tag = function Tag(_ref) {
   var content = _ref.content,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'outlined' : _ref$variant,
     _ref$intent = _ref.intent,
     intent = _ref$intent === void 0 ? 'primary' : _ref$intent,
     style = _ref.style,
@@ -13974,11 +14019,13 @@ var Tag = function Tag(_ref) {
     nativeProps = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React__default["default"].createElement(StyledView, _extends$1({}, nativeProps, {
     themeIntent: intent,
+    themeVariant: variant,
     style: style,
     testID: testID
-  }), /*#__PURE__*/React__default["default"].createElement(StyledText, {
-    themeIntent: intent
-  }, content));
+  }), typeof content === 'string' ? /*#__PURE__*/React__default["default"].createElement(StyledText, {
+    themeIntent: intent,
+    themeVariant: variant
+  }, content) : content);
 };
 
 var TimePickerAndroid = function TimePickerAndroid(_ref) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "7.26.0",
+  "version": "7.27.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -20,7 +20,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "7.26.0",
+    "@hero-design/colors": "7.27.0",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.12"
@@ -58,7 +58,7 @@
     "@types/react-native": "^0.67.7",
     "@types/react-native-vector-icons": "^6.4.10",
     "babel-plugin-inline-import": "^3.0.0",
-    "eslint-config-hd": "7.26.0",
+    "eslint-config-hd": "7.27.0",
     "jest": "^27.3.1",
     "react": "17.0.2",
     "react-native": "0.65.1",
@@ -72,7 +72,7 @@
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-flow": "^1.1.1",
     "ts-jest": "^27.0.7",
-    "prettier-config-hd": "7.26.0",
+    "prettier-config-hd": "7.27.0",
     "rn-7-23-0": "npm:@hero-design/rn@7.23.0"
   },
   "prettier": "prettier-config-hd"

package/src/components/Accordion/index.tsx

@@ -3,7 +3,7 @@ import type { Key, ReactElement } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import AccordionItem from './AccordionItem';
 import { Spacer, StyledWrapper } from './StyledAccordion';
-import { usePropsOrInternalState } from './utils';
+import { usePropsOrInternalState } from '../../utils/hooks';
 
 export interface AccordionProps<K extends Key> {
   /**

package/src/components/Card/index.tsx

@@ -3,6 +3,7 @@ import type { ReactNode } from 'react';
 import type { StyleProp, ViewStyle, ViewProps } from 'react-native';
 import DataCard from './DataCard';
 import { StyledCard, LeftDataCard } from './StyledCard';
+import { useDeprecation } from '../../utils/hooks';
 
 interface CardProps extends ViewProps {
   /**
@@ -30,16 +31,26 @@ interface CardProps extends ViewProps {
 }
 
 const Card = ({
-  variant = 'basic',
+  variant: _variant,
   intent,
   children,
   ...nativeProps
-}: CardProps): JSX.Element => (
-  <StyledCard {...nativeProps} themeVariant={variant} themeIntent={intent}>
-    {variant === 'data' && <LeftDataCard testID="data-card-indicator" />}
-    {children}
-  </StyledCard>
-);
+}: CardProps): JSX.Element => {
+  const variant: CardProps['variant'] =
+    _variant === undefined ? 'basic' : _variant;
+
+  useDeprecation(
+    "Card's variant prop is deprecated and will be removed in the next major release.\nPlease remove it or use Card.Data instead.",
+    _variant !== undefined
+  );
+
+  return (
+    <StyledCard {...nativeProps} themeVariant={variant} themeIntent={intent}>
+      {variant === 'data' && <LeftDataCard testID="data-card-indicator" />}
+      {children}
+    </StyledCard>
+  );
+};
 
 export default Object.assign(Card, {
   Data: DataCard,