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

package/lib/SelectPanel/SelectPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectPanel.d.ts","sourceRoot":"","sources":["../../src/SelectPanel/SelectPanel.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SelectPanel.d.ts","sourceRoot":"","sources":["../../src/SelectPanel/SelectPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,wBAAwB,CAAA;AAC/B,OAAO,KAA0D,MAAM,OAAO,CAAA;AAC9E,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,oBAAoB,CAAA;AAE5D,OAAO,KAAK,EAAC,iCAAiC,EAAC,MAAM,oCAAoC,CAAA;AACzF,OAAO,KAAK,EAAC,uBAAuB,EAAC,MAAM,uBAAuB,CAAA;AAGlE,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,YAAY,CAAA;AAE5C,OAAO,KAAK,EAAY,SAAS,EAAC,MAAM,IAAI,CAAA;AAiB5C,OAAO,KAAK,EAAC,WAAW,EAAE,eAAe,EAAC,MAAM,iBAAiB,CAAA;AA+BjE,UAAU,0BAA0B;IAClC,QAAQ,EAAE,SAAS,GAAG,SAAS,CAAA;IAC/B,gBAAgB,EAAE,CAAC,QAAQ,EAAE,SAAS,GAAG,SAAS,KAAK,IAAI,CAAA;CAC5D;AAED,UAAU,yBAAyB;IACjC,QAAQ,EAAE,SAAS,EAAE,CAAA;IACrB,gBAAgB,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,KAAK,IAAI,CAAA;CAClD;AAED,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,UAAU,CAAA;AACvD,MAAM,MAAM,0BAA0B,GAClC,KAAK,CAAC,YAAY,CAAC,OAAO,eAAe,CAAC,GAC1C,KAAK,CAAC,YAAY,CAAC,OAAO,aAAa,CAAC,CAAA;AAE5C,UAAU,oBAAoB;IAE5B,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,YAAY,CAAA;IACnC,QAAQ,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,YAAY,CAAA;IACtC,YAAY,EAAE,CACZ,IAAI,EAAE,OAAO,EACb,OAAO,EAAE,cAAc,GAAG,kBAAkB,GAAG,eAAe,GAAG,QAAQ,GAAG,WAAW,GAAG,QAAQ,KAC/F,IAAI,CAAA;IACT,eAAe,CAAC,EAAE,0BAA0B,CAAA;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAA;IACpC,kBAAkB,CAAC,EAAE,kBAAkB,CAAA;IACvC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE;QACP,IAAI,EAAE,MAAM,GAAG,KAAK,CAAC,YAAY,CAAA;QACjC,OAAO,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,CAAA;KACtC,CAAA;IACD,OAAO,CAAC,EAAE;QACR,KAAK,EAAE,MAAM,CAAA;QACb,IAAI,EAAE,MAAM,GAAG,KAAK,CAAC,YAAY,CAAA;QACjC,OAAO,EAAE,OAAO,GAAG,OAAO,GAAG,SAAS,CAAA;QACtC,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,SAAS,CAAC,CAAA;QACrC,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,CAAA;KAC5B,CAAA;IACD;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,YAAY,CAAA;IACpC,wBAAwB,CAAC,EAAE,OAAO,CAAA;IAClC;;;;;OAKG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAA;IACnC,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB;AAGD,KAAK,uBAAuB,GAAG;IAAC,OAAO,CAAC,EAAE,UAAU,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CAAC,GAAG;IAAC,OAAO,EAAE,OAAO,CAAC;IAAC,QAAQ,EAAE,MAAM,IAAI,CAAA;CAAC,CAAA;AAEvH,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GACjD,IAAI,CAAC,uBAAuB,EAAE,kBAAkB,GAAG,SAAS,GAAG,SAAS,CAAC,GACzE,IAAI,CAAC,oBAAoB,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAC,GACjE,iCAAiC,GACjC,CAAC,0BAA0B,GAAG,yBAAyB,CAAC,GACxD,uBAAuB,CAAA;AAgCzB,iBAAS,KAAK,CAAC,EACb,IAAI,EACJ,YAAY,EACZ,YAAkC,EAClC,SAAS,EAAE,iBAAiB,EAC5B,WAAW,EACX,eAAgC,EAChC,UAA4B,EAC5B,QAAQ,EACR,KAA0E,EAC1E,QAAQ,EACR,gBAAgB,EAChB,WAAW,EAAE,mBAAmB,EAChC,cAAc,EAAE,sBAAsB,EACtC,KAAK,EACL,MAAM,EACN,cAAc,EACd,YAAY,EACZ,OAAO,EACP,kBAA8B,EAC9B,SAAS,EACT,MAAM,EACN,KAAK,EACL,EAAE,EACF,OAAO,EACP,MAAM,EACN,QAAQ,EACR,OAAoB,EACpB,eAAe,EACf,wBAA+B,EAC/B,yBAAyB,EACzB,KAAK,EACL,aAAqB,EACrB,GAAG,SAAS,EACb,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CA6tBhC;AAED,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAM1C,CAAA;AAED,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,GAAG,WAAW,CAM1D,CAAA;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;CAGtB,CAAA"}

package/lib/SelectPanel/SelectPanel.js

@@ -13,14 +13,14 @@ var FilteredActionListLoaders = require('../FilteredActionList/FilteredActionLis
 var liveRegionElement = require('@primer/live-region-element');
 var SelectPanel_module = require('./SelectPanel.module.css.js');
 var clsx = require('clsx');
-var index = require('../node_modules/@github/mini-throttle/dist/index.js');
+var miniThrottle = require('@github/mini-throttle');
 var useResponsiveValue = require('../hooks/useResponsiveValue.js');
 var jsxRuntime = require('react/jsx-runtime');
 var useFeatureFlag = require('../FeatureFlags/useFeatureFlag.js');
 var useProvidedRefOrCreate = require('../hooks/useProvidedRefOrCreate.js');
 var AnchoredOverlay = require('../AnchoredOverlay/AnchoredOverlay.js');
 var Heading = require('../Heading/Heading.js');
-var FilteredActionListEntry = require('../FilteredActionList/FilteredActionListEntry.js');
+var FilteredActionList = require('../FilteredActionList/FilteredActionList.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -29,10 +29,14 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 // we add a delay so that it does not interrupt default screen reader announcement and queues after it
 const SHORT_DELAY_MS = 500;
 const LONG_DELAY_MS = 1000;
+const EMPTY_MESSAGE = {
+  title: 'No items available',
+  description: ''
+};
 const DefaultEmptyMessage = /*#__PURE__*/jsxRuntime.jsx(SelectPanelMessage.SelectPanelMessage, {
   variant: "empty",
-  title: "You haven't created any items yet",
-  children: "Please add or create new items to populate the list."
+  title: EMPTY_MESSAGE.title,
+  children: EMPTY_MESSAGE.description
 }, "empty-message");
 async function announceText(text, delayMs = SHORT_DELAY_MS) {
   const liveRegion = document.querySelector('live-region');
@@ -46,9 +50,6 @@ async function announceText(text, delayMs = SHORT_DELAY_MS) {
 async function announceLoading() {
   await announceText('Loading.');
 }
-const announceNoItems = index.debounce(message => {
-  announceText(message !== null && message !== void 0 ? message : 'No matching items.', LONG_DELAY_MS);
-}, 250);
 
 // onCancel is optional with variant=anchored, but required with variant=modal
 
@@ -96,7 +97,6 @@ function Panel({
   footer,
   textInputProps,
   overlayProps,
-  sx,
   loading,
   initialLoadingType = 'spinner',
   className,
@@ -111,6 +111,7 @@ function Panel({
   showSelectedOptionsFirst = true,
   disableFullscreenOnNarrow,
   align,
+  showSelectAll = false,
   ...listProps
 }) {
   var _listProps$groupMetad;
@@ -143,7 +144,6 @@ function Panel({
   const [isKeyboardVisible, setIsKeyboardVisible] = React.useState(false);
   const [availablePanelHeight, setAvailablePanelHeight] = React.useState(undefined);
   const KEYBOARD_VISIBILITY_THRESHOLD = 10;
-  const usingModernActionList = useFeatureFlag.useFeatureFlag('primer_react_select_panel_with_modern_action_list');
   const featureFlagFullScreenOnNarrow = useFeatureFlag.useFeatureFlag('primer_react_select_panel_fullscreen_on_narrow');
   const usingFullScreenOnNarrow = disableFullscreenOnNarrow ? false : featureFlagFullScreenOnNarrow;
   const shouldOrderSelectedFirst = useFeatureFlag.useFeatureFlag('primer_react_select_panel_order_selected_at_top') && showSelectedOptionsFirst;
@@ -160,7 +160,6 @@ function Panel({
   const onListContainerRefChanged = React.useCallback(node => {
     setListContainerElement(node);
     if (!node && needsNoItemsAnnouncement) {
-      announceNoItems();
       setNeedsNoItemsAnnouncement(false);
     }
   }, [needsNoItemsAnnouncement]);
@@ -210,6 +209,20 @@ function Panel({
       resetSort();
     }
   }, [loadingManagedInternally, externalOnFilterChange, setInternalFilterValue, dataLoadedOnce, safeSetTimeout, safeClearTimeout, items.length, resetSort]);
+  const handleSelectAllChange = React.useCallback(checked => {
+    // Exit early if not in multi-select mode
+    if (!isMultiSelectVariant(selected)) {
+      return;
+    }
+    const multiSelectOnChange = onSelectedChange;
+    const selectedArray = selected;
+    const selectedItemsNotInFilteredView = selectedArray.filter(selectedItem => !items.some(item => areItemsEqual(item, selectedItem)));
+    if (checked) {
+      multiSelectOnChange([...selectedItemsNotInFilteredView, ...items]);
+    } else {
+      multiSelectOnChange(selectedItemsNotInFilteredView);
+    }
+  }, [items, onSelectedChange, selected]);
 
   // disable body scroll when the panel is open on narrow screens
   React.useEffect(() => {
@@ -231,11 +244,7 @@ function Panel({
     if (open) {
       if (items.length === 0 && !(isLoading || loading)) {
         // we need to wait for the listContainerElement to disappear before announcing no items, otherwise it will be interrupted
-        if (!listContainerElement || !usingModernActionList) {
-          announceNoItems(message === null || message === void 0 ? void 0 : message.title);
-        } else {
-          setNeedsNoItemsAnnouncement(true);
-        }
+        setNeedsNoItemsAnnouncement(true);
       }
     }
     if (loadingManagedExternally) {
@@ -269,6 +278,23 @@ function Panel({
     }
   }, [inputRef, open]);
 
+  // Manage loading announcements when loadingManagedExternally
+  React.useEffect(() => {
+    if (loadingManagedExternally) {
+      if (isLoading) {
+        // Delay the announcement a bit, just in case the loading is quick
+        loadingDelayTimeoutId.current = safeSetTimeout(() => {
+          announceLoading();
+        }, LONG_DELAY_MS);
+      } else {
+        // If loading is done, we can clear the loading announcement
+        if (loadingDelayTimeoutId.current) {
+          safeClearTimeout(loadingDelayTimeoutId.current);
+        }
+      }
+    }
+  }, [isLoading, loadingManagedExternally, safeSetTimeout, safeClearTimeout]);
+
   // Populate panel with items on first open
   React.useEffect(() => {
     if (loadingManagedExternally) return;
@@ -291,7 +317,7 @@ function Panel({
     }
     initialHeightRef.current = window.visualViewport.height;
     initialScaleRef.current = window.visualViewport.scale;
-    const handleViewportChange = index.debounce(() => {
+    const handleViewportChange = miniThrottle.debounce(() => {
       if (window.visualViewport) {
         const currentScale = window.visualViewport.scale;
         const isZooming = currentScale !== initialScaleRef.current;
@@ -383,6 +409,7 @@ function Panel({
       return {
         ...item,
         role: 'option',
+        id: item.id,
         selected: 'selected' in item && item.selected === undefined ? undefined : isItemCurrentlySelected(item),
         onAction: (itemFromAction, event) => {
           var _item$onAction;
@@ -455,9 +482,7 @@ function Panel({
   };
   const extendedTextInputProps = React.useMemo(() => {
     return {
-      sx: {
-        m: 2
-      },
+      className: SelectPanel_module.TextInput,
       contrast: true,
       leadingVisual: octiconsReact.SearchIcon,
       'aria-label': inputLabel,
@@ -493,6 +518,8 @@ function Panel({
       return /*#__PURE__*/jsxRuntime.jsx(SelectPanelMessage.SelectPanelMessage, {
         title: message.title,
         variant: message.variant,
+        icon: message.icon,
+        action: message.action,
         children: message.body
       });
     }
@@ -522,6 +549,18 @@ function Panel({
   const displayFooter = secondaryAction !== undefined || showPermanentCancelSaveButtons ? 'always' : showResponsiveSaveAndCloseButton || showResponsiveCancelSaveButtons ? 'only-small' : undefined;
   const stretchSecondaryAction = showResponsiveSaveAndCloseButton || showResponsiveCancelSaveButtons ? 'only-big' : showPermanentCancelSaveButtons ? 'never' : 'always';
   const stretchSaveButton = showResponsiveSaveAndCloseButton && secondaryAction === undefined ? 'only-small' : 'never';
+
+  /*
+   * SelectPanel uses two close button implementations for different use cases:
+   *
+   * 1. AnchoredOverlay close button - Enabled on narrow screens (showXCloseIcon logic)
+   *
+   * 2. SelectPanel modal close button - Used for modal variant on wider screens
+   *    (variant === 'modal' && !isNarrowScreenSize logic below)
+   *
+   * The dual approach handles different responsive behaviors: AnchoredOverlay manages
+   * close functionality for narrow fullscreen, while SelectPanel handles modal close on desktop.
+   */
   const showXCloseIcon = (onCancel !== undefined || !isMultiSelectVariant(selected)) && usingFullScreenOnNarrow;
   const currentResponsiveVariant = useResponsiveValue.useResponsiveValue(usingFullScreenOnNarrow ? {
     regular: 'anchored',
@@ -605,7 +644,7 @@ function Panel({
           children: [iconForNoticeVariant[notice.variant], /*#__PURE__*/jsxRuntime.jsx("div", {
             children: notice.text
           })]
-        }), /*#__PURE__*/jsxRuntime.jsx(FilteredActionListEntry.FilteredActionList, {
+        }), /*#__PURE__*/jsxRuntime.jsx(FilteredActionList.FilteredActionList, {
           filterValue: filterValue,
           onFilterChange: onFilterChange,
           onListContainerRefChanged: onListContainerRefChanged,
@@ -622,20 +661,18 @@ function Panel({
           selectionVariant: isSingleSelectModal ? 'radio' : isMultiSelectVariant(selected) ? 'multiple' : 'single',
           items: itemsToRender,
           textInputProps: extendedTextInputProps,
-          loading: loading || isLoading,
-          loadingType: loadingType()
+          loading: loading || isLoading && !message,
+          loadingType: loadingType(),
+          onSelectAllChange: showSelectAll ? handleSelectAllChange : undefined
           // hack because the deprecated ActionList does not support this prop
           ,
-
           message: getMessage(),
+          messageText: {
+            title: (message === null || message === void 0 ? void 0 : message.title) || EMPTY_MESSAGE.title,
+            description: typeof (message === null || message === void 0 ? void 0 : message.body) === 'string' ? message.body : EMPTY_MESSAGE.description
+          },
           fullScreenOnNarrow: usingFullScreenOnNarrow,
-          // inheriting height and maxHeight ensures that the FilteredActionList is never taller
-          // than the Overlay (which would break scrolling the items)
-          sx: sx,
           className: clsx.clsx(className, SelectPanel_module.FilteredActionList)
-          // needed to explicitly enable announcements for deprecated FilteredActionList, we can remove when we fully remove the deprecated version
-          ,
-          announcementsEnabled: true
         }), footer ? /*#__PURE__*/jsxRuntime.jsx("div", {
           className: SelectPanel_module.Footer,
           children: footer

package/lib/SelectPanel/SelectPanel.module.css.js

@@ -1,7 +1,7 @@
 'use strict';
 
-require('./SelectPanel-bfde365c.css');
+require('./SelectPanel-e11ce210.css');
 
-var classes = {"Overlay":"prc-SelectPanel-Overlay-arLk6","Wrapper":"prc-SelectPanel-Wrapper-43Iz8","Header":"prc-SelectPanel-Header-4dLqk","Title":"prc-SelectPanel-Title--CZN1","Subtitle":"prc-SelectPanel-Subtitle-tMSzu","Notice":"prc-SelectPanel-Notice-xDTd4","Footer":"prc-SelectPanel-Footer-78rgp","FilteredActionList":"prc-SelectPanel-FilteredActionList-wzS7m","Message":"prc-SelectPanel-Message-CSpwI","MessageTitle":"prc-SelectPanel-MessageTitle-o6PpS","MessageBody":"prc-SelectPanel-MessageBody-89DEz","MessageIcon":"prc-SelectPanel-MessageIcon-GS8ry","ResponsiveCloseButton":"prc-SelectPanel-ResponsiveCloseButton-3mdX2","ResponsiveFooter":"prc-SelectPanel-ResponsiveFooter-e-JSD","SecondaryAction":"prc-SelectPanel-SecondaryAction-aWzLU","CancelSaveButtons":"prc-SelectPanel-CancelSaveButtons-kk2cT","ResponsiveSaveButton":"prc-SelectPanel-ResponsiveSaveButton-Ooz4Y","Backdrop":"prc-SelectPanel-Backdrop-7XJa-"};
+var classes = {"Overlay":"prc-SelectPanel-Overlay-arLk6","Wrapper":"prc-SelectPanel-Wrapper-43Iz8","Header":"prc-SelectPanel-Header-4dLqk","Title":"prc-SelectPanel-Title--CZN1","Subtitle":"prc-SelectPanel-Subtitle-tMSzu","Notice":"prc-SelectPanel-Notice-xDTd4","Footer":"prc-SelectPanel-Footer-78rgp","FilteredActionList":"prc-SelectPanel-FilteredActionList-wzS7m","Message":"prc-SelectPanel-Message-CSpwI","MessageTitle":"prc-SelectPanel-MessageTitle-o6PpS","MessageBody":"prc-SelectPanel-MessageBody-89DEz","MessageIcon":"prc-SelectPanel-MessageIcon-GS8ry","MessageAction":"prc-SelectPanel-MessageAction-qwola","ResponsiveCloseButton":"prc-SelectPanel-ResponsiveCloseButton-3mdX2","ResponsiveFooter":"prc-SelectPanel-ResponsiveFooter-e-JSD","SecondaryAction":"prc-SelectPanel-SecondaryAction-aWzLU","CancelSaveButtons":"prc-SelectPanel-CancelSaveButtons-kk2cT","ResponsiveSaveButton":"prc-SelectPanel-ResponsiveSaveButton-Ooz4Y","Backdrop":"prc-SelectPanel-Backdrop-7XJa-","TextInput":"prc-SelectPanel-TextInput-TjXuJ"};
 
 module.exports = classes;

package/lib/SelectPanel/SelectPanelMessage.d.ts

@@ -1,9 +1,22 @@
 import type React from 'react';
+import { type IconProps } from '@primer/octicons-react';
 export type SelectPanelMessageProps = {
     children: React.ReactNode;
     title: string;
     variant: 'empty' | 'error' | 'warning';
     className?: string;
+    /**
+     * Custom icon to display above the title.
+     * When not provided, uses AlertIcon for error/warning states and no icon for empty state.
+     */
+    icon?: React.ComponentType<IconProps>;
+    /**
+     * Custom action element to display below the message body.
+     * This can be used to render interactive elements like buttons or links.
+     * Ensure the action element is accessible by providing appropriate ARIA attributes
+     * and making it keyboard-navigable.
+     */
+    action?: React.ReactElement;
 };
 export declare const SelectPanelMessage: React.FC<SelectPanelMessageProps>;
 //# sourceMappingURL=SelectPanelMessage.d.ts.map

package/lib/SelectPanel/SelectPanelMessage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectPanelMessage.d.ts","sourceRoot":"","sources":["../../src/SelectPanel/SelectPanelMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,MAAM,MAAM,uBAAuB,GAAG;IACpC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,OAAO,GAAG,OAAO,GAAG,SAAS,CAAA;IACtC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAQhE,CAAA"}
+{"version":3,"file":"SelectPanelMessage.d.ts","sourceRoot":"","sources":["../../src/SelectPanel/SelectPanelMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAY,KAAK,SAAS,EAAC,MAAM,wBAAwB,CAAA;AAIhE,MAAM,MAAM,uBAAuB,GAAG;IACpC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,OAAO,GAAG,OAAO,GAAG,SAAS,CAAA;IACtC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,SAAS,CAAC,CAAA;IACrC;;;;;OAKG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,CAAA;CAC5B,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAkBhE,CAAA"}

package/lib/SelectPanel/SelectPanelMessage.js

@@ -11,20 +11,26 @@ const SelectPanelMessage = ({
   variant,
   title,
   children,
-  className
+  className,
+  icon: CustomIcon,
+  action
 }) => {
+  const IconComponent = CustomIcon || (variant !== 'empty' ? octiconsReact.AlertIcon : undefined);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: clsx.clsx(SelectPanel_module.Message, className),
-    children: [variant !== 'empty' ? /*#__PURE__*/jsxRuntime.jsx(Octicon, {
-      icon: octiconsReact.AlertIcon,
+    children: [IconComponent && /*#__PURE__*/jsxRuntime.jsx(Octicon, {
+      icon: IconComponent,
       className: SelectPanel_module.MessageIcon,
       "data-variant": variant
-    }) : null, /*#__PURE__*/jsxRuntime.jsx(Text, {
+    }), /*#__PURE__*/jsxRuntime.jsx(Text, {
       className: SelectPanel_module.MessageTitle,
       children: title
     }), /*#__PURE__*/jsxRuntime.jsx(Text, {
       className: SelectPanel_module.MessageBody,
       children: children
+    }), action && /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: SelectPanel_module.MessageAction,
+      children: action
     })]
   });
 };

package/lib/SelectPanel/index.d.ts

@@ -1,3 +1,4 @@
 export { SelectPanel } from './SelectPanel';
 export type { SelectPanelProps } from './SelectPanel';
+export type { ItemProps, ItemInput, GroupedListProps, ListPropsBase } from '../FilteredActionList';
 //# sourceMappingURL=index.d.ts.map

package/lib/SelectPanel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/SelectPanel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAA;AACzC,YAAY,EAAC,gBAAgB,EAAC,MAAM,eAAe,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/SelectPanel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAA;AACzC,YAAY,EAAC,gBAAgB,EAAC,MAAM,eAAe,CAAA;AAEnD,YAAY,EAAC,SAAS,EAAE,SAAS,EAAE,gBAAgB,EAAE,aAAa,EAAC,MAAM,uBAAuB,CAAA"}

package/lib/SideNav.d.ts

@@ -3,7 +3,6 @@ import type { ComponentProps } from './utils/types';
 import { type LinkProps } from './Link';
 import type React from 'react';
 import { type PropsWithChildren } from 'react';
-import type { SxProp } from './sx';
 type SideNavBaseProps = {
     as?: React.ElementType;
     variant?: 'lightweight' | 'normal';
@@ -11,8 +10,8 @@ type SideNavBaseProps = {
     className?: string;
     children?: React.ReactNode;
     'aria-label'?: string;
-} & SxProp;
-declare function SideNav({ as, variant, className, bordered, children, 'aria-label': ariaLabel, sx: sxProp, }: SideNavBaseProps): React.JSX.Element;
+};
+declare function SideNav({ as: Component, variant, className, bordered, children, 'aria-label': ariaLabel, }: SideNavBaseProps): React.JSX.Element;
 type StyledSideNavLinkProps = PropsWithChildren<{
     to?: To;
     selected?: boolean;

package/lib/SideNav.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SideNav.d.ts","sourceRoot":"","sources":["../src/SideNav.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,EAAE,EAAC,MAAM,SAAS,CAAA;AAC/B,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,eAAe,CAAA;AACjD,OAAa,EAAC,KAAK,SAAS,EAAC,MAAM,QAAQ,CAAA;AAC3C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAC,KAAK,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAE5C,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,MAAM,CAAA;AAKhC,KAAK,gBAAgB,GAAG;IACtB,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;IACtB,OAAO,CAAC,EAAE,aAAa,GAAG,QAAQ,CAAA;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,GAAG,MAAM,CAAA;AAEV,iBAAS,OAAO,CAAC,EACf,EAAU,EACV,OAAkB,EAClB,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,EAAE,EAAE,MAAsB,GAC3B,EAAE,gBAAgB,qBAkBlB;AAED,KAAK,sBAAsB,GAAG,iBAAiB,CAAC;IAC9C,EAAE,CAAC,EAAE,EAAE,CAAA;IACP,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAA;CAC5B,CAAC,GACA,SAAS,CAAA;AAEX,QAAA,MAAM,WAAW;8DAA2D,sBAAsB;;CAgBjG,CAAA;AAID,MAAM,MAAM,YAAY,GAAG,cAAc,CAAC,OAAO,OAAO,CAAC,CAAA;AACzD,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,WAAW,CAAC,CAAA;AAEjE,4EAA4E;;;kEAvBA,sBAAsB;;;;AAwBlG,wBAA0D"}
+{"version":3,"file":"SideNav.d.ts","sourceRoot":"","sources":["../src/SideNav.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,EAAE,EAAC,MAAM,SAAS,CAAA;AAC/B,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,eAAe,CAAA;AACjD,OAAa,EAAC,KAAK,SAAS,EAAC,MAAM,QAAQ,CAAA;AAC3C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAC,KAAK,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAI5C,KAAK,gBAAgB,GAAG;IACtB,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;IACtB,OAAO,CAAC,EAAE,aAAa,GAAG,QAAQ,CAAA;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAED,iBAAS,OAAO,CAAC,EACf,EAAE,EAAE,SAAiB,EACrB,OAAkB,EAClB,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,YAAY,EAAE,SAAS,GACxB,EAAE,gBAAgB,qBAkBlB;AAED,KAAK,sBAAsB,GAAG,iBAAiB,CAAC;IAC9C,EAAE,CAAC,EAAE,EAAE,CAAA;IACP,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAA;CAC5B,CAAC,GACA,SAAS,CAAA;AAEX,QAAA,MAAM,WAAW;8DAA2D,sBAAsB;;CAUjG,CAAA;AAID,MAAM,MAAM,YAAY,GAAG,cAAc,CAAC,OAAO,OAAO,CAAC,CAAA;AACzD,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,WAAW,CAAC,CAAA;AAEjE,4EAA4E;;;kEAjBA,sBAAsB;;;;AAkBlG,wBAA0D"}

package/lib/SideNav.js

@@ -2,29 +2,24 @@
 
 var clsx = require('clsx');
 var SideNav_module = require('./SideNav.module.css.js');
-var defaultSxProp = require('./utils/defaultSxProp.js');
-var BoxWithFallback = require('./internal/components/BoxWithFallback.js');
 var jsxRuntime = require('react/jsx-runtime');
 var Link = require('./Link/Link.js');
 
 function SideNav({
-  as = 'nav',
+  as: Component = 'nav',
   variant = 'normal',
   className,
   bordered,
   children,
-  'aria-label': ariaLabel,
-  sx: sxProp = defaultSxProp.defaultSxProp
+  'aria-label': ariaLabel
 }) {
   const variantClassName = variant === 'lightweight' ? 'lightweight' : 'normal';
   const newClassName = clsx.clsx(SideNav_module.SideNav, SideNav_module[`SideNavVariant--${variantClassName}`], 'sidenav', `variant-${variantClassName}`, className, {
     [SideNav_module.SideNavBordered]: bordered
   });
-  return /*#__PURE__*/jsxRuntime.jsx(BoxWithFallback.BoxWithFallback, {
-    as: as,
+  return /*#__PURE__*/jsxRuntime.jsx(Component, {
     className: newClassName,
     "aria-label": ariaLabel,
-    sx: sxProp,
     children: children
   });
 }
@@ -43,11 +38,9 @@ const SideNavLink = ({
   });
   // according to their docs, NavLink supports aria-current:
   // https://reacttraining.com/react-router/web/api/NavLink/aria-current-string
-  return /*#__PURE__*/jsxRuntime.jsx(BoxWithFallback.BoxWithFallback, {
-    as: Link,
+  return /*#__PURE__*/jsxRuntime.jsx(Link, {
     "aria-current": isReactRouter || selected ? 'page' : undefined,
     className: newClassName,
-    variant: variant,
     ...rest,
     children: children
   });

package/lib/Skeleton/SkeletonBox.d.ts

@@ -7,6 +7,6 @@ export type SkeletonBoxProps = {
     width?: CSSProperties['width'];
     /** The className of the skeleton box */
     className?: string;
-} & HTMLProps<HTMLDivElement>;
-export declare const SkeletonBox: React.ForwardRefExoticComponent<Omit<SkeletonBoxProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+} & HTMLProps<HTMLElement>;
+export declare const SkeletonBox: React.ForwardRefExoticComponent<Omit<SkeletonBoxProps, "ref"> & React.RefAttributes<HTMLElement>>;
 //# sourceMappingURL=SkeletonBox.d.ts.map

package/lib/Skeleton/SkeletonBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonBox.d.ts","sourceRoot":"","sources":["../../src/Skeleton/SkeletonBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAC,KAAK,aAAa,EAAE,KAAK,SAAS,EAAC,MAAM,OAAO,CAAA;AAKxD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,0EAA0E;IAC1E,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAA;IAChC,wEAAwE;IACxE,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAA;IAC9B,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,SAAS,CAAC,cAAc,CAAC,CAAA;AAE7B,eAAO,MAAM,WAAW,sGAkBtB,CAAA"}
+{"version":3,"file":"SkeletonBox.d.ts","sourceRoot":"","sources":["../../src/Skeleton/SkeletonBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAC,KAAK,aAAa,EAAE,KAAK,SAAS,EAAC,MAAM,OAAO,CAAA;AAKxD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,0EAA0E;IAC1E,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAA;IAChC,wEAAwE;IACxE,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAA;IAC9B,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,SAAS,CAAC,WAAW,CAAC,CAAA;AAE1B,eAAO,MAAM,WAAW,mGAkBtB,CAAA"}

package/lib/Skeleton/SkeletonBox.js

@@ -41,45 +41,46 @@ const SkeletonBox = /*#__PURE__*/React__default.default.forwardRef(function Skel
     style = $[4];
     width = $[5];
   }
-  let t1;
+  const t1 = ref;
+  let t2;
   if ($[6] !== className) {
-    t1 = clsx.clsx(className, SkeletonBox_module.SkeletonBox);
+    t2 = clsx.clsx(className, SkeletonBox_module.SkeletonBox);
     $[6] = className;
-    $[7] = t1;
+    $[7] = t2;
   } else {
-    t1 = $[7];
+    t2 = $[7];
   }
-  const t2 = style;
-  let t3;
-  if ($[8] !== height || $[9] !== t2 || $[10] !== width) {
-    t3 = merge__default.default(t2, {
+  const t3 = style;
+  let t4;
+  if ($[8] !== height || $[9] !== t3 || $[10] !== width) {
+    t4 = merge__default.default(t3, {
       height,
       width
     });
     $[8] = height;
-    $[9] = t2;
+    $[9] = t3;
     $[10] = width;
-    $[11] = t3;
+    $[11] = t4;
   } else {
-    t3 = $[11];
+    t4 = $[11];
   }
-  let t4;
-  if ($[12] !== props || $[13] !== ref || $[14] !== t1 || $[15] !== t3) {
-    t4 = /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: t1,
-      style: t3,
-      ...props,
-      ref: ref
+  let t5;
+  if ($[12] !== props || $[13] !== t1 || $[14] !== t2 || $[15] !== t4) {
+    t5 = /*#__PURE__*/jsxRuntime.jsx("div", {
+      ref: t1,
+      className: t2,
+      style: t4,
+      ...props
     });
     $[12] = props;
-    $[13] = ref;
-    $[14] = t1;
-    $[15] = t3;
-    $[16] = t4;
+    $[13] = t1;
+    $[14] = t2;
+    $[15] = t4;
+    $[16] = t5;
   } else {
-    t4 = $[16];
+    t5 = $[16];
   }
-  return t4;
+  return t5;
 });
 
 exports.SkeletonBox = SkeletonBox;

package/lib/SkeletonAvatar/SkeletonAvatar-e00fff32.css

@@ -0,0 +1,2 @@
+.prc-SkeletonAvatar-SkeletonAvatar-inefu:where([data-component=SkeletonAvatar]){border-radius:50%;display:inline-block;height:var(--avatarSize-regular);line-height:1;width:var(--avatarSize-regular)}.prc-SkeletonAvatar-SkeletonAvatar-inefu:where([data-square]){border-radius:clamp(4px,var(--avatarSize-regular) - 24px,var(--borderRadius-medium,.375rem))}@media screen and (max-width:calc(48rem - 0.02px)){.prc-SkeletonAvatar-SkeletonAvatar-inefu:where([data-responsive]){height:var(--avatarSize-narrow);width:var(--avatarSize-narrow)}}@media screen and (min-width:48rem){.prc-SkeletonAvatar-SkeletonAvatar-inefu:where([data-responsive]){height:var(--avatarSize-regular);width:var(--avatarSize-regular)}}@media screen and (min-width:87.5rem){.prc-SkeletonAvatar-SkeletonAvatar-inefu:where([data-responsive]){height:var(--avatarSize-wide);width:var(--avatarSize-wide)}}
+/*# sourceMappingURL=SkeletonAvatar-e00fff32.css.map */

package/lib/SkeletonAvatar/SkeletonAvatar-e00fff32.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/SkeletonAvatar/SkeletonAvatar.module.css"],"names":[],"mappings":"AACE,gFAME,iBAAkB,CALlB,oBAAqB,CAErB,gCAAiC,CAEjC,aAAc,CAHd,+BAKF,CAEA,8DAEE,4FACF,CAGE,mDADF,kEAGI,+BAAgC,CADhC,8BAaJ,CAXE,CAEA,oCANF,kEAQI,gCAAiC,CADjC,+BAQJ,CANE,CAEA,sCAXF,kEAaI,6BAA8B,CAD9B,4BAGJ,CADE","file":"SkeletonAvatar-e00fff32.css","sourcesContent":[".SkeletonAvatar {\n  &:where([data-component='SkeletonAvatar']) {\n    display: inline-block;\n    width: var(--avatarSize-regular);\n    height: var(--avatarSize-regular);\n    /* stylelint-disable-next-line primer/typography */\n    line-height: 1;\n    border-radius: 50%;\n  }\n\n  &:where([data-square]) {\n    /* stylelint-disable-next-line primer/borders */\n    border-radius: clamp(4px, var(--avatarSize-regular) - 24px, var(--borderRadius-medium));\n  }\n\n  &:where([data-responsive]) {\n    @media screen and (--viewportRange-narrow) {\n      width: var(--avatarSize-narrow);\n      height: var(--avatarSize-narrow);\n    }\n\n    @media screen and (--viewportRange-regular) {\n      width: var(--avatarSize-regular);\n      height: var(--avatarSize-regular);\n    }\n\n    @media screen and (--viewportRange-wide) {\n      width: var(--avatarSize-wide);\n      height: var(--avatarSize-wide);\n    }\n  }\n}\n"]}

package/lib/SkeletonAvatar/SkeletonAvatar.d.ts

@@ -0,0 +1,12 @@
+import type React from 'react';
+import type { AvatarProps } from '../Avatar';
+interface SkeletonAvatarProps extends Omit<React.HTMLProps<HTMLElement>, 'size'> {
+    /** Class name for custom styling */
+    className?: string;
+    size?: AvatarProps['size'];
+    square?: AvatarProps['square'];
+}
+declare function SkeletonAvatar({ size, square, className, style, ...rest }: SkeletonAvatarProps): React.JSX.Element;
+export { SkeletonAvatar };
+export type { SkeletonAvatarProps };
+//# sourceMappingURL=SkeletonAvatar.d.ts.map

package/lib/SkeletonAvatar/SkeletonAvatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonAvatar.d.ts","sourceRoot":"","sources":["../../src/SkeletonAvatar/SkeletonAvatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,WAAW,CAAA;AAO1C,UAAU,mBAAoB,SAAQ,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9E,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IAC1B,MAAM,CAAC,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAA;CAC/B;AAED,iBAAS,cAAc,CAAC,EAAC,IAA0B,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI,EAAC,EAAE,mBAAmB,qBAsB3G;AAED,OAAO,EAAC,cAAc,EAAC,CAAA;AACvB,YAAY,EAAC,mBAAmB,EAAC,CAAA"}

package/lib/{experimental/Skeleton → SkeletonAvatar}/SkeletonAvatar.js

@@ -1,9 +1,9 @@
 'use strict';
 
 var reactCompilerRuntime = require('react-compiler-runtime');
-var useResponsiveValue = require('../../hooks/useResponsiveValue.js');
-var Avatar = require('../../Avatar/Avatar.js');
-var SkeletonBox = require('../../Skeleton/SkeletonBox.js');
+var useResponsiveValue = require('../hooks/useResponsiveValue.js');
+var Avatar = require('../Avatar/Avatar.js');
+var SkeletonBox = require('../Skeleton/SkeletonBox.js');
 var SkeletonAvatar_module = require('./SkeletonAvatar.module.css.js');
 var clsx = require('clsx');
 require('@styled-system/css');
@@ -14,7 +14,7 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var merge__default = /*#__PURE__*/_interopDefault(merge);
 
-const SkeletonAvatar = t0 => {
+function SkeletonAvatar(t0) {
   const $ = reactCompilerRuntime.c(31);
   let className;
   let rest;
@@ -125,6 +125,6 @@ const SkeletonAvatar = t0 => {
     t9 = $[30];
   }
   return t9;
-};
+}
 
 exports.SkeletonAvatar = SkeletonAvatar;

package/lib/{experimental/Skeleton → SkeletonAvatar}/SkeletonAvatar.module.css.js

@@ -2,6 +2,6 @@
 
 require('./SkeletonAvatar-e00fff32.css');
 
-var classes = {"SkeletonAvatar":"prc-Skeleton-SkeletonAvatar-TYNvX"};
+var classes = {"SkeletonAvatar":"prc-SkeletonAvatar-SkeletonAvatar-inefu"};
 
 module.exports = classes;

package/lib/SkeletonAvatar/index.d.ts

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

package/lib/SkeletonAvatar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/SkeletonAvatar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAA;AAC/C,YAAY,EAAC,mBAAmB,EAAC,MAAM,kBAAkB,CAAA"}

package/lib/SkeletonText/SkeletonText-5cf908c1.css

@@ -0,0 +1,2 @@
+.prc-SkeletonText-SkeletonText-tW5nH{--font-size:var(--text-body-size-medium,0.875rem);--line-height:var(--text-body-lineHeight-medium,1.4285);--leading:calc(var(--font-size)*var(--line-height) - var(--font-size))}@supports (margin-block:mod(1px,1px)){.prc-SkeletonText-SkeletonText-tW5nH{--leading:mod(var(--font-size) * var(--line-height),var(--font-size))}}.prc-SkeletonText-SkeletonText-tW5nH{border-radius:var(--borderRadius-small,.1875rem);height:var(--font-size);margin-block:calc(var(--leading)/2)}.prc-SkeletonText-SkeletonText-tW5nH:where([data-in-multiline]){margin-block-end:calc(var(--leading)*2)}.prc-SkeletonText-SkeletonText-tW5nH:where([data-in-multiline]):last-child{margin-bottom:0;max-width:65%;min-width:50px}.prc-SkeletonText-SkeletonText-tW5nH:where([data-text-skeleton-size=display]),.prc-SkeletonText-SkeletonText-tW5nH:where([data-text-skeleton-size=titleLarge]){border-radius:var(--borderRadius-medium,.375rem)}.prc-SkeletonText-SkeletonText-tW5nH:where([data-text-skeleton-size=display]){--font-size:var(--text-display-size,2.5rem);--line-height:var(--text-display-lineHeight,1.4)}.prc-SkeletonText-SkeletonText-tW5nH:where([data-text-skeleton-size=titleLarge]){--font-size:var(--text-title-size-large,2rem);--line-height:var(--text-title-lineHeight-large,1.5)}.prc-SkeletonText-SkeletonText-tW5nH:where([data-text-skeleton-size=titleMedium]){--font-size:var(--text-title-size-medium,1.25rem);--line-height:var(--text-title-lineHeight-medium,1.6)}.prc-SkeletonText-SkeletonText-tW5nH:where([data-text-skeleton-size=titleSmall]){--font-size:var(--text-title-size-small,1rem);--line-height:var(--text-title-lineHeight-small,1.5)}.prc-SkeletonText-SkeletonText-tW5nH:where([data-text-skeleton-size=subtitle]){--font-size:var(--text-subtitle-size,1.25rem);--line-height:var(--text-subtitle-lineHeight,1.6)}.prc-SkeletonText-SkeletonText-tW5nH:where([data-text-skeleton-size=bodyLarge]){--font-size:var(--text-body-size-large,1rem);--line-height:var(--text-body-lineHeight-large,1.5)}.prc-SkeletonText-SkeletonText-tW5nH:where([data-text-skeleton-size=bodySmall]){--font-size:var(--text-body-size-small,0.75rem);--line-height:var(--text-body-lineHeight-small,1.6666)}.prc-SkeletonText-SkeletonTextWrapper-3Z0sU{padding-block:.1px}
+/*# sourceMappingURL=SkeletonText-5cf908c1.css.map */

package/lib/SkeletonText/SkeletonText-5cf908c1.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/SkeletonText/SkeletonText.module.css"],"names":[],"mappings":"AAAA,qCACE,iDAAyC,CACzC,uDAAiD,CACjD,sEA6DF,CA3DE,sCALF,qCAMI,qEA0DJ,CAzDE,CAPF,qCAUE,gDAAwC,CADxC,uBAAwB,CAGxB,mCAoDF,CAlDE,gEAEE,uCAOF,CALE,2EAGE,eAAgB,CADhB,aAAc,CADd,cAGF,CAGF,+JAEE,gDACF,CAEA,8EACE,2CAAqC,CACrC,gDACF,CAEA,iFACE,6CAAyC,CACzC,oDACF,CAEA,kFACE,iDAA0C,CAC1C,qDACF,CAEA,iFACE,6CAAyC,CACzC,oDACF,CAEA,+EACE,6CAAsC,CACtC,iDACF,CAEA,gFACE,4CAAwC,CACxC,mDACF,CAEA,gFACE,+CAAwC,CACxC,sDACF,CAGF,4CAEE,kBACF","file":"SkeletonText-5cf908c1.css","sourcesContent":[".SkeletonText {\n  --font-size: var(--text-body-size-medium);\n  --line-height: var(--text-body-lineHeight-medium);\n  --leading: calc(var(--font-size) * var(--line-height) - var(--font-size));\n\n  @supports (margin-block: mod(1px, 1px)) {\n    --leading: mod(var(--font-size) * var(--line-height), var(--font-size));\n  }\n\n  height: var(--font-size);\n  border-radius: var(--borderRadius-small);\n  /* stylelint-disable-next-line primer/spacing */\n  margin-block: calc(var(--leading) / 2);\n\n  &:where([data-in-multiline]) {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-block-end: calc(var(--leading) * 2);\n\n    &:last-child {\n      min-width: 50px;\n      max-width: 65%;\n      margin-bottom: 0;\n    }\n  }\n\n  &:where([data-text-skeleton-size='display']),\n  &:where([data-text-skeleton-size='titleLarge']) {\n    border-radius: var(--borderRadius-medium);\n  }\n\n  &:where([data-text-skeleton-size='display']) {\n    --font-size: var(--text-display-size);\n    --line-height: var(--text-display-lineHeight);\n  }\n\n  &:where([data-text-skeleton-size='titleLarge']) {\n    --font-size: var(--text-title-size-large);\n    --line-height: var(--text-title-lineHeight-large);\n  }\n\n  &:where([data-text-skeleton-size='titleMedium']) {\n    --font-size: var(--text-title-size-medium);\n    --line-height: var(--text-title-lineHeight-medium);\n  }\n\n  &:where([data-text-skeleton-size='titleSmall']) {\n    --font-size: var(--text-title-size-small);\n    --line-height: var(--text-title-lineHeight-small);\n  }\n\n  &:where([data-text-skeleton-size='subtitle']) {\n    --font-size: var(--text-subtitle-size);\n    --line-height: var(--text-subtitle-lineHeight);\n  }\n\n  &:where([data-text-skeleton-size='bodyLarge']) {\n    --font-size: var(--text-body-size-large);\n    --line-height: var(--text-body-lineHeight-large);\n  }\n\n  &:where([data-text-skeleton-size='bodySmall']) {\n    --font-size: var(--text-body-size-small);\n    --line-height: var(--text-body-lineHeight-small);\n  }\n}\n\n.SkeletonTextWrapper {\n  /* stylelint-disable-next-line primer/spacing */\n  padding-block: 0.1px;\n}\n"]}

package/lib/{experimental/Skeleton → SkeletonText}/SkeletonText.d.ts

@@ -1,6 +1,6 @@
 import type React from 'react';
 import { type HTMLProps } from 'react';
-type SkeletonTextProps = {
+interface SkeletonTextProps extends Omit<HTMLProps<HTMLElement>, 'size'> {
     /** Size of the text that the skeleton is replacing. */
     size?: 'display' | 'titleLarge' | 'titleMedium' | 'titleSmall' | 'bodyLarge' | 'bodyMedium' | 'bodySmall' | 'subtitle';
     /** Number of lines of skeleton text to render. */
@@ -9,7 +9,8 @@ type SkeletonTextProps = {
     maxWidth?: React.CSSProperties['maxWidth'];
     /** Class name for custom styling */
     className?: string;
-} & Omit<HTMLProps<HTMLDivElement>, 'size'>;
-export declare const SkeletonText: React.FC<SkeletonTextProps>;
-export {};
+}
+declare function SkeletonText({ lines, maxWidth, size, className, style, ...rest }: SkeletonTextProps): React.JSX.Element;
+export { SkeletonText };
+export type { SkeletonTextProps };
 //# sourceMappingURL=SkeletonText.d.ts.map

package/lib/SkeletonText/SkeletonText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonText.d.ts","sourceRoot":"","sources":["../../src/SkeletonText/SkeletonText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAA;AAKpC,UAAU,iBAAkB,SAAQ,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IACtE,uDAAuD;IACvD,IAAI,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,aAAa,GAAG,YAAY,GAAG,WAAW,GAAG,YAAY,GAAG,WAAW,GAAG,UAAU,CAAA;IACtH,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,6GAA6G;IAC7G,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAAA;IAC1C,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,iBAAS,YAAY,CAAC,EAAC,KAAS,EAAE,QAAQ,EAAE,IAAmB,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI,EAAC,EAAE,iBAAiB,qBAsC7G;AAED,OAAO,EAAC,YAAY,EAAC,CAAA;AACrB,YAAY,EAAC,iBAAiB,EAAC,CAAA"}