@wistia/ui 0.10.3 → 0.10.4-beta.36362cd1.2b96fcb

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.10.3
+ * @license @wistia/ui v0.10.4-beta.36362cd1.2b96fcb
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -58,6 +58,7 @@ __export(index_exports, {
   CollapsibleTrigger: () => CollapsibleTrigger,
   ColorSchemeWrapper: () => ColorSchemeWrapper,
   Combobox: () => Combobox2,
+  ComboboxOption: () => ComboboxOption,
   DataCard: () => DataCard,
   DataCardTrend: () => DataCardTrend,
   DataCards: () => DataCards,
@@ -7827,6 +7828,7 @@ var StyledBadge = import_styled_components26.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   align-items: center;
   background-color: var(--wui-color-bg-surface-secondary);
+  box-shadow: ${({ $variant }) => $variant === "outline" ? "inset 0 0 0 1px var(--wui-color-border)" : "none"};
   border-radius: var(--wui-border-radius-rounded);
   color: var(--wui-color-text);
   display: inline-flex;
@@ -7834,17 +7836,21 @@ var StyledBadge = import_styled_components26.default.div`
   font-weight: var(--wui-typography-label-4-weight);
   gap: var(--wui-space-01);
   justify-content: center;
+  line-height: var(--wui-typography-label-3-line-height);
   padding: var(--wui-space-01) var(--wui-space-02);
   width: fit-content;
 
-  /* Icon component size */
-  svg {
-    height: 12px;
-    width: 12px;
+  /* Icon component size and color */
+  && {
+    svg {
+      color: var(--wui-color-icon);
+      height: 12px;
+      width: 12px;
+    }
   }
 `;
 var Badge = (0, import_react26.forwardRef)(
-  ({ colorScheme = "inherit", label, icon, ...props }, ref) => {
+  ({ colorScheme = "inherit", label, icon, variant = "default", ...props }, ref) => {
     const hasIcon = (0, import_type_guards19.isNotNil)(icon);
     return /* @__PURE__ */ (0, import_jsx_runtime200.jsxs)(
       StyledBadge,
@@ -7853,6 +7859,7 @@ var Badge = (0, import_react26.forwardRef)(
         ...props,
         $colorScheme: colorScheme,
         $hasIcon: hasIcon,
+        $variant: variant,
         children: [
           hasIcon ? icon : null,
           /* @__PURE__ */ (0, import_jsx_runtime200.jsx)("span", { children: label })
@@ -9903,7 +9910,6 @@ var StyledForm = import_styled_components51.default.form`
   --form-default-width: 690px;
 
   max-width: ${({ $fullWidth }) => $fullWidth ? "auto" : "var(--form-default-width)"};
-  align-items: ${({ $fullWidth }) => $fullWidth ? "stretch" : "flex-start"};
 `;
 var FormContext = (0, import_react41.createContext)({
   values: {},
@@ -9984,6 +9990,7 @@ var FormComponent = ({
         ...props,
         ref,
         $fullWidth: fullWidth,
+        alignItems: fullWidth ? "stretch" : "flex-start",
         as: StyledForm,
         gap: "space-05",
         id,
@@ -13825,6 +13832,17 @@ var NoResults = import_styled_components96.default.div`
   gap: var(--wui-space-02);
 `;
 var POPOVER_WIDTH_OFFSET = 20;
+var ComboboxOption = ({ value, children }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime279.jsx)(
+    ComboboxItem2,
+    {
+      className: "combobox-item",
+      focusOnHover: true,
+      value,
+      children
+    }
+  );
+};
 var extractOptions = (children) => {
   const options = {};
   import_react73.Children.forEach(children, (child) => {
@@ -13960,6 +13978,7 @@ var Combobox2 = ({
   CollapsibleTrigger,
   ColorSchemeWrapper,
   Combobox,
+  ComboboxOption,
   DataCard,
   DataCardTrend,
   DataCards,