@primer/react 38.30.0-rc.dc0369509 → 38.30.0

package/dist/UnderlineNav/UnderlineNavItem.js

@@ -1,46 +1,39 @@
-import React, { forwardRef, useRef, useContext } from 'react';
+import React, { forwardRef, useRef, useContext, useSyncExternalStore, useCallback } from 'react';
 import { UnderlineNavContext } from './UnderlineNavContext.js';
-import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect.js';
 import { UnderlineItem } from '../internal/components/UnderlineTabbedInterface.js';
 import classes from './UnderlineNavItem.module.css.js';
+import { UnderlineNavItemsRegistry } from './UnderlineNavItemsRegistry.js';
 import { jsx } from 'react/jsx-runtime';
 
-const UnderlineNavItem = /*#__PURE__*/forwardRef(({
-  as: Component = 'a',
-  href = '#',
-  children,
-  counter,
-  onSelect,
-  'aria-current': ariaCurrent,
-  icon: Icon,
-  leadingVisual,
-  ...props
-}, forwardedRef) => {
-  const backupRef = useRef(null);
-  const ref = forwardedRef !== null && forwardedRef !== void 0 ? forwardedRef : backupRef;
+const UnderlineNavItem = /*#__PURE__*/forwardRef((allProps, forwardedRef) => {
   const {
-    setChildrenWidth,
-    setNoIconChildrenWidth,
-    loadingCounters,
-    iconsVisible
+    as: Component = 'a',
+    href = '#',
+    children,
+    counter,
+    onSelect,
+    'aria-current': ariaCurrent,
+    icon: Icon,
+    leadingVisual,
+    ...props
+  } = allProps;
+  const ref = useRef(null);
+  const {
+    loadingCounters
   } = useContext(UnderlineNavContext);
-  useIsomorphicLayoutEffect(() => {
-    if (ref.current) {
-      const domRect = ref.current.getBoundingClientRect();
-      const icon = Array.from(ref.current.children).find(child => child.getAttribute('data-component') === 'icon');
-      const content = Array.from(ref.current.children).find(child => child.getAttribute('data-component') === 'text');
-      const text = content.textContent;
-      const iconWidthWithMargin = icon ? icon.getBoundingClientRect().width + Number(getComputedStyle(icon).marginRight.slice(0, -2)) + Number(getComputedStyle(icon).marginLeft.slice(0, -2)) : 0;
-      setChildrenWidth({
-        text,
-        width: domRect.width
-      });
-      setNoIconChildrenWidth({
-        text,
-        width: domRect.width - iconWidthWithMargin
-      });
-    }
-  }, [ref, setChildrenWidth, setNoIconChildrenWidth]);
+  const isOverflowing = useSyncExternalStore(useCallback(onChange => {
+    const observer = new IntersectionObserver(() => onChange(), {
+      threshold: 1
+    });
+    if (ref.current) observer.observe(ref.current);
+    return () => observer.disconnect();
+  }, [ref]),
+  // Note: the IntersectionObserver is just being used as a trigger to re-check
+  // `offsetTop > 0`; this is fast and simpler than checking visibility from
+  // the observed entry. When an item wraps, it will move to the next row which
+  // increases its `offsetTop`
+  () => ref.current ? ref.current.offsetTop > 0 : false, () => false);
+  UnderlineNavItemsRegistry.useRegisterDescendant(isOverflowing ? allProps : null);
   const keyDownHandler = React.useCallback(event => {
     if ((event.key === ' ' || event.key === 'Enter') && !event.defaultPrevented && typeof onSelect === 'function') {
       onSelect(event);
@@ -53,8 +46,10 @@ const UnderlineNavItem = /*#__PURE__*/forwardRef(({
   }, [onSelect]);
   return /*#__PURE__*/jsx("li", {
     className: classes.UnderlineNavItem,
+    ref: ref,
+    "aria-hidden": isOverflowing ? true : allProps['aria-hidden'],
     children: /*#__PURE__*/jsx(UnderlineItem, {
-      ref: ref,
+      ref: forwardedRef,
       as: Component,
       href: href,
       "aria-current": ariaCurrent,
@@ -63,8 +58,8 @@ const UnderlineNavItem = /*#__PURE__*/forwardRef(({
       counter: counter,
       icon: leadingVisual !== null && leadingVisual !== void 0 ? leadingVisual : Icon,
       loadingCounters: loadingCounters,
-      iconsVisible: iconsVisible,
       ...props,
+      tabIndex: isOverflowing ? -1 : allProps.tabIndex,
       children: children
     })
   });

package/dist/UnderlineNav/UnderlineNavItem.module.css.js

@@ -1,4 +1,4 @@
-import './UnderlineNavItem-b65e8fd3.css';
+import './UnderlineNavItem-402cd41c.css';
 
 var classes = {"UnderlineNavItem":"prc-UnderlineNav-UnderlineNavItem-syRjR"};
 

package/dist/UnderlineNav/UnderlineNavItemsRegistry.d.ts

@@ -0,0 +1,51 @@
+import type { IconProps } from '@primer/octicons-react';
+type LinkProps = {
+    download?: string;
+    href?: string;
+    hrefLang?: string;
+    media?: string;
+    ping?: string;
+    rel?: string;
+    target?: string;
+    type?: string;
+    referrerPolicy?: React.AnchorHTMLAttributes<HTMLAnchorElement>['referrerPolicy'];
+};
+export type UnderlineNavItemProps = {
+    /**
+     * Primary content for an UnderlineNav
+     */
+    children?: React.ReactNode;
+    /**
+     * Callback that will trigger both on click selection and keyboard selection.
+     */
+    onSelect?: (event: React.MouseEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLAnchorElement>) => void;
+    /**
+     * Is `UnderlineNav.Item` current page?
+     */
+    'aria-current'?: 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false' | boolean;
+    /**
+     *  Icon before the text
+     *  @deprecated Use the `leadingVisual` prop instead
+     */
+    icon?: React.FunctionComponent<IconProps> | React.ReactElement<any>;
+    /**
+     * Render a visual before the text
+     */
+    leadingVisual?: React.ReactElement;
+    /**
+     * Renders `UnderlineNav.Item` as given component i.e. react-router's Link
+     **/
+    as?: React.ElementType | 'a';
+    /**
+     * Counter
+     */
+    counter?: number | string;
+} & LinkProps;
+/** Registry of currently-overflowing underline items. If an item is not overflowing, its value will be `null`. */
+export declare const UnderlineNavItemsRegistry: {
+    Provider: ({ children, setRegistry }: import("../utils/descendant-registry").ProviderProps<UnderlineNavItemProps | null>) => import("react").JSX.Element;
+    useRegistryState: () => [ReadonlyMap<string, UnderlineNavItemProps | null> | undefined, import("react").Dispatch<import("react").SetStateAction<ReadonlyMap<string, UnderlineNavItemProps | null> | undefined>>];
+    useRegisterDescendant: (value: UnderlineNavItemProps | null) => string;
+};
+export {};
+//# sourceMappingURL=UnderlineNavItemsRegistry.d.ts.map

package/dist/UnderlineNav/UnderlineNavItemsRegistry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnderlineNavItemsRegistry.d.ts","sourceRoot":"","sources":["../../src/UnderlineNav/UnderlineNavItemsRegistry.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,wBAAwB,CAAA;AAIrD,KAAK,SAAS,GAAG;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,cAAc,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,gBAAgB,CAAC,CAAA;CACjF,CAAA;AAED,MAAM,MAAM,qBAAqB,GAAG;IAClC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAE1B;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;IAExG;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAA;IAE5F;;;OAGG;IAEH,IAAI,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAA;IAEnE;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,YAAY,CAAA;IAElC;;QAEI;IACJ,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,GAAG,GAAG,CAAA;IAE5B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAC1B,GAAG,SAAS,CAAA;AAEb,kHAAkH;AAClH,eAAO,MAAM,yBAAyB;;;;CAA2D,CAAA"}

package/dist/UnderlineNav/UnderlineNavItemsRegistry.js

@@ -0,0 +1,8 @@
+import { createDescendantRegistry } from '../utils/descendant-registry.js';
+
+// adopted from React.AnchorHTMLAttributes
+
+/** Registry of currently-overflowing underline items. If an item is not overflowing, its value will be `null`. */
+const UnderlineNavItemsRegistry = createDescendantRegistry();
+
+export { UnderlineNavItemsRegistry };

package/dist/UnderlineNav/index.d.ts

@@ -1,5 +1,5 @@
 import type { UnderlineNavProps } from './UnderlineNav';
-import type { UnderlineNavItemProps } from './UnderlineNavItem';
+import type { UnderlineNavItemProps } from './UnderlineNavItemsRegistry';
 declare const UnderlineNav: import("react").ForwardRefExoticComponent<UnderlineNavProps & import("react").RefAttributes<unknown>> & {
     Item: import("../utils/polymorphic").ForwardRefComponent<"a", UnderlineNavItemProps>;
 };

package/dist/UnderlineNav/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/UnderlineNav/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,gBAAgB,CAAA;AAErD,OAAO,KAAK,EAAC,qBAAqB,EAAC,MAAM,oBAAoB,CAAA;AAG7D,QAAA,MAAM,YAAY;;CAEhB,CAAA;AAEF,OAAO,EAAC,YAAY,EAAC,CAAA;AACrB,YAAY,EAAC,iBAAiB,EAAE,qBAAqB,EAAC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/UnderlineNav/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,gBAAgB,CAAA;AAErD,OAAO,KAAK,EAAC,qBAAqB,EAAC,MAAM,6BAA6B,CAAA;AAGtE,QAAA,MAAM,YAAY;;CAEhB,CAAA;AAEF,OAAO,EAAC,YAAY,EAAC,CAAA;AACrB,YAAY,EAAC,iBAAiB,EAAE,qBAAqB,EAAC,CAAA"}

package/dist/UnderlineNav/utils.d.ts

@@ -1,3 +1,5 @@
 import React from 'react';
+import type { UnderlineNavItemProps } from './UnderlineNavItemsRegistry';
 export declare const getValidChildren: (children: React.ReactNode) => React.ReactElement<any>[];
+export declare const isCurrent: (props: UnderlineNavItemProps) => boolean;
 //# sourceMappingURL=utils.d.ts.map

package/dist/UnderlineNav/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/UnderlineNav/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,eAAO,MAAM,gBAAgB,GAAI,UAAU,KAAK,CAAC,SAAS,KAEgC,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,EAChH,CAAA"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/UnderlineNav/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,EAAC,qBAAqB,EAAC,MAAM,6BAA6B,CAAA;AAEtE,eAAO,MAAM,gBAAgB,GAAI,UAAU,KAAK,CAAC,SAAS,KAEgC,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,EAChH,CAAA;AAED,eAAO,MAAM,SAAS,GAAI,OAAO,qBAAqB,YACuD,CAAA"}

package/dist/UnderlineNav/utils.js

@@ -4,5 +4,6 @@ const getValidChildren = children => {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   return React.Children.toArray(children).filter(child => /*#__PURE__*/React.isValidElement(child));
 };
+const isCurrent = props => props['aria-current'] !== undefined && props['aria-current'] !== false && props['aria-current'] !== 'false';
 
-export { getValidChildren };
+export { getValidChildren, isCurrent };

package/dist/experimental/UnderlinePanels/UnderlinePanels-162f9aed.css

@@ -0,0 +1,2 @@
+.prc-UnderlinePanels-StyledUnderlineWrapper-aiLna{overflow-x:auto;overflow-y:hidden;width:100%;-webkit-overflow-scrolling:auto}
+/*# sourceMappingURL=UnderlinePanels-162f9aed.css.map */

package/dist/experimental/UnderlinePanels/UnderlinePanels-162f9aed.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/experimental/UnderlinePanels/UnderlinePanels.module.css.js"],"names":[],"mappings":"AAAA,kDAEE,eAAgB,CAChB,iBAAkB,CAFlB,UAAW,CAGX,+BACF","file":"UnderlinePanels-162f9aed.css","sourcesContent":[".StyledUnderlineWrapper {\n  width: 100%;\n  overflow-x: auto;\n  overflow-y: hidden;\n  -webkit-overflow-scrolling: auto;\n}\n"]}

package/dist/experimental/UnderlinePanels/UnderlinePanels.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UnderlinePanels.d.ts","sourceRoot":"","sources":["../../../src/experimental/UnderlinePanels/UnderlinePanels.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAQZ,KAAK,EAAE,EACP,KAAK,iBAAiB,EAGvB,MAAM,OAAO,CAAA;AAEd,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,wBAAwB,CAAA;AAerD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,mBAAmB,CAAA;AAEvD,MAAM,MAAM,oBAAoB,GAAG;IACjC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAA;IACjD;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAA;IAC3D;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;CACvB,CAAA;AAED,MAAM,MAAM,QAAQ,GAAG,iBAAiB,CAAC;IACvC;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,GAAG,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;IACxG;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACzB;;OAEG;IACH,IAAI,CAAC,EAAE,EAAE,CAAC,SAAS,CAAC,CAAA;CACrB,CAAC,CAAA;AAEF,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;;;;;AA8M7D,wBAA2D"}
+{"version":3,"file":"UnderlinePanels.d.ts","sourceRoot":"","sources":["../../../src/experimental/UnderlinePanels/UnderlinePanels.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAQZ,KAAK,EAAE,EACP,KAAK,iBAAiB,EAGvB,MAAM,OAAO,CAAA;AAEd,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,wBAAwB,CAAA;AAerD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,mBAAmB,CAAA;AAEvD,MAAM,MAAM,oBAAoB,GAAG;IACjC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAA;IACjD;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAA;IAC3D;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;CACvB,CAAA;AAED,MAAM,MAAM,QAAQ,GAAG,iBAAiB,CAAC;IACvC;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,GAAG,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;IACxG;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACzB;;OAEG;IACH,IAAI,CAAC,EAAE,EAAE,CAAC,SAAS,CAAC,CAAA;CACrB,CAAC,CAAA;AAEF,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;;;;;AA6M7D,wBAA2D"}

package/dist/experimental/UnderlinePanels/UnderlinePanels.js

@@ -138,7 +138,7 @@ const UnderlinePanels = ({
 };
 UnderlinePanels.displayName = "UnderlinePanels";
 const TabImpl = t0 => {
-  const $ = c(16);
+  const $ = c(15);
   let ariaSelected;
   let onSelect;
   let props;
@@ -158,7 +158,6 @@ const TabImpl = t0 => {
     props = $[3];
   }
   const {
-    iconsVisible,
     loadingCounters
   } = useContext(UnderlinePanelsContext);
   let t1;
@@ -189,7 +188,7 @@ const TabImpl = t0 => {
   const keyDownHandler = t2;
   const t3 = ariaSelected ? 0 : -1;
   let t4;
-  if ($[8] !== ariaSelected || $[9] !== clickHandler || $[10] !== iconsVisible || $[11] !== keyDownHandler || $[12] !== loadingCounters || $[13] !== props || $[14] !== t3) {
+  if ($[8] !== ariaSelected || $[9] !== clickHandler || $[10] !== keyDownHandler || $[11] !== loadingCounters || $[12] !== props || $[13] !== t3) {
     t4 = /*#__PURE__*/jsx(UnderlineItem, {
       as: "button",
       role: "tab",
@@ -198,20 +197,18 @@ const TabImpl = t0 => {
       type: "button",
       onClick: clickHandler,
       onKeyDown: keyDownHandler,
-      iconsVisible: iconsVisible,
       loadingCounters: loadingCounters,
       ...props
     });
     $[8] = ariaSelected;
     $[9] = clickHandler;
-    $[10] = iconsVisible;
-    $[11] = keyDownHandler;
-    $[12] = loadingCounters;
-    $[13] = props;
-    $[14] = t3;
-    $[15] = t4;
+    $[10] = keyDownHandler;
+    $[11] = loadingCounters;
+    $[12] = props;
+    $[13] = t3;
+    $[14] = t4;
   } else {
-    t4 = $[15];
+    t4 = $[14];
   }
   return t4;
 };

package/dist/experimental/UnderlinePanels/UnderlinePanels.module.css.js

@@ -1,4 +1,4 @@
-import './UnderlinePanels-e4b325b9.css';
+import './UnderlinePanels-162f9aed.css';
 
 var classes = {"StyledUnderlineWrapper":"prc-UnderlinePanels-StyledUnderlineWrapper-aiLna"};
 

package/dist/internal/components/UnderlineTabbedInterface-1745a3d6.css

@@ -0,0 +1,2 @@
+.prc-components-UnderlineWrapper-eT-Yj{align-items:flex-start;box-shadow:inset 0 -1px var(--borderColor-muted,#d1d9e0b3);display:flex;justify-content:flex-start;min-height:var(--control-xlarge-size,3rem);padding-top:var(--base-size-8,.5rem);padding-inline:var(--stack-padding-normal,1rem)}.prc-components-UnderlineWrapper-eT-Yj[data-variant=flush]{padding-inline:unset}.prc-components-UnderlineWrapper-eT-Yj[data-hide-icons=true] [data-component=icon]{display:none}.prc-components-UnderlineWrapper-eT-Yj[data-overflow-mode=wrap]{max-height:var(--control-xlarge-size,3rem);overflow:hidden}.prc-components-UnderlineWrapper-eT-Yj[data-overflow-mode=wrap] .prc-components-UnderlineItemList-xKlKC{flex-wrap:wrap;overflow:hidden}.prc-components-UnderlineItemList-xKlKC{display:flex;gap:var(--stack-gap-condensed,.5rem);list-style:none;margin:0;padding:0;white-space:nowrap}.prc-components-UnderlineItem-7fP-n,.prc-components-UnderlineItemList-xKlKC{align-items:center;position:relative}.prc-components-UnderlineItem-7fP-n{appearance:none;background-color:transparent;border:0;border-radius:var(--borderRadius-medium,.375rem);color:var(--fgColor-default,#1f2328);cursor:pointer;display:inline-flex;font:inherit;font-size:var(--text-body-size-medium,.875rem);height:32px;line-height:var(--text-body-lineHeight-medium,1.4285);margin-bottom:var(--base-size-8,.5rem);max-width:100%;padding-block:var(--base-size-6,.375rem);padding-inline:var(--base-size-8,.5rem);text-align:center;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.prc-components-UnderlineItem-7fP-n:hover{background-color:var(--bgColor-neutral-muted,#818b981f);-webkit-text-decoration:none;text-decoration:none;transition:background-color .12s ease-out}}.prc-components-UnderlineItem-7fP-n:focus{box-shadow:inset 0 0 0 2px var(--fgColor-accent,#0969da);outline:2px solid transparent}.prc-components-UnderlineItem-7fP-n:focus:not(:focus-visible){box-shadow:none}.prc-components-UnderlineItem-7fP-n:focus-visible{box-shadow:inset 0 0 0 2px var(--fgColor-accent,#0969da);outline:2px solid transparent}.prc-components-UnderlineItem-7fP-n [data-content]:before{content:attr(data-content);display:block;font-weight:var(--base-text-weight-semibold,600);height:0;visibility:hidden;white-space:nowrap}.prc-components-UnderlineItem-7fP-n [data-component=icon]{align-items:center;color:var(--fgColor-muted,#59636e);display:inline-flex;margin-inline-end:var(--base-size-8,.5rem)}.prc-components-UnderlineItem-7fP-n [data-component=text]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.prc-components-UnderlineItem-7fP-n [data-component=counter]{align-items:center;display:flex;margin-inline-start:var(--base-size-8,.5rem)}.prc-components-UnderlineItem-7fP-n:after{background-color:transparent;content:"";height:2px;inset:auto 0 0;margin-bottom:calc(var(--base-size-8,.5rem)*-1);pointer-events:none;position:absolute}.prc-components-UnderlineItem-7fP-n[aria-current]:not([aria-current=false]) [data-component=text],.prc-components-UnderlineItem-7fP-n[aria-selected=true] [data-component=text]{font-weight:var(--base-text-weight-semibold,600)}.prc-components-UnderlineItem-7fP-n[aria-current]:not([aria-current=false]):after,.prc-components-UnderlineItem-7fP-n[aria-selected=true]:after{background-color:var(--underlineNav-borderColor-active,var(--color-primer-border-active,#fd8c73))}@media (forced-colors:active){.prc-components-UnderlineItem-7fP-n[aria-current]:not([aria-current=false]):after,.prc-components-UnderlineItem-7fP-n[aria-selected=true]:after{background-color:LinkText}}.prc-components-LoadingCounter-dBuLy{animation:prc-components-loadingCounterKeyFrames-8tMlf 1.2s ease-in-out infinite alternate;background-color:var(--bgColor-neutral-muted,#818b981f);border-color:var(--borderColor-default,#d1d9e0);border-radius:20px;display:inline-block;height:1rem;width:1.5rem}@keyframes prc-components-loadingCounterKeyFrames-8tMlf{0%{opacity:1}to{opacity:.2}}
+/*# sourceMappingURL=UnderlineTabbedInterface-1745a3d6.css.map */

package/dist/internal/components/UnderlineTabbedInterface-1745a3d6.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/internal/components/UnderlineTabbedInterface.module.css.js"],"names":[],"mappings":"AAAA,uCAME,sBAAuB,CAOvB,0DAAiD,CAZjD,YAAa,CAIb,0BAA2B,CAI3B,0CAAsC,CAPtC,oCAA+B,CAE/B,+CA8BF,CAnBE,2DAEE,oBACF,CAEA,mFACE,YACF,CAEA,gEAGE,0CAAsC,CADtC,eAOF,CAJE,wGACE,cAAe,CACf,eACF,CAIJ,wCAEE,YAAa,CAMb,oCAA+B,CAF/B,eAAgB,CAFhB,QAAS,CADT,SAAU,CAEV,kBAIF,CAEA,4EAJE,kBAAmB,CANnB,iBAyCF,CA/BA,oCAmBE,eAAgB,CARhB,4BAA6B,CAC7B,QAAS,CACT,gDAAyC,CANzC,oCAA6B,CAG7B,cAAe,CAPf,mBAAoB,CACpB,YAAa,CACb,8CAAuC,CAWvC,WAAY,CAVZ,qDAAuD,CASvD,sCAAiC,CADjC,cAAe,CAOf,wCAAiC,CADjC,uCAAkC,CAZlC,iBAAkB,CAClB,4BAAqB,CAArB,oBAsBF,CAPE,qBACE,0CAEE,uDAA8C,CAD9C,4BAAqB,CAArB,oBAAqB,CAErB,yCACF,CACF,CAGF,0CAGE,wDAAiD,CAFjD,6BAQF,CAHE,8DACE,eACF,CAGF,kDAGE,wDAAiD,CAFjD,6BAGF,CAGA,0DAME,0BAA2B,CAL3B,aAAc,CAEd,gDAA6C,CAD7C,QAAS,CAGT,iBAAkB,CADlB,kBAGF,CAEA,0DAGE,kBAAmB,CADnB,kCAA2B,CAD3B,mBAAoB,CAGpB,0CACF,CAGA,0DACE,eAAgB,CAChB,sBAAuB,CACvB,kBACF,CAEA,6DAGE,kBAAmB,CADnB,YAAa,CADb,4CAGF,CAEA,0CAOE,4BAA6B,CAD7B,UAAW,CAFX,UAAW,CAFX,cAAe,CACf,+CAA4C,CAE5C,mBAAoB,CAJpB,iBAOF,CAEA,gLAEE,gDACF,CAEA,gJAGE,iGAMF,CAJE,8BALF,gJAOI,yBAEJ,CADE,CAGF,qCASE,0FAAsE,CAJtE,uDAA8C,CAC9C,+CAAwC,CAExC,kBAAmB,CAPnB,oBAAqB,CAErB,WAAY,CADZ,YAQF,CAEA,wDACE,GACE,SACF,CAEA,GACE,UACF,CACF","file":"UnderlineTabbedInterface-1745a3d6.css","sourcesContent":[".UnderlineWrapper {\n  display: flex;\n  padding-top: var(--base-size-8);\n  /* stylelint-disable-next-line primer/spacing */\n  padding-inline: var(--stack-padding-normal);\n  justify-content: flex-start;\n  align-items: flex-start;\n\n  /* make space for the underline */\n  min-height: var(--control-xlarge-size);\n\n  /* using a box-shadow instead of a border to accommodate 'overflow-y: hidden' on UnderlinePanels */\n  /* stylelint-disable-next-line primer/box-shadow */\n  box-shadow: inset 0 -1px var(--borderColor-muted);\n\n  &[data-variant='flush'] {\n    /* stylelint-disable-next-line primer/spacing */\n    padding-inline: unset;\n  }\n\n  &[data-hide-icons='true'] [data-component='icon'] {\n    display: none;\n  }\n\n  &[data-overflow-mode='wrap'] {\n    /* Wrap items onto hidden next lines */\n    overflow: hidden;\n    max-height: var(--control-xlarge-size);\n\n    .UnderlineItemList {\n      flex-wrap: wrap;\n      overflow: hidden;\n    }\n  }\n}\n\n.UnderlineItemList {\n  position: relative;\n  display: flex;\n  padding: 0;\n  margin: 0;\n  white-space: nowrap;\n  list-style: none;\n  align-items: center;\n  gap: var(--stack-gap-condensed);\n}\n\n.UnderlineItem {\n  /* underline tab specific styles */\n  position: relative;\n  display: inline-flex;\n  font: inherit;\n  font-size: var(--text-body-size-medium);\n  line-height: var(--text-body-lineHeight-medium, 1.4285);\n  color: var(--fgColor-default);\n  text-align: center;\n  text-decoration: none;\n  cursor: pointer;\n  background-color: transparent;\n  border: 0;\n  border-radius: var(--borderRadius-medium);\n  max-width: 100%;\n  margin-bottom: var(--base-size-8);\n  height: 32px;\n\n  /* button resets */\n  appearance: none;\n  padding-inline: var(--base-size-8);\n  padding-block: var(--base-size-6);\n  align-items: center;\n\n  @media (hover: hover) {\n    &:hover {\n      text-decoration: none;\n      background-color: var(--bgColor-neutral-muted);\n      transition: background-color 0.12s ease-out;\n    }\n  }\n}\n\n.UnderlineItem:focus {\n  outline: 2px solid transparent;\n  /* stylelint-disable-next-line primer/box-shadow */\n  box-shadow: inset 0 0 0 2px var(--fgColor-accent);\n\n  /* where focus-visible is supported, remove the focus box-shadow */\n  &:not(:focus-visible) {\n    box-shadow: none;\n  }\n}\n\n.UnderlineItem:focus-visible {\n  outline: 2px solid transparent;\n  /* stylelint-disable-next-line primer/box-shadow */\n  box-shadow: inset 0 0 0 2px var(--fgColor-accent);\n}\n\n/* renders a visibly hidden \"copy\" of the label in bold, reserving box space for when label becomes bold on selected */\n.UnderlineItem [data-content]::before {\n  display: block;\n  height: 0;\n  font-weight: var(--base-text-weight-semibold);\n  white-space: nowrap;\n  visibility: hidden;\n  content: attr(data-content);\n}\n\n.UnderlineItem [data-component='icon'] {\n  display: inline-flex;\n  color: var(--fgColor-muted);\n  align-items: center;\n  margin-inline-end: var(--base-size-8);\n}\n\n/* Truncate items if necessary (should only ever apply to the last item after everything else overflows) */\n.UnderlineItem [data-component='text'] {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.UnderlineItem [data-component='counter'] {\n  margin-inline-start: var(--base-size-8);\n  display: flex;\n  align-items: center;\n}\n\n.UnderlineItem::after {\n  position: absolute;\n  inset: auto 0 0;\n  margin-bottom: calc(-1 * var(--base-size-8));\n  height: 2px;\n  pointer-events: none;\n  content: '';\n  background-color: transparent;\n}\n\n.UnderlineItem[aria-current]:not([aria-current='false']) [data-component='text'],\n.UnderlineItem[aria-selected='true'] [data-component='text'] {\n  font-weight: var(--base-text-weight-semibold);\n}\n\n.UnderlineItem[aria-current]:not([aria-current='false'])::after,\n.UnderlineItem[aria-selected='true']::after {\n  /* stylelint-disable-next-line primer/colors */\n  background-color: var(--underlineNav-borderColor-active, var(--color-primer-border-active, #fd8c73));\n\n  @media (forced-colors: active) {\n    /* Support for Window Force Color Mode https://learn.microsoft.com/en-us/fluent-ui/web-components/design-system/high-contrast */\n    background-color: LinkText;\n  }\n}\n\n.LoadingCounter {\n  display: inline-block;\n  width: 1.5rem;\n  height: 1rem;\n  /* 16px */\n  background-color: var(--bgColor-neutral-muted);\n  border-color: var(--borderColor-default);\n  /* stylelint-disable-next-line primer/borders */\n  border-radius: 20px;\n  animation: loadingCounterKeyFrames 1.2s ease-in-out infinite alternate;\n}\n\n@keyframes loadingCounterKeyFrames {\n  from {\n    opacity: 1;\n  }\n\n  to {\n    opacity: 0.2;\n  }\n}\n"]}

package/dist/internal/components/UnderlineTabbedInterface.d.ts

@@ -15,7 +15,6 @@ export declare const LoadingCounter: () => React.JSX.Element;
 export type UnderlineItemProps<As extends React.ElementType> = {
     as?: As | 'a' | 'button';
     className?: string;
-    iconsVisible?: boolean;
     loadingCounters?: boolean;
     counter?: number | string;
     icon?: FC<IconProps> | React.ReactElement<any>;

package/dist/internal/components/UnderlineTabbedInterface.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UnderlineTabbedInterface.d.ts","sourceRoot":"","sources":["../../../src/internal/components/UnderlineTabbedInterface.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAgC,KAAK,EAAE,EAA0B,KAAK,WAAW,EAAC,MAAM,OAAO,CAAA;AAEtG,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,wBAAwB,CAAA;AAErD,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,yBAAyB,CAAA;AAMlG,eAAO,MAAM,GAAG,IAAI,CAAA;AAgBpB,KAAK,qBAAqB,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,IAAI;IACzD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,EAAE,CAAC,EAAE,EAAE,CAAA;IACP,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAA;CAC7B,CAAA;AAED,eAAO,MAAM,gBAAgB,EAWvB,8BAA8B,CAAC,WAAW,EAAE,qBAAqB,CAAC,WAAW,CAAC,CAAC,CAAA;AAErF,eAAO,MAAM,iBAAiB,EAMxB,8BAA8B,CAAC,IAAI,CAAC,CAAA;AAE1C,eAAO,MAAM,cAAc,yBAE1B,CAAA;AAED,MAAM,MAAM,kBAAkB,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,IAAI;IAC7D,EAAE,CAAC,EAAE,EAAE,GAAG,GAAG,GAAG,QAAQ,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAEzB,IAAI,CAAC,EAAE,EAAE,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAA;IAC9C,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;CACzB,GAAG,KAAK,CAAC,wBAAwB,CAAC,EAAE,SAAS,GAAG,GAAG,GAAG,GAAG,EAAE,SAAS,QAAQ,GAAG,QAAQ,GAAG,EAAE,CAAC,CAAA;AAE9F,eAAO,MAAM,aAAa,EAwBpB,8BAA8B,CAAC,WAAW,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAC,CAAA"}
+{"version":3,"file":"UnderlineTabbedInterface.d.ts","sourceRoot":"","sources":["../../../src/internal/components/UnderlineTabbedInterface.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAgC,KAAK,EAAE,EAAE,KAAK,WAAW,EAAC,MAAM,OAAO,CAAA;AAE9E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,wBAAwB,CAAA;AAErD,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,yBAAyB,CAAA;AAMlG,eAAO,MAAM,GAAG,IAAI,CAAA;AAgBpB,KAAK,qBAAqB,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,IAAI;IACzD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,EAAE,CAAC,EAAE,EAAE,CAAA;IACP,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAA;CAC7B,CAAA;AAED,eAAO,MAAM,gBAAgB,EAYvB,8BAA8B,CAAC,WAAW,EAAE,qBAAqB,CAAC,WAAW,CAAC,CAAC,CAAA;AAErF,eAAO,MAAM,iBAAiB,EAMxB,8BAA8B,CAAC,IAAI,CAAC,CAAA;AAE1C,eAAO,MAAM,cAAc,yBAE1B,CAAA;AAED,MAAM,MAAM,kBAAkB,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,IAAI;IAC7D,EAAE,CAAC,EAAE,EAAE,GAAG,GAAG,GAAG,QAAQ,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAEzB,IAAI,CAAC,EAAE,EAAE,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAA;IAC9C,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;CACzB,GAAG,KAAK,CAAC,wBAAwB,CAAC,EAAE,SAAS,GAAG,GAAG,GAAG,GAAG,EAAE,SAAS,QAAQ,GAAG,QAAQ,GAAG,EAAE,CAAC,CAAA;AAE9F,eAAO,MAAM,aAAa,EAwBpB,8BAA8B,CAAC,WAAW,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAC,CAAA"}

package/dist/internal/components/UnderlineTabbedInterface.js

@@ -6,8 +6,6 @@ import { clsx } from 'clsx';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import CounterLabel from '../../CounterLabel/CounterLabel.js';
 
-const GAP = 8;
-
 // Helper to extract direct text content from children for the data-content attribute.
 // This is used by CSS to reserve space for bold text (preventing layout shift).
 // Only extracts strings/numbers, not text from nested React elements (e.g., Popovers).
@@ -75,37 +73,50 @@ const UnderlineWrapper = /*#__PURE__*/forwardRef((props, ref) => {
   return t3;
 });
 const UnderlineItemList = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
-  const $ = c(7);
+  const $ = c(11);
   let children;
+  let className;
   let rest;
   if ($[0] !== t0) {
     ({
       children,
+      className,
       ...rest
     } = t0);
     $[0] = t0;
     $[1] = children;
-    $[2] = rest;
+    $[2] = className;
+    $[3] = rest;
   } else {
     children = $[1];
-    rest = $[2];
+    className = $[2];
+    rest = $[3];
   }
   let t1;
-  if ($[3] !== children || $[4] !== forwardedRef || $[5] !== rest) {
-    t1 = /*#__PURE__*/jsx("ul", {
-      className: classes.UnderlineItemList,
+  if ($[4] !== className) {
+    t1 = clsx(className, classes.UnderlineItemList);
+    $[4] = className;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  let t2;
+  if ($[6] !== children || $[7] !== forwardedRef || $[8] !== rest || $[9] !== t1) {
+    t2 = /*#__PURE__*/jsx("ul", {
+      className: t1,
       ref: forwardedRef,
       ...rest,
       children: children
     });
-    $[3] = children;
-    $[4] = forwardedRef;
-    $[5] = rest;
-    $[6] = t1;
+    $[6] = children;
+    $[7] = forwardedRef;
+    $[8] = rest;
+    $[9] = t1;
+    $[10] = t2;
   } else {
-    t1 = $[6];
+    t2 = $[10];
   }
-  return t1;
+  return t2;
 });
 const LoadingCounter = () => {
   const $ = c(1);
@@ -121,12 +132,11 @@ const LoadingCounter = () => {
   return t0;
 };
 const UnderlineItem = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const $ = c(30);
+  const $ = c(28);
   let Icon;
   let children;
   let className;
   let counter;
-  let iconsVisible;
   let loadingCounters;
   let rest;
   let t0;
@@ -136,7 +146,6 @@ const UnderlineItem = /*#__PURE__*/React.forwardRef((props, ref) => {
       children,
       counter,
       icon: Icon,
-      iconsVisible,
       loadingCounters,
       className,
       ...rest
@@ -146,65 +155,62 @@ const UnderlineItem = /*#__PURE__*/React.forwardRef((props, ref) => {
     $[2] = children;
     $[3] = className;
     $[4] = counter;
-    $[5] = iconsVisible;
-    $[6] = loadingCounters;
-    $[7] = rest;
-    $[8] = t0;
+    $[5] = loadingCounters;
+    $[6] = rest;
+    $[7] = t0;
   } else {
     Icon = $[1];
     children = $[2];
     className = $[3];
     counter = $[4];
-    iconsVisible = $[5];
-    loadingCounters = $[6];
-    rest = $[7];
-    t0 = $[8];
+    loadingCounters = $[5];
+    rest = $[6];
+    t0 = $[7];
   }
   const Component = t0 === undefined ? "a" : t0;
   let t1;
-  if ($[9] !== children) {
+  if ($[8] !== children) {
     t1 = getTextContent(children);
-    $[9] = children;
-    $[10] = t1;
+    $[8] = children;
+    $[9] = t1;
   } else {
-    t1 = $[10];
+    t1 = $[9];
   }
   const textContent = t1;
   let t2;
-  if ($[11] !== className) {
+  if ($[10] !== className) {
     t2 = clsx(classes.UnderlineItem, className);
-    $[11] = className;
-    $[12] = t2;
+    $[10] = className;
+    $[11] = t2;
   } else {
-    t2 = $[12];
+    t2 = $[11];
   }
   let t3;
-  if ($[13] !== Icon || $[14] !== iconsVisible) {
-    t3 = iconsVisible && Icon && /*#__PURE__*/jsx("span", {
+  if ($[12] !== Icon) {
+    t3 = Icon && /*#__PURE__*/jsx("span", {
       "data-component": "icon",
       children: isElement(Icon) ? Icon : /*#__PURE__*/jsx(Icon, {})
     });
-    $[13] = Icon;
-    $[14] = iconsVisible;
-    $[15] = t3;
+    $[12] = Icon;
+    $[13] = t3;
   } else {
-    t3 = $[15];
+    t3 = $[13];
   }
   let t4;
-  if ($[16] !== children || $[17] !== textContent) {
+  if ($[14] !== children || $[15] !== textContent) {
     t4 = children && /*#__PURE__*/jsx("span", {
       "data-component": "text",
       "data-content": textContent || undefined,
       children: children
     });
-    $[16] = children;
-    $[17] = textContent;
-    $[18] = t4;
+    $[14] = children;
+    $[15] = textContent;
+    $[16] = t4;
   } else {
-    t4 = $[18];
+    t4 = $[16];
   }
   let t5;
-  if ($[19] !== counter || $[20] !== loadingCounters) {
+  if ($[17] !== counter || $[18] !== loadingCounters) {
     t5 = counter !== undefined ? loadingCounters ? /*#__PURE__*/jsx("span", {
       "data-component": "counter",
       children: /*#__PURE__*/jsx(LoadingCounter, {})
@@ -214,32 +220,32 @@ const UnderlineItem = /*#__PURE__*/React.forwardRef((props, ref) => {
         children: counter
       })
     }) : null;
-    $[19] = counter;
-    $[20] = loadingCounters;
-    $[21] = t5;
+    $[17] = counter;
+    $[18] = loadingCounters;
+    $[19] = t5;
   } else {
-    t5 = $[21];
+    t5 = $[19];
   }
   let t6;
-  if ($[22] !== Component || $[23] !== ref || $[24] !== rest || $[25] !== t2 || $[26] !== t3 || $[27] !== t4 || $[28] !== t5) {
+  if ($[20] !== Component || $[21] !== ref || $[22] !== rest || $[23] !== t2 || $[24] !== t3 || $[25] !== t4 || $[26] !== t5) {
     t6 = /*#__PURE__*/jsxs(Component, {
       ...rest,
       ref: ref,
       className: t2,
       children: [t3, t4, t5]
     });
-    $[22] = Component;
-    $[23] = ref;
-    $[24] = rest;
-    $[25] = t2;
-    $[26] = t3;
-    $[27] = t4;
-    $[28] = t5;
-    $[29] = t6;
+    $[20] = Component;
+    $[21] = ref;
+    $[22] = rest;
+    $[23] = t2;
+    $[24] = t3;
+    $[25] = t4;
+    $[26] = t5;
+    $[27] = t6;
   } else {
-    t6 = $[29];
+    t6 = $[27];
   }
   return t6;
 });
 
-export { GAP, LoadingCounter, UnderlineItem, UnderlineItemList, UnderlineWrapper };
+export { LoadingCounter, UnderlineItem, UnderlineItemList, UnderlineWrapper };

package/dist/internal/components/UnderlineTabbedInterface.module.css.js

@@ -1,4 +1,4 @@
-import './UnderlineTabbedInterface-4197ee28.css';
+import './UnderlineTabbedInterface-1745a3d6.css';
 
 var classes = {"UnderlineWrapper":"prc-components-UnderlineWrapper-eT-Yj","UnderlineItemList":"prc-components-UnderlineItemList-xKlKC","UnderlineItem":"prc-components-UnderlineItem-7fP-n","LoadingCounter":"prc-components-LoadingCounter-dBuLy","loadingCounterKeyFrames":"prc-components-loadingCounterKeyFrames-8tMlf"};