@primer/react-brand 0.78.0-rc.e0204c62 → 0.79.0-rc.6f0687c1

package/docs/components/FeatureComparisonTable/index.md

@@ -0,0 +1,182 @@
+---
+title: Feature comparison table
+description: Use the feature comparison table to compare features across pricing plans.
+keywords: ['pricing', 'plans', 'comparison', 'features']
+ready: true
+source: https://github.com/primer/brand/blob/main/packages/react/src/FeatureComparisonTable/FeatureComparisonTable.tsx
+storybook: '/brand/storybook/?path=/story/components-featurecomparisontable--playground'
+---
+
+```js
+import {FeatureComparisonTable} from '@primer/react-brand'
+```
+
+## Examples
+
+### Default
+
+```jsx
+<FeatureComparisonTable>
+  <FeatureComparisonTable.Heading>Compare features</FeatureComparisonTable.Heading>
+  <FeatureComparisonTable.Item>
+    <FeatureComparisonTable.ItemHeading>Free</FeatureComparisonTable.ItemHeading>
+    <FeatureComparisonTable.Description>For individuals.</FeatureComparisonTable.Description>
+    <FeatureComparisonTable.Price>$0 per month</FeatureComparisonTable.Price>
+    <FeatureComparisonTable.PrimaryAction as="a" href="#">
+      Get started
+    </FeatureComparisonTable.PrimaryAction>
+  </FeatureComparisonTable.Item>
+  <FeatureComparisonTable.Item>
+    <FeatureComparisonTable.Label>Recommended</FeatureComparisonTable.Label>
+    <FeatureComparisonTable.ItemHeading>Team</FeatureComparisonTable.ItemHeading>
+    <FeatureComparisonTable.Description>For teams.</FeatureComparisonTable.Description>
+    <FeatureComparisonTable.Price>$4 per user / month</FeatureComparisonTable.Price>
+    <FeatureComparisonTable.PrimaryAction as="a" href="#">
+      Start a free trial
+    </FeatureComparisonTable.PrimaryAction>
+  </FeatureComparisonTable.Item>
+
+  <FeatureComparisonTable.Group>
+    <FeatureComparisonTable.GroupHeading id="core-features">Core features</FeatureComparisonTable.GroupHeading>
+    <FeatureComparisonTable.Row>
+      <FeatureComparisonTable.RowHeading>Private repositories</FeatureComparisonTable.RowHeading>
+      <FeatureComparisonTable.Cell variant="included" />
+      <FeatureComparisonTable.Cell variant="included" />
+    </FeatureComparisonTable.Row>
+    <FeatureComparisonTable.Row>
+      <FeatureComparisonTable.RowHeading>Support</FeatureComparisonTable.RowHeading>
+      <FeatureComparisonTable.Cell>Community</FeatureComparisonTable.Cell>
+      <FeatureComparisonTable.Cell>Standard</FeatureComparisonTable.Cell>
+    </FeatureComparisonTable.Row>
+  </FeatureComparisonTable.Group>
+</FeatureComparisonTable>
+```
+
+### Row descriptions
+
+Use `FeatureComparisonTable.RowDescription` to add context beneath a feature name. Descriptions can include links and emphasis.
+
+```jsx
+<FeatureComparisonTable>
+  <FeatureComparisonTable.Heading>Compare features</FeatureComparisonTable.Heading>
+  <FeatureComparisonTable.Item>
+    <FeatureComparisonTable.ItemHeading>Free</FeatureComparisonTable.ItemHeading>
+  </FeatureComparisonTable.Item>
+  <FeatureComparisonTable.Item>
+    <FeatureComparisonTable.ItemHeading>Team</FeatureComparisonTable.ItemHeading>
+  </FeatureComparisonTable.Item>
+  <FeatureComparisonTable.Group>
+    <FeatureComparisonTable.GroupHeading id="codespaces">Codespaces</FeatureComparisonTable.GroupHeading>
+    <FeatureComparisonTable.Row>
+      <FeatureComparisonTable.RowHeading>Codespaces</FeatureComparisonTable.RowHeading>
+      <FeatureComparisonTable.RowDescription>
+        Develop in <strong>the cloud</strong>. <InlineLink href="#codespaces">Learn more</InlineLink>
+      </FeatureComparisonTable.RowDescription>
+      <FeatureComparisonTable.Cell variant="included" />
+      <FeatureComparisonTable.Cell variant="included" />
+    </FeatureComparisonTable.Row>
+  </FeatureComparisonTable.Group>
+</FeatureComparisonTable>
+```
+
+## Component props
+
+### FeatureComparisonTable `Required`
+
+| Name       | Type                                                                                        | Default | required | Description                            |
+| :--------- | :------------------------------------------------------------------------------------------ | :-----: | :------: | :------------------------------------- |
+| `children` | `FeatureComparisonTable.Heading, FeatureComparisonTable.Item, FeatureComparisonTable.Group` |         |  `true`  | Table title, plans, and feature groups |
+
+### FeatureComparisonTable.Item `Required`
+
+One item per pricing plan to be displayed. Supports two to four plans.
+
+| Name       | Type                                                                                                                                                                                                               | Default | required | Description  |
+| :--------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-----: | :------: | :----------- |
+| `children` | `FeatureComparisonTable.Label, FeatureComparisonTable.ItemHeading, FeatureComparisonTable.Description, FeatureComparisonTable.Price, FeatureComparisonTable.PrimaryAction, FeatureComparisonTable.SecondaryAction` |         |  `true`  | Plan content |
+
+### FeatureComparisonTable.Label
+
+| Name       | Type        | Default | required | Description                                                                  |
+| :--------- | :---------- | :-----: | :------: | :--------------------------------------------------------------------------- |
+| `children` | `ReactNode` |         |  `true`  | Label text, such as "Recommended". Adding a label highlights the plan column |
+
+### FeatureComparisonTable.Heading `Required`
+
+| Name       | Type          | Default | required | Description                                  |
+| :--------- | :------------ | :-----: | :------: | :------------------------------------------- |
+| `as`       | `HeadingTags` |   `h2`  |  `false` | Heading level for the table title            |
+| `id`       | `string`      |         |  `false` | Anchor target and accessible label reference |
+| `children` | `ReactNode`   |         |  `true`  | Table title                                  |
+
+### FeatureComparisonTable.ItemHeading `Required`
+
+Plan name, shown alongside feature values on smaller screens.
+
+| Name       | Type          | Default | required | Description                        |
+| :--------- | :------------ | :-----: | :------: | :--------------------------------- |
+| `as`       | `HeadingTags` |   `h3`  |  `false` | Heading level for the plan summary |
+| `children` | `ReactNode`   |         |  `true`  | Plan name                          |
+
+### FeatureComparisonTable.Description
+
+| Name       | Type        | Default | required | Description      |
+| :--------- | :---------- | :-----: | :------: | :--------------- |
+| `children` | `ReactNode` |         |  `true`  | Plan description |
+
+### FeatureComparisonTable.Price
+
+| Name       | Type        | Default | required | Description                        |
+| :--------- | :---------- | :-----: | :------: | :--------------------------------- |
+| `children` | `ReactNode` |         |  `true`  | Price text, such as "$4 per month" |
+
+### FeatureComparisonTable.PrimaryAction and FeatureComparisonTable.SecondaryAction
+
+| Name       | Type              | Default | required | Description                              |
+| :--------- | :---------------- | :-----: | :------: | :--------------------------------------- |
+| `as`       | `'a' \| 'button'` |         |  `true`  | Link or button element                   |
+| `children` | `ReactNode`       |         |  `true`  | Action label                             |
+| `href`     | `string`          |         |  `false` | Link destination. Required when `as="a"` |
+
+### FeatureComparisonTable.Group `Required`
+
+| Name       | Type                                                                    |                    Default                   | required | Description                                              |
+| :--------- | :---------------------------------------------------------------------- | :------------------------------------------: | :------: | :------------------------------------------------------- |
+| `children` | `FeatureComparisonTable.GroupHeading, FeatureComparisonTable.Row`       |                                              |  `true`  | Group title and feature rows                             |
+| `expanded` | `'boolean' \| '{narrow: boolean \| regular: boolean \| wide: boolean}'` | `{narrow: false, regular: true, wide: true}` |  `false` | Initial expanded state, optionally set per viewport size |
+
+### FeatureComparisonTable.GroupHeading `Required`
+
+| Name       | Type          | Default | required | Description                         |
+| :--------- | :------------ | :-----: | :------: | :---------------------------------- |
+| `as`       | `HeadingTags` |   `h3`  |  `false` | Heading level                       |
+| `id`       | `string`      |         |  `false` | Anchor target for the group heading |
+| `children` | `ReactNode`   |         |  `true`  | Group title                         |
+
+### FeatureComparisonTable.Row `Required`
+
+| Name       | Type                                                                                                    | Default | required | Description                                         |
+| :--------- | :------------------------------------------------------------------------------------------------------ | :-----: | :------: | :-------------------------------------------------- |
+| `children` | `FeatureComparisonTable.RowHeading, FeatureComparisonTable.RowDescription, FeatureComparisonTable.Cell` |         |  `true`  | Feature name, optional description, and plan values |
+
+### FeatureComparisonTable.RowHeading `Required`
+
+| Name       | Type        | Default | required | Description  |
+| :--------- | :---------- | :-----: | :------: | :----------- |
+| `children` | `ReactNode` |         |  `true`  | Feature name |
+
+### FeatureComparisonTable.RowDescription
+
+| Name       | Type        | Default | required | Description         |
+| :--------- | :---------- | :-----: | :------: | :------------------ |
+| `children` | `ReactNode` |         |  `true`  | Feature description |
+
+### FeatureComparisonTable.Cell `Required`
+
+Add one cell per plan, in the same order as the items.
+
+| Name               | Type                                                      | Default | required | Description                                                                                  |
+| :----------------- | :-------------------------------------------------------- | :-----: | :------: | :------------------------------------------------------------------------------------------- |
+| `children`         | `ReactNode`                                               |         |  `false` | Feature value                                                                                |
+| `variant`          | `'included' \| 'unavailable' \| 'unlimited' \| 'refresh'` |         |  `false` | Included, unavailable, unlimited, or periodically renewed                                    |
+| `variantAriaLabel` | `string`                                                  |         |  `false` | Accessible icon label. Use to translate "Included", "Unavailable", "Unlimited", or "Refresh" |

package/docs/components/SubNav/index.md

@@ -45,6 +45,37 @@ import {SubNav} from '@primer/react-brand'
 </div>
 ```
 
+### Localized menu controls
+
+Internal `SubNav` labels such as the "More" link are rendered in `en` by default. Use `menuLabels` to customize these to different locales.
+
+```jsx
+<div style={{position: 'relative', height: 360, width: '100%'}}>
+  <SubNav
+    menuLabels={{
+      menuLabel: 'Menú de navegación',
+      closeLabel: 'Cerrar menú de navegación',
+      activeLabel: 'Menú de navegación. Página actual:',
+      closeActiveLabel: 'Cerrar menú de navegación. Página actual:',
+      overflowMenuLabel: 'Más',
+    }}
+  >
+    <SubNav.Heading href="#">AI</SubNav.Heading>
+    <SubNav.SubHeading href="#">GitHub Copilot</SubNav.SubHeading>
+    <SubNav.Link href="#">Aplicación de escritorio</SubNav.Link>
+    <SubNav.Link href="#" aria-current="page">
+      Copilot en VS Code
+    </SubNav.Link>
+    <SubNav.Link href="#">Agentes en GitHub</SubNav.Link>
+    <SubNav.Link href="#">Copilot CLI</SubNav.Link>
+    <SubNav.Link href="#">Revisión de código de Copilot</SubNav.Link>
+    <SubNav.Link href="#">Para empresas</SubNav.Link>
+    <SubNav.Link href="#">Tutoriales</SubNav.Link>
+    <SubNav.Link href="#">Planes y precios</SubNav.Link>
+  </SubNav>
+</div>
+```
+
 ### Optional CTA
 
 ```jsx
@@ -72,7 +103,7 @@ Submenus appear as a dropdown by default.
     <SubNav.Heading href="#">Features</SubNav.Heading>
     <SubNav.Link href="#" aria-current="page">
       Actions
-      <SubNav.SubMenu>
+      <SubNav.SubMenu aria-label="Actions submenu">
         <SubNav.Link href="#">Actions feature one</SubNav.Link>
         <SubNav.Link href="#">Actions feature two</SubNav.Link>
         <SubNav.Link href="#">Actions feature three</SubNav.Link>
@@ -116,9 +147,22 @@ Ensure that the text of each `SubNav.Link` within the anchor-based submenu fits
 
 ### SubNav `Required`
 
-| name        | type      | default | required | description                                                                   |
-| ----------- | --------- | ------- | -------- | ----------------------------------------------------------------------------- |
-| `fullWidth` | `boolean` | `false` | `false`  | Allows the SubNav to be used at full width, removing default internal padding |
+| name         | type                        | default        | required | description                                                                   |
+| ------------ | --------------------------- | -------------- | -------- | ----------------------------------------------------------------------------- |
+| `fullWidth`  | `boolean`                   | `false`        | `false`  | Allows the SubNav to be used at full width, removing default internal padding |
+| `menuLabels` | `Partial<SubNavMenuLabels>` | English labels | `false`  | Customizes the menu's accessible labels                                       |
+
+`SubNavMenuLabels` is exported from `@primer/react-brand`.
+
+#### Menu labels
+
+| Field               | Type     | English default                        | Purpose                                                                       |
+| ------------------- | -------- | -------------------------------------- | ----------------------------------------------------------------------------- |
+| `menuLabel`         | `string` | `Navigation menu`                      | Accessible label while the narrow menu is closed                              |
+| `closeLabel`        | `string` | `Close navigation menu`                | Accessible label while the narrow menu is open                                |
+| `activeLabel`       | `string` | `Navigation menu. Current page:`       | Complete prefix while the narrow menu is closed and a current page is present |
+| `closeActiveLabel`  | `string` | `Close navigation menu. Current page:` | Complete prefix while the narrow menu is open and a current page is present   |
+| `overflowMenuLabel` | `string` | `More`                                 | Visible and accessible label for the desktop overflow menu                    |
 
 ### SubNav.Heading `Required`
 
@@ -150,7 +194,8 @@ Ensure that the text of each `SubNav.Link` within the anchor-based submenu fits
 
 ### SubNav.SubMenu
 
-| name       | type                    | default     | required | description                           |
-| ---------- | ----------------------- | ----------- | -------- | ------------------------------------- |
-| `children` | `SubNav.Link`           |             | `false`  | Container for submenu links           |
-| `variant`  | `SubNavSubMenuVariants` | `'default'` | `false`  | Alternative presentation for submenus |
+| name         | type                    | default                      | required | description                                                                                                       |
+| ------------ | ----------------------- | ---------------------------- | -------- | ----------------------------------------------------------------------------------------------------------------- |
+| `children`   | `SubNav.Link`           |                              | `false`  | Container for submenu links                                                                                       |
+| `variant`    | `SubNavSubMenuVariants` | `'default'`                  | `false`  | Alternative presentation for submenus                                                                             |
+| `aria-label` | `string`                | `'Sub navigation'` (content) | `false`  | Complete accessible name for the submenu toggle and content; names the navigation landmark for the anchor variant |

package/docs/components/index.md

@@ -19,6 +19,7 @@ description: Primer Brand UI components
 - [CTA form](CTAForm/react.md): Use the CTA form component to create a form that is used to collect minimal information from users.
 - [Eyebrow banner](EyebrowBanner/index.md): Use the eyebrow banner to highlight important information at the top of a page.
 - [FAQ](FAQ/react.md): Use the FAQ component to display content in a Q&A format.
+- [Feature comparison table](FeatureComparisonTable/index.md): Use the feature comparison table to compare features across pricing plans.
 - [Footnotes](Footnotes/react.md): Use footnotes to display contextual information and cite sources in the page content.
 - [Hero](Hero/react.md): Use the hero component to render a full-width banner at the top of a page.
 - [Icon](Icon/index.md): Use the icon component to display Octicons with an optional background

package/docs/index.md

@@ -1,6 +1,6 @@
-# Primer Brand docs (v0.78.0-rc.e0204c62)
+# Primer Brand docs (v0.79.0-rc.6f0687c1)
 
-These docs are bundled with `@primer/react-brand@0.78.0-rc.e0204c62` and match your installed version.
+These docs are bundled with `@primer/react-brand@0.79.0-rc.6f0687c1` 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.
@@ -53,6 +53,7 @@ stylesheet and font setup. Component directories are named after their import (e
 - [CTA form](components/CTAForm/react.md): Use the CTA form component to create a form that is used to collect minimal information from users.
 - [Eyebrow banner](components/EyebrowBanner/index.md): Use the eyebrow banner to highlight important information at the top of a page.
 - [FAQ](components/FAQ/react.md): Use the FAQ component to display content in a Q&A format.
+- [Feature comparison table](components/FeatureComparisonTable/index.md): Use the feature comparison table to compare features across pricing plans.
 - [Footnotes](components/Footnotes/react.md): Use footnotes to display contextual information and cite sources in the page content.
 - [Hero](components/Hero/react.md): Use the hero component to render a full-width banner at the top of a page.
 - [Icon](components/Icon/index.md): Use the icon component to display Octicons with an optional background

package/esm/FeatureComparisonTable/FeatureComparisonTable.d.ts

@@ -0,0 +1,44 @@
+import React, { type PropsWithChildren } from 'react';
+import type { BaseProps } from '../component-helpers';
+/**
+ * Design tokens
+ */
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/feature-comparison-table/base.css';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/feature-comparison-table/colors-with-modes.css';
+export type FeatureComparisonTableProps = PropsWithChildren<BaseProps<HTMLDivElement> & Omit<React.HTMLAttributes<HTMLDivElement>, 'aria-label' | 'aria-labelledby'> & {
+    'data-testid'?: string;
+}>;
+/**
+ * Feature comparison tables compare plan metadata and feature availability across two to four plans.
+ */
+export declare const FeatureComparisonTable: React.ForwardRefExoticComponent<Omit<FeatureComparisonTableProps, "ref"> & React.RefAttributes<HTMLDivElement>> & {
+    Item: ({ children, className }: import("./sub-components").FeatureComparisonTableItemProps) => React.JSX.Element;
+    Label: (props: import("./sub-components").FeatureComparisonTableLabelProps) => React.JSX.Element;
+    Heading: (props: import("./sub-components").FeatureComparisonTableHeadingProps) => React.JSX.Element;
+    ItemHeading: (props: import("./sub-components").FeatureComparisonTableItemHeadingProps) => React.JSX.Element;
+    Description: (props: import("./sub-components").FeatureComparisonTableDescriptionProps) => React.JSX.Element;
+    Price: (props: import("./sub-components").FeatureComparisonTablePriceProps) => React.JSX.Element;
+    PrimaryAction: (props: import("./sub-components").FeatureComparisonTableActionProps) => React.JSX.Element;
+    SecondaryAction: (props: import("./sub-components").FeatureComparisonTableActionProps) => React.JSX.Element;
+    Group: ({ children, className, expanded }: import("./sub-components").FeatureComparisonTableGroupProps) => React.JSX.Element;
+    GroupHeading: ({ children, as, size, ...rest }: import("./sub-components").FeatureComparisonTableGroupHeadingProps) => React.JSX.Element;
+    Row: ({ children, className }: import("./sub-components").FeatureComparisonTableRowProps) => React.JSX.Element;
+    RowHeading: (props: import("./sub-components").FeatureComparisonTableRowHeadingProps) => React.JSX.Element;
+    RowDescription: (props: import("./sub-components").FeatureComparisonTableRowDescriptionProps) => React.JSX.Element;
+    Cell: (props: import("./sub-components").FeatureComparisonTableCellProps) => React.JSX.Element;
+    testIds: {
+        root: string;
+        heading: string;
+        narrow: string;
+        table: string;
+        item: string;
+        label: string;
+        price: string;
+        group: string;
+        row: string;
+        rowHeading: string;
+        cell: string;
+    };
+};
+export type { FeatureComparisonTableHeadingProps, FeatureComparisonTableItemHeadingProps, FeatureComparisonTableLabelProps, FeatureComparisonTableDescriptionProps, FeatureComparisonTablePriceProps, FeatureComparisonTableActionProps, FeatureComparisonTableItemProps, FeatureComparisonTableRowHeadingProps, FeatureComparisonTableRowDescriptionProps, FeatureComparisonTableCellProps, FeatureComparisonTableRowProps, FeatureComparisonTableGroupHeadingProps, FeatureComparisonTableGroupProps, } from './sub-components';
+//# sourceMappingURL=FeatureComparisonTable.d.ts.map

package/esm/FeatureComparisonTable/FeatureComparisonTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeatureComparisonTable.d.ts","sourceRoot":"","sources":["../../src/FeatureComparisonTable/FeatureComparisonTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,KAAK,iBAAiB,EAA8B,MAAM,OAAO,CAAA;AAE5F,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAyBnD;;GAEG;AACH,OAAO,+GAA+G,CAAA;AACtH,OAAO,4HAA4H,CAAA;AAQnI,MAAM,MAAM,2BAA2B,GAAG,iBAAiB,CACzD,SAAS,CAAC,cAAc,CAAC,GACvB,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,YAAY,GAAG,iBAAiB,CAAC,GAAG;IAC7E,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CACJ,CAAA;AAqND;;GAEG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgBjC,CAAA;AAEF,YAAY,EACV,kCAAkC,EAClC,sCAAsC,EACtC,gCAAgC,EAChC,sCAAsC,EACtC,gCAAgC,EAChC,iCAAiC,EACjC,+BAA+B,EAC/B,qCAAqC,EACrC,yCAAyC,EACzC,+BAA+B,EAC/B,8BAA8B,EAC9B,uCAAuC,EACvC,gCAAgC,GACjC,MAAM,kBAAkB,CAAA"}

package/esm/FeatureComparisonTable/FeatureComparisonTable.js

@@ -0,0 +1,162 @@
+import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
+import { useId as t } from "../hooks/useId.js";
+import { useAnimation as n } from "../animation/useAnimation.js";
+import r from "../hooks/useIsomorphicLayoutEffect.js";
+import i from "../component-helpers/shared.module.js";
+import { useWindowSize as a } from "../hooks/useWindowSize.js";
+import { TableContext as o, testIds as s } from "./FeatureComparisonTableContext.js";
+import c from "./FeatureComparisonTable.module.js";
+import { FeatureComparisonTableLabel as l } from "./sub-components/FeatureComparisonTableLabel.js";
+import { getChildrenOfType as u, hasItemLabel as d } from "./FeatureComparisonTableHelpers.js";
+import { useFeatureComparisonTableStickyHeaders as f } from "./useFeatureComparisonTableStickyHeaders.js";
+import { FeatureComparisonTableHeading as p } from "./sub-components/FeatureComparisonTableHeading.js";
+import { FeatureComparisonTableItemHeading as m } from "./sub-components/FeatureComparisonTableItemHeading.js";
+import { FeatureComparisonTableDescription as h } from "./sub-components/FeatureComparisonTableDescription.js";
+import { FeatureComparisonTablePrice as g } from "./sub-components/FeatureComparisonTablePrice.js";
+import { FeatureComparisonTablePrimaryAction as _ } from "./sub-components/FeatureComparisonTablePrimaryAction.js";
+import { FeatureComparisonTableSecondaryAction as v } from "./sub-components/FeatureComparisonTableSecondaryAction.js";
+import { FeatureComparisonTableItem as y } from "./sub-components/FeatureComparisonTableItem.js";
+import { FeatureComparisonTableRowHeading as b } from "./sub-components/FeatureComparisonTableRowHeading.js";
+import { FeatureComparisonTableRowDescription as x } from "./sub-components/FeatureComparisonTableRowDescription.js";
+import { FeatureComparisonTableCell as S } from "./sub-components/FeatureComparisonTableCell.js";
+import { FeatureComparisonTableRow as C } from "./sub-components/FeatureComparisonTableRow.js";
+import { FeatureComparisonTableGroupHeading as w } from "./sub-components/FeatureComparisonTableGroupHeading.js";
+import { FeatureComparisonTableGroup as T } from "./sub-components/FeatureComparisonTableGroup.js";
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/feature-comparison-table/colors-with-modes-Dw8AMSYp.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/feature-comparison-table/base-44NysoUh.css';/* empty css                                                                                                         */
+/* empty css                                                                                                                      */
+import E, { forwardRef as D, useEffect as O, useRef as k, useState as A } from "react";
+import { jsx as j, jsxs as M } from "react/jsx-runtime";
+//#region src/FeatureComparisonTable/FeatureComparisonTable.tsx
+var N = D(({ animate: l, children: m, className: h, onBlur: g, onFocus: _, style: v, "data-testid": b, ...x }, S) => {
+	let C = t(), { classes: w, styles: D } = n(l), { width: N, isMedium: P, isXLarge: F } = a(), [I, L] = A("narrow"), R = k(null), z = k({}), B = k({}), V = k(I), H = k(null), U = k(void 0), W = E.Children.toArray(m), G = u(W, p).at(-1), K = u(W, y), q = K.slice(0, 4), J = u(W, T), Y = q.some(d), X = f(R, I === "wide", q.length > 0);
+	O(() => {
+		process.env.NODE_ENV !== "production" && K.length > 4 && console.warn(`FeatureComparisonTable: supports at most 4 Item children, but received ${K.length}. Extra items are ignored.`);
+	}, [K.length]), O(() => {
+		let e = F ? "wide" : P ? "regular" : "narrow", t = V.current;
+		if (t === "wide" != (e === "wide")) {
+			let e = document.activeElement === document.body ? H.current : document.activeElement, n = t === "wide" ? B.current : z.current;
+			U.current = Object.entries(n).find(([, t]) => t !== null && t === e)?.[0];
+		}
+		H.current = null, L(e);
+	}, [
+		P,
+		F,
+		N
+	]), r(() => {
+		let e = V.current;
+		if (V.current = I, H.current = null, e === "wide" == (I === "wide")) return;
+		let t = I === "wide" ? B.current : z.current;
+		U.current &&= (t[U.current]?.focus(), void 0);
+	}, [I]);
+	let Z = (e) => {
+		let t = R.current, n = e.target;
+		if (X && I === "wide" && t?.contains(n) && !n.closest("thead") && n.closest("tbody")) {
+			let e = Array.from(t.querySelectorAll("thead th")).reduce((e, t) => {
+				let n = t.getBoundingClientRect();
+				return n.bottom > 0 && n.top < window.innerHeight ? Math.max(e, n.bottom) : e;
+			}, 0), r = n.getBoundingClientRect(), i = window.getComputedStyle(n), a = Math.max(0, (Number.parseFloat(i.outlineWidth) || 0) + (Number.parseFloat(i.outlineOffset) || 0));
+			e > 0 && r.bottom > 0 && r.top - a < e && window.scrollBy({
+				top: r.top - e - a,
+				behavior: "instant"
+			});
+		}
+		_?.(e);
+	};
+	if (q.length === 0) return null;
+	!G && process.env.NODE_ENV !== "production" && console.warn("FeatureComparisonTable: a root FeatureComparisonTable.Heading child is required.");
+	let Q = {
+		instanceId: C,
+		breakpoint: I,
+		items: q,
+		itemIndex: 0,
+		groupIndex: 0,
+		groupIdentity: "",
+		narrowGroupControlsRef: z,
+		tableGroupControlsRef: B
+	}, $ = J.map((e, t) => /* @__PURE__ */ j(o.Provider, {
+		value: {
+			...Q,
+			groupIndex: t,
+			groupIdentity: String(e.key)
+		},
+		children: e
+	}, e.key));
+	return /* @__PURE__ */ j(o.Provider, {
+		value: Q,
+		children: /* @__PURE__ */ j("div", {
+			className: e(c.FeatureComparisonTable, i.gridline, q.length > 1 && c[`FeatureComparisonTable--items${q.length}`], X && c["FeatureComparisonTable--stickyHeaders"], w, h),
+			"data-testid": b || s.root,
+			ref: S,
+			onBlur: (e) => {
+				(window.innerWidth !== N || !!F != (I === "wide")) && (H.current = e.target), g?.(e);
+			},
+			onFocus: Z,
+			style: {
+				...D,
+				...v
+			},
+			...x,
+			children: I === "wide" ? /* @__PURE__ */ M("table", {
+				"aria-labelledby": G ? G.props.id || `${C}-heading` : void 0,
+				className: c.FeatureComparisonTable__table,
+				"data-testid": s.table,
+				ref: R,
+				children: [
+					/* @__PURE__ */ M("colgroup", { children: [/* @__PURE__ */ j("col", { className: c.FeatureComparisonTable__featureColumn }), q.map((e) => /* @__PURE__ */ j("col", {}, e.key))] }),
+					/* @__PURE__ */ j("thead", {
+						className: c.FeatureComparisonTable__head,
+						children: /* @__PURE__ */ M("tr", {
+							className: e(J.length > 0 && i.gridline, c.FeatureComparisonTable__headingGrid, Y && c["FeatureComparisonTable__headingGrid--hasLabel"]),
+							children: [/* @__PURE__ */ j("th", {
+								className: e(c.FeatureComparisonTable__headerCell, Y && c["FeatureComparisonTable__headerCell--hasLabel"]),
+								scope: "col",
+								children: G ? E.cloneElement(G, { className: e(G.props.className, c.FeatureComparisonTable__tableHeading, Y && c["FeatureComparisonTable__tableHeading--hasLabel"]) }) : /* @__PURE__ */ j("span", {
+									className: "visually-hidden",
+									children: "Feature"
+								})
+							}), q.map((t, n) => /* @__PURE__ */ j("th", {
+								className: e(c.FeatureComparisonTable__headerCell, Y && c["FeatureComparisonTable__headerCell--hasLabel"], d(t) && c.FeatureComparisonTable__highlightedColumn),
+								scope: "col",
+								children: /* @__PURE__ */ j(o.Provider, {
+									value: {
+										...Q,
+										itemIndex: n + 1
+									},
+									children: t
+								})
+							}, t.key))]
+						})
+					}),
+					$
+				]
+			}) : /* @__PURE__ */ M("div", {
+				className: c.FeatureComparisonTable__narrow,
+				"data-testid": s.narrow,
+				children: [G ? /* @__PURE__ */ j("div", {
+					className: e(c.FeatureComparisonTable__narrowHeading, i.gridline),
+					children: G
+				}) : null, $]
+			})
+		})
+	});
+}), P = Object.assign(N, {
+	Item: y,
+	Label: l,
+	Heading: p,
+	ItemHeading: m,
+	Description: h,
+	Price: g,
+	PrimaryAction: _,
+	SecondaryAction: v,
+	Group: T,
+	GroupHeading: w,
+	Row: C,
+	RowHeading: b,
+	RowDescription: x,
+	Cell: S,
+	testIds: s
+});
+//#endregion
+export { P as FeatureComparisonTable };
+
+//# sourceMappingURL=FeatureComparisonTable.js.map

package/esm/FeatureComparisonTable/FeatureComparisonTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeatureComparisonTable.js","names":[],"sources":["../../src/FeatureComparisonTable/FeatureComparisonTable.tsx"],"sourcesContent":["import React, {forwardRef, type PropsWithChildren, useEffect, useRef, useState} from 'react'\nimport {clsx} from 'clsx'\nimport type {BaseProps} from '../component-helpers'\nimport {useAnimation} from '../animation'\nimport {useId} from '../hooks/useId'\nimport {useWindowSize} from '../hooks/useWindowSize'\nimport useIsomorphicLayoutEffect from '../hooks/useIsomorphicLayoutEffect'\nimport {type BreakpointCategory, type TableContextValue, TableContext, testIds} from './FeatureComparisonTableContext'\nimport {getChildrenOfType, hasItemLabel} from './FeatureComparisonTableHelpers'\nimport {useFeatureComparisonTableStickyHeaders} from './useFeatureComparisonTableStickyHeaders'\nimport {\n  FeatureComparisonTableHeading,\n  FeatureComparisonTableItem,\n  FeatureComparisonTableGroup,\n  FeatureComparisonTableLabel,\n  FeatureComparisonTableItemHeading,\n  FeatureComparisonTableDescription,\n  FeatureComparisonTablePrice,\n  FeatureComparisonTablePrimaryAction,\n  FeatureComparisonTableSecondaryAction,\n  FeatureComparisonTableGroupHeading,\n  FeatureComparisonTableRow,\n  FeatureComparisonTableRowHeading,\n  FeatureComparisonTableRowDescription,\n  FeatureComparisonTableCell,\n} from './sub-components'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/feature-comparison-table/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/feature-comparison-table/colors-with-modes.css'\n\n/**\n * Main stylesheet (as a CSS Module)\n */\nimport styles from './FeatureComparisonTable.module.css'\nimport gridlineStyles from '../component-helpers/shared.module.css'\n\nexport type FeatureComparisonTableProps = PropsWithChildren<\n  BaseProps<HTMLDivElement> &\n    Omit<React.HTMLAttributes<HTMLDivElement>, 'aria-label' | 'aria-labelledby'> & {\n      'data-testid'?: string\n    }\n>\n\nconst FeatureComparisonTableRoot = forwardRef<HTMLDivElement, FeatureComparisonTableProps>(\n  ({animate, children, className, onBlur, onFocus, style, 'data-testid': testId, ...rest}, ref) => {\n    const instanceId = useId()\n    const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n    const {width, isMedium: isRegular, isXLarge: isWide} = useWindowSize()\n    const [breakpoint, setBreakpoint] = useState<BreakpointCategory>('narrow')\n    const tableRef = useRef<HTMLTableElement>(null)\n    const narrowGroupControlsRef = useRef<Record<string, HTMLElement | null>>({})\n    const tableGroupControlsRef = useRef<Record<string, HTMLButtonElement | null>>({})\n    const previousBreakpointRef = useRef(breakpoint)\n    const blurredElementRef = useRef<HTMLElement | null>(null)\n    const focusedGroupIdentityRef = useRef<string | undefined>(undefined)\n    const rootChildren = React.Children.toArray(children)\n    const heading = getChildrenOfType(rootChildren, FeatureComparisonTableHeading).at(-1)\n    const allItems = getChildrenOfType(rootChildren, FeatureComparisonTableItem)\n    const items = allItems.slice(0, 4)\n    const groups = getChildrenOfType(rootChildren, FeatureComparisonTableGroup)\n    const hasLabels = items.some(hasItemLabel)\n    const hasStickyHeaders = useFeatureComparisonTableStickyHeaders(tableRef, breakpoint === 'wide', items.length > 0)\n\n    useEffect(() => {\n      if (process.env.NODE_ENV !== 'production' && allItems.length > 4) {\n        // eslint-disable-next-line no-console\n        console.warn(\n          `FeatureComparisonTable: supports at most 4 Item children, but received ${allItems.length}. Extra items are ignored.`,\n        )\n      }\n    }, [allItems.length])\n\n    useEffect(() => {\n      const nextBreakpoint = isWide ? 'wide' : isRegular ? 'regular' : 'narrow'\n      const previous = previousBreakpointRef.current\n\n      if ((previous === 'wide') !== (nextBreakpoint === 'wide')) {\n        // Capture focus before the previous projection unmounts and clears its refs.\n        const activeElement =\n          document.activeElement === document.body ? blurredElementRef.current : document.activeElement\n        const previousControls = previous === 'wide' ? tableGroupControlsRef.current : narrowGroupControlsRef.current\n        focusedGroupIdentityRef.current = Object.entries(previousControls).find(\n          ([, control]) => control !== null && control === activeElement,\n        )?.[0]\n      }\n      blurredElementRef.current = null\n      setBreakpoint(nextBreakpoint)\n    }, [isRegular, isWide, width])\n\n    useIsomorphicLayoutEffect(() => {\n      const previous = previousBreakpointRef.current\n      previousBreakpointRef.current = breakpoint\n      blurredElementRef.current = null\n      if ((previous === 'wide') === (breakpoint === 'wide')) return\n      const nextControls = breakpoint === 'wide' ? tableGroupControlsRef.current : narrowGroupControlsRef.current\n      if (focusedGroupIdentityRef.current) {\n        nextControls[focusedGroupIdentityRef.current]?.focus()\n        focusedGroupIdentityRef.current = undefined\n      }\n    }, [breakpoint])\n\n    const handleFocus = (event: React.FocusEvent<HTMLDivElement>) => {\n      const table = tableRef.current\n      const target = event.target\n      if (hasStickyHeaders && breakpoint === 'wide' && table?.contains(target) && !target.closest('thead')) {\n        if (target.closest('tbody')) {\n          const stickyHeaderBottom = Array.from(table.querySelectorAll<HTMLTableCellElement>('thead th')).reduce(\n            (maximumBottom, header) => {\n              const rect = header.getBoundingClientRect()\n              const isVisible = rect.bottom > 0 && rect.top < window.innerHeight\n              return isVisible ? Math.max(maximumBottom, rect.bottom) : maximumBottom\n            },\n            0,\n          )\n          const targetRect = target.getBoundingClientRect()\n          const targetStyles = window.getComputedStyle(target)\n          const focusIndicatorClearance = Math.max(\n            0,\n            (Number.parseFloat(targetStyles.outlineWidth) || 0) + (Number.parseFloat(targetStyles.outlineOffset) || 0),\n          )\n          if (\n            stickyHeaderBottom > 0 &&\n            targetRect.bottom > 0 &&\n            targetRect.top - focusIndicatorClearance < stickyHeaderBottom\n          ) {\n            window.scrollBy({top: targetRect.top - stickyHeaderBottom - focusIndicatorClearance, behavior: 'instant'})\n          }\n        }\n      }\n      onFocus?.(event)\n    }\n\n    if (items.length === 0) return null\n    if (!heading && process.env.NODE_ENV !== 'production') {\n      // eslint-disable-next-line no-console\n      console.warn('FeatureComparisonTable: a root FeatureComparisonTable.Heading child is required.')\n    }\n\n    const tableContext: TableContextValue = {\n      instanceId,\n      breakpoint,\n      items,\n      itemIndex: 0,\n      groupIndex: 0,\n      groupIdentity: '',\n      narrowGroupControlsRef,\n      tableGroupControlsRef,\n    }\n    const groupElements = groups.map((group, index) => (\n      <TableContext.Provider\n        value={{...tableContext, groupIndex: index, groupIdentity: String(group.key)}}\n        key={group.key}\n      >\n        {group}\n      </TableContext.Provider>\n    ))\n\n    return (\n      <TableContext.Provider value={tableContext}>\n        <div\n          className={clsx(\n            styles.FeatureComparisonTable,\n            gridlineStyles.gridline,\n            items.length > 1 && styles[`FeatureComparisonTable--items${items.length}`],\n            hasStickyHeaders && styles['FeatureComparisonTable--stickyHeaders'],\n            animationClasses,\n            className,\n          )}\n          data-testid={testId || testIds.root}\n          ref={ref}\n          onBlur={event => {\n            if (window.innerWidth !== width || Boolean(isWide) !== (breakpoint === 'wide'))\n              blurredElementRef.current = event.target\n            onBlur?.(event)\n          }}\n          onFocus={handleFocus}\n          style={{...animationInlineStyles, ...style}}\n          {...rest}\n        >\n          {breakpoint !== 'wide' ? (\n            <div className={styles.FeatureComparisonTable__narrow} data-testid={testIds.narrow}>\n              {heading ? (\n                <div className={clsx(styles.FeatureComparisonTable__narrowHeading, gridlineStyles.gridline)}>\n                  {heading}\n                </div>\n              ) : null}\n              {groupElements}\n            </div>\n          ) : (\n            <table\n              aria-labelledby={heading ? heading.props.id || `${instanceId}-heading` : undefined}\n              className={styles.FeatureComparisonTable__table}\n              data-testid={testIds.table}\n              ref={tableRef}\n            >\n              <colgroup>\n                <col className={styles.FeatureComparisonTable__featureColumn} />\n                {items.map(item => (\n                  <col key={item.key} />\n                ))}\n              </colgroup>\n              <thead className={styles.FeatureComparisonTable__head}>\n                <tr\n                  className={clsx(\n                    groups.length > 0 && gridlineStyles.gridline,\n                    styles.FeatureComparisonTable__headingGrid,\n                    hasLabels && styles['FeatureComparisonTable__headingGrid--hasLabel'],\n                  )}\n                >\n                  <th\n                    className={clsx(\n                      styles.FeatureComparisonTable__headerCell,\n                      hasLabels && styles['FeatureComparisonTable__headerCell--hasLabel'],\n                    )}\n                    scope=\"col\"\n                  >\n                    {heading ? (\n                      React.cloneElement(heading, {\n                        className: clsx(\n                          heading.props.className,\n                          styles.FeatureComparisonTable__tableHeading,\n                          hasLabels && styles['FeatureComparisonTable__tableHeading--hasLabel'],\n                        ),\n                      })\n                    ) : (\n                      <span className=\"visually-hidden\">Feature</span>\n                    )}\n                  </th>\n                  {items.map((item, index) => (\n                    <th\n                      className={clsx(\n                        styles.FeatureComparisonTable__headerCell,\n                        hasLabels && styles['FeatureComparisonTable__headerCell--hasLabel'],\n                        hasItemLabel(item) && styles.FeatureComparisonTable__highlightedColumn,\n                      )}\n                      scope=\"col\"\n                      key={item.key}\n                    >\n                      <TableContext.Provider value={{...tableContext, itemIndex: index + 1}}>\n                        {item}\n                      </TableContext.Provider>\n                    </th>\n                  ))}\n                </tr>\n              </thead>\n              {groupElements}\n            </table>\n          )}\n        </div>\n      </TableContext.Provider>\n    )\n  },\n)\n\n/**\n * Feature comparison tables compare plan metadata and feature availability across two to four plans.\n */\nexport const FeatureComparisonTable = Object.assign(FeatureComparisonTableRoot, {\n  Item: FeatureComparisonTableItem,\n  Label: FeatureComparisonTableLabel,\n  Heading: FeatureComparisonTableHeading,\n  ItemHeading: FeatureComparisonTableItemHeading,\n  Description: FeatureComparisonTableDescription,\n  Price: FeatureComparisonTablePrice,\n  PrimaryAction: FeatureComparisonTablePrimaryAction,\n  SecondaryAction: FeatureComparisonTableSecondaryAction,\n  Group: FeatureComparisonTableGroup,\n  GroupHeading: FeatureComparisonTableGroupHeading,\n  Row: FeatureComparisonTableRow,\n  RowHeading: FeatureComparisonTableRowHeading,\n  RowDescription: FeatureComparisonTableRowDescription,\n  Cell: FeatureComparisonTableCell,\n  testIds,\n})\n\nexport type {\n  FeatureComparisonTableHeadingProps,\n  FeatureComparisonTableItemHeadingProps,\n  FeatureComparisonTableLabelProps,\n  FeatureComparisonTableDescriptionProps,\n  FeatureComparisonTablePriceProps,\n  FeatureComparisonTableActionProps,\n  FeatureComparisonTableItemProps,\n  FeatureComparisonTableRowHeadingProps,\n  FeatureComparisonTableRowDescriptionProps,\n  FeatureComparisonTableCellProps,\n  FeatureComparisonTableRowProps,\n  FeatureComparisonTableGroupHeadingProps,\n  FeatureComparisonTableGroupProps,\n} from './sub-components'\n"],"mappings":"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"}

package/esm/FeatureComparisonTable/FeatureComparisonTable.module-CGnj3YJu.css

@@ -0,0 +1 @@
+.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable___dngKP{--brand-FeatureComparisonTable-itemCount:1;--brand-FeatureComparisonTable-featureColumnWidth:var(--brand-FeatureComparisonTable-default-featureColumnWidth);width:100%;color:var(--brand-color-text-default);container-type:inline-size}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable--items2___x2QKi{--brand-FeatureComparisonTable-itemCount:2}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable--items3___PBf2a{--brand-FeatureComparisonTable-itemCount:3}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable--items4___C1tK_{--brand-FeatureComparisonTable-itemCount:4;--brand-FeatureComparisonTable-featureColumnWidth:var(--brand-FeatureComparisonTable-fourItems-featureColumnWidth)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__narrowHeading___olgb8{padding:var(--base-size-60) var(--base-size-20);text-align:center}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__narrowHeading___olgb8:before{content:none}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__table___M6UcH{border-collapse:collapse;table-layout:fixed;width:100%;display:none}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__tableHeading___qntyG{text-align:start}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__rowHeading___lLU9H{align-items:center;gap:var(--base-size-8);display:inline-flex}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__rowDescription___aPLbp{margin-block-start:var(--base-size-8)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__cell___KoDID{justify-content:center;align-items:center;gap:var(--base-size-8);text-align:center;word-wrap:anywhere;max-width:100%;display:inline-flex}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__cellIcon___li3MO{flex:0 0 var(--base-size-24);width:var(--base-size-24);height:var(--base-size-24);justify-content:center;align-items:center;display:inline-flex}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__cellIcon--included___gb5E0,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__cellIcon--unlimited___6S4_o,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__cellIcon--refresh___VM2hn{border-radius:var(--brand-borderRadius-full)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__cellIcon--included___gb5E0{color:var(--brand-FeatureComparisonTable-includedIndicator-fgColor);background-color:var(--brand-FeatureComparisonTable-includedIndicator-bgColor)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__cellIcon--unlimited___6S4_o{color:var(--brand-FeatureComparisonTable-unlimitedIndicator-fgColor);background-color:var(--brand-FeatureComparisonTable-unlimitedIndicator-bgColor)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__cellIcon--refresh___VM2hn{color:var(--brand-FeatureComparisonTable-refreshIndicator-fgColor);background-color:var(--brand-FeatureComparisonTable-refreshIndicator-bgColor)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__group___XE2zK{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__group___XE2zK~.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__group___XE2zK{border-block-start:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__summary___8PpmB{justify-content:space-between;align-items:center;gap:var(--base-size-12);min-height:var(--base-size-80);padding:var(--base-size-24) var(--base-size-20) var(--base-size-4);cursor:pointer;list-style:none;display:flex}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__summary___8PpmB::-webkit-details-marker{display:none}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__chevron___FtiUb{width:var(--base-size-16);height:var(--base-size-16);margin-inline:var(--base-size-6);flex-shrink:0}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__chevron--expanded___3WPYL{transform:rotate(180deg)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__narrow___OkfDy .Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__row___Gc3qY{border-block-start:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__narrow___OkfDy .Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__row___Gc3qY:first-child{border-block-start:0}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__narrow___OkfDy .Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__rowHeading___lLU9H{min-height:var(--base-size-48);padding:var(--base-size-12) var(--base-size-20);justify-content:space-between;display:flex}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__narrow___OkfDy .Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__rowHeadingContent___KSfue{padding:var(--base-size-12) var(--base-size-20)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__narrow___OkfDy .Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__rowHeadingContent___KSfue .Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__rowHeading___lLU9H{min-height:auto;padding:0}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__planName___DTywr{word-wrap:anywhere}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__narrow___OkfDy .Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__cell___KoDID{text-align:end;justify-content:flex-end}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__planValues___bZ2yv{grid-template-columns:minmax(0,1fr) minmax(0,2fr);margin:0;display:grid}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__planTerm___mzmmH,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__planValue___Ph_zM{min-width:0;min-height:calc(var(--base-size-28) + var(--base-size-24));padding-block:var(--base-size-12);margin:0}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__planTerm___mzmmH{padding-inline:var(--base-size-20) var(--base-size-8)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__planValue___Ph_zM{padding-inline:var(--base-size-8) var(--base-size-20);text-align:end}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__item___bayqC{grid-row:1/span 4;grid-template-rows:subgrid;border-block-start:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);text-align:start;align-content:start;display:grid}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__item--hasLabel___hvCZl{border-block-start:0;grid-row-end:span 5}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__item--offset___WWEYj{grid-row-start:2}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__itemContent___xO24j{grid-row:1/span 4;grid-template-rows:subgrid;grid-template-columns:minmax(0, 1fr) fit-content(calc((100% - var(--base-size-8)) / 2));grid-column-gap:var(--base-size-8);-moz-column-gap:var(--base-size-8);column-gap:var(--base-size-8);min-width:0;padding:var(--base-size-16) var(--base-size-28);align-content:start;justify-self:stretch;display:grid}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__itemContent--hasLabel___YTcaZ{border-block-start:var(--brand-borderWidth-thin) solid var(--brand-color-border-subtle);grid-row:2/span 4}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__labelCell___5nPTu{padding:calc(var(--base-size-16) - var(--brand-borderWidth-thin)) var(--base-size-28) var(--base-size-16);border-block-start:var(--brand-borderWidth-thin) solid var(--brand-FeatureComparisonTable-label-accentColor);grid-row:1;justify-self:stretch;align-items:center;display:flex;position:relative}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__labelCell___5nPTu:before{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-subtle);content:"";pointer-events:none;position:absolute;inset:0}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__label___WoGfw{font-family:var(--brand-fontStack-monospace);font-size:var(--brand-text-size-100);font-weight:var(--base-text-weight-medium);letter-spacing:var(--brand-text-letterSpacing-100);line-height:var(--brand-text-lineHeight-200);text-transform:uppercase;display:inline-block}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__itemHeading___6bVkq{word-wrap:anywhere;grid-row:1;align-self:start}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__description___A5hme{grid-area:2/1/auto/-1;margin-block-start:var(--base-size-12)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__price___5a2qj{text-align:end;word-wrap:anywhere;grid-area:1/2;align-self:start;margin:0}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__actions___LF_4R{grid-gap:var(--base-size-12);gap:var(--base-size-12);width:100%;grid-area:4/1/auto/-1;align-self:start;margin-block-start:var(--base-size-12);display:grid}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__row___Gc3qY,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__planTerm___mzmmH,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__planValue___Ph_zM,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__rowHeaderCell___r2pHn,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__tableCell___anJpx{transition:background-color var(--brand-animation-duration-fast) var(--brand-animation-easing-default)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__row___Gc3qY:focus-within{background-color:var(--brand-FeatureComparisonTable-rowHighlight-bgColor)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__row___Gc3qY a:focus-visible,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__row___Gc3qY button:focus-visible{z-index:1;position:relative}@media (width>=48rem){.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__narrow___OkfDy{max-width:38.625rem;margin-inline:auto}}@media (width>=80rem){.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable___dngKP{padding-block-start:var(--base-size-60)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__table___M6UcH{display:table}:where(.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__headerCell___Y2QpE,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__rowHeaderCell___r2pHn,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__tableCell___anJpx,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__groupDivider___tbGNF){padding:var(--base-size-12) var(--base-size-28);border-block-end:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);vertical-align:top}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__headerCell___Y2QpE,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__rowHeaderCell___r2pHn,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__groupDivider___tbGNF{text-align:start}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__row___Gc3qY:last-child>*,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__groupDivider--noVisibleRows____IfnP{border-block-end:0}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__headingGrid___uc4oR:before,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__groupDivider___tbGNF:after{content:none}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__tableCell___anJpx{text-align:center}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__tableCell--hasVariant___a9jCs{vertical-align:middle}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__groupBackground___pFWoJ>:first-child,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__groupBackground___pFWoJ>:last-child,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__rowHeaderCell___r2pHn,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__tableCell___anJpx:last-child,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__item___bayqC{position:relative}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__groupBackground___pFWoJ>:first-child:before,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__groupBackground___pFWoJ>:last-child:before,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__rowHeaderCell___r2pHn:before,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__tableCell___anJpx:last-child:before,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__item___bayqC:before{content:"";pointer-events:none;position:absolute;inset:0}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__item___bayqC:before{inset-block-end:var(--brand-borderWidth-thin)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__rowHeaderCell___r2pHn:before,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__groupBackground___pFWoJ>:first-child:before,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__item___bayqC:before{border-inline-start:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__tableCell___anJpx:last-child:before,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__groupBackground___pFWoJ>:last-child:before{border-inline-end:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__featureColumn___yPFyJ{width:var(--brand-FeatureComparisonTable-featureColumnWidth)}:where(.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable--stickyHeaders___Vg9gu) .Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__headerCell___Y2QpE{background-color:var(--brand-color-canvas-default)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable--stickyHeaders___Vg9gu .Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__headingGrid___uc4oR:after{z-index:4}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__groupDivider___tbGNF{padding-block:var(--base-size-48) var(--base-size-4);position:relative}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__groupBackground___pFWoJ,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__headingGrid___uc4oR{grid-template-columns:minmax(0, var(--brand-FeatureComparisonTable-featureColumnWidth)) repeat(var(--brand-FeatureComparisonTable-itemCount), minmax(0, 1fr));display:grid}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__groupBackground___pFWoJ{pointer-events:none;position:absolute;inset:0}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__groupControl___srZUw{justify-content:flex-start;align-items:center;gap:var(--base-size-12);min-height:calc(var(--base-size-28) + var(--base-size-24));color:inherit;font:inherit;text-align:inherit;cursor:pointer;background:0 0;border:0;padding:0;display:inline-flex;position:relative}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__chevron___FtiUb{margin-inline:0}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__headingGrid___uc4oR{grid-template-rows:repeat(4,auto);width:100cqw}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__headingGrid--hasLabel___z1_Pw{grid-template-rows:repeat(5,auto)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable--stickyHeaders___Vg9gu .Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__head___iGAPA{z-index:2;position:sticky;inset-block-start:0}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__headerCell___Y2QpE{grid-row:1/span 4;grid-template-rows:subgrid;border-block:0;padding:0;display:grid}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__headerCell--hasLabel___5QsYF{grid-row-end:span 5}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__tableHeading___qntyG{padding:var(--base-size-28);align-self:end}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__headerCell___Y2QpE:last-child .Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__item___bayqC:before{border-inline-end:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__tableHeading--hasLabel___mUlr7{grid-row:2/-1;align-self:start;padding-block:0;position:relative;inset-block-start:var(--base-size-16)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__highlightedColumn___RwptH{background-color:var(--brand-FeatureComparisonTable-highlightedColumn-bgColor)}.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__row___Gc3qY:focus-within>*{background-color:var(--brand-FeatureComparisonTable-rowHighlight-bgColor)}}@media (hover:hover) and (pointer:fine){.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__row___Gc3qY:hover{background-color:var(--brand-FeatureComparisonTable-rowHighlight-bgColor)}}@media (hover:hover) and (pointer:fine) and (width>=80rem){.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__row___Gc3qY:hover>*{background-color:var(--brand-FeatureComparisonTable-rowHighlight-bgColor)}}@media (prefers-reduced-motion:reduce){.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__row___Gc3qY,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__planTerm___mzmmH,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__planValue___Ph_zM,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__rowHeaderCell___r2pHn,.Primer_Brand__FeatureComparisonTable-module__FeatureComparisonTable__tableCell___anJpx{transition-duration:0s}}