@wistia/ui 0.14.12 → 0.14.13-beta.5aafe6cc.47508a3

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.14.12
+ * @license @wistia/ui v0.14.13-beta.5aafe6cc.47508a3
  *
  * 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,
@@ -11207,13 +11211,18 @@ var inputStyles = import_styled_components61.css`
     font-weight: var(--wui-input-font-weight);
     color: var(--wui-input-color-text);
 
+    &:read-only {
+      outline-style: dashed;
+    }
+
     &::placeholder {
       color: var(--wui-input-placeholder);
       opacity: 1; /* Firefox */
     }
 
     &:focus {
-      outline: 2px solid var(--wui-input-color-border-focus);
+      outline-width: 2px;
+      outline-color: var(--wui-input-color-border-focus);
       outline-offset: -2px;
     }
 
@@ -13252,18 +13261,17 @@ var import_styled_components76 = __toESM(require("styled-components"));
 var import_react62 = require("react");
 var import_type_guards41 = require("@wistia/type-guards");
 var import_jsx_runtime265 = require("react/jsx-runtime");
-var StyledInput2 = (0, import_styled_components76.default)(Input)`
-  &:not([aria-disabled='true']) {
-    cursor: pointer;
-  }
+var StyledIconButton = (0, import_styled_components76.default)(IconButton)`
+  /* override size for icon button since prop gets changed by Input */
+  height: var(--icon-button-size-sm);
+  width: var(--icon-button-size-sm);
 
-  &::selection {
-    background-color: transparent;
-  }
+  /* override input padding variable since it is used for Input Icon positioning */
+  --wui-input-horizontal-padding: 4px;
 `;
 var COPY_SUCCESS_DURATION = 2e3;
 var InputClickToCopy = (0, import_react62.forwardRef)(
-  ({ value, onCopy, ...props }, ref) => {
+  ({ value, onCopy, disabled = false, ...props }, ref) => {
     const [isCopied, setIsCopied] = (0, import_react62.useState)(false);
     (0, import_react62.useEffect)(() => {
       if (isCopied) {
@@ -13278,6 +13286,9 @@ var InputClickToCopy = (0, import_react62.forwardRef)(
     }, [isCopied]);
     const handleClick = (event) => {
       event.preventDefault();
+      if (disabled) {
+        return;
+      }
       if ((0, import_type_guards41.isFunction)(props.onClick)) {
         props.onClick(event);
       }
@@ -13290,20 +13301,24 @@ var InputClickToCopy = (0, import_react62.forwardRef)(
       });
     };
     return /* @__PURE__ */ (0, import_jsx_runtime265.jsx)(
-      StyledInput2,
+      Input,
       {
         "aria-label": "Click to Copy",
         ...props,
         ref,
-        onClick: handleClick,
+        disabled,
         readOnly: true,
-        rightIcon: isCopied ? /* @__PURE__ */ (0, import_jsx_runtime265.jsx)(
-          Icon,
+        rightIcon: /* @__PURE__ */ (0, import_jsx_runtime265.jsx)(
+          StyledIconButton,
           {
-            colorScheme: "success",
-            type: "checkmark-circle"
+            colorScheme: isCopied ? "success" : "inherit",
+            disabled,
+            label: "Copy to clipboard",
+            onClick: handleClick,
+            variant: "ghost",
+            children: isCopied ? /* @__PURE__ */ (0, import_jsx_runtime265.jsx)(Icon, { type: "checkmark-circle" }) : /* @__PURE__ */ (0, import_jsx_runtime265.jsx)(Icon, { type: "save-as-copy" })
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime265.jsx)(Icon, { type: "save-as-copy" }),
+        ),
         value
       }
     );
@@ -16917,7 +16932,7 @@ var import_styled_components120 = __toESM(require("styled-components"));
 var import_react89 = require("react");
 var import_type_guards70 = require("@wistia/type-guards");
 var import_jsx_runtime315 = require("react/jsx-runtime");
-var StyledIconButton = (0, import_styled_components120.default)(IconButton)`
+var StyledIconButton2 = (0, import_styled_components120.default)(IconButton)`
   /* override size for icon button since prop gets changed by Input */
   height: var(--icon-button-size-sm);
   width: var(--icon-button-size-sm);
@@ -16942,7 +16957,7 @@ var InputPassword = (0, import_react89.forwardRef)(
         ref,
         disabled,
         rightIcon: /* @__PURE__ */ (0, import_jsx_runtime315.jsx)(
-          StyledIconButton,
+          StyledIconButton2,
           {
             disabled,
             label: isVisible ? "Hide password" : "Show password",
@@ -17017,6 +17032,87 @@ var ContextMenu = ({
     }
   ) : null;
 };
+
+// src/components/DataList/DataList.tsx
+var import_styled_components121 = __toESM(require("styled-components"));
+var import_jsx_runtime317 = require("react/jsx-runtime");
+var StyledDataList = import_styled_components121.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,
+    {
+      role: "list",
+      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,
@@ -17056,6 +17152,10 @@ var ContextMenu = ({
   DataCardHoverArrow,
   DataCardTrend,
   DataCards,
+  DataList,
+  DataListItem,
+  DataListItemLabel,
+  DataListItemValue,
   Divider,
   EditableHeading,
   Ellipsis,