@wistia/ui 0.14.8 → 0.14.9-beta.228fbd19.a9151aa

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.14.8
+ * @license @wistia/ui v0.14.9-beta.228fbd19.a9151aa
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -76,6 +76,10 @@ __export(index_exports, {
   DataCardHoverArrow: () => DataCardHoverArrow,
   DataCardTrend: () => DataCardTrend,
   DataCards: () => DataCards,
+  DataList: () => DataList,
+  DataListItem: () => DataListItem,
+  DataListItemLabel: () => DataListItemLabel,
+  DataListItemValue: () => DataListItemValue,
   Divider: () => Divider,
   EditableHeading: () => EditableHeading,
   Ellipsis: () => Ellipsis,
@@ -14277,6 +14281,13 @@ var Header = import_styled_components86.default.header`
   /* DialogTitle creates an h2 element which inherits some margin */
   h2 {
     margin: 0 0 var(--wui-space-03);
+    padding-right: ${({ $hideCloseButon }) => $hideCloseButon ? "0" : "var(--wui-space-03)"};
+  }
+
+  button {
+    position: absolute;
+    right: var(--wui-space-03);
+    top: var(--wui-space-03);
   }
 `;
 var Title = (0, import_styled_components86.default)(import_react_dialog2.Title)`
@@ -14291,10 +14302,17 @@ var ModalHeader = ({
   hideCloseButton
 }) => {
   const TitleComponent = hideTitle ? /* @__PURE__ */ (0, import_jsx_runtime280.jsx)(ScreenReaderOnly, { children: /* @__PURE__ */ (0, import_jsx_runtime280.jsx)(Title, { children: title }) }) : /* @__PURE__ */ (0, import_jsx_runtime280.jsx)(Title, { children: title });
-  return /* @__PURE__ */ (0, import_jsx_runtime280.jsxs)(Header, { $hideTitle: hideTitle, children: [
-    TitleComponent,
-    hideCloseButton ? null : /* @__PURE__ */ (0, import_jsx_runtime280.jsx)(ModalCloseButton, {})
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime280.jsxs)(
+    Header,
+    {
+      $hideCloseButon: hideCloseButton,
+      $hideTitle: hideTitle,
+      children: [
+        TitleComponent,
+        hideCloseButton ? null : /* @__PURE__ */ (0, import_jsx_runtime280.jsx)(ModalCloseButton, {})
+      ]
+    }
+  );
 };
 
 // src/components/Modal/ModalContent.tsx
@@ -14548,7 +14566,7 @@ var Modal = (0, import_react71.forwardRef)(
               ...props,
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime282.jsx)(ModalBody, { children }),
-                /* @__PURE__ */ (0, import_jsx_runtime282.jsx)(
+                hideCloseButton && hideTitle ? null : /* @__PURE__ */ (0, import_jsx_runtime282.jsx)(
                   ModalHeader,
                   {
                     hideCloseButton,
@@ -16996,6 +17014,86 @@ var ContextMenu = ({
     }
   ) : null;
 };
+
+// src/components/DataList/DataList.tsx
+var import_styled_components120 = __toESM(require("styled-components"));
+var import_jsx_runtime317 = require("react/jsx-runtime");
+var StyledDataList = import_styled_components120.default.dl`
+  display: grid;
+  grid-template-columns: auto 1fr;
+  column-gap: var(--wui-space-02);
+  row-gap: var(--wui-space-04);
+  align-items: baseline;
+  align-content: start;
+
+  dt {
+    margin: 0;
+    padding: 0;
+    font-weight: var(--wui-datalist-label-prominence);
+    width: var(--wui-datalist-label-max-width, auto);
+  }
+
+  dd {
+    margin: 0;
+    padding: 0;
+    text-align: var(--wui-datalist-value-alignment, start);
+  }
+`;
+var DataList = ({
+  children,
+  valueAlignment = "start",
+  labelMaxWith = "auto",
+  labelProminence = "primary",
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime317.jsx)(
+    StyledDataList,
+    {
+      style: {
+        "--wui-datalist-label-max-width": labelMaxWith,
+        "--wui-datalist-value-alignment": valueAlignment === "end" ? "right" : "left",
+        "--wui-datalist-label-prominence": labelProminence === "secondary" ? "var(--wui-typography-weight-label)" : "var(--wui-typography-weight-label-bold)"
+      },
+      ...props,
+      children
+    }
+  );
+};
+DataList.displayName = "DataList_UI";
+
+// src/components/DataList/DataListItem.tsx
+var DataListItem = ({ children }) => {
+  return children;
+};
+DataListItem.displayName = "DataListItem_UI";
+
+// src/components/DataList/DataListItemLabel.tsx
+var import_jsx_runtime318 = require("react/jsx-runtime");
+var DataListItemLabel = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime318.jsx)(
+    Text,
+    {
+      variant: "label4",
+      ...props,
+      renderAs: "dt"
+    }
+  );
+};
+DataListItemLabel.displayName = "DataListItemLabel_UI";
+
+// src/components/DataList/DataListItemValue.tsx
+var import_jsx_runtime319 = require("react/jsx-runtime");
+var DataListItemValue = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime319.jsx)(
+    Text,
+    {
+      variant: "body3",
+      ...props,
+      renderAs: "dd"
+    }
+  );
+};
+DataListItemValue.displayName = "DataListItemValue_UI";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ActionButton,
@@ -17035,6 +17133,10 @@ var ContextMenu = ({
   DataCardHoverArrow,
   DataCardTrend,
   DataCards,
+  DataList,
+  DataListItem,
+  DataListItemLabel,
+  DataListItemValue,
   Divider,
   EditableHeading,
   Ellipsis,