@wistia/ui 0.7.1 → 0.8.0

package/dist/index.d.mts

@@ -3001,10 +3001,6 @@ type TooltipProps = {
      * Force the tooltip to be open without user interaction (for debugging and CI)
      */
     forceOpen?: boolean;
-    /**
-     * The size of the tooltip
-     */
-    compact?: boolean;
     /**
      * Hides the arrow
      */
@@ -3016,7 +3012,7 @@ type TooltipProps = {
  * TODO - add link to Popover docs when they exist
  */
 declare const Tooltip: {
-    ({ delay, direction, content, children, forceOpen, compact, hideArrow, }: TooltipProps): JSX.Element;
+    ({ delay, direction, content, children, forceOpen, hideArrow, }: TooltipProps): JSX.Element;
     displayName: string;
 };
 

package/dist/index.d.ts

@@ -3001,10 +3001,6 @@ type TooltipProps = {
      * Force the tooltip to be open without user interaction (for debugging and CI)
      */
     forceOpen?: boolean;
-    /**
-     * The size of the tooltip
-     */
-    compact?: boolean;
     /**
      * Hides the arrow
      */
@@ -3016,7 +3012,7 @@ type TooltipProps = {
  * TODO - add link to Popover docs when they exist
  */
 declare const Tooltip: {
-    ({ delay, direction, content, children, forceOpen, compact, hideArrow, }: TooltipProps): JSX.Element;
+    ({ delay, direction, content, children, forceOpen, hideArrow, }: TooltipProps): JSX.Element;
     displayName: string;
 };
 

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.7.1
+ * @license @wistia/ui v0.8.0
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -8908,7 +8908,7 @@ var Divider = ({ orientation = "horizontal", ...props }) => {
 Divider.displayName = "Divider";
 
 // src/components/EditableHeading/EditableHeading.tsx
-import styled31, { css as css27 } from "styled-components";
+import styled31, { css as css26 } from "styled-components";
 import { useState as useState6, useRef as useRef5 } from "react";
 
 // src/components/Tooltip/Tooltip.tsx
@@ -8919,28 +8919,19 @@ import {
   Portal as TooltipPortal,
   Arrow as TooltipArrow
 } from "@radix-ui/react-tooltip";
-import styled29, { css as css24 } from "styled-components";
+import styled29 from "styled-components";
 import { jsx as jsx218, jsxs as jsxs19 } from "react/jsx-runtime";
-var CompactTooltipStyles = css24`
-  --tooltip-font-size: var(--wui-typography-label-4-size);
-  --tooltip-line-height: var(--wui-typography-label-4-line-height);
-  --tooltip-font-weight: var(--wui-typography-label-4-weight);
-  --tooltip-horizontal-padding: var(--wui-space-02);
-  --tooltip-vertical-padding: var(--wui-space-03);
-`;
 var StyledContent = styled29(TooltipContent)`
   --tooltip-font-family: var(--wui-typography-family-default);
   --tooltip-border-radius: var(--wui-border-radius-05);
   --tooltip-bg: var(--wui-color-bg-tooltip);
   --tooltip-color: var(--wui-color-text-on-fill);
-  --tooltip-font-size: var(--wui-typography-label-3-size);
-  --tooltip-line-height: var(--wui-typography-label-3-line-height);
-  --tooltip-font-weight: var(--wui-typography-label-3-weight);
-  --tooltip-horizontal-padding: var(--wui-space-03);
+  --tooltip-font-size: var(--wui-typography-label-4-size);
+  --tooltip-line-height: var(--wui-typography-label-4-line-height);
+  --tooltip-font-weight: var(--wui-typography-label-4-weight);
+  --tooltip-horizontal-padding: var(--wui-space-02);
   --tooltip-vertical-padding: var(--wui-space-03);
 
-  ${({ $compact }) => Boolean($compact) && CompactTooltipStyles};
-
   font-family: var(--tooltip-font-family);
   font-size: var(--tooltip-font-size);
   border-radius: var(--tooltip-border-radius);
@@ -8972,12 +8963,11 @@ var StyledContent = styled29(TooltipContent)`
 `;
 var VISUAL_OFFSET = 6;
 var Tooltip = ({
-  delay = 700,
+  delay = 500,
   direction = "top",
   content,
   children,
   forceOpen,
-  compact = false,
   hideArrow = false
 }) => {
   const rootProps = {};
@@ -8997,7 +8987,6 @@ var Tooltip = ({
         /* @__PURE__ */ jsx218(TooltipPortal, { children: /* @__PURE__ */ jsxs19(
           StyledContent,
           {
-            $compact: compact,
             side: direction,
             sideOffset: hideArrow ? VISUAL_OFFSET : VISUAL_OFFSET - 2,
             children: [
@@ -9025,12 +9014,12 @@ Tooltip.displayName = "Tooltip";
 
 // src/components/Input/Input.tsx
 import { forwardRef as forwardRef10, cloneElement as cloneElement4, useRef as useRef4 } from "react";
-import styled30, { css as css26 } from "styled-components";
+import styled30, { css as css25 } from "styled-components";
 import { isNil as isNil13, isNotNil as isNotNil16, isRecord as isRecord4 } from "@wistia/type-guards";
 
 // src/css/sharedStyles/inputCssVariables.ts
-import { css as css25 } from "styled-components";
-var inputCssVariables = css25`
+import { css as css24 } from "styled-components";
+var inputCssVariables = css24`
   --wui-input-color-bg: var(--wui-color-bg-surface);
   --wui-input-color-bg-disabled: var(--wui-color-bg-surface-disabled);
   --wui-input-color-border: var(--wui-color-border-secondary);
@@ -9049,7 +9038,7 @@ var inputCssVariables = css25`
 
 // src/components/Input/Input.tsx
 import { jsx as jsx219, jsxs as jsxs20 } from "react/jsx-runtime";
-var inputStyles = css26`
+var inputStyles = css25`
   ${inputCssVariables}
   input,
   textarea {
@@ -9246,7 +9235,7 @@ var StyledInput = styled31(Input)`
     height: ${({ $height }) => `${$height}px`};
   }
 `;
-var editableStyles = css27`
+var editableStyles = css26`
   &:has(+ :focus-within) {
     background: var(--wui-color-bg-surface-hover);
   }
@@ -9343,14 +9332,7 @@ var EditableHeading = ({
     );
   }
   return /* @__PURE__ */ jsxs21(Fragment5, { children: [
-    /* @__PURE__ */ jsx220(
-      Tooltip,
-      {
-        compact: true,
-        content: tooltipText,
-        children: HeadingComponent2
-      }
-    ),
+    /* @__PURE__ */ jsx220(Tooltip, { content: tooltipText, children: HeadingComponent2 }),
     /* @__PURE__ */ jsx220(ScreenReaderOnly, { children: /* @__PURE__ */ jsx220(
       "button",
       {
@@ -9580,9 +9562,9 @@ import styled36 from "styled-components";
 import { isArray as isArray2, isNotNil as isNotNil17, isNotUndefined as isNotUndefined9, isUndefined as isUndefined4 } from "@wistia/type-guards";
 
 // src/components/Label/Label.tsx
-import styled34, { css as css28 } from "styled-components";
+import styled34, { css as css27 } from "styled-components";
 import { jsx as jsx224 } from "react/jsx-runtime";
-var requiredStyle = css28`
+var requiredStyle = css27`
   &::after {
     color: var(--wui-color-text-error);
     display: inline;
@@ -9590,7 +9572,7 @@ var requiredStyle = css28`
     content: '*';
   }
 `;
-var disabledStyle3 = css28`
+var disabledStyle3 = css27`
   color: var(--wui-color-text-disabled);
 `;
 var StyledLabel3 = styled34.label`
@@ -9896,7 +9878,7 @@ var IconButton = forwardRef13(
 IconButton.displayName = "IconButton";
 
 // src/components/Menu/Menu.tsx
-import styled38, { css as css29, keyframes as keyframes2 } from "styled-components";
+import styled38, { css as css28, keyframes as keyframes2 } from "styled-components";
 import {
   DropdownMenu,
   DropdownMenuTrigger,
@@ -9933,7 +9915,7 @@ var close = keyframes2`
     transform: scale(.97) translateY(-8px);
   }
 `;
-var menuItemCss = css29`
+var menuItemCss = css28`
   --menu-label-description-gap: var(--wui-space-01);
   --menu-item-inner-gap: var(--wui-space-03);
   --menu-item-left-icon-size: 24px;
@@ -9944,7 +9926,7 @@ var menuItemCss = css29`
   --menu-label-line-height: var(--wui-typography-label-3-line-height);
   --menu-divider-margin: var(--wui-space-02);
 `;
-var compactMenuItemCss = css29`
+var compactMenuItemCss = css28`
   --menu-label-description-gap: 0;
   --menu-item-inner-gap: var(--wui-space-02);
   --menu-item-left-icon-size: 16px;
@@ -9955,7 +9937,7 @@ var compactMenuItemCss = css29`
   --menu-label-line-height: var(--wui-typography-label-4-line-height);
   --menu-divider-margin: var(--wui-space-01);
 `;
-var menuContentCss = css29`
+var menuContentCss = css28`
   --menu-font-family: var(--wui-typography-family-default);
   --menu-bg: var(--wui-color-bg-surface);
   --menu-shadow: var(--wui-elevation-01);
@@ -10727,7 +10709,7 @@ Modal.displayName = "Modal";
 
 // src/components/Popover/Popover.tsx
 import { Root as Root2, Trigger as Trigger2, Portal, Content as Content2, Close } from "@radix-ui/react-popover";
-import styled48, { css as css30 } from "styled-components";
+import styled48, { css as css29 } from "styled-components";
 
 // src/private/helpers/getControls/getControlProps.tsx
 import { isNotNil as isNotNil23 } from "@wistia/type-guards";
@@ -10738,7 +10720,7 @@ var getControlProps = (isOpen, onOpenChange) => {
 // src/components/Popover/Popover.tsx
 import { jsx as jsx244, jsxs as jsxs32 } from "react/jsx-runtime";
 var StyledContent2 = styled48(Content2)`
-  ${({ $unstyled }) => !$unstyled && css30`
+  ${({ $unstyled }) => !$unstyled && css29`
       border-radius: var(--wui-border-radius-02);
       padding: var(--wui-space-04);
       max-width: var(--wui-popover-max-width, 320px);
@@ -10878,7 +10860,7 @@ ProgressBar.displayName = "ProgressBar";
 
 // src/components/Radio/Radio.tsx
 import { forwardRef as forwardRef19, useId as useId3 } from "react";
-import styled50, { css as css31 } from "styled-components";
+import styled50, { css as css30 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString3 } from "@wistia/type-guards";
 import { jsx as jsx246, jsxs as jsxs34 } from "react/jsx-runtime";
 var RadioIcon = () => /* @__PURE__ */ jsx246(
@@ -10900,7 +10882,7 @@ var RadioIcon = () => /* @__PURE__ */ jsx246(
     )
   }
 );
-var sizeSmall2 = css31`
+var sizeSmall2 = css30`
   width: 14px;
   height: 14px;
   min-width: 14px;
@@ -10911,7 +10893,7 @@ var sizeSmall2 = css31`
     height: 7px;
   }
 `;
-var sizeMedium2 = css31`
+var sizeMedium2 = css30`
   width: 16px;
   height: 16px;
   min-width: 16px;
@@ -10922,7 +10904,7 @@ var sizeMedium2 = css31`
     height: 8px;
   }
 `;
-var sizeLarge2 = css31`
+var sizeLarge2 = css30`
   width: 20px;
   height: 20px;
   min-width: 20px;
@@ -11046,7 +11028,7 @@ Radio.displayName = "Radio";
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { forwardRef as forwardRef20 } from "react";
-import styled52, { css as css32 } from "styled-components";
+import styled52, { css as css31 } from "styled-components";
 import { Root as ToggleGroupRoot } from "@radix-ui/react-toggle-group";
 import { isNil as isNil14 } from "@wistia/type-guards";
 
@@ -11137,7 +11119,7 @@ var SelectedItemIndicator = () => {
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { jsx as jsx249, jsxs as jsxs35 } from "react/jsx-runtime";
-var segmentedControlStyles = css32`
+var segmentedControlStyles = css31`
   display: inline-flex;
   background-color: var(--wui-color-bg-surface-secondary);
   border-radius: var(--wui-border-radius-rounded);
@@ -11186,11 +11168,11 @@ SegmentedControl.displayName = "SegmentedControl";
 
 // src/components/SegmentedControl/SegmentedControlItem.tsx
 import { forwardRef as forwardRef21, useEffect as useEffect8, useRef as useRef10 } from "react";
-import styled53, { css as css33 } from "styled-components";
+import styled53, { css as css32 } from "styled-components";
 import { Item as ToggleGroupItem } from "@radix-ui/react-toggle-group";
 import { isNotNil as isNotNil25 } from "@wistia/type-guards";
 import { jsxs as jsxs36 } from "react/jsx-runtime";
-var segmentedControlItemStyles = css33`
+var segmentedControlItemStyles = css32`
   all: unset; /* ToggleGroupItem is a button element */
   align-items: center;
   border-radius: var(--wui-border-radius-rounded);
@@ -11515,10 +11497,10 @@ var SelectOptionGroup = ({ children, label, ...props }) => {
 
 // src/components/Switch/Switch.tsx
 import { forwardRef as forwardRef24, useId as useId4 } from "react";
-import styled57, { css as css34 } from "styled-components";
+import styled57, { css as css33 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString4 } from "@wistia/type-guards";
 import { jsx as jsx253, jsxs as jsxs40 } from "react/jsx-runtime";
-var sizeSmall3 = css34`
+var sizeSmall3 = css33`
   --wui-size-small-width: 24px;
   --wui-size-small-height: 14px;
 
@@ -11533,7 +11515,7 @@ var sizeSmall3 = css34`
     height: calc(var(--wui-size-small-width) / 2);
   }
 `;
-var sizeMedium3 = css34`
+var sizeMedium3 = css33`
   --wui-size-medium-width: 32px;
   --wui-size-medium-height: 18px;
 
@@ -11548,7 +11530,7 @@ var sizeMedium3 = css34`
     height: calc(var(--wui-size-medium-width) / 2);
   }
 `;
-var sizeLarge3 = css34`
+var sizeLarge3 = css33`
   --wui-size-large-width: 40px;
   --wui-size-large-height: 22px;
 
@@ -11677,19 +11659,19 @@ var Switch = forwardRef24(
 Switch.displayName = "Switch";
 
 // src/components/Table/Table.tsx
-import styled58, { css as css35 } from "styled-components";
+import styled58, { css as css34 } from "styled-components";
 import { jsx as jsx254 } from "react/jsx-runtime";
 var StyledTable = styled58.table`
   width: 100%;
   border-collapse: collapse;
 
-  ${({ $striped }) => $striped && css35`
+  ${({ $striped }) => $striped && css34`
       tbody tr:nth-child(even) {
         background-color: var(--wui-color-bg-surface-secondary);
       }
     `}
 
-  ${({ $divided }) => $divided && css35`
+  ${({ $divided }) => $divided && css34`
       tr {
         border-bottom: 1px solid var(--wui-color-border);
       }
@@ -11728,9 +11710,9 @@ var TableBody = ({ children, ...props }) => {
 
 // src/components/Table/TableCell.tsx
 import { useContext as useContext7 } from "react";
-import styled60, { css as css36 } from "styled-components";
+import styled60, { css as css35 } from "styled-components";
 import { jsx as jsx256 } from "react/jsx-runtime";
-var sharedStyles = css36`
+var sharedStyles = css35`
   color: var(--wui-color-text);
   padding: var(--wui-space-02);
   text-align: left;
@@ -12246,7 +12228,7 @@ var Tag = forwardRef28(
 Tag.displayName = "Tag";
 
 // src/components/WistiaLogo/WistiaLogo.tsx
-import styled70, { css as css37 } from "styled-components";
+import styled70, { css as css36 } from "styled-components";
 import { isNotNil as isNotNil30 } from "@wistia/type-guards";
 import { jsx as jsx266, jsxs as jsxs44 } from "react/jsx-runtime";
 var renderBrandmark = (brandmarkColor, iconOnly) => {
@@ -12304,12 +12286,12 @@ var WistiaLogoComponent = styled70.svg`
   ${({ $opticallyCentered, $iconOnly }) => {
   if ($opticallyCentered) {
     if ($iconOnly) {
-      return css37`
+      return css36`
           aspect-ratio: 1;
           padding: 11.85% 3.12% 13.91%;
         `;
     }
-    return css37`
+    return css36`
         aspect-ratio: 127 / 32;
       `;
   }
@@ -12413,9 +12395,9 @@ import { isNil as isNil17, isNotNil as isNotNil33 } from "@wistia/type-guards";
 
 // src/private/helpers/getBackgroundGradient/getBackgroundGradient.ts
 import { isNotNil as isNotNil32 } from "@wistia/type-guards";
-import { css as css38 } from "styled-components";
+import { css as css37 } from "styled-components";
 var gradients = {
-  defaultDarkOne: css38`
+  defaultDarkOne: css37`
     background-color: #222d66;
     background-image:
       radial-gradient(farthest-corner at top right, #222d66, transparent 70%),
@@ -12423,7 +12405,7 @@ var gradients = {
       radial-gradient(farthest-corner at bottom left, #6b84ff, transparent 57%),
       radial-gradient(farthest-corner at top left, #2949e5, transparent 68%);
   `,
-  defaultDarkTwo: css38`
+  defaultDarkTwo: css37`
     background-color: #222d66;
     background-image:
       radial-gradient(farthest-corner at top left, #6b84ff, transparent 100%),
@@ -12431,7 +12413,7 @@ var gradients = {
       radial-gradient(farthest-corner at bottom right, #2949e5, transparent 50%),
       radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
   `,
-  defaultLightOne: css38`
+  defaultLightOne: css37`
     background-color: #ccd5ff;
     background-image:
       radial-gradient(farthest-corner at bottom right, #ccd5ff, transparent 55%),
@@ -12439,13 +12421,13 @@ var gradients = {
       radial-gradient(farthest-corner at top right, #6b84ff, transparent 50%),
       radial-gradient(farthest-corner at bottom left, #f7f8ff, transparent 50%);
   `,
-  defaultLightTwo: css38`
+  defaultLightTwo: css37`
     background-color: #ccd5ff;
     background-image:
       radial-gradient(ellipse at top, #ccd5ff, transparent),
       radial-gradient(ellipse at bottom, #6b84ff, transparent);
   `,
-  defaultMidOne: css38`
+  defaultMidOne: css37`
     background-color: #6b84ff;
     background-image:
       radial-gradient(farthest-corner at top right, #2949e5, transparent 70%),
@@ -12453,13 +12435,13 @@ var gradients = {
       radial-gradient(farthest-corner at top left, #6b84ff, transparent 80%),
       radial-gradient(farthest-corner at bottom left, #222d66, transparent 57%);
   `,
-  defaultMidTwo: css38`
+  defaultMidTwo: css37`
     background-color: #6b84ff;
     background-image:
       radial-gradient(ellipse at top, #2949e5, transparent),
       radial-gradient(ellipse at bottom, #ccd5ff, transparent);
   `,
-  green: css38`
+  green: css37`
     background-color: #fafffa;
     background-image:
       radial-gradient(farthest-corner at bottom left, #b0e5a5, transparent 50%),
@@ -12467,7 +12449,7 @@ var gradients = {
       radial-gradient(farthest-corner at top left, #44b62d, transparent 65%),
       radial-gradient(farthest-corner at bottom right, #44b62d, transparent 55%);
   `,
-  greenWithPop: css38`
+  greenWithPop: css37`
     background-color: #fafffa;
     background-image:
       radial-gradient(farthest-corner at bottom left, #b0e5a5, transparent 50%),
@@ -12475,7 +12457,7 @@ var gradients = {
       radial-gradient(farthest-corner at top left, #44b62d, transparent 65%),
       radial-gradient(farthest-corner at bottom right, #44b62d, transparent 55%);
   `,
-  pink: css38`
+  pink: css37`
     background-color: #fffff0;
     background-image:
       radial-gradient(farthest-corner at bottom left, #ffc7e8, transparent 50%),
@@ -12483,7 +12465,7 @@ var gradients = {
       radial-gradient(farthest-corner at top left, #ff40b3, transparent 65%),
       radial-gradient(farthest-corner at bottom right, #ff40b3, transparent 55%);
   `,
-  pinkWithPop: css38`
+  pinkWithPop: css37`
     background-color: #fffff0;
     background-image:
       radial-gradient(farthest-corner at top right, #e0128e, transparent 70%),
@@ -12491,7 +12473,7 @@ var gradients = {
       radial-gradient(farthest-corner at bottom right, #ff40b3, transparent 55%),
       radial-gradient(farthest-corner at bottom left, #2949e5, transparent 50%);
   `,
-  playfulGradientOne: css38`
+  playfulGradientOne: css37`
     background-color: #f7f8ff;
     background-image:
       radial-gradient(farthest-corner at top left, #d65cff, transparent 68%),
@@ -12499,7 +12481,7 @@ var gradients = {
       radial-gradient(farthest-corner at bottom left, #ffc7e8, transparent 57%),
       radial-gradient(farthest-corner at top right, #ffcaba, transparent 70%);
   `,
-  playfulGradientTwo: css38`
+  playfulGradientTwo: css37`
     background-color: #f7f8ff;
     background-image:
       radial-gradient(farthest-corner at top left, #44b62d, transparent 68%),
@@ -12507,13 +12489,13 @@ var gradients = {
       radial-gradient(farthest-corner at bottom left, #ccd5ff, transparent 57%),
       radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
   `,
-  purple: css38`
+  purple: css37`
     background-color: #f2caff;
     background-image:
       radial-gradient(ellipse at 0% 100%, #f9e5ff, transparent 50%),
       radial-gradient(ellipse at 100% 0%, #e093fa, transparent 70%);
   `,
-  purpleWithPop: css38`
+  purpleWithPop: css37`
     background-color: #f2caff;
     background-image:
       radial-gradient(farthest-corner at bottom left, #f2caff, transparent 50%),
@@ -12521,7 +12503,7 @@ var gradients = {
       radial-gradient(farthest-corner at bottom right, #d65cff, transparent 55%),
       radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
   `,
-  yellow: css38`
+  yellow: css37`
     background-color: #fffff0;
     background-image:
       radial-gradient(farthest-corner at bottom left, #eff18d, transparent 50%),
@@ -12529,7 +12511,7 @@ var gradients = {
       radial-gradient(farthest-corner at top left, #e8ec1e, transparent 65%),
       radial-gradient(farthest-corner at bottom right, #e8ec1e, transparent 55%);
   `,
-  yellowWithPop: css38`
+  yellowWithPop: css37`
     background-color: #fffff0;
     background-image:
       radial-gradient(farthest-corner at bottom left, #eff18d, transparent 50%),