@primer/react 38.0.0-rc.0 → 38.0.0-rc.09f015db1

package/dist/FormControl/FormControl.js

@@ -0,0 +1,215 @@
+import { c } from 'react-compiler-runtime';
+import { clsx } from 'clsx';
+import React, { useContext } from 'react';
+import Select from '../Select/Select.js';
+import ValidationAnimationContainer from '../internal/components/ValidationAnimationContainer.js';
+import { useSlots } from '../hooks/useSlots.js';
+import { useId } from '../hooks/useId.js';
+import { FormControlCaption } from './FormControlCaption.js';
+import FormControlLabel from './FormControlLabel.js';
+import FormControlLeadingVisual from './FormControlLeadingVisual.js';
+import FormControlValidation from './_FormControlValidation.js';
+import { FormControlContextProvider } from './_FormControlContext.js';
+import { warning } from '../utils/warning.js';
+import classes from './FormControl.module.css.js';
+import { isSlot } from '../utils/is-slot.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import CheckboxOrRadioGroupContext from '../internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupContext.js';
+import Autocomplete from '../Autocomplete/Autocomplete.js';
+import Checkbox from '../Checkbox/Checkbox.js';
+import Radio from '../Radio/Radio.js';
+import TextInput from '../TextInput/TextInput.js';
+import TextInputWithTokens from '../TextInputWithTokens/TextInputWithTokens.js';
+import Textarea from '../Textarea/Textarea.js';
+import { SelectPanel } from '../SelectPanel/SelectPanel.js';
+
+const FormControl = /*#__PURE__*/React.forwardRef((t0, ref) => {
+  var _slots$validation, _slots$label;
+  const $ = c(27);
+  const {
+    children,
+    disabled: disabledProp,
+    layout: t1,
+    id: idProp,
+    required,
+    className,
+    style
+  } = t0;
+  const layout = t1 === undefined ? "vertical" : t1;
+  let t2;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = {
+      caption: FormControlCaption,
+      label: FormControlLabel,
+      leadingVisual: FormControlLeadingVisual,
+      validation: FormControlValidation
+    };
+    $[0] = t2;
+  } else {
+    t2 = $[0];
+  }
+  const [slots, childrenWithoutSlots] = useSlots(children, t2);
+  const expectedInputComponents = [Autocomplete, Checkbox, Radio, Select, TextInput, TextInputWithTokens, Textarea, SelectPanel];
+  const choiceGroupContext = useContext(CheckboxOrRadioGroupContext);
+  const disabled = choiceGroupContext.disabled || disabledProp;
+  const id = useId(idProp);
+  const validationMessageId = slots.validation ? `${id}-validationMessage` : undefined;
+  const captionId = slots.caption ? `${id}-caption` : undefined;
+  const validationStatus = (_slots$validation = slots.validation) === null || _slots$validation === void 0 ? void 0 : _slots$validation.props.variant;
+  const InputComponent = childrenWithoutSlots.find(child => expectedInputComponents.some(inputComponent => /*#__PURE__*/React.isValidElement(child) && (child.type === inputComponent || isSlot(child, inputComponent))));
+  const inputProps = /*#__PURE__*/React.isValidElement(InputComponent) && InputComponent.props;
+  const isChoiceInput = /*#__PURE__*/React.isValidElement(InputComponent) && (InputComponent.type === Checkbox || InputComponent.type === Radio || isSlot(InputComponent, Checkbox) || isSlot(InputComponent, Radio));
+  const isRadioInput = /*#__PURE__*/React.isValidElement(InputComponent) && (InputComponent.type === Radio || isSlot(InputComponent, Radio));
+  if (InputComponent) {
+    process.env.NODE_ENV !== "production" ? warning(inputProps === null || inputProps === void 0 ? void 0 : inputProps.id, "instead of passing the 'id' prop directly to the input component, it should be passed to the parent component, <FormControl>") : void 0;
+    process.env.NODE_ENV !== "production" ? warning(inputProps === null || inputProps === void 0 ? void 0 : inputProps.disabled, "instead of passing the 'disabled' prop directly to the input component, it should be passed to the parent component, <FormControl>") : void 0;
+    process.env.NODE_ENV !== "production" ? warning(inputProps === null || inputProps === void 0 ? void 0 : inputProps.required, "instead of passing the 'required' prop directly to the input component, it should be passed to the parent component, <FormControl>") : void 0;
+  }
+  if (!slots.label) {
+    console.error(`The input field with the id ${id} MUST have a FormControl.Label child.\n\nIf you want to hide the label, pass the 'visuallyHidden' prop to the FormControl.Label component.`);
+  }
+  if (isChoiceInput) {
+    process.env.NODE_ENV !== "production" ? warning(!!slots.validation, "Validation messages are not rendered for an individual checkbox or radio. The validation message should be shown for all options.") : void 0;
+    process.env.NODE_ENV !== "production" ? warning(isRadioInput && childrenWithoutSlots.find(_temp), "An individual radio cannot be a required field.") : void 0;
+  } else {
+    process.env.NODE_ENV !== "production" ? warning(!!slots.leadingVisual, "A leading visual is only rendered for a checkbox or radio form control. If you want to render a leading visual inside of your input, check if your input supports a leading visual.") : void 0;
+  }
+  const isLabelHidden = (_slots$label = slots.label) === null || _slots$label === void 0 ? void 0 : _slots$label.props.visuallyHidden;
+  const t3 = /*#__PURE__*/React.isValidElement(InputComponent) ? /*#__PURE__*/React.cloneElement(InputComponent, {
+    id,
+    disabled,
+    required: required && !isRadioInput,
+    "aria-describedby": captionId
+  }) : null;
+  let t4;
+  if ($[1] !== childrenWithoutSlots) {
+    t4 = childrenWithoutSlots.filter(_temp2);
+    $[1] = childrenWithoutSlots;
+    $[2] = t4;
+  } else {
+    t4 = $[2];
+  }
+  let t5;
+  if ($[3] !== t3 || $[4] !== t4) {
+    t5 = /*#__PURE__*/jsxs("div", {
+      className: classes.ControlChoiceInputs,
+      children: [t3, t4]
+    });
+    $[3] = t3;
+    $[4] = t4;
+    $[5] = t5;
+  } else {
+    t5 = $[5];
+  }
+  let t6;
+  if ($[6] !== disabled || $[7] !== slots.caption || $[8] !== slots.leadingVisual) {
+    t6 = slots.leadingVisual ? /*#__PURE__*/jsx("div", {
+      className: classes.LeadingVisual,
+      "data-disabled": disabled ? "" : undefined,
+      "data-has-caption": slots.caption ? "" : undefined,
+      children: slots.leadingVisual
+    }) : null;
+    $[6] = disabled;
+    $[7] = slots.caption;
+    $[8] = slots.leadingVisual;
+    $[9] = t6;
+  } else {
+    t6 = $[9];
+  }
+  let t7;
+  if ($[10] !== slots.caption || $[11] !== slots.label) {
+    t7 = /*#__PURE__*/jsxs("div", {
+      className: classes.LabelContainer,
+      children: [slots.label, slots.caption]
+    });
+    $[10] = slots.caption;
+    $[11] = slots.label;
+    $[12] = t7;
+  } else {
+    t7 = $[12];
+  }
+  let t8;
+  if ($[13] !== t5 || $[14] !== t6 || $[15] !== t7) {
+    t8 = /*#__PURE__*/jsxs(Fragment, {
+      children: [t5, t6, t7]
+    });
+    $[13] = t5;
+    $[14] = t6;
+    $[15] = t7;
+    $[16] = t8;
+  } else {
+    t8 = $[16];
+  }
+  const InputChildren = t8;
+  const T0 = FormControlContextProvider;
+  let t9;
+  if ($[17] !== captionId || $[18] !== disabled || $[19] !== id || $[20] !== required || $[21] !== validationMessageId) {
+    t9 = {
+      captionId,
+      disabled,
+      id,
+      required,
+      validationMessageId
+    };
+    $[17] = captionId;
+    $[18] = disabled;
+    $[19] = id;
+    $[20] = required;
+    $[21] = validationMessageId;
+    $[22] = t9;
+  } else {
+    t9 = $[22];
+  }
+  const t10 = isChoiceInput || layout === "horizontal" ? /*#__PURE__*/jsx("div", {
+    ref: ref,
+    "data-has-leading-visual": slots.leadingVisual ? "" : undefined,
+    className: clsx(className, classes.ControlHorizontalLayout),
+    style: style,
+    children: InputChildren
+  }) : /*#__PURE__*/jsxs("div", {
+    ref: ref,
+    "data-has-label": !isLabelHidden ? "" : undefined,
+    className: clsx(className, classes.ControlVerticalLayout),
+    style: style,
+    children: [slots.label, /*#__PURE__*/React.isValidElement(InputComponent) && /*#__PURE__*/React.cloneElement(InputComponent, Object.assign({
+      id,
+      required,
+      disabled,
+      validationStatus,
+      "aria-describedby": [validationMessageId, captionId].filter(Boolean).join(" ")
+    }, InputComponent.props)), childrenWithoutSlots.filter(child_2 => /*#__PURE__*/React.isValidElement(child_2) && !expectedInputComponents.some(inputComponent_1 => child_2.type === inputComponent_1 || isSlot(child_2, inputComponent_1))), slots.validation ? /*#__PURE__*/jsx(ValidationAnimationContainer, {
+      show: true,
+      children: slots.validation
+    }) : null, slots.caption]
+  });
+  let t11;
+  if ($[23] !== T0 || $[24] !== t10 || $[25] !== t9) {
+    t11 = /*#__PURE__*/jsx(T0, {
+      value: t9,
+      children: t10
+    });
+    $[23] = T0;
+    $[24] = t10;
+    $[25] = t9;
+    $[26] = t11;
+  } else {
+    t11 = $[26];
+  }
+  return t11;
+});
+var FormControl$1 = Object.assign(FormControl, {
+  __SLOT__: Symbol('FormControl'),
+  Caption: FormControlCaption,
+  Label: FormControlLabel,
+  LeadingVisual: FormControlLeadingVisual,
+  Validation: FormControlValidation
+});
+function _temp(child_0) {
+  var _child_0$props;
+  return /*#__PURE__*/React.isValidElement(child_0) && ((_child_0$props = child_0.props) === null || _child_0$props === void 0 ? void 0 : _child_0$props.required);
+}
+function _temp2(child_1) {
+  return /*#__PURE__*/React.isValidElement(child_1) && ![Checkbox, Radio].some(inputComponent_0 => child_1.type === inputComponent_0 || isSlot(child_1, inputComponent_0));
+}
+
+export { FormControl$1 as default };

package/dist/FormControl/FormControlCaption.d.ts

@@ -0,0 +1,12 @@
+import type React from 'react';
+export type FormControlCaptionProps = React.PropsWithChildren<{
+    id?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}>;
+declare function FormControlCaption({ id, children, className, style }: FormControlCaptionProps): React.JSX.Element;
+declare namespace FormControlCaption {
+    var __SLOT__: symbol;
+}
+export { FormControlCaption };
+//# sourceMappingURL=FormControlCaption.d.ts.map

package/dist/FormControl/FormControlCaption.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormControlCaption.d.ts","sourceRoot":"","sources":["../../src/FormControl/FormControlCaption.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,MAAM,MAAM,uBAAuB,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAC5D,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B,CAAC,CAAA;AAEF,iBAAS,kBAAkB,CAAC,EAAC,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAC,EAAE,uBAAuB,qBAapF;kBAbQ,kBAAkB;;;AAiB3B,OAAO,EAAC,kBAAkB,EAAC,CAAA"}

package/dist/FormControl/FormControlCaption.js

@@ -0,0 +1,52 @@
+import { c } from 'react-compiler-runtime';
+import { clsx } from 'clsx';
+import classes from './FormControlCaption.module.css.js';
+import { useFormControlContext } from './_FormControlContext.js';
+import { jsx } from 'react/jsx-runtime';
+import Text from '../Text/Text.js';
+
+function FormControlCaption(t0) {
+  const $ = c(8);
+  const {
+    id,
+    children,
+    className,
+    style
+  } = t0;
+  const {
+    captionId,
+    disabled
+  } = useFormControlContext();
+  const t1 = id !== null && id !== void 0 ? id : captionId;
+  let t2;
+  if ($[0] !== className) {
+    t2 = clsx(className, classes.Caption);
+    $[0] = className;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const t3 = disabled ? "" : undefined;
+  let t4;
+  if ($[2] !== children || $[3] !== style || $[4] !== t1 || $[5] !== t2 || $[6] !== t3) {
+    t4 = /*#__PURE__*/jsx(Text, {
+      id: t1,
+      className: t2,
+      "data-control-disabled": t3,
+      style: style,
+      children: children
+    });
+    $[2] = children;
+    $[3] = style;
+    $[4] = t1;
+    $[5] = t2;
+    $[6] = t3;
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  return t4;
+}
+FormControlCaption.__SLOT__ = Symbol('FormControl.Caption');
+
+export { FormControlCaption };

package/dist/FormControl/FormControlLabel.d.ts

@@ -0,0 +1,19 @@
+import type React from 'react';
+import { InputLabel } from '../internal/components/InputLabel';
+import type { FCWithSlotMarker } from '../utils/types';
+export type Props = {
+    /**
+     * Whether the label should be visually hidden
+     */
+    visuallyHidden?: boolean;
+    requiredText?: string;
+    requiredIndicator?: boolean;
+    id?: string;
+    className?: string;
+    style?: React.CSSProperties;
+};
+declare const FormControlLabel: FCWithSlotMarker<React.PropsWithChildren<{
+    htmlFor?: string;
+} & React.ComponentProps<typeof InputLabel> & Props>>;
+export default FormControlLabel;
+//# sourceMappingURL=FormControlLabel.d.ts.map

package/dist/FormControl/FormControlLabel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormControlLabel.d.ts","sourceRoot":"","sources":["../../src/FormControl/FormControlLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAC,UAAU,EAAC,MAAM,mCAAmC,CAAA;AAC5D,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,gBAAgB,CAAA;AAEpD,MAAM,MAAM,KAAK,GAAG;IAClB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B,CAAA;AAED,QAAA,MAAM,gBAAgB,EAAE,gBAAgB,CACtC,KAAK,CAAC,iBAAiB,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAC,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,GAAG,KAAK,CAAC,CAkC9F,CAAA;AAID,eAAe,gBAAgB,CAAA"}

package/dist/FormControl/FormControlLabel.js

@@ -0,0 +1,112 @@
+import { c } from 'react-compiler-runtime';
+import { useFormControlContext } from './_FormControlContext.js';
+import { InputLabel } from '../internal/components/InputLabel.js';
+import { jsx } from 'react/jsx-runtime';
+
+const FormControlLabel = t0 => {
+  const $ = c(25);
+  let as;
+  let children;
+  let className;
+  let htmlFor;
+  let id;
+  let props;
+  let requiredText;
+  let t1;
+  let visuallyHidden;
+  if ($[0] !== t0) {
+    ({
+      as,
+      children,
+      htmlFor,
+      id,
+      visuallyHidden,
+      requiredIndicator: t1,
+      requiredText,
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = as;
+    $[2] = children;
+    $[3] = className;
+    $[4] = htmlFor;
+    $[5] = id;
+    $[6] = props;
+    $[7] = requiredText;
+    $[8] = t1;
+    $[9] = visuallyHidden;
+  } else {
+    as = $[1];
+    children = $[2];
+    className = $[3];
+    htmlFor = $[4];
+    id = $[5];
+    props = $[6];
+    requiredText = $[7];
+    t1 = $[8];
+    visuallyHidden = $[9];
+  }
+  const requiredIndicator = t1 === undefined ? true : t1;
+  const {
+    disabled,
+    id: formControlId,
+    required
+  } = useFormControlContext();
+  let t2;
+  if ($[10] !== as || $[11] !== className || $[12] !== disabled || $[13] !== formControlId || $[14] !== htmlFor || $[15] !== id || $[16] !== props || $[17] !== required || $[18] !== requiredIndicator || $[19] !== requiredText || $[20] !== visuallyHidden) {
+    t2 = as === "legend" || as === "span" ? {
+      as,
+      id,
+      className,
+      visuallyHidden,
+      required,
+      requiredText,
+      requiredIndicator,
+      disabled,
+      ...props
+    } : {
+      as,
+      id,
+      className,
+      visuallyHidden,
+      htmlFor: htmlFor || formControlId,
+      required,
+      requiredText,
+      requiredIndicator,
+      disabled,
+      ...props
+    };
+    $[10] = as;
+    $[11] = className;
+    $[12] = disabled;
+    $[13] = formControlId;
+    $[14] = htmlFor;
+    $[15] = id;
+    $[16] = props;
+    $[17] = required;
+    $[18] = requiredIndicator;
+    $[19] = requiredText;
+    $[20] = visuallyHidden;
+    $[21] = t2;
+  } else {
+    t2 = $[21];
+  }
+  const labelProps = t2;
+  let t3;
+  if ($[22] !== children || $[23] !== labelProps) {
+    t3 = /*#__PURE__*/jsx(InputLabel, {
+      ...labelProps,
+      children: children
+    });
+    $[22] = children;
+    $[23] = labelProps;
+    $[24] = t3;
+  } else {
+    t3 = $[24];
+  }
+  return t3;
+};
+FormControlLabel.__SLOT__ = Symbol('FormControl.Label');
+
+export { FormControlLabel as default };

package/dist/FormControl/FormControlLeadingVisual-e217df71.css

@@ -0,0 +1,2 @@
+.prc-FormControl-LeadingVisual-Gycks{--leadingVisual-size:16px;align-items:center;color:var(--fgColor-default,var(--color-fg-default));display:flex}.prc-FormControl-LeadingVisual-Gycks:where([data-control-disabled]){color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.prc-FormControl-LeadingVisual-Gycks>*{min-height:var(--leadingVisual-size);min-width:var(--leadingVisual-size);fill:currentColor}.prc-FormControl-LeadingVisual-Gycks:where([data-has-caption]){--leadingVisual-size:24px}
+/*# sourceMappingURL=FormControlLeadingVisual-e217df71.css.map */

package/dist/FormControl/FormControlLeadingVisual-e217df71.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/FormControl/FormControlLeadingVisual.module.css"],"names":[],"mappings":"AAAA,qCACE,yBAA0B,CAI1B,kBAAmB,CAFnB,oDAA6B,CAC7B,YAgBF,CAbE,oEACE,qEACF,CAEA,uCAEE,oCAAqC,CADrC,mCAAoC,CAEpC,iBACF,CAEA,+DACE,yBACF","file":"FormControlLeadingVisual-e217df71.css","sourcesContent":[".LeadingVisual {\n  --leadingVisual-size: 16px;\n\n  color: var(--fgColor-default);\n  display: flex;\n  align-items: center;\n\n  &:where([data-control-disabled]) {\n    color: var(--control-fgColor-disabled);\n  }\n\n  & > * {\n    min-width: var(--leadingVisual-size);\n    min-height: var(--leadingVisual-size);\n    fill: currentColor;\n  }\n\n  &:where([data-has-caption]) {\n    --leadingVisual-size: 24px;\n  }\n}\n"]}

package/dist/FormControl/FormControlLeadingVisual.d.ts

@@ -0,0 +1,7 @@
+import type React from 'react';
+import type { FCWithSlotMarker } from '../utils/types';
+declare const FormControlLeadingVisual: FCWithSlotMarker<React.PropsWithChildren<{
+    style?: React.CSSProperties;
+}>>;
+export default FormControlLeadingVisual;
+//# sourceMappingURL=FormControlLeadingVisual.d.ts.map

package/dist/FormControl/FormControlLeadingVisual.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormControlLeadingVisual.d.ts","sourceRoot":"","sources":["../../src/FormControl/FormControlLeadingVisual.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,gBAAgB,CAAA;AAEpD,QAAA,MAAM,wBAAwB,EAAE,gBAAgB,CAAC,KAAK,CAAC,iBAAiB,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAAC,CAAC,CAetG,CAAA;AAID,eAAe,wBAAwB,CAAA"}

package/dist/FormControl/FormControlLeadingVisual.js

@@ -0,0 +1,39 @@
+import { c } from 'react-compiler-runtime';
+import { useFormControlContext } from './_FormControlContext.js';
+import classes from './FormControlLeadingVisual.module.css.js';
+import { jsx } from 'react/jsx-runtime';
+
+const FormControlLeadingVisual = t0 => {
+  const $ = c(5);
+  const {
+    children,
+    style
+  } = t0;
+  const {
+    disabled,
+    captionId
+  } = useFormControlContext();
+  const t1 = disabled ? "" : undefined;
+  const t2 = captionId ? "" : undefined;
+  let t3;
+  if ($[0] !== children || $[1] !== style || $[2] !== t1 || $[3] !== t2) {
+    t3 = /*#__PURE__*/jsx("div", {
+      className: classes.LeadingVisual,
+      "data-control-disabled": t1,
+      style: style,
+      "data-has-caption": t2,
+      children: children
+    });
+    $[0] = children;
+    $[1] = style;
+    $[2] = t1;
+    $[3] = t2;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  return t3;
+};
+FormControlLeadingVisual.__SLOT__ = Symbol('FormControl.LeadingVisual');
+
+export { FormControlLeadingVisual as default };

package/dist/FormControl/FormControlLeadingVisual.module.css.js

@@ -0,0 +1,5 @@
+import './FormControlLeadingVisual-e217df71.css';
+
+var classes = {"LeadingVisual":"prc-FormControl-LeadingVisual-Gycks"};
+
+export { classes as default };

package/dist/FormControl/_FormControlContext.js

@@ -0,0 +1,56 @@
+import { c } from 'react-compiler-runtime';
+import { createContext, useContext } from 'react';
+
+const FormControlContext = /*#__PURE__*/createContext(null);
+const FormControlContextProvider = FormControlContext.Provider;
+
+/** This is the private/internal interface for subcomponents of `FormControl`. */
+function useFormControlContext() {
+  var _useContext;
+  return (_useContext = useContext(FormControlContext)) !== null && _useContext !== void 0 ? _useContext : {};
+}
+/**
+ * Make any component compatible with `FormControl`'s automatic wiring up of accessibility attributes & validation by
+ * reading the props from this hook and merging them with the passed-in props. If used outside of `FormControl`, this
+ * hook has no effect.
+ *
+ * @param externalProps The external props passed to this component. If provided, these props will be merged with the
+ * `FormControl` props, with external props taking priority.
+ */
+function useFormControlForwardedProps(externalProps) {
+  const $ = c(9);
+  const context = useContext(FormControlContext);
+  if (!context) {
+    return externalProps;
+  }
+  let t0;
+  if ($[0] !== context.captionId || $[1] !== context.validationMessageId) {
+    t0 = [context.validationMessageId, context.captionId].filter(Boolean).join(" ") || undefined;
+    $[0] = context.captionId;
+    $[1] = context.validationMessageId;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  let t1;
+  if ($[3] !== context.disabled || $[4] !== context.id || $[5] !== context.required || $[6] !== externalProps || $[7] !== t0) {
+    t1 = {
+      disabled: context.disabled,
+      id: context.id,
+      required: context.required,
+      "aria-describedby": t0,
+      ...externalProps
+    };
+    $[3] = context.disabled;
+    $[4] = context.id;
+    $[5] = context.required;
+    $[6] = externalProps;
+    $[7] = t0;
+    $[8] = t1;
+  } else {
+    t1 = $[8];
+  }
+  return t1;
+}
+
+export { FormControlContextProvider, useFormControlContext, useFormControlForwardedProps };

package/dist/FormControl/_FormControlValidation.d.ts

@@ -0,0 +1,12 @@
+import type React from 'react';
+import type { FormValidationStatus } from '../utils/types/FormValidationStatus';
+import type { FCWithSlotMarker } from '../utils/types';
+export type FormControlValidationProps = {
+    variant: FormValidationStatus;
+    id?: string;
+    className?: string;
+    style?: React.CSSProperties;
+};
+declare const FormControlValidation: FCWithSlotMarker<React.PropsWithChildren<FormControlValidationProps>>;
+export default FormControlValidation;
+//# sourceMappingURL=_FormControlValidation.d.ts.map

package/dist/FormControl/_FormControlValidation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"_FormControlValidation.d.ts","sourceRoot":"","sources":["../../src/FormControl/_FormControlValidation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,qCAAqC,CAAA;AAE7E,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,gBAAgB,CAAA;AAEpD,MAAM,MAAM,0BAA0B,GAAG;IACvC,OAAO,EAAE,oBAAoB,CAAA;IAC7B,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B,CAAA;AAED,QAAA,MAAM,qBAAqB,EAAE,gBAAgB,CAAC,KAAK,CAAC,iBAAiB,CAAC,0BAA0B,CAAC,CAkBhG,CAAA;AAID,eAAe,qBAAqB,CAAA"}

package/dist/FormControl/_FormControlValidation.js

@@ -0,0 +1,41 @@
+import { c } from 'react-compiler-runtime';
+import InputValidation from '../internal/components/InputValidation.js';
+import { useFormControlContext } from './_FormControlContext.js';
+import { jsx } from 'react/jsx-runtime';
+
+const FormControlValidation = t0 => {
+  const $ = c(6);
+  const {
+    children,
+    className,
+    variant,
+    id,
+    style
+  } = t0;
+  const {
+    validationMessageId
+  } = useFormControlContext();
+  const t1 = id || validationMessageId || "";
+  let t2;
+  if ($[0] !== children || $[1] !== className || $[2] !== style || $[3] !== t1 || $[4] !== variant) {
+    t2 = /*#__PURE__*/jsx(InputValidation, {
+      className: className,
+      validationStatus: variant,
+      id: t1,
+      style: style,
+      children: children
+    });
+    $[0] = children;
+    $[1] = className;
+    $[2] = style;
+    $[3] = t1;
+    $[4] = variant;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  return t2;
+};
+FormControlValidation.__SLOT__ = Symbol('FormControl.Validation');
+
+export { FormControlValidation as default };

package/dist/FormControl/index.d.ts

@@ -0,0 +1,7 @@
+export { useFormControlForwardedProps } from './_FormControlContext';
+export { default } from './FormControl';
+export type { FormControlProps } from './FormControl';
+export type { FormControlCaptionProps } from './FormControlCaption';
+export type { Props as FormControlLabelProps } from './FormControlLabel';
+export type { FormControlValidationProps } from './_FormControlValidation';
+//# sourceMappingURL=index.d.ts.map

package/dist/FormControl/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/FormControl/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,4BAA4B,EAAC,MAAM,uBAAuB,CAAA;AAClE,OAAO,EAAC,OAAO,EAAC,MAAM,eAAe,CAAA;AACrC,YAAY,EAAC,gBAAgB,EAAC,MAAM,eAAe,CAAA;AACnD,YAAY,EAAC,uBAAuB,EAAC,MAAM,sBAAsB,CAAA;AACjE,YAAY,EAAC,KAAK,IAAI,qBAAqB,EAAC,MAAM,oBAAoB,CAAA;AACtE,YAAY,EAAC,0BAA0B,EAAC,MAAM,0BAA0B,CAAA"}

package/dist/Header/Header.d.ts

@@ -0,0 +1,19 @@
+import type { Location, Pathname } from 'history';
+import React from 'react';
+import type { ForwardRefComponent as PolymorphicForwardRefComponent } from '../utils/polymorphic';
+export type HeaderProps = React.ComponentProps<'header'> & {
+    as?: React.ElementType;
+};
+export type HeaderItemProps = React.ComponentProps<'div'> & {
+    full?: boolean;
+};
+export type HeaderLinkProps = React.ComponentProps<'a'> & {
+    to?: Location | Pathname;
+    as?: React.ElementType;
+};
+declare const _default: PolymorphicForwardRefComponent<"header", HeaderProps> & {
+    Link: React.ForwardRefExoticComponent<Omit<HeaderLinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+    Item: React.ForwardRefExoticComponent<Omit<HeaderItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+};
+export default _default;
+//# sourceMappingURL=Header.d.ts.map

package/dist/Header/Header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../src/Header/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,QAAQ,EAAE,QAAQ,EAAC,MAAM,SAAS,CAAA;AAC/C,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAE/F,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAAG;IAAC,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;CAAC,CAAA;AACnF,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAAC,IAAI,CAAC,EAAE,OAAO,CAAA;CAAC,CAAA;AAC5E,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,GAAG;IAAC,EAAE,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAAC,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;CAAC,CAAA;;;;;AAyC5G,wBAA0E"}