@wistia/ui 0.4.8-beta.25eae1b2.b10e708 → 0.4.8-beta.39749e5f.7a8d5fd

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.4.8-beta.25eae1b2.b10e708
+ * @license @wistia/ui v0.4.8-beta.39749e5f.7a8d5fd
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -77,9 +77,6 @@ __export(index_exports, {
   ScreenReaderOnly: () => ScreenReaderOnly,
   SegmentedControl: () => SegmentedControl,
   SegmentedControlItem: () => SegmentedControlItem,
-  Select: () => Select,
-  SelectOption: () => SelectOption,
-  SelectOptionGroup: () => SelectOptionGroup,
   Stack: () => Stack,
   SubMenu: () => SubMenu,
   Tag: () => Tag,
@@ -5473,25 +5470,12 @@ var generateHref = (href, type, disabled) => {
 var isButton = (props) => (0, import_type_guards10.isUndefined)(props.href);
 var isLink = (props) => (0, import_type_guards10.isNotUndefined)(props.href);
 var StyledLink = import_styled_components17.default.a`
-  --link-icon-size: 14px;
-
   ${({ href }) => (0, import_type_guards10.isNil)(href) && buttonResetCss};
   ${({ $colorScheme }) => getColorScheme($colorScheme)}
   cursor: pointer;
   font-family: var(--wui-typography-family-default);
   color: var(--wui-color-text-link);
   text-decoration: ${({ $underline }) => $underline ? "underline" : "none"};
-  display: inline-flex;
-  align-items: baseline;
-  gap: var(--wui-space-01);
-
-  /* This ensure that the icon is the corect color when the style is solid or the button is disabled */
-  && {
-    svg {
-      width: var(--link-icon-size);
-      height: var(--link-icon-size);
-    }
-  }
 `;
 var Link = (0, import_react11.forwardRef)(
   ({
@@ -5501,8 +5485,6 @@ var Link = (0, import_react11.forwardRef)(
     disabled = false,
     colorScheme = "inherit",
     underline = false,
-    leftIcon,
-    rightIcon,
     ...props
   }, ref) => {
     const inRouterContext = (0, import_react_router_dom.useInRouterContext)();
@@ -5561,17 +5543,13 @@ var Link = (0, import_react11.forwardRef)(
           to: to ?? "",
           children
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime161.jsxs)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
         StyledLink,
         {
           as: "a",
           ...combinedProps,
           href: to,
-          children: [
-            leftIcon ?? null,
-            children,
-            rightIcon ?? null
-          ]
+          children
         }
       );
     }
@@ -7845,8 +7823,8 @@ var StyledSubTrigger = (0, import_styled_components43.default)(import_react_drop
 `;
 var SubMenuTrigger = (props) => {
   const { isSmAndUp } = useMq();
-  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)(
+  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)(
     MenuItemButton,
     {
       ...props,
@@ -8475,7 +8453,6 @@ var StyledSegmentedControl = (0, import_styled_components51.default)(import_reac
 var SegmentedControl = (0, import_react40.forwardRef)(
   ({
     children,
-    disabled = false,
     fullWidth = false,
     selectedValue,
     onSelectedValueChange,
@@ -8489,7 +8466,6 @@ var SegmentedControl = (0, import_react40.forwardRef)(
       {
         ref,
         $fullWidth: fullWidth,
-        disabled,
         loop: true,
         onValueChange: onSelectedValueChange,
         rovingFocus: true,
@@ -8504,7 +8480,6 @@ var SegmentedControl = (0, import_react40.forwardRef)(
 SegmentedControl.displayName = "SegmentedControl";
 
 // src/components/SegmentedControl/SegmentedControlItem.tsx
-var import_react41 = require("react");
 var import_styled_components52 = __toESM(require("styled-components"));
 var import_react_toggle_group2 = require("@radix-ui/react-toggle-group");
 var import_type_guards31 = require("@wistia/type-guards");
@@ -8552,45 +8527,35 @@ var StyledSegmentedControlItem = (0, import_styled_components52.default)(import_
       fill: var(--wui-color-focus-ring);
     }
   }
-
-  &[data-disabled] {
-    cursor: not-allowed;
-
-    &:hover {
-      background-color: inherit;
-    }
-  }
 `;
-var SegmentedControlItem = (0, import_react41.forwardRef)(
-  ({ disabled, icon, label, "aria-label": ariaLabel, value }, ref) => {
-    const handleClick = (event) => {
-      const target = event.target;
-      const { state } = target.dataset;
-      if (state === "on") {
-        event.preventDefault();
-      }
-    };
-    return /* @__PURE__ */ (0, import_jsx_runtime204.jsxs)(
-      StyledSegmentedControlItem,
-      {
-        ref,
-        $hasLabel: (0, import_type_guards31.isNotNil)(label),
-        "aria-label": (0, import_type_guards31.isNotNil)(label) ? void 0 : ariaLabel,
-        disabled,
-        onClick: handleClick,
-        value,
-        children: [
-          icon,
-          label
-        ]
-      }
-    );
-  }
-);
-SegmentedControlItem.displayName = "SegmentedControlItem";
+var SegmentedControlItem = ({
+  icon,
+  label,
+  value
+}) => {
+  const handleClick = (event) => {
+    const target = event.target;
+    const { state } = target.dataset;
+    if (state === "on") {
+      event.preventDefault();
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime204.jsxs)(
+    StyledSegmentedControlItem,
+    {
+      $hasLabel: (0, import_type_guards31.isNotNil)(label),
+      onClick: handleClick,
+      value,
+      children: [
+        icon,
+        label
+      ]
+    }
+  );
+};
 
 // src/components/Tag/Tag.tsx
-var import_react42 = require("react");
+var import_react41 = require("react");
 var import_styled_components53 = __toESM(require("styled-components"));
 var import_type_guards32 = require("@wistia/type-guards");
 var import_jsx_runtime205 = require("react/jsx-runtime");
@@ -8696,7 +8661,7 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
     )
   ] });
 };
-var Tag = (0, import_react42.forwardRef)(
+var Tag = (0, import_react41.forwardRef)(
   ({ onClickRemove, colorScheme = "inherit", href, label, onClickRemoveLabel, ...otherProps }, ref) => {
     const labelProps = (0, import_type_guards32.isNotNil)(href) && (0, import_type_guards32.isNonEmptyString)(href) ? { href, as: "a" } : { as: "span" };
     return /* @__PURE__ */ (0, import_jsx_runtime205.jsxs)(
@@ -8939,190 +8904,6 @@ var WistiaLogo = ({
   return href !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime207.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_react43 = require("react");
-var import_styled_components56 = __toESM(require("styled-components"));
-var import_jsx_runtime208 = require("react/jsx-runtime");
-var StyledTrigger = (0, import_styled_components56.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_components56.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_react43.forwardRef)(
-  ({
-    colorScheme = "inherit",
-    children,
-    onChange = () => null,
-    placeholder = "Select...",
-    fullWidth = false,
-    ...props
-  }, forwardedRef) => {
-    const responsiveFullWidth = useResponsiveProp(fullWidth);
-    return /* @__PURE__ */ (0, import_jsx_runtime208.jsxs)(
-      import_react_select.Root,
-      {
-        ...props,
-        onValueChange: onChange,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime208.jsxs)(
-            StyledTrigger,
-            {
-              ref: forwardedRef,
-              $colorScheme: colorScheme,
-              $fullWidth: responsiveFullWidth,
-              ...props,
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(import_react_select.Value, { placeholder }),
-                /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(
-                  Icon,
-                  {
-                    size: "md",
-                    type: "caret-down"
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(import_react_select.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime208.jsxs)(StyledContent2, { position: "popper", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(import_react_select.ScrollUpButton, { children: /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(Icon, { type: "caret-up" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(import_react_select.Viewport, { children }),
-            /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(import_react_select.ScrollDownButton, { children: /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(Icon, { type: "caret-down" }) })
-          ] }) })
-        ]
-      }
-    );
-  }
-);
-Select.displayName = "Select";
-
-// src/components/Select/SelectOption.tsx
-var import_react_select2 = require("@radix-ui/react-select");
-var import_react44 = require("react");
-var import_styled_components57 = __toESM(require("styled-components"));
-var import_jsx_runtime209 = require("react/jsx-runtime");
-var StyledItem = (0, import_styled_components57.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_components57.default.span`
-  width: 12px;
-`;
-var SelectOption = (0, import_react44.forwardRef)(
-  ({ children, ...props }, forwardedRef) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime209.jsxs)(
-      StyledItem,
-      {
-        ...props,
-        ref: forwardedRef,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(StyledIconContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(import_react_select2.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(
-            Icon,
-            {
-              size: "sm",
-              type: "checkmark"
-            }
-          ) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime209.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_components58 = __toESM(require("styled-components"));
-var import_jsx_runtime210 = require("react/jsx-runtime");
-var StyledLabel3 = (0, import_styled_components58.default)(import_react_select3.Label)`
-  padding: var(--wui-select-option-padding);
-`;
-var SelectOptionGroup = ({ children, label, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime210.jsxs)(import_react_select3.Group, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(StyledLabel3, { children: /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(
-      Text,
-      {
-        prominence: "secondary",
-        variant: "body3",
-        children: label
-      }
-    ) }),
-    children
-  ] });
-};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ActionButton,
@@ -9163,9 +8944,6 @@ var SelectOptionGroup = ({ children, label, ...props }) => {
   ScreenReaderOnly,
   SegmentedControl,
   SegmentedControlItem,
-  Select,
-  SelectOption,
-  SelectOptionGroup,
   Stack,
   SubMenu,
   Tag,