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

package/esm/AutoComplete/utils.d.ts

@@ -1,4 +1,5 @@
-import type { AutoCompleteMultiProps, AutoCompleteProps, Option } from "./types";
+import type { AutoCompleteLocale, AutoCompleteMultiProps, AutoCompleteProps, Option } from "./types";
 export declare function isAutoCompleteMultiProps<T extends Option = Option>(props: AutoCompleteProps<T>): props is AutoCompleteMultiProps<T>;
 export declare const defaultCreateFromInputValue: <T extends Option = Option>(options: T[] | undefined, inputValue: string) => Option[];
 export declare const caseInsensitiveCreateFromInputValue: <T extends Option = Option>(options: T[] | undefined, inputValue: string) => Option[];
+export declare const DEFAULT_AUTOCOMPLETE_LOCALE: Required<AutoCompleteLocale>;

package/esm/AutoComplete/utils.js

@@ -1,3 +1,4 @@
+import pluralize from "../utils/pluralize";
 export function isAutoCompleteMultiProps(props) {
   return Boolean(props.multiple);
 }
@@ -24,4 +25,19 @@ export var caseInsensitiveCreateFromInputValue = function caseInsensitiveCreateF
   return createFromInputValue(options, inputValue, function (option) {
     return option.value.toString().toLowerCase() === inputValue.toLowerCase();
   });
+};
+export var DEFAULT_AUTOCOMPLETE_LOCALE = {
+  clearInputButton: "Clear input value",
+  emptyStateTitle: "No matches found",
+  itemsAvailable: function itemsAvailable(count) {
+    return "".concat(pluralize(count, "item is", {
+      plural: "items are"
+    }), " available");
+  },
+  optionItemPrefix: function optionItemPrefix(multiple) {
+    return multiple ? "Add" : "Use";
+  },
+  showMoreButton: function showMoreButton(extraResults) {
+    return "Show ".concat(pluralize(extraResults, "result"), " more");
+  }
 };

package/esm/Avatars/ApplicationAvatar.js

@@ -2,7 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2, _templateObject3;
 
-import cx from "classnames";
+import cx from "clsx";
 import stl from "../styles/helpers/satellitePrefixer";
 import { getApplicationInitials, pickApplicationColors } from "./utils";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -18,7 +18,7 @@ export var ApplicationAvatar = function ApplicationAvatar(_ref) {
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? "medium" : _ref$size;
   return /*#__PURE__*/_jsx("div", {
-    className: cx(stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["rounded inline-flex flex-shrink-0 items-center justify-center uppercase"]))), pickApplicationColors(application.applicationId), SIZE_CLASSNAMES[size], className),
+    className: cx(stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["rounded inline-flex shrink-0 items-center justify-center uppercase"]))), pickApplicationColors(application.applicationId), SIZE_CLASSNAMES[size], className),
     style: size === "small" ? {
       fontSize: "8px"
     } : {},

package/esm/Avatars/UserAvatar.js

@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
 var _templateObject, _templateObject2, _templateObject3;
 
-import cx from "classnames";
+import cx from "clsx";
 import { useEffect, useState } from "react";
 import stl from "../styles/helpers/satellitePrefixer";
 import { getUserBackgroundClassName, getUserInitials } from "./utils";

package/esm/Avatars/utils.js

@@ -7,8 +7,12 @@ import stl from "../styles/helpers/satellitePrefixer";
 import hashCode from "../utils/hashCode";
 
 /** APPLICATION */
-var APPLICATION_COLORS_CLASSNAMES = [stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["bg-grey-200 text-grey-800"]))), stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["bg-nebula-200 text-nebula-800"]))), stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["bg-blue-200 text-blue-800"]))), stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["bg-green-200 text-green-800"]))), stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["bg-pink-200 text-pink-800"]))), stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["bg-red-200 text-red-800"]))), stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["bg-orange-200 text-orange-800"]))), // Darker variants
-stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["bg-grey-300 text-grey-900"]))), stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["bg-nebula-300 text-nebula-900"]))), stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["bg-blue-300 text-blue-900"]))), stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["bg-green-300 text-green-900"]))), stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["bg-pink-300 text-pink-900"]))), stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["bg-red-300 text-red-900"]))), stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["bg-orange-300 text-orange-900"])))];
+var APPLICATION_COLORS_CLASSNAMES = [
+/* eslint-disable @algolia/satellite/prefer-accent */
+stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["bg-grey-200 text-grey-800"]))), stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["bg-nebula-200 text-nebula-800"]))), stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["bg-blue-200 text-blue-800"]))), stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["bg-green-200 text-green-800"]))), stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["bg-pink-200 text-pink-800"]))), stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["bg-red-200 text-red-800"]))), stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["bg-orange-200 text-orange-800"]))), // Darker variants
+stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["bg-grey-300 text-grey-900"]))), stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["bg-nebula-300 text-nebula-900"]))), stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["bg-blue-300 text-blue-900"]))), stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["bg-green-300 text-green-900"]))), stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["bg-pink-300 text-pink-900"]))), stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["bg-red-300 text-red-900"]))), stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["bg-orange-300 text-orange-900"])))
+/* eslint-enable @algolia/satellite/prefer-accent */
+];
 export var pickApplicationColors = function pickApplicationColors(applicationId) {
   var _APPLICATION_COLORS_C;
 
@@ -39,8 +43,12 @@ export var getApplicationInitials = function getApplicationInitials(_ref) {
 };
 /** USER */
 
-var USER_COLORS_CLASSNAMES = [stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["bg-grey-400"]))), stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["bg-nebula-400"]))), stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["bg-blue-400"]))), stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["bg-green-400"]))), stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["bg-pink-400"]))), stl(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["bg-red-400"]))), stl(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["bg-orange-400"]))), // Darker variants
-stl(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["bg-grey-700"]))), stl(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["bg-nebula-700"]))), stl(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["bg-blue-700"]))), stl(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["bg-green-700"]))), stl(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["bg-pink-700"]))), stl(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["bg-red-700"]))), stl(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["bg-orange-700"])))];
+var USER_COLORS_CLASSNAMES = [
+/* eslint-disable @algolia/satellite/prefer-accent */
+stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["bg-grey-400"]))), stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["bg-nebula-400"]))), stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["bg-blue-400"]))), stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["bg-green-400"]))), stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["bg-pink-400"]))), stl(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["bg-red-400"]))), stl(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["bg-orange-400"]))), // Darker variants
+stl(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["bg-grey-700"]))), stl(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["bg-nebula-700"]))), stl(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["bg-blue-700"]))), stl(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["bg-green-700"]))), stl(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["bg-pink-700"]))), stl(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["bg-red-700"]))), stl(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["bg-orange-700"])))
+/* eslint-enable @algolia/satellite/prefer-accent */
+];
 export var getUserBackgroundClassName = function getUserBackgroundClassName(email) {
   var _USER_COLORS_CLASSNAM;
 

package/esm/Badge/Badge.js

@@ -9,7 +9,7 @@ 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) { _defineProperty(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; }
 
-import cx from "classnames";
+import cx from "clsx";
 import stl from "../styles/helpers/satellitePrefixer";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";

package/esm/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/esm/Banners/Alert/Alert.js

@@ -2,7 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23;
 
-import cx from "classnames";
+import cx from "clsx";
 import { AlertCircle, AlertOctagon, AlertTriangle, CheckCircle, X } from "react-feather";
 import { IconButton } from "../../Button";
 import stl from "../../styles/helpers/satellitePrefixer";
@@ -106,7 +106,7 @@ export var Alert = function Alert(_ref) {
     className: containerClassName,
     style: style,
     children: [/*#__PURE__*/_jsx(Icon, {
-      className: cx(stl(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n            flex-shrink-0 mr-2\n            ", "\n            "])), title ? "mt-1" : "mt-2px"), ICON_CLASSNAME_VARIANTS[variant]),
+      className: cx(stl(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n            shrink-0 mr-2\n            ", "\n            "])), title ? "mt-1" : "mt-2px"), ICON_CLASSNAME_VARIANTS[variant]),
       size: "1rem"
     }), /*#__PURE__*/_jsxs("div", {
       className: stl(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["flex flex-1 flex-col ", ""])), onDismiss && "mr-6"),

package/esm/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/esm/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/esm/Banners/Promote/Promote.js

@@ -2,7 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
 
-import cx from "classnames";
+import cx from "clsx";
 import { X } from "react-feather";
 import { IconButton } from "../../Button";
 import Card from "../../Card";

package/esm/Button/Button.js

@@ -9,7 +9,7 @@ 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) { _defineProperty(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; }
 
-import cx from "classnames";
+import cx from "clsx";
 import ProgressSpinner from "../ProgressSpinner";
 import stl from "../styles/helpers/satellitePrefixer";
 import { BUTTON_LOADER_ICON_SIZES, BUTTON_SIZE_CLASSNAMES, BUTTON_VARIANT_CLASSNAMES, getIconColorClassName } from "./styles";
@@ -68,12 +68,12 @@ export var Button = function Button(props) {
       size: BUTTON_LOADER_ICON_SIZES[size],
       thickness: 1
     }), StartIcon && /*#__PURE__*/_jsx(StartIcon, {
-      className: cx(stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["flex-shrink-0 pr-2"]))), iconClassNames)
+      className: cx(stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["shrink-0 pr-2"]))), iconClassNames)
     }), /*#__PURE__*/_jsx("span", {
       className: cx(stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["truncate text-center"]))), textClassNames),
       children: children
     }), EndIcon && /*#__PURE__*/_jsx(EndIcon, {
-      className: cx(stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["flex-shrink-0 pl-2"]))), iconClassNames)
+      className: cx(stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["shrink-0 pl-2"]))), iconClassNames)
     })]
   }));
 };

package/esm/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/esm/Button/Button.tailwind.js

@@ -1,13 +1,11 @@
-import _disabledColor from "../styles/disabledColor";
 import _rgba from "../styles/rgba";
+import _disabledColor from "../styles/disabledColor";
+import _plugin from "tailwindcss/plugin";
 // @ts-check
-var rgba = _rgba;
+var plugin = _plugin;
 var disabledColor = _disabledColor;
-/**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
-
-var buttonPlugin = function buttonPlugin(_ref) {
+var rgba = _rgba;
+var buttonPlugin = plugin(function (_ref) {
   var addComponents = _ref.addComponents,
       theme = _ref.theme;
   // Button
@@ -135,24 +133,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"
       }
     }
   });
-};
-
+});
 export default buttonPlugin;

package/esm/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/esm/Button/ButtonGroup.js

@@ -2,7 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import cx from "classnames";
+import cx from "clsx";
 import stl from "../styles/helpers/satellitePrefixer";
 import { jsx as _jsx } from "react/jsx-runtime";
 

package/esm/Button/IconButton.js

@@ -9,7 +9,7 @@ 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) { _defineProperty(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; }
 
-import cx from "classnames";
+import cx from "clsx";
 import ProgressSpinner from "../ProgressSpinner";
 import stl from "../styles/helpers/satellitePrefixer";
 import { TooltipWrapper } from "../Tooltip";

package/esm/Card/Card.js

@@ -2,7 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
-import cx from "classnames";
+import cx from "clsx";
 import { forwardRef } from "react";
 import stl from "../styles/helpers/satellitePrefixer";
 import CardHeader from "./components/CardHeader";

package/esm/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/esm/Card/Card.tailwind.js

@@ -1,9 +1,7 @@
+import _plugin from "tailwindcss/plugin";
 // @ts-check
-
-/**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
-var cardPlugin = function cardPlugin(_ref) {
+var plugin = _plugin;
+var cardPlugin = plugin(function (_ref) {
   var addComponents = _ref.addComponents,
       theme = _ref.theme;
   addComponents({
@@ -14,7 +12,7 @@ var cardPlugin = function cardPlugin(_ref) {
       padding: theme("spacing.6")
     },
     ".card-fullbleed": {
-      padding: 0
+      padding: "0px"
     },
     ".card-z100": {
       boxShadow: theme("boxShadow.z100")
@@ -30,9 +28,8 @@ var cardPlugin = function cardPlugin(_ref) {
     },
     ".card-z500": {
       boxShadow: theme("boxShadow.z500"),
-      borderRadius: 8
+      borderRadius: "8px"
     }
   });
-};
-
+});
 export default cardPlugin;

package/esm/Card/components/CardHeader.js

@@ -10,7 +10,7 @@ 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) { _defineProperty(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; }
 
-import cx from "classnames";
+import cx from "clsx";
 import stl from "../../styles/helpers/satellitePrefixer";
 import { jsx as _jsx } from "react/jsx-runtime";
 export var CardHeader = function CardHeader(_ref) {

package/esm/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/esm/Card/components/CardTitle.js

@@ -10,7 +10,7 @@ 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) { _defineProperty(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; }
 
-import cx from "classnames";
+import cx from "clsx";
 import stl from "../../styles/helpers/satellitePrefixer";
 import { jsx as _jsx } from "react/jsx-runtime";
 export var CardTitle = function CardTitle(_ref) {

package/esm/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/esm/Checkbox/Checkbox.js

@@ -10,7 +10,7 @@ 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) { _defineProperty(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; }
 
-import cx from "classnames";
+import cx from "clsx";
 import { forwardRef, useMemo, useState } from "react";
 import { Check, Minus } from "react-feather";
 import { useFieldState } from "../Field";

package/esm/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/esm/Checkbox/Checkbox.tailwind.js

@@ -1,22 +1,20 @@
 import _disabledColor from "../styles/disabledColor";
+import _plugin from "tailwindcss/plugin";
 // @ts-check
+var plugin = _plugin;
 var disabledColor = _disabledColor;
-/**
- * @type {import('../tailwind-types').TailwindPlugin}
- */
-
-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%)"),
@@ -32,7 +30,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)": {
@@ -48,7 +46,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)"
       }
     },
@@ -60,9 +58,8 @@ var buttonPlugin = function buttonPlugin(_ref) {
       color: disabledColor(theme("colors.grey.200"))
     },
     ".checkbox-icon": {
-      strokeWidth: 3
+      strokeWidth: "3px"
     }
   });
-};
-
-export default buttonPlugin;
+});
+export default checkboxPlugin;

package/esm/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/esm/DatePicker/DatePicker/DatePicker.js

@@ -1,6 +1,6 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
@@ -9,6 +9,7 @@ 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) { _defineProperty(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; }
 
 import { useMemo, useReducer, useState } from "react";
+import { useLocale } from "../../Satellite";
 import stl from "../../styles/helpers/satellitePrefixer";
 import Calendar from "../components/Calendar";
 import Display from "../components/Display";
@@ -16,14 +17,18 @@ import Footer from "../components/Footer";
 import FooterActions from "../components/FooterActions";
 import Modal from "../components/Modal";
 import SidePanel from "../components/SidePanel";
-import { formatDate } from "../utils";
+import { DEFAULT_DATE_PICKER_LOCALE, formatDate } from "../utils";
 import { DatePickerActionTypes, datePickerReducer, initDatePickerReducer } from "./datePickerReducer";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 
 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 = useLocale("datePicker");
+
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_DATE_PICKER_LOCALE), contextLocale), props.locale);
 
   var _useState = useState(null),
       _useState2 = _slicedToArray(_useState, 2),
@@ -108,7 +113,7 @@ var DatePicker = function DatePicker(props) {
         children: value ? /*#__PURE__*/_jsx("time", {
           dateTime: value.toISOString(),
           children: formatDate(value)
-        }) : ((_props$locale = props.locale) === null || _props$locale === void 0 ? void 0 : _props$locale.openButton) || "Enter a date..."
+        }) : locale.openButton
       })
     }), /*#__PURE__*/_jsx(Modal, {
       className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["date-picker"]))),
@@ -132,7 +137,7 @@ var DatePicker = function DatePicker(props) {
             selectedDays: value !== null && value !== void 0 ? value : undefined,
             onDayClick: handleDayClick
           }, yearProps), {}, {
-            locale: props.locale
+            locale: locale
           })), /*#__PURE__*/_jsxs(Footer, {
             children: [props.renderLeftFooter && /*#__PURE__*/_jsx("div", {
               children: props.renderLeftFooter({
@@ -143,7 +148,7 @@ var DatePicker = function DatePicker(props) {
               onCancel: handleClose,
               onApply: handleApply,
               disableApply: !isValid,
-              locale: props.locale
+              locale: locale
             })]
           })]
         }), props.renderRightPanel && /*#__PURE__*/_jsxs(_Fragment, {
@@ -157,7 +162,7 @@ var DatePicker = function DatePicker(props) {
               onCancel: handleClose,
               onApply: handleApply,
               disableApply: !isValid,
-              locale: props.locale
+              locale: locale
             })]
           })]
         })]

package/esm/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;
+};