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

package/dist/index.d.mts

@@ -2168,4 +2168,101 @@ declare const WistiaLogo: {
     displayName: string;
 };
 
-export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, Box, type BoxProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonProps, Card, type CardProps, Checkbox, CheckboxGroup, CheckboxMenuItem, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Divider, Ellipsis, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Input, type InputProps, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, Stack, SubMenu, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useBoolean, useFormState, useKey, useMq, useToast, useWindowSize };
+type SelectProps = {
+    /**
+     * Sets the validity status of the input
+     *
+     * @default false
+     */
+    'aria-invalid'?: boolean;
+    /**
+     * A group of `Option` or `OptionGroup`s
+     */
+    children: ReactNode;
+    colorScheme?: ColorSchemeTypes;
+    /**
+     * When true, the select can't be interacted with.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * If true, the select will fill its container
+     */
+    fullWidth?: ResponsiveObject<boolean> | boolean;
+    /**
+     * Called when a value is changed.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Text shown when no value is selected
+     */
+    placeholder?: string;
+    /**
+     * The controlled value. Must be used in conjunction with `onChange`.
+     */
+    value?: string;
+};
+/**
+ * Display a list of options and choose one of them. Replacement for the native Select HTML element.
+ */
+declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLButtonElement>>;
+
+type SelectOptionProps = {
+    /**
+     * The visual content of the select
+     */
+    children: ReactNode;
+    /**
+     * The value to set
+     */
+    value: string;
+    /**
+     * When true, this option will not be selectable
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Optional text used for typeahead purposes. By default the typeahead behavior will use the `.textContent` of the Option.
+     * Use this when the content is complex, or you have non-textual content inside.
+     */
+    textValue?: string;
+};
+declare const SelectOption: react.ForwardRefExoticComponent<SelectOptionProps & react.RefAttributes<HTMLDivElement>>;
+
+type SelectOptionGroupProps = {
+    /** The label of the group */
+    label: string;
+    /** At least one `Option` */
+    children: ReactNode;
+};
+declare const SelectOptionGroup: ({ children, label, ...props }: SelectOptionGroupProps) => react_jsx_runtime.JSX.Element;
+
+type AnalyticsCardProps = ComponentPropsWithoutRef<'div'> & {
+    /**
+     * Label text displayed above the value
+     */
+    label: ReactNode;
+    /**
+     * Main value to display in the card
+     */
+    value: ReactNode;
+    /**
+     * Optional content to display in the top-right corner
+     */
+    upperRightSlot?: ReactNode;
+    /**
+     * Sets the color scheme of the card
+     */
+    colorScheme?: ColorSchemeTypes;
+};
+/**
+ * Component description goes here
+ */
+declare const AnalyticsCard: {
+    ({ label, value, slot, colorScheme, ...props }: AnalyticsCardProps): JSX.Element;
+    displayName: string;
+};
+
+export { ActionButton, type ActionButtonProps, AnalyticsCard, type AnalyticsCardProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, Box, type BoxProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonProps, Card, type CardProps, Checkbox, CheckboxGroup, CheckboxMenuItem, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Divider, Ellipsis, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Input, type InputProps, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Stack, SubMenu, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useBoolean, useFormState, useKey, useMq, useToast, useWindowSize };

package/dist/index.d.ts

@@ -2168,4 +2168,101 @@ declare const WistiaLogo: {
     displayName: string;
 };
 
-export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, Box, type BoxProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonProps, Card, type CardProps, Checkbox, CheckboxGroup, CheckboxMenuItem, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Divider, Ellipsis, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Input, type InputProps, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, Stack, SubMenu, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useBoolean, useFormState, useKey, useMq, useToast, useWindowSize };
+type SelectProps = {
+    /**
+     * Sets the validity status of the input
+     *
+     * @default false
+     */
+    'aria-invalid'?: boolean;
+    /**
+     * A group of `Option` or `OptionGroup`s
+     */
+    children: ReactNode;
+    colorScheme?: ColorSchemeTypes;
+    /**
+     * When true, the select can't be interacted with.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * If true, the select will fill its container
+     */
+    fullWidth?: ResponsiveObject<boolean> | boolean;
+    /**
+     * Called when a value is changed.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Text shown when no value is selected
+     */
+    placeholder?: string;
+    /**
+     * The controlled value. Must be used in conjunction with `onChange`.
+     */
+    value?: string;
+};
+/**
+ * Display a list of options and choose one of them. Replacement for the native Select HTML element.
+ */
+declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLButtonElement>>;
+
+type SelectOptionProps = {
+    /**
+     * The visual content of the select
+     */
+    children: ReactNode;
+    /**
+     * The value to set
+     */
+    value: string;
+    /**
+     * When true, this option will not be selectable
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Optional text used for typeahead purposes. By default the typeahead behavior will use the `.textContent` of the Option.
+     * Use this when the content is complex, or you have non-textual content inside.
+     */
+    textValue?: string;
+};
+declare const SelectOption: react.ForwardRefExoticComponent<SelectOptionProps & react.RefAttributes<HTMLDivElement>>;
+
+type SelectOptionGroupProps = {
+    /** The label of the group */
+    label: string;
+    /** At least one `Option` */
+    children: ReactNode;
+};
+declare const SelectOptionGroup: ({ children, label, ...props }: SelectOptionGroupProps) => react_jsx_runtime.JSX.Element;
+
+type AnalyticsCardProps = ComponentPropsWithoutRef<'div'> & {
+    /**
+     * Label text displayed above the value
+     */
+    label: ReactNode;
+    /**
+     * Main value to display in the card
+     */
+    value: ReactNode;
+    /**
+     * Optional content to display in the top-right corner
+     */
+    upperRightSlot?: ReactNode;
+    /**
+     * Sets the color scheme of the card
+     */
+    colorScheme?: ColorSchemeTypes;
+};
+/**
+ * Component description goes here
+ */
+declare const AnalyticsCard: {
+    ({ label, value, slot, colorScheme, ...props }: AnalyticsCardProps): JSX.Element;
+    displayName: string;
+};
+
+export { ActionButton, type ActionButtonProps, AnalyticsCard, type AnalyticsCardProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, Box, type BoxProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonProps, Card, type CardProps, Checkbox, CheckboxGroup, CheckboxMenuItem, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Divider, Ellipsis, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Input, type InputProps, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Stack, SubMenu, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useBoolean, useFormState, useKey, useMq, useToast, useWindowSize };

package/dist/index.mjs

@@ -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.
  *
@@ -7397,6 +7397,14 @@ import {
   DropdownMenuContent
 } from "@radix-ui/react-dropdown-menu";
 import { isNotNil as isNotNil10, isNotUndefined as isNotUndefined7 } from "@wistia/type-guards";
+import { useMemo as useMemo7 } from "react";
+
+// src/components/Menu/MenuContext.tsx
+import { createContext as createContext5, useContext as useContext4 } from "react";
+var MenuContext = createContext5({ compact: false });
+var useMenuContext = () => useContext4(MenuContext);
+
+// src/components/Menu/Menu.tsx
 import { jsx as jsx187, jsxs as jsxs14 } from "react/jsx-runtime";
 var open = keyframes`
   from {
@@ -7418,6 +7426,28 @@ var close = keyframes`
     transform: scale(.97) translateY(-8px);
   }
 `;
+var menuItemCss = css20`
+  --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 = css20`
+  --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 = css20`
   --menu-font-family: var(--wui-typography-family-default);
   --menu-bg: var(--wui-color-bg-surface);
@@ -7427,6 +7457,8 @@ var menuContentCss = css20`
   --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);
@@ -7457,31 +7489,8 @@ var menuContentCss = css20`
     margin: var(--menu-divider-margin) 0;
   }
 `;
-var menuItemCss = css20`
-  --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 = css20`
-  --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 = styled26(DropdownMenuContent)`
   ${menuContentCss}
-  ${({ $compact }) => $compact ? compactMenuItemCss : menuItemCss}
 `;
 var Menu = ({
   align = "start",
@@ -7496,6 +7505,7 @@ var Menu = ({
   onInteractOutside,
   ...props
 }) => {
+  const contextValue = useMemo7(() => ({ compact }), [compact]);
   let controlProps = {
     ...isNotNil10(onOpenChange) && isNotNil10(isOpen) ? { open: isOpen, onOpenChange } : {}
   };
@@ -7505,7 +7515,7 @@ var Menu = ({
       onOpenChange: () => null
     };
   }
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsx187(MenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs14(
     DropdownMenu,
     {
       modal: false,
@@ -7537,7 +7547,7 @@ var Menu = ({
         ) })
       ]
     }
-  );
+  ) });
 };
 Menu.displayName = "Menu";
 
@@ -7714,7 +7724,6 @@ var MenuItemDescription = ({ children }) => {
 import { jsx as jsx191, jsxs as jsxs16 } from "react/jsx-runtime";
 var SubMenuContent = styled30(DropdownMenuSubContent)`
   ${menuContentCss}
-  width: 298px;
 
   ${mq.smAndDown} {
     transform: translateX(-100%) !important;
@@ -7733,8 +7742,8 @@ var StyledSubTrigger = styled30(DropdownMenuSubTrigger)`
 `;
 var SubMenuTrigger = (props) => {
   const { isSmAndUp } = useMq();
-  const Trigger2 = isSmAndUp ? StyledSubTrigger : DropdownMenuItem;
-  return /* @__PURE__ */ jsx191(Trigger2, { asChild: true, children: /* @__PURE__ */ jsx191(
+  const Trigger3 = isSmAndUp ? StyledSubTrigger : DropdownMenuItem;
+  return /* @__PURE__ */ jsx191(Trigger3, { asChild: true, children: /* @__PURE__ */ jsx191(
     MenuItemButton,
     {
       ...props,
@@ -7751,12 +7760,13 @@ var SubMenu = ({
 }) => {
   const { isSmAndUp } = useMq();
   const [isExpanded, setIsExpanded] = useState7(false);
+  const { compact } = useMenuContext();
   return isSmAndUp ? /* @__PURE__ */ jsxs16(DropdownMenuSub, { onOpenChange, children: [
     /* @__PURE__ */ jsxs16(SubMenuTrigger, { ...props, children: [
       /* @__PURE__ */ jsx191(MenuItemLabel, { children: label }),
       isNotNil12(description) ? /* @__PURE__ */ jsx191(MenuItemDescription, { children: description }) : null
     ] }),
-    /* @__PURE__ */ jsx191(DropdownMenuPortal2, { children: /* @__PURE__ */ jsx191(SubMenuContent, { children }) })
+    /* @__PURE__ */ jsx191(DropdownMenuPortal2, { children: /* @__PURE__ */ jsx191(SubMenuContent, { $compact: compact, children }) })
   ] }) : /* @__PURE__ */ jsxs16(DropdownMenuGroup, { children: [
     /* @__PURE__ */ jsxs16(
       SubMenuTrigger,
@@ -8708,8 +8718,264 @@ var WistiaLogo = ({
   return href !== void 0 ? /* @__PURE__ */ jsx205("a", { href, children: Logo }) : Logo;
 };
 WistiaLogo.displayName = "WistiaLogo";
+
+// src/components/Select/Select.tsx
+import {
+  Root as Root2,
+  Trigger as Trigger2,
+  Portal as Portal2,
+  Content as Content2,
+  ScrollUpButton,
+  Viewport,
+  Value,
+  ScrollDownButton
+} from "@radix-ui/react-select";
+import { forwardRef as forwardRef19 } from "react";
+import styled41 from "styled-components";
+import { jsx as jsx206, jsxs as jsxs25 } from "react/jsx-runtime";
+var StyledTrigger = styled41(Trigger2)`
+  ${({ $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 = styled41(Content2)`
+  --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 = forwardRef19(
+  ({
+    colorScheme = "inherit",
+    children,
+    onChange = () => null,
+    placeholder = "Select...",
+    fullWidth = false,
+    ...props
+  }, forwardedRef) => {
+    const responsiveFullWidth = useResponsiveProp(fullWidth);
+    return /* @__PURE__ */ jsxs25(
+      Root2,
+      {
+        ...props,
+        onValueChange: onChange,
+        children: [
+          /* @__PURE__ */ jsxs25(
+            StyledTrigger,
+            {
+              ref: forwardedRef,
+              $colorScheme: colorScheme,
+              $fullWidth: responsiveFullWidth,
+              ...props,
+              children: [
+                /* @__PURE__ */ jsx206(Value, { placeholder }),
+                /* @__PURE__ */ jsx206(
+                  Icon,
+                  {
+                    size: "md",
+                    type: "caret-down"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx206(Portal2, { children: /* @__PURE__ */ jsxs25(StyledContent2, { position: "popper", children: [
+            /* @__PURE__ */ jsx206(ScrollUpButton, { children: /* @__PURE__ */ jsx206(Icon, { type: "caret-up" }) }),
+            /* @__PURE__ */ jsx206(Viewport, { children }),
+            /* @__PURE__ */ jsx206(ScrollDownButton, { children: /* @__PURE__ */ jsx206(Icon, { type: "caret-down" }) })
+          ] }) })
+        ]
+      }
+    );
+  }
+);
+Select.displayName = "Select";
+
+// src/components/Select/SelectOption.tsx
+import { Item, ItemText, ItemIndicator } from "@radix-ui/react-select";
+import { forwardRef as forwardRef20 } from "react";
+import styled42 from "styled-components";
+import { jsx as jsx207, jsxs as jsxs26 } from "react/jsx-runtime";
+var StyledItem = styled42(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 = styled42.span`
+  width: 12px;
+`;
+var SelectOption = forwardRef20(
+  ({ children, ...props }, forwardedRef) => {
+    return /* @__PURE__ */ jsxs26(
+      StyledItem,
+      {
+        ...props,
+        ref: forwardedRef,
+        children: [
+          /* @__PURE__ */ jsx207(StyledIconContainer, { children: /* @__PURE__ */ jsx207(ItemIndicator, { children: /* @__PURE__ */ jsx207(
+            Icon,
+            {
+              size: "sm",
+              type: "checkmark"
+            }
+          ) }) }),
+          /* @__PURE__ */ jsx207(ItemText, { children })
+        ]
+      }
+    );
+  }
+);
+SelectOption.displayName = "Option";
+
+// src/components/Select/SelectOptionGroup.tsx
+import { Group, Label as Label2 } from "@radix-ui/react-select";
+import styled43 from "styled-components";
+import { jsx as jsx208, jsxs as jsxs27 } from "react/jsx-runtime";
+var StyledLabel3 = styled43(Label2)`
+  padding: var(--wui-select-option-padding);
+`;
+var SelectOptionGroup = ({ children, label, ...props }) => {
+  return /* @__PURE__ */ jsxs27(Group, { ...props, children: [
+    /* @__PURE__ */ jsx208(StyledLabel3, { children: /* @__PURE__ */ jsx208(
+      Text,
+      {
+        prominence: "secondary",
+        variant: "body3",
+        children: label
+      }
+    ) }),
+    children
+  ] });
+};
+
+// src/components/AnalyticsCards/AnalyticsCard.tsx
+import styled44 from "styled-components";
+import { isNotNull } from "@wistia/type-guards";
+import { jsx as jsx209, jsxs as jsxs28 } from "react/jsx-runtime";
+var StyledAnalyticsCard = styled44.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 = styled44(Heading)`
+  grid-area: label;
+`;
+var StyledValue = styled44(Heading)`
+  grid-area: value;
+`;
+var StyledSlot = styled44.div`
+  display: flex;
+  justify-content: flex-end;
+  grid-area: slot;
+  align-self: center;
+`;
+var AnalyticsCard = ({
+  label,
+  value,
+  slot,
+  colorScheme = "inherit",
+  ...props
+}) => /* @__PURE__ */ jsxs28(
+  StyledAnalyticsCard,
+  {
+    $colorScheme: colorScheme,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx209(
+        StyledLabel4,
+        {
+          renderAs: "dt",
+          variant: "heading6",
+          children: label
+        }
+      ),
+      /* @__PURE__ */ jsx209(
+        StyledValue,
+        {
+          renderAs: "dd",
+          variant: "heading3",
+          children: value
+        }
+      ),
+      isNotNull(slot) && /* @__PURE__ */ jsx209(StyledSlot, { children: slot })
+    ]
+  }
+);
+AnalyticsCard.displayName = "AnalyticsCard";
 export {
   ActionButton,
+  AnalyticsCard,
   Avatar,
   Badge,
   Box,
@@ -8745,6 +9011,9 @@ export {
   RadioGroup,
   RadioMenuItem,
   ScreenReaderOnly,
+  Select,
+  SelectOption,
+  SelectOptionGroup,
   Stack,
   SubMenu,
   Tag,