@wistia/ui 0.10.4-beta.1ec201d3.a525932 → 0.10.4-beta.36362cd1.2b96fcb

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.10.4-beta.1ec201d3.a525932
+ * @license @wistia/ui v0.10.4-beta.36362cd1.2b96fcb
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -42,7 +42,6 @@ __export(index_exports, {
   ActionButton: () => ActionButton,
   Avatar: () => Avatar,
   Badge: () => Badge,
-  Banner: () => Banner,
   Box: () => Box,
   Breadcrumb: () => Breadcrumb,
   Breadcrumbs: () => Breadcrumbs,
@@ -7829,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;
@@ -7836,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,
@@ -7855,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 })
@@ -9905,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: {},
@@ -9986,6 +9990,7 @@ var FormComponent = ({
         ...props,
         ref,
         $fullWidth: fullWidth,
+        alignItems: fullWidth ? "stretch" : "flex-start",
         as: StyledForm,
         gap: "space-05",
         id,
@@ -13703,192 +13708,13 @@ var List = ({
 };
 List.displayName = "List";
 
-// src/components/Banner/Banner.tsx
-var import_react73 = require("react");
-var import_styled_components96 = __toESM(require("styled-components"));
-var import_type_guards61 = require("@wistia/type-guards");
-var import_jsx_runtime279 = require("react/jsx-runtime");
-var BREAKPOINT_WIDTH = 600;
-var VERTICAL_BREAKPOINT_WIDTH = 360;
-var MIN_IMAGE_WIDTH = 400;
-var StyledBanner = import_styled_components96.default.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 = (0, import_styled_components96.default)(Box)`
-  --wui-banner-icon-size: var(--font-size, 24px);
-
-  ${({ $iconPosition }) => $iconPosition === "inline" && import_styled_components96.css`
-      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] = (0, import_react73.useState)(false);
-  const [isVerticalLayout, setIsVerticalLayout] = (0, import_react73.useState)(orientation === "vertical");
-  (0, import_react73.useEffect)(() => {
-    const breakpoint = orientation === "vertical" ? VERTICAL_BREAKPOINT_WIDTH : BREAKPOINT_WIDTH;
-    setIsSmallContainer(width <= breakpoint);
-    if (orientation === "auto") {
-      setIsVerticalLayout(width <= BREAKPOINT_WIDTH);
-    }
-  }, [width, orientation]);
-  const hasImage = (0, import_type_guards61.isNotNil)(image);
-  const shouldShowImage = hasImage && (isVerticalLayout || width >= MIN_IMAGE_WIDTH);
-  const iconPosition = (0, import_react73.useMemo)(() => {
-    if ((0, import_type_guards61.isNil)(icon)) return "none";
-    if (isSmallContainer) return shouldShowImage ? "inline" : "above";
-    return prominence === "secondary" ? "inline" : "above";
-  }, [icon, isSmallContainer, shouldShowImage, prominence]);
-  const contentDirection = (0, import_react73.useMemo)(
-    () => !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 = (0, import_type_guards61.isNotNil)(primaryAction) || (0, import_type_guards61.isNotNil)(secondaryAction);
-  return /* @__PURE__ */ (0, import_jsx_runtime279.jsxs)(
-    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__ */ (0, import_jsx_runtime279.jsxs)(
-          Box,
-          {
-            ref: contentRef,
-            alignItems: "stretch",
-            direction: contentDirection,
-            flexMode: "grow",
-            gap: "space-04",
-            style: { padding: "var(--wui-banner-padding)" },
-            children: [
-              iconPosition === "above" && /* @__PURE__ */ (0, import_jsx_runtime279.jsx)(
-                IconWrapper,
-                {
-                  $iconPosition: "above",
-                  alignSelf: "stretch",
-                  direction: "column",
-                  justifyContent: "center",
-                  children: icon
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime279.jsxs)(
-                Box,
-                {
-                  direction: "column",
-                  flexMode: contentDirection === "row" ? "grow" : "initial",
-                  gap: iconPosition === "inline" ? "space-01" : "space-00",
-                  justifyContent: "center",
-                  children: [
-                    (0, import_type_guards61.isNotNil)(headingText) ? /* @__PURE__ */ (0, import_jsx_runtime279.jsxs)(Heading, { variant: headingVariant, children: [
-                      iconPosition === "inline" && /* @__PURE__ */ (0, import_jsx_runtime279.jsx)(IconWrapper, { $iconPosition: "inline", children: icon }),
-                      headingText
-                    ] }) : null,
-                    /* @__PURE__ */ (0, import_jsx_runtime279.jsx)(Text, { variant: textVariant, children: bodyText })
-                  ]
-                }
-              ),
-              hasActions ? /* @__PURE__ */ (0, import_jsx_runtime279.jsxs)(
-                ButtonGroup,
-                {
-                  buttonSize,
-                  collapseOnSmallScreens: false,
-                  style: { paddingRight: "var(--wui-space-02)" },
-                  children: [
-                    (0, import_type_guards61.isNotNil)(primaryAction) && primaryAction,
-                    (0, import_type_guards61.isNotNil)(secondaryAction) && secondaryAction
-                  ]
-                }
-              ) : null
-            ]
-          }
-        ),
-        (0, import_type_guards61.isNotNil)(onClose) && /* @__PURE__ */ (0, import_jsx_runtime279.jsx)(
-          IconButton,
-          {
-            label: "Close",
-            onClick: onClose,
-            size: "sm",
-            style: {
-              position: "absolute",
-              top: "var(--wui-space-01)",
-              right: "var(--wui-space-01)"
-            },
-            variant: "soft",
-            children: /* @__PURE__ */ (0, import_jsx_runtime279.jsx)(Icon, { type: "close" })
-          }
-        )
-      ]
-    }
-  );
-};
-Banner.displayName = "Banner";
-
 // src/components/Combobox/Combobox.tsx
 var Ariakit = __toESM(require("@ariakit/react"));
-var import_react74 = require("react");
+var import_react73 = require("react");
 var import_match_sorter = require("match-sorter");
-var import_styled_components97 = __toESM(require("styled-components"));
-var import_jsx_runtime280 = require("react/jsx-runtime");
-var ComboboxWapper = import_styled_components97.default.div`
+var import_styled_components96 = __toESM(require("styled-components"));
+var import_jsx_runtime279 = require("react/jsx-runtime");
+var ComboboxWapper = import_styled_components96.default.div`
   ${inputCss};
   width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
   padding: var(--wui-input-vertical-padding) var(--wui-input-horizontal-padding);
@@ -13937,7 +13763,7 @@ var ComboboxWapper = import_styled_components97.default.div`
     }
   }
 `;
-var ComboboxInput = (0, import_styled_components97.default)(Ariakit.Combobox)`
+var ComboboxInput = (0, import_styled_components96.default)(Ariakit.Combobox)`
   appearance: none;
   padding: 0;
   width: 100%;
@@ -13952,7 +13778,7 @@ var ComboboxInput = (0, import_styled_components97.default)(Ariakit.Combobox)`
     outline-width: 2px;
   }
 `;
-var ComboboxPopover = (0, import_styled_components97.default)(Ariakit.Popover)`
+var ComboboxPopover = (0, import_styled_components96.default)(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);
@@ -13977,7 +13803,7 @@ var ComboboxPopover = (0, import_styled_components97.default)(Ariakit.Popover)`
     --item-opacity: 0.5;
   }
 `;
-var ComboboxItem2 = (0, import_styled_components97.default)(Ariakit.ComboboxItem)`
+var ComboboxItem2 = (0, import_styled_components96.default)(Ariakit.ComboboxItem)`
   ${variantStyleMap2.body3};
   display: flex;
   padding: var(--wui-combobox-option-padding);
@@ -14002,12 +13828,12 @@ var ComboboxItem2 = (0, import_styled_components97.default)(Ariakit.ComboboxItem
     background-color: transparent;
   }
 `;
-var NoResults = import_styled_components97.default.div`
+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_runtime280.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime279.jsx)(
     ComboboxItem2,
     {
       className: "combobox-item",
@@ -14019,8 +13845,8 @@ var ComboboxOption = ({ value, children }) => {
 };
 var extractOptions = (children) => {
   const options = {};
-  import_react74.Children.forEach(children, (child) => {
-    if ((0, import_react74.isValidElement)(child) && "value" in child.props && "children" in child.props) {
+  import_react73.Children.forEach(children, (child) => {
+    if ((0, import_react73.isValidElement)(child) && "value" in child.props && "children" in child.props) {
       options[child.props.value] = child.props.children ?? child.props.value;
     }
   });
@@ -14035,11 +13861,11 @@ var Combobox2 = ({
   children,
   fullWidth = true
 }) => {
-  const [isPending, startTransition] = (0, import_react74.useTransition)();
-  const [wrapperWidth, setWrapperWidth] = (0, import_react74.useState)("auto");
-  const comboboxWrapperRef = (0, import_react74.useRef)(null);
-  const options = (0, import_react74.useMemo)(() => extractOptions(children), [children]);
-  (0, import_react74.useEffect)(() => {
+  const [isPending, startTransition] = (0, import_react73.useTransition)();
+  const [wrapperWidth, setWrapperWidth] = (0, import_react73.useState)("auto");
+  const comboboxWrapperRef = (0, import_react73.useRef)(null);
+  const options = (0, import_react73.useMemo)(() => extractOptions(children), [children]);
+  (0, import_react73.useEffect)(() => {
     const comboboxWrapper = comboboxWrapperRef.current;
     if (comboboxWrapper) {
       const updateWidthVariable = () => {
@@ -14057,10 +13883,10 @@ var Combobox2 = ({
   const handleRemoveValue = (valueToRemove) => {
     onChange(value.filter((val) => val !== valueToRemove));
   };
-  const matches = (0, import_react74.useMemo)(() => {
+  const matches = (0, import_react73.useMemo)(() => {
     return (0, import_match_sorter.matchSorter)(Object.keys(options), searchValue);
   }, [options, searchValue]);
-  return /* @__PURE__ */ (0, import_jsx_runtime280.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime279.jsxs)(
     Ariakit.ComboboxProvider,
     {
       selectedValue: value,
@@ -14071,13 +13897,13 @@ var Combobox2 = ({
         });
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime280.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime279.jsxs)(
           ComboboxWapper,
           {
             ref: comboboxWrapperRef,
             $fullWidth: fullWidth,
             children: [
-              value.map((selectedValue) => /* @__PURE__ */ (0, import_jsx_runtime280.jsx)(
+              value.map((selectedValue) => /* @__PURE__ */ (0, import_jsx_runtime279.jsx)(
                 Tag,
                 {
                   href: "https://example.com",
@@ -14087,11 +13913,11 @@ var Combobox2 = ({
                 },
                 selectedValue
               )),
-              /* @__PURE__ */ (0, import_jsx_runtime280.jsx)(ComboboxInput, { placeholder })
+              /* @__PURE__ */ (0, import_jsx_runtime279.jsx)(ComboboxInput, { placeholder })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime280.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime279.jsxs)(
           ComboboxPopover,
           {
             "aria-busy": isPending,
@@ -14101,14 +13927,14 @@ var Combobox2 = ({
               width: wrapperWidth
             },
             children: [
-              matches.map((match) => /* @__PURE__ */ (0, import_jsx_runtime280.jsxs)(
+              matches.map((match) => /* @__PURE__ */ (0, import_jsx_runtime279.jsxs)(
                 ComboboxItem2,
                 {
                   className: "combobox-item",
                   focusOnHover: true,
                   value: match,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime280.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime279.jsx)(
                       Icon,
                       {
                         size: "sm",
@@ -14123,7 +13949,7 @@ var Combobox2 = ({
                 },
                 match
               )),
-              !matches.length && /* @__PURE__ */ (0, import_jsx_runtime280.jsx)(NoResults, { children: "No results found" })
+              !matches.length && /* @__PURE__ */ (0, import_jsx_runtime279.jsx)(NoResults, { children: "No results found" })
             ]
           }
         )
@@ -14136,7 +13962,6 @@ var Combobox2 = ({
   ActionButton,
   Avatar,
   Badge,
-  Banner,
   Box,
   Breadcrumb,
   Breadcrumbs,