@hyphen/hyphen-components 5.0.0 → 5.1.1

package/dist/hyphen-components.esm.js

@@ -3452,13 +3452,13 @@ var ToggleGroupItem = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   var appliedVariant = variant || contextVariant;
   return React__default.createElement(ToggleGroupPrimitive.Item, _extends({
     ref: ref,
-    className: classNames(styles$b.item, appliedVariant === 'outline' && styles$b.outline, className),
+    className: classNames('br-sm display-flex g-sm p-sm', styles$b.item, appliedVariant === 'outline' && styles$b.outline, className),
     value: value
   }, props), children);
 });
 ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
 
-var _excluded$9 = ["field", "form", "options"];
+var _excluded$9 = ["field", "form", "options", "helpText", "label", "children"];
 var FormikToggleGroup = function FormikToggleGroup(_ref) {
   var _ref$field = _ref.field,
     name = _ref$field.name,
@@ -3469,9 +3469,15 @@ var FormikToggleGroup = function FormikToggleGroup(_ref) {
     errors = _ref$form.errors,
     setFieldValue = _ref$form.setFieldValue,
     options = _ref.options,
+    helpText = _ref.helpText,
+    label = _ref.label,
+    children = _ref.children,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
-  console.log(getIn(touched, name), getIn(errors, name));
-  return React__default.createElement(ToggleGroup, _extends({}, props, {
+  return React__default.createElement(Box, {
+    gap: "sm"
+  }, (label || helpText) && React__default.createElement("div", null, label && React__default.createElement(Box, {
+    fontSize: "sm"
+  }, label), helpText && React__default.createElement(HelpText, null, helpText)), React__default.createElement(ToggleGroup, _extends({}, props, {
     name: name,
     onBlur: onBlur,
     onValueChange: function onValueChange(value) {
@@ -3480,13 +3486,14 @@ var FormikToggleGroup = function FormikToggleGroup(_ref) {
     value: value,
     error: getIn(touched, name) && getIn(errors, name),
     type: "single"
-  }), options.map(function (option) {
+  }), children ? children : options.map(function (option) {
     return React__default.createElement(ToggleGroupItem, {
+      id: option.id,
       value: option.value,
       key: option.id,
       disabled: !!option.disabled
     }, option.label);
-  }));
+  })));
 };
 
 var _excluded$8 = ["children", "padding", "direction", "alignItems", "justifyContent", "gap", "style"];
@@ -5323,7 +5330,7 @@ var Toggle = /*#__PURE__*/forwardRef(function (_ref, ref) {
     props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
   return React__default.createElement(TogglePrimitive.Root, _extends({
     ref: ref,
-    className: classNames(styles$1.item, variant === 'outline' && styles$1.outline, className)
+    className: classNames('br-sm display-flex g-sm p-sm', styles$1.item, variant === 'outline' && styles$1.outline, className)
   }, props), children);
 });