@primer/react-brand 0.80.1 → 0.81.0-rc.1b89e69c

package/esm/Testimonial/Testimonial.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Testimonial.module.js","names":[],"sources":["../../src/Testimonial/Testimonial.module.css"],"sourcesContent":[".Testimonial {\n  color: var(--brand-color-text-default);\n  font-family: var(--brand-fontStack-sansSerif);\n}\n\n.Testimonial--variant-subtle,\n.Testimonial--variant-default {\n  position: relative;\n  border-radius: var(--brand-borderRadius-xlarge);\n  padding: var(--base-size-48) var(--base-size-32);\n}\n\n@media screen and (min-width: 48rem) {\n  .Testimonial--variant-subtle,\n  .Testimonial--variant-default {\n    padding: var(--base-size-48);\n  }\n}\n\n@media screen and (min-width: 63.25rem) {\n  .Testimonial--variant-subtle.Testimonial--size-large,\n  .Testimonial--variant-default.Testimonial--size-large {\n    padding: var(--base-size-96) var(--base-size-128);\n  }\n}\n\n.Testimonial--variant-subtle {\n  background-color: var(--brand-color-canvas-subtle);\n}\n\n.Testimonial--variant-default {\n  background-color: var(--brand-color-canvas-default);\n}\n\n.Testimonial--variant-subtle::before,\n.Testimonial--variant-default::before {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  content: '';\n  border-radius: inherit;\n}\n\n.Testimonial--variant-subtle.Testimonial--border::before {\n  mask-image: var(--brand-Testimonial-borderMask-subtle);\n  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n}\n\n.Testimonial--variant-default.Testimonial--border::before {\n  mask-image: var(--brand-Testimonial-borderMask-default);\n  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n}\n\n.Testimonial--variant-subtle .Testimonial__quoteWrapper,\n.Testimonial--variant-default .Testimonial__quoteWrapper {\n  display: flex;\n  flex-direction: column;\n  gap: calc(var(--base-size-24) + var(--base-size-16));\n}\n\n.Testimonial__quoteMark {\n  position: relative;\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: calc(var(--base-size-48) + var(--base-size-8));\n  height: calc(var(--base-size-48) + var(--base-size-8));\n  border-radius: var(--base-size-12);\n  color: var(--brand-Testimonial-quoteMarkColor, currentColor);\n  background-color: var(--brand-Testimonial-quoteMarkBackground, var(--base-color-scale-gray-0));\n  font-family: var(--brand-fontStack-monospace);\n  font-size: 4rem;\n  font-weight: var(--base-text-weight-normal);\n  line-height: 1;\n}\n\n.Testimonial__quoteMarkGlyph {\n  display: block;\n  transform: translateY(var(--base-size-12));\n}\n\n.Testimonial--variant-default .Testimonial__quoteMark,\n.Testimonial--variant-subtle .Testimonial__quoteMark {\n  width: var(--base-size-40);\n  height: var(--base-size-40);\n  border-radius: var(--base-size-8);\n  font-size: 3rem;\n}\n\n.Testimonial--variant-default .Testimonial__quoteMarkGlyph,\n.Testimonial--variant-subtle .Testimonial__quoteMarkGlyph {\n  transform: translateY(var(--base-size-8));\n}\n\n.Testimonial-quote {\n  font-family: var(--brand-fontStack-sansSerif);\n  font-size: var(--brand-Testimonial-quote-fontSize-default);\n  font-weight: var(--brand-Testimonial-quote-fontWeight-default);\n  letter-spacing: var(--brand-Testimonial-quote-letterSpacing-default);\n  line-height: 1.2; /* requires custom line-height */\n  display: block;\n}\n\n.Testimonial--size-large .Testimonial-quote {\n  font-size: var(--brand-Testimonial-quote-fontSize-large);\n  font-weight: var(--brand-Testimonial-quote-fontWeight-large);\n  letter-spacing: var(--brand-Testimonial-quote-letterSpacing-large);\n}\n\n.Testimonial-quote em,\n.Testimonial-quote b {\n  color: var(--brand-Testimonial-quote-color-emphasis);\n  font-style: normal;\n  font-weight: inherit;\n}\n\n.Testimonial__media {\n  display: flex;\n  gap: var(--base-size-16);\n  align-items: center;\n  margin-block-start: var(--base-size-24);\n}\n\n.Testimonial-logo-image {\n  display: block;\n}\n\n.Testimonial--size-large .Testimonial__media {\n  margin-block-start: var(--base-size-64);\n}\n\n.Testimonial-caption {\n  display: flex;\n  flex-direction: column;\n}\n\n.Testimonial-avatar {\n  flex: none;\n}\n\n.Testimonial-from {\n  font-weight: var(--base-text-weight-normal);\n  text-transform: uppercase;\n}\n\n/* Expressive variant */\n.Testimonial--variant-expressive {\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-size-36);\n  width: 100%;\n  max-width: 1176px;\n  padding-inline: var(--base-size-20);\n  padding-block: var(--base-size-40);\n}\n\n.Testimonial--variant-expressive .Testimonial__quoteWrapper {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--base-size-36);\n  min-width: 0;\n}\n\n.Testimonial--variant-expressive .Testimonial__media {\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--base-size-28);\n  margin-block-start: 0;\n  width: 100%;\n}\n\n.Testimonial--variant-expressive .Testimonial-avatar {\n  width: var(--base-size-40);\n  height: var(--base-size-40);\n}\n\n.Testimonial--variant-expressive .Testimonial-caption {\n  border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n  padding-block-start: var(--base-size-20);\n  width: 100%;\n  gap: var(--base-size-6);\n}\n\n@media screen and (min-width: 48rem) {\n  .Testimonial--variant-expressive .Testimonial__quoteWrapper {\n    gap: var(--base-size-40);\n  }\n\n  .Testimonial--variant-expressive .Testimonial__media {\n    width: 356px;\n  }\n}\n\n.Testimonial--variant-expressive .Testimonial-from {\n  display: flex;\n  align-items: center;\n  font-family: var(--brand-fontStack-monospace);\n  font-size: var(--brand-text-size-100);\n  font-weight: var(--brand-heading-weight-500);\n  line-height: var(--brand-text-lineHeight-100);\n  text-transform: uppercase;\n  letter-spacing: 0.0107em;\n}\n\n.Testimonial--variant-expressive .Testimonial-position {\n  font-size: var(--brand-text-size-200);\n  font-weight: var(--base-text-weight-normal);\n  line-height: 1.6;\n  letter-spacing: 0.01em;\n}\n\n.Testimonial--variant-expressive .Testimonial-quote {\n  font-family: var(--brand-fontStack-monospace);\n  font-size: 1.5rem;\n  font-weight: 425;\n  letter-spacing: -0.01em;\n  line-height: var(--brand-text-lineHeight-100);\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n@media screen and (min-width: 48rem) {\n  .Testimonial--variant-expressive {\n    max-width: 618px;\n    margin-inline: auto;\n    padding-inline: var(--base-size-36);\n    padding-block: var(--base-size-44);\n  }\n  .Testimonial--variant-expressive .Testimonial-quote {\n    font-size: 1.625rem;\n    letter-spacing: -0.02em;\n  }\n}\n\n@media screen and (min-width: 63.25rem) {\n  .Testimonial--variant-expressive {\n    display: grid;\n    grid-template-columns: minmax(0, 744px) 312px;\n    column-gap: calc(var(--base-size-96) + var(--base-size-24));\n    align-items: end;\n    max-width: 1176px;\n    margin-inline: auto;\n    padding-inline: var(--base-size-48);\n    padding-block: var(--base-size-88);\n  }\n\n  .Testimonial--variant-expressive.Testimonial--hasLink {\n    row-gap: var(--base-size-48);\n  }\n\n  .Testimonial--variant-expressive .Testimonial__quoteWrapper {\n    grid-column: 1;\n    grid-row: 1;\n    gap: var(--base-size-48);\n  }\n\n  .Testimonial--variant-expressive .Testimonial__media {\n    grid-column: 2;\n    grid-row: 1;\n    width: 312px;\n    gap: var(--base-size-32);\n  }\n\n  .Testimonial--variant-expressive.Testimonial--hasLink .Testimonial__media {\n    grid-row: 1 / span 2;\n  }\n\n  .Testimonial--variant-expressive .Testimonial-caption {\n    padding-block-start: var(--base-size-24);\n  }\n\n  .Testimonial--variant-expressive .Testimonial-quote {\n    font-size: 2rem;\n  }\n\n  .Testimonial--variant-expressive .Testimonial-link {\n    grid-column: 1;\n    grid-row: 2;\n  }\n}\n\n@media screen and (min-width: 80rem) {\n  .Testimonial--variant-expressive {\n    padding-inline: 0;\n  }\n\n  .Testimonial--variant-expressive .Testimonial-avatar {\n    width: var(--base-size-48);\n    height: var(--base-size-48);\n  }\n}\n\n.Testimonial-link {\n  margin-block-start: var(--base-size-8);\n}\n\n.Testimonial--variant-expressive .Testimonial-link {\n  align-self: flex-start;\n  width: fit-content;\n  margin-block-start: 0;\n}\n\n.Testimonial__quoteMark--default {\n  --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-default);\n  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-default);\n}\n\n.Testimonial__quoteMark--blue {\n  --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-blue);\n  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-blue);\n}\n\n.Testimonial__quoteMark--coral {\n  --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-coral);\n  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-coral);\n}\n\n.Testimonial__quoteMark--green {\n  --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-green);\n  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-green);\n}\n\n.Testimonial__quoteMark--gray {\n  --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-gray);\n  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-gray);\n}\n\n.Testimonial__quoteMark--indigo {\n  --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-indigo);\n  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-indigo);\n}\n\n.Testimonial__quoteMark--lemon {\n  --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-lemon);\n  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-lemon);\n}\n\n.Testimonial__quoteMark--lime {\n  --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-lime);\n  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-lime);\n}\n\n.Testimonial__quoteMark--orange {\n  --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-orange);\n  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-orange);\n}\n\n.Testimonial__quoteMark--pink {\n  --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-pink);\n  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-pink);\n}\n\n.Testimonial__quoteMark--purple {\n  --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-purple);\n  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-purple);\n}\n\n.Testimonial__quoteMark--red {\n  --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-red);\n  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-red);\n}\n\n.Testimonial__quoteMark--teal {\n  --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-teal);\n  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-teal);\n}\n\n.Testimonial__quoteMark--yellow {\n  --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-yellow);\n  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-yellow);\n}\n\n.Testimonial--variant-minimal {\n  margin: 0;\n  width: 100%;\n}\n\n.Testimonial--variant-minimal .Testimonial__quoteWrapper {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: calc(var(--base-size-24) + var(--base-size-16));\n}\n\n.Testimonial--variant-minimal.Testimonial--size-large .Testimonial__quoteWrapper {\n  gap: var(--base-size-48);\n}\n\n.Testimonial--variant-minimal blockquote {\n  margin: 0;\n}\n\n.Testimonial--variant-minimal .Testimonial-quote {\n  font-size: var(--brand-Testimonial-quote-fontSize-default);\n  font-weight: var(--brand-Testimonial-quote-fontWeight-default);\n  line-height: 1.2;\n  letter-spacing: 0;\n}\n\n.Testimonial--variant-minimal.Testimonial--size-large .Testimonial-quote {\n  font-size: var(--brand-text-size-600);\n  font-weight: var(--brand-heading-weight-500);\n  line-height: var(--brand-Testimonial-minimal-quote-lineHeight);\n}\n\n.Testimonial--variant-minimal .Testimonial__media {\n  gap: var(--base-size-16);\n  margin-block-start: calc(var(--base-size-32) + var(--base-size-8));\n  padding-block-start: 0;\n}\n\n.Testimonial--variant-minimal.Testimonial--size-large .Testimonial__media {\n  margin-block-start: var(--base-size-32);\n  padding-block-start: var(--base-size-8);\n}\n\n.Testimonial--variant-minimal .Testimonial-caption {\n  min-width: 0;\n  gap: var(--base-size-2);\n}\n\n.Testimonial--variant-minimal .Testimonial-from,\n.Testimonial--variant-minimal .Testimonial-position {\n  font-family: var(--brand-fontStack-sansSerif);\n  font-size: var(--brand-text-size-200);\n  font-weight: var(--base-text-weight-normal);\n  line-height: var(--brand-text-lineHeight-200);\n  letter-spacing: var(--brand-text-letterSpacing-200);\n  text-transform: none;\n}\n\n.Testimonial--variant-minimal .Testimonial-avatar {\n  width: var(--base-size-64);\n  height: var(--base-size-64);\n}\n\n@media screen and (min-width: 63.25rem) {\n  .Testimonial--variant-subtle .Testimonial__quoteWrapper,\n  .Testimonial--variant-default .Testimonial__quoteWrapper,\n  .Testimonial--variant-minimal .Testimonial__quoteWrapper {\n    gap: var(--base-size-48);\n  }\n\n  .Testimonial--variant-minimal.Testimonial--size-large .Testimonial-quote {\n    font-size: var(--brand-Testimonial-minimal-quote-fontSize-large);\n  }\n}\n\n@media screen and (min-width: 34rem) and (max-width: 47.99rem) {\n  .Testimonial--variant-minimal.Testimonial--size-large .Testimonial-quote {\n    font-size: var(--brand-text-size-700);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Testimonial.module.js","names":[],"sources":["../../src/Testimonial/Testimonial.module.css"],"sourcesContent":[".Testimonial {\n  color: var(--brand-color-text-default);\n  font-family: var(--brand-fontStack-sansSerif);\n}\n\n.Testimonial--variant-subtle,\n.Testimonial--variant-default {\n  position: relative;\n  border-radius: var(--brand-borderRadius-xlarge);\n  padding: var(--base-size-48) var(--base-size-32);\n}\n\n@media screen and (min-width: 48rem) {\n  .Testimonial--variant-subtle,\n  .Testimonial--variant-default {\n    padding: var(--base-size-48);\n  }\n}\n\n@media screen and (min-width: 63.25rem) {\n  .Testimonial--variant-subtle.Testimonial--size-large,\n  .Testimonial--variant-default.Testimonial--size-large {\n    padding: var(--base-size-96) var(--base-size-128);\n  }\n}\n\n.Testimonial--variant-subtle {\n  background-color: var(--brand-color-canvas-subtle);\n}\n\n.Testimonial--variant-default {\n  background-color: var(--brand-color-canvas-default);\n}\n\n.Testimonial--variant-subtle::before,\n.Testimonial--variant-default::before {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  content: '';\n  border-radius: inherit;\n}\n\n.Testimonial--variant-subtle.Testimonial--border::before {\n  mask-image: var(--brand-Testimonial-borderMask-subtle);\n  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n}\n\n.Testimonial--variant-default.Testimonial--border::before {\n  mask-image: var(--brand-Testimonial-borderMask-default);\n  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n}\n\n.Testimonial--variant-subtle .Testimonial__quoteWrapper,\n.Testimonial--variant-default .Testimonial__quoteWrapper {\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-size-40);\n}\n\n.Testimonial__quoteMark {\n  position: relative;\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: calc(var(--base-size-48) + var(--base-size-8));\n  height: calc(var(--base-size-48) + var(--base-size-8));\n  border-radius: var(--base-size-12);\n  color: var(--brand-Testimonial-quoteMarkColor, currentColor);\n  background-color: var(--brand-Testimonial-quoteMarkBackground, var(--base-color-scale-gray-0));\n  font-family: var(--brand-fontStack-monospace);\n  font-size: 4rem; /* TODO: Optical quote-glyph sizing is independent of the text scale. */\n  font-weight: var(--base-text-weight-normal);\n  line-height: 1; /* TODO: Keep the quote glyph's line box independent of text leading. */\n}\n\n.Testimonial__quoteMarkGlyph {\n  display: block;\n  transform: translateY(var(--base-size-12));\n}\n\n.Testimonial--variant-default .Testimonial__quoteMark,\n.Testimonial--variant-subtle .Testimonial__quoteMark {\n  width: var(--base-size-40);\n  height: var(--base-size-40);\n  border-radius: var(--base-size-8);\n  font-size: 3rem; /* TODO: Optical quote-glyph sizing for the smaller mark tile. */\n}\n\n.Testimonial--variant-default .Testimonial__quoteMarkGlyph,\n.Testimonial--variant-subtle .Testimonial__quoteMarkGlyph {\n  transform: translateY(var(--base-size-8));\n}\n\n.Testimonial-quote {\n  font-family: var(--brand-fontStack-sansSerif);\n  font-size: var(--brand-Testimonial-quote-fontSize-default);\n  font-weight: var(--brand-Testimonial-quote-fontWeight-default);\n  letter-spacing: var(--brand-Testimonial-quote-letterSpacing-default);\n  line-height: var(--brand-text-lineHeight-700);\n  display: block;\n}\n\n.Testimonial--size-large .Testimonial-quote {\n  font-size: var(--brand-Testimonial-quote-fontSize-large);\n  font-weight: var(--brand-Testimonial-quote-fontWeight-large);\n  letter-spacing: var(--brand-Testimonial-quote-letterSpacing-large);\n}\n\n.Testimonial-quote em,\n.Testimonial-quote b {\n  color: var(--brand-Testimonial-quote-color-emphasis);\n  font-style: normal;\n  font-weight: inherit;\n}\n\n.Testimonial__media {\n  display: flex;\n  gap: var(--base-size-16);\n  align-items: center;\n  margin-block-start: var(--base-size-24);\n}\n\n.Testimonial-logo-image {\n  display: block;\n}\n\n.Testimonial--size-large .Testimonial__media {\n  margin-block-start: var(--base-size-64);\n}\n\n.Testimonial-caption {\n  display: flex;\n  flex-direction: column;\n}\n\n.Testimonial-avatar {\n  flex: none;\n}\n\n.Testimonial-from {\n  font-weight: var(--base-text-weight-normal);\n  text-transform: uppercase;\n}\n\n/* Expressive variant */\n.Testimonial--variant-expressive {\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-size-36);\n  width: 100%;\n  max-width: var(--brand-Testimonial-expressive-maxWidth);\n  padding-inline: var(--base-size-20);\n  padding-block: var(--base-size-40);\n}\n\n.Testimonial--variant-expressive .Testimonial__quoteWrapper {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--base-size-36);\n  min-width: 0;\n}\n\n.Testimonial--variant-expressive .Testimonial__media {\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--base-size-28);\n  margin-block-start: 0;\n  width: var(--brand-Testimonial-expressive-media-width);\n}\n\n.Testimonial--variant-expressive .Testimonial-avatar {\n  width: var(--base-size-40);\n  height: var(--base-size-40);\n}\n\n.Testimonial--variant-expressive .Testimonial-caption {\n  border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n  padding-block-start: var(--base-size-20);\n  width: 100%;\n  gap: var(--base-size-6);\n}\n\n@media screen and (min-width: 48rem) {\n  .Testimonial--variant-expressive .Testimonial__quoteWrapper {\n    gap: var(--base-size-40);\n  }\n}\n\n.Testimonial--variant-expressive .Testimonial-from {\n  display: flex;\n  align-items: center;\n  font-family: var(--brand-fontStack-monospace);\n  font-size: var(--brand-text-size-100);\n  font-weight: var(--brand-heading-weight-500);\n  line-height: var(--brand-text-lineHeight-100);\n  text-transform: uppercase;\n  letter-spacing: var(--brand-Testimonial-expressive-name-letterSpacing);\n}\n\n.Testimonial--variant-expressive .Testimonial-position {\n  font-size: var(--brand-text-size-200);\n  font-weight: var(--base-text-weight-normal);\n  line-height: var(--brand-Testimonial-expressive-position-lineHeight);\n  letter-spacing: var(--brand-Testimonial-expressive-position-letterSpacing);\n}\n\n.Testimonial--variant-expressive .Testimonial-quote {\n  font-family: var(--brand-fontStack-monospace);\n  font-size: var(--brand-Testimonial-expressive-quote-fontSize);\n  font-weight: var(--brand-Testimonial-expressive-quote-fontWeight);\n  letter-spacing: var(--brand-Testimonial-expressive-quote-letterSpacing);\n  line-height: var(--brand-text-lineHeight-100);\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n@media screen and (min-width: 48rem) {\n  .Testimonial--variant-expressive {\n    margin-inline: auto;\n    padding-inline: var(--base-size-36);\n    padding-block: var(--base-size-44);\n  }\n}\n\n@media screen and (min-width: 63.25rem) {\n  .Testimonial--variant-expressive {\n    display: grid;\n    grid-template-columns: minmax(0, var(--brand-Testimonial-expressive-quote-maxWidth)) var(\n        --brand-Testimonial-expressive-media-width\n      );\n    column-gap: calc(var(--base-size-96) + var(--base-size-24));\n    align-items: end;\n    margin-inline: auto;\n    padding-inline: var(--base-size-48);\n    padding-block: var(--base-size-88);\n  }\n\n  .Testimonial--variant-expressive.Testimonial--hasLink {\n    row-gap: var(--base-size-48);\n  }\n\n  .Testimonial--variant-expressive .Testimonial__quoteWrapper {\n    grid-column: 1;\n    grid-row: 1;\n    gap: var(--base-size-48);\n  }\n\n  .Testimonial--variant-expressive .Testimonial__media {\n    grid-column: 2;\n    grid-row: 1;\n    gap: var(--base-size-32);\n  }\n\n  .Testimonial--variant-expressive.Testimonial--hasLink .Testimonial__media {\n    grid-row: 1 / span 2;\n  }\n\n  .Testimonial--variant-expressive .Testimonial-caption {\n    padding-block-start: var(--base-size-24);\n  }\n\n  .Testimonial--variant-expressive .Testimonial-link {\n    grid-column: 1;\n    grid-row: 2;\n  }\n}\n\n@media screen and (min-width: 80rem) {\n  .Testimonial--variant-expressive {\n    padding-inline: 0;\n  }\n\n  .Testimonial--variant-expressive .Testimonial-avatar {\n    width: var(--base-size-48);\n    height: var(--base-size-48);\n  }\n}\n\n.Testimonial-link {\n  margin-block-start: var(--base-size-8);\n}\n\n.Testimonial--variant-expressive .Testimonial-link {\n  align-self: flex-start;\n  width: fit-content;\n  margin-block-start: 0;\n}\n\n.Testimonial__quoteMark--default {\n  --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-default);\n  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-default);\n}\n\n.Testimonial__quoteMark--blue {\n  --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-blue);\n  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-blue);\n}\n\n.Testimonial__quoteMark--coral {\n  --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-coral);\n  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-coral);\n}\n\n.Testimonial__quoteMark--green {\n  --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-green);\n  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-green);\n}\n\n.Testimonial__quoteMark--gray {\n  --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-gray);\n  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-gray);\n}\n\n.Testimonial__quoteMark--indigo {\n  --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-indigo);\n  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-indigo);\n}\n\n.Testimonial__quoteMark--lemon {\n  --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-lemon);\n  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-lemon);\n}\n\n.Testimonial__quoteMark--lime {\n  --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-lime);\n  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-lime);\n}\n\n.Testimonial__quoteMark--orange {\n  --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-orange);\n  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-orange);\n}\n\n.Testimonial__quoteMark--pink {\n  --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-pink);\n  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-pink);\n}\n\n.Testimonial__quoteMark--purple {\n  --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-purple);\n  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-purple);\n}\n\n.Testimonial__quoteMark--red {\n  --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-red);\n  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-red);\n}\n\n.Testimonial__quoteMark--teal {\n  --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-teal);\n  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-teal);\n}\n\n.Testimonial__quoteMark--yellow {\n  --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-yellow);\n  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-yellow);\n}\n\n.Testimonial--variant-minimal {\n  margin: 0;\n  width: 100%;\n}\n\n.Testimonial--variant-minimal .Testimonial__quoteWrapper {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--base-size-40);\n}\n\n.Testimonial--variant-minimal.Testimonial--size-large .Testimonial__quoteWrapper {\n  gap: var(--base-size-48);\n}\n\n.Testimonial--variant-minimal blockquote {\n  margin: 0;\n}\n\n.Testimonial--variant-minimal .Testimonial-quote {\n  font-size: var(--brand-Testimonial-quote-fontSize-default);\n  font-weight: var(--brand-Testimonial-quote-fontWeight-default);\n  line-height: var(--brand-text-lineHeight-700);\n  letter-spacing: var(--brand-text-letterSpacing-400);\n}\n\n.Testimonial--variant-minimal.Testimonial--size-large .Testimonial-quote {\n  font-size: var(--brand-text-size-600);\n  font-weight: var(--brand-heading-weight-500);\n  line-height: var(--brand-Testimonial-minimal-quote-lineHeight);\n}\n\n.Testimonial--variant-minimal .Testimonial__media {\n  gap: var(--base-size-16);\n  margin-block-start: var(--base-size-40);\n  padding-block-start: 0;\n}\n\n.Testimonial--variant-minimal.Testimonial--size-large .Testimonial__media {\n  margin-block-start: var(--base-size-32);\n  padding-block-start: var(--base-size-8);\n}\n\n.Testimonial--variant-minimal .Testimonial-caption {\n  min-width: 0;\n  gap: var(--base-size-2);\n}\n\n.Testimonial--variant-minimal .Testimonial-from,\n.Testimonial--variant-minimal .Testimonial-position {\n  font-family: var(--brand-fontStack-sansSerif);\n  font-size: var(--brand-text-size-200);\n  font-weight: var(--base-text-weight-normal);\n  line-height: var(--brand-text-lineHeight-200);\n  letter-spacing: var(--brand-text-letterSpacing-200);\n  text-transform: none;\n}\n\n.Testimonial--variant-minimal .Testimonial-avatar {\n  width: var(--base-size-64);\n  height: var(--base-size-64);\n}\n\n@media screen and (min-width: 63.25rem) {\n  .Testimonial--variant-subtle .Testimonial__quoteWrapper,\n  .Testimonial--variant-default .Testimonial__quoteWrapper,\n  .Testimonial--variant-minimal .Testimonial__quoteWrapper {\n    gap: var(--base-size-48);\n  }\n\n  .Testimonial--variant-minimal.Testimonial--size-large .Testimonial-quote {\n    font-size: var(--brand-Testimonial-minimal-quote-fontSize-large);\n  }\n}\n\n@media screen and (min-width: 34rem) and (max-width: 47.99rem) {\n  .Testimonial--variant-minimal.Testimonial--size-large .Testimonial-quote {\n    font-size: var(--brand-text-size-700);\n  }\n}\n"],"mappings":""}

package/esm/packages/design-tokens/lib/design-tokens/css/tokens/functional/components/testimonial/base-uEcPTyOn.css

@@ -0,0 +1 @@
+:root{--brand-Testimonial-quote-letterSpacing-large:var(--brand-text-letterSpacing-900);--brand-Testimonial-quote-letterSpacing-default:var(--brand-text-letterSpacing-400);--brand-Testimonial-quote-fontWeight-large:var(--brand-heading-weight-600);--brand-Testimonial-quote-fontWeight-default:var(--brand-heading-weight-1000);--brand-Testimonial-quote-fontSize-large:var(--brand-text-size-500);--brand-Testimonial-quote-fontSize-default:var(--brand-text-size-400);--brand-Testimonial-expressive-media-width:100%;--brand-Testimonial-expressive-position-letterSpacing:.01em;--brand-Testimonial-expressive-position-lineHeight:1.6;--brand-Testimonial-expressive-name-letterSpacing:.0107em;--brand-Testimonial-expressive-quote-letterSpacing:-.01em;--brand-Testimonial-expressive-quote-fontWeight:425;--brand-Testimonial-expressive-quote-fontSize:1.5rem;--brand-Testimonial-expressive-quote-maxWidth:744px;--brand-Testimonial-expressive-maxWidth:1176px;--brand-Testimonial-minimal-quote-lineHeight:1.35;--brand-Testimonial-minimal-quote-fontSize-large:2rem}@media (width>=48rem){:root{--brand-Testimonial-expressive-media-width:22.25rem;--brand-Testimonial-expressive-quote-letterSpacing:-.02em;--brand-Testimonial-expressive-quote-fontSize:1.625rem;--brand-Testimonial-expressive-maxWidth:38.625rem}}@media (width>=63.25rem){:root{--brand-Testimonial-expressive-media-width:19.5rem;--brand-Testimonial-expressive-quote-fontSize:2rem;--brand-Testimonial-expressive-maxWidth:73.5rem}}

package/lib/Link/Link.d.ts

@@ -21,8 +21,21 @@ export type LinkProps = {
      */
     variant?: (typeof LinkVariants)[number];
 } & React.ComponentPropsWithoutRef<'a'>;
-/**
- * Links connect users to related content.
- * These are not intended to be used as a call-to-action.
- */
-export declare function Link({ size, variant, className, children, isExternal, onMouseEnter, onMouseLeave, onFocus, onBlur, arrowDirection, ...props }: LinkProps): React.JSX.Element;
+export declare const Link: React.ForwardRefExoticComponent<{
+    /**
+     * The size variations available in Link
+     */
+    size?: (typeof LinkSizes)[number];
+    /**
+     * Position of the arrow.
+     */
+    arrowDirection?: (typeof LinkArrowDirections)[number];
+    /**
+     * Show an external link icon
+     */
+    isExternal?: boolean;
+    /**
+     * Specify alternative link appearance
+     */
+    variant?: (typeof LinkVariants)[number];
+} & Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & React.RefAttributes<HTMLAnchorElement>>;

package/lib/Testimonial/Testimonial.d.ts

@@ -1,6 +1,9 @@
 import React, { HTMLAttributes, SVGProps } from 'react';
 import { BaseProps } from '../component-helpers';
 import type { AvatarProps } from '../';
+/**
+ * Design tokens
+ */
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/testimonial/base.css';
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/testimonial/colors-with-modes.css';
 type TestimonialSize = 'small' | 'large';
@@ -11,7 +14,7 @@ type TestimonialVariant = (typeof TestimonialVariants)[number];
 export declare const defaultTestimonialVariant: TestimonialVariant;
 export type TestimonialProps = {
     /**
-     * Sets alternative appearance for the testimonial
+     * Sets alternative visual appearance
      */
     variant?: TestimonialVariant;
     /**
@@ -19,9 +22,9 @@ export type TestimonialProps = {
      */
     hasBorder?: boolean;
     /**
-     * Valid children include Testimonial.Name, Testimonial.Avatar, and Testimonial.Name
+     * Valid children
      */
-    children: React.ReactNode | React.ReactElement<QuoteProps> | React.ReactElement<NameProps> | React.ReactElement<AvatarProps> | React.ReactElement<LogoProps>[];
+    children: React.ReactNode;
     /**
      * Sets the testimonial text size
      */
@@ -32,45 +35,47 @@ export type TestimonialProps = {
     quoteMarkClassName?: string;
     /** Class applied to the attribution wrapper. */
     mediaClassName?: string;
+    ['data-testid']?: string;
 } & BaseProps<HTMLElement> & React.HTMLAttributes<HTMLElement>;
 /**
  * Testimonial quote child element
  * <Testimonial.Quote>
  */
-type QuoteProps = React.HTMLAttributes<HTMLElement> & BaseProps<HTMLElement>;
+type TestimonialQuoteProps = React.HTMLAttributes<HTMLElement> & BaseProps<HTMLElement>;
 /**
  * Testimonial name child element
  * <Testimonial.Name>
  */
-type NameProps = {
+type TestimonialNameProps = {
     position?: string;
 } & React.HTMLAttributes<HTMLElement> & BaseProps<HTMLElement>;
 /**
  * Testimonial logo child element
  * <Testimonial.Logo>
  */
-type LogoProps = {
+type TestimonialLogoProps = {
     children: React.ReactElement<SVGProps<SVGSVGElement>> | React.ReactElement<HTMLAttributes<HTMLImageElement>>;
 } & React.HTMLAttributes<HTMLImageElement> & BaseProps<HTMLImageElement>;
-/**
- * Testimonial avatar child element
- * <Testimonial.Avatar>
- */
-declare function _Avatar({ size, className, ...rest }: AvatarProps): React.JSX.Element;
 /**
  * Use Testimonial to display a quote from a customer or user.
  * @see https://primer.style/brand/components/Testimonial
  */
-export declare const Testimonial: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<TestimonialProps>, "ref"> & React.RefAttributes<unknown>> & {
-    Quote: React.ForwardRefExoticComponent<Omit<QuoteProps, "ref"> & React.RefAttributes<unknown>>;
-    Name: React.ForwardRefExoticComponent<Omit<NameProps, "ref"> & React.RefAttributes<unknown>>;
-    Avatar: typeof _Avatar;
-    Logo: React.ForwardRefExoticComponent<Omit<LogoProps, "ref"> & React.RefAttributes<unknown>>;
+export declare const Testimonial: React.ForwardRefExoticComponent<Omit<TestimonialProps, "ref"> & React.RefAttributes<HTMLElement>> & {
+    Quote: React.ForwardRefExoticComponent<Omit<TestimonialQuoteProps, "ref"> & React.RefAttributes<HTMLElement>>;
+    Name: React.ForwardRefExoticComponent<Omit<TestimonialNameProps, "ref"> & React.RefAttributes<HTMLElement>>;
+    Avatar: React.ForwardRefExoticComponent<Omit<AvatarProps, "ref"> & React.RefAttributes<HTMLImageElement>>;
+    Logo: React.ForwardRefExoticComponent<Omit<TestimonialLogoProps, "ref"> & React.RefAttributes<unknown>>;
     Link: React.ForwardRefExoticComponent<{
         size?: typeof import("../Link").LinkSizes[number];
         arrowDirection?: typeof import("../Link").LinkArrowDirections[number];
         isExternal?: boolean;
         variant?: typeof import("../Link").LinkVariants[number];
-    } & Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & React.RefAttributes<unknown>>;
+    } & Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+    testIds: {
+        root: string;
+        readonly quoteMark: string;
+        readonly quoteWrapper: string;
+        readonly media: string;
+    };
 };
 export {};