@wistia/ui 0.14.33 → 0.14.34

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.14.33
+ * @license @wistia/ui v0.14.34
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -12066,6 +12066,23 @@ var Tag = forwardRef16(
 );
 Tag.displayName = "Tag_UI";
 
+// src/private/helpers/getTypographicStyles/getTypographicStyles.ts
+import { css as css30 } from "styled-components";
+var typographicVariantStyleMap = { ...variantStyleMap2, ...variantStyleMap };
+var getTypographicStyles = (variant) => {
+  return css30`
+    ${typographicVariantStyleMap[variant]}
+    font-family: var(--font-family);
+    font-size: var(--font-size);
+    font-weight: var(--font-weight);
+    line-height: var(--line-height);
+  `;
+};
+var typographicVariantElementMap = { ...variantElementMap2, ...variantElementMap };
+var getDefaultTypographicElement = (variant) => {
+  return typographicVariantElementMap[variant] ?? "span";
+};
+
 // src/components/Combobox/Combobox.tsx
 import { jsx as jsx254, jsxs as jsxs34 } from "react/jsx-runtime";
 var ComboboxWrapper = styled50.div`
@@ -12141,7 +12158,7 @@ var ComboboxPopover2 = styled50(Ariakit.ComboboxPopover)`
   --wui-combobox-option-bg-hover: var(--wui-color-bg-surface-hover);
 
   border-radius: var(--wui-border-radius-02);
-  padding: var(--wui-space-04);
+  padding: var(--wui-space-02);
   max-height: var(--wui-popover-max-height, 300px);
   background-color: var(--wui-color-bg-surface);
   box-shadow: var(--wui-elevation-01);
@@ -12152,13 +12169,14 @@ var ComboboxPopover2 = styled50(Ariakit.ComboboxPopover)`
   flex-direction: column;
   overflow: auto;
   overscroll-behavior: contain;
+  margin-top: var(--wui-space-02);
 
   &[aria-busy='true'] {
     --item-opacity: 0.5;
   }
 `;
 var ComboboxItem2 = styled50(Ariakit.ComboboxItem)`
-  ${variantStyleMap2.body3};
+  ${getTypographicStyles("body3")};
   display: flex;
   padding: var(--wui-combobox-option-padding);
   gap: var(--wui-combobox-option-inner-gap);
@@ -12167,6 +12185,7 @@ var ComboboxItem2 = styled50(Ariakit.ComboboxItem)`
   border-radius: var(--wui-border-radius-01);
   align-items: center;
   cursor: pointer;
+  justify-content: space-between;
 
   &:hover,
   &:focus-visible,
@@ -12289,17 +12308,17 @@ var Combobox2 = ({
                   className: "combobox-item",
                   value: match,
                   children: [
+                    options[match],
                     /* @__PURE__ */ jsx254(
                       Icon,
                       {
-                        size: "sm",
+                        size: "md",
                         style: {
                           opacity: value.includes(match) ? 1 : 0
                         },
                         type: "checkmark"
                       }
-                    ),
-                    options[match]
+                    )
                   ]
                 },
                 match
@@ -12326,7 +12345,7 @@ import {
 } from "@radix-ui/react-dropdown-menu";
 import { isNotNil as isNotNil20, isNotUndefined as isNotUndefined9 } from "@wistia/type-guards";
 import { forwardRef as forwardRef17, useMemo as useMemo12 } from "react";
-import styled51, { css as css30, keyframes as keyframes2 } from "styled-components";
+import styled51, { css as css31, keyframes as keyframes2 } from "styled-components";
 
 // src/components/Menu/MenuContext.tsx
 import { createContext as createContext6, useContext as useContext5 } from "react";
@@ -12355,7 +12374,7 @@ var close = keyframes2`
     transform: scale(.97) translateY(-8px);
   }
 `;
-var menuItemCss = css30`
+var menuItemCss = css31`
   --menu-label-description-gap: var(--wui-space-01);
   --menu-item-inner-gap: var(--wui-space-03);
   --menu-item-left-icon-size: 24px;
@@ -12366,7 +12385,7 @@ var menuItemCss = css30`
   --menu-label-line-height: var(--wui-typography-label-3-line-height);
   --menu-divider-margin: var(--wui-space-02);
 `;
-var compactMenuItemCss = css30`
+var compactMenuItemCss = css31`
   --menu-label-description-gap: 0;
   --menu-item-inner-gap: var(--wui-space-02);
   --menu-item-left-icon-size: 16px;
@@ -12377,7 +12396,7 @@ var compactMenuItemCss = css30`
   --menu-label-line-height: var(--wui-typography-label-4-line-height);
   --menu-divider-margin: var(--wui-space-01);
 `;
-var menuContentCss = css30`
+var menuContentCss = css31`
   --menu-font-family: var(--wui-typography-family-default);
   --menu-bg: var(--wui-color-bg-surface);
   --menu-shadow: var(--wui-elevation-01);
@@ -12760,9 +12779,7 @@ var MenuItem = forwardRef19(
 MenuItem.displayName = "MenuItem_UI";
 
 // src/components/Menu/MenuRadioGroup.tsx
-import {
-  DropdownMenuRadioGroup
-} from "@radix-ui/react-dropdown-menu";
+import { DropdownMenuRadioGroup } from "@radix-ui/react-dropdown-menu";
 import { jsx as jsx261 } from "react/jsx-runtime";
 var MenuRadioGroup = ({ children, ...props }) => {
   return /* @__PURE__ */ jsx261(DropdownMenuRadioGroup, { ...props, children });
@@ -12770,10 +12787,7 @@ var MenuRadioGroup = ({ children, ...props }) => {
 MenuRadioGroup.displayName = "MenuRadioGroup_UI";
 
 // src/components/Menu/RadioMenuItem.tsx
-import {
-  DropdownMenuItemIndicator,
-  DropdownMenuRadioItem
-} from "@radix-ui/react-dropdown-menu";
+import { DropdownMenuItemIndicator, DropdownMenuRadioItem } from "@radix-ui/react-dropdown-menu";
 import { jsx as jsx262 } from "react/jsx-runtime";
 var RadioMenuItem = ({
   onSelect,
@@ -12807,10 +12821,7 @@ var RadioMenuItem = ({
 RadioMenuItem.displayName = "RadioMenuItem_UI";
 
 // src/components/Menu/CheckboxMenuItem.tsx
-import {
-  DropdownMenuCheckboxItem,
-  DropdownMenuItemIndicator as DropdownMenuItemIndicator2
-} from "@radix-ui/react-dropdown-menu";
+import { DropdownMenuCheckboxItem, DropdownMenuItemIndicator as DropdownMenuItemIndicator2 } from "@radix-ui/react-dropdown-menu";
 import { isNotNil as isNotNil23 } from "@wistia/type-guards";
 import { jsx as jsx263, jsxs as jsxs38 } from "react/jsx-runtime";
 var CheckboxIndicator = ({ checked, ...props }) => {
@@ -13427,16 +13438,16 @@ var DataListItemValue = (props) => {
 DataListItemValue.displayName = "DataListItemValue_UI";
 
 // src/components/Divider/Divider.tsx
-import styled61, { css as css31 } from "styled-components";
+import styled61, { css as css32 } from "styled-components";
 import { jsx as jsx273 } from "react/jsx-runtime";
-var horizontalBorderCss = css31`
+var horizontalBorderCss = css32`
   border-top-color: var(--wui-color-border);
   border-top-style: solid;
   border-top-width: 1px;
   clear: both; /* for horizontal dividers, ensure it clears any floats */
   height: 0;
 `;
-var verticalBorderCss = css31`
+var verticalBorderCss = css32`
   background-color: var(--wui-color-border);
   max-width: 1px;
   min-height: 100%;
@@ -13468,7 +13479,7 @@ var Divider = ({ orientation = "horizontal", ...props }) => {
 Divider.displayName = "Divider_UI";
 
 // src/components/EditableHeading/EditableHeading.tsx
-import styled62, { css as css32 } from "styled-components";
+import styled62, { css as css33 } from "styled-components";
 import { useState as useState18, useRef as useRef16 } from "react";
 import { Fragment as Fragment7, jsx as jsx274, jsxs as jsxs42 } from "react/jsx-runtime";
 var StyledInput = styled62(Input)`
@@ -13492,7 +13503,7 @@ var StyledInput = styled62(Input)`
     resize: none;
   }
 `;
-var editableStyles = css32`
+var editableStyles = css33`
   &:has(+ :focus-within) {
     background: var(--wui-color-bg-surface-hover);
   }
@@ -13609,13 +13620,7 @@ import styled64, { css as css34 } from "styled-components";
 import { isNotNil as isNotNil26 } from "@wistia/type-guards";
 
 // src/components/EditableText/EditableTextRoot.tsx
-import {
-  createContext as createContext7,
-  useMemo as useMemo13,
-  useState as useState19,
-  useCallback as useCallback16,
-  useId as useId4
-} from "react";
+import { createContext as createContext7, useMemo as useMemo13, useState as useState19, useCallback as useCallback16, useId as useId4 } from "react";
 import { isNonEmptyString as isNonEmptyString6 } from "@wistia/type-guards";
 import styled63 from "styled-components";
 import { jsx as jsx275 } from "react/jsx-runtime";
@@ -13729,23 +13734,6 @@ var EditableTextRoot = ({
   );
 };
 
-// src/private/helpers/getTypographicStyles/getTypographicStyles.ts
-import { css as css33 } from "styled-components";
-var typographicVariantStyleMap = { ...variantStyleMap2, ...variantStyleMap };
-var getTypographicStyles = (variant) => {
-  return css33`
-    ${typographicVariantStyleMap[variant]}
-    font-family: var(--font-family);
-    font-size: var(--font-size);
-    font-weight: var(--font-weight);
-    line-height: var(--line-height);
-  `;
-};
-var typographicVariantElementMap = { ...variantElementMap2, ...variantElementMap };
-var getDefaultTypographicElement = (variant) => {
-  return typographicVariantElementMap[variant] ?? "span";
-};
-
 // src/components/EditableText/EditableTextDisplay.tsx
 import { jsx as jsx276, jsxs as jsxs43 } from "react/jsx-runtime";
 var StyledEditableTextDisplay = styled64.div`
@@ -15877,14 +15865,7 @@ var RadioCardImage = forwardRef30(
 RadioCardImage.displayName = "RadioCardImage_UI";
 
 // src/components/ScrollArea/ScrollArea.tsx
-import {
-  forwardRef as forwardRef31,
-  useCallback as useCallback18,
-  useEffect as useEffect20,
-  useMemo as useMemo15,
-  useRef as useRef21,
-  useState as useState23
-} from "react";
+import { forwardRef as forwardRef31, useCallback as useCallback18, useEffect as useEffect20, useMemo as useMemo15, useRef as useRef21, useState as useState23 } from "react";
 import styled87 from "styled-components";
 import { throttle } from "throttle-debounce";
 import { jsx as jsx302, jsxs as jsxs57 } from "react/jsx-runtime";