@primer/react 38.1.0-rc.a72ba106c → 38.1.0-rc.aa79f957c

package/dist/Autocomplete/AutocompleteMenu.js

@@ -1,4 +1,5 @@
-import React, { useContext, useRef, useState, useMemo, useEffect } from 'react';
+import { c } from 'react-compiler-runtime';
+import React, { useContext, useRef, useState, useEffect } from 'react';
 import { debounce } from '@github/mini-throttle';
 import { announce } from '@primer/live-region-element';
 import { scrollIntoView } from '@primer/behaviors';
@@ -47,15 +48,16 @@ const debounceAnnouncement = debounce(announcement => {
   announce(announcement);
 }, 250);
 function AutocompleteMenu(props) {
+  const $ = c(78);
   const autocompleteContext = useContext(AutocompleteContext);
   if (autocompleteContext === null) {
-    throw new Error('AutocompleteContext returned null values');
+    throw new Error("AutocompleteContext returned null values");
   }
   const {
     activeDescendantRef,
     id,
     inputRef,
-    inputValue = '',
+    inputValue: t0,
     scrollContainerRef,
     setAutocompleteSuggestion,
     setShowMenu,
@@ -64,182 +66,390 @@ function AutocompleteMenu(props) {
     setSelectedItemLength,
     showMenu
   } = autocompleteContext;
+  const inputValue = t0 === undefined ? "" : t0;
   const {
     items,
     selectedItemIds,
     sortOnCloseFn,
-    emptyStateText = 'No selectable options',
+    emptyStateText: t1,
     addNewItem,
     loading,
-    selectionVariant = 'single',
+    selectionVariant: t2,
     filterFn,
-    'aria-labelledby': ariaLabelledBy,
+    "aria-labelledby": ariaLabelledBy,
     onOpenChange,
     onSelectedChange,
     customScrollContainerRef
   } = props;
+  const emptyStateText = t1 === undefined ? "No selectable options" : t1;
+  const selectionVariant = t2 === undefined ? "single" : t2;
   const listContainerRef = useRef(null);
-  const allItemsToRenderRef = useRef([]);
+  let t3;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = [];
+    $[0] = t3;
+  } else {
+    t3 = $[0];
+  }
+  const allItemsToRenderRef = useRef(t3);
   const [highlightedItem, setHighlightedItem] = useState();
-  const [sortedItemIds, setSortedItemIds] = useState(items.map(({
-    id: itemId
-  }) => itemId));
+  let t4;
+  if ($[1] !== items) {
+    t4 = items.map(_temp);
+    $[1] = items;
+    $[2] = t4;
+  } else {
+    t4 = $[2];
+  }
+  const [sortedItemIds, setSortedItemIds] = useState(t4);
   const generatedUniqueId = useId(id);
-  const selectableItems = useMemo(() => items.map(selectableItem => {
-    return {
+  let t5;
+  if ($[3] !== (highlightedItem === null || highlightedItem === void 0 ? void 0 : highlightedItem.id) || $[4] !== inputRef || $[5] !== items || $[6] !== onSelectedChange || $[7] !== selectedItemIds || $[8] !== selectionVariant || $[9] !== setAutocompleteSuggestion || $[10] !== setInputValue || $[11] !== setShowMenu) {
+    t5 = items.map(selectableItem => ({
       ...selectableItem,
-      role: 'option',
+      role: "option",
       id: selectableItem.id,
       active: (highlightedItem === null || highlightedItem === void 0 ? void 0 : highlightedItem.id) === selectableItem.id,
-      selected: selectionVariant === 'multiple' ? selectedItemIds.includes(selectableItem.id) : undefined,
+      selected: selectionVariant === "multiple" ? selectedItemIds.includes(selectableItem.id) : undefined,
       onAction: item => {
         const otherSelectedItemIds = selectedItemIds.filter(selectedItemId => selectedItemId !== item.id);
         const newSelectedItemIds = selectedItemIds.includes(item.id) ? otherSelectedItemIds : [...otherSelectedItemIds, item.id];
         const onSelectedChangeFn = onSelectedChange ? onSelectedChange : getdefaultCheckedSelectionChange(setInputValue);
         onSelectedChangeFn(newSelectedItemIds.map(newSelectedItemId => getItemById(newSelectedItemId, items)));
-        if (selectionVariant === 'multiple') {
-          setInputValue('');
-          setAutocompleteSuggestion('');
+        if (selectionVariant === "multiple") {
+          setInputValue("");
+          setAutocompleteSuggestion("");
         } else {
           var _inputRef$current;
           setShowMenu(false);
           (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.setSelectionRange(inputRef.current.value.length, inputRef.current.value.length);
         }
       }
+    }));
+    $[3] = highlightedItem === null || highlightedItem === void 0 ? void 0 : highlightedItem.id;
+    $[4] = inputRef;
+    $[5] = items;
+    $[6] = onSelectedChange;
+    $[7] = selectedItemIds;
+    $[8] = selectionVariant;
+    $[9] = setAutocompleteSuggestion;
+    $[10] = setInputValue;
+    $[11] = setShowMenu;
+    $[12] = t5;
+  } else {
+    t5 = $[12];
+  }
+  const selectableItems = t5;
+  let t6;
+  if ($[13] !== sortedItemIds) {
+    t6 = sortedItemIds.reduce(_temp2, {});
+    $[13] = sortedItemIds;
+    $[14] = t6;
+  } else {
+    t6 = $[14];
+  }
+  const itemSortOrderData = t6;
+  let t7;
+  if ($[15] !== filterFn || $[16] !== inputValue || $[17] !== itemSortOrderData || $[18] !== selectableItems) {
+    let t8;
+    if ($[20] !== itemSortOrderData) {
+      t8 = (a, b) => itemSortOrderData[a.id] - itemSortOrderData[b.id];
+      $[20] = itemSortOrderData;
+      $[21] = t8;
+    } else {
+      t8 = $[21];
+    }
+    t7 = selectableItems.filter(filterFn ? filterFn : getDefaultItemFilter(inputValue)).sort(t8);
+    $[15] = filterFn;
+    $[16] = inputValue;
+    $[17] = itemSortOrderData;
+    $[18] = selectableItems;
+    $[19] = t7;
+  } else {
+    t7 = $[19];
+  }
+  const sortedAndFilteredItemsToRender = t7;
+  let t8;
+  if ($[22] !== addNewItem || $[23] !== generatedUniqueId || $[24] !== (highlightedItem === null || highlightedItem === void 0 ? void 0 : highlightedItem.id) || $[25] !== selectedItemIds || $[26] !== selectionVariant || $[27] !== setAutocompleteSuggestion || $[28] !== setInputValue) {
+    t8 = addNewItem ? [{
+      ...addNewItem,
+      role: "option",
+      key: addNewItem.id,
+      active: (highlightedItem === null || highlightedItem === void 0 ? void 0 : highlightedItem.id) === addNewItem.id,
+      selected: selectionVariant === "multiple" ? selectedItemIds.includes(addNewItem.id) : undefined,
+      leadingVisual: _temp3,
+      onAction: item_0 => {
+        addNewItem.handleAddItem({
+          ...item_0,
+          id: item_0.id || generatedUniqueId,
+          leadingVisual: undefined
+        });
+        if (selectionVariant === "multiple") {
+          setInputValue("");
+          setAutocompleteSuggestion("");
+        }
+      }
+    }] : [];
+    $[22] = addNewItem;
+    $[23] = generatedUniqueId;
+    $[24] = highlightedItem === null || highlightedItem === void 0 ? void 0 : highlightedItem.id;
+    $[25] = selectedItemIds;
+    $[26] = selectionVariant;
+    $[27] = setAutocompleteSuggestion;
+    $[28] = setInputValue;
+    $[29] = t8;
+  } else {
+    t8 = $[29];
+  }
+  let t9;
+  if ($[30] !== sortedAndFilteredItemsToRender || $[31] !== t8) {
+    t9 = [...sortedAndFilteredItemsToRender, ...t8];
+    $[30] = sortedAndFilteredItemsToRender;
+    $[31] = t8;
+    $[32] = t9;
+  } else {
+    t9 = $[32];
+  }
+  const allItemsToRender = t9;
+  let t10;
+  if ($[33] !== allItemsToRender) {
+    t10 = () => {
+      allItemsToRenderRef.current = allItemsToRender;
     };
-  }), [highlightedItem, items, selectedItemIds, inputRef, onSelectedChange, selectionVariant, setAutocompleteSuggestion, setInputValue, setShowMenu]);
-  const itemSortOrderData = useMemo(() => sortedItemIds.reduce((acc, curr, i) => {
-    acc[curr] = i;
-    return acc;
-  }, {}), [sortedItemIds]);
-  const sortedAndFilteredItemsToRender = useMemo(() => selectableItems.filter(filterFn ? filterFn : getDefaultItemFilter(inputValue)).sort((a, b) => itemSortOrderData[a.id] - itemSortOrderData[b.id]), [selectableItems, itemSortOrderData, filterFn, inputValue]);
-  const allItemsToRender = useMemo(() => [
-  // sorted and filtered selectable items
-  ...sortedAndFilteredItemsToRender,
-  // menu item used for creating a token from whatever is in the text input
-  ...(addNewItem ? [{
-    ...addNewItem,
-    role: 'option',
-    key: addNewItem.id,
-    active: (highlightedItem === null || highlightedItem === void 0 ? void 0 : highlightedItem.id) === addNewItem.id,
-    selected: selectionVariant === 'multiple' ? selectedItemIds.includes(addNewItem.id) : undefined,
-    leadingVisual: () => /*#__PURE__*/jsx(PlusIcon, {}),
-    onAction: item_0 => {
-      // TODO: make it possible to pass a leadingVisual when using `addNewItem`
-      addNewItem.handleAddItem({
-        ...item_0,
-        id: item_0.id || generatedUniqueId,
-        leadingVisual: undefined
-      });
-      if (selectionVariant === 'multiple') {
-        setInputValue('');
-        setAutocompleteSuggestion('');
+    $[33] = allItemsToRender;
+    $[34] = t10;
+  } else {
+    t10 = $[34];
+  }
+  React.useEffect(t10);
+  let t11;
+  let t12;
+  if ($[35] !== allItemsToRender || $[36] !== emptyStateText) {
+    t11 = () => {
+      if (allItemsToRender.length === 0) {
+        debounceAnnouncement(emptyStateText);
       }
-    }
-  }] : [])], [sortedAndFilteredItemsToRender, addNewItem, setAutocompleteSuggestion, selectionVariant, setInputValue, generatedUniqueId, highlightedItem, selectedItemIds]);
-  React.useEffect(() => {
-    allItemsToRenderRef.current = allItemsToRender;
-  });
-  React.useEffect(() => {
-    if (allItemsToRender.length === 0) {
-      debounceAnnouncement(emptyStateText);
-    }
-  }, [allItemsToRender, emptyStateText]);
-  useFocusZone({
-    containerRef: listContainerRef,
-    focusOutBehavior: 'wrap',
-    focusableElementFilter: element => {
-      return !(element instanceof HTMLInputElement);
-    },
-    activeDescendantFocus: inputRef,
-    onActiveDescendantChanged: (current, _previous, directlyActivated) => {
-      // eslint-disable-next-line react-compiler/react-compiler
+    };
+    t12 = [allItemsToRender, emptyStateText];
+    $[35] = allItemsToRender;
+    $[36] = emptyStateText;
+    $[37] = t11;
+    $[38] = t12;
+  } else {
+    t11 = $[37];
+    t12 = $[38];
+  }
+  React.useEffect(t11, t12);
+  let t13;
+  if ($[39] !== activeDescendantRef || $[40] !== customScrollContainerRef || $[41] !== scrollContainerRef || $[42] !== setIsMenuDirectlyActivated) {
+    t13 = (current, _previous, directlyActivated) => {
       activeDescendantRef.current = current || null;
       if (current) {
         const selectedItem = allItemsToRenderRef.current.find(item_1 => {
           var _current$closest;
-          return item_1.id === ((_current$closest = current.closest('li')) === null || _current$closest === void 0 ? void 0 : _current$closest.getAttribute('data-id'));
+          return item_1.id === ((_current$closest = current.closest("li")) === null || _current$closest === void 0 ? void 0 : _current$closest.getAttribute("data-id"));
         });
         setHighlightedItem(selectedItem);
         setIsMenuDirectlyActivated(directlyActivated);
       }
       if (current && customScrollContainerRef && customScrollContainerRef.current && directlyActivated) {
         scrollIntoView(current, customScrollContainerRef.current, menuScrollMargins);
-      } else if (current && scrollContainerRef.current && directlyActivated) {
-        scrollIntoView(current, scrollContainerRef.current, menuScrollMargins);
+      } else {
+        if (current && scrollContainerRef.current && directlyActivated) {
+          scrollIntoView(current, scrollContainerRef.current, menuScrollMargins);
+        }
       }
-    }
-  }, [loading]);
-  useEffect(() => {
-    var _highlightedItem$text;
-    if (highlightedItem !== null && highlightedItem !== void 0 && (_highlightedItem$text = highlightedItem.text) !== null && _highlightedItem$text !== void 0 && _highlightedItem$text.startsWith(inputValue) && !selectedItemIds.includes(highlightedItem.id)) {
-      setAutocompleteSuggestion(highlightedItem.text);
-    } else {
-      setAutocompleteSuggestion('');
-    }
-  }, [highlightedItem, inputValue, selectedItemIds, setAutocompleteSuggestion]);
-  useEffect(() => {
-    const itemIdSortResult = [...sortedItemIds].sort(sortOnCloseFn ? sortOnCloseFn : getDefaultSortFn(itemId_0 => isItemSelected(itemId_0, selectedItemIds)));
-    const sortResultMatchesState = itemIdSortResult.length === sortedItemIds.length && itemIdSortResult.every((element_0, index) => element_0 === sortedItemIds[index]);
-    if (showMenu === false && !sortResultMatchesState) {
-      setSortedItemIds(itemIdSortResult);
-    }
-    onOpenChange && onOpenChange(Boolean(showMenu));
-  }, [showMenu, onOpenChange, selectedItemIds, sortOnCloseFn, sortedItemIds]);
-  useEffect(() => {
-    if (selectedItemIds.length) {
-      setSelectedItemLength(selectedItemIds.length);
-    }
-  }, [selectedItemIds, setSelectedItemLength]);
-  if (selectionVariant === 'single' && selectedItemIds.length > 1) {
-    throw new Error('Autocomplete: selectionVariant "single" cannot be used with multiple selected items');
+    };
+    $[39] = activeDescendantRef;
+    $[40] = customScrollContainerRef;
+    $[41] = scrollContainerRef;
+    $[42] = setIsMenuDirectlyActivated;
+    $[43] = t13;
+  } else {
+    t13 = $[43];
   }
-  return /*#__PURE__*/jsx(VisuallyHidden, {
-    isVisible: showMenu,
-    children: loading ? /*#__PURE__*/jsx("div", {
+  let t14;
+  if ($[44] !== inputRef || $[45] !== t13) {
+    t14 = {
+      containerRef: listContainerRef,
+      focusOutBehavior: "wrap",
+      focusableElementFilter: _temp4,
+      activeDescendantFocus: inputRef,
+      onActiveDescendantChanged: t13
+    };
+    $[44] = inputRef;
+    $[45] = t13;
+    $[46] = t14;
+  } else {
+    t14 = $[46];
+  }
+  let t15;
+  if ($[47] !== loading) {
+    t15 = [loading];
+    $[47] = loading;
+    $[48] = t15;
+  } else {
+    t15 = $[48];
+  }
+  useFocusZone(t14, t15);
+  let t16;
+  let t17;
+  if ($[49] !== highlightedItem || $[50] !== inputValue || $[51] !== selectedItemIds || $[52] !== setAutocompleteSuggestion) {
+    t16 = () => {
+      var _highlightedItem$text;
+      if (highlightedItem !== null && highlightedItem !== void 0 && (_highlightedItem$text = highlightedItem.text) !== null && _highlightedItem$text !== void 0 && _highlightedItem$text.startsWith(inputValue) && !selectedItemIds.includes(highlightedItem.id)) {
+        setAutocompleteSuggestion(highlightedItem.text);
+      } else {
+        setAutocompleteSuggestion("");
+      }
+    };
+    t17 = [highlightedItem, inputValue, selectedItemIds, setAutocompleteSuggestion];
+    $[49] = highlightedItem;
+    $[50] = inputValue;
+    $[51] = selectedItemIds;
+    $[52] = setAutocompleteSuggestion;
+    $[53] = t16;
+    $[54] = t17;
+  } else {
+    t16 = $[53];
+    t17 = $[54];
+  }
+  useEffect(t16, t17);
+  let t18;
+  let t19;
+  if ($[55] !== onOpenChange || $[56] !== selectedItemIds || $[57] !== showMenu || $[58] !== sortOnCloseFn || $[59] !== sortedItemIds) {
+    t18 = () => {
+      const itemIdSortResult = [...sortedItemIds].sort(sortOnCloseFn ? sortOnCloseFn : getDefaultSortFn(itemId_0 => isItemSelected(itemId_0, selectedItemIds)));
+      const sortResultMatchesState = itemIdSortResult.length === sortedItemIds.length && itemIdSortResult.every((element_0, index) => element_0 === sortedItemIds[index]);
+      if (showMenu === false && !sortResultMatchesState) {
+        setSortedItemIds(itemIdSortResult);
+      }
+      onOpenChange && onOpenChange(Boolean(showMenu));
+    };
+    t19 = [showMenu, onOpenChange, selectedItemIds, sortOnCloseFn, sortedItemIds];
+    $[55] = onOpenChange;
+    $[56] = selectedItemIds;
+    $[57] = showMenu;
+    $[58] = sortOnCloseFn;
+    $[59] = sortedItemIds;
+    $[60] = t18;
+    $[61] = t19;
+  } else {
+    t18 = $[60];
+    t19 = $[61];
+  }
+  useEffect(t18, t19);
+  let t20;
+  if ($[62] !== selectedItemIds.length || $[63] !== setSelectedItemLength) {
+    t20 = () => {
+      if (selectedItemIds.length) {
+        setSelectedItemLength(selectedItemIds.length);
+      }
+    };
+    $[62] = selectedItemIds.length;
+    $[63] = setSelectedItemLength;
+    $[64] = t20;
+  } else {
+    t20 = $[64];
+  }
+  let t21;
+  if ($[65] !== selectedItemIds || $[66] !== setSelectedItemLength) {
+    t21 = [selectedItemIds, setSelectedItemLength];
+    $[65] = selectedItemIds;
+    $[66] = setSelectedItemLength;
+    $[67] = t21;
+  } else {
+    t21 = $[67];
+  }
+  useEffect(t20, t21);
+  if (selectionVariant === "single" && selectedItemIds.length > 1) {
+    throw new Error("Autocomplete: selectionVariant \"single\" cannot be used with multiple selected items");
+  }
+  let t22;
+  if ($[68] !== allItemsToRender || $[69] !== ariaLabelledBy || $[70] !== emptyStateText || $[71] !== id || $[72] !== loading || $[73] !== selectionVariant) {
+    t22 = loading ? /*#__PURE__*/jsx("div", {
       className: classes.SpinnerWrapper,
       children: /*#__PURE__*/jsx(Spinner, {})
     }) : /*#__PURE__*/jsx("div", {
       ref: listContainerRef,
       children: allItemsToRender.length ? /*#__PURE__*/jsx(ActionList, {
-        selectionVariant: selectionVariant // TODO: make this configurable
-        ,
+        selectionVariant: selectionVariant,
         role: "listbox",
         id: `${id}-listbox`,
         "aria-labelledby": ariaLabelledBy,
-        children: allItemsToRender.map(item_2 => {
-          const {
-            id: id_0,
-            onAction,
-            children,
-            text,
-            leadingVisual: LeadingVisual,
-            trailingVisual: TrailingVisual,
-            key,
-            role,
-            ...itemProps
-          } = item_2;
-          return /*#__PURE__*/jsxs(ActionList.Item, {
-            onSelect: () => onAction(item_2),
-            ...itemProps,
-            id: id_0,
-            "data-id": id_0,
-            role: role,
-            children: [LeadingVisual && /*#__PURE__*/jsx(ActionList.LeadingVisual, {
-              children: isElement(LeadingVisual) ? LeadingVisual : /*#__PURE__*/jsx(LeadingVisual, {})
-            }), children !== null && children !== void 0 ? children : text, TrailingVisual && /*#__PURE__*/jsx(ActionList.TrailingVisual, {
-              children: isElement(TrailingVisual) ? TrailingVisual : /*#__PURE__*/jsx(TrailingVisual, {})
-            })]
-          }, key !== null && key !== void 0 ? key : id_0);
-        })
+        children: allItemsToRender.map(_temp5)
       }) : emptyStateText !== false && emptyStateText !== null ? /*#__PURE__*/jsx("div", {
         className: classes.EmptyStateWrapper,
         children: emptyStateText
       }) : null
-    })
-  });
+    });
+    $[68] = allItemsToRender;
+    $[69] = ariaLabelledBy;
+    $[70] = emptyStateText;
+    $[71] = id;
+    $[72] = loading;
+    $[73] = selectionVariant;
+    $[74] = t22;
+  } else {
+    t22 = $[74];
+  }
+  let t23;
+  if ($[75] !== showMenu || $[76] !== t22) {
+    t23 = /*#__PURE__*/jsx(VisuallyHidden, {
+      isVisible: showMenu,
+      children: t22
+    });
+    $[75] = showMenu;
+    $[76] = t22;
+    $[77] = t23;
+  } else {
+    t23 = $[77];
+  }
+  return t23;
+}
+function _temp5(item_2) {
+  const {
+    id: id_0,
+    onAction,
+    children,
+    text,
+    leadingVisual: LeadingVisual,
+    trailingVisual: TrailingVisual,
+    key,
+    role,
+    ...itemProps
+  } = item_2;
+  return /*#__PURE__*/jsxs(ActionList.Item, {
+    onSelect: () => onAction(item_2),
+    ...itemProps,
+    id: id_0,
+    "data-id": id_0,
+    role: role,
+    children: [LeadingVisual && /*#__PURE__*/jsx(ActionList.LeadingVisual, {
+      children: isElement(LeadingVisual) ? LeadingVisual : /*#__PURE__*/jsx(LeadingVisual, {})
+    }), children !== null && children !== void 0 ? children : text, TrailingVisual && /*#__PURE__*/jsx(ActionList.TrailingVisual, {
+      children: isElement(TrailingVisual) ? TrailingVisual : /*#__PURE__*/jsx(TrailingVisual, {})
+    })]
+  }, key !== null && key !== void 0 ? key : id_0);
+}
+_temp5.displayName = "_temp5";
+function _temp4(element) {
+  return !(element instanceof HTMLInputElement);
+}
+function _temp3() {
+  return /*#__PURE__*/jsx(PlusIcon, {});
+}
+_temp3.displayName = "_temp3";
+function _temp2(acc, curr, i) {
+  acc[curr] = i;
+  return acc;
+}
+function _temp(t0) {
+  const {
+    id: itemId
+  } = t0;
+  return itemId;
 }
-AutocompleteMenu.displayName = "AutocompleteMenu";
 AutocompleteMenu.displayName = 'AutocompleteMenu';
 AutocompleteMenu.__SLOT__ = Symbol('Autocomplete.Menu');
 

package/dist/Avatar/Avatar.js

@@ -7,7 +7,7 @@ import { jsx } from 'react/jsx-runtime';
 
 const DEFAULT_AVATAR_SIZE = 20;
 const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(t0, ref) {
-  const $ = c(27);
+  const $ = c(29);
   let className;
   let rest;
   let style;
@@ -54,7 +54,15 @@ const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(t0, ref) {
   if ($[9] !== isResponsive || $[10] !== size) {
     cssSizeVars = {};
     if (isResponsive) {
-      for (const [key, value] of Object.entries(size)) {
+      let t5;
+      if ($[12] !== size) {
+        t5 = Object.entries(size);
+        $[12] = size;
+        $[13] = t5;
+      } else {
+        t5 = $[13];
+      }
+      for (const [key, value] of t5) {
         cssSizeVars[`--avatarSize-${key}`] = `${value}px`;
       }
     } else {
@@ -67,31 +75,31 @@ const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(t0, ref) {
     cssSizeVars = $[11];
   }
   let t5;
-  if ($[12] !== className) {
+  if ($[14] !== className) {
     t5 = clsx(className, classes.Avatar);
-    $[12] = className;
-    $[13] = t5;
+    $[14] = className;
+    $[15] = t5;
   } else {
-    t5 = $[13];
+    t5 = $[15];
   }
   const t6 = isResponsive ? "" : undefined;
   const t7 = square ? "" : undefined;
   const t8 = isResponsive ? undefined : size;
   const t9 = isResponsive ? undefined : size;
   let t10;
-  if ($[14] !== cssSizeVars || $[15] !== style) {
+  if ($[16] !== cssSizeVars || $[17] !== style) {
     t10 = style ? {
       ...cssSizeVars,
       ...style
     } : cssSizeVars;
-    $[14] = cssSizeVars;
-    $[15] = style;
-    $[16] = t10;
+    $[16] = cssSizeVars;
+    $[17] = style;
+    $[18] = t10;
   } else {
-    t10 = $[16];
+    t10 = $[18];
   }
   let t11;
-  if ($[17] !== alt || $[18] !== ref || $[19] !== rest || $[20] !== t10 || $[21] !== t5 || $[22] !== t6 || $[23] !== t7 || $[24] !== t8 || $[25] !== t9) {
+  if ($[19] !== alt || $[20] !== ref || $[21] !== rest || $[22] !== t10 || $[23] !== t5 || $[24] !== t6 || $[25] !== t7 || $[26] !== t8 || $[27] !== t9) {
     t11 = /*#__PURE__*/jsx("img", {
       "data-component": "Avatar",
       className: t5,
@@ -104,18 +112,18 @@ const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(t0, ref) {
       style: t10,
       ...rest
     });
-    $[17] = alt;
-    $[18] = ref;
-    $[19] = rest;
-    $[20] = t10;
-    $[21] = t5;
-    $[22] = t6;
-    $[23] = t7;
-    $[24] = t8;
-    $[25] = t9;
-    $[26] = t11;
+    $[19] = alt;
+    $[20] = ref;
+    $[21] = rest;
+    $[22] = t10;
+    $[23] = t5;
+    $[24] = t6;
+    $[25] = t7;
+    $[26] = t8;
+    $[27] = t9;
+    $[28] = t11;
   } else {
-    t11 = $[26];
+    t11 = $[28];
   }
   return t11;
 });

package/dist/Banner/Banner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../src/Banner/Banner.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../src/Banner/Banner.tsx"],"names":[],"mappings":"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"}

package/dist/Banner/Banner.js

@@ -46,7 +46,6 @@ const Banner = /*#__PURE__*/React.forwardRef(function Banner({
   const supportsCustomIcon = variant === 'info' || variant === 'upsell';
   if (process.env.NODE_ENV !== "production") {
     // This hook is called consistently depending on the environment
-    // eslint-disable-next-line react-compiler/react-compiler
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useEffect(() => {
       if (title) {

package/dist/BaseStyles.d.ts

@@ -1,5 +1,5 @@
 import type React from 'react';
-import { type CSSProperties, type PropsWithChildren } from 'react';
+import { type CSSProperties, type PropsWithChildren, type JSX } from 'react';
 import 'focus-visible';
 export type BaseStylesProps = PropsWithChildren & {
     as?: React.ComponentType<any> | keyof JSX.IntrinsicElements;
@@ -7,6 +7,6 @@ export type BaseStylesProps = PropsWithChildren & {
     style?: CSSProperties;
     color?: string;
 };
-declare function BaseStyles({ children, color, className, as: Component, style, ...rest }: BaseStylesProps): React.JSX.Element;
+declare function BaseStyles({ children, color, className, as: Component, style, ...rest }: BaseStylesProps): JSX.Element;
 export default BaseStyles;
 //# sourceMappingURL=BaseStyles.d.ts.map

package/dist/BaseStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseStyles.d.ts","sourceRoot":"","sources":["../src/BaseStyles.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAC,KAAK,aAAa,EAAE,KAAK,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAKhE,OAAO,eAAe,CAAA;AAEtB,MAAM,MAAM,eAAe,GAAG,iBAAiB,GAAG;IAEhD,EAAE,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,GAAG,MAAM,GAAG,CAAC,iBAAiB,CAAA;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AACD,iBAAS,UAAU,CAAC,EAAC,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,SAAiB,EAAE,KAAK,EAAE,GAAG,IAAI,EAAC,EAAE,eAAe,qBAmBvG;AAED,eAAe,UAAU,CAAA"}
+{"version":3,"file":"BaseStyles.d.ts","sourceRoot":"","sources":["../src/BaseStyles.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAC,KAAK,aAAa,EAAE,KAAK,iBAAiB,EAAE,KAAK,GAAG,EAAC,MAAM,OAAO,CAAA;AAK1E,OAAO,eAAe,CAAA;AAEtB,MAAM,MAAM,eAAe,GAAG,iBAAiB,GAAG;IAEhD,EAAE,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,GAAG,MAAM,GAAG,CAAC,iBAAiB,CAAA;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AACD,iBAAS,UAAU,CAAC,EAAC,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,SAAiB,EAAE,KAAK,EAAE,GAAG,IAAI,EAAC,EAAE,eAAe,eAmBvG;AAED,eAAe,UAAU,CAAA"}