@wistia/ui 0.8.27 → 0.8.28

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.8.27
+ * @license @wistia/ui v0.8.28
  *
  * 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,
@@ -7790,7 +7791,6 @@ var makePolymorphic = (component) => {
 
 // src/components/Box/Box.tsx
 var import_jsx_runtime199 = require("react/jsx-runtime");
-var isDev = process.env["NODE_ENV"] === "development" || process.env["NODE_ENV"] === "test";
 var getGapStyle = (gap) => {
   if ((0, import_type_guards20.isNotNil)(gap)) {
     if ((0, import_type_guards20.isRecord)(gap)) {
@@ -7885,22 +7885,6 @@ var StyledBoxComponent = import_styled_components27.default.div`
   justify-content: ${({ $justifyContent }) => $justifyContent};
   order: ${({ $order }) => (0, import_type_guards20.isNotNil)($order) ? $order : null};
 `;
-var wrapChildren = (children) => {
-  if ((0, import_type_guards20.isNotNil)(children)) {
-    if (typeof children === "object" && isDev) {
-      return import_react26.Children.map(children, (child) => {
-        if ((0, import_type_guards20.isNil)(child)) return null;
-        const elementParams = {};
-        if (child.type?.displayName === "Box" || child.type?.displayName === "Box_UI") {
-          elementParams.hasBoxParent = true;
-        }
-        return (0, import_react26.cloneElement)(child, elementParams);
-      });
-    }
-    return children;
-  }
-  return null;
-};
 var DEFAULT_ELEMENT = "div";
 var BoxComponent = (0, import_react26.forwardRef)(
   ({
@@ -7914,8 +7898,6 @@ var BoxComponent = (0, import_react26.forwardRef)(
     fillViewport = false,
     gap,
     grow,
-    hasBoxParent = false,
-    // eslint-disable-line @typescript-eslint/no-unused-vars
     height,
     inline = false,
     justifyContent = "flex-start",
@@ -7976,7 +7958,7 @@ var BoxComponent = (0, import_react26.forwardRef)(
         $wrapItems: wrapItems,
         as: renderAs ?? DEFAULT_ELEMENT,
         ...props,
-        children: wrapChildren(children)
+        children
       }
     );
   }
@@ -13277,6 +13259,164 @@ var WistiaLogo = ({
   return href !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime274.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_components96 = __toESM(require("styled-components"));
+
+// src/components/List/ListItem.tsx
+var import_styled_components95 = __toESM(require("styled-components"));
+var import_type_guards58 = require("@wistia/type-guards");
+var import_jsx_runtime275 = require("react/jsx-runtime");
+var ListItemComponent = import_styled_components95.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_runtime275.jsx)(ListItemComponent, { children });
+};
+ListItem.displayName = "ListItem";
+
+// src/components/List/List.tsx
+var import_jsx_runtime276 = require("react/jsx-runtime");
+var spacesStyle = import_styled_components96.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_components96.css`
+  ${spacesStyle};
+
+  li {
+    &::after {
+      content: ',' !important;
+      padding-right: var(--wui-space-01);
+    }
+  }
+`;
+var slashesStyle = import_styled_components96.css`
+  ${spacesStyle};
+
+  li {
+    &::after {
+      content: '/' !important;
+      padding-left: var(--wui-space-01);
+      padding-right: var(--wui-space-01);
+    }
+  }
+`;
+var breadcrumbsStyle = import_styled_components96.css`
+  ${spacesStyle};
+
+  li {
+    &::after {
+      content: '>' !important;
+      padding-left: var(--wui-space-01);
+      padding-right: var(--wui-space-01);
+    }
+  }
+`;
+var unbulletedStyle = import_styled_components96.css`
+  list-style: none;
+  padding-left: 0;
+`;
+var ListComponent = import_styled_components96.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_runtime276.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_runtime276.jsxs)(ListItem, { children: [
+        item,
+        renderListFromArray(nextItem, variant, otherProps)
+      ] }, key);
+    }
+    if (Array.isArray(item)) {
+      return null;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime276.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,
@@ -13320,6 +13460,7 @@ WistiaLogo.displayName = "WistiaLogo";
   KeyboardShortcut,
   Label,
   Link,
+  List,
   Menu,
   MenuItem,
   MenuItemDescription,