@algolia/satellite 2.0.0-rc.1 → 2.0.0-rc.3

package/dist/cjs/Actions/Button/PolymorphicIconButton.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { IconComponentType } from "../../Icons";
-import type { TooltipWrapperBaseProps } from "../../Overlay/Tooltip/types";
+import type { TooltipWrapperBaseProps } from "../../Overlay/TooltipWrapper/types";
 import type { ButtonSize, ButtonVariant, PolymorphicComponentPropWithRef } from "./types";
 export interface IconButtonBaseProps {
     /**

package/dist/cjs/Actions/{Switch/Switch.d.ts → SegmentedControl/SegmentedControl.d.ts}

@@ -1,6 +1,6 @@
 import type { FC, ReactNode } from "react";
-import type { SwitchSize } from "./types";
-export interface SwitchProps {
+import type { SegmentedControlSize } from "./types";
+export interface SegmentedControlProps {
     /**
      * The class name of the `Switch`.
      */
@@ -24,15 +24,15 @@ export interface SwitchProps {
     /**
      * The size of the `Switch`.
      */
-    size?: SwitchSize;
+    size?: SegmentedControlSize;
     /**
      * Optional name attribute for the radio inputs.
      */
     name?: string;
 }
 /**
- * The `Switch` component is used to select one option among a list of options.
+ * The `SegmentedControl` component is used to select one option among a list of options.
  *
- * See the [Switch documentation page](https://satellite.algolia.com/components/controls/switch) for more information.
+ * See the [SegmentedControl documentation page](https://satellite.algolia.com/components/controls/segmented-control) for more information.
  */
-export declare const Switch: FC<SwitchProps>;
+export declare const SegmentedControl: FC<SegmentedControlProps>;

package/dist/cjs/Actions/{Switch/Switch.js → SegmentedControl/SegmentedControl.js}

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Switch = void 0;
+exports.SegmentedControl = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _clsx = _interopRequireDefault(require("clsx"));
@@ -18,11 +18,11 @@ var _utils = require("./utils");
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject, _templateObject2;
 /**
- * The `Switch` component is used to select one option among a list of options.
+ * The `SegmentedControl` component is used to select one option among a list of options.
  *
- * See the [Switch documentation page](https://satellite.algolia.com/components/controls/switch) for more information.
+ * See the [SegmentedControl documentation page](https://satellite.algolia.com/components/controls/segmented-control) for more information.
  */
-var Switch = exports.Switch = function Switch(_ref) {
+var SegmentedControl = exports.SegmentedControl = function SegmentedControl(_ref) {
   var className = _ref.className,
     children = _ref.children,
     value = _ref.value,
@@ -32,7 +32,7 @@ var Switch = exports.Switch = function Switch(_ref) {
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? "medium" : _ref$size;
   var _useState = (0, _react.useState)(function () {
-      return (0, _uniqueId.uniqueId)("SwitchName-");
+      return (0, _uniqueId.uniqueId)("SegmentedControlName-");
     }),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 1),
     componentDefaultName = _useState2[0];
@@ -79,7 +79,7 @@ var Switch = exports.Switch = function Switch(_ref) {
     },
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       ref: containerRef,
-      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["switch focusable-visible-within\n           relative inline-flex typo-display-body rounded bg-grey-100\n           ", "\n          "])), size === "large" ? "switch-large space-x-1" : "space-x-2px"), _styles.BUTTON_SIZE_CLASSNAMES[size], className),
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["segmented-control focusable-visible-within\n           relative inline-flex typo-display-body rounded bg-grey-100\n           ", "\n          "])), size === "large" ? "segmented-control-large space-x-1" : "space-x-2px"), _styles.BUTTON_SIZE_CLASSNAMES[size], className),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         ref: valueIndicatorRef,
         style: valueIndicatorStyle,

package/dist/cjs/{Fields/Toggle/Toggle.tailwind.d.ts → Actions/SegmentedControl/SegmentedControl.tailwind.d.ts}

@@ -1,5 +1,5 @@
-export = togglePlugin;
-declare const togglePlugin: {
+export = segmentedControlPlugin;
+declare const segmentedControlPlugin: {
     handler: import("tailwindcss/types/config").PluginCreator;
     config?: Partial<import("tailwindcss/types/config").Config> | undefined;
 };

package/dist/cjs/Actions/{Switch/Switch.tailwind.js → SegmentedControl/SegmentedControl.tailwind.js}

@@ -2,18 +2,18 @@
 
 // @ts-check
 var plugin = require("tailwindcss/plugin");
-var switchPlugin = plugin(function (_ref) {
+var segmentedControlPlugin = plugin(function (_ref) {
   var addComponents = _ref.addComponents,
     theme = _ref.theme;
   addComponents({
-    ".switch": {
+    ".segmented-control": {
       // this + position relative helps create a new stack context (helps with z-index)
       zIndex: "1",
       boxShadow: "0 0 0 2px ".concat(theme("colors.grey.100"))
     },
-    ".switch-large": {
+    ".segmented-control-large": {
       boxShadow: "0 0 0 4px ".concat(theme("colors.grey.100"))
     }
   });
 });
-module.exports = switchPlugin;
+module.exports = segmentedControlPlugin;

package/dist/cjs/Actions/{Switch/SwitchOption.d.ts → SegmentedControl/SegmentedControlOption.d.ts}

@@ -1,5 +1,5 @@
 import type { FC, ReactNode } from "react";
-export interface SwitchOptionProps {
+export interface SegmentedControlOptionProps {
     /**
      * The value associated with this `SwitchOption`.
      */
@@ -13,4 +13,4 @@ export interface SwitchOptionProps {
      */
     children: ReactNode;
 }
-export declare const SwitchOption: FC<SwitchOptionProps>;
+export declare const SegmentedControlOption: FC<SegmentedControlOptionProps>;

package/dist/cjs/Actions/{Switch/SwitchOption.js → SegmentedControl/SegmentedControlOption.js}

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SwitchOption = void 0;
+exports.SegmentedControlOption = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _RadioGroupContext = require("../../Fields/RadioGroup/RadioGroupContext");
@@ -15,7 +15,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject, _templateObject2;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var SwitchOption = exports.SwitchOption = function SwitchOption(_ref) {
+var SegmentedControlOption = exports.SegmentedControlOption = function SegmentedControlOption(_ref) {
   var value = _ref.value,
     disabled = _ref.disabled,
     children = _ref.children;

package/dist/cjs/Actions/SegmentedControl/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./SegmentedControl";
+export * from "./SegmentedControlOption";

package/dist/cjs/Actions/SegmentedControl/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _SegmentedControl = require("./SegmentedControl");
+Object.keys(_SegmentedControl).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _SegmentedControl[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _SegmentedControl[key];
+    }
+  });
+});
+var _SegmentedControlOption = require("./SegmentedControlOption");
+Object.keys(_SegmentedControlOption).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _SegmentedControlOption[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _SegmentedControlOption[key];
+    }
+  });
+});

package/dist/cjs/Actions/SegmentedControl/types.d.ts

@@ -0,0 +1,7 @@
+export declare type SegmentedControlSize = "small" | "medium" | "large";
+export interface SegmentedControlContextValue {
+    name: string;
+    value: string;
+    disabled?: boolean;
+    onChange: (value: string) => void;
+}

package/dist/cjs/Actions/{Switch → SegmentedControl}/utils.d.ts

@@ -1,6 +1,6 @@
-export declare const SWITCH_ANIMATION_KEY = "data-switch-animation-key";
+export declare const SEGMENTED_CONTROL_ANIMATION_KEY = "data-segmented-control-animation-key";
 export declare const buildAnimationKeyValue: (name: string, value: string) => string;
 export declare const buildAnimationKeySelector: (name: string, value: string) => string;
 export declare const buildAnimationProps: (name: string, value: string) => {
-    "data-switch-animation-key": string;
+    "data-segmented-control-animation-key": string;
 };

package/dist/cjs/Actions/{Switch → SegmentedControl}/utils.js

@@ -4,15 +4,15 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.buildAnimationProps = exports.buildAnimationKeyValue = exports.buildAnimationKeySelector = exports.SWITCH_ANIMATION_KEY = void 0;
+exports.buildAnimationProps = exports.buildAnimationKeyValue = exports.buildAnimationKeySelector = exports.SEGMENTED_CONTROL_ANIMATION_KEY = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var SWITCH_ANIMATION_KEY = exports.SWITCH_ANIMATION_KEY = "data-switch-animation-key";
+var SEGMENTED_CONTROL_ANIMATION_KEY = exports.SEGMENTED_CONTROL_ANIMATION_KEY = "data-segmented-control-animation-key";
 var buildAnimationKeyValue = exports.buildAnimationKeyValue = function buildAnimationKeyValue(name, value) {
   return "".concat(name, "-").concat(value);
 };
 var buildAnimationKeySelector = exports.buildAnimationKeySelector = function buildAnimationKeySelector(name, value) {
-  return "[".concat(SWITCH_ANIMATION_KEY, "=\"").concat(buildAnimationKeyValue(name, value), "\"]");
+  return "[".concat(SEGMENTED_CONTROL_ANIMATION_KEY, "=\"").concat(buildAnimationKeyValue(name, value), "\"]");
 };
 var buildAnimationProps = exports.buildAnimationProps = function buildAnimationProps(name, value) {
-  return (0, _defineProperty2["default"])({}, SWITCH_ANIMATION_KEY, buildAnimationKeyValue(name, value));
+  return (0, _defineProperty2["default"])({}, SEGMENTED_CONTROL_ANIMATION_KEY, buildAnimationKeyValue(name, value));
 };

package/dist/cjs/Actions/index.d.ts

@@ -4,7 +4,7 @@ export * from "./ButtonGroup/ButtonGroup";
 export * from "./ButtonLink/ButtonLink";
 export * from "./IconButton/IconButton";
 export * from "./IconButtonLink/IconButtonLink";
-export * from "./Switch";
+export * from "./SegmentedControl";
 export * from "./ToggleButton/ToggleButton";
 export * from "./ToggleGroup/ToggleGroup";
 export type { ButtonSize, ButtonVariant } from "./Button/types";

package/dist/cjs/Actions/index.js

@@ -69,14 +69,14 @@ Object.keys(_IconButtonLink).forEach(function (key) {
     }
   });
 });
-var _Switch = require("./Switch");
-Object.keys(_Switch).forEach(function (key) {
+var _SegmentedControl = require("./SegmentedControl");
+Object.keys(_SegmentedControl).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _Switch[key]) return;
+  if (key in exports && exports[key] === _SegmentedControl[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _Switch[key];
+      return _SegmentedControl[key];
     }
   });
 });

package/dist/cjs/Avatars/ApplicationAvatar/ApplicationAvatar.d.ts

@@ -1,5 +1,6 @@
 import type { FC } from "react";
-import type { ApplicationAvatarSize, MinimalApplication } from "../types";
+import type { AvatarSize, MinimalApplication } from "../types";
+declare type ApplicationAvatarSize = "small" | AvatarSize;
 export interface ApplicationAvatarProps {
     /**
      * A minimal application object containing `applicationID` and `name`.
@@ -7,7 +8,7 @@ export interface ApplicationAvatarProps {
     application: MinimalApplication;
     /**
      * The size of the `ApplicationAvatar`.
-     * @default "medium"
+     * @default "large"
      */
     size?: ApplicationAvatarSize;
     /**
@@ -21,3 +22,4 @@ export interface ApplicationAvatarProps {
  * See the [Application Avatar documentation page](https://satellite.algolia.com/components/images/application-avatar) for more information.
  */
 export declare const ApplicationAvatar: FC<ApplicationAvatarProps>;
+export {};

package/dist/cjs/Avatars/ApplicationAvatar/ApplicationAvatar.js

@@ -10,10 +10,12 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
 var _utils = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 var SIZE_CLASSNAMES = {
-  small: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["w-4 h-4"]))),
-  medium: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["w-8 h-8"])))
+  small: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["w-4 h-4 text-[8px]"]))),
+  medium: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["w-6 h-6 text-sm"]))),
+  large: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["w-8 h-8"]))),
+  xlarge: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["w-12 h-12 text-lg"])))
 };
 /**
  * The `ApplicationAvatar` component is used as a visual representation of an application.
@@ -24,14 +26,11 @@ var ApplicationAvatar = exports.ApplicationAvatar = function ApplicationAvatar(_
   var className = _ref.className,
     application = _ref.application,
     _ref$size = _ref.size,
-    size = _ref$size === void 0 ? "medium" : _ref$size;
+    size = _ref$size === void 0 ? "large" : _ref$size;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     role: "img",
     "aria-label": application.name || "Application's avatar",
-    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["rounded inline-flex shrink-0 items-center justify-center uppercase"]))), (0, _utils.pickApplicationColors)(application.applicationId), SIZE_CLASSNAMES[size], className),
-    style: size === "small" ? {
-      fontSize: "8px"
-    } : {},
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["rounded inline-flex shrink-0 items-center justify-center uppercase"]))), (0, _utils.pickApplicationColors)(application.applicationId), SIZE_CLASSNAMES[size], className),
     children: (0, _utils.getApplicationInitials)(application)
   });
 };

package/dist/cjs/Avatars/UserAvatar/UserAvatar.d.ts

@@ -1,8 +1,9 @@
 import type { FC } from "react";
-import type { MinimalUser } from "../types";
+import { type AvatarSize, type MinimalUser } from "../types";
 export declare type UserAvatarLocale = {
     fallbackText?: string;
 };
+declare type UserAvatarSize = AvatarSize | number;
 export interface UserAvatarProps {
     /**
      * A minimal user object containing `name`, `email` and `avatar`.
@@ -10,9 +11,10 @@ export interface UserAvatarProps {
     user: MinimalUser;
     /**
      * The size of the `UserAvatar`.
-     * @default 32
-     */
-    size?: number;
+     * medium, large, xlarge or in px
+     * @default large
+     * */
+    size?: UserAvatarSize;
     /**
      * The locale of the `UserAvatar`.
      * @default { fallbackText: `User's avatar` }"
@@ -29,3 +31,4 @@ export interface UserAvatarProps {
  * See the [User Avatar documentation page](https://satellite.algolia.com/components/images/user-avatar) for more information.
  */
 export declare const UserAvatar: FC<UserAvatarProps>;
+export {};

package/dist/cjs/Avatars/UserAvatar/UserAvatar.js

@@ -5,20 +5,26 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.UserAvatar = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _reactAvatar = require("@radix-ui/react-avatar");
 var _clsx = _interopRequireDefault(require("clsx"));
 var _Satellite = require("../../Satellite");
 var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
+var _types = require("../types");
 var _utils = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var DEFAULT_LOCALE = {
   fallbackText: "User's avatar"
 };
+var SIZE_CLASSNAMES = {
+  medium: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["w-6 h-6 text-sm"]))),
+  large: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["w-8 h-8"]))),
+  xlarge: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["w-12 h-12 text-lg"])))
+};
 /**
  * The `UserAvatar` component is used as a visual representation of a user.
  *
@@ -29,28 +35,28 @@ var UserAvatar = exports.UserAvatar = function UserAvatar(_ref) {
   var className = _ref.className,
     user = _ref.user,
     _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 32 : _ref$size,
+    size = _ref$size === void 0 ? "large" : _ref$size,
     propsLocale = _ref.locale;
   var contextLocale = (0, _Satellite.useLocale)("userAvatar");
   var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_LOCALE), contextLocale), propsLocale);
   var fallbackName = user.name || user.email || locale.fallbackText;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactAvatar.Root, {
-    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["overflow-hidden flex justify-center items-center rounded-full"]))), (0, _utils.getUserBackgroundClassName)((_user$email = user.email) !== null && _user$email !== void 0 ? _user$email : "no-email"), className),
-    style: {
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["overflow-hidden flex justify-center items-center rounded-full"]))), (0, _utils.getUserBackgroundClassName)((_user$email = user.email) !== null && _user$email !== void 0 ? _user$email : "no-email"), (0, _types.isSize)(size) && SIZE_CLASSNAMES[size], className),
+    style: isNaN(+size) ? undefined : {
       width: size,
       height: size
     },
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactAvatar.Image, {
-      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["h-full w-full object-cover"]))),
+      className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["h-full w-full object-cover"]))),
       src: user.avatar,
       alt: fallbackName
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactAvatar.AvatarFallback, {
-      className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["flex h-full w-full items-center justify-center uppercase"]))),
+      className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["flex h-full w-full items-center justify-center uppercase"]))),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         "aria-hidden": true,
         children: (0, _utils.getUserInitials)(user)
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["sr-only"]))),
+        className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["sr-only"]))),
         children: fallbackName
       })]
     })]

package/dist/cjs/Avatars/types.d.ts

@@ -1,5 +1,6 @@
-export declare const applicationAvatarSizes: readonly ["small", "medium"];
-export declare type ApplicationAvatarSize = (typeof applicationAvatarSizes)[number];
+export declare const AvatarSizes: readonly ["medium", "large", "xlarge"];
+export declare type AvatarSize = (typeof AvatarSizes)[number];
+export declare function isSize(value: string): value is AvatarSize;
 export declare type MinimalApplication = {
     /**
      * The application ID.

package/dist/cjs/Avatars/types.js

@@ -3,5 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.applicationAvatarSizes = void 0;
-var applicationAvatarSizes = exports.applicationAvatarSizes = ["small", "medium"];
+exports.AvatarSizes = void 0;
+exports.isSize = isSize;
+var AvatarSizes = exports.AvatarSizes = ["medium", "large", "xlarge"];
+function isSize(value) {
+  return AvatarSizes.includes(value);
+}

package/dist/cjs/Fields/AutoComplete/AutoComplete.js

@@ -330,15 +330,16 @@ var AutoComplete = exports.AutoComplete = /*#__PURE__*/(0, _react.forwardRef)(fu
     oldHideMenu.current = hideMenu;
     void ((_menuPopper$update2 = menuPopper.update) === null || _menuPopper$update2 === void 0 ? void 0 : _menuPopper$update2.call(menuPopper));
   }
+  var setContainerEl = (0, _react.useCallback)(function (el) {
+    setContainerElement(el);
+    // @ts-expect-error - setContainerMeasureRef does accept HTMLDivElement | null
+    setContainerMeasureRef(el);
+  }, [setContainerMeasureRef]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_AutoCompleteContext.AutoCompleteProvider, {
     locale: locale,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["flex"]))), className),
-      ref: function ref(el) {
-        setContainerElement(el);
-        // @ts-expect-error - setContainerMeasureRef does accept HTMLDivElement | null
-        setContainerMeasureRef(el);
-      },
+      ref: setContainerEl,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["autocomplete-container"]))), inputFocused && (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["focusable-show"]))), variant === "large" && (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["autocomplete-large py-1"]))), disabled && (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["autocomplete-disabled"]))), isInvalid && (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["autocomplete-invalid"]))), noWrap && (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["autocomplete-nowrap"])))),
         onClick: function onClick() {

package/dist/cjs/Fields/DateInput/DateInput.js

@@ -157,7 +157,8 @@ var DateInput = exports.DateInput = /*#__PURE__*/(0, _react.forwardRef)(function
           onClick: toggle
         });
       },
-      modalPlacement: (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.modalPlacement) || "bottom-end",
+      popoverSide: (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.popoverSide) || "bottom",
+      popoverAlign: (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.popoverAlign) || "end",
       popoverAnchor: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["absolute inset-0 pointer-events-none"])))
       }),

package/dist/cjs/Fields/DatePicker/DatePicker/DatePicker.js

@@ -106,7 +106,8 @@ var DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.forwardRef)(functi
         payload: open
       });
     },
-    placement: props.modalPlacement,
+    side: props.popoverSide,
+    align: props.popoverAlign,
     title: locale.title,
     className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["date-picker"]))),
     onOpenAutoFocus: function onOpenAutoFocus(evt) {

package/dist/cjs/Fields/DatePicker/DateRangePicker/DateRangePicker.js

@@ -23,7 +23,7 @@ var _dateRangePickerReducer = require("./dateRangePickerReducer");
 var _dateRangePickerTimeRange = require("./dateRangePickerTimeRange");
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject, _templateObject2;
-var _excluded = ["id", "range", "displayOnlyRanges", "calendarProps", "initialState", "stateReducer", "onAction", "validate", "renderTarget", "renderLeftFooter", "renderRightPanel", "buttonSize", "modalPlacement", "locale"];
+var _excluded = ["id", "range", "displayOnlyRanges", "calendarProps", "initialState", "stateReducer", "onAction", "validate", "renderTarget", "renderLeftFooter", "renderRightPanel", "buttonSize", "popoverSide", "popoverAlign", "locale"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var defaultValidator = function defaultValidator(_ref) {
@@ -58,7 +58,8 @@ var DateRangePicker = exports.DateRangePicker = function DateRangePicker(_ref2)
     renderLeftFooter = _ref2.renderLeftFooter,
     renderRightPanel = _ref2.renderRightPanel,
     buttonSize = _ref2.buttonSize,
-    modalPlacement = _ref2.modalPlacement,
+    popoverSide = _ref2.popoverSide,
+    popoverAlign = _ref2.popoverAlign,
     propsLocale = _ref2.locale,
     props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
   var contextLocale = (0, _Satellite.useLocale)("datePicker");
@@ -187,7 +188,8 @@ var DateRangePicker = exports.DateRangePicker = function DateRangePicker(_ref2)
         payload: open
       });
     },
-    placement: modalPlacement,
+    side: popoverSide,
+    align: popoverAlign,
     title: locale.title,
     className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["date-range-picker"]))),
     onOpenAutoFocus: function onOpenAutoFocus(evt) {

package/dist/cjs/Fields/DatePicker/components/Popover.d.ts

@@ -6,7 +6,8 @@ export interface DatePickerPopoverProps {
     trigger: ReactNode;
     children: ReactNode;
     anchor?: ReactNode;
-    placement?: Popover.PopoverContentProps["side"] | `${Popover.PopoverContentProps["side"] & string}-${Popover.PopoverContentProps["align"] & string}`;
+    side?: Popover.PopoverContentProps["side"];
+    align?: Popover.PopoverContentProps["align"];
     onOpenAutoFocus?: (event: Event) => void;
     title?: string;
     className?: string;

package/dist/cjs/Fields/DatePicker/components/Popover.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.DatePickerPopover = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var Popover = _interopRequireWildcard(require("@radix-ui/react-popover"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _Satellite = require("../../../Satellite");
@@ -22,16 +21,14 @@ var DatePickerPopover = exports.DatePickerPopover = function DatePickerPopover(_
     trigger = _ref.trigger,
     children = _ref.children,
     anchor = _ref.anchor,
-    _ref$placement = _ref.placement,
-    placement = _ref$placement === void 0 ? "bottom-start" : _ref$placement,
+    _ref$side = _ref.side,
+    side = _ref$side === void 0 ? "bottom" : _ref$side,
+    _ref$align = _ref.align,
+    align = _ref$align === void 0 ? "start" : _ref$align,
     onOpenAutoFocus = _ref.onOpenAutoFocus,
     title = _ref.title,
     className = _ref.className;
   var createPortal = (0, _Satellite.useCreatePortal)();
-  var _ref2 = placement.split("-"),
-    _ref3 = (0, _slicedToArray2["default"])(_ref2, 2),
-    side = _ref3[0],
-    align = _ref3[1];
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Popover.Root, {
     open: isOpen,
     onOpenChange: onOpenChange,

package/dist/cjs/Fields/DatePicker/types.d.ts

@@ -20,9 +20,12 @@ export declare type DatePickerLocale = {
 export declare type SharedDatePickerProps = {
     /**
      * The placement of the `DatePicker`/`DateRangePicker` modal.
-     * @todo Rename this prop to `side`/`align` in the next major version
      */
-    modalPlacement?: DatePickerPopoverProps["placement"];
+    popoverSide?: DatePickerPopoverProps["side"];
+    /**
+     * The alignment of the `DatePicker`/`DateRangePicker` modal.
+     */
+    popoverAlign?: DatePickerPopoverProps["align"];
     /**
      * The anchor element for the `DatePicker`/`DateRangePicker` popover.
      */

package/dist/cjs/Fields/Dropzone/Dropzone.d.ts

@@ -2,7 +2,9 @@
 import type { FileRejection, DropzoneProps as ReactDropZoneProps } from "react-dropzone";
 export declare type DropzoneLocale = {
     clearInput?: string;
+    removeFile?: string;
     placeholder?: (multiple: boolean) => string;
+    clickToSelect?: string;
 };
 export interface DropzoneBaseProps {
     /**
@@ -22,6 +24,10 @@ export interface DropzoneBaseProps {
      * @default false
      */
     clearable?: boolean;
+    /**
+     * The requirements of the `Dropzone`.
+     */
+    requirements?: string;
     /**
      * The class name of the `Dropzone`.
      */
@@ -40,6 +46,11 @@ export interface DropzoneBaseProps {
      * The locale of the `Dropzone`.
      */
     locale?: DropzoneLocale;
+    /**
+     * Whether the `Dropzone` hides the files.
+     * @default false
+     */
+    hideFiles?: boolean;
     /**
      * The accepted file types of the `Dropzone`.
      */
@@ -97,10 +108,10 @@ export interface DropzoneBaseProps {
      */
     validator?: ReactDropZoneProps["validator"];
 }
-export declare type DropzoneProps = DropzoneBaseProps;
+export declare type DropzoneProps = DropzoneBaseProps & Omit<ReactDropZoneProps, "onDropAccepted" | "onDropRejected" | "multiple">;
 /**
  * The `Dropzone` component is used to upload files.
  *
  * See the [Dropzone documentation page](https://satellite.algolia.com/components/forms/dropzone) for more information.
  */
-export declare const Dropzone: import("react").ForwardRefExoticComponent<DropzoneBaseProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const Dropzone: import("react").ForwardRefExoticComponent<DropzoneBaseProps & Omit<ReactDropZoneProps, "multiple" | "onDropAccepted" | "onDropRejected"> & import("react").RefAttributes<HTMLElement>>;