@primer/react-brand 0.75.0-rc.a3f7dbd6 → 0.75.0

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

package/esm/forms/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"}

package/esm/forms/Select/Select.module.js

@@ -1,5 +1,6 @@
-import './Select.module-CRuV5AGO.css';var e = {
-	Select: "Primer_Brand__Select-module__Select___EmI6J",
+import './Select.module-CRuV5AGO.css';//#region src/forms/Select/Select.module.css
+var e = "Primer_Brand__Select-module__Select___EmI6J", t = {
+	Select: e,
 	"Select-wrapper--disabled": "Primer_Brand__Select-module__Select-wrapper--disabled___YhyYg",
 	"Select-wrapper": "Primer_Brand__Select-module__Select-wrapper___sX7AR",
 	"Select-wrapper--medium": "Primer_Brand__Select-module__Select-wrapper--medium___0yHXL",
@@ -11,6 +12,6 @@ import './Select.module-CRuV5AGO.css';var e = {
 	"Select--error": "Primer_Brand__Select-module__Select--error___FxIYn"
 };
 //#endregion
-export { e as default };
+export { e as Select, t as default };
 
 //# sourceMappingURL=Select.module.js.map

package/esm/forms/TextInput/TextInput.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 { Text as n } from "../../Text/Text.js";
 import '../../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes-C05YPRXo.css';/* empty css                                                                                                        */

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

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

package/esm/forms/TextInput/TextInput.module.js

@@ -1,5 +1,6 @@
-import './TextInput.module-CrmcmO_m.css';var e = {
-	TextInput: "Primer_Brand__TextInput-module__TextInput___d6r3B",
+import './TextInput.module-CrmcmO_m.css';//#region src/forms/TextInput/TextInput.module.css
+var e = "Primer_Brand__TextInput-module__TextInput___d6r3B", t = "Primer_Brand__TextInput-module__Checkbox___NeBpg", n = {
+	TextInput: e,
 	"TextInput-wrapper--medium": "Primer_Brand__TextInput-module__TextInput-wrapper--medium___MBN0V",
 	"TextInput--medium": "Primer_Brand__TextInput-module__TextInput--medium___fpyd0",
 	"TextInput--large": "Primer_Brand__TextInput-module__TextInput--large___S8mM0",
@@ -40,9 +41,9 @@ import './TextInput.module-CrmcmO_m.css';var e = {
 	"TextInput-trailing-text--success": "Primer_Brand__TextInput-module__TextInput-trailing-text--success___WCi_J",
 	"TextInput-leading-text--error": "Primer_Brand__TextInput-module__TextInput-leading-text--error___WAcZB",
 	"TextInput-trailing-text--error": "Primer_Brand__TextInput-module__TextInput-trailing-text--error____yUSw",
-	Checkbox: "Primer_Brand__TextInput-module__Checkbox___NeBpg"
+	Checkbox: t
 };
 //#endregion
-export { e as default };
+export { t as Checkbox, e as TextInput, n as default };
 
 //# sourceMappingURL=TextInput.module.js.map

package/esm/forms/Textarea/Textarea.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 "./Textarea.module.js";
 import { forwardRef as n } from "react";

package/esm/forms/Textarea/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","names":[],"sources":["../../../src/forms/Textarea/Textarea.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 './Textarea.module.css'\n\nexport const DEFAULT_TEXTAREA_ROWS = 7\nexport const DEFAULT_TEXTAREA_COLS = 30\nexport const DEFAULT_TEXTAREA_RESIZE = 'both'\n\nexport type TextareaProps = {\n  /**\n   * Applies full width styling.\n   */\n  fullWidth?: boolean\n  /**\n   * Removes border\n   */\n  invisible?: boolean\n  /**\n   * Applies monospace styling.\n   */\n  monospace?: boolean\n  /**\n   * Applies alternative sizing to the input\n   */\n  size?: FormInputSizes\n  /**\n   * Applies a required attribute to the input\n   */\n  required?: boolean\n  /**\n   *\n   */\n  validationStatus?: FormValidationStatus\n  /**\n   * Allows resizing of the textarea\n   */\n  resize?: 'none' | 'both' | 'horizontal' | 'vertical'\n} & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> &\n  BaseProps<HTMLTextAreaElement>\n\nconst testIds = {\n  root: 'Textarea',\n  get outerContainer() {\n    return `${this.root}-outer-container`\n  },\n}\n\nconst _Textarea = (\n  {\n    children,\n    className,\n    cols = DEFAULT_TEXTAREA_COLS,\n    disabled,\n    fullWidth = false,\n    invisible = false,\n    monospace,\n    placeholder,\n    size = 'medium',\n    validationStatus,\n    required,\n    resize = DEFAULT_TEXTAREA_RESIZE,\n    rows = DEFAULT_TEXTAREA_ROWS,\n    ...rest\n  }: TextareaProps,\n  ref,\n) => {\n  return (\n    <span\n      className={clsx(\n        styles['Textarea-wrapper'],\n        fullWidth && styles['Textarea-wrapper--fullWidth'],\n        invisible && styles['Textarea-wrapper--invisible'],\n        disabled && styles['Textarea-wrapper--disabled'],\n        monospace && styles['Textarea-wrapper--monospace'],\n        validationStatus && styles[`Textarea-wrapper--${validationStatus}`],\n      )}\n      data-testid={testIds.outerContainer}\n    >\n      <textarea\n        ref={ref}\n        className={clsx(\n          styles.Textarea,\n          'Textarea',\n          styles[`Textarea--${size}`],\n          styles[`Textarea-resize--${resize}`],\n          fullWidth && styles['Textarea--fullWidth'],\n          validationStatus && styles[`Textarea--${validationStatus}`],\n          className,\n        )}\n        placeholder={placeholder}\n        disabled={disabled}\n        aria-invalid={validationStatus === 'error'}\n        required={required}\n        rows={rows}\n        cols={cols}\n        {...rest}\n      >\n        {children}\n      </textarea>\n    </span>\n  )\n}\n\nexport const Textarea = forwardRef(_Textarea)\n\nTextarea.displayName = 'Textarea'\n"],"mappings":";;;;;;AASA,IAAa,IAAwB,GACxB,IAAwB,IACxB,IAA0B,QAkCjC,IAAU;CACd,MAAM;CACN,IAAI,iBAAiB;AACnB,SAAO,GAAG,KAAK,KAAK;;CAEvB,EA0DY,IAAW,GAvDtB,EACE,aACA,cACA,UAAA,IACA,aACA,eAAY,IACZ,eAAY,IACZ,cACA,gBACA,UAAO,UACP,qBACA,aACA,YAAS,GACT,UAAA,GACA,GAAG,KAEL,MAGE,kBAAC,QAAD;CACE,WAAW,EACT,EAAO,qBACP,KAAa,EAAO,gCACpB,KAAa,EAAO,gCACpB,KAAY,EAAO,+BACnB,KAAa,EAAO,gCACpB,KAAoB,EAAO,qBAAqB,KACjD;CACD,eAAa,EAAQ;WAErB,kBAAC,YAAD;EACO;EACL,WAAW,EACT,EAAO,UACP,YACA,EAAO,aAAa,MACpB,EAAO,oBAAoB,MAC3B,KAAa,EAAO,wBACpB,KAAoB,EAAO,aAAa,MACxC,EACD;EACY;EACH;EACV,gBAAc,MAAqB;EACzB;EACJ;EACA;EACN,GAAI;EAEH;EACQ,CAAA;CACN,CAAA,CAIkC;AAE7C,EAAS,cAAc"}
+{"version":3,"file":"Textarea.js","names":[],"sources":["../../../src/forms/Textarea/Textarea.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 './Textarea.module.css'\n\nexport const DEFAULT_TEXTAREA_ROWS = 7\nexport const DEFAULT_TEXTAREA_COLS = 30\nexport const DEFAULT_TEXTAREA_RESIZE = 'both'\n\nexport type TextareaProps = {\n  /**\n   * Applies full width styling.\n   */\n  fullWidth?: boolean\n  /**\n   * Removes border\n   */\n  invisible?: boolean\n  /**\n   * Applies monospace styling.\n   */\n  monospace?: boolean\n  /**\n   * Applies alternative sizing to the input\n   */\n  size?: FormInputSizes\n  /**\n   * Applies a required attribute to the input\n   */\n  required?: boolean\n  /**\n   *\n   */\n  validationStatus?: FormValidationStatus\n  /**\n   * Allows resizing of the textarea\n   */\n  resize?: 'none' | 'both' | 'horizontal' | 'vertical'\n} & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> &\n  BaseProps<HTMLTextAreaElement>\n\nconst testIds = {\n  root: 'Textarea',\n  get outerContainer() {\n    return `${this.root}-outer-container`\n  },\n}\n\nconst _Textarea = (\n  {\n    children,\n    className,\n    cols = DEFAULT_TEXTAREA_COLS,\n    disabled,\n    fullWidth = false,\n    invisible = false,\n    monospace,\n    placeholder,\n    size = 'medium',\n    validationStatus,\n    required,\n    resize = DEFAULT_TEXTAREA_RESIZE,\n    rows = DEFAULT_TEXTAREA_ROWS,\n    ...rest\n  }: TextareaProps,\n  ref,\n) => {\n  return (\n    <span\n      className={clsx(\n        styles['Textarea-wrapper'],\n        fullWidth && styles['Textarea-wrapper--fullWidth'],\n        invisible && styles['Textarea-wrapper--invisible'],\n        disabled && styles['Textarea-wrapper--disabled'],\n        monospace && styles['Textarea-wrapper--monospace'],\n        validationStatus && styles[`Textarea-wrapper--${validationStatus}`],\n      )}\n      data-testid={testIds.outerContainer}\n    >\n      <textarea\n        ref={ref}\n        className={clsx(\n          styles.Textarea,\n          'Textarea',\n          styles[`Textarea--${size}`],\n          styles[`Textarea-resize--${resize}`],\n          fullWidth && styles['Textarea--fullWidth'],\n          validationStatus && styles[`Textarea--${validationStatus}`],\n          className,\n        )}\n        placeholder={placeholder}\n        disabled={disabled}\n        aria-invalid={validationStatus === 'error'}\n        required={required}\n        rows={rows}\n        cols={cols}\n        {...rest}\n      >\n        {children}\n      </textarea>\n    </span>\n  )\n}\n\nexport const Textarea = forwardRef(_Textarea)\n\nTextarea.displayName = 'Textarea'\n"],"mappings":";;;;;;AASA,IAAa,IAAwB,GACxB,IAAwB,IACxB,IAA0B,QAkCjC,IAAU;CACd,MAAM;CACN,IAAI,iBAAiB;EACnB,OAAO,GAAG,KAAK,KAAK;CACtB;AACF,GA0Da,IAAW,GAvDtB,EACE,aACA,cACA,UAAA,IACA,aACA,eAAY,IACZ,eAAY,IACZ,cACA,gBACA,UAAO,UACP,qBACA,aACA,YAAS,GACT,UAAA,GACA,GAAG,KAEL,MAGE,kBAAC,QAAD;CACE,WAAW,EACT,EAAO,qBACP,KAAa,EAAO,gCACpB,KAAa,EAAO,gCACpB,KAAY,EAAO,+BACnB,KAAa,EAAO,gCACpB,KAAoB,EAAO,qBAAqB,IAClD;CACA,eAAa,EAAQ;WAErB,kBAAC,YAAD;EACO;EACL,WAAW,EACT,EAAO,UACP,YACA,EAAO,aAAa,MACpB,EAAO,oBAAoB,MAC3B,KAAa,EAAO,wBACpB,KAAoB,EAAO,aAAa,MACxC,CACF;EACa;EACH;EACV,gBAAc,MAAqB;EACzB;EACJ;EACA;EACN,GAAI;EAEH;CACO,CAAA;AACN,CAAA,CAIkC;AAE5C,EAAS,cAAc"}