@primer/react-brand 0.72.0-rc.44ea78b6 → 0.72.0-rc.65d39ab5

package/esm/Testimonial/Testimonial.js

@@ -87,7 +87,7 @@ function S({ children: t, ...n }, r) {
 		children: c.Children.map(t, (t) => {
 			if (c.isValidElement(t) && t.type === "img") {
 				let n = t, i = {
-					className: e(s["Testimonial-logo-image"]),
+					className: e(s["Testimonial-logo-image"], n.props.className),
 					ref: r
 				};
 				return c.cloneElement(n, i);

package/esm/Testimonial/Testimonial.js.map

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

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

@@ -0,0 +1 @@
+.Primer_Brand__Testimonial-module__Testimonial___kxB6R{color:var(--brand-color-text-default);font-family:var(--brand-fontStack-sansSerif)}.Primer_Brand__Testimonial-module__Testimonial--variant-subtle___rmjBe,.Primer_Brand__Testimonial-module__Testimonial--variant-default___uNm5S{border-radius:var(--brand-borderRadius-xlarge);padding:var(--base-size-48) var(--base-size-32);position:relative}@media screen and (width>=48rem){.Primer_Brand__Testimonial-module__Testimonial--variant-subtle___rmjBe,.Primer_Brand__Testimonial-module__Testimonial--variant-default___uNm5S{padding:var(--base-size-48)}}@media screen and (width>=63.25rem){.Primer_Brand__Testimonial-module__Testimonial--variant-subtle___rmjBe.Primer_Brand__Testimonial-module__Testimonial--size-large___NH7Vg,.Primer_Brand__Testimonial-module__Testimonial--variant-default___uNm5S.Primer_Brand__Testimonial-module__Testimonial--size-large___NH7Vg{padding:var(--base-size-96) var(--base-size-128)}}.Primer_Brand__Testimonial-module__Testimonial--variant-subtle___rmjBe{background-color:var(--brand-color-canvas-subtle)}.Primer_Brand__Testimonial-module__Testimonial--variant-default___uNm5S{background-color:var(--brand-color-canvas-default)}.Primer_Brand__Testimonial-module__Testimonial--variant-subtle___rmjBe:before,.Primer_Brand__Testimonial-module__Testimonial--variant-default___uNm5S:before{pointer-events:none;content:"";border-radius:inherit;position:absolute;inset:0}.Primer_Brand__Testimonial-module__Testimonial--variant-subtle___rmjBe.Primer_Brand__Testimonial-module__Testimonial--border___pbUPS:before{-webkit-mask-image:var(--brand-Testimonial-borderMask-subtle);-webkit-mask-image:var(--brand-Testimonial-borderMask-subtle);mask-image:var(--brand-Testimonial-borderMask-subtle);border:var(--brand-borderWidth-thin) solid var(--brand-color-border-default)}.Primer_Brand__Testimonial-module__Testimonial--variant-default___uNm5S.Primer_Brand__Testimonial-module__Testimonial--border___pbUPS:before{-webkit-mask-image:var(--brand-Testimonial-borderMask-default);-webkit-mask-image:var(--brand-Testimonial-borderMask-default);mask-image:var(--brand-Testimonial-borderMask-default);border:var(--brand-borderWidth-thin) solid var(--brand-color-border-default)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark___sC3I2{--brand-Testimonial-quoteMarkColor-gradient:radial-gradient(circle at top left, var(--brand-Testimonial-quoteMarkColor-start), var(--brand-Testimonial-quoteMarkColor-end));--brand-Testimonial-quoteMarkColor-background:var(--brand-Testimonial-quoteMarkColor-gradient,var(--brand-Testimonial-quoteMarkColor,currentColor));color:var(--brand-Testimonial-quoteMarkColor-start,var(--brand-Testimonial-quoteMarkColor,currentColor));font-size:var(--base-size-48);line-height:var(--base-size-48);font-weight:var(--base-text-weight-extrabold);position:relative}.Primer_Brand__Testimonial-module__Testimonial__quoteMark___sC3I2:before{content:"";background:var(--brand-Testimonial-quoteMarkColor-background);-webkit-mask:linear-gradient(var(--brand-color-canvas-default), var(--brand-color-canvas-default)) content-box, linear-gradient(var(--brand-color-canvas-default), var(--brand-color-canvas-default));-webkit-mask:linear-gradient(var(--brand-color-canvas-default), var(--brand-color-canvas-default)) content-box, linear-gradient(var(--brand-color-canvas-default), var(--brand-color-canvas-default));mask:linear-gradient(var(--brand-color-canvas-default), var(--brand-color-canvas-default)) content-box, linear-gradient(var(--brand-color-canvas-default), var(--brand-color-canvas-default));-webkit-mask-composite:xor;position:absolute;inset:0;-webkit-mask-composite:xor;mask-composite:exclude}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--hasBackground___AUVX2{width:calc(var(--base-size-48) + var(--base-size-8));height:calc(var(--base-size-48) + var(--base-size-8));border-radius:var(--base-size-12);background-color:var(--brand-Testimonial-quoteMarkBackground,var(--base-color-scale-gray-0));font-size:var(--base-size-64);justify-content:center;align-items:center;line-height:1;display:inline-flex}.Primer_Brand__Testimonial-module__Testimonial--size-large___NH7Vg .Primer_Brand__Testimonial-module__Testimonial__quoteMark___sC3I2:not(.Primer_Brand__Testimonial-module__Testimonial__quoteMark--hasBackground___AUVX2){font-size:7.5rem;line-height:1}.Primer_Brand__Testimonial-module__Testimonial__quoteMarkGlyph___1eZ5L{display:block}.Primer_Brand__Testimonial-module__Testimonial-quote___xbxri{font-family:var(--brand-fontStack-sansSerif);font-size:var(--brand-Testimonial-quote-fontSize-default);font-weight:var(--brand-Testimonial-quote-fontWeight-default);letter-spacing:var(--brand-Testimonial-quote-letterSpacing-default);line-height:1.2;display:block}.Primer_Brand__Testimonial-module__Testimonial--size-large___NH7Vg .Primer_Brand__Testimonial-module__Testimonial-quote___xbxri{font-size:var(--brand-Testimonial-quote-fontSize-large);font-weight:var(--brand-Testimonial-quote-fontWeight-large);letter-spacing:var(--brand-Testimonial-quote-letterSpacing-large)}.Primer_Brand__Testimonial-module__Testimonial-quote___xbxri em,.Primer_Brand__Testimonial-module__Testimonial-quote___xbxri b{color:var(--brand-Testimonial-quote-color-emphasis);font-style:normal;font-weight:inherit}.Primer_Brand__Testimonial-module__Testimonial__media___rvn7k{gap:var(--base-size-16);margin-top:var(--base-size-24);align-items:center;display:flex}.Primer_Brand__Testimonial-module__Testimonial-logo-image___rpGVd{display:block}.Primer_Brand__Testimonial-module__Testimonial--size-large___NH7Vg .Primer_Brand__Testimonial-module__Testimonial__media___rvn7k{margin-top:var(--base-size-64)}.Primer_Brand__Testimonial-module__Testimonial-caption___8c_KF{flex-direction:column;display:flex}.Primer_Brand__Testimonial-module__Testimonial-avatar___kWqMQ{flex:none}.Primer_Brand__Testimonial-module__Testimonial-from___XLpqj{font-weight:var(--base-text-weight-normal);text-transform:uppercase}.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY{gap:var(--base-size-48);flex-direction:column;display:flex}@media screen and (width>=48rem){.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY{align-items:flex-end;gap:var(--base-size-96);flex-direction:row}}.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY .Primer_Brand__Testimonial-module__Testimonial__quoteWrapper___vcgUf{align-items:flex-start;gap:var(--base-size-24);flex-direction:column;flex:1 1 0;min-width:0;display:flex}.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY .Primer_Brand__Testimonial-module__Testimonial__media___rvn7k{align-items:flex-start;gap:var(--base-size-24);flex-direction:column;flex:none;margin-block-start:0}.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY .Primer_Brand__Testimonial-module__Testimonial-caption___8c_KF{border-block-start:var(--brand-borderWidth-thin) solid var(--brand-color-border-default);gap:var(--base-size-8);width:100%;padding-block-start:var(--base-size-24)}@media screen and (width>=48rem){.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY .Primer_Brand__Testimonial-module__Testimonial__media___rvn7k{min-width:240px;max-width:320px}}.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY .Primer_Brand__Testimonial-module__Testimonial-from___XLpqj{align-items:center;gap:var(--base-size-8);font-family:var(--brand-fontStack-monospace);font-weight:var(--base-text-weight-medium);text-transform:uppercase;letter-spacing:.01em;display:flex}.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY .Primer_Brand__Testimonial-module__Testimonial-from___XLpqj:before{content:"";background-color:var(--testimonial-accent-color,var(--brand-Testimonial-quoteMarkColor-default));flex-shrink:0;width:9px;height:14px;display:inline-block}.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY .Primer_Brand__Testimonial-module__Testimonial__quoteMark___sC3I2{font-family:var(--brand-fontStack-monospace);font-weight:var(--brand-fontWeight-300)}.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY .Primer_Brand__Testimonial-module__Testimonial__quoteMarkGlyph___1eZ5L{transform:translateY(var(--base-size-12))}.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY .Primer_Brand__Testimonial-module__Testimonial__quoteMark___sC3I2:not(.Primer_Brand__Testimonial-module__Testimonial__quoteMark--hasBackground___AUVX2){margin-left:-.18em}.Primer_Brand__Testimonial-module__Testimonial--variant-expressive___J1PIY .Primer_Brand__Testimonial-module__Testimonial-quote___xbxri{font-family:var(--brand-fontStack-monospace);line-height:var(--brand-text-lineHeight-400);font-weight:var(--base-text-weight-normal)}.Primer_Brand__Testimonial-module__Testimonial-link___kK8cZ{margin-top:var(--base-size-8)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--default___wRFiA{--brand-Testimonial-quoteMarkColor:var(--brand-Testimonial-quoteMarkColor-default);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-default)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--blue___65lEG{--brand-Testimonial-quoteMarkColor:var(--brand-Testimonial-quoteMarkColor-blue);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-blue)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--blue-purple___HZ6wp{--brand-Testimonial-quoteMarkColor-start:var(--brand-Testimonial-quoteMarkColor-blue-purple-start);--brand-Testimonial-quoteMarkColor-end:var(--brand-Testimonial-quoteMarkColor-blue-purple-end);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-blue-purple)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--coral___zCLpT{--brand-Testimonial-quoteMarkColor:var(--brand-Testimonial-quoteMarkColor-coral);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-coral)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--green___zmlvZ{--brand-Testimonial-quoteMarkColor:var(--brand-Testimonial-quoteMarkColor-green);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-green)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--green-blue___Q0gxM{--brand-Testimonial-quoteMarkColor-start:var(--brand-Testimonial-quoteMarkColor-green-blue-start);--brand-Testimonial-quoteMarkColor-end:var(--brand-Testimonial-quoteMarkColor-green-blue-end);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-green-blue)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--gray___18cS4{--brand-Testimonial-quoteMarkColor:var(--brand-Testimonial-quoteMarkColor-gray);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-gray)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--indigo___GDdwu{--brand-Testimonial-quoteMarkColor:var(--brand-Testimonial-quoteMarkColor-indigo);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-indigo)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--lemon___SbBQ4{--brand-Testimonial-quoteMarkColor:var(--brand-Testimonial-quoteMarkColor-lemon);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-lemon)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--lime___jzEWj{--brand-Testimonial-quoteMarkColor:var(--brand-Testimonial-quoteMarkColor-lime);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-lime)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--orange___Mk2Ix{--brand-Testimonial-quoteMarkColor:var(--brand-Testimonial-quoteMarkColor-orange);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-orange)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--pink____Y7MC{--brand-Testimonial-quoteMarkColor:var(--brand-Testimonial-quoteMarkColor-pink);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-pink)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--pink-blue___VQftN{--brand-Testimonial-quoteMarkColor-start:var(--brand-Testimonial-quoteMarkColor-pink-blue-start);--brand-Testimonial-quoteMarkColor-end:var(--brand-Testimonial-quoteMarkColor-pink-blue-end);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-pink-blue)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--purple___TMw0P{--brand-Testimonial-quoteMarkColor:var(--brand-Testimonial-quoteMarkColor-purple);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-purple)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--purple-red___f1bgK{--brand-Testimonial-quoteMarkColor-start:var(--brand-Testimonial-quoteMarkColor-purple-red-start);--brand-Testimonial-quoteMarkColor-end:var(--brand-Testimonial-quoteMarkColor-purple-red-end);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-purple-red)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--red___rbO_z{--brand-Testimonial-quoteMarkColor:var(--brand-Testimonial-quoteMarkColor-red);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-red)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--red-orange___pm_dh{--brand-Testimonial-quoteMarkColor-start:var(--brand-Testimonial-quoteMarkColor-red-orange-start);--brand-Testimonial-quoteMarkColor-end:var(--brand-Testimonial-quoteMarkColor-red-orange-end);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-red-orange)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--teal___S_1eT{--brand-Testimonial-quoteMarkColor:var(--brand-Testimonial-quoteMarkColor-teal);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-teal)}.Primer_Brand__Testimonial-module__Testimonial__quoteMark--yellow___W8v__{--brand-Testimonial-quoteMarkColor:var(--brand-Testimonial-quoteMarkColor-yellow);--brand-Testimonial-quoteMarkBackground:var(--brand-Testimonial-quoteMarkBackground-yellow)}

package/esm/Testimonial/Testimonial.module.js

@@ -1,4 +1,4 @@
-import './Testimonial.module-DRCosU_J.css';var e = {
+import './Testimonial.module-BEBpUSD7.css';var e = {
 	Testimonial: "Primer_Brand__Testimonial-module__Testimonial___kxB6R",
 	"Testimonial--variant-subtle": "Primer_Brand__Testimonial-module__Testimonial--variant-subtle___rmjBe",
 	"Testimonial--variant-default": "Primer_Brand__Testimonial-module__Testimonial--variant-default___uNm5S",
@@ -9,6 +9,7 @@ import './Testimonial.module-DRCosU_J.css';var e = {
 	Testimonial__quoteMarkGlyph: "Primer_Brand__Testimonial-module__Testimonial__quoteMarkGlyph___1eZ5L",
 	"Testimonial-quote": "Primer_Brand__Testimonial-module__Testimonial-quote___xbxri",
 	Testimonial__media: "Primer_Brand__Testimonial-module__Testimonial__media___rvn7k",
+	"Testimonial-logo-image": "Primer_Brand__Testimonial-module__Testimonial-logo-image___rpGVd",
 	"Testimonial-caption": "Primer_Brand__Testimonial-module__Testimonial-caption___8c_KF",
 	"Testimonial-avatar": "Primer_Brand__Testimonial-module__Testimonial-avatar___kWqMQ",
 	"Testimonial-from": "Primer_Brand__Testimonial-module__Testimonial-from___XLpqj",

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--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-48);\n}\n\n@media screen and (min-width: 48rem) {\n  .Testimonial--variant-expressive {\n    flex-direction: row;\n    align-items: flex-end;\n    gap: var(--base-size-96);\n  }\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-24);\n  flex: 1 1 0;\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-24);\n  margin-block-start: 0;\n  flex: 0 0 auto;\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-24);\n  width: 100%;\n  gap: var(--base-size-8);\n}\n\n@media screen and (min-width: 48rem) {\n  .Testimonial--variant-expressive .Testimonial__media {\n    min-width: 240px;\n    max-width: 320px;\n  }\n}\n\n.Testimonial--variant-expressive .Testimonial-from {\n  display: flex;\n  align-items: center;\n  gap: var(--base-size-8);\n  font-family: var(--brand-fontStack-monospace);\n  font-weight: var(--base-text-weight-medium);\n  text-transform: uppercase;\n  letter-spacing: 0.01em;\n}\n\n.Testimonial--variant-expressive .Testimonial-from::before {\n  content: '';\n  display: inline-block;\n  width: 9px;\n  height: 14px;\n  background-color: var(--testimonial-accent-color, var(--brand-Testimonial-quoteMarkColor-default));\n  flex-shrink: 0;\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  line-height: var(--brand-text-lineHeight-400);\n  font-weight: var(--base-text-weight-normal);\n}\n\n.Testimonial-link {\n  margin-top: var(--base-size-8);\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-48);\n}\n\n@media screen and (min-width: 48rem) {\n  .Testimonial--variant-expressive {\n    flex-direction: row;\n    align-items: flex-end;\n    gap: var(--base-size-96);\n  }\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-24);\n  flex: 1 1 0;\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-24);\n  margin-block-start: 0;\n  flex: 0 0 auto;\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-24);\n  width: 100%;\n  gap: var(--base-size-8);\n}\n\n@media screen and (min-width: 48rem) {\n  .Testimonial--variant-expressive .Testimonial__media {\n    min-width: 240px;\n    max-width: 320px;\n  }\n}\n\n.Testimonial--variant-expressive .Testimonial-from {\n  display: flex;\n  align-items: center;\n  gap: var(--base-size-8);\n  font-family: var(--brand-fontStack-monospace);\n  font-weight: var(--base-text-weight-medium);\n  text-transform: uppercase;\n  letter-spacing: 0.01em;\n}\n\n.Testimonial--variant-expressive .Testimonial-from::before {\n  content: '';\n  display: inline-block;\n  width: 9px;\n  height: 14px;\n  background-color: var(--testimonial-accent-color, var(--brand-Testimonial-quoteMarkColor-default));\n  flex-shrink: 0;\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  line-height: var(--brand-text-lineHeight-400);\n  font-weight: var(--base-text-weight-normal);\n}\n\n.Testimonial-link {\n  margin-top: var(--base-size-8);\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/VideoPlayer/VideoPlayer.js

@@ -1,8 +1,8 @@
 import e from "../node_modules/clsx/dist/clsx.js";
 import { useProvidedRefOrCreate as t } from "../hooks/useRef.js";
 import { Text as n } from "../Text/Text.js";
-import { PlayIcon as r } from "./components/PlayIcon/PlayIcon.js";
-import { MarkGithubIcon as i } from "../node_modules/@primer/octicons-react/dist/index.esm.js";
+import { MarkGithubIcon as r } from "../node_modules/@primer/octicons-react/dist/index.esm.js";
+import { PlayIcon as i } from "./components/PlayIcon/PlayIcon.js";
 import a from "./VideoPlayer.module.js";
 import { VideoContext as o, VideoProvider as s, useVideo as c } from "./hooks/useVideo.js";
 import { Captions as l } from "./components/Captions/Captions.js";
@@ -19,7 +19,7 @@ import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/compon
 import { forwardRef as v, useCallback as y, useContext as b } from "react";
 import { jsx as x, jsxs as S } from "react/jsx-runtime";
 //#region src/VideoPlayer/VideoPlayer.tsx
-var C = v(({ title: o, visuallyHiddenTitle: s, showBranding: v = !0, children: b, className: C, showPlayPauseButton: T = !0, showSeekControl: E = !0, showCCButton: D = !0, showMuteButton: O = !0, showVolumeControl: k = !0, showFullScreenButton: A = !0, playIcon: j = () => /* @__PURE__ */ x(r, { className: a.VideoPlayer__playButton }), ...M }, N) => {
+var C = v(({ title: o, visuallyHiddenTitle: s, showBranding: v = !0, children: b, className: C, showPlayPauseButton: T = !0, showSeekControl: E = !0, showCCButton: D = !0, showMuteButton: O = !0, showVolumeControl: k = !0, showFullScreenButton: A = !0, playIcon: j = () => /* @__PURE__ */ x(i, { className: a.VideoPlayer__playButton }), ...M }, N) => {
 	let { ccEnabled: P, fullscreenRef: F, isPlaying: I, ref: L, togglePlaying: R } = c(), z = t(y((e) => {
 		w(N, e);
 	}, [N])), B = y((e) => {
@@ -46,7 +46,7 @@ var C = v(({ title: o, visuallyHiddenTitle: s, showBranding: v = !0, children: b
 					}),
 					v || !s ? /* @__PURE__ */ S("div", {
 						className: e(a.VideoPlayer__title, I && a["VideoPlayer__title--hidden"]),
-						children: [v && /* @__PURE__ */ x(i, {
+						children: [v && /* @__PURE__ */ x(r, {
 							size: 40,
 							"aria-label": "GitHub logo"
 						}), !s && /* @__PURE__ */ x(n, {

package/esm/css/reset-CSgu34_f.css

@@ -0,0 +1 @@
+*,:before,:after{box-sizing:border-box}body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{margin:0}ul[role=list],ol[role=list]{list-style:none}html,html:focus-within{scroll-behavior:smooth}@media (prefers-reduced-motion:reduce){html,html:focus-within{scroll-behavior:auto}}body{min-height:100vh;line-height:1.5}a:not([class]){-webkit-text-decoration-skip:ink;-webkit-text-decoration-skip-ink:auto;text-decoration-skip-ink:auto}img,picture{max-width:100%}input,button,textarea,select{font:inherit}

package/esm/css/stylesheets.js

@@ -1,4 +1,4 @@
-import './utilities-BivJncWo.css';import './reset-PKNIUbst.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/typography/typography-responsive-D6GwCHec.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/size/breakpoints-DV9ZFHGu.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/size/border-B0NqqX5b.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/colors/global-with-modes-tpdcmiok.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/base/typography/typography-CAC6sGQ3.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/base/size/size-6EfgMG7y.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/base/colors/color-scales-with-modes-BVk7bh0Y.css';/* empty css      */
+import './utilities-BivJncWo.css';import './reset-CSgu34_f.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/typography/typography-responsive-D6GwCHec.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/size/breakpoints-DV9ZFHGu.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/size/border-B0NqqX5b.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/colors/global-with-modes-Bdet_nBw.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/base/typography/typography-CAC6sGQ3.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/base/size/size-6EfgMG7y.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/base/colors/color-scales-with-modes-BVk7bh0Y.css';/* empty css      */
 /* empty css                                                                                         */
 /* empty css                                                                    */
 /* empty css                                                                                */

package/esm/forms/Checkbox/Checkbox.d.ts

@@ -1,6 +1,7 @@
 import React, { type InputHTMLAttributes } from 'react';
 import type { BaseProps } from '../../component-helpers';
 import type { FormValidationStatus } from '../form-types';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css';
 export type CheckboxProps = {
     /**
      * Apply indeterminate visual appearance to the checkbox

package/esm/forms/Checkbox/Checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/forms/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA0B,KAAK,mBAAmB,EAAoB,MAAM,OAAO,CAAA;AAIjG,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAA;AACtD,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,eAAe,CAAA;AAMvD,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;IACvC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,GAAG,OAAO,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAC,GACzD,SAAS,CAAC,gBAAgB,CAAC,CAAA;AAsF7B,eAAO,MAAM,QAAQ,4FAA+B,CAAA"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/forms/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA0B,KAAK,mBAAmB,EAAoB,MAAM,OAAO,CAAA;AAIjG,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAA;AACtD,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,eAAe,CAAA;AAGvD,OAAO,2GAA2G,CAAA;AAIlH,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;IACvC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,GAAG,OAAO,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAC,GACzD,SAAS,CAAC,gBAAgB,CAAC,CAAA;AAsF7B,eAAO,MAAM,QAAQ,4FAA+B,CAAA"}

package/esm/forms/Checkbox/Checkbox.js

@@ -2,6 +2,7 @@ import e from "../../node_modules/clsx/dist/clsx.js";
 import { useId as t } from "../../hooks/useId.js";
 import { useProvidedRefOrCreate as n } from "../../hooks/useRef.js";
 import r from "../../hooks/useIsomorphicLayoutEffect.js";
+import '../../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes-C05YPRXo.css';/* empty css                                                                                                        */
 import i from "./Checkbox.module.js";
 import { forwardRef as a, useCallback as o } from "react";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";

package/esm/forms/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":[],"sources":["../../../src/forms/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, {forwardRef, useCallback, type InputHTMLAttributes, type ReactElement} from 'react'\nimport {clsx} from 'clsx'\nimport {useId} from '../../hooks/useId'\n\nimport type {BaseProps} from '../../component-helpers'\nimport type {FormValidationStatus} from '../form-types'\nimport useLayoutEffect from '../../hooks/useIsomorphicLayoutEffect'\n\nimport styles from './Checkbox.module.css'\nimport {useProvidedRefOrCreate} from '../../hooks/useRef'\n\nexport type CheckboxProps = {\n  /**\n   * Apply indeterminate visual appearance to the checkbox\n   */\n  indeterminate?: boolean\n  /**\n   * Apply inactive visual appearance to the checkbox\n   */\n  disabled?: boolean\n  /**\n   * Indicates whether the checkbox must be checked\n   */\n  required?: boolean\n  /**\n   * Only used to inform ARIA attributes. Individual checkboxes do not have validation styles.\n   */\n  validationStatus?: FormValidationStatus\n  /**\n   * A unique value that is never shown to the user.\n   * Used during form submission and to identify which checkbox inputs are selected\n   */\n  value?: string\n} & Exclude<InputHTMLAttributes<HTMLInputElement>, 'value'> &\n  BaseProps<HTMLInputElement>\n\nconst CheckboxInternal = (\n  {\n    checked,\n    className,\n    indeterminate,\n    disabled,\n    id,\n    onChange,\n    required,\n    validationStatus,\n    value,\n    ...rest\n  }: CheckboxProps,\n  ref,\n): ReactElement => {\n  const inputRef = useProvidedRefOrCreate<HTMLInputElement | null>(ref || null)\n  const uniqueId = useId(id)\n\n  useLayoutEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.indeterminate = indeterminate || false\n    }\n  }, [indeterminate, checked, inputRef])\n\n  const onClick = useCallback(() => {\n    if (!disabled && inputRef.current) {\n      inputRef.current.click()\n    }\n  }, [disabled, inputRef])\n\n  return (\n    <span className={styles['Checkbox-wrapper']}>\n      <input\n        id={uniqueId}\n        aria-invalid={validationStatus === 'error' ? 'true' : 'false'}\n        aria-required={required ? 'true' : 'false'}\n        aria-checked={indeterminate ? 'mixed' : checked}\n        checked={indeterminate ? false : checked}\n        className={clsx(styles['Checkbox-input'])}\n        disabled={disabled}\n        name={value}\n        onChange={onChange}\n        ref={inputRef}\n        required={required}\n        type=\"checkbox\"\n        value={value}\n        {...rest}\n      />\n      <span\n        className={clsx(styles['Checkbox'], indeterminate && styles['Checkbox--indeterminate'], className)}\n        onClick={onClick}\n        tabIndex={-1}\n        aria-hidden=\"true\"\n      >\n        {indeterminate ? (\n          <svg\n            className={clsx(styles['Checkbox-checkmark'])}\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 16 16\"\n            width=\"16\"\n            height=\"16\"\n            aria-hidden=\"true\"\n          >\n            <path fillRule=\"evenodd\" d=\"M2 7.75A.75.75 0 012.75 7h10a.75.75 0 010 1.5h-10A.75.75 0 012 7.75z\"></path>\n          </svg>\n        ) : (\n          <svg viewBox=\"0 0 100 100\" className={clsx(styles['Checkbox-checkmark'])} aria-hidden=\"true\">\n            <path\n              className={clsx(styles['Checkbox-checkmark-path'])}\n              fill=\"none\"\n              stroke=\"#000\"\n              strokeWidth=\"13\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeMiterlimit=\"10\"\n              d=\"M12.1 52.1l24.4 24.4 53-53\"\n            />\n          </svg>\n        )}\n      </span>\n    </span>\n  )\n}\n\nexport const Checkbox = forwardRef(CheckboxInternal)\n"],"mappings":";;;;;;;AAwHA,IAAa,IAAW,GAnFtB,EACE,YACA,cACA,kBACA,aACA,OACA,aACA,aACA,qBACA,UACA,GAAG,KAEL,MACiB;CACjB,IAAM,IAAW,EAAgD,KAAO,KAAK,EACvE,IAAW,EAAM,EAAG;AAE1B,SAAsB;AACpB,EAAI,EAAS,YACX,EAAS,QAAQ,gBAAgB,KAAiB;IAEnD;EAAC;EAAe;EAAS;EAAS,CAAC;CAEtC,IAAM,IAAU,QAAkB;AAChC,EAAI,CAAC,KAAY,EAAS,WACxB,EAAS,QAAQ,OAAO;IAEzB,CAAC,GAAU,EAAS,CAAC;AAExB,QACE,kBAAC,QAAD;EAAM,WAAW,EAAO;YAAxB,CACE,kBAAC,SAAD;GACE,IAAI;GACJ,gBAAc,MAAqB,UAAU,SAAS;GACtD,iBAAe,IAAW,SAAS;GACnC,gBAAc,IAAgB,UAAU;GACxC,SAAS,IAAgB,KAAQ;GACjC,WAAW,EAAK,EAAO,kBAAkB;GAC/B;GACV,MAAM;GACI;GACV,KAAK;GACK;GACV,MAAK;GACE;GACP,GAAI;GACJ,CAAA,EACF,kBAAC,QAAD;GACE,WAAW,EAAK,EAAO,UAAa,KAAiB,EAAO,4BAA4B,EAAU;GACzF;GACT,UAAU;GACV,eAAY;aAEX,IACC,kBAAC,OAAD;IACE,WAAW,EAAK,EAAO,sBAAsB;IAC7C,OAAM;IACN,SAAQ;IACR,OAAM;IACN,QAAO;IACP,eAAY;cAEZ,kBAAC,QAAD;KAAM,UAAS;KAAU,GAAE;KAA8E,CAAA;IACrG,CAAA,GAEN,kBAAC,OAAD;IAAK,SAAQ;IAAc,WAAW,EAAK,EAAO,sBAAsB;IAAE,eAAY;cACpF,kBAAC,QAAD;KACE,WAAW,EAAK,EAAO,2BAA2B;KAClD,MAAK;KACL,QAAO;KACP,aAAY;KACZ,eAAc;KACd,gBAAe;KACf,kBAAiB;KACjB,GAAE;KACF,CAAA;IACE,CAAA;GAEH,CAAA,CACF;;EAIyC"}
+{"version":3,"file":"Checkbox.js","names":[],"sources":["../../../src/forms/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, {forwardRef, useCallback, type InputHTMLAttributes, type ReactElement} from 'react'\nimport {clsx} from 'clsx'\nimport {useId} from '../../hooks/useId'\n\nimport type {BaseProps} from '../../component-helpers'\nimport type {FormValidationStatus} from '../form-types'\nimport useLayoutEffect from '../../hooks/useIsomorphicLayoutEffect'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css'\nimport styles from './Checkbox.module.css'\nimport {useProvidedRefOrCreate} from '../../hooks/useRef'\n\nexport type CheckboxProps = {\n  /**\n   * Apply indeterminate visual appearance to the checkbox\n   */\n  indeterminate?: boolean\n  /**\n   * Apply inactive visual appearance to the checkbox\n   */\n  disabled?: boolean\n  /**\n   * Indicates whether the checkbox must be checked\n   */\n  required?: boolean\n  /**\n   * Only used to inform ARIA attributes. Individual checkboxes do not have validation styles.\n   */\n  validationStatus?: FormValidationStatus\n  /**\n   * A unique value that is never shown to the user.\n   * Used during form submission and to identify which checkbox inputs are selected\n   */\n  value?: string\n} & Exclude<InputHTMLAttributes<HTMLInputElement>, 'value'> &\n  BaseProps<HTMLInputElement>\n\nconst CheckboxInternal = (\n  {\n    checked,\n    className,\n    indeterminate,\n    disabled,\n    id,\n    onChange,\n    required,\n    validationStatus,\n    value,\n    ...rest\n  }: CheckboxProps,\n  ref,\n): ReactElement => {\n  const inputRef = useProvidedRefOrCreate<HTMLInputElement | null>(ref || null)\n  const uniqueId = useId(id)\n\n  useLayoutEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.indeterminate = indeterminate || false\n    }\n  }, [indeterminate, checked, inputRef])\n\n  const onClick = useCallback(() => {\n    if (!disabled && inputRef.current) {\n      inputRef.current.click()\n    }\n  }, [disabled, inputRef])\n\n  return (\n    <span className={styles['Checkbox-wrapper']}>\n      <input\n        id={uniqueId}\n        aria-invalid={validationStatus === 'error' ? 'true' : 'false'}\n        aria-required={required ? 'true' : 'false'}\n        aria-checked={indeterminate ? 'mixed' : checked}\n        checked={indeterminate ? false : checked}\n        className={clsx(styles['Checkbox-input'])}\n        disabled={disabled}\n        name={value}\n        onChange={onChange}\n        ref={inputRef}\n        required={required}\n        type=\"checkbox\"\n        value={value}\n        {...rest}\n      />\n      <span\n        className={clsx(styles['Checkbox'], indeterminate && styles['Checkbox--indeterminate'], className)}\n        onClick={onClick}\n        tabIndex={-1}\n        aria-hidden=\"true\"\n      >\n        {indeterminate ? (\n          <svg\n            className={clsx(styles['Checkbox-checkmark'])}\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 16 16\"\n            width=\"16\"\n            height=\"16\"\n            aria-hidden=\"true\"\n          >\n            <path fillRule=\"evenodd\" d=\"M2 7.75A.75.75 0 012.75 7h10a.75.75 0 010 1.5h-10A.75.75 0 012 7.75z\"></path>\n          </svg>\n        ) : (\n          <svg viewBox=\"0 0 100 100\" className={clsx(styles['Checkbox-checkmark'])} aria-hidden=\"true\">\n            <path\n              className={clsx(styles['Checkbox-checkmark-path'])}\n              fill=\"none\"\n              stroke=\"#000\"\n              strokeWidth=\"13\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeMiterlimit=\"10\"\n              d=\"M12.1 52.1l24.4 24.4 53-53\"\n            />\n          </svg>\n        )}\n      </span>\n    </span>\n  )\n}\n\nexport const Checkbox = forwardRef(CheckboxInternal)\n"],"mappings":";;;;;;;;AAyHA,IAAa,IAAW,GAnFtB,EACE,YACA,cACA,kBACA,aACA,OACA,aACA,aACA,qBACA,UACA,GAAG,KAEL,MACiB;CACjB,IAAM,IAAW,EAAgD,KAAO,KAAK,EACvE,IAAW,EAAM,EAAG;AAE1B,SAAsB;AACpB,EAAI,EAAS,YACX,EAAS,QAAQ,gBAAgB,KAAiB;IAEnD;EAAC;EAAe;EAAS;EAAS,CAAC;CAEtC,IAAM,IAAU,QAAkB;AAChC,EAAI,CAAC,KAAY,EAAS,WACxB,EAAS,QAAQ,OAAO;IAEzB,CAAC,GAAU,EAAS,CAAC;AAExB,QACE,kBAAC,QAAD;EAAM,WAAW,EAAO;YAAxB,CACE,kBAAC,SAAD;GACE,IAAI;GACJ,gBAAc,MAAqB,UAAU,SAAS;GACtD,iBAAe,IAAW,SAAS;GACnC,gBAAc,IAAgB,UAAU;GACxC,SAAS,IAAgB,KAAQ;GACjC,WAAW,EAAK,EAAO,kBAAkB;GAC/B;GACV,MAAM;GACI;GACV,KAAK;GACK;GACV,MAAK;GACE;GACP,GAAI;GACJ,CAAA,EACF,kBAAC,QAAD;GACE,WAAW,EAAK,EAAO,UAAa,KAAiB,EAAO,4BAA4B,EAAU;GACzF;GACT,UAAU;GACV,eAAY;aAEX,IACC,kBAAC,OAAD;IACE,WAAW,EAAK,EAAO,sBAAsB;IAC7C,OAAM;IACN,SAAQ;IACR,OAAM;IACN,QAAO;IACP,eAAY;cAEZ,kBAAC,QAAD;KAAM,UAAS;KAAU,GAAE;KAA8E,CAAA;IACrG,CAAA,GAEN,kBAAC,OAAD;IAAK,SAAQ;IAAc,WAAW,EAAK,EAAO,sBAAsB;IAAE,eAAY;cACpF,kBAAC,QAAD;KACE,WAAW,EAAK,EAAO,2BAA2B;KAClD,MAAK;KACL,QAAO;KACP,aAAY;KACZ,eAAc;KACd,gBAAe;KACf,kBAAiB;KACjB,GAAE;KACF,CAAA;IACE,CAAA;GAEH,CAAA,CACF;;EAIyC"}

package/esm/forms/FormControl/FormControl.d.ts

@@ -1,6 +1,7 @@
 import { PropsWithChildren } from 'react';
 import type { BaseProps } from '../../component-helpers';
 import type { FormValidationStatus, FormInputSizes } from '../';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css';
 export type FormControlProps = BaseProps<HTMLElement> & {
     /**
      * Apply a decorative border to the form control.

package/esm/forms/FormControl/FormControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormControl.d.ts","sourceRoot":"","sources":["../../../src/forms/FormControl/FormControl.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAK9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAA;AACtD,OAAO,KAAK,EAAC,oBAAoB,EAAE,cAAc,EAAC,MAAM,KAAK,CAAA;AAW7D,MAAM,MAAM,gBAAgB,GAAG,SAAS,CAAC,WAAW,CAAC,GAAG;IACtD;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;OAIG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB;;OAEG;IACH,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;CACxC,CAAA;AA2JD,KAAK,qBAAqB,GAAG;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;IACvC,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB,GAAG,SAAS,CAAC,gBAAgB,CAAC,CAAA;AA4C/B,KAAK,0BAA0B,GAAG;IAChC,QAAQ,EAAE,MAAM,CAAA;IAChB,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;CACxC,GAAG,SAAS,CAAC,eAAe,CAAC,CAAA;AA8B9B,KAAK,oBAAoB,GAAG,iBAAiB,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,CAAA;AAMzE;;;GAGG;AACH,eAAO,MAAM,WAAW,kGAnOrB,iBAAiB,CAAC,gBAAgB,CAAC;gIAwJnC,iBAAiB,CAAC,qBAAqB,CAAC;sEAqCuC,0BAA0B;mCA8B7D,oBAAoB;CAYjE,CAAA"}
+{"version":3,"file":"FormControl.d.ts","sourceRoot":"","sources":["../../../src/forms/FormControl/FormControl.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAK9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAA;AACtD,OAAO,KAAK,EAAC,oBAAoB,EAAE,cAAc,EAAC,MAAM,KAAK,CAAA;AAS7D,OAAO,2GAA2G,CAAA;AAGlH,MAAM,MAAM,gBAAgB,GAAG,SAAS,CAAC,WAAW,CAAC,GAAG;IACtD;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;OAIG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB;;OAEG;IACH,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;CACxC,CAAA;AA2JD,KAAK,qBAAqB,GAAG;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;IACvC,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB,GAAG,SAAS,CAAC,gBAAgB,CAAC,CAAA;AA4C/B,KAAK,0BAA0B,GAAG;IAChC,QAAQ,EAAE,MAAM,CAAA;IAChB,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;CACxC,GAAG,SAAS,CAAC,eAAe,CAAC,CAAA;AA8B9B,KAAK,oBAAoB,GAAG,iBAAiB,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,CAAA;AAMzE;;;GAGG;AACH,eAAO,MAAM,WAAW,kGAnOrB,iBAAiB,CAAC,gBAAgB,CAAC;gIAwJnC,iBAAiB,CAAC,qBAAqB,CAAC;sEAqCuC,0BAA0B;mCA8B7D,oBAAoB;CAYjE,CAAA"}

package/esm/forms/FormControl/FormControl.js

@@ -2,6 +2,7 @@ import e from "../../node_modules/clsx/dist/clsx.js";
 import { useId as t } from "../../hooks/useId.js";
 import { Text as n } from "../../Text/Text.js";
 import { AlertFillIcon as r, CheckCircleFillIcon as i } from "../../node_modules/@primer/octicons-react/dist/index.esm.js";
+import '../../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes-C05YPRXo.css';/* empty css                                                                                                        */
 import { Checkbox as a } from "../Checkbox/Checkbox.js";
 import { Textarea as o } from "../Textarea/Textarea.js";
 import { TextInput as s } from "../TextInput/TextInput.js";

package/esm/forms/FormControl/FormControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormControl.js","names":[],"sources":["../../../src/forms/FormControl/FormControl.tsx"],"sourcesContent":["import React, {PropsWithChildren} from 'react'\nimport {useId} from '../../hooks/useId'\nimport {clsx} from 'clsx'\nimport {AlertFillIcon, CheckCircleFillIcon} from '@primer/octicons-react'\n\nimport type {BaseProps} from '../../component-helpers'\nimport type {FormValidationStatus, FormInputSizes} from '../'\n\nimport {Checkbox} from '../Checkbox'\nimport {Select} from '../Select'\nimport {TextInput} from '../TextInput'\nimport {Textarea} from '../Textarea'\nimport {Radio} from '../Radio'\nimport {Text} from '../../Text'\n\nimport styles from './FormControl.module.css'\n\nexport type FormControlProps = BaseProps<HTMLElement> & {\n  /**\n   * Apply a decorative border to the form control.\n   */\n  hasBorder?: boolean\n  /**\n   * Applies full width styling.\n   */\n  fullWidth?: boolean\n  /**\n   * A unique identifier for the form control.\n   * This is used to associate the form control with its associated label.\n   * If an id is not provided, a unique id will be generated.\n   */\n  id?: string\n  /**\n   * Applies required styling to the label and input.\n   */\n  required?: boolean\n  /**\n   * Alternative sizes for inputs and labels.\n   */\n  size?: FormInputSizes\n  /**\n   * Provides contextual validation feedback to all children, showing relevant messaging where applicable.\n   */\n  validationStatus?: FormValidationStatus\n}\n\n/**\n * The Checkbox and the Radio components both use the trick of using a <label> to render the visual control,\n * and visually hiding the <input>. This means that, when you add a FormControl.Label alongside your\n * Checkbox/Radio, the <input> technically has two <label> elements associated with it.\n * That doesn't appear to be a problem (it's valid HTML and NVDA announces it correctly) but it does annoy\n * our Storybook Axe tests because they only seem to look at one of the labels.\n * To fix this, we recommend that the FormControl.Label always appears before the Checkbox/Radio in the DOM,\n * even though it visually appears after the Checkbox/Radio, as this keeps Storybook Axe happy.\n */\n\nconst Root = ({\n  children,\n  className,\n  hasBorder,\n  fullWidth,\n  id,\n  required,\n  size = 'medium',\n  validationStatus,\n  ...rest\n}: PropsWithChildren<FormControlProps>) => {\n  const uniqueId = useId(id)\n  const childrenArr = React.Children.toArray(children)\n\n  const isInlineControl = childrenArr.some(\n    child => React.isValidElement(child) && (child.type === Checkbox || child.type === Radio),\n  )\n\n  const containsHint = childrenArr.some(child => React.isValidElement(child) && child.type === FormControlHint)\n  const containsValidation = childrenArr.some(\n    child => React.isValidElement(child) && child.type === FormControlValidation,\n  )\n\n  return (\n    <section\n      id={`FormControl--${uniqueId}`}\n      className={clsx(\n        styles.FormControl,\n        fullWidth && styles[`FormControl--fullWidth`],\n        isInlineControl && styles['FormControl--checkbox'],\n        hasBorder && styles['FormControl--border'],\n        className,\n      )}\n      {...rest}\n    >\n      {React.Children.map(children, child => {\n        if (!React.isValidElement(child)) return child\n\n        const describedBy =\n          [containsHint && `${uniqueId}-hint`, containsValidation && `${uniqueId}-validation`]\n            .filter(Boolean)\n            .join(' ') || undefined\n\n        if (child.type === TextInput) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof TextInput>>\n          return React.cloneElement(element, {\n            className: clsx(element.props.className),\n            id: uniqueId,\n            name: element.props.name || uniqueId,\n            required: element.props.required || required,\n            validationStatus: element.props.validationStatus || validationStatus,\n            fullWidth,\n            size,\n            'aria-describedby': describedBy,\n          })\n        }\n\n        if (child.type === Textarea) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof Textarea>>\n          return React.cloneElement(element, {\n            className: clsx(element.props.className),\n            id: uniqueId,\n            name: element.props.name || uniqueId,\n            required: element.props.required || required,\n            validationStatus: element.props.validationStatus || validationStatus,\n            fullWidth,\n            size,\n            'aria-describedby': describedBy,\n          })\n        }\n\n        if (child.type === Select) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof Select>>\n          return React.cloneElement(element, {\n            className: clsx(element.props.className),\n            id: uniqueId,\n            name: element.props.name || uniqueId,\n            required: element.props.required || required,\n            validationStatus: element.props.validationStatus || validationStatus,\n            fullWidth,\n            size,\n            'aria-describedby': describedBy,\n          })\n        }\n\n        if (child.type === Checkbox) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof Checkbox>>\n          return React.cloneElement(element, {\n            className: clsx(element.props.className, styles['FormControl-control--checkbox']),\n            id: uniqueId,\n            name: element.props.name || uniqueId,\n            required: element.props.required || required,\n            validationStatus: element.props.validationStatus || validationStatus,\n            'aria-describedby': describedBy,\n          })\n        }\n\n        if (child.type === Radio) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof Radio>>\n          return React.cloneElement(element, {\n            className: clsx(isInlineControl && styles['FormControl-control--radio'], element.props.className),\n            id: uniqueId,\n            name: element.props.name,\n            required: element.props.required || required,\n            'aria-describedby': describedBy,\n          })\n        }\n\n        if (child.type === FormControlLabel) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof FormControlLabel>>\n          return React.cloneElement(element, {\n            className: clsx(isInlineControl && styles['FormControl-label--checkbox'], element.props.className),\n            htmlFor: uniqueId,\n            children: element.props.children,\n            required,\n            validationStatus,\n            size,\n            showRequiredIndicator: isInlineControl ? false : element.props.showRequiredIndicator,\n          })\n        }\n\n        if (child.type === FormControlValidation) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof FormControlValidation>>\n          return React.cloneElement(element, {\n            className: clsx(isInlineControl && styles['FormControl-validation-checkbox'], element.props.className),\n            validationStatus,\n            id: `${uniqueId}-validation`,\n          })\n        }\n\n        if (child.type === FormControlHint) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof FormControlHint>>\n          return React.cloneElement(element, {\n            id: `${uniqueId}-hint`,\n          })\n        }\n\n        return child\n      })}\n    </section>\n  )\n}\n\ntype FormControlLabelProps = {\n  htmlFor?: string\n  required?: boolean\n  showRequiredIndicator?: boolean\n  size?: FormInputSizes\n  validationStatus?: FormValidationStatus\n  visuallyHidden?: boolean\n} & BaseProps<HTMLLabelElement>\n\nconst FormControlLabel = ({\n  children,\n  className,\n  htmlFor,\n  required,\n  showRequiredIndicator = true,\n  size = 'medium',\n  validationStatus,\n  visuallyHidden,\n  ...rest\n}: PropsWithChildren<FormControlLabelProps>) => {\n  return (\n    <label\n      htmlFor={htmlFor}\n      className={clsx(\n        styles['FormControl-label'],\n        validationStatus && styles[`FormControl-label--${validationStatus}`],\n        styles[`FormControl-label--${size}`],\n        visuallyHidden && styles['FormControl-label--visually-hidden'],\n        className,\n      )}\n      {...rest}\n    >\n      {React.Children.map(children, child => {\n        if (React.isValidElement<FormControlHintProps>(child) && child.type === FormControlHint) {\n          return React.cloneElement(child, {\n            className: clsx(styles['FormControl--visible'], child.props.className),\n          })\n        }\n        return child\n      })}\n\n      {required && showRequiredIndicator && (\n        <span className={styles['FormControl-label-required']} aria-hidden>\n          {' '}\n          *\n        </span>\n      )}\n    </label>\n  )\n}\n\ntype FormControlValidationProps = {\n  children: string\n  validationStatus?: FormValidationStatus\n} & BaseProps<HTMLSpanElement>\n\nconst FormControlValidation = ({children, validationStatus, className, ...props}: FormControlValidationProps) => {\n  return (\n    <Text\n      as=\"span\"\n      size=\"100\"\n      className={clsx(\n        styles['FormControl-validation'],\n        validationStatus && styles['FormControl-validation--animate-in'],\n        validationStatus && styles[`FormControl-validation--${validationStatus}`],\n        className,\n      )}\n      {...props}\n    >\n      {validationStatus === 'error' && (\n        <span className={styles['FormControl-validation-error-icon']}>\n          <AlertFillIcon />\n        </span>\n      )}\n      {validationStatus === 'success' && (\n        <span className={styles['FormControl-validation-success-icon']}>\n          <CheckCircleFillIcon />\n        </span>\n      )}\n      {children}\n    </Text>\n  )\n}\n\ntype FormControlHintProps = PropsWithChildren<BaseProps<HTMLSpanElement>>\n\nconst FormControlHint = ({className, ...rest}: FormControlHintProps) => {\n  return <Text as=\"span\" size=\"100\" variant=\"muted\" className={clsx(styles['FormControl-hint'], className)} {...rest} />\n}\n\n/**\n * FormControl\n * {@link https://primer.style/brand/components/FormControl/ See usage examples}.\n */\nexport const FormControl = Object.assign(Root, {\n  Label: FormControlLabel,\n  Validation: FormControlValidation,\n  Hint: FormControlHint,\n})\n"],"mappings":"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"}
+{"version":3,"file":"FormControl.js","names":[],"sources":["../../../src/forms/FormControl/FormControl.tsx"],"sourcesContent":["import React, {PropsWithChildren} from 'react'\nimport {useId} from '../../hooks/useId'\nimport {clsx} from 'clsx'\nimport {AlertFillIcon, CheckCircleFillIcon} from '@primer/octicons-react'\n\nimport type {BaseProps} from '../../component-helpers'\nimport type {FormValidationStatus, FormInputSizes} from '../'\n\nimport {Checkbox} from '../Checkbox'\nimport {Select} from '../Select'\nimport {TextInput} from '../TextInput'\nimport {Textarea} from '../Textarea'\nimport {Radio} from '../Radio'\nimport {Text} from '../../Text'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css'\nimport styles from './FormControl.module.css'\n\nexport type FormControlProps = BaseProps<HTMLElement> & {\n  /**\n   * Apply a decorative border to the form control.\n   */\n  hasBorder?: boolean\n  /**\n   * Applies full width styling.\n   */\n  fullWidth?: boolean\n  /**\n   * A unique identifier for the form control.\n   * This is used to associate the form control with its associated label.\n   * If an id is not provided, a unique id will be generated.\n   */\n  id?: string\n  /**\n   * Applies required styling to the label and input.\n   */\n  required?: boolean\n  /**\n   * Alternative sizes for inputs and labels.\n   */\n  size?: FormInputSizes\n  /**\n   * Provides contextual validation feedback to all children, showing relevant messaging where applicable.\n   */\n  validationStatus?: FormValidationStatus\n}\n\n/**\n * The Checkbox and the Radio components both use the trick of using a <label> to render the visual control,\n * and visually hiding the <input>. This means that, when you add a FormControl.Label alongside your\n * Checkbox/Radio, the <input> technically has two <label> elements associated with it.\n * That doesn't appear to be a problem (it's valid HTML and NVDA announces it correctly) but it does annoy\n * our Storybook Axe tests because they only seem to look at one of the labels.\n * To fix this, we recommend that the FormControl.Label always appears before the Checkbox/Radio in the DOM,\n * even though it visually appears after the Checkbox/Radio, as this keeps Storybook Axe happy.\n */\n\nconst Root = ({\n  children,\n  className,\n  hasBorder,\n  fullWidth,\n  id,\n  required,\n  size = 'medium',\n  validationStatus,\n  ...rest\n}: PropsWithChildren<FormControlProps>) => {\n  const uniqueId = useId(id)\n  const childrenArr = React.Children.toArray(children)\n\n  const isInlineControl = childrenArr.some(\n    child => React.isValidElement(child) && (child.type === Checkbox || child.type === Radio),\n  )\n\n  const containsHint = childrenArr.some(child => React.isValidElement(child) && child.type === FormControlHint)\n  const containsValidation = childrenArr.some(\n    child => React.isValidElement(child) && child.type === FormControlValidation,\n  )\n\n  return (\n    <section\n      id={`FormControl--${uniqueId}`}\n      className={clsx(\n        styles.FormControl,\n        fullWidth && styles[`FormControl--fullWidth`],\n        isInlineControl && styles['FormControl--checkbox'],\n        hasBorder && styles['FormControl--border'],\n        className,\n      )}\n      {...rest}\n    >\n      {React.Children.map(children, child => {\n        if (!React.isValidElement(child)) return child\n\n        const describedBy =\n          [containsHint && `${uniqueId}-hint`, containsValidation && `${uniqueId}-validation`]\n            .filter(Boolean)\n            .join(' ') || undefined\n\n        if (child.type === TextInput) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof TextInput>>\n          return React.cloneElement(element, {\n            className: clsx(element.props.className),\n            id: uniqueId,\n            name: element.props.name || uniqueId,\n            required: element.props.required || required,\n            validationStatus: element.props.validationStatus || validationStatus,\n            fullWidth,\n            size,\n            'aria-describedby': describedBy,\n          })\n        }\n\n        if (child.type === Textarea) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof Textarea>>\n          return React.cloneElement(element, {\n            className: clsx(element.props.className),\n            id: uniqueId,\n            name: element.props.name || uniqueId,\n            required: element.props.required || required,\n            validationStatus: element.props.validationStatus || validationStatus,\n            fullWidth,\n            size,\n            'aria-describedby': describedBy,\n          })\n        }\n\n        if (child.type === Select) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof Select>>\n          return React.cloneElement(element, {\n            className: clsx(element.props.className),\n            id: uniqueId,\n            name: element.props.name || uniqueId,\n            required: element.props.required || required,\n            validationStatus: element.props.validationStatus || validationStatus,\n            fullWidth,\n            size,\n            'aria-describedby': describedBy,\n          })\n        }\n\n        if (child.type === Checkbox) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof Checkbox>>\n          return React.cloneElement(element, {\n            className: clsx(element.props.className, styles['FormControl-control--checkbox']),\n            id: uniqueId,\n            name: element.props.name || uniqueId,\n            required: element.props.required || required,\n            validationStatus: element.props.validationStatus || validationStatus,\n            'aria-describedby': describedBy,\n          })\n        }\n\n        if (child.type === Radio) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof Radio>>\n          return React.cloneElement(element, {\n            className: clsx(isInlineControl && styles['FormControl-control--radio'], element.props.className),\n            id: uniqueId,\n            name: element.props.name,\n            required: element.props.required || required,\n            'aria-describedby': describedBy,\n          })\n        }\n\n        if (child.type === FormControlLabel) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof FormControlLabel>>\n          return React.cloneElement(element, {\n            className: clsx(isInlineControl && styles['FormControl-label--checkbox'], element.props.className),\n            htmlFor: uniqueId,\n            children: element.props.children,\n            required,\n            validationStatus,\n            size,\n            showRequiredIndicator: isInlineControl ? false : element.props.showRequiredIndicator,\n          })\n        }\n\n        if (child.type === FormControlValidation) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof FormControlValidation>>\n          return React.cloneElement(element, {\n            className: clsx(isInlineControl && styles['FormControl-validation-checkbox'], element.props.className),\n            validationStatus,\n            id: `${uniqueId}-validation`,\n          })\n        }\n\n        if (child.type === FormControlHint) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof FormControlHint>>\n          return React.cloneElement(element, {\n            id: `${uniqueId}-hint`,\n          })\n        }\n\n        return child\n      })}\n    </section>\n  )\n}\n\ntype FormControlLabelProps = {\n  htmlFor?: string\n  required?: boolean\n  showRequiredIndicator?: boolean\n  size?: FormInputSizes\n  validationStatus?: FormValidationStatus\n  visuallyHidden?: boolean\n} & BaseProps<HTMLLabelElement>\n\nconst FormControlLabel = ({\n  children,\n  className,\n  htmlFor,\n  required,\n  showRequiredIndicator = true,\n  size = 'medium',\n  validationStatus,\n  visuallyHidden,\n  ...rest\n}: PropsWithChildren<FormControlLabelProps>) => {\n  return (\n    <label\n      htmlFor={htmlFor}\n      className={clsx(\n        styles['FormControl-label'],\n        validationStatus && styles[`FormControl-label--${validationStatus}`],\n        styles[`FormControl-label--${size}`],\n        visuallyHidden && styles['FormControl-label--visually-hidden'],\n        className,\n      )}\n      {...rest}\n    >\n      {React.Children.map(children, child => {\n        if (React.isValidElement<FormControlHintProps>(child) && child.type === FormControlHint) {\n          return React.cloneElement(child, {\n            className: clsx(styles['FormControl--visible'], child.props.className),\n          })\n        }\n        return child\n      })}\n\n      {required && showRequiredIndicator && (\n        <span className={styles['FormControl-label-required']} aria-hidden>\n          {' '}\n          *\n        </span>\n      )}\n    </label>\n  )\n}\n\ntype FormControlValidationProps = {\n  children: string\n  validationStatus?: FormValidationStatus\n} & BaseProps<HTMLSpanElement>\n\nconst FormControlValidation = ({children, validationStatus, className, ...props}: FormControlValidationProps) => {\n  return (\n    <Text\n      as=\"span\"\n      size=\"100\"\n      className={clsx(\n        styles['FormControl-validation'],\n        validationStatus && styles['FormControl-validation--animate-in'],\n        validationStatus && styles[`FormControl-validation--${validationStatus}`],\n        className,\n      )}\n      {...props}\n    >\n      {validationStatus === 'error' && (\n        <span className={styles['FormControl-validation-error-icon']}>\n          <AlertFillIcon />\n        </span>\n      )}\n      {validationStatus === 'success' && (\n        <span className={styles['FormControl-validation-success-icon']}>\n          <CheckCircleFillIcon />\n        </span>\n      )}\n      {children}\n    </Text>\n  )\n}\n\ntype FormControlHintProps = PropsWithChildren<BaseProps<HTMLSpanElement>>\n\nconst FormControlHint = ({className, ...rest}: FormControlHintProps) => {\n  return <Text as=\"span\" size=\"100\" variant=\"muted\" className={clsx(styles['FormControl-hint'], className)} {...rest} />\n}\n\n/**\n * FormControl\n * {@link https://primer.style/brand/components/FormControl/ See usage examples}.\n */\nexport const FormControl = Object.assign(Root, {\n  Label: FormControlLabel,\n  Validation: FormControlValidation,\n  Hint: FormControlHint,\n})\n"],"mappings":"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"}

package/esm/forms/Radio/Radio.d.ts

@@ -1,5 +1,6 @@
 import React, { type InputHTMLAttributes } from 'react';
 import type { BaseProps } from '../../component-helpers';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css';
 export type RadioProps = {
     /**
      * Apply inactive visual appearance to the Radio

package/esm/forms/Radio/Radio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/forms/Radio/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA0B,KAAK,mBAAmB,EAAoB,MAAM,OAAO,CAAA;AAKjG,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAA;AAItD,MAAM,MAAM,UAAU,GAAG;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,GAAG,OAAO,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAC,GACzD,SAAS,CAAC,gBAAgB,CAAC,CAAA;AAsC7B,eAAO,MAAM,KAAK,yFAA4B,CAAA"}
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/forms/Radio/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA0B,KAAK,mBAAmB,EAAoB,MAAM,OAAO,CAAA;AAKjG,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAA;AAEtD,OAAO,2GAA2G,CAAA;AAGlH,MAAM,MAAM,UAAU,GAAG;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,GAAG,OAAO,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAC,GACzD,SAAS,CAAC,gBAAgB,CAAC,CAAA;AAsC7B,eAAO,MAAM,KAAK,yFAA4B,CAAA"}

package/esm/forms/Radio/Radio.js

@@ -1,6 +1,7 @@
 import e from "../../node_modules/clsx/dist/clsx.js";
 import { useId as t } from "../../hooks/useId.js";
 import { useProvidedRefOrCreate as n } from "../../hooks/useRef.js";
+import '../../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes-C05YPRXo.css';/* empty css                                                                                                        */
 import r from "./Radio.module.js";
 import { forwardRef as i, useCallback as a } from "react";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";

package/esm/forms/Radio/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","names":[],"sources":["../../../src/forms/Radio/Radio.tsx"],"sourcesContent":["import React, {forwardRef, useCallback, type InputHTMLAttributes, type ReactElement} from 'react'\nimport {clsx} from 'clsx'\nimport {useId} from '../../hooks/useId'\nimport {useProvidedRefOrCreate} from '../../hooks/useRef'\n\nimport type {BaseProps} from '../../component-helpers'\n\nimport styles from './Radio.module.css'\n\nexport type RadioProps = {\n  /**\n   * Apply inactive visual appearance to the Radio\n   */\n  disabled?: boolean\n  /**\n   * Indicates whether the Radio must be checked\n   */\n  required?: boolean\n  /**\n   * A unique value that is never shown to the user.\n   * Used during form submission and to identify which Radio inputs are selected\n   */\n  value?: string\n} & Exclude<InputHTMLAttributes<HTMLInputElement>, 'value'> &\n  BaseProps<HTMLInputElement>\n\nconst RadioInternal = (\n  {checked, className, disabled, id, onChange, required, value, ...rest}: RadioProps,\n  ref,\n): ReactElement => {\n  const inputRef = useProvidedRefOrCreate<HTMLInputElement | null>(ref || null)\n  const uniqueId = useId(id)\n\n  const onClick = useCallback(() => {\n    if (!disabled && inputRef.current) {\n      inputRef.current.click()\n    }\n  }, [disabled, inputRef])\n\n  return (\n    <span className={styles['Radio-wrapper']}>\n      <input\n        id={uniqueId}\n        aria-checked={checked ? 'true' : 'false'}\n        checked={checked}\n        className={clsx(styles['Radio-input'])}\n        disabled={disabled}\n        name={value}\n        onChange={onChange}\n        ref={inputRef}\n        required={required}\n        type=\"radio\"\n        value={value}\n        {...rest}\n      />\n      <span className={clsx(styles.Radio, className)} onClick={onClick} tabIndex={-1} aria-hidden=\"true\">\n        <span className={styles['Radio-dot']} />\n      </span>\n    </span>\n  )\n}\n\nexport const Radio = forwardRef(RadioInternal)\n"],"mappings":";;;;;;AA8DA,IAAa,IAAQ,GAnCnB,EAAC,YAAS,cAAW,aAAU,OAAI,aAAU,aAAU,UAAO,GAAG,KACjE,MACiB;CACjB,IAAM,IAAW,EAAgD,KAAO,KAAK,EACvE,IAAW,EAAM,EAAG,EAEpB,IAAU,QAAkB;AAChC,EAAI,CAAC,KAAY,EAAS,WACxB,EAAS,QAAQ,OAAO;IAEzB,CAAC,GAAU,EAAS,CAAC;AAExB,QACE,kBAAC,QAAD;EAAM,WAAW,EAAO;YAAxB,CACE,kBAAC,SAAD;GACE,IAAI;GACJ,gBAAc,IAAU,SAAS;GACxB;GACT,WAAW,EAAK,EAAO,eAAe;GAC5B;GACV,MAAM;GACI;GACV,KAAK;GACK;GACV,MAAK;GACE;GACP,GAAI;GACJ,CAAA,EACF,kBAAC,QAAD;GAAM,WAAW,EAAK,EAAO,OAAO,EAAU;GAAW;GAAS,UAAU;GAAI,eAAY;aAC1F,kBAAC,QAAD,EAAM,WAAW,EAAO,cAAgB,CAAA;GACnC,CAAA,CACF;;EAImC"}
+{"version":3,"file":"Radio.js","names":[],"sources":["../../../src/forms/Radio/Radio.tsx"],"sourcesContent":["import React, {forwardRef, useCallback, type InputHTMLAttributes, type ReactElement} from 'react'\nimport {clsx} from 'clsx'\nimport {useId} from '../../hooks/useId'\nimport {useProvidedRefOrCreate} from '../../hooks/useRef'\n\nimport type {BaseProps} from '../../component-helpers'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css'\nimport styles from './Radio.module.css'\n\nexport type RadioProps = {\n  /**\n   * Apply inactive visual appearance to the Radio\n   */\n  disabled?: boolean\n  /**\n   * Indicates whether the Radio must be checked\n   */\n  required?: boolean\n  /**\n   * A unique value that is never shown to the user.\n   * Used during form submission and to identify which Radio inputs are selected\n   */\n  value?: string\n} & Exclude<InputHTMLAttributes<HTMLInputElement>, 'value'> &\n  BaseProps<HTMLInputElement>\n\nconst RadioInternal = (\n  {checked, className, disabled, id, onChange, required, value, ...rest}: RadioProps,\n  ref,\n): ReactElement => {\n  const inputRef = useProvidedRefOrCreate<HTMLInputElement | null>(ref || null)\n  const uniqueId = useId(id)\n\n  const onClick = useCallback(() => {\n    if (!disabled && inputRef.current) {\n      inputRef.current.click()\n    }\n  }, [disabled, inputRef])\n\n  return (\n    <span className={styles['Radio-wrapper']}>\n      <input\n        id={uniqueId}\n        aria-checked={checked ? 'true' : 'false'}\n        checked={checked}\n        className={clsx(styles['Radio-input'])}\n        disabled={disabled}\n        name={value}\n        onChange={onChange}\n        ref={inputRef}\n        required={required}\n        type=\"radio\"\n        value={value}\n        {...rest}\n      />\n      <span className={clsx(styles.Radio, className)} onClick={onClick} tabIndex={-1} aria-hidden=\"true\">\n        <span className={styles['Radio-dot']} />\n      </span>\n    </span>\n  )\n}\n\nexport const Radio = forwardRef(RadioInternal)\n"],"mappings":";;;;;;;AA+DA,IAAa,IAAQ,GAnCnB,EAAC,YAAS,cAAW,aAAU,OAAI,aAAU,aAAU,UAAO,GAAG,KACjE,MACiB;CACjB,IAAM,IAAW,EAAgD,KAAO,KAAK,EACvE,IAAW,EAAM,EAAG,EAEpB,IAAU,QAAkB;AAChC,EAAI,CAAC,KAAY,EAAS,WACxB,EAAS,QAAQ,OAAO;IAEzB,CAAC,GAAU,EAAS,CAAC;AAExB,QACE,kBAAC,QAAD;EAAM,WAAW,EAAO;YAAxB,CACE,kBAAC,SAAD;GACE,IAAI;GACJ,gBAAc,IAAU,SAAS;GACxB;GACT,WAAW,EAAK,EAAO,eAAe;GAC5B;GACV,MAAM;GACI;GACV,KAAK;GACK;GACV,MAAK;GACE;GACP,GAAI;GACJ,CAAA,EACF,kBAAC,QAAD;GAAM,WAAW,EAAK,EAAO,OAAO,EAAU;GAAW;GAAS,UAAU;GAAI,eAAY;aAC1F,kBAAC,QAAD,EAAM,WAAW,EAAO,cAAgB,CAAA;GACnC,CAAA,CACF;;EAImC"}

package/esm/forms/Select/Select.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { BaseProps } from '../../component-helpers';
 import type { FormInputSizes, FormValidationStatus } from '../form-types';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css';
 export type SelectProps = {
     /**
      * Applies full width styling.

package/esm/forms/Select/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/forms/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAGvC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAA;AACtD,OAAO,KAAK,EAAC,cAAc,EAAE,oBAAoB,EAAC,MAAM,eAAe,CAAA;AAIvE,MAAM,MAAM,WAAW,GAAG;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;OAEG;IACH,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;CACxC,GAAG,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC,GAC5D,SAAS,CAAC,iBAAiB,CAAC,CAAA;AAmD9B,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAA;CACd,GAAG,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC,CAAA;AAU/D,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;CACd,GAAG,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,SAAS,CAAC,mBAAmB,CAAC,CAAC,CAAA;AAUjE;;GAEG;AACH,eAAO,MAAM,MAAM;2CA9ByB,WAAW;6CAmBT,aAAa;CAczD,CAAA"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/forms/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAGvC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAA;AACtD,OAAO,KAAK,EAAC,cAAc,EAAE,oBAAoB,EAAC,MAAM,eAAe,CAAA;AAEvE,OAAO,2GAA2G,CAAA;AAGlH,MAAM,MAAM,WAAW,GAAG;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;OAEG;IACH,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;CACxC,GAAG,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC,GAC5D,SAAS,CAAC,iBAAiB,CAAC,CAAA;AAmD9B,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAA;CACd,GAAG,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC,CAAA;AAU/D,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;CACd,GAAG,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,SAAS,CAAC,mBAAmB,CAAC,CAAC,CAAA;AAUjE;;GAEG;AACH,eAAO,MAAM,MAAM;2CA9ByB,WAAW;6CAmBT,aAAa;CAczD,CAAA"}

package/esm/forms/Select/Select.js

@@ -1,4 +1,5 @@
 import e from "../../node_modules/clsx/dist/clsx.js";
+import '../../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes-C05YPRXo.css';/* empty css                                                                                                        */
 import t from "./Select.module.js";
 import { forwardRef as n } from "react";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";

package/esm/forms/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","names":[],"sources":["../../../src/forms/Select/Select.tsx"],"sourcesContent":["import React, {forwardRef} from 'react'\nimport {clsx} from 'clsx'\n\nimport type {BaseProps} from '../../component-helpers'\nimport type {FormInputSizes, FormValidationStatus} from '../form-types'\n\nimport styles from './Select.module.css'\n\nexport type SelectProps = {\n  /**\n   * Applies full width styling.\n   */\n  fullWidth?: boolean\n  /**\n   * Applies a required attribute to the input\n   */\n  required?: boolean\n  /**\n   * Applies alternative sizing to the input\n   */\n  size?: FormInputSizes\n  /**\n   * Placeholder text to display when no value is selected\n   */\n  placeholder?: string\n  /**\n   *\n   */\n  validationStatus?: FormValidationStatus\n} & Omit<React.InputHTMLAttributes<HTMLSelectElement>, 'size'> &\n  BaseProps<HTMLSelectElement>\n\nconst _SelectRoot = (\n  {\n    children,\n    className,\n    disabled,\n    fullWidth = false,\n    placeholder,\n    size = 'medium',\n    validationStatus,\n    ...rest\n  }: SelectProps,\n  ref,\n) => {\n  return (\n    <span\n      className={clsx(\n        styles['Select-wrapper'],\n        styles[`Select-wrapper--${size}`],\n        fullWidth && styles['Select-wrapper--fullWidth'],\n        validationStatus && styles[`Select--${validationStatus}`],\n        disabled && styles[`Select-wrapper--disabled`],\n      )}\n    >\n      <select\n        aria-invalid={validationStatus === 'error'}\n        className={clsx(\n          styles.Select,\n          styles[`Select--${size}`],\n          'Select',\n          fullWidth && styles['Select--fullWidth'],\n          className,\n        )}\n        disabled={disabled}\n        ref={ref}\n        {...rest}\n      >\n        {placeholder && (\n          <option value=\"\" disabled={disabled}>\n            {placeholder}\n          </option>\n        )}\n        {children}\n      </select>\n    </span>\n  )\n}\n\nconst SelectRoot = forwardRef(_SelectRoot)\n\nexport type OptionProps = {\n  value: string\n} & React.PropsWithChildren<React.HTMLProps<HTMLOptionElement>>\n\nconst Option = ({children, value, ...rest}: OptionProps) => {\n  return (\n    <option value={value} {...rest}>\n      {children}\n    </option>\n  )\n}\n\nexport type OptGroupProps = {\n  /**\n   * Specifies that an option-group should be disabled\n   */\n  disabled?: string\n  /**\n   * Specifies a label for an option-group\n   */\n  label: string\n} & React.PropsWithChildren<React.HTMLProps<HTMLOptGroupElement>>\n\nconst OptGroup = ({children, label, ...rest}: OptGroupProps) => {\n  return (\n    <optgroup label={label} {...rest}>\n      {children}\n    </optgroup>\n  )\n}\n\n/**\n * Select\n */\nexport const Select = Object.assign(SelectRoot, {\n  Option,\n  OptGroup,\n})\n"],"mappings":";;;;AA+EA,IAAM,IAAa,GA9CjB,EACE,aACA,cACA,aACA,eAAY,IACZ,gBACA,UAAO,UACP,qBACA,GAAG,KAEL,MAGE,kBAAC,QAAD;CACE,WAAW,EACT,EAAO,mBACP,EAAO,mBAAmB,MAC1B,KAAa,EAAO,8BACpB,KAAoB,EAAO,WAAW,MACtC,KAAY,EAAO,4BACpB;WAED,kBAAC,UAAD;EACE,gBAAc,MAAqB;EACnC,WAAW,EACT,EAAO,QACP,EAAO,WAAW,MAClB,UACA,KAAa,EAAO,sBACpB,EACD;EACS;EACL;EACL,GAAI;YAXN,CAaG,KACC,kBAAC,UAAD;GAAQ,OAAM;GAAa;aACxB;GACM,CAAA,EAEV,EACM;;CACJ,CAAA,CAI+B,EAoC7B,IAAS,OAAO,OAAO,GAAY;CAC9C,SA/Bc,EAAC,aAAU,UAAO,GAAG,QAEjC,kBAAC,UAAD;EAAe;EAAO,GAAI;EACvB;EACM,CAAA;CA4BX,WAbgB,EAAC,aAAU,UAAO,GAAG,QAEnC,kBAAC,YAAD;EAAiB;EAAO,GAAI;EACzB;EACQ,CAAA;CAUd,CAAC"}
+{"version":3,"file":"Select.js","names":[],"sources":["../../../src/forms/Select/Select.tsx"],"sourcesContent":["import React, {forwardRef} from 'react'\nimport {clsx} from 'clsx'\n\nimport type {BaseProps} from '../../component-helpers'\nimport type {FormInputSizes, FormValidationStatus} from '../form-types'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css'\nimport styles from './Select.module.css'\n\nexport type SelectProps = {\n  /**\n   * Applies full width styling.\n   */\n  fullWidth?: boolean\n  /**\n   * Applies a required attribute to the input\n   */\n  required?: boolean\n  /**\n   * Applies alternative sizing to the input\n   */\n  size?: FormInputSizes\n  /**\n   * Placeholder text to display when no value is selected\n   */\n  placeholder?: string\n  /**\n   *\n   */\n  validationStatus?: FormValidationStatus\n} & Omit<React.InputHTMLAttributes<HTMLSelectElement>, 'size'> &\n  BaseProps<HTMLSelectElement>\n\nconst _SelectRoot = (\n  {\n    children,\n    className,\n    disabled,\n    fullWidth = false,\n    placeholder,\n    size = 'medium',\n    validationStatus,\n    ...rest\n  }: SelectProps,\n  ref,\n) => {\n  return (\n    <span\n      className={clsx(\n        styles['Select-wrapper'],\n        styles[`Select-wrapper--${size}`],\n        fullWidth && styles['Select-wrapper--fullWidth'],\n        validationStatus && styles[`Select--${validationStatus}`],\n        disabled && styles[`Select-wrapper--disabled`],\n      )}\n    >\n      <select\n        aria-invalid={validationStatus === 'error'}\n        className={clsx(\n          styles.Select,\n          styles[`Select--${size}`],\n          'Select',\n          fullWidth && styles['Select--fullWidth'],\n          className,\n        )}\n        disabled={disabled}\n        ref={ref}\n        {...rest}\n      >\n        {placeholder && (\n          <option value=\"\" disabled={disabled}>\n            {placeholder}\n          </option>\n        )}\n        {children}\n      </select>\n    </span>\n  )\n}\n\nconst SelectRoot = forwardRef(_SelectRoot)\n\nexport type OptionProps = {\n  value: string\n} & React.PropsWithChildren<React.HTMLProps<HTMLOptionElement>>\n\nconst Option = ({children, value, ...rest}: OptionProps) => {\n  return (\n    <option value={value} {...rest}>\n      {children}\n    </option>\n  )\n}\n\nexport type OptGroupProps = {\n  /**\n   * Specifies that an option-group should be disabled\n   */\n  disabled?: string\n  /**\n   * Specifies a label for an option-group\n   */\n  label: string\n} & React.PropsWithChildren<React.HTMLProps<HTMLOptGroupElement>>\n\nconst OptGroup = ({children, label, ...rest}: OptGroupProps) => {\n  return (\n    <optgroup label={label} {...rest}>\n      {children}\n    </optgroup>\n  )\n}\n\n/**\n * Select\n */\nexport const Select = Object.assign(SelectRoot, {\n  Option,\n  OptGroup,\n})\n"],"mappings":";;;;;AAgFA,IAAM,IAAa,GA9CjB,EACE,aACA,cACA,aACA,eAAY,IACZ,gBACA,UAAO,UACP,qBACA,GAAG,KAEL,MAGE,kBAAC,QAAD;CACE,WAAW,EACT,EAAO,mBACP,EAAO,mBAAmB,MAC1B,KAAa,EAAO,8BACpB,KAAoB,EAAO,WAAW,MACtC,KAAY,EAAO,4BACpB;WAED,kBAAC,UAAD;EACE,gBAAc,MAAqB;EACnC,WAAW,EACT,EAAO,QACP,EAAO,WAAW,MAClB,UACA,KAAa,EAAO,sBACpB,EACD;EACS;EACL;EACL,GAAI;YAXN,CAaG,KACC,kBAAC,UAAD;GAAQ,OAAM;GAAa;aACxB;GACM,CAAA,EAEV,EACM;;CACJ,CAAA,CAI+B,EAoC7B,IAAS,OAAO,OAAO,GAAY;CAC9C,SA/Bc,EAAC,aAAU,UAAO,GAAG,QAEjC,kBAAC,UAAD;EAAe;EAAO,GAAI;EACvB;EACM,CAAA;CA4BX,WAbgB,EAAC,aAAU,UAAO,GAAG,QAEnC,kBAAC,YAAD;EAAiB;EAAO,GAAI;EACzB;EACQ,CAAA;CAUd,CAAC"}

package/esm/forms/TextInput/TextInput.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { BaseProps } from '../../component-helpers';
 import type { FormInputSizes, FormValidationStatus } from '../form-types';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css';
 import type { Icon } from '@primer/octicons-react';
 type VisualType = React.ReactElement | React.ReactNode | Icon;
 export type TextInputProps = {

package/esm/forms/TextInput/TextInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../src/forms/TextInput/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAIhD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAA;AACtD,OAAO,KAAK,EAAC,cAAc,EAAE,oBAAoB,EAAC,MAAM,eAAe,CAAA;AAIvE,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,wBAAwB,CAAA;AAEhD,KAAK,UAAU,GAAG,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,SAAS,GAAG,IAAI,CAAA;AAE7D,MAAM,MAAM,cAAc,GAAG;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;OAEG;IACH,aAAa,CAAC,EAAE,UAAU,CAAA;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;OAEG;IACH,cAAc,CAAC,EAAE,UAAU,CAAA;IAC3B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,GAAG,gBAAgB,CAAA;IAC/G;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;CACxC,GAAG,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,GACpE,SAAS,CAAC,gBAAgB,CAAC,CAAA;AAkK7B,eAAO,MAAM,SAAS,6FAAgC,CAAA"}
+{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../src/forms/TextInput/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAIhD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAA;AACtD,OAAO,KAAK,EAAC,cAAc,EAAE,oBAAoB,EAAC,MAAM,eAAe,CAAA;AAGvE,OAAO,2GAA2G,CAAA;AAElH,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,wBAAwB,CAAA;AAEhD,KAAK,UAAU,GAAG,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,SAAS,GAAG,IAAI,CAAA;AAE7D,MAAM,MAAM,cAAc,GAAG;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;OAEG;IACH,aAAa,CAAC,EAAE,UAAU,CAAA;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;OAEG;IACH,cAAc,CAAC,EAAE,UAAU,CAAA;IAC3B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,GAAG,gBAAgB,CAAA;IAC/G;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;CACxC,GAAG,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,GACpE,SAAS,CAAC,gBAAgB,CAAC,CAAA;AAkK7B,eAAO,MAAM,SAAS,6FAAgC,CAAA"}

package/esm/forms/TextInput/TextInput.js

@@ -1,6 +1,7 @@
 import e from "../../node_modules/clsx/dist/clsx.js";
 import { useId as t } from "../../hooks/useId.js";
 import { Text as n } from "../../Text/Text.js";
+import '../../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes-C05YPRXo.css';/* empty css                                                                                                        */
 import r from "./TextInput.module.js";
 import i, { forwardRef as a, useMemo as o } from "react";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";

package/esm/forms/TextInput/TextInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.js","names":[],"sources":["../../../src/forms/TextInput/TextInput.tsx"],"sourcesContent":["import React, {forwardRef, useMemo} from 'react'\nimport {clsx} from 'clsx'\nimport {useId} from '../../hooks/useId'\n\nimport type {BaseProps} from '../../component-helpers'\nimport type {FormInputSizes, FormValidationStatus} from '../form-types'\nimport {Text} from '../../Text'\n\nimport styles from './TextInput.module.css'\nimport type {Icon} from '@primer/octicons-react'\n\ntype VisualType = React.ReactElement | React.ReactNode | Icon\n\nexport type TextInputProps = {\n  /**\n   * Applies full width styling.\n   */\n  fullWidth?: boolean\n  /**\n   * Removes border\n   */\n  invisible?: boolean\n  /**\n   * Applies non-interactive text to start of input.\n   */\n  leadingText?: string\n  /**\n   * Applies non-interactive iconography to start of input.\n   */\n  leadingVisual?: VisualType\n  /**\n   * Applies monospace styling.\n   */\n  monospace?: boolean\n  /**\n   * Applies alternative sizing to the input\n   */\n  size?: FormInputSizes\n  /**\n   * Applies non-interactive text to end of input.\n   */\n  trailingText?: string\n  /**\n   * Applies non-interactive iconography to end of input.\n   */\n  trailingVisual?: VisualType\n  /**\n   * Constrains the input type to single line inputs.\n   */\n  type?: 'text' | 'number' | 'email' | 'password' | 'search' | 'tel' | 'url' | 'date' | 'time' | 'datetime-local'\n  /**\n   * Applies a required attribute to the input\n   */\n  required?: boolean\n  /**\n   *\n   */\n  validationStatus?: FormValidationStatus\n} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> &\n  BaseProps<HTMLInputElement>\n\nconst TextInputInternal = (\n  {\n    className,\n    disabled,\n    fullWidth = false,\n    invisible = false,\n    leadingText,\n    leadingVisual: LeadingVisual,\n    monospace,\n    placeholder,\n    size = 'medium',\n    trailingText,\n    trailingVisual: TrailingVisual,\n    validationStatus,\n    ...rest\n  }: TextInputProps,\n  ref,\n) => {\n  const uniqueId = useId()\n\n  const showLeadingText = leadingText && !LeadingVisual\n  const showLeadingVisual = LeadingVisual && !leadingText\n  const showTrailingText = trailingText && !TrailingVisual\n  const showTrailingVisual = TrailingVisual && !trailingText\n\n  const leadingTextId = `${uniqueId}-leading-text`\n  const leadingVisualId = `${uniqueId}-leading-visual`\n  const trailingVisualId = `${uniqueId}-trailing-visual`\n  const trailingTextId = `${uniqueId}-trailing-text`\n\n  const describedBy = useMemo(() => {\n    const elements = [\n      {condition: showLeadingText, id: leadingTextId},\n      {condition: showLeadingVisual, id: leadingVisualId},\n      {condition: showTrailingVisual, id: trailingVisualId},\n      {condition: showTrailingText, id: trailingTextId},\n    ]\n\n    return elements\n      .filter(({condition}) => condition)\n      .map(({id}) => id)\n      .join(' ')\n  }, [\n    showLeadingText,\n    showLeadingVisual,\n    showTrailingVisual,\n    showTrailingText,\n    leadingTextId,\n    leadingVisualId,\n    trailingVisualId,\n    trailingTextId,\n  ])\n\n  return (\n    <span\n      className={clsx(\n        styles['TextInput-wrapper'],\n        styles[`TextInput-wrapper--${size}`],\n        fullWidth && styles['TextInput-wrapper--fullWidth'],\n        invisible && styles['TextInput-wrapper--invisible'],\n        disabled && styles['TextInput-wrapper--disabled'],\n        monospace && styles['TextInput-wrapper--monospace'],\n        validationStatus && styles[`TextInput-wrapper--${validationStatus}`],\n      )}\n    >\n      {showLeadingText && (\n        <span\n          className={clsx(\n            styles['TextInput-leading-text'],\n            styles[`TextInput-leading-text--${size}`],\n            disabled && styles['TextInput-leading-text--disabled'],\n            validationStatus && styles[`TextInput-leading-text--${validationStatus}`],\n          )}\n        >\n          <Text\n            size={size === 'large' ? '200' : '100'}\n            as=\"span\"\n            className={clsx(styles['TextInput-leading-text-inner'], styles[`TextInput-leading-text-inner--${size}`])}\n            id={leadingTextId}\n          >\n            {leadingText}\n          </Text>\n        </span>\n      )}\n      {showLeadingVisual && (\n        <span className={clsx(styles['TextInput-leading-visual'], styles[`TextInput-leading-visual--${size}`])}>\n          {LeadingVisual &&\n          React.isValidElement<{className?: string; width?: number; height?: number; id?: string}>(LeadingVisual)\n            ? React.cloneElement(LeadingVisual, {\n                className: clsx(\n                  styles['TextInput-leading-visual-icon'],\n                  styles[`TextInput-leading-visual-icon--${size}`],\n                ),\n                width: size === 'large' ? 20 : 16,\n                height: size === 'large' ? 20 : 16,\n                id: leadingVisualId,\n              })\n            : null}\n        </span>\n      )}\n      <input\n        type=\"text\"\n        ref={ref}\n        className={clsx(\n          styles.TextInput,\n          'TextInput',\n          styles[`TextInput--${size}`],\n          fullWidth && styles['TextInput--fullWidth'],\n          LeadingVisual && styles[`TextInput--has-leading-visual--${size}`],\n          TrailingVisual && styles[`TextInput--has-trailing-visual--${size}`],\n          validationStatus && styles[`TextInput--${validationStatus}`],\n          leadingText && !LeadingVisual && styles['TextInput--has-leading-text'],\n          trailingText && !TrailingVisual && styles['TextInput--has-trailing-text'],\n          className,\n        )}\n        placeholder={placeholder}\n        disabled={disabled}\n        aria-invalid={validationStatus === 'error'}\n        aria-describedby={describedBy || undefined}\n        {...rest}\n      />\n      {showTrailingVisual && (\n        <span className={clsx(styles['TextInput-trailing-visual'], styles[`TextInput-trailing-visual--${size}`])}>\n          {TrailingVisual &&\n          React.isValidElement<{className?: string; width?: number; height?: number; id?: string}>(TrailingVisual)\n            ? React.cloneElement(TrailingVisual, {\n                className: clsx(\n                  styles['TextInput-trailing-visual-icon'],\n                  styles[`TextInput-trailing-visual-icon--${size}`],\n                ),\n                width: size === 'large' ? 20 : 16,\n                height: size === 'large' ? 20 : 16,\n                id: trailingVisualId,\n              })\n            : null}\n        </span>\n      )}\n      {showTrailingText && (\n        <span\n          className={clsx(\n            styles['TextInput-trailing-text'],\n            styles[`TextInput-trailing-text--${size}`],\n            disabled && styles['TextInput-trailing-text--disabled'],\n            validationStatus && styles[`TextInput-trailing-text--${validationStatus}`],\n          )}\n        >\n          <Text\n            size={size === 'large' ? '200' : '100'}\n            as=\"span\"\n            className={clsx(styles['TextInput-trailing-text-inner'], styles[`TextInput-trailing-text-inner--${size}`])}\n            id={trailingTextId}\n          >\n            {trailingText}\n          </Text>\n        </span>\n      )}\n    </span>\n  )\n}\n\nexport const TextInput = forwardRef(TextInputInternal)\n\nTextInput.displayName = 'TextInput'\n"],"mappings":"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"}
+{"version":3,"file":"TextInput.js","names":[],"sources":["../../../src/forms/TextInput/TextInput.tsx"],"sourcesContent":["import React, {forwardRef, useMemo} from 'react'\nimport {clsx} from 'clsx'\nimport {useId} from '../../hooks/useId'\n\nimport type {BaseProps} from '../../component-helpers'\nimport type {FormInputSizes, FormValidationStatus} from '../form-types'\nimport {Text} from '../../Text'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css'\nimport styles from './TextInput.module.css'\nimport type {Icon} from '@primer/octicons-react'\n\ntype VisualType = React.ReactElement | React.ReactNode | Icon\n\nexport type TextInputProps = {\n  /**\n   * Applies full width styling.\n   */\n  fullWidth?: boolean\n  /**\n   * Removes border\n   */\n  invisible?: boolean\n  /**\n   * Applies non-interactive text to start of input.\n   */\n  leadingText?: string\n  /**\n   * Applies non-interactive iconography to start of input.\n   */\n  leadingVisual?: VisualType\n  /**\n   * Applies monospace styling.\n   */\n  monospace?: boolean\n  /**\n   * Applies alternative sizing to the input\n   */\n  size?: FormInputSizes\n  /**\n   * Applies non-interactive text to end of input.\n   */\n  trailingText?: string\n  /**\n   * Applies non-interactive iconography to end of input.\n   */\n  trailingVisual?: VisualType\n  /**\n   * Constrains the input type to single line inputs.\n   */\n  type?: 'text' | 'number' | 'email' | 'password' | 'search' | 'tel' | 'url' | 'date' | 'time' | 'datetime-local'\n  /**\n   * Applies a required attribute to the input\n   */\n  required?: boolean\n  /**\n   *\n   */\n  validationStatus?: FormValidationStatus\n} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> &\n  BaseProps<HTMLInputElement>\n\nconst TextInputInternal = (\n  {\n    className,\n    disabled,\n    fullWidth = false,\n    invisible = false,\n    leadingText,\n    leadingVisual: LeadingVisual,\n    monospace,\n    placeholder,\n    size = 'medium',\n    trailingText,\n    trailingVisual: TrailingVisual,\n    validationStatus,\n    ...rest\n  }: TextInputProps,\n  ref,\n) => {\n  const uniqueId = useId()\n\n  const showLeadingText = leadingText && !LeadingVisual\n  const showLeadingVisual = LeadingVisual && !leadingText\n  const showTrailingText = trailingText && !TrailingVisual\n  const showTrailingVisual = TrailingVisual && !trailingText\n\n  const leadingTextId = `${uniqueId}-leading-text`\n  const leadingVisualId = `${uniqueId}-leading-visual`\n  const trailingVisualId = `${uniqueId}-trailing-visual`\n  const trailingTextId = `${uniqueId}-trailing-text`\n\n  const describedBy = useMemo(() => {\n    const elements = [\n      {condition: showLeadingText, id: leadingTextId},\n      {condition: showLeadingVisual, id: leadingVisualId},\n      {condition: showTrailingVisual, id: trailingVisualId},\n      {condition: showTrailingText, id: trailingTextId},\n    ]\n\n    return elements\n      .filter(({condition}) => condition)\n      .map(({id}) => id)\n      .join(' ')\n  }, [\n    showLeadingText,\n    showLeadingVisual,\n    showTrailingVisual,\n    showTrailingText,\n    leadingTextId,\n    leadingVisualId,\n    trailingVisualId,\n    trailingTextId,\n  ])\n\n  return (\n    <span\n      className={clsx(\n        styles['TextInput-wrapper'],\n        styles[`TextInput-wrapper--${size}`],\n        fullWidth && styles['TextInput-wrapper--fullWidth'],\n        invisible && styles['TextInput-wrapper--invisible'],\n        disabled && styles['TextInput-wrapper--disabled'],\n        monospace && styles['TextInput-wrapper--monospace'],\n        validationStatus && styles[`TextInput-wrapper--${validationStatus}`],\n      )}\n    >\n      {showLeadingText && (\n        <span\n          className={clsx(\n            styles['TextInput-leading-text'],\n            styles[`TextInput-leading-text--${size}`],\n            disabled && styles['TextInput-leading-text--disabled'],\n            validationStatus && styles[`TextInput-leading-text--${validationStatus}`],\n          )}\n        >\n          <Text\n            size={size === 'large' ? '200' : '100'}\n            as=\"span\"\n            className={clsx(styles['TextInput-leading-text-inner'], styles[`TextInput-leading-text-inner--${size}`])}\n            id={leadingTextId}\n          >\n            {leadingText}\n          </Text>\n        </span>\n      )}\n      {showLeadingVisual && (\n        <span className={clsx(styles['TextInput-leading-visual'], styles[`TextInput-leading-visual--${size}`])}>\n          {LeadingVisual &&\n          React.isValidElement<{className?: string; width?: number; height?: number; id?: string}>(LeadingVisual)\n            ? React.cloneElement(LeadingVisual, {\n                className: clsx(\n                  styles['TextInput-leading-visual-icon'],\n                  styles[`TextInput-leading-visual-icon--${size}`],\n                ),\n                width: size === 'large' ? 20 : 16,\n                height: size === 'large' ? 20 : 16,\n                id: leadingVisualId,\n              })\n            : null}\n        </span>\n      )}\n      <input\n        type=\"text\"\n        ref={ref}\n        className={clsx(\n          styles.TextInput,\n          'TextInput',\n          styles[`TextInput--${size}`],\n          fullWidth && styles['TextInput--fullWidth'],\n          LeadingVisual && styles[`TextInput--has-leading-visual--${size}`],\n          TrailingVisual && styles[`TextInput--has-trailing-visual--${size}`],\n          validationStatus && styles[`TextInput--${validationStatus}`],\n          leadingText && !LeadingVisual && styles['TextInput--has-leading-text'],\n          trailingText && !TrailingVisual && styles['TextInput--has-trailing-text'],\n          className,\n        )}\n        placeholder={placeholder}\n        disabled={disabled}\n        aria-invalid={validationStatus === 'error'}\n        aria-describedby={describedBy || undefined}\n        {...rest}\n      />\n      {showTrailingVisual && (\n        <span className={clsx(styles['TextInput-trailing-visual'], styles[`TextInput-trailing-visual--${size}`])}>\n          {TrailingVisual &&\n          React.isValidElement<{className?: string; width?: number; height?: number; id?: string}>(TrailingVisual)\n            ? React.cloneElement(TrailingVisual, {\n                className: clsx(\n                  styles['TextInput-trailing-visual-icon'],\n                  styles[`TextInput-trailing-visual-icon--${size}`],\n                ),\n                width: size === 'large' ? 20 : 16,\n                height: size === 'large' ? 20 : 16,\n                id: trailingVisualId,\n              })\n            : null}\n        </span>\n      )}\n      {showTrailingText && (\n        <span\n          className={clsx(\n            styles['TextInput-trailing-text'],\n            styles[`TextInput-trailing-text--${size}`],\n            disabled && styles['TextInput-trailing-text--disabled'],\n            validationStatus && styles[`TextInput-trailing-text--${validationStatus}`],\n          )}\n        >\n          <Text\n            size={size === 'large' ? '200' : '100'}\n            as=\"span\"\n            className={clsx(styles['TextInput-trailing-text-inner'], styles[`TextInput-trailing-text-inner--${size}`])}\n            id={trailingTextId}\n          >\n            {trailingText}\n          </Text>\n        </span>\n      )}\n    </span>\n  )\n}\n\nexport const TextInput = forwardRef(TextInputInternal)\n\nTextInput.displayName = 'TextInput'\n"],"mappings":"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"}

package/esm/forms/Textarea/Textarea.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { BaseProps } from '../../component-helpers';
 import type { FormInputSizes, FormValidationStatus } from '../form-types';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css';
 export declare const DEFAULT_TEXTAREA_ROWS = 7;
 export declare const DEFAULT_TEXTAREA_COLS = 30;
 export declare const DEFAULT_TEXTAREA_RESIZE = "both";

package/esm/forms/Textarea/Textarea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../src/forms/Textarea/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAGvC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAA;AACtD,OAAO,KAAK,EAAC,cAAc,EAAE,oBAAoB,EAAC,MAAM,eAAe,CAAA;AAIvE,eAAO,MAAM,qBAAqB,IAAI,CAAA;AACtC,eAAO,MAAM,qBAAqB,KAAK,CAAA;AACvC,eAAO,MAAM,uBAAuB,SAAS,CAAA;AAE7C,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;IACvC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,YAAY,GAAG,UAAU,CAAA;CACrD,GAAG,IAAI,CAAC,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAAE,MAAM,CAAC,GACjE,SAAS,CAAC,mBAAmB,CAAC,CAAA;AAiEhC,eAAO,MAAM,QAAQ,4FAAwB,CAAA"}
+{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../src/forms/Textarea/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAGvC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAA;AACtD,OAAO,KAAK,EAAC,cAAc,EAAE,oBAAoB,EAAC,MAAM,eAAe,CAAA;AAEvE,OAAO,2GAA2G,CAAA;AAGlH,eAAO,MAAM,qBAAqB,IAAI,CAAA;AACtC,eAAO,MAAM,qBAAqB,KAAK,CAAA;AACvC,eAAO,MAAM,uBAAuB,SAAS,CAAA;AAE7C,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;IACvC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,YAAY,GAAG,UAAU,CAAA;CACrD,GAAG,IAAI,CAAC,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAAE,MAAM,CAAC,GACjE,SAAS,CAAC,mBAAmB,CAAC,CAAA;AAiEhC,eAAO,MAAM,QAAQ,4FAAwB,CAAA"}

package/esm/forms/Textarea/Textarea.js

@@ -1,4 +1,5 @@
 import e from "../../node_modules/clsx/dist/clsx.js";
+import '../../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes-C05YPRXo.css';/* empty css                                                                                                        */
 import t from "./Textarea.module.js";
 import { forwardRef as n } from "react";
 import { jsx as r } from "react/jsx-runtime";