@primer/react-brand 0.68.0-rc.59bbed40 → 0.68.0-rc.982c487b

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

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

package/esm/forms/FormControl/FormControl.module-UQqb_zPR.css

@@ -0,0 +1 @@
+.Primer_Brand__FormControl-module__FormControl___xyCI6{font-family:var(--brand-body-fontFamily);gap:var(--base-size-8);flex-direction:column;display:inline-flex}.Primer_Brand__FormControl-module__FormControl--fullWidth____kgvY{width:100%}.Primer_Brand__FormControl-module__FormControl--checkbox___bF4ig{grid-template-columns:auto 1fr;display:grid}.Primer_Brand__FormControl-module__FormControl--border___JkgNP{border:1px solid var(--brand-control-color-border-default);border-radius:var(--brand-borderRadius-medium);padding:var(--base-size-12)}.Primer_Brand__FormControl-module__FormControl-label____oJE0{color:var(--brand-color-text-default);font-weight:var(--base-text-weight-medium);font-family:var(--brand-body-fontFamily)}.Primer_Brand__FormControl-module__FormControl-label--visually-hidden___1ZVMo{clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.Primer_Brand__FormControl-module__FormControl-label--medium___bj84g{letter-spacing:var(--brand-text-letterSpacing-100);font-size:var(--brand-text-size-100);line-height:var(--brand-text-lineHeight-100)}.Primer_Brand__FormControl-module__FormControl-label--large___o1TMW{letter-spacing:var(--brand-text-letterSpacing-300);font-size:var(--brand-text-size-300);line-height:var(--brand-text-lineHeight-300)}.Primer_Brand__FormControl-module__FormControl-label--checkbox___xZxFK{cursor:pointer;font-size:var(--brand-text-size-100);font-weight:var(--base-text-weight-medium);line-height:var(--base-size-24);width:100%;position:relative;top:2px}.Primer_Brand__FormControl-module__FormControl-control--radio___ml5zt{margin:2px 0 0}.Primer_Brand__FormControl-module__FormControl-hint___DmKlt{grid-column:1/3;display:block}.Primer_Brand__FormControl-module__FormControl-validation___GOPld{gap:var(--base-size-4);display:flex}.Primer_Brand__FormControl-module__FormControl-validation--success___kOKNY{color:var(--brand-color-success-fg)}.Primer_Brand__FormControl-module__FormControl-validation--error___T5KVh{color:var(--brand-color-danger-fg)}.Primer_Brand__FormControl-module__FormControl-validation-success-icon___zPbVN{position:relative;top:-1px}.Primer_Brand__FormControl-module__FormControl-validation-error-icon___hijkD{position:relative;top:-.5px}.Primer_Brand__FormControl-module__FormControl-validation--animate-in___bQToQ{animation:.17s cubic-bezier(.44,.74,.36,1) Primer_Brand__FormControl-module__FormControlValidationFadeIn___tj0TP}@keyframes Primer_Brand__FormControl-module__FormControlValidationFadeIn___tj0TP{0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}.Primer_Brand__FormControl-module__FormControl-validation-checkbox___o5dVo{grid-column:1/3}

package/esm/forms/FormControl/FormControl.module.js

@@ -0,0 +1,25 @@
+import './FormControl.module-UQqb_zPR.css';var e = {
+	FormControl: "Primer_Brand__FormControl-module__FormControl___xyCI6",
+	"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",
+	"FormControl-label": "Primer_Brand__FormControl-module__FormControl-label____oJE0",
+	"FormControl-label--visually-hidden": "Primer_Brand__FormControl-module__FormControl-label--visually-hidden___1ZVMo",
+	"FormControl-label--medium": "Primer_Brand__FormControl-module__FormControl-label--medium___bj84g",
+	"FormControl-label--large": "Primer_Brand__FormControl-module__FormControl-label--large___o1TMW",
+	"FormControl-label--checkbox": "Primer_Brand__FormControl-module__FormControl-label--checkbox___xZxFK",
+	"FormControl-control--radio": "Primer_Brand__FormControl-module__FormControl-control--radio___ml5zt",
+	"FormControl-hint": "Primer_Brand__FormControl-module__FormControl-hint___DmKlt",
+	"FormControl-validation": "Primer_Brand__FormControl-module__FormControl-validation___GOPld",
+	"FormControl-validation--success": "Primer_Brand__FormControl-module__FormControl-validation--success___kOKNY",
+	"FormControl-validation--error": "Primer_Brand__FormControl-module__FormControl-validation--error___T5KVh",
+	"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",
+	"FormControl-validation-checkbox": "Primer_Brand__FormControl-module__FormControl-validation-checkbox___o5dVo"
+};
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=FormControl.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormControl.module.js","names":[],"sources":["../../../src/forms/FormControl/FormControl.module.css"],"sourcesContent":[".FormControl {\n  display: inline-flex;\n  font-family: var(--brand-body-fontFamily);\n  flex-direction: column;\n  gap: var(--base-size-8);\n}\n\n.FormControl--fullWidth {\n  width: 100%;\n}\n\n.FormControl--checkbox {\n  display: grid;\n  grid-template-columns: auto 1fr;\n}\n\n.FormControl--border {\n  border: 1px solid var(--brand-control-color-border-default);\n  border-radius: var(--brand-borderRadius-medium);\n  padding: var(--base-size-12);\n}\n\n.FormControl-label {\n  color: var(--brand-color-text-default);\n  font-weight: var(--base-text-weight-medium);\n  font-family: var(--brand-body-fontFamily);\n}\n\n.FormControl-label--visually-hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n}\n\n.FormControl-label--medium {\n  letter-spacing: var(--brand-text-letterSpacing-100);\n  font-size: var(--brand-text-size-100);\n  line-height: var(--brand-text-lineHeight-100);\n}\n\n.FormControl-label--large {\n  letter-spacing: var(--brand-text-letterSpacing-300);\n  font-size: var(--brand-text-size-300);\n  line-height: var(--brand-text-lineHeight-300);\n}\n\n.FormControl-label--checkbox {\n  cursor: pointer;\n  font-size: var(--brand-text-size-100);\n  font-weight: var(--base-text-weight-medium);\n  line-height: var(--base-size-24); /* FIXME */\n  position: relative;\n  top: 2px;\n  width: 100%;\n}\n\n.FormControl-control--radio {\n  margin: 2px 0 0;\n}\n\n.FormControl-hint {\n  grid-column: 1 / 3;\n  display: block;\n}\n\n/*Validation*/\n.FormControl-validation {\n  display: flex;\n  gap: var(--base-size-4);\n}\n\n.FormControl-validation--success {\n  color: var(--brand-color-success-fg);\n}\n\n.FormControl-validation--error {\n  color: var(--brand-color-danger-fg);\n}\n\n.FormControl-validation-success-icon {\n  position: relative;\n  top: -1px;\n}\n\n.FormControl-validation-error-icon {\n  position: relative;\n  top: -0.5px;\n}\n\n.FormControl-validation--animate-in {\n  animation: 170ms FormControlValidationFadeIn cubic-bezier(0.44, 0.74, 0.36, 1);\n}\n\n@keyframes FormControlValidationFadeIn {\n  0% {\n    opacity: 0;\n    transform: translateY(-100%);\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.FormControl-validation-checkbox {\n  grid-column: 1 / 3;\n}\n"],"mappings":""}

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

@@ -0,0 +1,2 @@
+export * from './FormControl';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/forms/FormControl/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA"}

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

@@ -0,0 +1,19 @@
+import React, { type InputHTMLAttributes } from 'react';
+import type { BaseProps } from '../../component-helpers';
+export type RadioProps = {
+    /**
+     * Apply inactive visual appearance to the Radio
+     */
+    disabled?: boolean;
+    /**
+     * Indicates whether the Radio must be checked
+     */
+    required?: boolean;
+    /**
+     * A unique value that is never shown to the user.
+     * Used during form submission and to identify which Radio inputs are selected
+     */
+    value?: string;
+} & Exclude<InputHTMLAttributes<HTMLInputElement>, 'value'> & BaseProps<HTMLInputElement>;
+export declare const Radio: React.ForwardRefExoticComponent<Omit<RadioProps, "ref"> & React.RefAttributes<unknown>>;
+//# sourceMappingURL=Radio.d.ts.map

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

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

package/esm/forms/Radio/Radio.js

@@ -0,0 +1,38 @@
+import e from "../../node_modules/clsx/dist/clsx.js";
+import { useId as t } from "../../hooks/useId.js";
+import { useProvidedRefOrCreate as n } from "../../hooks/useRef.js";
+import r from "./Radio.module.js";
+import { forwardRef as i, useCallback as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+var c = i(({ checked: i, className: c, disabled: l, id: u, onChange: d, required: f, value: p, ...m }, h) => {
+	let g = n(h || null), _ = t(u), v = a(() => {
+		!l && g.current && g.current.click();
+	}, [l, g]);
+	return /* @__PURE__ */ s("span", {
+		className: r["Radio-wrapper"],
+		children: [/* @__PURE__ */ o("input", {
+			id: _,
+			"aria-checked": i ? "true" : "false",
+			checked: i,
+			className: e(r["Radio-input"]),
+			disabled: l,
+			name: p,
+			onChange: d,
+			ref: g,
+			required: f,
+			type: "radio",
+			value: p,
+			...m
+		}), /* @__PURE__ */ o("span", {
+			className: e(r.Radio, c),
+			onClick: v,
+			tabIndex: -1,
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ o("span", { className: r["Radio-dot"] })
+		})]
+	});
+});
+//#endregion
+export { c as Radio };
+
+//# sourceMappingURL=Radio.js.map

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

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

package/esm/forms/Radio/Radio.module-C_NUEyme.css

@@ -0,0 +1 @@
+.Primer_Brand__Radio-module__Radio-wrapper___zXaOV{-webkit-user-select:none;user-select:none;cursor:pointer;grid-row:1;position:relative}.Primer_Brand__Radio-module__Radio___vTG_e{background-color:var(--brand-control-radio-bg-default);border:solid 1px var(--brand-control-color-border-default);border:solid var(--brand-borderWidth-thick,1px) var(--brand-control-color-border-default);cursor:pointer;border-radius:50%;outline:none;justify-content:center;align-items:center;width:20px;height:20px;margin:3px 3px 0 5px;display:inline-flex;position:relative;box-shadow:0 0 0 3px #0000}.Primer_Brand__Radio-module__Radio___vTG_e:before{content:"";border:2px solid var(--brand-control-radio-bg-default);border-radius:50%;width:24px;height:24px;position:absolute;inset:-4px -2px -2px -4px}.Primer_Brand__Radio-module__Radio-input___K0b_k{clip:rect(1px, 1px, 1px, 1px);border:0;width:1px;height:1px;padding:0;position:absolute;overflow:hidden}.Primer_Brand__Radio-module__Radio-dot___9afdK{border-color:var(--brand-control-radio-dot-default);background:var(--brand-control-radio-dot-default);opacity:0;width:12px;height:12px;transition:transform .35s var(--brand-animation-easing-glide), opacity .35s var(--brand-animation-easing-glide);border-radius:50%;display:block;position:absolute;transform:scale(.7)}@media (prefers-reduced-motion){.Primer_Brand__Radio-module__Radio-dot___9afdK{transition:none}}.Primer_Brand__Radio-module__Radio-input___K0b_k:checked+.Primer_Brand__Radio-module__Radio___vTG_e{background-color:var(--brand-control-radio-bg-checked);border-color:var(--brand-control-radio-border-checked)}.Primer_Brand__Radio-module__Radio-input___K0b_k:checked+.Primer_Brand__Radio-module__Radio___vTG_e .Primer_Brand__Radio-module__Radio-dot___9afdK{opacity:1;transform:scale(1)}.Primer_Brand__Radio-module__Radio-input___K0b_k:focus+.Primer_Brand__Radio-module__Radio___vTG_e{box-shadow:0 0 0 4px var(--brand-color-focus)}.Primer_Brand__Radio-module__Radio-input___K0b_k:checked:focus+.Primer_Brand__Radio-module__Radio___vTG_e{border-color:var(--brand-control-radio-border-checked)}.Primer_Brand__Radio-module__Radio-input___K0b_k[disabled]+.Primer_Brand__Radio-module__Radio___vTG_e,.Primer_Brand__Radio-module__Radio-input___K0b_k[disabled]:checked+.Primer_Brand__Radio-module__Radio___vTG_e{-webkit-text-fill-color:var(--brand-control-color-fg-disabled);color:var(--brand-control-color-fg-disabled);cursor:not-allowed;background-color:var(--brand-control-radio-bg-disabled);border-color:var(--brand-control-color-border-disabled);opacity:1}@media (forced-colors:active){.Primer_Brand__Radio-module__Radio-input___K0b_k:focus+.Primer_Brand__Radio-module__Radio___vTG_e{outline:var(--brand-borderWidth-thick) solid Highlight;outline-offset:var(--base-size-4)}.Primer_Brand__Radio-module__Radio-input___K0b_k:checked+.Primer_Brand__Radio-module__Radio___vTG_e .Primer_Brand__Radio-module__Radio-dot___9afdK{background-color:highlight}}@media (prefers-reduced-motion:reduce){.Primer_Brand__Radio-module__Radio___vTG_e,.Primer_Brand__Radio-module__Radio___vTG_e:before,.Primer_Brand__Radio-module__Radio___vTG_e:after,.Primer_Brand__Radio-module__Radio___vTG_e *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

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

@@ -0,0 +1,10 @@
+import './Radio.module-C_NUEyme.css';var e = {
+	"Radio-wrapper": "Primer_Brand__Radio-module__Radio-wrapper___zXaOV",
+	Radio: "Primer_Brand__Radio-module__Radio___vTG_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 };
+
+//# sourceMappingURL=Radio.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.module.js","names":[],"sources":["../../../src/forms/Radio/Radio.module.css"],"sourcesContent":["/*\n * Default Radio styles\n */\n.Radio-wrapper {\n  position: relative;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  cursor: pointer;\n  grid-row: 1;\n}\n\n.Radio {\n  align-items: center;\n  background-color: var(--brand-control-radio-bg-default);\n  border: solid var(--brand-borderWidth-thick, 1px) var(--brand-control-color-border-default);\n  border-radius: 50%;\n  cursor: pointer;\n  display: inline-flex;\n  height: 20px;\n  justify-content: center;\n  margin: 3px 0; /* mimic default browser-applied vertical margin */\n  margin: 3px 3px 0px 5px; /* Emulate browser defaults */\n\n  width: 20px;\n  outline: none;\n  box-shadow: 0 0 0 3px transparent;\n  position: relative;\n}\n\n/*\nFixes safari bug where outline doesn't respect border-radius\n*/\n.Radio::before {\n  content: '';\n  position: absolute;\n  top: -4px;\n  right: -2px;\n  bottom: -2px;\n  left: -4px;\n  border: 2px solid var(--brand-control-radio-bg-default);\n  border-radius: 50%;\n  width: 24px;\n  height: 24px;\n}\n\n/**\n * Radio native input - visually hidden\n */\n.Radio-input {\n  border: 0;\n  clip: rect(1px, 1px, 1px, 1px);\n  height: 1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  width: 1px;\n}\n\n.Radio-dot {\n  position: absolute;\n  display: none;\n  border-color: var(--brand-control-radio-dot-default);\n  width: 12px;\n  height: 12px;\n  border-radius: 50%;\n  background: var(--brand-control-radio-dot-default);\n  position: absolute;\n  display: block;\n  transform: scale(0.7);\n  opacity: 0;\n  transition: transform 0.35s var(--brand-animation-easing-glide), opacity 0.35s var(--brand-animation-easing-glide);\n}\n@media (prefers-reduced-motion) {\n  .Radio-dot {\n    transition: none;\n  }\n}\n\n/*\n* Checked state\n*/\n\n.Radio-input:checked + .Radio {\n  background-color: var(--brand-control-radio-bg-checked);\n  border-color: var(--brand-control-radio-border-checked);\n}\n\n.Radio-input:checked + .Radio .Radio-dot {\n  opacity: 1;\n  transform: scale(1);\n}\n\n.Radio-input:focus + .Radio {\n  box-shadow: 0 0 0 4px var(--brand-color-focus);\n}\n\n/* TODO: Check with a11y team */\n.Radio-input:checked:focus + .Radio {\n  border-color: var(--brand-control-radio-border-checked);\n}\n\n.Radio-input[disabled] + .Radio,\n.Radio-input[disabled]:checked + .Radio {\n  -webkit-text-fill-color: var(--brand-control-color-fg-disabled);\n  color: var(--brand-control-color-fg-disabled);\n  cursor: not-allowed;\n  background-color: var(--brand-control-radio-bg-disabled);\n  border-color: var(--brand-control-color-border-disabled);\n  opacity: 1;\n}\n\n@media (forced-colors: active) {\n  .Radio-input:focus + .Radio {\n    outline: var(--brand-borderWidth-thick) solid Highlight;\n    outline-offset: var(--base-size-4);\n  }\n\n  .Radio-input:checked + .Radio .Radio-dot {\n    background-color: Highlight;\n  }\n}\n\n/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */\n@media (prefers-reduced-motion: reduce) {\n  .Radio,\n  .Radio::before,\n  .Radio::after,\n  .Radio * {\n    animation: none !important;\n    transition: none !important;\n    scroll-behavior: auto !important;\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,2 @@
+export * from './Radio';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/forms/Radio/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA"}

package/esm/forms/RadioGroup/RadioGroup.d.ts

@@ -0,0 +1,15 @@
+import { type ControlGroupCaptionProps, type ControlGroupLabelProps, type ControlGroupProps, type ControlGroupValidationProps } from '../ControlGroup';
+export type RadioGroupProps = ControlGroupProps;
+export type RadioGroupLabelProps = ControlGroupLabelProps;
+export type RadioGroupCaptionProps = ControlGroupCaptionProps;
+export type RadioGroupValidationProps = ControlGroupValidationProps;
+export declare const RadioGroup: import("react").ForwardRefExoticComponent<ControlGroupProps & import("react").RefAttributes<HTMLFieldSetElement>> & {
+    Label: import("react").ForwardRefExoticComponent<{
+        visuallyHidden?: boolean;
+    } & import("react").HTMLAttributes<HTMLLegendElement> & import("react").RefAttributes<HTMLLegendElement>>;
+    Caption: import("react").ForwardRefExoticComponent<ControlGroupCaptionProps & import("react").RefAttributes<HTMLSpanElement>>;
+    Validation: import("react").ForwardRefExoticComponent<{
+        variant: import("..").FormValidationStatus;
+    } & import("react").HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLSpanElement>>;
+};
+//# sourceMappingURL=RadioGroup.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../src/forms/RadioGroup/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,wBAAwB,EAC7B,KAAK,sBAAsB,EAC3B,KAAK,iBAAiB,EACtB,KAAK,2BAA2B,EACjC,MAAM,iBAAiB,CAAA;AAExB,MAAM,MAAM,eAAe,GAAG,iBAAiB,CAAA;AAC/C,MAAM,MAAM,oBAAoB,GAAG,sBAAsB,CAAA;AACzD,MAAM,MAAM,sBAAsB,GAAG,wBAAwB,CAAA;AAC7D,MAAM,MAAM,yBAAyB,GAAG,2BAA2B,CAAA;AAEnE,eAAO,MAAM,UAAU;;;;;;;;CAAe,CAAA"}

package/esm/forms/RadioGroup/RadioGroup.js

@@ -0,0 +1,7 @@
+import { ControlGroup as e } from "../ControlGroup/ControlGroup.js";
+//#region src/forms/RadioGroup/RadioGroup.tsx
+var t = e;
+//#endregion
+export { t as RadioGroup };
+
+//# sourceMappingURL=RadioGroup.js.map

package/esm/forms/RadioGroup/RadioGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.js","names":[],"sources":["../../../src/forms/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import {\n  ControlGroup,\n  type ControlGroupCaptionProps,\n  type ControlGroupLabelProps,\n  type ControlGroupProps,\n  type ControlGroupValidationProps,\n} from '../ControlGroup'\n\nexport type RadioGroupProps = ControlGroupProps\nexport type RadioGroupLabelProps = ControlGroupLabelProps\nexport type RadioGroupCaptionProps = ControlGroupCaptionProps\nexport type RadioGroupValidationProps = ControlGroupValidationProps\n\nexport const RadioGroup = ControlGroup\n"],"mappings":";;AAaA,IAAa,IAAa"}

package/esm/forms/RadioGroup/index.d.ts

@@ -0,0 +1,2 @@
+export * from './RadioGroup';
+//# sourceMappingURL=index.d.ts.map

package/esm/forms/RadioGroup/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/forms/RadioGroup/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA"}

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

@@ -0,0 +1,46 @@
+import React from 'react';
+import type { BaseProps } from '../../component-helpers';
+import type { FormInputSizes, FormValidationStatus } from '../form-types';
+export type SelectProps = {
+    /**
+     * Applies full width styling.
+     */
+    fullWidth?: boolean;
+    /**
+     * Applies a required attribute to the input
+     */
+    required?: boolean;
+    /**
+     * Applies alternative sizing to the input
+     */
+    size?: FormInputSizes;
+    /**
+     * Placeholder text to display when no value is selected
+     */
+    placeholder?: string;
+    /**
+     *
+     */
+    validationStatus?: FormValidationStatus;
+} & Omit<React.InputHTMLAttributes<HTMLSelectElement>, 'size'> & BaseProps<HTMLSelectElement>;
+export type OptionProps = {
+    value: string;
+} & React.PropsWithChildren<React.HTMLProps<HTMLOptionElement>>;
+export type OptGroupProps = {
+    /**
+     * Specifies that an option-group should be disabled
+     */
+    disabled?: string;
+    /**
+     * Specifies a label for an option-group
+     */
+    label: string;
+} & React.PropsWithChildren<React.HTMLProps<HTMLOptGroupElement>>;
+/**
+ * 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;
+};
+//# sourceMappingURL=Select.d.ts.map

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

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

package/esm/forms/Select/Select.js

@@ -0,0 +1,34 @@
+import e from "../../node_modules/clsx/dist/clsx.js";
+import t from "./Select.module.js";
+import { forwardRef as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+var a = n(({ children: n, className: a, disabled: o, fullWidth: s = !1, placeholder: c, size: l = "medium", validationStatus: u, ...d }, f) => /* @__PURE__ */ r("span", {
+	className: e(t["Select-wrapper"], t[`Select-wrapper--${l}`], s && t["Select-wrapper--fullWidth"], u && t[`Select--${u}`], o && t["Select-wrapper--disabled"]),
+	children: /* @__PURE__ */ i("select", {
+		"aria-invalid": u === "error",
+		className: e(t.Select, t[`Select--${l}`], "Select", s && t["Select--fullWidth"], a),
+		disabled: o,
+		ref: f,
+		...d,
+		children: [c && /* @__PURE__ */ r("option", {
+			value: "",
+			disabled: o,
+			children: c
+		}), n]
+	})
+})), o = Object.assign(a, {
+	Option: ({ children: e, value: t, ...n }) => /* @__PURE__ */ r("option", {
+		value: t,
+		...n,
+		children: e
+	}),
+	OptGroup: ({ children: e, label: t, ...n }) => /* @__PURE__ */ r("optgroup", {
+		label: t,
+		...n,
+		children: e
+	})
+});
+//#endregion
+export { o as Select };
+
+//# sourceMappingURL=Select.js.map

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

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

package/esm/forms/Select/Select.module-q1LyPHa8.css

@@ -0,0 +1 @@
+.Primer_Brand__Select-module__Select___EmI6J{appearance:none;color:var(--brand-control-color-fg-default);cursor:pointer;background-color:var(--brand-color-canvas-default);border-radius:var(--brand-borderRadius-medium);line-height:var(--brand-text-lineHeight-200);transition:var(--brand-control-animation-duration) var(--brand-control-animation-easing);border:none;grid-area:1/1/auto/-1;width:100%;transition-property:color,background-color,box-shadow,border-color}@media screen and (forced-colors:active){.Primer_Brand__Select-module__Select___EmI6J:disabled{background-color:-moz-combobox}}.Primer_Brand__Select-module__Select___EmI6J::placeholder{color:var(--brand-color-text-muted);opacity:1}.Primer_Brand__Select-module__Select___EmI6J:focus-visible{border-color:var(--brand-color-focus);box-shadow:0 0 0 2px var(--brand-color-focus);outline:none}@media (forced-colors:active){.Primer_Brand__Select-module__Select___EmI6J:focus-visible{outline:var(--brand-borderWidth-thick) solid Highlight;outline-offset:var(--base-size-2)}}.Primer_Brand__Select-module__Select___EmI6J[disabled]{-webkit-text-fill-color:var(--brand-control-color-fg-disabled);color:var(--brand-control-color-fg-disabled);cursor:not-allowed;background-color:var(--brand-control-color-canvas-disabled);border-color:var(--brand-control-color-border-disabled);opacity:1}.Primer_Brand__Select-module__Select-wrapper--disabled___YhyYg.Primer_Brand__Select-module__Select-wrapper___sX7AR:after{background-color:var(--brand-control-color-fg-disabled)}.Primer_Brand__Select-module__Select-wrapper--medium___0yHXL{height:var(--brand-control-medium-size)}.Primer_Brand__Select-module__Select-wrapper--medium___0yHXL:after{margin-inline-end:calc(var(--brand-control-medium-paddingInline-condensed) / 2)}.Primer_Brand__Select-module__Select--medium___LTm_N{font-weight:var(--brand-text-weight-100);font-size:var(--brand-text-size-100);padding-inline:var(--brand-control-medium-paddingInline-condensed);padding-block:0;padding-inline-end:calc(var(--brand-control-medium-paddingInline-condensed) + var(--base-size-16))}.Primer_Brand__Select-module__Select-wrapper--large___yWcVy{height:var(--brand-control-large-size)}.Primer_Brand__Select-module__Select-wrapper--large___yWcVy:after{margin-inline-end:var(--base-size-8)}.Primer_Brand__Select-module__Select--large___zrjHD{font-weight:var(--brand-text-weight-200);font-size:var(--brand-text-size-200);padding-inline:var(--brand-control-large-paddingInline-condensed);padding-block:0;padding-inline-end:calc(var(--brand-control-large-paddingInline-condensed) + var(--base-size-16))}.Primer_Brand__Select-module__Select-wrapper___sX7AR{border:solid 1px var(--brand-control-color-border-default);border:solid var(--brand-borderWidth-thin,1px) var(--brand-control-color-border-default);border-radius:6px;border-radius:var(--brand-borderRadius-medium,6px);font-family:var(--brand-body-fontFamily);grid-template-columns:minmax(0, auto) var(--base-size-16);display:inline-grid;position:relative}.Primer_Brand__Select-module__Select-wrapper___sX7AR:after{content:"";width:var(--base-size-16);height:var(--base-size-16);pointer-events:none;background-color:var(--brand-control-color-fg-default);grid-area:1/2;place-self:center flex-end;position:absolute;right:0;-webkit-mask:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzU4NjA2OSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNC40MjcgOS40MjdsMy4zOTYgMy4zOTZhLjI1MS4yNTEgMCAwMC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwMDExLjM5NiA5SDQuNjA0YS4yNS4yNSAwIDAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3TDcuODIgMy4wNzJhLjI1LjI1IDAgMDEuMzU0IDBMMTEuNTcgNi40N2EuMjUuMjUgMCAwMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMDEtLjE3Ny0uNDI3eiIgLz48L3N2Zz4=) 0 0/contain no-repeat;mask:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzU4NjA2OSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNC40MjcgOS40MjdsMy4zOTYgMy4zOTZhLjI1MS4yNTEgMCAwMC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwMDExLjM5NiA5SDQuNjA0YS4yNS4yNSAwIDAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3TDcuODIgMy4wNzJhLjI1LjI1IDAgMDEuMzU0IDBMMTEuNTcgNi40N2EuMjUuMjUgMCAwMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMDEtLjE3Ny0uNDI3eiIgLz48L3N2Zz4=) 0 0/contain no-repeat}.Primer_Brand__Select-module__Select-wrapper--disabled___YhyYg{border-color:var(--brand-control-color-border-disabled)}.Primer_Brand__Select-module__Select-wrapper--fullWidth___UNSe5{width:100%}.Primer_Brand__Select-module__Select--success___0WbjI{border-color:var(--brand-color-success-fg)}.Primer_Brand__Select-module__Select--error___FxIYn{border-color:var(--brand-color-danger-fg)}@media (prefers-reduced-motion:reduce){.Primer_Brand__Select-module__Select___EmI6J,.Primer_Brand__Select-module__Select___EmI6J:before,.Primer_Brand__Select-module__Select___EmI6J:after,.Primer_Brand__Select-module__Select___EmI6J *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

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

@@ -0,0 +1,16 @@
+import './Select.module-q1LyPHa8.css';var e = {
+	Select: "Primer_Brand__Select-module__Select___EmI6J",
+	"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",
+	"Select--medium": "Primer_Brand__Select-module__Select--medium___LTm_N",
+	"Select-wrapper--large": "Primer_Brand__Select-module__Select-wrapper--large___yWcVy",
+	"Select--large": "Primer_Brand__Select-module__Select--large___zrjHD",
+	"Select-wrapper--fullWidth": "Primer_Brand__Select-module__Select-wrapper--fullWidth___UNSe5",
+	"Select--success": "Primer_Brand__Select-module__Select--success___0WbjI",
+	"Select--error": "Primer_Brand__Select-module__Select--error___FxIYn"
+};
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=Select.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.module.js","names":[],"sources":["../../../src/forms/Select/Select.module.css"],"sourcesContent":["/*\n * Default Select styles\n */\n.Select {\n  appearance: none;\n  color: var(--brand-control-color-fg-default);\n  cursor: pointer;\n  background-color: var(--brand-color-canvas-default);\n  border: none;\n  border-radius: var(--brand-borderRadius-medium);\n  line-height: var(--brand-text-lineHeight-200);\n  transition: var(--brand-control-animation-duration) var(--brand-control-animation-easing);\n  transition-property: color, background-color, box-shadow, border-color;\n  width: 100%;\n  grid-column: 1 / -1;\n  grid-row: 1;\n}\n\n@media screen and (forced-colors: active) {\n  /* Maintain dark bg color in Firefox on Windows high-contrast mode */\n  .Select:disabled {\n    background-color: -moz-combobox;\n  }\n}\n\n.Select::placeholder {\n  color: var(--brand-color-text-muted);\n  opacity: 1;\n}\n\n.Select:focus-visible {\n  border-color: var(--brand-color-focus);\n  outline: none;\n  box-shadow: 0 0 0 2px var(--brand-color-focus);\n}\n\n@media (forced-colors: active) {\n  .Select:focus-visible {\n    outline: var(--brand-borderWidth-thick) solid Highlight;\n    outline-offset: var(--base-size-2);\n  }\n}\n\n.Select[disabled] {\n  -webkit-text-fill-color: var(--brand-control-color-fg-disabled);\n  color: var(--brand-control-color-fg-disabled);\n  cursor: not-allowed;\n  background-color: var(--brand-control-color-canvas-disabled);\n  border-color: var(--brand-control-color-border-disabled);\n  opacity: 1;\n}\n\n.Select-wrapper--disabled.Select-wrapper::after {\n  background-color: var(--brand-control-color-fg-disabled);\n}\n\n/*\n * Sizes\n */\n\n.Select-wrapper--medium {\n  height: var(--brand-control-medium-size);\n}\n\n.Select-wrapper--medium::after {\n  margin-inline-end: calc(var(--brand-control-medium-paddingInline-condensed) / 2);\n}\n\n.Select--medium {\n  font-weight: var(--brand-text-weight-100);\n  font-size: var(--brand-text-size-100);\n  padding-inline: var(--brand-control-medium-paddingInline-condensed);\n  padding-inline-end: calc(var(--brand-control-medium-paddingInline-condensed) + var(--base-size-16));\n  padding-block: 0;\n}\n\n.Select-wrapper--large {\n  height: var(--brand-control-large-size);\n}\n\n.Select-wrapper--large::after {\n  margin-inline-end: var(--base-size-8);\n}\n\n.Select--large {\n  font-weight: var(--brand-text-weight-200);\n  font-size: var(--brand-text-size-200);\n  padding-inline: var(--brand-control-large-paddingInline-condensed);\n  padding-inline-end: calc(var(--brand-control-large-paddingInline-condensed) + var(--base-size-16));\n  padding-block: 0;\n}\n\n/*\n * Select wrapper\n */\n\n.Select-wrapper {\n  border: solid var(--brand-borderWidth-thin, 1px) var(--brand-control-color-border-default);\n  border-radius: var(--brand-borderRadius-medium, 6px);\n  font-family: var(--brand-body-fontFamily);\n  position: relative;\n  display: inline-grid;\n  grid-template-columns: minmax(0, auto) var(--base-size-16);\n}\n\n.Select-wrapper::after {\n  content: '';\n  position: absolute;\n  right: 0;\n  width: var(--base-size-16);\n  height: var(--base-size-16);\n  pointer-events: none;\n  background-color: var(--brand-control-color-fg-default);\n  mask: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzU4NjA2OSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNC40MjcgOS40MjdsMy4zOTYgMy4zOTZhLjI1MS4yNTEgMCAwMC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwMDExLjM5NiA5SDQuNjA0YS4yNS4yNSAwIDAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3TDcuODIgMy4wNzJhLjI1LjI1IDAgMDEuMzU0IDBMMTEuNTcgNi40N2EuMjUuMjUgMCAwMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMDEtLjE3Ny0uNDI3eiIgLz48L3N2Zz4=');\n  -webkit-mask: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzU4NjA2OSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNC40MjcgOS40MjdsMy4zOTYgMy4zOTZhLjI1MS4yNTEgMCAwMC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwMDExLjM5NiA5SDQuNjA0YS4yNS4yNSAwIDAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3TDcuODIgMy4wNzJhLjI1LjI1IDAgMDEuMzU0IDBMMTEuNTcgNi40N2EuMjUuMjUgMCAwMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMDEtLjE3Ny0uNDI3eiIgLz48L3N2Zz4=');\n  mask-size: contain;\n  -webkit-mask-size: contain;\n  mask-repeat: no-repeat;\n  -webkit-mask-repeat: no-repeat;\n  grid-column: 2;\n  grid-row: 1;\n  place-self: center flex-end;\n}\n\n.Select-wrapper--disabled {\n  border-color: var(--brand-control-color-border-disabled);\n}\n\n.Select-wrapper--fullWidth {\n  width: 100%;\n}\n\n/*\n * Validation\n */\n\n.Select--success {\n  border-color: var(--brand-color-success-fg);\n}\n\n.Select--error {\n  border-color: var(--brand-color-danger-fg);\n}\n\n/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */\n@media (prefers-reduced-motion: reduce) {\n  .Select,\n  .Select::before,\n  .Select::after,\n  .Select * {\n    animation: none !important;\n    transition: none !important;\n    scroll-behavior: auto !important;\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,2 @@
+export * from './Select';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/forms/Select/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA"}

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

@@ -0,0 +1,54 @@
+import React from 'react';
+import type { BaseProps } from '../../component-helpers';
+import type { FormInputSizes, FormValidationStatus } from '../form-types';
+import type { Icon } from '@primer/octicons-react';
+type VisualType = React.ReactElement | React.ReactNode | Icon;
+export type TextInputProps = {
+    /**
+     * Applies full width styling.
+     */
+    fullWidth?: boolean;
+    /**
+     * Removes border
+     */
+    invisible?: boolean;
+    /**
+     * Applies non-interactive text to start of input.
+     */
+    leadingText?: string;
+    /**
+     * Applies non-interactive iconography to start of input.
+     */
+    leadingVisual?: VisualType;
+    /**
+     * Applies monospace styling.
+     */
+    monospace?: boolean;
+    /**
+     * Applies alternative sizing to the input
+     */
+    size?: FormInputSizes;
+    /**
+     * Applies non-interactive text to end of input.
+     */
+    trailingText?: string;
+    /**
+     * Applies non-interactive iconography to end of input.
+     */
+    trailingVisual?: VisualType;
+    /**
+     * Constrains the input type to single line inputs.
+     */
+    type?: 'text' | 'number' | 'email' | 'password' | 'search' | 'tel' | 'url' | 'date' | 'time' | 'datetime-local';
+    /**
+     * Applies a required attribute to the input
+     */
+    required?: boolean;
+    /**
+     *
+     */
+    validationStatus?: FormValidationStatus;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> & BaseProps<HTMLInputElement>;
+export declare const TextInput: React.ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & React.RefAttributes<unknown>>;
+export {};
+//# sourceMappingURL=TextInput.d.ts.map

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

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

package/esm/forms/TextInput/TextInput.js

@@ -0,0 +1,93 @@
+import e from "../../node_modules/clsx/dist/clsx.js";
+import { useId as t } from "../../hooks/useId.js";
+import { Text as n } from "../../Text/Text.js";
+import r from "./TextInput.module.js";
+import i, { forwardRef as a, useMemo as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+var l = a(({ className: a, disabled: l, fullWidth: u = !1, invisible: d = !1, leadingText: f, leadingVisual: p, monospace: m, placeholder: h, size: g = "medium", trailingText: _, trailingVisual: v, validationStatus: y, ...b }, x) => {
+	let S = t(), C = f && !p, w = p && !f, T = _ && !v, E = v && !_, D = `${S}-leading-text`, O = `${S}-leading-visual`, k = `${S}-trailing-visual`, A = `${S}-trailing-text`, j = o(() => [
+		{
+			condition: C,
+			id: D
+		},
+		{
+			condition: w,
+			id: O
+		},
+		{
+			condition: E,
+			id: k
+		},
+		{
+			condition: T,
+			id: A
+		}
+	].filter(({ condition: e }) => e).map(({ id: e }) => e).join(" "), [
+		C,
+		w,
+		E,
+		T,
+		D,
+		O,
+		k,
+		A
+	]);
+	return /* @__PURE__ */ c("span", {
+		className: e(r["TextInput-wrapper"], r[`TextInput-wrapper--${g}`], u && r["TextInput-wrapper--fullWidth"], d && r["TextInput-wrapper--invisible"], l && r["TextInput-wrapper--disabled"], m && r["TextInput-wrapper--monospace"], y && r[`TextInput-wrapper--${y}`]),
+		children: [
+			C && /* @__PURE__ */ s("span", {
+				className: e(r["TextInput-leading-text"], r[`TextInput-leading-text--${g}`], l && r["TextInput-leading-text--disabled"], y && r[`TextInput-leading-text--${y}`]),
+				children: /* @__PURE__ */ s(n, {
+					size: g === "large" ? "200" : "100",
+					as: "span",
+					className: e(r["TextInput-leading-text-inner"], r[`TextInput-leading-text-inner--${g}`]),
+					id: D,
+					children: f
+				})
+			}),
+			w && /* @__PURE__ */ s("span", {
+				className: e(r["TextInput-leading-visual"], r[`TextInput-leading-visual--${g}`]),
+				children: p && i.isValidElement(p) ? i.cloneElement(p, {
+					className: e(r["TextInput-leading-visual-icon"], r[`TextInput-leading-visual-icon--${g}`]),
+					width: g === "large" ? 20 : 16,
+					height: g === "large" ? 20 : 16,
+					id: O
+				}) : null
+			}),
+			/* @__PURE__ */ s("input", {
+				type: "text",
+				ref: x,
+				className: e(r.TextInput, "TextInput", r[`TextInput--${g}`], u && r["TextInput--fullWidth"], p && r[`TextInput--has-leading-visual--${g}`], v && r[`TextInput--has-trailing-visual--${g}`], y && r[`TextInput--${y}`], f && !p && r["TextInput--has-leading-text"], _ && !v && r["TextInput--has-trailing-text"], a),
+				placeholder: h,
+				disabled: l,
+				"aria-invalid": y === "error",
+				"aria-describedby": j || void 0,
+				...b
+			}),
+			E && /* @__PURE__ */ s("span", {
+				className: e(r["TextInput-trailing-visual"], r[`TextInput-trailing-visual--${g}`]),
+				children: v && i.isValidElement(v) ? i.cloneElement(v, {
+					className: e(r["TextInput-trailing-visual-icon"], r[`TextInput-trailing-visual-icon--${g}`]),
+					width: g === "large" ? 20 : 16,
+					height: g === "large" ? 20 : 16,
+					id: k
+				}) : null
+			}),
+			T && /* @__PURE__ */ s("span", {
+				className: e(r["TextInput-trailing-text"], r[`TextInput-trailing-text--${g}`], l && r["TextInput-trailing-text--disabled"], y && r[`TextInput-trailing-text--${y}`]),
+				children: /* @__PURE__ */ s(n, {
+					size: g === "large" ? "200" : "100",
+					as: "span",
+					className: e(r["TextInput-trailing-text-inner"], r[`TextInput-trailing-text-inner--${g}`]),
+					id: A,
+					children: _
+				})
+			})
+		]
+	});
+});
+l.displayName = "TextInput";
+//#endregion
+export { l as TextInput };
+
+//# sourceMappingURL=TextInput.js.map

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

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

package/esm/forms/TextInput/TextInput.module-zPnaJdhX.css

@@ -0,0 +1 @@
+.Primer_Brand__TextInput-module__TextInput___d6r3B{color:var(--brand-control-color-fg-default);background-color:var(--brand-color-canvas-default);border-radius:var(--brand-borderRadius-medium);line-height:var(--brand-text-lineHeight-100);transition:var(--brand-control-animation-duration) var(--brand-control-animation-easing);border:none;transition-property:color,background-color,box-shadow;display:flex}.Primer_Brand__TextInput-module__TextInput___d6r3B::placeholder{color:var(--brand-color-text-muted);opacity:1}.Primer_Brand__TextInput-module__TextInput___d6r3B[disabled]{-webkit-text-fill-color:var(--brand-control-color-fg-disabled);color:var(--brand-control-color-fg-disabled);cursor:not-allowed;background-color:var(--brand-control-color-canvas-disabled);opacity:1}.Primer_Brand__TextInput-module__TextInput___d6r3B:focus{outline:none}.Primer_Brand__TextInput-module__TextInput-wrapper--medium___MBN0V{height:var(--brand-control-medium-size)}.Primer_Brand__TextInput-module__TextInput--medium___fpyd0{font-weight:var(--brand-text-weight-100);font-size:var(--brand-text-size-100);padding:var(--brand-control-medium-paddingBlock-normal) var(--brand-control-medium-paddingInline-condensed)}.Primer_Brand__TextInput-module__TextInput--large___S8mM0{font-weight:var(--brand-text-weight-200);font-size:var(--brand-text-size-200);padding:var(--brand-control-large-paddingBlock-normal) var(--brand-control-large-paddingInline-condensed)}.Primer_Brand__TextInput-module__TextInput-wrapper--large___dAIbF{height:var(--brand-control-large-size)}.Primer_Brand__TextInput-module__TextInput--fullWidth___95umM{width:100%}.Primer_Brand__TextInput-module__TextInput-wrapper--disabled___tIAWj{border-color:var(--brand-control-color-border-disabled)}.Primer_Brand__TextInput-module__TextInput-wrapper___atqQQ{font-family:var(--brand-body-fontFamily);border:solid 1px var(--brand-control-color-border-default);border:solid var(--brand-borderWidth-thin,1px) var(--brand-control-color-border-default);border-radius:var(--brand-borderRadius-medium);transition:var(--brand-control-animation-duration) var(--brand-control-animation-easing);transition-property:border;display:inline-flex;position:relative}.Primer_Brand__TextInput-module__TextInput-wrapper--invisible___5R_bN{border-color:#0000}.Primer_Brand__TextInput-module__TextInput-wrapper--fullWidth___qZXkv{width:100%;display:flex}.Primer_Brand__TextInput-module__TextInput-wrapper___atqQQ:not(.Primer_Brand__TextInput-module__TextInput-wrapper--fullWidth___qZXkv){width:min-content}.Primer_Brand__TextInput-module__TextInput-wrapper--monospace___lZCyL{font-family:var(--brand-fontStack-monospace)}.Primer_Brand__TextInput-module__TextInput-wrapper___atqQQ:focus-within{border-color:var(--brand-color-focus);box-shadow:0 0 0 1px var(--brand-color-focus);outline:none}@media (forced-colors:active){.Primer_Brand__TextInput-module__TextInput-wrapper___atqQQ:focus-within{outline:var(--brand-borderWidth-thick) solid Highlight;outline-offset:var(--base-size-2)}}.Primer_Brand__TextInput-module__TextInput-wrapper--success___T0cdn,.Primer_Brand__TextInput-module__TextInput-wrapper--success___T0cdn.Primer_Brand__TextInput-module__TextInput-wrapper--disabled___tIAWj{border-color:var(--brand-color-success-fg)}.Primer_Brand__TextInput-module__TextInput-wrapper--error___P_A__,.Primer_Brand__TextInput-module__TextInput-wrapper--error___P_A__.Primer_Brand__TextInput-module__TextInput-wrapper--disabled___tIAWj{border-color:var(--brand-color-danger-fg)}.Primer_Brand__TextInput-module__TextInput--has-leading-visual--medium___FofyW{padding-inline-start:calc(var(--brand-control-medium-paddingInline-condensed) + var(--base-size-16) + var(--brand-control-medium-gap))}.Primer_Brand__TextInput-module__TextInput--has-leading-visual--large___m_yq4{padding-inline-start:calc(var(--brand-control-large-paddingInline-condensed) + var(--base-size-20) + var(--brand-control-large-gap))}.Primer_Brand__TextInput-module__TextInput--has-trailing-visual--medium___i_tux{padding-inline-end:calc(var(--brand-control-medium-paddingInline-condensed) + var(--base-size-16) + var(--brand-control-medium-gap))}.Primer_Brand__TextInput-module__TextInput--has-trailing-visual--large___9LFb4{padding-inline-end:calc(var(--brand-control-medium-paddingInline-condensed) + var(--base-size-20) + var(--brand-control-medium-gap))}.Primer_Brand__TextInput-module__TextInput-leading-visual___pCl6H,.Primer_Brand__TextInput-module__TextInput-trailing-visual___uMm5J{width:var(--base-size-16);height:100%;color:var(--brand-color-text-default);pointer-events:none;align-items:center;display:flex;position:absolute;top:0}.Primer_Brand__TextInput-module__TextInput-leading-visual--medium___J1m0x{left:var(--brand-control-medium-paddingInline-condensed)}.Primer_Brand__TextInput-module__TextInput-trailing-visual--medium___42l_Q{right:var(--brand-control-medium-paddingInline-condensed)}.Primer_Brand__TextInput-module__TextInput-leading-visual--large___FfFfu{left:var(--brand-control-large-paddingInline-condensed)}.Primer_Brand__TextInput-module__TextInput-trailing-visual--large___6qKcW{right:var(--brand-control-large-paddingInline-condensed)}.Primer_Brand__TextInput-module__TextInput-leading-visual-icon--medium___SGqdF{width:var(--base-size-16);height:var(--base-size-16)}.Primer_Brand__TextInput-module__TextInput-leading-visual-icon--large___tEaFR{width:var(--base-size-20);height:var(--base-size-20)}.Primer_Brand__TextInput-module__TextInput-leading-text___KJH7i,.Primer_Brand__TextInput-module__TextInput-trailing-text___9OMo1{color:var(--brand-color-text-muted);pointer-events:none;white-space:nowrap;align-items:center;display:flex}.Primer_Brand__TextInput-module__TextInput-leading-text--disabled___mkec2,.Primer_Brand__TextInput-module__TextInput-trailing-text--disabled___HXuFW{color:var(--brand-control-color-fg-disabled);background-color:var(--brand-control-color-canvas-disabled)}.Primer_Brand__TextInput-module__TextInput-leading-text___KJH7i{border-top-left-radius:6px;border-top-left-radius:var(--brand-borderRadius-medium,6px);border-bottom-left-radius:6px;border-bottom-left-radius:var(--brand-borderRadius-medium,6px);border-right:0}.Primer_Brand__TextInput-module__TextInput-trailing-text___9OMo1{border-top-right-radius:6px;border-top-right-radius:var(--brand-borderRadius-medium,6px);border-bottom-right-radius:6px;border-bottom-right-radius:var(--brand-borderRadius-medium,6px);border-left:0}.Primer_Brand__TextInput-module__TextInput-leading-text-inner___xYm04,.Primer_Brand__TextInput-module__TextInput-trailing-text-inner___dLGj9{color:var(--brand-color-text-muted);display:inline-flex}.Primer_Brand__TextInput-module__TextInput-leading-text-inner--medium___yh500,.Primer_Brand__TextInput-module__TextInput-trailing-text-inner--medium___H8Wax{padding-inline:var(--brand-control-medium-paddingInline-condensed)}.Primer_Brand__TextInput-module__TextInput-leading-text-inner--large___LLej6,.Primer_Brand__TextInput-module__TextInput-trailing-text-inner--large___1Qudx{padding-inline:var(--brand-control-large-paddingInline-condensed)}.Primer_Brand__TextInput-module__TextInput-leading-text-inner___xYm04{border-right:1px solid var(--brand-color-border-default)}.Primer_Brand__TextInput-module__TextInput-trailing-text-inner___dLGj9{border-left:1px solid var(--brand-color-border-default)}.Primer_Brand__TextInput-module__TextInput--has-leading-text___yXCjP{border-left:0;border-top-left-radius:0;border-bottom-left-radius:0}.Primer_Brand__TextInput-module__TextInput--has-trailing-text___bPsRQ{border-right:0;border-top-right-radius:0;border-bottom-right-radius:0}.Primer_Brand__TextInput-module__TextInput-leading-text--success____KS_D,.Primer_Brand__TextInput-module__TextInput-trailing-text--success___WCi_J{border-color:var(--brand-color-success-fg)}.Primer_Brand__TextInput-module__TextInput-leading-text--error___WAcZB,.Primer_Brand__TextInput-module__TextInput-trailing-text--error____yUSw{border-color:var(--brand-color-danger-fg)}@media (prefers-reduced-motion:reduce){.Primer_Brand__TextInput-module__TextInput___d6r3B,.Primer_Brand__TextInput-module__Checkbox___NeBpg:before,.Primer_Brand__TextInput-module__Checkbox___NeBpg:after,.Primer_Brand__TextInput-module__Checkbox___NeBpg *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}