@wistia/ui 0.6.12 → 0.6.13

package/dist/index.d.mts

@@ -2138,12 +2138,16 @@ type PopoverProps = ContentProps & PopoverControlProps & {
      * An interactive element. Most commonly a [Button](?path=/docs/components-button--docs) or [IconButton]([Button](?path=/docs/components-iconbutton--docs)).
      * */
     trigger: JSX.Element;
+    /**
+     * If true, the popover will use the unstyled Content component instead of StyledContent
+     */
+    unstyled?: boolean;
 };
 /**
  * Displays rich content in a portal, triggered by a button.
  */
 declare const Popover: {
-    ({ children, trigger, isOpen, hideCloseButton, onOpenChange, ...props }: PopoverProps): JSX.Element;
+    ({ children, trigger, isOpen, hideCloseButton, onOpenChange, unstyled, ...props }: PopoverProps): JSX.Element;
     displayName: string;
 };
 

package/dist/index.d.ts

@@ -2138,12 +2138,16 @@ type PopoverProps = ContentProps & PopoverControlProps & {
      * An interactive element. Most commonly a [Button](?path=/docs/components-button--docs) or [IconButton]([Button](?path=/docs/components-iconbutton--docs)).
      * */
     trigger: JSX.Element;
+    /**
+     * If true, the popover will use the unstyled Content component instead of StyledContent
+     */
+    unstyled?: boolean;
 };
 /**
  * Displays rich content in a portal, triggered by a button.
  */
 declare const Popover: {
-    ({ children, trigger, isOpen, hideCloseButton, onOpenChange, ...props }: PopoverProps): JSX.Element;
+    ({ children, trigger, isOpen, hideCloseButton, onOpenChange, unstyled, ...props }: PopoverProps): JSX.Element;
     displayName: string;
 };
 

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.6.12
+ * @license @wistia/ui v0.6.13
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -9939,8 +9939,8 @@ var Modal = forwardRef17(
 Modal.displayName = "Modal";
 
 // src/components/Popover/Popover.tsx
-import { Root as Root2, Trigger as Trigger2, Portal, Content as Content2, Close, Arrow } from "@radix-ui/react-popover";
-import styled46 from "styled-components";
+import { Root as Root2, Trigger as Trigger2, Portal, Content as Content2, Close } from "@radix-ui/react-popover";
+import styled46, { css as css25 } from "styled-components";
 
 // src/private/helpers/getControls/getControlProps.tsx
 import { isNotNil as isNotNil18 } from "@wistia/type-guards";
@@ -9951,12 +9951,14 @@ var getControlProps = (isOpen, onOpenChange) => {
 // src/components/Popover/Popover.tsx
 import { jsx as jsx238, jsxs as jsxs29 } from "react/jsx-runtime";
 var StyledContent2 = styled46(Content2)`
-  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 && css25`
+      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;
@@ -9964,16 +9966,13 @@ var StyledContent2 = styled46(Content2)`
     right: var(--wui-space-02);
   }
 `;
-var StyledArrow = styled46(Arrow)`
-  fill: white;
-  display: none;
-`;
 var Popover = ({
   children,
   trigger,
   isOpen = false,
   hideCloseButton = false,
   onOpenChange,
+  unstyled = false,
   ...props
 }) => {
   return /* @__PURE__ */ jsxs29(Root2, { ...getControlProps(isOpen, onOpenChange), children: [
@@ -9981,10 +9980,10 @@ var Popover = ({
     /* @__PURE__ */ jsx238(Portal, { children: /* @__PURE__ */ jsxs29(
       StyledContent2,
       {
-        sideOffset: 5,
+        sideOffset: 8,
         ...props,
+        $unstyled: unstyled,
         children: [
-          /* @__PURE__ */ jsx238(StyledArrow, {}),
           !hideCloseButton && /* @__PURE__ */ jsx238(Close, { asChild: true, children: /* @__PURE__ */ jsx238(
             IconButton,
             {
@@ -10004,7 +10003,7 @@ Popover.displayName = "Popover";
 
 // src/components/Radio/Radio.tsx
 import { forwardRef as forwardRef18, useId as useId3 } from "react";
-import styled47, { css as css25 } from "styled-components";
+import styled47, { css as css26 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString3 } from "@wistia/type-guards";
 import { jsx as jsx239, jsxs as jsxs30 } from "react/jsx-runtime";
 var StyledLabelWrapper2 = styled47.div`
@@ -10038,11 +10037,11 @@ var StyledRadio = styled47.input`
     transform: scale(1);
   }
 `;
-var disabledStyle2 = css25`
+var disabledStyle2 = css26`
   cursor: not-allowed;
   opacity: 0.5;
 `;
-var errorStyle = css25`
+var errorStyle = css26`
   /* TODO Lamp to design error state */
   &:hover,
   &:focus,
@@ -10050,7 +10049,7 @@ var errorStyle = css25`
     border-color: transparent !important;
   }
 `;
-var defaultHoverStyle = css25`
+var defaultHoverStyle = css26`
   /* TODO Lamp to design hover state */
   cursor: pointer;
 `;
@@ -10134,7 +10133,7 @@ Radio.displayName = "Radio";
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { forwardRef as forwardRef19 } from "react";
-import styled49, { css as css26 } from "styled-components";
+import styled49, { css as css27 } from "styled-components";
 import { Root as ToggleGroupRoot } from "@radix-ui/react-toggle-group";
 import { isNil as isNil13 } from "@wistia/type-guards";
 
@@ -10225,7 +10224,7 @@ var SelectedItemIndicator = () => {
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { jsx as jsx242, jsxs as jsxs31 } from "react/jsx-runtime";
-var segmentedControlStyles = css26`
+var segmentedControlStyles = css27`
   display: inline-flex;
   background-color: var(--wui-color-bg-surface-secondary);
   border-radius: var(--wui-border-radius-rounded);
@@ -10274,7 +10273,7 @@ SegmentedControl.displayName = "SegmentedControl";
 
 // src/components/SegmentedControl/SegmentedControlItem.tsx
 import { forwardRef as forwardRef20, useEffect as useEffect5, useRef as useRef9 } from "react";
-import styled50, { css as css27 } from "styled-components";
+import styled50, { css as css28 } from "styled-components";
 import { Item as ToggleGroupItem } from "@radix-ui/react-toggle-group";
 import { isNotNil as isNotNil20 } from "@wistia/type-guards";
 
@@ -10294,7 +10293,7 @@ var mergeRefs = (refs) => (value) => {
 
 // src/components/SegmentedControl/SegmentedControlItem.tsx
 import { jsxs as jsxs32 } from "react/jsx-runtime";
-var segmentedControlItemStyles = css27`
+var segmentedControlItemStyles = css28`
   all: unset; /* ToggleGroupItem is a button element */
   align-items: center;
   border-radius: var(--wui-border-radius-rounded);
@@ -10617,7 +10616,7 @@ var SelectOptionGroup = ({ children, label, ...props }) => {
 
 // src/components/Table/Table.tsx
 import { useMemo as useMemo10 } from "react";
-import styled54, { css as css28 } from "styled-components";
+import styled54, { css as css29 } from "styled-components";
 
 // src/components/Table/TableContext.tsx
 import React from "react";
@@ -10629,7 +10628,7 @@ var StyledTable = styled54.table`
   width: 100%;
   border-collapse: collapse;
 
-  ${({ $striped }) => $striped && css28`
+  ${({ $striped }) => $striped && css29`
       tbody tr:nth-child(even) {
         background-color: var(--wui-color-bg-surface-secondary);
       }
@@ -10668,9 +10667,9 @@ var TableBody = ({ children, ...props }) => {
 
 // src/components/Table/TableCell.tsx
 import { useContext as useContext7 } from "react";
-import styled56, { css as css29 } from "styled-components";
+import styled56, { css as css30 } from "styled-components";
 import { jsx as jsx248 } from "react/jsx-runtime";
-var sharedStyles = css29`
+var sharedStyles = css30`
   color: var(--wui-color-text);
   padding: var(--wui-space-02);
   text-align: left;
@@ -11186,7 +11185,7 @@ var Tag = forwardRef26(
 Tag.displayName = "Tag";
 
 // src/components/WistiaLogo/WistiaLogo.tsx
-import styled66, { css as css30 } from "styled-components";
+import styled66, { css as css31 } from "styled-components";
 import { isNotNil as isNotNil24 } from "@wistia/type-guards";
 import { jsx as jsx258, jsxs as jsxs39 } from "react/jsx-runtime";
 var renderBrandmark = (brandmarkColor, iconOnly) => {
@@ -11244,12 +11243,12 @@ var WistiaLogoComponent = styled66.svg`
   ${({ $opticallyCentered, $iconOnly }) => {
   if ($opticallyCentered) {
     if ($iconOnly) {
-      return css30`
+      return css31`
           aspect-ratio: 1;
           padding: 11.85% 3.12% 13.91%;
         `;
     }
-    return css30`
+    return css31`
         aspect-ratio: 127 / 32;
       `;
   }