@primer/react-brand 0.3.0-rc.6d63e37 → 0.3.0-rc.78f0d9f

package/CHANGELOG.md

@@ -4,7 +4,11 @@
 
 ### Minor Changes
 
-- [#45](https://github.com/primer/react-brand/pull/45) [`2fb6924`](https://github.com/primer/react-brand/commit/2fb6924a834ddcbad34cfb97ecfc1659d54f4ed5) Thanks [@rezrah](https://github.com/rezrah)! - > **Warning**
+- [`c8609a8`](https://github.com/primer/react-brand/commit/c8609a8d35ea80192d85e97794390207f4624e63) Thanks [@rezrah](https://github.com/rezrah)! - added an FAQ component, which displays a list of questions and answers relating to a particular subject.
+
+  [See usage examples](https://primer.style/react-brand/components/FAQ)
+
+* [#45](https://github.com/primer/react-brand/pull/45) [`2fb6924`](https://github.com/primer/react-brand/commit/2fb6924a834ddcbad34cfb97ecfc1659d54f4ed5) Thanks [@rezrah](https://github.com/rezrah)! - > **Warning**
 
   > This is a breaking change, but as the library is a pre-v1 release we are publishing this update as a `minor` change.
   > Please read the following instructions carefully before updating:

package/lib/Accordion/Accordion.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+/**
+ * Design tokens
+ */
+import '../../lib/design-tokens/css/tokens/functional/components/accordion/colors-with-modes.css';
+export declare type AccordionRootProps = {
+    open?: boolean;
+    className?: string;
+    children: React.ReactElement<AccordionHeadingProps | AccordionContentProps>[];
+} & React.HTMLAttributes<HTMLDetailsElement>;
+export declare function AccordionRoot({ children, className, open, ...rest }: AccordionRootProps): JSX.Element;
+declare type AccordionHeadingProps = {
+    className?: string;
+    children: string;
+};
+export declare function AccordionHeading({ children, className }: AccordionHeadingProps): JSX.Element;
+declare type AccordionContentProps = {
+    className?: string;
+    children: React.ReactElement | React.ReactElement[];
+};
+export declare function AccordionContent({ children, className }: AccordionContentProps): JSX.Element;
+/**
+ * Branded Accordion component
+ */
+export declare const Accordion: typeof AccordionRoot & {
+    Content: typeof AccordionContent;
+    Heading: typeof AccordionHeading;
+};
+export {};

package/lib/Accordion/index.d.ts

@@ -0,0 +1 @@
+export * from './Accordion';

package/lib/FAQ/FAQ.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import { AccordionHeading, AccordionContent, AccordionRoot, AccordionRootProps } from '..';
+/**
+ * Design tokens
+ */
+import '../../lib/design-tokens/css/tokens/functional/components/faq/base.css';
+import '../../lib/design-tokens/css/tokens/functional/components/faq/colors-with-modes.css';
+declare type FAQRootProps = {
+    className?: string;
+    children: React.ReactElement<FAQHeadingProps | FAQSubheadingProps | AccordionRootProps>[];
+};
+declare function FAQRoot({ children, className }: FAQRootProps): JSX.Element;
+declare type FAQHeadingProps = {
+    className?: string;
+    size?: 'medium' | 'large';
+    align?: 'start' | 'center';
+    children: string;
+};
+declare function FAQHeading({ children, className, size, align }: FAQHeadingProps): JSX.Element;
+declare type FAQSubheadingProps = {
+    align?: 'start' | 'center';
+    className?: string;
+    children: string;
+};
+declare function FAQSubheading({ children, className }: FAQSubheadingProps): JSX.Element;
+/**
+ * FAQ component:
+ * {@link https://primer.style/react-brand/components/FAQ/ See usage examples}.
+ */
+export declare const FAQ: typeof FAQRoot & {
+    Subheading: typeof FAQSubheading;
+    Heading: typeof FAQHeading;
+    Item: typeof AccordionRoot;
+    Question: typeof AccordionHeading;
+    Answer: typeof AccordionContent;
+};
+export {};

package/lib/FAQ/index.d.ts

@@ -0,0 +1 @@
+export * from './FAQ';

package/lib/InlineLink/InlineLink.d.ts

@@ -0,0 +1,24 @@
+import React, { PropsWithChildren } from 'react';
+import { TextSizes } from '../';
+/**
+ * Design tokens
+ */
+import '../../lib/design-tokens/css/tokens/functional/components/inline-link/colors-with-modes.css';
+export declare type InlineLinkProps = {
+    /**
+     * Forward a custom HTML class attribute
+     */
+    className?: string;
+    /**
+     * Specify the links destination
+     */
+    href: string;
+    /**
+     * Specify the text size
+     */
+    size?: typeof TextSizes[number];
+} & React.AnchorHTMLAttributes<HTMLAnchorElement>;
+/**
+ * A HTML anchor link component that renders inline with adjacent text.
+ */
+export declare function InlineLink({ className, size, children, href, ...rest }: PropsWithChildren<InlineLinkProps>): JSX.Element;

package/lib/InlineLink/index.d.ts

@@ -0,0 +1 @@
+export * from './InlineLink';

package/lib/css/main.css

@@ -91,7 +91,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:10:25 GMT
+ * Generated on Fri, 01 Jul 2022 09:35:47 GMT
  */
 
 :root {
@@ -897,7 +897,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:10:25 GMT
+ * Generated on Fri, 01 Jul 2022 09:35:47 GMT
  */
 
 :root {
@@ -922,7 +922,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:10:25 GMT
+ * Generated on Fri, 01 Jul 2022 09:35:47 GMT
  */
 
 :root {
@@ -970,12 +970,16 @@ select {
   --brand-text-weight-300: var(--base-text-weight-normal);
   --brand-text-weight-200: var(--base-text-weight-normal);
   --brand-text-weight-100: var(--base-text-weight-normal);
+  --brand-heading-lineHeight-700: 2rem;
+  --brand-heading-lineHeight-600: 1.75rem;
+  --brand-heading-lineHeight-500: 1.5rem;
+  --brand-heading-lineHeight-400: 1.25rem;
   --brand-heading-letterSpacing-700: -0.01em;
   --brand-heading-letterSpacing-600: -0.01em;
   --brand-heading-letterSpacing-500: -0.01em;
   --brand-heading-letterSpacing-400: -0.01em;
-  --brand-heading-weight-700: var(--base-text-weight-bold);
-  --brand-heading-weight-600: var(--base-text-weight-semibold);
+  --brand-heading-weight-700: var(--base-text-weight-extrabold);
+  --brand-heading-weight-600: var(--base-text-weight-bold);
   --brand-heading-weight-500: var(--base-text-weight-semibold);
   --brand-heading-weight-400: var(--base-text-weight-semibold);
   --brand-fontStack-monospace: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
@@ -1029,12 +1033,16 @@ select {
     --brand-text-weight-300: var(--base-text-weight-normal);
     --brand-text-weight-200: var(--base-text-weight-normal);
     --brand-text-weight-100: var(--base-text-weight-normal);
+    --brand-heading-lineHeight-700: 2.75rem;
+    --brand-heading-lineHeight-600: 2rem;
+    --brand-heading-lineHeight-500: 1.75rem;
+    --brand-heading-lineHeight-400: 1.5rem;
     --brand-heading-letterSpacing-700: -0.01em;
     --brand-heading-letterSpacing-600: -0.01em;
     --brand-heading-letterSpacing-500: -0.01em;
     --brand-heading-letterSpacing-400: -0.01em;
-    --brand-heading-weight-700: var(--base-text-weight-bold);
-    --brand-heading-weight-600: var(--base-text-weight-semibold);
+    --brand-heading-weight-700: var(--base-text-weight-extrabold);
+    --brand-heading-weight-600: var(--base-text-weight-bold);
     --brand-heading-weight-500: var(--base-text-weight-semibold);
     --brand-heading-weight-400: var(--base-text-weight-semibold);
   }
@@ -1076,12 +1084,16 @@ select {
     --brand-text-weight-300: var(--base-text-weight-normal);
     --brand-text-weight-200: var(--base-text-weight-normal);
     --brand-text-weight-100: var(--base-text-weight-normal);
+    --brand-heading-lineHeight-700: 3.25rem;
+    --brand-heading-lineHeight-600: 2.25rem;
+    --brand-heading-lineHeight-500: 1.75rem;
+    --brand-heading-lineHeight-400: 1.5rem;
     --brand-heading-letterSpacing-700: -0.01em;
     --brand-heading-letterSpacing-600: -0.01em;
     --brand-heading-letterSpacing-500: -0.01em;
     --brand-heading-letterSpacing-400: -0.01em;
-    --brand-heading-weight-700: var(--base-text-weight-bold);
-    --brand-heading-weight-600: var(--base-text-weight-semibold);
+    --brand-heading-weight-700: var(--base-text-weight-extrabold);
+    --brand-heading-weight-600: var(--base-text-weight-bold);
     --brand-heading-weight-500: var(--base-text-weight-semibold);
     --brand-heading-weight-400: var(--base-text-weight-semibold);
   }
@@ -1089,7 +1101,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:10:25 GMT
+ * Generated on Fri, 01 Jul 2022 09:35:47 GMT
  */
 
 :root {
@@ -1103,10 +1115,32 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:10:26 GMT
+ * Generated on Fri, 01 Jul 2022 09:35:47 GMT
  */
 
 :root {
+  --brand-borderRadius-full: 100vh;
+  --brand-borderRadius-large: 0.75rem;
+  --brand-borderRadius-medium: 0.375rem;
+  --brand-borderRadius-small: 0.1875rem;
+  --brand-borderWidth-thick: max(4px, 0.25rem);
+  --brand-borderWidth-normal: max(2px, 0.125rem);
+  --brand-borderWidth-thin: max(1px, 0.0625rem);
+  --brand-borderInset-thick: inset 0 0 0 var(--brand-borderWidth-thick);
+  --brand-borderInset-normal: inset 0 0 0 var(--brand-borderWidth-normal);
+  --brand-borderInset-thin: inset 0 0 0 var(--brand-borderWidth-thin);
+}
+
+/**
+ * Do not edit directly
+ * Generated on Fri, 01 Jul 2022 09:35:48 GMT
+ */
+
+:root {
+  --brand-color-accent-fg: var(--base-color-scale-pink-5);
+  --brand-color-accent-emphasis: var(--base-color-scale-pink-5);
+  --brand-color-accent-muted: hsl(var(--base-color-scale-pink-3-hsl) / 60%);
+  --brand-color-accent-subtle: var(--base-color-scale-pink-0);
   --brand-color-text-default: var(--base-color-scale-gray-9);
   --brand-color-text-muted: var(--base-color-scale-gray-6);
   --brand-color-text-subtle: var(--base-color-scale-gray-5);
@@ -1122,9 +1156,14 @@ select {
   --brand-color-border-default: var(--base-color-scale-gray-2);
   --brand-color-border-muted: hsl(var(--base-color-scale-gray-2-hsl) / 99.7%);
   --brand-color-border-subtle: hsl(var(--base-color-scale-black-0-hsl) / 99.85%);
+  --brand-color-focus: var(--base-color-scale-blue-5);
 }
 
 [data-color-mode="light"] {
+  --brand-color-accent-fg: var(--base-color-scale-pink-5);
+  --brand-color-accent-emphasis: var(--base-color-scale-pink-5);
+  --brand-color-accent-muted: hsl(var(--base-color-scale-pink-3-hsl) / 60%);
+  --brand-color-accent-subtle: var(--base-color-scale-pink-0);
   --brand-color-text-default: var(--base-color-scale-gray-9);
   --brand-color-text-muted: var(--base-color-scale-gray-6);
   --brand-color-text-subtle: var(--base-color-scale-gray-5);
@@ -1140,9 +1179,14 @@ select {
   --brand-color-border-default: var(--base-color-scale-gray-2);
   --brand-color-border-muted: hsl(var(--base-color-scale-gray-2-hsl) / 99.7%);
   --brand-color-border-subtle: hsl(var(--base-color-scale-black-0-hsl) / 99.85%);
+  --brand-color-focus: var(--base-color-scale-blue-5);
 }
 
 [data-color-mode="dark"] {
+  --brand-color-accent-fg: var(--base-color-scale-pink-3);
+  --brand-color-accent-emphasis: var(--base-color-scale-pink-5);
+  --brand-color-accent-muted: hsl(var(--base-color-scale-pink-4-hsl) / 60%);
+  --brand-color-accent-subtle: hsl(var(--base-color-scale-pink-4-hsl) / 85%);
   --brand-color-text-default: var(--base-color-scale-white-0);
   --brand-color-text-muted: var(--base-color-scale-gray-3);
   --brand-color-text-subtle: var(--base-color-scale-gray-4);
@@ -1158,6 +1202,7 @@ select {
   --brand-color-border-default: var(--base-color-scale-gray-6);
   --brand-color-border-muted: var(--base-color-scale-gray-7);
   --brand-color-border-subtle: hsl(var(--base-color-scale-gray-0-hsl) / 99.9%);
+  --brand-color-focus: var(--base-color-scale-blue-3);
 }
 
 .Primer_Brand__Hero-module__Hero___EM3jf {
@@ -1290,7 +1335,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:10:26 GMT
+ * Generated on Fri, 01 Jul 2022 09:35:48 GMT
  */
 
 :root {
@@ -1398,7 +1443,7 @@ select {
 .Primer_Brand__Heading-module__Heading--3___wsITu {
   font-weight: var(--brand-heading-weight-700);
   font-size: var(--brand-text-size-700);
-  line-height: var(--brand-text-lineHeight-700);
+  line-height: var(--brand-heading-lineHeight-700);
   font-family: var(--brand-heading-fontFamily);
   letter-spacing: var(--brand-heading-letterSpacing-700);
 }
@@ -1429,7 +1474,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:10:25 GMT
+ * Generated on Fri, 01 Jul 2022 09:35:47 GMT
  */
 
 :root {
@@ -1439,7 +1484,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:10:25 GMT
+ * Generated on Fri, 01 Jul 2022 09:35:47 GMT
  */
 
 :root {
@@ -1560,6 +1605,62 @@ select {
   }
 }
 
+/**
+ * Do not edit directly
+ * Generated on Fri, 01 Jul 2022 09:35:48 GMT
+ */
+
+:root {
+  --brand-InlineLink-color-rest: var(--base-color-scale-blue-5);
+  --brand-InlineLink-color-pressed: var(--base-color-scale-blue-7);
+}
+
+[data-color-mode="light"] {
+  --brand-InlineLink-color-rest: var(--base-color-scale-blue-5);
+  --brand-InlineLink-color-pressed: var(--base-color-scale-blue-7);
+}
+
+[data-color-mode="dark"] {
+  --brand-InlineLink-color-rest: var(--base-color-scale-blue-4);
+  --brand-InlineLink-color-pressed: var(--base-color-scale-blue-2);
+}
+
+.Primer_Brand__InlineLink-module__InlineLink___U_Ama {
+  text-decoration: none;
+  position: relative;
+}
+
+.Primer_Brand__InlineLink-module__InlineLink___U_Ama,
+.Primer_Brand__InlineLink-module__InlineLink___U_Ama > span {
+  color: var(--brand-InlineLink-color-rest);
+}
+
+.Primer_Brand__InlineLink-module__InlineLink___U_Ama:active,
+.Primer_Brand__InlineLink-module__InlineLink___U_Ama:active > span {
+  color: var(--brand-InlineLink-color-pressed);
+}
+
+.Primer_Brand__InlineLink-module__InlineLink___U_Ama::after {
+  content: '';
+  border-bottom: 1px solid var(--brand-InlineLink-color-rest);
+  height: 0;
+  transition: 0.3s transform;
+  transform: scaleY(1);
+  transform-origin: 50% 100%;
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+
+.Primer_Brand__InlineLink-module__InlineLink___U_Ama:hover::after {
+  transform: scaleY(-2);
+}
+
+.Primer_Brand__InlineLink-module__InlineLink___U_Ama:active::after {
+  border-color: var(--brand-InlineLink-color-pressed);
+}
+
 .Primer_Brand__Link-module__Link___lvKjM {
   position: relative;
   display: inline-flex;
@@ -1613,3 +1714,242 @@ select {
   height: 20px;
 }
 
+/**
+ * Do not edit directly
+ * Generated on Fri, 01 Jul 2022 09:35:48 GMT
+ */
+
+:root {
+  --brand-Accordion-toggle-color-start: var(--brand-color-accent-fg);
+  --brand-Accordion-toggle-color-end: var(--brand-color-accent-fg);
+}
+
+[data-color-mode="light"] {
+  --brand-Accordion-toggle-color-start: var(--brand-color-accent-fg);
+  --brand-Accordion-toggle-color-end: var(--brand-color-accent-fg);
+}
+
+[data-color-mode="dark"] {
+  --brand-Accordion-toggle-color-start: var(--brand-color-accent-fg);
+  --brand-Accordion-toggle-color-end: var(--brand-color-accent-fg);
+}
+
+.Primer_Brand__Accordion-module__Accordion___M_LPt {
+  box-sizing: border-box;
+  position: relative;
+  border-bottom: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);
+}
+
+.Primer_Brand__Accordion-module__Accordion___M_LPt::after {
+  content: '';
+  border: 3px solid var(--brand-color-border-default);
+  height: 0;
+  transition: 0.3s transform;
+  transform: scaleY(0);
+  transform-origin: 50% 100%;
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+
+.Primer_Brand__Accordion-module__Accordion___M_LPt:hover::after {
+  transform: scaleY(0.35);
+}
+
+.Primer_Brand__Accordion-module__Accordion__summary___NUIYc {
+  cursor: pointer;
+  padding: var(--base-size-24) 0;
+  position: relative;
+  display: grid;
+  grid-template-columns: var(--base-size-24) auto;
+  grid-gap: var(--base-size-8);
+  gap: var(--base-size-8);
+}
+
+.Primer_Brand__Accordion-module__Accordion__summary___NUIYc::-webkit-details-marker {
+  display: none;
+}
+
+.Primer_Brand__Accordion-module__Accordion__summary___NUIYc.Primer_Brand__Accordion-module__focus-visible___NWNew {
+  outline: var(--brand-borderWidth-normal) solid var(--brand-color-focus);
+}
+
+.Primer_Brand__Accordion-module__Accordion__summary___NUIYc:focus-visible {
+  outline: var(--brand-borderWidth-normal) solid var(--brand-color-focus);
+}
+
+.Primer_Brand__Accordion-module__Accordion__summary___NUIYc::before,
+.Primer_Brand__Accordion-module__Accordion__summary___NUIYc::after {
+  font-family: var(--brand-fontStack-sansSerif);
+  font-weight: 500;
+  cursor: pointer;
+  display: block;
+  font-size: 32px;
+  line-height: 24px;
+  text-align: center;
+  height: 24px;
+  width: 24px;
+  background: linear-gradient(
+    -70deg,
+    var(--brand-Accordion-toggle-color-start) 0%,
+    var(--brand-Accordion-toggle-color-end) 100%
+  );
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+  transition: transform 0.3s ease, opacity 0.2s ease;
+  grid-column: 1 / 2;
+  grid-row: 1;
+  align-self: center;
+  justify-self: center;
+  place-self: center center;
+}
+.Primer_Brand__Accordion-module__Accordion__summary___NUIYc::before {
+  font-weight: var(--base-text-weight-medium);
+  content: '–';
+  opacity: 0;
+}
+.Primer_Brand__Accordion-module__Accordion__summary___NUIYc::after {
+  content: '+';
+}
+
+.Primer_Brand__Accordion-module__Accordion__summary-heading_____snF {
+  /*Visual appearance as a h6*/
+  font-weight: var(--brand-heading-weight-400);
+  font-size: var(--brand-text-size-400);
+  line-height: var(--brand-text-lineHeight-400);
+  letter-spacing: var(--brand-heading-letterSpacing-400);
+}
+
+details[open] > .Primer_Brand__Accordion-module__Accordion__summary___NUIYc::before {
+  opacity: 1;
+  transform: rotateZ(180deg);
+}
+details[open] > .Primer_Brand__Accordion-module__Accordion__summary___NUIYc::after {
+  opacity: 0;
+  transform: rotateZ(180deg);
+}
+details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
+  padding-left: var(--base-size-40);
+  padding-bottom: var(--base-size-24);
+  margin-top: calc(var(--base-size-16) * -1); /* for 8px gap between question and answer */
+  -webkit-animation: Primer_Brand__Accordion-module__fade-in___b3l0l 0.5s;
+          animation: Primer_Brand__Accordion-module__fade-in___b3l0l 0.5s;
+}
+.Primer_Brand__Accordion-module__Accordion__content-item___M_dlm {
+  margin-bottom: var(--base-size-12);
+}
+/* Medium breakpoint and up */
+@media screen and (min-width: 48rem) {
+  .Primer_Brand__Accordion-module__Accordion__summary___NUIYc {
+    gap: var(--base-size-40);
+  }
+  details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
+    padding-left: calc(var(--base-size-48) + var(--base-size-16));
+  }
+}
+
+@-webkit-keyframes Primer_Brand__Accordion-module__fade-in___b3l0l {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes Primer_Brand__Accordion-module__fade-in___b3l0l {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+/**
+ * Do not edit directly
+ * Generated on Fri, 01 Jul 2022 09:35:47 GMT
+ */
+
+:root {
+  --brand-FAQ-maxWidth: 51rem;
+  --brand-FAQ-heading-centered-maxWidth: 37.5rem;
+}
+
+/**
+ * Do not edit directly
+ * Generated on Fri, 01 Jul 2022 09:35:48 GMT
+ */
+
+:root {
+  --brand-FAQ-heading-color: var(--brand-color-text-default);
+}
+
+[data-color-mode="light"] {
+  --brand-FAQ-heading-color: var(--brand-color-text-default);
+}
+
+[data-color-mode="dark"] {
+  --brand-FAQ-heading-color: var(--brand-color-text-default);
+}
+
+.Primer_Brand__FAQ-module__FAQ___R3vLU {
+  max-width: var(--brand-FAQ-maxWidth);
+  margin: 0 auto;
+}
+
+.Primer_Brand__FAQ-module__FAQ__heading___bH0aG {
+  /*Visual appearance as a h3*/
+  font-weight: var(--brand-heading-weight-700);
+  font-size: var(--brand-text-size-700);
+  line-height: var(--brand-heading-lineHeight-700);
+  letter-spacing: var(--brand-heading-letterSpacing-700);
+
+  color: var(--brand-FAQ-heading-color);
+}
+
+.Primer_Brand__FAQ-module__FAQ__subheading___I4puv {
+  /*Visual appearance as a h4*/
+  font-weight: var(--brand-heading-weight-600);
+  font-size: var(--brand-text-size-600);
+  line-height: var(--brand-text-lineHeight-600);
+  letter-spacing: var(--brand-heading-letterSpacing-600);
+
+  margin-top: var(--base-size-64);
+  margin-bottom: var(--base-size-16);
+}
+
+.Primer_Brand__FAQ-module__FAQ__heading--start___eHaT3 {
+  text-align: left;
+}
+
+.Primer_Brand__FAQ-module__FAQ__heading--center___xMpbW {
+  text-align: center;
+  max-width: var(--brand-FAQ-heading-centered-maxWidth);
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.Primer_Brand__FAQ-module__FAQ__heading--large___pBEPT {
+  /*Visual appearance as a h2*/
+  font-weight: var(--brand-text-weight-800);
+  font-size: var(--brand-text-size-800);
+  line-height: var(--brand-text-lineHeight-800);
+  letter-spacing: var(--brand-text-letterSpacing-800);
+}
+
+/* Large breakpoint and up */
+@media screen and (min-width: 63.25rem) {
+  .Primer_Brand__FAQ-module__FAQ__subheading___I4puv {
+    margin-top: var(--base-size-96);
+  }
+
+  .Primer_Brand__FAQ-module__FAQ__heading--with-margin___S2_ET {
+    margin-bottom: var(--base-size-64);
+  }
+}
+

package/lib/css/stylesheets.d.ts

@@ -6,4 +6,5 @@ import '../../lib/design-tokens/css/tokens/base/colors/color-scales-with-modes.c
 import '../../lib/design-tokens/css/tokens/base/size/size.css';
 import '../../lib/design-tokens/css/tokens/functional/typography/typography-responsive.css';
 import '../../lib/design-tokens/css/tokens/functional/size/breakpoints.css';
+import '../../lib/design-tokens/css/tokens/functional/size/border.css';
 import '../../lib/design-tokens/css/tokens/functional/colors/global-with-modes.css';

package/lib/design-tokens/css/tokens/base/colors/color-scales-with-modes.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:10:25 GMT
+ * Generated on Fri, 01 Jul 2022 09:35:47 GMT
  */
 
 :root {

package/lib/design-tokens/css/tokens/base/colors/color-scales.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:10:25 GMT
+ * Generated on Fri, 01 Jul 2022 09:35:47 GMT
  */
 
 :root {

package/lib/design-tokens/css/tokens/base/size/size.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:10:25 GMT
+ * Generated on Fri, 01 Jul 2022 09:35:47 GMT
  */
 
 :root {

package/lib/design-tokens/css/tokens/base/typography/typography.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 01 Jul 2022 09:10:25 GMT
+ * Generated on Fri, 01 Jul 2022 09:35:47 GMT
  */
 
 :root {