@algolia/satellite 1.0.0-beta.134 → 1.0.0-beta.137

package/cjs/DatePicker/components/Modal.js

@@ -15,16 +15,16 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _react = require("react");
 
-var _reactDom = require("react-dom");
-
 var _reactPopper = require("react-popper");
 
 var _ClickAwayContainer = require("../../ClickAwayContainer");
 
+var _Satellite = require("../../Satellite");
+
 var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
 
 var _jsxRuntime = require("react/jsx-runtime");
@@ -53,6 +53,7 @@ var Modal = function Modal(_ref) {
       _ref$modifiers = _ref.modifiers,
       modifiers = _ref$modifiers === void 0 ? [] : _ref$modifiers,
       className = _ref.className;
+  var createPortal = (0, _Satellite.useCreatePortal)();
 
   var _useState = (0, _react.useState)(null),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -71,19 +72,19 @@ var Modal = function Modal(_ref) {
     return null;
   }
 
-  return /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClickAwayContainer.ClickAwayContainer, {
+  return createPortal( /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClickAwayContainer.ClickAwayContainer, {
     element: datePickerElement,
     onClickAway: function onClickAway(evt) {
       return _onClickAway === null || _onClickAway === void 0 ? void 0 : _onClickAway(evt);
     },
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({
       ref: setDatePickerElement,
-      className: (0, _classnames["default"])(className, (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["z-dropdown bg-white shadow-z400"]))))
+      className: (0, _clsx["default"])(className, (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["z-dropdown bg-white shadow-z400"]))))
     }, attributes.popper), {}, {
       style: styles.popper,
       children: children
     }))
-  }), document.body);
+  }));
 };
 
 var _default = Modal;

package/cjs/DatePicker/components/NavBar.js

@@ -13,7 +13,7 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _react = require("react");
 
@@ -61,11 +61,11 @@ var NavBar = function NavBar(_ref) {
       },
       disabled: !showPreviousButton
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex items-center text-center"])))),
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex items-center text-center"])))),
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["font-medium text-md"]))),
         children: [localeUtils.getMonths()[month.getMonth()], " ", props.editableYear ? /*#__PURE__*/(0, _jsxRuntime.jsx)("select", {
-          className: (0, _classnames["default"])("DayPicker-Year", (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["pl-0.5 font-medium outline-none border-transparent border-2 rounded focus:border-nebula-600 focus:shadow-z100 appearance-none"])))),
+          className: (0, _clsx["default"])("DayPicker-Year", (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["pl-0.5 font-medium outline-none border-transparent border-2 rounded focus:border-accent-600 focus:shadow-z100 appearance-none"])))),
           value: month.getFullYear(),
           onChange: function onChange(e) {
             return props.onYearChange(parseInt(e.currentTarget.value));

package/cjs/Dropdown/Dropdown.js

@@ -15,18 +15,18 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _react = require("react");
 
-var _reactDom = require("react-dom");
-
 var _reactPopper = require("react-popper");
 
 var _Card = _interopRequireDefault(require("../Card"));
 
 var _ClickAwayContainer = require("../ClickAwayContainer");
 
+var _Satellite = require("../Satellite");
+
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
 
 var _DropdownButtonItem = _interopRequireDefault(require("./components/DropdownButtonItem"));
@@ -85,6 +85,7 @@ var Dropdown = function Dropdown(_ref) {
       renderTarget = _ref.renderTarget,
       renderFooter = _ref.renderFooter,
       children = _ref.children;
+  var createPortal = (0, _Satellite.useCreatePortal)();
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -130,7 +131,7 @@ var Dropdown = function Dropdown(_ref) {
         className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["inline-block leading-none"]))),
         ref: setTargetEl,
         children: target
-      }), showMenu && targetEl && /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClickAwayContainer.ClickAwayContainer, {
+      }), showMenu && targetEl && createPortal( /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClickAwayContainer.ClickAwayContainer, {
         element: menuContainerEl,
         onClickAway: function onClickAway(evt) {
           var isContainedInTarget = targetEl === null || targetEl === void 0 ? void 0 : targetEl.contains(evt.target);
@@ -141,7 +142,7 @@ var Dropdown = function Dropdown(_ref) {
         },
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, attributes.popper), {}, {
           style: styles.popper,
-          className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["z-dropdown min-w-64 max-w-128"]))), menuClassName),
+          className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["z-dropdown min-w-64 max-w-128"]))), menuClassName),
           ref: setMenuContainerEl,
           children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card["default"], {
             fullBleed: true,
@@ -152,7 +153,7 @@ var Dropdown = function Dropdown(_ref) {
             }) : null]
           })
         }))
-      }), document.body)]
+      }))]
     })
   });
 };

package/cjs/Dropdown/components/DropdownButtonItem.js

@@ -13,7 +13,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
 
@@ -23,7 +23,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject, _templateObject2, _templateObject3;
 
-var _excluded = ["children", "variant", "toggle", "startIcon"];
+var _excluded = ["toggle", "children", "variant", "startIcon"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -33,15 +33,15 @@ var DropdownButtonItem = function DropdownButtonItem(props) {
   var dropdownItemProps = (0, _useDropdownItemProps["default"])(props);
 
   var _props$dropdownItemPr = _objectSpread(_objectSpread({}, props), dropdownItemProps),
+      toggle = _props$dropdownItemPr.toggle,
       children = _props$dropdownItemPr.children,
       variant = _props$dropdownItemPr.variant,
-      toggle = _props$dropdownItemPr.toggle,
       StartIcon = _props$dropdownItemPr.startIcon,
       mergedProps = (0, _objectWithoutProperties2["default"])(_props$dropdownItemPr, _excluded);
 
   var showDestructiveVariant = !props.disabled && variant === "destructive";
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", _objectSpread(_objectSpread({}, mergedProps), {}, {
-    className: (0, _classnames["default"])(mergedProps.className, (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["w-full"])))),
+    className: (0, _clsx["default"])(mergedProps.className, (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["w-full"])))),
     children: [StartIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(StartIcon, {
       className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["mr-2 ", ""])), showDestructiveVariant ? "text-red-700" : "text-grey-500"),
       size: "1rem"

package/cjs/Dropdown/components/DropdownFooterItem.js

@@ -13,7 +13,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
 
@@ -33,7 +33,7 @@ var DropdownFooterItem = function DropdownFooterItem(_ref) {
       props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   if (!children) return null;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex bg-grey-100 -mb-1 items-center justify-between px-4 py-3 border-t border-grey-200"]))), className)
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex bg-grey-100 -mb-1 items-center justify-between px-4 py-3 border-t border-grey-200"]))), className)
   }, props), {}, {
     children: children
   }));

package/cjs/Dropdown/components/DropdownLinkItem.js

@@ -13,7 +13,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
 
@@ -44,8 +44,7 @@ var DropdownLinkItem = function DropdownLinkItem(props) {
       mergedProps = (0, _objectWithoutProperties2["default"])(_props$dropdownItemPr, _excluded);
 
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("a", _objectSpread(_objectSpread({
-    tabIndex: disabled ? -1 : undefined,
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex items-center"]))), className)
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex items-center"]))), className)
   }, mergedProps), {}, {
     children: [StartIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(StartIcon, {
       className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["mr-2 shrink-0 text-grey-500"]))),

package/cjs/Dropdown/components/DropdownTitle.js

@@ -13,7 +13,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
 
@@ -31,7 +31,7 @@ var DropdownTitle = function DropdownTitle(_ref) {
   var className = _ref.className,
       props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("h4", _objectSpread(_objectSpread({}, props), {}, {
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex items-center h-10 px-4\n          border-grey-100 border-b border-t first:border-t-0\n          display-subheading"]))), className)
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex items-center h-10 px-4\n          border-grey-100 border-b border-t first:border-t-0\n          display-subheading"]))), className)
   }));
 };
 

package/cjs/Dropdown/components/DropdownToggleItem.js

@@ -13,7 +13,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
 
@@ -42,7 +42,7 @@ var DropdownToggleItem = function DropdownToggleItem(props) {
       toggleProps = (0, _objectWithoutProperties2["default"])(_props$dropdownItemPr, _excluded);
 
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex items-center"]))), className),
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex items-center"]))), className),
     children: [StartIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(StartIcon, {
       className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["mr-2 shrink-0 text-grey-500"]))),
       size: "1rem"

package/cjs/Dropdown/useDropdownItemProps.d.ts

@@ -6,8 +6,16 @@ export interface DropdownBaseItemProps<T extends HTMLElement = HTMLElement> {
     onClick?: EventHandler<MouseEvent<T>>;
 }
 export declare const useDropdownItemProps: <T extends HTMLElement = HTMLElement>(props: DropdownBaseItemProps<T>) => {
+    disabled: boolean;
+    "aria-disabled": boolean;
+    tabIndex: number;
+    onClick: undefined;
     className: string;
+} | {
+    disabled?: undefined;
+    "aria-disabled"?: undefined;
+    tabIndex?: undefined;
     onClick: (evt: MouseEvent<T, globalThis.MouseEvent>) => void;
-    disabled: boolean | undefined;
+    className: string;
 };
 export default useDropdownItemProps;

package/cjs/Dropdown/useDropdownItemProps.js

@@ -7,9 +7,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useDropdownItemProps = exports["default"] = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
 
@@ -17,16 +19,24 @@ var _DropdownContext = require("./DropdownContext");
 
 var _templateObject;
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 var useDropdownItemProps = function useDropdownItemProps(props) {
   var _useDropdownContext = (0, _DropdownContext.useDropdownContext)(),
       showMenu = _useDropdownContext.showMenu;
 
-  var className = (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n      flex items-center\n      min-h-10 px-4 text-left\n      focus:no-underline hover:no-underline\n      ", "\n    "])), props.disabled ? "text-grey-300 cursor-not-allowed" : "text-inherit hover:bg-grey-100 focus:bg-grey-100 focus:outline-none cursor-pointer"), props.className);
-  return {
+  var className = (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n      flex items-center\n      min-h-10 px-4 text-left\n      focus:no-underline hover:no-underline\n      ", "\n    "])), props.disabled ? "text-grey-300 cursor-not-allowed" : "text-inherit hover:bg-grey-100 focus:bg-grey-100 focus:outline-none cursor-pointer"), props.className);
+  var disabledProps = props.disabled ? {
+    disabled: true,
+    "aria-disabled": true,
+    tabIndex: -1,
+    onClick: undefined
+  } : {};
+  return _objectSpread({
     className: className,
-    onClick: props.disabled ? function (evt) {
-      return evt.preventDefault();
-    } : function (evt) {
+    onClick: function onClick(evt) {
       if (props.onClick) {
         props.onClick(evt);
       }
@@ -34,9 +44,8 @@ var useDropdownItemProps = function useDropdownItemProps(props) {
       if (!evt.defaultPrevented && props.toggle) {
         showMenu(false);
       }
-    },
-    disabled: props.disabled
-  };
+    }
+  }, disabledProps);
 };
 
 exports.useDropdownItemProps = useDropdownItemProps;

package/cjs/Dropzone/Dropzone.js

@@ -17,7 +17,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _react = require("react");
 
@@ -135,7 +135,7 @@ var Dropzone = function Dropzone(_ref2) {
   var StatusIcon = status === "invalid" ? InvalidIcon : status === "validated" ? ValidatedIcon : _react.Fragment;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({}, getRootProps({
     "aria-controls": dropzoneId,
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n            input group\n            ", "\n            ", "\n            min-h-16 cursor-pointer\n            ", ""])), focused && "input-focused", disabled && "input-disabled cursor-not-allowed", isDragReject ? "border-red-200 cursor-not-allowed" : isDragActive ? "border-nebula-500" : null), STATUS_CLASSNAMES[status], className),
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n            input group\n            ", "\n            ", "\n            min-h-16 cursor-pointer\n            ", ""])), focused && "input-focused", disabled && "input-disabled cursor-not-allowed", isDragReject ? "border-red-200 cursor-not-allowed" : isDragActive ? "border-accent-500" : null), STATUS_CLASSNAMES[status], className),
     onClick: function onClick(evt) {
       // Helps with https://github.com/react-dropzone/react-dropzone/issues/182
       if (evt.target.closest("label")) {

package/cjs/EmptyState/EmptyState.js

@@ -9,7 +9,7 @@ exports["default"] = exports.EmptyState = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _FlexGrid = _interopRequireDefault(require("../FlexGrid"));
 
@@ -70,10 +70,10 @@ var renderEmptyState = function renderEmptyState(_ref) {
       width = _ref$width === void 0 ? "medium" : _ref$width,
       _ref$centered = _ref.centered,
       centered = _ref$centered === void 0 ? false : _ref$centered;
-  var containerClassNames = (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["flex items-center"]))), CONTAINER_CONTEXT_CLASSNAMES[usageContext][width], centered ? (0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["justify-center text-center lg:flex-col"]))) : (0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["justify-between flex-col lg:flex-row"]))));
-  var titleClassNames = (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["text-grey-900"]))), TITLE_CONTEXT_CLASSNAMES[usageContext]);
-  var descriptionClassNames = (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2["default"])(["text-grey-600"]))), DESCRIPTION_CONTEXT_CLASSNAMES[usageContext]);
-  var actionsClassNames = (0, _classnames["default"])(ACTIONS_CONTEXT_CLASSNAMES[usageContext]);
+  var containerClassNames = (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["flex items-center"]))), CONTAINER_CONTEXT_CLASSNAMES[usageContext][width], centered ? (0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["justify-center text-center lg:flex-col"]))) : (0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["justify-between flex-col lg:flex-row"]))));
+  var titleClassNames = (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["text-grey-900"]))), TITLE_CONTEXT_CLASSNAMES[usageContext]);
+  var descriptionClassNames = (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2["default"])(["text-grey-600"]))), DESCRIPTION_CONTEXT_CLASSNAMES[usageContext]);
+  var actionsClassNames = (0, _clsx["default"])(ACTIONS_CONTEXT_CLASSNAMES[usageContext]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: containerClassNames,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {

package/cjs/Field/Field.js

@@ -11,7 +11,7 @@ exports["default"] = exports.Field = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _reactFeather = require("react-feather");
 
@@ -82,7 +82,7 @@ var Field = function Field(_ref) {
           className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["truncate ", ""])), inline ? "mr-2" : "mb-1"),
           children: label
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: (0, _classnames["default"])(inline && (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["ml-auto mt-1"])))),
+          className: (0, _clsx["default"])(inline && (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["ml-auto mt-1"])))),
           children: children
         })]
       }), state.status === "invalid" && state.errors.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
@@ -97,7 +97,7 @@ var Field = function Field(_ref) {
           }, error);
         })
       }) : description ? /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-        className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["display-caption text-grey-600"]))), inline ? (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["mt-1"]))) : (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["mt-2"])))),
+        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["display-caption text-grey-600"]))), inline ? (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["mt-1"]))) : (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["mt-2"])))),
         children: description
       }) : null]
     })

package/cjs/Flag/Flag.js

@@ -13,7 +13,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _react = require("react");
 
@@ -105,9 +105,9 @@ var Flag = function Flag(_ref) {
       },
       children: [loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressSpinner["default"], {
         size: 16,
-        className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["mt-1"]))), VARIANT_SPINNER_CLASSNAMES[variant])
+        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["mt-1"]))), VARIANT_SPINNER_CLASSNAMES[variant])
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
-        className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["shrink-0 text-white rounded-full p-2px mt-1"]))), VARIANT_CLASSNAMES[variant]),
+        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["shrink-0 text-white rounded-full p-2px mt-1"]))), VARIANT_CLASSNAMES[variant]),
         size: 16
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: (0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["flex-1 ml-4"]))),

package/cjs/Flag/Flags.d.ts

@@ -44,5 +44,5 @@ export interface FlagsProps {
  *
  * When there are multiple flags, they will stack on top of one another with the most recent flag on top. When a user dismisses a flag, any older flags 'below' will come to the top. Careful consideration should be taken to take into account the ordering and priority of flags in the stack. Never use dismissible and non-dismissible flags in a stack as flags that automatically dismiss can do so and not be visible to the user.
  */
-export declare const Flags: ({ notifications }: FlagsProps) => import("react").ReactPortal;
+export declare const Flags: ({ notifications }: FlagsProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 export default Flags;

package/cjs/Flag/Flags.js

@@ -13,10 +13,10 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _reactDom = require("react-dom");
-
 var _reactTransitionGroup = require("react-transition-group");
 
+var _Satellite = require("../Satellite");
+
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
 
 var _Flag = _interopRequireDefault(require("./Flag"));
@@ -73,7 +73,8 @@ var TRANSITION_TIMEOUT = 500;
 var Flags = function Flags(_ref) {
   var _ref$notifications = _ref.notifications,
       notifications = _ref$notifications === void 0 ? [] : _ref$notifications;
-  return /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.TransitionGroup, {
+  var createPortal = (0, _Satellite.useCreatePortal)();
+  return createPortal( /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.TransitionGroup, {
     className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["z-notification bottom-0 right-0 fixed flex flex-col items-end p-4"]))),
     component: "ul",
     children: notifications.map(function (_ref2) {
@@ -97,7 +98,7 @@ var Flags = function Flags(_ref) {
         })
       }, id);
     })
-  }), document.body);
+  }));
 };
 
 exports.Flags = Flags;

package/cjs/FlexGrid/FlexGrid.js

@@ -9,7 +9,7 @@ exports["default"] = exports.FlexGrid = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _react = require("react");
 
@@ -64,9 +64,9 @@ var FlexGrid = function FlexGrid(_ref) {
       wrap = _ref$wrap === void 0 ? false : _ref$wrap,
       children = _ref.children;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: (0, _classnames["default"])(inline && (0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["flex-grid-inline"]))), className),
+    className: (0, _clsx["default"])(inline && (0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["flex-grid-inline"]))), className),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["flex-grid-inner"]))), inline ? (0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["inline-flex"]))) : (0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["flex"]))), wrap && (0, _satellitePrefixer["default"])(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2["default"])(["flex-wrap"]))), SPACING_CLASSNAMES[spacing], DIRECTION_CLASSNAMES[direction], ALIGNMENT_CLASSNAMES[alignment], DISTRIBUTION_CLASSNAMES[distribution]),
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["flex-grid-inner"]))), inline ? (0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["inline-flex"]))) : (0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["flex"]))), wrap && (0, _satellitePrefixer["default"])(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2["default"])(["flex-wrap"]))), SPACING_CLASSNAMES[spacing], DIRECTION_CLASSNAMES[direction], ALIGNMENT_CLASSNAMES[alignment], DISTRIBUTION_CLASSNAMES[distribution]),
       children: _react.Children.map(children, function (child) {
         return /*#__PURE__*/(0, _react.isValidElement)(child) ? child : (0, _isRenderedChild["default"])(child) ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           children: child

package/cjs/HelpUnderline/HelpUnderline.js

@@ -9,7 +9,7 @@ exports["default"] = exports.HelpUnderline = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
 
@@ -27,8 +27,8 @@ var HelpUnderline = function HelpUnderline(_ref) {
       _ref$placement = _ref.placement,
       placement = _ref$placement === void 0 ? "bottom" : _ref$placement;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.TooltipWrapper, {
-    wrapperClassName: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["leading-inherit"]))), className),
-    tooltipClassName: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["max-w-64"]))), tooltipClassName),
+    wrapperClassName: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["leading-inherit"]))), className),
+    tooltipClassName: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["max-w-64"]))), tooltipClassName),
     content: tooltipContent,
     placement: placement,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {

package/cjs/Input/Input.js

@@ -15,7 +15,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _react = require("react");
 
@@ -140,7 +140,7 @@ var Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, externalRef) {
   var StatusIcon = status === "invalid" ? InvalidIcon : status === "validated" ? ValidatedIcon : _react.Fragment;
   var clearable = typeof clearableProp === "boolean" ? clearableProp : type === "search";
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n            input group\n            ", "\n            ", "\n          "])), focused && "input-focused", disabled && "input-disabled"), VARIANT_CLASSNAMES[variant], STATUS_CLASSNAMES[status], className),
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n            input group\n            ", "\n            ", "\n          "])), focused && "input-focused", disabled && "input-disabled"), VARIANT_CLASSNAMES[variant], STATUS_CLASSNAMES[status], className),
     style: style,
     onClick: function onClick() {
       var _inputRef$current;

package/cjs/Insert/Insert.js

@@ -13,6 +13,8 @@ var _Badge = _interopRequireDefault(require("../Badge"));
 
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
 
+var _onlyText = _interopRequireDefault(require("../utils/onlyText"));
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
@@ -53,6 +55,7 @@ var Insert = function Insert(_ref) {
       contexts = _ref.contexts,
       children = _ref.children;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("aside", {
+    "aria-label": (0, _onlyText["default"])(title),
     className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["inline-flex flex-col self-start p-4 bg-grey-100 rounded"]))),
     children: [contexts ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["block space-x-2 mb-4"]))),

package/cjs/KeyboardKey/KeyboardKey.js

@@ -9,7 +9,7 @@ exports.KeyboardKey = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _react = require("react");
 
@@ -40,7 +40,7 @@ var KeyboardKey = function KeyboardKey(_ref) {
     height: "1em"
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("kbd", {
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["keyboard-key "]))), className),
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["keyboard-key "]))), className),
     children: displayed
   });
 };

package/cjs/Link/ButtonLink.js

@@ -36,16 +36,7 @@ var ButtonLink = function ButtonLink(_ref) {
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], _objectSpread(_objectSpread(_objectSpread({}, props), linkProps), {}, {
     endIcon: EndIcon,
-    as: "a",
-    onClick: function onClick(evt) {
-      if (props.disabled) {
-        evt.preventDefault();
-      } else {
-        var _linkProps$onClick;
-
-        (_linkProps$onClick = linkProps.onClick) === null || _linkProps$onClick === void 0 ? void 0 : _linkProps$onClick.call(linkProps, evt);
-      }
-    }
+    as: "a"
   }));
 };
 

package/cjs/Link/Link.js

@@ -13,7 +13,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _react = require("react");
 
@@ -48,7 +48,7 @@ var Link = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
 
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("a", _objectSpread(_objectSpread(_objectSpread({}, anchorProps), linkProps), {}, {
     ref: ref,
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["typo-link inline-flex items-center"]))), className),
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["typo-link inline-flex items-center"]))), className),
     children: [StartIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(StartIcon, {
       className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["mr-1"]))),
       size: "1em"