@algolia/satellite 1.0.0-beta.150 → 1.0.0-beta.154

package/README.md

@@ -115,7 +115,7 @@ const { makePurgeCssExtractor } = require('@algolia/satellite');
 const satelliteConfig = require("@algolia/satellite/cjs/styles/tailwind.config.js");
 
 module.exports = {
-  presets: [satellite],
+  presets: [satelliteConfig],
   content: [
     files: [
       `node_modules/@algolia/satellite/**/*.js`,

package/cjs/AnnouncementBadge/AnnouncementBadge.d.ts

@@ -5,8 +5,14 @@ export declare type AnnouncementBadgeLocale = {
     [key in AnnouncementBadgeTexts]?: string;
 };
 export interface AnnouncementBadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    /** @default "default" */
     size?: AnnouncementBadgeSizes;
+    /**
+     * Define which text to display in the `AnnouncementBadge`
+     * @default "new"
+     */
     text?: AnnouncementBadgeTexts;
+    /** @default "accent" */
     variant?: "accent" | "red";
     locale?: AnnouncementBadgeLocale;
     children?: never;

package/cjs/AutoComplete/AutoComplete.d.ts

@@ -37,7 +37,6 @@ export declare class AutoComplete<T extends Option = Option> extends Component<A
         maxResults: number;
         createFromInputValue: <T_1 extends Option = Option>(options: T_1[] | undefined, inputValue: string) => Option[];
         options: never[];
-        separatorKeyCodes: never[];
         separatorKeys: never[];
         optionItemComponent: ({ optionItemPrefix, ...props }: DefaultOptionProps) => JSX.Element;
         noWrap: boolean;

package/cjs/AutoComplete/AutoComplete.js

@@ -95,7 +95,6 @@ var MENU_POPPER_MODFIERS = [{
     offset: [0, 8]
   }
 }];
-var BACKSPACE_KEY_CODE = 8;
 /** @ignore */
 var DefaultEmptyState = function DefaultEmptyState(_ref) {
   var emptyStateTitle = _ref.emptyStateTitle;
@@ -218,10 +217,8 @@ var AutoComplete = /*#__PURE__*/function (_Component) {
         var _this$props2 = _this.props,
           _this$props2$value = _this$props2.value,
           value = _this$props2$value === void 0 ? [] : _this$props2$value,
-          _this$props2$separato = _this$props2.separatorKeyCodes,
-          separatorKeyCodes = _this$props2$separato === void 0 ? AutoComplete.defaultProps.separatorKeyCodes : _this$props2$separato,
-          _this$props2$separato2 = _this$props2.separatorKeys,
-          separatorKeys = _this$props2$separato2 === void 0 ? AutoComplete.defaultProps.separatorKeys : _this$props2$separato2,
+          _this$props2$separato = _this$props2.separatorKeys,
+          separatorKeys = _this$props2$separato === void 0 ? AutoComplete.defaultProps.separatorKeys : _this$props2$separato,
           creatable = _this$props2.creatable,
           _this$props2$createFr = _this$props2.createFromInputValue,
           createFromInputValue = _this$props2$createFr === void 0 ? AutoComplete.defaultProps.createFromInputValue : _this$props2$createFr,
@@ -229,9 +226,9 @@ var AutoComplete = /*#__PURE__*/function (_Component) {
           onChange = _this$props2.onChange;
         var inputValue = state.inputValue || "";
         var canCreate = creatable && inputValue.trim().length > 0;
-        if (evt.keyCode === BACKSPACE_KEY_CODE && !inputValue.length) {
+        if (evt.key === "Backspace" && !inputValue.length) {
           onChange(value.slice(0, -1));
-        } else if (canCreate && (separatorKeyCodes.includes(evt.keyCode) || separatorKeys.includes(evt.key))) {
+        } else if (canCreate && separatorKeys.includes(evt.key)) {
           evt.preventDefault();
           var _createFromInputValue = createFromInputValue(options, inputValue),
             _createFromInputValue2 = (0, _slicedToArray2["default"])(_createFromInputValue, 1),
@@ -378,9 +375,9 @@ var AutoComplete = /*#__PURE__*/function (_Component) {
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({}, inputProps), {}, {
             "data-lpignore": true
           }))]
-        }), (showClearButton || endItem) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        }), (showClearButton || !!endItem) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: (0, _clsx["default"])(showClearButton && endItem && (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["my-2 flex self-end space-x-4"])))),
-          children: [endItem && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: [!!endItem && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
             className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["text-grey-700 my-auto"]))),
             children: endItem
           }), showClearButton && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
@@ -497,7 +494,7 @@ var AutoComplete = /*#__PURE__*/function (_Component) {
                       })
                     })]
                   }))
-                }), menuFooter && /*#__PURE__*/(0, _jsxRuntime.jsx)("footer", {
+                }), !!menuFooter && /*#__PURE__*/(0, _jsxRuntime.jsx)("footer", {
                   className: (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["flex items-center justify-center min-h-12 p-4 bg-grey-100 border-t border-grey-200 text-grey-600"]))),
                   children: menuFooter
                 })]
@@ -588,7 +585,6 @@ exports.AutoComplete = AutoComplete;
   maxResults: 7,
   createFromInputValue: _utils.defaultCreateFromInputValue,
   options: [],
-  separatorKeyCodes: [],
   separatorKeys: [],
   optionItemComponent: DefaultOption,
   noWrap: false

package/cjs/AutoComplete/components/AutoCompleteEmptyState.js

@@ -26,7 +26,7 @@ var AutoCompleteEmptyState = function AutoCompleteEmptyState(_ref) {
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["font-semibold pt-4"]))),
       children: title
-    }), description && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+    }), !!description && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
       className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["display-caption typo-subdued pt-4"]))),
       children: description
     })]

package/cjs/AutoComplete/types.d.ts

@@ -29,7 +29,6 @@ export interface AutoCompleteBaseProps<T extends Option = Option> {
     selectOnBlur?: boolean;
     maxResults?: number;
     createFromInputValue?: CreateFromInputValue<T>;
-    separatorKeyCodes?: number[];
     separatorKeys?: string[];
     renderValueTemplate?: (args: RenderValueTemplateArgs<T>) => JSX.Element;
     emptyState?: ReactNode;

package/cjs/Avatars/UserAvatar.d.ts

@@ -3,7 +3,10 @@ import type { MinimalUser } from "./types";
 export declare type UserAvatarProps = {
     /** A minimal user object containing `name`, `email` and `avatar`. */
     user: MinimalUser;
-    /** @default 32 */
+    /**
+     * in px
+     * @default 32
+     * */
     size?: number;
     /** @ignore */
     className?: string;

package/cjs/Badge/Badge.js

@@ -10,6 +10,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+var _isRenderedChild = _interopRequireDefault(require("../utils/isRenderedChild"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["children", "value", "icon", "variant", "size", "className"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
@@ -62,10 +63,10 @@ var Badge = function Badge(_ref) {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
         size: ".8em"
       })
-    }), children && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    }), (0, _isRenderedChild["default"])(children) && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["truncate"]))),
       children: children
-    }), value && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    }), (0, _isRenderedChild["default"])(value) && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       children: value
     })]
   }));

package/cjs/Banners/Alert/Alert.d.ts

@@ -17,6 +17,10 @@ export interface AlertProps {
      */
     usageContext?: AlertContextType;
     icon?: IconComponentType;
+    /**
+     * Function triggered when the dismiss button is clicked.
+     * Dismiss button won't be rendered if absent.
+     * */
     onDismiss?(): void;
     children: ReactNode;
 }

package/cjs/Banners/Alert/Alert.js

@@ -114,7 +114,7 @@ var Alert = function Alert(_ref) {
       size: "1rem"
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: (0, _satellitePrefixer["default"])(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2["default"])(["flex flex-1 flex-col ", ""])), onDismiss && "mr-6"),
-      children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)("h4", {
+      children: [!!title && /*#__PURE__*/(0, _jsxRuntime.jsx)("h4", {
         className: (0, _satellitePrefixer["default"])(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2["default"])(["font-bold text-grey-900 mb-1"]))),
         children: title
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {

package/cjs/Banners/Promote/Promote.js

@@ -73,12 +73,12 @@ var Promote = function Promote(_ref) {
     className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["relative flex"]))),
     fullBleed: true,
     as: "section",
-    children: [illustration && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: [!!illustration && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["w-full min-w-24 max-w-64 flex items-center justify-center bg-grey-100"]))),
       children: illustration
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["", ""])), variant === "large" ? "p-6" : "p-4"),
-      children: [context && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      children: [!!context && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["block mb-1"]))),
         children: context
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("header", {
@@ -87,7 +87,7 @@ var Promote = function Promote(_ref) {
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: BODY_VARIANT_CLASSNAMES[variant],
         children: children
-      }), actions && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      }), !!actions && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["flex space-x-2"]))), ACTIONS_VARIANT_CLASSNAMES[variant]),
         children: actions
       })]

package/cjs/Card/Card.d.ts

@@ -11,7 +11,7 @@ export interface CardProps {
     style?: CSSProperties;
     /**
      * Specify HTML element `Card` should be presented as.
-     * @default "div"
+     * @default "section"
      */
     as?: CardAs;
     /** Should the content take up full full width of the `Card`. */

package/cjs/Card/components/CardHeader.d.ts

@@ -1,4 +1,6 @@
-/// <reference types="react" />
-export declare type CardHeaderProps = JSX.IntrinsicElements["div"];
-export declare const CardHeader: ({ className, ...props }: CardHeaderProps) => JSX.Element;
+import type { FunctionComponent, ReactNode } from "react";
+export declare type CardHeaderProps = JSX.IntrinsicElements["div"] & {
+    children: ReactNode;
+};
+export declare const CardHeader: FunctionComponent<CardHeaderProps>;
 export default CardHeader;

package/cjs/Card/components/CardHeader.js

@@ -12,14 +12,16 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject;
-var _excluded = ["className"];
+var _excluded = ["className", "children"];
 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 CardHeader = function CardHeader(_ref) {
   var className = _ref.className,
+    children = _ref.children,
     props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, props), {}, {
-    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex justify-between"]))), className)
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex justify-between"]))), className),
+    children: children
   }));
 };
 exports.CardHeader = CardHeader;

package/cjs/Checkbox/Checkbox.js

@@ -14,6 +14,7 @@ var _react = require("react");
 var _reactFeather = require("react-feather");
 var _Field = require("../Field");
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+var _isRenderedChild = _interopRequireDefault(require("../utils/isRenderedChild"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["children", "className", "textPosition", "indeterminate", "defaultChecked", "checkedColor", "checked", "disabled"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
@@ -84,7 +85,7 @@ var Checkbox = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
         checked: isChecked,
         disabled: disabled
       }))]
-    }), children && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+    }), (0, _isRenderedChild["default"])(children) && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
       className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n            display-body\n            ", "\n            ", "\n          "])), disabled && "text-grey-300 cursor-not-allowed", textPosition === "left" ? "pr-2" : "pl-2"),
       htmlFor: id,
       children: children

package/cjs/EmptyState/EmptyState.js

@@ -69,16 +69,16 @@ var renderEmptyState = function renderEmptyState(_ref) {
     className: containerClassNames,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: (0, _satellitePrefixer["default"])(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2["default"])(["min-w-2/5"]))),
-      children: [centered && medallion && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      children: [centered && !!medallion && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: MEDALLION_CONTEXT_CLASSNAMES[usageContext],
         children: medallion
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
         className: titleClassNames,
         children: title
-      }), description && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+      }), !!description && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
         className: descriptionClassNames,
         children: description
-      }), actions && /*#__PURE__*/(0, _jsxRuntime.jsx)(_FlexGrid["default"], {
+      }), !!actions && /*#__PURE__*/(0, _jsxRuntime.jsx)(_FlexGrid["default"], {
         className: actionsClassNames,
         alignment: centered ? "center" : "leading",
         distribution: centered ? "center" : "leading",
@@ -86,7 +86,7 @@ var renderEmptyState = function renderEmptyState(_ref) {
         spacing: "sm",
         children: actions
       })]
-    }), illustration && !centered && usageContext === "page" && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    }), !!illustration && !centered && usageContext === "page" && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: (0, _satellitePrefixer["default"])(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteral2["default"])(["empty-state-illustration ml-16 hidden lg:flex items-center justify-center"]))),
       children: illustration
     })]

package/cjs/EmptyState/types.d.ts

@@ -21,7 +21,7 @@ export interface EmptyStatePropsAll {
      */
     usageContext?: EmptyStateUsageContexts;
     /**
-     * Define wether or not content should be centered
+     * Define whether or not content should be centered
      * @default false
      */
     centered?: boolean;

package/cjs/Field/Field.js

@@ -66,7 +66,7 @@ var Field = function Field(_ref) {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
         className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["cursor-pointer flex ", ""])), !inline && "flex-col"),
         htmlFor: labelFor,
-        children: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: [!!label && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["truncate ", ""])), inline ? "mr-2" : "mb-1"),
           children: label
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {

package/cjs/Flag/Flag.js

@@ -16,6 +16,7 @@ var _Card = require("../Card");
 var _ProgressSpinner = _interopRequireDefault(require("../ProgressSpinner"));
 var _Satellite = require("../Satellite");
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+var _isRenderedChild = _interopRequireDefault(require("../utils/isRenderedChild"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
 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; }
@@ -104,7 +105,7 @@ var Flag = function Flag(_ref) {
             size: "small",
             onClick: onDismiss
           })]
-        }), hasTitle && children && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        }), hasTitle && (0, _isRenderedChild["default"])(children) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: (0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["text-grey-600 mt-2"]))),
           children: children
         })]

package/cjs/Flag/types.d.ts

@@ -11,9 +11,14 @@ export interface Notification {
     icon?: IconComponentType;
     /**  @default false */
     loading?: boolean;
-    /**  @default blue */
+    /**  @default "blue" */
     variant?: ColorVariant;
+    /**
+     * Function triggered when the dismiss button is clicked.
+     * Dismiss button won't be rendered if absent.
+     * */
     onDismiss?: () => void;
+    /** Defines if and how long before the notification should be dismissed (in ms) */
     autoDismissAfter?: number;
     locale?: {
         dismissText?: string;

package/cjs/FlexGrid/FlexGrid.d.ts

@@ -4,12 +4,46 @@ export declare type FlexGridAlignment = "leading" | "trailing" | "center" | "fil
 export declare type FlexGridDistribution = "equalSpacing" | "leading" | "trailing" | "center" | "fill" | "fillEvenly";
 export declare type FlexGridSpacing = "none" | "sm" | "md" | "lg" | "xl";
 export interface FlexGridProps {
+    /** @ignore */
     className?: string;
+    /**
+     * Define which direction the content should flow
+     * @default "row"
+     */
     direction?: FlexGridDirection;
+    /**
+     * Define whether or not the contents be allowed to wrap
+     * @default false
+     */
     wrap?: boolean;
+    /**
+     * Define whether or not the content be wrapped in an inline-flex container
+     * @default false
+     */
     inline?: boolean;
+    /**
+     * @default "leading"
+     */
     alignment?: FlexGridAlignment;
+    /**
+     * @default "leading"
+     */
     distribution?: FlexGridDistribution;
+    /**
+     * The spacing directly corelates to our Tailwind spacing scale
+     *
+     * none: `spacing.0 → 0px`
+     *
+     * sm: `spacing.2 → 8px`
+     *
+     * md: `spacing.4 → 16px`
+     *
+     * lg: `spacing.6 → 24px`
+     *
+     * xl: `spacing.8 → 32px`
+     *
+     * @default "none"
+     */
     spacing?: FlexGridSpacing;
     children: ReactNode;
 }

package/cjs/Input/Input.d.ts

@@ -12,7 +12,7 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
     variant?: InputVariant;
     startIcon?: IconComponentType;
     endItem?: ReactNode;
-    /** Define wether or not a "clear input" x button should show on hover */
+    /** Define whether or not a "clear input" x button should show on hover */
     clearable?: boolean;
     locale?: InputPropsLocale;
 }

package/cjs/Input/Input.js

@@ -140,7 +140,7 @@ var Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, externalRef) {
         setFocused(false);
         (_inputProps$onBlur = inputProps.onBlur) === null || _inputProps$onBlur === void 0 ? void 0 : _inputProps$onBlur.call(inputProps, evt);
       }
-    })), clearable && !disabled && !readOnly && !isValueEmpty && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+    })), clearable && !disabled && !readOnly && !isValueEmpty ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
       className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["mr-2 ", ""])), focused ? "visible" : "invisible group-hover:visible"),
       title: locale.clearInput,
       icon: _reactFeather.X,
@@ -152,7 +152,7 @@ var Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, externalRef) {
         evt.preventDefault();
         triggerInputChange("");
       }
-    }), endItem && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    }) : null, !!endItem && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["mr-4"]))),
       children: endItem
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StatusIcon, {}), type === "number" && !disabled && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {

package/cjs/Modal/Modal.d.ts

@@ -5,13 +5,20 @@ export declare type ModalLocale = {
 };
 export interface ModalProps {
     open?: boolean;
-    title?: string | JSX.Element;
+    /** Descriptive title for `Modal` */
+    title?: ReactNode;
+    /** @ignore */
     className?: string;
+    /** Should the content take up full full width of the `Modal`. */
     fullBleed?: boolean;
+    /** Define whether or not the modal should animate on show and hide */
     animate?: boolean;
     size?: ModalSizeVariant;
+    /** Define whether or not the dismiss button should be hidden */
     hideCloseIcon?: boolean;
+    /** Define whether or not the modal should be vertically aligned */
     centerY?: boolean;
+    /** Function triggered when the dismiss button is clicked */
     onDismiss?: () => void;
     children: ReactNode;
     locale?: ModalLocale;

package/cjs/Modal/Modal.js

@@ -132,7 +132,7 @@ var Modal = function Modal(_ref) {
           "aria-label": title || "Modal",
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("header", {
             className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n                px-8 min-h-14\n                flex items-center justify-between  space-x-2\n                ", "\n                ", "\n              "])), title ? "border-b border-grey-100" : "justify-end", !title && hideCloseIcon && "hidden"),
-            children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
+            children: [!!title && /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
               id: modalTitleId,
               className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["flex-1 display-heading truncate"]))),
               children: title

package/cjs/Pagination/CompactPagination/CompactPagination.js

@@ -61,7 +61,7 @@ var CompactPagination = function CompactPagination(props) {
         return props.onChange(props.currentPage - 1);
       },
       disabled: isFirstPage
-    }), label && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    }), !!label && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["inline-block text-center tabular-nums px-2"]))),
       children: label
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {

package/cjs/RangeSlider/RangeSlider.d.ts

@@ -1,18 +1,34 @@
-import type { DetailedHTMLProps, InputHTMLAttributes } from "react";
-export interface RangeSliderProps extends Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "defaultValue" | "checked" | "defaultChecked" | "type" | "children"> {
-    value?: number;
-    defaultValue?: number;
+/// <reference types="react" />
+declare type RangeSliderValue = number | [number, number];
+declare type WidenNumber<T> = T extends number ? number : T;
+export interface RangeSliderProps<Value extends RangeSliderValue = number> {
+    value?: WidenNumber<Value>;
+    defaultValue?: WidenNumber<Value>;
+    /** Event handler called when the value changes. */
+    onChange?: (value: WidenNumber<Value>) => void;
+    /** Event handler called when the value changes at the end of an interaction. */
+    onCommit?: (value: WidenNumber<Value>) => void;
+    id?: string;
+    name?: string;
+    className?: string;
+    "aria-label"?: string;
+    disabled?: boolean;
     min?: number;
     max?: number;
+    step?: number;
+    minStepsBetweenThumbs?: number;
     track1Color?: string;
     track2Color?: string;
 }
 /**
- * A range slider is an input field where users select a numeric value within a given range (minimum and maximum values).
+ * A range slider is an input field where users select one or two numeric values within a given range (minimum and maximum values).
  *
  * - Range sliders should always be used with a label
  * - Provide min and max value whenever possible
  * - Provide text input for better accessibility
  */
-export declare const RangeSlider: import("react").ForwardRefExoticComponent<Pick<RangeSliderProps, "max" | "required" | "key" | "id" | "height" | "width" | "name" | "color" | "translate" | "value" | "hidden" | "dir" | "form" | "slot" | "style" | "title" | "pattern" | "accessKey" | "draggable" | "lang" | "className" | "prefix" | "contentEditable" | "enterKeyHint" | "inputMode" | "tabIndex" | "disabled" | "multiple" | "size" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "crossOrigin" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "list" | "maxLength" | "min" | "minLength" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "placeholder" | "spellCheck" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "readOnly" | "src" | "step" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "track1Color" | "track2Color"> & import("react").RefAttributes<HTMLInputElement>>;
+export declare const RangeSlider: {
+    <Value extends RangeSliderValue = number>({ className, value, defaultValue, onChange, onCommit, disabled, min, max, track1Color, track2Color, ...otherProps }: RangeSliderProps<Value>): JSX.Element;
+    displayName: string;
+};
 export default RangeSlider;