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

package/lib/Avatar/Avatar-61b19061.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/Avatar/Avatar.module.css"],"names":[],"mappings":"AAAA,iCAQE,iBAAkB,CAElB,yEAA+C,CAT/C,oBAAqB,CAErB,gCAAiC,CAGjC,aAAc,CAFd,eAAgB,CAGhB,qBAAsB,CALtB,+BA+BF,CArBE,sDAEE,kGACF,CAGE,mDADF,0DAGI,+BAAgC,CADhC,8BAaJ,CAXE,CAEA,oCANF,0DAQI,gCAAiC,CADjC,+BAQJ,CANE,CAEA,sCAXF,0DAaI,6BAA8B,CAD9B,4BAGJ,CADE","file":"Avatar-61b19061.css","sourcesContent":[":where(.Avatar) {\n  display: inline-block;\n  width: var(--avatarSize-regular);\n  height: var(--avatarSize-regular);\n  overflow: hidden; /* Ensure page layout in Firefox should images fail to load */\n  /* stylelint-disable-next-line primer/typography */\n  line-height: 1;\n  vertical-align: middle;\n  border-radius: 50%;\n  /* stylelint-disable-next-line primer/box-shadow */\n  box-shadow: 0 0 0 1px var(--avatar-borderColor);\n\n  &:where([data-square]) {\n    /* stylelint-disable-next-line primer/borders */\n    border-radius: clamp(4px, calc(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/Avatar/Avatar.d.ts

@@ -1,30 +0,0 @@
-import React from 'react';
-import type { SxProp } from '../sx';
-import type { ResponsiveValue } from '../hooks/useResponsiveValue';
-export declare const DEFAULT_AVATAR_SIZE = 20;
-export type AvatarProps = {
-    /** Sets the width and height of the avatar. */
-    size?: number | ResponsiveValue<number>;
-    /** Sets the shape of the avatar to a square if true. If false, the avatar will be circular. */
-    square?: boolean;
-    /** URL of the avatar image. */
-    src: string;
-    /** Provide alt text when the Avatar is used without the user's name next to it. */
-    alt?: string;
-    /** Additional class name. */
-    className?: string;
-} & SxProp & React.ComponentPropsWithoutRef<'img'>;
-declare const Avatar: React.ForwardRefExoticComponent<{
-    /** Sets the width and height of the avatar. */
-    size?: number | ResponsiveValue<number>;
-    /** Sets the shape of the avatar to a square if true. If false, the avatar will be circular. */
-    square?: boolean;
-    /** URL of the avatar image. */
-    src: string;
-    /** Provide alt text when the Avatar is used without the user's name next to it. */
-    alt?: string;
-    /** Additional class name. */
-    className?: string;
-} & SxProp & Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
-export default Avatar;
-//# sourceMappingURL=Avatar.d.ts.map

package/lib/Avatar/Avatar.js

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

package/lib/Avatar/Avatar.module.css.js

@@ -1,7 +0,0 @@
-'use strict';
-
-require('./Avatar-61b19061.css');
-
-var classes = {"Avatar":"prc-Avatar-Avatar-ZRS-m"};
-
-module.exports = classes;

package/lib/Avatar/index.d.ts

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

package/lib/Avatar/storyHelpers.d.ts

@@ -1,6 +0,0 @@
-export declare function parseSizeFromArgs<T extends Partial<Record<'size' | 'sizeAtNarrow' | 'sizeAtRegular' | 'sizeAtWide', number | undefined>>>({ size, sizeAtNarrow, sizeAtRegular, sizeAtWide }: T): number | {
-    narrow: number | undefined;
-    regular: number | undefined;
-    wide: number | undefined;
-};
-//# sourceMappingURL=storyHelpers.d.ts.map

package/lib/AvatarStack/AvatarStack-802bdd7c.css

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

package/lib/AvatarStack/AvatarStack-802bdd7c.css.map

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

package/lib/AvatarStack/AvatarStack.d.ts

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

package/lib/AvatarStack/AvatarStack.js

@@ -1,156 +0,0 @@
-'use strict';
-
-var clsx = require('clsx');
-var React = require('react');
-var Avatar = require('../Avatar/Avatar.js');
-var useResponsiveValue = require('../hooks/useResponsiveValue.js');
-var AvatarStack_module = require('./AvatarStack.module.css.js');
-var hasInteractiveNodes = require('../internal/utils/hasInteractiveNodes.js');
-var BoxWithFallback = require('../internal/components/BoxWithFallback.js');
-var jsxRuntime = require('react/jsx-runtime');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefault(React);
-
-const transformChildren = (children, shape) => {
-  return React__default.default.Children.map(children, child => {
-    if (! /*#__PURE__*/React__default.default.isValidElement(child)) return child;
-    return /*#__PURE__*/React__default.default.cloneElement(child, {
-      ...child.props,
-      square: shape === 'square' ? true : undefined,
-      className: clsx.clsx(child.props.className, 'pc-AvatarItem', AvatarStack_module.AvatarItem)
-    });
-  });
-};
-const AvatarStackBody = ({
-  disableExpand,
-  hasInteractiveChildren,
-  stackContainer,
-  children
-}) => {
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
-    "data-disable-expand": disableExpand ? '' : undefined,
-    className: clsx.clsx({
-      'pc-AvatarStack--disableExpand': disableExpand
-    }, 'pc-AvatarStackBody', AvatarStack_module.AvatarStackBody),
-    tabIndex: !hasInteractiveChildren && !disableExpand ? 0 : undefined,
-    ref: stackContainer,
-    children: children
-  });
-};
-AvatarStackBody.displayName = "AvatarStackBody";
-const AvatarStack = ({
-  children,
-  variant = 'cascade',
-  shape = 'circle',
-  alignRight,
-  disableExpand,
-  size,
-  className,
-  style
-}) => {
-  const [hasInteractiveChildren, setHasInteractiveChildren] = React.useState(false);
-  const stackContainer = React.useRef(null);
-  const count = React__default.default.Children.count(children);
-  const getAvatarChildSizes = () => {
-    const avatarSizeMap = {
-      narrow: [],
-      regular: [],
-      wide: []
-    };
-    return React__default.default.Children.toArray(children).reduce((acc, child) => {
-      // if child is not an Avatar, return the default avatar sizes from the accumulator
-      if (! /*#__PURE__*/React__default.default.isValidElement(child)) return acc;
-      for (const responsiveKey of Object.keys(avatarSizeMap)) {
-        // if the child has responsive `size` prop values, push the value to the appropriate viewport property in the avatarSizeMap
-        if (useResponsiveValue.isResponsiveValue(child.props.size)) {
-          avatarSizeMap[responsiveKey].push(child.props.size[responsiveKey] || Avatar.DEFAULT_AVATAR_SIZE);
-        }
-        // otherwise, the size is a number (or undefined), so push the value to all viewport properties in the avatarSizeMap
-        else {
-          avatarSizeMap[responsiveKey].push(child.props.size || Avatar.DEFAULT_AVATAR_SIZE);
-        }
-
-        // set the smallest size in each viewport property as the value for that viewport property in the accumulator
-        acc[responsiveKey] = Math.min(...avatarSizeMap[responsiveKey]);
-      }
-      return acc;
-    }, {
-      narrow: Avatar.DEFAULT_AVATAR_SIZE,
-      regular: Avatar.DEFAULT_AVATAR_SIZE,
-      wide: Avatar.DEFAULT_AVATAR_SIZE
-    });
-  };
-  const childSizes = getAvatarChildSizes();
-  React.useEffect(() => {
-    if (stackContainer.current) {
-      const interactiveChildren = () => {
-        setHasInteractiveChildren(hasInteractiveNodes.hasInteractiveNodes(stackContainer.current));
-      };
-      const observer = new MutationObserver(interactiveChildren);
-      observer.observe(stackContainer.current, {
-        childList: true
-      });
-
-      // Call on initial render, then call it again only if there's a mutation
-      interactiveChildren();
-      return () => {
-        observer.disconnect();
-      };
-    }
-  }, []);
-  const getResponsiveAvatarSizeStyles = () => {
-    // if there is no size set on the AvatarStack, use the `size` props of the Avatar children to set the `--avatar-stack-size` CSS variable
-    if (!size) {
-      return {
-        '--stackSize-narrow': `${childSizes.narrow}px`,
-        '--stackSize-regular': `${childSizes.regular}px`,
-        '--stackSize-wide': `${childSizes.wide}px`
-      };
-    }
-
-    // if the `size` prop is set and responsive, set the `--avatar-stack-size` CSS variable for each viewport
-    if (useResponsiveValue.isResponsiveValue(size)) {
-      return {
-        '--stackSize-narrow': `${size.narrow || Avatar.DEFAULT_AVATAR_SIZE}px`,
-        '--stackSize-regular': `${size.regular || Avatar.DEFAULT_AVATAR_SIZE}px`,
-        '--stackSize-wide': `${size.wide || Avatar.DEFAULT_AVATAR_SIZE}px`
-      };
-    }
-
-    // if the `size` prop is set and not responsive, it is a number, so we can just set the `--avatar-stack-size` CSS variable to that number
-    return {
-      '--avatar-stack-size': `${size}px`
-    };
-  };
-  return /*#__PURE__*/jsxRuntime.jsx(BoxWithFallback.BoxWithFallback, {
-    as: "span",
-    "data-variant": variant,
-    "data-shape": shape,
-    "data-avatar-count": count > 3 ? '3+' : count,
-    "data-align-right": alignRight ? '' : undefined,
-    "data-responsive": !size || useResponsiveValue.isResponsiveValue(size) ? '' : undefined,
-    className: clsx.clsx({
-      'pc-AvatarStack--variant': variant,
-      'pc-AvatarStack--shape': shape,
-      'pc-AvatarStack--two': count === 2,
-      'pc-AvatarStack--three': count === 3,
-      'pc-AvatarStack--three-plus': count > 3,
-      'pc-AvatarStack--right': alignRight
-    }, className, AvatarStack_module.AvatarStack),
-    style: {
-      ...getResponsiveAvatarSizeStyles(),
-      ...style
-    },
-    children: /*#__PURE__*/jsxRuntime.jsxs(AvatarStackBody, {
-      disableExpand: disableExpand,
-      hasInteractiveChildren: hasInteractiveChildren,
-      stackContainer: stackContainer,
-      children: [' ', transformChildren(children, shape)]
-    })
-  });
-};
-AvatarStack.displayName = "AvatarStack";
-
-module.exports = AvatarStack;

package/lib/AvatarStack/AvatarStack.module.css.js

@@ -1,7 +0,0 @@
-'use strict';
-
-require('./AvatarStack-802bdd7c.css');
-
-var classes = {"AvatarStack":"prc-AvatarStack-AvatarStack-N-r3C","AvatarItem":"prc-AvatarStack-AvatarItem-nS1mt","AvatarStackBody":"prc-AvatarStack-AvatarStackBody-mSyoJ"};
-
-module.exports = classes;

package/lib/AvatarStack/index.d.ts

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

package/lib/Banner/Banner-6396546f.css

@@ -1,2 +0,0 @@
-.prc-Banner-Banner-IR8eJ{align-items:start;background-color:var(--banner-bgColor);border:var(--borderWidth-thin,.0625rem) solid var(--banner-borderColor);border-radius:var(--borderRadius-medium,.375rem);display:grid;grid-template-columns:auto minmax(0,1fr) auto;padding:var(--base-size-8,.5rem)}@supports (container-type:inline-size){.prc-Banner-Banner-IR8eJ{container:banner/inline-size}}.prc-Banner-Banner-IR8eJ[data-variant=critical]{--banner-bgColor:var(--bgColor-danger-muted,var(--color-danger-subtle));--banner-borderColor:var(--borderColor-danger-muted,var(--color-danger-muted));--banner-icon-fgColor:var(--fgColor-danger,var(--color-danger-fg))}.prc-Banner-Banner-IR8eJ[data-variant=info]{--banner-bgColor:var(--bgColor-accent-muted,var(--color-accent-subtle));--banner-borderColor:var(--borderColor-accent-muted,var(--color-accent-muted));--banner-icon-fgColor:var(--fgColor-accent,var(--color-accent-fg))}.prc-Banner-Banner-IR8eJ[data-variant=success]{--banner-bgColor:var(--bgColor-success-muted,var(--color-success-subtle));--banner-borderColor:var(--borderColor-success-muted,var(--color-success-muted));--banner-icon-fgColor:var(--fgColor-success,var(--color-success-fg))}.prc-Banner-Banner-IR8eJ[data-variant=upsell]{--banner-bgColor:var(--bgColor-upsell-muted,#fbefff);--banner-borderColor:var(--borderColor-upsell-muted,#c297ff66);--banner-icon-fgColor:var(--fgColor-upsell,#8250df)}.prc-Banner-Banner-IR8eJ[data-variant=warning]{--banner-bgColor:var(--bgColor-attention-muted,var(--color-attention-subtle));--banner-borderColor:var(--borderColor-attention-muted,var(--color-attention-muted));--banner-icon-fgColor:var(--fgColor-attention,var(--color-attention-fg))}.prc-Banner-BannerContainer-lbx3d{align-items:start;column-gap:var(--base-size-4,.25rem);font-size:var(--text-body-size-medium,.875rem);line-height:var(--text-body-lineHeight-medium,1.4285);row-gap:var(--base-size-4,.25rem)}.prc-Banner-Banner-IR8eJ :where(.prc-Banner-BannerContainer-lbx3d){display:flex;flex-wrap:wrap;justify-content:space-between}.prc-Banner-Banner-IR8eJ[data-dismissible]:not([data-title-hidden=""]) .prc-Banner-BannerContainer-lbx3d{display:grid;grid-template-columns:auto;grid-template-rows:auto}.prc-Banner-BannerContent-zTITK{display:grid;grid-column-start:1;margin-block:var(--base-size-8,.5rem);row-gap:var(--base-size-4,.25rem)}.prc-Banner-Banner-IR8eJ[data-title-hidden]:not(:has(.prc-Banner-BannerActions-XCfHL)) .prc-Banner-BannerContent-zTITK{margin-block:var(--base-size-6,.375rem)}@media screen and (min-width:544px){.prc-Banner-BannerContent-zTITK{flex:1 1 0%}}.prc-Banner-BannerTitle-TcuJl{font-size:inherit;font-weight:var(--base-text-weight-semibold,600);margin:0}.prc-Banner-BannerIcon-WuOyf{display:grid;padding:var(--base-size-8,.5rem);place-items:center}.prc-Banner-BannerIcon-WuOyf svg{color:var(--banner-icon-fgColor);height:var(--base-size-20,1.25rem);fill:var(--banner-icon-fgColor)}.prc-Banner-Banner-IR8eJ[data-title-hidden]:not(:has(.prc-Banner-BannerActions-XCfHL)) .prc-Banner-BannerIcon-WuOyf svg{height:var(--base-size-16,1rem)}.prc-Banner-BannerDismiss-uBZVm{display:grid;margin-inline-start:var(--base-size-4,.25rem);padding:var(--base-size-8,.5rem);place-items:center}:where(.prc-Banner-Banner-IR8eJ):has(.prc-Banner-BannerActions-XCfHL) .prc-Banner-BannerDismiss-uBZVm{margin-block:var(--base-size-2,.125rem)}.prc-Banner-BannerDismiss-uBZVm svg{color:var(--banner-icon-fgColor)}.prc-Banner-BannerActionsContainer-ukGMH{align-items:center;column-gap:var(--base-size-12,.75rem);display:flex;margin-block:var(--base-size-2,.125rem)}.prc-Banner-BannerActions-XCfHL :where([data-primary-action=trailing]){display:none}@media screen and (min-width:48rem){.prc-Banner-BannerActions-XCfHL :where([data-primary-action=trailing]){display:flex}.prc-Banner-BannerActions-XCfHL :where([data-primary-action=leading]){display:none}}.prc-Banner-Banner-IR8eJ[data-dismissible]:not([data-title-hidden]) .prc-Banner-BannerActions-XCfHL{margin-block-end:var(--base-size-6,.375rem)}.prc-Banner-Banner-IR8eJ[data-dismissible]:not([data-title-hidden]) .prc-Banner-BannerActionsContainer-ukGMH[data-primary-action=trailing]{display:none}.prc-Banner-Banner-IR8eJ[data-dismissible]:not([data-title-hidden]) .prc-Banner-BannerActionsContainer-ukGMH[data-primary-action=leading]{display:flex}@container banner (max-width: 500px){.prc-Banner-BannerContainer-lbx3d{display:grid}.prc-Banner-BannerContainer-lbx3d:has(.prc-Banner-BannerActionsContainer-ukGMH){grid-template-rows:auto auto}.prc-Banner-BannerActions-XCfHL{margin-block-end:var(--base-size-6,.375rem)}.prc-Banner-BannerActions-XCfHL [data-primary-action=trailing]{display:none}.prc-Banner-BannerActions-XCfHL [data-primary-action=leading]{display:flex}}@container banner (min-width: 500px){.prc-Banner-BannerContainer-lbx3d{display:grid;grid-template-columns:auto auto}:where(.prc-Banner-Banner-IR8eJ):not([data-dismissible]) :where(.prc-Banner-BannerActionsContainer-ukGMH[data-primary-action=trailing]) :where([data-variant=link]:only-child){padding-inline:0 var(--base-size-12,.75rem)}.prc-Banner-BannerActions-XCfHL [data-primary-action=trailing]{display:flex;min-height:var(--base-size-32,2rem)}.prc-Banner-BannerActions-XCfHL [data-primary-action=leading]{display:none}}
-/*# sourceMappingURL=Banner-6396546f.css.map */

package/lib/Banner/Banner-6396546f.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/Banner/Banner.module.css"],"names":[],"mappings":"AAAA,yBASE,iBAAkB,CALlB,sCAAuC,CAEvC,uEAA+D,CAC/D,gDAAyC,CANzC,YAAa,CAOb,6CAA+C,CAN/C,gCA0CF,CAjCE,uCAXF,yBAYI,4BAgCJ,CA/BE,CAEA,gDACE,uEAA6C,CAC7C,8EAAqD,CACrD,kEACF,CAEA,4CACE,uEAA6C,CAC7C,8EAAqD,CACrD,kEACF,CAEA,+CACE,yEAA8C,CAC9C,gFAAsD,CACtD,oEACF,CAEA,8CACE,oDAA6C,CAC7C,8DAAqD,CACrD,mDACF,CAEA,+CACE,6EAAgD,CAChD,oFAAwD,CACxD,wEACF,CAKF,kCAEE,iBAAkB,CAGlB,oCAA8B,CAJ9B,8CAAuC,CAEvC,qDAA+C,CAC/C,iCAEF,CAEA,mEACE,YAAa,CACb,cAAe,CACf,6BACF,CAEA,yGACE,YAAa,CACb,0BAA2B,CAC3B,uBACF,CAIA,gCACE,YAAa,CAEb,mBAAoB,CACpB,qCAAgC,CAFhC,iCAGF,CAEA,uHACE,uCACF,CAEA,oCACE,gCACE,WACF,CACF,CAEA,8BAEE,iBAAkB,CAClB,gDAA6C,CAF7C,QAGF,CAIA,6BACE,YAAa,CAEb,gCAA2B,CAD3B,kBAEF,CAEA,iCAIE,gCAAiC,CAFjC,kCAA2B,CAI3B,+BACF,CAGA,wHACE,+BACF,CAIA,gCACE,YAAa,CAGb,6CAAuC,CADvC,gCAA2B,CAD3B,kBAGF,CAEA,sGACE,uCACF,CAEA,oCAEE,gCACF,CAIA,yCAGE,kBAAmB,CADnB,qCAA+B,CAD/B,YAAa,CAGb,uCACF,CAEA,uEACE,YACF,CAEA,oCACE,uEACE,YACF,CAEA,sEACE,YACF,CACF,CAEA,oGACE,2CACF,CAGA,2IACE,YACF,CAGA,0IACE,YACF,CAIA,qCACE,kCACE,YACF,CAEA,gFACE,4BACF,CAEA,gCACE,2CACF,CAEA,+DACE,YACF,CAEA,8DACE,YACF,CACF,CAEA,qCACE,kCACE,YAAa,CACb,+BACF,CAEA,+KAGE,2CACF,CAEA,+DACE,YAAa,CACb,mCACF,CAEA,8DACE,YACF,CACF","file":"Banner-6396546f.css","sourcesContent":[".Banner {\n  display: grid;\n  padding: var(--base-size-8);\n  /* stylelint-disable-next-line primer/colors */\n  background-color: var(--banner-bgColor);\n  /* stylelint-disable-next-line primer/colors */\n  border: var(--borderWidth-thin) solid var(--banner-borderColor);\n  border-radius: var(--borderRadius-medium);\n  grid-template-columns: auto minmax(0, 1fr) auto;\n  align-items: start;\n\n  @supports (container-type: inline-size) {\n    container: banner / inline-size;\n  }\n\n  &[data-variant='critical'] {\n    --banner-bgColor: var(--bgColor-danger-muted);\n    --banner-borderColor: var(--borderColor-danger-muted);\n    --banner-icon-fgColor: var(--fgColor-danger);\n  }\n\n  &[data-variant='info'] {\n    --banner-bgColor: var(--bgColor-accent-muted);\n    --banner-borderColor: var(--borderColor-accent-muted);\n    --banner-icon-fgColor: var(--fgColor-accent);\n  }\n\n  &[data-variant='success'] {\n    --banner-bgColor: var(--bgColor-success-muted);\n    --banner-borderColor: var(--borderColor-success-muted);\n    --banner-icon-fgColor: var(--fgColor-success);\n  }\n\n  &[data-variant='upsell'] {\n    --banner-bgColor: var(--bgColor-upsell-muted);\n    --banner-borderColor: var(--borderColor-upsell-muted);\n    --banner-icon-fgColor: var(--fgColor-upsell);\n  }\n\n  &[data-variant='warning'] {\n    --banner-bgColor: var(--bgColor-attention-muted);\n    --banner-borderColor: var(--borderColor-attention-muted);\n    --banner-icon-fgColor: var(--fgColor-attention);\n  }\n}\n\n/* BannerContainer -------------------------------------------------------- */\n\n.BannerContainer {\n  font-size: var(--text-body-size-medium);\n  align-items: start;\n  line-height: var(--text-body-lineHeight-medium);\n  row-gap: var(--base-size-4);\n  column-gap: var(--base-size-4);\n}\n\n.Banner :where(.BannerContainer) {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-between;\n}\n\n.Banner[data-dismissible]:not([data-title-hidden='']) .BannerContainer {\n  display: grid;\n  grid-template-columns: auto;\n  grid-template-rows: auto;\n}\n\n/* BannerContent ---------------------------------------------------------- */\n\n.BannerContent {\n  display: grid;\n  row-gap: var(--base-size-4);\n  grid-column-start: 1;\n  margin-block: var(--base-size-8);\n}\n\n.Banner[data-title-hidden]:not(:has(.BannerActions)) .BannerContent {\n  margin-block: var(--base-size-6);\n}\n\n@media screen and (min-width: 544px) {\n  .BannerContent {\n    flex: 1 1 0%;\n  }\n}\n\n.BannerTitle {\n  margin: 0;\n  font-size: inherit;\n  font-weight: var(--base-text-weight-semibold);\n}\n\n/* BannerIcon ------------------------------------------------------------- */\n\n.BannerIcon {\n  display: grid;\n  place-items: center;\n  padding: var(--base-size-8);\n}\n\n.BannerIcon svg {\n  /* 20px is the line box height of the trailing action buttons */\n  height: var(--base-size-20);\n  /* stylelint-disable-next-line primer/colors */\n  color: var(--banner-icon-fgColor);\n  /* stylelint-disable-next-line primer/colors */\n  fill: var(--banner-icon-fgColor);\n}\n\n/* stylelint-disable-next-line selector-max-specificity */\n.Banner[data-title-hidden]:not(:has(.BannerActions)) .BannerIcon svg {\n  height: var(--base-size-16);\n}\n\n/* BannerDismiss ---------------------------------------------------------- */\n\n.BannerDismiss {\n  display: grid;\n  place-items: center;\n  padding: var(--base-size-8);\n  margin-inline-start: var(--base-size-4);\n}\n\n:where(.Banner):has(.BannerActions) .BannerDismiss {\n  margin-block: var(--base-size-2);\n}\n\n.BannerDismiss svg {\n  /* stylelint-disable-next-line primer/colors */\n  color: var(--banner-icon-fgColor);\n}\n\n/* BannerActions ---------------------------------------------------------- */\n\n.BannerActionsContainer {\n  display: flex;\n  column-gap: var(--base-size-12);\n  align-items: center;\n  margin-block: var(--base-size-2);\n}\n\n.BannerActions :where([data-primary-action='trailing']) {\n  display: none;\n}\n\n@media screen and (--viewportRange-regular) {\n  .BannerActions :where([data-primary-action='trailing']) {\n    display: flex;\n  }\n\n  .BannerActions :where([data-primary-action='leading']) {\n    display: none;\n  }\n}\n\n.Banner[data-dismissible]:not([data-title-hidden]) .BannerActions {\n  margin-block-end: var(--base-size-6);\n}\n\n/* stylelint-disable-next-line selector-max-specificity */\n.Banner[data-dismissible]:not([data-title-hidden]) .BannerActionsContainer[data-primary-action='trailing'] {\n  display: none;\n}\n\n/* stylelint-disable-next-line selector-max-specificity */\n.Banner[data-dismissible]:not([data-title-hidden]) .BannerActionsContainer[data-primary-action='leading'] {\n  display: flex;\n}\n\n/* Layout ------------------------------------------------------------------- */\n\n@container banner (max-width: 500px) {\n  .BannerContainer {\n    display: grid;\n  }\n\n  .BannerContainer:has(.BannerActionsContainer) {\n    grid-template-rows: auto auto;\n  }\n\n  .BannerActions {\n    margin-block-end: var(--base-size-6);\n  }\n\n  .BannerActions [data-primary-action='trailing'] {\n    display: none;\n  }\n\n  .BannerActions [data-primary-action='leading'] {\n    display: flex;\n  }\n}\n\n@container banner (min-width: 500px) {\n  .BannerContainer {\n    display: grid;\n    grid-template-columns: auto auto;\n  }\n\n  :where(.Banner):not([data-dismissible])\n    :where(.BannerActionsContainer[data-primary-action='trailing'])\n    :where([data-variant='link']:only-child) {\n    padding-inline: 0 var(--base-size-12);\n  }\n\n  .BannerActions [data-primary-action='trailing'] {\n    display: flex;\n    min-height: var(--base-size-32, 2rem);\n  }\n\n  .BannerActions [data-primary-action='leading'] {\n    display: none;\n  }\n}\n"]}

package/lib/Banner/Banner.d.ts

@@ -1,117 +0,0 @@
-import React from 'react';
-import { type ButtonProps } from '../Button';
-import type { ForwardRefComponent as PolymorphicForwardRefComponent } from '../utils/polymorphic';
-export type BannerVariant = 'critical' | 'info' | 'success' | 'upsell' | 'warning';
-export type BannerProps = React.ComponentPropsWithoutRef<'section'> & {
-    /**
-     * Provide an optional label to override the default name for the Banner
-     * landmark region
-     */
-    'aria-label'?: string;
-    /**
-     * Provide an optional className to add to the outermost element rendered by
-     * the Banner
-     */
-    className?: string;
-    /**
-     * Provide an optional description for the Banner. This should provide
-     * supplemental information about the Banner
-     */
-    description?: React.ReactNode;
-    /**
-     * Specify whether the title of the Banner should be visible or not.
-     */
-    hideTitle?: boolean;
-    /**
-     * Provide a custom icon for the Banner. This is only available when `variant` is `info` or `upsell`
-     */
-    icon?: React.ReactNode;
-    /**
-     * Optionally provide a handler to be called when the banner is dismissed.
-     * Providing this prop will show a dismiss button.
-     */
-    onDismiss?: () => void;
-    /**
-     * Provide an optional primary action for the Banner.
-     */
-    primaryAction?: React.ReactNode;
-    /**
-     * Provide an optional secondary action for the Banner
-     */
-    secondaryAction?: React.ReactNode;
-    /**
-     * The title for the Banner. This will be used as the accessible name and is
-     * required unless `Banner.Title` is used as a child.
-     */
-    title?: React.ReactNode;
-    /**
-     * Specify the type of the Banner
-     */
-    variant?: BannerVariant;
-};
-export declare const Banner: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
-    /**
-     * Provide an optional label to override the default name for the Banner
-     * landmark region
-     */
-    'aria-label'?: string;
-    /**
-     * Provide an optional className to add to the outermost element rendered by
-     * the Banner
-     */
-    className?: string;
-    /**
-     * Provide an optional description for the Banner. This should provide
-     * supplemental information about the Banner
-     */
-    description?: React.ReactNode;
-    /**
-     * Specify whether the title of the Banner should be visible or not.
-     */
-    hideTitle?: boolean;
-    /**
-     * Provide a custom icon for the Banner. This is only available when `variant` is `info` or `upsell`
-     */
-    icon?: React.ReactNode;
-    /**
-     * Optionally provide a handler to be called when the banner is dismissed.
-     * Providing this prop will show a dismiss button.
-     */
-    onDismiss?: () => void;
-    /**
-     * Provide an optional primary action for the Banner.
-     */
-    primaryAction?: React.ReactNode;
-    /**
-     * Provide an optional secondary action for the Banner
-     */
-    secondaryAction?: React.ReactNode;
-    /**
-     * The title for the Banner. This will be used as the accessible name and is
-     * required unless `Banner.Title` is used as a child.
-     */
-    title?: React.ReactNode;
-    /**
-     * Specify the type of the Banner
-     */
-    variant?: BannerVariant;
-} & React.RefAttributes<HTMLElement>>;
-type HeadingElement = 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-export type BannerTitleProps<As extends HeadingElement> = {
-    as?: As;
-    className?: string;
-} & React.ComponentPropsWithoutRef<As extends 'h2' ? 'h2' : As>;
-export declare function BannerTitle<As extends HeadingElement>(props: BannerTitleProps<As>): React.JSX.Element;
-export type BannerDescriptionProps = React.ComponentPropsWithoutRef<'div'>;
-export declare function BannerDescription({ children, className, ...rest }: BannerDescriptionProps): React.JSX.Element;
-export type BannerActionsProps = {
-    primaryAction?: React.ReactNode;
-    secondaryAction?: React.ReactNode;
-};
-export declare function BannerActions({ primaryAction, secondaryAction }: BannerActionsProps): React.JSX.Element;
-export type BannerPrimaryActionProps = Omit<ButtonProps, 'variant'>;
-declare const BannerPrimaryAction: PolymorphicForwardRefComponent<"button", BannerPrimaryActionProps>;
-export type BannerSecondaryActionProps = Omit<ButtonProps, 'variant'>;
-declare const BannerSecondaryAction: PolymorphicForwardRefComponent<"button", BannerSecondaryActionProps>;
-export { BannerPrimaryAction, BannerSecondaryAction };
-//# sourceMappingURL=Banner.d.ts.map

package/lib/Banner/Banner.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../src/Banner/Banner.tsx"],"names":[],"mappings":"AACA,OAAO,KAA8B,MAAM,OAAO,CAAA;AAElD,OAAO,EAAqB,KAAK,WAAW,EAAC,MAAM,WAAW,CAAA;AAI9D,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAE/F,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAA;AAElF,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC,wBAAwB,CAAC,SAAS,CAAC,GAAG;IACpE;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;;OAGG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAE7B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAEtB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IAEtB;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAE/B;;OAEG;IACH,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAEjC;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAEvB;;OAEG;IACH,OAAO,CAAC,EAAE,aAAa,CAAA;CACxB,CAAA;AAkBD,eAAO,MAAM,MAAM;IAxEjB;;;OAGG;mBACY,MAAM;IAErB;;;OAGG;gBACS,MAAM;IAElB;;;OAGG;kBACW,KAAK,CAAC,SAAS;IAE7B;;OAEG;gBACS,OAAO;IAEnB;;OAEG;WACI,KAAK,CAAC,SAAS;IAEtB;;;OAGG;gBACS,MAAM,IAAI;IAEtB;;OAEG;oBACa,KAAK,CAAC,SAAS;IAE/B;;OAEG;sBACe,KAAK,CAAC,SAAS;IAEjC;;;OAGG;YACK,KAAK,CAAC,SAAS;IAEvB;;OAEG;cACO,aAAa;qCA0GvB,CAAA;AAEF,KAAK,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAEtD,MAAM,MAAM,gBAAgB,CAAC,EAAE,SAAS,cAAc,IAAI;IACxD,EAAE,CAAC,EAAE,EAAE,CAAA;IACP,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,KAAK,CAAC,wBAAwB,CAAC,EAAE,SAAS,IAAI,GAAG,IAAI,GAAG,EAAE,CAAC,CAAA;AAE/D,wBAAgB,WAAW,CAAC,EAAE,SAAS,cAAc,EAAE,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,qBAOjF;AAED,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAA;AAE1E,wBAAgB,iBAAiB,CAAC,EAAC,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAC,EAAE,sBAAsB,qBAMvF;AAED,MAAM,MAAM,kBAAkB,GAAG;IAC/B,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC/B,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAClC,CAAA;AAED,wBAAgB,aAAa,CAAC,EAAC,aAAa,EAAE,eAAe,EAAC,EAAE,kBAAkB,qBAajF;AAED,MAAM,MAAM,wBAAwB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,CAAA;AAEnE,QAAA,MAAM,mBAAmB,EAMnB,8BAA8B,CAAC,QAAQ,EAAE,wBAAwB,CAAC,CAAA;AAIxE,MAAM,MAAM,0BAA0B,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,CAAA;AAErE,QAAA,MAAM,qBAAqB,EAMrB,8BAA8B,CAAC,QAAQ,EAAE,0BAA0B,CAAC,CAAA;AAI1E,OAAO,EAAC,mBAAmB,EAAE,qBAAqB,EAAC,CAAA"}