@wistia/ui 0.18.17 → 0.18.18-beta.52b38c67.eabff6e

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.18.17
+ * @license @wistia/ui v0.18.18-beta.52b38c67.eabff6e
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -14110,12 +14110,22 @@ var import_react62 = require("react");
 var import_styled_components77 = require("styled-components");
 var import_type_guards44 = require("@wistia/type-guards");
 var import_jsx_runtime278 = require("react/jsx-runtime");
+var pulse = import_styled_components77.keyframes`
+  0%,
+      100% {
+        opacity: 1;
+      }
+      50% {
+        opacity: 0.5;
+      }
+`;
 var StyledDataCard = import_styled_components77.styled.div`
   --wui-data-card-text: var(--wui-color-text-button);
   --wui-color-text: var(--wui-data-card-text);
   --wui-data-card-background: var(--wui-color-bg-surface-secondary);
   --wui-data-card-background-hover: var(--wui-color-bg-surface-secondary-hover);
   --wui-data-card-background-active: var(--wui-color-bg-surface-secondary-active);
+  --wui-data-card-skeleton-color: var(--wui-color-bg-surface-tertiary);
 
   display: grid;
   grid-template-areas: 'label slot' 'value value';
@@ -14143,6 +14153,16 @@ var StyledDataCard = import_styled_components77.styled.div`
     grid-template-rows: auto auto auto;
   }
 
+  [data-wui-data-card-skeleton='true'] {
+    pointer-events: none;
+    background-color: var(--wui-data-card-skeleton-color);
+    animation: ${pulse} 1.5s var(--wui-motion-ease-in-out) 0.5s infinite;
+    color: transparent;
+    user-select: none;
+    border-radius: var(--wui-border-radius-01);
+    width: fit-content;
+  }
+
   &[data-click-region] {
     &:not([disabled]) {
       cursor: pointer;
@@ -14174,6 +14194,7 @@ var StyledDataCard = import_styled_components77.styled.div`
         --wui-data-card-background-hover: var(--wui-color-bg-surface-selected-hover);
         --wui-data-card-background-active: var(--wui-color-bg-surface-selected-active);
         --wui-data-card-focus-ring: var(--wui-color-border-selected);
+        --wui-data-card-skeleton-color: var(--wui-color-bg-surface-selected-active);
       }
     }
 
@@ -14184,38 +14205,23 @@ var StyledDataCard = import_styled_components77.styled.div`
     ${({ $colorScheme }) => getColorScheme($colorScheme)}
   }
 `;
-var shimmer = import_styled_components77.keyframes`
-  0% {
-    background-position: 200% 0;
-  }
-  100% {
-    background-position: -200% 0;
-  }
-`;
-var LoadingBackground = import_styled_components77.styled.div`
-  background: linear-gradient(
-    90deg,
-    var(--wui-color-bg-surface-tertiary) 25%,
-    var(--wui-color-bg-surface-secondary) 37%,
-    var(--wui-color-bg-surface-tertiary) 63%
-  );
-  background-size: 200% 100%;
-  animation: ${shimmer} 1.5s infinite;
-  border-radius: var(--wui-border-radius-01);
-`;
-var StyledLoadingLabel = (0, import_styled_components77.styled)(LoadingBackground)`
-  width: 80px;
-  height: var(--wui-typography-heading-6-line-height);
-`;
-var StyledLoadingValue = (0, import_styled_components77.styled)(LoadingBackground)`
-  width: 90%;
-  height: var(--wui-typography-heading-3-line-height);
-`;
 var StyledLabel3 = (0, import_styled_components77.styled)(Heading)`
   grid-area: label;
+
+  &[data-wui-data-card-skeleton='true'] {
+    width: 80px;
+  }
+
+  button {
+    text-align: left;
+  }
 `;
 var StyledValue = (0, import_styled_components77.styled)(Heading)`
   grid-area: value;
+
+  &[data-wui-data-card-skeleton='true'] {
+    width: min(90%, 156px);
+  }
 `;
 var StyledSlot = import_styled_components77.styled.div`
   display: flex;
@@ -14249,17 +14255,19 @@ var DataCardInner = ({
       /* @__PURE__ */ (0, import_jsx_runtime278.jsx)(
         StyledLabel3,
         {
-          renderAs: "dt",
+          "data-wui-data-card-skeleton": isLoading,
+          renderAs: "div",
           variant: "heading6",
-          children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime278.jsx)(StyledLoadingLabel, {}) : label
+          children: label
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime278.jsx)(
         StyledValue,
         {
-          renderAs: "dd",
+          "data-wui-data-card-skeleton": isLoading,
+          renderAs: "div",
           variant: "heading3",
-          children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime278.jsx)(StyledLoadingValue, {}) : value
+          children: value
         }
       ),
       (0, import_type_guards44.isNotNil)(upperRightSlot) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime278.jsx)(StyledSlot, { children: upperRightSlot }),
@@ -14310,9 +14318,16 @@ var import_styled_components78 = require("styled-components");
 var import_jsx_runtime279 = require("react/jsx-runtime");
 var StyledDataCards = (0, import_styled_components78.styled)(Box)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
+  --wui-data-cards-column-count: ${({ $columns }) => $columns === "auto" ? void 0 : $columns};
+  --wui-data-cards-total-column-gap-width: calc(var(--wui-data-cards-column-count) - 1) *
+    var(--wui-space-02);
+  --wui-data-cards-column-width: calc(
+    (100% - var(--wui-data-cards-total-column-gap-width)) / var(--wui-data-cards-column-count)
+  );
 
   > * {
     min-width: 120px;
+    flex-basis: var(--wui-data-cards-column-width, 0);
     max-width: ${({ $cardMaxWidth }) => $cardMaxWidth};
   }
 `;
@@ -14320,19 +14335,22 @@ var DataCards = ({
   children,
   cardMaxWidth = "none",
   colorScheme = "inherit",
+  columns = "auto",
   ...props
 }) => {
+  const responsiveCardMaxWidth = useResponsiveProp(cardMaxWidth);
+  const responsiveColumns = useResponsiveProp(columns);
   return /* @__PURE__ */ (0, import_jsx_runtime279.jsx)(
     StyledDataCards,
     {
       ...props,
-      $cardMaxWidth: cardMaxWidth,
+      $cardMaxWidth: responsiveCardMaxWidth,
       $colorScheme: colorScheme,
+      $columns: responsiveColumns,
       alignItems: "stretch",
       direction: "row",
       fill: "horizontal",
       gap: "space-02",
-      renderAs: "dl",
       wrapItems: true,
       children
     }
@@ -15226,8 +15244,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);
 
@@ -15241,21 +15271,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;
@@ -15263,13 +15300,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,
@@ -15282,7 +15320,7 @@ var ErrorMessages = ({ errors, id }) => {
   }
   if (!isMultipleErrors) {
     return /* @__PURE__ */ (0, import_jsx_runtime293.jsx)(
-      Text,
+      ErrorText,
       {
         colorScheme: "error",
         id,
@@ -15327,12 +15365,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)) {
@@ -15362,28 +15404,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
       ]
     }
   );