@wistia/ui 0.6.11 → 0.6.12-beta.28258a2a.8bdbb6c

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.6.11
+ * @license @wistia/ui v0.6.12-beta.28258a2a.8bdbb6c
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -10041,12 +10041,14 @@ var getControlProps = (isOpen, onOpenChange) => {
 // src/components/Popover/Popover.tsx
 var import_jsx_runtime238 = require("react/jsx-runtime");
 var StyledContent2 = (0, import_styled_components61.default)(import_react_popover.Content)`
-  border-radius: var(--wui-border-radius-02);
-  padding: var(--wui-space-04);
-  max-width: 320px;
-  background-color: var(--wui-color-bg-surface);
-  box-shadow: var(--wui-elevation-01);
-  border: 1px solid var(--wui-color-border);
+  ${({ $unstyled }) => !$unstyled && import_styled_components61.css`
+      border-radius: var(--wui-border-radius-02);
+      padding: var(--wui-space-04);
+      max-width: 320px;
+      background-color: var(--wui-color-bg-surface);
+      box-shadow: var(--wui-elevation-01);
+      border: 1px solid var(--wui-color-border);
+    `}
 
   [data-wui-popover-close] {
     position: absolute;
@@ -10054,16 +10056,13 @@ var StyledContent2 = (0, import_styled_components61.default)(import_react_popove
     right: var(--wui-space-02);
   }
 `;
-var StyledArrow = (0, import_styled_components61.default)(import_react_popover.Arrow)`
-  fill: white;
-  display: none;
-`;
 var Popover = ({
   children,
   trigger,
   isOpen = false,
   hideCloseButton = false,
   onOpenChange,
+  unstyled = false,
   ...props
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime238.jsxs)(import_react_popover.Root, { ...getControlProps(isOpen, onOpenChange), children: [
@@ -10071,10 +10070,10 @@ var Popover = ({
     /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(import_react_popover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime238.jsxs)(
       StyledContent2,
       {
-        sideOffset: 5,
+        sideOffset: 8,
         ...props,
+        $unstyled: unstyled,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(StyledArrow, {}),
           !hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(import_react_popover.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(
             IconButton,
             {
@@ -10815,6 +10814,7 @@ var TableRow = ({ children, ...props }) => {
 var import_react59 = require("react");
 var import_react_tabs4 = require("@radix-ui/react-tabs");
 var import_type_guards41 = require("@wistia/type-guards");
+var import_styled_components79 = __toESM(require("styled-components"));
 
 // src/components/Tabs/TabPanel.tsx
 var import_styled_components75 = __toESM(require("styled-components"));
@@ -10844,6 +10844,8 @@ var StyledTabList = (0, import_styled_components76.default)(import_react_tabs2.L
   ${segmentedControlStyles}
 
   margin-bottom: var(--wui-space-04);
+  width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
+  align-self: ${({ $fullWidth }) => $fullWidth ? "auto" : "flex-start"};
 `;
 var TabList = ({
   children,
@@ -10998,6 +11000,22 @@ var SelectedItemIndicator2 = () => {
 
 // src/components/Tabs/Tabs.tsx
 var import_jsx_runtime257 = require("react/jsx-runtime");
+var TabsContainer = import_styled_components79.default.div`
+  display: flex;
+  flex-direction: column;
+  height: ${({ $stickyHeaders }) => $stickyHeaders ? "100%" : "auto"};
+  overflow: ${({ $stickyHeaders }) => $stickyHeaders ? "hidden" : "visible"};
+`;
+var StickyTabContent = import_styled_components79.default.div`
+  flex: ${({ $stickyHeaders }) => $stickyHeaders ? "1" : "initial"};
+  overflow-y: ${({ $stickyHeaders }) => $stickyHeaders ? "auto" : "visible"};
+  overflow-x: ${({ $stickyHeaders }) => $stickyHeaders ? "hidden" : "visible"};
+`;
+var StyledTabsRoot = (0, import_styled_components79.default)(import_react_tabs4.Root)`
+  display: flex;
+  flex-direction: column;
+  height: ${({ $stickyHeaders }) => $stickyHeaders ? "100%" : "auto"};
+`;
 var Tabs = (0, import_react59.forwardRef)(
   ({
     children,
@@ -11006,6 +11024,7 @@ var Tabs = (0, import_react59.forwardRef)(
     defaultSelectedValue,
     selectedValue,
     onSelectedValueChange,
+    stickyHeaders = true,
     ...otherProps
   }, ref) => {
     const tabItems = extractTabItems(children);
@@ -11014,86 +11033,82 @@ var Tabs = (0, import_react59.forwardRef)(
       defaultValue: defaultSelectedValue,
       onValueChange: setInternalSelectedValue
     } : { value: selectedValue, onValueChange: onSelectedValueChange };
-    return /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(
-      import_react_tabs4.Root,
+    const currentValue = defaultSelectedValue !== void 0 ? internalSelectedValue : selectedValue;
+    return /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(TabsContainer, { $stickyHeaders: stickyHeaders, children: /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(
+      StyledTabsRoot,
       {
         ref,
+        $stickyHeaders: stickyHeaders,
         activationMode: "automatic",
         ...otherProps,
         ...modeProps,
-        children: /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(
-          TabsValueProvider,
-          {
-            value: defaultSelectedValue !== void 0 ? internalSelectedValue : selectedValue,
-            children: /* @__PURE__ */ (0, import_jsx_runtime257.jsxs)(SelectedItemMeasurementsProvider, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime257.jsxs)(
-                TabList,
-                {
-                  ariaLabel,
-                  fullWidth,
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(SelectedItemIndicator2, {}),
-                    tabItems.map((tab) => {
-                      const {
-                        value,
-                        disabled = false,
+        children: /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(TabsValueProvider, { value: currentValue, children: /* @__PURE__ */ (0, import_jsx_runtime257.jsxs)(SelectedItemMeasurementsProvider, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime257.jsxs)(
+            TabList,
+            {
+              ariaLabel,
+              fullWidth,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(SelectedItemIndicator2, {}),
+                tabItems.map((tab) => {
+                  const {
+                    value,
+                    disabled = false,
+                    icon,
+                    label,
+                    "aria-label": ariaLabelForTab
+                  } = tab.props;
+                  if ((0, import_type_guards41.isNil)(icon)) {
+                    return /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(
+                      TabItem,
+                      {
+                        disabled,
+                        label,
+                        value
+                      },
+                      value
+                    );
+                  }
+                  if ((0, import_type_guards41.isNotNil)(label)) {
+                    return /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(
+                      TabItem,
+                      {
+                        disabled,
                         icon,
                         label,
-                        "aria-label": ariaLabelForTab
-                      } = tab.props;
-                      if ((0, import_type_guards41.isNil)(icon)) {
-                        return /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(
-                          TabItem,
-                          {
-                            disabled,
-                            label,
-                            value
-                          },
-                          value
-                        );
-                      }
-                      if ((0, import_type_guards41.isNotNil)(label)) {
-                        return /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(
-                          TabItem,
-                          {
-                            disabled,
-                            icon,
-                            label,
-                            value
-                          },
-                          value
-                        );
-                      }
-                      if ((0, import_type_guards41.isNotNil)(ariaLabelForTab)) {
-                        return /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(
-                          TabItem,
-                          {
-                            "aria-label": ariaLabelForTab,
-                            disabled,
-                            icon,
-                            value
-                          },
-                          value
-                        );
-                      }
-                      throw new Error("A `Tab` with an icon must have either label or aria-label");
-                    })
-                  ]
-                }
-              ),
-              tabItems.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(
-                TabPanel,
-                {
-                  value: tab.props.value,
-                  children: tab.props.children
-                },
-                tab.props.value
-              ))
-            ] })
-          }
-        )
+                        value
+                      },
+                      value
+                    );
+                  }
+                  if ((0, import_type_guards41.isNotNil)(ariaLabelForTab)) {
+                    return /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(
+                      TabItem,
+                      {
+                        "aria-label": ariaLabelForTab,
+                        disabled,
+                        icon,
+                        value
+                      },
+                      value
+                    );
+                  }
+                  throw new Error("A `Tab` with an icon must have either label or aria-label");
+                })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(StickyTabContent, { $stickyHeaders: stickyHeaders, children: tabItems.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(
+            TabPanel,
+            {
+              value: tab.props.value,
+              children: tab.props.children
+            },
+            tab.props.value
+          )) })
+        ] }) })
       }
-    );
+    ) });
   }
 );
 Tabs.displayName = "Tabs";
@@ -11108,10 +11123,10 @@ Tab.displayName = "Tab";
 
 // src/components/Tag/Tag.tsx
 var import_react61 = require("react");
-var import_styled_components79 = __toESM(require("styled-components"));
+var import_styled_components80 = __toESM(require("styled-components"));
 var import_type_guards42 = require("@wistia/type-guards");
 var import_jsx_runtime259 = require("react/jsx-runtime");
-var TagLabel = import_styled_components79.default.a`
+var TagLabel = import_styled_components80.default.a`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-size: var(--wui-typography-label-4-size);
   font-weight: var(--wui-typography-label-4-weight);
@@ -11139,14 +11154,14 @@ var TagLabel = import_styled_components79.default.a`
     box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
   }
 `;
-var TagDivider = import_styled_components79.default.div`
+var TagDivider = import_styled_components80.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   border-left: 1px solid var(--wui-color-border);
   display: flex;
   height: 14px;
   width: 1px;
 `;
-var StyledRemoveButton = import_styled_components79.default.button`
+var StyledRemoveButton = import_styled_components80.default.button`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   all: unset;
   cursor: pointer;
@@ -11174,7 +11189,7 @@ var StyledRemoveButton = import_styled_components79.default.button`
     box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
   }
 `;
-var StyledTag = import_styled_components79.default.div`
+var StyledTag = import_styled_components80.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   align-items: center;
   background-color: var(--wui-color-bg-surface-secondary);
@@ -11251,7 +11266,7 @@ var Tag = (0, import_react61.forwardRef)(
 Tag.displayName = "Tag";
 
 // src/components/WistiaLogo/WistiaLogo.tsx
-var import_styled_components80 = __toESM(require("styled-components"));
+var import_styled_components81 = __toESM(require("styled-components"));
 var import_type_guards43 = require("@wistia/type-guards");
 var import_jsx_runtime260 = require("react/jsx-runtime");
 var renderBrandmark = (brandmarkColor, iconOnly) => {
@@ -11293,7 +11308,7 @@ var computedViewBox = (iconOnly) => {
   }
   return "0 0 144 31.47";
 };
-var WistiaLogoComponent = import_styled_components80.default.svg`
+var WistiaLogoComponent = import_styled_components81.default.svg`
   height: ${({ height }) => `${height}px`};
 
   /* ensure it will always fit on mobile */
@@ -11309,12 +11324,12 @@ var WistiaLogoComponent = import_styled_components80.default.svg`
   ${({ $opticallyCentered, $iconOnly }) => {
   if ($opticallyCentered) {
     if ($iconOnly) {
-      return import_styled_components80.css`
+      return import_styled_components81.css`
           aspect-ratio: 1;
           padding: 11.85% 3.12% 13.91%;
         `;
     }
-    return import_styled_components80.css`
+    return import_styled_components81.css`
         aspect-ratio: 127 / 32;
       `;
   }