@wistia/ui 0.0.23 → 0.0.24

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.0.23
+ * @license @wistia/ui v0.0.24
  *
  * Copyright (c) 2024-2024, Wistia, Inc. and its affiliates.
  *
@@ -903,11 +903,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 +936,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 +963,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 +992,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 +1019,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 +1042,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 +1059,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 +1068,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 +1095,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 +1121,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 +1147,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 +1177,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,7 +1195,6 @@ 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);
@@ -1724,7 +1723,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 +1777,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 +1927,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
   }