@primer/react 38.0.0-rc.195178541 → 38.0.0-rc.3

package/lib-esm/ActionList/shared.d.ts

@@ -1,116 +0,0 @@
-import React from 'react';
-import type { SxProp } from '../sx';
-import type { AriaRole } from '../utils/types';
-export type ActionListItemProps = {
-    /**
-     * Primary content for an Item
-     */
-    children?: React.ReactNode;
-    /**
-     * Callback that will trigger both on click selection and keyboard selection.
-     * This is not called for disabled or inactive items.
-     */
-    onSelect?: (event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
-    /**
-     * Is the `Item` is currently selected?
-     */
-    selected?: boolean;
-    /**
-     * Indicate whether the item is active. There should never be more than one active item.
-     */
-    active?: boolean;
-    /**
-     * Style variations associated with various `Item` types.
-     *
-     * - `"default"` - An action `Item`.
-     * - `"danger"` - A destructive action `Item`.
-     */
-    variant?: 'default' | 'danger';
-    /**
-     * Items that are disabled can not be clicked, selected, or navigated through.
-     */
-    disabled?: boolean;
-    /**
-     * The ARIA role describing the function of `Item` component. `option` is a common value.
-     */
-    role?: AriaRole;
-    /**
-     * id to attach to the root element of the Item
-     */
-    id?: string;
-    /**
-     * Text describing why the item is inactive. This may be used when an item's usual functionality
-     * is unavailable due to a system error such as a database outage.
-     */
-    inactiveText?: string;
-    /**
-     * Whether the item is loading
-     */
-    loading?: boolean;
-    /**
-     * Private API for use internally only. Used by LinkItem to wrap contents in an anchor
-     */
-    _PrivateItemWrapper?: React.FC<React.PropsWithChildren<MenuItemProps>>;
-    className?: string;
-    groupId?: string;
-    renderItem?: (item: React.FC<React.PropsWithChildren<MenuItemProps>>) => React.ReactNode;
-    handleAddItem?: (item: React.FC<React.PropsWithChildren<MenuItemProps>>) => void;
-} & SxProp;
-type MenuItemProps = {
-    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
-    onKeyPress?: (event: React.KeyboardEvent<HTMLElement>) => void;
-    'aria-disabled'?: boolean;
-    tabIndex?: number;
-    'aria-labelledby'?: string;
-    'aria-describedby'?: string;
-    role?: string;
-    className?: string;
-};
-export type ItemContext = Pick<ActionListItemProps, 'variant' | 'disabled'> & {
-    inlineDescriptionId?: string;
-    blockDescriptionId?: string;
-    trailingVisualId?: string;
-    inactive?: boolean;
-};
-export declare const ItemContext: React.Context<ItemContext>;
-export declare const getVariantStyles: (variant: ActionListItemProps["variant"], disabled: ActionListItemProps["disabled"], inactive?: boolean) => {
-    color: string;
-    iconColor: string;
-    annotationColor: string;
-    hoverColor?: undefined;
-} | {
-    color: string;
-    iconColor: string;
-    annotationColor: string;
-    hoverColor: string;
-};
-export declare const TEXT_ROW_HEIGHT = "20px";
-export type ActionListProps = React.PropsWithChildren<{
-    /**
-     * `inset` children are offset (vertically and horizontally) from `List`’s edges, `full` children are flush (vertically and horizontally) with `List` edges
-     */
-    variant?: 'inset' | 'horizontal-inset' | 'full';
-    /**
-     * Whether multiple Items or a single Item can be selected.
-     */
-    selectionVariant?: 'single' | 'radio' | 'multiple';
-    /**
-     * Display a divider above each `Item` in this `List` when it does not follow a `Header` or `Divider`.
-     */
-    showDividers?: boolean;
-    /**
-     * The ARIA role describing the function of `List` component. `listbox` or `menu` are a common values.
-     */
-    role?: AriaRole;
-    /**
-     * Disables the focus zone for the list if applicable. Focus zone is enabled by default for `menu` and `listbox` roles, or components such as `ActionMenu` and `SelectPanel`.
-     */
-    disableFocusZone?: boolean;
-    className?: string;
-}> & SxProp;
-type ContextProps = Pick<ActionListProps, 'variant' | 'selectionVariant' | 'showDividers' | 'role'> & {
-    headingId?: string;
-};
-export declare const ListContext: React.Context<ContextProps>;
-export {};
-//# sourceMappingURL=shared.d.ts.map

package/lib-esm/Autocomplete/AutocompleteMenu.js

@@ -1,245 +0,0 @@
-import React, { useContext, useRef, useState, useMemo, useEffect } from 'react';
-import { debounce } from '../node_modules/@github/mini-throttle/dist/index.js';
-import { announce } from '@primer/live-region-element';
-import { scrollIntoView } from '@primer/behaviors';
-import { ActionList } from '../ActionList/index.js';
-import { useFocusZone } from '../hooks/useFocusZone.js';
-import { useId } from '../hooks/useId.js';
-import { AutocompleteContext } from './AutocompleteContext.js';
-import { PlusIcon } from '@primer/octicons-react';
-import VisuallyHidden from '../_VisuallyHidden.js';
-import { isElement } from 'react-is';
-import classes from './AutocompleteMenu.module.css.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import StyledSpinner from '../Spinner/Spinner.js';
-
-const getDefaultSortFn = isItemSelectedFn => (itemIdA, itemIdB) => isItemSelectedFn(itemIdA) === isItemSelectedFn(itemIdB) ? 0 : isItemSelectedFn(itemIdA) ? -1 : 1;
-const menuScrollMargins = {
-  startMargin: 0,
-  endMargin: 8
-};
-function getDefaultItemFilter(filterValue) {
-  return function (item, _i) {
-    var _item$text;
-    return Boolean((_item$text = item.text) === null || _item$text === void 0 ? void 0 : _item$text.toLowerCase().startsWith(filterValue.toLowerCase()));
-  };
-}
-function getdefaultCheckedSelectionChange(setInputValueFn) {
-  return function (itemOrItems) {
-    const {
-      text = ''
-    } = Array.isArray(itemOrItems) ? itemOrItems.slice(-1)[0] : itemOrItems;
-    setInputValueFn(text);
-  };
-}
-const isItemSelected = (itemId, selectedItemIds) => selectedItemIds.includes(itemId);
-function getItemById(itemId, items) {
-  return items.find(item => item.id === itemId);
-}
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-
-/**
- * Announces a message to screen readers at a slowed-down rate. This is useful when you want to announce don't want to
- * overwhelm the user with too many announcements in rapid succession.
- */
-const debounceAnnouncement = debounce(announcement => {
-  announce(announcement);
-}, 250);
-function AutocompleteMenu(props) {
-  const autocompleteContext = useContext(AutocompleteContext);
-  if (autocompleteContext === null) {
-    throw new Error('AutocompleteContext returned null values');
-  }
-  const {
-    activeDescendantRef,
-    id,
-    inputRef,
-    inputValue = '',
-    scrollContainerRef,
-    setAutocompleteSuggestion,
-    setShowMenu,
-    setInputValue,
-    setIsMenuDirectlyActivated,
-    setSelectedItemLength,
-    showMenu
-  } = autocompleteContext;
-  const {
-    items,
-    selectedItemIds,
-    sortOnCloseFn,
-    emptyStateText = 'No selectable options',
-    addNewItem,
-    loading,
-    selectionVariant = 'single',
-    filterFn,
-    'aria-labelledby': ariaLabelledBy,
-    onOpenChange,
-    onSelectedChange,
-    customScrollContainerRef
-  } = props;
-  const listContainerRef = useRef(null);
-  const allItemsToRenderRef = useRef([]);
-  const [highlightedItem, setHighlightedItem] = useState();
-  const [sortedItemIds, setSortedItemIds] = useState(items.map(({
-    id: itemId
-  }) => itemId));
-  const generatedUniqueId = useId(id);
-  const selectableItems = useMemo(() => items.map(selectableItem => {
-    return {
-      ...selectableItem,
-      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,
-      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('');
-        } 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);
-        }
-      }
-    };
-  }), [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('');
-      }
-    }
-  }] : [])], [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
-      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'));
-        });
-        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);
-      }
-    }
-  }, [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');
-  }
-  return /*#__PURE__*/jsx(VisuallyHidden, {
-    isVisible: showMenu,
-    children: loading ? /*#__PURE__*/jsx("div", {
-      className: classes.SpinnerWrapper,
-      children: /*#__PURE__*/jsx(StyledSpinner, {})
-    }) : /*#__PURE__*/jsx("div", {
-      ref: listContainerRef,
-      children: allItemsToRender.length ? /*#__PURE__*/jsx(ActionList, {
-        selectionVariant: selectionVariant // TODO: make this configurable
-        ,
-        role: "listbox",
-        id: `${id}-listbox`,
-        "aria-labelledby": ariaLabelledBy,
-        children: allItemsToRender.map(item_2 => {
-          const {
-            id: id_0,
-            onAction,
-            children,
-            text,
-            leadingVisual: LeadingVisual,
-            trailingVisual: TrailingVisual,
-            // @ts-expect-error this is defined in the items above but is
-            // missing in TS
-            key,
-            ...itemProps
-          } = item_2;
-          return /*#__PURE__*/jsxs(ActionList.Item, {
-            onSelect: () => onAction(item_2),
-            ...itemProps,
-            id: id_0,
-            "data-id": id_0,
-            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);
-        })
-      }) : emptyStateText !== false && emptyStateText !== null ? /*#__PURE__*/jsx("div", {
-        className: classes.EmptyStateWrapper,
-        children: emptyStateText
-      }) : null
-    })
-  });
-}
-AutocompleteMenu.displayName = "AutocompleteMenu";
-AutocompleteMenu.displayName = 'AutocompleteMenu';
-
-export { AutocompleteMenu as default };

package/lib-esm/Avatar/Avatar.js

@@ -1,136 +0,0 @@
-import { c } from 'react-compiler-runtime';
-import { clsx } from 'clsx';
-import React from 'react';
-import { isResponsiveValue } from '../hooks/useResponsiveValue.js';
-import { defaultSxProp } from '../utils/defaultSxProp.js';
-import { BoxWithFallback } from '../internal/components/BoxWithFallback.js';
-import classes from './Avatar.module.css.js';
-import { jsx } from 'react/jsx-runtime';
-
-const DEFAULT_AVATAR_SIZE = 20;
-const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(t0, ref) {
-  const $ = c(29);
-  let className;
-  let rest;
-  let style;
-  let t1;
-  let t2;
-  let t3;
-  let t4;
-  if ($[0] !== t0) {
-    ({
-      alt: t1,
-      size: t2,
-      square: t3,
-      sx: t4,
-      className,
-      style,
-      ...rest
-    } = t0);
-    $[0] = t0;
-    $[1] = className;
-    $[2] = rest;
-    $[3] = style;
-    $[4] = t1;
-    $[5] = t2;
-    $[6] = t3;
-    $[7] = t4;
-  } else {
-    className = $[1];
-    rest = $[2];
-    style = $[3];
-    t1 = $[4];
-    t2 = $[5];
-    t3 = $[6];
-    t4 = $[7];
-  }
-  const alt = t1 === undefined ? "" : t1;
-  const size = t2 === undefined ? DEFAULT_AVATAR_SIZE : t2;
-  const square = t3 === undefined ? false : t3;
-  const sxProp = t4 === undefined ? defaultSxProp : t4;
-  let t5;
-  if ($[8] !== size) {
-    t5 = isResponsiveValue(size);
-    $[8] = size;
-    $[9] = t5;
-  } else {
-    t5 = $[9];
-  }
-  const isResponsive = t5;
-  let cssSizeVars;
-  if ($[10] !== isResponsive || $[11] !== size) {
-    cssSizeVars = {};
-    if (isResponsive) {
-      for (const [key, value] of Object.entries(size)) {
-        cssSizeVars[`--avatarSize-${key}`] = `${value}px`;
-      }
-    } else {
-      cssSizeVars["--avatarSize-regular"] = `${size}px`;
-    }
-    $[10] = isResponsive;
-    $[11] = size;
-    $[12] = cssSizeVars;
-  } else {
-    cssSizeVars = $[12];
-  }
-  let t6;
-  if ($[13] !== className) {
-    t6 = clsx(className, classes.Avatar);
-    $[13] = className;
-    $[14] = t6;
-  } else {
-    t6 = $[14];
-  }
-  const t7 = isResponsive ? "" : undefined;
-  const t8 = square ? "" : undefined;
-  const t9 = isResponsive ? undefined : size;
-  const t10 = isResponsive ? undefined : size;
-  let t11;
-  if ($[15] !== cssSizeVars || $[16] !== style) {
-    t11 = style ? {
-      ...cssSizeVars,
-      ...style
-    } : cssSizeVars;
-    $[15] = cssSizeVars;
-    $[16] = style;
-    $[17] = t11;
-  } else {
-    t11 = $[17];
-  }
-  let t12;
-  if ($[18] !== alt || $[19] !== ref || $[20] !== rest || $[21] !== sxProp || $[22] !== t10 || $[23] !== t11 || $[24] !== t6 || $[25] !== t7 || $[26] !== t8 || $[27] !== t9) {
-    t12 = /*#__PURE__*/jsx(BoxWithFallback, {
-      as: "img",
-      "data-component": "Avatar",
-      className: t6,
-      ref: ref,
-      alt: alt,
-      "data-responsive": t7,
-      "data-square": t8,
-      width: t9,
-      height: t10,
-      style: t11,
-      sx: sxProp,
-      ...rest
-    });
-    $[18] = alt;
-    $[19] = ref;
-    $[20] = rest;
-    $[21] = sxProp;
-    $[22] = t10;
-    $[23] = t11;
-    $[24] = t6;
-    $[25] = t7;
-    $[26] = t8;
-    $[27] = t9;
-    $[28] = t12;
-  } else {
-    t12 = $[28];
-  }
-  return t12;
-});
-if (process.env.NODE_ENV !== "production") {
-  Avatar.displayName = 'Avatar';
-}
-
-export { DEFAULT_AVATAR_SIZE, Avatar as default };

package/lib-esm/AvatarPair/AvatarPair-68990abe.css

@@ -1,2 +0,0 @@
-.prc-AvatarPair-AvatarPair-Av0UV{display:inline-flex;position:relative}.prc-AvatarPair-AvatarPair-Av0UV [data-component=Avatar]:last-child,.prc-AvatarPair-AvatarPair-Av0UV [data-component=SkeletonAvatar]:last-child{bottom:-9%;box-shadow:var(--avatar-shadow,var(--color-avatar-child-shadow));position:absolute;right:-15%}.prc-AvatarPair-AvatarPair-Av0UV [data-component=SkeletonAvatar]:last-child{box-shadow:inset var(--avatar-shadow,var(--color-avatar-child-shadow))}.prc-AvatarPair-AvatarChild-icdQd{background-color:var(--bgColor-default,var(--color-canvas-default))}
-/*# sourceMappingURL=AvatarPair-68990abe.css.map */

package/lib-esm/AvatarPair/AvatarPair-68990abe.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/AvatarPair/AvatarPair.module.css"],"names":[],"mappings":"AAAA,iCAEE,mBAAoB,CADpB,iBAcF,CAXE,gJAIE,UAAW,CACX,gEAAgC,CAHhC,iBAAkB,CAClB,UAGF,CAEA,4EACE,sEACF,CAGF,kCACE,mEACF","file":"AvatarPair-68990abe.css","sourcesContent":[".AvatarPair {\n  position: relative;\n  display: inline-flex;\n\n  [data-component='Avatar']:last-child,\n  [data-component='SkeletonAvatar']:last-child {\n    position: absolute;\n    right: -15%;\n    bottom: -9%;\n    box-shadow: var(--avatar-shadow);\n  }\n\n  [data-component='SkeletonAvatar']:last-child {\n    box-shadow: inset var(--avatar-shadow);\n  }\n}\n\n.AvatarChild {\n  background-color: var(--bgColor-default);\n}\n"]}

package/lib-esm/AvatarPair/AvatarPair.d.ts

@@ -1,8 +0,0 @@
-import React, { type HTMLProps } from 'react';
-export type AvatarPairProps = HTMLProps<HTMLDivElement>;
-declare const AvatarPair: {
-    ({ children, className, ...rest }: AvatarPairProps): React.JSX.Element;
-    displayName: string;
-};
-export default AvatarPair;
-//# sourceMappingURL=AvatarPair.d.ts.map

package/lib-esm/AvatarPair/AvatarPair.js

@@ -1,86 +0,0 @@
-import { c } from 'react-compiler-runtime';
-import React from 'react';
-import { SkeletonAvatar } from '../experimental/Skeleton/SkeletonAvatar.js';
-import classes from './AvatarPair.module.css.js';
-import { clsx } from 'clsx';
-import { jsx } from 'react/jsx-runtime';
-import Avatar from '../Avatar/Avatar.js';
-
-const AvatarPair = t0 => {
-  const $ = c(12);
-  let children;
-  let className;
-  let rest;
-  if ($[0] !== t0) {
-    ({
-      children,
-      className,
-      ...rest
-    } = t0);
-    $[0] = t0;
-    $[1] = children;
-    $[2] = className;
-    $[3] = rest;
-  } else {
-    children = $[1];
-    className = $[2];
-    rest = $[3];
-  }
-  let t1;
-  if ($[4] !== children) {
-    t1 = React.Children.map(children, _temp);
-    $[4] = children;
-    $[5] = t1;
-  } else {
-    t1 = $[5];
-  }
-  const avatars = t1;
-  let t2;
-  if ($[6] !== className) {
-    t2 = clsx(className, classes.AvatarPair);
-    $[6] = className;
-    $[7] = t2;
-  } else {
-    t2 = $[7];
-  }
-  let t3;
-  if ($[8] !== avatars || $[9] !== rest || $[10] !== t2) {
-    t3 = /*#__PURE__*/jsx("div", {
-      className: t2,
-      ...rest,
-      children: avatars
-    });
-    $[8] = avatars;
-    $[9] = rest;
-    $[10] = t2;
-    $[11] = t3;
-  } else {
-    t3 = $[11];
-  }
-  return t3;
-};
-AvatarPair.displayName = 'AvatarPair';
-function _temp(child, i) {
-  if (! /*#__PURE__*/React.isValidElement(child)) {
-    return child;
-  }
-  if (i === 0) {
-    return /*#__PURE__*/React.cloneElement(child, {
-      size: 40
-    });
-  }
-  if (child.type === SkeletonAvatar) {
-    return /*#__PURE__*/jsx(SkeletonAvatar, {
-      ...child.props,
-      size: 20
-    });
-  }
-  return /*#__PURE__*/jsx(Avatar, {
-    className: clsx(child.props.className, classes.AvatarChild),
-    ...child.props,
-    size: 20
-  });
-}
-_temp.displayName = "_temp";
-
-export { AvatarPair as default };

package/lib-esm/AvatarPair/AvatarPair.module.css.js

@@ -1,5 +0,0 @@
-import './AvatarPair-68990abe.css';
-
-var classes = {"AvatarPair":"prc-AvatarPair-AvatarPair-Av0UV","AvatarChild":"prc-AvatarPair-AvatarChild-icdQd"};
-
-export { classes as default };

package/lib-esm/AvatarPair/index.d.ts

@@ -1,3 +0,0 @@
-export { default } from './AvatarPair';
-export type { AvatarPairProps } from './AvatarPair';
-//# sourceMappingURL=index.d.ts.map

package/lib-esm/AvatarStack/AvatarStack-f0712fca.css

@@ -1,2 +0,0 @@
-.prc-AvatarStack-AvatarStack-N-r3C{--avatar-border-width:1px;--overlap-size:calc(var(--avatar-stack-size)*0.55);--overlap-size-avatar-three-plus:calc(var(--avatar-stack-size)*0.85);--mask-size:calc(100% + var(--avatar-border-width)*2);--mask-start:-1;--opacity-step:15%;display:flex;height:var(--avatar-stack-size);isolation:isolate;min-width:var(--avatar-stack-size);position:relative}@media screen and (max-width:calc(48rem - 0.02px)){.prc-AvatarStack-AvatarStack-N-r3C:where([data-responsive]){--avatar-stack-size:var(--stackSize-narrow)}}@media screen and (min-width:48rem){.prc-AvatarStack-AvatarStack-N-r3C:where([data-responsive]){--avatar-stack-size:var(--stackSize-regular)}}@media screen and (min-width:87.5rem){.prc-AvatarStack-AvatarStack-N-r3C:where([data-responsive]){--avatar-stack-size:var(--stackSize-wide)}}.prc-AvatarStack-AvatarStack-N-r3C:where([data-avatar-count="1"]) .prc-AvatarStack-AvatarItem-nS1mt{box-shadow:0 0 0 var(--avatar-border-width) var(--avatar-borderColor,var(--color-avatar-border))}.prc-AvatarStack-AvatarStack-N-r3C:where([data-avatar-count="2"]){min-width:calc(var(--avatar-stack-size) + var(--avatar-stack-size) - var(--overlap-size))}.prc-AvatarStack-AvatarStack-N-r3C:where([data-avatar-count="3"]){min-width:calc(var(--avatar-stack-size) + var(--avatar-stack-size) - var(--overlap-size) + var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus))}.prc-AvatarStack-AvatarStack-N-r3C:where([data-avatar-count="3+"]){min-width:calc(var(--avatar-stack-size) + var(--avatar-stack-size) - var(--overlap-size) + (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus))*2)}.prc-AvatarStack-AvatarStack-N-r3C:where([data-align-right]){--mask-start:1;direction:rtl}.prc-AvatarStack-AvatarStackBody-mSyoJ{display:flex;position:absolute}.prc-AvatarStack-AvatarStackBody-mSyoJ:where([data-disable-expand]){position:relative}.prc-AvatarStack-AvatarItem-nS1mt{--avatarSize-regular:var(--avatar-stack-size);display:flex;flex-shrink:0;height:var(--avatar-stack-size);overflow:hidden;position:relative;transition:margin .2s ease-in-out,opacity .2s ease-in-out,mask-position .2s ease-in-out,mask-size .2s ease-in-out;width:var(--avatar-stack-size)}.prc-AvatarStack-AvatarItem-nS1mt:is(img){box-shadow:0 0 0 var(--avatar-border-width) transparent}.prc-AvatarStack-AvatarItem-nS1mt:first-child{margin-inline-start:0}.prc-AvatarStack-AvatarItem-nS1mt:nth-child(n+2){margin-inline-start:calc(var(--overlap-size)*-1);mask-composite:exclude;mask-image:radial-gradient(at 50% 50%,#000 70%,transparent 71%),linear-gradient(#000 0 0);mask-position:calc((var(--avatar-stack-size) - var(--overlap-size))*var(--mask-start) - var(--avatar-border-width)) center,0 0;mask-repeat:no-repeat,no-repeat;mask-size:var(--mask-size) var(--mask-size),auto;padding:.1px}.prc-AvatarStack-AvatarItem-nS1mt:nth-child(n+3){--overlap-size:var(--overlap-size-avatar-three-plus);opacity:calc(100% - var(--opacity-step)*2)}.prc-AvatarStack-AvatarItem-nS1mt:nth-child(n+4){opacity:calc(100% - var(--opacity-step)*3)}.prc-AvatarStack-AvatarItem-nS1mt:nth-child(n+5){opacity:calc(100% - var(--opacity-step)*4)}.prc-AvatarStack-AvatarItem-nS1mt:nth-child(n+6){opacity:0;visibility:hidden}.prc-AvatarStack-AvatarStackBody-mSyoJ:not([data-disable-expand]):focus-within,.prc-AvatarStack-AvatarStackBody-mSyoJ:not([data-disable-expand]):hover{width:auto}:is(.prc-AvatarStack-AvatarStackBody-mSyoJ:not([data-disable-expand]):hover,.prc-AvatarStack-AvatarStackBody-mSyoJ:not([data-disable-expand]):focus-within) .prc-AvatarStack-AvatarItem-nS1mt{--mask-size:100%;margin-inline-start:var(--base-size-4,.25rem);mask-position:calc(var(--avatar-stack-size)*var(--mask-start)) center,0 0;opacity:1;visibility:visible}:is(:is(.prc-AvatarStack-AvatarStackBody-mSyoJ:not([data-disable-expand]):hover,.prc-AvatarStack-AvatarStackBody-mSyoJ:not([data-disable-expand]):focus-within) .prc-AvatarStack-AvatarItem-nS1mt):first-child{margin-inline-start:0}
-/*# sourceMappingURL=AvatarStack-f0712fca.css.map */

package/lib-esm/AvatarStack/AvatarStack-f0712fca.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/AvatarStack/AvatarStack.module.css"],"names":[],"mappings":"AACA,mCACE,yBAA0B,CAC1B,kDAAqD,CACrD,oEAAuE,CACvE,qDAA0D,CAC1D,eAAgB,CAChB,kBAAmB,CAGnB,YAAa,CAEb,+BAAgC,CAChC,iBAAkB,CAFlB,kCAAmC,CAFnC,iBAmEF,CA5DI,mDADF,4DAEI,2CAUJ,CATE,CAEA,oCALF,4DAMI,4CAMJ,CALE,CAEA,sCATF,4DAUI,yCAEJ,CADE,CAIA,oGAEE,gGACF,CAGF,kEAME,yFACF,CAEA,kEAOE,4JAIF,CAEA,mEAOE,gKAIF,CAEA,6DACE,cAAe,CAEf,aACF,CAGF,uCAEE,YAAa,CADb,iBAMF,CAHE,oEACE,iBACF,CAGF,kCACE,6CAA8C,CAG9C,YAAa,CAIb,aAAc,CAFd,+BAAgC,CAChC,eAAgB,CAJhB,iBAAkB,CAMlB,iHAI4B,CAR5B,8BAkEF,CAxDE,0CAEE,uDACF,CAEA,8CACE,qBACF,CAEA,iDAEE,gDAAmD,CAOnD,sBAAuB,CALvB,yFAAkH,CAalH,8HAEK,CAdL,+BAAiC,CACjC,gDAEM,CAeN,YACF,CAEA,iDACE,oDAAqD,CAGrD,0CACF,CAEA,iDAEE,0CACF,CAEA,iDAEE,0CACF,CAEA,iDAEE,SAAU,CADV,iBAEF,CAGF,uJAEE,UAsBF,CApBE,8LACE,gBAAiB,CAEjB,6CAAuC,CASvC,yEAEK,CATL,SAAU,CADV,kBAeF,CAHE,+MACE,qBACF","file":"AvatarStack-f0712fca.css","sourcesContent":["/* stylelint-disable selector-max-specificity */\n.AvatarStack {\n  --avatar-border-width: 1px;\n  --overlap-size: calc(var(--avatar-stack-size) * 0.55);\n  --overlap-size-avatar-three-plus: calc(var(--avatar-stack-size) * 0.85);\n  --mask-size: calc(100% + (var(--avatar-border-width) * 2));\n  --mask-start: -1;\n  --opacity-step: 15%;\n\n  position: relative;\n  display: flex;\n  min-width: var(--avatar-stack-size);\n  height: var(--avatar-stack-size);\n  isolation: isolate;\n\n  &:where([data-responsive]) {\n    @media screen and (--viewportRange-narrow) {\n      --avatar-stack-size: var(--stackSize-narrow);\n    }\n\n    @media screen and (--viewportRange-regular) {\n      --avatar-stack-size: var(--stackSize-regular);\n    }\n\n    @media screen and (--viewportRange-wide) {\n      --avatar-stack-size: var(--stackSize-wide);\n    }\n  }\n\n  &:where([data-avatar-count='1']) {\n    .AvatarItem {\n      /* stylelint-disable-next-line primer/box-shadow */\n      box-shadow: 0 0 0 var(--avatar-border-width) var(--avatar-borderColor);\n    }\n  }\n\n  &:where([data-avatar-count='2']) {\n    /*\n    MIN-WIDTH CALC FORMULA EXPLAINED:\n    avatar size ➡️ var(--avatar-stack-size)\n    plus the visible part of the 2nd avatar ➡️ var(--avatar-stack-size) - var(--overlap-size)\n    */\n    min-width: calc(var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size)));\n  }\n\n  &:where([data-avatar-count='3']) {\n    /*\n    MIN-WIDTH CALC FORMULA EXPLAINED:\n    avatar size ➡️ var(--avatar-stack-size)\n    plus the visible part of the 2nd avatar ➡️ var(--avatar-stack-size) - var(--overlap-size)\n    plus the visible part of the 3rd avatar ➡️ var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)\n    */\n    min-width: calc(\n      var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size)) +\n        (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus))\n    );\n  }\n\n  &:where([data-avatar-count='3+']) {\n    /*\n    MIN-WIDTH CALC FORMULA EXPLAINED:\n    avatar size ➡️ var(--avatar-stack-size)\n    plus the visible part of the 2nd avatar ➡️ var(--avatar-stack-size) - var(--overlap-size)\n    plus the visible part of the 3rd AND 4th avatar ➡️ (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)) * 2\n    */\n    min-width: calc(\n      var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size)) +\n        (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)) * 2\n    );\n  }\n\n  &:where([data-align-right]) {\n    --mask-start: 1;\n\n    direction: rtl;\n  }\n}\n\n.AvatarStackBody {\n  position: absolute;\n  display: flex;\n\n  &:where([data-disable-expand]) {\n    position: relative;\n  }\n}\n\n.AvatarItem {\n  --avatarSize-regular: var(--avatar-stack-size);\n\n  position: relative;\n  display: flex;\n  width: var(--avatar-stack-size);\n  height: var(--avatar-stack-size);\n  overflow: hidden;\n  flex-shrink: 0;\n  transition:\n    margin 0.2s ease-in-out,\n    opacity 0.2s ease-in-out,\n    mask-position 0.2s ease-in-out,\n    mask-size 0.2s ease-in-out;\n\n  &:is(img) {\n    /* stylelint-disable-next-line primer/box-shadow */\n    box-shadow: 0 0 0 var(--avatar-border-width) transparent;\n  }\n\n  &:first-child {\n    margin-inline-start: 0;\n  }\n\n  &:nth-child(n + 2) {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-inline-start: calc(var(--overlap-size) * -1);\n    /* stylelint-disable-next-line declaration-property-value-no-unknown */\n    mask-image: radial-gradient(at 50% 50%, rgb(0, 0, 0) 70%, rgba(0, 0, 0, 0) 71%), linear-gradient(rgb(0, 0, 0) 0 0);\n    mask-repeat: no-repeat, no-repeat;\n    mask-size:\n      var(--mask-size) var(--mask-size),\n      auto;\n    mask-composite: exclude;\n\n    /*\n    HORIZONTAL POSITION CALC FORMULA EXPLAINED:\n    width of the visible part of the avatar ➡️ var(--avatar-stack-size) - var(--overlap-size)\n    multiply by -1 for left-aligned, 1 for right-aligned ➡️ var(--mask-start)\n    subtract the avatar border width ➡️ var(--avatar-border-width)\n    */\n    mask-position:\n      calc((var(--avatar-stack-size) - var(--overlap-size)) * var(--mask-start) - var(--avatar-border-width)) center,\n      0 0;\n\n    /* HACK: This padding fixes a weird rendering bug where a tiiiiny outline is visible at the edges of the element */\n    /* stylelint-disable-next-line primer/spacing */\n    padding: 0.1px;\n  }\n\n  &:nth-child(n + 3) {\n    --overlap-size: var(--overlap-size-avatar-three-plus);\n\n    /* stylelint-disable-next-line alpha-value-notation */\n    opacity: calc(100% - 2 * var(--opacity-step));\n  }\n\n  &:nth-child(n + 4) {\n    /* stylelint-disable-next-line alpha-value-notation */\n    opacity: calc(100% - 3 * var(--opacity-step));\n  }\n\n  &:nth-child(n + 5) {\n    /* stylelint-disable-next-line alpha-value-notation */\n    opacity: calc(100% - 4 * var(--opacity-step));\n  }\n\n  &:nth-child(n + 6) {\n    visibility: hidden;\n    opacity: 0;\n  }\n}\n\n.AvatarStackBody:not([data-disable-expand]):hover,\n.AvatarStackBody:not([data-disable-expand]):focus-within {\n  width: auto;\n\n  .AvatarItem {\n    --mask-size: 100%; /* reset size of the mask to prevent unintentially clipping due to the additional size created by the border width */\n\n    margin-inline-start: var(--base-size-4);\n    visibility: visible;\n    opacity: 1;\n\n    /*\n    HORIZONTAL POSITION CALC FORMULA EXPLAINED:\n    width of the full avatar ➡️ var(--avatar-stack-size)\n    multiply by -1 for left-aligned, 1 for right-aligned ➡️ var(--mask-start)\n    */\n    mask-position:\n      calc(var(--avatar-stack-size) * var(--mask-start)) center,\n      0 0;\n\n    &:first-child {\n      margin-inline-start: 0;\n    }\n  }\n}\n"]}

package/lib-esm/AvatarStack/AvatarStack.d.ts

@@ -1,14 +0,0 @@
-import React from 'react';
-import type { SxProp } from '../sx';
-import type { ResponsiveValue } from '../hooks/useResponsiveValue';
-export type AvatarStackProps = {
-    alignRight?: boolean;
-    disableExpand?: boolean;
-    size?: number | ResponsiveValue<number>;
-    className?: string;
-    children: React.ReactNode;
-    style?: React.CSSProperties;
-} & SxProp;
-declare const AvatarStack: ({ children, alignRight, disableExpand, size, className, style, sx: sxProp, }: AvatarStackProps) => React.JSX.Element;
-export default AvatarStack;
-//# sourceMappingURL=AvatarStack.d.ts.map