@wistia/ui 0.14.33 → 0.14.34

package/dist/index.cjs

@@ -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.
  *
@@ -12068,7 +12068,7 @@ SaturationAndValuePicker.displayName = "SaturationAndValuePicker_UI";
 var Ariakit = __toESM(require("@ariakit/react"));
 var import_react54 = require("react");
 var import_match_sorter = require("match-sorter");
-var import_styled_components67 = __toESM(require("styled-components"));
+var import_styled_components68 = __toESM(require("styled-components"));
 
 // src/components/Tag/Tag.tsx
 var import_react53 = require("react");
@@ -12225,9 +12225,26 @@ var Tag = (0, import_react53.forwardRef)(
 );
 Tag.displayName = "Tag_UI";
 
+// src/private/helpers/getTypographicStyles/getTypographicStyles.ts
+var import_styled_components67 = require("styled-components");
+var typographicVariantStyleMap = { ...variantStyleMap2, ...variantStyleMap };
+var getTypographicStyles = (variant) => {
+  return import_styled_components67.css`
+    ${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
 var import_jsx_runtime254 = require("react/jsx-runtime");
-var ComboboxWrapper = import_styled_components67.default.div`
+var ComboboxWrapper = import_styled_components68.default.div`
   ${inputCss};
   width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
   padding: var(--wui-input-vertical-padding) var(--wui-input-horizontal-padding);
@@ -12276,7 +12293,7 @@ var ComboboxWrapper = import_styled_components67.default.div`
     }
   }
 `;
-var ComboboxInput = (0, import_styled_components67.default)(Ariakit.Combobox)`
+var ComboboxInput = (0, import_styled_components68.default)(Ariakit.Combobox)`
   appearance: none;
   padding: 0;
   width: 100%;
@@ -12291,7 +12308,7 @@ var ComboboxInput = (0, import_styled_components67.default)(Ariakit.Combobox)`
     outline-width: 2px;
   }
 `;
-var ComboboxPopover2 = (0, import_styled_components67.default)(Ariakit.ComboboxPopover)`
+var ComboboxPopover2 = (0, import_styled_components68.default)(Ariakit.ComboboxPopover)`
   --wui-combobox-content-border: var(--wui-color-border);
   --wui-combobox-content-bg: var(--wui-color-bg-surface);
   --wui-combobox-content-border-radius: var(--wui-border-radius-02);
@@ -12300,7 +12317,7 @@ var ComboboxPopover2 = (0, import_styled_components67.default)(Ariakit.ComboboxP
   --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);
@@ -12311,13 +12328,14 @@ var ComboboxPopover2 = (0, import_styled_components67.default)(Ariakit.ComboboxP
   flex-direction: column;
   overflow: auto;
   overscroll-behavior: contain;
+  margin-top: var(--wui-space-02);
 
   &[aria-busy='true'] {
     --item-opacity: 0.5;
   }
 `;
-var ComboboxItem2 = (0, import_styled_components67.default)(Ariakit.ComboboxItem)`
-  ${variantStyleMap2.body3};
+var ComboboxItem2 = (0, import_styled_components68.default)(Ariakit.ComboboxItem)`
+  ${getTypographicStyles("body3")};
   display: flex;
   padding: var(--wui-combobox-option-padding);
   gap: var(--wui-combobox-option-inner-gap);
@@ -12326,6 +12344,7 @@ var ComboboxItem2 = (0, import_styled_components67.default)(Ariakit.ComboboxItem
   border-radius: var(--wui-border-radius-01);
   align-items: center;
   cursor: pointer;
+  justify-content: space-between;
 
   &:hover,
   &:focus-visible,
@@ -12343,7 +12362,7 @@ var ComboboxItem2 = (0, import_styled_components67.default)(Ariakit.ComboboxItem
     background-color: transparent;
   }
 `;
-var NoResults = import_styled_components67.default.div`
+var NoResults = import_styled_components68.default.div`
   gap: var(--wui-space-02);
 `;
 var POPOVER_WIDTH_OFFSET = 20;
@@ -12448,17 +12467,17 @@ var Combobox2 = ({
                   className: "combobox-item",
                   value: match,
                   children: [
+                    options[match],
                     /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(
                       Icon,
                       {
-                        size: "sm",
+                        size: "md",
                         style: {
                           opacity: value.includes(match) ? 1 : 0
                         },
                         type: "checkmark"
                       }
-                    ),
-                    options[match]
+                    )
                   ]
                 },
                 match
@@ -12480,7 +12499,7 @@ var import_react61 = require("react");
 var import_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
 var import_type_guards37 = require("@wistia/type-guards");
 var import_react56 = require("react");
-var import_styled_components68 = __toESM(require("styled-components"));
+var import_styled_components69 = __toESM(require("styled-components"));
 
 // src/components/Menu/MenuContext.tsx
 var import_react55 = require("react");
@@ -12489,7 +12508,7 @@ var useMenuContext = () => (0, import_react55.useContext)(MenuContext);
 
 // src/components/Menu/Menu.tsx
 var import_jsx_runtime255 = require("react/jsx-runtime");
-var open = import_styled_components68.keyframes`
+var open = import_styled_components69.keyframes`
   from {
     opacity: 0;
     transform: scale(.97) translateY(-8px);
@@ -12499,7 +12518,7 @@ var open = import_styled_components68.keyframes`
     transform: scale(1);
   }
 `;
-var close = import_styled_components68.keyframes`
+var close = import_styled_components69.keyframes`
   from {
     opacity: 1;
     transform: scale(1);
@@ -12509,7 +12528,7 @@ var close = import_styled_components68.keyframes`
     transform: scale(.97) translateY(-8px);
   }
 `;
-var menuItemCss = import_styled_components68.css`
+var menuItemCss = import_styled_components69.css`
   --menu-label-description-gap: var(--wui-space-01);
   --menu-item-inner-gap: var(--wui-space-03);
   --menu-item-left-icon-size: 24px;
@@ -12520,7 +12539,7 @@ var menuItemCss = import_styled_components68.css`
   --menu-label-line-height: var(--wui-typography-label-3-line-height);
   --menu-divider-margin: var(--wui-space-02);
 `;
-var compactMenuItemCss = import_styled_components68.css`
+var compactMenuItemCss = import_styled_components69.css`
   --menu-label-description-gap: 0;
   --menu-item-inner-gap: var(--wui-space-02);
   --menu-item-left-icon-size: 16px;
@@ -12531,7 +12550,7 @@ var compactMenuItemCss = import_styled_components68.css`
   --menu-label-line-height: var(--wui-typography-label-4-line-height);
   --menu-divider-margin: var(--wui-space-01);
 `;
-var menuContentCss = import_styled_components68.css`
+var menuContentCss = import_styled_components69.css`
   --menu-font-family: var(--wui-typography-family-default);
   --menu-bg: var(--wui-color-bg-surface);
   --menu-shadow: var(--wui-elevation-01);
@@ -12573,7 +12592,7 @@ var menuContentCss = import_styled_components68.css`
     margin: var(--menu-divider-margin) 0;
   }
 `;
-var MenuContent = (0, import_styled_components68.default)(import_react_dropdown_menu.DropdownMenuContent)`
+var MenuContent = (0, import_styled_components69.default)(import_react_dropdown_menu.DropdownMenuContent)`
   ${menuContentCss}
   min-width: var(--radix-dropdown-menu-trigger-width);
 `;
@@ -12643,10 +12662,10 @@ Menu.displayName = "Menu_UI";
 Menu.displayName = "Menu_UI";
 
 // src/components/Menu/MenuLabel.tsx
-var import_styled_components69 = __toESM(require("styled-components"));
+var import_styled_components70 = __toESM(require("styled-components"));
 var import_react_dropdown_menu2 = require("@radix-ui/react-dropdown-menu");
 var import_jsx_runtime256 = require("react/jsx-runtime");
-var StyledMenuLabel = (0, import_styled_components69.default)(import_react_dropdown_menu2.DropdownMenuLabel)`
+var StyledMenuLabel = (0, import_styled_components70.default)(import_react_dropdown_menu2.DropdownMenuLabel)`
   padding: var(--wui-space-02);
 `;
 var MenuLabel = ({ children, ...props }) => {
@@ -12671,16 +12690,16 @@ MenuLabel.displayName = "MenuLabel_UI";
 
 // src/components/Menu/SubMenu.tsx
 var import_react58 = require("react");
-var import_styled_components72 = __toESM(require("styled-components"));
+var import_styled_components73 = __toESM(require("styled-components"));
 var import_react_dropdown_menu3 = require("@radix-ui/react-dropdown-menu");
 var import_type_guards39 = require("@wistia/type-guards");
 
 // src/components/Menu/MenuItemButton.tsx
 var import_react57 = require("react");
-var import_styled_components70 = __toESM(require("styled-components"));
+var import_styled_components71 = __toESM(require("styled-components"));
 var import_type_guards38 = require("@wistia/type-guards");
 var import_jsx_runtime257 = require("react/jsx-runtime");
-var StyledButton3 = (0, import_styled_components70.default)(Button)`
+var StyledButton3 = (0, import_styled_components71.default)(Button)`
   ${({ colorScheme }) => getColorScheme(colorScheme)};
 
   display: flex;
@@ -12719,7 +12738,7 @@ var StyledButton3 = (0, import_styled_components70.default)(Button)`
     padding-left: var(--wui-space-04);
   }
 `;
-var StyledLeftIconContainer = import_styled_components70.default.div`
+var StyledLeftIconContainer = import_styled_components71.default.div`
   height: var(--menu-item-left-icon-size);
   width: var(--menu-item-left-icon-size);
 
@@ -12730,7 +12749,7 @@ var StyledLeftIconContainer = import_styled_components70.default.div`
     }
   }
 `;
-var StyledRightIconContainer = import_styled_components70.default.div`
+var StyledRightIconContainer = import_styled_components71.default.div`
   height: var(--menu-item-right-icon-size);
   width: var(--menu-item-right-icon-size);
 
@@ -12741,13 +12760,13 @@ var StyledRightIconContainer = import_styled_components70.default.div`
     }
   }
 `;
-var StyledLabelAndDescriptionContainer = import_styled_components70.default.div`
+var StyledLabelAndDescriptionContainer = import_styled_components71.default.div`
   display: flex;
   flex-direction: column;
   gap: var(--menu-label-description-gap);
   flex-basis: 100%;
 `;
-var StyledBadgeContainer = import_styled_components70.default.div`
+var StyledBadgeContainer = import_styled_components71.default.div`
   align-self: start;
   justify-self: end;
   font-size: var(--wui-typography-label-4-size);
@@ -12795,10 +12814,10 @@ var MenuItemButton = (0, import_react57.forwardRef)(({ children, appearance, com
 MenuItemButton.displayName = "MenuItemButton_UI";
 
 // src/components/Menu/MenuItemLabelDescription.tsx
-var import_styled_components71 = __toESM(require("styled-components"));
+var import_styled_components72 = __toESM(require("styled-components"));
 var import_jsx_runtime258 = require("react/jsx-runtime");
-var StyledMenuItemLabel = import_styled_components71.default.span``;
-var StyledMenuItemDescription = (0, import_styled_components71.default)(Text)``;
+var StyledMenuItemLabel = import_styled_components72.default.span``;
+var StyledMenuItemDescription = (0, import_styled_components72.default)(Text)``;
 var MenuItemLabel = ({ children }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(StyledMenuItemLabel, { children });
 };
@@ -12815,17 +12834,17 @@ var MenuItemDescription = ({ children }) => {
 
 // src/components/Menu/SubMenu.tsx
 var import_jsx_runtime259 = require("react/jsx-runtime");
-var SubMenuContent = (0, import_styled_components72.default)(import_react_dropdown_menu3.DropdownMenuSubContent)`
+var SubMenuContent = (0, import_styled_components73.default)(import_react_dropdown_menu3.DropdownMenuSubContent)`
   ${menuContentCss}
 
   ${mq.smAndDown} {
     transform: translateX(-100%) !important;
   }
 `;
-var StyledMobileSubMenuItems = import_styled_components72.default.div`
+var StyledMobileSubMenuItems = import_styled_components73.default.div`
   margin-left: var(--wui-space-04);
 `;
-var StyledSubTrigger = (0, import_styled_components72.default)(import_react_dropdown_menu3.DropdownMenuSubTrigger)`
+var StyledSubTrigger = (0, import_styled_components73.default)(import_react_dropdown_menu3.DropdownMenuSubTrigger)`
   outline: none;
 
   &[data-state='open'],
@@ -13195,10 +13214,10 @@ var ContextMenu = ({
 
 // src/components/DataCards/DataCard.tsx
 var import_react62 = require("react");
-var import_styled_components73 = __toESM(require("styled-components"));
+var import_styled_components74 = __toESM(require("styled-components"));
 var import_type_guards42 = require("@wistia/type-guards");
 var import_jsx_runtime266 = require("react/jsx-runtime");
-var StyledDataCard = import_styled_components73.default.div`
+var StyledDataCard = import_styled_components74.default.div`
   --wui-data-card-text: var(--wui-color-text-button);
   --wui-color-text: var(--wui-data-card-text);
   --wui-data-card-background: var(--wui-color-bg-surface-secondary);
@@ -13272,7 +13291,7 @@ var StyledDataCard = import_styled_components73.default.div`
     ${({ $colorScheme }) => getColorScheme($colorScheme)}
   }
 `;
-var shimmer = import_styled_components73.keyframes`
+var shimmer = import_styled_components74.keyframes`
   0% {
     background-position: 200% 0;
   }
@@ -13280,7 +13299,7 @@ var shimmer = import_styled_components73.keyframes`
     background-position: -200% 0;
   }
 `;
-var LoadingBackground = import_styled_components73.default.div`
+var LoadingBackground = import_styled_components74.default.div`
   background: linear-gradient(
     90deg,
     var(--wui-color-bg-surface-tertiary) 25%,
@@ -13291,32 +13310,32 @@ var LoadingBackground = import_styled_components73.default.div`
   animation: ${shimmer} 1.5s infinite;
   border-radius: var(--wui-border-radius-01);
 `;
-var StyledLoadingLabel = (0, import_styled_components73.default)(LoadingBackground)`
+var StyledLoadingLabel = (0, import_styled_components74.default)(LoadingBackground)`
   width: 80px;
   height: var(--wui-typography-heading-6-line-height);
 `;
-var StyledLoadingValue = (0, import_styled_components73.default)(LoadingBackground)`
+var StyledLoadingValue = (0, import_styled_components74.default)(LoadingBackground)`
   width: 90%;
   height: var(--wui-typography-heading-3-line-height);
 `;
-var StyledLabel3 = (0, import_styled_components73.default)(Heading)`
+var StyledLabel3 = (0, import_styled_components74.default)(Heading)`
   grid-area: label;
 `;
-var StyledValue = (0, import_styled_components73.default)(Heading)`
+var StyledValue = (0, import_styled_components74.default)(Heading)`
   grid-area: value;
 `;
-var StyledSlot = import_styled_components73.default.div`
+var StyledSlot = import_styled_components74.default.div`
   display: flex;
   justify-content: flex-end;
   grid-area: slot;
   align-self: center;
 `;
-var StyledDataCardTrendContainer = import_styled_components73.default.div`
+var StyledDataCardTrendContainer = import_styled_components74.default.div`
   position: absolute;
   bottom: var(--wui-space-01);
   right: var(--wui-space-01);
 `;
-var StyledSubtitle = (0, import_styled_components73.default)(Text)`
+var StyledSubtitle = (0, import_styled_components74.default)(Text)`
   grid-area: subtitle;
 `;
 var DataCardInner = ({
@@ -13394,9 +13413,9 @@ var DataCard = (props) => {
 DataCard.displayName = "DataCard_UI";
 
 // src/components/DataCards/DataCards.tsx
-var import_styled_components74 = __toESM(require("styled-components"));
+var import_styled_components75 = __toESM(require("styled-components"));
 var import_jsx_runtime267 = require("react/jsx-runtime");
-var StyledDataCards = (0, import_styled_components74.default)(Box)`
+var StyledDataCards = (0, import_styled_components75.default)(Box)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
 
   > * {
@@ -13429,9 +13448,9 @@ var DataCards = ({
 DataCards.displayName = "DataCards_UI";
 
 // src/components/DataCards/DataCardTrend.tsx
-var import_styled_components75 = __toESM(require("styled-components"));
+var import_styled_components76 = __toESM(require("styled-components"));
 var import_jsx_runtime268 = require("react/jsx-runtime");
-var StyledDataCardTrend = import_styled_components75.default.div`
+var StyledDataCardTrend = import_styled_components76.default.div`
   ${({ $outlook }) => getColorScheme($outlook === "positive" ? "success" : "error")};
   background: var(--wui-color-bg-app);
   border-radius: var(--wui-border-radius-rounded);
@@ -13467,9 +13486,9 @@ var DataCardTrend = ({
 };
 
 // src/components/DataCards/DataCardHoverArrow.tsx
-var import_styled_components76 = __toESM(require("styled-components"));
+var import_styled_components77 = __toESM(require("styled-components"));
 var import_jsx_runtime269 = require("react/jsx-runtime");
-var StyledIconContainer = import_styled_components76.default.div`
+var StyledIconContainer = import_styled_components77.default.div`
   display: flex;
   align-items: center;
   align-self: center;
@@ -13485,9 +13504,9 @@ var DataCardHoverArrow = () => /* @__PURE__ */ (0, import_jsx_runtime269.jsx)(St
 DataCardHoverArrow.displayName = "DataCardHoverArrow_UI";
 
 // src/components/DataList/DataList.tsx
-var import_styled_components77 = __toESM(require("styled-components"));
+var import_styled_components78 = __toESM(require("styled-components"));
 var import_jsx_runtime270 = require("react/jsx-runtime");
-var StyledDataList = import_styled_components77.default.dl`
+var StyledDataList = import_styled_components78.default.dl`
   display: grid;
   grid-template-columns: auto 1fr;
   column-gap: var(--wui-space-02);
@@ -13566,22 +13585,22 @@ var DataListItemValue = (props) => {
 DataListItemValue.displayName = "DataListItemValue_UI";
 
 // src/components/Divider/Divider.tsx
-var import_styled_components78 = __toESM(require("styled-components"));
+var import_styled_components79 = __toESM(require("styled-components"));
 var import_jsx_runtime273 = require("react/jsx-runtime");
-var horizontalBorderCss = import_styled_components78.css`
+var horizontalBorderCss = import_styled_components79.css`
   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 = import_styled_components78.css`
+var verticalBorderCss = import_styled_components79.css`
   background-color: var(--wui-color-border);
   max-width: 1px;
   min-height: 100%;
   width: 1px;
 `;
-var DividerComponent = import_styled_components78.default.div`
+var DividerComponent = import_styled_components79.default.div`
   ${({ $orientation }) => {
   switch ($orientation) {
     case "vertical":
@@ -13607,10 +13626,10 @@ var Divider = ({ orientation = "horizontal", ...props }) => {
 Divider.displayName = "Divider_UI";
 
 // src/components/EditableHeading/EditableHeading.tsx
-var import_styled_components79 = __toESM(require("styled-components"));
+var import_styled_components80 = __toESM(require("styled-components"));
 var import_react63 = require("react");
 var import_jsx_runtime274 = require("react/jsx-runtime");
-var StyledInput = (0, import_styled_components79.default)(Input)`
+var StyledInput = (0, import_styled_components80.default)(Input)`
   &:not([rows]) {
     min-height: unset;
   }
@@ -13631,7 +13650,7 @@ var StyledInput = (0, import_styled_components79.default)(Input)`
     resize: none;
   }
 `;
-var editableStyles = import_styled_components79.css`
+var editableStyles = import_styled_components80.css`
   &:has(+ :focus-within) {
     background: var(--wui-color-bg-surface-hover);
   }
@@ -13641,7 +13660,7 @@ var editableStyles = import_styled_components79.css`
     cursor: pointer;
   }
 `;
-var StyledHeading2 = (0, import_styled_components79.default)(Heading)`
+var StyledHeading2 = (0, import_styled_components80.default)(Heading)`
   width: 100%;
   border-radius: var(--wui-border-radius-02);
   padding: var(--wui-space-02);
@@ -13750,9 +13769,9 @@ var import_type_guards44 = require("@wistia/type-guards");
 // src/components/EditableText/EditableTextRoot.tsx
 var import_react64 = require("react");
 var import_type_guards43 = require("@wistia/type-guards");
-var import_styled_components80 = __toESM(require("styled-components"));
+var import_styled_components81 = __toESM(require("styled-components"));
 var import_jsx_runtime275 = require("react/jsx-runtime");
-var StyledEditableTextRoot = import_styled_components80.default.div`
+var StyledEditableTextRoot = import_styled_components81.default.div`
   display: contents;
 
   --wui-editable-text-padding: var(--wui-space-01);
@@ -13862,23 +13881,6 @@ var EditableTextRoot = ({
   );
 };
 
-// src/private/helpers/getTypographicStyles/getTypographicStyles.ts
-var import_styled_components81 = require("styled-components");
-var typographicVariantStyleMap = { ...variantStyleMap2, ...variantStyleMap };
-var getTypographicStyles = (variant) => {
-  return import_styled_components81.css`
-    ${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
 var import_jsx_runtime276 = require("react/jsx-runtime");
 var StyledEditableTextDisplay = import_styled_components82.default.div`