instantsearch-ui-components 0.14.0 → 0.15.1

package/dist/cjs/components/Carousel.js

@@ -66,9 +66,9 @@ function createCarouselComponent(_ref3) {
         Fragment: Fragment
       }) : _userProps$itemCompon,
       _userProps$previousIc = userProps.previousIconComponent,
-      PreviousIconComponent = _userProps$previousIc === void 0 ? PreviousIconDefaultComponent : _userProps$previousIc,
+      PreviousIcon = _userProps$previousIc === void 0 ? PreviousIconDefaultComponent : _userProps$previousIc,
       _userProps$nextIconCo = userProps.nextIconComponent,
-      NextIconComponent = _userProps$nextIconCo === void 0 ? NextIconDefaultComponent : _userProps$nextIconCo,
+      NextIcon = _userProps$nextIconCo === void 0 ? NextIconDefaultComponent : _userProps$nextIconCo,
       HeaderComponent = userProps.headerComponent,
       _userProps$showNaviga = userProps.showNavigation,
       showNavigation = _userProps$showNaviga === void 0 ? true : _userProps$showNaviga,
@@ -137,7 +137,7 @@ function createCarouselComponent(_ref3) {
         event.preventDefault();
         scrollLeft();
       }
-    }, createElement(PreviousIconComponent, {
+    }, createElement(PreviousIcon, {
       createElement: createElement
     })), createElement("ol", {
       className: (0, _lib.cx)(cssClasses.list),
@@ -183,7 +183,7 @@ function createCarouselComponent(_ref3) {
         event.preventDefault();
         scrollRight();
       }
-    }, createElement(NextIconComponent, {
+    }, createElement(NextIcon, {
       createElement: createElement
     })));
   };

package/dist/cjs/components/autocomplete/AutocompleteIndex.js

@@ -32,7 +32,7 @@ function createAutocompleteIndexComponent(_ref) {
         onSelect = _getItemProps.onSelect,
         itemProps = (0, _objectWithoutProperties2.default)(_getItemProps, _excluded);
       return createElement("li", (0, _extends2.default)({
-        key: item.objectID
+        key: "".concat(itemProps.id, ":").concat(item.objectID)
       }, itemProps, {
         className: (0, _cx.cx)('ais-AutocompleteIndexItem', classNames.item, className)
       }), createElement(ItemComponent, {

package/dist/cjs/components/autocomplete/AutocompletePanel.js

@@ -8,16 +8,23 @@ exports.createAutocompletePanelComponent = createAutocompletePanelComponent;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _cx = require("../../lib/cx");
-var _excluded = ["children", "classNames"];
+var _excluded = ["children", "classNames", "hidden"];
 function createAutocompletePanelComponent(_ref) {
   var createElement = _ref.createElement;
   return function AutocompletePanel(userProps) {
     var children = userProps.children,
       _userProps$classNames = userProps.classNames,
       classNames = _userProps$classNames === void 0 ? {} : _userProps$classNames,
+      hidden = userProps.hidden,
       props = (0, _objectWithoutProperties2.default)(userProps, _excluded);
     return createElement("div", (0, _extends2.default)({}, props, {
-      className: (0, _cx.cx)('ais-AutocompletePanel', classNames.root, props.className)
+      "aria-hidden": hidden,
+      className: (0, _cx.cx)('ais-AutocompletePanel', !hidden && 'ais-AutocompletePanel--open', classNames.root, props.className),
+      onMouseDown: function onMouseDown(event) {
+        // Prevents the autocomplete panel from blurring the input when
+        // clicking inside the panel.
+        event.preventDefault();
+      }
     }), createElement("div", {
       className: (0, _cx.cx)('ais-AutocompletePanelLayout', classNames.layout)
     }, children));

package/dist/cjs/components/autocomplete/AutocompleteRecentSearch.js

@@ -10,6 +10,7 @@ function createAutocompleteRecentSearchComponent(_ref) {
   var createElement = _ref.createElement;
   return function AutocompleteRecentSearch(_ref2) {
     var item = _ref2.item,
+      children = _ref2.children,
       onSelect = _ref2.onSelect,
       onRemoveRecentSearch = _ref2.onRemoveRecentSearch,
       _ref2$classNames = _ref2.classNames,
@@ -21,11 +22,11 @@ function createAutocompleteRecentSearchComponent(_ref) {
       className: (0, _lib.cx)('ais-AutocompleteItemContent', 'ais-AutocompleteRecentSearchItemContent', classNames.content)
     }, createElement("div", {
       className: (0, _lib.cx)('ais-AutocompleteItemIcon', 'ais-AutocompleteRecentSearchItemIcon', classNames.content)
-    }, createElement(_icons.AutocompleteClockIcon, {
+    }, createElement(_icons.ClockIcon, {
       createElement: createElement
     })), createElement("div", {
       className: (0, _lib.cx)('ais-AutocompleteItemContentBody', 'ais-AutocompleteRecentSearchItemContentBody', classNames.content)
-    }, item.query)), createElement("div", {
+    }, children)), createElement("div", {
       className: (0, _lib.cx)('ais-AutocompleteItemActions', 'ais-AutocompleteRecentSearchItemActions', classNames.actions)
     }, createElement("button", {
       className: (0, _lib.cx)('ais-AutocompleteItemActionButton', 'ais-AutocompleteRecentSearchItemDeleteButton', classNames.deleteButton),
@@ -34,7 +35,7 @@ function createAutocompleteRecentSearchComponent(_ref) {
         evt.stopPropagation();
         onRemoveRecentSearch();
       }
-    }, createElement(_icons.AutocompleteTrashIcon, {
+    }, createElement(_icons.TrashIcon, {
       createElement: createElement
     }))));
   };

package/dist/cjs/components/autocomplete/AutocompleteSearch.js

@@ -14,6 +14,7 @@ function createAutocompleteSearchComponent(_ref) {
       onClear = _ref2.onClear,
       query = _ref2.query,
       isSearchStalled = _ref2.isSearchStalled;
+    var inputRef = inputProps.ref;
     return createElement("form", {
       className: "ais-AutocompleteForm",
       action: "",
@@ -21,6 +22,10 @@ function createAutocompleteSearchComponent(_ref) {
       role: "search",
       onSubmit: function onSubmit(e) {
         return e.preventDefault();
+      },
+      onReset: function onReset() {
+        var _inputRef$current;
+        return (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
       }
     }, createElement("div", {
       className: "ais-AutocompleteInputWrapperPrefix"
@@ -33,12 +38,12 @@ function createAutocompleteSearchComponent(_ref) {
       className: "ais-AutocompleteSubmitButton",
       type: "submit",
       title: "Submit"
-    }, createElement(_icons.AutocompleteSubmitIcon, {
+    }, createElement(_icons.SubmitIcon, {
       createElement: createElement
     }))), createElement("div", {
       className: "ais-AutocompleteLoadingIndicator",
       hidden: !isSearchStalled
-    }, createElement(_icons.AutocompleteLoadingIcon, {
+    }, createElement(_icons.LoadingIcon, {
       createElement: createElement
     }))), createElement("div", {
       className: "ais-AutocompleteInputWrapper"
@@ -51,7 +56,6 @@ function createAutocompleteSearchComponent(_ref) {
       autoCapitalize: "off",
       enterKeyHint: "search",
       spellCheck: "false",
-      placeholder: "",
       maxLength: 512,
       type: "search",
       value: query
@@ -63,7 +67,7 @@ function createAutocompleteSearchComponent(_ref) {
       title: "Clear",
       hidden: query.length === 0 || isSearchStalled,
       onClick: onClear
-    }, createElement(_icons.AutocompleteClearIcon, {
+    }, createElement(_icons.ClearIcon, {
       createElement: createElement
     }))));
   };

package/dist/cjs/components/autocomplete/AutocompleteSuggestion.js

@@ -9,7 +9,7 @@ var _icons = require("./icons");
 function createAutocompleteSuggestionComponent(_ref) {
   var createElement = _ref.createElement;
   return function AutocompleteSuggestion(_ref2) {
-    var item = _ref2.item,
+    var children = _ref2.children,
       onSelect = _ref2.onSelect,
       _ref2$classNames = _ref2.classNames,
       classNames = _ref2$classNames === void 0 ? {} : _ref2$classNames;
@@ -20,10 +20,10 @@ function createAutocompleteSuggestionComponent(_ref) {
       className: (0, _lib.cx)('ais-AutocompleteItemContent', 'ais-AutocompleteSuggestionItemContent', classNames.content)
     }, createElement("div", {
       className: (0, _lib.cx)('ais-AutocompleteItemIcon', 'ais-AutocompleteSuggestionItemIcon', classNames.content)
-    }, createElement(_icons.AutocompleteSubmitIcon, {
+    }, createElement(_icons.SubmitIcon, {
       createElement: createElement
     })), createElement("div", {
       className: (0, _lib.cx)('ais-AutocompleteItemContentBody', 'ais-AutocompleteSuggestionItemContentBody', classNames.content)
-    }, item.query)));
+    }, children)));
   };
 }

package/dist/cjs/components/autocomplete/createAutocompletePropGetters.js

@@ -17,8 +17,10 @@ function createAutocompletePropGetters(_ref) {
     var indices = _ref2.indices,
       indicesConfig = _ref2.indicesConfig,
       onRefine = _ref2.onRefine,
-      globalOnSelect = _ref2.onSelect;
+      globalOnSelect = _ref2.onSelect,
+      placeholder = _ref2.placeholder;
     var getElementId = createGetElementId(useId());
+    var inputRef = useRef(null);
     var rootRef = useRef(null);
     var _useState = useState(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -50,7 +52,7 @@ function createAutocompletePropGetters(_ref) {
         document.body.removeEventListener('click', onBodyClick);
       };
     }, [rootRef]);
-    var getNextActiveDescendent = function getNextActiveDescendent(key) {
+    var getNextActiveDescendant = function getNextActiveDescendant(key) {
       switch (key) {
         case 'ArrowLeft':
         case 'ArrowUp':
@@ -69,11 +71,21 @@ function createAutocompletePropGetters(_ref) {
       }
     };
     var submit = function submit() {
-      var actualActiveDescendant = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : activeDescendant;
-      setIsOpen(false);
-      if (actualActiveDescendant && items.has(actualActiveDescendant)) {
+      var _override$activeDesce;
+      var override = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      if (isOpen) {
+        setIsOpen(false);
+      } else {
+        var _inputRef$current;
+        (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.blur();
+      }
+      var actualDescendant = (_override$activeDesce = override.activeDescendant) !== null && _override$activeDesce !== void 0 ? _override$activeDesce : activeDescendant;
+      if (!actualDescendant && override.query) {
+        onRefine(override.query);
+      }
+      if (actualDescendant && items.has(actualDescendant)) {
         var _getQuery;
-        var _ref3 = items.get(actualActiveDescendant),
+        var _ref3 = items.get(actualDescendant),
           _item = _ref3.item,
           _ref3$config = _ref3.config,
           indexOnSelect = _ref3$config.onSelect,
@@ -95,43 +107,54 @@ function createAutocompletePropGetters(_ref) {
       getInputProps: function getInputProps() {
         return {
           id: getElementId('input'),
+          ref: inputRef,
           role: 'combobox',
           'aria-autocomplete': 'list',
           'aria-expanded': isOpen,
           'aria-haspopup': 'grid',
           'aria-controls': getElementId('panel'),
           'aria-activedescendant': activeDescendant,
+          placeholder: placeholder,
           onFocus: function onFocus() {
             return setIsOpen(true);
           },
           onKeyDown: function onKeyDown(event) {
-            if (event.key === 'Escape') {
-              setActiveDescendant(undefined);
-              setIsOpen(false);
-              return;
-            }
             switch (event.key) {
+              case 'Escape':
+                {
+                  if (isOpen) {
+                    setIsOpen(false);
+                    event.preventDefault();
+                  } else {
+                    setActiveDescendant(undefined);
+                  }
+                  break;
+                }
               case 'ArrowLeft':
               case 'ArrowUp':
               case 'ArrowRight':
               case 'ArrowDown':
                 {
                   var _document$getElementB;
-                  var nextActiveDescendent = getNextActiveDescendent(event.key);
-                  setActiveDescendant(nextActiveDescendent);
-                  (_document$getElementB = document.getElementById(nextActiveDescendent)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.scrollIntoView(false);
+                  setIsOpen(true);
+                  var nextActiveDescendant = getNextActiveDescendant(event.key);
+                  setActiveDescendant(nextActiveDescendant);
+                  (_document$getElementB = document.getElementById(nextActiveDescendant)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.scrollIntoView(false);
                   event.preventDefault();
                   break;
                 }
               case 'Enter':
                 {
-                  submit();
+                  submit({
+                    query: event.target.value
+                  });
                   break;
                 }
               case 'Tab':
                 setIsOpen(false);
                 break;
               default:
+                setIsOpen(true);
                 return;
             }
           },
@@ -159,7 +182,9 @@ function createAutocompletePropGetters(_ref) {
           role: 'row',
           'aria-selected': id === activeDescendant,
           onSelect: function onSelect() {
-            return submit(id);
+            return submit({
+              activeDescendant: id
+            });
           }
         };
       },

package/dist/cjs/components/autocomplete/createAutocompleteStorage.js

@@ -52,7 +52,13 @@ function createAutocompleteStorage(_ref) {
       return {
         objectID: value,
         query: value,
-        __indexName: 'recent-searches'
+        __indexName: 'recent-searches',
+        _highlightResult: getHighlightedAttribute({
+          item: {
+            query: value
+          },
+          query: query || ''
+        })
       };
     });
     var indicesForPropGetters = (0, _toConsumableArray2.default)(indices);
@@ -88,6 +94,24 @@ function isLocalStorageSupported() {
     return false;
   }
 }
+function getHighlightedAttribute(_ref3) {
+  var item = _ref3.item,
+    query = _ref3.query;
+  if (!query.trim().length) {
+    return {
+      query: {
+        matchLevel: 'none'
+      }
+    };
+  }
+  return {
+    query: {
+      value: item.query.replace(new RegExp(query.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&'), 'gi'), function (match) {
+        return "<mark>".concat(match, "</mark>");
+      })
+    }
+  };
+}
 function getLocalStorage() {
   var key = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : LOCAL_STORAGE_KEY;
   if (!isLocalStorageSupported()) {
@@ -112,10 +136,10 @@ function getLocalStorage() {
     }
   };
 }
-function createStorage(_ref3) {
-  var _ref3$limit = _ref3.limit,
-    limit = _ref3$limit === void 0 ? 5 : _ref3$limit,
-    storageKey = _ref3.storageKey;
+function createStorage(_ref4) {
+  var _ref4$limit = _ref4.limit,
+    limit = _ref4$limit === void 0 ? 5 : _ref4$limit,
+    storageKey = _ref4.storageKey;
   var storage = getLocalStorage(storageKey);
   var updateListener = null;
   return {

package/dist/cjs/components/autocomplete/icons.js

@@ -3,30 +3,26 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.AutocompleteClearIcon = AutocompleteClearIcon;
-exports.AutocompleteClockIcon = AutocompleteClockIcon;
-exports.AutocompleteLoadingIcon = AutocompleteLoadingIcon;
-exports.AutocompleteSubmitIcon = AutocompleteSubmitIcon;
-exports.AutocompleteTrashIcon = AutocompleteTrashIcon;
-function AutocompleteSubmitIcon(_ref) {
+exports.ClearIcon = ClearIcon;
+exports.ClockIcon = ClockIcon;
+exports.LoadingIcon = LoadingIcon;
+exports.SubmitIcon = SubmitIcon;
+exports.TrashIcon = TrashIcon;
+function SubmitIcon(_ref) {
   var createElement = _ref.createElement;
   return createElement("svg", {
     className: "ais-AutocompleteSubmitIcon",
     viewBox: "0 0 24 24",
-    width: "20",
-    height: "20",
     fill: "currentColor"
   }, createElement("path", {
     d: "M16.041 15.856c-0.034 0.026-0.067 0.055-0.099 0.087s-0.060 0.064-0.087 0.099c-1.258 1.213-2.969 1.958-4.855 1.958-1.933 0-3.682-0.782-4.95-2.050s-2.050-3.017-2.050-4.95 0.782-3.682 2.050-4.95 3.017-2.050 4.95-2.050 3.682 0.782 4.95 2.050 2.050 3.017 2.050 4.95c0 1.886-0.745 3.597-1.959 4.856zM21.707 20.293l-3.675-3.675c1.231-1.54 1.968-3.493 1.968-5.618 0-2.485-1.008-4.736-2.636-6.364s-3.879-2.636-6.364-2.636-4.736 1.008-6.364 2.636-2.636 3.879-2.636 6.364 1.008 4.736 2.636 6.364 3.879 2.636 6.364 2.636c2.125 0 4.078-0.737 5.618-1.968l3.675 3.675c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414z"
   }));
 }
-function AutocompleteLoadingIcon(_ref2) {
+function LoadingIcon(_ref2) {
   var createElement = _ref2.createElement;
   return createElement("svg", {
     className: "ais-AutocompleteLoadingIcon",
-    viewBox: "0 0 100 100",
-    width: "20",
-    height: "20"
+    viewBox: "0 0 100 100"
   }, createElement("circle", {
     cx: "50",
     cy: "50",
@@ -44,19 +40,17 @@ function AutocompleteLoadingIcon(_ref2) {
     keyTimes: "0;0.40;0.65;1"
   })));
 }
-function AutocompleteClearIcon(_ref3) {
+function ClearIcon(_ref3) {
   var createElement = _ref3.createElement;
   return createElement("svg", {
     className: "ais-AutocompleteClearIcon",
     viewBox: "0 0 24 24",
-    width: "18",
-    height: "18",
     fill: "currentColor"
   }, createElement("path", {
     d: "M5.293 6.707l5.293 5.293-5.293 5.293c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0l5.293-5.293 5.293 5.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-5.293-5.293 5.293-5.293c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-5.293 5.293-5.293-5.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414z"
   }));
 }
-function AutocompleteClockIcon(_ref4) {
+function ClockIcon(_ref4) {
   var createElement = _ref4.createElement;
   return createElement("svg", {
     viewBox: "0 0 24 24",
@@ -65,7 +59,7 @@ function AutocompleteClockIcon(_ref4) {
     d: "M12.516 6.984v5.25l4.5 2.672-0.75 1.266-5.25-3.188v-6h1.5zM12 20.016q3.281 0 5.648-2.367t2.367-5.648-2.367-5.648-5.648-2.367-5.648 2.367-2.367 5.648 2.367 5.648 5.648 2.367zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93z"
   }));
 }
-function AutocompleteTrashIcon(_ref5) {
+function TrashIcon(_ref5) {
   var createElement = _ref5.createElement;
   return createElement("svg", {
     viewBox: "0 0 24 24",

package/dist/cjs/components/chat/ChatHeader.js

@@ -27,10 +27,10 @@ function createChatHeaderComponent(_ref) {
       onClear = _ref2.onClear,
       _ref2$canClear = _ref2.canClear,
       canClear = _ref2$canClear === void 0 ? false : _ref2$canClear,
-      CloseIconComponent = _ref2.closeIconComponent,
-      MinimizeIconComponent = _ref2.minimizeIconComponent,
-      MaximizeIconComponent = _ref2.maximizeIconComponent,
-      TitleIconComponent = _ref2.titleIconComponent,
+      CloseIcon = _ref2.closeIconComponent,
+      MinimizeIcon = _ref2.minimizeIconComponent,
+      MaximizeIcon = _ref2.maximizeIconComponent,
+      TitleIcon = _ref2.titleIconComponent,
       _ref2$classNames = _ref2.classNames,
       classNames = _ref2$classNames === void 0 ? {} : _ref2$classNames,
       userTranslations = _ref2.translations,
@@ -42,9 +42,9 @@ function createChatHeaderComponent(_ref) {
       closeLabel: 'Close chat',
       clearLabel: 'Clear'
     }, userTranslations);
-    var defaultMaximizeIcon = maximized ? createElement(_icons.MinimizeIconComponent, {
+    var defaultMaximizeIcon = maximized ? createElement(_icons.MinimizeIcon, {
       createElement: createElement
-    }) : createElement(_icons.MaximizeIconComponent, {
+    }) : createElement(_icons.MaximizeIcon, {
       createElement: createElement
     });
     return createElement("div", (0, _extends2.default)({
@@ -53,10 +53,8 @@ function createChatHeaderComponent(_ref) {
       className: (0, _lib.cx)('ais-ChatHeader-title', classNames.title)
     }, createElement("span", {
       className: (0, _lib.cx)('ais-ChatHeader-titleIcon', classNames.titleIcon)
-    }, TitleIconComponent ? createElement(TitleIconComponent, null) : createElement(_icons.SparklesIconComponent, {
-      createElement: createElement,
-      width: 20,
-      height: 20
+    }, TitleIcon ? createElement(TitleIcon, null) : createElement(_icons.SparklesIcon, {
+      createElement: createElement
     })), translations.title), createElement("div", {
       className: (0, _lib.cx)('ais-ChatHeader-actions')
     }, onClear && createElement(Button, {
@@ -72,7 +70,7 @@ function createChatHeaderComponent(_ref) {
       className: (0, _lib.cx)('ais-ChatHeader-maximize', classNames.maximize),
       onClick: onToggleMaximize,
       "aria-label": maximized ? translations.minimizeLabel : translations.maximizeLabel
-    }, MaximizeIconComponent ? createElement(MaximizeIconComponent, {
+    }, MaximizeIcon ? createElement(MaximizeIcon, {
       maximized: maximized
     }) : defaultMaximizeIcon), createElement(Button, {
       variant: "ghost",
@@ -82,7 +80,7 @@ function createChatHeaderComponent(_ref) {
       onClick: onClose,
       "aria-label": translations.closeLabel,
       title: translations.closeLabel
-    }, CloseIconComponent ? createElement(CloseIconComponent, null) : createElement(_icons.CloseIconComponent, {
+    }, CloseIcon ? createElement(CloseIcon, null) : createElement(_icons.CloseIcon, {
       createElement: createElement
     }))));
   };

package/dist/cjs/components/chat/ChatMessage.js

@@ -131,7 +131,7 @@ function createChatMessageComponent(_ref) {
           var _action$onClick;
           return (_action$onClick = action.onClick) === null || _action$onClick === void 0 ? void 0 : _action$onClick.call(action, message);
         }
-      }, action.icon ? createElement(action.icon, null) : createElement(_icons.MenuIconComponent, {
+      }, action.icon ? createElement(action.icon, null) : createElement(_icons.MenuIcon, {
         createElement: createElement
       }));
     })), FooterComponent && createElement("div", {

package/dist/cjs/components/chat/ChatMessageError.js

@@ -50,7 +50,7 @@ function createChatMessageErrorComponent(_ref) {
       onClick: function onClick() {
         return onReload === null || onReload === void 0 ? void 0 : onReload();
       }
-    }, createElement(_icons.ReloadIconComponent, {
+    }, createElement(_icons.ReloadIcon, {
       createElement: createElement
     }), translations.retryText)))));
   };

package/dist/cjs/components/chat/ChatMessageLoader.js

@@ -28,7 +28,7 @@ function createChatMessageLoaderComponent(_ref) {
       className: "ais-ChatMessage-leading"
     }, createElement("div", {
       className: "ais-ChatMessageLoader-spinner"
-    }, createElement(_icons.LoadingSpinnerIconComponent, {
+    }, createElement(_icons.LoadingSpinnerIcon, {
       createElement: createElement
     }))), createElement("div", {
       className: "ais-ChatMessage-content"

package/dist/cjs/components/chat/ChatMessages.js

@@ -52,7 +52,7 @@ function createDefaultMessageComponent(_ref) {
     var defaultAssistantActions = [].concat((0, _toConsumableArray2.default)(hasTextContent(message) ? [{
       title: translations.copyToClipboardLabel,
       icon: function icon() {
-        return createElement(_icons.CopyIconComponent, {
+        return createElement(_icons.CopyIcon, {
           createElement: createElement
         });
       },
@@ -60,7 +60,7 @@ function createDefaultMessageComponent(_ref) {
     }] : []), [{
       title: translations.regenerateLabel,
       icon: function icon() {
-        return createElement(_icons.ReloadIconComponent, {
+        return createElement(_icons.ReloadIcon, {
           createElement: createElement
         });
       },
@@ -194,7 +194,7 @@ function createChatMessagesComponent(_ref3) {
       onClick: onScrollToBottom,
       "aria-label": translations.scrollToBottomLabel,
       tabIndex: isScrollAtBottom ? -1 : 0
-    }, createElement(_icons.ChevronDownIconComponent, {
+    }, createElement(_icons.ChevronDownIcon, {
       createElement: createElement
     })));
   };

package/dist/cjs/components/chat/ChatPrompt.js

@@ -94,9 +94,9 @@ function createChatPromptComponent(_ref) {
     var hasValue = typeof value === 'string' ? value.trim() !== '' : Boolean(value);
     var canStop = status === 'submitted' || status === 'streaming';
     var buttonDisabled = !hasValue && !canStop || disabled;
-    var submitIcon = canStop ? createElement(_icons.StopIconComponent, {
+    var submitIcon = canStop ? createElement(_icons.StopIcon, {
       createElement: createElement
-    }) : createElement(_icons.ArrowUpIconComponent, {
+    }) : createElement(_icons.ArrowUpIcon, {
       createElement: createElement
     });
     return createElement("form", {

package/dist/cjs/components/chat/ChatToggleButton.js

@@ -19,19 +19,15 @@ function createChatToggleButtonComponent(_ref) {
   return function ChatToggleButton(_ref2) {
     var open = _ref2.open,
       onClick = _ref2.onClick,
-      ToggleIconComponent = _ref2.toggleIconComponent,
+      ToggleIcon = _ref2.toggleIconComponent,
       _ref2$classNames = _ref2.classNames,
       classNames = _ref2$classNames === void 0 ? {} : _ref2$classNames,
       className = _ref2.className,
       props = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
-    var defaultIcon = open ? createElement(_icons.ChevronUpIconComponent, {
-      createElement: createElement,
-      width: 28,
-      height: 28
-    }) : createElement(_icons.SparklesIconComponent, {
-      createElement: createElement,
-      width: 28,
-      height: 28
+    var defaultIcon = open ? createElement(_icons.ChevronUpIcon, {
+      createElement: createElement
+    }) : createElement(_icons.SparklesIcon, {
+      createElement: createElement
     });
     return createElement(Button, (0, _extends2.default)({
       variant: "primary",
@@ -39,7 +35,7 @@ function createChatToggleButtonComponent(_ref) {
       iconOnly: true,
       className: (0, _cx.cx)('ais-ChatToggleButton', open && 'ais-ChatToggleButton--open', classNames.root, className),
       onClick: onClick
-    }, props), ToggleIconComponent ? createElement(ToggleIconComponent, {
+    }, props), ToggleIcon ? createElement(ToggleIcon, {
       isOpen: open
     }) : defaultIcon);
   };