@hyphen/hyphen-components 4.7.0 → 4.7.1

package/dist/components/Badge/Badge.d.ts

@@ -1,4 +1,4 @@
-import { FC, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { FontSize, BaseSpacing, ResponsiveProp } from '../../types';
 export type BadgeSize = 'sm' | 'md' | 'lg';
 export type BadgeVariant = 'light-grey' | 'dark-grey' | 'inverse' | 'green' | 'yellow' | 'blue' | 'red' | 'purple' | 'hyphen';
@@ -28,4 +28,4 @@ export interface BadgeProps {
      */
     [x: string]: any;
 }
-export declare const Badge: FC<BadgeProps>;
+export declare const Badge: React.ForwardRefExoticComponent<Omit<BadgeProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Tooltip/Tooltip.stories.d.ts

@@ -5,3 +5,4 @@ declare const meta: Meta<typeof Tooltip>;
 export default meta;
 export declare const BasicUsage: () => React.JSX.Element;
 export declare const WithPortal: () => React.JSX.Element;
+export declare const BadgeTooltip: () => React.JSX.Element;

package/dist/hyphen-components.cjs.development.js

@@ -638,7 +638,7 @@ var Alert = function Alert(_ref) {
 var styles$v = {"badge":"Badge-module_badge__ZbEBU","size-sm":"Badge-module_size-sm__rL8a6","size-md":"Badge-module_size-md__kf6IH","size-lg":"Badge-module_size-lg__of6XJ","inverse":"Badge-module_inverse__qZCFA","purple":"Badge-module_purple__rX-xW","green":"Badge-module_green__W03uU","red":"Badge-module_red__fl2jg","blue":"Badge-module_blue__C7kyV","yellow":"Badge-module_yellow__gGZ6R","light-grey":"Badge-module_light-grey__Wtrhx","dark-grey":"Badge-module_dark-grey__X-807","hyphen":"Badge-module_hyphen__9pe7x","size-sm-tablet":"Badge-module_size-sm-tablet__6xMVk","size-md-tablet":"Badge-module_size-md-tablet__4w-7I","size-lg-tablet":"Badge-module_size-lg-tablet__8xyRF","size-sm-desktop":"Badge-module_size-sm-desktop__Ayf5L","size-md-desktop":"Badge-module_size-md-desktop__XSq7m","size-lg-desktop":"Badge-module_size-lg-desktop__Baw3S","size-sm-hd":"Badge-module_size-sm-hd__Da6Au","size-md-hd":"Badge-module_size-md-hd__-VNMk","size-lg-hd":"Badge-module_size-lg-hd__6MOwL"};
 
 var _excluded$K = ["className", "message", "variant", "size"];
-var Badge = function Badge(_ref) {
+var Badge = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _classNames;
   var _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
@@ -654,10 +654,11 @@ var Badge = function Badge(_ref) {
   });
   var badgeClasses = classNames(styles$v.badge, className, responsiveClasses, (_classNames = {}, _classNames[styles$v[variant]] = variant, _classNames));
   return React.createElement(Box, _extends({
+    ref: ref,
     className: badgeClasses,
     display: "inline-block"
   }, restProps), message);
-};
+});
 
 var styles$u = {"spinner":"Spinner-module_spinner__SZoUP","spin":"Spinner-module_spin__Yk0wm"};
 
@@ -5266,7 +5267,7 @@ var TooltipContent = /*#__PURE__*/React__namespace.forwardRef(function (_ref, re
   return React__namespace.createElement(TooltipPrimitive__namespace.Content, _extends({
     ref: ref,
     sideOffset: sideOffset,
-    className: classNames('background-color-tooltip font-color-tooltip font-size-xs overflow-hidden br-sm p-h-sm p-v-xs shadow-sm ', className)
+    className: classNames('background-color-tooltip font-color-tooltip font-size-xs z-index-popover overflow-hidden br-sm p-h-sm p-v-xs shadow-sm', className)
   }, props));
 });
 TooltipContent.displayName = TooltipPrimitive__namespace.Content.displayName;