@wistia/ui 0.18.18 → 0.19.0-beta.c03a2908.692126d

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.18.18
+ * @license @wistia/ui v0.19.0-beta.c03a2908.692126d
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -15230,8 +15230,20 @@ var import_react73 = require("react");
 var import_styled_components87 = require("styled-components");
 var import_type_guards49 = require("@wistia/type-guards");
 var import_jsx_runtime293 = require("react/jsx-runtime");
+var inlineErrorStyles = import_styled_components87.css`
+  grid-template-rows: 1fr auto;
+  grid-template-areas: 'label-description input' '. error';
+`;
+var inlineBaseGridAreaStyles = import_styled_components87.css`
+  grid-template-rows: 1fr;
+  grid-template-areas: 'label-description input';
+`;
+var blockGridErrorStyles = import_styled_components87.css`
+  grid-template-rows: auto 1fr auto;
+  grid-template-areas: 'label-description' 'input' 'error';
+`;
 var StyledFormField = import_styled_components87.styled.div`
-  --form-field-spacing: var(--wui-space-01);
+  --form-field-spacing: var(--wui-space-02);
   --form-field-spacing-inline: var(--wui-space-02);
   --form-field-error-color: var(--wui-color-text-secondary-error);
 
@@ -15245,21 +15257,28 @@ var StyledFormField = import_styled_components87.styled.div`
   &[data-label-position='inline-compact'] {
     gap: var(--form-field-spacing-inline);
     grid-template-columns: auto 1fr;
-    grid-template-rows: 1fr auto;
+    ${inlineBaseGridAreaStyles}
+    ${({ $hasError }) => $hasError && inlineErrorStyles}
   }
 
   &[data-label-position='inline'] {
     gap: var(--form-field-spacing-inline);
     grid-template-columns: minmax(auto, 1fr) 1fr;
-    grid-template-rows: 1fr auto;
+    ${inlineBaseGridAreaStyles}
+    ${({ $hasError }) => $hasError && inlineErrorStyles}
   }
 
   &[data-label-position='block'] {
     gap: var(--form-field-spacing);
     grid-template-columns: 1fr;
-    grid-template-rows: 1fr;
+    grid-template-rows: auto 1fr;
+    grid-template-areas: 'label-description' 'input';
+    ${({ $hasError }) => $hasError && blockGridErrorStyles}
   }
 `;
+var ErrorText = (0, import_styled_components87.styled)(Text)`
+  grid-area: error;
+`;
 var StyledErrorList = import_styled_components87.styled.ul`
   margin: 0;
   padding: 0;
@@ -15267,13 +15286,14 @@ var StyledErrorList = import_styled_components87.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_runtime293.jsx)(
-      Text,
+      ErrorText,
       {
         colorScheme: "error",
         id,
@@ -15286,7 +15306,7 @@ var ErrorMessages = ({ errors, id }) => {
   }
   if (!isMultipleErrors) {
     return /* @__PURE__ */ (0, import_jsx_runtime293.jsx)(
-      Text,
+      ErrorText,
       {
         colorScheme: "error",
         id,
@@ -15331,12 +15351,16 @@ 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": (0, import_type_guards49.isNotNil)(computedError),
+    "aria-invalid": hasError,
+    style: { gridArea: "input" },
     ...props
   };
   if ((0, import_type_guards49.isUndefined)(value) && (0, import_type_guards49.isNotUndefined)(defaultValue)) {
@@ -15366,28 +15390,38 @@ var FormField = ({
     StyledFormField,
     {
       ...props,
+      $hasError: hasError,
       "data-label-position": labelPosition ?? formState.labelPosition,
       children: [
-        !isIntegratedLabel && /* @__PURE__ */ (0, import_jsx_runtime293.jsx)(
-          Label,
+        shouldRenderLabelDescriptionWrapper ? /* @__PURE__ */ (0, import_jsx_runtime293.jsxs)(
+          Stack,
           {
-            htmlFor: computedId,
-            required,
-            children: label
+            direction: "vertical",
+            gap: "space-01",
+            style: {
+              gridArea: "label-description"
+            },
+            children: [
+              !isIntegratedLabel && /* @__PURE__ */ (0, import_jsx_runtime293.jsx)(
+                Label,
+                {
+                  htmlFor: computedId,
+                  required,
+                  children: label
+                }
+              ),
+              hasDescription ? /* @__PURE__ */ (0, import_jsx_runtime293.jsx)(FormControlLabelDescription, { id: descriptionId, children: description }) : null
+            ]
           }
-        ),
-        (0, import_type_guards49.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime293.jsx)(FormControlLabelDescription, { id: descriptionId, children: description }) : null,
+        ) : null,
         (0, import_react73.cloneElement)(children, childProps),
-        (0, import_type_guards49.isNotNil)(computedError) ? /* @__PURE__ */ (0, import_jsx_runtime293.jsxs)(import_jsx_runtime293.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime293.jsx)("div", {}),
-          /* @__PURE__ */ (0, import_jsx_runtime293.jsx)(
-            ErrorMessages,
-            {
-              errors: computedError,
-              id: errorId
-            }
-          )
-        ] }) : null
+        hasError ? /* @__PURE__ */ (0, import_jsx_runtime293.jsx)(
+          ErrorMessages,
+          {
+            errors: computedError,
+            id: errorId
+          }
+        ) : null
       ]
     }
   );
@@ -18396,6 +18430,8 @@ var StyledThumbnail = import_styled_components128.styled.div`
   &,
   img {
     border-radius: clamp(var(--wui-border-radius-01), 8cqh, var(--wui-border-radius-05));
+    outline: 1px solid rgba(0, 0, 0, 0.025);
+    outline-offset: -1px;
   }
 
   @container (min-width: 200px) {
@@ -18553,7 +18589,7 @@ var Thumbnail = (0, import_react97.forwardRef)(
 Thumbnail.displayName = "Thumbnail_UI";
 
 // src/components/ThumbnailCollage/ThumbnailCollage.tsx
-var import_react98 = require("react");
+var import_react98 = __toESM(require("react"));
 var import_styled_components129 = require("styled-components");
 var import_type_guards75 = require("@wistia/type-guards");
 var import_jsx_runtime338 = (
@@ -18567,12 +18603,19 @@ var ThumbnailCollageContainer = import_styled_components129.styled.div`
   display: flex;
 `;
 var StyledThumbnailCollage = import_styled_components129.styled.div`
+  --wui-thumbnail-collage-spacing: var(--wui-space-01);
+  border-radius: clamp(var(--wui-border-radius-01), 8cqh, var(--wui-border-radius-05));
   display: grid;
-  gap: var(--wui-space-01);
+  gap: var(--wui-thumbnail-collage-spacing);
   width: 100%;
   grid-template-columns: 3fr 2fr;
   grid-template-rows: 1fr 1fr;
 
+  ${({ $hasBackground }) => $hasBackground && import_styled_components129.css`
+      background-color: var(--wui-color-bg-surface-tertiary);
+      padding: var(--wui-thumbnail-collage-spacing);
+    `}
+
   &:has(:nth-child(1)) {
     grid-template-areas:
       'a a'
@@ -18609,16 +18652,21 @@ var StyledThumbnailCollage = import_styled_components129.styled.div`
     height: 100%;
     width: 100%;
   }
+
+  @container (min-width: 200px) {
+    --wui-thumbnail-collage-spacing: var(--wui-space-02);
+  }
 `;
 var ThumbnailCollage = ({
   children = [],
   gradientBackground = "defaultMidOne",
+  hasBackground = false,
   ...props
 }) => {
-  const thumbnailArray = import_react98.Children.toArray(children);
+  const thumbnailArray = import_react98.default.Children.toArray(children);
   const truncatedThumbnails = thumbnailArray.slice(0, 3);
   const thumbnails = (0, import_type_guards75.isNonEmptyArray)(thumbnailArray) ? truncatedThumbnails.map((child) => {
-    return (0, import_react98.cloneElement)(child, {
+    return import_react98.default.cloneElement(child, {
       ...child.props,
       children: void 0
     });
@@ -18636,6 +18684,7 @@ var ThumbnailCollage = ({
     StyledThumbnailCollage,
     {
       $gradientBackground: gradientBackground,
+      $hasBackground: hasBackground,
       "data-wui-thumbnail-collage": true,
       ...props,
       children: thumbnails