@wistia/ui 0.4.8-beta.d9bacfdc.e51055f → 0.4.8

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.4.8-beta.d9bacfdc.e51055f
+ * @license @wistia/ui v0.4.8
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -75,9 +75,6 @@ __export(index_exports, {
   RadioGroup: () => RadioGroup,
   RadioMenuItem: () => RadioMenuItem,
   ScreenReaderOnly: () => ScreenReaderOnly,
-  Select: () => Select,
-  SelectOption: () => SelectOption,
-  SelectOptionGroup: () => SelectOptionGroup,
   Stack: () => Stack,
   SubMenu: () => SubMenu,
   Tag: () => Tag,
@@ -5471,25 +5468,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)(
   ({
@@ -5499,8 +5483,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)();
@@ -5559,17 +5541,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
         }
       );
     }
@@ -7843,8 +7821,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,
@@ -8806,190 +8784,6 @@ var WistiaLogo = ({
   return href !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime205.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_react41 = require("react");
-var import_styled_components54 = __toESM(require("styled-components"));
-var import_jsx_runtime206 = require("react/jsx-runtime");
-var StyledTrigger = (0, import_styled_components54.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_components54.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_react41.forwardRef)(
-  ({
-    colorScheme = "inherit",
-    children,
-    onChange = () => null,
-    placeholder = "Select...",
-    fullWidth = false,
-    ...props
-  }, forwardedRef) => {
-    const responsiveFullWidth = useResponsiveProp(fullWidth);
-    return /* @__PURE__ */ (0, import_jsx_runtime206.jsxs)(
-      import_react_select.Root,
-      {
-        ...props,
-        onValueChange: onChange,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime206.jsxs)(
-            StyledTrigger,
-            {
-              ref: forwardedRef,
-              $colorScheme: colorScheme,
-              $fullWidth: responsiveFullWidth,
-              ...props,
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(import_react_select.Value, { placeholder }),
-                /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(
-                  Icon,
-                  {
-                    size: "md",
-                    type: "caret-down"
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(import_react_select.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime206.jsxs)(StyledContent2, { position: "popper", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(import_react_select.ScrollUpButton, { children: /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(Icon, { type: "caret-up" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(import_react_select.Viewport, { children }),
-            /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(import_react_select.ScrollDownButton, { children: /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(Icon, { type: "caret-down" }) })
-          ] }) })
-        ]
-      }
-    );
-  }
-);
-Select.displayName = "Select";
-
-// src/components/Select/SelectOption.tsx
-var import_react_select2 = require("@radix-ui/react-select");
-var import_react42 = require("react");
-var import_styled_components55 = __toESM(require("styled-components"));
-var import_jsx_runtime207 = require("react/jsx-runtime");
-var StyledItem = (0, import_styled_components55.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_components55.default.span`
-  width: 12px;
-`;
-var SelectOption = (0, import_react42.forwardRef)(
-  ({ children, ...props }, forwardedRef) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime207.jsxs)(
-      StyledItem,
-      {
-        ...props,
-        ref: forwardedRef,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(StyledIconContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(import_react_select2.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(
-            Icon,
-            {
-              size: "sm",
-              type: "checkmark"
-            }
-          ) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime207.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_components56 = __toESM(require("styled-components"));
-var import_jsx_runtime208 = require("react/jsx-runtime");
-var StyledLabel3 = (0, import_styled_components56.default)(import_react_select3.Label)`
-  padding: var(--wui-select-option-padding);
-`;
-var SelectOptionGroup = ({ children, label, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime208.jsxs)(import_react_select3.Group, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(StyledLabel3, { children: /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(
-      Text,
-      {
-        prominence: "secondary",
-        variant: "body3",
-        children: label
-      }
-    ) }),
-    children
-  ] });
-};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ActionButton,
@@ -9028,9 +8822,6 @@ var SelectOptionGroup = ({ children, label, ...props }) => {
   RadioGroup,
   RadioMenuItem,
   ScreenReaderOnly,
-  Select,
-  SelectOption,
-  SelectOptionGroup,
   Stack,
   SubMenu,
   Tag,