@primer/react-brand 0.72.1-rc.c5f3a3b5 → 0.73.0

package/esm/Card/Card.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.module.js","names":[],"sources":["../../src/Card/Card.module.css"],"sourcesContent":[".Card {\n  /* Keeps the dynamic height row on the description slot in the default layout so variable-height content fills the card body. */\n  --Card-grid-template-rows: auto auto auto auto auto auto 1fr auto;\n\n  text-decoration: none;\n  color: var(--brand-color-text-default);\n\n  transition: transform var(--brand-Card-animation-duration) var(--brand-Card-animation-easing);\n  padding: var(--base-size-32);\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  grid-template-areas:\n    'image image'\n    'leadingVisual leadingVisual'\n    'icon icon'\n    'tokens tokens'\n    'label label'\n    'heading heading'\n    'description description'\n    'action action';\n  flex: auto;\n  grid-template-rows: var(--Card-grid-template-rows);\n  position: relative;\n  height: 100%;\n  border-radius: var(--brand-borderRadius-medium);\n}\n\n.Card--align-center .Card {\n  text-align: center;\n  padding: var(--base-size-64) var(--base-size-40);\n}\n\n@media screen and (min-width: 64rem) {\n  .Card--align-center .Card {\n    padding: var(--base-size-64) var(--base-size-80);\n  }\n}\n\n.Card--align-center .Card {\n  grid-template-columns: 1fr;\n  grid-template-areas:\n    'image'\n    'leadingVisual'\n    'icon'\n    'tokens'\n    'label'\n    'heading'\n    'description'\n    'action';\n  justify-items: center;\n}\n\n.Card--backgroundColor-default {\n  background-color: var(--brand-Card-background-default);\n}\n\n.Card--backgroundColor-subtle {\n  background-color: var(--brand-color-canvas-subtle);\n}\n\n.Card--backgroundColor-none {\n  background-color: transparent;\n}\n\n.Card--tokensPosition-block-end {\n  /* Moves the dynamic height row from tokens back to description because the block-end layout places tokens below the body copy. */\n  --Card-grid-template-rows: auto auto auto auto auto 1fr auto auto;\n\n  grid-template-areas:\n    'image image'\n    'leadingVisual leadingVisual'\n    'icon icon'\n    'label label'\n    'heading heading'\n    'description description'\n    'tokens tokens'\n    'action action';\n}\n\n.Card--align-center .Card--tokensPosition-block-end {\n  grid-template-areas:\n    'image'\n    'leadingVisual'\n    'icon'\n    'label'\n    'heading'\n    'description'\n    'tokens'\n    'action';\n}\n\n/** Block end image position option */\n.Card--imagePos-block-end {\n  /* Moves the dynamic height row from action back to description because the image is rendered after the content in this layout. */\n  --Card-grid-template-rows: auto auto auto auto auto 1fr auto auto;\n\n  grid-template-areas:\n    'leadingVisual leadingVisual'\n    'icon icon'\n    'tokens tokens'\n    'label label'\n    'heading heading'\n    'description description'\n    'action action'\n    'image image';\n}\n\n.Card--align-center .Card--imagePos-block-end {\n  grid-template-areas:\n    'leadingVisual'\n    'icon'\n    'tokens'\n    'label'\n    'heading'\n    'description'\n    'action'\n    'image';\n}\n\n.Card--imagePos-block-end.Card--tokensPosition-block-end {\n  /* Moves the dynamic height row from tokens back to description because both the tokens and image are rendered after the body copy here. */\n  --Card-grid-template-rows: auto auto auto auto 1fr auto auto auto;\n\n  grid-template-areas:\n    'leadingVisual leadingVisual'\n    'icon icon'\n    'label label'\n    'heading heading'\n    'description description'\n    'tokens tokens'\n    'action action'\n    'image image';\n}\n\n.Card--align-center .Card--imagePos-block-end.Card--tokensPosition-block-end {\n  grid-template-areas:\n    'leadingVisual'\n    'icon'\n    'label'\n    'heading'\n    'description'\n    'tokens'\n    'action'\n    'image';\n}\n\n.Card--hasLeadingVisual {\n  padding: var(--base-size-64) var(--base-size-40);\n}\n\n.Card--imagePos-block-end .Card__image {\n  margin-bottom: 0;\n  margin-top: var(--base-size-28);\n}\n\n.Card--maxWidth {\n  max-width: var(--brand-Card-maxWidth);\n}\n\n.Card--fullWidth {\n  max-width: unset;\n}\n\n.Card--variant-minimal {\n  padding: 0;\n}\n\n.Card--align-center .Card--variant-minimal {\n  padding: 0;\n}\n\n.Card--ctaVariant-arrow {\n  --Card-arrowAction-endInset: var(--base-size-40);\n}\n\n.Card:hover {\n  text-decoration: none;\n}\n\n.Card__link {\n  color: currentColor;\n  text-decoration: none !important;\n}\n\n.Card__link code,\n.Card__description code {\n  font-size: inherit;\n  font-family: var(--brand-fontStack-monospace);\n  background-color: var(--brand-color-canvas-subtle);\n  padding: 0 var(--base-size-4) var(--base-size-2);\n  margin-inline: var(--base-size-2);\n  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n  border-radius: var(--brand-borderRadius-small);\n  box-shadow: var(--brand-borderWidth-thin) var(--brand-borderWidth-thin) 0 0 var(--brand-color-border-default);\n}\n\n.Card__description code {\n  padding: var(--base-size-2) var(--base-size-4) 0;\n}\n.Card__link:has(code) {\n  line-height: calc(1lh * 1.4);\n}\n\n.Card__description.Card__description:has(code) {\n  line-height: calc(1lh * 1.25);\n}\n\n.Card--disableAnimation:hover .Card__link {\n  text-decoration: underline !important;\n}\n\n/* The focus outline will appear around the entire card, not just the title */\n.Card__link:focus {\n  outline: none;\n}\n\n.Card__link::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n}\n\n.Card--border {\n  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n  border-radius: var(--brand-borderRadius-medium);\n}\n\n.Card__outer {\n  height: 100%;\n}\n\n.Card__outer:has(.Card--variant-minimal) {\n  border-radius: var(--brand-borderRadius-small);\n}\n\n.Card__outer:focus-within {\n  outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n  border-radius: var(--brand-borderRadius-medium);\n}\n\n.Card__outer:has(.Card--variant-minimal):focus-within {\n  outline-offset: var(\n    --base-size-12\n  ); /* This value is adjusted so that, when combined with the container's border radius, the total border radius equals `var(--brand-borderRadius-medium)` */\n}\n\n.Card:not(.Card--disableAnimation):hover {\n  transform: scale3d(1.025, 1.025, 1);\n}\n\n.Card__image {\n  margin-block-end: var(--base-size-28);\n  border-radius: var(--brand-borderRadius-medium);\n  overflow: hidden;\n  grid-area: image;\n}\n\n.Card__image img,\n.Card__image picture,\n.Card__image span {\n  display: block;\n}\n\n.Card__leadingVisual {\n  margin-block-end: var(--base-size-36);\n  display: flex;\n  align-items: center;\n  grid-area: leadingVisual;\n}\n\n.Card--align-center .Card__leadingVisual {\n  justify-content: center;\n}\n\n.Card__leadingVisualItem {\n  display: block;\n  max-width: 100%;\n  height: var(--base-size-40);\n  width: auto;\n}\n\n.Card__icon {\n  margin-bottom: var(--base-size-24);\n  grid-area: icon;\n}\n\n.Card__tokens {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--base-size-8);\n  grid-area: tokens;\n  margin-bottom: var(--base-size-20);\n}\n\n.Card--align-center .Card__tokens {\n  justify-content: center;\n}\n\n.Card__tokens--position-block-end {\n  margin-block-start: var(--base-size-20);\n  margin-block-end: 0;\n}\n\n.Card__label {\n  margin-block-end: var(--base-size-20);\n  grid-area: label;\n  inline-size: fit-content;\n  max-inline-size: 100%;\n}\n\n.Card__heading {\n  margin-block-end: var(--base-size-12);\n  grid-area: heading;\n}\n\n.Card__description {\n  margin-block-end: var(--base-size-24);\n  grid-area: description;\n}\n\n.Card__action {\n  grid-area: action;\n  margin-block-start: auto;\n  display: inline-flex;\n  align-items: center;\n  max-inline-size: 100%;\n  pointer-events: none;\n}\n\n.Card__actionIcon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.Card__actionLabel {\n  display: block;\n  min-inline-size: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.Card:not(.Card--ctaVariant-arrow) .Card__action {\n  inline-size: 100%;\n  min-inline-size: 0;\n}\n\n.Card:not(.Card--ctaVariant-arrow) .Card__action > span:first-child {\n  min-inline-size: 0;\n}\n\n.Card:not(.Card--ctaVariant-arrow) .Card__actionLabel {\n  overflow: visible;\n  text-overflow: clip;\n  white-space: normal;\n  overflow-wrap: anywhere;\n}\n\n.Card--align-center:not(.Card--ctaVariant-arrow) .Card__actionLabel {\n  text-align: center;\n}\n\n.Card__actionLabelClip {\n  --actionLabelClip-duration: 400ms;\n  display: inline-flex;\n  flex: 1 1 auto;\n  align-items: center;\n  align-self: stretch;\n  min-inline-size: 0;\n  overflow: hidden;\n  max-inline-size: 0;\n  background-color: transparent;\n  opacity: 0;\n  transform: translateX(calc(var(--base-size-12) * -1));\n  transition: max-inline-size var(--actionLabelClip-duration) var(--brand-Card-animation-easing),\n    opacity var(--actionLabelClip-duration) ease-out, transform var(--actionLabelClip-duration) ease-out,\n    margin-inline var(--actionLabelClip-duration) ease-out, padding-inline var(--actionLabelClip-duration) ease-out;\n}\n\n.Card--tokensPosition-block-end .Card__action {\n  margin-block-start: var(--base-size-20);\n}\n\n.Card__action--arrowOnly {\n  --actionArrow-duration: 300ms;\n\n  margin-block-start: var(--base-size-20);\n  min-height: var(--base-size-40);\n  width: auto;\n  min-inline-size: 0;\n  max-inline-size: calc(100% - var(--Card-arrowAction-endInset));\n  justify-content: flex-start;\n  column-gap: 0;\n  padding-block: var(--base-size-4);\n  padding-inline: 0;\n  border: var(--brand-borderWidth-thin) solid transparent;\n  border-radius: var(--brand-borderRadius-full);\n  background-color: transparent;\n  flex-shrink: 0;\n  overflow: hidden;\n  transition: border-color var(--actionArrow-duration) ease-out, background-color var(--actionArrow-duration) ease-out,\n    column-gap var(--actionArrow-duration) ease-out, padding-inline var(--actionArrow-duration) ease-out;\n}\n\n.Card__actionIcon--arrowOnly {\n  width: var(--base-size-32);\n  min-width: var(--base-size-32);\n  height: var(--base-size-32);\n  min-height: var(--base-size-32);\n  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n  border-radius: var(--brand-borderRadius-full);\n  background-color: var(--brand-color-canvas-default);\n}\n\n.Card--align-center .Card__action {\n  justify-content: center;\n}\n\n.Card__action,\n.Card__action span {\n  color: var(--brand-Link-color-accent);\n}\n\n.Card__action,\n.Card__action * {\n  cursor: inherit;\n}\n\n.Card--skew:focus-within {\n  outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n}\n\n.Card--skew:hover .Card__torch {\n  opacity: 0.85;\n}\n\n.Card__skew-bounding {\n  border-radius: var(--brand-borderRadius-medium);\n  position: relative;\n  overflow: hidden;\n  z-index: 1;\n  height: 100%;\n  background-color: var(--brand-Card-background-default);\n}\n\n.Card__torch {\n  width: 650px;\n  height: 650px;\n  background-color: var(--brand-color-accent-primary);\n  filter: blur(180px);\n  border-radius: 300px;\n  opacity: 0;\n  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);\n  mix-blend-mode: soft-light;\n  will-change: transform;\n  pointer-events: none;\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  z-index: -1;\n}\n\n.Card--expandableArrow {\n  margin-inline-start: var(--base-size-4);\n}\n\n.Card--ctaVariant-arrow .Card--expandableArrow {\n  --ExpandableArrow-duration: var(--brand-Card-animation-duration);\n  --ExpandableArrow-easing: var(--brand-Card-animation-easing);\n}\n\n.Card__actionIcon--arrowOnly .Card--expandableArrow {\n  margin-inline-start: 0;\n}\n\n.Card--ctaVariant-arrow .Card__description {\n  margin-bottom: var(--base-size-12);\n}\n\n.Card--ctaVariant-arrow:not(.Card--disableAnimation):hover {\n  transform: none;\n}\n\n.Card--ctaVariant-arrow .Card__action {\n  min-inline-size: 0;\n  justify-self: start;\n}\n\n.Card--align-center .Card--ctaVariant-arrow .Card__action {\n  justify-self: center;\n}\n\n.Card--ctaVariant-arrow:is(:hover, :focus-within) .Card__action--arrowOnly {\n  column-gap: var(--base-size-8);\n  padding-inline-start: var(--base-size-12);\n  padding-inline-end: var(--base-size-4);\n  border-color: var(--brand-color-border-default);\n  background-color: var(--brand-Card-background-overlay);\n}\n\n.Card--ctaVariant-arrow:is(:hover, :focus-within) .Card__actionLabelClip {\n  max-inline-size: 100%;\n  opacity: 1;\n  transform: translateX(0);\n  margin-inline-start: calc(var(--base-size-12) * -1);\n  margin-inline-end: 0;\n  padding-inline-start: var(--base-size-12);\n  padding-inline-end: var(--base-size-4);\n}\n\n.Card:is(:hover, :focus-within) .Card--expandableArrow {\n  transform: translateX(var(--base-size-2));\n}\n\n.Card:is(:hover, :focus-within) .Card--expandableArrow path:nth-of-type(2) {\n  stroke-dashoffset: 20;\n}\n\n/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */\n@media (prefers-reduced-motion: reduce) {\n  .Card,\n  .Card::before,\n  .Card::after,\n  .Card * {\n    animation: none !important;\n    transition: none !important;\n    scroll-behavior: auto !important;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Card.module.js","names":[],"sources":["../../src/Card/Card.module.css"],"sourcesContent":[".Card {\n  /* Keeps the dynamic height row on the description slot in the default layout so variable-height content fills the card body. */\n  --Card-grid-template-rows: auto auto auto auto auto auto 1fr auto;\n\n  text-decoration: none;\n  color: var(--brand-color-text-default);\n\n  padding: var(--brand-Card-padding-block) var(--brand-Card-padding-inline);\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  grid-template-areas:\n    'image image'\n    'leadingVisual leadingVisual'\n    'icon icon'\n    'tokens tokens'\n    'label label'\n    'heading heading'\n    'description description'\n    'action action';\n  flex: auto;\n  grid-template-rows: var(--Card-grid-template-rows);\n  position: relative;\n  height: 100%;\n  border-radius: var(--brand-borderRadius-medium);\n}\n\n@media screen and (min-width: 64rem) {\n  .Card {\n    --brand-Card-padding-inline: var(--base-size-32);\n  }\n}\n\n.Card--align-center .Card {\n  --brand-Card-padding-block: var(--base-size-64);\n  --brand-Card-padding-inline: var(--base-size-40);\n\n  text-align: center;\n}\n\n@media screen and (min-width: 64rem) {\n  .Card--align-center .Card {\n    --brand-Card-padding-inline: var(--base-size-80);\n  }\n}\n\n.Card--align-center .Card {\n  grid-template-columns: 1fr;\n  grid-template-areas:\n    'image'\n    'leadingVisual'\n    'icon'\n    'tokens'\n    'label'\n    'heading'\n    'description'\n    'action';\n  justify-items: center;\n}\n\n.Card--backgroundColor-default {\n  background-color: var(--brand-Card-background-default);\n}\n\n.Card--backgroundColor-subtle {\n  background-color: var(--brand-color-canvas-subtle);\n}\n\n.Card--backgroundColor-none {\n  background-color: transparent;\n}\n\n.Card--tokensPosition-block-end {\n  /* Moves the dynamic height row from tokens back to description because the block-end layout places tokens below the body copy. */\n  --Card-grid-template-rows: auto auto auto auto auto 1fr auto auto;\n\n  grid-template-areas:\n    'image image'\n    'leadingVisual leadingVisual'\n    'icon icon'\n    'label label'\n    'heading heading'\n    'description description'\n    'tokens tokens'\n    'action action';\n}\n\n.Card--align-center .Card--tokensPosition-block-end {\n  grid-template-areas:\n    'image'\n    'leadingVisual'\n    'icon'\n    'label'\n    'heading'\n    'description'\n    'tokens'\n    'action';\n}\n\n/** Block end image position option */\n.Card--imagePos-block-end {\n  /* Moves the dynamic height row from action back to description because the image is rendered after the content in this layout. */\n  --Card-grid-template-rows: auto auto auto auto auto 1fr auto auto;\n\n  grid-template-areas:\n    'leadingVisual leadingVisual'\n    'icon icon'\n    'tokens tokens'\n    'label label'\n    'heading heading'\n    'description description'\n    'action action'\n    'image image';\n}\n\n.Card--align-center .Card--imagePos-block-end {\n  grid-template-areas:\n    'leadingVisual'\n    'icon'\n    'tokens'\n    'label'\n    'heading'\n    'description'\n    'action'\n    'image';\n}\n\n.Card--imagePos-block-end.Card--tokensPosition-block-end {\n  /* Moves the dynamic height row from tokens back to description because both the tokens and image are rendered after the body copy here. */\n  --Card-grid-template-rows: auto auto auto auto 1fr auto auto auto;\n\n  grid-template-areas:\n    'leadingVisual leadingVisual'\n    'icon icon'\n    'label label'\n    'heading heading'\n    'description description'\n    'tokens tokens'\n    'action action'\n    'image image';\n}\n\n.Card--align-center .Card--imagePos-block-end.Card--tokensPosition-block-end {\n  grid-template-areas:\n    'leadingVisual'\n    'icon'\n    'label'\n    'heading'\n    'description'\n    'tokens'\n    'action'\n    'image';\n}\n\n.Card--hasLeadingVisual {\n  --brand-Card-padding-block: var(--base-size-64);\n  --brand-Card-padding-inline: var(--base-size-40);\n}\n\n.Card--imagePos-block-end .Card__image {\n  margin-bottom: 0;\n  margin-top: var(--base-size-28);\n}\n\n.Card--maxWidth {\n  max-width: var(--brand-Card-maxWidth);\n}\n\n.Card--fullWidth {\n  max-width: unset;\n}\n\n.Card--variant-minimal {\n  padding: 0;\n}\n\n.Card--align-center .Card--variant-minimal {\n  padding: 0;\n}\n\n.Card--ctaVariant-arrow {\n  --Card-arrowAction-endInset: var(--base-size-40);\n}\n\n.Card:hover {\n  text-decoration: none;\n}\n\n.Card__link {\n  color: currentColor;\n  text-decoration: none !important;\n}\n\n.Card__link code,\n.Card__description code {\n  font-size: inherit;\n  font-family: var(--brand-fontStack-monospace);\n  background-color: var(--brand-color-canvas-subtle);\n  padding: 0 var(--base-size-4) var(--base-size-2);\n  margin-inline: var(--base-size-2);\n  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n  border-radius: var(--brand-borderRadius-small);\n  box-shadow: var(--brand-borderWidth-thin) var(--brand-borderWidth-thin) 0 0 var(--brand-color-border-default);\n}\n\n.Card__description code {\n  padding: var(--base-size-2) var(--base-size-4) 0;\n}\n.Card__link:has(code) {\n  line-height: calc(1lh * 1.4);\n}\n\n.Card__description.Card__description:has(code) {\n  line-height: calc(1lh * 1.25);\n}\n\n.Card--disableAnimation:hover .Card__link {\n  text-decoration: underline !important;\n}\n\n/* The focus outline will appear around the entire card, not just the title */\n.Card__link:focus {\n  outline: none;\n}\n\n.Card__link::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n}\n\n.Card--border {\n  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n  border-radius: var(--brand-borderRadius-medium);\n}\n\n.Card__outer {\n  height: 100%;\n}\n\n.Card__outer:has(.Card--variant-minimal) {\n  border-radius: var(--brand-borderRadius-small);\n}\n\n.Card__outer:focus-within {\n  outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n  border-radius: var(--brand-borderRadius-medium);\n}\n\n.Card__outer:has(.Card--variant-minimal):focus-within {\n  outline-offset: var(\n    --base-size-12\n  ); /* This value is adjusted so that, when combined with the container's border radius, the total border radius equals `var(--brand-borderRadius-medium)` */\n}\n\n.Card__image {\n  margin-block-end: var(--base-size-28);\n  border-radius: var(--brand-borderRadius-medium);\n  overflow: hidden;\n  grid-area: image;\n}\n\n.Card__image--padding-none {\n  margin-inline: calc(var(--brand-Card-padding-inline) * -1);\n}\n\n.Card__image--position-block-start.Card__image--padding-none {\n  margin-block-start: calc(var(--brand-Card-padding-block) * -1);\n}\n\n.Card__image--position-block-end.Card__image--padding-none {\n  margin-block-end: calc(var(--brand-Card-padding-block) * -1);\n}\n\n.Card--border .Card__image--position-block-start.Card__image--padding-none {\n  border-end-start-radius: 0;\n  border-end-end-radius: 0;\n}\n\n.Card--border .Card__image--position-block-end.Card__image--padding-none {\n  border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  border-start-start-radius: 0;\n  border-start-end-radius: 0;\n}\n\n.Card--variant-minimal .Card__image--padding-none {\n  margin-inline: 0;\n}\n\n.Card--variant-minimal .Card__image--position-block-start.Card__image--padding-none {\n  margin-block-start: 0;\n}\n\n.Card--variant-minimal .Card__image--position-block-end.Card__image--padding-none {\n  margin-block-end: 0;\n}\n\n.Card__image img,\n.Card__image picture,\n.Card__image span {\n  display: block;\n}\n\n.Card__leadingVisual {\n  margin-block-end: var(--base-size-36);\n  display: flex;\n  align-items: center;\n  grid-area: leadingVisual;\n}\n\n.Card--align-center .Card__leadingVisual {\n  justify-content: center;\n}\n\n.Card__leadingVisualItem {\n  display: block;\n  max-width: 100%;\n  height: var(--base-size-40);\n  width: auto;\n}\n\n.Card__icon {\n  margin-bottom: var(--base-size-24);\n  grid-area: icon;\n}\n\n.Card__tokens {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--base-size-8);\n  grid-area: tokens;\n  margin-bottom: var(--base-size-20);\n}\n\n.Card--align-center .Card__tokens {\n  justify-content: center;\n}\n\n.Card__tokens--position-block-end {\n  margin-block-start: var(--base-size-20);\n  margin-block-end: 0;\n}\n\n.Card__label {\n  margin-block-end: var(--base-size-20);\n  grid-area: label;\n  inline-size: fit-content;\n  max-inline-size: 100%;\n}\n\n.Card__heading {\n  margin-block-end: var(--base-size-12);\n  grid-area: heading;\n}\n\n.Card__description {\n  margin-block-end: var(--base-size-24);\n  grid-area: description;\n}\n\n.Card__action {\n  grid-area: action;\n  margin-block-start: auto;\n  display: inline-flex;\n  align-items: center;\n  max-inline-size: 100%;\n  pointer-events: none;\n}\n\n.Card__actionIcon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.Card__actionLabel {\n  display: block;\n  min-inline-size: 0;\n  overflow: visible;\n  text-overflow: clip;\n  white-space: normal;\n}\n\n.Card:not(.Card--ctaVariant-arrow) .Card__action {\n  inline-size: 100%;\n  min-inline-size: 0;\n}\n\n.Card:not(.Card--ctaVariant-arrow) .Card__action > span:first-child {\n  min-inline-size: 0;\n}\n\n.Card:not(.Card--ctaVariant-arrow) .Card__actionLabel {\n  overflow: visible;\n  text-overflow: clip;\n  white-space: normal;\n  overflow-wrap: anywhere;\n}\n\n.Card--align-center:not(.Card--ctaVariant-arrow) .Card__actionLabel {\n  text-align: center;\n}\n\n.Card__actionLabelClip {\n  display: contents;\n}\n\n.Card--tokensPosition-block-end .Card__action {\n  margin-block-start: var(--base-size-20);\n}\n\n.Card__action--arrowOnly {\n  --actionArrow-duration: 300ms;\n\n  margin-block-start: var(--base-size-20);\n  min-height: var(--base-size-40);\n  width: auto;\n  min-inline-size: 0;\n  max-inline-size: calc(100% - var(--Card-arrowAction-endInset));\n  justify-content: flex-start;\n  column-gap: var(--base-size-8);\n  padding-block: var(--base-size-4);\n  padding-inline-start: var(--base-size-12);\n  padding-inline-end: var(--base-size-4);\n  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n  border-radius: var(--brand-borderRadius-full);\n  background-color: var(--brand-Card-background-overlay);\n  flex-shrink: 0;\n  overflow: hidden;\n}\n\n.Card__actionIcon--arrowOnly {\n  width: var(--base-size-32);\n  min-width: var(--base-size-32);\n  height: var(--base-size-32);\n  min-height: var(--base-size-32);\n  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n  border-radius: var(--brand-borderRadius-full);\n  background-color: var(--brand-color-canvas-default);\n}\n\n.Card--align-center .Card__action {\n  justify-content: center;\n}\n\n.Card__action,\n.Card__action span {\n  color: var(--brand-Link-color-accent);\n}\n\n.Card__action,\n.Card__action * {\n  cursor: inherit;\n}\n\n.Card--skew:focus-within {\n  outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n}\n\n.Card--skew:hover .Card__torch {\n  opacity: 0.85;\n}\n\n.Card__skew-bounding {\n  border-radius: var(--brand-borderRadius-medium);\n  position: relative;\n  overflow: hidden;\n  z-index: 1;\n  height: 100%;\n  background-color: var(--brand-Card-background-default);\n}\n\n.Card__torch {\n  width: 650px;\n  height: 650px;\n  background-color: var(--brand-color-accent-primary);\n  filter: blur(180px);\n  border-radius: 300px;\n  opacity: 0;\n  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);\n  mix-blend-mode: soft-light;\n  will-change: transform;\n  pointer-events: none;\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  z-index: -1;\n}\n\n.Card--expandableArrow {\n  margin-inline-start: var(--base-size-4);\n}\n\n.Card--ctaVariant-arrow .Card--expandableArrow {\n  --ExpandableArrow-duration: var(--brand-Card-animation-duration);\n  --ExpandableArrow-easing: var(--brand-Card-animation-easing);\n}\n\n.Card__actionIcon--arrowOnly .Card--expandableArrow {\n  margin-inline-start: 0;\n}\n\n.Card--ctaVariant-arrow .Card__description {\n  margin-bottom: var(--base-size-12);\n}\n\n.Card--ctaVariant-arrow .Card__action {\n  min-inline-size: 0;\n  justify-self: start;\n}\n\n@media (hover: hover) {\n  .Card__action--arrowOnly {\n    column-gap: 0;\n    padding-inline: 0;\n    border-color: transparent;\n    background-color: transparent;\n    transition: border-color var(--actionArrow-duration) ease-out, background-color var(--actionArrow-duration) ease-out,\n      column-gap var(--actionArrow-duration) ease-out, padding-inline var(--actionArrow-duration) ease-out;\n  }\n\n  .Card__actionLabelClip {\n    --actionLabelClip-duration: 400ms;\n\n    display: inline-flex;\n    flex: 1 1 auto;\n    align-items: center;\n    align-self: stretch;\n    min-inline-size: 0;\n    overflow: hidden;\n    max-inline-size: 0;\n    background-color: transparent;\n    opacity: 0;\n    transform: translateX(calc(var(--base-size-12) * -1));\n    margin-inline: 0;\n    padding-inline: 0;\n    transition: max-inline-size var(--actionLabelClip-duration) var(--brand-Card-animation-easing),\n      opacity var(--actionLabelClip-duration) ease-out, transform var(--actionLabelClip-duration) ease-out,\n      margin-inline var(--actionLabelClip-duration) ease-out, padding-inline var(--actionLabelClip-duration) ease-out;\n  }\n\n  .Card--ctaVariant-arrow .Card__actionLabel {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n}\n\n.Card--align-center .Card--ctaVariant-arrow .Card__action {\n  justify-self: center;\n}\n\n.Card--ctaVariant-arrow:is(:hover, :focus-within) .Card__action--arrowOnly {\n  column-gap: var(--base-size-8);\n  padding-inline-start: var(--base-size-12);\n  padding-inline-end: var(--base-size-4);\n  border-color: var(--brand-color-border-default);\n  background-color: var(--brand-Card-background-overlay);\n}\n\n.Card--ctaVariant-arrow:is(:hover, :focus-within) .Card__actionLabelClip {\n  max-inline-size: 100%;\n  opacity: 1;\n  transform: translateX(0);\n  margin-inline-start: calc(var(--base-size-12) * -1);\n  margin-inline-end: 0;\n  padding-inline-start: var(--base-size-12);\n  padding-inline-end: var(--base-size-4);\n}\n\n.Card:is(:hover, :focus-within) .Card--expandableArrow {\n  transform: translateX(var(--base-size-2));\n}\n\n.Card:is(:hover, :focus-within) .Card--expandableArrow path:nth-of-type(2) {\n  stroke-dashoffset: 20;\n}\n\n.Card--disableAnimation,\n.Card--disableAnimation * {\n  animation: none;\n  transition: none;\n}\n\n/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */\n@media (prefers-reduced-motion: reduce) {\n  .Card,\n  .Card::before,\n  .Card::after,\n  .Card * {\n    animation: none !important;\n    transition: none !important;\n    scroll-behavior: auto !important;\n  }\n}\n"],"mappings":""}

package/esm/FAQ/FAQ.module-BFCs33mw.css

@@ -0,0 +1 @@
+.Primer_Brand__FAQ-module__FAQ___fhKat{max-width:var(--brand-FAQ-maxWidth-list);margin:0 auto}.Primer_Brand__FAQ-module__FAQ--variant-gridline___oIn0f{border-block-end:var(--brand-color-border-muted) var(--brand-borderWidth-thin) solid;max-width:100%;padding-block-end:var(--base-size-40)}.Primer_Brand__FAQ-module__FAQ__content-wrapper--gridline___AWSUU{padding-inline:var(--base-size-20);max-width:var(--brand-FAQ-maxWidth-list);margin:0 auto}.Primer_Brand__FAQ-module__FAQ__heading-wrapper--gridline___c4m3j{padding-inline:var(--base-size-20);border-block-end:var(--brand-color-border-muted) var(--brand-borderWidth-thin) solid;margin-block-end:var(--base-size-40)}.Primer_Brand__FAQ-module__FAQ__heading___8eTS4{color:var(--brand-FAQ-color-heading);margin-bottom:var(--brand-FAQ-heading-marginBottom)}.Primer_Brand__FAQ-module__FAQ__subheading___AVw7m{margin-bottom:var(--base-size-16);color:var(--brand-color-text-muted);text-transform:uppercase;font-size:var(--brand-text-size-100);line-height:var(--brand-text-lineHeight-100)}.Primer_Brand__FAQ-module__FAQ__heading--start___frhvf{text-align:left}.Primer_Brand__FAQ-module__FAQ__heading--center___dED8A{text-align:center;max-width:18ch;margin-left:auto;margin-right:auto}.Primer_Brand__FAQ-module__FAQ__heading--large___v8f53{font-weight:var(--brand-text-weight-normal);font-size:var(--brand-text-size-800);line-height:var(--brand-text-lineHeight-800);letter-spacing:var(--brand-text-letterSpacing-800)}.Primer_Brand__FAQ-module__FAQ___fhKat details+.Primer_Brand__FAQ-module__FAQ__subheading___AVw7m{margin-top:var(--base-size-48)}.Primer_Brand__FAQ-module__FAQ___fhKat.Primer_Brand__FAQ-module__details__summary___1sVQ4{font-weight:var(--brand-text-weight-normal);font-size:var(--brand-text-size-800);line-height:var(--brand-text-lineHeight-800);letter-spacing:var(--brand-text-letterSpacing-800);color:var(--brand-FAQ-color-heading);cursor:pointer;background:0 0;border:none;outline:none;margin:0;padding:0}@media screen and (width>=48rem){.Primer_Brand__FAQ-module__FAQ__content-wrapper--gridline___AWSUU,.Primer_Brand__FAQ-module__FAQ__heading-wrapper--gridline___c4m3j{padding-inline:var(--base-size-36)}}@media screen and (width>=63.25rem){.Primer_Brand__FAQ-module__FAQ__content-wrapper--gridline___AWSUU,.Primer_Brand__FAQ-module__FAQ__heading-wrapper--gridline___c4m3j{padding-inline:0}.Primer_Brand__FAQ-module__FAQ__heading-wrapper--gridline___c4m3j{margin-block-end:var(--base-size-48)}.Primer_Brand__FAQ-module__FAQ--variant-gridline___oIn0f{padding-block-end:var(--base-size-64)}}

package/esm/FAQ/FAQ.module.js

@@ -1,4 +1,4 @@
-import './FAQ.module-C8rxdU0Z.css';var e = {
+import './FAQ.module-BFCs33mw.css';var e = {
 	FAQ: "Primer_Brand__FAQ-module__FAQ___fhKat",
 	"FAQ--variant-gridline": "Primer_Brand__FAQ-module__FAQ--variant-gridline___oIn0f",
 	"FAQ__content-wrapper--gridline": "Primer_Brand__FAQ-module__FAQ__content-wrapper--gridline___AWSUU",

package/esm/FAQ/FAQ.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"FAQ.module.js","names":[],"sources":["../../src/FAQ/FAQ.module.css"],"sourcesContent":[".FAQ {\n  max-width: var(--brand-FAQ-maxWidth-list);\n  margin: 0 auto;\n}\n\n.FAQ--variant-gridline {\n  padding-block-end: var(--base-size-40);\n  border-block-end: var(--brand-color-border-muted) var(--brand-borderWidth-thin) solid;\n  max-width: 100%;\n}\n\n.FAQ__content-wrapper--gridline {\n  max-width: var(--brand-FAQ-maxWidth-list);\n  margin: 0 auto;\n}\n\n.FAQ__heading-wrapper--gridline {\n  border-block-end: var(--brand-color-border-muted) var(--brand-borderWidth-thin) solid;\n  margin-block-end: var(--base-size-40);\n}\n\n.FAQ__heading {\n  color: var(--brand-FAQ-color-heading);\n  margin-bottom: var(--brand-FAQ-heading-marginBottom);\n}\n\n.FAQ__subheading {\n  margin-bottom: var(--base-size-16);\n  color: var(--brand-color-text-muted);\n  text-transform: uppercase;\n  font-size: var(--brand-text-size-100);\n  line-height: var(--brand-text-lineHeight-100);\n}\n\n.FAQ__heading--start {\n  text-align: left;\n}\n\n.FAQ__heading--center {\n  text-align: center;\n  max-width: 18ch;\n  margin-left: auto;\n  margin-right: auto;\n}\n\n.FAQ__heading--large {\n  /*Visual appearance as a h2*/\n  font-weight: var(--brand-text-weight-normal);\n  font-size: var(--brand-text-size-800);\n  line-height: var(--brand-text-lineHeight-800);\n  letter-spacing: var(--brand-text-letterSpacing-800);\n}\n\n.FAQ details + .FAQ__subheading {\n  margin-top: var(--base-size-48);\n}\n\n.FAQ.details__summary {\n  font-weight: var(--brand-text-weight-normal);\n  font-size: var(--brand-text-size-800);\n  line-height: var(--brand-text-lineHeight-800);\n  letter-spacing: var(--brand-text-letterSpacing-800);\n  color: var(--brand-FAQ-color-heading);\n  cursor: pointer;\n  outline: none;\n  border: none;\n  background: none;\n  padding: 0;\n  margin: 0;\n}\n\n@media screen and (min-width: 63.25rem) {\n  .FAQ__heading-wrapper--gridline {\n    margin-block-end: var(--base-size-48);\n  }\n\n  .FAQ--variant-gridline {\n    padding-block-end: var(--base-size-64);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"FAQ.module.js","names":[],"sources":["../../src/FAQ/FAQ.module.css"],"sourcesContent":[".FAQ {\n  max-width: var(--brand-FAQ-maxWidth-list);\n  margin: 0 auto;\n}\n\n.FAQ--variant-gridline {\n  padding-block-end: var(--base-size-40);\n  border-block-end: var(--brand-color-border-muted) var(--brand-borderWidth-thin) solid;\n  max-width: 100%;\n}\n\n.FAQ__content-wrapper--gridline {\n  padding-inline: var(--base-size-20);\n  max-width: var(--brand-FAQ-maxWidth-list);\n  margin: 0 auto;\n}\n\n.FAQ__heading-wrapper--gridline {\n  padding-inline: var(--base-size-20);\n  border-block-end: var(--brand-color-border-muted) var(--brand-borderWidth-thin) solid;\n  margin-block-end: var(--base-size-40);\n}\n\n.FAQ__heading {\n  color: var(--brand-FAQ-color-heading);\n  margin-bottom: var(--brand-FAQ-heading-marginBottom);\n}\n\n.FAQ__subheading {\n  margin-bottom: var(--base-size-16);\n  color: var(--brand-color-text-muted);\n  text-transform: uppercase;\n  font-size: var(--brand-text-size-100);\n  line-height: var(--brand-text-lineHeight-100);\n}\n\n.FAQ__heading--start {\n  text-align: left;\n}\n\n.FAQ__heading--center {\n  text-align: center;\n  max-width: 18ch;\n  margin-left: auto;\n  margin-right: auto;\n}\n\n.FAQ__heading--large {\n  /*Visual appearance as a h2*/\n  font-weight: var(--brand-text-weight-normal);\n  font-size: var(--brand-text-size-800);\n  line-height: var(--brand-text-lineHeight-800);\n  letter-spacing: var(--brand-text-letterSpacing-800);\n}\n\n.FAQ details + .FAQ__subheading {\n  margin-top: var(--base-size-48);\n}\n\n.FAQ.details__summary {\n  font-weight: var(--brand-text-weight-normal);\n  font-size: var(--brand-text-size-800);\n  line-height: var(--brand-text-lineHeight-800);\n  letter-spacing: var(--brand-text-letterSpacing-800);\n  color: var(--brand-FAQ-color-heading);\n  cursor: pointer;\n  outline: none;\n  border: none;\n  background: none;\n  padding: 0;\n  margin: 0;\n}\n\n@media screen and (min-width: 48rem) {\n  .FAQ__content-wrapper--gridline,\n  .FAQ__heading-wrapper--gridline {\n    padding-inline: var(--base-size-36);\n  }\n}\n\n@media screen and (min-width: 63.25rem) {\n  .FAQ__content-wrapper--gridline,\n  .FAQ__heading-wrapper--gridline {\n    padding-inline: 0;\n  }\n\n  .FAQ__heading-wrapper--gridline {\n    margin-block-end: var(--base-size-48);\n  }\n\n  .FAQ--variant-gridline {\n    padding-block-end: var(--base-size-64);\n  }\n}\n"],"mappings":""}

package/esm/MinimalVideoPlayer/MinimalVideoPlayer.d.ts

@@ -0,0 +1,65 @@
+import React, { type ComponentPropsWithoutRef } from 'react';
+export type MinimalVideoPlayerProps = Omit<ComponentPropsWithoutRef<'video'>, 'autoPlay' | 'controls' | 'defaultMuted' | 'muted' | 'onVolumeChange' | 'playsInline' | 'title'> & {
+    /**
+     * Plays the video when it is visible.
+     * @default true
+     */
+    autoPlay?: boolean;
+    /**
+     * Provides an accessible name for the video.
+     */
+    title: string;
+    /**
+     * Customizable labels for the internal play and pause control.
+     */
+    internalAccessibleLabels?: {
+        play: string;
+        pause: string;
+    };
+    ['data-testid']?: string;
+};
+export declare const _MinimalVideoPlayer: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, "ref">, "title" | "autoPlay" | "controls" | "muted" | "playsInline" | "onVolumeChange" | "defaultMuted"> & {
+    /**
+     * Plays the video when it is visible.
+     * @default true
+     */
+    autoPlay?: boolean;
+    /**
+     * Provides an accessible name for the video.
+     */
+    title: string;
+    /**
+     * Customizable labels for the internal play and pause control.
+     */
+    internalAccessibleLabels?: {
+        play: string;
+        pause: string;
+    };
+    "data-testid"?: string;
+} & React.RefAttributes<HTMLVideoElement>>;
+export declare const MinimalVideoPlayer: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, "ref">, "title" | "autoPlay" | "controls" | "muted" | "playsInline" | "onVolumeChange" | "defaultMuted"> & {
+    /**
+     * Plays the video when it is visible.
+     * @default true
+     */
+    autoPlay?: boolean;
+    /**
+     * Provides an accessible name for the video.
+     */
+    title: string;
+    /**
+     * Customizable labels for the internal play and pause control.
+     */
+    internalAccessibleLabels?: {
+        play: string;
+        pause: string;
+    };
+    "data-testid"?: string;
+} & React.RefAttributes<HTMLVideoElement>> & {
+    testIds: {
+        root: string;
+        readonly video: string;
+        readonly control: string;
+    };
+};
+//# sourceMappingURL=MinimalVideoPlayer.d.ts.map

package/esm/MinimalVideoPlayer/MinimalVideoPlayer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MinimalVideoPlayer.d.ts","sourceRoot":"","sources":["../../src/MinimalVideoPlayer/MinimalVideoPlayer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAa,KAAK,wBAAwB,EAAC,MAAM,OAAO,CAAA;AAMtE,MAAM,MAAM,uBAAuB,GAAG,IAAI,CACxC,wBAAwB,CAAC,OAAO,CAAC,EACjC,UAAU,GAAG,UAAU,GAAG,cAAc,GAAG,OAAO,GAAG,gBAAgB,GAAG,aAAa,GAAG,OAAO,CAChG,GAAG;IACF;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,wBAAwB,CAAC,EAAE;QACzB,IAAI,EAAE,MAAM,CAAA;QACZ,KAAK,EAAE,MAAM,CAAA;KACd,CAAA;IACD,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAA;CACzB,CAAA;AAiBD,eAAO,MAAM,mBAAmB;IAlC9B;;;OAGG;eACQ,OAAO;IAClB;;OAEG;WACI,MAAM;IACb;;OAEG;+BACwB;QACzB,IAAI,EAAE,MAAM,CAAA;QACZ,KAAK,EAAE,MAAM,CAAA;KACd;oBACiB,MAAM;0CAiGzB,CAAA;AAED,eAAO,MAAM,kBAAkB;IAnH7B;;;OAGG;eACQ,OAAO;IAClB;;OAEG;WACI,MAAM;IACb;;OAEG;+BACwB;QACzB,IAAI,EAAE,MAAM,CAAA;QACZ,KAAK,EAAE,MAAM,CAAA;KACd;oBACiB,MAAM;;;;;;;CAmGqD,CAAA"}

package/esm/MinimalVideoPlayer/MinimalVideoPlayer.js

@@ -0,0 +1,76 @@
+import e from "../node_modules/clsx/dist/clsx.js";
+import { useReducedMotion as t } from "../hooks/useReducedMotion.js";
+import { PauseIcon as n } from "../node_modules/@primer/octicons-react/dist/index.esm.js";
+import { useMinimalVideoPlayback as r } from "./useMinimalVideoPlayback.js";
+import i from "./MinimalVideoPlayer.module.js";
+import { forwardRef as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/MinimalVideoPlayer/MinimalVideoPlayer.tsx
+var c = {
+	play: "Play video",
+	pause: "Pause video"
+}, l = {
+	root: "MinimalVideoPlayer",
+	get video() {
+		return `${this.root}-video`;
+	},
+	get control() {
+		return `${this.root}-control`;
+	}
+}, u = a(({ autoPlay: a = !0, children: u, className: d, "data-testid": f, internalAccessibleLabels: p = c, loop: m = !0, onEnded: h, onPause: g, onPlay: _, onPlaying: v, title: y, ...b }, x) => {
+	let { handlePlaybackEnded: S, handlePlaybackPaused: C, handlePlaybackStarted: w, isPlaying: T, togglePlayback: E, videoRef: D } = r({
+		autoPlay: a,
+		forwardedRef: x,
+		prefersReducedMotion: t()
+	});
+	return /* @__PURE__ */ s("div", {
+		className: i.MinimalVideoPlayer,
+		"data-testid": f || l.root,
+		children: [/* @__PURE__ */ o("video", {
+			...b,
+			ref: D,
+			autoPlay: !1,
+			className: e(i.MinimalVideoPlayer__video, d),
+			controls: !1,
+			"data-testid": l.video,
+			loop: m,
+			muted: !0,
+			onEnded: (e) => {
+				S(), h?.(e);
+			},
+			onPause: (e) => {
+				C(), g?.(e);
+			},
+			onPlay: (e) => {
+				w(), _?.(e);
+			},
+			onPlaying: (e) => {
+				w(), v?.(e);
+			},
+			playsInline: !0,
+			title: y,
+			children: u
+		}), /* @__PURE__ */ o("button", {
+			"aria-label": T ? p.pause : p.play,
+			className: i.MinimalVideoPlayer__control,
+			"data-testid": l.control,
+			onClick: E,
+			type: "button",
+			children: T ? /* @__PURE__ */ o(n, { "aria-hidden": "true" }) : /* @__PURE__ */ o("svg", {
+				width: "16",
+				height: "16",
+				viewBox: "0 0 16 16",
+				fill: "none",
+				xmlns: "http://www.w3.org/2000/svg",
+				children: /* @__PURE__ */ o("path", {
+					d: "M13.3777 6.94756C14.2069 7.40341 14.2069 8.59489 13.3777 9.05073L5.37808 13.4483C4.57834 13.8879 3.60001 13.3093 3.60001 12.3967L3.60001 3.60161C3.60001 2.689 4.57834 2.1104 5.37808 2.55003L13.3777 6.94756Z",
+					fill: "currentColor"
+				})
+			})
+		})]
+	});
+}), d = Object.assign(u, { testIds: l });
+//#endregion
+export { d as MinimalVideoPlayer, u as _MinimalVideoPlayer };
+
+//# sourceMappingURL=MinimalVideoPlayer.js.map

package/esm/MinimalVideoPlayer/MinimalVideoPlayer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MinimalVideoPlayer.js","names":[],"sources":["../../src/MinimalVideoPlayer/MinimalVideoPlayer.tsx"],"sourcesContent":["import {clsx} from 'clsx'\nimport {PauseIcon} from '@primer/octicons-react'\nimport React, {forwardRef, type ComponentPropsWithoutRef} from 'react'\n\nimport {useReducedMotion} from '../hooks/useReducedMotion'\nimport {useMinimalVideoPlayback} from './useMinimalVideoPlayback'\nimport styles from './MinimalVideoPlayer.module.css'\n\nexport type MinimalVideoPlayerProps = Omit<\n  ComponentPropsWithoutRef<'video'>,\n  'autoPlay' | 'controls' | 'defaultMuted' | 'muted' | 'onVolumeChange' | 'playsInline' | 'title'\n> & {\n  /**\n   * Plays the video when it is visible.\n   * @default true\n   */\n  autoPlay?: boolean\n  /**\n   * Provides an accessible name for the video.\n   */\n  title: string\n  /**\n   * Customizable labels for the internal play and pause control.\n   */\n  internalAccessibleLabels?: {\n    play: string\n    pause: string\n  }\n  ['data-testid']?: string\n}\n\nconst defaultInternalAccessibleLabels = {\n  play: 'Play video',\n  pause: 'Pause video',\n}\n\nconst testIds = {\n  root: 'MinimalVideoPlayer',\n  get video() {\n    return `${this.root}-video`\n  },\n  get control() {\n    return `${this.root}-control`\n  },\n}\n\nexport const _MinimalVideoPlayer = forwardRef<HTMLVideoElement, MinimalVideoPlayerProps>(\n  (\n    {\n      autoPlay = true,\n      children,\n      className,\n      'data-testid': testId,\n      internalAccessibleLabels = defaultInternalAccessibleLabels,\n      loop = true,\n      onEnded,\n      onPause,\n      onPlay,\n      onPlaying,\n      title,\n      ...rest\n    },\n    forwardedRef,\n  ) => {\n    const prefersReducedMotion = useReducedMotion()\n    const {handlePlaybackEnded, handlePlaybackPaused, handlePlaybackStarted, isPlaying, togglePlayback, videoRef} =\n      useMinimalVideoPlayback({\n        autoPlay,\n        forwardedRef,\n        prefersReducedMotion,\n      })\n\n    return (\n      <div className={styles.MinimalVideoPlayer} data-testid={testId || testIds.root}>\n        <video\n          {...rest}\n          ref={videoRef}\n          autoPlay={false}\n          className={clsx(styles.MinimalVideoPlayer__video, className)}\n          controls={false}\n          data-testid={testIds.video}\n          loop={loop}\n          muted\n          onEnded={event => {\n            handlePlaybackEnded()\n            onEnded?.(event)\n          }}\n          onPause={event => {\n            handlePlaybackPaused()\n            onPause?.(event)\n          }}\n          onPlay={event => {\n            handlePlaybackStarted()\n            onPlay?.(event)\n          }}\n          onPlaying={event => {\n            handlePlaybackStarted()\n            onPlaying?.(event)\n          }}\n          playsInline\n          title={title}\n        >\n          {children}\n        </video>\n        <button\n          aria-label={isPlaying ? internalAccessibleLabels.pause : internalAccessibleLabels.play}\n          className={styles.MinimalVideoPlayer__control}\n          data-testid={testIds.control}\n          onClick={togglePlayback}\n          type=\"button\"\n        >\n          {isPlaying ? (\n            <PauseIcon aria-hidden=\"true\" />\n          ) : (\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                d=\"M13.3777 6.94756C14.2069 7.40341 14.2069 8.59489 13.3777 9.05073L5.37808 13.4483C4.57834 13.8879 3.60001 13.3093 3.60001 12.3967L3.60001 3.60161C3.60001 2.689 4.57834 2.1104 5.37808 2.55003L13.3777 6.94756Z\"\n                fill=\"currentColor\"\n              />\n            </svg>\n          )}\n        </button>\n      </div>\n    )\n  },\n)\n\nexport const MinimalVideoPlayer = Object.assign(_MinimalVideoPlayer, {testIds})\n"],"mappings":";;;;;;;;AA+BA,IAAM,IAAkC;CACtC,MAAM;CACN,OAAO;CACR,EAEK,IAAU;CACd,MAAM;CACN,IAAI,QAAQ;AACV,SAAO,GAAG,KAAK,KAAK;;CAEtB,IAAI,UAAU;AACZ,SAAO,GAAG,KAAK,KAAK;;CAEvB,EAEY,IAAsB,GAE/B,EACE,cAAW,IACX,aACA,cACA,eAAe,GACf,8BAA2B,GAC3B,UAAO,IACP,YACA,YACA,WACA,cACA,UACA,GAAG,KAEL,MACG;CAEH,IAAM,EAAC,wBAAqB,yBAAsB,0BAAuB,cAAW,mBAAgB,gBAClG,EAAwB;EACtB;EACA;EACA,sBALyB,GAKzB;EACD,CAAC;AAEJ,QACE,kBAAC,OAAD;EAAK,WAAW,EAAO;EAAoB,eAAa,KAAU,EAAQ;YAA1E,CACE,kBAAC,SAAD;GACE,GAAI;GACJ,KAAK;GACL,UAAU;GACV,WAAW,EAAK,EAAO,2BAA2B,EAAU;GAC5D,UAAU;GACV,eAAa,EAAQ;GACf;GACN,OAAA;GACA,UAAS,MAAS;AAEhB,IADA,GAAqB,EACrB,IAAU,EAAM;;GAElB,UAAS,MAAS;AAEhB,IADA,GAAsB,EACtB,IAAU,EAAM;;GAElB,SAAQ,MAAS;AAEf,IADA,GAAuB,EACvB,IAAS,EAAM;;GAEjB,YAAW,MAAS;AAElB,IADA,GAAuB,EACvB,IAAY,EAAM;;GAEpB,aAAA;GACO;GAEN;GACK,CAAA,EACR,kBAAC,UAAD;GACE,cAAY,IAAY,EAAyB,QAAQ,EAAyB;GAClF,WAAW,EAAO;GAClB,eAAa,EAAQ;GACrB,SAAS;GACT,MAAK;aAEJ,IACC,kBAAC,GAAD,EAAW,eAAY,QAAS,CAAA,GAEhC,kBAAC,OAAD;IAAK,OAAM;IAAK,QAAO;IAAK,SAAQ;IAAY,MAAK;IAAO,OAAM;cAChE,kBAAC,QAAD;KACE,GAAE;KACF,MAAK;KACL,CAAA;IACE,CAAA;GAED,CAAA,CACL;;EAGX,EAEY,IAAqB,OAAO,OAAO,GAAqB,EAAC,YAAQ,CAAC"}

package/esm/MinimalVideoPlayer/MinimalVideoPlayer.module-Bcv4-Y5D.css

@@ -0,0 +1 @@
+.Primer_Brand__MinimalVideoPlayer-module__MinimalVideoPlayer___s8ncI{width:100%;position:relative}.Primer_Brand__MinimalVideoPlayer-module__MinimalVideoPlayer__video___f5cBj{width:100%;display:block}.Primer_Brand__MinimalVideoPlayer-module__MinimalVideoPlayer__control___w7dA_{right:var(--base-size-24);bottom:var(--base-size-24);width:var(--base-size-36);height:var(--base-size-36);color:var(--brand-color-text-muted);cursor:pointer;background-color:var(--brand-color-canvas-muted);border:var(--brand-borderWidth-thin) solid var(--brand-color-border-subtle);border-radius:var(--brand-borderRadius-full);justify-content:center;align-items:center;padding:0;display:flex;position:absolute}.Primer_Brand__MinimalVideoPlayer-module__MinimalVideoPlayer__control___w7dA_:focus-visible{outline:var(--brand-borderWidth-thick) solid var(--brand-color-focus);outline-offset:var(--base-size-2)}.Primer_Brand__MinimalVideoPlayer-module__MinimalVideoPlayer__video___f5cBj[controls]+.Primer_Brand__MinimalVideoPlayer-module__MinimalVideoPlayer__control___w7dA_{display:none}@media (forced-colors:active){.Primer_Brand__MinimalVideoPlayer-module__MinimalVideoPlayer___s8ncI{border:var(--brand-borderWidth-thin) solid CanvasText}.Primer_Brand__MinimalVideoPlayer-module__MinimalVideoPlayer__control___w7dA_{color:buttontext;background-color:buttonface;border-color:buttontext}.Primer_Brand__MinimalVideoPlayer-module__MinimalVideoPlayer__control___w7dA_:focus-visible{outline-color:highlight}}

package/esm/MinimalVideoPlayer/MinimalVideoPlayer.module.js

@@ -0,0 +1,9 @@
+import './MinimalVideoPlayer.module-Bcv4-Y5D.css';var e = {
+	MinimalVideoPlayer: "Primer_Brand__MinimalVideoPlayer-module__MinimalVideoPlayer___s8ncI",
+	MinimalVideoPlayer__video: "Primer_Brand__MinimalVideoPlayer-module__MinimalVideoPlayer__video___f5cBj",
+	MinimalVideoPlayer__control: "Primer_Brand__MinimalVideoPlayer-module__MinimalVideoPlayer__control___w7dA_"
+};
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=MinimalVideoPlayer.module.js.map

package/esm/MinimalVideoPlayer/MinimalVideoPlayer.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MinimalVideoPlayer.module.js","names":[],"sources":["../../src/MinimalVideoPlayer/MinimalVideoPlayer.module.css"],"sourcesContent":[".MinimalVideoPlayer {\n  position: relative;\n  width: 100%;\n}\n\n.MinimalVideoPlayer__video {\n  display: block;\n  width: 100%;\n}\n\n.MinimalVideoPlayer__control {\n  position: absolute;\n  right: var(--base-size-24);\n  bottom: var(--base-size-24);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--base-size-36);\n  height: var(--base-size-36);\n  padding: 0;\n  color: var(--brand-color-text-muted);\n  cursor: pointer;\n  background-color: var(--brand-color-canvas-muted);\n  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-subtle);\n  border-radius: var(--brand-borderRadius-full);\n}\n\n.MinimalVideoPlayer__control:focus-visible {\n  outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n  outline-offset: var(--base-size-2);\n}\n\n/* Progressive enhancement that hides the custom control when native controls are visible. */\n.MinimalVideoPlayer__video[controls] + .MinimalVideoPlayer__control {\n  display: none;\n}\n\n@media (forced-colors: active) {\n  .MinimalVideoPlayer {\n    border: var(--brand-borderWidth-thin) solid CanvasText;\n  }\n\n  .MinimalVideoPlayer__control {\n    color: ButtonText;\n    background-color: ButtonFace;\n    border-color: ButtonText;\n  }\n\n  .MinimalVideoPlayer__control:focus-visible {\n    outline-color: Highlight;\n  }\n}\n"],"mappings":""}

package/esm/MinimalVideoPlayer/index.d.ts

@@ -0,0 +1,2 @@
+export * from './MinimalVideoPlayer';
+//# sourceMappingURL=index.d.ts.map

package/esm/MinimalVideoPlayer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/MinimalVideoPlayer/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAA"}

package/esm/MinimalVideoPlayer/useMinimalVideoPlayback.d.ts

@@ -0,0 +1,16 @@
+import { type Ref } from 'react';
+type UseMinimalVideoPlaybackOptions = {
+    autoPlay: boolean;
+    forwardedRef: Ref<HTMLVideoElement>;
+    prefersReducedMotion: boolean;
+};
+export declare function useMinimalVideoPlayback({ autoPlay, forwardedRef, prefersReducedMotion, }: UseMinimalVideoPlaybackOptions): {
+    handlePlaybackEnded: () => void;
+    handlePlaybackPaused: () => void;
+    handlePlaybackStarted: () => void;
+    isPlaying: boolean;
+    togglePlayback: () => void;
+    videoRef: import("react").RefObject<HTMLVideoElement | null>;
+};
+export {};
+//# sourceMappingURL=useMinimalVideoPlayback.d.ts.map

package/esm/MinimalVideoPlayer/useMinimalVideoPlayback.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMinimalVideoPlayback.d.ts","sourceRoot":"","sources":["../../src/MinimalVideoPlayer/useMinimalVideoPlayback.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2C,KAAK,GAAG,EAAC,MAAM,OAAO,CAAA;AAIxE,KAAK,8BAA8B,GAAG;IACpC,QAAQ,EAAE,OAAO,CAAA;IACjB,YAAY,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAA;IACnC,oBAAoB,EAAE,OAAO,CAAA;CAC9B,CAAA;AAED,wBAAgB,uBAAuB,CAAC,EACtC,QAAQ,EACR,YAAY,EACZ,oBAAoB,GACrB,EAAE,8BAA8B;;;;;;;EA0GhC"}

package/esm/MinimalVideoPlayer/useMinimalVideoPlayback.js

@@ -0,0 +1,73 @@
+import { useProvidedRefOrCreate as e } from "../hooks/useRef.js";
+import { useCallback as t, useEffect as n, useRef as r, useState as i } from "react";
+//#region src/MinimalVideoPlayer/useMinimalVideoPlayback.ts
+function a({ autoPlay: a, forwardedRef: o, prefersReducedMotion: s }) {
+	let c = e(o), l = r(!1), u = r(!1), [d, f] = i(!1), p = t(async () => {
+		let e = c.current;
+		if (e) try {
+			await e.play();
+		} catch {
+			e.paused && f(!1);
+		}
+	}, [c]), m = t(() => f(!0), []), h = t(() => f(!1), []), g = t(() => {
+		l.current = !1, f(!1);
+	}, []);
+	return n(() => {
+		let e = c.current;
+		if (!e) return;
+		let t = (t) => {
+			if (t) {
+				if (l.current) {
+					l.current = !1, a && !s && p();
+					return;
+				}
+				if (!u.current && s) {
+					u.current = !0;
+					return;
+				}
+				!u.current && a && (u.current = !0, p());
+				return;
+			}
+			e.paused || (l.current = a && !s, e.pause());
+		};
+		if (typeof IntersectionObserver > "u") {
+			t(!0);
+			return;
+		}
+		let n = new IntersectionObserver(([e]) => {
+			t(e.intersectionRatio > 0);
+		});
+		return n.observe(e), () => n.disconnect();
+	}, [
+		a,
+		s,
+		p,
+		c
+	]), n(() => {
+		s && (u.current = !0, l.current = !1, c.current?.pause());
+	}, [s, c]), {
+		handlePlaybackEnded: g,
+		handlePlaybackPaused: h,
+		handlePlaybackStarted: m,
+		isPlaying: d,
+		togglePlayback: t(() => {
+			let e = c.current;
+			if (e) {
+				if (u.current = !0, l.current = !1, d) {
+					f(!1), e.pause();
+					return;
+				}
+				p();
+			}
+		}, [
+			d,
+			p,
+			c
+		]),
+		videoRef: c
+	};
+}
+//#endregion
+export { a as useMinimalVideoPlayback };
+
+//# sourceMappingURL=useMinimalVideoPlayback.js.map

package/esm/MinimalVideoPlayer/useMinimalVideoPlayback.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMinimalVideoPlayback.js","names":[],"sources":["../../src/MinimalVideoPlayer/useMinimalVideoPlayback.ts"],"sourcesContent":["import {useCallback, useEffect, useRef, useState, type Ref} from 'react'\n\nimport {useProvidedRefOrCreate} from '../hooks/useRef'\n\ntype UseMinimalVideoPlaybackOptions = {\n  autoPlay: boolean\n  forwardedRef: Ref<HTMLVideoElement>\n  prefersReducedMotion: boolean\n}\n\nexport function useMinimalVideoPlayback({\n  autoPlay,\n  forwardedRef,\n  prefersReducedMotion,\n}: UseMinimalVideoPlaybackOptions) {\n  const videoRef = useProvidedRefOrCreate<HTMLVideoElement | null>(forwardedRef)\n  const pausedByViewportRef = useRef(false)\n  const initialAutoPlayHandledRef = useRef(false)\n  const [isPlaying, setIsPlaying] = useState(false)\n\n  const requestPlayback = useCallback(async () => {\n    const video = videoRef.current\n\n    if (!video) return\n\n    try {\n      await video.play()\n    } catch {\n      if (video.paused) {\n        setIsPlaying(false)\n      }\n    }\n  }, [videoRef])\n\n  const handlePlaybackStarted = useCallback(() => setIsPlaying(true), [])\n  const handlePlaybackPaused = useCallback(() => setIsPlaying(false), [])\n  const handlePlaybackEnded = useCallback(() => {\n    pausedByViewportRef.current = false\n    setIsPlaying(false)\n  }, [])\n\n  useEffect(() => {\n    const video = videoRef.current\n\n    if (!video) return\n\n    const handleVisibilityChange = (isVisible: boolean) => {\n      if (isVisible) {\n        if (pausedByViewportRef.current) {\n          pausedByViewportRef.current = false\n          if (autoPlay && !prefersReducedMotion) {\n            requestPlayback()\n          }\n          return\n        }\n\n        if (!initialAutoPlayHandledRef.current && prefersReducedMotion) {\n          initialAutoPlayHandledRef.current = true\n          return\n        }\n\n        if (!initialAutoPlayHandledRef.current && autoPlay) {\n          initialAutoPlayHandledRef.current = true\n          requestPlayback()\n        }\n        return\n      }\n\n      if (!video.paused) {\n        pausedByViewportRef.current = autoPlay && !prefersReducedMotion\n        video.pause()\n      }\n    }\n\n    if (typeof IntersectionObserver === 'undefined') {\n      handleVisibilityChange(true)\n      return\n    }\n\n    const observer = new IntersectionObserver(([entry]) => {\n      handleVisibilityChange(entry.intersectionRatio > 0)\n    })\n\n    observer.observe(video)\n    return () => observer.disconnect()\n  }, [autoPlay, prefersReducedMotion, requestPlayback, videoRef])\n\n  useEffect(() => {\n    if (!prefersReducedMotion) return\n\n    initialAutoPlayHandledRef.current = true\n    pausedByViewportRef.current = false\n    videoRef.current?.pause()\n  }, [prefersReducedMotion, videoRef])\n\n  const togglePlayback = useCallback(() => {\n    const video = videoRef.current\n\n    if (!video) return\n\n    initialAutoPlayHandledRef.current = true\n    pausedByViewportRef.current = false\n\n    if (isPlaying) {\n      setIsPlaying(false)\n      video.pause()\n      return\n    }\n\n    requestPlayback()\n  }, [isPlaying, requestPlayback, videoRef])\n\n  return {\n    handlePlaybackEnded,\n    handlePlaybackPaused,\n    handlePlaybackStarted,\n    isPlaying,\n    togglePlayback,\n    videoRef,\n  }\n}\n"],"mappings":";;;AAUA,SAAgB,EAAwB,EACtC,aACA,iBACA,2BACiC;CACjC,IAAM,IAAW,EAAgD,EAAa,EACxE,IAAsB,EAAO,GAAM,EACnC,IAA4B,EAAO,GAAM,EACzC,CAAC,GAAW,KAAgB,EAAS,GAAM,EAE3C,IAAkB,EAAY,YAAY;EAC9C,IAAM,IAAQ,EAAS;AAElB,QAEL,KAAI;AACF,SAAM,EAAM,MAAM;UACZ;AACN,GAAI,EAAM,UACR,EAAa,GAAM;;IAGtB,CAAC,EAAS,CAAC,EAER,IAAwB,QAAkB,EAAa,GAAK,EAAE,EAAE,CAAC,EACjE,IAAuB,QAAkB,EAAa,GAAM,EAAE,EAAE,CAAC,EACjE,IAAsB,QAAkB;AAE5C,EADA,EAAoB,UAAU,IAC9B,EAAa,GAAM;IAClB,EAAE,CAAC;AAyEN,QAvEA,QAAgB;EACd,IAAM,IAAQ,EAAS;AAEvB,MAAI,CAAC,EAAO;EAEZ,IAAM,KAA0B,MAAuB;AACrD,OAAI,GAAW;AACb,QAAI,EAAoB,SAAS;AAE/B,KADA,EAAoB,UAAU,IAC1B,KAAY,CAAC,KACf,GAAiB;AAEnB;;AAGF,QAAI,CAAC,EAA0B,WAAW,GAAsB;AAC9D,OAA0B,UAAU;AACpC;;AAGF,IAAI,CAAC,EAA0B,WAAW,MACxC,EAA0B,UAAU,IACpC,GAAiB;AAEnB;;AAGF,GAAK,EAAM,WACT,EAAoB,UAAU,KAAY,CAAC,GAC3C,EAAM,OAAO;;AAIjB,MAAI,OAAO,uBAAyB,KAAa;AAC/C,KAAuB,GAAK;AAC5B;;EAGF,IAAM,IAAW,IAAI,sBAAsB,CAAC,OAAW;AACrD,KAAuB,EAAM,oBAAoB,EAAE;IACnD;AAGF,SADA,EAAS,QAAQ,EAAM,QACV,EAAS,YAAY;IACjC;EAAC;EAAU;EAAsB;EAAiB;EAAS,CAAC,EAE/D,QAAgB;AACT,QAEL,EAA0B,UAAU,IACpC,EAAoB,UAAU,IAC9B,EAAS,SAAS,OAAO;IACxB,CAAC,GAAsB,EAAS,CAAC,EAmB7B;EACL;EACA;EACA;EACA;EACA,gBAtBqB,QAAkB;GACvC,IAAM,IAAQ,EAAS;AAElB,UAKL;QAHA,EAA0B,UAAU,IACpC,EAAoB,UAAU,IAE1B,GAAW;AAEb,KADA,EAAa,GAAM,EACnB,EAAM,OAAO;AACb;;AAGF,OAAiB;;KAChB;GAAC;GAAW;GAAiB;GAAS,CAOvC;EACA;EACD"}

package/esm/Testimonial/Testimonial.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Testimonial.d.ts","sourceRoot":"","sources":["../../src/Testimonial/Testimonial.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,cAAc,EAGd,QAAQ,EAGT,MAAM,OAAO,CAAA;AAEd,OAAO,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAE9C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,KAAK,CAAA;AAGpC,OAAO,kGAAkG,CAAA;AACzG,OAAO,+GAA+G,CAAA;AAKtH,KAAK,eAAe,GAAG,OAAO,GAAG,OAAO,CAAA;AAExC,eAAO,MAAM,0BAA0B,8MAA4C,CAAA;AACnF,eAAO,MAAM,qBAAqB,WAAgC,CAAA;AAElE,eAAO,MAAM,mBAAmB,yDAA0D,CAAA;AAC1F,KAAK,kBAAkB,GAAG,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAA;AAC9D,eAAO,MAAM,yBAAyB,EAAE,kBAA8B,CAAA;AAEtE,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;OAEG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAA;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,QAAQ,EACJ,KAAK,CAAC,SAAS,GACf,KAAK,CAAC,YAAY,CAAC,UAAU,CAAC,GAC9B,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,GAC7B,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,GAC/B,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,EAAE,CAAA;IACnC;;OAEG;IACH,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB,uCAAuC;IACvC,cAAc,CAAC,EAAE,CAAC,OAAO,0BAA0B,CAAC,CAAC,MAAM,CAAC,CAAA;CAC7D,GAAG,SAAS,CAAC,WAAW,CAAC,GACxB,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAA;AAiFnC;;;GAGG;AACH,KAAK,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG,SAAS,CAAC,WAAW,CAAC,CAAA;AAY5E;;;GAGG;AACH,KAAK,SAAS,GAAG;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GACnC,SAAS,CAAC,WAAW,CAAC,CAAA;AAmBxB;;;GAGG;AACH,KAAK,SAAS,GAAG;IACf,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAC,CAAA;CAC7G,GAAG,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,GACxC,SAAS,CAAC,gBAAgB,CAAC,CAAA;AAwB7B;;;GAGG;AAEH,iBAAS,OAAO,CAAC,EAAC,IAAI,EAAE,GAAG,IAAI,EAAC,EAAE,WAAW,2CAE5C;AAcD;;;GAGG;AACH,eAAO,MAAM,WAAW;;;;;;;;;;;CAMtB,CAAA"}
+{"version":3,"file":"Testimonial.d.ts","sourceRoot":"","sources":["../../src/Testimonial/Testimonial.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,cAAc,EAGd,QAAQ,EAGT,MAAM,OAAO,CAAA;AAEd,OAAO,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAE9C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,KAAK,CAAA;AAGpC,OAAO,kGAAkG,CAAA;AACzG,OAAO,+GAA+G,CAAA;AAKtH,KAAK,eAAe,GAAG,OAAO,GAAG,OAAO,CAAA;AAExC,eAAO,MAAM,0BAA0B,8MAA4C,CAAA;AACnF,eAAO,MAAM,qBAAqB,WAAgC,CAAA;AAElE,eAAO,MAAM,mBAAmB,yDAA0D,CAAA;AAC1F,KAAK,kBAAkB,GAAG,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAA;AAC9D,eAAO,MAAM,yBAAyB,EAAE,kBAA8B,CAAA;AAEtE,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;OAEG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAA;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,QAAQ,EACJ,KAAK,CAAC,SAAS,GACf,KAAK,CAAC,YAAY,CAAC,UAAU,CAAC,GAC9B,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,GAC7B,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,GAC/B,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,EAAE,CAAA;IACnC;;OAEG;IACH,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB,uCAAuC;IACvC,cAAc,CAAC,EAAE,CAAC,OAAO,0BAA0B,CAAC,CAAC,MAAM,CAAC,CAAA;CAC7D,GAAG,SAAS,CAAC,WAAW,CAAC,GACxB,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAA;AAmFnC;;;GAGG;AACH,KAAK,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG,SAAS,CAAC,WAAW,CAAC,CAAA;AAY5E;;;GAGG;AACH,KAAK,SAAS,GAAG;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GACnC,SAAS,CAAC,WAAW,CAAC,CAAA;AAmBxB;;;GAGG;AACH,KAAK,SAAS,GAAG;IACf,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAC,CAAA;CAC7G,GAAG,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,GACxC,SAAS,CAAC,gBAAgB,CAAC,CAAA;AAwB7B;;;GAGG;AAEH,iBAAS,OAAO,CAAC,EAAC,IAAI,EAAE,GAAG,IAAI,EAAC,EAAE,WAAW,2CAE5C;AAcD;;;GAGG;AACH,eAAO,MAAM,WAAW;;;;;;;;;;;CAMtB,CAAA"}

package/esm/Testimonial/Testimonial.js

@@ -27,28 +27,32 @@ function g({ quoteMarkColor: t, animate: n, className: i, children: a, variant:
 	}), S = c.Children.toArray(a), w = (e) => S.find((t) => c.isValidElement(t) && t.type === e), E = w(y), O = w(D), k = w(T), A = w(C), j = w(x);
 	return /* @__PURE__ */ d("figure", {
 		ref: h,
-		className: e(g, s.Testimonial, s[`Testimonial--variant-${o}`], f && s[`Testimonial--size-${f}`], l && s["Testimonial--border"], i),
+		className: e(g, s.Testimonial, s[`Testimonial--variant-${o}`], f && s[`Testimonial--size-${f}`], l && s["Testimonial--border"], o === "expressive" && O && s["Testimonial--hasLink"], i),
 		style: {
 			..._,
 			...p,
 			"--testimonial-accent-color": v
 		},
 		...m,
-		children: [/* @__PURE__ */ d("div", {
-			className: s.Testimonial__quoteWrapper,
-			children: [
-				b,
-				E,
-				O
-			]
-		}), /* @__PURE__ */ d("div", {
-			className: s.Testimonial__media,
-			children: [
-				k,
-				A,
-				j
-			]
-		})]
+		children: [
+			/* @__PURE__ */ d("div", {
+				className: s.Testimonial__quoteWrapper,
+				children: [
+					b,
+					E,
+					o !== "expressive" && O
+				]
+			}),
+			/* @__PURE__ */ d("div", {
+				className: s.Testimonial__media,
+				children: [
+					k,
+					A,
+					j
+				]
+			}),
+			o === "expressive" && O
+		]
 	});
 }
 var _ = l(g);

package/esm/Testimonial/Testimonial.js.map

@@ -1 +1 @@
-{"version":3,"file":"Testimonial.js","names":[],"sources":["../../src/Testimonial/Testimonial.tsx"],"sourcesContent":["import React, {\n  HTMLAttributes,\n  PropsWithChildren,\n  forwardRef,\n  SVGProps,\n  CSSProperties,\n  ComponentPropsWithRef,\n} from 'react'\nimport {clsx} from 'clsx'\nimport {BaseProps} from '../component-helpers'\nimport {Text, Avatar as BaseAvatar, useAnimation} from '../'\nimport type {AvatarProps} from '../'\nimport {Link, type LinkProps} from '../Link'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/testimonial/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/testimonial/colors-with-modes.css'\n\nimport styles from './Testimonial.module.css'\nimport {Colors, BiColorGradients} from '../constants'\n\ntype TestimonialSize = 'small' | 'large'\n\nexport const TestimonialQuoteMarkColors = [...Colors, ...BiColorGradients] as const\nexport const defaultQuoteMarkColor = TestimonialQuoteMarkColors[0]\n\nexport const TestimonialVariants = ['subtle', 'default', 'minimal', 'expressive'] as const\ntype TestimonialVariant = (typeof TestimonialVariants)[number]\nexport const defaultTestimonialVariant: TestimonialVariant = 'minimal'\n\nexport type TestimonialProps = {\n  /**\n   * Sets alternative appearance for the testimonial\n   */\n  variant?: TestimonialVariant\n  /**\n   * Applies an optional border where a variant supports it\n   */\n  hasBorder?: boolean\n  /**\n   * Valid children include Testimonial.Name, Testimonial.Avatar, and Testimonial.Name\n   */\n  children:\n    | React.ReactNode\n    | React.ReactElement<QuoteProps>\n    | React.ReactElement<NameProps>\n    | React.ReactElement<AvatarProps>\n    | React.ReactElement<LogoProps>[]\n  /**\n   * Sets the testimonial text size\n   */\n  size?: TestimonialSize\n  /** Sets the color of the quote mark */\n  quoteMarkColor?: (typeof TestimonialQuoteMarkColors)[number]\n} & BaseProps<HTMLElement> &\n  React.HTMLAttributes<HTMLElement>\n\n/**\n * Testimonial parent element\n * <Testimonial>\n */\nfunction TestimonialBase(\n  {\n    quoteMarkColor,\n    animate,\n    className,\n    children,\n    variant = 'minimal',\n    hasBorder = true,\n    size,\n    style,\n    ...rest\n  }: PropsWithChildren<TestimonialProps>,\n  ref,\n) {\n  const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n  const resolvedQuoteMarkColor = quoteMarkColor ?? (variant === 'expressive' ? 'green' : 'default')\n\n  const quoteMark = (\n    <div\n      aria-hidden=\"true\"\n      className={clsx(\n        styles['Testimonial__quoteMark'],\n        styles[`Testimonial__quoteMark--${resolvedQuoteMarkColor}`],\n        variant === 'expressive' && styles['Testimonial__quoteMark--hasBackground'],\n      )}\n    >\n      <span className={styles['Testimonial__quoteMarkGlyph']}>&ldquo;</span>\n    </div>\n  )\n\n  const childrenArray = React.Children.toArray(children)\n  const findChild = (type: React.ElementType) =>\n    childrenArray.find(child => React.isValidElement(child) && child.type === type)\n\n  const quoteChild = findChild(Quote)\n  const actionChild = findChild(_Link)\n  const avatarChild = findChild(Avatar)\n  const logoChild = findChild(Logo)\n  const nameChild = findChild(Name)\n\n  return (\n    <figure\n      ref={ref}\n      className={clsx(\n        animationClasses,\n        styles['Testimonial'],\n        styles[`Testimonial--variant-${variant}`],\n        size && styles[`Testimonial--size-${size}`],\n        hasBorder && styles['Testimonial--border'],\n        className,\n      )}\n      style={{\n        ...animationInlineStyles,\n        ...style,\n        ['--testimonial-accent-color' as keyof CSSProperties]: resolvedQuoteMarkColor,\n      }}\n      {...rest}\n    >\n      <div className={styles['Testimonial__quoteWrapper']}>\n        {quoteMark}\n        {quoteChild}\n        {actionChild}\n      </div>\n      <div className={styles['Testimonial__media']}>\n        {avatarChild}\n        {logoChild}\n        {nameChild}\n      </div>\n    </figure>\n  )\n}\n\nconst Root = forwardRef(TestimonialBase)\n\n/**\n * Testimonial quote child element\n * <Testimonial.Quote>\n */\ntype QuoteProps = React.HTMLAttributes<HTMLElement> & BaseProps<HTMLElement>\n\nfunction QuoteBase({children, className}: QuoteProps, ref) {\n  return (\n    <blockquote ref={ref}>\n      <Text className={clsx(styles['Testimonial-quote'], className)}>{children}</Text>\n    </blockquote>\n  )\n}\n\nconst Quote = forwardRef(QuoteBase)\n\n/**\n * Testimonial name child element\n * <Testimonial.Name>\n */\ntype NameProps = {\n  position?: string\n} & React.HTMLAttributes<HTMLElement> &\n  BaseProps<HTMLElement>\n\nfunction _Name({children, className, position}: NameProps, ref) {\n  return (\n    <figcaption ref={ref} className={clsx(styles['Testimonial-caption'], className)}>\n      <Text size=\"200\" className={clsx(styles['Testimonial-from'])} font=\"monospace\">\n        {children}\n      </Text>\n      {position && (\n        <Text size=\"200\" className={clsx(styles['Testimonial-position'])} variant=\"muted\">\n          {position}\n        </Text>\n      )}\n    </figcaption>\n  )\n}\n\nconst Name = forwardRef(_Name)\n\n/**\n * Testimonial logo child element\n * <Testimonial.Logo>\n */\ntype LogoProps = {\n  children: React.ReactElement<SVGProps<SVGSVGElement>> | React.ReactElement<HTMLAttributes<HTMLImageElement>>\n} & React.HTMLAttributes<HTMLImageElement> &\n  BaseProps<HTMLImageElement>\n\nfunction _Logo({children, ...rest}: LogoProps, ref) {\n  return (\n    <div className={styles['Testimonial-logo']} {...rest}>\n      {React.Children.map(children, child => {\n        if (React.isValidElement(child)) {\n          if (child.type === 'img') {\n            const imageChild = child as React.ReactElement<ComponentPropsWithRef<'img'>>\n            const imageProps: ComponentPropsWithRef<'img'> = {\n              className: clsx(styles['Testimonial-logo-image'], imageChild.props.className),\n              ref: ref as ComponentPropsWithRef<'img'>['ref'],\n            }\n\n            return React.cloneElement(imageChild, imageProps)\n          }\n        }\n      })}\n    </div>\n  )\n}\n\nconst Logo = forwardRef(_Logo)\n\n/**\n * Testimonial avatar child element\n * <Testimonial.Avatar>\n */\n\nfunction _Avatar({size, ...rest}: AvatarProps) {\n  return <BaseAvatar className={clsx(styles['Testimonial-avatar'])} size={48} {...rest} />\n}\n\nconst Avatar = _Avatar\n\n/**\n * Testimonial link child element\n * <Testimonial.Link>\n */\nfunction _LinkBase({className, ...rest}: LinkProps, _ref) {\n  return <Link className={clsx(styles['Testimonial-link'], className)} {...rest} size=\"medium\" variant=\"accent\" />\n}\n\nconst _Link = forwardRef(_LinkBase)\n\n/**\n * Use Testimonial to display a quote from a customer or user.\n * @see https://primer.style/brand/components/Testimonial\n */\nexport const Testimonial = Object.assign(Root, {\n  Quote,\n  Name,\n  Avatar,\n  Logo,\n  Link: _Link,\n})\n"],"mappings":"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"}
+{"version":3,"file":"Testimonial.js","names":[],"sources":["../../src/Testimonial/Testimonial.tsx"],"sourcesContent":["import React, {\n  HTMLAttributes,\n  PropsWithChildren,\n  forwardRef,\n  SVGProps,\n  CSSProperties,\n  ComponentPropsWithRef,\n} from 'react'\nimport {clsx} from 'clsx'\nimport {BaseProps} from '../component-helpers'\nimport {Text, Avatar as BaseAvatar, useAnimation} from '../'\nimport type {AvatarProps} from '../'\nimport {Link, type LinkProps} from '../Link'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/testimonial/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/testimonial/colors-with-modes.css'\n\nimport styles from './Testimonial.module.css'\nimport {Colors, BiColorGradients} from '../constants'\n\ntype TestimonialSize = 'small' | 'large'\n\nexport const TestimonialQuoteMarkColors = [...Colors, ...BiColorGradients] as const\nexport const defaultQuoteMarkColor = TestimonialQuoteMarkColors[0]\n\nexport const TestimonialVariants = ['subtle', 'default', 'minimal', 'expressive'] as const\ntype TestimonialVariant = (typeof TestimonialVariants)[number]\nexport const defaultTestimonialVariant: TestimonialVariant = 'minimal'\n\nexport type TestimonialProps = {\n  /**\n   * Sets alternative appearance for the testimonial\n   */\n  variant?: TestimonialVariant\n  /**\n   * Applies an optional border where a variant supports it\n   */\n  hasBorder?: boolean\n  /**\n   * Valid children include Testimonial.Name, Testimonial.Avatar, and Testimonial.Name\n   */\n  children:\n    | React.ReactNode\n    | React.ReactElement<QuoteProps>\n    | React.ReactElement<NameProps>\n    | React.ReactElement<AvatarProps>\n    | React.ReactElement<LogoProps>[]\n  /**\n   * Sets the testimonial text size\n   */\n  size?: TestimonialSize\n  /** Sets the color of the quote mark */\n  quoteMarkColor?: (typeof TestimonialQuoteMarkColors)[number]\n} & BaseProps<HTMLElement> &\n  React.HTMLAttributes<HTMLElement>\n\n/**\n * Testimonial parent element\n * <Testimonial>\n */\nfunction TestimonialBase(\n  {\n    quoteMarkColor,\n    animate,\n    className,\n    children,\n    variant = 'minimal',\n    hasBorder = true,\n    size,\n    style,\n    ...rest\n  }: PropsWithChildren<TestimonialProps>,\n  ref,\n) {\n  const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n  const resolvedQuoteMarkColor = quoteMarkColor ?? (variant === 'expressive' ? 'green' : 'default')\n\n  const quoteMark = (\n    <div\n      aria-hidden=\"true\"\n      className={clsx(\n        styles['Testimonial__quoteMark'],\n        styles[`Testimonial__quoteMark--${resolvedQuoteMarkColor}`],\n        variant === 'expressive' && styles['Testimonial__quoteMark--hasBackground'],\n      )}\n    >\n      <span className={styles['Testimonial__quoteMarkGlyph']}>&ldquo;</span>\n    </div>\n  )\n\n  const childrenArray = React.Children.toArray(children)\n  const findChild = (type: React.ElementType) =>\n    childrenArray.find(child => React.isValidElement(child) && child.type === type)\n\n  const quoteChild = findChild(Quote)\n  const actionChild = findChild(_Link)\n  const avatarChild = findChild(Avatar)\n  const logoChild = findChild(Logo)\n  const nameChild = findChild(Name)\n\n  return (\n    <figure\n      ref={ref}\n      className={clsx(\n        animationClasses,\n        styles['Testimonial'],\n        styles[`Testimonial--variant-${variant}`],\n        size && styles[`Testimonial--size-${size}`],\n        hasBorder && styles['Testimonial--border'],\n        variant === 'expressive' && actionChild && styles['Testimonial--hasLink'],\n        className,\n      )}\n      style={{\n        ...animationInlineStyles,\n        ...style,\n        ['--testimonial-accent-color' as keyof CSSProperties]: resolvedQuoteMarkColor,\n      }}\n      {...rest}\n    >\n      <div className={styles['Testimonial__quoteWrapper']}>\n        {quoteMark}\n        {quoteChild}\n        {variant !== 'expressive' && actionChild}\n      </div>\n      <div className={styles['Testimonial__media']}>\n        {avatarChild}\n        {logoChild}\n        {nameChild}\n      </div>\n      {variant === 'expressive' && actionChild}\n    </figure>\n  )\n}\n\nconst Root = forwardRef(TestimonialBase)\n\n/**\n * Testimonial quote child element\n * <Testimonial.Quote>\n */\ntype QuoteProps = React.HTMLAttributes<HTMLElement> & BaseProps<HTMLElement>\n\nfunction QuoteBase({children, className}: QuoteProps, ref) {\n  return (\n    <blockquote ref={ref}>\n      <Text className={clsx(styles['Testimonial-quote'], className)}>{children}</Text>\n    </blockquote>\n  )\n}\n\nconst Quote = forwardRef(QuoteBase)\n\n/**\n * Testimonial name child element\n * <Testimonial.Name>\n */\ntype NameProps = {\n  position?: string\n} & React.HTMLAttributes<HTMLElement> &\n  BaseProps<HTMLElement>\n\nfunction _Name({children, className, position}: NameProps, ref) {\n  return (\n    <figcaption ref={ref} className={clsx(styles['Testimonial-caption'], className)}>\n      <Text size=\"200\" className={clsx(styles['Testimonial-from'])} font=\"monospace\">\n        {children}\n      </Text>\n      {position && (\n        <Text size=\"200\" className={clsx(styles['Testimonial-position'])} variant=\"muted\">\n          {position}\n        </Text>\n      )}\n    </figcaption>\n  )\n}\n\nconst Name = forwardRef(_Name)\n\n/**\n * Testimonial logo child element\n * <Testimonial.Logo>\n */\ntype LogoProps = {\n  children: React.ReactElement<SVGProps<SVGSVGElement>> | React.ReactElement<HTMLAttributes<HTMLImageElement>>\n} & React.HTMLAttributes<HTMLImageElement> &\n  BaseProps<HTMLImageElement>\n\nfunction _Logo({children, ...rest}: LogoProps, ref) {\n  return (\n    <div className={styles['Testimonial-logo']} {...rest}>\n      {React.Children.map(children, child => {\n        if (React.isValidElement(child)) {\n          if (child.type === 'img') {\n            const imageChild = child as React.ReactElement<ComponentPropsWithRef<'img'>>\n            const imageProps: ComponentPropsWithRef<'img'> = {\n              className: clsx(styles['Testimonial-logo-image'], imageChild.props.className),\n              ref: ref as ComponentPropsWithRef<'img'>['ref'],\n            }\n\n            return React.cloneElement(imageChild, imageProps)\n          }\n        }\n      })}\n    </div>\n  )\n}\n\nconst Logo = forwardRef(_Logo)\n\n/**\n * Testimonial avatar child element\n * <Testimonial.Avatar>\n */\n\nfunction _Avatar({size, ...rest}: AvatarProps) {\n  return <BaseAvatar className={clsx(styles['Testimonial-avatar'])} size={48} {...rest} />\n}\n\nconst Avatar = _Avatar\n\n/**\n * Testimonial link child element\n * <Testimonial.Link>\n */\nfunction _LinkBase({className, ...rest}: LinkProps, _ref) {\n  return <Link className={clsx(styles['Testimonial-link'], className)} {...rest} size=\"medium\" variant=\"accent\" />\n}\n\nconst _Link = forwardRef(_LinkBase)\n\n/**\n * Use Testimonial to display a quote from a customer or user.\n * @see https://primer.style/brand/components/Testimonial\n */\nexport const Testimonial = Object.assign(Root, {\n  Quote,\n  Name,\n  Avatar,\n  Logo,\n  Link: _Link,\n})\n"],"mappings":"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"}

package/esm/Testimonial/Testimonial.module-BEV0y2jl.css

@@ -0,0 +1 @@
+.Primer_Brand__Testimonial-module__Testimonial___kxB6R{color:var(--brand-color-text-default);font-family:var(--brand-fontStack-sansSerif)}.Primer_Brand__Testimonial-module__Testimonial--variant-subtle___rmjBe,.Primer_Brand__Testimonial-module__Testimonial--variant-default___uNm5S{border-radius:var(--brand-borderRadius-xlarge);padding:var(--base-size-48) var(--base-size-32);position:relative}@media screen and (width>=48rem){.Primer_Brand__Testimonial-module__Testimonial--variant-subtle___rmjBe,.Primer_Brand__Testimonial-module__Testimonial--variant-default___uNm5S{padding:var(--base-size-48)}}@media screen and (width>=63.25rem){.Primer_Brand__Testimonial-module__Testimonial--variant-subtle___rmjBe.Primer_Brand__Testimonial-module__Testimonial--size-large___NH7Vg,.Primer_Brand__Testimonial-module__Testimonial--variant-default___uNm5S.Primer_Brand__Testimonial-module__Testimonial--size-large___NH7Vg{padding:var(--base-size-96) var(--base-size-128)}}.Primer_Brand__Testimonial-module__Testimonial--variant-subtle___rmjBe{background-color:var(--brand-color-canvas-subtle)}.Primer_Brand__Testimonial-module__Testimonial--variant-default___uNm5S{background-color:var(--brand-color-canvas-default)}.Primer_Brand__Testimonial-module__Testimonial--variant-subtle___rmjBe:before,.Primer_Brand__Testimonial-module__Testimonial--variant-default___uNm5S:before{pointer-events:none;content:"";border-radius:inherit;position:absolute;inset:0}.Primer_Brand__Testimonial-module__Testimonial--variant-subtle___rmjBe.Primer_Brand__Testimonial-module__Testimonial--border___pbUPS:before{-webkit-mask-image:var(--brand-Testimonial-borderMask-subtle);-webkit-mask-image:var(--brand-Testimonial-borderMask-subtle);mask-image:var(--brand-Testimonial-borderMask-subtle);border:var(--brand-borderWidth-thin) solid var(--brand-color-border-default)}.Primer_Brand__Testimonial-module__Testimonial--variant-default___uNm5S.Primer_Brand__Testimonial-module__Testimonial--border___pbUPS:before{-webkit-mask-image:var(--brand-Testimonial-borderMask-default);-webkit-mask-image:var(--brand-Testimonial-borderMask-default);mask-image:var(--brand-Testimonial-borderMask-default);border:var(--brand-borderWidth-thin) solid var(--brand-color-border-default)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark___sC3I2{--brand-Testimonial-quoteMarkColor-gradient:radial-gradient(circle at top left, var(--brand-Testimonial-quoteMarkColor-start), var(--brand-Testimonial-quoteMarkColor-end));--brand-Testimonial-quoteMarkColor-background:var(--brand-Testimonial-quoteMarkColor-gradient,var(--brand-Testimonial-quoteMarkColor,currentColor));color:var(--brand-Testimonial-quoteMarkColor-start,var(--brand-Testimonial-quoteMarkColor,currentColor));font-size:var(--base-size-48);line-height:var(--base-size-48);font-weight:var(--base-text-weight-extrabold);position:relative}.Primer_Brand__Testimonial-module__Testimonial__quoteMark___sC3I2:before{content:"";background:var(--brand-Testimonial-quoteMarkColor-background);-webkit-mask:linear-gradient(var(--brand-color-canvas-default), var(--brand-color-canvas-default)) content-box, linear-gradient(var(--brand-color-canvas-default), var(--brand-color-canvas-default));-webkit-mask:linear-gradient(var(--brand-color-canvas-default), var(--brand-color-canvas-default)) content-box, linear-gradient(var(--brand-color-canvas-default), var(--brand-color-canvas-default));mask:linear-gradient(var(--brand-color-canvas-default), var(--brand-color-canvas-default)) content-box, linear-gradient(var(--brand-color-canvas-default), var(--brand-color-canvas-default));-webkit-mask-composite:xor;position:absolute;inset:0;-webkit-mask-composite:xor;mask-composite:exclude}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--hasBackground___AUVX2{width:calc(var(--base-size-48) + var(--base-size-8));height:calc(var(--base-size-48) + var(--base-size-8));border-radius:var(--base-size-12);background-color:var(--brand-Testimonial-quoteMarkBackground,var(--base-color-scale-gray-0));font-size:var(--base-size-64);justify-content:center;align-items:center;line-height:1;display:inline-flex}.Primer_Brand__Testimonial-module__Testimonial--size-large___NH7Vg .Primer_Brand__Testimonial-module__Testimonial__quoteMark___sC3I2:not(.Primer_Brand__Testimonial-module__Testimonial__quoteMark--hasBackground___AUVX2){font-size:7.5rem;line-height:1}.Primer_Brand__Testimonial-module__Testimonial__quoteMarkGlyph___1eZ5L{display:block}.Primer_Brand__Testimonial-module__Testimonial-quote___xbxri{font-family:var(--brand-fontStack-sansSerif);font-size:var(--brand-Testimonial-quote-fontSize-default);font-weight:var(--brand-Testimonial-quote-fontWeight-default);letter-spacing:var(--brand-Testimonial-quote-letterSpacing-default);line-height:1.2;display:block}.Primer_Brand__Testimonial-module__Testimonial--size-large___NH7Vg .Primer_Brand__Testimonial-module__Testimonial-quote___xbxri{font-size:var(--brand-Testimonial-quote-fontSize-large);font-weight:var(--brand-Testimonial-quote-fontWeight-large);letter-spacing:var(--brand-Testimonial-quote-letterSpacing-large)}.Primer_Brand__Testimonial-module__Testimonial-quote___xbxri em,.Primer_Brand__Testimonial-module__Testimonial-quote___xbxri b{color:var(--brand-Testimonial-quote-color-emphasis);font-style:normal;font-weight:inherit}.Primer_Brand__Testimonial-module__Testimonial__media___rvn7k{gap:var(--base-size-16);margin-top:var(--base-size-24);align-items:center;display:flex}.Primer_Brand__Testimonial-module__Testimonial-logo-image___rpGVd{display:block}.Primer_Brand__Testimonial-module__Testimonial--size-large___NH7Vg .Primer_Brand__Testimonial-module__Testimonial__media___rvn7k{margin-top:var(--base-size-64)}.Primer_Brand__Testimonial-module__Testimonial-caption___8c_KF{flex-direction:column;display:flex}.Primer_Brand__Testimonial-module__Testimonial-avatar___kWqMQ{flex:none}.Primer_Brand__Testimonial-module__Testimonial-from___XLpqj{font-weight:var(--base-text-weight-normal);text-transform:uppercase}.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY{gap:var(--base-size-36);width:100%;max-width:1176px;padding-inline:var(--base-size-20);padding-block:var(--base-size-40);flex-direction:column;display:flex}.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY .Primer_Brand__Testimonial-module__Testimonial__quoteWrapper___vcgUf{align-items:flex-start;gap:var(--base-size-36);flex-direction:column;min-width:0;display:flex}.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY .Primer_Brand__Testimonial-module__Testimonial__media___rvn7k{align-items:flex-start;gap:var(--base-size-28);flex-direction:column;width:100%;margin-block-start:0}.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY .Primer_Brand__Testimonial-module__Testimonial-avatar___kWqMQ{width:var(--base-size-40);height:var(--base-size-40)}.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY .Primer_Brand__Testimonial-module__Testimonial-caption___8c_KF{border-block-start:var(--brand-borderWidth-thin) solid var(--brand-color-border-default);gap:var(--base-size-6);width:100%;padding-block-start:var(--base-size-20)}@media screen and (width>=48rem){.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY .Primer_Brand__Testimonial-module__Testimonial__quoteWrapper___vcgUf{gap:var(--base-size-40)}.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY .Primer_Brand__Testimonial-module__Testimonial__media___rvn7k{width:356px}}.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY .Primer_Brand__Testimonial-module__Testimonial-from___XLpqj{align-items:center;gap:calc(var(--base-size-8) + var(--base-size-2));font-family:var(--brand-fontStack-monospace);font-size:var(--brand-text-size-100);font-weight:var(--brand-heading-weight-500);line-height:var(--brand-text-lineHeight-100);text-transform:uppercase;letter-spacing:.0107em;display:flex}.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY .Primer_Brand__Testimonial-module__Testimonial-from___XLpqj:before{content:"";background-color:var(--brand-color-text-emphasized);flex-shrink:0;width:.5625rem;height:.875rem;display:inline-block}.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY .Primer_Brand__Testimonial-module__Testimonial-position____jQ17{font-size:var(--brand-text-size-200);font-weight:var(--base-text-weight-normal);letter-spacing:.01em;line-height:1.6}.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY .Primer_Brand__Testimonial-module__Testimonial__quoteMark___sC3I2{font-family:var(--brand-fontStack-monospace);font-weight:var(--brand-fontWeight-300)}.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY .Primer_Brand__Testimonial-module__Testimonial__quoteMarkGlyph___1eZ5L{transform:translateY(var(--base-size-12))}.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY .Primer_Brand__Testimonial-module__Testimonial__quoteMark___sC3I2:not(.Primer_Brand__Testimonial-module__Testimonial__quoteMark--hasBackground___AUVX2){margin-left:-.18em}.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY .Primer_Brand__Testimonial-module__Testimonial-quote___xbxri{font-family:var(--brand-fontStack-monospace);letter-spacing:-.01em;font-size:1.5rem;font-weight:425;line-height:var(--brand-text-lineHeight-100);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media screen and (width>=48rem){.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY{max-width:618px;padding-inline:var(--base-size-36);padding-block:var(--base-size-44);margin-inline:auto}.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY .Primer_Brand__Testimonial-module__Testimonial-quote___xbxri{letter-spacing:-.02em;font-size:1.625rem}}@media screen and (width>=63.25rem){.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY{grid-column-gap:calc(var(--base-size-96) + var(--base-size-24));-moz-column-gap:calc(var(--base-size-96) + var(--base-size-24));column-gap:calc(var(--base-size-96) + var(--base-size-24));max-width:1176px;padding-inline:var(--base-size-48);padding-block:var(--base-size-88);grid-template-columns:minmax(0,744px) 312px;align-items:end;margin-inline:auto;display:grid}.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY.Primer_Brand__Testimonial-module__Testimonial--hasLink___U6yF2{row-gap:var(--base-size-48)}.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY .Primer_Brand__Testimonial-module__Testimonial__quoteWrapper___vcgUf{gap:var(--base-size-48);grid-area:1/1}.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY .Primer_Brand__Testimonial-module__Testimonial__media___rvn7k{gap:var(--base-size-32);grid-area:1/2;width:312px}.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY.Primer_Brand__Testimonial-module__Testimonial--hasLink___U6yF2 .Primer_Brand__Testimonial-module__Testimonial__media___rvn7k{grid-row:1/span 2}.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY .Primer_Brand__Testimonial-module__Testimonial-caption___8c_KF{padding-block-start:var(--base-size-24)}.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY .Primer_Brand__Testimonial-module__Testimonial-quote___xbxri{font-size:var(--base-size-32)}.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY .Primer_Brand__Testimonial-module__Testimonial-link___kK8cZ{grid-area:2/1}}@media screen and (width>=80rem){.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY{padding-inline:0}.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY .Primer_Brand__Testimonial-module__Testimonial-avatar___kWqMQ{width:var(--base-size-48);height:var(--base-size-48)}}.Primer_Brand__Testimonial-module__Testimonial-link___kK8cZ{margin-top:var(--base-size-8)}.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY .Primer_Brand__Testimonial-module__Testimonial-link___kK8cZ{align-self:flex-start;width:fit-content;margin-top:0}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--default___wRFiA{--brand-Testimonial-quoteMarkColor:var(--brand-Testimonial-quoteMarkColor-default);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-default)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--blue___65lEG{--brand-Testimonial-quoteMarkColor:var(--brand-Testimonial-quoteMarkColor-blue);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-blue)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--blue-purple___HZ6wp{--brand-Testimonial-quoteMarkColor-start:var(--brand-Testimonial-quoteMarkColor-blue-purple-start);--brand-Testimonial-quoteMarkColor-end:var(--brand-Testimonial-quoteMarkColor-blue-purple-end);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-blue-purple)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--coral___zCLpT{--brand-Testimonial-quoteMarkColor:var(--brand-Testimonial-quoteMarkColor-coral);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-coral)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--green___zmlvZ{--brand-Testimonial-quoteMarkColor:var(--brand-Testimonial-quoteMarkColor-green);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-green)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--green-blue___Q0gxM{--brand-Testimonial-quoteMarkColor-start:var(--brand-Testimonial-quoteMarkColor-green-blue-start);--brand-Testimonial-quoteMarkColor-end:var(--brand-Testimonial-quoteMarkColor-green-blue-end);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-green-blue)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--gray___18cS4{--brand-Testimonial-quoteMarkColor:var(--brand-Testimonial-quoteMarkColor-gray);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-gray)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--indigo___GDdwu{--brand-Testimonial-quoteMarkColor:var(--brand-Testimonial-quoteMarkColor-indigo);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-indigo)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--lemon___SbBQ4{--brand-Testimonial-quoteMarkColor:var(--brand-Testimonial-quoteMarkColor-lemon);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-lemon)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--lime___jzEWj{--brand-Testimonial-quoteMarkColor:var(--brand-Testimonial-quoteMarkColor-lime);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-lime)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--orange___Mk2Ix{--brand-Testimonial-quoteMarkColor:var(--brand-Testimonial-quoteMarkColor-orange);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-orange)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--pink____Y7MC{--brand-Testimonial-quoteMarkColor:var(--brand-Testimonial-quoteMarkColor-pink);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-pink)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--pink-blue___VQftN{--brand-Testimonial-quoteMarkColor-start:var(--brand-Testimonial-quoteMarkColor-pink-blue-start);--brand-Testimonial-quoteMarkColor-end:var(--brand-Testimonial-quoteMarkColor-pink-blue-end);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-pink-blue)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--purple___TMw0P{--brand-Testimonial-quoteMarkColor:var(--brand-Testimonial-quoteMarkColor-purple);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-purple)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--purple-red___f1bgK{--brand-Testimonial-quoteMarkColor-start:var(--brand-Testimonial-quoteMarkColor-purple-red-start);--brand-Testimonial-quoteMarkColor-end:var(--brand-Testimonial-quoteMarkColor-purple-red-end);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-purple-red)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--red___rbO_z{--brand-Testimonial-quoteMarkColor:var(--brand-Testimonial-quoteMarkColor-red);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-red)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--red-orange___pm_dh{--brand-Testimonial-quoteMarkColor-start:var(--brand-Testimonial-quoteMarkColor-red-orange-start);--brand-Testimonial-quoteMarkColor-end:var(--brand-Testimonial-quoteMarkColor-red-orange-end);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-red-orange)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--teal___S_1eT{--brand-Testimonial-quoteMarkColor:var(--brand-Testimonial-quoteMarkColor-teal);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-teal)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--yellow___W8v__{--brand-Testimonial-quoteMarkColor:var(--brand-Testimonial-quoteMarkColor-yellow);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-yellow)}

package/esm/Testimonial/Testimonial.module.js

@@ -1,4 +1,4 @@
-import './Testimonial.module-BEBpUSD7.css';var e = {
+import './Testimonial.module-BEV0y2jl.css';var e = {
 	Testimonial: "Primer_Brand__Testimonial-module__Testimonial___kxB6R",
 	"Testimonial--variant-subtle": "Primer_Brand__Testimonial-module__Testimonial--variant-subtle___rmjBe",
 	"Testimonial--variant-default": "Primer_Brand__Testimonial-module__Testimonial--variant-default___uNm5S",
@@ -15,6 +15,8 @@ import './Testimonial.module-BEBpUSD7.css';var e = {
 	"Testimonial-from": "Primer_Brand__Testimonial-module__Testimonial-from___XLpqj",
 	"Testimonial--variant-expressive": "Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY",
 	Testimonial__quoteWrapper: "Primer_Brand__Testimonial-module__Testimonial__quoteWrapper___vcgUf",
+	"Testimonial-position": "Primer_Brand__Testimonial-module__Testimonial-position____jQ17",
+	"Testimonial--hasLink": "Primer_Brand__Testimonial-module__Testimonial--hasLink___U6yF2",
 	"Testimonial-link": "Primer_Brand__Testimonial-module__Testimonial-link___kK8cZ",
 	"Testimonial__quoteMark--default": "Primer_Brand__Testimonial-module__Testimonial__quoteMark--default___wRFiA",
 	"Testimonial__quoteMark--blue": "Primer_Brand__Testimonial-module__Testimonial__quoteMark--blue___65lEG",