@primer/react-brand 0.79.0 → 0.79.1-rc.5d6b749b

package/docs/components/LogoSuite/react.md

@@ -81,6 +81,184 @@ import {LogoSuite} from '@primer/react-brand'
 </LogoSuite>
 ```
 
+### Linked logos
+
+Wrap every logo in a native `<a>` element to add links and preserve its original colors. Do not mix linked and unlinked logos or use custom link components.
+
+```jsx
+<LogoSuite>
+  <LogoSuite.Heading visuallyHidden>Featured logos</LogoSuite.Heading>
+  <LogoSuite.Logobar>
+    <a href="/microsoft" aria-label="Microsoft">
+      <svg role="img" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" focusable="false">
+        <title>Microsoft</title>
+        <path fill="#F1511B" d="M121.666 121.666H0V0h121.666z" />
+        <path fill="#80CC28" d="M256 121.666H134.335V0H256z" />
+        <path fill="#00ADEF" d="M121.663 256.002H0V134.336h121.663z" />
+        <path fill="#FBBC09" d="M256 256.002H134.335V134.336H256z" />
+      </svg>
+    </a>
+    <a href="/azure" aria-label="Azure">
+      <svg role="img" viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg" focusable="false">
+        <title>Azure</title>
+        <defs>
+          <linearGradient
+            id="azureGradientA"
+            x1="-1032.17"
+            x2="-1059.21"
+            y1="145.31"
+            y2="65.43"
+            gradientTransform="matrix(1 0 0 -1 1075 158)"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop offset="0" stopColor="#114a8b" />
+            <stop offset="1" stopColor="#0669bc" />
+          </linearGradient>
+          <linearGradient
+            id="azureGradientB"
+            x1="-1023.73"
+            x2="-1029.98"
+            y1="108.08"
+            y2="105.97"
+            gradientTransform="matrix(1 0 0 -1 1075 158)"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop offset="0" stopOpacity=".3" />
+            <stop offset=".07" stopOpacity=".2" />
+            <stop offset=".32" stopOpacity=".1" />
+            <stop offset=".62" stopOpacity=".05" />
+            <stop offset="1" stopOpacity="0" />
+          </linearGradient>
+          <linearGradient
+            id="azureGradientC"
+            x1="-1027.16"
+            x2="-997.48"
+            y1="147.64"
+            y2="68.56"
+            gradientTransform="matrix(1 0 0 -1 1075 158)"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop offset="0" stopColor="#3ccbf4" />
+            <stop offset="1" stopColor="#2892df" />
+          </linearGradient>
+        </defs>
+        <path
+          fill="url(#azureGradientA)"
+          d="M33.34 6.54h26.04l-27.03 80.1a4.15 4.15 0 0 1-3.94 2.81H8.15a4.14 4.14 0 0 1-3.93-5.47L29.4 9.38a4.15 4.15 0 0 1 3.94-2.83z"
+        />
+        <path
+          fill="#0078d4"
+          d="M71.17 60.26H29.88a1.91 1.91 0 0 0-1.3 3.31l26.53 24.76a4.17 4.17 0 0 0 2.85 1.13h23.38z"
+        />
+        <path
+          fill="url(#azureGradientB)"
+          d="M33.34 6.54a4.12 4.12 0 0 0-3.95 2.88L4.25 83.92a4.14 4.14 0 0 0 3.91 5.54h20.79a4.44 4.44 0 0 0 3.4-2.9l5.02-14.78 17.91 16.7a4.24 4.24 0 0 0 2.67.97h23.29L71.02 60.26H41.24L59.47 6.55z"
+        />
+        <path
+          fill="url(#azureGradientC)"
+          d="M66.6 9.36a4.14 4.14 0 0 0-3.93-2.82H33.65a4.15 4.15 0 0 1 3.93 2.82l25.18 74.62a4.15 4.15 0 0 1-3.93 5.48h29.02a4.15 4.15 0 0 0 3.93-5.48z"
+        />
+      </svg>
+    </a>
+    <a href="/microsoft-copilot" aria-label="Microsoft Copilot">
+      <svg role="img" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="2 4 43.998 40" focusable="false">
+        <title>Microsoft Copilot</title>
+        <defs>
+          <radialGradient
+            id="copilotGradientA"
+            cx="0"
+            cy="0"
+            r="1"
+            gradientTransform="matrix(-10.96051 -13.38922 12.59013 -10.30637 38.005 20.514)"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop offset=".096" stopColor="#00AEFF" />
+            <stop offset=".773" stopColor="#2253CE" />
+            <stop offset="1" stopColor="#0736C4" />
+          </radialGradient>
+          <radialGradient
+            id="copilotGradientB"
+            cx="0"
+            cy="0"
+            r="1"
+            gradientTransform="rotate(51.84 -28.201 27.85) scale(15.9912 15.5119)"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#FFB657" />
+            <stop offset=".634" stopColor="#FF5F3D" />
+            <stop offset=".923" stopColor="#C02B3C" />
+          </radialGradient>
+          <radialGradient
+            id="copilotGradientE"
+            cx="0"
+            cy="0"
+            r="1"
+            gradientTransform="rotate(109.274 16.301 20.802) scale(38.3873 45.9867)"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop offset=".066" stopColor="#8C48FF" />
+            <stop offset=".5" stopColor="#F2598A" />
+            <stop offset=".896" stopColor="#FFB152" />
+          </radialGradient>
+          <linearGradient
+            id="copilotGradientC"
+            x1="12.5"
+            x2="14.788"
+            y1="7.5"
+            y2="33.975"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop offset=".156" stopColor="#0D91E1" />
+            <stop offset=".487" stopColor="#52B471" />
+            <stop offset=".652" stopColor="#98BD42" />
+            <stop offset=".937" stopColor="#FFC800" />
+          </linearGradient>
+          <linearGradient id="copilotGradientD" x1="14.5" x2="15.75" y1="4" y2="32.885" gradientUnits="userSpaceOnUse">
+            <stop stopColor="#3DCBFF" />
+            <stop offset=".247" stopColor="#0588F7" stopOpacity="0" />
+          </linearGradient>
+          <linearGradient
+            id="copilotGradientF"
+            x1="42.586"
+            x2="42.569"
+            y1="13.346"
+            y2="21.215"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop offset=".058" stopColor="#F8ADFA" />
+            <stop offset=".708" stopColor="#A86EDD" stopOpacity="0" />
+          </linearGradient>
+        </defs>
+        <path
+          fill="url(#copilotGradientA)"
+          d="M34.142 7.325A4.63 4.63 0 0 0 29.7 4h-1.35a4.63 4.63 0 0 0-4.554 3.794L21.48 20.407l.575-1.965a4.63 4.63 0 0 1 4.444-3.33h7.853l3.294 1.282 3.175-1.283h-.926a4.63 4.63 0 0 1-4.443-3.325l-1.31-4.461z"
+        />
+        <path
+          fill="url(#copilotGradientB)"
+          d="M14.33 40.656A4.63 4.63 0 0 0 18.779 44h2.87a4.63 4.63 0 0 0 4.629-4.51l.312-12.163-.654 2.233a4.63 4.63 0 0 1-4.443 3.329h-7.919l-2.823-1.532-3.057 1.532h.912a4.63 4.63 0 0 1 4.447 3.344l1.279 4.423z"
+        />
+        <path
+          fill="url(#copilotGradientC)"
+          d="M29.5 4H13.46c-4.583 0-7.332 6.057-9.165 12.113C2.123 23.29-.72 32.885 7.503 32.885h6.925a4.63 4.63 0 0 0 4.456-3.358 2078.617 2078.617 0 0 1 4.971-17.156c.843-2.843 1.544-5.284 2.621-6.805C27.08 4.714 28.086 4 29.5 4z"
+        />
+        <path
+          fill="url(#copilotGradientD)"
+          d="M29.5 4H13.46c-4.583 0-7.332 6.057-9.165 12.113C2.123 23.29-.72 32.885 7.503 32.885h6.925a4.63 4.63 0 0 0 4.456-3.358 2078.617 2078.617 0 0 1 4.971-17.156c.843-2.843 1.544-5.284 2.621-6.805C27.08 4.714 28.086 4 29.5 4z"
+        />
+        <path
+          fill="url(#copilotGradientE)"
+          d="M18.498 44h16.04c4.582 0 7.332-6.058 9.165-12.115 2.171-7.177 5.013-16.775-3.208-16.775h-6.926a4.63 4.63 0 0 0-4.455 3.358 2084.036 2084.036 0 0 1-4.972 17.16c-.842 2.843-1.544 5.285-2.62 6.806-.604.852-1.61 1.566-3.024 1.566z"
+        />
+        <path
+          fill="url(#copilotGradientF)"
+          d="M18.498 44h16.04c4.582 0 7.332-6.058 9.165-12.115 2.171-7.177 5.013-16.775-3.208-16.775h-6.926a4.63 4.63 0 0 0-4.455 3.358 2084.036 2084.036 0 0 1-4.972 17.16c-.842 2.843-1.544 5.285-2.62 6.806-.604.852-1.61 1.566-3.024 1.566z"
+        />
+      </svg>
+    </a>
+  </LogoSuite.Logobar>
+</LogoSuite>
+```
+
 ### Optional heading and description
 
 ```jsx
@@ -445,6 +623,30 @@ Logobars using the `emphasis` variant will appear with relatively higher contras
 </Stack>
 ```
 
+### Gridline variant
+
+The `gridline` variant displays the heading and description above the logos in a single-column layout.
+
+```jsx
+<LogoSuite variant="gridline">
+  <LogoSuite.Heading>Trusted by the world's leading organizations</LogoSuite.Heading>
+  <LogoSuite.Logobar marquee>
+    <svg role="img" viewBox="0 0 300 100">
+      <title>Placeholder logo</title>
+      <rect width="100%" height="100%" />
+    </svg>
+    <svg role="img" viewBox="0 0 300 100">
+      <title>Placeholder logo</title>
+      <rect width="100%" height="100%" />
+    </svg>
+    <svg role="img" viewBox="0 0 300 100">
+      <title>Placeholder logo</title>
+      <rect width="100%" height="100%" />
+    </svg>
+  </LogoSuite.Logobar>
+</LogoSuite>
+```
+
 ### Gridline expressive variant
 
 The `gridline-expressive` variant displays the logo suite in a side-by-side layout with heading/description on the left and logos on the right, separated by a vertical border.
@@ -637,11 +839,11 @@ The `takeoverButton` prop on `LogoSuite.Logobar` adds an interactive hover effec
 
 ### LogoSuite
 
-| Name         | Type                                 | Default     | Description                                                 |
-| :----------- | :----------------------------------- | :---------- | :---------------------------------------------------------- |
-| `align`      | `'start' \| 'center' \| 'justify'`   | `'center'`  | The horizontal alignment of the LogoSuite.                  |
-| `hasDivider` | `boolean`                            | `true`      | Whether to render a divider immediately after the LogoSuite |
-| `variant`    | `'default' \| 'gridline-expressive'` | `'default'` | The presentational variant of the LogoSuite.                |
+| Name         | Type                                               | Default     | Description                                                 |
+| :----------- | :------------------------------------------------- | :---------- | :---------------------------------------------------------- |
+| `align`      | `'start' \| 'center' \| 'justify'`                 | `'center'`  | The horizontal alignment of the LogoSuite.                  |
+| `hasDivider` | `boolean`                                          | `true`      | Whether to render a divider immediately after the LogoSuite |
+| `variant`    | `'default' \| 'gridline' \| 'gridline-expressive'` | `'default'` | The presentational variant of the LogoSuite.                |
 
 ### LogoSuite.Heading `Required`
 
@@ -657,11 +859,11 @@ Forwards all props from the [Text component](../../typography/Text/index.md), in
 
 ### LogoSuite.Logobar
 
-| Name             | Type                                    | Default     | Description                                                                                   |
-| :--------------- | :-------------------------------------- | :---------- | :-------------------------------------------------------------------------------------------- |
-| `children`       |                                         | `undefined` | Logobar requires SVG or Image elements to render correctly                                    |
-| `marquee`        | `boolean`                               | `false`     | Enables an optional marquee effect.                                                           |
-| `marqueeSpeed`   | `'slow' \| 'normal'`                    | `'normal'`  | The speed of the marquee effect.                                                              |
-| `gap`            | `'default' \| 'condensed'`              | `'default'` | The gap between logos.                                                                        |
-| `variant`        | `'muted' \| 'emphasis'`                 | `undefined` | The stylistic variant of the LogoBar.                                                         |
-| `takeoverButton` | `` `{label: string \| href: string}` `` | `undefined` | Displays a takeover button on hover/focus. Cannot be used with `marquee`. Requires a `label`. |
+| Name             | Type                                    | Default     | Description                                                                                                       |
+| :--------------- | :-------------------------------------- | :---------- | :---------------------------------------------------------------------------------------------------------------- |
+| `children`       |                                         | `undefined` | SVG/Image elements, either all unlinked or all wrapped in native anchors. Custom link components are unsupported. |
+| `marquee`        | `boolean`                               | `false`     | Enables an optional marquee effect.                                                                               |
+| `marqueeSpeed`   | `'slow' \| 'normal'`                    | `'normal'`  | The speed of the marquee effect.                                                                                  |
+| `gap`            | `'default' \| 'condensed'`              | `'default'` | The gap between logos.                                                                                            |
+| `variant`        | `'muted' \| 'emphasis'`                 | `undefined` | The stylistic variant of the LogoBar.                                                                             |
+| `takeoverButton` | `` `{label: string \| href: string}` `` | `undefined` | Displays a takeover button on hover/focus. Cannot be used with `marquee`. Requires a `label`.                     |

package/docs/components/RiverBreakoutTabs/index.md

@@ -56,6 +56,40 @@ import {RiverBreakoutTabs} from '@primer/react-brand'
 </Section>
 ```
 
+### Buttons in content
+
+Place action buttons inside `RiverBreakoutTabs.Content`. They remain outside the desktop tab controls, so people can focus and activate them independently.
+
+```jsx
+<Section>
+  <RiverBreakoutTabs>
+    <RiverBreakoutTabs.A11yHeading>Plan and review work</RiverBreakoutTabs.A11yHeading>
+
+    <RiverBreakoutTabs.Item>
+      <RiverBreakoutTabs.Heading>Plan</RiverBreakoutTabs.Heading>
+      <RiverBreakoutTabs.Content>
+        <Text>Break large issues into practical implementation steps.</Text>
+        <Button>Start planning</Button>
+      </RiverBreakoutTabs.Content>
+      <RiverBreakoutTabs.Visual>
+        <img src="/images/placeholder-1.png" alt="Planning workflow in editor" />
+      </RiverBreakoutTabs.Visual>
+    </RiverBreakoutTabs.Item>
+
+    <RiverBreakoutTabs.Item>
+      <RiverBreakoutTabs.Heading>Review</RiverBreakoutTabs.Heading>
+      <RiverBreakoutTabs.Content>
+        <Text>Keep discussion, suggestions, and diffs together while you review.</Text>
+        <Button>Start reviewing</Button>
+      </RiverBreakoutTabs.Content>
+      <RiverBreakoutTabs.Visual>
+        <img src="/images/placeholder-2.png" alt="Review workflow with shared context" />
+      </RiverBreakoutTabs.Visual>
+    </RiverBreakoutTabs.Item>
+  </RiverBreakoutTabs>
+</Section>
+```
+
 ### With an optional background and inset media
 
 ```jsx

package/docs/index.md

@@ -1,6 +1,6 @@
-# Primer Brand docs (v0.79.0)
+# Primer Brand docs (v0.79.1-rc.5d6b749b)
 
-These docs are bundled with `@primer/react-brand@0.79.0` and match your installed version.
+These docs are bundled with `@primer/react-brand@0.79.1-rc.5d6b749b` and match your installed version.
 
 New here? Start with [Getting started](getting-started/index.md) for installation, global
 stylesheet and font setup. Component directories are named after their import (e.g.

package/esm/LogoSuite/LogoSuite.d.ts

@@ -22,7 +22,7 @@ export type LogoSuiteProps = {
     /**
      * Alternative presentation
      */
-    variant?: 'default' | 'gridline-expressive';
+    variant?: 'default' | 'gridline' | 'gridline-expressive';
 } & BaseProps<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>;
 export type LogoSuiteHeadingProps = BaseProps<HTMLHeadingElement> & HeadingProps & {
     /**
@@ -34,6 +34,10 @@ export type LogoSuiteDescriptionProps = BaseProps<HTMLParagraphElement> & TextPr
     children: React.ReactNode | React.ReactNode[];
 };
 export type LogoSuiteLogoBarProps = BaseProps<HTMLDivElement> & {
+    /**
+     * The logos to display in the LogoBar.
+     * Accepts either SVG/Image elements or logos wrapped with links
+     */
     children: React.ReactNode | React.ReactNode[];
     /**
      * The gap between logos

package/esm/LogoSuite/LogoSuite.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LogoSuite.d.ts","sourceRoot":"","sources":["../../src/LogoSuite/LogoSuite.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAC,KAAK,iBAAiB,EAAkE,MAAM,OAAO,CAAA;AAGpH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AACnD,OAAO,EAAU,YAAY,EAA2B,SAAS,EAAe,MAAM,KAAK,CAAA;AAE3F;;GAEG;AACH,OAAO,6GAA6G,CAAA;AACpH,OAAO,gGAAgG,CAAA;AAYvG,MAAM,MAAM,cAAc,GAAG;IAC3B;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAA;IACtC;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,qBAAqB,CAAA;CAC5C,GAAG,SAAS,CAAC,cAAc,CAAC,GAC3B,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;AAuEtC,MAAM,MAAM,qBAAqB,GAAG,SAAS,CAAC,kBAAkB,CAAC,GAC/D,YAAY,GAAG;IACb;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB,CAAA;AAiCH,MAAM,MAAM,yBAAyB,GAAG,SAAS,CAAC,oBAAoB,CAAC,GACrE,SAAS,GAAG;IACV,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;CAC9C,CAAA;AAgDH,MAAM,MAAM,qBAAqB,GAAG,SAAS,CAAC,cAAc,CAAC,GAAG;IAC9D,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;IAC7C;;OAEG;IACH,GAAG,CAAC,EAAE,SAAS,GAAG,WAAW,CAAA;IAC7B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAA;IACzC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,UAAU,CAAA;IAC9B;;OAEG;IACH,cAAc,CAAC,EAAE;QACf,KAAK,EAAE,MAAM,CAAA;KACd,GAAG,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC,GACjE,SAAS,CAAC,iBAAiB,CAAC,CAAA;CAC/B,CAAA;AAmID;;;GAGG;AACH,eAAO,MAAM,SAAS,iFAxTnB,iBAAiB,CAAC,cAAc,CAAC;;;;;;;;;;;;;;kBAuGtB,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE;;;;;;;;;;;;;kBAAnC,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE;;;;;;;;;;;;;kBAAnC,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE;;;;;;;;;;;;;kBAAnC,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE;;;;;;;;;;;;;kBAAnC,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE;;;;;;;CAsN/C,CAAA"}
+{"version":3,"file":"LogoSuite.d.ts","sourceRoot":"","sources":["../../src/LogoSuite/LogoSuite.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAC,KAAK,iBAAiB,EAAkE,MAAM,OAAO,CAAA;AAGpH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AACnD,OAAO,EAAU,YAAY,EAA2B,SAAS,EAAe,MAAM,KAAK,CAAA;AAG3F;;GAEG;AACH,OAAO,6GAA6G,CAAA;AACpH,OAAO,gGAAgG,CAAA;AAYvG,MAAM,MAAM,cAAc,GAAG;IAC3B;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAA;IACtC;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,qBAAqB,CAAA;CACzD,GAAG,SAAS,CAAC,cAAc,CAAC,GAC3B,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;AA4EtC,MAAM,MAAM,qBAAqB,GAAG,SAAS,CAAC,kBAAkB,CAAC,GAC/D,YAAY,GAAG;IACb;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB,CAAA;AAiCH,MAAM,MAAM,yBAAyB,GAAG,SAAS,CAAC,oBAAoB,CAAC,GACrE,SAAS,GAAG;IACV,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;CAC9C,CAAA;AAgDH,MAAM,MAAM,qBAAqB,GAAG,SAAS,CAAC,cAAc,CAAC,GAAG;IAC9D;;;OAGG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;IAC7C;;OAEG;IACH,GAAG,CAAC,EAAE,SAAS,GAAG,WAAW,CAAA;IAC7B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAA;IACzC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,UAAU,CAAA;IAC9B;;OAEG;IACH,cAAc,CAAC,EAAE;QACf,KAAK,EAAE,MAAM,CAAA;KACd,GAAG,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC,GACjE,SAAS,CAAC,iBAAiB,CAAC,CAAA;CAC/B,CAAA;AAmJD;;;GAGG;AACH,eAAO,MAAM,SAAS,iFAjVnB,iBAAiB,CAAC,cAAc,CAAC;;;;;;;;;;;;;;kBA4GtB,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE;;;;;;;;;;;;;kBAAnC,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE;;;;;;;;;;;;;kBAAnC,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE;;;;;;;;;;;;;kBAAnC,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE;;;;;;;;;;;;;kBAAnC,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE;;;;;;;CA0O/C,CAAA"}

package/esm/LogoSuite/LogoSuite.js

@@ -5,7 +5,7 @@ import { Text as r } from "../Text/Text.js";
 import { Heading as i, defaultHeadingTag as a } from "../Heading/Heading.js";
 import { Button as o } from "../Button/Button.js";
 import { PauseIcon as s } from "../node_modules/@primer/octicons-react/dist/icons/PauseIcon.js";
-import { PlayIcon as c } from "../node_modules/@primer/octicons-react/dist/icons/PlayIcon.js";
+import { PlayIcon as c } from "../PlayIcon.js";
 import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/logosuite/base-DTi5Rx4y.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/logosuite/colors-with-modes-B8ia26TA.css';/* empty css                                                                                                       */
 /* empty css                                                                                          */
 import l from "./LogoSuite.module.js";
@@ -20,20 +20,20 @@ var y = {
 }, b = ({ align: n = "center", children: r, className: i, hasDivider: a = !0, variant: o = "default", "data-testid": s }) => {
 	let c = m(() => u.Children.toArray(r), [r]), d = c.find((e) => u.isValidElement(e) && e.type === x), f = c.find((e) => u.isValidElement(e) && e.type === S), p = c.find((e) => u.isValidElement(e) && e.type === w);
 	d || (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && console.warn("LogoSuite: Heading child is required. You may use `visuallyHidden` to hide it from view.");
-	let h = u.isValidElement(d) && d.props.visuallyHidden, y = o === "gridline-expressive", b = y && (d && !h || f);
+	let h = u.isValidElement(d) && d.props.visuallyHidden, y = o === "gridline", b = o === "gridline-expressive", C = y || b, T = C && (d && !h || f);
 	return /* @__PURE__ */ _("div", {
 		className: e(l.LogoSuite, l[`LogoSuite--${n}`], a && l["LogoSuite--hasDivider"], l[`LogoSuite--${o}`], i),
 		"data-testid": s,
-		children: y ? /* @__PURE__ */ v(t, {
+		children: C ? /* @__PURE__ */ v(t, {
 			className: l.LogoSuite__content,
-			children: [b && /* @__PURE__ */ v(t.Column, {
-				span: { large: 3 },
+			children: [T && /* @__PURE__ */ v(t.Column, {
+				span: { large: b ? 3 : 12 },
 				className: l.LogoSuite__textContainer,
 				children: [d, f]
 			}), /* @__PURE__ */ v(t.Column, {
-				span: { large: b ? 9 : 12 },
+				span: { large: b && T ? 9 : 12 },
 				className: l.LogoSuite__logobarContainer,
-				children: [!b && h && d, p]
+				children: [!T && h && d, p]
 			})]
 		}) : /* @__PURE__ */ v(g, { children: [
 			d,
@@ -67,26 +67,29 @@ var y = {
 		"aria-label": e ? "Pause animation" : "Play animation",
 		children: _(e ? s : c, {})
 	});
-}, w = d(({ className: t, children: r, gap: i = "default", marquee: a = !1, marqueeSpeed: s = "normal", variant: c = "muted", takeoverButton: u, ...d }, m) => {
-	let g = n(), [b, x] = h(() => a && !g && s !== "idle");
+}, w = d(({ className: t, children: r, gap: i = "default", marquee: a = !1, marqueeSpeed: s = "normal", variant: c = "muted", takeoverButton: d, ...m }, g) => {
+	let b = n(), [x, S] = h(() => a && !b && s !== "idle");
 	p(() => {
-		x(a && !g && s !== "idle");
+		S(a && !b && s !== "idle");
 	}, [
 		a,
-		g,
+		b,
 		s
-	]), a && u && (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && console.warn("LogoSuite.Logobar: `takeoverButton` cant be used with `marquee` prop due to accessibility risks. Set `marquee={false}` to use the takeover feature.");
-	let S = {
-		ref: m,
-		className: e(l.LogoSuite__logobar, l[`LogoSuite__logobar--variant-${c}`], l[`LogoSuite__logobar--gap-${i}`], t),
-		...d
-	}, [w, T] = h(!1), E = f(() => {
-		T(!0);
-	}, []), D = f((e) => {
-		e.currentTarget.contains(e.relatedTarget) || T(!1);
-	}, []), O = () => {
-		if (!u) return null;
-		let { className: t, label: n, ref: r, ...i } = u;
+	]), a && d && (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && console.warn("LogoSuite.Logobar: `takeoverButton` cant be used with `marquee` prop due to accessibility risks. Set `marquee={false}` to use the takeover feature.");
+	let w = (e) => {
+		let t = u.Children.toArray(e);
+		return t.length > 0 && t.every((e) => u.isValidElement(e) ? e.type === "a" || e.type === u.Fragment && w(e.props.children) : !1);
+	}, T = w(r), E = {
+		ref: g,
+		className: e(l.LogoSuite__logobar, l[`LogoSuite__logobar--variant-${c}`], l[`LogoSuite__logobar--gap-${i}`], T && l["LogoSuite__logobar--has-linked-logos"], t),
+		...m
+	}, [D, O] = h(!1), k = f(() => {
+		O(!0);
+	}, []), A = f((e) => {
+		e.currentTarget.contains(e.relatedTarget) || O(!1);
+	}, []), j = () => {
+		if (!d) return null;
+		let { className: t, label: n, ref: r, ...i } = d;
 		return /* @__PURE__ */ _("div", {
 			className: l["LogoSuite__logobar-takeoverButtonContainer"],
 			children: /* @__PURE__ */ _(o, {
@@ -99,14 +102,14 @@ var y = {
 		});
 	};
 	if (a) {
-		let { className: t, ...n } = S, i = !b || g;
+		let { className: t, ...n } = E, i = !x || b;
 		return /* @__PURE__ */ v("div", {
 			...n,
 			className: e(l["LogoSuite__logobar--has-marquee"], t, i && l["LogoSuite__logobar--paused"]),
 			children: [/* @__PURE__ */ v("div", {
-				className: e(l["LogoSuite__logobar-marquee"], w && l["LogoSuite__logobar-marquee--focused"]),
-				onFocus: E,
-				onBlur: D,
+				className: e(l["LogoSuite__logobar-marquee"], D && l["LogoSuite__logobar-marquee--focused"]),
+				onFocus: k,
+				onBlur: A,
 				children: [/* @__PURE__ */ _("div", {
 					className: e(l["LogoSuite__logobar-marqueeGroup"], l[`LogoSuite__logobar-marqueeGroup--speed-${s}`]),
 					"data-testid": y.marqueeGroup,
@@ -118,21 +121,21 @@ var y = {
 					children: r
 				})]
 			}), /* @__PURE__ */ _(C, {
-				onPlayPause: x,
-				isPlaying: b
+				onPlayPause: S,
+				isPlaying: x
 			})]
 		});
 	}
-	if (u) {
-		let { className: t, ...n } = S;
+	if (d) {
+		let { className: t, ...n } = E;
 		return /* @__PURE__ */ v("div", {
 			...n,
 			className: e(t, l["LogoSuite__logobar--has-takeover"]),
-			children: [r, O()]
+			children: [r, j()]
 		});
 	}
 	return /* @__PURE__ */ _("div", {
-		...S,
+		...E,
 		children: r
 	});
 }), T = Object.assign(b, {

package/esm/LogoSuite/LogoSuite.js.map

@@ -1 +1 @@
-{"version":3,"file":"LogoSuite.js","names":[],"sources":["../../src/LogoSuite/LogoSuite.tsx"],"sourcesContent":["import {clsx} from 'clsx'\nimport React, {type PropsWithChildren, type Ref, forwardRef, useCallback, useEffect, useMemo, useState} from 'react'\nimport {useReducedMotion} from '../hooks/useReducedMotion'\nimport {PauseIcon, PlayIcon} from '@primer/octicons-react'\nimport type {BaseProps} from '../component-helpers'\nimport {Heading, HeadingProps, defaultHeadingTag, Text, TextProps, Grid, Button} from '../'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/logosuite/colors-with-modes.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/logosuite/base.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './LogoSuite.module.css'\n\nconst testIds = {\n  root: 'LogoSuite',\n  get marqueeGroup() {\n    return `${this.root}-marqueeGroup`\n  },\n}\n\nexport type LogoSuiteProps = {\n  /**\n   * The horizontal alignment of the LogoSuite.\n   */\n  align?: 'start' | 'center' | 'justify'\n  /**\n   * Whether to render a divider immediately after the LogoSuite.\n   */\n  hasDivider?: boolean\n  /**\n   * Test id for the root LogoSuite element.\n   */\n  'data-testid'?: string\n  /**\n   * Alternative presentation\n   */\n  variant?: 'default' | 'gridline-expressive'\n} & BaseProps<HTMLDivElement> &\n  React.HTMLAttributes<HTMLDivElement>\n\nconst LogoSuiteBase = ({\n  align = 'center',\n  children,\n  className,\n  hasDivider = true,\n  variant = 'default',\n  'data-testid': testId,\n}: PropsWithChildren<LogoSuiteProps>) => {\n  const childrenArray = useMemo(() => React.Children.toArray(children), [children])\n\n  const HeadingChild = childrenArray.find(child => {\n    return React.isValidElement(child) && child.type === _Heading\n  })\n\n  const DescriptionChild = childrenArray.find(child => {\n    return React.isValidElement(child) && child.type === _Description\n  })\n\n  const LogobarChild = childrenArray.find(child => {\n    return React.isValidElement(child) && child.type === _LogoBar\n  })\n\n  if (!HeadingChild) {\n    if (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test') {\n      // eslint-disable-next-line no-console\n      console.warn('LogoSuite: Heading child is required. You may use `visuallyHidden` to hide it from view.')\n    }\n  }\n\n  const isHeadingVisuallyHidden =\n    React.isValidElement<LogoSuiteHeadingProps>(HeadingChild) && HeadingChild.props.visuallyHidden\n  const isGridlineExpressive = variant === 'gridline-expressive'\n  const hasVisibleTextContent = isGridlineExpressive && ((HeadingChild && !isHeadingVisuallyHidden) || DescriptionChild)\n\n  return (\n    <div\n      className={clsx(\n        styles.LogoSuite,\n        styles[`LogoSuite--${align}`],\n        hasDivider && styles['LogoSuite--hasDivider'],\n        styles[`LogoSuite--${variant}`],\n        className,\n      )}\n      data-testid={testId}\n    >\n      {isGridlineExpressive ? (\n        <Grid className={styles['LogoSuite__content']}>\n          {hasVisibleTextContent && (\n            <Grid.Column span={{large: 3}} className={styles['LogoSuite__textContainer']}>\n              {HeadingChild}\n              {DescriptionChild}\n            </Grid.Column>\n          )}\n          <Grid.Column span={{large: hasVisibleTextContent ? 9 : 12}} className={styles['LogoSuite__logobarContainer']}>\n            {!hasVisibleTextContent && isHeadingVisuallyHidden && HeadingChild}\n            {LogobarChild}\n          </Grid.Column>\n        </Grid>\n      ) : (\n        <>\n          {HeadingChild}\n          {DescriptionChild}\n          {LogobarChild}\n        </>\n      )}\n    </div>\n  )\n}\n\nexport type LogoSuiteHeadingProps = BaseProps<HTMLHeadingElement> &\n  HeadingProps & {\n    /**\n     * Whether to visually hide the heading.\n     */\n    visuallyHidden?: boolean\n  }\n\nconst _Heading = forwardRef(\n  (\n    {\n      as = defaultHeadingTag,\n      size = 'subhead-large',\n      className,\n      children,\n      visuallyHidden,\n      ...props\n    }: PropsWithChildren<LogoSuiteHeadingProps>,\n    ref: Ref<HTMLHeadingElement>,\n  ) => {\n    return (\n      <Heading\n        ref={ref}\n        className={clsx(\n          styles['LogoSuite__heading'],\n          visuallyHidden && styles['LogoSuite__heading--visually-hidden'],\n          visuallyHidden && 'visually-hidden',\n          className,\n        )}\n        size={size}\n        as={as}\n        {...props}\n      >\n        {children}\n      </Heading>\n    )\n  },\n)\n\nexport type LogoSuiteDescriptionProps = BaseProps<HTMLParagraphElement> &\n  TextProps & {\n    children: React.ReactNode | React.ReactNode[]\n  }\n\nconst _Description = forwardRef(\n  (\n    {className, children, size = '200', variant = 'muted', ...props}: LogoSuiteDescriptionProps,\n    ref: Ref<HTMLParagraphElement>,\n  ) => {\n    return (\n      <Text\n        as=\"p\"\n        ref={ref}\n        size={size}\n        variant={variant}\n        className={clsx(styles['LogoSuite__description'], className)}\n        {...props}\n      >\n        {children}\n      </Text>\n    )\n  },\n)\n\ntype PlayPauseButtonProps = {\n  isPlaying?: boolean\n  onPlayPause?: (isPlaying: boolean) => void\n}\n\nconst PlayPauseButton = ({isPlaying = true, onPlayPause}: PlayPauseButtonProps) => {\n  const onClick = useCallback(() => {\n    onPlayPause?.(!isPlaying)\n  }, [onPlayPause, isPlaying])\n\n  /**\n   * aria-pressed is intentionally not used here to prevent potentially confusing screen reader announcements\n   * eg \"Play animation on\" or \"Pause animation off\"\n   */\n  return (\n    <button\n      className={styles['LogoSuite__logobar-playPauseButton']}\n      type=\"button\"\n      onClick={onClick}\n      aria-label={isPlaying ? 'Pause animation' : 'Play animation'}\n    >\n      {isPlaying ? <PauseIcon /> : <PlayIcon />}\n    </button>\n  )\n}\n\nexport type LogoSuiteLogoBarProps = BaseProps<HTMLDivElement> & {\n  children: React.ReactNode | React.ReactNode[]\n  /**\n   * The gap between logos\n   */\n  gap?: 'default' | 'condensed'\n  /**\n   * Enables an optional marquee effect\n   */\n  marquee?: boolean\n  /**\n   * The speed of the marquee effect\n   */\n  marqueeSpeed?: 'slow' | 'normal' | 'idle'\n  /**\n   * The stylistic variant of the LogoBar.\n   */\n  variant?: 'muted' | 'emphasis'\n  /**\n   * Displays an optional takeover button (as an anchor) on hover/focus.\n   */\n  takeoverButton?: {\n    label: string\n  } & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'children'> &\n    BaseProps<HTMLAnchorElement>\n}\n\nconst _LogoBar = forwardRef(\n  (\n    {\n      className,\n      children,\n      gap = 'default',\n      marquee = false,\n      marqueeSpeed = 'normal',\n      variant = 'muted',\n      takeoverButton,\n      ...props\n    }: LogoSuiteLogoBarProps,\n    ref: Ref<HTMLDivElement>,\n  ) => {\n    const prefersReducedMotion = useReducedMotion()\n    const [isPlaying, setIsPlaying] = useState(() => marquee && !prefersReducedMotion && marqueeSpeed !== 'idle')\n\n    useEffect(() => {\n      setIsPlaying(marquee && !prefersReducedMotion && marqueeSpeed !== 'idle')\n    }, [marquee, prefersReducedMotion, marqueeSpeed])\n\n    if (marquee && takeoverButton) {\n      if (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test') {\n        // eslint-disable-next-line no-console\n        console.warn(\n          'LogoSuite.Logobar: `takeoverButton` cant be used with `marquee` prop due to accessibility risks. Set `marquee={false}` to use the takeover feature.',\n        )\n      }\n    }\n\n    const defaultProps = {\n      ref,\n      className: clsx(\n        styles['LogoSuite__logobar'],\n        styles[`LogoSuite__logobar--variant-${variant}`],\n        styles[`LogoSuite__logobar--gap-${gap}`],\n        className,\n      ),\n      ...props,\n    }\n\n    const [isFocusWithin, setIsFocusWithin] = useState(false)\n\n    const handleFocus = useCallback(() => {\n      setIsFocusWithin(true)\n    }, [])\n\n    const handleBlur = useCallback((event: React.FocusEvent) => {\n      if (!event.currentTarget.contains(event.relatedTarget as Node)) {\n        setIsFocusWithin(false)\n      }\n    }, [])\n\n    const renderTakeoverButton = () => {\n      if (!takeoverButton) return null\n      const {className: takeoverButtonClassName, label, ref: _ref, ...takeoverButtonProps} = takeoverButton\n      return (\n        <div className={styles['LogoSuite__logobar-takeoverButtonContainer']}>\n          <Button\n            as=\"a\"\n            variant=\"primary\"\n            className={clsx(styles['LogoSuite__logobar-takeoverButton'], takeoverButtonClassName)}\n            {...takeoverButtonProps}\n          >\n            {label}\n          </Button>\n        </div>\n      )\n    }\n\n    if (marquee) {\n      const {className: marqueeDefaultClassName, ...restProps} = defaultProps\n      const shouldPause = !isPlaying || prefersReducedMotion\n      return (\n        <div\n          {...restProps}\n          className={clsx(\n            styles['LogoSuite__logobar--has-marquee'],\n            marqueeDefaultClassName,\n            shouldPause && styles['LogoSuite__logobar--paused'],\n          )}\n        >\n          <div\n            className={clsx(\n              styles['LogoSuite__logobar-marquee'],\n              isFocusWithin && styles['LogoSuite__logobar-marquee--focused'],\n            )}\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n          >\n            <div\n              className={clsx(\n                styles['LogoSuite__logobar-marqueeGroup'],\n                styles[`LogoSuite__logobar-marqueeGroup--speed-${marqueeSpeed}`],\n              )}\n              data-testid={testIds.marqueeGroup}\n            >\n              {children}\n            </div>\n            <div\n              inert\n              aria-hidden=\"true\"\n              className={clsx(\n                styles['LogoSuite__logobar-marqueeGroup'],\n                styles[`LogoSuite__logobar-marqueeGroup--speed-${marqueeSpeed}`],\n              )}\n            >\n              {children}\n            </div>\n          </div>\n          <PlayPauseButton onPlayPause={setIsPlaying} isPlaying={isPlaying} />\n        </div>\n      )\n    }\n\n    if (takeoverButton) {\n      const {className: defaultClassName, ...restProps} = defaultProps\n      return (\n        <div {...restProps} className={clsx(defaultClassName, styles['LogoSuite__logobar--has-takeover'])}>\n          {children}\n          {renderTakeoverButton()}\n        </div>\n      )\n    }\n\n    return <div {...defaultProps}>{children}</div>\n  },\n)\n\n/**\n * Use LogoSuite to present a list of logos, such as sponsors or vendors.\n * @see https://primer.style/brand/components/LogoSuite\n */\nexport const LogoSuite = Object.assign(LogoSuiteBase, {\n  Heading: _Heading,\n  Description: _Description,\n  Logobar: _LogoBar,\n  testIds,\n})\n"],"mappings":"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"}
+{"version":3,"file":"LogoSuite.js","names":[],"sources":["../../src/LogoSuite/LogoSuite.tsx"],"sourcesContent":["import {clsx} from 'clsx'\nimport React, {type PropsWithChildren, type Ref, forwardRef, useCallback, useEffect, useMemo, useState} from 'react'\nimport {useReducedMotion} from '../hooks/useReducedMotion'\nimport {PauseIcon} from '@primer/octicons-react'\nimport type {BaseProps} from '../component-helpers'\nimport {Heading, HeadingProps, defaultHeadingTag, Text, TextProps, Grid, Button} from '../'\nimport {PlayIcon} from '../PlayIcon'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/logosuite/colors-with-modes.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/logosuite/base.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './LogoSuite.module.css'\n\nconst testIds = {\n  root: 'LogoSuite',\n  get marqueeGroup() {\n    return `${this.root}-marqueeGroup`\n  },\n}\n\nexport type LogoSuiteProps = {\n  /**\n   * The horizontal alignment of the LogoSuite.\n   */\n  align?: 'start' | 'center' | 'justify'\n  /**\n   * Whether to render a divider immediately after the LogoSuite.\n   */\n  hasDivider?: boolean\n  /**\n   * Test id for the root LogoSuite element.\n   */\n  'data-testid'?: string\n  /**\n   * Alternative presentation\n   */\n  variant?: 'default' | 'gridline' | 'gridline-expressive'\n} & BaseProps<HTMLDivElement> &\n  React.HTMLAttributes<HTMLDivElement>\n\nconst LogoSuiteBase = ({\n  align = 'center',\n  children,\n  className,\n  hasDivider = true,\n  variant = 'default',\n  'data-testid': testId,\n}: PropsWithChildren<LogoSuiteProps>) => {\n  const childrenArray = useMemo(() => React.Children.toArray(children), [children])\n\n  const HeadingChild = childrenArray.find(child => {\n    return React.isValidElement(child) && child.type === _Heading\n  })\n\n  const DescriptionChild = childrenArray.find(child => {\n    return React.isValidElement(child) && child.type === _Description\n  })\n\n  const LogobarChild = childrenArray.find(child => {\n    return React.isValidElement(child) && child.type === _LogoBar\n  })\n\n  if (!HeadingChild) {\n    if (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test') {\n      // eslint-disable-next-line no-console\n      console.warn('LogoSuite: Heading child is required. You may use `visuallyHidden` to hide it from view.')\n    }\n  }\n\n  const isHeadingVisuallyHidden =\n    React.isValidElement<LogoSuiteHeadingProps>(HeadingChild) && HeadingChild.props.visuallyHidden\n  const isGridline = variant === 'gridline'\n  const isGridlineExpressive = variant === 'gridline-expressive'\n  const hasGridlineLayout = isGridline || isGridlineExpressive\n  const hasVisibleTextContent = hasGridlineLayout && ((HeadingChild && !isHeadingVisuallyHidden) || DescriptionChild)\n\n  return (\n    <div\n      className={clsx(\n        styles.LogoSuite,\n        styles[`LogoSuite--${align}`],\n        hasDivider && styles['LogoSuite--hasDivider'],\n        styles[`LogoSuite--${variant}`],\n        className,\n      )}\n      data-testid={testId}\n    >\n      {hasGridlineLayout ? (\n        <Grid className={styles['LogoSuite__content']}>\n          {hasVisibleTextContent && (\n            <Grid.Column span={{large: isGridlineExpressive ? 3 : 12}} className={styles['LogoSuite__textContainer']}>\n              {HeadingChild}\n              {DescriptionChild}\n            </Grid.Column>\n          )}\n          <Grid.Column\n            span={{large: isGridlineExpressive && hasVisibleTextContent ? 9 : 12}}\n            className={styles['LogoSuite__logobarContainer']}\n          >\n            {!hasVisibleTextContent && isHeadingVisuallyHidden && HeadingChild}\n            {LogobarChild}\n          </Grid.Column>\n        </Grid>\n      ) : (\n        <>\n          {HeadingChild}\n          {DescriptionChild}\n          {LogobarChild}\n        </>\n      )}\n    </div>\n  )\n}\n\nexport type LogoSuiteHeadingProps = BaseProps<HTMLHeadingElement> &\n  HeadingProps & {\n    /**\n     * Whether to visually hide the heading.\n     */\n    visuallyHidden?: boolean\n  }\n\nconst _Heading = forwardRef(\n  (\n    {\n      as = defaultHeadingTag,\n      size = 'subhead-large',\n      className,\n      children,\n      visuallyHidden,\n      ...props\n    }: PropsWithChildren<LogoSuiteHeadingProps>,\n    ref: Ref<HTMLHeadingElement>,\n  ) => {\n    return (\n      <Heading\n        ref={ref}\n        className={clsx(\n          styles['LogoSuite__heading'],\n          visuallyHidden && styles['LogoSuite__heading--visually-hidden'],\n          visuallyHidden && 'visually-hidden',\n          className,\n        )}\n        size={size}\n        as={as}\n        {...props}\n      >\n        {children}\n      </Heading>\n    )\n  },\n)\n\nexport type LogoSuiteDescriptionProps = BaseProps<HTMLParagraphElement> &\n  TextProps & {\n    children: React.ReactNode | React.ReactNode[]\n  }\n\nconst _Description = forwardRef(\n  (\n    {className, children, size = '200', variant = 'muted', ...props}: LogoSuiteDescriptionProps,\n    ref: Ref<HTMLParagraphElement>,\n  ) => {\n    return (\n      <Text\n        as=\"p\"\n        ref={ref}\n        size={size}\n        variant={variant}\n        className={clsx(styles['LogoSuite__description'], className)}\n        {...props}\n      >\n        {children}\n      </Text>\n    )\n  },\n)\n\ntype PlayPauseButtonProps = {\n  isPlaying?: boolean\n  onPlayPause?: (isPlaying: boolean) => void\n}\n\nconst PlayPauseButton = ({isPlaying = true, onPlayPause}: PlayPauseButtonProps) => {\n  const onClick = useCallback(() => {\n    onPlayPause?.(!isPlaying)\n  }, [onPlayPause, isPlaying])\n\n  /**\n   * aria-pressed is intentionally not used here to prevent potentially confusing screen reader announcements\n   * eg \"Play animation on\" or \"Pause animation off\"\n   */\n  return (\n    <button\n      className={styles['LogoSuite__logobar-playPauseButton']}\n      type=\"button\"\n      onClick={onClick}\n      aria-label={isPlaying ? 'Pause animation' : 'Play animation'}\n    >\n      {isPlaying ? <PauseIcon /> : <PlayIcon />}\n    </button>\n  )\n}\n\nexport type LogoSuiteLogoBarProps = BaseProps<HTMLDivElement> & {\n  /**\n   * The logos to display in the LogoBar.\n   * Accepts either SVG/Image elements or logos wrapped with links\n   */\n  children: React.ReactNode | React.ReactNode[]\n  /**\n   * The gap between logos\n   */\n  gap?: 'default' | 'condensed'\n  /**\n   * Enables an optional marquee effect\n   */\n  marquee?: boolean\n  /**\n   * The speed of the marquee effect\n   */\n  marqueeSpeed?: 'slow' | 'normal' | 'idle'\n  /**\n   * The stylistic variant of the LogoBar.\n   */\n  variant?: 'muted' | 'emphasis'\n  /**\n   * Displays an optional takeover button (as an anchor) on hover/focus.\n   */\n  takeoverButton?: {\n    label: string\n  } & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'children'> &\n    BaseProps<HTMLAnchorElement>\n}\n\nconst _LogoBar = forwardRef(\n  (\n    {\n      className,\n      children,\n      gap = 'default',\n      marquee = false,\n      marqueeSpeed = 'normal',\n      variant = 'muted',\n      takeoverButton,\n      ...props\n    }: LogoSuiteLogoBarProps,\n    ref: Ref<HTMLDivElement>,\n  ) => {\n    const prefersReducedMotion = useReducedMotion()\n    const [isPlaying, setIsPlaying] = useState(() => marquee && !prefersReducedMotion && marqueeSpeed !== 'idle')\n\n    useEffect(() => {\n      setIsPlaying(marquee && !prefersReducedMotion && marqueeSpeed !== 'idle')\n    }, [marquee, prefersReducedMotion, marqueeSpeed])\n\n    if (marquee && takeoverButton) {\n      if (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test') {\n        // eslint-disable-next-line no-console\n        console.warn(\n          'LogoSuite.Logobar: `takeoverButton` cant be used with `marquee` prop due to accessibility risks. Set `marquee={false}` to use the takeover feature.',\n        )\n      }\n    }\n\n    const checkAllLogosAreLinks = (nodes: React.ReactNode): boolean => {\n      const childNodes = React.Children.toArray(nodes)\n\n      return (\n        childNodes.length > 0 &&\n        childNodes.every(child => {\n          if (!React.isValidElement<PropsWithChildren>(child)) return false\n          if (child.type === 'a') return true\n          return child.type === React.Fragment && checkAllLogosAreLinks(child.props.children)\n        })\n      )\n    }\n\n    const hasLinkedLogos = checkAllLogosAreLinks(children)\n\n    const defaultProps = {\n      ref,\n      className: clsx(\n        styles['LogoSuite__logobar'],\n        styles[`LogoSuite__logobar--variant-${variant}`],\n        styles[`LogoSuite__logobar--gap-${gap}`],\n        hasLinkedLogos && styles['LogoSuite__logobar--has-linked-logos'],\n        className,\n      ),\n      ...props,\n    }\n\n    const [isFocusWithin, setIsFocusWithin] = useState(false)\n\n    const handleFocus = useCallback(() => {\n      setIsFocusWithin(true)\n    }, [])\n\n    const handleBlur = useCallback((event: React.FocusEvent) => {\n      if (!event.currentTarget.contains(event.relatedTarget as Node)) {\n        setIsFocusWithin(false)\n      }\n    }, [])\n\n    const renderTakeoverButton = () => {\n      if (!takeoverButton) return null\n      const {className: takeoverButtonClassName, label, ref: _ref, ...takeoverButtonProps} = takeoverButton\n      return (\n        <div className={styles['LogoSuite__logobar-takeoverButtonContainer']}>\n          <Button\n            as=\"a\"\n            variant=\"primary\"\n            className={clsx(styles['LogoSuite__logobar-takeoverButton'], takeoverButtonClassName)}\n            {...takeoverButtonProps}\n          >\n            {label}\n          </Button>\n        </div>\n      )\n    }\n\n    if (marquee) {\n      const {className: marqueeDefaultClassName, ...restProps} = defaultProps\n      const shouldPause = !isPlaying || prefersReducedMotion\n      return (\n        <div\n          {...restProps}\n          className={clsx(\n            styles['LogoSuite__logobar--has-marquee'],\n            marqueeDefaultClassName,\n            shouldPause && styles['LogoSuite__logobar--paused'],\n          )}\n        >\n          <div\n            className={clsx(\n              styles['LogoSuite__logobar-marquee'],\n              isFocusWithin && styles['LogoSuite__logobar-marquee--focused'],\n            )}\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n          >\n            <div\n              className={clsx(\n                styles['LogoSuite__logobar-marqueeGroup'],\n                styles[`LogoSuite__logobar-marqueeGroup--speed-${marqueeSpeed}`],\n              )}\n              data-testid={testIds.marqueeGroup}\n            >\n              {children}\n            </div>\n            <div\n              inert\n              aria-hidden=\"true\"\n              className={clsx(\n                styles['LogoSuite__logobar-marqueeGroup'],\n                styles[`LogoSuite__logobar-marqueeGroup--speed-${marqueeSpeed}`],\n              )}\n            >\n              {children}\n            </div>\n          </div>\n          <PlayPauseButton onPlayPause={setIsPlaying} isPlaying={isPlaying} />\n        </div>\n      )\n    }\n\n    if (takeoverButton) {\n      const {className: defaultClassName, ...restProps} = defaultProps\n      return (\n        <div {...restProps} className={clsx(defaultClassName, styles['LogoSuite__logobar--has-takeover'])}>\n          {children}\n          {renderTakeoverButton()}\n        </div>\n      )\n    }\n\n    return <div {...defaultProps}>{children}</div>\n  },\n)\n\n/**\n * Use LogoSuite to present a list of logos, such as sponsors or vendors.\n * @see https://primer.style/brand/components/LogoSuite\n */\nexport const LogoSuite = Object.assign(LogoSuiteBase, {\n  Heading: _Heading,\n  Description: _Description,\n  Logobar: _LogoBar,\n  testIds,\n})\n"],"mappings":"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"}

package/esm/LogoSuite/LogoSuite.module-BUJyNoZs.css

@@ -0,0 +1 @@
+.Primer_Brand__LogoSuite-module__LogoSuite___bHvbJ{padding-block-end:var(--brand-LogoSuite-logobar-rowGap)}.Primer_Brand__LogoSuite-module__LogoSuite--default___mbLiN+.Primer_Brand__LogoSuite-module__LogoSuite--default___mbLiN{padding-block-start:var(--brand-LogoSuite-logobar-rowGap)}.Primer_Brand__LogoSuite-module__LogoSuite___bHvbJ:not(:has(.Primer_Brand__LogoSuite-module__LogoSuite__description___J_Sms)) .Primer_Brand__LogoSuite-module__LogoSuite__heading___PsSGL{font-family:var(--brand-fontStack-monospace);font-weight:var(--brand-text-weight-100);font-size:var(--brand-text-size-100);line-height:var(--brand-text-lineHeight-100);letter-spacing:var(--brand-text-letterSpacing-100);text-transform:uppercase;color:var(--brand-color-text-muted)}.Primer_Brand__LogoSuite-module__LogoSuite__heading___PsSGL+.Primer_Brand__LogoSuite-module__LogoSuite__description___J_Sms{padding-block-start:var(--base-size-16)}.Primer_Brand__LogoSuite-module__LogoSuite--start___zqwlX{text-align:left}.Primer_Brand__LogoSuite-module__LogoSuite--center___j119b,.Primer_Brand__LogoSuite-module__LogoSuite--justify___MTk0u{text-align:center}.Primer_Brand__LogoSuite-module__LogoSuite--default___mbLiN:not(.Primer_Brand__LogoSuite-module__LogoSuite___bHvbJ+.Primer_Brand__LogoSuite-module__LogoSuite___bHvbJ) .Primer_Brand__LogoSuite-module__LogoSuite__logobar___3IogC{padding-block-start:var(--base-size-32)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar___3IogC{row-gap:var(--brand-LogoSuite-logobar-rowGap);flex-wrap:wrap;justify-content:center;display:flex}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--gap-default___sGwUx{--marquee-gap:var(--brand-LogoSuite-logobar-marquee-gap-default);-moz-column-gap:var(--brand-LogoSuite-logobar-columnGap-default);column-gap:var(--brand-LogoSuite-logobar-columnGap-default)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--gap-condensed___T86E8{--marquee-gap:var(--brand-LogoSuite-logobar-marquee-gap-condensed);-moz-column-gap:var(--brand-LogoSuite-logobar-columnGap-condensed);column-gap:var(--brand-LogoSuite-logobar-columnGap-condensed)}.Primer_Brand__LogoSuite-module__LogoSuite___bHvbJ:not(.Primer_Brand__LogoSuite-module__LogoSuite___bHvbJ+.Primer_Brand__LogoSuite-module__LogoSuite___bHvbJ) .Primer_Brand__LogoSuite-module__LogoSuite__heading___PsSGL:not(.Primer_Brand__LogoSuite-module__LogoSuite__heading--visually-hidden___oZzlO)+.Primer_Brand__LogoSuite-module__LogoSuite__logobar___3IogC,.Primer_Brand__LogoSuite-module__LogoSuite___bHvbJ:not(.Primer_Brand__LogoSuite-module__LogoSuite___bHvbJ+.Primer_Brand__LogoSuite-module__LogoSuite___bHvbJ) .Primer_Brand__LogoSuite-module__LogoSuite__description___J_Sms+.Primer_Brand__LogoSuite-module__LogoSuite__logobar___3IogC{margin-block-start:var(--base-size-44);padding-block-start:0}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--variant-muted___iM9ru svg,.Primer_Brand__LogoSuite-module__LogoSuite__logobar--variant-muted___iM9ru img,.Primer_Brand__LogoSuite-module__LogoSuite__logobar--variant-muted___iM9ru a,.Primer_Brand__LogoSuite-module__LogoSuite__logobar--variant-emphasis___yvuYR svg,.Primer_Brand__LogoSuite-module__LogoSuite__logobar--variant-emphasis___yvuYR img,.Primer_Brand__LogoSuite-module__LogoSuite__logobar--variant-emphasis___yvuYR a{width:auto;height:var(--base-size-32)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar___3IogC img{display:block}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-linked-logos___52pLk :where(a){color:var(--brand-color-text-default)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--variant-muted___iM9ru:where(:not(.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-linked-logos___52pLk)) svg,.Primer_Brand__LogoSuite-module__LogoSuite__logobar--variant-muted___iM9ru:where(:not(.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-linked-logos___52pLk)) path{fill:var(--brand-LogoSuite-color-logo-muted)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--variant-muted___iM9ru:where(:not(.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-linked-logos___52pLk)) img{filter:var(--brand-LogoSuite-color-logo-filter-muted)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--variant-emphasis___yvuYR:where(:not(.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-linked-logos___52pLk)) svg,.Primer_Brand__LogoSuite-module__LogoSuite__logobar--variant-emphasis___yvuYR:where(:not(.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-linked-logos___52pLk)) path{fill:var(--brand-LogoSuite-color-logo-emphasis)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--variant-emphasis___yvuYR:where(:not(.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-linked-logos___52pLk)) img{filter:var(--brand-LogoSuite-color-logo-filter-emphasis)}.Primer_Brand__LogoSuite-module__LogoSuite--start___zqwlX .Primer_Brand__LogoSuite-module__LogoSuite__logobar___3IogC{justify-content:center}@media screen and (width>=48rem){.Primer_Brand__LogoSuite-module__LogoSuite--justify___MTk0u .Primer_Brand__LogoSuite-module__LogoSuite__logobar___3IogC{justify-content:space-between}}.Primer_Brand__LogoSuite-module__LogoSuite__logobar___3IogC a:focus-visible{outline:var(--brand-borderWidth-thick) solid var(--brand-color-focus);outline-offset:var(--base-size-2);border-radius:var(--base-size-4)}.Primer_Brand__LogoSuite-module__LogoSuite--hasDivider___Wj8u_{border-bottom:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-marquee___tyW6K{align-items:center;gap:var(--base-size-24);flex-direction:row;max-width:100vw;margin:auto;display:flex;position:relative}.Primer_Brand__LogoSuite-module__LogoSuite__logobar-marqueeGroup___bUhyS{justify-content:space-around;align-items:center;gap:var(--marquee-gap);min-width:100%;animation-name:Primer_Brand__LogoSuite-module__LogobarScrollX___eGhi4;animation-duration:var(--brand-LogoSuite-logobar-marquee-default);flex-shrink:0;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:normal;animation-play-state:running;animation-fill-mode:none;display:flex}.Primer_Brand__LogoSuite-module__LogoSuite__logobar-marqueeGroup--speed-default___nsm9D{animation-duration:var(--brand-LogoSuite-logobar-marquee-default)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar-marqueeGroup--speed-slow___NZHrb{animation-duration:var(--brand-LogoSuite-logobar-marquee-slow)}@keyframes Primer_Brand__LogoSuite-module__LogobarScrollX___eGhi4{0%{transform:translate(0)}to{transform:translateX(calc(-100% - var(--marquee-gap)))}}.Primer_Brand__LogoSuite-module__LogoSuite__logobar-marquee____s6pK:hover .Primer_Brand__LogoSuite-module__LogoSuite__logobar-marqueeGroup___bUhyS,.Primer_Brand__LogoSuite-module__LogoSuite__logobar-marquee____s6pK:focus-within .Primer_Brand__LogoSuite-module__LogoSuite__logobar-marqueeGroup___bUhyS{animation-play-state:paused}.Primer_Brand__LogoSuite-module__LogoSuite__logobar-marquee____s6pK{padding-block:var(--base-size-4);-webkit-user-select:none;user-select:none;gap:var(--marquee-gap);flex:1;min-width:0;display:flex;overflow:hidden visible;-webkit-mask-image:linear-gradient(90deg,#0000,#000 20% 80%,#0000);mask-image:linear-gradient(90deg,#0000,#000 20% 80%,#0000)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--paused___7p9ka *{animation-play-state:paused!important}.Primer_Brand__LogoSuite-module__LogoSuite__logobar-marquee--focused___zizoE .Primer_Brand__LogoSuite-module__LogoSuite__logobar-marqueeGroup___bUhyS{animation-name:none}.Primer_Brand__LogoSuite-module__LogoSuite__logobar-playPauseButton___KDfie{cursor:pointer;width:var(--base-size-32);height:var(--base-size-32);border-radius:var(--base-size-48);border:none;border:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);background-color:var(--brand-LogoSuite-color-control-rest);transition:background-color var(--brand-animation-duration-faster);flex-shrink:0;justify-content:center;align-items:center;margin:0;padding:0;display:flex}.Primer_Brand__LogoSuite-module__LogoSuite__logobar-playPauseButton___KDfie:hover{background-color:var(--brand-LogoSuite-color-control-hover)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar-playPauseButton___KDfie:focus-visible{outline:var(--base-size-4) solid var(--brand-color-focus);outline-offset:var(--base-size-2)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar-playPauseButton___KDfie svg{width:var(--base-size-16);height:var(--base-size-16);fill:var(--brand-color-text-muted)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar-playPauseButton___KDfie path{fill:var(--brand-color-text-muted)}.Primer_Brand__LogoSuite-module__LogoSuite--gridline___9nj9A,.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16{padding:0}.Primer_Brand__LogoSuite-module__LogoSuite--gridline___9nj9A .Primer_Brand__LogoSuite-module__LogoSuite__content____8K_Y,.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__content____8K_Y{gap:0;padding-inline:0}.Primer_Brand__LogoSuite-module__LogoSuite--gridline___9nj9A .Primer_Brand__LogoSuite-module__LogoSuite__textContainer___OB63e,.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__textContainer___OB63e,.Primer_Brand__LogoSuite-module__LogoSuite--gridline___9nj9A .Primer_Brand__LogoSuite-module__LogoSuite__logobarContainer___RcqbC,.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__logobarContainer___RcqbC{flex-direction:column;justify-content:center;display:flex}.Primer_Brand__LogoSuite-module__LogoSuite--gridline___9nj9A .Primer_Brand__LogoSuite-module__LogoSuite__logobar___3IogC,.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__logobar___3IogC{margin-block-start:auto;padding-block-start:0}.Primer_Brand__LogoSuite-module__LogoSuite--gridline___9nj9A .Primer_Brand__LogoSuite-module__LogoSuite__heading___PsSGL+.Primer_Brand__LogoSuite-module__LogoSuite__description___J_Sms,.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__heading___PsSGL+.Primer_Brand__LogoSuite-module__LogoSuite__description___J_Sms{padding-block-start:var(--base-size-8)}.Primer_Brand__LogoSuite-module__LogoSuite--gridline___9nj9A .Primer_Brand__LogoSuite-module__LogoSuite__logobar___3IogC,.Primer_Brand__LogoSuite-module__LogoSuite--gridline___9nj9A .Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-marquee___tyW6K,.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__logobar___3IogC,.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-marquee___tyW6K{width:100%;max-width:none}.Primer_Brand__LogoSuite-module__LogoSuite--gridline___9nj9A .Primer_Brand__LogoSuite-module__LogoSuite__textContainer___OB63e{padding:var(--base-size-40) var(--base-size-20) 0}.Primer_Brand__LogoSuite-module__LogoSuite--gridline___9nj9A .Primer_Brand__LogoSuite-module__LogoSuite__logobarContainer___RcqbC{padding:var(--base-size-40) var(--base-size-20) var(--base-size-48)}@media screen and (width>=48rem){.Primer_Brand__LogoSuite-module__LogoSuite--gridline___9nj9A .Primer_Brand__LogoSuite-module__LogoSuite__textContainer___OB63e{padding:var(--base-size-48) var(--base-size-40) 0}.Primer_Brand__LogoSuite-module__LogoSuite--gridline___9nj9A .Primer_Brand__LogoSuite-module__LogoSuite__logobarContainer___RcqbC{padding:var(--base-size-40) var(--base-size-40) var(--base-size-64)}}@media screen and (width>=64rem){.Primer_Brand__LogoSuite-module__LogoSuite--gridline___9nj9A .Primer_Brand__LogoSuite-module__LogoSuite__textContainer___OB63e{padding:var(--base-size-48) var(--base-size-64) 0}.Primer_Brand__LogoSuite-module__LogoSuite--gridline___9nj9A .Primer_Brand__LogoSuite-module__LogoSuite__logobarContainer___RcqbC{padding:var(--base-size-48) var(--base-size-64) var(--base-size-64)}}@media screen and (width>=80rem){.Primer_Brand__LogoSuite-module__LogoSuite--gridline___9nj9A .Primer_Brand__LogoSuite-module__LogoSuite__content____8K_Y{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__textContainer___OB63e{padding:var(--base-size-20)}.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__logobarContainer___RcqbC{padding:var(--base-size-32) var(--base-size-20) var(--base-size-32)}@media screen and (width>=48rem){.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16{padding-inline:91px}.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__logobarContainer___RcqbC{padding:var(--base-size-40)}.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__content____8K_Y{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__textContainer___OB63e{border-inline-end:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}@media screen and (width>=64rem){.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16{padding-inline:0}.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__content____8K_Y{max-width:1280px}.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__textContainer___OB63e{text-align:left;padding:var(--base-size-64)}.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__logobarContainer___RcqbC{padding:var(--base-size-64)}}@media screen and (width>=1281px){.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__content____8K_Y{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__logobarContainer___RcqbC:first-child{border-inline-start:none}}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-takeover___ZQbXf{position:relative;overflow:visible}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-takeover___ZQbXf:before{content:"";inset:calc(-1 * var(--base-size-16)) 0;z-index:1;pointer-events:none;opacity:0;-webkit-backdrop-filter:blur(var(--base-size-6));transition:opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default);position:absolute}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-takeover___ZQbXf:hover:before,.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-takeover___ZQbXf:focus-within:before{opacity:1}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-takeover___ZQbXf:hover svg,.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-takeover___ZQbXf:focus-within svg,.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-takeover___ZQbXf:hover img,.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-takeover___ZQbXf:focus-within img{opacity:.7;transition:opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar-takeoverButtonContainer___ehoEd{opacity:0;visibility:hidden;z-index:2;transition:opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-takeover___ZQbXf:hover .Primer_Brand__LogoSuite-module__LogoSuite__logobar-takeoverButtonContainer___ehoEd,.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-takeover___ZQbXf:focus-within .Primer_Brand__LogoSuite-module__LogoSuite__logobar-takeoverButtonContainer___ehoEd{opacity:1;visibility:visible}

package/esm/LogoSuite/LogoSuite.module.js

@@ -1,4 +1,4 @@
-import './LogoSuite.module-BCbX-lfy.css';//#region src/LogoSuite/LogoSuite.module.css
+import './LogoSuite.module-BUJyNoZs.css';//#region src/LogoSuite/LogoSuite.module.css
 var e = "Primer_Brand__LogoSuite-module__LogoSuite___bHvbJ", t = "Primer_Brand__LogoSuite-module__LogoSuite__description___J_Sms", n = "Primer_Brand__LogoSuite-module__LogoSuite__heading___PsSGL", r = "Primer_Brand__LogoSuite-module__LogoSuite__logobar___3IogC", i = "Primer_Brand__LogoSuite-module__LogobarScrollX___eGhi4", a = "Primer_Brand__LogoSuite-module__LogoSuite__content____8K_Y", o = "Primer_Brand__LogoSuite-module__LogoSuite__textContainer___OB63e", s = "Primer_Brand__LogoSuite-module__LogoSuite__logobarContainer___RcqbC", c = {
 	LogoSuite: e,
 	"LogoSuite--default": "Primer_Brand__LogoSuite-module__LogoSuite--default___mbLiN",
@@ -13,6 +13,7 @@ var e = "Primer_Brand__LogoSuite-module__LogoSuite___bHvbJ", t = "Primer_Brand__
 	"LogoSuite__heading--visually-hidden": "Primer_Brand__LogoSuite-module__LogoSuite__heading--visually-hidden___oZzlO",
 	"LogoSuite__logobar--variant-muted": "Primer_Brand__LogoSuite-module__LogoSuite__logobar--variant-muted___iM9ru",
 	"LogoSuite__logobar--variant-emphasis": "Primer_Brand__LogoSuite-module__LogoSuite__logobar--variant-emphasis___yvuYR",
+	"LogoSuite__logobar--has-linked-logos": "Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-linked-logos___52pLk",
 	"LogoSuite--hasDivider": "Primer_Brand__LogoSuite-module__LogoSuite--hasDivider___Wj8u_",
 	"LogoSuite__logobar--has-marquee": "Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-marquee___tyW6K",
 	"LogoSuite__logobar-marqueeGroup": "Primer_Brand__LogoSuite-module__LogoSuite__logobar-marqueeGroup___bUhyS",
@@ -23,6 +24,7 @@ var e = "Primer_Brand__LogoSuite-module__LogoSuite___bHvbJ", t = "Primer_Brand__
 	"LogoSuite__logobar--paused": "Primer_Brand__LogoSuite-module__LogoSuite__logobar--paused___7p9ka",
 	"LogoSuite__logobar-marquee--focused": "Primer_Brand__LogoSuite-module__LogoSuite__logobar-marquee--focused___zizoE",
 	"LogoSuite__logobar-playPauseButton": "Primer_Brand__LogoSuite-module__LogoSuite__logobar-playPauseButton___KDfie",
+	"LogoSuite--gridline": "Primer_Brand__LogoSuite-module__LogoSuite--gridline___9nj9A",
 	"LogoSuite--gridline-expressive": "Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16",
 	LogoSuite__content: a,
 	LogoSuite__textContainer: o,