@sproutsocial/racine 22.5.1 → 23.0.0

package/lib/Drawer/Drawer.js

@@ -1,28 +1,52 @@
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var _excluded = ["title", "id", "children", "render"],
   _excluded2 = ["children"],
-  _excluded3 = ["id", "style", "offset", "direction", "children", "disableCloseOnClickOutside", "onClose", "zIndex", "closeTargets", "width", "focusLockExemptCheck"],
+  _excluded3 = ["id", "offset", "direction", "children", "disableCloseOnClickOutside", "onClose", "zIndex", "closeTargets", "width", "focusLockExemptCheck", "isOpen"],
   _excluded4 = ["children", "closeButtonLabel", "direction", "disableCloseOnClickOutside", "id", "isOpen", "offset", "onClose", "zIndex", "closeTargets", "width"];
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import * as React from "react";
 import { useContext, useEffect, useRef } from "react";
 import FocusLock from "react-focus-lock";
-import { animated } from "react-spring";
+import { animated, useTransition } from "@react-spring/web";
+import { MOTION_DURATION_MEDIUM } from "@sproutsocial/seeds-motion/dist/seeds-motion-unitless";
 import Box from "../Box";
 import Button from "../Button";
 import Icon from "../Icon";
 // eslint-disable-next-line import/no-deprecated
 import Text from "../Text";
 import Portal from "../Portal";
-import { SlideTransition } from "./SlideTransition";
 import Container, { Content } from "./styles";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var useSlideTransition = function useSlideTransition(_ref) {
+  var isVisible = _ref.isVisible,
+    width = _ref.width,
+    direction = _ref.direction;
+  var offset = width * (direction === "left" ? -1 : 1);
+  return useTransition(isVisible, {
+    from: {
+      opacity: 0,
+      x: offset
+    },
+    enter: {
+      opacity: 1,
+      x: 0
+    },
+    leave: {
+      opacity: 0,
+      x: offset
+    },
+    config: {
+      duration: MOTION_DURATION_MEDIUM * 1000
+    }
+  });
+};
 var AnimatedDrawer = animated(Container);
 var doesRefContainEventTarget = function doesRefContainEventTarget(ref, event) {
   return ref.current && event.target instanceof Node && ref.current.contains(event.target);
@@ -39,65 +63,65 @@ var DrawerCloseButton = function DrawerCloseButton(props) {
       closeButtonLabel: closeButtonLabel
     })) !== null && _props$render !== void 0 ? _props$render : null;
   }
-  return /*#__PURE__*/React.createElement(Button, _extends({
+  return /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
     appearance: "pill",
     "aria-label": closeButtonLabel,
     onClick: onClose
-  }, props), props.children || /*#__PURE__*/React.createElement(Icon, {
-    "aria-hidden": true,
-    name: "x-outline"
+  }, props), {}, {
+    children: props.children || /*#__PURE__*/_jsx(Icon, {
+      "aria-hidden": true,
+      name: "x-outline"
+    })
   }));
 };
-var DrawerHeader = function DrawerHeader(_ref) {
-  var _ref$title = _ref.title,
-    title = _ref$title === void 0 ? "" : _ref$title,
-    _ref$id = _ref.id,
-    id = _ref$id === void 0 ? undefined : _ref$id,
-    children = _ref.children,
-    render = _ref.render,
-    rest = _objectWithoutProperties(_ref, _excluded);
+var DrawerHeader = function DrawerHeader(_ref2) {
+  var _ref2$title = _ref2.title,
+    title = _ref2$title === void 0 ? "" : _ref2$title,
+    _ref2$id = _ref2.id,
+    id = _ref2$id === void 0 ? undefined : _ref2$id,
+    children = _ref2.children,
+    render = _ref2.render,
+    rest = _objectWithoutProperties(_ref2, _excluded);
   var drawerContext = useContext(DrawerContext);
   if (render) {
     return render(drawerContext);
   }
-  return /*#__PURE__*/React.createElement(Box, _extends({
+  return /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread({
     display: "flex",
     flex: "0 0 auto",
     justifyContent: "space-between",
     alignItems: "center",
     pt: 400,
     px: 450
-  }, rest), children || /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
-    as: "h2",
-    fontSize: 400,
-    fontWeight: "semibold",
-    color: "text.headline",
-    id: id
-  }, title), /*#__PURE__*/React.createElement(DrawerCloseButton, null)));
+  }, rest), {}, {
+    children: children || /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [/*#__PURE__*/_jsx(Text, {
+        as: "h2",
+        fontSize: 400,
+        fontWeight: "semibold",
+        color: "text.headline",
+        id: id,
+        children: title
+      }), /*#__PURE__*/_jsx(DrawerCloseButton, {})]
+    })
+  }));
 };
-var DrawerContent = function DrawerContent(_ref2) {
-  var children = _ref2.children,
-    rest = _objectWithoutProperties(_ref2, _excluded2);
-  return /*#__PURE__*/React.createElement(Content, _extends({
+var DrawerContent = function DrawerContent(_ref3) {
+  var children = _ref3.children,
+    rest = _objectWithoutProperties(_ref3, _excluded2);
+  return /*#__PURE__*/_jsx(Content, _objectSpread(_objectSpread({
     height: "100%",
     p: 450,
     color: "text.body"
-  }, rest), children);
+  }, rest), {}, {
+    children: children
+  }));
 };
-var Drawer = function Drawer(_ref3) {
-  var id = _ref3.id,
-    style = _ref3.style,
-    offset = _ref3.offset,
-    direction = _ref3.direction,
-    children = _ref3.children,
-    disableCloseOnClickOutside = _ref3.disableCloseOnClickOutside,
-    onClose = _ref3.onClose,
-    zIndex = _ref3.zIndex,
-    closeTargets = _ref3.closeTargets,
-    width = _ref3.width,
-    focusLockExemptCheck = _ref3.focusLockExemptCheck,
-    rest = _objectWithoutProperties(_ref3, _excluded3);
-  var drawerRef = useRef(null);
+var useCloseOnBodyClick = function useCloseOnBodyClick(_ref4) {
+  var ref = _ref4.ref,
+    disableCloseOnClickOutside = _ref4.disableCloseOnClickOutside,
+    onClose = _ref4.onClose,
+    closeTargets = _ref4.closeTargets;
   useEffect(function () {
     var documentBody = document.body;
     if (!documentBody) {
@@ -109,7 +133,7 @@ var Drawer = function Drawer(_ref3) {
       }
     };
     var bodyClick = function bodyClick(event) {
-      if (!doesRefContainEventTarget(drawerRef, event) && !disableCloseOnClickOutside) {
+      if (!doesRefContainEventTarget(ref, event) && !disableCloseOnClickOutside) {
         onClose();
       }
     };
@@ -145,75 +169,99 @@ var Drawer = function Drawer(_ref3) {
         });
       }
     };
-  }, [onClose, disableCloseOnClickOutside, closeTargets]);
-  return /*#__PURE__*/React.createElement(FocusLock, {
-    key: id,
+  }, [onClose, disableCloseOnClickOutside, closeTargets, ref]);
+};
+var Drawer = function Drawer(_ref5) {
+  var id = _ref5.id,
+    offset = _ref5.offset,
+    direction = _ref5.direction,
+    children = _ref5.children,
+    disableCloseOnClickOutside = _ref5.disableCloseOnClickOutside,
+    onClose = _ref5.onClose,
+    zIndex = _ref5.zIndex,
+    closeTargets = _ref5.closeTargets,
+    width = _ref5.width,
+    focusLockExemptCheck = _ref5.focusLockExemptCheck,
+    isOpen = _ref5.isOpen,
+    rest = _objectWithoutProperties(_ref5, _excluded3);
+  var ref = useRef(null);
+  useCloseOnBodyClick({
+    ref: ref,
+    disableCloseOnClickOutside: disableCloseOnClickOutside,
+    onClose: onClose,
+    closeTargets: closeTargets
+  });
+  var transition = useSlideTransition({
+    isVisible: isOpen,
+    width: width,
+    direction: direction
+  });
+  return /*#__PURE__*/_jsx(FocusLock, {
     autoFocus: true,
     returnFocus: true,
     whiteList: focusLockExemptCheck ? function (e) {
       return !focusLockExemptCheck(e);
-    } : undefined
-  }, /*#__PURE__*/React.createElement(AnimatedDrawer, _extends({
-    ref: drawerRef,
-    style: style,
-    width: width,
-    offset: offset,
-    direction: direction,
-    "data-qa-drawer": id,
-    role: "dialog"
-  }, rest), children));
+    } : undefined,
+    children: transition(function (style, isVisible) {
+      return isVisible ? /*#__PURE__*/_jsx(AnimatedDrawer, _objectSpread(_objectSpread({
+        ref: ref,
+        style: _objectSpread(_objectSpread({}, style), {}, {
+          zIndex: zIndex
+        }),
+        width: width,
+        offset: offset,
+        direction: direction,
+        "data-qa-drawer": id,
+        role: "dialog"
+      }, rest), {}, {
+        children: children
+      })) : null;
+    })
+  }, id);
 };
-var DrawerContainer = function DrawerContainer(_ref4) {
-  var children = _ref4.children,
-    closeButtonLabel = _ref4.closeButtonLabel,
-    _ref4$direction = _ref4.direction,
-    direction = _ref4$direction === void 0 ? "right" : _ref4$direction,
-    _ref4$disableCloseOnC = _ref4.disableCloseOnClickOutside,
-    disableCloseOnClickOutside = _ref4$disableCloseOnC === void 0 ? false : _ref4$disableCloseOnC,
-    id = _ref4.id,
-    isOpen = _ref4.isOpen,
-    _ref4$offset = _ref4.offset,
-    offset = _ref4$offset === void 0 ? 0 : _ref4$offset,
-    onClose = _ref4.onClose,
-    _ref4$zIndex = _ref4.zIndex,
-    zIndex = _ref4$zIndex === void 0 ? 7 : _ref4$zIndex,
-    _ref4$closeTargets = _ref4.closeTargets,
-    closeTargets = _ref4$closeTargets === void 0 ? [] : _ref4$closeTargets,
-    _ref4$width = _ref4.width,
-    width = _ref4$width === void 0 ? 600 : _ref4$width,
-    rest = _objectWithoutProperties(_ref4, _excluded4);
-  return /*#__PURE__*/React.createElement(Portal, {
-    id: id
-  }, /*#__PURE__*/React.createElement(DrawerContext.Provider, {
-    value: {
-      onClose: onClose,
-      closeButtonLabel: closeButtonLabel
-    }
-  }, /*#__PURE__*/React.createElement(SlideTransition, {
-    width: width + offset,
-    direction: direction,
-    isVisible: isOpen
-  }, function (_ref5) {
-    var isVisible = _ref5.isVisible,
-      style = _ref5.style,
-      key = _ref5.key;
-    return isVisible && /*#__PURE__*/React.createElement(Drawer, _extends({
-      key: key,
-      id: id,
-      style: _objectSpread(_objectSpread({}, style), {}, {
-        zIndex: zIndex
-      }),
-      offset: offset,
-      direction: direction,
-      disableCloseOnClickOutside: disableCloseOnClickOutside,
-      onClose: onClose,
-      zIndex: zIndex,
-      closeTargets: closeTargets,
-      width: width,
-      "data-qa-drawer": id || "",
-      "data-qa-drawer-isopen": isOpen === true
-    }, rest), children);
-  })));
+var DrawerContainer = function DrawerContainer(_ref6) {
+  var children = _ref6.children,
+    closeButtonLabel = _ref6.closeButtonLabel,
+    _ref6$direction = _ref6.direction,
+    direction = _ref6$direction === void 0 ? "right" : _ref6$direction,
+    _ref6$disableCloseOnC = _ref6.disableCloseOnClickOutside,
+    disableCloseOnClickOutside = _ref6$disableCloseOnC === void 0 ? false : _ref6$disableCloseOnC,
+    id = _ref6.id,
+    isOpen = _ref6.isOpen,
+    _ref6$offset = _ref6.offset,
+    offset = _ref6$offset === void 0 ? 0 : _ref6$offset,
+    onClose = _ref6.onClose,
+    _ref6$zIndex = _ref6.zIndex,
+    zIndex = _ref6$zIndex === void 0 ? 7 : _ref6$zIndex,
+    _ref6$closeTargets = _ref6.closeTargets,
+    closeTargets = _ref6$closeTargets === void 0 ? [] : _ref6$closeTargets,
+    _ref6$width = _ref6.width,
+    width = _ref6$width === void 0 ? 600 : _ref6$width,
+    rest = _objectWithoutProperties(_ref6, _excluded4);
+  return /*#__PURE__*/_jsx(Portal, {
+    id: id,
+    children: /*#__PURE__*/_jsx(DrawerContext.Provider, {
+      value: {
+        onClose: onClose,
+        closeButtonLabel: closeButtonLabel
+      },
+      children: /*#__PURE__*/_jsx(Drawer, _objectSpread(_objectSpread({
+        isOpen: isOpen,
+        id: id,
+        offset: offset,
+        direction: direction,
+        disableCloseOnClickOutside: disableCloseOnClickOutside,
+        onClose: onClose,
+        zIndex: zIndex,
+        closeTargets: closeTargets,
+        width: width,
+        "data-qa-drawer": id || "",
+        "data-qa-drawer-isopen": isOpen
+      }, rest), {}, {
+        children: children
+      }))
+    })
+  });
 };
 DrawerHeader.displayName = "Drawer.Header";
 DrawerContent.displayName = "Drawer.Content";

package/lib/EmptyState/EmptyState.js

@@ -1,11 +1,18 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var _excluded = ["media", "headline", "subtext", "primaryAction", "secondaryAction"];
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import * as React from "react";
 import Box from "../Box";
 // eslint-disable-next-line import/no-deprecated
 import Text from "../Text";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 var EmptyState = function EmptyState(_ref) {
   var media = _ref.media,
     headline = _ref.headline,
@@ -13,38 +20,46 @@ var EmptyState = function EmptyState(_ref) {
     primaryAction = _ref.primaryAction,
     secondaryAction = _ref.secondaryAction,
     rest = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(Box, _extends({
+  return /*#__PURE__*/_jsxs(Box, _objectSpread(_objectSpread({
     maxWidth: "400px",
     mx: "auto",
     "data-qa-emptystate": headline
-  }, rest), media && /*#__PURE__*/React.createElement(Box, {
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "center",
-    mb: 450
-  }, media), /*#__PURE__*/React.createElement(Text, {
-    as: "div",
-    textAlign: "center"
-  }, /*#__PURE__*/React.createElement(Text, {
-    as: "p",
-    m: 0,
-    color: "text.headline",
-    fontWeight: "semibold",
-    fontSize: 400
-  }, headline), subtext && /*#__PURE__*/React.createElement(Text, {
-    as: "p",
-    color: "text.subtext",
-    fontSize: 200,
-    mb: 0,
-    mt: 400
-  }, subtext), /*#__PURE__*/React.createElement(Box, {
-    mt: primaryAction || secondaryAction ? 450 : 0
-  }, primaryAction && /*#__PURE__*/React.cloneElement(primaryAction, {
-    appearance: "primary"
-  }), secondaryAction && /*#__PURE__*/React.createElement(Box, {
-    mt: 400
-  }, /*#__PURE__*/React.cloneElement(secondaryAction, {
-    appearance: "unstyled"
-  })))));
+  }, rest), {}, {
+    children: [media && /*#__PURE__*/_jsx(Box, {
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      mb: 450,
+      children: media
+    }), /*#__PURE__*/_jsxs(Text, {
+      as: "div",
+      textAlign: "center",
+      children: [/*#__PURE__*/_jsx(Text, {
+        as: "p",
+        m: 0,
+        color: "text.headline",
+        fontWeight: "semibold",
+        fontSize: 400,
+        children: headline
+      }), subtext && /*#__PURE__*/_jsx(Text, {
+        as: "p",
+        color: "text.subtext",
+        fontSize: 200,
+        mb: 0,
+        mt: 400,
+        children: subtext
+      }), /*#__PURE__*/_jsxs(Box, {
+        mt: primaryAction || secondaryAction ? 450 : 0,
+        children: [primaryAction && /*#__PURE__*/React.cloneElement(primaryAction, {
+          appearance: "primary"
+        }), secondaryAction && /*#__PURE__*/_jsx(Box, {
+          mt: 400,
+          children: /*#__PURE__*/React.cloneElement(secondaryAction, {
+            appearance: "unstyled"
+          })
+        })]
+      })]
+    })]
+  }));
 };
 export default EmptyState;

package/lib/Fieldset/Fieldset.js

@@ -1,7 +1,12 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var _excluded = ["layout", "label", "helperText", "children"],
   _excluded2 = ["children"],
   _excluded3 = ["children"];
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import * as React from "react";
@@ -9,6 +14,8 @@ import Box from "../Box";
 // eslint-disable-next-line import/no-deprecated
 import Text from "../Text";
 import { ChildContainer } from "./styles";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Fieldset Component
  */
@@ -19,39 +26,51 @@ var Fieldset = function Fieldset(_ref) {
     helperText = _ref.helperText,
     children = _ref.children,
     rest = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(Box, _extends({
+  return /*#__PURE__*/_jsxs(Box, _objectSpread(_objectSpread({
     as: "fieldset",
     border: "none",
     p: 0,
     "data-qa-fieldset": ""
-  }, rest), typeof label === "string" ? /*#__PURE__*/React.createElement(Fieldset.Legend, null, label) : label, typeof helperText === "string" ? /*#__PURE__*/React.createElement(Fieldset.HelperText, null, helperText) : helperText, /*#__PURE__*/React.createElement(Box, {
-    display: "flex",
-    flexDirection: layout === "vertical" ? "column" : "row"
-  }, React.Children.map(children, function (child) {
-    return /*#__PURE__*/React.createElement(ChildContainer, {
-      layout: layout
-    }, child);
-  })));
+  }, rest), {}, {
+    children: [typeof label === "string" ? /*#__PURE__*/_jsx(Fieldset.Legend, {
+      children: label
+    }) : label, typeof helperText === "string" ? /*#__PURE__*/_jsx(Fieldset.HelperText, {
+      children: helperText
+    }) : helperText, /*#__PURE__*/_jsx(Box, {
+      display: "flex",
+      flexDirection: layout === "vertical" ? "column" : "row",
+      children: React.Children.map(children, function (child) {
+        return /*#__PURE__*/_jsx(ChildContainer, {
+          layout: layout,
+          children: child
+        });
+      })
+    })]
+  }));
 };
 var FieldsetLegend = function FieldsetLegend(_ref2) {
   var children = _ref2.children,
     rest = _objectWithoutProperties(_ref2, _excluded2);
-  return /*#__PURE__*/React.createElement(Text, _extends({
+  return /*#__PURE__*/_jsx(Text, _objectSpread(_objectSpread({
     as: "legend",
     fontSize: 300,
     fontWeight: "semibold",
     color: "text.body",
     mb: 300
-  }, rest), children);
+  }, rest), {}, {
+    children: children
+  }));
 };
 var FieldsetHelperText = function FieldsetHelperText(_ref3) {
   var children = _ref3.children,
     rest = _objectWithoutProperties(_ref3, _excluded3);
-  return /*#__PURE__*/React.createElement(Text, _extends({
+  return /*#__PURE__*/_jsx(Text, _objectSpread(_objectSpread({
     as: "p",
     fontSize: 200,
     mb: 300
-  }, rest), children);
+  }, rest), {}, {
+    children: children
+  }));
 };
 FieldsetLegend.displayName = "Fieldset.Legend";
 FieldsetHelperText.displayName = "Fieldset.HelperText";

package/lib/FormField/FormField.js

@@ -1,6 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var _excluded = ["children", "error", "helperText", "id", "isInvalid", "label", "mb", "qa", "isLabelHidden", "required"];
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -20,6 +19,8 @@ import Box from "../Box";
 import Label from "../Label";
 import Text from "../Text";
 import { VisuallyHidden } from "../VisuallyHidden";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 var idCounter = 0;
 var FormField = function FormField(_ref) {
   var children = _ref.children,
@@ -42,37 +43,43 @@ var FormField = function FormField(_ref) {
   var errorId = "Error-".concat(id);
   var containerText = useTextContent("");
   var errorContainerText = useTextContent("");
-  return /*#__PURE__*/React.createElement(Box, _extends({}, rest, qa, {
+  return /*#__PURE__*/_jsxs(Box, _objectSpread(_objectSpread(_objectSpread({}, rest), qa), {}, {
     mb: mb,
     "data-qa-formfield": qa && qa["data-qa-formfield"] || id || containerText.current,
-    "data-qa-formfield-isinvalid": isInvalid === true
-  }), isLabelHidden ? /*#__PURE__*/React.createElement(VisuallyHidden, {
-    "data-testid": "visually-hidden"
-  }, /*#__PURE__*/React.createElement(Label, {
-    htmlFor: id,
-    required: required
-  }, label)) : /*#__PURE__*/React.createElement(Label, {
-    mb: helperText ? 100 : 300,
-    htmlFor: id,
-    required: required
-  }, label), helperText && /*#__PURE__*/React.createElement(Text, {
-    as: "p",
-    fontSize: 200,
-    mb: 300,
-    color: "text.subtext"
-  }, helperText), children(_objectSpread({
-    id: id,
-    isInvalid: isInvalid,
-    ariaDescribedby: errorId
-  }, required !== undefined && {
-    required: required
-  })), isInvalid && error && /*#__PURE__*/React.createElement(Text, {
-    as: "div",
-    fontSize: 200,
-    color: "text.error",
-    mt: 300,
-    id: errorId,
-    "data-qa-formfield-error": qa && qa["data-qa-formfield-error"] || errorContainerText.current
-  }, error));
+    "data-qa-formfield-isinvalid": isInvalid === true,
+    children: [isLabelHidden ? /*#__PURE__*/_jsx(VisuallyHidden, {
+      "data-testid": "visually-hidden",
+      children: /*#__PURE__*/_jsx(Label, {
+        htmlFor: id,
+        required: required,
+        children: label
+      })
+    }) : /*#__PURE__*/_jsx(Label, {
+      mb: helperText ? 100 : 300,
+      htmlFor: id,
+      required: required,
+      children: label
+    }), helperText && /*#__PURE__*/_jsx(Text, {
+      as: "p",
+      fontSize: 200,
+      mb: 300,
+      color: "text.subtext",
+      children: helperText
+    }), children(_objectSpread({
+      id: id,
+      isInvalid: isInvalid,
+      ariaDescribedby: errorId
+    }, required !== undefined && {
+      required: required
+    })), isInvalid && error && /*#__PURE__*/_jsx(Text, {
+      as: "div",
+      fontSize: 200,
+      color: "text.error",
+      mt: 300,
+      id: errorId,
+      "data-qa-formfield-error": qa && qa["data-qa-formfield-error"] || errorContainerText.current,
+      children: error
+    })]
+  }));
 };
 export default FormField;