@wistia/ui 0.8.22 → 0.8.23-beta.19d08531.c324c9a

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.8.22
+ * @license @wistia/ui v0.8.23-beta.19d08531.c324c9a
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -80,6 +80,7 @@ __export(index_exports, {
   KeyboardShortcut: () => KeyboardShortcut,
   Label: () => Label,
   Link: () => Link,
+  List: () => List,
   Menu: () => Menu,
   MenuItem: () => MenuItem,
   MenuItemDescription: () => MenuItemDescription,
@@ -7298,6 +7299,7 @@ var Button = (0, import_react22.forwardRef)(
         {
           ref,
           as: Link,
+          disabled: isAriaDisabled(),
           ...props,
           ...commonProps,
           children: unstyled ? children : /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
@@ -13145,6 +13147,164 @@ var WistiaLogo = ({
   return href !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime273.jsx)("a", { href, children: Logo }) : Logo;
 };
 WistiaLogo.displayName = "WistiaLogo";
+
+// src/components/List/List.tsx
+var import_type_guards59 = require("@wistia/type-guards");
+var import_styled_components95 = __toESM(require("styled-components"));
+
+// src/components/List/ListItem.tsx
+var import_styled_components94 = __toESM(require("styled-components"));
+var import_type_guards58 = require("@wistia/type-guards");
+var import_jsx_runtime274 = require("react/jsx-runtime");
+var ListItemComponent = import_styled_components94.default.li`
+  margin-bottom: var(--wui-space-02);
+`;
+var ListItem = ({ children }) => {
+  if ((0, import_type_guards58.isNil)(children)) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime274.jsx)(ListItemComponent, { children });
+};
+ListItem.displayName = "ListItem";
+
+// src/components/List/List.tsx
+var import_jsx_runtime275 = require("react/jsx-runtime");
+var spacesStyle = import_styled_components95.css`
+  overflow: hidden;
+  padding-left: 0;
+  vertical-align: bottom;
+
+  li {
+    display: block;
+    float: left;
+
+    &::after {
+      content: ' ';
+      padding-right: var(--wui-space-03);
+    }
+
+    &:last-child {
+      &::after {
+        content: '' !important;
+        padding-right: 0;
+      }
+    }
+  }
+`;
+var commasStyle = import_styled_components95.css`
+  ${spacesStyle};
+
+  li {
+    &::after {
+      content: ',' !important;
+      padding-right: var(--wui-space-01);
+    }
+  }
+`;
+var slashesStyle = import_styled_components95.css`
+  ${spacesStyle};
+
+  li {
+    &::after {
+      content: '/' !important;
+      padding-left: var(--wui-space-01);
+      padding-right: var(--wui-space-01);
+    }
+  }
+`;
+var breadcrumbsStyle = import_styled_components95.css`
+  ${spacesStyle};
+
+  li {
+    &::after {
+      content: '>' !important;
+      padding-left: var(--wui-space-01);
+      padding-right: var(--wui-space-01);
+    }
+  }
+`;
+var unbulletedStyle = import_styled_components95.css`
+  list-style: none;
+  padding-left: 0;
+`;
+var ListComponent = import_styled_components95.default.ul`
+  list-style-position: outside;
+  margin: 0 0 var(--wui-space-01);
+  padding: 0 0 0 var(--wui-space-04);
+  ${({ variant }) => variant === "unbulleted" && unbulletedStyle};
+  ${({ variant }) => variant === "spaces" && spacesStyle};
+  ${({ variant }) => variant === "commas" && commasStyle};
+  ${({ variant }) => variant === "slashes" && slashesStyle};
+  ${({ variant }) => variant === "breadcrumbs" && breadcrumbsStyle};
+
+  > li:last-child {
+    margin-bottom: 0;
+  }
+
+  ul,
+  ol {
+    margin-top: var(--wui-space-01);
+  }
+
+  /* nested lists should not have bottom margins because their container <li> will have one */
+  li ul,
+  li ol {
+    margin-bottom: 0;
+  }
+`;
+var renderListComponent = (listItems, variant, { ...otherProps }) => {
+  const elementType = variant === "ordered" ? "ol" : "ul";
+  return /* @__PURE__ */ (0, import_jsx_runtime275.jsx)(
+    ListComponent,
+    {
+      as: elementType,
+      variant,
+      ...otherProps,
+      children: listItems
+    }
+  );
+};
+var renderListFromArray = (listItems, variant, otherProps) => {
+  let itemCount = 0;
+  const items = listItems.map((listItem, i) => {
+    const item = listItem;
+    const nextItem = listItems[i + 1];
+    const key = `item-${itemCount += 1}`;
+    if (Array.isArray(nextItem)) {
+      return /* @__PURE__ */ (0, import_jsx_runtime275.jsxs)(ListItem, { children: [
+        item,
+        renderListFromArray(nextItem, variant, otherProps)
+      ] }, key);
+    }
+    if (Array.isArray(item)) {
+      return null;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime275.jsx)(ListItem, { children: item }, key);
+  });
+  return renderListComponent(items, variant, otherProps);
+};
+var List = ({
+  children,
+  items,
+  variant,
+  ...otherProps
+}) => {
+  const listVariant = variant ?? "bullets";
+  if ((0, import_type_guards59.isNotNil)(children)) {
+    if (Array.isArray(children) && !children.length) {
+      return null;
+    }
+    return renderListComponent(children, listVariant, otherProps);
+  }
+  if ((0, import_type_guards59.isNotNil)(items)) {
+    if (!items.length) {
+      return null;
+    }
+    return renderListFromArray(items, listVariant, otherProps);
+  }
+  return null;
+};
+List.displayName = "List";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ActionButton,
@@ -13188,6 +13348,7 @@ WistiaLogo.displayName = "WistiaLogo";
   KeyboardShortcut,
   Label,
   Link,
+  List,
   Menu,
   MenuItem,
   MenuItemDescription,