@wistia/ui 0.6.29 → 0.6.30-beta.11d415b6.8f60979

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.6.29
+ * @license @wistia/ui v0.6.30-beta.11d415b6.8f60979
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -7418,20 +7418,20 @@ var BoxComponent = (0, import_react17.forwardRef)(
     ...otherProps
   }, ref) => {
     if ((0, import_type_guards17.isNotUndefined)(height)) {
-      if ((0, import_type_guards17.isTruthy)(fill) || fill === "vertical") {
+      if (fill === true || fill === "vertical") {
         throw new Error('Cannot use height prop with fill="vertical" or fill={true}');
       }
-      if ((0, import_type_guards17.isTruthy)(fillViewport) || fillViewport === "vertical") {
+      if (fillViewport === true || fillViewport === "vertical") {
         throw new Error(
           'Cannot use height prop with fillViewport="vertical" or fillViewport={true}'
         );
       }
     }
     if ((0, import_type_guards17.isNotUndefined)(width)) {
-      if ((0, import_type_guards17.isTruthy)(fill) || fill === "horizontal") {
+      if (fill === true || fill === "horizontal") {
         throw new Error('Cannot use width prop with fill="horizontal" or fill={true}');
       }
-      if ((0, import_type_guards17.isTruthy)(fillViewport) || fillViewport === "horizontal") {
+      if (fillViewport === true || fillViewport === "horizontal") {
         throw new Error(
           'Cannot use width prop with fillViewport="horizontal" or fillViewport={true}'
         );
@@ -9382,24 +9382,29 @@ var ErrorMessages = ({ errors, id }) => {
 };
 var FormField = ({
   children,
+  description,
+  error,
+  id,
   label,
+  labelPosition,
   name,
-  error,
   value,
-  labelPosition,
-  id,
   ...props
 }) => {
   const formState = (0, import_react32.useContext)(FormContext);
   const checkboxGroup = (0, import_react32.useContext)(CheckboxGroupContext);
+  const defaultValue = formState.values[name];
   const isIntegratedLabel = children.type === Checkbox;
   const computedId = id ?? `${formState.formId}-${name}`;
   const computedError = error ?? formState.errors[name];
-  const defaultValue = formState.values[name];
+  const descriptionId = `${computedId}-description`;
+  const errorId = `${computedId}-error`;
+  const ariaDescribedby = [descriptionId, errorId].filter(Boolean).join(" ") || void 0;
   let childProps = {
     name,
     id: computedId,
     label: isIntegratedLabel ? label : void 0,
+    "aria-describedby": ariaDescribedby,
     ...props
   };
   if ((0, import_type_guards29.isUndefined)(value) && (0, import_type_guards29.isNotUndefined)(defaultValue)) {
@@ -9422,8 +9427,7 @@ var FormField = ({
       ...childProps,
       name: computedName,
       onChange: handleChange,
-      "aria-invalid": (0, import_type_guards29.isNotNil)(error),
-      "aria-describedby": (0, import_type_guards29.isNotNil)(error) ? `${computedId}-error` : void 0
+      "aria-invalid": (0, import_type_guards29.isNotNil)(error)
     };
   }
   import_react32.Children.only(children);
@@ -9434,6 +9438,7 @@ var FormField = ({
       "data-label-position": labelPosition ?? formState.labelPosition,
       children: [
         !isIntegratedLabel && /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(Label, { htmlFor: computedId, children: label }),
+        (0, import_type_guards29.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(FormControlLabelDescription, { id: descriptionId, children: description }) : null,
         (0, import_react32.cloneElement)(children, childProps),
         (0, import_type_guards29.isNotNil)(computedError) ? /* @__PURE__ */ (0, import_jsx_runtime225.jsxs)(import_jsx_runtime225.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime225.jsx)("div", {}),
@@ -9441,7 +9446,7 @@ var FormField = ({
             ErrorMessages,
             {
               errors: computedError,
-              id: `${computedId}-error`
+              id: errorId
             }
           )
         ] }) : null