@wistia/ui 0.0.23 → 0.0.25

package/dist/index.cjs

@@ -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.
  */
@@ -37,8 +37,8 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
-var src_exports = {};
-__export(src_exports, {
+var index_exports = {};
+__export(index_exports, {
   Avatar: () => Avatar,
   Badge: () => Badge,
   Box: () => Box,
@@ -57,6 +57,7 @@ __export(src_exports, {
   Heading: () => Heading,
   Icon: () => Icon,
   IconButton: () => IconButton,
+  Input: () => Input,
   Label: () => Label,
   Link: () => Link,
   Menu: () => Menu,
@@ -89,7 +90,7 @@ __export(src_exports, {
   useToast: () => useToast,
   useWindowSize: () => useWindowSize
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
 
 // src/providers/UIProvider/UIProvider.tsx
 var import_react_tooltip = require("@radix-ui/react-tooltip");
@@ -903,11 +904,11 @@ var import_styled_components4 = require("styled-components");
 var colorAliasTokens = import_styled_components4.css`
   --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);
@@ -936,7 +937,7 @@ var colorAliasTokens = import_styled_components4.css`
   --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);
@@ -963,7 +964,7 @@ var colorAliasTokens = import_styled_components4.css`
   --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);
@@ -992,7 +993,7 @@ var colorAliasTokens = import_styled_components4.css`
   --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);
@@ -1019,14 +1020,14 @@ var colorAliasTokens = import_styled_components4.css`
   --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);
@@ -1042,7 +1043,7 @@ var colorAliasTokens = import_styled_components4.css`
   --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);
@@ -1059,7 +1060,7 @@ var colorAliasTokens = import_styled_components4.css`
   --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);
 
@@ -1068,7 +1069,7 @@ var colorAliasTokens = import_styled_components4.css`
   --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);
@@ -1095,7 +1096,7 @@ var colorAliasTokens = import_styled_components4.css`
   --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);
@@ -1121,7 +1122,7 @@ var colorAliasTokens = import_styled_components4.css`
   --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);
@@ -1147,7 +1148,7 @@ var colorAliasTokens = import_styled_components4.css`
   --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);
@@ -1177,7 +1178,7 @@ var colorAliasTokens = import_styled_components4.css`
   --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);
@@ -1195,10 +1196,9 @@ var colorAliasTokens = import_styled_components4.css`
 
   /* --- 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;
@@ -1724,7 +1724,51 @@ var defaultScheme = import_styled_components11.css`
   --wui-color-icon-on-fill: var(--wui-gray-contrast);
   --wui-color-focus-ring: var(--wui-blue-9);
 `;
+var navScheme = import_styled_components11.css`
+  --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;
   }
@@ -1734,7 +1778,7 @@ var getColorScheme = (colorScheme) => {
   return import_styled_components11.css`
     ${colorSchemeSchema.map(({ token, step }) => {
     return `--wui-color-${token}: var(--wui-${colorScheme === "info" ? "blue" : colorScheme}-${step});`;
-  })}
+  }).join("")}
   `;
 };
 
@@ -1884,16 +1928,18 @@ var colorSchemeOptions = [
   "vendor-pardot"
 ];
 var StyledColorSchemeWrapper = import_styled_components13.default.div`
-  ${({ $colorScheme }) => getColorScheme($colorScheme)};
+  ${({ $colorScheme, $nav }) => getColorScheme($nav ? "nav" : $colorScheme)};
 `;
 var ColorSchemeWrapper = ({
-  colorScheme,
+  __nav = false,
+  colorScheme = "inherit",
   children,
   ...otherProps
 }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
   StyledColorSchemeWrapper,
   {
     $colorScheme: colorScheme,
+    $nav: __nav,
     ...otherProps,
     children
   }
@@ -6361,8 +6407,8 @@ var import_jsx_runtime174 = require("react/jsx-runtime");
 var StyledForm = import_styled_components29.default.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 = (0, import_react16.createContext)({
   values: {},
@@ -6433,8 +6479,8 @@ var FormComponent = ({ children, action, values = {}, validate, fullWidth = fals
         gap: "space-05",
         ...props,
         ref,
+        $fullWidth: fullWidth,
         as: StyledForm,
-        fullWidth,
         id,
         onBlur: handleBlur,
         onReset: handleReset,
@@ -7887,6 +7933,151 @@ var WistiaLogo = ({
   return href !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("a", { href, children: Logo }) : Logo;
 };
 WistiaLogo.displayName = "WistiaLogo";
+
+// src/components/Input/Input.tsx
+var import_react30 = require("react");
+var import_styled_components44 = __toESM(require("styled-components"));
+var import_type_guards27 = require("@wistia/type-guards");
+var import_jsx_runtime196 = require("react/jsx-runtime");
+var inputStyles = import_styled_components44.css`
+  --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 = import_styled_components44.default.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 = (0, import_react30.forwardRef)(
+  ({
+    fullWidth = false,
+    monospace = false,
+    type = "text",
+    leftIcon,
+    rightIcon,
+    ...props
+  }, ref) => {
+    let leftIconToDisplay = leftIcon;
+    if ((0, import_type_guards27.isNil)(leftIcon) && type === "search") {
+      leftIconToDisplay = /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(Icon, { type: "search" });
+    }
+    if ((0, import_type_guards27.isNotNil)(leftIconToDisplay)) {
+      leftIconToDisplay = (0, import_react30.cloneElement)(leftIconToDisplay, {
+        size: "md",
+        className: "wui-input-left-icon"
+      });
+    }
+    let rightIconToDisplay = rightIcon;
+    if ((0, import_type_guards27.isNotNil)(rightIconToDisplay)) {
+      rightIconToDisplay = (0, import_react30.cloneElement)(rightIconToDisplay, {
+        size: "md",
+        className: "wui-input-right-icon"
+      });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime196.jsxs)(
+      StyledInputContainer,
+      {
+        $fullWidth: fullWidth,
+        $monospace: monospace,
+        children: [
+          leftIconToDisplay ?? null,
+          type === "multiline" ? /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(
+            "textarea",
+            {
+              ...props,
+              ref
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(
+            "input",
+            {
+              ...props,
+              ref,
+              type
+            }
+          ),
+          rightIconToDisplay ?? null
+        ]
+      }
+    );
+  }
+);
+Input.displayName = "Input";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Avatar,
@@ -7907,6 +8098,7 @@ WistiaLogo.displayName = "WistiaLogo";
   Heading,
   Icon,
   IconButton,
+  Input,
   Label,
   Link,
   Menu,