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

package/dist/deprecated/UnderlineNav/UnderlineNav.js

@@ -0,0 +1,124 @@
+import { c } from 'react-compiler-runtime';
+import { clsx } from 'clsx';
+import styled from 'styled-components';
+import { get } from '../../constants.js';
+import getGlobalFocusStyles from '../../internal/utils/getGlobalFocusStyles.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const ITEM_CLASS = 'PRC-UnderlineNav-item';
+const SELECTED_CLASS = 'PRC-selected';
+const UnderlineNavBase = styled.nav.withConfig({
+  displayName: "UnderlineNav__UnderlineNavBase",
+  componentId: "sc-11ejk33-0"
+})(["display:flex;justify-content:space-between;border-bottom:1px solid ", ";&.PRC-UnderlineNav--right{justify-content:flex-end;.PRC-UnderlineNav-item{margin-right:0;margin-left:", ";}.PRC-UnderlineNav-actions{flex:1 1 auto;}}&.PRC-UnderlineNav--full{display:block;}.PRC-UnderlineNav-body{display:flex;margin-bottom:-1px;}.PRC-UnderlineNav-actions{align-self:center;}"], get('colors.border.muted'), get('space.3'));
+function UnderlineNav(t0) {
+  const $ = c(24);
+  let actions;
+  let align;
+  let children;
+  let className;
+  let full;
+  let label;
+  let rest;
+  let theme;
+  if ($[0] !== t0) {
+    ({
+      actions,
+      className,
+      align,
+      children,
+      full,
+      label,
+      theme,
+      ...rest
+    } = t0);
+    $[0] = t0;
+    $[1] = actions;
+    $[2] = align;
+    $[3] = children;
+    $[4] = className;
+    $[5] = full;
+    $[6] = label;
+    $[7] = rest;
+    $[8] = theme;
+  } else {
+    actions = $[1];
+    align = $[2];
+    children = $[3];
+    className = $[4];
+    full = $[5];
+    label = $[6];
+    rest = $[7];
+    theme = $[8];
+  }
+  const t1 = align && `PRC-UnderlineNav--${align}`;
+  const t2 = full && "PRC-UnderlineNav--full";
+  let t3;
+  if ($[9] !== className || $[10] !== t1 || $[11] !== t2) {
+    t3 = clsx(className, "PRC-UnderlineNav", t1, t2);
+    $[9] = className;
+    $[10] = t1;
+    $[11] = t2;
+    $[12] = t3;
+  } else {
+    t3 = $[12];
+  }
+  const classes = t3;
+  let t4;
+  if ($[13] !== children) {
+    t4 = /*#__PURE__*/jsx("div", {
+      className: "PRC-UnderlineNav-body",
+      children: children
+    });
+    $[13] = children;
+    $[14] = t4;
+  } else {
+    t4 = $[14];
+  }
+  let t5;
+  if ($[15] !== actions) {
+    t5 = actions && /*#__PURE__*/jsx("div", {
+      className: "PRC-UnderlineNav-actions",
+      children: actions
+    });
+    $[15] = actions;
+    $[16] = t5;
+  } else {
+    t5 = $[16];
+  }
+  let t6;
+  if ($[17] !== classes || $[18] !== label || $[19] !== rest || $[20] !== t4 || $[21] !== t5 || $[22] !== theme) {
+    t6 = /*#__PURE__*/jsxs(UnderlineNavBase, {
+      className: classes,
+      "aria-label": label,
+      theme: theme,
+      ...rest,
+      children: [t4, t5]
+    });
+    $[17] = classes;
+    $[18] = label;
+    $[19] = rest;
+    $[20] = t4;
+    $[21] = t5;
+    $[22] = theme;
+    $[23] = t6;
+  } else {
+    t6 = $[23];
+  }
+  return t6;
+}
+const UnderlineNavLink = styled.a.attrs(props => ({
+  className: clsx(ITEM_CLASS, props.selected && SELECTED_CLASS, props.className)
+})).withConfig({
+  displayName: "UnderlineNav__UnderlineNavLink",
+  componentId: "sc-11ejk33-1"
+})(["padding:", " ", ";margin-right:", ";font-size:", ";line-height:", ";color:", ";text-align:center;border-bottom:2px solid transparent;text-decoration:none;&:hover,&:focus{color:", ";text-decoration:none;border-bottom-color:", ";transition:border-bottom-color 0.2s ease;.PRC-UnderlineNav-octicon{color:", ";}}&.PRC-selected{color:", ";border-bottom-color:", ";.PRC-UnderlineNav-octicon{color:", ";}}", ";"], get('space.3'), get('space.2'), get('space.3'), get('fontSizes.1'), get('lineHeights.default'), get('colors.fg.default'), get('colors.fg.default'), get('colors.neutral.muted'), get('colors.fg.muted'), get('colors.fg.default'), get('colors.primer.border.active'), get('colors.fg.default'), getGlobalFocusStyles('-8px'));
+UnderlineNavLink.displayName = 'UnderlineNav.Link';
+/**
+ * @deprecated UnderlineNav is deprecated and will be replaced by the draft `UnderlineNav` in the next major release. See https://primer.style/react/drafts/UnderlineNav2 for more details.
+ */
+var UnderlineNav$1 = Object.assign(UnderlineNav, {
+  Link: UnderlineNavLink
+});
+
+export { UnderlineNav$1 as default };

package/dist/deprecated/index.d.ts

@@ -0,0 +1,28 @@
+/** This is the place where we keep components that are deprecated.
+ *  We don't recommend using it in production.
+ *  If you already use them, please move to the suggested alternative components
+ *
+ *  But, they are published on npm and you can import them.
+ *  example: import {FormGroup} from '@primer/react/deprecated
+ */
+export { ActionList } from './ActionList';
+export type { ActionListProps, ItemProps as ActionListItemProps, GroupProps as ActionListGroupProps, GroupedListProps as ActionListGroupedListProps, ItemInput as ActionListItemInput, } from './ActionList';
+export { ActionMenu } from './ActionMenu';
+export type { ActionMenuProps } from './ActionMenu';
+export { default as FilteredSearch } from './FilteredSearch';
+export type { FilteredSearchProps } from './FilteredSearch';
+export { default as UnderlineNav } from './UnderlineNav';
+export type { UnderlineNavProps, UnderlineNavLinkProps } from './UnderlineNav';
+export { Dialog } from '../DialogV1';
+export type { DialogProps, DialogHeaderProps } from '../DialogV1';
+export { default as Octicon } from '../Octicon';
+export type { OcticonProps } from '../Octicon';
+export { default as Pagehead } from '../Pagehead';
+export type { PageheadProps } from '../Pagehead';
+export { default as TabNav } from '../TabNav';
+export type { TabNavProps, TabNavLinkProps } from '../TabNav';
+export { default as Tooltip } from '../Tooltip/Tooltip';
+export type { TooltipProps } from '../Tooltip/Tooltip';
+export { default as PointerBox } from '../PointerBox';
+export type { PointerBoxProps } from '../PointerBox';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/deprecated/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAMH,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAA;AACvC,YAAY,EACV,eAAe,EACf,SAAS,IAAI,mBAAmB,EAChC,UAAU,IAAI,oBAAoB,EAClC,gBAAgB,IAAI,0BAA0B,EAC9C,SAAS,IAAI,mBAAmB,GACjC,MAAM,cAAc,CAAA;AACrB,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAA;AACvC,YAAY,EAAC,eAAe,EAAC,MAAM,cAAc,CAAA;AAKjD,OAAO,EAAC,OAAO,IAAI,cAAc,EAAC,MAAM,kBAAkB,CAAA;AAC1D,YAAY,EAAC,mBAAmB,EAAC,MAAM,kBAAkB,CAAA;AACzD,OAAO,EAAC,OAAO,IAAI,YAAY,EAAC,MAAM,gBAAgB,CAAA;AACtD,YAAY,EAAC,iBAAiB,EAAE,qBAAqB,EAAC,MAAM,gBAAgB,CAAA;AAI5E,OAAO,EAAC,MAAM,EAAC,MAAM,aAAa,CAAA;AAClC,YAAY,EAAC,WAAW,EAAE,iBAAiB,EAAC,MAAM,aAAa,CAAA;AAC/D,OAAO,EAAC,OAAO,IAAI,OAAO,EAAC,MAAM,YAAY,CAAA;AAC7C,YAAY,EAAC,YAAY,EAAC,MAAM,YAAY,CAAA;AAC5C,OAAO,EAAC,OAAO,IAAI,QAAQ,EAAC,MAAM,aAAa,CAAA;AAC/C,YAAY,EAAC,aAAa,EAAC,MAAM,aAAa,CAAA;AAC9C,OAAO,EAAC,OAAO,IAAI,MAAM,EAAC,MAAM,WAAW,CAAA;AAC3C,YAAY,EAAC,WAAW,EAAE,eAAe,EAAC,MAAM,WAAW,CAAA;AAC3D,OAAO,EAAC,OAAO,IAAI,OAAO,EAAC,MAAM,oBAAoB,CAAA;AACrD,YAAY,EAAC,YAAY,EAAC,MAAM,oBAAoB,CAAA;AAIpD,OAAO,EAAC,OAAO,IAAI,UAAU,EAAC,MAAM,eAAe,CAAA;AACnD,YAAY,EAAC,eAAe,EAAC,MAAM,eAAe,CAAA"}

package/dist/deprecated/index.js

@@ -0,0 +1,11 @@
+"use client";
+export { ActionList } from './ActionList/index.js';
+export { ActionMenu } from './ActionMenu.js';
+export { default as Tooltip } from '../Tooltip/Tooltip.js';
+export { default as FilteredSearch } from './FilteredSearch/FilteredSearch.js';
+export { default as Octicon } from '../Octicon/Octicon.js';
+export { default as Pagehead } from '../Pagehead/Pagehead.js';
+export { default as PointerBox } from '../PointerBox/PointerBox.js';
+export { default as UnderlineNav } from './UnderlineNav/UnderlineNav.js';
+export { default as Dialog } from '../DialogV1/Dialog.js';
+export { default as TabNav } from '../TabNav/TabNav.js';

package/dist/experimental/IssueLabel/IssueLabel-6581d1bd.css

@@ -0,0 +1,2 @@
+@layer primer.components.IssueLabel{.prc-IssueLabel-IssueLabel-WJ5y-{align-items:center;background-color:var(--label-bgColor-rest);border:0;border-radius:var(--borderRadius-full,624.9375rem);box-shadow:var(--boxShadow-thin,inset 0 0 0 .0625rem) transparent;color:var(--label-fgColor);display:inline-flex;font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-semibold,600);line-height:var(--text-body-lineHeight-small,1.6666);min-height:var(--base-size-20,1.25rem);padding-block:0;padding-inline:var(--base-size-8,.5rem);white-space:nowrap}.prc-IssueLabel-IssueLabel-WJ5y-:where(button,a){-webkit-text-decoration:none;text-decoration:none}.prc-IssueLabel-IssueLabel-WJ5y-:where(button,a):hover{background-color:var(--label-bgColor-hover);color:var(--label-fgColor-hover);cursor:pointer}.prc-IssueLabel-IssueLabel-WJ5y-:where(button,a):active{background-color:var(--label-bgColor-active);color:var(--label-fgColor-active)}.prc-IssueLabel-IssueLabel-WJ5y-:where(button,a):focus-visible{box-shadow:none;outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:2px}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=pink]{--label-bgColor-rest:var(--label-pink-bgColor-rest,#ffe5f1);--label-bgColor-hover:var(--label-pink-bgColor-hover,#fdc9e2);--label-bgColor-active:var(--label-pink-bgColor-active,#f8a5cf);--label-fgColor:var(--label-pink-fgColor-rest,#b12f79);--label-fgColor-hover:var(--label-pink-fgColor-hover,#8e2e66);--label-fgColor-active:var(--label-pink-fgColor-active,#6e2b53)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=plum]{--label-bgColor-rest:var(--label-plum-bgColor-rest,#f8e5ff);--label-bgColor-hover:var(--label-plum-bgColor-hover,#f0cdfe);--label-bgColor-active:var(--label-plum-bgColor-active,#e2a7fb);--label-fgColor:var(--label-plum-fgColor-rest,#961edc);--label-fgColor-hover:var(--label-plum-fgColor-hover,#7d1eb8);--label-fgColor-active:var(--label-plum-fgColor-active,#651d96)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=purple]{--label-bgColor-rest:var(--label-purple-bgColor-rest,#f1e5ff);--label-bgColor-hover:var(--label-purple-bgColor-hover,#e6d2fe);--label-bgColor-active:var(--label-purple-bgColor-active,#d1b1fc);--label-fgColor:var(--label-purple-fgColor-rest,#783ae4);--label-fgColor-hover:var(--label-purple-fgColor-hover,#6223d7);--label-fgColor-active:var(--label-purple-fgColor-active,#4f21ab)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=indigo]{--label-bgColor-rest:var(--label-indigo-bgColor-rest,#e5e9ff);--label-bgColor-hover:var(--label-indigo-bgColor-hover,#d2d7fe);--label-bgColor-active:var(--label-indigo-bgColor-active,#b1b9fb);--label-fgColor:var(--label-indigo-fgColor-rest,#494edf);--label-fgColor-hover:var(--label-indigo-fgColor-hover,#393cd5);--label-fgColor-active:var(--label-indigo-fgColor-active,#2d2db4)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=blue]{--label-bgColor-rest:var(--label-blue-bgColor-rest,#d1f0ff);--label-bgColor-hover:var(--label-blue-bgColor-hover,#ade1ff);--label-bgColor-active:var(--label-blue-bgColor-active,#75c8ff);--label-fgColor:var(--label-blue-fgColor-rest,#005fcc);--label-fgColor-hover:var(--label-blue-fgColor-hover,#004db3);--label-fgColor-active:var(--label-blue-fgColor-active,#003d99)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=cyan]{--label-bgColor-rest:var(--label-cyan-bgColor-rest,#bdf4ff);--label-bgColor-hover:var(--label-cyan-bgColor-hover,#7ae9ff);--label-bgColor-active:var(--label-cyan-bgColor-active,#00d0fa);--label-fgColor:var(--label-cyan-fgColor-rest,#006a80);--label-fgColor-hover:var(--label-cyan-fgColor-hover,#00596b);--label-fgColor-active:var(--label-cyan-fgColor-active,#004857)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=teal]{--label-bgColor-rest:var(--label-teal-bgColor-rest,#c7f5ef);--label-bgColor-hover:var(--label-teal-bgColor-hover,#89ebe1);--label-bgColor-active:var(--label-teal-bgColor-active,#22d3c7);--label-fgColor:var(--label-teal-fgColor-rest,#106e75);--label-fgColor-hover:var(--label-teal-fgColor-hover,#0d5b63);--label-fgColor-active:var(--label-teal-fgColor-active,#0a4852)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=pine]{--label-bgColor-rest:var(--label-pine-bgColor-rest,#bff8db);--label-bgColor-hover:var(--label-pine-bgColor-hover,#80efb9);--label-bgColor-active:var(--label-pine-bgColor-active,#1dd781);--label-fgColor:var(--label-pine-fgColor-rest,#156f4b);--label-fgColor-hover:var(--label-pine-fgColor-hover,#135d41);--label-fgColor-active:var(--label-pine-fgColor-active,#114b36)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=green]{--label-bgColor-rest:var(--label-green-bgColor-rest,#caf7ca);--label-bgColor-hover:var(--label-green-bgColor-hover,#9ceda0);--label-bgColor-active:var(--label-green-bgColor-active,#54d961);--label-fgColor:var(--label-green-fgColor-rest,#2b6e3f);--label-fgColor-hover:var(--label-green-fgColor-hover,#285c3b);--label-fgColor-active:var(--label-green-fgColor-active,#254b34)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=lime]{--label-bgColor-rest:var(--label-lime-bgColor-rest,#e3f2b5);--label-bgColor-hover:var(--label-lime-bgColor-hover,#c7e580);--label-bgColor-active:var(--label-lime-bgColor-active,#9bd039);--label-fgColor:var(--label-lime-fgColor-rest,#476c28);--label-fgColor-hover:var(--label-lime-fgColor-hover,#3a5b25);--label-fgColor-active:var(--label-lime-fgColor-active,#2f4a21)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=olive]{--label-bgColor-rest:var(--label-olive-bgColor-rest,#f0f0ad);--label-bgColor-hover:var(--label-olive-bgColor-hover,#dbe170);--label-bgColor-active:var(--label-olive-bgColor-active,#b9c832);--label-fgColor:var(--label-olive-fgColor-rest,#56682c);--label-fgColor-hover:var(--label-olive-fgColor-hover,#495a2b);--label-fgColor-active:var(--label-olive-fgColor-active,#3b4927)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=lemon]{--label-bgColor-rest:var(--label-lemon-bgColor-rest,#f7eea1);--label-bgColor-hover:var(--label-lemon-bgColor-hover,#f0db3d);--label-bgColor-active:var(--label-lemon-bgColor-active,#d8bd0e);--label-fgColor:var(--label-lemon-fgColor-rest,#786002);--label-fgColor-hover:var(--label-lemon-fgColor-hover,#654f01);--label-fgColor-active:var(--label-lemon-fgColor-active,#523f00)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=yellow]{--label-bgColor-rest:var(--label-yellow-bgColor-rest,#ffec9e);--label-bgColor-hover:var(--label-yellow-bgColor-hover,#ffd642);--label-bgColor-active:var(--label-yellow-bgColor-active,#ebb400);--label-fgColor:var(--label-yellow-fgColor-rest,#805900);--label-fgColor-hover:var(--label-yellow-fgColor-hover,#704d00);--label-fgColor-active:var(--label-yellow-fgColor-active,#5c3d00)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=orange]{--label-bgColor-rest:var(--label-orange-bgColor-rest,#ffe7d1);--label-bgColor-hover:var(--label-orange-bgColor-hover,#fecfaa);--label-bgColor-active:var(--label-orange-bgColor-active,#fbaf74);--label-fgColor:var(--label-orange-fgColor-rest,#a24610);--label-fgColor-hover:var(--label-orange-fgColor-hover,#8d3c11);--label-fgColor-active:var(--label-orange-fgColor-active,#70300f)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=red]{--label-bgColor-rest:var(--label-red-bgColor-rest,#ffe2e0);--label-bgColor-hover:var(--label-red-bgColor-hover,#fecdcd);--label-bgColor-active:var(--label-red-bgColor-active,#fda5a7);--label-fgColor:var(--label-red-fgColor-rest,#c50d28);--label-fgColor-hover:var(--label-red-fgColor-hover,#a60c29);--label-fgColor-active:var(--label-red-fgColor-active,#880c27)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=coral]{--label-bgColor-rest:var(--label-coral-bgColor-rest,#ffe5db);--label-bgColor-hover:var(--label-coral-bgColor-hover,#fecebe);--label-bgColor-active:var(--label-coral-bgColor-active,#fcab92);--label-fgColor:var(--label-coral-fgColor-rest,#ba2e12);--label-fgColor-hover:var(--label-coral-fgColor-hover,#9b2712);--label-fgColor-active:var(--label-coral-fgColor-active,#7e2011)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=gray]{--label-bgColor-rest:var(--label-gray-bgColor-rest,#e8ecf2);--label-bgColor-hover:var(--label-gray-bgColor-hover,#d2dae4);--label-bgColor-active:var(--label-gray-bgColor-active,#b4c0cf);--label-fgColor:var(--label-gray-fgColor-rest,#5c6570);--label-fgColor-hover:var(--label-gray-fgColor-hover,#4e535a);--label-fgColor-active:var(--label-gray-fgColor-active,#424448)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=brown]{--label-bgColor-rest:var(--label-brown-bgColor-rest,#eeeae2);--label-bgColor-hover:var(--label-brown-bgColor-hover,#dfd7c8);--label-bgColor-active:var(--label-brown-bgColor-active,#cbbda4);--label-fgColor:var(--label-brown-fgColor-rest,#755f43);--label-fgColor-hover:var(--label-brown-fgColor-hover,#64513a);--label-fgColor-active:var(--label-brown-fgColor-active,#51412f)}.prc-IssueLabel-IssueLabel-WJ5y-[data-variant=auburn]{--label-bgColor-rest:var(--label-auburn-bgColor-rest,#f2e9e9);--label-bgColor-hover:var(--label-auburn-bgColor-hover,#e6d6d5);--label-bgColor-active:var(--label-auburn-bgColor-active,#d4b7b5);--label-fgColor:var(--label-auburn-fgColor-rest,#8a5551);--label-fgColor-hover:var(--label-auburn-fgColor-hover,#744744);--label-fgColor-active:var(--label-auburn-fgColor-active,#5d3937)}}
+/*# sourceMappingURL=IssueLabel-6581d1bd.css.map */

package/dist/experimental/IssueLabel/IssueLabel-6581d1bd.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/experimental/IssueLabel/IssueLabel.module.css","../../../postcss-preset-primer/src/mixins/focusOutline.css"],"names":[],"mappings":"AAAA,oCACE,iCAgBE,kBAAmB,CANnB,0CAA2C,CAC3C,QAAS,CACT,kDAAuC,CAGvC,iEAA6C,CAR7C,0BAA2B,CAN3B,mBAAoB,CAEpB,4CAAsC,CACtC,gDAA6C,CAC7C,oDAA8C,CAH9C,sCAA+B,CAgB/B,eAAgB,CADhB,uCAAkC,CATlC,kBA6MF,CAjME,iDACE,4BAAqB,CAArB,oBAoBF,CAlBE,uDAKE,2CAA4C,CAH5C,gCAAiC,CACjC,cAGF,CAEA,wDAIE,4CAA6C,CAF7C,iCAGF,CAEA,+DCpCJ,eAAgB,CAFhB,kEAAgC,CAChC,kBDuCI,CAGF,oDACE,2DAAoD,CACpD,6DAAsD,CACtD,+DAAwD,CACxD,sDAA+C,CAC/C,6DAAsD,CACtD,+DACF,CAEA,oDACE,2DAAoD,CACpD,6DAAsD,CACtD,+DAAwD,CACxD,sDAA+C,CAC/C,6DAAsD,CACtD,+DACF,CAEA,sDACE,6DAAsD,CACtD,+DAAwD,CACxD,iEAA0D,CAC1D,wDAAiD,CACjD,+DAAwD,CACxD,iEACF,CAEA,sDACE,6DAAsD,CACtD,+DAAwD,CACxD,iEAA0D,CAC1D,wDAAiD,CACjD,+DAAwD,CACxD,iEACF,CAEA,oDACE,2DAAoD,CACpD,6DAAsD,CACtD,+DAAwD,CACxD,sDAA+C,CAC/C,6DAAsD,CACtD,+DACF,CAEA,oDACE,2DAAoD,CACpD,6DAAsD,CACtD,+DAAwD,CACxD,sDAA+C,CAC/C,6DAAsD,CACtD,+DACF,CAEA,oDACE,2DAAoD,CACpD,6DAAsD,CACtD,+DAAwD,CACxD,sDAA+C,CAC/C,6DAAsD,CACtD,+DACF,CAEA,oDACE,2DAAoD,CACpD,6DAAsD,CACtD,+DAAwD,CACxD,sDAA+C,CAC/C,6DAAsD,CACtD,+DACF,CAEA,qDACE,4DAAqD,CACrD,8DAAuD,CACvD,gEAAyD,CACzD,uDAAgD,CAChD,8DAAuD,CACvD,gEACF,CAEA,oDACE,2DAAoD,CACpD,6DAAsD,CACtD,+DAAwD,CACxD,sDAA+C,CAC/C,6DAAsD,CACtD,+DACF,CAEA,qDACE,4DAAqD,CACrD,8DAAuD,CACvD,gEAAyD,CACzD,uDAAgD,CAChD,8DAAuD,CACvD,gEACF,CAEA,qDACE,4DAAqD,CACrD,8DAAuD,CACvD,gEAAyD,CACzD,uDAAgD,CAChD,8DAAuD,CACvD,gEACF,CAEA,sDACE,6DAAsD,CACtD,+DAAwD,CACxD,iEAA0D,CAC1D,wDAAiD,CACjD,+DAAwD,CACxD,iEACF,CAEA,sDACE,6DAAsD,CACtD,+DAAwD,CACxD,iEAA0D,CAC1D,wDAAiD,CACjD,+DAAwD,CACxD,iEACF,CAEA,mDACE,0DAAmD,CACnD,4DAAqD,CACrD,8DAAuD,CACvD,qDAA8C,CAC9C,4DAAqD,CACrD,8DACF,CAEA,qDACE,4DAAqD,CACrD,8DAAuD,CACvD,gEAAyD,CACzD,uDAAgD,CAChD,8DAAuD,CACvD,gEACF,CAEA,oDACE,2DAAoD,CACpD,6DAAsD,CACtD,+DAAwD,CACxD,sDAA+C,CAC/C,6DAAsD,CACtD,+DACF,CAEA,qDACE,4DAAqD,CACrD,8DAAuD,CACvD,gEAAyD,CACzD,uDAAgD,CAChD,8DAAuD,CACvD,gEACF,CAEA,sDACE,6DAAsD,CACtD,+DAAwD,CACxD,iEAA0D,CAC1D,wDAAiD,CACjD,+DAAwD,CACxD,iEACF,CAEJ","file":"IssueLabel-6581d1bd.css","sourcesContent":["@layer primer.components.IssueLabel {\n  .IssueLabel {\n    display: inline-flex;\n    min-height: var(--base-size-20);\n    font-size: var(--text-body-size-small);\n    font-weight: var(--base-text-weight-semibold);\n    line-height: var(--text-body-lineHeight-small);\n    /* stylelint-disable-next-line primer/colors */\n    color: var(--label-fgColor);\n    white-space: nowrap;\n    /* stylelint-disable-next-line primer/colors */\n    background-color: var(--label-bgColor-rest);\n    border: 0;\n    border-radius: var(--borderRadius-full);\n\n    /* use color var for box-shadow (border) in future for high contrast themes */\n    box-shadow: var(--boxShadow-thin) transparent;\n    align-items: center;\n    padding-inline: var(--base-size-8);\n    padding-block: 0;\n\n    &:where(button, a) {\n      text-decoration: none;\n\n      &:hover {\n        /* stylelint-disable-next-line primer/colors */\n        color: var(--label-fgColor-hover);\n        cursor: pointer;\n        /* stylelint-disable-next-line primer/colors */\n        background-color: var(--label-bgColor-hover);\n      }\n\n      &:active {\n        /* stylelint-disable-next-line primer/colors */\n        color: var(--label-fgColor-active);\n        /* stylelint-disable-next-line primer/colors */\n        background-color: var(--label-bgColor-active);\n      }\n\n      &:focus-visible {\n        @mixin focusOutline 2px;\n      }\n    }\n\n    &[data-variant='pink'] {\n      --label-bgColor-rest: var(--label-pink-bgColor-rest);\n      --label-bgColor-hover: var(--label-pink-bgColor-hover);\n      --label-bgColor-active: var(--label-pink-bgColor-active);\n      --label-fgColor: var(--label-pink-fgColor-rest);\n      --label-fgColor-hover: var(--label-pink-fgColor-hover);\n      --label-fgColor-active: var(--label-pink-fgColor-active);\n    }\n\n    &[data-variant='plum'] {\n      --label-bgColor-rest: var(--label-plum-bgColor-rest);\n      --label-bgColor-hover: var(--label-plum-bgColor-hover);\n      --label-bgColor-active: var(--label-plum-bgColor-active);\n      --label-fgColor: var(--label-plum-fgColor-rest);\n      --label-fgColor-hover: var(--label-plum-fgColor-hover);\n      --label-fgColor-active: var(--label-plum-fgColor-active);\n    }\n\n    &[data-variant='purple'] {\n      --label-bgColor-rest: var(--label-purple-bgColor-rest);\n      --label-bgColor-hover: var(--label-purple-bgColor-hover);\n      --label-bgColor-active: var(--label-purple-bgColor-active);\n      --label-fgColor: var(--label-purple-fgColor-rest);\n      --label-fgColor-hover: var(--label-purple-fgColor-hover);\n      --label-fgColor-active: var(--label-purple-fgColor-active);\n    }\n\n    &[data-variant='indigo'] {\n      --label-bgColor-rest: var(--label-indigo-bgColor-rest);\n      --label-bgColor-hover: var(--label-indigo-bgColor-hover);\n      --label-bgColor-active: var(--label-indigo-bgColor-active);\n      --label-fgColor: var(--label-indigo-fgColor-rest);\n      --label-fgColor-hover: var(--label-indigo-fgColor-hover);\n      --label-fgColor-active: var(--label-indigo-fgColor-active);\n    }\n\n    &[data-variant='blue'] {\n      --label-bgColor-rest: var(--label-blue-bgColor-rest);\n      --label-bgColor-hover: var(--label-blue-bgColor-hover);\n      --label-bgColor-active: var(--label-blue-bgColor-active);\n      --label-fgColor: var(--label-blue-fgColor-rest);\n      --label-fgColor-hover: var(--label-blue-fgColor-hover);\n      --label-fgColor-active: var(--label-blue-fgColor-active);\n    }\n\n    &[data-variant='cyan'] {\n      --label-bgColor-rest: var(--label-cyan-bgColor-rest);\n      --label-bgColor-hover: var(--label-cyan-bgColor-hover);\n      --label-bgColor-active: var(--label-cyan-bgColor-active);\n      --label-fgColor: var(--label-cyan-fgColor-rest);\n      --label-fgColor-hover: var(--label-cyan-fgColor-hover);\n      --label-fgColor-active: var(--label-cyan-fgColor-active);\n    }\n\n    &[data-variant='teal'] {\n      --label-bgColor-rest: var(--label-teal-bgColor-rest);\n      --label-bgColor-hover: var(--label-teal-bgColor-hover);\n      --label-bgColor-active: var(--label-teal-bgColor-active);\n      --label-fgColor: var(--label-teal-fgColor-rest);\n      --label-fgColor-hover: var(--label-teal-fgColor-hover);\n      --label-fgColor-active: var(--label-teal-fgColor-active);\n    }\n\n    &[data-variant='pine'] {\n      --label-bgColor-rest: var(--label-pine-bgColor-rest);\n      --label-bgColor-hover: var(--label-pine-bgColor-hover);\n      --label-bgColor-active: var(--label-pine-bgColor-active);\n      --label-fgColor: var(--label-pine-fgColor-rest);\n      --label-fgColor-hover: var(--label-pine-fgColor-hover);\n      --label-fgColor-active: var(--label-pine-fgColor-active);\n    }\n\n    &[data-variant='green'] {\n      --label-bgColor-rest: var(--label-green-bgColor-rest);\n      --label-bgColor-hover: var(--label-green-bgColor-hover);\n      --label-bgColor-active: var(--label-green-bgColor-active);\n      --label-fgColor: var(--label-green-fgColor-rest);\n      --label-fgColor-hover: var(--label-green-fgColor-hover);\n      --label-fgColor-active: var(--label-green-fgColor-active);\n    }\n\n    &[data-variant='lime'] {\n      --label-bgColor-rest: var(--label-lime-bgColor-rest);\n      --label-bgColor-hover: var(--label-lime-bgColor-hover);\n      --label-bgColor-active: var(--label-lime-bgColor-active);\n      --label-fgColor: var(--label-lime-fgColor-rest);\n      --label-fgColor-hover: var(--label-lime-fgColor-hover);\n      --label-fgColor-active: var(--label-lime-fgColor-active);\n    }\n\n    &[data-variant='olive'] {\n      --label-bgColor-rest: var(--label-olive-bgColor-rest);\n      --label-bgColor-hover: var(--label-olive-bgColor-hover);\n      --label-bgColor-active: var(--label-olive-bgColor-active);\n      --label-fgColor: var(--label-olive-fgColor-rest);\n      --label-fgColor-hover: var(--label-olive-fgColor-hover);\n      --label-fgColor-active: var(--label-olive-fgColor-active);\n    }\n\n    &[data-variant='lemon'] {\n      --label-bgColor-rest: var(--label-lemon-bgColor-rest);\n      --label-bgColor-hover: var(--label-lemon-bgColor-hover);\n      --label-bgColor-active: var(--label-lemon-bgColor-active);\n      --label-fgColor: var(--label-lemon-fgColor-rest);\n      --label-fgColor-hover: var(--label-lemon-fgColor-hover);\n      --label-fgColor-active: var(--label-lemon-fgColor-active);\n    }\n\n    &[data-variant='yellow'] {\n      --label-bgColor-rest: var(--label-yellow-bgColor-rest);\n      --label-bgColor-hover: var(--label-yellow-bgColor-hover);\n      --label-bgColor-active: var(--label-yellow-bgColor-active);\n      --label-fgColor: var(--label-yellow-fgColor-rest);\n      --label-fgColor-hover: var(--label-yellow-fgColor-hover);\n      --label-fgColor-active: var(--label-yellow-fgColor-active);\n    }\n\n    &[data-variant='orange'] {\n      --label-bgColor-rest: var(--label-orange-bgColor-rest);\n      --label-bgColor-hover: var(--label-orange-bgColor-hover);\n      --label-bgColor-active: var(--label-orange-bgColor-active);\n      --label-fgColor: var(--label-orange-fgColor-rest);\n      --label-fgColor-hover: var(--label-orange-fgColor-hover);\n      --label-fgColor-active: var(--label-orange-fgColor-active);\n    }\n\n    &[data-variant='red'] {\n      --label-bgColor-rest: var(--label-red-bgColor-rest);\n      --label-bgColor-hover: var(--label-red-bgColor-hover);\n      --label-bgColor-active: var(--label-red-bgColor-active);\n      --label-fgColor: var(--label-red-fgColor-rest);\n      --label-fgColor-hover: var(--label-red-fgColor-hover);\n      --label-fgColor-active: var(--label-red-fgColor-active);\n    }\n\n    &[data-variant='coral'] {\n      --label-bgColor-rest: var(--label-coral-bgColor-rest);\n      --label-bgColor-hover: var(--label-coral-bgColor-hover);\n      --label-bgColor-active: var(--label-coral-bgColor-active);\n      --label-fgColor: var(--label-coral-fgColor-rest);\n      --label-fgColor-hover: var(--label-coral-fgColor-hover);\n      --label-fgColor-active: var(--label-coral-fgColor-active);\n    }\n\n    &[data-variant='gray'] {\n      --label-bgColor-rest: var(--label-gray-bgColor-rest);\n      --label-bgColor-hover: var(--label-gray-bgColor-hover);\n      --label-bgColor-active: var(--label-gray-bgColor-active);\n      --label-fgColor: var(--label-gray-fgColor-rest);\n      --label-fgColor-hover: var(--label-gray-fgColor-hover);\n      --label-fgColor-active: var(--label-gray-fgColor-active);\n    }\n\n    &[data-variant='brown'] {\n      --label-bgColor-rest: var(--label-brown-bgColor-rest);\n      --label-bgColor-hover: var(--label-brown-bgColor-hover);\n      --label-bgColor-active: var(--label-brown-bgColor-active);\n      --label-fgColor: var(--label-brown-fgColor-rest);\n      --label-fgColor-hover: var(--label-brown-fgColor-hover);\n      --label-fgColor-active: var(--label-brown-fgColor-active);\n    }\n\n    &[data-variant='auburn'] {\n      --label-bgColor-rest: var(--label-auburn-bgColor-rest);\n      --label-bgColor-hover: var(--label-auburn-bgColor-hover);\n      --label-bgColor-active: var(--label-auburn-bgColor-active);\n      --label-fgColor: var(--label-auburn-fgColor-rest);\n      --label-fgColor-hover: var(--label-auburn-fgColor-hover);\n      --label-fgColor-active: var(--label-auburn-fgColor-active);\n    }\n  }\n}\n","@define-mixin focusOutline $outlineOffset: -2px, $outlineColor: var(--focus-outlineColor) {\n  outline: 2px solid $outlineColor;\n  outline-offset: $outlineOffset;\n  box-shadow: none;\n}\n"]}

package/dist/experimental/IssueLabel/IssueLabel.d.ts

@@ -0,0 +1,32 @@
+import type React from 'react';
+type Hex = `#${string}`;
+type LabelColorVariant = 'auburn' | 'blue' | 'brown' | 'coral' | 'cyan' | 'gray' | 'green' | 'indigo' | 'lemon' | 'lime' | 'olive' | 'orange' | 'pine' | 'pink' | 'plum' | 'purple' | 'red' | 'teal' | 'yellow';
+type BaseProps = {
+    className?: string;
+    fillColor?: Hex;
+    variant?: LabelColorVariant;
+};
+type ButtonProps = React.ComponentPropsWithoutRef<'button'> & BaseProps & {
+    as?: never;
+    onClick: React.MouseEventHandler<HTMLButtonElement>;
+};
+type LinkProps = React.ComponentPropsWithoutRef<'a'> & BaseProps & {
+    as?: never;
+    href: string;
+};
+type SpanProps = Omit<React.ComponentPropsWithoutRef<'span'>, 'onClick'> & BaseProps & {
+    as?: never;
+    onClick?: never;
+    href?: never;
+};
+type IssueLabelAsProps<As extends React.ElementType> = {
+    as: As;
+} & BaseProps & Omit<React.ComponentPropsWithoutRef<As>, keyof BaseProps>;
+type IssueLabelProps<As extends React.ElementType> = SpanProps | LinkProps | ButtonProps | IssueLabelAsProps<As>;
+declare function IssueLabel(props: SpanProps): React.ReactNode;
+declare function IssueLabel(props: LinkProps): React.ReactNode;
+declare function IssueLabel(props: ButtonProps): React.ReactNode;
+declare function IssueLabel<As extends React.ElementType>(props: IssueLabelAsProps<As>): React.ReactNode;
+export { IssueLabel };
+export type { IssueLabelProps, Hex };
+//# sourceMappingURL=IssueLabel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IssueLabel.d.ts","sourceRoot":"","sources":["../../../src/experimental/IssueLabel/IssueLabel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,KAAK,GAAG,GAAG,IAAI,MAAM,EAAE,CAAA;AAEvB,KAAK,iBAAiB,GAClB,QAAQ,GACR,MAAM,GACN,OAAO,GACP,OAAO,GACP,MAAM,GACN,MAAM,GACN,OAAO,GACP,QAAQ,GACR,OAAO,GACP,MAAM,GACN,OAAO,GACP,QAAQ,GACR,MAAM,GACN,MAAM,GACN,MAAM,GACN,QAAQ,GACR,KAAK,GACL,MAAM,GACN,QAAQ,CAAA;AAEZ,KAAK,SAAS,GAAG;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,GAAG,CAAA;IACf,OAAO,CAAC,EAAE,iBAAiB,CAAA;CAC5B,CAAA;AAED,KAAK,WAAW,GAAG,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC,GACzD,SAAS,GAAG;IACV,EAAE,CAAC,EAAE,KAAK,CAAA;IACV,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAA;CACpD,CAAA;AAEH,KAAK,SAAS,GAAG,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,GAClD,SAAS,GAAG;IACV,EAAE,CAAC,EAAE,KAAK,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAEH,KAAK,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC,GACtE,SAAS,GAAG;IACV,EAAE,CAAC,EAAE,KAAK,CAAA;IACV,OAAO,CAAC,EAAE,KAAK,CAAA;IACf,IAAI,CAAC,EAAE,KAAK,CAAA;CACb,CAAA;AAEH,KAAK,iBAAiB,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,IAAI;IACrD,EAAE,EAAE,EAAE,CAAA;CACP,GAAG,SAAS,GACX,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,EAAE,CAAC,EAAE,MAAM,SAAS,CAAC,CAAA;AAE3D,KAAK,eAAe,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,IAAI,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,iBAAiB,CAAC,EAAE,CAAC,CAAA;AAEhH,iBAAS,UAAU,CAAC,KAAK,EAAE,SAAS,GAAG,KAAK,CAAC,SAAS,CAAA;AACtD,iBAAS,UAAU,CAAC,KAAK,EAAE,SAAS,GAAG,KAAK,CAAC,SAAS,CAAA;AACtD,iBAAS,UAAU,CAAC,KAAK,EAAE,WAAW,GAAG,KAAK,CAAC,SAAS,CAAA;AACxD,iBAAS,UAAU,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,EAAE,KAAK,EAAE,iBAAiB,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,SAAS,CAAA;AAsDhG,OAAO,EAAC,UAAU,EAAC,CAAA;AACnB,YAAY,EAAC,eAAe,EAAE,GAAG,EAAC,CAAA"}

package/dist/experimental/IssueLabel/IssueLabel.js

@@ -0,0 +1,178 @@
+import { c } from 'react-compiler-runtime';
+import { clsx } from 'clsx';
+import { useTheme } from '../../ThemeProvider.js';
+import { getColorsFromHex } from './getColorFromHex.js';
+import classes from './IssueLabel.module.css.js';
+import { jsx } from 'react/jsx-runtime';
+
+function IssueLabel(t0) {
+  const $ = c(42);
+  let children;
+  let className;
+  let fillColor;
+  let props;
+  let style;
+  let t1;
+  if ($[0] !== t0) {
+    ({
+      children,
+      className,
+      fillColor,
+      style,
+      variant: t1,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = fillColor;
+    $[4] = props;
+    $[5] = style;
+    $[6] = t1;
+  } else {
+    children = $[1];
+    className = $[2];
+    fillColor = $[3];
+    props = $[4];
+    style = $[5];
+    t1 = $[6];
+  }
+  const variant = t1 === undefined ? "gray" : t1;
+  const {
+    resolvedColorScheme
+  } = useTheme();
+  const mode = resolvedColorScheme !== null && resolvedColorScheme !== void 0 && resolvedColorScheme.startsWith("dark") ? "dark" : "light";
+  let t2;
+  let t3;
+  let t4;
+  if ($[7] !== className || $[8] !== fillColor || $[9] !== mode || $[10] !== resolvedColorScheme || $[11] !== style || $[12] !== variant) {
+    const bgColors = {
+      light: "#ffffff",
+      dark: "#0d1117"
+    };
+    if ($[16] !== className) {
+      t2 = clsx(className, classes.IssueLabel);
+      $[16] = className;
+      $[17] = t2;
+    } else {
+      t2 = $[17];
+    }
+    t3 = fillColor ? undefined : variant;
+    t4 = fillColor ? {
+      ...style,
+      ...getColorsFromHex(fillColor, resolvedColorScheme, bgColors[mode])
+    } : style;
+    $[7] = className;
+    $[8] = fillColor;
+    $[9] = mode;
+    $[10] = resolvedColorScheme;
+    $[11] = style;
+    $[12] = variant;
+    $[13] = t2;
+    $[14] = t3;
+    $[15] = t4;
+  } else {
+    t2 = $[13];
+    t3 = $[14];
+    t4 = $[15];
+  }
+  let t5;
+  if ($[18] !== t2 || $[19] !== t3 || $[20] !== t4) {
+    t5 = {
+      className: t2,
+      "data-variant": t3,
+      style: t4
+    };
+    $[18] = t2;
+    $[19] = t3;
+    $[20] = t4;
+    $[21] = t5;
+  } else {
+    t5 = $[21];
+  }
+  const sharedProps = t5;
+  if ("as" in props && props.as) {
+    let BaseComponent;
+    let rest;
+    if ($[22] !== props) {
+      ({
+        as: BaseComponent,
+        ...rest
+      } = props);
+      $[22] = props;
+      $[23] = BaseComponent;
+      $[24] = rest;
+    } else {
+      BaseComponent = $[23];
+      rest = $[24];
+    }
+    let t6;
+    if ($[25] !== BaseComponent || $[26] !== children || $[27] !== rest || $[28] !== sharedProps) {
+      t6 = /*#__PURE__*/jsx(BaseComponent, {
+        ...rest,
+        ...sharedProps,
+        children: children
+      });
+      $[25] = BaseComponent;
+      $[26] = children;
+      $[27] = rest;
+      $[28] = sharedProps;
+      $[29] = t6;
+    } else {
+      t6 = $[29];
+    }
+    return t6;
+  }
+  if ("href" in props) {
+    let t6;
+    if ($[30] !== children || $[31] !== props || $[32] !== sharedProps) {
+      t6 = /*#__PURE__*/jsx("a", {
+        ...props,
+        ...sharedProps,
+        children: children
+      });
+      $[30] = children;
+      $[31] = props;
+      $[32] = sharedProps;
+      $[33] = t6;
+    } else {
+      t6 = $[33];
+    }
+    return t6;
+  }
+  if ("onClick" in props) {
+    let t6;
+    if ($[34] !== children || $[35] !== props || $[36] !== sharedProps) {
+      t6 = /*#__PURE__*/jsx("button", {
+        type: "button",
+        ...props,
+        ...sharedProps,
+        children: children
+      });
+      $[34] = children;
+      $[35] = props;
+      $[36] = sharedProps;
+      $[37] = t6;
+    } else {
+      t6 = $[37];
+    }
+    return t6;
+  }
+  let t6;
+  if ($[38] !== children || $[39] !== props || $[40] !== sharedProps) {
+    t6 = /*#__PURE__*/jsx("span", {
+      ...props,
+      ...sharedProps,
+      children: children
+    });
+    $[38] = children;
+    $[39] = props;
+    $[40] = sharedProps;
+    $[41] = t6;
+  } else {
+    t6 = $[41];
+  }
+  return t6;
+}
+
+export { IssueLabel };

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

@@ -0,0 +1,5 @@
+import './IssueLabel-6581d1bd.css';
+
+var classes = {"IssueLabel":"prc-IssueLabel-IssueLabel-WJ5y-"};
+
+export { classes as default };

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

@@ -0,0 +1 @@
+{"version":3,"file":"UnderlinePanels.d.ts","sourceRoot":"","sources":["../../../src/experimental/UnderlinePanels/UnderlinePanels.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAMZ,KAAK,EAAE,EACP,KAAK,iBAAiB,EAEvB,MAAM,OAAO,CAAA;AAEd,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,wBAAwB,CAAA;AAQrD,OAAO,EAAC,KAAK,QAAQ,EAAC,MAAM,WAAW,CAAA;AAGvC,OAAO,EAAC,KAAK,MAAM,EAAC,MAAM,UAAU,CAAA;AAOpC,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;CACnB,GAAG,MAAM,CAAA;AAEV,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,GACA,MAAM,CAAA;AAER,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAA;;;;;AAyJ7C,wBAA2D"}

package/dist/experimental/UnderlinePanels/UnderlinePanels.js

@@ -0,0 +1,201 @@
+import { c } from 'react-compiler-runtime';
+import React, { useState, useRef, useEffect, Children, isValidElement, cloneElement } from 'react';
+import { TabContainerElement } from '@github/tab-container-element';
+import { createComponent } from '../../utils/create-component.js';
+import { UnderlineWrapper, UnderlineItemList, UnderlineItem } from '../../internal/components/UnderlineTabbedInterface.js';
+import { invariant } from '../../utils/invariant.js';
+import { useResizeObserver } from '../../hooks/useResizeObserver.js';
+import useIsomorphicLayoutEffect from '../../utils/useIsomorphicLayoutEffect.js';
+import classes from './UnderlinePanels.module.css.js';
+import { clsx } from 'clsx';
+import { BoxWithFallback } from '../../internal/components/BoxWithFallback.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useId } from '../../hooks/useId.js';
+
+const TabContainerComponent = createComponent(TabContainerElement, 'tab-container');
+const UnderlinePanels = ({
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+  children,
+  loadingCounters,
+  className,
+  ...props
+}) => {
+  const [iconsVisible, setIconsVisible] = useState(true);
+  const wrapperRef = useRef(null);
+  const listRef = useRef(null);
+  // We need to always call useId() because React Hooks must be
+  // called in the exact same order in every component render
+  const parentId = useId(props.id);
+  const [tabs, setTabs] = useState([]);
+  const [tabPanels, setTabPanels] = useState([]);
+
+  // Make sure we have fresh prop data whenever the tabs or panels are updated (keep aria-selected current)
+  useEffect(() => {
+    // Loop through the chidren, if it's a tab, then add id="{id}-tab-{index}"
+    // If it's a panel, then add aria-labelledby="{id}-tab-{index}"
+    let tabIndex = 0;
+    let panelIndex = 0;
+    const childrenWithProps = Children.map(children, child => {
+      if (/*#__PURE__*/isValidElement(child) && child.type === Tab) {
+        return /*#__PURE__*/cloneElement(child, {
+          id: `${parentId}-tab-${tabIndex++}`,
+          loadingCounters,
+          iconsVisible
+        });
+      }
+      if (/*#__PURE__*/isValidElement(child) && child.type === Panel) {
+        return /*#__PURE__*/cloneElement(child, {
+          'aria-labelledby': `${parentId}-tab-${panelIndex++}`
+        });
+      }
+      return child;
+    });
+    const newTabs = Children.toArray(childrenWithProps).filter(child_0 => {
+      return /*#__PURE__*/isValidElement(child_0) && child_0.type === Tab;
+    });
+    const newTabPanels = Children.toArray(childrenWithProps).filter(child_1 => /*#__PURE__*/isValidElement(child_1) && child_1.type === Panel);
+    setTabs(newTabs);
+    setTabPanels(newTabPanels);
+  }, [children, parentId, loadingCounters, iconsVisible]);
+  const tabsHaveIcons = tabs.some(tab => /*#__PURE__*/React.isValidElement(tab) && tab.props.icon);
+
+  // this is a workaround to get the list's width on the first render
+  const [listWidth, setListWidth] = useState(0);
+  useIsomorphicLayoutEffect(() => {
+    var _listRef$current$getB, _listRef$current;
+    if (!tabsHaveIcons) {
+      return;
+    }
+    setListWidth((_listRef$current$getB = (_listRef$current = listRef.current) === null || _listRef$current === void 0 ? void 0 : _listRef$current.getBoundingClientRect().width) !== null && _listRef$current$getB !== void 0 ? _listRef$current$getB : 0);
+  }, [tabsHaveIcons]);
+
+  // when the wrapper resizes, check if the icons should be visible
+  // by comparing the wrapper width to the list width
+  useResizeObserver(resizeObserverEntries => {
+    if (!tabsHaveIcons) {
+      return;
+    }
+    const wrapperWidth = resizeObserverEntries[0].contentRect.width;
+    setIconsVisible(wrapperWidth > listWidth);
+  }, wrapperRef, []);
+  if (process.env.NODE_ENV !== "production") {
+    const selectedTabs = tabs.filter(tab_0 => {
+      const ariaSelected = /*#__PURE__*/React.isValidElement(tab_0) && tab_0.props['aria-selected'];
+      return ariaSelected === true || ariaSelected === 'true';
+    });
+    !(selectedTabs.length <= 1) ? process.env.NODE_ENV !== "production" ? invariant(false, 'Only one tab can be selected at a time.') : invariant(false) : void 0;
+    !(tabs.length === tabPanels.length) ? process.env.NODE_ENV !== "production" ? invariant(false, `The number of tabs and panels must be equal. Counted ${tabs.length} tabs and ${tabPanels.length} panels.`) : invariant(false) : void 0;
+  }
+  return /*#__PURE__*/jsxs(TabContainerComponent, {
+    children: [/*#__PURE__*/jsx(UnderlineWrapper, {
+      ref: wrapperRef,
+      slot: "tablist-wrapper",
+      "data-icons-visible": iconsVisible,
+      className: clsx(className, classes.StyledUnderlineWrapper),
+      ...props,
+      children: /*#__PURE__*/jsx(UnderlineItemList, {
+        ref: listRef,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        role: "tablist",
+        children: tabs
+      })
+    }), tabPanels]
+  });
+};
+UnderlinePanels.displayName = "UnderlinePanels";
+const Tab = t0 => {
+  const $ = c(14);
+  let ariaSelected;
+  let onSelect;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      "aria-selected": ariaSelected,
+      onSelect,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = ariaSelected;
+    $[2] = onSelect;
+    $[3] = props;
+  } else {
+    ariaSelected = $[1];
+    onSelect = $[2];
+    props = $[3];
+  }
+  let t1;
+  if ($[4] !== onSelect) {
+    t1 = event => {
+      if (!event.defaultPrevented && typeof onSelect === "function") {
+        onSelect(event);
+      }
+    };
+    $[4] = onSelect;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  const clickHandler = t1;
+  let t2;
+  if ($[6] !== onSelect) {
+    t2 = event_0 => {
+      if ((event_0.key === " " || event_0.key === "Enter") && !event_0.defaultPrevented && typeof onSelect === "function") {
+        onSelect(event_0);
+      }
+    };
+    $[6] = onSelect;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  const keyDownHandler = t2;
+  const t3 = ariaSelected ? 0 : -1;
+  let t4;
+  if ($[8] !== ariaSelected || $[9] !== clickHandler || $[10] !== keyDownHandler || $[11] !== props || $[12] !== t3) {
+    t4 = /*#__PURE__*/jsx(UnderlineItem, {
+      as: "button",
+      role: "tab",
+      tabIndex: t3,
+      "aria-selected": ariaSelected,
+      type: "button",
+      onClick: clickHandler,
+      onKeyDown: keyDownHandler,
+      ...props
+    });
+    $[8] = ariaSelected;
+    $[9] = clickHandler;
+    $[10] = keyDownHandler;
+    $[11] = props;
+    $[12] = t3;
+    $[13] = t4;
+  } else {
+    t4 = $[13];
+  }
+  return t4;
+};
+Tab.displayName = 'UnderlinePanels.Tab';
+const Panel = props => {
+  const $ = c(2);
+  let t0;
+  if ($[0] !== props) {
+    t0 = /*#__PURE__*/jsx(BoxWithFallback, {
+      as: "div",
+      role: "tabpanel",
+      ...props
+    });
+    $[0] = props;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+};
+Panel.displayName = 'UnderlinePanels.Panel';
+var UnderlinePanels$1 = Object.assign(UnderlinePanels, {
+  Panel,
+  Tab
+});
+
+export { UnderlinePanels$1 as default };