@wistia/ui 0.0.23 → 0.0.25

package/dist/index.mjs

@@ -1,8 +1,8 @@
 
 /*
- * @license @wistia/ui v0.0.23
+ * @license @wistia/ui v0.0.25
  *
- * Copyright (c) 2024-2024, Wistia, Inc. and its affiliates.
+ * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
  * This source code is unlicensed, all rights reserved.
  */
@@ -820,11 +820,11 @@ import { css as css4 } from "styled-components";
 var colorAliasTokens = css4`
   --wui-color-bg-app: var(--wui-app-background);
 
-  /* --- Default --- */
+  /* --- default --- */
   --wui-color-bg-fill: var(--wui-blue-9);
   --wui-color-bg-fill-active: var(--wui-blue-11);
   --wui-color-bg-fill-hover: var(--wui-blue-10);
-  --wui-color-bg-surface: var(--wui-gray-surface);
+  --wui-color-bg-surface: var(--wui-gray-1);
   --wui-color-bg-surface-active: var(--wui-gray-4);
   --wui-color-bg-surface-hover: var(--wui-gray-3);
   --wui-color-bg-surface-secondary: var(--wui-gray-3);
@@ -853,7 +853,7 @@ var colorAliasTokens = css4`
   --wui-color-bg-fill-error: var(--wui-error-9);
   --wui-color-bg-fill-hover-error: var(--wui-error-10);
   --wui-color-bg-surface-active-error: var(--wui-error-4);
-  --wui-color-bg-surface-error: var(--wui-error-surface);
+  --wui-color-bg-surface-error: var(--wui-error-2);
   --wui-color-bg-surface-hover-error: var(--wui-error-3);
   --wui-color-bg-surface-secondary-active-error: var(--wui-error-5);
   --wui-color-bg-surface-secondary-error: var(--wui-error-3);
@@ -880,7 +880,7 @@ var colorAliasTokens = css4`
   --wui-color-bg-fill-info: var(--wui-blue-9);
   --wui-color-bg-surface-active-info: var(--wui-blue-4);
   --wui-color-bg-surface-hover-info: var(--wui-blue-3);
-  --wui-color-bg-surface-info: var(--wui-blue-surface);
+  --wui-color-bg-surface-info: var(--wui-blue-2);
   --wui-color-bg-surface-secondary-active-info: var(--wui-blue-5);
   --wui-color-bg-surface-secondary-hover-info: var(--wui-blue-4);
   --wui-color-bg-surface-secondary-info: var(--wui-blue-3);
@@ -909,7 +909,7 @@ var colorAliasTokens = css4`
   --wui-color-bg-surface-secondary-active-success: var(--wui-success-5);
   --wui-color-bg-surface-secondary-hover-success: var(--wui-success-4);
   --wui-color-bg-surface-secondary-success: var(--wui-success-3);
-  --wui-color-bg-surface-success: var(--wui-success-surface);
+  --wui-color-bg-surface-success: var(--wui-success-2);
   --wui-color-bg-surface-tertiary-success: var(--wui-success-5);
   --wui-color-border-success: var(--wui-success-6);
   --wui-color-border-hover-success: var(--wui-success-8);
@@ -936,14 +936,14 @@ var colorAliasTokens = css4`
   --wui-color-bg-surface-secondary-hover-warning: var(--wui-warning-4);
   --wui-color-bg-surface-secondary-warning: var(--wui-warning-3);
   --wui-color-bg-surface-tertiary-warning: var(--wui-warning-5);
-  --wui-color-bg-surface-warning: var(--wui-warning-surface);
+  --wui-color-bg-surface-warning: var(--wui-warning-2);
   --wui-color-border-warning: var(--wui-warning-6);
   --wui-color-border-hover-warning: var(--wui-warning-8);
   --wui-color-border-active-warning: var(--wui-warning-9);
   --wui-color-border-secondary-warning: var(--wui-warning-8);
   --wui-color-border-secondary-hover-warning: var(--wui-warning-10);
   --wui-color-border-secondary-active-warning: var(--wui-warning-11);
-  --wui-color-icon-on-fill-warning: var(--wui-warning-contrast);
+  --wui-color-icon-on-fill-warning: var(--wui-warning-2);
   --wui-color-icon-warning: var(--wui-warning-11);
   --wui-color-text-high-contrast-warning: var(--wui-warning-12);
   --wui-color-text-link-warning: var(--wui-warning-11);
@@ -959,7 +959,7 @@ var colorAliasTokens = css4`
   --wui-color-bg-fill-blue: var(--wui-blue-9);
   --wui-color-bg-fill-hover-blue: var(--wui-blue-10);
   --wui-color-bg-surface-active-blue: var(--wui-blue-4);
-  --wui-color-bg-surface-blue: var(--wui-blue-surface);
+  --wui-color-bg-surface-blue: var(--wui-blue-2);
   --wui-color-bg-surface-hover-blue: var(--wui-blue-3);
   --wui-color-bg-surface-secondary-active-blue: var(--wui-blue-5);
   --wui-color-bg-surface-secondary-blue: var(--wui-blue-3);
@@ -976,7 +976,7 @@ var colorAliasTokens = css4`
   --wui-color-text-blue: var(--wui-blue-11);
   --wui-color-text-high-contrast-blue: var(--wui-blue-12);
   --wui-color-text-link-blue: var(--wui-blue-9);
-  --wui-color-text-on-fill-blue: var(--wui-blue-contrast);
+  --wui-color-text-on-fill-blue: var(--wui-blue-2);
   --wui-color-text-secondary-blue: var(--wui-blue-5);
   --wui-color-focus-ring-blue: var(--wui-blue-9);
 
@@ -985,7 +985,7 @@ var colorAliasTokens = css4`
   --wui-color-bg-fill-green: var(--wui-green-9);
   --wui-color-bg-fill-hover-green: var(--wui-green-10);
   --wui-color-bg-surface-active-green: var(--wui-green-4);
-  --wui-color-bg-surface-green: var(--wui-green-surface);
+  --wui-color-bg-surface-green: var(--wui-green-2);
   --wui-color-bg-surface-hover-green: var(--wui-green-3);
   --wui-color-bg-surface-secondary-active-green: var(--wui-green-5);
   --wui-color-bg-surface-secondary-green: var(--wui-green-3);
@@ -1012,7 +1012,7 @@ var colorAliasTokens = css4`
   --wui-color-bg-fill-orange: var(--wui-orange-9);
   --wui-color-bg-surface-active-orange: var(--wui-orange-4);
   --wui-color-bg-surface-hover-orange: var(--wui-orange-3);
-  --wui-color-bg-surface-orange: var(--wui-orange-surface);
+  --wui-color-bg-surface-orange: var(--wui-orange-2);
   --wui-color-bg-surface-secondary-active-orange: var(--wui-orange-5);
   --wui-color-bg-surface-secondary-hover-orange: var(--wui-orange-4);
   --wui-color-bg-surface-secondary-orange: var(--wui-orange-3);
@@ -1038,7 +1038,7 @@ var colorAliasTokens = css4`
   --wui-color-bg-fill-pink: var(--wui-pink-9);
   --wui-color-bg-surface-active-pink: var(--wui-pink-4);
   --wui-color-bg-surface-hover-pink: var(--wui-pink-3);
-  --wui-color-bg-surface-pink: var(--wui-pink-surface);
+  --wui-color-bg-surface-pink: var(--wui-pink-2);
   --wui-color-bg-surface-secondary-active-pink: var(--wui-pink-5);
   --wui-color-bg-surface-secondary-hover-pink: var(--wui-pink-4);
   --wui-color-bg-surface-secondary-pink: var(--wui-pink-3);
@@ -1064,7 +1064,7 @@ var colorAliasTokens = css4`
   --wui-color-bg-fill-purple: var(--wui-purple-9);
   --wui-color-bg-surface-active-purple: var(--wui-purple-4);
   --wui-color-bg-surface-hover-purple: var(--wui-purple-3);
-  --wui-color-bg-surface-purple: var(--wui-purple-surface);
+  --wui-color-bg-surface-purple: var(--wui-purple-2);
   --wui-color-bg-surface-secondary-active-purple: var(--wui-purple-5);
   --wui-color-bg-surface-secondary-hover-purple: var(--wui-purple-4);
   --wui-color-bg-surface-secondary-purple: var(--wui-purple-3);
@@ -1094,7 +1094,7 @@ var colorAliasTokens = css4`
   --wui-color-bg-surface-secondary-hover-yellow: var(--wui-yellow-4);
   --wui-color-bg-surface-secondary-yellow: var(--wui-yellow-3);
   --wui-color-bg-surface-tertiary-yellow: var(--wui-yellow-5);
-  --wui-color-bg-surface-yellow: var(--wui-yellow-surface);
+  --wui-color-bg-surface-yellow: var(--wui-yellow-2);
   --wui-color-border-yellow: var(--wui-yellow-6);
   --wui-color-border-hover-yellow: var(--wui-yellow-8);
   --wui-color-border-active-yellow: var(--wui-yellow-9);
@@ -1112,10 +1112,9 @@ var colorAliasTokens = css4`
 
   /* --- Misc --- */
   --wui-color-bg-fill-white: #ffffff;
-  --wui-color-bg-nav: #1f3399;
   --wui-color-focus-color: var(--wui-blue-9);
   --wui-color-notification-pill-color: var(--wui-pink-9);
-  --wui-color-overlay: var(--wui-gray-alpha-9);
+  --wui-color-backdrop: var(--wui-gray-alpha-9);
   --wui-color-segmented-control-checked-background: var(--wui-bg-app);
   --wui-color-text-on-fill-white-selected: var(--wui-blue-9);
   --wui-color-bg-tooltip: #242528;
@@ -1641,7 +1640,51 @@ var defaultScheme = css10`
   --wui-color-icon-on-fill: var(--wui-gray-contrast);
   --wui-color-focus-ring: var(--wui-blue-9);
 `;
+var navScheme = css10`
+  --wui-color-bg-fill-active: var(--wui-blue-5);
+  --wui-color-bg-fill-hover: var(--wui-blue-4);
+  --wui-color-bg-fill: var(--wui-blue-1);
+  --wui-color-bg-surface-active: #15246b;
+  --wui-color-bg-surface-hover: #18297a;
+  --wui-color-bg-surface-secondary-active: #121f5c;
+  --wui-color-bg-surface-secondary-hover: #15246b;
+  --wui-color-bg-surface-secondary: #18297a;
+  --wui-color-bg-surface-tertiary: #3547a3;
+  --wui-color-bg-surface: #1e3399;
+  --wui-color-border: var(--wui-blue-1);
+  --wui-color-border-hover: var(--wui-blue-2);
+  --wui-color-border-active: var(--wui-blue-3);
+  --wui-color-border-secondary: var(--wui-blue-9);
+  --wui-color-border-secondary-hover: var(--wui-blue-10);
+  --wui-color-border-secondary-active: var(--wui-blue-12);
+  --wui-color-icon-on-fill: var(--wui-blue-9);
+  --wui-color-icon: var(--wui-blue-4);
+  --wui-color-text-high-contrast: var(--wui-blue-1);
+  --wui-color-text-link: var(--wui-blue-4);
+  --wui-color-text-on-fill: var(--wui-blue-9);
+  --wui-color-text-secondary: var(--wui-blue-4);
+  --wui-color-text: var(--wui-blue-1);
+  --wui-color-focus-ring: var(--wui-blue-1);
+
+  /* Nav - Disabled */
+  --wui-color-bg-surface-disabled: var(--wui-blue-12);
+  --wui-color-icon-disabled: var(--wui-blue-8);
+  --wui-color-text-disabled: var(--wui-blue-8);
+
+  /* Nav - Selected */
+  --wui-color-bg-surface-selected: var(--wui-blue-3);
+  --wui-color-bg-surface-selected-active: var(--wui-blue-5);
+  --wui-color-bg-surface-selected-hover: var(--wui-blue-4);
+  --wui-color-icon-selected: var(--wui-blue-9);
+  --wui-color-text-selected: var(--wui-blue-9);
+  --wui-color-border-selected: rgba(0, 0, 0, 0);
+  --wui-color-border-hover-selected: rgba(0, 0, 0, 0);
+  --wui-color-border-active-selected: rgba(0, 0, 0, 0);
+`;
 var getColorScheme = (colorScheme) => {
+  if (colorScheme === "nav") {
+    return navScheme;
+  }
   if (colorScheme === "inherit") {
     return null;
   }
@@ -1651,7 +1694,7 @@ var getColorScheme = (colorScheme) => {
   return css10`
     ${colorSchemeSchema.map(({ token, step }) => {
     return `--wui-color-${token}: var(--wui-${colorScheme === "info" ? "blue" : colorScheme}-${step});`;
-  })}
+  }).join("")}
   `;
 };
 
@@ -1801,16 +1844,18 @@ var colorSchemeOptions = [
   "vendor-pardot"
 ];
 var StyledColorSchemeWrapper = styled3.div`
-  ${({ $colorScheme }) => getColorScheme($colorScheme)};
+  ${({ $colorScheme, $nav }) => getColorScheme($nav ? "nav" : $colorScheme)};
 `;
 var ColorSchemeWrapper = ({
-  colorScheme,
+  __nav = false,
+  colorScheme = "inherit",
   children,
   ...otherProps
 }) => /* @__PURE__ */ jsx7(
   StyledColorSchemeWrapper,
   {
     $colorScheme: colorScheme,
+    $nav: __nav,
     ...otherProps,
     children
   }
@@ -6278,8 +6323,8 @@ import { jsx as jsx174 } from "react/jsx-runtime";
 var StyledForm = styled17.form`
   --form-default-width: 690px;
 
-  max-width: ${({ fullWidth }) => fullWidth ? "auto" : "var(--form-default-width)"};
-  align-items: ${({ fullWidth }) => fullWidth ? "stretch" : "flex-start"};
+  max-width: ${({ $fullWidth }) => $fullWidth ? "auto" : "var(--form-default-width)"};
+  align-items: ${({ $fullWidth }) => $fullWidth ? "stretch" : "flex-start"};
 `;
 var FormContext = createContext2({
   values: {},
@@ -6350,8 +6395,8 @@ var FormComponent = ({ children, action, values = {}, validate, fullWidth = fals
         gap: "space-05",
         ...props,
         ref,
+        $fullWidth: fullWidth,
         as: StyledForm,
-        fullWidth,
         id,
         onBlur: handleBlur,
         onReset: handleReset,
@@ -7829,6 +7874,151 @@ var WistiaLogo = ({
   return href !== void 0 ? /* @__PURE__ */ jsx195("a", { href, children: Logo }) : Logo;
 };
 WistiaLogo.displayName = "WistiaLogo";
+
+// src/components/Input/Input.tsx
+import { forwardRef as forwardRef14, cloneElement as cloneElement5 } from "react";
+import styled32, { css as css19 } from "styled-components";
+import { isNil as isNil11, isNotNil as isNotNil13 } from "@wistia/type-guards";
+import { jsx as jsx196, jsxs as jsxs20 } from "react/jsx-runtime";
+var inputStyles = css19`
+  --wui-input-color-bg: var(--wui-color-bg-surface);
+  --wui-input-color-bg-disabled: var(--wui-color-bg-surface-disabled);
+  --wui-input-color-border: var(--wui-color-border);
+  --wui-input-color-border-focus: var(--wui-color-border-active);
+  --wui-input-color-border-error: var(--wui-color-border-error);
+  --wui-input-color-border-disabled: var(--wui-color-border-disabled);
+  --wui-input-border-radius: var(--wui-border-radius-rounded);
+  --wui-input-multiline-border-radius: var(--wui-border-radius-02);
+  --wui-input-vertical-padding: var(--wui-space-02);
+  --wui-input-horizontal-padding: var(--wui-space-03);
+  --wui-input-placeholder: var(--wui-gray-10);
+  --wui-input-color-text-error: var(--wui-color-text-error);
+
+  input,
+  textarea {
+    padding: var(--wui-input-vertical-padding) var(--wui-input-horizontal-padding);
+    background-color: var(--wui-input-color-bg);
+    border: 1px solid var(--wui-input-color-border);
+    border-radius: var(--wui-input-border-radius);
+
+    &::placeholder {
+      color: var(--wui-input-placeholder);
+      opacity: 1; /* Firefox */
+    }
+
+    &:focus {
+      border-color: var(--wui-input-color-border-focus);
+    }
+
+    &[aria-invalid='true'] {
+      border-color: var(--wui-input-color-border-error);
+      color: var(--wui-input-color-text-error);
+    }
+
+    &:disabled {
+      border-color: var(--wui-color-bg-surface-disabled);
+      background-color: var(--wui-color-bg-surface-disabled);
+    }
+  }
+`;
+var StyledInputContainer = styled32.div`
+  display: inline-flex;
+  position: relative;
+  ${inputStyles};
+  width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
+
+  input,
+  textarea {
+    width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
+    ${({ $monospace }) => $monospace && "font-family: var(--wui-typography-family-mono);"}
+  }
+
+  textarea {
+    border-radius: var(--wui-input-multiline-border-radius);
+  }
+
+  .wui-input-left-icon {
+    display: flex;
+    align-items: center;
+    position: absolute;
+    top: 50%;
+    left: var(--wui-input-horizontal-padding);
+    transform: translateY(-50%);
+  }
+
+  :has(.wui-input-left-icon) input,
+  :has(.wui-input-left-icon) textarea {
+    padding-left: 32px;
+  }
+
+  .wui-input-right-icon {
+    display: flex;
+    align-items: center;
+    position: absolute;
+    top: 50%;
+    right: var(--wui-input-horizontal-padding);
+    transform: translateY(-50%);
+  }
+
+  :has(.wui-input-right-icon) input,
+  :has(.wui-input-right-icon) textarea {
+    padding-right: 32px;
+  }
+`;
+var Input = forwardRef14(
+  ({
+    fullWidth = false,
+    monospace = false,
+    type = "text",
+    leftIcon,
+    rightIcon,
+    ...props
+  }, ref) => {
+    let leftIconToDisplay = leftIcon;
+    if (isNil11(leftIcon) && type === "search") {
+      leftIconToDisplay = /* @__PURE__ */ jsx196(Icon, { type: "search" });
+    }
+    if (isNotNil13(leftIconToDisplay)) {
+      leftIconToDisplay = cloneElement5(leftIconToDisplay, {
+        size: "md",
+        className: "wui-input-left-icon"
+      });
+    }
+    let rightIconToDisplay = rightIcon;
+    if (isNotNil13(rightIconToDisplay)) {
+      rightIconToDisplay = cloneElement5(rightIconToDisplay, {
+        size: "md",
+        className: "wui-input-right-icon"
+      });
+    }
+    return /* @__PURE__ */ jsxs20(
+      StyledInputContainer,
+      {
+        $fullWidth: fullWidth,
+        $monospace: monospace,
+        children: [
+          leftIconToDisplay ?? null,
+          type === "multiline" ? /* @__PURE__ */ jsx196(
+            "textarea",
+            {
+              ...props,
+              ref
+            }
+          ) : /* @__PURE__ */ jsx196(
+            "input",
+            {
+              ...props,
+              ref,
+              type
+            }
+          ),
+          rightIconToDisplay ?? null
+        ]
+      }
+    );
+  }
+);
+Input.displayName = "Input";
 export {
   Avatar,
   Badge,
@@ -7848,6 +8038,7 @@ export {
   Heading,
   Icon,
   IconButton,
+  Input,
   Label,
   Link,
   Menu,