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

package/dist/cjs/Fields/Form/stories/Complex.js

@@ -23,8 +23,8 @@ var _Input = require("../../Input");
 var _RadioGroup = require("../../RadioGroup");
 var _RangeSlider = require("../../RangeSlider");
 var _Select = require("../../Select");
+var _Switch = require("../../Switch");
 var _TextArea = require("../../TextArea");
-var _Toggle = require("../../Toggle");
 var _Form = require("../Form");
 var _useFormikAutoFocusOnError = require("./utils/useFormikAutoFocusOnError");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -528,7 +528,6 @@ var RHFComplexComponent = exports.RHFComplexComponent = function RHFComplexCompo
               description: "Please accept the terms",
               state: getFieldState("acceptTerms"),
               className: (0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
-              inline: true,
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Checkbox, _objectSpread({
                 id: "acceptTerms",
                 required: true,
@@ -547,8 +546,7 @@ var RHFComplexComponent = exports.RHFComplexComponent = function RHFComplexCompo
               description: "Do you want to receive our newsletter?",
               state: getFieldState("newsletter"),
               className: (0, _satellitePrefixer["default"])(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
-              inline: true,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toggle.Toggle, _objectSpread({
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Switch.Switch, _objectSpread({
                 id: "newsletter",
                 required: true,
                 checked: getValues("newsletter")
@@ -898,7 +896,6 @@ var FormikComplexComponent = exports.FormikComplexComponent = function FormikCom
           description: "Please accept the terms",
           state: getFieldState("acceptTerms"),
           className: (0, _satellitePrefixer["default"])(_templateObject46 || (_templateObject46 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
-          inline: true,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Checkbox, _objectSpread({
             id: "acceptTerms",
             required: true,
@@ -910,8 +907,7 @@ var FormikComplexComponent = exports.FormikComplexComponent = function FormikCom
           description: "Do you want to receive our newsletter?",
           state: getFieldState("newsletter"),
           className: (0, _satellitePrefixer["default"])(_templateObject47 || (_templateObject47 = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
-          inline: true,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toggle.Toggle, _objectSpread({
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Switch.Switch, _objectSpread({
             id: "newsletter",
             required: true,
             checked: formik.values.newsletter

package/dist/cjs/Fields/Form/stories/InlineFields.js

@@ -0,0 +1,62 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InlineFieldsComponent = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _ = require("../..");
+var _satellitePrefixer = _interopRequireDefault(require("../../../styles/helpers/satellitePrefixer"));
+var _Field = require("../../Field");
+var _Input = require("../../Input");
+var _Switch = require("../../Switch");
+var _TextArea = require("../../TextArea");
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2, _templateObject3;
+var InlineFieldsComponent = exports.InlineFieldsComponent = function InlineFieldsComponent() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex flex-col w-4/5"]))),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.ExperimentalForm, {
+      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-4 min-w-72"]))),
+      inline: true,
+      inlineLabelSize: "medium",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+        label: "First Name",
+        labelFor: "firstName",
+        description: "Please enter your first name",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, {
+          id: "firstName",
+          placeholder: "John",
+          required: true
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+        label: "Bio",
+        labelFor: "bio",
+        description: "Please write a short bio",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextArea.TextArea, {
+          id: "bio",
+          required: true
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
+        label: "Receive Newsletter",
+        labelFor: "newsletter",
+        description: "Do you want to receive our newsletter?",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Switch.Switch, {
+          id: "newsletter",
+          required: true
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["flex justify-end gap-2"]))),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.ExperimentalFormReset, {
+          "aria-label": "Reset the form",
+          children: "Reset"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ExperimentalFormSubmit, {
+          variant: "primary",
+          "aria-label": "Save the form",
+          children: "Save"
+        })]
+      })]
+    })
+  });
+};

package/dist/cjs/Fields/Form/stories/JSONForms.js

@@ -25,8 +25,8 @@ var _Input = require("../../Input/Input");
 var _RadioGroup = require("../../RadioGroup");
 var _RangeSlider = require("../../RangeSlider");
 var _Select = require("../../Select");
+var _Switch = require("../../Switch");
 var _TextArea = require("../../TextArea");
-var _Toggle = require("../../Toggle");
 var _Form = require("../Form");
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
@@ -786,7 +786,7 @@ var ToggleRendererComponent = function ToggleRendererComponent(_ref11) {
     state: getFieldState(errors),
     inline: (_uischema$options36 = uischema.options) === null || _uischema$options36 === void 0 ? void 0 : _uischema$options36.inline,
     className: (0, _clsx["default"])(!visible && (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["hidden"])))),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toggle.Toggle, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Switch.Switch, {
       id: id,
       required: required,
       disabled: !enabled,

package/dist/cjs/Fields/{Toggle/Toggle.d.ts → Switch/Switch.d.ts}

@@ -1,5 +1,5 @@
 import type { ChangeEvent, HTMLAttributes, InputHTMLAttributes } from "react";
-export declare type ToggleProps = Omit<HTMLAttributes<HTMLInputElement>, "children" | "onChange" | "defaultChecked"> & Pick<InputHTMLAttributes<HTMLInputElement>, "autoFocus"> & {
+export declare type SwitchProps = Omit<HTMLAttributes<HTMLInputElement>, "children" | "onChange" | "defaultChecked"> & Pick<InputHTMLAttributes<HTMLInputElement>, "autoFocus"> & {
     /**
      * Whether the `Toggle` is decorative.
      * Decorative toggles are not using an input element.
@@ -27,11 +27,11 @@ export declare type ToggleProps = Omit<HTMLAttributes<HTMLInputElement>, "childr
     checked?: boolean;
 };
 /**
- * The `Toggle` component is used to view or switch between enabled or disabled states.
+ * The `Switch` component is used to view or switch between enabled or disabled states.
  *
- * See the [Toggle documentation page](https://satellite.algolia.com/components/controls/toggle) for more information.
+ * See the [Switch documentation page](https://satellite.algolia.com/components/controls/switch) for more information.
  */
-export declare const Toggle: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLInputElement>, "children" | "defaultChecked" | "onChange"> & Pick<InputHTMLAttributes<HTMLInputElement>, "autoFocus"> & {
+export declare const Switch: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLInputElement>, "children" | "defaultChecked" | "onChange"> & Pick<InputHTMLAttributes<HTMLInputElement>, "autoFocus"> & {
     /**
      * Whether the `Toggle` is decorative.
      * Decorative toggles are not using an input element.

package/dist/cjs/Fields/{Toggle/Toggle.js → Switch/Switch.js}

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Toggle = void 0;
+exports.Switch = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -19,11 +19,11 @@ var _excluded = ["className", "checked", "decorative", "defaultChecked", "requir
 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; }
 /**
- * The `Toggle` component is used to view or switch between enabled or disabled states.
+ * The `Switch` component is used to view or switch between enabled or disabled states.
  *
- * See the [Toggle documentation page](https://satellite.algolia.com/components/controls/toggle) for more information.
+ * See the [Switch documentation page](https://satellite.algolia.com/components/controls/switch) for more information.
  */
-var Toggle = exports.Toggle = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+var Switch = exports.Switch = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _inputProps$id;
   var className = _ref.className,
     checked = _ref.checked,
@@ -53,7 +53,7 @@ var Toggle = exports.Toggle = /*#__PURE__*/(0, _react.forwardRef)(function (_ref
       setInternalChecked(evt.currentTarget.checked);
     }
   };
-  var handleClassName = (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["toggle-handle"]))), isChecked && (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["toggle-checked"]))), isDisabled && (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["toggle-disabled"]))), isInvalid && (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["toggle-invalid"]))));
+  var handleClassName = (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["switch-handle"]))), isChecked && (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["switch-checked"]))), isDisabled && (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["switch-disabled"]))), isInvalid && (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["switch-invalid"]))));
   var onClick = function onClick(event) {
     if (isDisabled) {
       return;
@@ -63,7 +63,7 @@ var Toggle = exports.Toggle = /*#__PURE__*/(0, _react.forwardRef)(function (_ref
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     translate: "yes",
-    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["toggle-container"]))), className),
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["switch-container"]))), className),
     children: [decorative ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       className: handleClassName,
       onClick: onClick
@@ -83,8 +83,8 @@ var Toggle = exports.Toggle = /*#__PURE__*/(0, _react.forwardRef)(function (_ref
       role: "switch",
       ref: ref
     })), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["toggle focusable-sibling"])))
+      className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["switch focusable-sibling"])))
     })]
   });
 });
-Toggle.displayName = "Toggle";
+Switch.displayName = "Switch";

package/dist/cjs/Fields/{Toggle/Toggle.tailwind.js → Switch/Switch.tailwind.js}

@@ -3,17 +3,17 @@
 // @ts-check
 var plugin = require("tailwindcss/plugin");
 var rgba = require("../../styles/rgba");
-var togglePlugin = plugin(function (_ref) {
+var switchPlugin = plugin(function (_ref) {
   var addComponents = _ref.addComponents,
     theme = _ref.theme;
   var transition = "all 72ms ease-in-out";
   addComponents({
-    ".toggle-container": {
+    ".switch-container": {
       position: "relative",
       display: "block",
       height: "18px",
       width: "32px",
-      ".toggle-handle": {
+      ".switch-handle": {
         position: "absolute",
         top: "0px",
         left: "0px",
@@ -21,24 +21,24 @@ var togglePlugin = plugin(function (_ref) {
         height: "100%",
         opacity: "0",
         cursor: "pointer",
-        "&.toggle-disabled": {
+        "&.switch-disabled": {
           cursor: "not-allowed"
         }
       },
-      "&:hover .toggle:after": {
+      "&:hover .switch:after": {
         transform: "translateX(2px)"
       },
-      "&:hover .toggle-handle.toggle-checked ~ .toggle:after": {
+      "&:hover .switch-handle.switch-checked ~ .switch:after": {
         transform: "translateX(12px)"
       },
-      "&:hover .toggle-handle.toggle-disabled ~ .toggle:after": {
+      "&:hover .switch-handle.switch-disabled ~ .switch:after": {
         transform: "translateX(0px)"
       },
-      "&:hover .toggle-handle.toggle-checked.toggle-disabled ~ .toggle:after": {
+      "&:hover .switch-handle.switch-checked.switch-disabled ~ .switch:after": {
         transform: "translateX(14px)"
       }
     },
-    ".toggle": {
+    ".switch": {
       position: "absolute",
       top: "0px",
       left: "0px",
@@ -61,20 +61,20 @@ var togglePlugin = plugin(function (_ref) {
         boxShadow: "0px 1px 1px 0px ".concat(theme("colors.shadow.10")),
         transition: transition
       },
-      ".toggle-handle.toggle-checked ~ &": {
+      ".switch-handle.switch-checked ~ &": {
         background: theme("colors.accent.600"),
         boxShadow: "inset 0px 1px 4px 0px ".concat(rgba(theme("colors.grey.900"), 0.1)),
         "&:after": {
           transform: "translateX(14px)"
         }
       },
-      ".toggle-handle.toggle-disabled ~ &": {
+      ".switch-handle.switch-disabled ~ &": {
         background: theme("colors.grey.200")
       },
-      ".toggle-checked.toggle-handle.toggle-disabled ~ &": {
+      ".switch-checked.switch-handle.switch-disabled ~ &": {
         background: theme("colors.xenon.200")
       },
-      ".toggle-handle.toggle-invalid ~ &": {
+      ".switch-handle.switch-invalid ~ &": {
         background: theme("colors.red.700"),
         "&:after": {
           background: theme("colors.red.100")
@@ -83,4 +83,4 @@ var togglePlugin = plugin(function (_ref) {
     }
   });
 });
-module.exports = togglePlugin;
+module.exports = switchPlugin;

package/dist/cjs/Fields/Switch/index.d.ts

@@ -0,0 +1 @@
+export * from "./Switch";

package/dist/cjs/Fields/{Toggle → Switch}/index.js

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

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

@@ -4,10 +4,11 @@ export * from "./DateInput";
 export * from "./DatePicker";
 export * from "./Dropzone";
 export * from "./Field";
+export * from "./FilePicker";
 export * from "./Form";
 export * from "./Input";
 export * from "./RadioGroup";
 export * from "./RangeSlider";
 export * from "./Select";
 export * from "./TextArea";
-export * from "./Toggle";
+export * from "./Switch";

package/dist/cjs/Fields/index.js

@@ -69,6 +69,17 @@ Object.keys(_Field).forEach(function (key) {
     }
   });
 });
+var _FilePicker = require("./FilePicker");
+Object.keys(_FilePicker).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _FilePicker[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _FilePicker[key];
+    }
+  });
+});
 var _Form = require("./Form");
 Object.keys(_Form).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -135,14 +146,14 @@ Object.keys(_TextArea).forEach(function (key) {
     }
   });
 });
-var _Toggle = require("./Toggle");
-Object.keys(_Toggle).forEach(function (key) {
+var _Switch = require("./Switch");
+Object.keys(_Switch).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _Toggle[key]) return;
+  if (key in exports && exports[key] === _Switch[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _Toggle[key];
+      return _Switch[key];
     }
   });
 });

package/dist/cjs/Helpers/HelpUnderline/HelpUnderline.d.ts

@@ -1,6 +1,6 @@
 import type { FC } from "react";
 import type { TooltipWrapperProps } from "../../Overlay";
-import type { TooltipWrapperBaseProps } from "../../Overlay/Tooltip/types";
+import type { TooltipWrapperBaseProps } from "../../Overlay/TooltipWrapper/types";
 export declare type HelpUnderlineProps = {
     /**
      * The class name of the `HelpUnderline`.

package/dist/cjs/Indicators/AnnouncementBadge/AnnouncementBadge.d.ts

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

package/dist/cjs/Indicators/Badge/Badge.d.ts

@@ -4,13 +4,24 @@ import type { AtLeastOne, ColorVariant } from "../../types";
 export declare type BadgeSizes = "small" | "medium" | "large";
 export declare type BadgeVariants = ColorVariant | "pink";
 interface BaseBadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    /**
+     * The variant of the `Badge`.
+     * @default grey
+     */
     variant?: BadgeVariants;
+    /**
+     * The size of the `Badge`.
+     * @default large
+     */
     size?: BadgeSizes;
 }
 declare type BadgeContentProps = {
+    /**
+     * The content of the `Badge`.
+     */
     children: ReactNode;
     /**
-     * An additional value to accompany the `Badge`
+     * An additional value to accompany the `Badge`.
      */
     value: ReactNode;
     /**
@@ -18,7 +29,7 @@ declare type BadgeContentProps = {
      */
     icon: IconComponentType;
 };
-export declare type BadgeProps = BaseBadgeProps & AtLeastOne<BadgeContentProps>;
+export declare type BadgeProps = Omit<BaseBadgeProps, "children"> & AtLeastOne<BadgeContentProps>;
 /**
  * The `Badge` component is a visual marker highlighting information or status. It enhances UI, indicates progress, and classifies data.
  *

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

@@ -4,26 +4,43 @@ import type { ColorVariant } from "../../../types";
 export declare type AlertContextType = "page" | "section";
 export declare type AlertColorVariant = Exclude<ColorVariant, "blue">;
 export interface AlertProps {
-    /** @ignore */
-    className?: string;
-    /** @ignore */
-    style?: CSSProperties;
-    /** Descriptive title for `Alert` */
+    /**
+     * Descriptive title for `Alert`.
+     */
     title?: ReactNode;
-    /** @default grey */
+    /**
+     * The variant of the `Alert`.
+     * @default grey
+     */
     variant?: AlertColorVariant;
     /**
-     * Usage context description
+     * Usage context description.
      * @default section
      */
     usageContext?: AlertContextType;
+    /**
+     * The icon of the `Alert`.
+     */
     icon?: IconComponentType;
     /**
      * Function triggered when the dismiss button is clicked.
      * Dismiss button won't be rendered if absent.
-     * */
+     */
     onDismiss?(): void;
+    /**
+     * The content of the `Alert`.
+     */
     children: ReactNode;
+    /**
+     * The class name of the `Alert`.
+     * @ignore
+     */
+    className?: string;
+    /**
+     * The style of the `Alert`.
+     * @ignore
+     */
+    style?: CSSProperties;
 }
 /**
  * The `Alert` component give users suggestions, tips, warnings, and error information without stopping them from completing the tasks they're doing.

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

@@ -1,22 +1,48 @@
 import type { FC, ReactNode } from "react";
 declare type PromoteVariants = "large" | "compact";
 interface CompactPromoteProps {
+    /**
+     * The variant of the `Promote`.
+     * @default compact
+     */
     variant?: Extract<PromoteVariants, "compact">;
+    /**
+     * The illustration of the `Promote`.
+     */
     illustration?: never;
 }
 interface WidePromoteProps {
+    /**
+     * The variant of the `Promote`.
+     * @default large
+     */
     variant?: Extract<PromoteVariants, "large">;
-    /** Plop in an `img` element or `svg` here */
+    /**
+     * The illustration of the `Promote`.
+     */
     illustration?: ReactNode;
 }
 export declare type PromoteProps = {
-    /** Product context for the banner */
+    /**
+     * Product context for the banner.
+     */
     context?: ReactNode;
-    /** Descriptive title for banner */
+    /**
+     * Descriptive title for banner.
+     */
     title: ReactNode;
-    /** Buttons */
+    /**
+     * Buttons.
+     */
     actions?: ReactNode;
+    /**
+     * Function triggered when the dismiss button is clicked.
+     * Dismiss button won't be rendered if absent.
+     */
     onDismiss?(): void;
+    /**
+     * The content of the `Promote`.
+     */
     children: ReactNode;
 } & (CompactPromoteProps | WidePromoteProps);
 /**

package/dist/cjs/Indicators/Banners/SystemNotification/SystemNotification.d.ts

@@ -1,7 +1,13 @@
 import type { FC, ReactNode } from "react";
 import type { IconComponentType } from "../../../Icons";
 export interface SystemNotificationProps {
+    /**
+     * The icon of the `SystemNotification`.
+     */
     icon?: IconComponentType;
+    /**
+     * The content of the `SystemNotification`.
+     */
     children: ReactNode;
 }
 /**

package/dist/cjs/Indicators/EmptyState/types.d.ts

@@ -3,30 +3,42 @@ import type { FlexGridDirection } from "../../Layout";
 export declare type EmptyStateUsageContexts = "result" | "feature" | "page";
 export declare type EmptyStateWidths = "medium" | "large" | "xlarge";
 export interface EmptyStatePropsAll {
-    /** Descriptive title for the state */
+    /**
+     * Descriptive title for the state.
+     */
     title: ReactNode;
-    /** Optional description to explain why the screen is empty or define next steps */
+    /**
+     * Optional description to explain why the screen is empty or define next steps.
+     */
     description?: ReactNode;
-    /** Buttons */
+    /**
+     * Buttons.
+     */
     actions?: ReactNode;
-    /** Direction overwrite for the buttons */
+    /**
+     * Direction overwrite for the buttons.
+     */
     actionsDirection?: FlexGridDirection;
-    /** Add a `<Medallion />`, an `img` element or `svg` in there */
+    /**
+     * Add a `<Medallion />`, an `img` element or `svg` in there.
+     */
     leadIllustration?: ReactNode;
-    /** Plop in an `img` element or `svg` here */
+    /**
+     * Plop in an `img` element or `svg` here.
+     */
     pageIllustration?: ReactNode;
     /**
-     * UsageContext of the component
+     * UsageContext of the component.
      * @default feature
      */
     usageContext?: EmptyStateUsageContexts;
     /**
-     * Define whether or not content should be centered
+     * Define whether or not content should be centered.
      * @default false
      */
     centered?: boolean;
     /**
-     * Defines how wide the EmptyState can expand
+     * Defines how wide the EmptyState can expand.
      * @default medium
      */
     width?: EmptyStateWidths;

package/dist/cjs/Indicators/KeyboardKey/KeyboardKey.d.ts

@@ -2,6 +2,9 @@ import type { FC } from "react";
 export interface KeyboardKeyProps {
     /** @ignore */
     className?: string;
+    /**
+     * Value of the keyboard key.
+     */
     value: string;
 }
 /**

package/dist/cjs/Indicators/ProgressBar/ProgressBar.d.ts

@@ -1,10 +1,16 @@
 import { type HTMLAttributes } from "react";
 export interface ProgressBarProps extends HTMLAttributes<HTMLDivElement> {
-    /** The current value of the progress bar. */
+    /**
+     * The current value of the progress bar.
+     */
     value: number;
-    /** The maximum value of the progress bar. */
+    /**
+     * The maximum value of the progress bar.
+     */
     max?: number;
-    /** The className to apply to the bar element. */
+    /**
+     * The className to apply to the bar element.
+     */
     barClassName?: string;
 }
 /**