@primer/react-brand 0.19.0 → 0.20.0-rc.994caa9

package/lib/animation/AnimationProvider/AnimationProvider.d.ts

@@ -0,0 +1,46 @@
+import React, { PropsWithChildren } from 'react';
+/**
+ * Design tokens
+ */
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/animation/base.css';
+export declare const AnimationVariants: readonly ["fade-in", "fade-out", "slide-in-up", "slide-in-down", "slide-in-left", "slide-in-right", "scale-in-up", "scale-in-down", "scale-in", "fill-in-top", "scale-in-right", "scale-in-left", "fill-in-right"];
+declare type Variant = typeof AnimationVariants[number];
+declare type VariantAdvanced = {
+    variant: Variant;
+    delay?: number;
+    duration?: number;
+    ease?: string;
+};
+export declare type AnimateProps = Variant | VariantAdvanced;
+declare type AnimationTrigger = 'click' | 'on-visible';
+declare type IntersectionVisibilityeOptions = 'bottom-of-screen' | 'middle-of-screen' | 'about-to-leave' | number;
+declare type AnimationProviderProps = {
+    /**
+     * Prevents animations from running inside the provider
+     */
+    disableAnimations?: boolean;
+    /**
+     * Controls the trigger method for the animation. One of `click` or `on-visible`.
+     */
+    animationTrigger?: AnimationTrigger;
+    /**
+     * Controls the intersection observer options for the animation.
+     * One of `bottom-of-screen`, `middle-of-screen`, `about-to-leave`, or a number between 0 and 1.
+     */
+    visibilityOptions?: IntersectionVisibilityeOptions;
+    /**
+     * Will persist the animation end-state after the animation has completed
+     */
+    runOnce?: boolean;
+    /**
+     * Will stagger the animations of the children using an incrementing delay
+     */
+    autoStaggerChildren?: boolean;
+    /**
+     * Stagger delay increment. Should be used alongside `autoStaggerChildren`.
+     */
+    staggerDelayIncrement?: number;
+};
+export declare const AnimationContext: React.Context<AnimationProviderProps>;
+export declare function AnimationProvider({ children, disableAnimations, animationTrigger, visibilityOptions, runOnce, autoStaggerChildren, staggerDelayIncrement }: PropsWithChildren<AnimationProviderProps>): JSX.Element;
+export {};

package/lib/animation/AnimationProvider/index.d.ts

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

package/lib/animation/animation.visual.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/animation/index.d.ts

@@ -0,0 +1,3 @@
+export * from './AnimationProvider';
+export * from './Animate';
+export * from './useAnimation';

package/lib/animation/useAnimation.d.ts

@@ -0,0 +1,12 @@
+import { CSSProperties } from 'react';
+import { AnimateProps } from './AnimationProvider';
+import styles from './Animation.module.css';
+/**
+ * A hook that returns CSS classes and styles for animating an element.
+ * @param {AnimateProps} [animateProps] - An object containing animation properties.
+ * @returns {{classes: string; styles: CSSProperties}} - An object containing CSS classes and styles for animating an element.
+ */
+export declare const useAnimation: (animateProps?: AnimateProps) => {
+    classes: string;
+    styles: CSSProperties;
+};

package/lib/animation/useAnimation.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/component-helpers.d.ts

@@ -1,4 +1,5 @@
 import React, { Ref, PropsWithChildren } from 'react';
+import { AnimateProps } from './animation/AnimationProvider';
 /**
  * Layout
  */
@@ -27,5 +28,6 @@ export declare type BaseProps<T> = {
     className?: string;
     id?: string;
     ref?: Ref<T>;
+    animate?: AnimateProps;
 };
 export {};

package/lib/css/main.css

@@ -89,7 +89,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Wed, 24 May 2023 10:06:34 GMT
+ * Generated on Wed, 24 May 2023 17:20:55 GMT
  */
 
 :root,
@@ -629,7 +629,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Wed, 24 May 2023 10:06:34 GMT
+ * Generated on Wed, 24 May 2023 17:20:55 GMT
  */
 
 :root {
@@ -654,7 +654,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Wed, 24 May 2023 10:06:34 GMT
+ * Generated on Wed, 24 May 2023 17:20:55 GMT
  */
 
 :root {
@@ -669,7 +669,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Wed, 24 May 2023 10:06:34 GMT
+ * Generated on Wed, 24 May 2023 17:20:55 GMT
  */
 
 :root {
@@ -841,7 +841,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Wed, 24 May 2023 10:06:34 GMT
+ * Generated on Wed, 24 May 2023 17:20:55 GMT
  */
 
 :root {
@@ -855,7 +855,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Wed, 24 May 2023 10:06:34 GMT
+ * Generated on Wed, 24 May 2023 17:20:55 GMT
  */
 
 :root {
@@ -873,7 +873,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Wed, 24 May 2023 10:06:35 GMT
+ * Generated on Wed, 24 May 2023 17:20:55 GMT
  */
 
 :root,
@@ -996,38 +996,31 @@ select {
   }
 }
 
-/**
- * Do not edit directly
- * Generated on Wed, 24 May 2023 10:06:35 GMT
- */
+.Primer_Brand__ExpandableArrow-module__ExpandableArrow___rkfek {
+  transition: transform 200ms;
+  transform: translateX(0);
+}
 
-:root,
-[data-color-mode="light"] {
-  --brand-Button-background-base: var(--base-color-scale-gray-9);
-  --brand-Button-background-overlay: linear-gradient(180deg, hsla(0, 0%, 100%, 0.15) 0, hsla(0, 0%, 100%, 0) 100%), var(--base-color-scale-black-0);
-  --brand-Button-background-disabled: var(--base-color-scale-gray-4);
-  --brand-Button-fg-primary-disabled: var(--base-color-scale-gray-2);
-  --brand-Button-fg-secondary-disabled: var(--base-color-scale-gray-3);
-  --brand-Button-shadow-primary-default: inset 0 0 0 1px var(--base-color-scale-black-0);
-  --brand-Button-shadow-primary-hover: 0 3px 2px rgba(0, 0, 0, 0.07), 0 7px 5px rgba(0, 0, 0, 0.04), 0 12px 10px rgba(0, 0, 0, 0.03), 0 22px 18px rgba(0, 0, 0, 0.03), 0 42px 33px rgba(0, 0, 0, 0.02), 0 100px 80px rgba(0, 0, 0, 0.02);
-  --brand-Button-shadow-secondary-default: inset 0 0 0 1px var(--brand-color-border-default);
-  --brand-Button-shadow-secondary-hover: inset 0 0 0 2px var(--brand-color-neutral-emphasisPlus);
-  --brand-Button-shadow-subtle-hover: inset 0 0 0 2px var(--brand-color-neutral-emphasisPlus);
-  --brand-Button-shadow-focus: var(--brand-color-focus);
+.Primer_Brand__ExpandableArrow-module__ExpandableArrow--expanded___gajDr {
+  transform: translateX(4px);
 }
 
-[data-color-mode="dark"] {
-  --brand-Button-background-base: var(--base-color-scale-gray-0);
-  --brand-Button-background-overlay: linear-gradient(180deg, hsla(0, 0%, 100%, 0.15) 0, hsla(0, 0%, 100%, 0) 100%), var(--base-color-scale-white-0);
-  --brand-Button-background-disabled: var(--base-color-scale-gray-4);
-  --brand-Button-fg-primary-disabled: var(--base-color-scale-gray-2);
-  --brand-Button-fg-secondary-disabled: var(--base-color-scale-gray-4);
-  --brand-Button-shadow-primary-default: inset 0 0 0 1px var(--base-color-scale-white-0);
-  --brand-Button-shadow-primary-hover: 0 4px 7px rgba(0, 0, 0, 0.15), 0 100px 80px rgba(255, 255, 255, 0.02), 0 42px 33px rgba(255, 255, 255, 0.024), 0 22px 18px rgba(255, 255, 255, 0.028), 0 12px 10px rgba(255, 255, 255, 0.034), 0 7px 5px rgba(255, 255, 255, 0.04), 0 3px 2px rgba(255, 255, 255, 0.07);
-  --brand-Button-shadow-secondary-default: inset 0 0 0 1px hsl(var(--base-color-scale-white-0-hsl) / 25%);
-  --brand-Button-shadow-secondary-hover: inset 0 0 0 2px var(--base-color-scale-white-0);
-  --brand-Button-shadow-subtle-hover: inset 0 0 0 2px var(--base-color-scale-white-0);
-  --brand-Button-shadow-focus: var(--brand-color-focus);
+.Primer_Brand__ExpandableArrow-module__ExpandableArrow-stem___g4mdy {
+  stroke-dasharray: 10;
+  stroke-dashoffset: 10;
+  transition: stroke-dashoffset 200ms;
+}
+
+.Primer_Brand__ExpandableArrow-module__ExpandableArrow-stem--expanded___KwI_9 {
+  stroke-dashoffset: 20;
+}
+
+.Primer_Brand__ExpandableArrow-module__ExpandableArrow--reversed___LPFUS {
+  transform: rotate(180deg);
+}
+
+.Primer_Brand__ExpandableArrow-module__ExpandableArrow--reversed___LPFUS.Primer_Brand__ExpandableArrow-module__ExpandableArrow--expanded___gajDr {
+  transform: rotate(180deg) translateX(4px);
 }
 
 .Primer_Brand__Text-module__Text___pecHN {
@@ -1180,31 +1173,38 @@ select {
   }
 }
 
-.Primer_Brand__ExpandableArrow-module__ExpandableArrow___rkfek {
-  transition: transform 200ms;
-  transform: translateX(0);
-}
-
-.Primer_Brand__ExpandableArrow-module__ExpandableArrow--expanded___gajDr {
-  transform: translateX(4px);
-}
-
-.Primer_Brand__ExpandableArrow-module__ExpandableArrow-stem___g4mdy {
-  stroke-dasharray: 10;
-  stroke-dashoffset: 10;
-  transition: stroke-dashoffset 200ms;
-}
-
-.Primer_Brand__ExpandableArrow-module__ExpandableArrow-stem--expanded___KwI_9 {
-  stroke-dashoffset: 20;
-}
+/**
+ * Do not edit directly
+ * Generated on Wed, 24 May 2023 17:20:55 GMT
+ */
 
-.Primer_Brand__ExpandableArrow-module__ExpandableArrow--reversed___LPFUS {
-  transform: rotate(180deg);
+:root,
+[data-color-mode="light"] {
+  --brand-Button-background-base: var(--base-color-scale-gray-9);
+  --brand-Button-background-overlay: linear-gradient(180deg, hsla(0, 0%, 100%, 0.15) 0, hsla(0, 0%, 100%, 0) 100%), var(--base-color-scale-black-0);
+  --brand-Button-background-disabled: var(--base-color-scale-gray-4);
+  --brand-Button-fg-primary-disabled: var(--base-color-scale-gray-2);
+  --brand-Button-fg-secondary-disabled: var(--base-color-scale-gray-3);
+  --brand-Button-shadow-primary-default: inset 0 0 0 1px var(--base-color-scale-black-0);
+  --brand-Button-shadow-primary-hover: 0 3px 2px rgba(0, 0, 0, 0.07), 0 7px 5px rgba(0, 0, 0, 0.04), 0 12px 10px rgba(0, 0, 0, 0.03), 0 22px 18px rgba(0, 0, 0, 0.03), 0 42px 33px rgba(0, 0, 0, 0.02), 0 100px 80px rgba(0, 0, 0, 0.02);
+  --brand-Button-shadow-secondary-default: inset 0 0 0 1px var(--brand-color-border-default);
+  --brand-Button-shadow-secondary-hover: inset 0 0 0 2px var(--brand-color-neutral-emphasisPlus);
+  --brand-Button-shadow-subtle-hover: inset 0 0 0 2px var(--brand-color-neutral-emphasisPlus);
+  --brand-Button-shadow-focus: var(--brand-color-focus);
 }
 
-.Primer_Brand__ExpandableArrow-module__ExpandableArrow--reversed___LPFUS.Primer_Brand__ExpandableArrow-module__ExpandableArrow--expanded___gajDr {
-  transform: rotate(180deg) translateX(4px);
+[data-color-mode="dark"] {
+  --brand-Button-background-base: var(--base-color-scale-gray-0);
+  --brand-Button-background-overlay: linear-gradient(180deg, hsla(0, 0%, 100%, 0.15) 0, hsla(0, 0%, 100%, 0) 100%), var(--base-color-scale-white-0);
+  --brand-Button-background-disabled: var(--base-color-scale-gray-4);
+  --brand-Button-fg-primary-disabled: var(--base-color-scale-gray-2);
+  --brand-Button-fg-secondary-disabled: var(--base-color-scale-gray-4);
+  --brand-Button-shadow-primary-default: inset 0 0 0 1px var(--base-color-scale-white-0);
+  --brand-Button-shadow-primary-hover: 0 4px 7px rgba(0, 0, 0, 0.15), 0 100px 80px rgba(255, 255, 255, 0.02), 0 42px 33px rgba(255, 255, 255, 0.024), 0 22px 18px rgba(255, 255, 255, 0.028), 0 12px 10px rgba(255, 255, 255, 0.034), 0 7px 5px rgba(255, 255, 255, 0.04), 0 3px 2px rgba(255, 255, 255, 0.07);
+  --brand-Button-shadow-secondary-default: inset 0 0 0 1px hsl(var(--base-color-scale-white-0-hsl) / 25%);
+  --brand-Button-shadow-secondary-hover: inset 0 0 0 2px var(--base-color-scale-white-0);
+  --brand-Button-shadow-subtle-hover: inset 0 0 0 2px var(--base-color-scale-white-0);
+  --brand-Button-shadow-focus: var(--brand-color-focus);
 }
 
 .Primer_Brand__Button-module__Button___lDruK {
@@ -1629,7 +1629,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Wed, 24 May 2023 10:06:34 GMT
+ * Generated on Wed, 24 May 2023 17:20:55 GMT
  */
 
 :root {
@@ -1650,7 +1650,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Wed, 24 May 2023 10:06:34 GMT
+ * Generated on Wed, 24 May 2023 17:20:55 GMT
  */
 
 :root {
@@ -1660,7 +1660,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Wed, 24 May 2023 10:06:34 GMT
+ * Generated on Wed, 24 May 2023 17:20:55 GMT
  */
 
 :root {
@@ -2481,7 +2481,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Wed, 24 May 2023 10:06:35 GMT
+ * Generated on Wed, 24 May 2023 17:20:56 GMT
  */
 
 :root,
@@ -2509,7 +2509,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Wed, 24 May 2023 10:06:35 GMT
+ * Generated on Wed, 24 May 2023 17:20:56 GMT
  */
 
 :root,
@@ -2634,7 +2634,231 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Wed, 24 May 2023 10:06:35 GMT
+ * Generated on Wed, 24 May 2023 17:20:55 GMT
+ */
+
+:root {
+  --brand-animation-variant-scaleInLeft-end: 1;
+  --brand-animation-variant-scaleInLeft-start: 0.90;
+  --brand-animation-variant-scaleInLeft-distance: 1.25rem;
+  --brand-animation-variant-scaleInRight-end: 1;
+  --brand-animation-variant-scaleInRight-start: 0.90;
+  --brand-animation-variant-scaleInRight-distance: -1.25rem;
+  --brand-animation-variant-scaleInTop-distance: ;
+  --brand-animation-variant-scaleIn-end: 1;
+  --brand-animation-variant-scaleIn-start: 0.96;
+  --brand-animation-variant-scaleInDown-end: 1;
+  --brand-animation-variant-scaleInDown-start: 0;
+  --brand-animation-variant-scaleInDown-distance: -3.125rem;
+  --brand-animation-variant-scaleInUp-end: 1;
+  --brand-animation-variant-scaleInUp-start: 0.96;
+  --brand-animation-variant-scaleInUp-distance: 1.5rem;
+  --brand-animation-variant-slideInRight-distance: -0.9375rem;
+  --brand-animation-variant-slideInLeft-distance: 0.9375rem;
+  --brand-animation-variant-slideInDown-distance: -0.9375rem;
+  --brand-animation-variant-slideInUp-distance: 0.9375rem;
+  --brand-animation-transition-default: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default), transform var(--brand-animation-duration-default) var(--brand-animation-easing-default);
+  --brand-animation-easing-default: cubic-bezier(0.16, 1, 0.3, 1);
+  --brand-animation-duration-extended: 0.7s;
+  --brand-animation-duration-default: 0.6s;
+}
+
+.Primer_Brand__Animation-module__Animation___KNtEW {
+  transition: var(--brand-animation-transition-default);
+}
+
+/**
+ * Fade in
+ */
+.Primer_Brand__Animation-module__Animation--fade-in___jUvJD {
+  opacity: 0;
+  transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default);
+}
+
+.Primer_Brand__Animation-module__Animation--fade-in___jUvJD.Primer_Brand__Animation-module__Animation--active___g_UBK {
+  opacity: 1;
+}
+
+/**
+ * Fade out
+ */
+.Primer_Brand__Animation-module__Animation--fade-out___CsyfK {
+  opacity: 1;
+}
+
+.Primer_Brand__Animation-module__Animation--fade-out___CsyfK.Primer_Brand__Animation-module__Animation--active___g_UBK {
+  opacity: 0;
+  transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default);
+}
+
+/**
+ * Slide in up
+ */
+.Primer_Brand__Animation-module__Animation--slide-in-up___ONnmI {
+  opacity: 0;
+  transform: translateY(var(--brand-animation-variant-slideInUp-distance));
+  transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default),
+    transform var(--brand-animation-duration-default) var(--brand-animation-easing-default);
+}
+
+.Primer_Brand__Animation-module__Animation--slide-in-up___ONnmI.Primer_Brand__Animation-module__Animation--active___g_UBK {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/**
+ * Slide in down
+ */
+.Primer_Brand__Animation-module__Animation--slide-in-down___bjmGv {
+  opacity: 0;
+  transform: translateY(var(--brand-animation-variant-slideInDown-distance));
+  transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default),
+    transform var(--brand-animation-duration-default) var(--brand-animation-easing-default);
+}
+
+.Primer_Brand__Animation-module__Animation--slide-in-down___bjmGv.Primer_Brand__Animation-module__Animation--active___g_UBK {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/**
+ * Slide in left
+ */
+.Primer_Brand__Animation-module__Animation--slide-in-left___iy5Js {
+  opacity: 0;
+  transform: translateX(var(--brand-animation-variant-slideInLeft-distance));
+  transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default),
+    transform var(--brand-animation-duration-default) var(--brand-animation-easing-default);
+}
+
+.Primer_Brand__Animation-module__Animation--slide-in-left___iy5Js.Primer_Brand__Animation-module__Animation--active___g_UBK {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+/**
+ * Slide in right
+ */
+.Primer_Brand__Animation-module__Animation--slide-in-right___UZvNx {
+  opacity: 0;
+  transform: translateX(var(--brand-animation-variant-slideInRight-distance));
+  transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default),
+    transform var(--brand-animation-duration-default) var(--brand-animation-easing-default);
+}
+
+.Primer_Brand__Animation-module__Animation--slide-in-right___UZvNx.Primer_Brand__Animation-module__Animation--active___g_UBK {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+/**
+ * Scale in
+ */
+.Primer_Brand__Animation-module__Animation--scale-in___P7xzG {
+  opacity: 0;
+  transform: scale(var(--brand-animation-variant-scaleIn-start));
+  transition: opacity var(--brand-animation-duration-extended) var(--brand-animation-easing-default),
+    transform var(--brand-animation-duration-extended) var(--brand-animation-easing-default);
+}
+
+.Primer_Brand__Animation-module__Animation--scale-in___P7xzG.Primer_Brand__Animation-module__Animation--active___g_UBK {
+  opacity: 1;
+  transform: scale(--brand-animation-variant-scaleIn-end);
+}
+
+/**
+ * Scale in up
+ */
+.Primer_Brand__Animation-module__Animation--scale-in-up___n0qDP {
+  opacity: 0;
+  transform: scale(var(--brand-animation-variant-scaleInUp-start))
+    translateY(var(--brand-animation-variant-scaleInUp-distance));
+  transition: opacity var(--brand-animation-duration-extended) var(--brand-animation-easing-default),
+    transform var(--brand-animation-duration-extended) var(--brand-animation-easing-default);
+}
+
+.Primer_Brand__Animation-module__Animation--scale-in-up___n0qDP.Primer_Brand__Animation-module__Animation--active___g_UBK {
+  opacity: 1;
+  transform: scale(var(--brand-animation-variant-scaleInUp-end)) translateY(0);
+}
+
+/**
+ * Scale in down
+ */
+.Primer_Brand__Animation-module__Animation--scale-in-down___YEgko {
+  opacity: 0;
+  transform: translateY(var(--brand-animation-variant-scaleInDown-distance))
+    scale(var(--brand-animation-variant-scaleInDown-start));
+  transition: opacity var(--brand-animation-duration-extended) var(--brand-animation-easing-default),
+    transform var(--brand-animation-duration-extended) var(--brand-animation-easing-default);
+}
+
+.Primer_Brand__Animation-module__Animation--scale-in-down___YEgko.Primer_Brand__Animation-module__Animation--active___g_UBK {
+  opacity: 1;
+  transform: translateY(0) scale(var(--brand-animation-variant-scaleInDown-end));
+}
+
+/**
+ * Scale in right
+ */
+.Primer_Brand__Animation-module__Animation--scale-in-right___jBPh4 {
+  opacity: 0;
+  transform: scale(var(--brand-animation-variant-scaleInRight-start))
+    translateX(var(--brand-animation-variant-scaleInRight-distance));
+  transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default),
+    transform var(--brand-animation-duration-default) var(--brand-animation-easing-default);
+}
+
+.Primer_Brand__Animation-module__Animation--scale-in-right___jBPh4.Primer_Brand__Animation-module__Animation--active___g_UBK {
+  opacity: 1;
+  transform: translateX(0) scale(var(--brand-animation-variant-scaleInRight-end));
+}
+
+/**
+ * Scale in left
+ */
+.Primer_Brand__Animation-module__Animation--scale-in-left___g8_dC {
+  opacity: 0;
+  transform: scale(var(--brand-animation-variant-scaleInLeft-start))
+    translateX(var(--brand-animation-variant-scaleInLeft-distance));
+  transition: opacity var(--brand-animation-duration-extended) var(--brand-animation-easing-default),
+    transform var(--brand-animation-duration-extended) var(--brand-animation-easing-default);
+}
+
+.Primer_Brand__Animation-module__Animation--scale-in-left___g8_dC.Primer_Brand__Animation-module__Animation--active___g_UBK {
+  opacity: 1;
+  transform: translateX(0) scale(var(--brand-animation-variant-scaleInLeft-end));
+}
+
+/**
+ * Fill in right
+ */
+.Primer_Brand__Animation-module__Animation--fill-in-right___G_LYH {
+  transform-origin: left;
+  transform: scaleX(0);
+  transition: transform var(--brand-animation-duration-default) var(--brand-animation-easing-default);
+}
+
+.Primer_Brand__Animation-module__Animation--fill-in-right___G_LYH.Primer_Brand__Animation-module__Animation--active___g_UBK {
+  transform: scaleX(1);
+}
+
+/**
+ * Scale in top
+ */
+.Primer_Brand__Animation-module__Animation--fill-in-top___AHELS {
+  transform-origin: top;
+  transform: scaleY(0);
+  transition: transform var(--brand-animation-duration-extended) var(--brand-animation-easing-default);
+}
+
+.Primer_Brand__Animation-module__Animation--fill-in-top___AHELS.Primer_Brand__Animation-module__Animation--active___g_UBK {
+  transform: scaleY(1);
+}
+
+/**
+ * Do not edit directly
+ * Generated on Wed, 24 May 2023 17:20:55 GMT
  */
 
 :root,
@@ -2873,7 +3097,7 @@ select {
 
 /**
  * Do not edit directly
- * Generated on Wed, 24 May 2023 10:06:35 GMT
+ * Generated on Wed, 24 May 2023 17:20:55 GMT
  */
 
 :root,
@@ -3030,7 +3254,7 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
 
 /**
  * Do not edit directly
- * Generated on Wed, 24 May 2023 10:06:34 GMT
+ * Generated on Wed, 24 May 2023 17:20:55 GMT
  */
 
 :root {
@@ -3040,7 +3264,7 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
 
 /**
  * Do not edit directly
- * Generated on Wed, 24 May 2023 10:06:35 GMT
+ * Generated on Wed, 24 May 2023 17:20:55 GMT
  */
 
 :root,
@@ -3110,7 +3334,7 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
 
 /**
  * Do not edit directly
- * Generated on Wed, 24 May 2023 10:06:34 GMT
+ * Generated on Wed, 24 May 2023 17:20:55 GMT
  */
 
 :root {
@@ -3129,7 +3353,7 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
 
 /**
  * Do not edit directly
- * Generated on Wed, 24 May 2023 10:06:35 GMT
+ * Generated on Wed, 24 May 2023 17:20:56 GMT
  */
 
 :root,
@@ -4072,7 +4296,7 @@ Fixes safari bug where outline doesn't respect border-radius
 
 /**
  * Do not edit directly
- * Generated on Wed, 24 May 2023 10:06:34 GMT
+ * Generated on Wed, 24 May 2023 17:20:55 GMT
  */
 
 :root {
@@ -4626,7 +4850,7 @@ Fixes safari bug where outline doesn't respect border-radius
 
 /**
  * Do not edit directly
- * Generated on Wed, 24 May 2023 10:06:35 GMT
+ * Generated on Wed, 24 May 2023 17:20:56 GMT
  */
 
 :root,
@@ -4936,7 +5160,7 @@ Fixes safari bug where outline doesn't respect border-radius
 
 /**
  * Do not edit directly
- * Generated on Wed, 24 May 2023 10:06:35 GMT
+ * Generated on Wed, 24 May 2023 17:20:56 GMT
  */
 
 :root,
@@ -5339,7 +5563,7 @@ html {
 
 /**
  * Do not edit directly
- * Generated on Wed, 24 May 2023 10:06:35 GMT
+ * Generated on Wed, 24 May 2023 17:20:56 GMT
  */
 
 :root,
@@ -5521,7 +5745,7 @@ html {
 
 /**
  * Do not edit directly
- * Generated on Wed, 24 May 2023 10:06:35 GMT
+ * Generated on Wed, 24 May 2023 17:20:56 GMT
  */
 
 :root,
@@ -5647,7 +5871,7 @@ html {
 
 /**
  * Do not edit directly
- * Generated on Wed, 24 May 2023 10:06:35 GMT
+ * Generated on Wed, 24 May 2023 17:20:55 GMT
  */
 
 :root,
@@ -5803,7 +6027,7 @@ html {
 
 /**
  * Do not edit directly
- * Generated on Wed, 24 May 2023 10:06:34 GMT
+ * Generated on Wed, 24 May 2023 17:20:55 GMT
  */
 
 :root {
@@ -5815,7 +6039,7 @@ html {
 
 /**
  * Do not edit directly
- * Generated on Wed, 24 May 2023 10:06:35 GMT
+ * Generated on Wed, 24 May 2023 17:20:55 GMT
  */
 
 :root,
@@ -6135,7 +6359,7 @@ html {
 
 /**
  * Do not edit directly
- * Generated on Wed, 24 May 2023 10:06:35 GMT
+ * Generated on Wed, 24 May 2023 17:20:56 GMT
  */
 
 :root,
@@ -6311,7 +6535,7 @@ html {
 
 /**
  * Do not edit directly
- * Generated on Wed, 24 May 2023 10:06:34 GMT
+ * Generated on Wed, 24 May 2023 17:20:55 GMT
  */
 
 :root {
@@ -6337,7 +6561,7 @@ html {
 
 /**
  * Do not edit directly
- * Generated on Wed, 24 May 2023 10:06:35 GMT
+ * Generated on Wed, 24 May 2023 17:20:56 GMT
  */
 
 :root,