@wistia/ui 0.10.3 → 0.10.4-beta.1ec201d3.a525932

package/dist/index.d.mts

@@ -3303,6 +3303,31 @@ declare const List: {
     displayName: string;
 };
 
+type BannerProps = ComponentPropsWithoutRef<'div'> & {
+    bodyText: ReactNode;
+    colorScheme?: ColorSchemeTypes;
+    headingText?: string;
+    icon?: ReactNode;
+    image?: JSX.Element;
+    onClose?: () => void;
+    orientation?: 'auto' | 'horizontal' | 'vertical';
+    primaryAction?: ReactNode;
+    prominence?: 'default' | 'secondary';
+    secondaryAction?: ReactNode;
+};
+/**
+ * Banner - A versatile banner component for highlighting features with customizable layout
+ */
+declare const Banner: {
+    ({ bodyText, colorScheme, headingText, icon, image, onClose, orientation, primaryAction, prominence, secondaryAction, ...props }: BannerProps): JSX.Element;
+    displayName: string;
+};
+
+type ComboboxOptionProps = {
+    value: string;
+    children: ReactNode;
+};
+declare const ComboboxOption: ({ value, children }: ComboboxOptionProps) => react_jsx_runtime.JSX.Element;
 type ComboboxProps = {
     /**
      * If true, the combox will fill the width of its parent
@@ -3325,7 +3350,7 @@ type ComboboxProps = {
      */
     searchValue: string;
     /**
-     * vent that fires when a value is selected
+     * Callback that fires when a value is selected
      */
     onChange: (value: string[]) => void;
     /**
@@ -3335,4 +3360,4 @@ type ComboboxProps = {
 };
 declare const Combobox: ({ placeholder, value, onChange, searchValue, onSearchValueChange, children, fullWidth, }: ComboboxProps) => react_jsx_runtime.JSX.Element;
 
-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, Center, type CenterProps, Checkbox, CheckboxGroup, CheckboxMenuItem, ClickRegion, type ClickRegionProps, Collapsible, CollapsibleContent, type CollapsibleProps, CollapsibleTrigger, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Combobox, type ComboboxProps, DataCard, type DataCardProps, DataCardTrend, type DataCardTrendProps, DataCards, type DataCardsProps, Divider, EditableHeading, type EditableHeadingProps, Ellipsis, type EllipsisProps, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Image, type ImageProps, Input, InputClickToCopy, type InputClickToCopyProps, type InputProps, type KeyboardKeys, KeyboardShortcut, Label, type LabelProps, Link, type LinkProps, List, type ListProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Stack, SubMenu, Switch, type SwitchProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableFoot, type TableFootProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, Text, type TextProps, Thumbnail, ThumbnailBadge, type ThumbnailBadgeProps, ThumbnailCollage, type ThumbnailCollageProps, type ThumbnailProps, Tooltip, type TooltipProps, UIProvider, type UseToastProps, WistiaLogo, colorSchemeOptions, copyToClipboard, dateTime, iconSizeMap, mergeRefs, mq, useActiveMq, useAriaLive, useBoolean, useClipboard, useElementObserver, useFocusTrap, useForceUpdate, useFormState, useIsHovered, useKey, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, usePreviousValue, useToast, useWindowSize };
+export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, Banner, type BannerProps, Box, type BoxProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonProps, Card, type CardProps, Center, type CenterProps, Checkbox, CheckboxGroup, CheckboxMenuItem, ClickRegion, type ClickRegionProps, Collapsible, CollapsibleContent, type CollapsibleProps, CollapsibleTrigger, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Combobox, ComboboxOption, type ComboboxOptionProps, type ComboboxProps, DataCard, type DataCardProps, DataCardTrend, type DataCardTrendProps, DataCards, type DataCardsProps, Divider, EditableHeading, type EditableHeadingProps, Ellipsis, type EllipsisProps, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Image, type ImageProps, Input, InputClickToCopy, type InputClickToCopyProps, type InputProps, type KeyboardKeys, KeyboardShortcut, Label, type LabelProps, Link, type LinkProps, List, type ListProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Stack, SubMenu, Switch, type SwitchProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableFoot, type TableFootProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, Text, type TextProps, Thumbnail, ThumbnailBadge, type ThumbnailBadgeProps, ThumbnailCollage, type ThumbnailCollageProps, type ThumbnailProps, Tooltip, type TooltipProps, UIProvider, type UseToastProps, WistiaLogo, colorSchemeOptions, copyToClipboard, dateTime, iconSizeMap, mergeRefs, mq, useActiveMq, useAriaLive, useBoolean, useClipboard, useElementObserver, useFocusTrap, useForceUpdate, useFormState, useIsHovered, useKey, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, usePreviousValue, useToast, useWindowSize };

package/dist/index.d.ts

@@ -3303,6 +3303,31 @@ declare const List: {
     displayName: string;
 };
 
+type BannerProps = ComponentPropsWithoutRef<'div'> & {
+    bodyText: ReactNode;
+    colorScheme?: ColorSchemeTypes;
+    headingText?: string;
+    icon?: ReactNode;
+    image?: JSX.Element;
+    onClose?: () => void;
+    orientation?: 'auto' | 'horizontal' | 'vertical';
+    primaryAction?: ReactNode;
+    prominence?: 'default' | 'secondary';
+    secondaryAction?: ReactNode;
+};
+/**
+ * Banner - A versatile banner component for highlighting features with customizable layout
+ */
+declare const Banner: {
+    ({ bodyText, colorScheme, headingText, icon, image, onClose, orientation, primaryAction, prominence, secondaryAction, ...props }: BannerProps): JSX.Element;
+    displayName: string;
+};
+
+type ComboboxOptionProps = {
+    value: string;
+    children: ReactNode;
+};
+declare const ComboboxOption: ({ value, children }: ComboboxOptionProps) => react_jsx_runtime.JSX.Element;
 type ComboboxProps = {
     /**
      * If true, the combox will fill the width of its parent
@@ -3325,7 +3350,7 @@ type ComboboxProps = {
      */
     searchValue: string;
     /**
-     * vent that fires when a value is selected
+     * Callback that fires when a value is selected
      */
     onChange: (value: string[]) => void;
     /**
@@ -3335,4 +3360,4 @@ type ComboboxProps = {
 };
 declare const Combobox: ({ placeholder, value, onChange, searchValue, onSearchValueChange, children, fullWidth, }: ComboboxProps) => react_jsx_runtime.JSX.Element;
 
-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, Center, type CenterProps, Checkbox, CheckboxGroup, CheckboxMenuItem, ClickRegion, type ClickRegionProps, Collapsible, CollapsibleContent, type CollapsibleProps, CollapsibleTrigger, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Combobox, type ComboboxProps, DataCard, type DataCardProps, DataCardTrend, type DataCardTrendProps, DataCards, type DataCardsProps, Divider, EditableHeading, type EditableHeadingProps, Ellipsis, type EllipsisProps, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Image, type ImageProps, Input, InputClickToCopy, type InputClickToCopyProps, type InputProps, type KeyboardKeys, KeyboardShortcut, Label, type LabelProps, Link, type LinkProps, List, type ListProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Stack, SubMenu, Switch, type SwitchProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableFoot, type TableFootProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, Text, type TextProps, Thumbnail, ThumbnailBadge, type ThumbnailBadgeProps, ThumbnailCollage, type ThumbnailCollageProps, type ThumbnailProps, Tooltip, type TooltipProps, UIProvider, type UseToastProps, WistiaLogo, colorSchemeOptions, copyToClipboard, dateTime, iconSizeMap, mergeRefs, mq, useActiveMq, useAriaLive, useBoolean, useClipboard, useElementObserver, useFocusTrap, useForceUpdate, useFormState, useIsHovered, useKey, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, usePreviousValue, useToast, useWindowSize };
+export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, Banner, type BannerProps, Box, type BoxProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonProps, Card, type CardProps, Center, type CenterProps, Checkbox, CheckboxGroup, CheckboxMenuItem, ClickRegion, type ClickRegionProps, Collapsible, CollapsibleContent, type CollapsibleProps, CollapsibleTrigger, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Combobox, ComboboxOption, type ComboboxOptionProps, type ComboboxProps, DataCard, type DataCardProps, DataCardTrend, type DataCardTrendProps, DataCards, type DataCardsProps, Divider, EditableHeading, type EditableHeadingProps, Ellipsis, type EllipsisProps, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Image, type ImageProps, Input, InputClickToCopy, type InputClickToCopyProps, type InputProps, type KeyboardKeys, KeyboardShortcut, Label, type LabelProps, Link, type LinkProps, List, type ListProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Stack, SubMenu, Switch, type SwitchProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableFoot, type TableFootProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, Text, type TextProps, Thumbnail, ThumbnailBadge, type ThumbnailBadgeProps, ThumbnailCollage, type ThumbnailCollageProps, type ThumbnailProps, Tooltip, type TooltipProps, UIProvider, type UseToastProps, WistiaLogo, colorSchemeOptions, copyToClipboard, dateTime, iconSizeMap, mergeRefs, mq, useActiveMq, useAriaLive, useBoolean, useClipboard, useElementObserver, useFocusTrap, useForceUpdate, useFormState, useIsHovered, useKey, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, usePreviousValue, useToast, useWindowSize };

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.10.3
+ * @license @wistia/ui v0.10.4-beta.1ec201d3.a525932
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -13598,21 +13598,200 @@ var List = ({
 };
 List.displayName = "List";
 
+// src/components/Banner/Banner.tsx
+import { useEffect as useEffect13, useState as useState18, useMemo as useMemo11 } from "react";
+import styled78, { css as css43 } from "styled-components";
+import { isNil as isNil17, isNotNil as isNotNil39 } from "@wistia/type-guards";
+import { jsx as jsx277, jsxs as jsxs50 } from "react/jsx-runtime";
+var BREAKPOINT_WIDTH = 600;
+var VERTICAL_BREAKPOINT_WIDTH = 360;
+var MIN_IMAGE_WIDTH = 400;
+var StyledBanner = styled78.div`
+  --wui-banner-padding: var(--wui-space-04);
+  --wui-banner-content-height: ${({ $contentHeight }) => $contentHeight}px;
+
+  display: flex;
+  flex-direction: row;
+  background: var(--wui-color-bg-surface-secondary);
+  border-radius: var(--wui-border-radius-03);
+  position: relative;
+  overflow: hidden;
+  align-items: center;
+
+  &[data-wui-banner-content-prominence='secondary'] {
+    --wui-banner-padding: var(--wui-space-05);
+
+    box-shadow: inset 0 0 0 2px var(--wui-color-border);
+  }
+
+  &:has([data-wui-banner-image]) {
+    --wui-banner-padding: var(--wui-space-05);
+  }
+
+  &[data-wui-banner-content-prominence='small'] {
+    --wui-banner-padding: var(--wui-space-04);
+  }
+
+  &[data-wui-banner-orientation='vertical'] {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  ${({ $colorScheme }) => getColorScheme($colorScheme)};
+`;
+var IconWrapper = styled78(Box)`
+  --wui-banner-icon-size: var(--font-size, 24px);
+
+  ${({ $iconPosition }) => $iconPosition === "inline" && css43`
+      display: inline-block;
+      vertical-align: text-bottom;
+      margin-right: calc(var(--wui-banner-icon-size) / 3);
+    `}
+
+  svg {
+    color: var(--wui-color-icon);
+    width: var(--wui-banner-icon-size);
+    height: var(--wui-banner-icon-size);
+  }
+`;
+var Banner = ({
+  bodyText,
+  colorScheme = "inherit",
+  headingText,
+  icon,
+  image,
+  onClose,
+  orientation = "horizontal",
+  primaryAction,
+  prominence = "default",
+  secondaryAction,
+  ...props
+}) => {
+  const [containerRef, { width }] = useElementObserver();
+  const [contentRef, { height: contentHeight }] = useElementObserver();
+  const [isSmallContainer, setIsSmallContainer] = useState18(false);
+  const [isVerticalLayout, setIsVerticalLayout] = useState18(orientation === "vertical");
+  useEffect13(() => {
+    const breakpoint = orientation === "vertical" ? VERTICAL_BREAKPOINT_WIDTH : BREAKPOINT_WIDTH;
+    setIsSmallContainer(width <= breakpoint);
+    if (orientation === "auto") {
+      setIsVerticalLayout(width <= BREAKPOINT_WIDTH);
+    }
+  }, [width, orientation]);
+  const hasImage = isNotNil39(image);
+  const shouldShowImage = hasImage && (isVerticalLayout || width >= MIN_IMAGE_WIDTH);
+  const iconPosition = useMemo11(() => {
+    if (isNil17(icon)) return "none";
+    if (isSmallContainer) return shouldShowImage ? "inline" : "above";
+    return prominence === "secondary" ? "inline" : "above";
+  }, [icon, isSmallContainer, shouldShowImage, prominence]);
+  const contentDirection = useMemo11(
+    () => !shouldShowImage && prominence === "default" && !isSmallContainer && !isVerticalLayout ? "row" : "column",
+    [shouldShowImage, prominence, isSmallContainer, isVerticalLayout]
+  );
+  const headingVariant = isSmallContainer || prominence === "default" ? "heading5" : "heading3";
+  const textVariant = prominence === "default" || isSmallContainer ? "body3" : "body2";
+  const buttonSize = isSmallContainer ? "sm" : "md";
+  const hasActions = isNotNil39(primaryAction) || isNotNil39(secondaryAction);
+  return /* @__PURE__ */ jsxs50(
+    StyledBanner,
+    {
+      ...props,
+      ref: containerRef,
+      $colorScheme: colorScheme,
+      $contentHeight: contentHeight,
+      $width: !isSmallContainer && !isVerticalLayout ? width : void 0,
+      "data-wui-banner-content-prominence": isSmallContainer ? "small" : prominence,
+      "data-wui-banner-orientation": isVerticalLayout ? "vertical" : "horizontal",
+      children: [
+        shouldShowImage ? image : null,
+        /* @__PURE__ */ jsxs50(
+          Box,
+          {
+            ref: contentRef,
+            alignItems: "stretch",
+            direction: contentDirection,
+            flexMode: "grow",
+            gap: "space-04",
+            style: { padding: "var(--wui-banner-padding)" },
+            children: [
+              iconPosition === "above" && /* @__PURE__ */ jsx277(
+                IconWrapper,
+                {
+                  $iconPosition: "above",
+                  alignSelf: "stretch",
+                  direction: "column",
+                  justifyContent: "center",
+                  children: icon
+                }
+              ),
+              /* @__PURE__ */ jsxs50(
+                Box,
+                {
+                  direction: "column",
+                  flexMode: contentDirection === "row" ? "grow" : "initial",
+                  gap: iconPosition === "inline" ? "space-01" : "space-00",
+                  justifyContent: "center",
+                  children: [
+                    isNotNil39(headingText) ? /* @__PURE__ */ jsxs50(Heading, { variant: headingVariant, children: [
+                      iconPosition === "inline" && /* @__PURE__ */ jsx277(IconWrapper, { $iconPosition: "inline", children: icon }),
+                      headingText
+                    ] }) : null,
+                    /* @__PURE__ */ jsx277(Text, { variant: textVariant, children: bodyText })
+                  ]
+                }
+              ),
+              hasActions ? /* @__PURE__ */ jsxs50(
+                ButtonGroup,
+                {
+                  buttonSize,
+                  collapseOnSmallScreens: false,
+                  style: { paddingRight: "var(--wui-space-02)" },
+                  children: [
+                    isNotNil39(primaryAction) && primaryAction,
+                    isNotNil39(secondaryAction) && secondaryAction
+                  ]
+                }
+              ) : null
+            ]
+          }
+        ),
+        isNotNil39(onClose) && /* @__PURE__ */ jsx277(
+          IconButton,
+          {
+            label: "Close",
+            onClick: onClose,
+            size: "sm",
+            style: {
+              position: "absolute",
+              top: "var(--wui-space-01)",
+              right: "var(--wui-space-01)"
+            },
+            variant: "soft",
+            children: /* @__PURE__ */ jsx277(Icon, { type: "close" })
+          }
+        )
+      ]
+    }
+  );
+};
+Banner.displayName = "Banner";
+
 // src/components/Combobox/Combobox.tsx
 import * as Ariakit from "@ariakit/react";
 import {
-  useMemo as useMemo11,
+  useMemo as useMemo12,
   useRef as useRef17,
-  useState as useState18,
+  useState as useState19,
   useTransition,
-  useEffect as useEffect13,
+  useEffect as useEffect14,
   Children as Children6,
   isValidElement as isValidElement2
 } from "react";
 import { matchSorter } from "match-sorter";
-import styled78 from "styled-components";
-import { jsx as jsx277, jsxs as jsxs50 } from "react/jsx-runtime";
-var ComboboxWapper = styled78.div`
+import styled79 from "styled-components";
+import { jsx as jsx278, jsxs as jsxs51 } from "react/jsx-runtime";
+var ComboboxWapper = styled79.div`
   ${inputCss};
   width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
   padding: var(--wui-input-vertical-padding) var(--wui-input-horizontal-padding);
@@ -13661,7 +13840,7 @@ var ComboboxWapper = styled78.div`
     }
   }
 `;
-var ComboboxInput = styled78(Ariakit.Combobox)`
+var ComboboxInput = styled79(Ariakit.Combobox)`
   appearance: none;
   padding: 0;
   width: 100%;
@@ -13676,7 +13855,7 @@ var ComboboxInput = styled78(Ariakit.Combobox)`
     outline-width: 2px;
   }
 `;
-var ComboboxPopover = styled78(Ariakit.Popover)`
+var ComboboxPopover = styled79(Ariakit.Popover)`
   --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);
@@ -13701,7 +13880,7 @@ var ComboboxPopover = styled78(Ariakit.Popover)`
     --item-opacity: 0.5;
   }
 `;
-var ComboboxItem2 = styled78(Ariakit.ComboboxItem)`
+var ComboboxItem2 = styled79(Ariakit.ComboboxItem)`
   ${variantStyleMap2.body3};
   display: flex;
   padding: var(--wui-combobox-option-padding);
@@ -13726,10 +13905,21 @@ var ComboboxItem2 = styled78(Ariakit.ComboboxItem)`
     background-color: transparent;
   }
 `;
-var NoResults = styled78.div`
+var NoResults = styled79.div`
   gap: var(--wui-space-02);
 `;
 var POPOVER_WIDTH_OFFSET = 20;
+var ComboboxOption = ({ value, children }) => {
+  return /* @__PURE__ */ jsx278(
+    ComboboxItem2,
+    {
+      className: "combobox-item",
+      focusOnHover: true,
+      value,
+      children
+    }
+  );
+};
 var extractOptions = (children) => {
   const options = {};
   Children6.forEach(children, (child) => {
@@ -13749,10 +13939,10 @@ var Combobox2 = ({
   fullWidth = true
 }) => {
   const [isPending, startTransition] = useTransition();
-  const [wrapperWidth, setWrapperWidth] = useState18("auto");
+  const [wrapperWidth, setWrapperWidth] = useState19("auto");
   const comboboxWrapperRef = useRef17(null);
-  const options = useMemo11(() => extractOptions(children), [children]);
-  useEffect13(() => {
+  const options = useMemo12(() => extractOptions(children), [children]);
+  useEffect14(() => {
     const comboboxWrapper = comboboxWrapperRef.current;
     if (comboboxWrapper) {
       const updateWidthVariable = () => {
@@ -13770,10 +13960,10 @@ var Combobox2 = ({
   const handleRemoveValue = (valueToRemove) => {
     onChange(value.filter((val) => val !== valueToRemove));
   };
-  const matches = useMemo11(() => {
+  const matches = useMemo12(() => {
     return matchSorter(Object.keys(options), searchValue);
   }, [options, searchValue]);
-  return /* @__PURE__ */ jsxs50(
+  return /* @__PURE__ */ jsxs51(
     Ariakit.ComboboxProvider,
     {
       selectedValue: value,
@@ -13784,13 +13974,13 @@ var Combobox2 = ({
         });
       },
       children: [
-        /* @__PURE__ */ jsxs50(
+        /* @__PURE__ */ jsxs51(
           ComboboxWapper,
           {
             ref: comboboxWrapperRef,
             $fullWidth: fullWidth,
             children: [
-              value.map((selectedValue) => /* @__PURE__ */ jsx277(
+              value.map((selectedValue) => /* @__PURE__ */ jsx278(
                 Tag,
                 {
                   href: "https://example.com",
@@ -13800,11 +13990,11 @@ var Combobox2 = ({
                 },
                 selectedValue
               )),
-              /* @__PURE__ */ jsx277(ComboboxInput, { placeholder })
+              /* @__PURE__ */ jsx278(ComboboxInput, { placeholder })
             ]
           }
         ),
-        /* @__PURE__ */ jsxs50(
+        /* @__PURE__ */ jsxs51(
           ComboboxPopover,
           {
             "aria-busy": isPending,
@@ -13814,14 +14004,14 @@ var Combobox2 = ({
               width: wrapperWidth
             },
             children: [
-              matches.map((match) => /* @__PURE__ */ jsxs50(
+              matches.map((match) => /* @__PURE__ */ jsxs51(
                 ComboboxItem2,
                 {
                   className: "combobox-item",
                   focusOnHover: true,
                   value: match,
                   children: [
-                    /* @__PURE__ */ jsx277(
+                    /* @__PURE__ */ jsx278(
                       Icon,
                       {
                         size: "sm",
@@ -13836,7 +14026,7 @@ var Combobox2 = ({
                 },
                 match
               )),
-              !matches.length && /* @__PURE__ */ jsx277(NoResults, { children: "No results found" })
+              !matches.length && /* @__PURE__ */ jsx278(NoResults, { children: "No results found" })
             ]
           }
         )
@@ -13848,6 +14038,7 @@ export {
   ActionButton,
   Avatar,
   Badge,
+  Banner,
   Box,
   Breadcrumb,
   Breadcrumbs,
@@ -13864,6 +14055,7 @@ export {
   CollapsibleTrigger,
   ColorSchemeWrapper,
   Combobox2 as Combobox,
+  ComboboxOption,
   DataCard,
   DataCardTrend,
   DataCards,