@wistia/ui 0.18.10-beta.61e9f9ba.0b7ff11 → 0.18.10-beta.621d1dd0.401dcf0

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.18.10-beta.61e9f9ba.0b7ff11
+ * @license @wistia/ui v0.18.10-beta.621d1dd0.401dcf0
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -15146,20 +15146,8 @@ var import_react73 = require("react");
 var import_styled_components86 = require("styled-components");
 var import_type_guards49 = require("@wistia/type-guards");
 var import_jsx_runtime288 = require("react/jsx-runtime");
-var inlineErrorStyles = import_styled_components86.css`
-  grid-template-rows: 1fr auto;
-  grid-template-areas: 'label-description input' '. error';
-`;
-var inlineBaseGridAreaStyles = import_styled_components86.css`
-  grid-template-rows: 1fr;
-  grid-template-areas: 'label-description input';
-`;
-var blockGridErrorStyles = import_styled_components86.css`
-  grid-template-rows: auto 1fr auto;
-  grid-template-areas: 'label-description' 'input' 'error';
-`;
 var StyledFormField = import_styled_components86.styled.div`
-  --form-field-spacing: var(--wui-space-02);
+  --form-field-spacing: var(--wui-space-01);
   --form-field-spacing-inline: var(--wui-space-02);
   --form-field-error-color: var(--wui-color-text-secondary-error);
 
@@ -15173,28 +15161,21 @@ var StyledFormField = import_styled_components86.styled.div`
   &[data-label-position='inline-compact'] {
     gap: var(--form-field-spacing-inline);
     grid-template-columns: auto 1fr;
-    ${inlineBaseGridAreaStyles}
-    ${({ $hasError }) => $hasError && inlineErrorStyles}
+    grid-template-rows: 1fr auto;
   }
 
   &[data-label-position='inline'] {
     gap: var(--form-field-spacing-inline);
     grid-template-columns: minmax(auto, 1fr) 1fr;
-    ${inlineBaseGridAreaStyles}
-    ${({ $hasError }) => $hasError && inlineErrorStyles}
+    grid-template-rows: 1fr auto;
   }
 
   &[data-label-position='block'] {
     gap: var(--form-field-spacing);
     grid-template-columns: 1fr;
-    grid-template-rows: auto 1fr;
-    grid-template-areas: 'label-description' 'input';
-    ${({ $hasError }) => $hasError && blockGridErrorStyles}
+    grid-template-rows: 1fr;
   }
 `;
-var ErrorText = (0, import_styled_components86.styled)(Text)`
-  grid-area: error;
-`;
 var StyledErrorList = import_styled_components86.styled.ul`
   margin: 0;
   padding: 0;
@@ -15202,14 +15183,13 @@ var StyledErrorList = import_styled_components86.styled.ul`
   display: flex;
   flex-direction: column;
   gap: var(--wui-space-01);
-  grid-area: error;
 `;
 var ErrorMessages = ({ errors, id }) => {
   const isErrorArray = (0, import_type_guards49.isArray)(errors);
   const isMultipleErrors = isErrorArray && errors.length > 1;
   if (!isErrorArray) {
     return /* @__PURE__ */ (0, import_jsx_runtime288.jsx)(
-      ErrorText,
+      Text,
       {
         colorScheme: "error",
         id,
@@ -15222,7 +15202,7 @@ var ErrorMessages = ({ errors, id }) => {
   }
   if (!isMultipleErrors) {
     return /* @__PURE__ */ (0, import_jsx_runtime288.jsx)(
-      ErrorText,
+      Text,
       {
         colorScheme: "error",
         id,
@@ -15267,16 +15247,12 @@ var FormField = ({
   const descriptionId = `${computedId}-description`;
   const errorId = `${computedId}-error`;
   const ariaDescribedby = [descriptionId, errorId].filter(Boolean).join(" ") || void 0;
-  const hasDescription = (0, import_type_guards49.isNotNil)(description);
-  const hasError = (0, import_type_guards49.isNotNil)(computedError);
-  const shouldRenderLabelDescriptionWrapper = !isIntegratedLabel || hasDescription;
   let childProps = {
     name,
     id: computedId,
     label: isIntegratedLabel ? label : void 0,
     "aria-describedby": ariaDescribedby,
-    "aria-invalid": hasError,
-    style: { gridArea: "input" },
+    "aria-invalid": (0, import_type_guards49.isNotNil)(computedError),
     ...props
   };
   if ((0, import_type_guards49.isUndefined)(value) && (0, import_type_guards49.isNotUndefined)(defaultValue)) {
@@ -15306,38 +15282,28 @@ var FormField = ({
     StyledFormField,
     {
       ...props,
-      $hasError: hasError,
       "data-label-position": labelPosition ?? formState.labelPosition,
       children: [
-        shouldRenderLabelDescriptionWrapper ? /* @__PURE__ */ (0, import_jsx_runtime288.jsxs)(
-          Stack,
+        !isIntegratedLabel && /* @__PURE__ */ (0, import_jsx_runtime288.jsx)(
+          Label,
           {
-            direction: "vertical",
-            gap: "space-01",
-            style: {
-              gridArea: "label-description"
-            },
-            children: [
-              !isIntegratedLabel && /* @__PURE__ */ (0, import_jsx_runtime288.jsx)(
-                Label,
-                {
-                  htmlFor: computedId,
-                  required,
-                  children: label
-                }
-              ),
-              hasDescription ? /* @__PURE__ */ (0, import_jsx_runtime288.jsx)(FormControlLabelDescription, { id: descriptionId, children: description }) : null
-            ]
+            htmlFor: computedId,
+            required,
+            children: label
           }
-        ) : null,
+        ),
+        (0, import_type_guards49.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime288.jsx)(FormControlLabelDescription, { id: descriptionId, children: description }) : null,
         (0, import_react73.cloneElement)(children, childProps),
-        hasError ? /* @__PURE__ */ (0, import_jsx_runtime288.jsx)(
-          ErrorMessages,
-          {
-            errors: computedError,
-            id: errorId
-          }
-        ) : null
+        (0, import_type_guards49.isNotNil)(computedError) ? /* @__PURE__ */ (0, import_jsx_runtime288.jsxs)(import_jsx_runtime288.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime288.jsx)("div", {}),
+          /* @__PURE__ */ (0, import_jsx_runtime288.jsx)(
+            ErrorMessages,
+            {
+              errors: computedError,
+              id: errorId
+            }
+          )
+        ] }) : null
       ]
     }
   );