npm - @primer/react-brand - Versions diffs - 0.74.0-rc.ad4a6851 → 0.74.0-rc.bca63c2e - Mend

@primer/react-brand 0.74.0-rc.ad4a6851 → 0.74.0-rc.bca63c2e

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (409) hide show

package/docs/components/Card/index.md CHANGED Viewed

@@ -96,9 +96,9 @@ _Don't use both icon and image as the visual asset._
 ### Label
-The label can be used to indicate the type of content or its status. For example, use it to indicate that the content is `new` or that it is a `beta` feature. The label is optional and can be used along with a visual asset.
+Use `Card.Label` for displaying one short label above the heading. It renders a [Token](../Token/index.md) by default.
-![An image showing two cards, one with a Label and another one with Label and Icon.](https://github.com/primer/brand/assets/6951037/3e16bb51-9e19-4a98-a9c2-e289d4bf540c)
+Prefer `Card.Tokens` for showing groups of metadata. Both are optional. Never place the standalone [Label](../Label/index.md) component inside or alongside a Card.
 ### Heading

package/docs/components/Card/react.md CHANGED Viewed

@@ -101,8 +101,7 @@ Use `Card.Tokens` to display one or more [Token](../Token/index.md) components b
 ### Label
-Use `Card.Label` to display a short label above the heading. It renders a `Token` by default. Use
-`variant="accent-text"` for eyebrow-style copy.
+Use `Card.Label` for displaying one short label above the heading.
 ```jsx
 <Card href="https://github.com" ctaVariant="arrow">
@@ -197,7 +196,7 @@ When an image should stretch to fill the card width, set `padding="none"` on `Ca
 ### Tokens
-Use `Card.Tokens` to display more than one [Token](../Token/index.md).
+Use `Card.Tokens` to display one or more [Token](../Token/index.md) components.
 ```jsx
 <>

package/docs/components/Label/index.md CHANGED Viewed

@@ -1,76 +1,44 @@
 ---
 title: Label
-description: Use the label component to add metadata or indicate the status of items.
-keywords: ['badge', 'tag', 'metadata', 'status', 'indicator']
+description: Use label to display short status or metadata attached to an object in product-like UI.
+keywords: ['product UI', 'data table', 'issue metadata', 'status', 'indicator']
 ---
 ![An image showing a group of labels with different styles, colors, leading icons and content.](https://github.com/primer/brand/assets/6951037/1c9c6b81-0a2a-4a56-a9f5-a9608f89e220)
 ## Usage
-Use labels to indicate the status of an item or to help oraganize and categorize them. E.g, using "New" or "Recommended". Labels aren't meant to be used as interactive elements. Instead use the [Button](../Button/index.md) component.
+Use Label to display short status or metadata attached to an object in product-like UI, such as a data-table row,
+dashboard item, application workflow, or GitHub issue. Keep it visually attached to the object it describes. Label is
+not interactive and should not be used as an isolated eyebrow or pre-heading marker.
-**✅ Do**
-![](https://github.com/primer/brand/assets/6951037/5da25ec0-a780-4add-972a-246bf9462e07)
-_Use labels to categorize an item._
-**❌ Don't**
-![](https://github.com/primer/brand/assets/6951037/976d645c-17ba-45ff-97ea-03c81a4c3b53)
-_Don't use labels as an interactive or navigational element. Use a button or a link component._
-Position the labels to clearly identify the object they’re informing.
-**✅ Do**
-![](https://github.com/primer/brand/assets/6951037/467449ad-013d-4b9c-9eec-a4655c4d13ec)
-_Give labels enough space to be clearly identified. Use size or color to differentiate them if needed._
-**❌ Don't**
-![](https://github.com/primer/brand/assets/6951037/5a32b608-2bc7-417b-b064-42c2308075ea)
-_When used along with other items, don't place the label too close to them._
+Choose a size and color that fit the surrounding product UI without relying on color alone to communicate meaning.
 ### Content
-Use Label with with short, scannable text. If possible, use a single word to describe the status of an object. Use two or more words if you need to describe a complex state or category. For example, “Limited availability" or "Enterprise only".
+Use Label with short, scannable text. A single word is ideal. Use two or more words only when a record's status needs more context, such as “Limited availability" or “Enterprise only".
 ## Options
 ### Size
-Labels come in two sizes: `medium`, and `large`.
-### Medium
+Labels come in three sizes: `small`, `medium`, and `large`. Prefer the smallest size that remains legible in the product UI context.
-Use the `medium` size when paired with medium-sized headings or in components such as `Card`.
+### Small
-![](https://github.com/primer/brand/assets/912236/2bca5ddd-2422-41a1-a32c-dc6be243f9ce)
+Use the `small` size for compact data rows and issue-style metadata.
-_The Card component allows for a medium label to provide extra meta data to the content. In a group of stacked cards,
-the label helps to quickly scan certain items._
-![](https://github.com/primer/brand/assets/6951037/c51e151c-d93a-42f8-bf73-6bd15b1c3781)
+### Medium
-_Medium labels are great for headings that introduce a section. They help categorize the main topic and provide a
-visual break._
+Use the `medium` size when record metadata needs more emphasis than the small treatment.
 ### Large
-Use the `large` size when paired with large headings, such as in the `Hero` component.
-![](https://github.com/primer/brand/assets/6951037/13f9debc-3b20-4f77-a509-b8291ca677ae)
-_Use large labels with headings that introduce a page. Use it to introduce the main topic or application._
+Use the `large` size only when product-like UI needs a particularly prominent status treatment.
 ### Color
-The label offers color options from the [Primer Brand color palette](../../primitives/color.md). These color choices are carefully curated to ensure optimal contrast with the background or surrounding elements. Colors options doesn't follow a strict functional meaning. We recommend using the colors that best fit the context of your application. For example, blue and purple gradient for `Copilot` examples.
+Label offers color options from the [Primer Brand color palette](../../primitives/color.md). Choose a color that helps distinguish record metadata without relying on color alone to communicate status.
 ![An image showing multiple label options with different colors.](https://github.com/primer/brand/assets/6951037/41817520-87bb-41bc-9586-95155604b83d)

package/docs/components/Label/react.md CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 title: Label
-description: Use the label component to add metadata or indicate the status of items.
-keywords: ['badge', 'tag', 'metadata', 'status', 'indicator']
+description: Use label to display short status or metadata attached to an object in product-like UI.
+keywords: ['product UI', 'data table', 'issue metadata', 'status', 'indicator']
 ready: true
 figma: 'https://www.figma.com/file/BJ95AjraesmRCWsKA013GS/Primer-Brand?node-id=6084-28401'
 source: https://github.com/primer/brand/blob/main/packages/react/src/Label/Label.tsx
@@ -10,25 +10,32 @@ a11yReviewed: true
 ---
 ```js
-import {Label} from '@primer/react-brand'
+import {Label, Stack, Text} from '@primer/react-brand'
 ```
+Use Label to display short status or metadata attached to an object in product-like UI, such as a data-table row,
+dashboard item, application workflow, or GitHub issue. Keep it visually attached to the object it describes. Never use
+Label as an isolated eyebrow or pre-heading marker.
 ## Examples
 ### Default
-This is the default variant for the `Label`component. It corresponds to the `medium` size and `default` color.
+The default Label uses the `medium` size and `default` color. Keep it visually attached to the record it describes.
 ```jsx
-<Label>Default</Label>
+<Stack direction="horizontal" alignItems="center" padding="none">
+  <Label>In progress</Label>
+</Stack>
 ```
 ### Sizes
-Use the `size` prop to adjust the size of the `Label` component. The `small` size is ideal for body text. The `medium` size is recommended for small headings and `large` is suitable for large headings or section intros.
+Use the `size` prop to fit the density and emphasis of product UI metadata. Prefer the smallest size that remains
+legible. Do not choose a size based on a nearby heading.
 ```jsx
-<Stack direction="horizontal" alignItems="flex-start" padding="none">
+<Stack direction="horizontal" alignItems="center" padding="none">
   <Label size="small">Small</Label>
   <Label size="medium">Medium</Label>
   <Label size="large">Large</Label>
@@ -37,31 +44,27 @@ Use the `size` prop to adjust the size of the `Label` component. The `small` siz
 ### Color
-Use the `color` prop to change the color of the `Label` component. The `default` color is recommended for use with neutral backgrounds.
+Use the `color` prop to distinguish metadata attached to the same record. Do not rely on color alone to communicate
+status.
 ```jsx
-<Stack direction="horizontal" alignItems="flex-start" padding="none">
-  <Label color="blue">Blue</Label>
-  <Label color="red">Red</Label>
-  <Label color="green-blue">Green blue</Label>
-  <Label color="red">Red</Label>
-  <Label color="pink-blue">Pink blue</Label>
-  <Label color="orange">Orange</Label>
+<Stack direction="horizontal" alignItems="center" padding="none" flexWrap="wrap">
+  <Label color="red">Bug</Label>
+  <Label color="orange">High priority</Label>
+  <Label color="blue">Needs review</Label>
 </Stack>
 ```
 ### Leading visual
-You can add a leading icon to enhance the visual context. It is recommended you use an [Octicon](https://primer.style/octicons) here.
+Add a leading icon only when it makes product UI metadata easier to scan. Use an [Octicon](https://primer.style/octicons)
+that reinforces the metadata meaning.
 ```jsx
-<Stack direction="horizontal" alignItems="flex-start" padding="none">
+<Stack direction="horizontal" alignItems="center" padding="none">
   <Label color="yellow" leadingVisual={<StarIcon />}>
     Starred
   </Label>
-  <Label color="blue-purple" leadingVisual={<CopilotIcon />}>
-    Copilot
-  </Label>
 </Stack>
 ```

package/docs/components/River/react.md CHANGED Viewed

@@ -49,7 +49,6 @@ import {River, RiverBreakout} from '@primer/react-brand'
       <img src="/images/placeholder.png" alt="placeholder, blank area with a gray background color" />
     </River.Visual>
     <River.Content>
-      <Label>Label</Label>
       <Heading>Heading</Heading>
       <Text>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis
@@ -271,14 +270,18 @@ The `gridline` variant adds lateral padding and applies a full-bleed visual back
 ### River.Content and RiverBreakout.Content `Required`
-[`Label`](../Label/index.md), [`Text`](../../typography/Text/index.md),[`Heading`](../../typography/Heading/index.md), `Link` are the only `children` accepted. They can be composed in any order, but their rendered output will always be in a predetermined order.
+`EyebrowText`, [`Text`](../../typography/Text/index.md),
+[`Heading`](../../typography/Heading/index.md), and
+`Link` are the supported `children`. They can be composed in
+any order, but their rendered output will always be in a predetermined order. Standalone `Label` children remain
+rendered for compatibility, but are deprecated; use `EyebrowText` instead.
-| Name        | Type                                                                                            | Default | Description                                      |
-| :---------- | :---------------------------------------------------------------------------------------------- | :-----: | :----------------------------------------------- |
-| `children`  | [`Text`](../../typography/Text/index.md),[`Heading`](../../typography/Heading/index.md), `Link` |         | Content that corresponds to the adjacent visual. |
-| `className` | `string`                                                                                        |         | Sets a custom class on the root element          |
-| `id`        | `string`                                                                                        |         | Sets a custom id                                 |
-| `ref`       | `React.RefObject`                                                                               |         | Forward a Ref to the underlying DOM node         |
+| Name        | Type                                                                                                            | Default | Description                                      |
+| :---------- | :-------------------------------------------------------------------------------------------------------------- | :-----: | :----------------------------------------------- |
+| `children`  | `EyebrowText`, [`Text`](../../typography/Text/index.md), [`Heading`](../../typography/Heading/index.md), `Link` |         | Content that corresponds to the adjacent visual. |
+| `className` | `string`                                                                                                        |         | Sets a custom class on the root element          |
+| `id`        | `string`                                                                                                        |         | Sets a custom id                                 |
+| `ref`       | `React.RefObject`                                                                                               |         | Forward a Ref to the underlying DOM node         |
 ### RiverBreakout

package/docs/components/Token/index.md CHANGED Viewed

@@ -1,6 +1,6 @@
 ---
 title: Token
-description: Token is a compact representation of an object, and is typically used to show a collection of related metadata.
+description: Use Token to display compact metadata that describes or supports adjacent content.
 keywords: ['tag', 'metadata', 'category', 'chip', 'link']
 ready: true
 source: https://github.com/primer/brand/blob/main/packages/react/src/Token/Token.tsx
@@ -12,7 +12,9 @@ a11yReviewed: false
 import {Avatar, Stack, Token} from '@primer/react-brand'
 ```
-`Token` is a compact representation of an object, and is typically used to show a collection of related metadata.
+Use Token to display compact metadata that describes or supports adjacent content, such as a category, status, date,
+author, or related topic. Keep it visually attached to the content it describes, and follow each compound component's
+documented child API rather than inserting Token directly.
 Keep `Token` content short and easy to scan. A single word is ideal. Two short words are acceptable when the category or type needs more context.
@@ -81,6 +83,5 @@ Use a leading visual when it helps users scan the Token more quickly. Octicons,
 ## Related components
-- [Label](../Label/index.md): For larger non-interactive status and metadata treatments.
 - Link: For inline navigational text.
 - [Button](../Button/index.md): For higher-emphasis actions.

package/docs/components/index.md CHANGED Viewed

@@ -25,7 +25,7 @@ description: Primer Brand UI components
 - [IDE](IDE/index.md): Use the IDE to showcase a simulated integrated developer environment, complete with a code editor and AI chat that's intended to enhance code representation in marketing contexts.
 - [Image](Image/react.md): Use the image component to display a graphical representation.
 - [Inline code](InlineCode/index.md): Use InlineCode to render a short inline code fragment.
-- [Label](Label/react.md): Use the label component to add metadata or indicate the status of items.
+- [Label](Label/react.md): Use label to display short status or metadata attached to an object in product-like UI.
 - [Logo suite](LogoSuite/react.md): Use a logo suite to present a list logos, such as sponsors or vendors.
 - [Media playlist](MediaPlaylist/index.md): Use MediaPlaylist to pair thumbnail-backed media items with a shared playback or media area.
 - [Minimal footer](MinimalFooter/index.md): Use the minimal footer component to provide a global footer featuring legal links, social links, and optional footnotes.
@@ -49,7 +49,7 @@ description: Primer Brand UI components
 - [Testimonial](Testimonial/react.md): Use testimonial to display a quote from a customer or user.
 - [Tiles](Tiles/index.md): Use tiles to display a grid of logos or icons with optional links.
 - [Timeline](Timeline/index.md): Use the timeline component to display a list of connected items as a vertical timeline.
-- [Token](Token/index.md): Token is a compact representation of an object, and is typically used to show a collection of related metadata.
+- [Token](Token/index.md): Use Token to display compact metadata that describes or supports adjacent content.
 - [Tooltip](Tooltip/index.md): Use the tooltip component to display a short message when a user hovers or focuses an interactive element.
 - [Unordered list](UnorderedList/react.md): Use the unordered list component to present a collection of items without specific ordering.
 - [Video player](VideoPlayer/index.md): Use the video player component to enable playback of self-hosted videos

package/docs/index.md CHANGED Viewed

@@ -1,6 +1,6 @@
-# Primer Brand docs (v0.74.0-rc.ad4a6851)
+# Primer Brand docs (v0.74.0-rc.bca63c2e)
-These docs are bundled with `@primer/react-brand@0.74.0-rc.ad4a6851` and match your installed version.
+These docs are bundled with `@primer/react-brand@0.74.0-rc.bca63c2e` 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.
@@ -59,7 +59,7 @@ stylesheet and font setup. Component directories are named after their import (e
 - [IDE](components/IDE/index.md): Use the IDE to showcase a simulated integrated developer environment, complete with a code editor and AI chat that's intended to enhance code representation in marketing contexts.
 - [Image](components/Image/react.md): Use the image component to display a graphical representation.
 - [Inline code](components/InlineCode/index.md): Use InlineCode to render a short inline code fragment.
-- [Label](components/Label/react.md): Use the label component to add metadata or indicate the status of items.
+- [Label](components/Label/react.md): Use label to display short status or metadata attached to an object in product-like UI.
 - [Logo suite](components/LogoSuite/react.md): Use a logo suite to present a list logos, such as sponsors or vendors.
 - [Media playlist](components/MediaPlaylist/index.md): Use MediaPlaylist to pair thumbnail-backed media items with a shared playback or media area.
 - [Minimal footer](components/MinimalFooter/index.md): Use the minimal footer component to provide a global footer featuring legal links, social links, and optional footnotes.
@@ -83,7 +83,7 @@ stylesheet and font setup. Component directories are named after their import (e
 - [Testimonial](components/Testimonial/react.md): Use testimonial to display a quote from a customer or user.
 - [Tiles](components/Tiles/index.md): Use tiles to display a grid of logos or icons with optional links.
 - [Timeline](components/Timeline/index.md): Use the timeline component to display a list of connected items as a vertical timeline.
-- [Token](components/Token/index.md): Token is a compact representation of an object, and is typically used to show a collection of related metadata.
+- [Token](components/Token/index.md): Use Token to display compact metadata that describes or supports adjacent content.
 - [Tooltip](components/Tooltip/index.md): Use the tooltip component to display a short message when a user hovers or focuses an interactive element.
 - [Unordered list](components/UnorderedList/react.md): Use the unordered list component to present a collection of items without specific ordering.
 - [Video player](components/VideoPlayer/index.md): Use the video player component to enable playback of self-hosted videos

package/docs/introduction/mcp.md CHANGED Viewed

@@ -14,16 +14,16 @@ It is a version-aware, local (`stdio`) server that reads the docs and metadata o
 The server exposes a set of tools that AI agents can call:
-| Tool                       | What it does                                                                                                                                         |
-| -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `primer_brand_setup`       | Configures Primer Brand first-time and maintains a Primer Brand pointer beside the declaring `package.json`.                                         |
-| `primer_brand_page_design` | Page-design conventions (header/footer, hero media, gridline aesthetic, card grids, labels) and the current-brand reference templates to start from. |
-| `primer_brand_component`   | Get a component API information like props, allowed values and named sub-components.                                                                 |
-| `primer_brand_examples`    | Reference examples taken from our Storybook.                                                                                                         |
-| `primer_brand_tokens`      | Resolve design tokens by intent (color, space, typography) to CSS variables and values.                                                              |
-| `primer_brand_asset`       | Find Octicons (`@primer/octicons-react`) and Octovisuals (`@primer/octovisuals-react`) more easily                                                   |
-| `primer_brand_docs`        | Search and read Primer Brand guidance, including principles, accessibility and getting started.                                                      |
-| `primer_brand_review`      | Check generated JSX and CSS against the design system for unknown components, invalid props, hardcoded values                                        |
+| Tool                       | What it does                                                                                                                                                    |
+| -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `primer_brand_setup`       | Configures Primer Brand first-time and maintains a Primer Brand pointer beside the declaring `package.json`.                                                    |
+| `primer_brand_page_design` | Page-design conventions (header/footer, hero media, gridline aesthetic, card grids, metadata patterns) and the current-brand reference templates to start from. |
+| `primer_brand_component`   | Get a component API information like props, allowed values and named sub-components.                                                                            |
+| `primer_brand_examples`    | Reference examples taken from our Storybook.                                                                                                                    |
+| `primer_brand_tokens`      | Resolve design tokens by intent (color, space, typography) to CSS variables and values.                                                                         |
+| `primer_brand_asset`       | Find Octicons (`@primer/octicons-react`) and Octovisuals (`@primer/octovisuals-react`) more easily                                                              |
+| `primer_brand_docs`        | Search and read Primer Brand guidance, including principles, accessibility and getting started.                                                                 |
+| `primer_brand_review`      | Check generated JSX and CSS against the design system for unknown components, invalid props, hardcoded values                                                   |
 ## Set up in VS Code

package/esm/Bento/Bento.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Bento.d.ts","sourceRoot":"","sources":["../../src/Bento/Bento.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,YAAY,EAA2D,MAAM,OAAO,CAAA;AAGnG,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAGnD,OAAO,EAAsB,YAAY,EAAwB,SAAS,IAAI,aAAa,~~EAAe~~,MAAM,KAAK,CAAA;~~AAErH~~,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,SAAS,CAAA;AAEtC,OAAO,4FAA4F,CAAA;AAGnG,KAAK,SAAS,GAAG,OAAO,CAAC,aAAa,EAAE,MAAM,CAAC,CAAA;AAE/C,MAAM,MAAM,IAAI,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAA;AACjF,MAAM,MAAM,WAAW,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAA;AAE1E,KAAK,qBAAqB,GAAG,OAAO,CAAC,MAAM,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC,CAAA;AAC/D,KAAK,kBAAkB,GAAG,OAAO,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC,CAAA;AAEvD,KAAK,IAAI,GAAG,KAAK,GAAG,QAAQ,CAAA;AAC5B,KAAK,cAAc,GAAG,OAAO,CAAC,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAA;AAEjD,KAAK,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;AACvC,KAAK,eAAe,GAAG,OAAO,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAA;AAEnD,KAAK,OAAO,GAAG,WAAW,GAAG,QAAQ,GAAG,UAAU,CAAA;AAClD,KAAK,iBAAiB,GAAG,OAAO,CAAC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAA;AAEvD,KAAK,KAAK,GAAG,SAAS,GAAG,UAAU,CAAA;AACnC,KAAK,eAAe,GAAG,OAAO,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAA;AAEnD,KAAK,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG,SAAS,CAAC,cAAc,CAAC,CAAA;AASlF,KAAK,cAAc,GAAG;IACpB,WAAW,CAAC,EAAE,WAAW,GAAG,qBAAqB,CAAA;IACjD,UAAU,CAAC,EAAE,WAAW,GAAG,qBAAqB,CAAA;IAChD,QAAQ,CAAC,EAAE,MAAM,GAAG,kBAAkB,CAAA;IACtC,OAAO,CAAC,EAAE,MAAM,GAAG,kBAAkB,CAAA;IACrC,IAAI,CAAC,EAAE,IAAI,GAAG,cAAc,CAAA;IAC5B,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,KAAK,CAAC,EAAE,KAAK,GAAG,eAAe,CAAA;IAC/B,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;CAC/B,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GACtC,SAAS,CAAC,cAAc,CAAC,CAAA;AA4H3B,KAAK,iBAAiB,GAAG;IACvB,aAAa,CAAC,EAAE,YAAY,CAAC,SAAS,CAAC,CAAA;IACvC,OAAO,CAAC,EAAE,OAAO,GAAG,iBAAiB,CAAA;IACrC,aAAa,CAAC,EAAE,KAAK,GAAG,eAAe,CAAA;IACvC,eAAe,CAAC,EAAE,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,CAAA;CACvF,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GACtC,SAAS,CAAC,cAAc,CAAC,CAAA;~~AA2E3B~~,KAAK,iBAAiB,GAAG;IACvB,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAA;CAC9B,GAAG,SAAS,CAAC,kBAAkB,CAAC,GAC/B,YAAY,CAAA;AA6Cd,KAAK,gBAAgB,GAAG;IACtB,eAAe,CAAC,EAAE,KAAK,CAAA;IACvB,aAAa,CAAC,EAAE,KAAK,CAAA;IACrB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAA;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,OAAO,GAAG,iBAAiB,CAAA;CACtC,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GACtC,SAAS,CAAC,cAAc,CAAC,CAAA;AAmD3B;;;;GAIG;AACH,eAAO,MAAM,KAAK,~~4BA/UkB~~,UAAU;8IAmF3C,cAAc;~~uHAgNd~~,gBAAgB;~~uHArIhB~~,iBAAiB;;~~CAiLgE~~,CAAA"}
1	+ {"version":3,"file":"Bento.d.ts","sourceRoot":"","sources":["../../src/Bento/Bento.tsx"],"names":[],"mappings":"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"}

package/esm/Bento/Bento.js CHANGED Viewed

@@ -46,8 +46,8 @@ var g = ({ className: t, ...n }) => /* @__PURE__ */ m("section", {
 }, b = ({ children: n, leadingVisual: r, padding: o = "spacious", verticalAlign: s, horizontalAlign: c = "start", className: d, ...f }) => {
 	let m = [l.Bento__Content];
 	m.push(..._("Bento__Item", "verticalAlign", s), ..._("Bento__Item", "horizontalAlign", c), ..._("Bento", "padding", o));
-	let g = p(() => u.Children.toArray(n), [n]), v = g.filter((e) => u.isValidElement(e) && e.type === x), y = g.find((e) => u.isValidElement(e) && e.type === a), b = g.find((e) => u.isValidElement(e) && e.type === t), S = g.find((e) => u.isValidElement(e) && e.type === i);
-	return /* @__PURE__ */ h("div", {
+	let g = p(() => u.Children.toArray(n), [n]), v = g.filter((e) => u.isValidElement(e) && e.type === x), y = g.find((e) => u.isValidElement(e) && e.type === a), b = g.find((e) => u.isValidElement(e) && e.type === t), S = g.find((e) => u.isValidElement(e) && e.type === i), C = u.isValidElement(y);
+	return C && (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && console.warn("Bento.Content: standalone `Label` children are deprecated. Remove it or migrate from Bento."), /* @__PURE__ */ h("div", {
 		className: e(l[`Bento-padding--${o}`], ...m, d),
 		...f,
 		children: [
@@ -55,7 +55,7 @@ var g = ({ className: t, ...n }) => /* @__PURE__ */ m("section", {
 				className: l["Bento__Content-icon"],
 				size: r.props.size || 44
 			}),
-			u.isValidElement(y) && u.cloneElement(y, { className: e(l["Bento__Content-label"], y.props.className) }),
+			C && u.cloneElement(y, { className: e(l["Bento__Content-label"], y.props.className) }),
 			v.map((t) => u.cloneElement(t, { className: e(!u.isValidElement(b) && l["Bento__heading--no-text"], c === "center" && l["Bento__heading--with-max-width"], t.props.className) })),
 			u.isValidElement(b) && u.cloneElement(b, {
 				variant: b.props.variant || "muted",

package/esm/Bento/Bento.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Bento.js","names":[],"sources":["../../src/Bento/Bento.tsx"],"sourcesContent":["import React, {ReactElement, forwardRef, useCallback, useMemo, Ref, PropsWithChildren} from 'react'\nimport {clsx} from 'clsx'\nimport {useWindowSize, BreakpointSize} from '../hooks/useWindowSize'\nimport type {BaseProps} from '../component-helpers'\nimport findElementInChildren from '../findElementInChildren'\n\nimport {Heading, Text, Link, HeadingProps, TextProps, LinkProps, ColorMode as FullColorMode, Image, Label} from '../'\n\nimport type {IconProps} from '../Icon'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/bento/base.css'\nimport styles from './Bento.module.css'\n\ntype ColorMode = Exclude<FullColorMode, 'auto'>\n\nexport type Size = 'xsmall' \| 'small' \| 'medium' \| 'large' \| 'xlarge' \| 'xxlarge'\nexport type ColumnIndex = 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12\n\ntype ResponsiveColumnIndex = Partial<Record<Size, ColumnIndex>>\ntype ResponsiveRowIndex = Partial<Record<Size, number>>\n\ntype Flow = 'row' \| 'column'\ntype ResponsiveFlow = Partial<Record<Size, Flow>>\n\ntype Align = 'start' \| 'center' \| 'end'\ntype ResponsiveAlign = Partial<Record<Size, Align>>\n\ntype Padding = 'condensed' \| 'normal' \| 'spacious'\ntype ResponsivePadding = Partial<Record<Size, Padding>>\n\ntype Order = 'default' \| 'reversed'\ntype ResponsiveOrder = Partial<Record<Size, Order>>\n\ntype BentoProps = React.HTMLAttributes<HTMLDivElement> & BaseProps<HTMLDivElement>\n\nconst Root = ({className, ...rest}: BentoProps) => {\n return <section className={clsx(styles.Bento, className)} {...rest}></section>\n}\n\ntype ValidChildren = React.ReactElement<BentoVisualProps \| BentoContentProps>\ntype ValidItemChildren = [ValidChildren?, ValidChildren?]\n\ntype BentoItemProps = {\n columnStart?: ColumnIndex \| ResponsiveColumnIndex\n columnSpan?: ColumnIndex \| ResponsiveColumnIndex\n rowStart?: number \| ResponsiveRowIndex\n rowSpan?: number \| ResponsiveRowIndex\n flow?: Flow \| ResponsiveFlow\n colorMode?: ColorMode\n visualAsBackground?: boolean\n order?: Order \| ResponsiveOrder\n bgColor?: 'default' \| 'subtle'\n} & React.HTMLAttributes<HTMLDivElement> &\n BaseProps<HTMLDivElement>\n\nconst returnClassBasedOnResponsiveMap = (\n classIdentifier: string,\n propName: string,\n prop?:\n \| ResponsiveColumnIndex\n \| ColumnIndex\n \| ResponsiveRowIndex\n \| number\n \| ResponsiveFlow\n \| Flow\n \| ResponsiveAlign\n \| Align\n \| ResponsivePadding\n \| Padding,\n) => {\n const classesToMerge: string[] = []\n if (typeof prop === 'number' \|\| typeof prop === 'string') {\n classesToMerge.push(styles[`${classIdentifier}--${propName}-${prop}`])\n } else if (typeof prop === 'object') {\n for (const [key, value] of Object.entries(prop)) {\n classesToMerge.push(styles[`${classIdentifier}--${key}-${propName}-${value}`])\n }\n }\n return classesToMerge\n}\n\ntype ReturnOrderedChildrenProps = {\n order: Order \| ResponsiveOrder\n children: React.ReactNode\n currentBreakpointSize?: BreakpointSize\n}\n\nconst returnOrderedChildren = ({order, children, currentBreakpointSize}: ReturnOrderedChildrenProps) => {\n if (typeof order === 'string') {\n return order === 'default' ? children : React.Children.toArray(children).reverse()\n } else if (typeof order === 'object' && currentBreakpointSize) {\n // This handles setting the order based on breakpoints as you might expect via CSS\n const filledStyleOrder: ResponsiveOrder = {}\n let previousSize: Order = 'default'\n for (const size of Object.keys(BreakpointSize)) {\n const lowerCaseSize = size.toLocaleLowerCase()\n if (order[lowerCaseSize]) previousSize = order[lowerCaseSize]\n filledStyleOrder[lowerCaseSize] = order[lowerCaseSize] \|\| previousSize\n }\n return filledStyleOrder[currentBreakpointSize] === 'default' ? children : React.Children.toArray(children).reverse()\n } else {\n return children\n }\n}\n\nconst Item = ({\n className,\n columnStart,\n columnSpan = 12,\n rowStart,\n rowSpan = 2,\n flow = 'row',\n colorMode,\n visualAsBackground = false,\n order = 'default',\n bgColor = 'subtle',\n children,\n ...rest\n}: BentoItemProps) => {\n const {currentBreakpointSize} = useWindowSize()\n\n const validChildren = React.Children.toArray(children).reduce<ValidItemChildren>((acc, child) => {\n if (React.isValidElement<BentoVisualProps>(child) && child.type === Visual) {\n acc.push(child)\n }\n if (React.isValidElement<BentoContentProps>(child) && child.type === Content) {\n acc.push(child)\n }\n return acc\n }, [])\n\n const contentChildPadding =\n validChildren.find(\n (child): child is React.ReactElement<BentoContentProps> =>\n React.isValidElement<BentoContentProps>(child) && child.type === Content,\n )?.props.padding \|\| 'spacious'\n\n const bentoItemClassArray = [styles.Bento__Item, styles[`Bento__Item--bgColor-${bgColor}`]]\n\n bentoItemClassArray.push(\n ...returnClassBasedOnResponsiveMap('Bento__Item', 'column-span', columnSpan),\n ...returnClassBasedOnResponsiveMap('Bento__Item', 'row-span', rowSpan),\n ...returnClassBasedOnResponsiveMap('Bento__Item', 'column-start', columnStart),\n ...returnClassBasedOnResponsiveMap('Bento__Item', 'row-start', rowStart),\n ...returnClassBasedOnResponsiveMap('Bento__Item', 'flow', flow),\n ...returnClassBasedOnResponsiveMap('Bento__Item', 'gap', contentChildPadding),\n )\n\n if (!visualAsBackground && React.Children.toArray(children).length >= 1) {\n if (flow === 'column') {\n bentoItemClassArray.push(styles['Bento-column-padding-override'])\n }\n if (flow === 'row') {\n bentoItemClassArray.push(styles['Bento-row-padding-override'])\n }\n }\n\n const colorModeProp = colorMode ? {'data-color-mode': colorMode} : {}\n\n const orderedChildren = returnOrderedChildren({order, children: validChildren, currentBreakpointSize})\n\n return (\n <div\n {...colorModeProp}\n className={clsx(\n ...bentoItemClassArray,\n (visualAsBackground \|\| React.Children.toArray(children).length === 1) &&\n styles[`Bento__Item--visual-as-background`],\n className,\n )}\n {...rest}\n >\n {orderedChildren}\n </div>\n )\n}\n\ntype BentoContentProps = {\n leadingVisual?: ReactElement<IconProps>\n padding?: Padding \| ResponsivePadding\n verticalAlign?: Align \| ResponsiveAlign\n horizontalAlign?: Exclude<Align, 'end'> \| Partial<Record<Size, Exclude<Align, 'end'>>>\n} & React.HTMLAttributes<HTMLDivElement> &\n BaseProps<HTMLDivElement>\n\nconst Content = ({\n children,\n leadingVisual: LeadingVisual,\n padding = 'spacious',\n verticalAlign,\n horizontalAlign = 'start',\n className,\n ...rest\n}: BentoContentProps) => {\n const bentoContentClassArray = [styles.Bento__Content]\n bentoContentClassArray.push(\n ...returnClassBasedOnResponsiveMap('Bento__Item', 'verticalAlign', verticalAlign),\n ...returnClassBasedOnResponsiveMap('Bento__Item', 'horizontalAlign', horizontalAlign),\n ...returnClassBasedOnResponsiveMap('Bento', 'padding', padding),\n )\n\n const memoizedChildren = useMemo(() => React.Children.toArray(children), [children])\n\n const HeadingChildren = memoizedChildren.filter(\n (child): child is React.ReactElement<BentoHeadingProps> =>\n React.isValidElement<BentoHeadingProps>(child) && child.type === _Heading,\n )\n\n const LabelChild = memoizedChildren.find(\n (child): child is React.ReactElement<TextProps> => React.isValidElement<TextProps>(child) && child.type === Label,\n )\n const TextChild = memoizedChildren.find(\n (child): child is React.ReactElement<TextProps> => React.isValidElement<TextProps>(child) && child.type === Text,\n )\n const LinkChild = memoizedChildren.find(\n (child): child is React.ReactElement<LinkProps> => React.isValidElement<LinkProps>(child) && child.type === Link,\n )\n\n return (\n <div className={clsx(styles[`Bento-padding--${padding}`], ...bentoContentClassArray, className)} {...rest}>\n {React.isValidElement<IconProps>(LeadingVisual) &&\n React.cloneElement(LeadingVisual, {\n className: styles['Bento__Content-icon'],\n size: LeadingVisual.props.size \|\| 44,\n })}\n\n {React.isValidElement<TextProps>(LabelChild) &&\n React.cloneElement(LabelChild, {\n className: clsx(styles['Bento__Content-label'], LabelChild.props.className),\n })}\n\n {HeadingChildren.map(HeadingChild =>\n React.cloneElement(HeadingChild, {\n className: clsx(\n !React.isValidElement(TextChild) && styles['Bento__heading--no-text'],\n horizontalAlign === 'center' && styles['Bento__heading--with-max-width'],\n HeadingChild.props.className,\n ),\n }),\n )}\n\n {React.isValidElement<TextProps>(TextChild) &&\n React.cloneElement(TextChild, {\n variant: TextChild.props.variant \|\| 'muted',\n as: TextChild.props.as \|\| 'p',\n size: TextChild.props.size \|\| '300',\n className: clsx(styles['Bento__Content-text'], TextChild.props.className),\n })}\n\n {React.isValidElement<LinkProps>(LinkChild) &&\n React.cloneElement(LinkChild, {\n variant: LinkChild.props.variant \|\| 'accent',\n className: clsx(styles['Bento__call-to-action'], LinkChild.props.className),\n })}\n </div>\n )\n}\n\ntype BentoHeadingProps = {\n variant?: 'default' \| 'muted'\n} & BaseProps<HTMLHeadingElement> &\n HeadingProps\n\nconst _Heading = forwardRef(\n (\n {\n as = 'h3',\n size = '5',\n weight = 'medium',\n variant = 'default',\n className,\n children,\n ...props\n }: PropsWithChildren<BentoHeadingProps>,\n ref: Ref<HTMLHeadingElement>,\n ) => {\n const childrenArray = useMemo(() => React.Children.toArray(children), [children])\n\n const getConditionalVariant = useCallback(() => {\n if (findElementInChildren(children, 'b') \|\| findElementInChildren(children, 'em')) {\n return 'muted'\n }\n return 'default'\n }, [children])\n\n const defaultColor = childrenArray.length === 1 ? 'default' : getConditionalVariant()\n\n return (\n <Heading\n ref={ref}\n className={clsx(\n defaultColor === 'muted' && styles[`Bento__heading--muted`],\n variant === 'muted' && styles[`Bento__heading--muted`],\n className,\n )}\n size={size}\n as={as}\n weight={weight}\n {...props}\n >\n {children}\n </Heading>\n )\n },\n)\n\ntype BentoVisualProps = {\n horizontalAlign?: Align\n verticalAlign?: Align\n fillMedia?: boolean\n overflow?: 'hidden' \| 'initial'\n position?: string\n padding?: Padding \| ResponsivePadding\n} & React.HTMLAttributes<HTMLDivElement> &\n BaseProps<HTMLDivElement>\n\nconst Visual = ({\n horizontalAlign,\n verticalAlign,\n fillMedia = true,\n overflow = 'hidden',\n position = '50% 50%',\n padding,\n className,\n children,\n ...rest\n}: BentoVisualProps) => {\n const bentoVisualClassArray = [\n styles.Bento__Visual,\n horizontalAlign && styles[`Bento__Visual--horizontalAlign-${horizontalAlign}`],\n verticalAlign && styles[`Bento__Visual--verticalAlign-${verticalAlign}`],\n styles[`Bento__Visual--overflow-${overflow}`],\n ]\n bentoVisualClassArray.push(...returnClassBasedOnResponsiveMap('Bento', 'padding', padding))\n const childrenToRender = React.Children.map(children, child => {\n if (React.isValidElement(child)) {\n if (React.isValidElement<React.ImgHTMLAttributes<HTMLImageElement>>(child) && child.type === 'img') {\n return React.cloneElement(child, {\n style: {...child.props.style, objectPosition: position},\n })\n }\n if (React.isValidElement<React.ComponentProps<typeof Image>>(child) && child.type === Image) {\n return React.cloneElement(child, {\n style: {...child.props.style, objectPosition: position},\n })\n }\n return child\n }\n return null\n })\n return (\n <div\n className={clsx(\n ...bentoVisualClassArray,\n fillMedia && styles['Bento__Visual--fill'],\n !fillMedia && styles['Bento__Visual--no-fill'],\n className,\n )}\n {...rest}\n >\n {childrenToRender}\n </div>\n )\n}\n\n/*\n Use Bento to present content in a responsive grid layout.\n * @deprecated Bento is deprecated and will be removed in a future release. Use CTABanner or River instead.\n * @see https://primer.style/brand/components/Bento\n */\nexport const Bento = Object.assign(Root, {Item, Visual, Content, Heading: _Heading})\n"],"mappings":"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"}
1	+ {"version":3,"file":"Bento.js","names":[],"sources":["../../src/Bento/Bento.tsx"],"sourcesContent":["import React, {ReactElement, forwardRef, useCallback, useMemo, Ref, PropsWithChildren} from 'react'\nimport {clsx} from 'clsx'\nimport {useWindowSize, BreakpointSize} from '../hooks/useWindowSize'\nimport type {BaseProps} from '../component-helpers'\nimport findElementInChildren from '../findElementInChildren'\n\nimport {Heading, Text, Link, HeadingProps, TextProps, LinkProps, ColorMode as FullColorMode, Image} from '../'\nimport {Label, type LabelProps} from '../Label'\n\nimport type {IconProps} from '../Icon'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/bento/base.css'\nimport styles from './Bento.module.css'\n\ntype ColorMode = Exclude<FullColorMode, 'auto'>\n\nexport type Size = 'xsmall' \| 'small' \| 'medium' \| 'large' \| 'xlarge' \| 'xxlarge'\nexport type ColumnIndex = 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12\n\ntype ResponsiveColumnIndex = Partial<Record<Size, ColumnIndex>>\ntype ResponsiveRowIndex = Partial<Record<Size, number>>\n\ntype Flow = 'row' \| 'column'\ntype ResponsiveFlow = Partial<Record<Size, Flow>>\n\ntype Align = 'start' \| 'center' \| 'end'\ntype ResponsiveAlign = Partial<Record<Size, Align>>\n\ntype Padding = 'condensed' \| 'normal' \| 'spacious'\ntype ResponsivePadding = Partial<Record<Size, Padding>>\n\ntype Order = 'default' \| 'reversed'\ntype ResponsiveOrder = Partial<Record<Size, Order>>\n\ntype BentoProps = React.HTMLAttributes<HTMLDivElement> & BaseProps<HTMLDivElement>\n\nconst Root = ({className, ...rest}: BentoProps) => {\n return <section className={clsx(styles.Bento, className)} {...rest}></section>\n}\n\ntype ValidChildren = React.ReactElement<BentoVisualProps \| BentoContentProps>\ntype ValidItemChildren = [ValidChildren?, ValidChildren?]\n\ntype BentoItemProps = {\n columnStart?: ColumnIndex \| ResponsiveColumnIndex\n columnSpan?: ColumnIndex \| ResponsiveColumnIndex\n rowStart?: number \| ResponsiveRowIndex\n rowSpan?: number \| ResponsiveRowIndex\n flow?: Flow \| ResponsiveFlow\n colorMode?: ColorMode\n visualAsBackground?: boolean\n order?: Order \| ResponsiveOrder\n bgColor?: 'default' \| 'subtle'\n} & React.HTMLAttributes<HTMLDivElement> &\n BaseProps<HTMLDivElement>\n\nconst returnClassBasedOnResponsiveMap = (\n classIdentifier: string,\n propName: string,\n prop?:\n \| ResponsiveColumnIndex\n \| ColumnIndex\n \| ResponsiveRowIndex\n \| number\n \| ResponsiveFlow\n \| Flow\n \| ResponsiveAlign\n \| Align\n \| ResponsivePadding\n \| Padding,\n) => {\n const classesToMerge: string[] = []\n if (typeof prop === 'number' \|\| typeof prop === 'string') {\n classesToMerge.push(styles[`${classIdentifier}--${propName}-${prop}`])\n } else if (typeof prop === 'object') {\n for (const [key, value] of Object.entries(prop)) {\n classesToMerge.push(styles[`${classIdentifier}--${key}-${propName}-${value}`])\n }\n }\n return classesToMerge\n}\n\ntype ReturnOrderedChildrenProps = {\n order: Order \| ResponsiveOrder\n children: React.ReactNode\n currentBreakpointSize?: BreakpointSize\n}\n\nconst returnOrderedChildren = ({order, children, currentBreakpointSize}: ReturnOrderedChildrenProps) => {\n if (typeof order === 'string') {\n return order === 'default' ? children : React.Children.toArray(children).reverse()\n } else if (typeof order === 'object' && currentBreakpointSize) {\n // This handles setting the order based on breakpoints as you might expect via CSS\n const filledStyleOrder: ResponsiveOrder = {}\n let previousSize: Order = 'default'\n for (const size of Object.keys(BreakpointSize)) {\n const lowerCaseSize = size.toLocaleLowerCase()\n if (order[lowerCaseSize]) previousSize = order[lowerCaseSize]\n filledStyleOrder[lowerCaseSize] = order[lowerCaseSize] \|\| previousSize\n }\n return filledStyleOrder[currentBreakpointSize] === 'default' ? children : React.Children.toArray(children).reverse()\n } else {\n return children\n }\n}\n\nconst Item = ({\n className,\n columnStart,\n columnSpan = 12,\n rowStart,\n rowSpan = 2,\n flow = 'row',\n colorMode,\n visualAsBackground = false,\n order = 'default',\n bgColor = 'subtle',\n children,\n ...rest\n}: BentoItemProps) => {\n const {currentBreakpointSize} = useWindowSize()\n\n const validChildren = React.Children.toArray(children).reduce<ValidItemChildren>((acc, child) => {\n if (React.isValidElement<BentoVisualProps>(child) && child.type === Visual) {\n acc.push(child)\n }\n if (React.isValidElement<BentoContentProps>(child) && child.type === Content) {\n acc.push(child)\n }\n return acc\n }, [])\n\n const contentChildPadding =\n validChildren.find(\n (child): child is React.ReactElement<BentoContentProps> =>\n React.isValidElement<BentoContentProps>(child) && child.type === Content,\n )?.props.padding \|\| 'spacious'\n\n const bentoItemClassArray = [styles.Bento__Item, styles[`Bento__Item--bgColor-${bgColor}`]]\n\n bentoItemClassArray.push(\n ...returnClassBasedOnResponsiveMap('Bento__Item', 'column-span', columnSpan),\n ...returnClassBasedOnResponsiveMap('Bento__Item', 'row-span', rowSpan),\n ...returnClassBasedOnResponsiveMap('Bento__Item', 'column-start', columnStart),\n ...returnClassBasedOnResponsiveMap('Bento__Item', 'row-start', rowStart),\n ...returnClassBasedOnResponsiveMap('Bento__Item', 'flow', flow),\n ...returnClassBasedOnResponsiveMap('Bento__Item', 'gap', contentChildPadding),\n )\n\n if (!visualAsBackground && React.Children.toArray(children).length >= 1) {\n if (flow === 'column') {\n bentoItemClassArray.push(styles['Bento-column-padding-override'])\n }\n if (flow === 'row') {\n bentoItemClassArray.push(styles['Bento-row-padding-override'])\n }\n }\n\n const colorModeProp = colorMode ? {'data-color-mode': colorMode} : {}\n\n const orderedChildren = returnOrderedChildren({order, children: validChildren, currentBreakpointSize})\n\n return (\n <div\n {...colorModeProp}\n className={clsx(\n ...bentoItemClassArray,\n (visualAsBackground \|\| React.Children.toArray(children).length === 1) &&\n styles[`Bento__Item--visual-as-background`],\n className,\n )}\n {...rest}\n >\n {orderedChildren}\n </div>\n )\n}\n\ntype BentoContentProps = {\n leadingVisual?: ReactElement<IconProps>\n padding?: Padding \| ResponsivePadding\n verticalAlign?: Align \| ResponsiveAlign\n horizontalAlign?: Exclude<Align, 'end'> \| Partial<Record<Size, Exclude<Align, 'end'>>>\n} & React.HTMLAttributes<HTMLDivElement> &\n BaseProps<HTMLDivElement>\n\nconst Content = ({\n children,\n leadingVisual: LeadingVisual,\n padding = 'spacious',\n verticalAlign,\n horizontalAlign = 'start',\n className,\n ...rest\n}: BentoContentProps) => {\n const bentoContentClassArray = [styles.Bento__Content]\n bentoContentClassArray.push(\n ...returnClassBasedOnResponsiveMap('Bento__Item', 'verticalAlign', verticalAlign),\n ...returnClassBasedOnResponsiveMap('Bento__Item', 'horizontalAlign', horizontalAlign),\n ...returnClassBasedOnResponsiveMap('Bento', 'padding', padding),\n )\n\n const memoizedChildren = useMemo(() => React.Children.toArray(children), [children])\n\n const HeadingChildren = memoizedChildren.filter(\n (child): child is React.ReactElement<BentoHeadingProps> =>\n React.isValidElement<BentoHeadingProps>(child) && child.type === _Heading,\n )\n\n const LabelChild = memoizedChildren.find(\n (child): child is React.ReactElement<LabelProps> => React.isValidElement<LabelProps>(child) && child.type === Label,\n )\n const TextChild = memoizedChildren.find(\n (child): child is React.ReactElement<TextProps> => React.isValidElement<TextProps>(child) && child.type === Text,\n )\n const LinkChild = memoizedChildren.find(\n (child): child is React.ReactElement<LinkProps> => React.isValidElement<LinkProps>(child) && child.type === Link,\n )\n\n const usesDeprecatedLabel = React.isValidElement<LabelProps>(LabelChild)\n\n if (usesDeprecatedLabel && (process.env.NODE_ENV === 'development' \|\| process.env.NODE_ENV === 'test')) {\n // eslint-disable-next-line no-console\n console.warn('Bento.Content: standalone `Label` children are deprecated. Remove it or migrate from Bento.')\n }\n\n return (\n <div className={clsx(styles[`Bento-padding--${padding}`], ...bentoContentClassArray, className)} {...rest}>\n {React.isValidElement<IconProps>(LeadingVisual) &&\n React.cloneElement(LeadingVisual, {\n className: styles['Bento__Content-icon'],\n size: LeadingVisual.props.size \|\| 44,\n })}\n\n {usesDeprecatedLabel &&\n React.cloneElement(LabelChild as React.ReactElement<LabelProps>, {\n className: clsx(styles['Bento__Content-label'], LabelChild.props.className),\n })}\n\n {HeadingChildren.map(HeadingChild =>\n React.cloneElement(HeadingChild, {\n className: clsx(\n !React.isValidElement(TextChild) && styles['Bento__heading--no-text'],\n horizontalAlign === 'center' && styles['Bento__heading--with-max-width'],\n HeadingChild.props.className,\n ),\n }),\n )}\n\n {React.isValidElement<TextProps>(TextChild) &&\n React.cloneElement(TextChild, {\n variant: TextChild.props.variant \|\| 'muted',\n as: TextChild.props.as \|\| 'p',\n size: TextChild.props.size \|\| '300',\n className: clsx(styles['Bento__Content-text'], TextChild.props.className),\n })}\n\n {React.isValidElement<LinkProps>(LinkChild) &&\n React.cloneElement(LinkChild, {\n variant: LinkChild.props.variant \|\| 'accent',\n className: clsx(styles['Bento__call-to-action'], LinkChild.props.className),\n })}\n </div>\n )\n}\n\ntype BentoHeadingProps = {\n variant?: 'default' \| 'muted'\n} & BaseProps<HTMLHeadingElement> &\n HeadingProps\n\nconst _Heading = forwardRef(\n (\n {\n as = 'h3',\n size = '5',\n weight = 'medium',\n variant = 'default',\n className,\n children,\n ...props\n }: PropsWithChildren<BentoHeadingProps>,\n ref: Ref<HTMLHeadingElement>,\n ) => {\n const childrenArray = useMemo(() => React.Children.toArray(children), [children])\n\n const getConditionalVariant = useCallback(() => {\n if (findElementInChildren(children, 'b') \|\| findElementInChildren(children, 'em')) {\n return 'muted'\n }\n return 'default'\n }, [children])\n\n const defaultColor = childrenArray.length === 1 ? 'default' : getConditionalVariant()\n\n return (\n <Heading\n ref={ref}\n className={clsx(\n defaultColor === 'muted' && styles[`Bento__heading--muted`],\n variant === 'muted' && styles[`Bento__heading--muted`],\n className,\n )}\n size={size}\n as={as}\n weight={weight}\n {...props}\n >\n {children}\n </Heading>\n )\n },\n)\n\ntype BentoVisualProps = {\n horizontalAlign?: Align\n verticalAlign?: Align\n fillMedia?: boolean\n overflow?: 'hidden' \| 'initial'\n position?: string\n padding?: Padding \| ResponsivePadding\n} & React.HTMLAttributes<HTMLDivElement> &\n BaseProps<HTMLDivElement>\n\nconst Visual = ({\n horizontalAlign,\n verticalAlign,\n fillMedia = true,\n overflow = 'hidden',\n position = '50% 50%',\n padding,\n className,\n children,\n ...rest\n}: BentoVisualProps) => {\n const bentoVisualClassArray = [\n styles.Bento__Visual,\n horizontalAlign && styles[`Bento__Visual--horizontalAlign-${horizontalAlign}`],\n verticalAlign && styles[`Bento__Visual--verticalAlign-${verticalAlign}`],\n styles[`Bento__Visual--overflow-${overflow}`],\n ]\n bentoVisualClassArray.push(...returnClassBasedOnResponsiveMap('Bento', 'padding', padding))\n const childrenToRender = React.Children.map(children, child => {\n if (React.isValidElement(child)) {\n if (React.isValidElement<React.ImgHTMLAttributes<HTMLImageElement>>(child) && child.type === 'img') {\n return React.cloneElement(child, {\n style: {...child.props.style, objectPosition: position},\n })\n }\n if (React.isValidElement<React.ComponentProps<typeof Image>>(child) && child.type === Image) {\n return React.cloneElement(child, {\n style: {...child.props.style, objectPosition: position},\n })\n }\n return child\n }\n return null\n })\n return (\n <div\n className={clsx(\n ...bentoVisualClassArray,\n fillMedia && styles['Bento__Visual--fill'],\n !fillMedia && styles['Bento__Visual--no-fill'],\n className,\n )}\n {...rest}\n >\n {childrenToRender}\n </div>\n )\n}\n\n/*\n Use Bento to present content in a responsive grid layout.\n * @deprecated Bento is deprecated and will be removed in a future release. Use CTABanner or River instead.\n * @see https://primer.style/brand/components/Bento\n */\nexport const Bento = Object.assign(Root, {Item, Visual, Content, Heading: _Heading})\n"],"mappings":"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"}

package/esm/Card/Card.d.ts CHANGED Viewed

@@ -97,7 +97,7 @@ type CardDescriptionProps = BaseProps<HTMLParagraphElement> & {
 };
 /**
  * Card component:
- * {@link https://primer.style/brand/components/Card/ See usage examples}.
+ * @see https://primer.style/brand/components/Card
  */
 export declare const Card: React.ForwardRefExoticComponent<Omit<CardProps, "ref"> & React.RefAttributes<HTMLDivElement>> & {
     Image: typeof CardImage;

package/esm/Card/Card.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Card.js","names":[],"sources":["../../src/Card/Card.tsx"],"sourcesContent":["import React, {RefObject, forwardRef} from 'react'\n\nimport {clsx} from 'clsx'\nimport {Heading, HeadingProps, Text, Image, type ImageProps} from '..'\nimport {EyebrowText} from '../EyebrowText'\nimport {Icon, type IconProps} from '../Icon'\nimport {Token} from '../Token'\nimport {ExpandableArrow} from '../ExpandableArrow'\nimport type {BaseProps} from '../component-helpers'\nimport {useProvidedRefOrCreate} from '../hooks/useRef'\nimport {Colors} from '../constants'\nimport {isFragmentElement} from '../utils/isFragmentElement'\n\n/*\n Design tokens\n /\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/inline-code/colors-with-modes.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/card/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/card/colors-with-modes.css'\n\n/\n Main stylesheet (as a CSS Module)\n /\nimport styles from './Card.module.css'\nimport stylesLink from '../Link/Link.module.css'\n\nexport const CardVariants = ['default', 'minimal'] as const\nexport const CardCTAVariants = ['text', 'arrow', 'none'] as const\nexport const CardBackgroundColors = ['default', 'subtle', 'none'] as const\nexport const CardTokenPositions = ['block-start', 'block-end'] as const\nexport const CardLabelVariants = ['token', 'accent-text'] as const\nexport const CardImagePaddingOptions = ['default', 'none'] as const\n\nexport const CardIconColors = Colors\n\nexport const defaultCardIconColor = CardIconColors[0]\nexport const defaultCardCTAVariant = CardCTAVariants[0]\nexport const defaultCardLabelVariant = CardLabelVariants[0]\n\nexport type CardVariants = (typeof CardVariants)[number]\nexport type CardCTAVariant = (typeof CardCTAVariants)[number]\nexport type CardTokenPosition = (typeof CardTokenPositions)[number]\nexport type CardLabelVariant = (typeof CardLabelVariants)[number]\nexport type CardBackgroundColor = (typeof CardBackgroundColors)[number]\nexport type CardImagePadding = (typeof CardImagePaddingOptions)[number]\n\ntype CardLeadingVisual = React.ReactElement \| React.ComponentType<{className?: string}>\n\nexport type CardProps = {\n /\n Specify alternative card appearance\n /\n variant?: CardVariants\n /\n Valid children include Card.Image, Card.Icon, Card.Label, Card.Tokens, Card.Heading, and Card.Description\n /\n children:\n \| React.ReactNode\n \| React.ReactElement<CardImageProps>\n \| React.ReactElement<CardIconProps>\n \| React.ReactElement<CardLabelProps>\n \| React.ReactElement<CardTokensProps>\n \| React.ReactElement<CardHeadingProps>\n \| React.ReactElement<CardDescriptionProps>\n /\n Disable transitions and animations within the Card\n /\n disableAnimation?: boolean\n /\n The href of the link\n * /\n href: string\n /\n Changes the cta text of the card\n * /\n ctaText?: string\n /\n Specifies the presentation of the call-to-action area\n /\n ctaVariant?: CardCTAVariant\n /\n Optional, custom background color.\n /\n backgroundColor?: CardBackgroundColor\n /\n A visual that appears before the heading, commonly used for a logo or brand mark\n /\n leadingVisual?: CardLeadingVisual\n /\n Adds a border to the card.\n /\n hasBorder?: boolean\n /\n Fills the width of the parent container and removes the default max-width.\n /\n fullWidth?: boolean\n /\n Aligns the card content\n /\n align?: 'start' \| 'center'\n} & Omit<BaseProps<HTMLDivElement>, 'animate'> &\n Omit<React.ComponentPropsWithoutRef<'div'>, 'onMouseEnter' \| 'onMouseLeave' \| 'onFocus' \| 'onBlur'> &\n Pick<React.ComponentPropsWithoutRef<'a'>, 'onMouseEnter' \| 'onMouseLeave' \| 'onFocus' \| 'onBlur'>\n\nconst CardRoot = forwardRef<HTMLDivElement, CardProps>(\n (\n {\n align = 'start',\n onMouseEnter,\n onMouseLeave,\n onFocus,\n onBlur,\n children: childrenMaybeWrappedInFragment,\n className,\n ctaText = 'Learn more',\n ctaVariant = defaultCardCTAVariant,\n disableAnimation = false,\n fullWidth = false,\n href,\n hasBorder = false,\n leadingVisual,\n style,\n variant = 'default',\n backgroundColor,\n ...props\n },\n ref,\n ) => {\n const cardRef = useProvidedRefOrCreate(ref as RefObject<HTMLDivElement>)\n const resolvedBackgroundColor =\n backgroundColor ?? (variant === 'minimal' \|\| ctaVariant === 'arrow' ? 'none' : 'default')\n\n let children: React.ReactNode \| null\n\n if (childrenMaybeWrappedInFragment == null) {\n children = null\n } else if (isFragmentElement(childrenMaybeWrappedInFragment)) {\n children = childrenMaybeWrappedInFragment.props.children ?? null\n } else {\n children = childrenMaybeWrappedInFragment\n }\n\n const {cardImage, cardIcon, cardLabel, cardTokensBlockStart, cardTokensBlockEnd, cardHeading, cardDescription} =\n React.Children.toArray(children).reduce<{\n cardHeading?: ReturnType<typeof CardHeading>\n cardImage?: ReturnType<typeof CardImage>\n cardIcon?: ReturnType<typeof CardIcon>\n cardLabel?: ReturnType<typeof CardLabel>\n cardTokensBlockStart?: ReturnType<typeof CardTokens>\n cardTokensBlockEnd?: ReturnType<typeof CardTokens>\n cardDescription?: ReturnType<typeof CardDescription>\n }>((acc, child) => {\n if (isCardHeading(child)) {\n acc.cardHeading = React.cloneElement(child, {\n href,\n })\n } else if (isCardImage(child)) {\n acc.cardImage = child\n } else if (isCardIcon(child)) {\n acc.cardIcon = child\n } else if (isCardLabel(child)) {\n acc.cardLabel = child\n } else if (isCardTokens(child)) {\n if (child.props.position === 'block-end') {\n acc.cardTokensBlockEnd = child\n } else {\n acc.cardTokensBlockStart = child\n }\n } else if (isCardDescription(child)) {\n acc.cardDescription = child\n }\n\n return acc\n }, {})\n\n if ((process.env.NODE_ENV === 'development' \|\| process.env.NODE_ENV === 'test') && leadingVisual && cardIcon) {\n // eslint-disable-next-line no-console\n console.warn('Card: `leadingVisual` and `Card.Icon` cannot be used together. `Card.Icon` will not be rendered.')\n }\n\n const renderedLeadingVisual = getRenderableLeadingVisual(leadingVisual)\n const renderedCardIcon = renderedLeadingVisual ? undefined : cardIcon\n const imagePosition = cardImage ? cardImage.props.position \|\| 'block-start' : null\n const shouldRenderLinkArrow = !(align === 'center' && ctaVariant === 'text')\n\n return (\n <DefaultCardWrapperComponent\n style={style}\n className={clsx(\n fullWidth ? styles['Card--fullWidth'] : styles['Card--maxWidth'],\n styles[`Card--align-${align}`],\n )}\n >\n <div\n className={clsx(\n styles.Card,\n disableAnimation && styles['Card--disableAnimation'],\n renderedLeadingVisual && styles['Card--hasLeadingVisual'],\n ctaVariant === 'arrow' && styles['Card--ctaVariant-arrow'],\n cardTokensBlockEnd && styles['Card--tokensPosition-block-end'],\n variant === 'minimal' && styles['Card--variant-minimal'],\n hasBorder && styles['Card--border'],\n styles[`Card--backgroundColor-${resolvedBackgroundColor}`],\n imagePosition && styles[`Card--imagePos-${imagePosition}`],\n className,\n )}\n style={style}\n ref={cardRef}\n {...props}\n >\n {imagePosition === 'block-start' ? cardImage : null}\n {renderedLeadingVisual ? <div className={styles.Card__leadingVisual}>{renderedLeadingVisual}</div> : null}\n {renderedCardIcon}\n {cardTokensBlockStart}\n {cardLabel}\n {cardHeading}\n {cardDescription}\n {cardTokensBlockEnd}\n {imagePosition === 'block-end' ? cardImage : null}\n\n {ctaVariant !== 'none' ? (\n <div\n className={clsx(styles.Card__action, ctaVariant === 'arrow' && styles['Card__action--arrowOnly'])}\n aria-hidden={ctaVariant === 'arrow' ? true : undefined}\n >\n <span className={clsx(ctaVariant === 'arrow' && styles.Card__actionLabelClip)}>\n <Text as=\"span\" size=\"200\" className={clsx(stylesLink['Link--label'], styles.Card__actionLabel)}>\n {ctaText}\n </Text>\n </span>\n {shouldRenderLinkArrow ? (\n <span\n className={clsx(\n styles.Card__actionIcon,\n ctaVariant === 'arrow' && styles['Card__actionIcon--arrowOnly'],\n )}\n >\n <ExpandableArrow\n className={clsx(stylesLink['Link-arrow'], styles['Card--expandableArrow'])}\n aria-hidden=\"true\"\n />\n </span>\n ) : null}\n </div>\n ) : null}\n </div>\n </DefaultCardWrapperComponent>\n )\n },\n)\n\ntype DefaultCardWrapperComponentProps = React.PropsWithChildren<{\n className?: string\n style?: React.CSSProperties\n}>\n\nfunction DefaultCardWrapperComponent({className, children, style}: DefaultCardWrapperComponentProps) {\n return (\n <div className={clsx(styles['Card__outer'], className)} style={style}>\n {children}\n </div>\n )\n}\n\nfunction getRenderableLeadingVisual(leadingVisual?: CardLeadingVisual) {\n if (!leadingVisual) {\n return null\n }\n\n if (typeof leadingVisual === 'function') {\n return React.createElement(leadingVisual, {className: styles['Card__leadingVisualItem']})\n }\n\n if (React.isValidElement<{className?: string}>(leadingVisual)) {\n return React.cloneElement(leadingVisual, {\n className: clsx(styles['Card__leadingVisualItem'], leadingVisual.props.className),\n })\n }\n\n return null\n}\n\nexport type CardImageProps = {\n position?: 'block-start' \| 'block-end'\n padding?: CardImagePadding\n} & ImageProps\n\nfunction CardImage({className, position = 'block-start', padding = 'default', ...rest}: CardImageProps) {\n return (\n <div\n className={clsx(\n styles.Card__image,\n styles[`Card__image--position-${position}`],\n padding === 'none' && styles['Card__image--padding-none'],\n )}\n >\n <Image className={className} {...rest} />\n </div>\n )\n}\n\ntype CardIconProps = IconProps\n\nconst CardIcon = ({className, hasBackground = true, ...props}: IconProps) => (\n <Icon className={clsx(styles.Card__icon, className)} hasBackground={hasBackground} {...props} />\n)\n\ntype CardTokensProps = BaseProps<HTMLDivElement> & {\n children: React.ReactNode \| React.ReactNode[]\n position?: CardTokenPosition\n}\n\nconst CardTokens = forwardRef<HTMLDivElement, CardTokensProps>(\n ({children, className, position = 'block-start', ...rest}, ref) => {\n return (\n <div\n className={clsx(\n styles.Card__tokens,\n position === 'block-end' && styles['Card__tokens--position-block-end'],\n className,\n )}\n ref={ref}\n {...rest}\n >\n {children}\n </div>\n )\n },\n)\n\ntype CardLabelProps = Omit<BaseProps<HTMLSpanElement>, 'animate'> &\n Omit<React.ComponentPropsWithoutRef<'span'>, 'children'> & {\n children: React.ReactNode \| React.ReactNode[]\n variant?: CardLabelVariant\n }\n\nconst CardLabel = forwardRef<HTMLSpanElement, CardLabelProps>(\n ({children, variant = defaultCardLabelVariant, className, ...rest}, ref) => {\n if (variant === 'accent-text') {\n return (\n <EyebrowText ref={ref} className={clsx(styles.Card__label, className)} variant=\"accent\" {...rest}>\n {children}\n </EyebrowText>\n )\n }\n\n return (\n <Token\n ref={ref as React.Ref<HTMLSpanElement \| HTMLAnchorElement>}\n className={clsx(styles.Card__label, className)}\n {...rest}\n >\n {children}\n </Token>\n )\n },\n)\n\ntype CardHeadingProps = BaseProps<HTMLHeadingElement> & {\n children: React.ReactNode \| React.ReactNode[]\n as?: Exclude<HeadingProps['as'], 'h1'>\n href?: string\n} & Omit<HeadingProps, 'onMouseEnter' \| 'onMouseLeave' \| 'onFocus' \| 'onBlur'> &\n React.ComponentPropsWithoutRef<'a'>\n\nconst CardHeading = forwardRef<HTMLHeadingElement, CardHeadingProps>(\n ({children, as = 'h3', className, href, onMouseEnter, onMouseLeave, onBlur, onFocus, ...rest}, ref) => {\n return (\n <Heading size=\"6\" className={clsx(styles.Card__heading, className)} ref={ref} as={as} {...rest}>\n <a\n href={href}\n className={clsx(styles.Card__link)}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n onBlur={onBlur}\n onFocus={onFocus}\n >\n {children}\n </a>\n </Heading>\n )\n },\n)\n\ntype CardDescriptionProps = BaseProps<HTMLParagraphElement> & {\n children: React.ReactNode \| React.ReactNode[]\n}\n\nconst CardDescription = forwardRef<HTMLParagraphElement, CardDescriptionProps>(\n ({children, className, ...rest}, ref) => {\n return (\n <Text variant=\"muted\" ref={ref} size=\"200\" as=\"p\" className={clsx(styles.Card__description, className)} {...rest}>\n {children}\n </Text>\n )\n },\n)\n\nconst createComponentTypeGuard =\n <T,>(componentType: React.ComponentType<T>) =>\n (element: unknown): element is React.ReactElement<T> =>\n React.isValidElement(element) && element.type === componentType\n\nconst isCardImage = createComponentTypeGuard(CardImage)\nconst isCardIcon = createComponentTypeGuard(CardIcon)\nconst isCardLabel = createComponentTypeGuard(CardLabel)\nconst isCardTokens = createComponentTypeGuard(CardTokens)\nconst isCardHeading = createComponentTypeGuard(CardHeading)\nconst isCardDescription = createComponentTypeGuard(CardDescription)\n\n/\n Card component:\n * {@link https://primer.style/brand/components/Card/ See usage examples}.\n */\nexport const Card = Object.assign(CardRoot, {\n Image: CardImage,\n Icon: CardIcon,\n Label: CardLabel,\n Tokens: CardTokens,\n Heading: CardHeading,\n Description: CardDescription,\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA0BA,IAAa,IAAe,CAAC,WAAW,UAAU,EACrC,IAAkB;CAAC;CAAQ;CAAS;CAAO,EAC3C,IAAuB;CAAC;CAAW;CAAU;CAAO,EACpD,IAAqB,CAAC,eAAe,YAAY,EACjD,IAAoB,CAAC,SAAS,cAAc,EAC5C,IAA0B,CAAC,WAAW,OAAO,EAE7C,IAAiB,GAEjB,IAAuB,EAAe,IACtC,IAAwB,EAAgB,IACxC,IAA0B,EAAkB,IAmEnD,IAAW,GAEb,EACE,WAAQ,SACR,iBACA,iBACA,YACA,WACA,UAAU,GACV,cACA,aAAU,cACV,gBAAa,GACb,sBAAmB,IACnB,eAAY,IACZ,SACA,eAAY,IACZ,kBACA,UACA,aAAU,WACV,oBACA,GAAG,KAEL,MACG;CACH,IAAM,IAAU,EAAuB,EAAiC,EAClE,IACJ,MAAoB,MAAY,aAAa,MAAe,UAAU,SAAS,YAE7E;AAEJ,CAKE,IALE,KAAkC,OACzB,OACF,EAAkB,EAA+B,GAC/C,EAA+B,MAAM,YAAY,OAEjD;CAGb,IAAM,EAAC,cAAW,aAAU,cAAW,yBAAsB,uBAAoB,gBAAa,uBAC5F,EAAM,SAAS,QAAQ,EAAS,CAAC,QAQ7B,GAAK,OACH,EAAc,EAAM,GACtB,EAAI,cAAc,EAAM,aAAa,GAAO,EAC1C,SACD,CAAC,GACO,EAAY,EAAM,GAC3B,EAAI,YAAY,IACP,EAAW,EAAM,GAC1B,EAAI,WAAW,IACN,EAAY,EAAM,GAC3B,EAAI,YAAY,IACP,EAAa,EAAM,GACxB,EAAM,MAAM,aAAa,cAC3B,EAAI,qBAAqB,IAEzB,EAAI,uBAAuB,IAEpB,EAAkB,EAAM,KACjC,EAAI,kBAAkB,IAGjB,IACN,EAAE,CAAC;AAER,EAAA,QAAA,IAAA,aAA8B,iBAAA,QAAA,IAAA,aAA0C,WAAW,KAAiB,KAElG,QAAQ,KAAK,mGAAmG;CAGlH,IAAM,IAAwB,EAA2B,EAAc,EACjE,IAAmB,IAAwB,KAAA,IAAY,GACvD,IAAgB,IAAY,EAAU,MAAM,YAAY,gBAAgB,MACxE,IAAwB,EAAE,MAAU,YAAY,MAAe;AAErE,QACE,kBAAC,GAAD;EACS;EACP,WAAW,EACT,IAAY,EAAO,qBAAqB,EAAO,mBAC/C,EAAO,eAAe,KACvB;YAED,kBAAC,OAAD;GACE,WAAW,EACT,EAAO,MACP,KAAoB,EAAO,2BAC3B,KAAyB,EAAO,2BAChC,MAAe,WAAW,EAAO,2BACjC,KAAsB,EAAO,mCAC7B,MAAY,aAAa,EAAO,0BAChC,KAAa,EAAO,iBACpB,EAAO,yBAAyB,MAChC,KAAiB,EAAO,kBAAkB,MAC1C,EACD;GACM;GACP,KAAK;GACL,GAAI;aAfN;IAiBG,MAAkB,gBAAgB,IAAY;IAC9C,IAAwB,kBAAC,OAAD;KAAK,WAAW,EAAO;eAAsB;KAA4B,CAAA,GAAG;IACpG;IACA;IACA;IACA;IACA;IACA;IACA,MAAkB,cAAc,IAAY;IAE5C,MAAe,SAwBZ,OAvBF,kBAAC,OAAD;KACE,WAAW,EAAK,EAAO,cAAc,MAAe,WAAW,EAAO,2BAA2B;KACjG,eAAa,MAAe,UAAU,KAAO,KAAA;eAF/C,CAIE,kBAAC,QAAD;MAAM,WAAW,EAAK,MAAe,WAAW,EAAO,sBAAsB;gBAC3E,kBAAC,GAAD;OAAM,IAAG;OAAO,MAAK;OAAM,WAAW,EAAK,EAAW,gBAAgB,EAAO,kBAAkB;iBAC5F;OACI,CAAA;MACF,CAAA,EACN,IACC,kBAAC,QAAD;MACE,WAAW,EACT,EAAO,kBACP,MAAe,WAAW,EAAO,+BAClC;gBAED,kBAAC,GAAD;OACE,WAAW,EAAK,EAAW,eAAe,EAAO,yBAAyB;OAC1E,eAAY;OACZ,CAAA;MACG,CAAA,GACL,KACA;;IAEJ;;EACsB,CAAA;EAGnC;AAOD,SAAS,EAA4B,EAAC,cAAW,aAAU,YAA0C;AACnG,QACE,kBAAC,OAAD;EAAK,WAAW,EAAK,EAAO,aAAgB,EAAU;EAAS;EAC5D;EACG,CAAA;;AAIV,SAAS,EAA2B,GAAmC;AAerE,QAdK,IAID,OAAO,KAAkB,aACpB,EAAM,cAAc,GAAe,EAAC,WAAW,EAAO,yBAA2B,CAAC,GAGvF,EAAM,eAAqC,EAAc,GACpD,EAAM,aAAa,GAAe,EACvC,WAAW,EAAK,EAAO,yBAA4B,EAAc,MAAM,UAAU,EAClF,CAAC,GAGG,OAbE;;AAqBX,SAAS,EAAU,EAAC,cAAW,cAAW,eAAe,aAAU,WAAW,GAAG,KAAuB;AACtG,QACE,kBAAC,OAAD;EACE,WAAW,EACT,EAAO,aACP,EAAO,yBAAyB,MAChC,MAAY,UAAU,EAAO,6BAC9B;YAED,kBAAC,GAAD;GAAkB;GAAW,GAAI;GAAQ,CAAA;EACrC,CAAA;;AAMV,IAAM,KAAY,EAAC,cAAW,mBAAgB,IAAM,GAAG,QACrD,kBAAC,GAAD;CAAM,WAAW,EAAK,EAAO,YAAY,EAAU;CAAiB;CAAe,GAAI;CAAS,CAAA,EAQ5F,IAAa,GAChB,EAAC,aAAU,cAAW,cAAW,eAAe,GAAG,KAAO,MAEvD,kBAAC,OAAD;CACE,WAAW,EACT,EAAO,cACP,MAAa,eAAe,EAAO,qCACnC,EACD;CACI;CACL,GAAI;CAEH;CACG,CAAA,CAGX,EAQK,IAAY,GACf,EAAC,aAAU,aAAU,GAAyB,cAAW,GAAG,KAAO,MAC9D,MAAY,gBAEZ,kBAAC,GAAD;CAAkB;CAAK,WAAW,EAAK,EAAO,aAAa,EAAU;CAAE,SAAQ;CAAS,GAAI;CACzF;CACW,CAAA,GAKhB,kBAAC,GAAD;CACO;CACL,WAAW,EAAK,EAAO,aAAa,EAAU;CAC9C,GAAI;CAEH;CACK,CAAA,CAGb,EASK,IAAc,GACjB,EAAC,aAAU,QAAK,MAAM,cAAW,SAAM,iBAAc,iBAAc,WAAQ,YAAS,GAAG,KAAO,MAE3F,kBAAC,GAAD;CAAS,MAAK;CAAI,WAAW,EAAK,EAAO,eAAe,EAAU;CAAO;CAAS;CAAI,GAAI;WACxF,kBAAC,KAAD;EACQ;EACN,WAAW,EAAK,EAAO,WAAW;EACpB;EACA;EACN;EACC;EAER;EACC,CAAA;CACI,CAAA,CAGf,EAMK,IAAkB,GACrB,EAAC,aAAU,cAAW,GAAG,KAAO,MAE7B,kBAAC,GAAD;CAAM,SAAQ;CAAa;CAAK,MAAK;CAAM,IAAG;CAAI,WAAW,EAAK,EAAO,mBAAmB,EAAU;CAAE,GAAI;CACzG;CACI,CAAA,CAGZ,EAEK,KACC,OACJ,MACC,EAAM,eAAe,EAAQ,IAAI,EAAQ,SAAS,GAEhD,IAAc,EAAyB,EAAU,EACjD,IAAa,EAAyB,EAAS,EAC/C,IAAc,EAAyB,EAAU,EACjD,IAAe,EAAyB,EAAW,EACnD,IAAgB,EAAyB,EAAY,EACrD,IAAoB,EAAyB,EAAgB,EAMtD,IAAO,OAAO,OAAO,GAAU;CAC1C,OAAO;CACP,MAAM;CACN,OAAO;CACP,QAAQ;CACR,SAAS;CACT,aAAa;CACd,CAAC"}
1	+ {"version":3,"file":"Card.js","names":[],"sources":["../../src/Card/Card.tsx"],"sourcesContent":["import React, {RefObject, forwardRef} from 'react'\n\nimport {clsx} from 'clsx'\nimport {Heading, HeadingProps, Text, Image, type ImageProps} from '..'\nimport {EyebrowText} from '../EyebrowText'\nimport {Icon, type IconProps} from '../Icon'\nimport {Token} from '../Token'\nimport {ExpandableArrow} from '../ExpandableArrow'\nimport type {BaseProps} from '../component-helpers'\nimport {useProvidedRefOrCreate} from '../hooks/useRef'\nimport {Colors} from '../constants'\nimport {isFragmentElement} from '../utils/isFragmentElement'\n\n/*\n Design tokens\n /\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/inline-code/colors-with-modes.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/card/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/card/colors-with-modes.css'\n\n/\n Main stylesheet (as a CSS Module)\n /\nimport styles from './Card.module.css'\nimport stylesLink from '../Link/Link.module.css'\n\nexport const CardVariants = ['default', 'minimal'] as const\nexport const CardCTAVariants = ['text', 'arrow', 'none'] as const\nexport const CardBackgroundColors = ['default', 'subtle', 'none'] as const\nexport const CardTokenPositions = ['block-start', 'block-end'] as const\nexport const CardLabelVariants = ['token', 'accent-text'] as const\nexport const CardImagePaddingOptions = ['default', 'none'] as const\n\nexport const CardIconColors = Colors\n\nexport const defaultCardIconColor = CardIconColors[0]\nexport const defaultCardCTAVariant = CardCTAVariants[0]\nexport const defaultCardLabelVariant = CardLabelVariants[0]\n\nexport type CardVariants = (typeof CardVariants)[number]\nexport type CardCTAVariant = (typeof CardCTAVariants)[number]\nexport type CardTokenPosition = (typeof CardTokenPositions)[number]\nexport type CardLabelVariant = (typeof CardLabelVariants)[number]\nexport type CardBackgroundColor = (typeof CardBackgroundColors)[number]\nexport type CardImagePadding = (typeof CardImagePaddingOptions)[number]\n\ntype CardLeadingVisual = React.ReactElement \| React.ComponentType<{className?: string}>\n\nexport type CardProps = {\n /\n Specify alternative card appearance\n /\n variant?: CardVariants\n /\n Valid children include Card.Image, Card.Icon, Card.Label, Card.Tokens, Card.Heading, and Card.Description\n /\n children:\n \| React.ReactNode\n \| React.ReactElement<CardImageProps>\n \| React.ReactElement<CardIconProps>\n \| React.ReactElement<CardLabelProps>\n \| React.ReactElement<CardTokensProps>\n \| React.ReactElement<CardHeadingProps>\n \| React.ReactElement<CardDescriptionProps>\n /\n Disable transitions and animations within the Card\n /\n disableAnimation?: boolean\n /\n The href of the link\n * /\n href: string\n /\n Changes the cta text of the card\n * /\n ctaText?: string\n /\n Specifies the presentation of the call-to-action area\n /\n ctaVariant?: CardCTAVariant\n /\n Optional, custom background color.\n /\n backgroundColor?: CardBackgroundColor\n /\n A visual that appears before the heading, commonly used for a logo or brand mark\n /\n leadingVisual?: CardLeadingVisual\n /\n Adds a border to the card.\n /\n hasBorder?: boolean\n /\n Fills the width of the parent container and removes the default max-width.\n /\n fullWidth?: boolean\n /\n Aligns the card content\n /\n align?: 'start' \| 'center'\n} & Omit<BaseProps<HTMLDivElement>, 'animate'> &\n Omit<React.ComponentPropsWithoutRef<'div'>, 'onMouseEnter' \| 'onMouseLeave' \| 'onFocus' \| 'onBlur'> &\n Pick<React.ComponentPropsWithoutRef<'a'>, 'onMouseEnter' \| 'onMouseLeave' \| 'onFocus' \| 'onBlur'>\n\nconst CardRoot = forwardRef<HTMLDivElement, CardProps>(\n (\n {\n align = 'start',\n onMouseEnter,\n onMouseLeave,\n onFocus,\n onBlur,\n children: childrenMaybeWrappedInFragment,\n className,\n ctaText = 'Learn more',\n ctaVariant = defaultCardCTAVariant,\n disableAnimation = false,\n fullWidth = false,\n href,\n hasBorder = false,\n leadingVisual,\n style,\n variant = 'default',\n backgroundColor,\n ...props\n },\n ref,\n ) => {\n const cardRef = useProvidedRefOrCreate(ref as RefObject<HTMLDivElement>)\n const resolvedBackgroundColor =\n backgroundColor ?? (variant === 'minimal' \|\| ctaVariant === 'arrow' ? 'none' : 'default')\n\n let children: React.ReactNode \| null\n\n if (childrenMaybeWrappedInFragment == null) {\n children = null\n } else if (isFragmentElement(childrenMaybeWrappedInFragment)) {\n children = childrenMaybeWrappedInFragment.props.children ?? null\n } else {\n children = childrenMaybeWrappedInFragment\n }\n\n const {cardImage, cardIcon, cardLabel, cardTokensBlockStart, cardTokensBlockEnd, cardHeading, cardDescription} =\n React.Children.toArray(children).reduce<{\n cardHeading?: ReturnType<typeof CardHeading>\n cardImage?: ReturnType<typeof CardImage>\n cardIcon?: ReturnType<typeof CardIcon>\n cardLabel?: ReturnType<typeof CardLabel>\n cardTokensBlockStart?: ReturnType<typeof CardTokens>\n cardTokensBlockEnd?: ReturnType<typeof CardTokens>\n cardDescription?: ReturnType<typeof CardDescription>\n }>((acc, child) => {\n if (isCardHeading(child)) {\n acc.cardHeading = React.cloneElement(child, {\n href,\n })\n } else if (isCardImage(child)) {\n acc.cardImage = child\n } else if (isCardIcon(child)) {\n acc.cardIcon = child\n } else if (isCardLabel(child)) {\n acc.cardLabel = child\n } else if (isCardTokens(child)) {\n if (child.props.position === 'block-end') {\n acc.cardTokensBlockEnd = child\n } else {\n acc.cardTokensBlockStart = child\n }\n } else if (isCardDescription(child)) {\n acc.cardDescription = child\n }\n\n return acc\n }, {})\n\n if ((process.env.NODE_ENV === 'development' \|\| process.env.NODE_ENV === 'test') && leadingVisual && cardIcon) {\n // eslint-disable-next-line no-console\n console.warn('Card: `leadingVisual` and `Card.Icon` cannot be used together. `Card.Icon` will not be rendered.')\n }\n\n const renderedLeadingVisual = getRenderableLeadingVisual(leadingVisual)\n const renderedCardIcon = renderedLeadingVisual ? undefined : cardIcon\n const imagePosition = cardImage ? cardImage.props.position \|\| 'block-start' : null\n const shouldRenderLinkArrow = !(align === 'center' && ctaVariant === 'text')\n\n return (\n <DefaultCardWrapperComponent\n style={style}\n className={clsx(\n fullWidth ? styles['Card--fullWidth'] : styles['Card--maxWidth'],\n styles[`Card--align-${align}`],\n )}\n >\n <div\n className={clsx(\n styles.Card,\n disableAnimation && styles['Card--disableAnimation'],\n renderedLeadingVisual && styles['Card--hasLeadingVisual'],\n ctaVariant === 'arrow' && styles['Card--ctaVariant-arrow'],\n cardTokensBlockEnd && styles['Card--tokensPosition-block-end'],\n variant === 'minimal' && styles['Card--variant-minimal'],\n hasBorder && styles['Card--border'],\n styles[`Card--backgroundColor-${resolvedBackgroundColor}`],\n imagePosition && styles[`Card--imagePos-${imagePosition}`],\n className,\n )}\n style={style}\n ref={cardRef}\n {...props}\n >\n {imagePosition === 'block-start' ? cardImage : null}\n {renderedLeadingVisual ? <div className={styles.Card__leadingVisual}>{renderedLeadingVisual}</div> : null}\n {renderedCardIcon}\n {cardTokensBlockStart}\n {cardLabel}\n {cardHeading}\n {cardDescription}\n {cardTokensBlockEnd}\n {imagePosition === 'block-end' ? cardImage : null}\n\n {ctaVariant !== 'none' ? (\n <div\n className={clsx(styles.Card__action, ctaVariant === 'arrow' && styles['Card__action--arrowOnly'])}\n aria-hidden={ctaVariant === 'arrow' ? true : undefined}\n >\n <span className={clsx(ctaVariant === 'arrow' && styles.Card__actionLabelClip)}>\n <Text as=\"span\" size=\"200\" className={clsx(stylesLink['Link--label'], styles.Card__actionLabel)}>\n {ctaText}\n </Text>\n </span>\n {shouldRenderLinkArrow ? (\n <span\n className={clsx(\n styles.Card__actionIcon,\n ctaVariant === 'arrow' && styles['Card__actionIcon--arrowOnly'],\n )}\n >\n <ExpandableArrow\n className={clsx(stylesLink['Link-arrow'], styles['Card--expandableArrow'])}\n aria-hidden=\"true\"\n />\n </span>\n ) : null}\n </div>\n ) : null}\n </div>\n </DefaultCardWrapperComponent>\n )\n },\n)\n\ntype DefaultCardWrapperComponentProps = React.PropsWithChildren<{\n className?: string\n style?: React.CSSProperties\n}>\n\nfunction DefaultCardWrapperComponent({className, children, style}: DefaultCardWrapperComponentProps) {\n return (\n <div className={clsx(styles['Card__outer'], className)} style={style}>\n {children}\n </div>\n )\n}\n\nfunction getRenderableLeadingVisual(leadingVisual?: CardLeadingVisual) {\n if (!leadingVisual) {\n return null\n }\n\n if (typeof leadingVisual === 'function') {\n return React.createElement(leadingVisual, {className: styles['Card__leadingVisualItem']})\n }\n\n if (React.isValidElement<{className?: string}>(leadingVisual)) {\n return React.cloneElement(leadingVisual, {\n className: clsx(styles['Card__leadingVisualItem'], leadingVisual.props.className),\n })\n }\n\n return null\n}\n\nexport type CardImageProps = {\n position?: 'block-start' \| 'block-end'\n padding?: CardImagePadding\n} & ImageProps\n\nfunction CardImage({className, position = 'block-start', padding = 'default', ...rest}: CardImageProps) {\n return (\n <div\n className={clsx(\n styles.Card__image,\n styles[`Card__image--position-${position}`],\n padding === 'none' && styles['Card__image--padding-none'],\n )}\n >\n <Image className={className} {...rest} />\n </div>\n )\n}\n\ntype CardIconProps = IconProps\n\nconst CardIcon = ({className, hasBackground = true, ...props}: IconProps) => (\n <Icon className={clsx(styles.Card__icon, className)} hasBackground={hasBackground} {...props} />\n)\n\ntype CardTokensProps = BaseProps<HTMLDivElement> & {\n children: React.ReactNode \| React.ReactNode[]\n position?: CardTokenPosition\n}\n\nconst CardTokens = forwardRef<HTMLDivElement, CardTokensProps>(\n ({children, className, position = 'block-start', ...rest}, ref) => {\n return (\n <div\n className={clsx(\n styles.Card__tokens,\n position === 'block-end' && styles['Card__tokens--position-block-end'],\n className,\n )}\n ref={ref}\n {...rest}\n >\n {children}\n </div>\n )\n },\n)\n\ntype CardLabelProps = Omit<BaseProps<HTMLSpanElement>, 'animate'> &\n Omit<React.ComponentPropsWithoutRef<'span'>, 'children'> & {\n children: React.ReactNode \| React.ReactNode[]\n variant?: CardLabelVariant\n }\n\nconst CardLabel = forwardRef<HTMLSpanElement, CardLabelProps>(\n ({children, variant = defaultCardLabelVariant, className, ...rest}, ref) => {\n if (variant === 'accent-text') {\n return (\n <EyebrowText ref={ref} className={clsx(styles.Card__label, className)} variant=\"accent\" {...rest}>\n {children}\n </EyebrowText>\n )\n }\n\n return (\n <Token\n ref={ref as React.Ref<HTMLSpanElement \| HTMLAnchorElement>}\n className={clsx(styles.Card__label, className)}\n {...rest}\n >\n {children}\n </Token>\n )\n },\n)\n\ntype CardHeadingProps = BaseProps<HTMLHeadingElement> & {\n children: React.ReactNode \| React.ReactNode[]\n as?: Exclude<HeadingProps['as'], 'h1'>\n href?: string\n} & Omit<HeadingProps, 'onMouseEnter' \| 'onMouseLeave' \| 'onFocus' \| 'onBlur'> &\n React.ComponentPropsWithoutRef<'a'>\n\nconst CardHeading = forwardRef<HTMLHeadingElement, CardHeadingProps>(\n ({children, as = 'h3', className, href, onMouseEnter, onMouseLeave, onBlur, onFocus, ...rest}, ref) => {\n return (\n <Heading size=\"6\" className={clsx(styles.Card__heading, className)} ref={ref} as={as} {...rest}>\n <a\n href={href}\n className={clsx(styles.Card__link)}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n onBlur={onBlur}\n onFocus={onFocus}\n >\n {children}\n </a>\n </Heading>\n )\n },\n)\n\ntype CardDescriptionProps = BaseProps<HTMLParagraphElement> & {\n children: React.ReactNode \| React.ReactNode[]\n}\n\nconst CardDescription = forwardRef<HTMLParagraphElement, CardDescriptionProps>(\n ({children, className, ...rest}, ref) => {\n return (\n <Text variant=\"muted\" ref={ref} size=\"200\" as=\"p\" className={clsx(styles.Card__description, className)} {...rest}>\n {children}\n </Text>\n )\n },\n)\n\nconst createComponentTypeGuard =\n <T,>(componentType: React.ComponentType<T>) =>\n (element: unknown): element is React.ReactElement<T> =>\n React.isValidElement(element) && element.type === componentType\n\nconst isCardImage = createComponentTypeGuard(CardImage)\nconst isCardIcon = createComponentTypeGuard(CardIcon)\nconst isCardLabel = createComponentTypeGuard(CardLabel)\nconst isCardTokens = createComponentTypeGuard(CardTokens)\nconst isCardHeading = createComponentTypeGuard(CardHeading)\nconst isCardDescription = createComponentTypeGuard(CardDescription)\n\n/\n Card component:\n * @see https://primer.style/brand/components/Card\n */\nexport const Card = Object.assign(CardRoot, {\n Image: CardImage,\n Icon: CardIcon,\n Label: CardLabel,\n Tokens: CardTokens,\n Heading: CardHeading,\n Description: CardDescription,\n})\n"],"mappings":"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"}