@primer/react-brand 0.76.0-rc.73295f51 → 0.76.0

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  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 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__quoteMark {\n  --brand-Testimonial-quoteMarkColor-gradient: radial-gradient(\n    circle at top left,\n    var(--brand-Testimonial-quoteMarkColor-start),\n    var(--brand-Testimonial-quoteMarkColor-end)\n  );\n  --brand-Testimonial-quoteMarkColor-background: var(\n    --brand-Testimonial-quoteMarkColor-gradient,\n    var(--brand-Testimonial-quoteMarkColor, currentColor)\n  );\n  color: var(--brand-Testimonial-quoteMarkColor-start, var(--brand-Testimonial-quoteMarkColor, currentColor));\n  font-size: var(--base-size-48);\n  line-height: var(--base-size-48);\n  font-weight: var(--base-text-weight-extrabold);\n  position: relative;\n}\n\n.Testimonial__quoteMark::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: var(--brand-Testimonial-quoteMarkColor-background);\n  -webkit-mask: linear-gradient(var(--brand-color-canvas-default), var(--brand-color-canvas-default)) content-box,\n    linear-gradient(var(--brand-color-canvas-default), var(--brand-color-canvas-default));\n  mask: linear-gradient(var(--brand-color-canvas-default), var(--brand-color-canvas-default)) content-box,\n    linear-gradient(var(--brand-color-canvas-default), var(--brand-color-canvas-default));\n  -webkit-mask-composite: xor;\n  mask-composite: exclude;\n}\n\n.Testimonial__quoteMark--hasBackground {\n  display: inline-flex;\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  background-color: var(--brand-Testimonial-quoteMarkBackground, var(--base-color-scale-gray-0));\n  font-size: var(--base-size-64);\n  line-height: 1;\n}\n\n.Testimonial--size-large .Testimonial__quoteMark:not(.Testimonial__quoteMark--hasBackground) {\n  font-size: 7.5rem; /* 120px */\n  line-height: 1;\n}\n\n.Testimonial__quoteMarkGlyph {\n  display: block;\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-top: var(--base-size-24);\n}\n\n.Testimonial-logo-image {\n  display: block;\n}\n\n.Testimonial--size-large .Testimonial__media {\n  margin-top: 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  gap: calc(var(--base-size-8) + var(--base-size-2));\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-from::before {\n  content: '';\n  display: inline-block;\n  width: 0.5625rem;\n  height: 0.875rem;\n  background-color: var(--brand-color-text-emphasized);\n  flex-shrink: 0;\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__quoteMark {\n  font-family: var(--brand-fontStack-monospace);\n  font-weight: var(--brand-fontWeight-300);\n}\n\n.Testimonial--variant-expressive .Testimonial__quoteMarkGlyph {\n  transform: translateY(var(--base-size-12));\n}\n\n.Testimonial--variant-expressive .Testimonial__quoteMark:not(.Testimonial__quoteMark--hasBackground) {\n  margin-left: -0.18em;\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: var(--base-size-32);\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-top: var(--base-size-8);\n}\n\n.Testimonial--variant-expressive .Testimonial-link {\n  align-self: flex-start;\n  width: fit-content;\n  margin-top: 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--blue-purple {\n  --brand-Testimonial-quoteMarkColor-start: var(--brand-Testimonial-quoteMarkColor-blue-purple-start);\n  --brand-Testimonial-quoteMarkColor-end: var(--brand-Testimonial-quoteMarkColor-blue-purple-end);\n  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-blue-purple);\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--green-blue {\n  --brand-Testimonial-quoteMarkColor-start: var(--brand-Testimonial-quoteMarkColor-green-blue-start);\n  --brand-Testimonial-quoteMarkColor-end: var(--brand-Testimonial-quoteMarkColor-green-blue-end);\n  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-green-blue);\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--pink-blue {\n  --brand-Testimonial-quoteMarkColor-start: var(--brand-Testimonial-quoteMarkColor-pink-blue-start);\n  --brand-Testimonial-quoteMarkColor-end: var(--brand-Testimonial-quoteMarkColor-pink-blue-end);\n  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-pink-blue);\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--purple-red {\n  --brand-Testimonial-quoteMarkColor-start: var(--brand-Testimonial-quoteMarkColor-purple-red-start);\n  --brand-Testimonial-quoteMarkColor-end: var(--brand-Testimonial-quoteMarkColor-purple-red-end);\n  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-purple-red);\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--red-orange {\n  --brand-Testimonial-quoteMarkColor-start: var(--brand-Testimonial-quoteMarkColor-red-orange-start);\n  --brand-Testimonial-quoteMarkColor-end: var(--brand-Testimonial-quoteMarkColor-red-orange-end);\n  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-red-orange);\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"],"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  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 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__quoteMark {\n  --brand-Testimonial-quoteMarkColor-gradient: radial-gradient(\n    circle at top left,\n    var(--brand-Testimonial-quoteMarkColor-start),\n    var(--brand-Testimonial-quoteMarkColor-end)\n  );\n  --brand-Testimonial-quoteMarkColor-background: var(\n    --brand-Testimonial-quoteMarkColor-gradient,\n    var(--brand-Testimonial-quoteMarkColor, currentColor)\n  );\n  color: var(--brand-Testimonial-quoteMarkColor-start, var(--brand-Testimonial-quoteMarkColor, currentColor));\n  font-size: var(--base-size-48);\n  line-height: var(--base-size-48);\n  font-weight: var(--base-text-weight-extrabold);\n  position: relative;\n}\n\n.Testimonial__quoteMark::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: var(--brand-Testimonial-quoteMarkColor-background);\n  -webkit-mask: linear-gradient(var(--brand-color-canvas-default), var(--brand-color-canvas-default)) content-box,\n    linear-gradient(var(--brand-color-canvas-default), var(--brand-color-canvas-default));\n  mask: linear-gradient(var(--brand-color-canvas-default), var(--brand-color-canvas-default)) content-box,\n    linear-gradient(var(--brand-color-canvas-default), var(--brand-color-canvas-default));\n  -webkit-mask-composite: xor;\n  mask-composite: exclude;\n}\n\n.Testimonial__quoteMark--hasBackground {\n  display: inline-flex;\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  background-color: var(--brand-Testimonial-quoteMarkBackground, var(--base-color-scale-gray-0));\n  font-size: var(--base-size-64);\n  line-height: 1;\n}\n\n.Testimonial--size-large .Testimonial__quoteMark:not(.Testimonial__quoteMark--hasBackground) {\n  font-size: 7.5rem; /* 120px */\n  line-height: 1;\n}\n\n.Testimonial__quoteMarkGlyph {\n  display: block;\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-top: var(--base-size-24);\n}\n\n.Testimonial-logo-image {\n  display: block;\n}\n\n.Testimonial--size-large .Testimonial__media {\n  margin-top: 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__quoteMark {\n  font-family: var(--brand-fontStack-monospace);\n  font-weight: var(--brand-fontWeight-300);\n}\n\n.Testimonial--variant-expressive .Testimonial__quoteMarkGlyph {\n  transform: translateY(var(--base-size-12));\n}\n\n.Testimonial--variant-expressive .Testimonial__quoteMark:not(.Testimonial__quoteMark--hasBackground) {\n  margin-left: -0.18em;\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: var(--base-size-32);\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-top: var(--base-size-8);\n}\n\n.Testimonial--variant-expressive .Testimonial-link {\n  align-self: flex-start;\n  width: fit-content;\n  margin-top: 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--blue-purple {\n  --brand-Testimonial-quoteMarkColor-start: var(--brand-Testimonial-quoteMarkColor-blue-purple-start);\n  --brand-Testimonial-quoteMarkColor-end: var(--brand-Testimonial-quoteMarkColor-blue-purple-end);\n  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-blue-purple);\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--green-blue {\n  --brand-Testimonial-quoteMarkColor-start: var(--brand-Testimonial-quoteMarkColor-green-blue-start);\n  --brand-Testimonial-quoteMarkColor-end: var(--brand-Testimonial-quoteMarkColor-green-blue-end);\n  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-green-blue);\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--pink-blue {\n  --brand-Testimonial-quoteMarkColor-start: var(--brand-Testimonial-quoteMarkColor-pink-blue-start);\n  --brand-Testimonial-quoteMarkColor-end: var(--brand-Testimonial-quoteMarkColor-pink-blue-end);\n  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-pink-blue);\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--purple-red {\n  --brand-Testimonial-quoteMarkColor-start: var(--brand-Testimonial-quoteMarkColor-purple-red-start);\n  --brand-Testimonial-quoteMarkColor-end: var(--brand-Testimonial-quoteMarkColor-purple-red-end);\n  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-purple-red);\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--red-orange {\n  --brand-Testimonial-quoteMarkColor-start: var(--brand-Testimonial-quoteMarkColor-red-orange-start);\n  --brand-Testimonial-quoteMarkColor-end: var(--brand-Testimonial-quoteMarkColor-red-orange-end);\n  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-red-orange);\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"],"mappings":""}

package/esm/TextCursorAnimation/TextCursorAnimation.d.ts

@@ -19,6 +19,7 @@ export type TextCursorAnimationProps = {
     ['data-testid']?: string;
     delay?: number;
     waitForPageLoad?: boolean;
+    animationTrigger?: 'immediate' | 'on-visible';
 } & React.HTMLAttributes<HTMLSpanElement> & Omit<TextProps, 'animate' | 'as'>;
-export declare function TextCursorAnimation({ children, className, animate, initialText, 'data-testid': testId, delay, waitForPageLoad, variant, }: PropsWithChildren<TextCursorAnimationProps>): React.JSX.Element;
+export declare function TextCursorAnimation({ children, className, animate, initialText, 'data-testid': testId, delay, waitForPageLoad, animationTrigger, variant, }: PropsWithChildren<TextCursorAnimationProps>): React.JSX.Element;
 //# sourceMappingURL=TextCursorAnimation.d.ts.map

package/esm/TextCursorAnimation/TextCursorAnimation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextCursorAnimation.d.ts","sourceRoot":"","sources":["../../src/TextCursorAnimation/TextCursorAnimation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAI9C,OAAO,EAAC,SAAS,EAAC,MAAM,cAAc,CAAA;AAEtC,OAAO,4GAA4G,CAAA;AACnH,OAAO,yHAAyH,CAAA;AAIhI,eAAO,MAAM,OAAO;;;;CAQnB,CAAA;AAED,MAAM,MAAM,wBAAwB,GAAG;IACrC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAA;IACxB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,GAAG,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,GACvC,IAAI,CAAC,SAAS,EAAE,SAAS,GAAG,IAAI,CAAC,CAAA;AAEnC,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,SAAS,EACT,OAAO,EACP,WAAW,EACX,aAAa,EAAE,MAAM,EACrB,KAAK,EACL,eAAsB,EACtB,OAAiB,GAClB,EAAE,iBAAiB,CAAC,wBAAwB,CAAC,qBA+E7C"}
+{"version":3,"file":"TextCursorAnimation.d.ts","sourceRoot":"","sources":["../../src/TextCursorAnimation/TextCursorAnimation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,iBAAiB,EAAS,MAAM,OAAO,CAAA;AAItD,OAAO,EAAC,SAAS,EAAC,MAAM,cAAc,CAAA;AAEtC,OAAO,4GAA4G,CAAA;AACnH,OAAO,yHAAyH,CAAA;AAIhI,eAAO,MAAM,OAAO;;;;CAQnB,CAAA;AAED,MAAM,MAAM,wBAAwB,GAAG;IACrC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAA;IACxB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,gBAAgB,CAAC,EAAE,WAAW,GAAG,YAAY,CAAA;CAC9C,GAAG,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,GACvC,IAAI,CAAC,SAAS,EAAE,SAAS,GAAG,IAAI,CAAC,CAAA;AAEnC,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,SAAS,EACT,OAAO,EACP,WAAW,EACX,aAAa,EAAE,MAAM,EACrB,KAAK,EACL,eAAsB,EACtB,gBAA8B,EAC9B,OAAiB,GAClB,EAAE,iBAAiB,CAAC,wBAAwB,CAAC,qBAoF7C"}

package/esm/TextCursorAnimation/TextCursorAnimation.js

@@ -4,10 +4,10 @@ import { EyebrowText as n } from "../EyebrowText/EyebrowText.js";
 import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/text-cursor-animation/colors-with-modes-BucKYl1n.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/text-cursor-animation/base-DKbXhPKv.css';/* empty css                                                                                                      */
 /* empty css                                                                                                                   */
 import r from "./TextCursorAnimation.module.js";
-import "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useRef as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/TextCursorAnimation/TextCursorAnimation.tsx
-var o = {
+var s = {
 	root: "TextCursorAnimation",
 	get text() {
 		return `${this.root}-text`;
@@ -16,63 +16,66 @@ var o = {
 		return `${this.root}-cursor`;
 	}
 };
-function s({ children: s, className: c, animate: l, initialText: u, "data-testid": d, delay: f, waitForPageLoad: p = !0, variant: m = "muted" }) {
-	let h = typeof s == "string" ? s : "", { showCursor: g, visibleText: _, cursorPhase: v } = t({
-		text: h,
-		initialText: u,
-		animate: l,
-		delay: f,
-		waitForPageLoad: p
-	}), y = l === !0 && h.length > 0, b = h || s, x = {
+function c({ children: c, className: l, animate: u, initialText: d, "data-testid": f, delay: p, waitForPageLoad: m = !0, animationTrigger: h = "immediate", variant: g = "muted" }) {
+	let _ = i(null), v = typeof c == "string" ? c : "", { showCursor: y, visibleText: b, cursorPhase: x } = t({
+		text: v,
+		initialText: d,
+		animate: u,
+		delay: p,
+		waitForPageLoad: m,
+		startOnIntersection: h === "on-visible",
+		intersectionRef: _
+	}), S = u === !0 && v.length > 0, C = v || c, w = {
 		initial: r["TextCursorAnimation__cursor--initial"],
 		correction: r["TextCursorAnimation__cursor--correction"],
 		final: r["TextCursorAnimation__cursor--final"],
 		complete: r["TextCursorAnimation__cursor--complete"]
-	}[y ? v : "complete"];
-	return /* @__PURE__ */ i("span", {
-		className: e(r.TextCursorAnimation, c),
-		"data-testid": d || o.root,
-		children: /* @__PURE__ */ a("span", {
+	}[S ? x : "complete"], T = y ? /* @__PURE__ */ a("span", {
+		className: e(r.TextCursorAnimation__cursor, S && r["TextCursorAnimation__cursor--animated"], w),
+		"aria-hidden": "true",
+		"data-testid": s.cursor
+	}) : null;
+	return /* @__PURE__ */ a("span", {
+		ref: _,
+		className: e(r.TextCursorAnimation, l),
+		"data-testid": f || s.root,
+		children: /* @__PURE__ */ o("span", {
 			className: r.TextCursorAnimation__inner,
-			children: [y && /* @__PURE__ */ a("span", {
+			children: [S && /* @__PURE__ */ o("span", {
 				className: r.TextCursorAnimation__sizingContainer,
-				children: [/* @__PURE__ */ i(n, {
+				children: [/* @__PURE__ */ a(n, {
 					size: "100",
-					variant: m,
+					variant: g,
 					font: "monospace",
 					weight: "medium",
 					className: e(r.TextCursorAnimation__text, r.TextCursorAnimation__sizingText),
-					children: h
-				}), u && u !== h && /* @__PURE__ */ i(n, {
+					children: v
+				}), d && d !== v && /* @__PURE__ */ a(n, {
 					size: "100",
-					variant: m,
+					variant: g,
 					font: "monospace",
 					weight: "medium",
 					className: e(r.TextCursorAnimation__text, r.TextCursorAnimation__sizingText),
 					"aria-hidden": "true",
-					children: u
+					children: d
 				})]
-			}), /* @__PURE__ */ a("span", {
-				className: e(r.TextCursorAnimation__content, y && r["TextCursorAnimation__content--animated"]),
-				"aria-hidden": y ? "true" : void 0,
-				children: [/* @__PURE__ */ i(n, {
+			}), /* @__PURE__ */ o("span", {
+				className: e(r.TextCursorAnimation__content, S && r["TextCursorAnimation__content--animated"]),
+				"aria-hidden": S ? "true" : void 0,
+				children: [/* @__PURE__ */ a(n, {
 					size: "100",
-					variant: m,
+					variant: g,
 					font: "monospace",
 					weight: "medium",
 					className: r.TextCursorAnimation__text,
-					"data-testid": o.text,
-					children: y ? _ : b
-				}), g && /* @__PURE__ */ i("span", {
-					className: e(r.TextCursorAnimation__cursor, y && r["TextCursorAnimation__cursor--animated"], x),
-					"aria-hidden": "true",
-					"data-testid": o.cursor
-				})]
+					"data-testid": s.text,
+					children: S ? b : C
+				}), T]
 			})]
 		})
 	});
 }
 //#endregion
-export { s as TextCursorAnimation, o as testIds };
+export { c as TextCursorAnimation, s as testIds };
 
 //# sourceMappingURL=TextCursorAnimation.js.map

package/esm/TextCursorAnimation/TextCursorAnimation.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextCursorAnimation.js","names":[],"sources":["../../src/TextCursorAnimation/TextCursorAnimation.tsx"],"sourcesContent":["import React, {PropsWithChildren} from 'react'\nimport {clsx} from 'clsx'\nimport {useCursorAnimation} from '../hooks/useCursorAnimation'\nimport {EyebrowText} from '../EyebrowText'\nimport {TextProps} from '../Text/Text'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/text-cursor-animation/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/text-cursor-animation/colors-with-modes.css'\n\nimport styles from './TextCursorAnimation.module.css'\n\nexport const testIds = {\n  root: 'TextCursorAnimation',\n  get text() {\n    return `${this.root}-text`\n  },\n  get cursor() {\n    return `${this.root}-cursor`\n  },\n}\n\nexport type TextCursorAnimationProps = {\n  /**\n   * Whether to animate the text with a typing effect.\n   */\n  animate?: boolean\n  /**\n   * Optional text to type before transitioning to the final text\n   */\n  initialText?: string\n  ['data-testid']?: string\n  delay?: number\n  waitForPageLoad?: boolean\n} & React.HTMLAttributes<HTMLSpanElement> &\n  Omit<TextProps, 'animate' | 'as'>\n\nexport function TextCursorAnimation({\n  children,\n  className,\n  animate,\n  initialText,\n  'data-testid': testId,\n  delay,\n  waitForPageLoad = true,\n  variant = 'muted',\n}: PropsWithChildren<TextCursorAnimationProps>) {\n  const text = typeof children === 'string' ? children : ''\n  const {showCursor, visibleText, cursorPhase} = useCursorAnimation({\n    text,\n    initialText,\n    animate,\n    delay,\n    waitForPageLoad,\n  })\n\n  const hasAnimation = animate === true && text.length > 0\n  const content = text || children\n  const cursorPhaseClassName = {\n    initial: styles['TextCursorAnimation__cursor--initial'],\n    correction: styles['TextCursorAnimation__cursor--correction'],\n    final: styles['TextCursorAnimation__cursor--final'],\n    complete: styles['TextCursorAnimation__cursor--complete'],\n  }[hasAnimation ? cursorPhase : 'complete']\n\n  return (\n    <span className={clsx(styles.TextCursorAnimation, className)} data-testid={testId || testIds.root}>\n      <span className={styles.TextCursorAnimation__inner}>\n        {hasAnimation && (\n          <span className={styles.TextCursorAnimation__sizingContainer}>\n            <EyebrowText\n              size=\"100\"\n              variant={variant}\n              font=\"monospace\"\n              weight=\"medium\"\n              className={clsx(styles.TextCursorAnimation__text, styles.TextCursorAnimation__sizingText)}\n            >\n              {text}\n            </EyebrowText>\n            {initialText && initialText !== text && (\n              <EyebrowText\n                size=\"100\"\n                variant={variant}\n                font=\"monospace\"\n                weight=\"medium\"\n                className={clsx(styles.TextCursorAnimation__text, styles.TextCursorAnimation__sizingText)}\n                aria-hidden=\"true\"\n              >\n                {initialText}\n              </EyebrowText>\n            )}\n          </span>\n        )}\n        <span\n          className={clsx(\n            styles.TextCursorAnimation__content,\n            hasAnimation && styles['TextCursorAnimation__content--animated'],\n          )}\n          aria-hidden={hasAnimation ? 'true' : undefined}\n        >\n          <EyebrowText\n            size=\"100\"\n            variant={variant}\n            font=\"monospace\"\n            weight=\"medium\"\n            className={styles.TextCursorAnimation__text}\n            data-testid={testIds.text}\n          >\n            {hasAnimation ? visibleText : content}\n          </EyebrowText>\n          {showCursor && (\n            <span\n              className={clsx(\n                styles.TextCursorAnimation__cursor,\n                hasAnimation && styles['TextCursorAnimation__cursor--animated'],\n                cursorPhaseClassName,\n              )}\n              aria-hidden=\"true\"\n              data-testid={testIds.cursor}\n            />\n          )}\n        </span>\n      </span>\n    </span>\n  )\n}\n"],"mappings":";;;;;;;;;AAWA,IAAa,IAAU;CACrB,MAAM;CACN,IAAI,OAAO;EACT,OAAO,GAAG,KAAK,KAAK;CACtB;CACA,IAAI,SAAS;EACX,OAAO,GAAG,KAAK,KAAK;CACtB;AACF;AAiBA,SAAgB,EAAoB,EAClC,aACA,cACA,YACA,gBACA,eAAe,GACf,UACA,qBAAkB,IAClB,aAAU,WACoC;CAC9C,IAAM,IAAO,OAAO,KAAa,WAAW,IAAW,IACjD,EAAC,eAAY,gBAAa,mBAAe,EAAmB;EAChE;EACA;EACA;EACA;EACA;CACF,CAAC,GAEK,IAAe,MAAY,MAAQ,EAAK,SAAS,GACjD,IAAU,KAAQ,GAClB,IAAuB;EAC3B,SAAS,EAAO;EAChB,YAAY,EAAO;EACnB,OAAO,EAAO;EACd,UAAU,EAAO;CACnB,EAAE,IAAe,IAAc;CAE/B,OACE,kBAAC,QAAD;EAAM,WAAW,EAAK,EAAO,qBAAqB,CAAS;EAAG,eAAa,KAAU,EAAQ;YAC3F,kBAAC,QAAD;GAAM,WAAW,EAAO;aAAxB,CACG,KACC,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAxB,CACE,kBAAC,GAAD;KACE,MAAK;KACI;KACT,MAAK;KACL,QAAO;KACP,WAAW,EAAK,EAAO,2BAA2B,EAAO,+BAA+B;eAEvF;IACU,CAAA,GACZ,KAAe,MAAgB,KAC9B,kBAAC,GAAD;KACE,MAAK;KACI;KACT,MAAK;KACL,QAAO;KACP,WAAW,EAAK,EAAO,2BAA2B,EAAO,+BAA+B;KACxF,eAAY;eAEX;IACU,CAAA,CAEX;OAER,kBAAC,QAAD;IACE,WAAW,EACT,EAAO,8BACP,KAAgB,EAAO,yCACzB;IACA,eAAa,IAAe,SAAS,KAAA;cALvC,CAOE,kBAAC,GAAD;KACE,MAAK;KACI;KACT,MAAK;KACL,QAAO;KACP,WAAW,EAAO;KAClB,eAAa,EAAQ;eAEpB,IAAe,IAAc;IACnB,CAAA,GACZ,KACC,kBAAC,QAAD;KACE,WAAW,EACT,EAAO,6BACP,KAAgB,EAAO,0CACvB,CACF;KACA,eAAY;KACZ,eAAa,EAAQ;IACtB,CAAA,CAEC;KACF;;CACF,CAAA;AAEV"}
+{"version":3,"file":"TextCursorAnimation.js","names":[],"sources":["../../src/TextCursorAnimation/TextCursorAnimation.tsx"],"sourcesContent":["import React, {PropsWithChildren, useRef} from 'react'\nimport {clsx} from 'clsx'\nimport {useCursorAnimation} from '../hooks/useCursorAnimation'\nimport {EyebrowText} from '../EyebrowText'\nimport {TextProps} from '../Text/Text'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/text-cursor-animation/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/text-cursor-animation/colors-with-modes.css'\n\nimport styles from './TextCursorAnimation.module.css'\n\nexport const testIds = {\n  root: 'TextCursorAnimation',\n  get text() {\n    return `${this.root}-text`\n  },\n  get cursor() {\n    return `${this.root}-cursor`\n  },\n}\n\nexport type TextCursorAnimationProps = {\n  /**\n   * Whether to animate the text with a typing effect.\n   */\n  animate?: boolean\n  /**\n   * Optional text to type before transitioning to the final text\n   */\n  initialText?: string\n  ['data-testid']?: string\n  delay?: number\n  waitForPageLoad?: boolean\n  animationTrigger?: 'immediate' | 'on-visible'\n} & React.HTMLAttributes<HTMLSpanElement> &\n  Omit<TextProps, 'animate' | 'as'>\n\nexport function TextCursorAnimation({\n  children,\n  className,\n  animate,\n  initialText,\n  'data-testid': testId,\n  delay,\n  waitForPageLoad = true,\n  animationTrigger = 'immediate',\n  variant = 'muted',\n}: PropsWithChildren<TextCursorAnimationProps>) {\n  const rootRef = useRef<HTMLSpanElement>(null)\n  const text = typeof children === 'string' ? children : ''\n  const {showCursor, visibleText, cursorPhase} = useCursorAnimation({\n    text,\n    initialText,\n    animate,\n    delay,\n    waitForPageLoad,\n    startOnIntersection: animationTrigger === 'on-visible',\n    intersectionRef: rootRef,\n  })\n\n  const hasAnimation = animate === true && text.length > 0\n  const content = text || children\n  const cursorPhaseClassName = {\n    initial: styles['TextCursorAnimation__cursor--initial'],\n    correction: styles['TextCursorAnimation__cursor--correction'],\n    final: styles['TextCursorAnimation__cursor--final'],\n    complete: styles['TextCursorAnimation__cursor--complete'],\n  }[hasAnimation ? cursorPhase : 'complete']\n\n  const cursor = showCursor ? (\n    <span\n      className={clsx(\n        styles.TextCursorAnimation__cursor,\n        hasAnimation && styles['TextCursorAnimation__cursor--animated'],\n        cursorPhaseClassName,\n      )}\n      aria-hidden=\"true\"\n      data-testid={testIds.cursor}\n    />\n  ) : null\n\n  return (\n    <span ref={rootRef} className={clsx(styles.TextCursorAnimation, className)} data-testid={testId || testIds.root}>\n      <span className={styles.TextCursorAnimation__inner}>\n        {hasAnimation && (\n          <span className={styles.TextCursorAnimation__sizingContainer}>\n            <EyebrowText\n              size=\"100\"\n              variant={variant}\n              font=\"monospace\"\n              weight=\"medium\"\n              className={clsx(styles.TextCursorAnimation__text, styles.TextCursorAnimation__sizingText)}\n            >\n              {text}\n            </EyebrowText>\n            {initialText && initialText !== text && (\n              <EyebrowText\n                size=\"100\"\n                variant={variant}\n                font=\"monospace\"\n                weight=\"medium\"\n                className={clsx(styles.TextCursorAnimation__text, styles.TextCursorAnimation__sizingText)}\n                aria-hidden=\"true\"\n              >\n                {initialText}\n              </EyebrowText>\n            )}\n          </span>\n        )}\n        <span\n          className={clsx(\n            styles.TextCursorAnimation__content,\n            hasAnimation && styles['TextCursorAnimation__content--animated'],\n          )}\n          aria-hidden={hasAnimation ? 'true' : undefined}\n        >\n          <EyebrowText\n            size=\"100\"\n            variant={variant}\n            font=\"monospace\"\n            weight=\"medium\"\n            className={styles.TextCursorAnimation__text}\n            data-testid={testIds.text}\n          >\n            {hasAnimation ? visibleText : content}\n          </EyebrowText>\n          {cursor}\n        </span>\n      </span>\n    </span>\n  )\n}\n"],"mappings":";;;;;;;;;AAWA,IAAa,IAAU;CACrB,MAAM;CACN,IAAI,OAAO;EACT,OAAO,GAAG,KAAK,KAAK;CACtB;CACA,IAAI,SAAS;EACX,OAAO,GAAG,KAAK,KAAK;CACtB;AACF;AAkBA,SAAgB,EAAoB,EAClC,aACA,cACA,YACA,gBACA,eAAe,GACf,UACA,qBAAkB,IAClB,sBAAmB,aACnB,aAAU,WACoC;CAC9C,IAAM,IAAU,EAAwB,IAAI,GACtC,IAAO,OAAO,KAAa,WAAW,IAAW,IACjD,EAAC,eAAY,gBAAa,mBAAe,EAAmB;EAChE;EACA;EACA;EACA;EACA;EACA,qBAAqB,MAAqB;EAC1C,iBAAiB;CACnB,CAAC,GAEK,IAAe,MAAY,MAAQ,EAAK,SAAS,GACjD,IAAU,KAAQ,GAClB,IAAuB;EAC3B,SAAS,EAAO;EAChB,YAAY,EAAO;EACnB,OAAO,EAAO;EACd,UAAU,EAAO;CACnB,EAAE,IAAe,IAAc,aAEzB,IAAS,IACb,kBAAC,QAAD;EACE,WAAW,EACT,EAAO,6BACP,KAAgB,EAAO,0CACvB,CACF;EACA,eAAY;EACZ,eAAa,EAAQ;CACtB,CAAA,IACC;CAEJ,OACE,kBAAC,QAAD;EAAM,KAAK;EAAS,WAAW,EAAK,EAAO,qBAAqB,CAAS;EAAG,eAAa,KAAU,EAAQ;YACzG,kBAAC,QAAD;GAAM,WAAW,EAAO;aAAxB,CACG,KACC,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAxB,CACE,kBAAC,GAAD;KACE,MAAK;KACI;KACT,MAAK;KACL,QAAO;KACP,WAAW,EAAK,EAAO,2BAA2B,EAAO,+BAA+B;eAEvF;IACU,CAAA,GACZ,KAAe,MAAgB,KAC9B,kBAAC,GAAD;KACE,MAAK;KACI;KACT,MAAK;KACL,QAAO;KACP,WAAW,EAAK,EAAO,2BAA2B,EAAO,+BAA+B;KACxF,eAAY;eAEX;IACU,CAAA,CAEX;OAER,kBAAC,QAAD;IACE,WAAW,EACT,EAAO,8BACP,KAAgB,EAAO,yCACzB;IACA,eAAa,IAAe,SAAS,KAAA;cALvC,CAOE,kBAAC,GAAD;KACE,MAAK;KACI;KACT,MAAK;KACL,QAAO;KACP,WAAW,EAAO;KAClB,eAAa,EAAQ;eAEpB,IAAe,IAAc;IACnB,CAAA,GACZ,CACG;KACF;;CACF,CAAA;AAEV"}

package/esm/TextCursorAnimation/TextCursorAnimation.module-Dfn6Ar6C.css

@@ -0,0 +1 @@
+.Primer_Brand__TextCursorAnimation-module__TextCursorAnimation___fMZNu{align-items:center;display:inline-flex}.Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__inner____uwkl{align-items:center;display:inline-flex;position:relative}.Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__text___t1rcc{font-weight:var(--brand-text-weight-500);white-space:pre}.Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__sizingContainer___7_wcg{clip-path:inset(50%);display:inline-grid}.Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__sizingText___Mhr64{grid-area:1/1}.Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__content___M_K3E{align-items:center;gap:var(--base-size-6);display:inline-flex}.Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__content--animated___Zmg8H{position:absolute;inset-block-start:0;inset-inline-start:0}.Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__cursor___suzWD{width:calc(var(--base-size-8) + var(--base-size-2) / 2);height:calc(var(--base-size-12) + var(--base-size-2));flex:0 0 calc(var(--base-size-8) + var(--base-size-2) / 2);position:relative;top:-.5px}.Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__cursor--initial___Ozy64{background-color:var(--brand-TextCursorAnimation-cursor-color)}.Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__cursor--animated___EfpR4{animation:Primer_Brand__TextCursorAnimation-module__TextCursorAnimation-cursor-blink___cTxPh var(--brand-TextCursorAnimation-cursor-animationDuration) steps(1, end) .25s 3 forwards}.Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__cursor--correction___y1c10{background-color:var(--brand-TextCursorAnimation-cursor-deleteColor)}.Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__cursor--final___fBBsR,.Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__cursor--complete___gufWv{background-color:var(--brand-TextCursorAnimation-cursor-finalColor)}@keyframes Primer_Brand__TextCursorAnimation-module__TextCursorAnimation-cursor-blink___cTxPh{0%,79%{opacity:1}80%,99%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion:reduce){.Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__cursor___suzWD{animation:none}}

package/esm/TextCursorAnimation/TextCursorAnimation.module.js

@@ -1,4 +1,4 @@
-import './TextCursorAnimation.module-BS4hPR8H.css';//#region src/TextCursorAnimation/TextCursorAnimation.module.css
+import './TextCursorAnimation.module-Dfn6Ar6C.css';//#region src/TextCursorAnimation/TextCursorAnimation.module.css
 var e = "Primer_Brand__TextCursorAnimation-module__TextCursorAnimation___fMZNu", t = "Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__inner____uwkl", n = "Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__text___t1rcc", r = "Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__sizingContainer___7_wcg", i = "Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__sizingText___Mhr64", a = "Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__content___M_K3E", o = "Primer_Brand__TextCursorAnimation-module__TextCursorAnimation__cursor___suzWD", s = {
 	TextCursorAnimation: e,
 	TextCursorAnimation__inner: t,

package/esm/TextCursorAnimation/TextCursorAnimation.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextCursorAnimation.module.js","names":[],"sources":["../../src/TextCursorAnimation/TextCursorAnimation.module.css"],"sourcesContent":[".TextCursorAnimation {\n  display: inline-flex;\n  align-items: center;\n}\n\n.TextCursorAnimation__inner {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n}\n\n.TextCursorAnimation__text {\n  font-weight: var(--brand-text-weight-500);\n  white-space: pre;\n}\n\n.TextCursorAnimation__sizingContainer {\n  display: inline-grid;\n  clip-path: inset(50%);\n}\n\n.TextCursorAnimation__sizingText {\n  grid-area: 1 / 1;\n}\n\n.TextCursorAnimation__content {\n  display: inline-flex;\n  align-items: center;\n  gap: calc(var(--base-size-8) + var(--base-size-2));\n}\n\n.TextCursorAnimation__content--animated {\n  position: absolute;\n  inset-block-start: 0;\n  inset-inline-start: 0;\n}\n\n.TextCursorAnimation__cursor {\n  width: calc(var(--base-size-8) + var(--base-size-2) / 2);\n  height: calc(var(--base-size-12) + var(--base-size-2));\n  flex: 0 0 calc(var(--base-size-8) + var(--base-size-2) / 2);\n}\n\n.TextCursorAnimation__cursor--initial {\n  background-color: var(--brand-TextCursorAnimation-cursor-color);\n}\n\n.TextCursorAnimation__cursor--animated {\n  animation: TextCursorAnimation-cursor-blink var(--brand-TextCursorAnimation-cursor-animationDuration) steps(1, end)\n    250ms 3 forwards;\n}\n\n.TextCursorAnimation__cursor--correction {\n  background-color: var(--brand-TextCursorAnimation-cursor-deleteColor);\n}\n\n.TextCursorAnimation__cursor--final,\n.TextCursorAnimation__cursor--complete {\n  background-color: var(--brand-TextCursorAnimation-cursor-finalColor);\n}\n\n@keyframes TextCursorAnimation-cursor-blink {\n  0%,\n  79% {\n    opacity: 1;\n  }\n\n  80%,\n  99% {\n    opacity: 0;\n  }\n\n  100% {\n    opacity: 1;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .TextCursorAnimation__cursor {\n    animation: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"TextCursorAnimation.module.js","names":[],"sources":["../../src/TextCursorAnimation/TextCursorAnimation.module.css"],"sourcesContent":[".TextCursorAnimation {\n  display: inline-flex;\n  align-items: center;\n}\n\n.TextCursorAnimation__inner {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n}\n\n.TextCursorAnimation__text {\n  font-weight: var(--brand-text-weight-500);\n  white-space: pre;\n}\n\n.TextCursorAnimation__sizingContainer {\n  display: inline-grid;\n  clip-path: inset(50%);\n}\n\n.TextCursorAnimation__sizingText {\n  grid-area: 1 / 1;\n}\n\n.TextCursorAnimation__content {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--base-size-6);\n}\n\n.TextCursorAnimation__content--animated {\n  position: absolute;\n  inset-block-start: 0;\n  inset-inline-start: 0;\n}\n\n.TextCursorAnimation__cursor {\n  width: calc(var(--base-size-8) + var(--base-size-2) / 2);\n  height: calc(var(--base-size-12) + var(--base-size-2));\n  flex: 0 0 calc(var(--base-size-8) + var(--base-size-2) / 2);\n  position: relative;\n  top: -0.5px; /* optical adjustment*/\n}\n\n.TextCursorAnimation__cursor--initial {\n  background-color: var(--brand-TextCursorAnimation-cursor-color);\n}\n\n.TextCursorAnimation__cursor--animated {\n  animation: TextCursorAnimation-cursor-blink var(--brand-TextCursorAnimation-cursor-animationDuration) steps(1, end)\n    250ms 3 forwards;\n}\n\n.TextCursorAnimation__cursor--correction {\n  background-color: var(--brand-TextCursorAnimation-cursor-deleteColor);\n}\n\n.TextCursorAnimation__cursor--final,\n.TextCursorAnimation__cursor--complete {\n  background-color: var(--brand-TextCursorAnimation-cursor-finalColor);\n}\n\n@keyframes TextCursorAnimation-cursor-blink {\n  0%,\n  79% {\n    opacity: 1;\n  }\n\n  80%,\n  99% {\n    opacity: 0;\n  }\n\n  100% {\n    opacity: 1;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .TextCursorAnimation__cursor {\n    animation: none;\n  }\n}\n"],"mappings":""}

package/esm/hooks/useCursorAnimation.d.ts

@@ -1,3 +1,4 @@
+import { type RefObject } from 'react';
 export type CursorAnimationPhase = 'initial' | 'correction' | 'final' | 'complete';
 export type UseCursorAnimationResult = {
     visibleText: string;
@@ -10,6 +11,8 @@ export type UseCursorAnimationOptions = {
     animate?: boolean;
     delay?: number;
     waitForPageLoad?: boolean;
+    startOnIntersection?: boolean;
+    intersectionRef?: RefObject<HTMLElement | null>;
 };
-export declare function useCursorAnimation({ text, initialText, animate, delay, waitForPageLoad, }: UseCursorAnimationOptions): UseCursorAnimationResult;
+export declare function useCursorAnimation({ text, initialText, animate, delay, waitForPageLoad, startOnIntersection, intersectionRef, }: UseCursorAnimationOptions): UseCursorAnimationResult;
 //# sourceMappingURL=useCursorAnimation.d.ts.map

package/esm/hooks/useCursorAnimation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useCursorAnimation.d.ts","sourceRoot":"","sources":["../../src/hooks/useCursorAnimation.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,oBAAoB,GAAG,SAAS,GAAG,YAAY,GAAG,OAAO,GAAG,UAAU,CAAA;AAElF,MAAM,MAAM,wBAAwB,GAAG;IACrC,WAAW,EAAE,MAAM,CAAA;IACnB,UAAU,EAAE,OAAO,CAAA;IACnB,WAAW,EAAE,oBAAoB,CAAA;CAClC,CAAA;AAED,MAAM,MAAM,yBAAyB,GAAG;IACtC,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,CAAA;AAED,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,WAAW,EACX,OAAO,EACP,KAAW,EACX,eAAsB,GACvB,EAAE,yBAAyB,GAAG,wBAAwB,CA6KtD"}
+{"version":3,"file":"useCursorAnimation.d.ts","sourceRoot":"","sources":["../../src/hooks/useCursorAnimation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAA;AAIzD,MAAM,MAAM,oBAAoB,GAAG,SAAS,GAAG,YAAY,GAAG,OAAO,GAAG,UAAU,CAAA;AAElF,MAAM,MAAM,wBAAwB,GAAG;IACrC,WAAW,EAAE,MAAM,CAAA;IACnB,UAAU,EAAE,OAAO,CAAA;IACnB,WAAW,EAAE,oBAAoB,CAAA;CAClC,CAAA;AAED,MAAM,MAAM,yBAAyB,GAAG;IACtC,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,eAAe,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;CAChD,CAAA;AAED,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,WAAW,EACX,OAAO,EACP,KAAW,EACX,eAAsB,EACtB,mBAA2B,EAC3B,eAAe,GAChB,EAAE,yBAAyB,GAAG,wBAAwB,CA6LtD"}

package/esm/hooks/useCursorAnimation.js

@@ -2,20 +2,35 @@ import e from "./useIsomorphicLayoutEffect.js";
 import { useReducedMotion as t } from "./useReducedMotion.js";
 import { useEffect as n, useState as r } from "react";
 //#region src/hooks/useCursorAnimation.ts
-function i({ text: i, initialText: a, animate: o, delay: s = 500, waitForPageLoad: c = !0 }) {
-	let l = t(), u = o === !0 && !l && i.length > 0, d = o === !0 && i.length > 0, [f, p] = r({
-		visibleText: d ? "" : i,
-		showCursor: !d,
-		cursorPhase: d ? "initial" : "complete"
+function i({ text: i, initialText: a, animate: o, delay: s = 500, waitForPageLoad: c = !0, startOnIntersection: l = !1, intersectionRef: u }) {
+	let d = t(), [f, p] = r(!1), m = o === !0 && i.length > 0, h = m && !d, g = h && (!l || f), [_, v] = r({
+		visibleText: m ? "" : i,
+		cursorPhase: m ? "initial" : "complete"
 	});
-	return e(() => {
-		u || p({
+	return n(() => {
+		if (!l || !h || f) return;
+		if (typeof IntersectionObserver > "u") {
+			p(!0);
+			return;
+		}
+		let e = u?.current;
+		if (!e) return;
+		let t = new IntersectionObserver(([e]) => {
+			e.isIntersecting && (p(!0), t.disconnect());
+		});
+		return t.observe(e), () => t.disconnect();
+	}, [
+		f,
+		u,
+		h,
+		l
+	]), e(() => {
+		h || v({
 			visibleText: i,
-			showCursor: !0,
 			cursorPhase: "complete"
 		});
-	}, [u, i]), n(() => {
-		if (!u) return;
+	}, [h, i]), n(() => {
+		if (!g) return;
 		let e = 1e3 / 60, t = 85 / 75 * 24, n = [
 			">",
 			"*",
@@ -27,14 +42,13 @@ function i({ text: i, initialText: a, animate: o, delay: s = 500, waitForPageLoa
 			"^",
 			"_"
 		];
-		p({
+		v({
 			visibleText: "",
-			showCursor: !1,
 			cursorPhase: "initial"
 		});
 		let r = typeof a == "string" && a.length > 0 && a !== i ? a : void 0, o = 0;
 		if (r) for (; o < r.length && o < i.length && r[o] === i[o];) o += 1;
-		let l = r !== void 0 && o < r.length, d = l ? r : i, f = l ? d.length - o : 0, m = d.length / 34 * 1e3, h = m + (l ? 308.8235294117647 : 0), g = h + f / t * 1e3, _ = g + (l ? i.length - o : 0) / 34 * 1e3, v = h - e, y = _ - 6 * e, b = (e, t) => {
+		let l = r !== void 0 && o < r.length, u = l ? r : i, d = l ? u.length - o : 0, f = u.length / 34 * 1e3, p = f + (l ? 308.8235294117647 : 0), m = p + d / t * 1e3, h = m + (l ? i.length - o : 0) / 34 * 1e3, _ = p - e, y = h - 6 * e, b = (e, t) => {
 			let r = "", i = 0;
 			for (let a = 0; a < t; a += 1) {
 				let o = e[a];
@@ -47,31 +61,29 @@ function i({ text: i, initialText: a, animate: o, delay: s = 500, waitForPageLoa
 			return r;
 		}, x = (e) => {
 			let n = "";
-			if (e > 0 && e < m) {
+			if (e > 0 && e < f) {
 				let t = Math.floor(e / 1e3 * 34);
-				n = b(d, t);
-			} else if (l && e >= m && e < h) n = d;
-			else if (l && e >= h && e < g) {
-				let r = e - h, i = Math.floor(r / 1e3 * t);
-				n = d.slice(0, d.length - i);
-			} else if (l && e >= g && e < _) {
-				let t = e - g, r = Math.min(i.length, o + Math.floor(t / 1e3 * 34));
+				n = b(u, t);
+			} else if (l && e >= f && e < p) n = u;
+			else if (l && e >= p && e < m) {
+				let r = e - p, i = Math.floor(r / 1e3 * t);
+				n = u.slice(0, u.length - i);
+			} else if (l && e >= m && e < h) {
+				let t = e - m, r = Math.min(i.length, o + Math.floor(t / 1e3 * 34));
 				n = i.slice(0, r);
-			} else e >= _ && (n = i);
+			} else e >= h && (n = i);
 			let r = "initial";
-			return l && e >= v && (r = "correction"), e >= y && (r = "final"), e >= _ && (r = "complete"), {
+			return l && e >= _ && (r = "correction"), e >= y && (r = "final"), e >= h && (r = "complete"), {
 				visibleText: n,
-				showCursor: n.length > 0,
 				cursorPhase: r
 			};
 		}, S, C, w = () => {
 			let e = performance.now(), t = {
 				visibleText: "",
-				showCursor: !1,
 				cursorPhase: "initial"
 			}, n = (r) => {
 				let i = r - e, a = x(i);
-				(t.visibleText !== a.visibleText || t.showCursor !== a.showCursor || t.cursorPhase !== a.cursorPhase) && (t = a, p(a)), i < _ && (S = window.requestAnimationFrame(n));
+				(t.visibleText !== a.visibleText || t.cursorPhase !== a.cursorPhase) && (t = a, v(a)), i < h && (S = window.requestAnimationFrame(n));
 			};
 			S = window.requestAnimationFrame(n);
 		}, T = () => {
@@ -91,10 +103,14 @@ function i({ text: i, initialText: a, animate: o, delay: s = 500, waitForPageLoa
 	}, [
 		s,
 		a,
-		u,
+		g,
 		i,
 		c
-	]), f;
+	]), {
+		visibleText: _.visibleText,
+		showCursor: !m || _.visibleText.length > 0,
+		cursorPhase: _.cursorPhase
+	};
 }
 //#endregion
 export { i as useCursorAnimation };

package/esm/hooks/useCursorAnimation.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCursorAnimation.js","names":[],"sources":["../../src/hooks/useCursorAnimation.ts"],"sourcesContent":["import {useEffect, useState} from 'react'\nimport useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect'\nimport {useReducedMotion} from './useReducedMotion'\n\nexport type CursorAnimationPhase = 'initial' | 'correction' | 'final' | 'complete'\n\nexport type UseCursorAnimationResult = {\n  visibleText: string\n  showCursor: boolean\n  cursorPhase: CursorAnimationPhase\n}\n\nexport type UseCursorAnimationOptions = {\n  text: string\n  initialText?: string\n  animate?: boolean\n  delay?: number\n  waitForPageLoad?: boolean\n}\n\nexport function useCursorAnimation({\n  text,\n  initialText,\n  animate,\n  delay = 500,\n  waitForPageLoad = true,\n}: UseCursorAnimationOptions): UseCursorAnimationResult {\n  const prefersReducedMotion = useReducedMotion()\n\n  const shouldAnimate = animate === true && !prefersReducedMotion && text.length > 0\n  const shouldStartHidden = animate === true && text.length > 0\n\n  const [frame, setFrame] = useState<UseCursorAnimationResult>({\n    visibleText: shouldStartHidden ? '' : text,\n    showCursor: !shouldStartHidden,\n    cursorPhase: shouldStartHidden ? 'initial' : 'complete',\n  })\n\n  useIsomorphicLayoutEffect(() => {\n    if (!shouldAnimate) {\n      setFrame({visibleText: text, showCursor: true, cursorPhase: 'complete'})\n    }\n  }, [shouldAnimate, text])\n\n  useEffect(() => {\n    if (!shouldAnimate) return\n\n    const frameDuration = 1000 / 60\n    const charactersPerSecond = 30 * (85 / 75)\n    const deleteCharactersPerSecond = 24 * (85 / 75)\n    const correctionPauseDuration = 350 / (85 / 75)\n    const scrambleSymbols = ['>', '*', '=', '&', '+', '-', '%', '^', '_']\n\n    setFrame({visibleText: '', showCursor: false, cursorPhase: 'initial'})\n\n    const candidateInitialText =\n      typeof initialText === 'string' && initialText.length > 0 && initialText !== text ? initialText : undefined\n    let sharedPrefixLength = 0\n\n    if (candidateInitialText) {\n      while (\n        sharedPrefixLength < candidateInitialText.length &&\n        sharedPrefixLength < text.length &&\n        candidateInitialText[sharedPrefixLength] === text[sharedPrefixLength]\n      ) {\n        sharedPrefixLength += 1\n      }\n    }\n\n    const hasCorrection = candidateInitialText !== undefined && sharedPrefixLength < candidateInitialText.length\n    const firstText = hasCorrection ? candidateInitialText : text\n    const deletedCharacterCount = hasCorrection ? firstText.length - sharedPrefixLength : 0\n    const firstTypeDuration = (firstText.length / charactersPerSecond) * 1000\n    const correctionStart = firstTypeDuration + (hasCorrection ? correctionPauseDuration : 0)\n    const deleteDuration = (deletedCharacterCount / deleteCharactersPerSecond) * 1000\n    const secondTypeStart = correctionStart + deleteDuration\n    const secondTypeCharacterCount = hasCorrection ? text.length - sharedPrefixLength : 0\n    const secondTypeDuration = (secondTypeCharacterCount / charactersPerSecond) * 1000\n    const typingComplete = secondTypeStart + secondTypeDuration\n    const correctionCursorStart = correctionStart - frameDuration\n    const finalCursorStart = typingComplete - 6 * frameDuration\n\n    const getScrambledText = (sourceText: string, characterCount: number) => {\n      let result = ''\n      let visibleCharacterIndex = 0\n\n      for (let index = 0; index < characterCount; index += 1) {\n        const character = sourceText[index]\n\n        if (/\\s/.test(character)) {\n          result = `${result}${character}`\n          continue\n        }\n\n        visibleCharacterIndex += 1\n        result = `${result}${character}`\n\n        if (index === characterCount - 1) {\n          result = `${result}${scrambleSymbols[(visibleCharacterIndex - 1) % scrambleSymbols.length]}`\n        }\n      }\n\n      return result\n    }\n\n    const getFrame = (elapsed: number): UseCursorAnimationResult => {\n      let nextText = ''\n\n      if (elapsed > 0 && elapsed < firstTypeDuration) {\n        const typedCharacterCount = Math.floor((elapsed / 1000) * charactersPerSecond)\n        nextText = getScrambledText(firstText, typedCharacterCount)\n      } else if (hasCorrection && elapsed >= firstTypeDuration && elapsed < correctionStart) {\n        nextText = firstText\n      } else if (hasCorrection && elapsed >= correctionStart && elapsed < secondTypeStart) {\n        const deleteElapsed = elapsed - correctionStart\n        const currentDeletedCharacterCount = Math.floor((deleteElapsed / 1000) * deleteCharactersPerSecond)\n        nextText = firstText.slice(0, firstText.length - currentDeletedCharacterCount)\n      } else if (hasCorrection && elapsed >= secondTypeStart && elapsed < typingComplete) {\n        const secondTypeElapsed = elapsed - secondTypeStart\n        const typedCharacterCount = Math.min(\n          text.length,\n          sharedPrefixLength + Math.floor((secondTypeElapsed / 1000) * charactersPerSecond),\n        )\n        nextText = text.slice(0, typedCharacterCount)\n      } else if (elapsed >= typingComplete) {\n        nextText = text\n      }\n\n      let nextCursorPhase: CursorAnimationPhase = 'initial'\n      if (hasCorrection && elapsed >= correctionCursorStart) nextCursorPhase = 'correction'\n      if (elapsed >= finalCursorStart) nextCursorPhase = 'final'\n      if (elapsed >= typingComplete) nextCursorPhase = 'complete'\n\n      return {\n        visibleText: nextText,\n        showCursor: nextText.length > 0,\n        cursorPhase: nextCursorPhase,\n      }\n    }\n\n    let animationFrame: number | undefined\n    let delayTimer: ReturnType<typeof setTimeout> | undefined\n\n    const startAnimation = () => {\n      const startTime = performance.now()\n      let previousFrame: UseCursorAnimationResult = {\n        visibleText: '',\n        showCursor: false,\n        cursorPhase: 'initial',\n      }\n\n      const tick = (currentTime: number) => {\n        const elapsed = currentTime - startTime\n        const nextFrame = getFrame(elapsed)\n\n        if (\n          previousFrame.visibleText !== nextFrame.visibleText ||\n          previousFrame.showCursor !== nextFrame.showCursor ||\n          previousFrame.cursorPhase !== nextFrame.cursorPhase\n        ) {\n          previousFrame = nextFrame\n          setFrame(nextFrame)\n        }\n\n        if (elapsed < typingComplete) {\n          animationFrame = window.requestAnimationFrame(tick)\n        }\n      }\n\n      animationFrame = window.requestAnimationFrame(tick)\n    }\n\n    const startDelayTimer = () => {\n      delayTimer = setTimeout(startAnimation, delay)\n    }\n\n    if (waitForPageLoad && typeof window !== 'undefined') {\n      if (document.readyState === 'complete') {\n        startDelayTimer()\n      } else {\n        const handleLoad = () => startDelayTimer()\n        window.addEventListener('load', handleLoad)\n        return () => {\n          window.removeEventListener('load', handleLoad)\n          if (delayTimer !== undefined) clearTimeout(delayTimer)\n          if (animationFrame !== undefined) window.cancelAnimationFrame(animationFrame)\n        }\n      }\n    } else {\n      startDelayTimer()\n    }\n\n    return () => {\n      if (delayTimer !== undefined) clearTimeout(delayTimer)\n      if (animationFrame !== undefined) window.cancelAnimationFrame(animationFrame)\n    }\n  }, [delay, initialText, shouldAnimate, text, waitForPageLoad])\n\n  return frame\n}\n"],"mappings":"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"}
+{"version":3,"file":"useCursorAnimation.js","names":[],"sources":["../../src/hooks/useCursorAnimation.ts"],"sourcesContent":["import {useEffect, useState, type RefObject} from 'react'\nimport useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect'\nimport {useReducedMotion} from './useReducedMotion'\n\nexport type CursorAnimationPhase = 'initial' | 'correction' | 'final' | 'complete'\n\nexport type UseCursorAnimationResult = {\n  visibleText: string\n  showCursor: boolean\n  cursorPhase: CursorAnimationPhase\n}\n\nexport type UseCursorAnimationOptions = {\n  text: string\n  initialText?: string\n  animate?: boolean\n  delay?: number\n  waitForPageLoad?: boolean\n  startOnIntersection?: boolean\n  intersectionRef?: RefObject<HTMLElement | null>\n}\n\nexport function useCursorAnimation({\n  text,\n  initialText,\n  animate,\n  delay = 500,\n  waitForPageLoad = true,\n  startOnIntersection = false,\n  intersectionRef,\n}: UseCursorAnimationOptions): UseCursorAnimationResult {\n  const prefersReducedMotion = useReducedMotion()\n  const [hasIntersected, setHasIntersected] = useState(false)\n  const shouldStartHidden = animate === true && text.length > 0\n  const motionEnabled = shouldStartHidden && !prefersReducedMotion\n  const shouldAnimate = motionEnabled && (!startOnIntersection || hasIntersected)\n  const [frame, setFrame] = useState<{visibleText: string; cursorPhase: CursorAnimationPhase}>({\n    visibleText: shouldStartHidden ? '' : text,\n    cursorPhase: shouldStartHidden ? 'initial' : 'complete',\n  })\n\n  useEffect(() => {\n    if (!startOnIntersection || !motionEnabled || hasIntersected) return\n\n    if (typeof IntersectionObserver === 'undefined') {\n      setHasIntersected(true)\n      return\n    }\n\n    const observedElement = intersectionRef?.current\n    if (!observedElement) return\n\n    const observer = new IntersectionObserver(([entry]) => {\n      if (entry.isIntersecting) {\n        setHasIntersected(true)\n        observer.disconnect()\n      }\n    })\n\n    observer.observe(observedElement)\n    return () => observer.disconnect()\n  }, [hasIntersected, intersectionRef, motionEnabled, startOnIntersection])\n\n  useIsomorphicLayoutEffect(() => {\n    if (!motionEnabled) {\n      setFrame({visibleText: text, cursorPhase: 'complete'})\n    }\n  }, [motionEnabled, text])\n\n  useEffect(() => {\n    if (!shouldAnimate) return\n\n    const frameDuration = 1000 / 60\n    const charactersPerSecond = 30 * (85 / 75)\n    const deleteCharactersPerSecond = 24 * (85 / 75)\n    const correctionPauseDuration = 350 / (85 / 75)\n    const scrambleSymbols = ['>', '*', '=', '&', '+', '-', '%', '^', '_']\n\n    setFrame({visibleText: '', cursorPhase: 'initial'})\n\n    const candidateInitialText =\n      typeof initialText === 'string' && initialText.length > 0 && initialText !== text ? initialText : undefined\n    let sharedPrefixLength = 0\n\n    if (candidateInitialText) {\n      while (\n        sharedPrefixLength < candidateInitialText.length &&\n        sharedPrefixLength < text.length &&\n        candidateInitialText[sharedPrefixLength] === text[sharedPrefixLength]\n      ) {\n        sharedPrefixLength += 1\n      }\n    }\n\n    const hasCorrection = candidateInitialText !== undefined && sharedPrefixLength < candidateInitialText.length\n    const firstText = hasCorrection ? candidateInitialText : text\n    const deletedCharacterCount = hasCorrection ? firstText.length - sharedPrefixLength : 0\n    const firstTypeDuration = (firstText.length / charactersPerSecond) * 1000\n    const correctionStart = firstTypeDuration + (hasCorrection ? correctionPauseDuration : 0)\n    const deleteDuration = (deletedCharacterCount / deleteCharactersPerSecond) * 1000\n    const secondTypeStart = correctionStart + deleteDuration\n    const secondTypeCharacterCount = hasCorrection ? text.length - sharedPrefixLength : 0\n    const secondTypeDuration = (secondTypeCharacterCount / charactersPerSecond) * 1000\n    const typingComplete = secondTypeStart + secondTypeDuration\n    const correctionCursorStart = correctionStart - frameDuration\n    const finalCursorStart = typingComplete - 6 * frameDuration\n\n    const getScrambledText = (sourceText: string, characterCount: number) => {\n      let result = ''\n      let visibleCharacterIndex = 0\n\n      for (let index = 0; index < characterCount; index += 1) {\n        const character = sourceText[index]\n\n        if (/\\s/.test(character)) {\n          result = `${result}${character}`\n          continue\n        }\n\n        visibleCharacterIndex += 1\n        result = `${result}${character}`\n\n        if (index === characterCount - 1) {\n          result = `${result}${scrambleSymbols[(visibleCharacterIndex - 1) % scrambleSymbols.length]}`\n        }\n      }\n\n      return result\n    }\n\n    const getFrame = (elapsed: number) => {\n      let nextText = ''\n\n      if (elapsed > 0 && elapsed < firstTypeDuration) {\n        const typedCharacterCount = Math.floor((elapsed / 1000) * charactersPerSecond)\n        nextText = getScrambledText(firstText, typedCharacterCount)\n      } else if (hasCorrection && elapsed >= firstTypeDuration && elapsed < correctionStart) {\n        nextText = firstText\n      } else if (hasCorrection && elapsed >= correctionStart && elapsed < secondTypeStart) {\n        const deleteElapsed = elapsed - correctionStart\n        const currentDeletedCharacterCount = Math.floor((deleteElapsed / 1000) * deleteCharactersPerSecond)\n        nextText = firstText.slice(0, firstText.length - currentDeletedCharacterCount)\n      } else if (hasCorrection && elapsed >= secondTypeStart && elapsed < typingComplete) {\n        const secondTypeElapsed = elapsed - secondTypeStart\n        const typedCharacterCount = Math.min(\n          text.length,\n          sharedPrefixLength + Math.floor((secondTypeElapsed / 1000) * charactersPerSecond),\n        )\n        nextText = text.slice(0, typedCharacterCount)\n      } else if (elapsed >= typingComplete) {\n        nextText = text\n      }\n\n      let nextCursorPhase: CursorAnimationPhase = 'initial'\n      if (hasCorrection && elapsed >= correctionCursorStart) nextCursorPhase = 'correction'\n      if (elapsed >= finalCursorStart) nextCursorPhase = 'final'\n      if (elapsed >= typingComplete) nextCursorPhase = 'complete'\n\n      return {visibleText: nextText, cursorPhase: nextCursorPhase}\n    }\n\n    let animationFrame: number | undefined\n    let delayTimer: ReturnType<typeof setTimeout> | undefined\n\n    const startAnimation = () => {\n      const startTime = performance.now()\n      let previousFrame = {visibleText: '', cursorPhase: 'initial' as CursorAnimationPhase}\n\n      const tick = (currentTime: number) => {\n        const elapsed = currentTime - startTime\n        const nextFrame = getFrame(elapsed)\n\n        if (\n          previousFrame.visibleText !== nextFrame.visibleText ||\n          previousFrame.cursorPhase !== nextFrame.cursorPhase\n        ) {\n          previousFrame = nextFrame\n          setFrame(nextFrame)\n        }\n\n        if (elapsed < typingComplete) {\n          animationFrame = window.requestAnimationFrame(tick)\n        }\n      }\n\n      animationFrame = window.requestAnimationFrame(tick)\n    }\n\n    const startDelayTimer = () => {\n      delayTimer = setTimeout(startAnimation, delay)\n    }\n\n    if (waitForPageLoad && typeof window !== 'undefined') {\n      if (document.readyState === 'complete') {\n        startDelayTimer()\n      } else {\n        const handleLoad = () => startDelayTimer()\n        window.addEventListener('load', handleLoad)\n        return () => {\n          window.removeEventListener('load', handleLoad)\n          if (delayTimer !== undefined) clearTimeout(delayTimer)\n          if (animationFrame !== undefined) window.cancelAnimationFrame(animationFrame)\n        }\n      }\n    } else {\n      startDelayTimer()\n    }\n\n    return () => {\n      if (delayTimer !== undefined) clearTimeout(delayTimer)\n      if (animationFrame !== undefined) window.cancelAnimationFrame(animationFrame)\n    }\n  }, [delay, initialText, shouldAnimate, text, waitForPageLoad])\n\n  return {\n    visibleText: frame.visibleText,\n    showCursor: shouldStartHidden ? frame.visibleText.length > 0 : true,\n    cursorPhase: frame.cursorPhase,\n  }\n}\n"],"mappings":"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"}

package/lib/TextCursorAnimation/TextCursorAnimation.d.ts

@@ -19,5 +19,6 @@ export type TextCursorAnimationProps = {
     ['data-testid']?: string;
     delay?: number;
     waitForPageLoad?: boolean;
+    animationTrigger?: 'immediate' | 'on-visible';
 } & React.HTMLAttributes<HTMLSpanElement> & Omit<TextProps, 'animate' | 'as'>;
-export declare function TextCursorAnimation({ children, className, animate, initialText, 'data-testid': testId, delay, waitForPageLoad, variant, }: PropsWithChildren<TextCursorAnimationProps>): React.JSX.Element;
+export declare function TextCursorAnimation({ children, className, animate, initialText, 'data-testid': testId, delay, waitForPageLoad, animationTrigger, variant, }: PropsWithChildren<TextCursorAnimationProps>): React.JSX.Element;