@wistia/ui 0.4.7 → 0.4.8-beta.2116c6fb.fdbbdee

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.4.7
+ * @license @wistia/ui v0.4.8-beta.2116c6fb.fdbbdee
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -40,6 +40,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   ActionButton: () => ActionButton,
+  AnalyticsCard: () => AnalyticsCard,
   Avatar: () => Avatar,
   Badge: () => Badge,
   Box: () => Box,
@@ -75,6 +76,9 @@ __export(index_exports, {
   RadioGroup: () => RadioGroup,
   RadioMenuItem: () => RadioMenuItem,
   ScreenReaderOnly: () => ScreenReaderOnly,
+  Select: () => Select,
+  SelectOption: () => SelectOption,
+  SelectOptionGroup: () => SelectOptionGroup,
   Stack: () => Stack,
   SubMenu: () => SubMenu,
   Tag: () => Tag,
@@ -7483,6 +7487,14 @@ Input.displayName = "Input";
 var import_styled_components39 = __toESM(require("styled-components"));
 var import_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
 var import_type_guards23 = require("@wistia/type-guards");
+var import_react31 = require("react");
+
+// src/components/Menu/MenuContext.tsx
+var import_react30 = require("react");
+var MenuContext = (0, import_react30.createContext)({ compact: false });
+var useMenuContext = () => (0, import_react30.useContext)(MenuContext);
+
+// src/components/Menu/Menu.tsx
 var import_jsx_runtime187 = require("react/jsx-runtime");
 var open = import_styled_components39.keyframes`
   from {
@@ -7504,6 +7516,28 @@ var close = import_styled_components39.keyframes`
     transform: scale(.97) translateY(-8px);
   }
 `;
+var menuItemCss = import_styled_components39.css`
+  --menu-label-description-gap: var(--wui-space-01);
+  --menu-item-inner-gap: var(--wui-space-03);
+  --menu-item-left-icon-size: 24px;
+  --menu-item-right-icon-size: 16px;
+  --menu-item-padding: var(--wui-space-02);
+  --menu-label-font-size: var(--wui-typography-label-3-size);
+  --menu-label-font-weight: var(--wui-typography-label-3-weight);
+  --menu-label-line-height: var(--wui-typography-label-3-line-height);
+  --menu-divider-margin: var(--wui-space-02);
+`;
+var compactMenuItemCss = import_styled_components39.css`
+  --menu-label-description-gap: 0;
+  --menu-item-inner-gap: var(--wui-space-02);
+  --menu-item-left-icon-size: 16px;
+  --menu-item-right-icon-size: 12px;
+  --menu-item-padding: 6px;
+  --menu-label-font-size: var(--wui-typography-label-4-size);
+  --menu-label-font-weight: var(--wui-typography-label-4-weight);
+  --menu-label-line-height: var(--wui-typography-label-4-line-height);
+  --menu-divider-margin: var(--wui-space-01);
+`;
 var menuContentCss = import_styled_components39.css`
   --menu-font-family: var(--wui-typography-family-default);
   --menu-bg: var(--wui-color-bg-surface);
@@ -7513,6 +7547,8 @@ var menuContentCss = import_styled_components39.css`
   --menu-min-width: 120px;
   --menu-max-width: 284px;
 
+  ${({ $compact }) => $compact ? compactMenuItemCss : menuItemCss};
+
   animation: ${open}; /* TODO - need easing tokens */
   font-family: var(--menu-font-family);
   background: var(--menu-bg);
@@ -7543,31 +7579,8 @@ var menuContentCss = import_styled_components39.css`
     margin: var(--menu-divider-margin) 0;
   }
 `;
-var menuItemCss = import_styled_components39.css`
-  --menu-label-description-gap: var(--wui-space-01);
-  --menu-item-inner-gap: var(--wui-space-03);
-  --menu-item-left-icon-size: 24px;
-  --menu-item-right-icon-size: 16px;
-  --menu-item-padding: var(--wui-space-02);
-  --menu-label-font-size: var(--wui-typography-label-3-size);
-  --menu-label-font-weight: var(--wui-typography-label-3-weight);
-  --menu-label-line-height: var(--wui-typography-label-3-line-height);
-  --menu-divider-margin: var(--wui-space-02);
-`;
-var compactMenuItemCss = import_styled_components39.css`
-  --menu-label-description-gap: 0;
-  --menu-item-inner-gap: var(--wui-space-02);
-  --menu-item-left-icon-size: 16px;
-  --menu-item-right-icon-size: 12px;
-  --menu-item-padding: 6px;
-  --menu-label-font-size: var(--wui-typography-label-4-size);
-  --menu-label-font-weight: var(--wui-typography-label-4-weight);
-  --menu-label-line-height: var(--wui-typography-label-4-line-height);
-  --menu-divider-margin: var(--wui-space-01);
-`;
 var MenuContent = (0, import_styled_components39.default)(import_react_dropdown_menu.DropdownMenuContent)`
   ${menuContentCss}
-  ${({ $compact }) => $compact ? compactMenuItemCss : menuItemCss}
 `;
 var Menu = ({
   align = "start",
@@ -7582,6 +7595,7 @@ var Menu = ({
   onInteractOutside,
   ...props
 }) => {
+  const contextValue = (0, import_react31.useMemo)(() => ({ compact }), [compact]);
   let controlProps = {
     ...(0, import_type_guards23.isNotNil)(onOpenChange) && (0, import_type_guards23.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {}
   };
@@ -7591,7 +7605,7 @@ var Menu = ({
       onOpenChange: () => null
     };
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime187.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(MenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime187.jsxs)(
     import_react_dropdown_menu.DropdownMenu,
     {
       modal: false,
@@ -7623,7 +7637,7 @@ var Menu = ({
         ) })
       ]
     }
-  );
+  ) });
 };
 Menu.displayName = "Menu";
 
@@ -7655,13 +7669,13 @@ var MenuLabel = ({ children, ...props }) => {
 MenuLabel.displayName = "MenuLabel";
 
 // src/components/Menu/SubMenu.tsx
-var import_react31 = require("react");
+var import_react33 = require("react");
 var import_styled_components43 = __toESM(require("styled-components"));
 var import_react_dropdown_menu3 = require("@radix-ui/react-dropdown-menu");
 var import_type_guards25 = require("@wistia/type-guards");
 
 // src/components/Menu/MenuItemButton.tsx
-var import_react30 = require("react");
+var import_react32 = require("react");
 var import_styled_components41 = __toESM(require("styled-components"));
 var import_type_guards24 = require("@wistia/type-guards");
 var import_jsx_runtime189 = require("react/jsx-runtime");
@@ -7733,7 +7747,7 @@ var StyledBadgeContainer = import_styled_components41.default.div`
   font-size: var(--wui-typography-label-4-size);
   color: var(--wui-color-text-secondary);
 `;
-var MenuItemButton = (0, import_react30.forwardRef)(({ children, appearance, command, icon, ...props }, ref) => {
+var MenuItemButton = (0, import_react32.forwardRef)(({ children, appearance, command, icon, ...props }, ref) => {
   let { colorScheme, badge } = props;
   if (appearance === "dangerous") {
     if ((0, import_type_guards24.isNotUndefined)(colorScheme)) {
@@ -7793,7 +7807,6 @@ var MenuItemDescription = ({ children }) => {
 var import_jsx_runtime191 = require("react/jsx-runtime");
 var SubMenuContent = (0, import_styled_components43.default)(import_react_dropdown_menu3.DropdownMenuSubContent)`
   ${menuContentCss}
-  width: 298px;
 
   ${mq.smAndDown} {
     transform: translateX(-100%) !important;
@@ -7812,8 +7825,8 @@ var StyledSubTrigger = (0, import_styled_components43.default)(import_react_drop
 `;
 var SubMenuTrigger = (props) => {
   const { isSmAndUp } = useMq();
-  const Trigger2 = isSmAndUp ? StyledSubTrigger : import_react_dropdown_menu3.DropdownMenuItem;
-  return /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(Trigger2, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
+  const Trigger3 = isSmAndUp ? StyledSubTrigger : import_react_dropdown_menu3.DropdownMenuItem;
+  return /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(Trigger3, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
     MenuItemButton,
     {
       ...props,
@@ -7829,13 +7842,14 @@ var SubMenu = ({
   ...props
 }) => {
   const { isSmAndUp } = useMq();
-  const [isExpanded, setIsExpanded] = (0, import_react31.useState)(false);
+  const [isExpanded, setIsExpanded] = (0, import_react33.useState)(false);
+  const { compact } = useMenuContext();
   return isSmAndUp ? /* @__PURE__ */ (0, import_jsx_runtime191.jsxs)(import_react_dropdown_menu3.DropdownMenuSub, { onOpenChange, children: [
     /* @__PURE__ */ (0, import_jsx_runtime191.jsxs)(SubMenuTrigger, { ...props, children: [
       /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(MenuItemLabel, { children: label }),
       (0, import_type_guards25.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(MenuItemDescription, { children: description }) : null
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(import_react_dropdown_menu3.DropdownMenuPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(SubMenuContent, { children }) })
+    /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(import_react_dropdown_menu3.DropdownMenuPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(SubMenuContent, { $compact: compact, children }) })
   ] }) : /* @__PURE__ */ (0, import_jsx_runtime191.jsxs)(import_react_dropdown_menu3.DropdownMenuGroup, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime191.jsxs)(
       SubMenuTrigger,
@@ -7857,10 +7871,10 @@ var SubMenu = ({
 SubMenu.displayName = "SubMenu";
 
 // src/components/Menu/MenuItem.tsx
-var import_react32 = require("react");
+var import_react34 = require("react");
 var import_react_dropdown_menu4 = require("@radix-ui/react-dropdown-menu");
 var import_jsx_runtime192 = require("react/jsx-runtime");
-var MenuItem = (0, import_react32.forwardRef)(
+var MenuItem = (0, import_react34.forwardRef)(
   ({ onSelect = () => null, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
       import_react_dropdown_menu4.DropdownMenuItem,
@@ -8010,7 +8024,7 @@ var CheckboxMenuItem = ({
 CheckboxMenuItem.displayName = "CheckboxMenuItem";
 
 // src/components/Modal/Modal.tsx
-var import_react36 = require("react");
+var import_react38 = require("react");
 var import_styled_components49 = __toESM(require("styled-components"));
 var import_react_dialog4 = require("@radix-ui/react-dialog");
 var import_type_guards28 = require("@wistia/type-guards");
@@ -8093,19 +8107,19 @@ var ModalHeader = ({
 };
 
 // src/components/Modal/ModalContent.tsx
-var import_react34 = require("react");
+var import_react36 = require("react");
 var import_styled_components47 = __toESM(require("styled-components"));
 var import_react_dialog3 = require("@radix-ui/react-dialog");
 
 // src/private/hooks/useFocusRestore/useFocusRestore.ts
-var import_react33 = require("react");
+var import_react35 = require("react");
 var import_type_guards27 = require("@wistia/type-guards");
 var useFocusRestore = () => {
-  const previouslyFocusedRef = (0, import_react33.useRef)(null);
-  (0, import_react33.useEffect)(() => {
+  const previouslyFocusedRef = (0, import_react35.useRef)(null);
+  (0, import_react35.useEffect)(() => {
     previouslyFocusedRef.current = document.activeElement;
   }, []);
-  (0, import_react33.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     return () => {
       if ((0, import_type_guards27.isNotNil)(previouslyFocusedRef.current)) {
         setTimeout(() => {
@@ -8158,7 +8172,7 @@ var StyledModalContent = (0, import_styled_components47.default)(import_react_di
     }
   }
 `;
-var ModalContent = (0, import_react34.forwardRef)(
+var ModalContent = (0, import_react36.forwardRef)(
   ({ fullHeight, width, children, ...otherProps }, ref) => {
     useFocusRestore();
     return /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(
@@ -8175,7 +8189,7 @@ var ModalContent = (0, import_react34.forwardRef)(
 );
 
 // src/private/components/Backdrop/Backdrop.tsx
-var import_react35 = require("react");
+var import_react37 = require("react");
 var import_styled_components48 = __toESM(require("styled-components"));
 var import_jsx_runtime200 = require("react/jsx-runtime");
 var backdropAnimationDuration = 150;
@@ -8213,7 +8227,7 @@ var BackdropComponent = import_styled_components48.default.div`
     }
   }
 `;
-var Backdrop = (0, import_react35.forwardRef)(
+var Backdrop = (0, import_react37.forwardRef)(
   ({ alignHorizontal = "center", alignVertical = "center", children, ...otherProps }, ref) => /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(
     BackdropComponent,
     {
@@ -8234,7 +8248,7 @@ var ModalBody = import_styled_components49.default.div`
   display: flex;
   order: 2;
 `;
-var Modal = (0, import_react36.forwardRef)(
+var Modal = (0, import_react38.forwardRef)(
   ({
     children,
     fullHeight = false,
@@ -8295,7 +8309,7 @@ var Modal = (0, import_react36.forwardRef)(
 Modal.displayName = "Modal";
 
 // src/components/Radio/Radio.tsx
-var import_react37 = require("react");
+var import_react39 = require("react");
 var import_styled_components50 = __toESM(require("styled-components"));
 var import_type_guards29 = require("@wistia/type-guards");
 var import_jsx_runtime202 = require("react/jsx-runtime");
@@ -8369,7 +8383,7 @@ var StyledRadioWrapper = import_styled_components50.default.div`
 
   ${({ disabled }) => disabled && disabledStyle2};
 `;
-var Radio = (0, import_react37.forwardRef)(
+var Radio = (0, import_react39.forwardRef)(
   ({
     checked,
     disabled = false,
@@ -8382,7 +8396,7 @@ var Radio = (0, import_react37.forwardRef)(
     value = "false",
     ...otherProps
   }, ref) => {
-    const generatedId = (0, import_react37.useId)();
+    const generatedId = (0, import_react39.useId)();
     const computedId = (0, import_type_guards29.isNonEmptyString)(id) ? id : `ui-radio-${generatedId}`;
     return /* @__PURE__ */ (0, import_jsx_runtime202.jsxs)(
       StyledRadioWrapper,
@@ -8425,7 +8439,7 @@ var Radio = (0, import_react37.forwardRef)(
 Radio.displayName = "Radio";
 
 // src/components/Tag/Tag.tsx
-var import_react38 = require("react");
+var import_react40 = require("react");
 var import_styled_components51 = __toESM(require("styled-components"));
 var import_type_guards30 = require("@wistia/type-guards");
 var import_jsx_runtime203 = require("react/jsx-runtime");
@@ -8531,7 +8545,7 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
     )
   ] });
 };
-var Tag = (0, import_react38.forwardRef)(
+var Tag = (0, import_react40.forwardRef)(
   ({ onClickRemove, colorScheme = "inherit", href, label, onClickRemoveLabel, ...otherProps }, ref) => {
     const labelProps = (0, import_type_guards30.isNotNil)(href) && (0, import_type_guards30.isNonEmptyString)(href) ? { href, as: "a" } : { as: "span" };
     return /* @__PURE__ */ (0, import_jsx_runtime203.jsxs)(
@@ -8774,9 +8788,256 @@ var WistiaLogo = ({
   return href !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime205.jsx)("a", { href, children: Logo }) : Logo;
 };
 WistiaLogo.displayName = "WistiaLogo";
+
+// src/components/Select/Select.tsx
+var import_react_select = require("@radix-ui/react-select");
+var import_react41 = require("react");
+var import_styled_components54 = __toESM(require("styled-components"));
+var import_jsx_runtime206 = require("react/jsx-runtime");
+var StyledTrigger = (0, import_styled_components54.default)(import_react_select.Trigger)`
+  ${({ $colorScheme }) => getColorScheme($colorScheme)};
+  --wui-select-color-bg: var(--wui-color-bg-surface);
+  --wui-select-color-bg-disabled: var(--wui-color-bg-surface-disabled);
+  --wui-select-color-border: var(--wui-color-border);
+  --wui-select-color-border-focus: var(--wui-color-border-active);
+  --wui-select-color-border-error: var(--wui-color-border-error);
+  --wui-select-color-border-disabled: var(--wui-color-border-disabled);
+  --wui-select-border-radius: var(--wui-border-radius-rounded);
+  --wui-select-multiline-border-radius: var(--wui-border-radius-02);
+  --wui-select-vertical-padding: var(--wui-space-02);
+  --wui-select-horizontal-padding: var(--wui-space-03);
+  --wui-select-placeholder: var(--wui-gray-10);
+  --wui-select-color-text-error: var(--wui-color-text-error);
+
+  padding: var(--wui-select-vertical-padding) var(--wui-select-horizontal-padding);
+  background-color: var(--wui-select-color-bg);
+  border: 1px solid var(--wui-select-color-border);
+  border-radius: var(--wui-select-border-radius);
+  min-width: 200px;
+  text-align: left;
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  width: ${({ $fullWidth = false }) => $fullWidth ? "100%" : "auto"};
+
+  &[aria-expanded='true'],
+  &:focus {
+    outline: 2px solid var(--wui-color-focus-ring);
+  }
+
+  &[aria-invalid='true'] {
+    outline: 2px solid var(--wui-select-color-border-error);
+    color: var(--wui-select-color-text-error);
+  }
+
+  &:disabled {
+    border-color: var(--wui-color-bg-surface-disabled);
+    background-color: var(--wui-color-bg-surface-disabled);
+  }
+`;
+var StyledContent2 = (0, import_styled_components54.default)(import_react_select.Content)`
+  --wui-select-content-border: var(--wui-color-border);
+  --wui-select-content-bg: var(--wui-color-bg-surface);
+  --wui-select-content-border-radius: var(--wui-border-radius-02);
+  --wui-select-option-padding: var(--wui-space-02);
+  --wui-select-option-inner-gap: var(--wui-space-03);
+  --wui-select-option-bg-hover: var(--wui-color-bg-surface-hover);
+
+  overflow: hidden;
+  transform: translateY(8px);
+  background-color: var(--wui-select-content-bg);
+  border: 1px solid var(--wui-select-content-border);
+  border-radius: var(--wui-select-content-border-radius);
+  padding: var(--wui-select-option-padding);
+  min-width: 200px;
+`;
+var Select = (0, import_react41.forwardRef)(
+  ({
+    colorScheme = "inherit",
+    children,
+    onChange = () => null,
+    placeholder = "Select...",
+    fullWidth = false,
+    ...props
+  }, forwardedRef) => {
+    const responsiveFullWidth = useResponsiveProp(fullWidth);
+    return /* @__PURE__ */ (0, import_jsx_runtime206.jsxs)(
+      import_react_select.Root,
+      {
+        ...props,
+        onValueChange: onChange,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime206.jsxs)(
+            StyledTrigger,
+            {
+              ref: forwardedRef,
+              $colorScheme: colorScheme,
+              $fullWidth: responsiveFullWidth,
+              ...props,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(import_react_select.Value, { placeholder }),
+                /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(
+                  Icon,
+                  {
+                    size: "md",
+                    type: "caret-down"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(import_react_select.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime206.jsxs)(StyledContent2, { position: "popper", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(import_react_select.ScrollUpButton, { children: /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(Icon, { type: "caret-up" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(import_react_select.Viewport, { children }),
+            /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(import_react_select.ScrollDownButton, { children: /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(Icon, { type: "caret-down" }) })
+          ] }) })
+        ]
+      }
+    );
+  }
+);
+Select.displayName = "Select";
+
+// src/components/Select/SelectOption.tsx
+var import_react_select2 = require("@radix-ui/react-select");
+var import_react42 = require("react");
+var import_styled_components55 = __toESM(require("styled-components"));
+var import_jsx_runtime207 = require("react/jsx-runtime");
+var StyledItem = (0, import_styled_components55.default)(import_react_select2.Item)`
+  ${variantStyleMap2.body3};
+  display: flex;
+  padding: var(--wui-select-option-padding);
+  gap: var(--wui-select-option-inner-gap);
+  font-size: var(--font-size);
+  font-weight: var(--font-weight);
+  border-radius: var(--wui-border-radius-01);
+
+  &:hover,
+  &:focus-visible {
+    background-color: var(--wui-select-option-bg-hover);
+    outline: none;
+  }
+
+  &[aria-disabled='true'] {
+    color: var(--wui-color-text-disabled);
+  }
+
+  &[aria-disabled='true']:hover {
+    background-color: transparent;
+  }
+`;
+var StyledIconContainer = import_styled_components55.default.span`
+  width: 12px;
+`;
+var SelectOption = (0, import_react42.forwardRef)(
+  ({ children, ...props }, forwardedRef) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime207.jsxs)(
+      StyledItem,
+      {
+        ...props,
+        ref: forwardedRef,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(StyledIconContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(import_react_select2.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(
+            Icon,
+            {
+              size: "sm",
+              type: "checkmark"
+            }
+          ) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(import_react_select2.ItemText, { children })
+        ]
+      }
+    );
+  }
+);
+SelectOption.displayName = "Option";
+
+// src/components/Select/SelectOptionGroup.tsx
+var import_react_select3 = require("@radix-ui/react-select");
+var import_styled_components56 = __toESM(require("styled-components"));
+var import_jsx_runtime208 = require("react/jsx-runtime");
+var StyledLabel3 = (0, import_styled_components56.default)(import_react_select3.Label)`
+  padding: var(--wui-select-option-padding);
+`;
+var SelectOptionGroup = ({ children, label, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime208.jsxs)(import_react_select3.Group, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(StyledLabel3, { children: /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(
+      Text,
+      {
+        prominence: "secondary",
+        variant: "body3",
+        children: label
+      }
+    ) }),
+    children
+  ] });
+};
+
+// src/components/AnalyticsCards/AnalyticsCard.tsx
+var import_styled_components57 = __toESM(require("styled-components"));
+var import_type_guards32 = require("@wistia/type-guards");
+var import_jsx_runtime209 = require("react/jsx-runtime");
+var StyledAnalyticsCard = import_styled_components57.default.div`
+  ${({ $colorScheme }) => getColorScheme($colorScheme)}
+  display: grid;
+  grid-template-areas: 'label slot' 'value value';
+  grid-template-rows: auto auto;
+  grid-template-columns: auto auto;
+  gap: var(--wui-space-01);
+  padding: var(--wui-space-03);
+  background: var(--wui-color-bg-surface-secondary);
+  flex: 1;
+  border-radius: var(--wui-border-radius-02);
+`;
+var StyledLabel4 = (0, import_styled_components57.default)(Heading)`
+  grid-area: label;
+`;
+var StyledValue = (0, import_styled_components57.default)(Heading)`
+  grid-area: value;
+`;
+var StyledSlot = import_styled_components57.default.div`
+  display: flex;
+  justify-content: flex-end;
+  grid-area: slot;
+  align-self: center;
+`;
+var AnalyticsCard = ({
+  label,
+  value,
+  slot,
+  colorScheme = "inherit",
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime209.jsxs)(
+  StyledAnalyticsCard,
+  {
+    $colorScheme: colorScheme,
+    ...props,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(
+        StyledLabel4,
+        {
+          renderAs: "dt",
+          variant: "heading6",
+          children: label
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(
+        StyledValue,
+        {
+          renderAs: "dd",
+          variant: "heading3",
+          children: value
+        }
+      ),
+      (0, import_type_guards32.isNotNull)(slot) && /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(StyledSlot, { children: slot })
+    ]
+  }
+);
+AnalyticsCard.displayName = "AnalyticsCard";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ActionButton,
+  AnalyticsCard,
   Avatar,
   Badge,
   Box,
@@ -8812,6 +9073,9 @@ WistiaLogo.displayName = "WistiaLogo";
   RadioGroup,
   RadioMenuItem,
   ScreenReaderOnly,
+  Select,
+  SelectOption,
+  SelectOptionGroup,
   Stack,
   SubMenu,
   Tag,