@algolia/satellite 1.0.0-beta.174 → 1.0.0-beta.176

package/cjs/MenuButton/MenuButton.js

@@ -5,68 +5,44 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Content = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+exports["default"] = exports.MenuButton = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/objectDestructuringEmpty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var DropdownMenu = _interopRequireWildcard(require("@radix-ui/react-dropdown-menu"));
-var _clsx = _interopRequireDefault(require("clsx"));
-var _Card = require("../Card");
-var _Satellite = require("../Satellite");
-var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
 var _collapsible = require("./components/collapsible");
+var _Content = require("./components/Content");
 var _CustomTrigger = _interopRequireDefault(require("./components/CustomTrigger"));
 var _DefaultTrigger = _interopRequireDefault(require("./components/DefaultTrigger"));
 var _Divider = _interopRequireDefault(require("./components/Divider"));
 var _items = require("./components/items");
 var _Label = _interopRequireDefault(require("./components/Label"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 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 MenuButton = function MenuButton(_ref) {
+/**
+ * The `MenuButton` component helps users select an item from a list of available options.
+ *
+ * See the [MenuButton documentation page](https://satellite.algolia.com/components/actions/dropdown) for more information.
+ */
+var MenuButton = exports.MenuButton = function MenuButton(_ref) {
   var props = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref), _ref));
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenu.Root, _objectSpread({}, props));
 };
-var Content = exports.Content = function Content(_ref2) {
-  var children = _ref2.children,
-    _ref2$align = _ref2.align,
-    align = _ref2$align === void 0 ? "start" : _ref2$align,
-    _ref2$side = _ref2.side,
-    side = _ref2$side === void 0 ? "bottom" : _ref2$side,
-    className = _ref2.className;
-  var createPortal = (0, _Satellite.useCreatePortal)();
-  return createPortal( /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenu.Content, {
-    align: align,
-    side: side,
-    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["z-dropdown min-w-64 max-w-128"]))), className),
-    sideOffset: 15,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_collapsible.CollapsibleItemsSingleGroup, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.Card, {
-        fullBleed: true,
-        elevation: "300",
-        className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col py-1 text-grey-900"]))),
-        children: children
-      })
-    })
-  }));
-};
-MenuButton.Content = Content;
 MenuButton.CollapsibleItem = _collapsible.CollapsibleItem;
-MenuButton.CollapsibleItemsSingleGroup = _collapsible.CollapsibleItemsSingleGroup;
 MenuButton.CollapsibleItemsMultipleGroup = _collapsible.CollapsibleItemsMultipleGroup;
+MenuButton.CollapsibleItemsSingleGroup = _collapsible.CollapsibleItemsSingleGroup;
+MenuButton.Content = _Content.Content;
+MenuButton.CustomTrigger = _CustomTrigger["default"];
 MenuButton.Divider = _Divider["default"];
+MenuButton.Item = _items.Item;
 MenuButton.Label = _Label["default"];
-MenuButton.Trigger = _DefaultTrigger["default"];
-MenuButton.CustomTrigger = _CustomTrigger["default"];
-MenuButton.ButtonItem = _items.ButtonItem;
 MenuButton.LinkItem = _items.LinkItem;
+MenuButton.RadioGroup = DropdownMenu.RadioGroup;
 MenuButton.RadioItem = _items.RadioItem;
 MenuButton.ToggleItem = _items.ToggleItem;
-MenuButton.RadioGroup = DropdownMenu.RadioGroup;
+MenuButton.Trigger = _DefaultTrigger["default"];
 MenuButton.displayName = "MenuButton";
-var ExperimentalMenuButton = MenuButton;
-var _default = exports["default"] = ExperimentalMenuButton;
+var _default = exports["default"] = MenuButton;

package/cjs/MenuButton/components/Content.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { type DropdownMenuContentProps } from "@radix-ui/react-dropdown-menu";
+export declare type MenuButtonContentProps = Omit<DropdownMenuContentProps, "asChild">;
+export declare const Content: ({ children, align, side, className }: MenuButtonContentProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;

package/cjs/MenuButton/components/Content.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Content = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _reactDropdownMenu = require("@radix-ui/react-dropdown-menu");
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Card = _interopRequireDefault(require("../../Card"));
+var _Satellite = require("../../Satellite");
+var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
+var _collapsible = require("./collapsible");
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2;
+var Content = exports.Content = function Content(_ref) {
+  var children = _ref.children,
+    _ref$align = _ref.align,
+    align = _ref$align === void 0 ? "start" : _ref$align,
+    _ref$side = _ref.side,
+    side = _ref$side === void 0 ? "bottom" : _ref$side,
+    className = _ref.className;
+  var createPortal = (0, _Satellite.useCreatePortal)();
+  return createPortal( /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactDropdownMenu.Content, {
+    align: align,
+    side: side,
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["z-dropdown min-w-64 max-w-128"]))), className),
+    sideOffset: 15,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_collapsible.CollapsibleItemsSingleGroup, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card["default"], {
+        fullBleed: true,
+        elevation: "300",
+        className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col py-1 text-grey-900"]))),
+        children: children
+      })
+    })
+  }));
+};

package/cjs/MenuButton/components/DefaultTrigger.d.ts

@@ -1,5 +1,5 @@
-import type { FC } from "react";
+/// <reference types="react" />
 import type { ButtonProps } from "../../Button";
 export declare type DefaultTriggerProps = Omit<ButtonProps, "endIcon">;
-export declare const DefaultTrigger: FC<DefaultTriggerProps>;
+export declare const DefaultTrigger: import("react").ForwardRefExoticComponent<DefaultTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
 export default DefaultTrigger;

package/cjs/MenuButton/components/DefaultTrigger.js

@@ -9,6 +9,7 @@ exports["default"] = exports.DefaultTrigger = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var DropdownMenu = _interopRequireWildcard(require("@radix-ui/react-dropdown-menu"));
+var _react = require("react");
 var _reactFeather = require("react-feather");
 var _Button = _interopRequireDefault(require("../../Button"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -17,7 +18,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 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 DefaultTrigger = exports.DefaultTrigger = function DefaultTrigger(_ref) {
+var DefaultTrigger = exports.DefaultTrigger = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var children = _ref.children,
     buttonProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenu.Trigger, {
@@ -25,8 +26,10 @@ var DefaultTrigger = exports.DefaultTrigger = function DefaultTrigger(_ref) {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], _objectSpread(_objectSpread({
       endIcon: _reactFeather.ChevronDown
     }, buttonProps), {}, {
+      ref: ref,
       children: children
     }))
   });
-};
+});
+DefaultTrigger.displayName = "MenuButtonDefaultTrigger";
 var _default = exports["default"] = DefaultTrigger;

package/cjs/MenuButton/components/items/Item.d.ts

@@ -0,0 +1,15 @@
+import type { DropdownMenuItemProps } from "@radix-ui/react-dropdown-menu";
+import type { FC } from "react";
+import type { IconComponentType } from "../../../Icons";
+import type { BaseItemProps } from "../../useMenuItemProps";
+export declare type ItemProps = BaseItemProps<HTMLDivElement> & DropdownMenuItemProps & {
+    /** Left aligned icon */
+    startIcon?: IconComponentType;
+    /**
+     * Variant of the item
+     * @default "default"
+     */
+    variant?: "default" | "destructive";
+};
+export declare const Item: FC<ItemProps>;
+export default Item;

package/cjs/MenuButton/components/items/{ButtonItem.js → Item.js}

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.ButtonItem = void 0;
+exports["default"] = exports.Item = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -20,7 +20,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 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 ButtonItem = exports.ButtonItem = function ButtonItem(props) {
+var Item = exports.Item = function Item(props) {
   var itemProps = (0, _useMenuItemProps.useMenuItemProps)(props);
   var _props$itemProps = _objectSpread(_objectSpread({}, props), itemProps),
     children = _props$itemProps.children,
@@ -28,19 +28,16 @@ var ButtonItem = exports.ButtonItem = function ButtonItem(props) {
     StartIcon = _props$itemProps.startIcon,
     mergedProps = (0, _objectWithoutProperties2["default"])(_props$itemProps, _excluded);
   var showDestructiveVariant = !props.disabled && variant === "destructive";
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenu.Item, {
-    asChild: true,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", _objectSpread(_objectSpread({}, mergedProps), {}, {
-      className: (0, _clsx["default"])(mergedProps.className, (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["w-full"])))),
-      children: [StartIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(StartIcon, {
-        className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["mr-2 shrink-0 ", ""])), showDestructiveVariant ? "text-red-700" : "text-inherit"),
-        width: "1rem",
-        height: "1rem"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["w-full truncate ", ""])), showDestructiveVariant && "text-red-700"),
-        children: children
-      })]
-    }))
-  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(DropdownMenu.Item, _objectSpread(_objectSpread({}, mergedProps), {}, {
+    className: (0, _clsx["default"])(mergedProps.className, (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["w-full"])))),
+    children: [StartIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(StartIcon, {
+      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["mr-2 shrink-0 ", ""])), showDestructiveVariant ? "text-red-700" : "text-inherit"),
+      width: "1rem",
+      height: "1rem"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["w-full truncate ", ""])), showDestructiveVariant && "text-red-700"),
+      children: children
+    })]
+  }));
 };
-var _default = exports["default"] = ButtonItem;
+var _default = exports["default"] = Item;

package/cjs/MenuButton/components/items/index.d.ts

@@ -1,4 +1,4 @@
-export * from "./ButtonItem";
+export * from "./Item";
 export * from "./LinkItem";
 export * from "./RadioItem";
 export * from "./ToggleItem";

package/cjs/MenuButton/components/items/index.js

@@ -3,14 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _ButtonItem = require("./ButtonItem");
-Object.keys(_ButtonItem).forEach(function (key) {
+var _Item = require("./Item");
+Object.keys(_Item).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _ButtonItem[key]) return;
+  if (key in exports && exports[key] === _Item[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _ButtonItem[key];
+      return _Item[key];
     }
   });
 });

package/cjs/MenuButton/index.d.ts

@@ -1 +1 @@
-export { default as ExperimentalMenuButton } from "./MenuButton";
+export * from "./MenuButton";

package/cjs/MenuButton/index.js

@@ -1,13 +1,16 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "ExperimentalMenuButton", {
-  enumerable: true,
-  get: function get() {
-    return _MenuButton["default"];
-  }
-});
-var _MenuButton = _interopRequireDefault(require("./MenuButton"));
+var _MenuButton = require("./MenuButton");
+Object.keys(_MenuButton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _MenuButton[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _MenuButton[key];
+    }
+  });
+});

package/cjs/MenuButton/useMenuItemProps.d.ts

@@ -1,11 +1,11 @@
-import type { EventHandler, MouseEvent } from "react";
+import type { MouseEventHandler } from "react";
 export interface BaseItemProps<T extends HTMLElement = HTMLElement> {
     className?: string;
     disabled?: boolean;
-    onClick?: EventHandler<MouseEvent<T>>;
+    onClick?: MouseEventHandler<T>;
 }
 export declare const useMenuItemProps: <T extends HTMLElement = HTMLElement>(props: BaseItemProps<T>) => {
     className: string;
-    onClick: ((event: MouseEvent<T, globalThis.MouseEvent>) => void) | undefined;
+    onClick: MouseEventHandler<T> | undefined;
 };
 export default useMenuItemProps;

package/cjs/MenuButton/useMenuItemProps.js

@@ -10,7 +10,7 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
 var _templateObject;
 var useMenuItemProps = exports.useMenuItemProps = function useMenuItemProps(props) {
-  var className = (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n      flex items-center\n      min-h-10 px-4 text-left\n      focus:no-underline hover:no-underline\n      ", "\n    "])), props.disabled ? "text-grey-300 cursor-not-allowed outline-none" : "text-inherit hover:bg-grey-100 focus:bg-grey-100 focus:outline-none cursor-pointer"), props.className);
+  var className = (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n      flex items-center\n      min-h-10 px-4 text-left\n      focus:no-underline hover:no-underline\n      ", "\n    "])), props.disabled ? "text-grey-300 cursor-not-allowed outline-none pointer-events-none" : "text-inherit hover:bg-grey-100 focus:bg-grey-100 focus:outline-none cursor-pointer"), props.className);
   return {
     className: className,
     onClick: props.onClick

package/cjs/Satellite/locale.d.ts

@@ -3,7 +3,6 @@ import type { AutoCompleteLocale } from "../AutoComplete";
 import type { UserAvatarLocale } from "../Avatars/UserAvatar";
 import type { DatePickerLocale } from "../DatePicker/types";
 import type { DropzoneLocale } from "../Dropzone";
-import type { FlagLocale } from "../Flag";
 import type { InputPropsLocale } from "../Input";
 import type { ModalLocale } from "../Modal";
 import type { PaginationLocale } from "../Pagination";
@@ -11,8 +10,11 @@ import type { CompactPaginationLocale } from "../Pagination/CompactPagination";
 import type { DotPaginationLocale } from "../Pagination/DotPagination";
 import type { PopoverLocale } from "../Popover/types";
 import type { SidebarLocale } from "../Sidebar";
+import type { StepperLocale } from "../Stepper";
 import type { DataTableLocale } from "../Tables/DataTable";
 import type { TagLocale } from "../Tag";
+import type { ToastLocale } from "../Toast";
+import type { ToastsLocale } from "../Toast/Toasts";
 export declare type ComponentsLocales = {
     announcementBadge?: AnnouncementBadgeLocale;
     autoComplete?: AutoCompleteLocale;
@@ -21,13 +23,15 @@ export declare type ComponentsLocales = {
     datePicker?: DatePickerLocale;
     dotPagination?: DotPaginationLocale;
     dropzone?: DropzoneLocale;
-    flag?: FlagLocale;
     input?: InputPropsLocale;
     modal?: ModalLocale;
     pagination?: PaginationLocale;
     popover?: PopoverLocale;
     sidebar?: SidebarLocale;
+    stepper?: StepperLocale;
     tag?: TagLocale;
+    toast?: ToastLocale;
+    toasts?: ToastsLocale;
     userAvatar?: UserAvatarLocale;
 };
 export declare const useLocale: <ComponentKey extends keyof ComponentsLocales>(componentKey: ComponentKey) => ComponentsLocales[ComponentKey];

package/cjs/Stepper/Step.d.ts

@@ -0,0 +1,7 @@
+import { type HTMLAttributes, type VFC } from "react";
+import type { BaseStep } from "./types";
+export declare type StepProps = BaseStep & HTMLAttributes<HTMLLIElement> & {
+    index: number;
+};
+export declare const Step: VFC<StepProps>;
+export default Step;

package/cjs/Stepper/Step.js

@@ -0,0 +1,116 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Step = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _react = require("react");
+var _Icons = require("../Icons");
+var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+var _getTextFromReactNode = require("../utils/getTextFromReactNode");
+var _uniqueId = require("../utils/uniqueId");
+var _StepperContext = require("./StepperContext");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["className", "index", "icon", "label", "name", "completed", "disabled"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29;
+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 BUTTON_SIZE_CLASSNAMES = {
+  small: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["px-2.5 py-2"]))),
+  "default": (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["px-3 py-2.5"]))),
+  large: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["p-4"])))
+};
+var CONNECTOR_SIZE_CLASSNAMES = {
+  small: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["left-5 top-7"]))),
+  "default": (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["left-6 top-7"]))),
+  large: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["left-8 top-8"])))
+};
+var ICON_SIZE_CLASSNAMES = {
+  small: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["w-5 h-5"]))),
+  "default": (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["w-6 h-6"]))),
+  large: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["w-8 h-8"])))
+};
+var ICON_SIZE = {
+  small: 12,
+  "default": 14,
+  large: 16
+};
+var CheckIconInternal = function CheckIconInternal(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.CheckIcon, _objectSpread({}, props));
+};
+var Step = exports.Step = function Step(_ref) {
+  var className = _ref.className,
+    index = _ref.index,
+    CustomIcon = _ref.icon,
+    label = _ref.label,
+    name = _ref.name,
+    completed = _ref.completed,
+    disabled = _ref.disabled,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var context = (0, _StepperContext.useStepperContext)();
+  var active = context.activeStep === index;
+  var stepName = (0, _getTextFromReactNode.getTextFromReactNode)(name);
+  var buttonId = (0, _react.useMemo)(function () {
+    return (0, _uniqueId.uniqueId)("stepper-step-");
+  }, []);
+  var locale = context.locale;
+  var disabledLocale = typeof locale.disabledStep === "function" ? locale.disabledStep(stepName) : locale.disabledStep;
+  var activeLocale = typeof locale.activeStep === "function" ? locale.activeStep(stepName) : locale.activeStep;
+  var completedLocale = typeof locale.completedStep === "function" ? locale.completedStep(stepName) : locale.completedStep;
+  var incompletedLocale = typeof locale.incompletedStep === "function" ? locale.incompletedStep(stepName) : locale.incompletedStep;
+  var Icon = CustomIcon;
+  if (completed) {
+    Icon = CheckIconInternal;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", _objectSpread(_objectSpread({}, props), {}, {
+    className: (0, _clsx["default"])(className, (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["text-grey-600 group/step"])))),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+      id: buttonId,
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["relative w-full flex items-center text-left gap-2 rounded border transition-colors group/button"]))), (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["-outline-offset-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-xenon-600"]))), disabled ? (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["cursor-not-allowed"]))) : (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["hover:bg-grey-100"]))), active ? (0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["border-grey-200 bg-white"]))) : (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["border-transparent"]))), BUTTON_SIZE_CLASSNAMES[context.size]),
+      "aria-label": disabled ? disabledLocale : active ? activeLocale : completed ? completedLocale : incompletedLocale,
+      "aria-current": active ? "step" : undefined,
+      disabled: disabled,
+      tabIndex: index === context.activeStep ? 0 : -1,
+      "data-step-idx": index,
+      onClick: function onClick() {
+        var _context$onStepChange;
+        return (_context$onStepChange = context.onStepChange) === null || _context$onStepChange === void 0 ? void 0 : _context$onStepChange.call(context, index);
+      },
+      onKeyDown: function onKeyDown(event) {
+        switch (event.key) {
+          case "Space":
+          case "Enter":
+            {
+              var _context$onStepChange2;
+              (_context$onStepChange2 = context.onStepChange) === null || _context$onStepChange2 === void 0 || _context$onStepChange2.call(context, index);
+              break;
+            }
+        }
+      },
+      children: [context.connectors && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["absolute -z-10 border-l h-full group-last/step:hidden"]))), completed ? (0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["border-green-600"]))) : (0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["border-grey-200"]))), CONNECTOR_SIZE_CLASSNAMES[context.size])
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["rounded-full flex items-center justify-center shrink-0 text-sm transition-colors"]))), !active && !completed && (0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["bg-grey-100"]))), !active && !completed && !disabled && (0, _satellitePrefixer["default"])(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2["default"])(["group-hover/button:bg-white"]))), active && !completed && (0, _satellitePrefixer["default"])(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2["default"])(["bg-grey-800 text-white"]))), completed && (0, _satellitePrefixer["default"])(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteral2["default"])(["bg-green-600 text-white"]))), ICON_SIZE_CLASSNAMES[context.size]),
+        children: Icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
+          width: ICON_SIZE[context.size],
+          height: ICON_SIZE[context.size]
+        }) : index + 1
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _clsx["default"])(disabled && (0, _satellitePrefixer["default"])(_templateObject25 || (_templateObject25 = (0, _taggedTemplateLiteral2["default"])(["text-grey-300"])))),
+        children: [!!label && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: (0, _satellitePrefixer["default"])(_templateObject26 || (_templateObject26 = (0, _taggedTemplateLiteral2["default"])(["text-sm line-clamp-1"]))),
+          children: label
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject27 || (_templateObject27 = (0, _taggedTemplateLiteral2["default"])(["text-base line-clamp-2"]))), (completed || active) && (0, _satellitePrefixer["default"])(_templateObject28 || (_templateObject28 = (0, _taggedTemplateLiteral2["default"])(["text-grey-900"]))), context.size === "small" && (0, _satellitePrefixer["default"])(_templateObject29 || (_templateObject29 = (0, _taggedTemplateLiteral2["default"])(["text-sm"])))),
+          children: name
+        })]
+      })]
+    })
+  }));
+};
+var _default = exports["default"] = Step;

package/cjs/Stepper/Stepper.d.ts

@@ -0,0 +1,42 @@
+import type { HTMLAttributes, VFC } from "react";
+import type { BaseStep } from "./types";
+export declare type StepperLocale = {
+    disabledStep?: string | ((stepName: string) => string);
+    activeStep?: string | ((stepName: string) => string);
+    incompletedStep?: string | ((stepName: string) => string);
+    completedStep?: string | ((stepName: string) => string);
+};
+export declare type StepperSizes = "small" | "default" | "large";
+export interface StepperProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /**
+     * Defines the steps of the Stepper.
+     */
+    steps: BaseStep[];
+    /**
+     * Defines the controlled index of the active step.
+     * If omitted, the first step will be active by default
+     * and the Stepper will be uncontrolled.
+     */
+    activeStep?: number;
+    /**
+     * Defines the callback fired when a step is clicked.
+     */
+    onStepChange?: (index: number) => void;
+    /**
+     * Defines the size of the Stepper.
+     * @default "default"
+     */
+    size?: StepperSizes;
+    /**
+     * Defines whether the connectors should be displayed.
+     * @default true
+     */
+    connectors?: boolean;
+    /**
+     * Defines the text describing the steps.
+     * If not provided, default values will be used.
+     */
+    locale?: StepperLocale;
+}
+export declare const Stepper: VFC<StepperProps>;
+export default Stepper;