@algolia/satellite 2.1.0 → 2.2.0

package/dist/esm/Actions/IconButtonWithFeedback/IconButtonWithFeedback.js

@@ -0,0 +1,202 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["icon", "successIcon", "errorIcon", "message", "tooltipDelay", "tooltipHideDelay", "tooltipSuccessMessageDuration", "tooltipErrorMessageDuration", "onClick", "onError", "locale"];
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+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) { _defineProperty(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; }
+import { useEffect, useState } from "react";
+import useMountedState from "react-use/lib/useMountedState";
+import { useSpinDelay } from "spin-delay";
+import { IconButton } from "./../IconButton/IconButton";
+import { AlertTriangleIcon, CheckIcon } from "./../../Icons";
+import { useLocale } from "./../../Satellite";
+import { useTimeoutFn } from "./../../utils/useTimeoutFn";
+import { jsx as _jsx } from "react/jsx-runtime";
+var DEFAULT_TOOLTIP_SHOW_DELAY = 250;
+var DEFAULT_TOOLTIP_HIDE_DELAY = 500;
+var DEFAULT_TOOLTIP_SUCCESS_MESSAGE_DURATION = 1000;
+var DEFAULT_TOOLTIP_ERROR_MESSAGE_DURATION = 2000;
+
+// Used in the tests but not re-exported externally.
+export var RESET_STATUS_DELAY = 100;
+var DEFAULT_ICON_WITH_BUTTON_FEEDBACK_LOCALE = {
+  success: "Success",
+  error: "Something went wrong",
+  loading: "Loading..."
+};
+/**
+ * A compact, icon-only button that displays contextual tooltips on hover and click, enhancing user understanding and confirmation.
+ *
+ * See the [IconButtonWithFeedback documentation page](https://zeroheight.com/8261d6576/p/70da74-icon-button-with-feedback) for more information.
+ */
+export var IconButtonWithFeedback = function IconButtonWithFeedback(_ref) {
+  var iconProp = _ref.icon,
+    _ref$successIcon = _ref.successIcon,
+    successIcon = _ref$successIcon === void 0 ? CheckIcon : _ref$successIcon,
+    _ref$errorIcon = _ref.errorIcon,
+    errorIcon = _ref$errorIcon === void 0 ? AlertTriangleIcon : _ref$errorIcon,
+    message = _ref.message,
+    _ref$tooltipDelay = _ref.tooltipDelay,
+    tooltipDelay = _ref$tooltipDelay === void 0 ? DEFAULT_TOOLTIP_SHOW_DELAY : _ref$tooltipDelay,
+    _ref$tooltipHideDelay = _ref.tooltipHideDelay,
+    tooltipHideDelay = _ref$tooltipHideDelay === void 0 ? DEFAULT_TOOLTIP_HIDE_DELAY : _ref$tooltipHideDelay,
+    _ref$tooltipSuccessMe = _ref.tooltipSuccessMessageDuration,
+    tooltipSuccessMessageDuration = _ref$tooltipSuccessMe === void 0 ? DEFAULT_TOOLTIP_SUCCESS_MESSAGE_DURATION : _ref$tooltipSuccessMe,
+    _ref$tooltipErrorMess = _ref.tooltipErrorMessageDuration,
+    tooltipErrorMessageDuration = _ref$tooltipErrorMess === void 0 ? DEFAULT_TOOLTIP_ERROR_MESSAGE_DURATION : _ref$tooltipErrorMess,
+    onClick = _ref.onClick,
+    onError = _ref.onError,
+    propsLocale = _ref.locale,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var contextLocale = useLocale("iconButtonWithFeedback");
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_ICON_WITH_BUTTON_FEEDBACK_LOCALE), contextLocale), propsLocale);
+  var _useState = useState("idle"),
+    _useState2 = _slicedToArray(_useState, 2),
+    status = _useState2[0],
+    setStatus = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    showTooltip = _useState4[0],
+    setShowTooltip = _useState4[1];
+  var mounted = useMountedState();
+
+  // Use a delayed loading state to prevent flickering of the loading spinner.
+  var isLoading = useSpinDelay(status === "loading", {
+    delay: 200,
+    minDuration: 600
+  });
+
+  // Show the tooltip after a delay when the button is hovered/focused.
+  var _useTimeoutFn = useTimeoutFn(function () {
+      if (mounted()) setShowTooltip(true);
+    }, tooltipDelay, false),
+    _useTimeoutFn2 = _slicedToArray(_useTimeoutFn, 3),
+    cancelShowTooltip = _useTimeoutFn2[1],
+    scheduleShowTooltip = _useTimeoutFn2[2];
+
+  // Hide the tooltip after a delay when the button is unhovered/unfocused.
+  var _useTimeoutFn3 = useTimeoutFn(function () {
+      if (mounted()) setShowTooltip(false);
+    }, status === "error" ? tooltipErrorMessageDuration : tooltipSuccessMessageDuration, false),
+    _useTimeoutFn4 = _slicedToArray(_useTimeoutFn3, 3),
+    scheduleHideTooltip = _useTimeoutFn4[2];
+
+  // Reset the tooltip status after a delay when the tooltip is hidden.
+  var _useTimeoutFn5 = useTimeoutFn(function () {
+      if (mounted()) setStatus("idle");
+    }, tooltipHideDelay + RESET_STATUS_DELAY, false),
+    _useTimeoutFn6 = _slicedToArray(_useTimeoutFn5, 3),
+    scheduleResetStatus = _useTimeoutFn6[2];
+
+  // Auto-hide tooltip while showing success/error messages.
+  useEffect(function () {
+    if (status === "idle" || isLoading) return;
+    scheduleHideTooltip();
+  }, [status, isLoading, scheduleHideTooltip]);
+
+  // After tooltip fully fades out, go back to idle.
+  useEffect(function () {
+    if (showTooltip || status !== "success" && status !== "error") return;
+    scheduleResetStatus();
+  }, [showTooltip, status, scheduleResetStatus]);
+  var getTitle = function getTitle() {
+    if (isLoading) return locale.loading;
+    switch (status) {
+      case "success":
+        return locale.success;
+      case "error":
+        return locale.error;
+      default:
+        return message;
+    }
+  };
+  var getIcon = function getIcon() {
+    if (status === "error" && errorIcon) return errorIcon;
+    if (status === "success" && successIcon) return successIcon;
+    return iconProp;
+  };
+  var title = getTitle();
+  var icon = getIcon();
+  var handleClick = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(evt) {
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!evt.defaultPrevented) {
+              _context.next = 2;
+              break;
+            }
+            return _context.abrupt("return");
+          case 2:
+            cancelShowTooltip();
+            setStatus("loading");
+            setShowTooltip(true);
+            _context.prev = 5;
+            _context.next = 8;
+            return onClick === null || onClick === void 0 ? void 0 : onClick(evt);
+          case 8:
+            if (mounted()) {
+              _context.next = 10;
+              break;
+            }
+            return _context.abrupt("return");
+          case 10:
+            setStatus("success");
+            _context.next = 19;
+            break;
+          case 13:
+            _context.prev = 13;
+            _context.t0 = _context["catch"](5);
+            if (mounted()) {
+              _context.next = 17;
+              break;
+            }
+            return _context.abrupt("return");
+          case 17:
+            setStatus("error");
+            onError === null || onError === void 0 || onError(_context.t0);
+          case 19:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[5, 13]]);
+    }));
+    return function handleClick(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  // Common handler for pointer enter/focus
+  var handleShowTooltip = function handleShowTooltip(e) {
+    var _props$onPointerEnter, _props$onFocus;
+    // Call the original handler if provided
+    if (e.type === "pointerenter") (_props$onPointerEnter = props.onPointerEnter) === null || _props$onPointerEnter === void 0 || _props$onPointerEnter.call(props, e);
+    if (e.type === "focus") (_props$onFocus = props.onFocus) === null || _props$onFocus === void 0 || _props$onFocus.call(props, e);
+    if (isLoading || status !== "idle") return;
+    scheduleShowTooltip();
+  };
+
+  // Common handler for pointer leave/blur
+  var handleHideTooltip = function handleHideTooltip(e) {
+    var _props$onPointerLeave, _props$onBlur;
+    if (e.type === "pointerleave") (_props$onPointerLeave = props.onPointerLeave) === null || _props$onPointerLeave === void 0 || _props$onPointerLeave.call(props, e);
+    if (e.type === "blur") (_props$onBlur = props.onBlur) === null || _props$onBlur === void 0 || _props$onBlur.call(props, e);
+    if (isLoading || status !== "idle") return;
+    cancelShowTooltip();
+    setShowTooltip(false);
+  };
+  return /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({}, props), {}, {
+    title: title,
+    showTooltip: showTooltip,
+    tooltipHideDelay: tooltipHideDelay,
+    icon: icon,
+    loading: isLoading,
+    onClick: handleClick,
+    onPointerEnter: handleShowTooltip,
+    onPointerLeave: handleHideTooltip,
+    onFocus: handleShowTooltip,
+    onBlur: handleHideTooltip
+  }));
+};

package/dist/esm/Actions/SegmentedControl/SegmentedControl.d.ts

@@ -2,7 +2,7 @@ import type { ReactNode } from "react";
 import type { SegmentedControlSize } from "./types";
 export interface SegmentedControlProps {
     /**
-     * The class name of the `Switch`.
+     * The class name of the `SegmentedControl`.
      */
     className?: string;
     /**
@@ -10,7 +10,7 @@ export interface SegmentedControlProps {
      */
     value: string;
     /**
-     * Whether the `Switch` is disabled.
+     * Whether the `SegmentedControl` is disabled.
      */
     disabled?: boolean;
     /**
@@ -18,11 +18,11 @@ export interface SegmentedControlProps {
      */
     onChange: (value: string) => void;
     /**
-     * The content of the `Switch`.
+     * The content of the `SegmentedControl`.
      */
     children: ReactNode;
     /**
-     * The size of the `Switch`.
+     * The size of the `SegmentedControl`.
      */
     size?: SegmentedControlSize;
     /**

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

@@ -2,6 +2,8 @@ export * from "./Accordion/Accordion";
 export * from "./Button/Button";
 export * from "./ButtonGroup/ButtonGroup";
 export * from "./ButtonLink/ButtonLink";
+export type { IconButtonWithFeedbackLocale, IconButtonWithFeedbackProps, } from "./IconButtonWithFeedback/IconButtonWithFeedback";
+export { IconButtonWithFeedback } from "./IconButtonWithFeedback/IconButtonWithFeedback";
 export * from "./IconButton/IconButton";
 export * from "./IconButtonLink/IconButtonLink";
 export * from "./SegmentedControl";

package/dist/esm/Actions/index.js

@@ -2,9 +2,9 @@ export * from "./Accordion/Accordion";
 export * from "./Button/Button";
 export * from "./ButtonGroup/ButtonGroup";
 export * from "./ButtonLink/ButtonLink";
+export { IconButtonWithFeedback } from "./IconButtonWithFeedback/IconButtonWithFeedback";
 export * from "./IconButton/IconButton";
 export * from "./IconButtonLink/IconButtonLink";
 export * from "./SegmentedControl";
 export * from "./ToggleButton/ToggleButton";
-export * from "./ToggleGroup/ToggleGroup";
-export {};
+export * from "./ToggleGroup/ToggleGroup";

package/dist/esm/Fields/AutoComplete/AutoComplete.js

@@ -172,14 +172,14 @@ export var AutoComplete = /*#__PURE__*/forwardRef(function (_ref, ref) {
     selectedItems: selectedItems,
     onSelectedItemsChange: function onSelectedItemsChange(changes) {
       if (typeof changes.selectedItems === "undefined") {
-        onChange(null);
+        onChange(null, changes.type);
       } else if (multiple) {
         onChange(uniqBy(changes.selectedItems, function (i) {
           return i.value;
-        }));
+        }), changes.type);
       } else {
         var _changes$selectedItem;
-        onChange((_changes$selectedItem = changes.selectedItems[0]) !== null && _changes$selectedItem !== void 0 ? _changes$selectedItem : null);
+        onChange((_changes$selectedItem = changes.selectedItems[0]) !== null && _changes$selectedItem !== void 0 ? _changes$selectedItem : null, changes.type);
       }
     }
   });
@@ -195,6 +195,7 @@ export var AutoComplete = /*#__PURE__*/forwardRef(function (_ref, ref) {
       });
     },
     defaultHighlightedIndex: 0,
+    isOpen: inputValue ? items.length > 0 ? undefined : true : undefined,
     getA11yStatusMessage: function getA11yStatusMessage(_ref2) {
       var isOpen = _ref2.isOpen,
         resultCount = _ref2.resultCount,
@@ -281,7 +282,13 @@ export var AutoComplete = /*#__PURE__*/forwardRef(function (_ref, ref) {
       setInputFocused(true);
     },
     onBlur: function onBlur(evt) {
+      var _evt$relatedTarget;
       _onBlur === null || _onBlur === void 0 || _onBlur(evt);
+
+      // Do not update inputFocused if the blur is caused by the clear button
+      if (evt.relatedTarget instanceof Element && ((_evt$relatedTarget = evt.relatedTarget) === null || _evt$relatedTarget === void 0 ? void 0 : _evt$relatedTarget.getAttribute("aria-label")) === locale.clearInputButton) {
+        return;
+      }
       setInputFocused(false);
     },
     onKeyDown: function onKeyDown(evt) {
@@ -340,7 +347,8 @@ export var AutoComplete = /*#__PURE__*/forwardRef(function (_ref, ref) {
         className: cx(stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["autocomplete-container"]))), inputFocused && stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["focusable-show"]))), variant === "large" && stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["autocomplete-large py-1"]))), disabled && stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["autocomplete-disabled"]))), isInvalid && stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["autocomplete-invalid"]))), noWrap && stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["autocomplete-nowrap"])))),
         onClick: function onClick() {
           var _inputRef$current;
-          return (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+          (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+          combobox.openMenu();
         },
         children: [Icon && /*#__PURE__*/_jsx(Icon, {
           className: cx(stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["mr-4 shrink-0"]))), stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["", ""])), disabled ? "text-grey-200" : inputFocused ? "text-accent-600" : "text-grey-500")),
@@ -390,7 +398,12 @@ export var AutoComplete = /*#__PURE__*/forwardRef(function (_ref, ref) {
           }), showClearButton && /*#__PURE__*/_jsx("button", {
             type: "button",
             className: stl(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["w-6 h-6 flex items-center justify-center text-grey-500"]))),
-            onClick: function onClick() {
+            onClick: function onClick(evt) {
+              var _inputRef$current2;
+              // We stop propagation to avoid calling the onClick handler of the container
+              // which would open the combobox
+              evt.stopPropagation();
+              (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.focus();
               setInternalInputValue("");
               multipleSelection.setSelectedItems([]);
             },

package/dist/esm/Fields/AutoComplete/types.d.ts

@@ -1,3 +1,4 @@
+import type { UseMultipleSelectionStateChangeTypes } from "downshift";
 import type { ComponentType, FocusEventHandler, ForwardedRef, PropsWithChildren, ReactNode, RefObject } from "react";
 import type { IconComponentType } from "../../Icons";
 export declare type AutoCompleteVariant = "medium" | "large";
@@ -171,8 +172,9 @@ export interface AutoCompleteSingleProps<T extends Option = Option> extends Auto
     /**
      * The callback function that is called when the value of the `AutoComplete` changes.
      */
-    onChange: (option: T | null) => void;
+    onChange: (option: T | null, changeType: AutoCompleteChangeTypes) => void;
 }
+export declare type AutoCompleteChangeTypes = UseMultipleSelectionStateChangeTypes;
 export interface AutoCompleteMultiProps<T extends Option = Option> extends AutoCompleteBaseProps<T> {
     /**
      * Whether the `AutoComplete` is a multiple selection.
@@ -185,7 +187,7 @@ export interface AutoCompleteMultiProps<T extends Option = Option> extends AutoC
     /**
      * The callback function that is called when the value of the `AutoComplete` changes.
      */
-    onChange: (option: T[] | null) => void;
+    onChange: (option: T[] | null, changeType: AutoCompleteChangeTypes) => void;
 }
 export declare type AutoCompleteProps<T extends Option = Option> = AutoCompleteMultiProps<T> | AutoCompleteSingleProps<T>;
 declare type OptionsValue = string | number | boolean;

package/dist/esm/Fields/FilePicker/FilePicker.d.ts

@@ -5,6 +5,11 @@ export declare type FilePickerLocale = {
 };
 export declare type FilePickerProps = DropzoneProps & {
     locale?: FilePickerLocale;
+    /**
+     * Whether the picked files can be cleared.
+     * @default true
+     */
+    clearable?: boolean;
 };
 /**
  * The `FilePicker` component allows users to select multiple files for attachment, supporting both drag-and-drop and browse options.
@@ -13,4 +18,9 @@ export declare type FilePickerProps = DropzoneProps & {
  */
 export declare const FilePicker: import("react").ForwardRefExoticComponent<import("../../Fields/Dropzone").DropzoneBaseProps & Omit<import("react-dropzone").DropzoneProps, "multiple" | "onDropAccepted" | "onDropRejected"> & {
     locale?: FilePickerLocale | undefined;
+    /**
+     * Whether the picked files can be cleared.
+     * @default true
+     */
+    clearable?: boolean | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/dist/esm/Fields/FilePicker/FilePicker.js

@@ -1,7 +1,9 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _excluded = ["clearable"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
 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) { _defineProperty(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; }
@@ -17,6 +19,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var FileCard = function FileCard(_ref) {
   var file = _ref.file,
     errors = _ref.errors,
+    clearable = _ref.clearable,
     removeFileTooltip = _ref.removeFileTooltip,
     onDelete = _ref.onDelete;
   var FileIcon = errors ? AlertTriangleIcon : FileTextIcon;
@@ -40,7 +43,7 @@ var FileCard = function FileCard(_ref) {
           children: formatHumanSize(file.size)
         })]
       })]
-    }), /*#__PURE__*/_jsx(IconButton, {
+    }), clearable && /*#__PURE__*/_jsx(IconButton, {
       icon: TrashIcon,
       title: removeFileTooltip,
       size: "medium",
@@ -60,6 +63,9 @@ var DEFAULT_FILE_PICKER_LOCALE = {
 export var FilePicker = /*#__PURE__*/forwardRef(function (props, ref) {
   var contextLocale = useLocale("filePicker");
   var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_FILE_PICKER_LOCALE), contextLocale), props.locale);
+  var _props$clearable = props.clearable,
+    clearable = _props$clearable === void 0 ? true : _props$clearable,
+    dropzoneProps = _objectWithoutProperties(props, _excluded);
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
     files = _useState2[0],
@@ -110,7 +116,7 @@ export var FilePicker = /*#__PURE__*/forwardRef(function (props, ref) {
   };
   return /*#__PURE__*/_jsxs("div", {
     className: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["flex flex-col gap-4"]))),
-    children: [/*#__PURE__*/_jsx(Dropzone, _objectSpread(_objectSpread({}, props), {}, {
+    children: [/*#__PURE__*/_jsx(Dropzone, _objectSpread(_objectSpread({}, dropzoneProps), {}, {
       ref: ref,
       onDrop: onDrop,
       hideFiles: true
@@ -121,6 +127,7 @@ export var FilePicker = /*#__PURE__*/forwardRef(function (props, ref) {
           errors = _ref5.errors;
         return /*#__PURE__*/_jsx(FileCard, {
           file: file,
+          clearable: clearable,
           errors: errors,
           removeFileTooltip: locale.removeFile,
           onDelete: function onDelete() {

package/dist/esm/Fields/Input/Input.js

@@ -116,7 +116,7 @@ export var Input = /*#__PURE__*/forwardRef(function (_ref, externalRef) {
       }
     },
     children: [Icon && /*#__PURE__*/_jsx(Icon, {
-      className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["ml-4 shrink-0 ", ""])), disabled ? "text-grey-200" : focused ? "text-accent-600" : "text-grey-500"),
+      className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["ml-4 shrink-0 ", ""])), disabled ? "text-grey-300" : focused ? "text-accent-600" : "text-grey-500"),
       width: iconSize,
       height: iconSize
     }), /*#__PURE__*/_jsx("input", _objectSpread(_objectSpread({

package/dist/esm/Fields/Input/Input.tailwind.js

@@ -1,10 +1,6 @@
-import _rgba from "../../styles/rgba";
-import _disabledColor from "../../styles/disabledColor";
 import _plugin from "tailwindcss/plugin";
 // @ts-check
 var plugin = _plugin;
-var disabledColor = _disabledColor;
-var rgba = _rgba;
 var inputPlugin = plugin(function (_ref) {
   var addComponents = _ref.addComponents,
     theme = _ref.theme;
@@ -19,7 +15,6 @@ var inputPlugin = plugin(function (_ref) {
       backgroundColor: theme("colors.white"),
       border: "1px solid ".concat(theme("colors.grey.500")),
       borderRadius: theme("borderRadius.DEFAULT"),
-      boxShadow: "inset 0px 1px 4px 0px ".concat(rgba(theme("colors.grey.500"), 0.3)),
       overflow: "hidden",
       transition: "all 100ms ease-in-out",
       "&:not(.input-disabled, .focusable-show):hover": {
@@ -47,15 +42,18 @@ var inputPlugin = plugin(function (_ref) {
         "&::placeholder": {
           color: theme("colors.grey.600")
         }
+      },
+      "&:has(input:read-only:not(input:disabled))": {
+        backgroundColor: theme("colors.grey.100"),
+        borderColor: "transparent"
       }
     },
     ".input-disabled": {
       cursor: "not-allowed",
-      background: "linear-gradient(-180deg, ".concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.100"), " 100%)"),
-      borderColor: disabledColor(theme("colors.grey.200")),
-      boxShadow: "none",
+      background: theme("colors.grey.100"),
+      borderColor: theme("colors.grey.200"),
       "input, input::placeholder": {
-        color: theme("colors.grey.300"),
+        color: theme("colors.grey.600"),
         pointerEvents: "none"
       }
     },

package/dist/esm/Fields/TextArea/TextArea.tailwind.js

@@ -1,10 +1,6 @@
-import _rgba from "../../styles/rgba";
-import _disabledColor from "../../styles/disabledColor";
 import _plugin from "tailwindcss/plugin";
 // @ts-check
 var plugin = _plugin;
-var disabledColor = _disabledColor;
-var rgba = _rgba;
 var textAreaPlugin = plugin(function (_ref) {
   var addComponents = _ref.addComponents,
     theme = _ref.theme;
@@ -15,7 +11,6 @@ var textAreaPlugin = plugin(function (_ref) {
       backgroundColor: theme("colors.white"),
       border: "1px solid ".concat(theme("colors.grey.500")),
       borderRadius: theme("borderRadius.DEFAULT"),
-      boxShadow: "inset 0px 1px 4px 0px ".concat(rgba(theme("colors.grey.500"), 0.3)),
       transition: "all 100ms ease-in-out",
       fontSize: theme("fontSize.base"),
       lineHeight: theme("lineHeight.base"),
@@ -26,8 +21,11 @@ var textAreaPlugin = plugin(function (_ref) {
         borderColor: theme("colors.grey.600")
       },
       "&:has(textarea:disabled)": {
-        borderColor: disabledColor(theme("colors.grey.200")),
-        boxShadow: "none"
+        borderColor: theme("colors.grey.200")
+      },
+      "&:has(textarea:read-only:not(textarea:disabled))": {
+        backgroundColor: theme("colors.grey.100"),
+        borderColor: "transparent"
       }
     },
     ".text-area-invalid": {
@@ -56,8 +54,8 @@ var textAreaPlugin = plugin(function (_ref) {
       },
       "&:disabled": {
         cursor: "not-allowed",
-        color: theme("colors.grey.300"),
-        background: "linear-gradient(-180deg, ".concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.100"), " 100%)")
+        color: theme("colors.grey.600"),
+        background: theme("colors.grey.100")
       }
     },
     ".text-area-invalid:not(.text-area:disabled)": {

package/dist/esm/Overlay/MenuButton/MenuButton.d.ts

@@ -19,7 +19,7 @@ export declare const MenuButton: {
     Divider: import("react").ForwardRefExoticComponent<import("react").RefAttributes<HTMLDivElement>>;
     Item: import("react").ForwardRefExoticComponent<import("./useMenuItemProps").BaseItemProps<HTMLDivElement> & DropdownMenu.DropdownMenuItemProps & {
         startIcon?: import("../..").IconComponentType | undefined;
-        variant?: "default" | "destructive" | undefined;
+        variant?: "destructive" | "default" | undefined;
     } & {
         children?: import("react").ReactNode;
     } & import("react").RefAttributes<HTMLDivElement>>;

package/dist/esm/Overlay/MenuButton/components/items/Item.d.ts

@@ -19,7 +19,7 @@ export declare const Item: import("react").ForwardRefExoticComponent<BaseItemPro
      * Variant of the item
      * @default "default"
      */
-    variant?: "default" | "destructive" | undefined;
+    variant?: "destructive" | "default" | undefined;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/dist/esm/Overlay/Modal/Modal.d.ts

@@ -2,7 +2,7 @@ import type { FC, ReactNode } from "react";
 import { ModalFooter } from "./components/ModalFooter";
 import { ModalSection } from "./components/ModalSection";
 import type { XOR } from "../../types";
-export declare type ModalSizeVariant = "medium" | "large";
+export declare type ModalSizeVariant = "small" | "medium" | "large";
 export declare type ModalLocale = {
     dismissText?: string;
     modalTitle?: string;

package/dist/esm/Overlay/Modal/Modal.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18;
 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) { _defineProperty(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; }
 import * as Dialog from "@radix-ui/react-dialog";
@@ -21,8 +21,14 @@ var DEFAULT_MODAL_LOCALE = {
   modalTitle: "Modal"
 };
 var SIZE_CLASSNAMES = {
-  medium: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["modal-dialog-medium"]))),
-  large: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["modal-dialog-large"])))
+  small: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["modal-dialog-small"]))),
+  medium: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["modal-dialog-medium"]))),
+  large: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["modal-dialog-large"])))
+};
+var SIZE_PADDING_CLASSNAMES = {
+  small: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["p-6"]))),
+  medium: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["p-8"]))),
+  large: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["p-10"])))
 };
 
 /**
@@ -70,10 +76,10 @@ export var Modal = function Modal(_ref) {
       asChild: true,
       children: triggerButton
     }), createPortal( /*#__PURE__*/_jsx(Dialog.Overlay, {
-      className: cx(animate && !prefersReducedMotion && stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["modal-animated"]))), stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["modal-overlay bg-grey-900/30 z-modalOverlay inset-0 fixed w-full h-full flex items-start justify-center overflow-x-hidden overflow-y-auto px-4 py-10"])))),
+      className: cx(animate && !prefersReducedMotion && stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["modal-animated"]))), stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["modal-overlay bg-grey-900/30 z-modalOverlay inset-0 fixed w-full h-full flex items-start justify-center overflow-x-hidden overflow-y-auto px-4 py-10"])))),
       children: /*#__PURE__*/_jsx(Dialog.Content, {
         ref: dialogContentRef,
-        className: cx(stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["modal-content"]))), SIZE_CLASSNAMES[size], centerY && stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["flex m-auto"])))),
+        className: cx(stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["modal-content"]))), SIZE_CLASSNAMES[size], centerY && stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["flex m-auto"])))),
         "aria-describedby": undefined,
         onOpenAutoFocus: function onOpenAutoFocus(e) {
           var _closeButtonRef$curre;
@@ -91,28 +97,28 @@ export var Modal = function Modal(_ref) {
           }
         },
         children: /*#__PURE__*/_jsx("div", {
-          className: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["modal-container"]))),
+          className: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["modal-container"]))),
           children: /*#__PURE__*/_jsxs(Card, {
             as: "div",
             elevation: "500",
-            className: cx(stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["relative"]))), className),
+            className: cx(stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["relative"]))), className),
             fullBleed: true,
             children: [/*#__PURE__*/_jsx("header", {
-              className: cx(stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["min-h-14 flex items-center justify-between space-x-2"]))), title ? stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["border-b border-grey-100 pl-8 pr-16"]))) : stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["justify-end px-8"]))), !title && hideCloseIcon && stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["hidden"])))),
+              className: cx(stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["min-h-14 flex items-center justify-between space-x-2"]))), title ? stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["border-b border-grey-100 pl-8 pr-16"]))) : stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["justify-end px-8"]))), !title && hideCloseIcon && stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["hidden"])))),
               children: /*#__PURE__*/_jsx(Dialog.Title, {
                 asChild: true,
                 children: title ? /*#__PURE__*/_jsx("div", {
-                  className: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["flex-1 display-heading truncate"]))),
+                  className: stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["flex-1 display-heading truncate"]))),
                   children: title
                 }) : /*#__PURE__*/_jsx(VisuallyHidden, {
                   children: locale.modalTitle
                 })
               })
             }), /*#__PURE__*/_jsx("div", {
-              className: cx(!fullBleed && stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["p-10"])))),
+              className: cx(!fullBleed && SIZE_PADDING_CLASSNAMES[size]),
               children: children
             }), !hideCloseIcon && /*#__PURE__*/_jsx("div", {
-              className: stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["-mr-2 absolute top-3 right-8"]))),
+              className: stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["-mr-2 absolute top-3 right-8"]))),
               children: /*#__PURE__*/_jsx(Dialog.Close, {
                 ref: closeButtonRef,
                 asChild: true,

package/dist/esm/Overlay/Modal/Modal.tailwind.js

@@ -18,6 +18,9 @@ var modalPlugin = plugin(function (_ref) {
       }
     },
     // Sizes
+    ".modal-dialog-small": {
+      maxWidth: "480px"
+    },
     ".modal-dialog-medium": {
       maxWidth: "640px"
     },