@wistia/ui 0.8.26 → 0.8.27-beta.415fcaaf.2aacc73

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.8.26
+ * @license @wistia/ui v0.8.27-beta.415fcaaf.2aacc73
  *
  * 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
       }
     );
   }
@@ -8500,6 +8482,11 @@ Checkbox.displayName = "Checkbox";
 
 // src/components/ClickRegion/ClickRegion.tsx
 var import_react30 = require("react");
+var isClickableElement = (element) => {
+  if (!element) return false;
+  const el = element;
+  return el.closest("button") !== null || el.closest("a") !== null || el.closest("input") !== null || el.closest("select") !== null || el.closest("textarea") !== null || el.closest("label") !== null || el.closest("[data-wui-faux-input]") !== null;
+};
 var ClickRegion = ({ children, targetRef }) => {
   (0, import_react30.useEffect)(() => {
     if (targetRef.current && targetRef.current.tagName === "A") {
@@ -8512,7 +8499,10 @@ var ClickRegion = ({ children, targetRef }) => {
   const handleClick = (0, import_react30.useCallback)(
     (event) => {
       const node = targetRef.current;
-      if (event.target instanceof HTMLAnchorElement && !event.target.hasAttribute("data-click-region-target-link") || event.target instanceof HTMLButtonElement && !event.target.hasAttribute("data-click-region-target-button")) {
+      if (event.target === node) {
+        return;
+      }
+      if (isClickableElement(event.target) && event.target !== node) {
         event.stopPropagation();
         return;
       }
@@ -10766,11 +10756,8 @@ MenuItem.displayName = "MenuItem";
 // src/components/Menu/MenuRadioGroup.tsx
 var import_react_dropdown_menu5 = require("@radix-ui/react-dropdown-menu");
 var import_jsx_runtime238 = require("react/jsx-runtime");
-var MenuRadioGroup = ({ children, label, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime238.jsxs)(import_react_dropdown_menu5.DropdownMenuRadioGroup, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(MenuLabel, { children: label }),
-    children
-  ] });
+var MenuRadioGroup = ({ children, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(import_react_dropdown_menu5.DropdownMenuRadioGroup, { ...props, children });
 };
 MenuRadioGroup.displayName = "MenuRadioGroup";
 
@@ -13272,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,
@@ -13315,6 +13460,7 @@ WistiaLogo.displayName = "WistiaLogo";
   KeyboardShortcut,
   Label,
   Link,
+  List,
   Menu,
   MenuItem,
   MenuItemDescription,