@hyphen/hyphen-components 6.8.0 → 6.11.0

package/dist/hyphen-components.esm.js

@@ -626,7 +626,7 @@ var AspectRatio = AspectRatioPrimitive.Root;
 
 var styles$y = {"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$N = ["className", "message", "variant", "size"];
+var _excluded$N = ["className", "message", "variant", "size", "children"];
 var Badge = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _classNames;
   var _ref$className = _ref.className,
@@ -637,6 +637,7 @@ var Badge = /*#__PURE__*/forwardRef(function (_ref, ref) {
     variant = _ref$variant === void 0 ? 'light-grey' : _ref$variant,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'md' : _ref$size,
+    children = _ref.children,
     restProps = _objectWithoutPropertiesLoose(_ref, _excluded$N);
   var responsiveClasses = generateResponsiveClasses('size', size).map(function (c) {
     return styles$y[c];
@@ -645,8 +646,10 @@ var Badge = /*#__PURE__*/forwardRef(function (_ref, ref) {
   return React__default.createElement(Box, _extends({
     ref: ref,
     className: badgeClasses,
-    display: "inline-block"
-  }, restProps), message);
+    display: "inline-flex",
+    alignItems: "center",
+    direction: "row"
+  }, restProps), children || message);
 });
 
 var styles$x = {"spinner":"Spinner-module_spinner__SZoUP","spin":"Spinner-module_spin__Yk0wm"};
@@ -3628,7 +3631,7 @@ var FormikToggleGroup = function FormikToggleGroup(_ref) {
   })));
 };
 
-var _excluded$8 = ["name", "options", "helpText", "label", "children", "variant"];
+var _excluded$8 = ["name", "options", "helpText", "label", "children", "variant", "gap"];
 var FormikToggleGroupMulti = function FormikToggleGroupMulti(_ref) {
   var name = _ref.name,
     options = _ref.options,
@@ -3636,6 +3639,7 @@ var FormikToggleGroupMulti = function FormikToggleGroupMulti(_ref) {
     label = _ref.label,
     children = _ref.children,
     variant = _ref.variant,
+    gap = _ref.gap,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
   var _useField = useField(name),
     field = _useField[0],
@@ -3649,6 +3653,7 @@ var FormikToggleGroupMulti = function FormikToggleGroupMulti(_ref) {
     name: name
   }, function () {
     return React__default.createElement(ToggleGroup, _extends({}, props, {
+      gap: gap,
       name: name,
       onValueChange: function onValueChange(selectedValues) {
         helpers.setValue(selectedValues);