@algolia/satellite 1.0.0-beta.133 → 1.0.0-beta.136

package/cjs/Badge/Badge.js

@@ -13,7 +13,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 _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
 
@@ -76,7 +76,7 @@ var Badge = function Badge(_ref) {
       size = _ref$size === void 0 ? "default" : _ref$size,
       className = _ref.className,
       props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  var badgeClassName = (0, _classnames["default"])(BASE_CLASSNAMES, VARIANT_CLASSNAMES[variant], SIZE_CLASSNAMES[size], className);
+  var badgeClassName = (0, _clsx["default"])(BASE_CLASSNAMES, VARIANT_CLASSNAMES[variant], SIZE_CLASSNAMES[size], className);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({}, props), {}, {
     className: badgeClassName,
     children: [Icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {

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

@@ -18,6 +18,7 @@ export interface AlertProps {
     usageContext?: AlertContextType;
     icon?: IconComponentType;
     onDismiss?(): void;
+    children: ReactNode;
 }
 /**
 * Alerts inform users about important changes or temporally conditions. Use this component if you need to communicate something to users in a prominent way.

package/cjs/Banners/Alert/Alert.js

@@ -9,7 +9,7 @@ exports["default"] = exports.Alert = 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");
 
@@ -112,14 +112,14 @@ var Alert = function Alert(_ref) {
       className = _ref.className,
       style = _ref.style,
       children = _ref.children;
-  var containerClassName = (0, _classnames["default"])(BASE_CLASSNAME, title ? (0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["p-4"]))) : (0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["py-2 px-3"]))), BACKGROUND_CLASSNAMES[variant], BORDER_CLASSNAMES[variant], usageContext !== "page" && (0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["rounded border"]))), className);
+  var containerClassName = (0, _clsx["default"])(BASE_CLASSNAME, title ? (0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["p-4"]))) : (0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["py-2 px-3"]))), BACKGROUND_CLASSNAMES[variant], BORDER_CLASSNAMES[variant], usageContext !== "page" && (0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["rounded border"]))), className);
   var internalIcon = icon === undefined ? true : icon;
   var Icon = typeof internalIcon === "boolean" && internalIcon ? ICON_VARIANTS[variant] : internalIcon;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: containerClassName,
     style: style,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
-      className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["\n            flex-shrink-0 mr-2\n            ", "\n            "])), title ? "mt-1" : "mt-2px"), ICON_CLASSNAME_VARIANTS[variant]),
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["\n            shrink-0 mr-2\n            ", "\n            "])), title ? "mt-1" : "mt-2px"), ICON_CLASSNAME_VARIANTS[variant]),
       size: "1rem"
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: (0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["flex flex-1 flex-col ", ""])), onDismiss && "mr-6"),

package/cjs/Banners/BigBertha/BigBertha.d.ts

@@ -1,7 +1,8 @@
-import type { FC } from "react";
+import type { FC, ReactNode } from "react";
 import type { IconComponentType } from "../../types";
 export interface BigBerthaProps {
     icon?: IconComponentType;
+    children: ReactNode;
 }
 /**
 * Major product wide announcement from Algolia to the users.

package/cjs/Banners/Promote/Promote.d.ts

@@ -17,6 +17,7 @@ export declare type PromoteProps = {
     /** Buttons */
     actions?: ReactNode;
     onDismiss?(): void;
+    children: ReactNode;
 } & (CompactPromoteProps | WidePromoteProps);
 /**
 * A contextual way of showing our user that a new feature / product is available to them on a higher plan or as an option.

package/cjs/Banners/Promote/Promote.js

@@ -9,7 +9,7 @@ exports["default"] = exports.Promote = 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");
 
@@ -97,7 +97,7 @@ var Promote = function Promote(_ref) {
         className: BODY_VARIANT_CLASSNAMES[variant],
         children: children
       }), actions && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["flex space-x-2"]))), ACTIONS_VARIANT_CLASSNAMES[variant]),
+        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["flex space-x-2"]))), ACTIONS_VARIANT_CLASSNAMES[variant]),
         children: actions
       })]
     }), onDismiss && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {

package/cjs/Button/Button.js

@@ -13,7 +13,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 _ProgressSpinner = _interopRequireDefault(require("../ProgressSpinner"));
 
@@ -68,10 +68,10 @@ var Button = function Button(props) {
     cleanedProps.disabled = true;
   }
 
-  var buttonClassName = (0, _classnames["default"])(BASE_CLASSNAMES, _styles.BUTTON_SIZE_CLASSNAMES[size], _styles.BUTTON_VARIANT_CLASSNAMES[variant], cleanedProps.disabled && (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["btn-disabled"]))), className);
+  var buttonClassName = (0, _clsx["default"])(BASE_CLASSNAMES, _styles.BUTTON_SIZE_CLASSNAMES[size], _styles.BUTTON_VARIANT_CLASSNAMES[variant], cleanedProps.disabled && (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["btn-disabled"]))), className);
   var loaderClassNames = (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["absolute ", ""])), (variant === "destructive" || variant === "primary") && "text-white");
-  var iconClassNames = (0, _classnames["default"])((0, _styles.getIconColorClassName)(props), loading && (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["invisible"]))));
-  var textClassNames = (0, _classnames["default"])(loading && (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["invisible"]))));
+  var iconClassNames = (0, _clsx["default"])((0, _styles.getIconColorClassName)(props), loading && (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["invisible"]))));
+  var textClassNames = (0, _clsx["default"])(loading && (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["invisible"]))));
 
   if ((0, _types.isButtonType)(props) && !cleanedProps.hasOwnProperty("type")) {
     // @ts-ignore
@@ -85,12 +85,12 @@ var Button = function Button(props) {
       size: _styles.BUTTON_LOADER_ICON_SIZES[size],
       thickness: 1
     }), StartIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(StartIcon, {
-      className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["flex-shrink-0 pr-2"]))), iconClassNames)
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["shrink-0 pr-2"]))), iconClassNames)
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["truncate text-center"]))), textClassNames),
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["truncate text-center"]))), textClassNames),
       children: children
     }), EndIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(EndIcon, {
-      className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["flex-shrink-0 pl-2"]))), iconClassNames)
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["shrink-0 pl-2"]))), iconClassNames)
     })]
   }));
 };

package/cjs/Button/Button.tailwind.d.ts

@@ -1,5 +1,5 @@
 export = buttonPlugin;
-/**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
-declare const buttonPlugin: import('../tailwind-types').TailwindPlugin;
+declare const buttonPlugin: {
+    handler: import("tailwindcss/types/config").PluginCreator;
+    config?: import("tailwindcss").Config | undefined;
+};

package/cjs/Button/Button.tailwind.js

@@ -1,15 +1,13 @@
 "use strict";
 
 // @ts-check
-var rgba = require("../styles/rgba");
+var plugin = require("tailwindcss/plugin");
 
 var disabledColor = require("../styles/disabledColor");
-/**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
 
+var rgba = require("../styles/rgba");
 
-var buttonPlugin = function buttonPlugin(_ref) {
+var buttonPlugin = plugin(function (_ref) {
   var addComponents = _ref.addComponents,
       theme = _ref.theme;
   // Button
@@ -137,24 +135,23 @@ var buttonPlugin = function buttonPlugin(_ref) {
       display: "flex",
       flexWrap: "nowrap",
       "& > .btn:not(:first-child):not(:last-child), & > :not(:first-child):not(:last-child) .btn": {
-        borderRadius: 0
+        borderRadius: "0px"
       },
       "& > .btn:first-child, & > :first-child .btn": {
-        borderTopRightRadius: 0,
-        borderBottomRightRadius: 0
+        borderTopRightRadius: "0px",
+        borderBottomRightRadius: "0px"
       },
       "& > .btn:not(:first-child), & > :not(:first-child) .btn": {
-        marginLeft: -1
+        marginLeft: "-1px"
       },
       "& > .btn:last-child, & > :last-child .btn": {
-        borderTopLeftRadius: 0,
-        borderBottomLeftRadius: 0
+        borderTopLeftRadius: "0px",
+        borderBottomLeftRadius: "0px"
       },
       "& .btn:active, & .btn-active, & .btn:focus": {
-        zIndex: 1
+        zIndex: "1"
       }
     }
   });
-};
-
+});
 module.exports = buttonPlugin;

package/cjs/Button/ButtonGroup.d.ts

@@ -1,7 +1,8 @@
-import type { FunctionComponent } from "react";
+import type { FunctionComponent, ReactNode } from "react";
 export interface ButtonGroupProps {
     className?: string;
     as?: keyof JSX.IntrinsicElements;
+    children: ReactNode;
 }
 /**
  * - Use grouped buttons when there is a close relationship between a number of buttons.

package/cjs/Button/ButtonGroup.js

@@ -9,7 +9,7 @@ exports["default"] = exports.ButtonGroup = 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"));
 
@@ -28,7 +28,7 @@ var ButtonGroup = function ButtonGroup(_ref) {
       Tag = _ref$as === void 0 ? "div" : _ref$as,
       children = _ref.children;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Tag, {
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["btn-group"]))), className),
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["btn-group"]))), className),
     children: children
   });
 };

package/cjs/Button/IconButton.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 _ProgressSpinner = _interopRequireDefault(require("../ProgressSpinner"));
 
@@ -65,7 +65,7 @@ var IconButton = function IconButton(props) {
     cleanedProps.disabled = true;
   }
 
-  var iconButtonClassName = (0, _classnames["default"])(BASE_CLASSNAMES, SIZE_CLASSNAMES[size], VARIANT_CLASSNAMES[variant], cleanedProps.disabled && (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["btn-disabled"]))), className);
+  var iconButtonClassName = (0, _clsx["default"])(BASE_CLASSNAMES, SIZE_CLASSNAMES[size], VARIANT_CLASSNAMES[variant], cleanedProps.disabled && (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["btn-disabled"]))), className);
   var loaderClassNames = (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["absolute ", ""])), (variant === "destructive" || variant === "primary") && "text-white");
 
   if ((0, _types.isButtonType)(props) && !cleanedProps.hasOwnProperty("type")) {
@@ -87,7 +87,7 @@ var IconButton = function IconButton(props) {
           size: _styles.BUTTON_LOADER_ICON_SIZES[size],
           thickness: 1
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
-          className: (0, _classnames["default"])(loading && (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["invisible"])))),
+          className: (0, _clsx["default"])(loading && (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["invisible"])))),
           size: "1em"
         })]
       })

package/cjs/Card/Card.js

@@ -9,7 +9,7 @@ exports["default"] = exports.Card = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _react = require("react");
 
@@ -43,7 +43,7 @@ var Card = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("section", {
     id: id,
     ref: ref,
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["card ", " display-body"])), fullBleed && "card-fullbleed"), ELEVATION_CLASSNAMES[elevation], className),
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["card ", " display-body"])), fullBleed && "card-fullbleed"), ELEVATION_CLASSNAMES[elevation], className),
     style: style,
     children: children
   });

package/cjs/Card/Card.tailwind.d.ts

@@ -1,5 +1,5 @@
 export = cardPlugin;
-/**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
-declare const cardPlugin: import('../tailwind-types').TailwindPlugin;
+declare const cardPlugin: {
+    handler: import("tailwindcss/types/config").PluginCreator;
+    config?: import("tailwindcss").Config | undefined;
+};

package/cjs/Card/Card.tailwind.js

@@ -1,11 +1,9 @@
 "use strict";
 
 // @ts-check
+var plugin = require("tailwindcss/plugin");
 
-/**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
-var cardPlugin = function cardPlugin(_ref) {
+var cardPlugin = plugin(function (_ref) {
   var addComponents = _ref.addComponents,
       theme = _ref.theme;
   addComponents({
@@ -16,7 +14,7 @@ var cardPlugin = function cardPlugin(_ref) {
       padding: theme("spacing.6")
     },
     ".card-fullbleed": {
-      padding: 0
+      padding: "0px"
     },
     ".card-z100": {
       boxShadow: theme("boxShadow.z100")
@@ -32,9 +30,8 @@ var cardPlugin = function cardPlugin(_ref) {
     },
     ".card-z500": {
       boxShadow: theme("boxShadow.z500"),
-      borderRadius: 8
+      borderRadius: "8px"
     }
   });
-};
-
+});
 module.exports = cardPlugin;

package/cjs/Card/components/CardHeader.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 CardHeader = function CardHeader(_ref) {
   var className = _ref.className,
       props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, props), {}, {
-    className: (0, _classnames["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)
   }));
 };
 

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

@@ -1,4 +1,6 @@
-import type { FunctionComponent } from "react";
-export declare type CardTitleProps = JSX.IntrinsicElements["h2"];
+import type { FunctionComponent, ReactNode } from "react";
+export declare type CardTitleProps = JSX.IntrinsicElements["h2"] & {
+    children: ReactNode;
+};
 export declare const CardTitle: FunctionComponent<CardTitleProps>;
 export default CardTitle;

package/cjs/Card/components/CardTitle.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"));
 
@@ -32,7 +32,7 @@ var CardTitle = function CardTitle(_ref) {
       children = _ref.children,
       props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", _objectSpread(_objectSpread({}, props), {}, {
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["typo-display-heading"]))), className),
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["typo-display-heading"]))), className),
     children: children
   }));
 };

package/cjs/Checkbox/Checkbox.d.ts

@@ -8,7 +8,7 @@ declare type CheckboxCustomProps = {
     indeterminate?: boolean;
     /**
      * Color of the `Checkbox`
-     * @default nebula.600
+     * @default accent.600
      */
     checkedColor?: string;
 };
@@ -20,5 +20,5 @@ export declare type CheckboxProps = CheckboxInputProps & CheckboxCustomProps;
  * - A checkbox control has two primary states: selected and unselected. If required, there's an additional visual state for indeterminate (usually for a parent checkbox, when some children checkboxes are selected, but not all of them)
  * - Checkboxes require the use of a button to apply the settings once they are selected
  */
-export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLInputElement>, "onChange"> & Pick<InputHTMLAttributes<HTMLInputElement>, "required" | "disabled" | "defaultChecked" | "onChange" | "autoFocus" | "checked"> & CheckboxCustomProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLInputElement>, "onChange"> & Pick<InputHTMLAttributes<HTMLInputElement>, "required" | "disabled" | "autoFocus" | "checked" | "defaultChecked" | "onChange"> & CheckboxCustomProps & import("react").RefAttributes<HTMLInputElement>>;
 export default Checkbox;

package/cjs/Checkbox/Checkbox.js

@@ -15,7 +15,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");
 
@@ -90,9 +90,9 @@ var Checkbox = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   };
 
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["inline-flex items-center ", ""])), textPosition === "left" && "flex-row-reverse"), className),
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["inline-flex items-center ", ""])), textPosition === "left" && "flex-row-reverse"), className),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-      className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n            checkbox\n            ", "\n            ", "\n            ", "\n          "])), indeterminate && "checkbox-indeterminate", isChecked && "checkbox-checked", disabled && "checkbox-disabled"), STATUS_CLASSNAMES[status]),
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n            checkbox\n            ", "\n            ", "\n            ", "\n          "])), indeterminate && "checkbox-indeterminate", isChecked && "checkbox-checked", disabled && "checkbox-disabled"), STATUS_CLASSNAMES[status]),
       style: {
         color: checkedColor
       },

package/cjs/Checkbox/Checkbox.tailwind.d.ts

@@ -1,5 +1,5 @@
-export = buttonPlugin;
-/**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
-declare const buttonPlugin: import('../tailwind-types').TailwindPlugin;
+export = checkboxPlugin;
+declare const checkboxPlugin: {
+    handler: import("tailwindcss/types/config").PluginCreator;
+    config?: import("tailwindcss").Config | undefined;
+};

package/cjs/Checkbox/Checkbox.tailwind.js

@@ -1,24 +1,22 @@
 "use strict";
 
 // @ts-check
-var disabledColor = require("../styles/disabledColor");
-/**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
+var plugin = require("tailwindcss/plugin");
 
+var disabledColor = require("../styles/disabledColor");
 
-var buttonPlugin = function buttonPlugin(_ref) {
+var checkboxPlugin = plugin(function (_ref) {
   var addComponents = _ref.addComponents,
       theme = _ref.theme;
   addComponents({
     ".checkbox": {
       position: "relative",
-      width: 16,
-      height: 16,
+      width: "16px",
+      height: "16px",
       display: "flex",
       justifyContent: "center",
       alignItems: "center",
-      flexShrink: 0,
+      flexShrink: "0",
       overflow: "hidden",
       color: theme("colors.accent.600"),
       background: "linear-gradient(180deg, ".concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.100"), " 100%)"),
@@ -34,7 +32,7 @@ var buttonPlugin = function buttonPlugin(_ref) {
         color: "currentColor",
         transition: "150ms cubic-bezier(0.23, 1, 0.32, 1)",
         transform: "scale(1.8)",
-        opacity: 0
+        opacity: "0"
       }
     },
     ".checkbox-invalid:not(.checkbox-disabled)": {
@@ -50,7 +48,7 @@ var buttonPlugin = function buttonPlugin(_ref) {
         boxShadow: "\n          inset 0px 1px 0px 0px ".concat(theme("colors.shadow.5"), ",\n          0 0 0 1px currentColor\n        ")
       },
       "& > .checkbox-icon": {
-        opacity: 1,
+        opacity: "1",
         transform: "scale(1)"
       }
     },
@@ -62,9 +60,8 @@ var buttonPlugin = function buttonPlugin(_ref) {
       color: disabledColor(theme("colors.grey.200"))
     },
     ".checkbox-icon": {
-      strokeWidth: 3
+      strokeWidth: "3px"
     }
   });
-};
-
-module.exports = buttonPlugin;
+});
+module.exports = checkboxPlugin;

package/cjs/ClickAwayContainer/ClickAwayContainer.d.ts

@@ -1,4 +1,4 @@
-import type { FC } from "react";
+import type { FC, ReactNode } from "react";
 interface ClickAwayContextType {
     registerElement(element: HTMLElement): void;
     unregisterElement(element: HTMLElement): void;
@@ -14,6 +14,7 @@ export interface ClickAwayContainerProps {
      * happens outside of the subtree tracked by this component instance
      * */
     onClickAway(evt: Event): void;
+    children?: ReactNode;
 }
 /**
  * ClickAwayContainer is a low-level, compound component. It doesn't render anything apart from its children.

package/cjs/DatePicker/DatePicker/DatePicker.js

@@ -7,14 +7,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _react = require("react");
 
+var _Satellite = require("../../Satellite");
+
 var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
 
 var _Calendar = _interopRequireDefault(require("../components/Calendar"));
@@ -42,7 +44,11 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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 DatePicker = function DatePicker(props) {
-  var _props$initialValue, _props$validate, _props$validate$call, _props$locale, _props$calendarProps;
+  var _props$initialValue, _props$validate, _props$validate$call, _props$calendarProps;
+
+  var contextLocale = (0, _Satellite.useLocale)("datePicker");
+
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, _utils.DEFAULT_DATE_PICKER_LOCALE), contextLocale), props.locale);
 
   var _useState = (0, _react.useState)(null),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -127,7 +133,7 @@ var DatePicker = function DatePicker(props) {
         children: value ? /*#__PURE__*/(0, _jsxRuntime.jsx)("time", {
           dateTime: value.toISOString(),
           children: (0, _utils.formatDate)(value)
-        }) : ((_props$locale = props.locale) === null || _props$locale === void 0 ? void 0 : _props$locale.openButton) || "Enter a date..."
+        }) : locale.openButton
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal["default"], {
       className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["date-picker"]))),
@@ -151,7 +157,7 @@ var DatePicker = function DatePicker(props) {
             selectedDays: value !== null && value !== void 0 ? value : undefined,
             onDayClick: handleDayClick
           }, yearProps), {}, {
-            locale: props.locale
+            locale: locale
           })), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Footer["default"], {
             children: [props.renderLeftFooter && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
               children: props.renderLeftFooter({
@@ -162,7 +168,7 @@ var DatePicker = function DatePicker(props) {
               onCancel: handleClose,
               onApply: handleApply,
               disableApply: !isValid,
-              locale: props.locale
+              locale: locale
             })]
           })]
         }), props.renderRightPanel && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
@@ -176,7 +182,7 @@ var DatePicker = function DatePicker(props) {
               onCancel: handleClose,
               onApply: handleApply,
               disableApply: !isValid,
-              locale: props.locale
+              locale: locale
             })]
           })]
         })]

package/cjs/DatePicker/DatePicker.tailwind.d.ts

@@ -1,5 +1,5 @@
 export = datePickerPlugin;
-/**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
-declare const datePickerPlugin: import('../tailwind-types').TailwindPlugin;
+declare const datePickerPlugin: {
+    handler: import("tailwindcss/types/config").PluginCreator; /** @type {string} */
+    config?: import("tailwindcss").Config | undefined;
+};