@primer/react-brand 0.20.1-rc.0dde236 → 0.20.1-rc.5f5eace

package/lib/ComparisonTable/ComparisonTable.d.ts

@@ -4,6 +4,7 @@ import type { BaseProps } from '../component-helpers';
  * Design tokens
  */
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/comparison-table/colors-with-modes.css';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/comparison-table/comparison-table.css';
 export type ComparisonTableProps<C extends React.ElementType> = BaseProps<C> & {
     as?: C;
     heading?: string;

package/lib/FAQ/FAQ.d.ts

@@ -6,6 +6,7 @@ import type { BaseProps } from '../component-helpers';
  */
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/faq/base.css';
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/faq/colors-with-modes.css';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/faq/faq.css';
 type FAQRootProps = PropsWithChildren<BaseProps<HTMLElement>> & React.HTMLAttributes<HTMLElement>;
 type FAQHeadingProps = BaseProps<HTMLHeadingElement> & {
     size?: 'medium' | 'large';

package/lib/css/main.css

@@ -89,7 +89,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Mon, 26 Jun 2023 18:08:32 GMT
+ * Generated on Tue, 27 Jun 2023 10:14:39 GMT
  */
 
 :root,
@@ -629,7 +629,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Mon, 26 Jun 2023 18:08:31 GMT
+ * Generated on Tue, 27 Jun 2023 10:14:39 GMT
  */
 
 :root {
@@ -654,7 +654,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Mon, 26 Jun 2023 18:08:31 GMT
+ * Generated on Tue, 27 Jun 2023 10:14:39 GMT
  */
 
 :root {
@@ -669,7 +669,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Mon, 26 Jun 2023 18:08:31 GMT
+ * Generated on Tue, 27 Jun 2023 10:14:39 GMT
  */
 
 :root {
@@ -841,7 +841,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Mon, 26 Jun 2023 18:08:31 GMT
+ * Generated on Tue, 27 Jun 2023 10:14:39 GMT
  */
 
 :root {
@@ -855,7 +855,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Mon, 26 Jun 2023 18:08:31 GMT
+ * Generated on Tue, 27 Jun 2023 10:14:39 GMT
  */
 
 :root {
@@ -873,7 +873,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Mon, 26 Jun 2023 18:08:32 GMT
+ * Generated on Tue, 27 Jun 2023 10:14:40 GMT
  */
 
 :root,
@@ -1175,7 +1175,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Mon, 26 Jun 2023 18:08:32 GMT
+ * Generated on Tue, 27 Jun 2023 10:14:40 GMT
  */
 
 :root,
@@ -1629,7 +1629,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Mon, 26 Jun 2023 18:08:31 GMT
+ * Generated on Tue, 27 Jun 2023 10:14:39 GMT
  */
 
 :root {
@@ -1650,7 +1650,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Mon, 26 Jun 2023 18:08:31 GMT
+ * Generated on Tue, 27 Jun 2023 10:14:39 GMT
  */
 
 :root {
@@ -1660,7 +1660,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Mon, 26 Jun 2023 18:08:31 GMT
+ * Generated on Tue, 27 Jun 2023 10:14:39 GMT
  */
 
 :root {
@@ -2482,7 +2482,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Mon, 26 Jun 2023 18:08:32 GMT
+ * Generated on Tue, 27 Jun 2023 10:14:40 GMT
  */
 
 :root,
@@ -2510,7 +2510,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Mon, 26 Jun 2023 18:08:32 GMT
+ * Generated on Tue, 27 Jun 2023 10:14:40 GMT
  */
 
 :root,
@@ -2644,7 +2644,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Mon, 26 Jun 2023 18:08:32 GMT
+ * Generated on Tue, 27 Jun 2023 10:14:40 GMT
  */
 
 :root,
@@ -2660,7 +2660,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Mon, 26 Jun 2023 18:08:31 GMT
+ * Generated on Tue, 27 Jun 2023 10:14:39 GMT
  */
 
 :root {
@@ -2884,7 +2884,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Mon, 26 Jun 2023 18:08:32 GMT
+ * Generated on Tue, 27 Jun 2023 10:14:40 GMT
  */
 
 :root,
@@ -3123,7 +3123,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Mon, 26 Jun 2023 18:08:32 GMT
+ * Generated on Tue, 27 Jun 2023 10:14:40 GMT
  */
 
 :root,
@@ -3280,17 +3280,16 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
 
 /**
  * Do not edit directly
- * Generated on Mon, 26 Jun 2023 18:08:31 GMT
+ * Generated on Tue, 27 Jun 2023 10:14:39 GMT
  */
 
 :root {
   --brand-FAQ-maxWidth: 51rem;
-  --brand-FAQ-heading-centered-maxWidth: 37.5rem;
 }
 
 /**
  * Do not edit directly
- * Generated on Mon, 26 Jun 2023 18:08:32 GMT
+ * Generated on Tue, 27 Jun 2023 10:14:40 GMT
  */
 
 :root,
@@ -3302,6 +3301,33 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
   --brand-FAQ-heading-color: var(--brand-color-text-default);
 }
 
+/**
+ * Do not edit directly
+ * Generated on Tue, 27 Jun 2023 10:14:39 GMT
+ */
+
+:root {
+  --brand-FAQ-heading-marginBottom: var(--base-size-40);
+}
+
+@media (min-width: 544px) {
+  :root {
+    --brand-FAQ-heading-marginBottom: var(--base-size-40);
+  }
+}
+
+@media (min-width: 768px) {
+  :root {
+    --brand-FAQ-heading-marginBottom: var(--base-size-64);
+  }
+}
+
+@media (min-width: 1012px) {
+  :root {
+    --brand-FAQ-heading-marginBottom: var(--base-size-96);
+  }
+}
+
 .Primer_Brand__FAQ-module__FAQ___R3vLU {
   max-width: var(--brand-FAQ-maxWidth);
   margin: 0 auto;
@@ -3315,6 +3341,7 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
   letter-spacing: var(--brand-heading-letterSpacing-700);
 
   color: var(--brand-FAQ-heading-color);
+  margin-bottom: var(--brand-FAQ-heading-marginBottom);
 }
 
 .Primer_Brand__FAQ-module__FAQ__subheading___I4puv {
@@ -3324,7 +3351,6 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
   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);
 }
 
@@ -3334,7 +3360,7 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
 
 .Primer_Brand__FAQ-module__FAQ__heading--center___xMpbW {
   text-align: center;
-  max-width: var(--brand-FAQ-heading-centered-maxWidth);
+  max-width: 18ch;
   margin-left: auto;
   margin-right: auto;
 }
@@ -3347,20 +3373,9 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
   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);
-  }
-}
-
 /**
  * Do not edit directly
- * Generated on Mon, 26 Jun 2023 18:08:31 GMT
+ * Generated on Tue, 27 Jun 2023 10:14:39 GMT
  */
 
 :root {
@@ -3379,7 +3394,7 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
 
 /**
  * Do not edit directly
- * Generated on Mon, 26 Jun 2023 18:08:32 GMT
+ * Generated on Tue, 27 Jun 2023 10:14:40 GMT
  */
 
 :root,
@@ -4322,7 +4337,7 @@ Fixes safari bug where outline doesn't respect border-radius
 
 /**
  * Do not edit directly
- * Generated on Mon, 26 Jun 2023 18:08:31 GMT
+ * Generated on Tue, 27 Jun 2023 10:14:39 GMT
  */
 
 :root {
@@ -5292,7 +5307,7 @@ Fixes safari bug where outline doesn't respect border-radius
 
 /**
  * Do not edit directly
- * Generated on Mon, 26 Jun 2023 18:08:32 GMT
+ * Generated on Tue, 27 Jun 2023 10:14:40 GMT
  */
 
 :root,
@@ -5306,17 +5321,49 @@ Fixes safari bug where outline doesn't respect border-radius
   --brand-ComparisonTable-featured-color-end: var(--base-color-scale-indigo-3);
 }
 
+/**
+ * Do not edit directly
+ * Generated on Tue, 27 Jun 2023 10:14:39 GMT
+ */
+
+:root {
+  --brand-ComparisonTable-heading-marginBottom: var(--base-size-8);
+}
+
+@media (min-width: 544px) {
+  :root {
+    --brand-ComparisonTable-heading-marginBottom: var(--base-size-40);
+  }
+}
+
+@media (min-width: 768px) {
+  :root {
+    --brand-ComparisonTable-heading-marginBottom: var(--base-size-64);
+  }
+}
+
+@media (min-width: 1012px) {
+  :root {
+    --brand-ComparisonTable-heading-marginBottom: var(--base-size-96);
+  }
+}
+
 /*
 * Heading
 */
 .Primer_Brand__ComparisonTable-module__ComparisonTable--heading___CeSsH {
   text-align: left;
+  max-width: 18ch;
+  margin-bottom: var(--brand-ComparisonTable-heading-marginBottom);
 }
 
+/* Narrow breakpoint */
+
 @media screen and (min-width: 34rem) {
   .Primer_Brand__ComparisonTable-module__ComparisonTable--heading___CeSsH {
+    margin-left: auto;
+    margin-right: auto;
     text-align: center;
-    margin-bottom: var(--base-size-40);
   }
 }
 
@@ -5385,10 +5432,6 @@ Fixes safari bug where outline doesn't respect border-radius
     padding-bottom: 0;
   }
 
-  .Primer_Brand__ComparisonTable-module__ComparisonTable___N2YLX thead tr {
-    border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);
-  }
-
   .Primer_Brand__ComparisonTable-module__ComparisonTable___N2YLX tbody tr {
     border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);
   }
@@ -5468,10 +5511,6 @@ Fixes safari bug where outline doesn't respect border-radius
  * Narrow viewport-only styles
 */
 @media screen and (max-width: 34rem) {
-  .ComparisonTable--default {
-    margin-top: var(--base-size-8);
-  }
-
   .ComparisonTable--default .Primer_Brand__ComparisonTable-module__ComparisonTable-cell___kifYR:not(.Primer_Brand__ComparisonTable-module__ComparisonTable-cell-heading___QlGCM) {
     position: relative;
     padding-left: 25px;
@@ -5602,7 +5641,7 @@ Fixes safari bug where outline doesn't respect border-radius
 
 /**
  * Do not edit directly
- * Generated on Mon, 26 Jun 2023 18:08:32 GMT
+ * Generated on Tue, 27 Jun 2023 10:14:40 GMT
  */
 
 :root,
@@ -6005,7 +6044,7 @@ html {
 
 /**
  * Do not edit directly
- * Generated on Mon, 26 Jun 2023 18:08:32 GMT
+ * Generated on Tue, 27 Jun 2023 10:14:40 GMT
  */
 
 :root,
@@ -6187,7 +6226,7 @@ html {
 
 /**
  * Do not edit directly
- * Generated on Mon, 26 Jun 2023 18:08:32 GMT
+ * Generated on Tue, 27 Jun 2023 10:14:40 GMT
  */
 
 :root,
@@ -6313,7 +6352,7 @@ html {
 
 /**
  * Do not edit directly
- * Generated on Mon, 26 Jun 2023 18:08:32 GMT
+ * Generated on Tue, 27 Jun 2023 10:14:40 GMT
  */
 
 :root,
@@ -6480,7 +6519,7 @@ html {
 
 /**
  * Do not edit directly
- * Generated on Mon, 26 Jun 2023 18:08:31 GMT
+ * Generated on Tue, 27 Jun 2023 10:14:39 GMT
  */
 
 :root {
@@ -6492,7 +6531,7 @@ html {
 
 /**
  * Do not edit directly
- * Generated on Mon, 26 Jun 2023 18:08:32 GMT
+ * Generated on Tue, 27 Jun 2023 10:14:40 GMT
  */
 
 :root,
@@ -6812,7 +6851,7 @@ html {
 
 /**
  * Do not edit directly
- * Generated on Mon, 26 Jun 2023 18:08:32 GMT
+ * Generated on Tue, 27 Jun 2023 10:14:40 GMT
  */
 
 :root,
@@ -6988,7 +7027,7 @@ html {
 
 /**
  * Do not edit directly
- * Generated on Mon, 26 Jun 2023 18:08:31 GMT
+ * Generated on Tue, 27 Jun 2023 10:14:39 GMT
  */
 
 :root {
@@ -7014,7 +7053,7 @@ html {
 
 /**
  * Do not edit directly
- * Generated on Mon, 26 Jun 2023 18:08:32 GMT
+ * Generated on Tue, 27 Jun 2023 10:14:40 GMT
  */
 
 :root,

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 26 Jun 2023 18:08:32 GMT
+ * Generated on Tue, 27 Jun 2023 10:14:39 GMT
  */
 
 :root,

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 26 Jun 2023 18:08:31 GMT
+ * Generated on Tue, 27 Jun 2023 10:14:39 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 26 Jun 2023 18:08:31 GMT
+ * Generated on Tue, 27 Jun 2023 10:14:39 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 26 Jun 2023 18:08:31 GMT
+ * Generated on Tue, 27 Jun 2023 10:14:39 GMT
  */
 
 :root {

package/lib/design-tokens/css/tokens/functional/animation/base.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 26 Jun 2023 18:08:31 GMT
+ * Generated on Tue, 27 Jun 2023 10:14:39 GMT
  */
 
 :root {

package/lib/design-tokens/css/tokens/functional/colors/global-with-modes.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 26 Jun 2023 18:08:32 GMT
+ * Generated on Tue, 27 Jun 2023 10:14:40 GMT
  */
 
 :root,

package/lib/design-tokens/css/tokens/functional/colors/global.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 26 Jun 2023 18:08:31 GMT
+ * Generated on Tue, 27 Jun 2023 10:14:39 GMT
  */
 
 :root {

package/lib/design-tokens/css/tokens/functional/components/accordion/colors-with-modes.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 26 Jun 2023 18:08:32 GMT
+ * Generated on Tue, 27 Jun 2023 10:14:40 GMT
  */
 
 :root,

package/lib/design-tokens/css/tokens/functional/components/action-menu/colors-with-modes.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 26 Jun 2023 18:08:32 GMT
+ * Generated on Tue, 27 Jun 2023 10:14:40 GMT
  */
 
 :root,

package/lib/design-tokens/css/tokens/functional/components/anchor-nav/colors-with-modes.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 26 Jun 2023 18:08:32 GMT
+ * Generated on Tue, 27 Jun 2023 10:14:40 GMT
  */
 
 :root,

package/lib/design-tokens/css/tokens/functional/components/button/colors-with-modes.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 26 Jun 2023 18:08:32 GMT
+ * Generated on Tue, 27 Jun 2023 10:14:40 GMT
  */
 
 :root,

package/lib/design-tokens/css/tokens/functional/components/card/base.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 26 Jun 2023 18:08:31 GMT
+ * Generated on Tue, 27 Jun 2023 10:14:39 GMT
  */
 
 :root {

package/lib/design-tokens/css/tokens/functional/components/card/colors-with-modes.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 26 Jun 2023 18:08:32 GMT
+ * Generated on Tue, 27 Jun 2023 10:14:40 GMT
  */
 
 :root,

package/lib/design-tokens/css/tokens/functional/components/card/colors.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 26 Jun 2023 18:08:31 GMT
+ * Generated on Tue, 27 Jun 2023 10:14:39 GMT
  */
 
 :root {

package/lib/design-tokens/css/tokens/functional/components/comparison-table/colors-with-modes.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 26 Jun 2023 18:08:32 GMT
+ * Generated on Tue, 27 Jun 2023 10:14:40 GMT
  */
 
 :root,

package/lib/design-tokens/css/tokens/functional/components/comparison-table/comparison-table.css

@@ -0,0 +1,26 @@
+/**
+ * Do not edit directly
+ * Generated on Tue, 27 Jun 2023 10:14:39 GMT
+ */
+
+:root {
+  --brand-ComparisonTable-heading-marginBottom: var(--base-size-8);
+}
+
+@media (min-width: 544px) {
+  :root {
+    --brand-ComparisonTable-heading-marginBottom: var(--base-size-40);
+  }
+}
+
+@media (min-width: 768px) {
+  :root {
+    --brand-ComparisonTable-heading-marginBottom: var(--base-size-64);
+  }
+}
+
+@media (min-width: 1012px) {
+  :root {
+    --brand-ComparisonTable-heading-marginBottom: var(--base-size-96);
+  }
+}

package/lib/design-tokens/css/tokens/functional/components/control/base.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 26 Jun 2023 18:08:31 GMT
+ * Generated on Tue, 27 Jun 2023 10:14:39 GMT
  */
 
 :root {

package/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 26 Jun 2023 18:08:32 GMT
+ * Generated on Tue, 27 Jun 2023 10:14:40 GMT
  */
 
 :root,

package/lib/design-tokens/css/tokens/functional/components/cta-banner/colors-with-modes.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 26 Jun 2023 18:08:32 GMT
+ * Generated on Tue, 27 Jun 2023 10:14:40 GMT
  */
 
 :root,

package/lib/design-tokens/css/tokens/functional/components/faq/base.css

@@ -1,9 +1,8 @@
 /**
  * Do not edit directly
- * Generated on Mon, 26 Jun 2023 18:08:31 GMT
+ * Generated on Tue, 27 Jun 2023 10:14:39 GMT
  */
 
 :root {
   --brand-FAQ-maxWidth: 51rem;
-  --brand-FAQ-heading-centered-maxWidth: 37.5rem;
 }

package/lib/design-tokens/css/tokens/functional/components/faq/colors-with-modes.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 26 Jun 2023 18:08:32 GMT
+ * Generated on Tue, 27 Jun 2023 10:14:40 GMT
  */
 
 :root,

package/lib/design-tokens/css/tokens/functional/components/faq/colors.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 26 Jun 2023 18:08:31 GMT
+ * Generated on Tue, 27 Jun 2023 10:14:39 GMT
  */
 
 :root {