@primer/react-brand 0.74.0 → 0.75.0-rc.89e3cadf

package/esm/animation/AnimationProvider/AnimationProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"AnimationProvider.js","names":[],"sources":["../../../src/animation/AnimationProvider/AnimationProvider.tsx"],"sourcesContent":["import React, {createContext, PropsWithChildren, useEffect, useState} from 'react'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/animation/base.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from '../Animation.module.css'\nimport {useId} from '../../hooks/useId'\n\nexport const AnimationVariants = [\n  'fade-in',\n  'fade-out',\n  'slide-in-up',\n  'slide-in-down',\n  'slide-in-left',\n  'slide-in-right',\n  'scale-in-up',\n  'scale-in-down',\n  'scale-in',\n  'fill-in-top',\n  'scale-in-right',\n  'scale-in-left',\n  'fill-in-right',\n  'reveal-in-up',\n] as const\n\ntype Variant = (typeof AnimationVariants)[number]\n\ntype VariantAdvanced = {\n  variant: Variant\n  delay?: number\n  duration?: number\n  ease?: string\n}\nexport type AnimateProps = Variant | VariantAdvanced\n\ntype AnimationTrigger = 'click' | 'on-visible' | 'immediate'\ntype IntersectionVisibilityeOptions = 'bottom-of-screen' | 'middle-of-screen' | 'about-to-leave' | number\n\ntype AnimationProviderProps = {\n  /**\n   * Prevents animations from running inside the provider\n   */\n  disableAnimations?: boolean\n  /**\n   * Controls the trigger method for the animation. One of `click`, `on-visible`, or `immediate`.\n   */\n  animationTrigger?: AnimationTrigger\n  /**\n   * Controls the intersection observer options for the animation.\n   * One of `bottom-of-screen`, `middle-of-screen`, `about-to-leave`, or a number between 0 and 1.\n   */\n  visibilityOptions?: IntersectionVisibilityeOptions\n  /**\n   * Will persist the animation end-state after the animation has completed\n   */\n  runOnce?: boolean\n\n  /**\n   * Will stagger the animations of the children using an incrementing delay\n   */\n  autoStaggerChildren?: boolean\n\n  /**\n   * Stagger delay increment. Should be used alongside `autoStaggerChildren`.\n   */\n  staggerDelayIncrement?: number\n}\n\nexport const AnimationContext = createContext<AnimationProviderProps>({})\n\nfunction getIntersectionObserverOptions(animationOptions: AnimationProviderProps): IntersectionObserverInit {\n  const {visibilityOptions} = animationOptions\n\n  switch (visibilityOptions) {\n    case 'bottom-of-screen':\n      return {\n        rootMargin: '0px 0px -10% 0px',\n        threshold: 0.4,\n      }\n    case 'middle-of-screen':\n      return {\n        rootMargin: '0px 0px -30% 0px',\n        threshold: 0.4,\n      }\n    case 'about-to-leave':\n      return {\n        rootMargin: '0px 0px -100% 0px',\n        threshold: 0.4,\n      }\n    default:\n      return typeof visibilityOptions === 'number'\n        ? {\n            rootMargin: '0px',\n            threshold: visibilityOptions / 100,\n          }\n        : {\n            rootMargin: '0px',\n            threshold: 0.4,\n          }\n  }\n}\n\nexport function AnimationProvider({\n  children,\n  disableAnimations = false,\n  animationTrigger = 'on-visible',\n  visibilityOptions = 'bottom-of-screen',\n  runOnce = false,\n  autoStaggerChildren = true,\n  staggerDelayIncrement = 100,\n}: PropsWithChildren<AnimationProviderProps>) {\n  const uniqueId = useId()\n  const [animationContext, setAnimationContext] = useState<AnimationProviderProps>({\n    disableAnimations,\n    animationTrigger,\n    visibilityOptions,\n    runOnce,\n  })\n\n  useEffect(() => {\n    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches\n\n    if (prefersReducedMotion) {\n      setAnimationContext({\n        disableAnimations: true,\n        animationTrigger,\n        visibilityOptions,\n      })\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  // add useEffect to add transition-delay to children that contain the Animation class\n  useEffect(() => {\n    if (!disableAnimations && autoStaggerChildren && uniqueId) {\n      const stagger = staggerDelayIncrement\n      const animationProvider = document.getElementById(uniqueId)\n\n      if (!animationProvider) return\n\n      const items = Array.from(animationProvider.querySelectorAll<HTMLElement>(`.${styles.Animation}`))\n\n      if (items.length === 0) return\n\n      for (let i = 0; i < items.length; i++) {\n        items[i].style.transitionDelay = `${i * stagger}ms`\n      }\n    }\n  }, [disableAnimations, autoStaggerChildren, staggerDelayIncrement, uniqueId])\n\n  // Immediately run animations and bypass intersection observer\n  useEffect(() => {\n    if (!disableAnimations && animationTrigger === 'immediate' && uniqueId) {\n      const animationProvider = document.getElementById(uniqueId)\n      if (!animationProvider) return\n\n      requestAnimationFrame(() => {\n        const elements = Array.from(animationProvider.querySelectorAll(`.${styles.Animation}`))\n        for (const element of elements) {\n          element.classList.add(styles['Animation--active'])\n        }\n      })\n    }\n  }, [disableAnimations, animationTrigger, uniqueId])\n\n  useEffect(() => {\n    if (!disableAnimations && animationTrigger === 'on-visible') {\n      const observer = new IntersectionObserver(\n        entries => {\n          for (const entry of entries) {\n            if (entry.isIntersecting && entry.target.classList.contains(styles.Animation)) {\n              entry.target.classList.add(styles['Animation--active'])\n            } else {\n              if (!runOnce) {\n                entry.target.classList.remove(styles['Animation--active'])\n              }\n            }\n          }\n        },\n        getIntersectionObserverOptions({\n          disableAnimations,\n          animationTrigger,\n          visibilityOptions,\n        }),\n      )\n\n      const elements = Array.from(document.querySelectorAll(`.${styles.Animation}`))\n\n      for (const element of elements) {\n        observer.observe(element)\n      }\n\n      return () => {\n        observer.disconnect()\n      }\n    }\n\n    if (!disableAnimations && animationTrigger === 'click') {\n      const handleClick = (event: MouseEvent) => {\n        const target = event.target as HTMLElement\n        if (target.classList.contains(styles.Animation)) {\n          target.classList.add(styles['Animation--active'])\n        }\n      }\n\n      document.addEventListener('click', handleClick)\n\n      return () => {\n        document.removeEventListener('click', handleClick)\n      }\n    }\n  }, [disableAnimations, animationTrigger, visibilityOptions, runOnce])\n  return (\n    <AnimationContext.Provider value={animationContext}>\n      <div id={uniqueId}>{children}</div>\n    </AnimationContext.Provider>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"AnimationProvider.js","names":[],"sources":["../../../src/animation/AnimationProvider/AnimationProvider.tsx"],"sourcesContent":["import React, {createContext, PropsWithChildren, useEffect, useState} from 'react'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/animation/base.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from '../Animation.module.css'\nimport {useId} from '../../hooks/useId'\n\nexport const AnimationVariants = [\n  'fade-in',\n  'fade-out',\n  'slide-in-up',\n  'slide-in-down',\n  'slide-in-left',\n  'slide-in-right',\n  'scale-in-up',\n  'scale-in-down',\n  'scale-in',\n  'fill-in-top',\n  'scale-in-right',\n  'scale-in-left',\n  'fill-in-right',\n  'reveal-in-up',\n] as const\n\ntype Variant = (typeof AnimationVariants)[number]\n\ntype VariantAdvanced = {\n  variant: Variant\n  delay?: number\n  duration?: number\n  ease?: string\n}\nexport type AnimateProps = Variant | VariantAdvanced\n\ntype AnimationTrigger = 'click' | 'on-visible' | 'immediate'\ntype IntersectionVisibilityeOptions = 'bottom-of-screen' | 'middle-of-screen' | 'about-to-leave' | number\n\ntype AnimationProviderProps = {\n  /**\n   * Prevents animations from running inside the provider\n   */\n  disableAnimations?: boolean\n  /**\n   * Controls the trigger method for the animation. One of `click`, `on-visible`, or `immediate`.\n   */\n  animationTrigger?: AnimationTrigger\n  /**\n   * Controls the intersection observer options for the animation.\n   * One of `bottom-of-screen`, `middle-of-screen`, `about-to-leave`, or a number between 0 and 1.\n   */\n  visibilityOptions?: IntersectionVisibilityeOptions\n  /**\n   * Will persist the animation end-state after the animation has completed\n   */\n  runOnce?: boolean\n\n  /**\n   * Will stagger the animations of the children using an incrementing delay\n   */\n  autoStaggerChildren?: boolean\n\n  /**\n   * Stagger delay increment. Should be used alongside `autoStaggerChildren`.\n   */\n  staggerDelayIncrement?: number\n}\n\nexport const AnimationContext = createContext<AnimationProviderProps>({})\n\nfunction getIntersectionObserverOptions(animationOptions: AnimationProviderProps): IntersectionObserverInit {\n  const {visibilityOptions} = animationOptions\n\n  switch (visibilityOptions) {\n    case 'bottom-of-screen':\n      return {\n        rootMargin: '0px 0px -10% 0px',\n        threshold: 0.4,\n      }\n    case 'middle-of-screen':\n      return {\n        rootMargin: '0px 0px -30% 0px',\n        threshold: 0.4,\n      }\n    case 'about-to-leave':\n      return {\n        rootMargin: '0px 0px -100% 0px',\n        threshold: 0.4,\n      }\n    default:\n      return typeof visibilityOptions === 'number'\n        ? {\n            rootMargin: '0px',\n            threshold: visibilityOptions / 100,\n          }\n        : {\n            rootMargin: '0px',\n            threshold: 0.4,\n          }\n  }\n}\n\nexport function AnimationProvider({\n  children,\n  disableAnimations = false,\n  animationTrigger = 'on-visible',\n  visibilityOptions = 'bottom-of-screen',\n  runOnce = false,\n  autoStaggerChildren = true,\n  staggerDelayIncrement = 100,\n}: PropsWithChildren<AnimationProviderProps>) {\n  const uniqueId = useId()\n  const [animationContext, setAnimationContext] = useState<AnimationProviderProps>({\n    disableAnimations,\n    animationTrigger,\n    visibilityOptions,\n    runOnce,\n  })\n\n  useEffect(() => {\n    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches\n\n    if (prefersReducedMotion) {\n      setAnimationContext({\n        disableAnimations: true,\n        animationTrigger,\n        visibilityOptions,\n      })\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  // add useEffect to add transition-delay to children that contain the Animation class\n  useEffect(() => {\n    if (!disableAnimations && autoStaggerChildren && uniqueId) {\n      const stagger = staggerDelayIncrement\n      const animationProvider = document.getElementById(uniqueId)\n\n      if (!animationProvider) return\n\n      const items = Array.from(animationProvider.querySelectorAll<HTMLElement>(`.${styles.Animation}`))\n\n      if (items.length === 0) return\n\n      for (let i = 0; i < items.length; i++) {\n        items[i].style.transitionDelay = `${i * stagger}ms`\n      }\n    }\n  }, [disableAnimations, autoStaggerChildren, staggerDelayIncrement, uniqueId])\n\n  // Immediately run animations and bypass intersection observer\n  useEffect(() => {\n    if (!disableAnimations && animationTrigger === 'immediate' && uniqueId) {\n      const animationProvider = document.getElementById(uniqueId)\n      if (!animationProvider) return\n\n      requestAnimationFrame(() => {\n        const elements = Array.from(animationProvider.querySelectorAll(`.${styles.Animation}`))\n        for (const element of elements) {\n          element.classList.add(styles['Animation--active'])\n        }\n      })\n    }\n  }, [disableAnimations, animationTrigger, uniqueId])\n\n  useEffect(() => {\n    if (!disableAnimations && animationTrigger === 'on-visible') {\n      const observer = new IntersectionObserver(\n        entries => {\n          for (const entry of entries) {\n            if (entry.isIntersecting && entry.target.classList.contains(styles.Animation)) {\n              entry.target.classList.add(styles['Animation--active'])\n            } else {\n              if (!runOnce) {\n                entry.target.classList.remove(styles['Animation--active'])\n              }\n            }\n          }\n        },\n        getIntersectionObserverOptions({\n          disableAnimations,\n          animationTrigger,\n          visibilityOptions,\n        }),\n      )\n\n      const elements = Array.from(document.querySelectorAll(`.${styles.Animation}`))\n\n      for (const element of elements) {\n        observer.observe(element)\n      }\n\n      return () => {\n        observer.disconnect()\n      }\n    }\n\n    if (!disableAnimations && animationTrigger === 'click') {\n      const handleClick = (event: MouseEvent) => {\n        const target = event.target as HTMLElement\n        if (target.classList.contains(styles.Animation)) {\n          target.classList.add(styles['Animation--active'])\n        }\n      }\n\n      document.addEventListener('click', handleClick)\n\n      return () => {\n        document.removeEventListener('click', handleClick)\n      }\n    }\n  }, [disableAnimations, animationTrigger, visibilityOptions, runOnce])\n  return (\n    <AnimationContext.Provider value={animationContext}>\n      <div id={uniqueId}>{children}</div>\n    </AnimationContext.Provider>\n  )\n}\n"],"mappings":"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"}

package/esm/animation/TextRevealAnimation/TextRevealAnimation.js

@@ -1,4 +1,4 @@
-import e from "../../node_modules/clsx/dist/clsx.js";
+import { clsx as e } from "../../node_modules/clsx/dist/clsx.js";
 import { useTextRevealAnimationLines as t } from "./useTextRevealAnimationLines.js";
 import n from "./TextRevealAnimation.module.js";
 import { useProvidedRefOrCreate as r } from "../../hooks/useRef.js";

package/esm/animation/TextRevealAnimation/TextRevealAnimation.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextRevealAnimation.js","names":[],"sources":["../../../src/animation/TextRevealAnimation/TextRevealAnimation.tsx"],"sourcesContent":["import React, {useEffect} from 'react'\nimport {clsx} from 'clsx'\nimport {useTextRevealAnimationLines} from './useTextRevealAnimationLines'\n\nimport styles from './TextRevealAnimation.module.css'\nimport {BaseProps} from '../../component-helpers'\nimport {useProvidedRefOrCreate} from '../../hooks/useRef'\n\nexport type TextRevealAnimationProps = BaseProps<HTMLSpanElement> &\n  Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> & {\n    children: string\n  }\n\nexport const TextRevealAnimation = React.forwardRef<HTMLSpanElement, TextRevealAnimationProps>(\n  function TextRevealAnimation({children, ...rest}, forwardedRef) {\n    const spanRef = useProvidedRefOrCreate<HTMLSpanElement | null>(\n      forwardedRef as React.RefObject<HTMLSpanElement> | React.RefCallback<HTMLSpanElement> | null,\n    )\n    const {lines} = useTextRevealAnimationLines(children || '', spanRef)\n    const [animationStarted, setAnimationStarted] = React.useState(false)\n    const [hasAnimationCompleted, setHasAnimationCompleted] = React.useState(false)\n\n    const onLineAnimationEnd = (i: number) => {\n      if (lines && i === lines.length - 1) {\n        setHasAnimationCompleted(true)\n      }\n    }\n\n    useEffect(() => {\n      const el = spanRef.current\n      const observer = new IntersectionObserver(\n        entries => {\n          for (const entry of entries) {\n            if (entry.isIntersecting) {\n              setAnimationStarted(true)\n              if (el) {\n                observer.unobserve(el)\n              }\n            }\n          }\n        },\n        {\n          threshold: 1,\n          rootMargin: '0px 0px -10% 0px',\n        },\n      )\n\n      if (el) {\n        observer.observe(el)\n      }\n\n      return () => {\n        if (el) {\n          observer.unobserve(el)\n        }\n      }\n    }, [spanRef])\n\n    if (typeof children !== 'string' && (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test')) {\n      // eslint-disable-next-line no-console\n      console.warn('Children passed to TextRevealAnimation must be a string')\n      return null\n    }\n\n    return (\n      <span ref={spanRef} {...rest}>\n        {lines?.map((line, i) => (\n          <React.Fragment key={line}>\n            <span\n              className={clsx(\n                styles.TextRevealAnimation,\n                animationStarted && styles['TextRevealAnimation--visible'],\n                animationStarted &&\n                  (hasAnimationCompleted ? styles['TextRevealAnimation'] : styles['TextRevealAnimation--animated']),\n              )}\n              style={{'--animation-delay': `${220 + i * 200}ms`} as React.CSSProperties}\n              onAnimationEnd={() => onLineAnimationEnd(i)}\n            >\n              {line}\n            </span>{' '}\n            {/* The trailing space above is intentional. It prevents adjacent words at the start/end of lines from being rendered as a single word */}\n          </React.Fragment>\n        ))}\n      </span>\n    )\n  },\n)\n"],"mappings":";;;;;;;AAaA,IAAa,IAAsB,EAAM,WACvC,SAA6B,EAAC,aAAU,GAAG,KAAO,GAAc;CAC9D,IAAM,IAAU,EACd,EACD,EACK,EAAC,aAAS,EAA4B,KAAY,IAAI,EAAQ,EAC9D,CAAC,GAAkB,KAAuB,EAAM,SAAS,GAAM,EAC/D,CAAC,GAAuB,KAA4B,EAAM,SAAS,GAAM,EAEzE,KAAsB,MAAc;AACxC,EAAI,KAAS,MAAM,EAAM,SAAS,KAChC,EAAyB,GAAK;;AAwClC,QApCA,QAAgB;EACd,IAAM,IAAK,EAAQ,SACb,IAAW,IAAI,sBACnB,MAAW;AACT,QAAK,IAAM,KAAS,EAClB,CAAI,EAAM,mBACR,EAAoB,GAAK,EACrB,KACF,EAAS,UAAU,EAAG;KAK9B;GACE,WAAW;GACX,YAAY;GACb,CACF;AAMD,SAJI,KACF,EAAS,QAAQ,EAAG,QAGT;AACX,GAAI,KACF,EAAS,UAAU,EAAG;;IAGzB,CAAC,EAAQ,CAAC,EAET,OAAO,KAAa,aAAA,QAAA,IAAA,aAAsC,iBAAA,QAAA,IAAA,aAA0C,WAEtG,QAAQ,KAAK,0DAA0D,EAChE,QAIP,kBAAC,QAAD;EAAM,KAAK;EAAS,GAAI;YACrB,GAAO,KAAK,GAAM,MACjB,kBAAC,EAAM,UAAP,EAAA,UAAA,CACE,kBAAC,QAAD;GACE,WAAW,EACT,EAAO,qBACP,KAAoB,EAAO,iCAC3B,MACG,IAAwB,EAAO,sBAAyB,EAAO,kCACnE;GACD,OAAO,EAAC,qBAAqB,GAAG,MAAM,IAAI,IAAI,KAAI;GAClD,sBAAsB,EAAmB,EAAE;aAE1C;GACI,CAAA,EAAC,IAEO,EAAA,EAdI,EAcJ,CACjB;EACG,CAAA;EAGZ"}
+{"version":3,"file":"TextRevealAnimation.js","names":[],"sources":["../../../src/animation/TextRevealAnimation/TextRevealAnimation.tsx"],"sourcesContent":["import React, {useEffect} from 'react'\nimport {clsx} from 'clsx'\nimport {useTextRevealAnimationLines} from './useTextRevealAnimationLines'\n\nimport styles from './TextRevealAnimation.module.css'\nimport {BaseProps} from '../../component-helpers'\nimport {useProvidedRefOrCreate} from '../../hooks/useRef'\n\nexport type TextRevealAnimationProps = BaseProps<HTMLSpanElement> &\n  Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> & {\n    children: string\n  }\n\nexport const TextRevealAnimation = React.forwardRef<HTMLSpanElement, TextRevealAnimationProps>(\n  function TextRevealAnimationWithRef({children, ...rest}, forwardedRef) {\n    const spanRef = useProvidedRefOrCreate<HTMLSpanElement | null>(\n      forwardedRef as React.RefObject<HTMLSpanElement> | React.RefCallback<HTMLSpanElement> | null,\n    )\n    const {lines} = useTextRevealAnimationLines(children || '', spanRef)\n    const [animationStarted, setAnimationStarted] = React.useState(false)\n    const [hasAnimationCompleted, setHasAnimationCompleted] = React.useState(false)\n\n    const onLineAnimationEnd = (i: number) => {\n      if (lines && i === lines.length - 1) {\n        setHasAnimationCompleted(true)\n      }\n    }\n\n    useEffect(() => {\n      const el = spanRef.current\n      const observer = new IntersectionObserver(\n        entries => {\n          for (const entry of entries) {\n            if (entry.isIntersecting) {\n              setAnimationStarted(true)\n              if (el) {\n                observer.unobserve(el)\n              }\n            }\n          }\n        },\n        {\n          threshold: 1,\n          rootMargin: '0px 0px -10% 0px',\n        },\n      )\n\n      if (el) {\n        observer.observe(el)\n      }\n\n      return () => {\n        if (el) {\n          observer.unobserve(el)\n        }\n      }\n    }, [spanRef])\n\n    if (typeof children !== 'string' && (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test')) {\n      // eslint-disable-next-line no-console\n      console.warn('Children passed to TextRevealAnimation must be a string')\n      return null\n    }\n\n    return (\n      <span ref={spanRef} {...rest}>\n        {lines?.map((line, i) => (\n          <React.Fragment key={line}>\n            <span\n              className={clsx(\n                styles.TextRevealAnimation,\n                animationStarted && styles['TextRevealAnimation--visible'],\n                animationStarted &&\n                  (hasAnimationCompleted ? styles['TextRevealAnimation'] : styles['TextRevealAnimation--animated']),\n              )}\n              style={{'--animation-delay': `${220 + i * 200}ms`} as React.CSSProperties}\n              onAnimationEnd={() => onLineAnimationEnd(i)}\n            >\n              {line}\n            </span>{' '}\n            {/* The trailing space above is intentional. It prevents adjacent words at the start/end of lines from being rendered as a single word */}\n          </React.Fragment>\n        ))}\n      </span>\n    )\n  },\n)\n"],"mappings":";;;;;;;AAaA,IAAa,IAAsB,EAAM,WACvC,SAAoC,EAAC,aAAU,GAAG,KAAO,GAAc;CACrE,IAAM,IAAU,EACd,CACF,GACM,EAAC,aAAS,EAA4B,KAAY,IAAI,CAAO,GAC7D,CAAC,GAAkB,KAAuB,EAAM,SAAS,EAAK,GAC9D,CAAC,GAAuB,KAA4B,EAAM,SAAS,EAAK,GAExE,KAAsB,MAAc;EACxC,AAAI,KAAS,MAAM,EAAM,SAAS,KAChC,EAAyB,EAAI;CAEjC;CAsCA,OApCA,QAAgB;EACd,IAAM,IAAK,EAAQ,SACb,IAAW,IAAI,sBACnB,MAAW;GACT,KAAK,IAAM,KAAS,GAClB,AAAI,EAAM,mBACR,EAAoB,EAAI,GACpB,KACF,EAAS,UAAU,CAAE;EAI7B,GACA;GACE,WAAW;GACX,YAAY;EACd,CACF;EAMA,OAJI,KACF,EAAS,QAAQ,CAAE,SAGR;GACX,AAAI,KACF,EAAS,UAAU,CAAE;EAEzB;CACF,GAAG,CAAC,CAAO,CAAC,GAER,OAAO,KAAa,aAAA,QAAA,IAAA,aAAsC,iBAAA,QAAA,IAAA,aAA0C,WAEtG,QAAQ,KAAK,yDAAyD,GAC/D,QAIP,kBAAC,QAAD;EAAM,KAAK;EAAS,GAAI;YACrB,GAAO,KAAK,GAAM,MACjB,kBAAC,EAAM,UAAP,EAAA,UAAA,CACE,kBAAC,QAAD;GACE,WAAW,EACT,EAAO,qBACP,KAAoB,EAAO,iCAC3B,MACG,IAAwB,EAAO,sBAAyB,EAAO,iCACpE;GACA,OAAO,EAAC,qBAAqB,GAAG,MAAM,IAAI,IAAI,IAAG;GACjD,sBAAsB,EAAmB,CAAC;aAEzC;EACG,CAAA,GAAE,GAEM,EAAA,GAdK,CAcL,CACjB;CACG,CAAA;AAEV,CACF"}

package/esm/animation/TextRevealAnimation/TextRevealAnimation.module.js

@@ -1,10 +1,11 @@
-import './TextRevealAnimation.module-BzK16DXS.css';var e = {
-	TextRevealAnimation: "Primer_Brand__TextRevealAnimation-module__TextRevealAnimation___W6_ey",
+import './TextRevealAnimation.module-BzK16DXS.css';//#region src/animation/TextRevealAnimation/TextRevealAnimation.module.css
+var e = "Primer_Brand__TextRevealAnimation-module__TextRevealAnimation___W6_ey", t = "Primer_Brand__TextRevealAnimation-module__wipe___IwKBR", n = {
+	TextRevealAnimation: e,
 	"TextRevealAnimation--visible": "Primer_Brand__TextRevealAnimation-module__TextRevealAnimation--visible___VS7mJ",
 	"TextRevealAnimation--animated": "Primer_Brand__TextRevealAnimation-module__TextRevealAnimation--animated___wKBYl",
-	wipe: "Primer_Brand__TextRevealAnimation-module__wipe___IwKBR"
+	wipe: t
 };
 //#endregion
-export { e as default };
+export { e as TextRevealAnimation, n as default, t as wipe };
 
 //# sourceMappingURL=TextRevealAnimation.module.js.map

package/esm/animation/TextRevealAnimation/useTextRevealAnimationLines.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTextRevealAnimationLines.js","names":[],"sources":["../../../src/animation/TextRevealAnimation/useTextRevealAnimationLines.ts"],"sourcesContent":["import {useRef, useEffect, useState, RefObject} from 'react'\n\nexport const useTextRevealAnimationLines = (text?: string, providedRef?: RefObject<HTMLElement | null>) => {\n  const internalRef = useRef<HTMLElement>(null)\n  const ref = providedRef ?? internalRef\n  const [lines, setLines] = useState<string[]>()\n\n  useEffect(() => {\n    if (!ref.current || !text) return\n\n    const wrapLines = () => {\n      const element = ref.current\n\n      if (!element || !text) return\n\n      const originalColor = window.getComputedStyle(element).color\n\n      element.style.color = 'transparent'\n      element.textContent = ''\n\n      const words = text.split(' ')\n\n      const lineBreakPositions: number[] = []\n      let prevHeight = 0\n      const linesArr: string[][] = []\n\n      for (const word of words) {\n        element.textContent += `${word} `\n        const height = element.offsetHeight\n\n        if (linesArr.length === 0) {\n          prevHeight = height\n          linesArr.push([word])\n          continue\n        }\n\n        if (height > prevHeight) {\n          lineBreakPositions.push(linesArr.length)\n          linesArr.push([word])\n        } else {\n          linesArr.at(-1)?.push(word)\n        }\n\n        prevHeight = height\n      }\n\n      element.style.color = originalColor\n      element.textContent = ''\n\n      setLines(linesArr.map(line => line.join(' ')))\n    }\n\n    wrapLines()\n  }, [text, ref])\n\n  return {ref, lines}\n}\n"],"mappings":";;AAEA,IAAa,KAA+B,GAAe,MAAgD;CACzG,IAAM,IAAc,EAAoB,KAAK,EACvC,IAAM,KAAe,GACrB,CAAC,GAAO,KAAY,GAAoB;AAkD9C,QAhDA,QAAgB;AACV,GAAC,EAAI,WAAW,CAAC,YAEG;GACtB,IAAM,IAAU,EAAI;AAEpB,OAAI,CAAC,KAAW,CAAC,EAAM;GAEvB,IAAM,IAAgB,OAAO,iBAAiB,EAAQ,CAAC;AAGvD,GADA,EAAQ,MAAM,QAAQ,eACtB,EAAQ,cAAc;GAEtB,IAAM,IAAQ,EAAK,MAAM,IAAI,EAEvB,IAA+B,EAAE,EACnC,IAAa,GACX,IAAuB,EAAE;AAE/B,QAAK,IAAM,KAAQ,GAAO;AACxB,MAAQ,eAAe,GAAG,EAAK;IAC/B,IAAM,IAAS,EAAQ;AAEvB,QAAI,EAAS,WAAW,GAAG;AAEzB,KADA,IAAa,GACb,EAAS,KAAK,CAAC,EAAK,CAAC;AACrB;;AAUF,IAPI,IAAS,KACX,EAAmB,KAAK,EAAS,OAAO,EACxC,EAAS,KAAK,CAAC,EAAK,CAAC,IAErB,EAAS,GAAG,GAAG,EAAE,KAAK,EAAK,EAG7B,IAAa;;AAMf,GAHA,EAAQ,MAAM,QAAQ,GACtB,EAAQ,cAAc,IAEtB,EAAS,EAAS,KAAI,MAAQ,EAAK,KAAK,IAAI,CAAC,CAAC;MAGrC;IACV,CAAC,GAAM,EAAI,CAAC,EAER;EAAC;EAAK;EAAM"}
+{"version":3,"file":"useTextRevealAnimationLines.js","names":[],"sources":["../../../src/animation/TextRevealAnimation/useTextRevealAnimationLines.ts"],"sourcesContent":["import {useRef, useEffect, useState, RefObject} from 'react'\n\nexport const useTextRevealAnimationLines = (text?: string, providedRef?: RefObject<HTMLElement | null>) => {\n  const internalRef = useRef<HTMLElement>(null)\n  const ref = providedRef ?? internalRef\n  const [lines, setLines] = useState<string[]>()\n\n  useEffect(() => {\n    if (!ref.current || !text) return\n\n    const wrapLines = () => {\n      const element = ref.current\n\n      if (!element || !text) return\n\n      const originalColor = window.getComputedStyle(element).color\n\n      element.style.color = 'transparent'\n      element.textContent = ''\n\n      const words = text.split(' ')\n\n      const lineBreakPositions: number[] = []\n      let prevHeight = 0\n      const linesArr: string[][] = []\n\n      for (const word of words) {\n        element.textContent += `${word} `\n        const height = element.offsetHeight\n\n        if (linesArr.length === 0) {\n          prevHeight = height\n          linesArr.push([word])\n          continue\n        }\n\n        if (height > prevHeight) {\n          lineBreakPositions.push(linesArr.length)\n          linesArr.push([word])\n        } else {\n          linesArr.at(-1)?.push(word)\n        }\n\n        prevHeight = height\n      }\n\n      element.style.color = originalColor\n      element.textContent = ''\n\n      setLines(linesArr.map(line => line.join(' ')))\n    }\n\n    wrapLines()\n  }, [text, ref])\n\n  return {ref, lines}\n}\n"],"mappings":";;AAEA,IAAa,KAA+B,GAAe,MAAgD;CACzG,IAAM,IAAc,EAAoB,IAAI,GACtC,IAAM,KAAe,GACrB,CAAC,GAAO,KAAY,EAAmB;CAkD7C,OAhDA,QAAgB;EACV,CAAC,EAAI,WAAW,CAAC,YAEG;GACtB,IAAM,IAAU,EAAI;GAEpB,IAAI,CAAC,KAAW,CAAC,GAAM;GAEvB,IAAM,IAAgB,OAAO,iBAAiB,CAAO,CAAC,CAAC;GAGvD,AADA,EAAQ,MAAM,QAAQ,eACtB,EAAQ,cAAc;GAEtB,IAAM,IAAQ,EAAK,MAAM,GAAG,GAEtB,IAA+B,CAAC,GAClC,IAAa,GACX,IAAuB,CAAC;GAE9B,KAAK,IAAM,KAAQ,GAAO;IACxB,EAAQ,eAAe,GAAG,EAAK;IAC/B,IAAM,IAAS,EAAQ;IAEvB,IAAI,EAAS,WAAW,GAAG;KAEzB,AADA,IAAa,GACb,EAAS,KAAK,CAAC,CAAI,CAAC;KACpB;IACF;IASA,AAPI,IAAS,KACX,EAAmB,KAAK,EAAS,MAAM,GACvC,EAAS,KAAK,CAAC,CAAI,CAAC,KAEpB,EAAS,GAAG,EAAE,CAAC,EAAE,KAAK,CAAI,GAG5B,IAAa;GACf;GAKA,AAHA,EAAQ,MAAM,QAAQ,GACtB,EAAQ,cAAc,IAEtB,EAAS,EAAS,KAAI,MAAQ,EAAK,KAAK,GAAG,CAAC,CAAC;EAC/C,EAEA,CAAU;CACZ,GAAG,CAAC,GAAM,CAAG,CAAC,GAEP;EAAC;EAAK;CAAK;AACpB"}

package/esm/animation/useAnimation.js.map

@@ -1 +1 @@
-{"version":3,"file":"useAnimation.js","names":[],"sources":["../../src/animation/useAnimation.ts"],"sourcesContent":["import {CSSProperties, useContext, useMemo} from 'react'\nimport {AnimateProps, AnimationContext, AnimationVariants} from './AnimationProvider'\n\nimport styles from './Animation.module.css'\n\nconst animationTypeToClass = AnimationVariants.reduce((acc, key) => {\n  acc[key] = styles[`Animation--${key}`]\n  return acc\n}, {})\n\n/**\n * A hook that returns CSS classes and styles for animating an element.\n * @param {AnimateProps} [animateProps] - An object containing animation properties.\n * @returns {{classes: string; styles: CSSProperties}} - An object containing CSS classes and styles for animating an element.\n */\nexport const useAnimation = (animateProps?: AnimateProps): {classes: string; styles: CSSProperties} => {\n  const {disableAnimations} = useContext(AnimationContext)\n\n  const animationClasses = useMemo(() => {\n    if (!animateProps || disableAnimations) {\n      return ''\n    }\n\n    const defaultClasses = styles.Animation\n    const dynamicClasses: string[] = []\n\n    const animationType = typeof animateProps === 'string' ? animateProps : animateProps.variant\n    const animationClass = animationTypeToClass[animationType]\n    if (animationClass) {\n      dynamicClasses.push(animationClass)\n    }\n\n    return `${defaultClasses} ${dynamicClasses.join(' ')}`\n  }, [animateProps, disableAnimations])\n\n  const animationStyles = useMemo(() => {\n    if (!animateProps) {\n      return {}\n    }\n\n    const newStyles: CSSProperties = {}\n\n    if (typeof animateProps === 'object') {\n      const {delay, duration, ease} = animateProps\n      if (typeof delay === 'number') {\n        newStyles.transitionDelay = `${delay}ms`\n      }\n      if (typeof duration === 'number') {\n        newStyles.transitionDuration = `${duration}ms`\n      }\n\n      if (ease) {\n        newStyles.transitionTimingFunction = ease\n      }\n    }\n\n    return newStyles\n  }, [animateProps])\n\n  return {\n    classes: animationClasses,\n    styles: animationStyles,\n  }\n}\n"],"mappings":";;;;AAKA,IAAM,IAAuB,EAAkB,QAAQ,GAAK,OAC1D,EAAI,KAAO,EAAO,cAAc,MACzB,IACN,EAAE,CAAC,EAOO,KAAgB,MAA0E;CACrG,IAAM,EAAC,yBAAqB,EAAW,EAAiB;AA2CxD,QAAO;EACL,SA1CuB,QAAc;AACrC,OAAI,CAAC,KAAgB,EACnB,QAAO;GAGT,IAAM,IAAiB,EAAO,WACxB,IAA2B,EAAE,EAG7B,IAAiB,EADD,OAAO,KAAiB,WAAW,IAAe,EAAa;AAMrF,UAJI,KACF,EAAe,KAAK,EAAe,EAG9B,GAAG,EAAe,GAAG,EAAe,KAAK,IAAI;KACnD,CAAC,GAAc,EAAkB,CA2BzB;EACT,QA1BsB,QAAc;AACpC,OAAI,CAAC,EACH,QAAO,EAAE;GAGX,IAAM,IAA2B,EAAE;AAEnC,OAAI,OAAO,KAAiB,UAAU;IACpC,IAAM,EAAC,UAAO,aAAU,YAAQ;AAQhC,IAPI,OAAO,KAAU,aACnB,EAAU,kBAAkB,GAAG,EAAM,MAEnC,OAAO,KAAa,aACtB,EAAU,qBAAqB,GAAG,EAAS,MAGzC,MACF,EAAU,2BAA2B;;AAIzC,UAAO;KACN,CAAC,EAAa,CAIP;EACT"}
+{"version":3,"file":"useAnimation.js","names":[],"sources":["../../src/animation/useAnimation.ts"],"sourcesContent":["import {CSSProperties, useContext, useMemo} from 'react'\nimport {AnimateProps, AnimationContext, AnimationVariants} from './AnimationProvider'\n\nimport styles from './Animation.module.css'\n\nconst animationTypeToClass = AnimationVariants.reduce((acc, key) => {\n  acc[key] = styles[`Animation--${key}`]\n  return acc\n}, {})\n\n/**\n * A hook that returns CSS classes and styles for animating an element.\n * @param {AnimateProps} [animateProps] - An object containing animation properties.\n * @returns {{classes: string; styles: CSSProperties}} - An object containing CSS classes and styles for animating an element.\n */\nexport const useAnimation = (animateProps?: AnimateProps): {classes: string; styles: CSSProperties} => {\n  const {disableAnimations} = useContext(AnimationContext)\n\n  const animationClasses = useMemo(() => {\n    if (!animateProps || disableAnimations) {\n      return ''\n    }\n\n    const defaultClasses = styles.Animation\n    const dynamicClasses: string[] = []\n\n    const animationType = typeof animateProps === 'string' ? animateProps : animateProps.variant\n    const animationClass = animationTypeToClass[animationType]\n    if (animationClass) {\n      dynamicClasses.push(animationClass)\n    }\n\n    return `${defaultClasses} ${dynamicClasses.join(' ')}`\n  }, [animateProps, disableAnimations])\n\n  const animationStyles = useMemo(() => {\n    if (!animateProps) {\n      return {}\n    }\n\n    const newStyles: CSSProperties = {}\n\n    if (typeof animateProps === 'object') {\n      const {delay, duration, ease} = animateProps\n      if (typeof delay === 'number') {\n        newStyles.transitionDelay = `${delay}ms`\n      }\n      if (typeof duration === 'number') {\n        newStyles.transitionDuration = `${duration}ms`\n      }\n\n      if (ease) {\n        newStyles.transitionTimingFunction = ease\n      }\n    }\n\n    return newStyles\n  }, [animateProps])\n\n  return {\n    classes: animationClasses,\n    styles: animationStyles,\n  }\n}\n"],"mappings":";;;;AAKA,IAAM,IAAuB,EAAkB,QAAQ,GAAK,OAC1D,EAAI,KAAO,EAAO,cAAc,MACzB,IACN,CAAC,CAAC,GAOQ,KAAgB,MAA0E;CACrG,IAAM,EAAC,yBAAqB,EAAW,CAAgB;CA2CvD,OAAO;EACL,SA1CuB,QAAc;GACrC,IAAI,CAAC,KAAgB,GACnB,OAAO;GAGT,IAAM,IAAiB,EAAO,WACxB,IAA2B,CAAC,GAG5B,IAAiB,EADD,OAAO,KAAiB,WAAW,IAAe,EAAa;GAMrF,OAJI,KACF,EAAe,KAAK,CAAc,GAG7B,GAAG,EAAe,GAAG,EAAe,KAAK,GAAG;EACrD,GAAG,CAAC,GAAc,CAAiB,CA2BxB;EACT,QA1BsB,QAAc;GACpC,IAAI,CAAC,GACH,OAAO,CAAC;GAGV,IAAM,IAA2B,CAAC;GAElC,IAAI,OAAO,KAAiB,UAAU;IACpC,IAAM,EAAC,UAAO,aAAU,YAAQ;IAQhC,AAPI,OAAO,KAAU,aACnB,EAAU,kBAAkB,GAAG,EAAM,MAEnC,OAAO,KAAa,aACtB,EAAU,qBAAqB,GAAG,EAAS,MAGzC,MACF,EAAU,2BAA2B;GAEzC;GAEA,OAAO;EACT,GAAG,CAAC,CAAY,CAIN;CACV;AACF"}

package/esm/component-helpers/shared.module.js

@@ -1,5 +1,6 @@
-import './shared.module-CrdMh7Vf.css';var e = { gridline: "Primer_Brand__shared-module__gridline___FDR_5" };
+import './shared.module-CrdMh7Vf.css';//#region src/component-helpers/shared.module.css
+var e = "Primer_Brand__shared-module__gridline___FDR_5", t = { gridline: e };
 //#endregion
-export { e as default };
+export { t as default, e as gridline };
 
 //# sourceMappingURL=shared.module.js.map

package/esm/component-helpers.d.ts

@@ -6,14 +6,14 @@ import { AnimateProps } from './animation/AnimationProvider';
 export declare const Container: ({ children, style, }: {
     children: React.ReactElement[] | React.ReactElement;
     style?: React.CSSProperties;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 type RedlineBackgroundProps = {
     height?: number;
     hasBorder?: boolean;
     className?: string;
     style?: CSSProperties;
 };
-export declare function RedlineBackground({ height, hasBorder, style, ...rest }: PropsWithChildren<RedlineBackgroundProps>): import("react/jsx-runtime").JSX.Element;
+export declare function RedlineBackground({ height, hasBorder, style, ...rest }: PropsWithChildren<RedlineBackgroundProps>): React.JSX.Element;
 /**
  * Base Types
  */

package/esm/component-helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component-helpers.d.ts","sourceRoot":"","sources":["../src/component-helpers.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,GAAG,EAAE,iBAAiB,EAAE,aAAa,EAAC,MAAM,OAAO,CAAA;AAClE,OAAO,EAAC,YAAY,EAAC,MAAM,+BAA+B,CAAA;AAE1D;;GAEG;AACH,eAAO,MAAM,SAAS,GAAI,sBAGvB;IACD,QAAQ,EAAE,KAAK,CAAC,YAAY,EAAE,GAAG,KAAK,CAAC,YAAY,CAAA;IACnD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B,4CAA+E,CAAA;AAEhF,KAAK,sBAAsB,GAAG;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;AAED,wBAAgB,iBAAiB,CAAC,EAChC,MAAM,EACN,SAAgB,EAChB,KAAK,EACL,GAAG,IAAI,EACR,EAAE,iBAAiB,CAAC,sBAAsB,CAAC,2CAoB3C;AAED;;GAEG;AAEH;;;;;;;;GAQG;AACH,MAAM,MAAM,SAAS,CAAC,CAAC,IAAI;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAA;IACZ,OAAO,CAAC,EAAE,YAAY,CAAA;CACvB,CAAA"}
+{"version":3,"file":"component-helpers.d.ts","sourceRoot":"","sources":["../src/component-helpers.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,GAAG,EAAE,iBAAiB,EAAE,aAAa,EAAC,MAAM,OAAO,CAAA;AAClE,OAAO,EAAC,YAAY,EAAC,MAAM,+BAA+B,CAAA;AAE1D;;GAEG;AACH,eAAO,MAAM,SAAS,GAAI,sBAGvB;IACD,QAAQ,EAAE,KAAK,CAAC,YAAY,EAAE,GAAG,KAAK,CAAC,YAAY,CAAA;IACnD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B,sBAA+E,CAAA;AAEhF,KAAK,sBAAsB,GAAG;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;AAED,wBAAgB,iBAAiB,CAAC,EAChC,MAAM,EACN,SAAgB,EAChB,KAAK,EACL,GAAG,IAAI,EACR,EAAE,iBAAiB,CAAC,sBAAsB,CAAC,qBAoB3C;AAED;;GAEG;AAEH;;;;;;;;GAQG;AACH,MAAM,MAAM,SAAS,CAAC,CAAC,IAAI;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAA;IACZ,OAAO,CAAC,EAAE,YAAY,CAAA;CACvB,CAAA"}

package/esm/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","names":[],"sources":["../src/constants.tsx"],"sourcesContent":["export const Colors = [\n  'default',\n  'blue',\n  'coral',\n  'green',\n  'gray',\n  'indigo',\n  'lemon',\n  'lime',\n  'orange',\n  'pink',\n  'purple',\n  'red',\n  'teal',\n  'yellow',\n] as const\n\nexport const BiColorGradients = ['blue-purple', 'green-blue', 'pink-blue', 'purple-red', 'red-orange'] as const\nexport const TriColorGradients = ['green-blue-purple'] as const\n\n// TODO: consider generating the scale from  style dictionary and serve from the brand-primitives package\nexport const BaseSizeScale = [4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 60, 64, 80, 88, 96, 112, 128] as const\ntype BaseSizeScale = (typeof BaseSizeScale)[number]\n"],"mappings":";AAAA,IAAa,IAAS;CACpB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EAEY,IAAmB;CAAC;CAAe;CAAc;CAAa;CAAc;CAAa,EACzF,IAAoB,CAAC,oBAAoB,EAGzC,IAAgB;CAAC;CAAG;CAAG;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAK;CAAI"}
+{"version":3,"file":"constants.js","names":[],"sources":["../src/constants.tsx"],"sourcesContent":["export const Colors = [\n  'default',\n  'blue',\n  'coral',\n  'green',\n  'gray',\n  'indigo',\n  'lemon',\n  'lime',\n  'orange',\n  'pink',\n  'purple',\n  'red',\n  'teal',\n  'yellow',\n] as const\n\nexport const BiColorGradients = ['blue-purple', 'green-blue', 'pink-blue', 'purple-red', 'red-orange'] as const\nexport const TriColorGradients = ['green-blue-purple'] as const\n\n// TODO: consider generating the scale from  style dictionary and serve from the brand-primitives package\nexport const BaseSizeScale = [4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 60, 64, 80, 88, 96, 112, 128] as const\ntype BaseSizeScale = (typeof BaseSizeScale)[number]\n"],"mappings":";AAAA,IAAa,IAAS;CACpB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,GAEa,IAAmB;CAAC;CAAe;CAAc;CAAa;CAAc;AAAY,GACxF,IAAoB,CAAC,mBAAmB,GAGxC,IAAgB;CAAC;CAAG;CAAG;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAK;AAAG"}

package/esm/css/stylesheets.js

@@ -1,4 +1,4 @@
-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/size-SXubYfUg.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/functional/animation/base-BIr7u5g8.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 '../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/functional/size/border-B0NqqX5b.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/typography/typography-responsive-D6GwCHec.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/size/size-SXubYfUg.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/animation/base-BIr7u5g8.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';import './reset-CSgu34_f.css';/* empty css      */
 /* empty css                                                                                         */
 /* empty css                                                                    */
 /* empty css                                                                                */

package/esm/findElementInChildren.js.map

@@ -1 +1 @@
-{"version":3,"file":"findElementInChildren.js","names":[],"sources":["../src/findElementInChildren.ts"],"sourcesContent":["import React from 'react'\n\nconst findElementInChildren = (children: React.ReactNode, element: React.ElementType): boolean => {\n  if (!children) {\n    return false\n  }\n\n  if (Array.isArray(children)) {\n    for (const child of children) {\n      if (findElementInChildren(child, element)) {\n        return true\n      }\n    }\n  } else if (React.isValidElement<{children?: React.ReactNode}>(children)) {\n    if (children.type === element) {\n      return true\n    }\n\n    if (children.props.children && findElementInChildren(children.props.children, element)) {\n      return true\n    }\n  }\n\n  return false\n}\n\nexport default findElementInChildren\n"],"mappings":";;AAEA,IAAM,KAAyB,GAA2B,MAAwC;AAChG,KAAI,CAAC,EACH,QAAO;AAGT,KAAI,MAAM,QAAQ,EAAS;OACpB,IAAM,KAAS,EAClB,KAAI,EAAsB,GAAO,EAAQ,CACvC,QAAO;YAGF,EAAM,eAA6C,EAAS,KACjE,EAAS,SAAS,KAIlB,EAAS,MAAM,YAAY,EAAsB,EAAS,MAAM,UAAU,EAAQ,EACpF,QAAO;AAIX,QAAO"}
+{"version":3,"file":"findElementInChildren.js","names":[],"sources":["../src/findElementInChildren.ts"],"sourcesContent":["import React from 'react'\n\nconst findElementInChildren = (children: React.ReactNode, element: React.ElementType): boolean => {\n  if (!children) {\n    return false\n  }\n\n  if (Array.isArray(children)) {\n    for (const child of children) {\n      if (findElementInChildren(child, element)) {\n        return true\n      }\n    }\n  } else if (React.isValidElement<{children?: React.ReactNode}>(children)) {\n    if (children.type === element) {\n      return true\n    }\n\n    if (children.props.children && findElementInChildren(children.props.children, element)) {\n      return true\n    }\n  }\n\n  return false\n}\n\nexport default findElementInChildren\n"],"mappings":";;AAEA,IAAM,KAAyB,GAA2B,MAAwC;CAChG,IAAI,CAAC,GACH,OAAO;CAGT,IAAI,MAAM,QAAQ,CAAQ;OACnB,IAAM,KAAS,GAClB,IAAI,EAAsB,GAAO,CAAO,GACtC,OAAO;CAAA,OAGN,IAAI,EAAM,eAA6C,CAAQ,MAChE,EAAS,SAAS,KAIlB,EAAS,MAAM,YAAY,EAAsB,EAAS,MAAM,UAAU,CAAO,IACnF,OAAO;CAIX,OAAO;AACT"}

package/esm/forms/Checkbox/Checkbox.js

@@ -1,4 +1,4 @@
-import e from "../../node_modules/clsx/dist/clsx.js";
+import { clsx as 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";
@@ -25,7 +25,7 @@ var l = a(({ checked: a, className: l, indeterminate: u, disabled: d, id: f, onC
 			"aria-invalid": h === "error" ? "true" : "false",
 			"aria-required": m ? "true" : "false",
 			"aria-checked": u ? "mixed" : a,
-			checked: u ? !1 : a,
+			checked: !u && a,
 			className: e(i["Checkbox-input"]),
 			disabled: d,
 			name: g,

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 '@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"}
+{"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,IAAI,GACtE,IAAW,EAAM,CAAE;CAEzB,QAAsB;EACpB,AAAI,EAAS,YACX,EAAS,QAAQ,gBAAgB,KAAiB;CAEtD,GAAG;EAAC;EAAe;EAAS;CAAQ,CAAC;CAErC,IAAM,IAAU,QAAkB;EAChC,AAAI,CAAC,KAAY,EAAS,WACxB,EAAS,QAAQ,MAAM;CAE3B,GAAG,CAAC,GAAU,CAAQ,CAAC;CAEvB,OACE,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,MAAwB;GACjC,WAAW,EAAK,EAAO,iBAAiB;GAC9B;GACV,MAAM;GACI;GACV,KAAK;GACK;GACV,MAAK;GACE;GACP,GAAI;EACL,CAAA,GACD,kBAAC,QAAD;GACE,WAAW,EAAK,EAAO,UAAa,KAAiB,EAAO,4BAA4B,CAAS;GACxF;GACT,UAAU;GACV,eAAY;aAEX,IACC,kBAAC,OAAD;IACE,WAAW,EAAK,EAAO,qBAAqB;IAC5C,OAAM;IACN,SAAQ;IACR,OAAM;IACN,QAAO;IACP,eAAY;cAEZ,kBAAC,QAAD;KAAM,UAAS;KAAU,GAAE;IAA6E,CAAA;GACrG,CAAA,IAEL,kBAAC,OAAD;IAAK,SAAQ;IAAc,WAAW,EAAK,EAAO,qBAAqB;IAAG,eAAY;cACpF,kBAAC,QAAD;KACE,WAAW,EAAK,EAAO,0BAA0B;KACjD,MAAK;KACL,QAAO;KACP,aAAY;KACZ,eAAc;KACd,gBAAe;KACf,kBAAiB;KACjB,GAAE;IACH,CAAA;GACE,CAAA;EAEH,CAAA,CACF;;AAEV,CAEmD"}

package/esm/forms/Checkbox/Checkbox.module.js

@@ -1,12 +1,13 @@
-import './Checkbox.module-CtRGEfSq.css';var e = {
+import './Checkbox.module-CtRGEfSq.css';//#region src/forms/Checkbox/Checkbox.module.css
+var e = "Primer_Brand__Checkbox-module__Checkbox___u6_Bq", t = {
 	"Checkbox-wrapper": "Primer_Brand__Checkbox-module__Checkbox-wrapper___81I1z",
-	Checkbox: "Primer_Brand__Checkbox-module__Checkbox___u6_Bq",
+	Checkbox: e,
 	"Checkbox-input": "Primer_Brand__Checkbox-module__Checkbox-input___NQtTz",
 	"Checkbox-checkmark": "Primer_Brand__Checkbox-module__Checkbox-checkmark___1RiBT",
 	"Checkbox-checkmark-path": "Primer_Brand__Checkbox-module__Checkbox-checkmark-path___NHI_D",
 	"Checkbox--indeterminate": "Primer_Brand__Checkbox-module__Checkbox--indeterminate___TsIkM"
 };
 //#endregion
-export { e as default };
+export { e as Checkbox, t as default };
 
 //# sourceMappingURL=Checkbox.module.js.map

package/esm/forms/ControlGroup/ControlGroup.js

@@ -1,7 +1,8 @@
-import e from "../../node_modules/clsx/dist/clsx.js";
+import { clsx as 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 { AlertFillIcon as r } from "../../node_modules/@primer/octicons-react/dist/icons/AlertFillIcon.js";
+import { CheckCircleFillIcon as i } from "../../node_modules/@primer/octicons-react/dist/icons/CheckCircleFillIcon.js";
 import a from "./ControlGroup.module.js";
 import { Children as o, createContext as s, forwardRef as c, isValidElement as l, useContext as u } from "react";
 import { jsx as d, jsxs as f } from "react/jsx-runtime";

package/esm/forms/ControlGroup/ControlGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ControlGroup.js","names":[],"sources":["../../../src/forms/ControlGroup/ControlGroup.tsx"],"sourcesContent":["import React, {Children, createContext, forwardRef, isValidElement, useContext, type HTMLAttributes} from 'react'\nimport {clsx} from 'clsx'\nimport {AlertFillIcon, CheckCircleFillIcon} from '@primer/octicons-react'\nimport {useId} from '../../hooks/useId'\n\nimport type {FormValidationStatus} from '..'\nimport {Text} from '../..'\nimport styles from './ControlGroup.module.css'\n\ntype ControlGroupContext = {\n  id?: string\n}\n\nconst ControlGroupContext = createContext<ControlGroupContext | null>(null)\n\nconst useControlGroup = () => {\n  const context = useContext(ControlGroupContext)\n\n  if (!context) {\n    throw new Error(\n      'useControlGroup must be used within an ControlGroupProvider. Did you forget to wrap your component in a <ControlGroupProvider>?',\n    )\n  }\n\n  return context\n}\n\nexport type ControlGroupProps = HTMLAttributes<HTMLFieldSetElement>\nconst _ControlGroup = forwardRef<HTMLFieldSetElement, ControlGroupProps>(({className, id, ...props}, ref) => {\n  const uniqueId = useId(id)\n\n  const containsCaption = Children.toArray(props.children).some(\n    child => isValidElement(child) && child.type === ControlGroupCaption,\n  )\n  const containsValidation = Children.toArray(props.children).some(\n    child => isValidElement(child) && child.type === ControlGroupValidation,\n  )\n\n  const describedBy =\n    [containsCaption && `${uniqueId}-caption`, containsValidation && `${uniqueId}-validation`]\n      .filter(Boolean)\n      .join(' ') || undefined\n\n  return (\n    <ControlGroupContext.Provider value={{id: uniqueId}}>\n      <fieldset\n        ref={ref}\n        className={clsx(styles.ControlGroup__container, className)}\n        aria-describedby={describedBy}\n        {...props}\n      />\n    </ControlGroupContext.Provider>\n  )\n})\n\nexport type ControlGroupLabelProps = {visuallyHidden?: boolean} & HTMLAttributes<HTMLLegendElement>\nconst ControlGroupLabel = forwardRef<HTMLLegendElement, ControlGroupLabelProps>(\n  ({children, className, visuallyHidden, ...props}, ref) => {\n    return (\n      <legend\n        ref={ref}\n        className={clsx(styles.ControlGroup__label, visuallyHidden && 'visually-hidden', className)}\n        {...props}\n      >\n        <Text as=\"span\" weight=\"medium\" size=\"100\">\n          {children}\n        </Text>\n      </legend>\n    )\n  },\n)\n\nexport type ControlGroupCaptionProps = HTMLAttributes<HTMLSpanElement>\nconst ControlGroupCaption = forwardRef<HTMLSpanElement, ControlGroupCaptionProps>(({className, ...props}, ref) => {\n  const {id} = useControlGroup()\n\n  return <Text as=\"span\" size=\"100\" variant=\"muted\" ref={ref} id={`${id}-caption`} className={className} {...props} />\n})\n\nexport type ControlGroupValidationProps = {variant: FormValidationStatus} & HTMLAttributes<HTMLSpanElement>\nconst ControlGroupValidation = forwardRef<HTMLSpanElement, ControlGroupValidationProps>(\n  ({className, variant, children, ...props}, ref) => {\n    const {id} = useControlGroup()\n\n    return (\n      <Text\n        as=\"span\"\n        size=\"100\"\n        ref={ref}\n        id={`${id}-validation`}\n        className={clsx(\n          styles.ControlGroup__validation,\n          styles['ControlGroup__validation--animate-in'],\n          variant === 'success' && styles['ControlGroup__validation--success'],\n          variant === 'error' && styles['ControlGroup__validation--error'],\n          className,\n        )}\n        {...props}\n      >\n        {variant === 'success' && (\n          <span className={styles['ControlGroup__validation-icon--success']}>\n            <CheckCircleFillIcon />\n          </span>\n        )}\n        {variant === 'error' && (\n          <span className={styles['ControlGroup__validation-icon--error']}>\n            <AlertFillIcon />\n          </span>\n        )}\n        {children}\n      </Text>\n    )\n  },\n)\n\nexport const ControlGroup = Object.assign(_ControlGroup, {\n  Label: ControlGroupLabel,\n  Caption: ControlGroupCaption,\n  Validation: ControlGroupValidation,\n})\n"],"mappings":";;;;;;;;AAaA,IAAM,IAAsB,EAA0C,KAAK,EAErE,UAAwB;CAC5B,IAAM,IAAU,EAAW,EAAoB;AAE/C,KAAI,CAAC,EACH,OAAU,MACR,kIACD;AAGH,QAAO;GAIH,IAAgB,GAAoD,EAAC,cAAW,OAAI,GAAG,KAAQ,MAAQ;CAC3G,IAAM,IAAW,EAAM,EAAG,EAEpB,IAAkB,EAAS,QAAQ,EAAM,SAAS,CAAC,MACvD,MAAS,EAAe,EAAM,IAAI,EAAM,SAAS,EAClD,EACK,IAAqB,EAAS,QAAQ,EAAM,SAAS,CAAC,MAC1D,MAAS,EAAe,EAAM,IAAI,EAAM,SAAS,EAClD,EAEK,IACJ,CAAC,KAAmB,GAAG,EAAS,WAAW,KAAsB,GAAG,EAAS,aAAa,CACvF,OAAO,QAAQ,CACf,KAAK,IAAI,IAAI,KAAA;AAElB,QACE,kBAAC,EAAoB,UAArB;EAA8B,OAAO,EAAC,IAAI,GAAS;YACjD,kBAAC,YAAD;GACO;GACL,WAAW,EAAK,EAAO,yBAAyB,EAAU;GAC1D,oBAAkB;GAClB,GAAI;GACJ,CAAA;EAC2B,CAAA;EAEjC,EAGI,IAAoB,GACvB,EAAC,aAAU,cAAW,mBAAgB,GAAG,KAAQ,MAE9C,kBAAC,UAAD;CACO;CACL,WAAW,EAAK,EAAO,qBAAqB,KAAkB,mBAAmB,EAAU;CAC3F,GAAI;WAEJ,kBAAC,GAAD;EAAM,IAAG;EAAO,QAAO;EAAS,MAAK;EAClC;EACI,CAAA;CACA,CAAA,CAGd,EAGK,IAAsB,GAAuD,EAAC,cAAW,GAAG,KAAQ,MAAQ;CAChH,IAAM,EAAC,UAAM,GAAiB;AAE9B,QAAO,kBAAC,GAAD;EAAM,IAAG;EAAO,MAAK;EAAM,SAAQ;EAAa;EAAK,IAAI,GAAG,EAAG;EAAsB;EAAW,GAAI;EAAS,CAAA;EACpH,EAGI,IAAyB,GAC5B,EAAC,cAAW,YAAS,aAAU,GAAG,KAAQ,MAAQ;CACjD,IAAM,EAAC,UAAM,GAAiB;AAE9B,QACE,kBAAC,GAAD;EACE,IAAG;EACH,MAAK;EACA;EACL,IAAI,GAAG,EAAG;EACV,WAAW,EACT,EAAO,0BACP,EAAO,yCACP,MAAY,aAAa,EAAO,sCAChC,MAAY,WAAW,EAAO,oCAC9B,EACD;EACD,GAAI;YAZN;GAcG,MAAY,aACX,kBAAC,QAAD;IAAM,WAAW,EAAO;cACtB,kBAAC,GAAD,EAAuB,CAAA;IAClB,CAAA;GAER,MAAY,WACX,kBAAC,QAAD;IAAM,WAAW,EAAO;cACtB,kBAAC,GAAD,EAAiB,CAAA;IACZ,CAAA;GAER;GACI;;EAGZ,EAEY,IAAe,OAAO,OAAO,GAAe;CACvD,OAAO;CACP,SAAS;CACT,YAAY;CACb,CAAC"}
+{"version":3,"file":"ControlGroup.js","names":[],"sources":["../../../src/forms/ControlGroup/ControlGroup.tsx"],"sourcesContent":["import React, {Children, createContext, forwardRef, isValidElement, useContext, type HTMLAttributes} from 'react'\nimport {clsx} from 'clsx'\nimport {AlertFillIcon, CheckCircleFillIcon} from '@primer/octicons-react'\nimport {useId} from '../../hooks/useId'\n\nimport type {FormValidationStatus} from '..'\nimport {Text} from '../..'\nimport styles from './ControlGroup.module.css'\n\ntype ControlGroupContext = {\n  id?: string\n}\n\nconst ControlGroupContext = createContext<ControlGroupContext | null>(null)\n\nconst useControlGroup = () => {\n  const context = useContext(ControlGroupContext)\n\n  if (!context) {\n    throw new Error(\n      'useControlGroup must be used within an ControlGroupProvider. Did you forget to wrap your component in a <ControlGroupProvider>?',\n    )\n  }\n\n  return context\n}\n\nexport type ControlGroupProps = HTMLAttributes<HTMLFieldSetElement>\nconst _ControlGroup = forwardRef<HTMLFieldSetElement, ControlGroupProps>(({className, id, ...props}, ref) => {\n  const uniqueId = useId(id)\n\n  const containsCaption = Children.toArray(props.children).some(\n    child => isValidElement(child) && child.type === ControlGroupCaption,\n  )\n  const containsValidation = Children.toArray(props.children).some(\n    child => isValidElement(child) && child.type === ControlGroupValidation,\n  )\n\n  const describedBy =\n    [containsCaption && `${uniqueId}-caption`, containsValidation && `${uniqueId}-validation`]\n      .filter(Boolean)\n      .join(' ') || undefined\n\n  return (\n    <ControlGroupContext.Provider value={{id: uniqueId}}>\n      <fieldset\n        ref={ref}\n        className={clsx(styles.ControlGroup__container, className)}\n        aria-describedby={describedBy}\n        {...props}\n      />\n    </ControlGroupContext.Provider>\n  )\n})\n\nexport type ControlGroupLabelProps = {visuallyHidden?: boolean} & HTMLAttributes<HTMLLegendElement>\nconst ControlGroupLabel = forwardRef<HTMLLegendElement, ControlGroupLabelProps>(\n  ({children, className, visuallyHidden, ...props}, ref) => {\n    return (\n      <legend\n        ref={ref}\n        className={clsx(styles.ControlGroup__label, visuallyHidden && 'visually-hidden', className)}\n        {...props}\n      >\n        <Text as=\"span\" weight=\"medium\" size=\"100\">\n          {children}\n        </Text>\n      </legend>\n    )\n  },\n)\n\nexport type ControlGroupCaptionProps = HTMLAttributes<HTMLSpanElement>\nconst ControlGroupCaption = forwardRef<HTMLSpanElement, ControlGroupCaptionProps>(({className, ...props}, ref) => {\n  const {id} = useControlGroup()\n\n  return <Text as=\"span\" size=\"100\" variant=\"muted\" ref={ref} id={`${id}-caption`} className={className} {...props} />\n})\n\nexport type ControlGroupValidationProps = {variant: FormValidationStatus} & HTMLAttributes<HTMLSpanElement>\nconst ControlGroupValidation = forwardRef<HTMLSpanElement, ControlGroupValidationProps>(\n  ({className, variant, children, ...props}, ref) => {\n    const {id} = useControlGroup()\n\n    return (\n      <Text\n        as=\"span\"\n        size=\"100\"\n        ref={ref}\n        id={`${id}-validation`}\n        className={clsx(\n          styles.ControlGroup__validation,\n          styles['ControlGroup__validation--animate-in'],\n          variant === 'success' && styles['ControlGroup__validation--success'],\n          variant === 'error' && styles['ControlGroup__validation--error'],\n          className,\n        )}\n        {...props}\n      >\n        {variant === 'success' && (\n          <span className={styles['ControlGroup__validation-icon--success']}>\n            <CheckCircleFillIcon />\n          </span>\n        )}\n        {variant === 'error' && (\n          <span className={styles['ControlGroup__validation-icon--error']}>\n            <AlertFillIcon />\n          </span>\n        )}\n        {children}\n      </Text>\n    )\n  },\n)\n\nexport const ControlGroup = Object.assign(_ControlGroup, {\n  Label: ControlGroupLabel,\n  Caption: ControlGroupCaption,\n  Validation: ControlGroupValidation,\n})\n"],"mappings":";;;;;;;;;AAaA,IAAM,IAAsB,EAA0C,IAAI,GAEpE,UAAwB;CAC5B,IAAM,IAAU,EAAW,CAAmB;CAE9C,IAAI,CAAC,GACH,MAAU,MACR,iIACF;CAGF,OAAO;AACT,GAGM,IAAgB,GAAoD,EAAC,cAAW,OAAI,GAAG,KAAQ,MAAQ;CAC3G,IAAM,IAAW,EAAM,CAAE,GAEnB,IAAkB,EAAS,QAAQ,EAAM,QAAQ,CAAC,CAAC,MACvD,MAAS,EAAe,CAAK,KAAK,EAAM,SAAS,CACnD,GACM,IAAqB,EAAS,QAAQ,EAAM,QAAQ,CAAC,CAAC,MAC1D,MAAS,EAAe,CAAK,KAAK,EAAM,SAAS,CACnD,GAEM,IACJ,CAAC,KAAmB,GAAG,EAAS,WAAW,KAAsB,GAAG,EAAS,YAAY,CAAC,CACvF,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,KAAK,KAAA;CAElB,OACE,kBAAC,EAAoB,UAArB;EAA8B,OAAO,EAAC,IAAI,EAAQ;YAChD,kBAAC,YAAD;GACO;GACL,WAAW,EAAK,EAAO,yBAAyB,CAAS;GACzD,oBAAkB;GAClB,GAAI;EACL,CAAA;CAC2B,CAAA;AAElC,CAAC,GAGK,IAAoB,GACvB,EAAC,aAAU,cAAW,mBAAgB,GAAG,KAAQ,MAE9C,kBAAC,UAAD;CACO;CACL,WAAW,EAAK,EAAO,qBAAqB,KAAkB,mBAAmB,CAAS;CAC1F,GAAI;WAEJ,kBAAC,GAAD;EAAM,IAAG;EAAO,QAAO;EAAS,MAAK;EAClC;CACG,CAAA;AACA,CAAA,CAGd,GAGM,IAAsB,GAAuD,EAAC,cAAW,GAAG,KAAQ,MAAQ;CAChH,IAAM,EAAC,UAAM,EAAgB;CAE7B,OAAO,kBAAC,GAAD;EAAM,IAAG;EAAO,MAAK;EAAM,SAAQ;EAAa;EAAK,IAAI,GAAG,EAAG;EAAsB;EAAW,GAAI;CAAQ,CAAA;AACrH,CAAC,GAGK,IAAyB,GAC5B,EAAC,cAAW,YAAS,aAAU,GAAG,KAAQ,MAAQ;CACjD,IAAM,EAAC,UAAM,EAAgB;CAE7B,OACE,kBAAC,GAAD;EACE,IAAG;EACH,MAAK;EACA;EACL,IAAI,GAAG,EAAG;EACV,WAAW,EACT,EAAO,0BACP,EAAO,yCACP,MAAY,aAAa,EAAO,sCAChC,MAAY,WAAW,EAAO,oCAC9B,CACF;EACA,GAAI;YAZN;GAcG,MAAY,aACX,kBAAC,QAAD;IAAM,WAAW,EAAO;cACtB,kBAAC,GAAD,CAAsB,CAAA;GAClB,CAAA;GAEP,MAAY,WACX,kBAAC,QAAD;IAAM,WAAW,EAAO;cACtB,kBAAC,GAAD,CAAgB,CAAA;GACZ,CAAA;GAEP;EACG;;AAEV,CACF,GAEa,IAAe,OAAO,OAAO,GAAe;CACvD,OAAO;CACP,SAAS;CACT,YAAY;AACd,CAAC"}

package/esm/forms/ControlGroup/ControlGroup.module.js

@@ -1,15 +1,16 @@
-import './ControlGroup.module-XDWDqxx9.css';var e = {
-	ControlGroup__container: "Primer_Brand__ControlGroup-module__ControlGroup__container___k0gGq",
-	ControlGroup__label: "Primer_Brand__ControlGroup-module__ControlGroup__label___T4WJ_",
-	ControlGroup__validation: "Primer_Brand__ControlGroup-module__ControlGroup__validation___Mw_kk",
+import './ControlGroup.module-XDWDqxx9.css';//#region src/forms/ControlGroup/ControlGroup.module.css
+var e = "Primer_Brand__ControlGroup-module__ControlGroup__container___k0gGq", t = "Primer_Brand__ControlGroup-module__ControlGroup__label___T4WJ_", n = "Primer_Brand__ControlGroup-module__ControlGroup__validation___Mw_kk", r = "Primer_Brand__ControlGroup-module__ControlGroupValidationFadeIn___XyNBx", i = {
+	ControlGroup__container: e,
+	ControlGroup__label: t,
+	ControlGroup__validation: n,
 	"ControlGroup__validation--success": "Primer_Brand__ControlGroup-module__ControlGroup__validation--success___MyYHt",
 	"ControlGroup__validation--error": "Primer_Brand__ControlGroup-module__ControlGroup__validation--error___LauSr",
 	"ControlGroup__validation-icon--success": "Primer_Brand__ControlGroup-module__ControlGroup__validation-icon--success___DM0ZI",
 	"ControlGroup__validation-icon--error": "Primer_Brand__ControlGroup-module__ControlGroup__validation-icon--error___IDxnE",
 	"ControlGroup__validation--animate-in": "Primer_Brand__ControlGroup-module__ControlGroup__validation--animate-in___RqXFv",
-	ControlGroupValidationFadeIn: "Primer_Brand__ControlGroup-module__ControlGroupValidationFadeIn___XyNBx"
+	ControlGroupValidationFadeIn: r
 };
 //#endregion
-export { e as default };
+export { r as ControlGroupValidationFadeIn, e as ControlGroup__container, t as ControlGroup__label, n as ControlGroup__validation, i as default };
 
 //# sourceMappingURL=ControlGroup.module.js.map

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

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from 'react';
+import React, { 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';
@@ -47,10 +47,10 @@ type FormControlHintProps = PropsWithChildren<BaseProps<HTMLSpanElement>>;
  * FormControl
  * {@link https://primer.style/brand/components/FormControl/ See usage examples}.
  */
-export declare const FormControl: (({ children, className, hasBorder, fullWidth, id, required, size, validationStatus, ...rest }: PropsWithChildren<FormControlProps>) => import("react/jsx-runtime").JSX.Element) & {
-    Label: ({ children, className, htmlFor, required, showRequiredIndicator, size, validationStatus, visuallyHidden, ...rest }: PropsWithChildren<FormControlLabelProps>) => import("react/jsx-runtime").JSX.Element;
-    Validation: ({ children, validationStatus, className, ...props }: FormControlValidationProps) => import("react/jsx-runtime").JSX.Element;
-    Hint: ({ className, ...rest }: FormControlHintProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FormControl: (({ children, className, hasBorder, fullWidth, id, required, size, validationStatus, ...rest }: PropsWithChildren<FormControlProps>) => React.JSX.Element) & {
+    Label: ({ children, className, htmlFor, required, showRequiredIndicator, size, validationStatus, visuallyHidden, ...rest }: PropsWithChildren<FormControlLabelProps>) => React.JSX.Element;
+    Validation: ({ children, validationStatus, className, ...props }: FormControlValidationProps) => React.JSX.Element;
+    Hint: ({ className, ...rest }: FormControlHintProps) => React.JSX.Element;
 };
 export {};
 //# sourceMappingURL=FormControl.d.ts.map

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;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"}
+{"version":3,"file":"FormControl.d.ts","sourceRoot":"","sources":["../../../src/forms/FormControl/FormControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,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

@@ -1,7 +1,8 @@
-import e from "../../node_modules/clsx/dist/clsx.js";
+import { clsx as 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 { AlertFillIcon as r } from "../../node_modules/@primer/octicons-react/dist/icons/AlertFillIcon.js";
+import { CheckCircleFillIcon as i } from "../../node_modules/@primer/octicons-react/dist/icons/CheckCircleFillIcon.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";
@@ -90,7 +91,7 @@ var m = ({ children: n, className: r, hasBorder: i, fullWidth: p, id: m, require
 					required: v,
 					validationStatus: b,
 					size: y,
-					showRequiredIndicator: w ? !1 : n.props.showRequiredIndicator
+					showRequiredIndicator: !w && n.props.showRequiredIndicator
 				});
 			}
 			if (t.type === g) {

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 '@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":";;;;;;;;;;;;;;AAyDA,IAAM,KAAQ,EACZ,aACA,cACA,cACA,cACA,OACA,aACA,UAAO,UACP,qBACA,GAAG,QACsC;CACzC,IAAM,IAAW,EAAM,EAAG,EACpB,IAAc,EAAM,SAAS,QAAQ,EAAS,EAE9C,IAAkB,EAAY,MAClC,MAAS,EAAM,eAAe,EAAM,KAAK,EAAM,SAAS,KAAY,EAAM,SAAS,GACpF,EAEK,IAAe,EAAY,MAAK,MAAS,EAAM,eAAe,EAAM,IAAI,EAAM,SAAS,EAAgB,EACvG,IAAqB,EAAY,MACrC,MAAS,EAAM,eAAe,EAAM,IAAI,EAAM,SAAS,EACxD;AAED,QACE,kBAAC,WAAD;EACE,IAAI,gBAAgB;EACpB,WAAW,EACT,EAAO,aACP,KAAa,EAAO,2BACpB,KAAmB,EAAO,0BAC1B,KAAa,EAAO,wBACpB,EACD;EACD,GAAI;YAEH,EAAM,SAAS,IAAI,IAAU,MAAS;AACrC,OAAI,CAAC,EAAM,eAAe,EAAM,CAAE,QAAO;GAEzC,IAAM,IACJ,CAAC,KAAgB,GAAG,EAAS,QAAQ,KAAsB,GAAG,EAAS,aAAa,CACjF,OAAO,QAAQ,CACf,KAAK,IAAI,IAAI,KAAA;AAElB,OAAI,EAAM,SAAS,GAAW;IAC5B,IAAM,IAAU;AAChB,WAAO,EAAM,aAAa,GAAS;KACjC,WAAW,EAAK,EAAQ,MAAM,UAAU;KACxC,IAAI;KACJ,MAAM,EAAQ,MAAM,QAAQ;KAC5B,UAAU,EAAQ,MAAM,YAAY;KACpC,kBAAkB,EAAQ,MAAM,oBAAoB;KACpD;KACA;KACA,oBAAoB;KACrB,CAAC;;AAGJ,OAAI,EAAM,SAAS,GAAU;IAC3B,IAAM,IAAU;AAChB,WAAO,EAAM,aAAa,GAAS;KACjC,WAAW,EAAK,EAAQ,MAAM,UAAU;KACxC,IAAI;KACJ,MAAM,EAAQ,MAAM,QAAQ;KAC5B,UAAU,EAAQ,MAAM,YAAY;KACpC,kBAAkB,EAAQ,MAAM,oBAAoB;KACpD;KACA;KACA,oBAAoB;KACrB,CAAC;;AAGJ,OAAI,EAAM,SAAS,GAAQ;IACzB,IAAM,IAAU;AAChB,WAAO,EAAM,aAAa,GAAS;KACjC,WAAW,EAAK,EAAQ,MAAM,UAAU;KACxC,IAAI;KACJ,MAAM,EAAQ,MAAM,QAAQ;KAC5B,UAAU,EAAQ,MAAM,YAAY;KACpC,kBAAkB,EAAQ,MAAM,oBAAoB;KACpD;KACA;KACA,oBAAoB;KACrB,CAAC;;AAGJ,OAAI,EAAM,SAAS,GAAU;IAC3B,IAAM,IAAU;AAChB,WAAO,EAAM,aAAa,GAAS;KACjC,WAAW,EAAK,EAAQ,MAAM,WAAW,EAAO,iCAAiC;KACjF,IAAI;KACJ,MAAM,EAAQ,MAAM,QAAQ;KAC5B,UAAU,EAAQ,MAAM,YAAY;KACpC,kBAAkB,EAAQ,MAAM,oBAAoB;KACpD,oBAAoB;KACrB,CAAC;;AAGJ,OAAI,EAAM,SAAS,GAAO;IACxB,IAAM,IAAU;AAChB,WAAO,EAAM,aAAa,GAAS;KACjC,WAAW,EAAK,KAAmB,EAAO,+BAA+B,EAAQ,MAAM,UAAU;KACjG,IAAI;KACJ,MAAM,EAAQ,MAAM;KACpB,UAAU,EAAQ,MAAM,YAAY;KACpC,oBAAoB;KACrB,CAAC;;AAGJ,OAAI,EAAM,SAAS,GAAkB;IACnC,IAAM,IAAU;AAChB,WAAO,EAAM,aAAa,GAAS;KACjC,WAAW,EAAK,KAAmB,EAAO,gCAAgC,EAAQ,MAAM,UAAU;KAClG,SAAS;KACT,UAAU,EAAQ,MAAM;KACxB;KACA;KACA;KACA,uBAAuB,IAAkB,KAAQ,EAAQ,MAAM;KAChE,CAAC;;AAGJ,OAAI,EAAM,SAAS,GAAuB;IACxC,IAAM,IAAU;AAChB,WAAO,EAAM,aAAa,GAAS;KACjC,WAAW,EAAK,KAAmB,EAAO,oCAAoC,EAAQ,MAAM,UAAU;KACtG;KACA,IAAI,GAAG,EAAS;KACjB,CAAC;;AAGJ,OAAI,EAAM,SAAS,GAAiB;IAClC,IAAM,IAAU;AAChB,WAAO,EAAM,aAAa,GAAS,EACjC,IAAI,GAAG,EAAS,QACjB,CAAC;;AAGJ,UAAO;IACP;EACM,CAAA;GAaR,KAAoB,EACxB,aACA,cACA,YACA,aACA,2BAAwB,IACxB,UAAO,UACP,qBACA,mBACA,GAAG,QAGD,kBAAC,SAAD;CACW;CACT,WAAW,EACT,EAAO,sBACP,KAAoB,EAAO,sBAAsB,MACjD,EAAO,sBAAsB,MAC7B,KAAkB,EAAO,uCACzB,EACD;CACD,GAAI;WATN,CAWG,EAAM,SAAS,IAAI,IAAU,MACxB,EAAM,eAAqC,EAAM,IAAI,EAAM,SAAS,IAC/D,EAAM,aAAa,GAAO,EAC/B,WAAW,EAAK,EAAO,yBAAyB,EAAM,MAAM,UAAU,EACvE,CAAC,GAEG,EACP,EAED,KAAY,KACX,kBAAC,QAAD;EAAM,WAAW,EAAO;EAA+B,eAAA;YAAvD,CACG,KAAI,IAEA;IAEH;IASN,KAAyB,EAAC,aAAU,qBAAkB,cAAW,GAAG,QAEtE,kBAAC,GAAD;CACE,IAAG;CACH,MAAK;CACL,WAAW,EACT,EAAO,2BACP,KAAoB,EAAO,uCAC3B,KAAoB,EAAO,2BAA2B,MACtD,EACD;CACD,GAAI;WATN;EAWG,MAAqB,WACpB,kBAAC,QAAD;GAAM,WAAW,EAAO;aACtB,kBAAC,GAAD,EAAiB,CAAA;GACZ,CAAA;EAER,MAAqB,aACpB,kBAAC,QAAD;GAAM,WAAW,EAAO;aACtB,kBAAC,GAAD,EAAuB,CAAA;GAClB,CAAA;EAER;EACI;IAML,KAAmB,EAAC,cAAW,GAAG,QAC/B,kBAAC,GAAD;CAAM,IAAG;CAAO,MAAK;CAAM,SAAQ;CAAQ,WAAW,EAAK,EAAO,qBAAqB,EAAU;CAAE,GAAI;CAAQ,CAAA,EAO3G,IAAc,OAAO,OAAO,GAAM;CAC7C,OAAO;CACP,YAAY;CACZ,MAAM;CACP,CAAC"}
+{"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/FormControl/FormControl.module.js

@@ -1,5 +1,6 @@
-import './FormControl.module-CSNT689n.css';var e = {
-	FormControl: "Primer_Brand__FormControl-module__FormControl___xyCI6",
+import './FormControl.module-CSNT689n.css';//#region src/forms/FormControl/FormControl.module.css
+var e = "Primer_Brand__FormControl-module__FormControl___xyCI6", t = "Primer_Brand__FormControl-module__FormControlValidationFadeIn___tj0TP", n = {
+	FormControl: e,
 	"FormControl--fullWidth": "Primer_Brand__FormControl-module__FormControl--fullWidth____kgvY",
 	"FormControl--checkbox": "Primer_Brand__FormControl-module__FormControl--checkbox___bF4ig",
 	"FormControl--border": "Primer_Brand__FormControl-module__FormControl--border___JkgNP",
@@ -16,10 +17,10 @@ import './FormControl.module-CSNT689n.css';var e = {
 	"FormControl-validation-success-icon": "Primer_Brand__FormControl-module__FormControl-validation-success-icon___zPbVN",
 	"FormControl-validation-error-icon": "Primer_Brand__FormControl-module__FormControl-validation-error-icon___hijkD",
 	"FormControl-validation--animate-in": "Primer_Brand__FormControl-module__FormControl-validation--animate-in___bQToQ",
-	FormControlValidationFadeIn: "Primer_Brand__FormControl-module__FormControlValidationFadeIn___tj0TP",
+	FormControlValidationFadeIn: t,
 	"FormControl-validation-checkbox": "Primer_Brand__FormControl-module__FormControl-validation-checkbox___o5dVo"
 };
 //#endregion
-export { e as default };
+export { e as FormControl, t as FormControlValidationFadeIn, n as default };
 
 //# sourceMappingURL=FormControl.module.js.map

package/esm/forms/Radio/Radio.js

@@ -1,4 +1,4 @@
-import e from "../../node_modules/clsx/dist/clsx.js";
+import { clsx as 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                                                                                                        */

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 '@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"}
+{"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,IAAI,GACtE,IAAW,EAAM,CAAE,GAEnB,IAAU,QAAkB;EAChC,AAAI,CAAC,KAAY,EAAS,WACxB,EAAS,QAAQ,MAAM;CAE3B,GAAG,CAAC,GAAU,CAAQ,CAAC;CAEvB,OACE,kBAAC,QAAD;EAAM,WAAW,EAAO;YAAxB,CACE,kBAAC,SAAD;GACE,IAAI;GACJ,gBAAc,IAAU,SAAS;GACxB;GACT,WAAW,EAAK,EAAO,cAAc;GAC3B;GACV,MAAM;GACI;GACV,KAAK;GACK;GACV,MAAK;GACE;GACP,GAAI;EACL,CAAA,GACD,kBAAC,QAAD;GAAM,WAAW,EAAK,EAAO,OAAO,CAAS;GAAY;GAAS,UAAU;GAAI,eAAY;aAC1F,kBAAC,QAAD,EAAM,WAAW,EAAO,aAAe,CAAA;EACnC,CAAA,CACF;;AAEV,CAE6C"}

package/esm/forms/Radio/Radio.module.js

@@ -1,10 +1,11 @@
-import './Radio.module-B470XLdO.css';var e = {
+import './Radio.module-B470XLdO.css';//#region src/forms/Radio/Radio.module.css
+var e = "Primer_Brand__Radio-module__Radio___vTG_e", t = {
 	"Radio-wrapper": "Primer_Brand__Radio-module__Radio-wrapper___zXaOV",
-	Radio: "Primer_Brand__Radio-module__Radio___vTG_e",
+	Radio: e,
 	"Radio-input": "Primer_Brand__Radio-module__Radio-input___K0b_k",
 	"Radio-dot": "Primer_Brand__Radio-module__Radio-dot___9afdK"
 };
 //#endregion
-export { e as default };
+export { e as Radio, t as default };
 
 //# sourceMappingURL=Radio.module.js.map

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

@@ -41,7 +41,7 @@ export type OptGroupProps = {
  * Select
  */
 export declare const Select: React.ForwardRefExoticComponent<Omit<SelectProps, "ref"> & React.RefAttributes<unknown>> & {
-    Option: ({ children, value, ...rest }: OptionProps) => import("react/jsx-runtime").JSX.Element;
-    OptGroup: ({ children, label, ...rest }: OptGroupProps) => import("react/jsx-runtime").JSX.Element;
+    Option: ({ children, value, ...rest }: OptionProps) => React.JSX.Element;
+    OptGroup: ({ children, label, ...rest }: OptGroupProps) => React.JSX.Element;
 };
 //# sourceMappingURL=Select.d.ts.map

package/esm/forms/Select/Select.js

@@ -1,4 +1,4 @@
-import e from "../../node_modules/clsx/dist/clsx.js";
+import { clsx as 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";

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 '@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"}
+{"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,2BACrB;WAEA,kBAAC,UAAD;EACE,gBAAc,MAAqB;EACnC,WAAW,EACT,EAAO,QACP,EAAO,WAAW,MAClB,UACA,KAAa,EAAO,sBACpB,CACF;EACU;EACL;EACL,GAAI;YAXN,CAaG,KACC,kBAAC,UAAD;GAAQ,OAAM;GAAa;aACxB;EACK,CAAA,GAET,CACK;;AACJ,CAAA,CAI+B,GAoC5B,IAAS,OAAO,OAAO,GAAY;CAC9C,SA/Bc,EAAC,aAAU,UAAO,GAAG,QAEjC,kBAAC,UAAD;EAAe;EAAO,GAAI;EACvB;CACK,CAAA;CA4BV,WAbgB,EAAC,aAAU,UAAO,GAAG,QAEnC,kBAAC,YAAD;EAAiB;EAAO,GAAI;EACzB;CACO,CAAA;AAUd,CAAC"}