@wistia/ui 0.9.1-beta.6bb01d7e.ea7fbf5 → 0.9.1-beta.986bb714.e261908

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.9.1-beta.6bb01d7e.ea7fbf5
+ * @license @wistia/ui v0.9.1-beta.986bb714.e261908
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -588,6 +588,18 @@ var lightGlobalTokens = import_styled_components2.css`
   --wui-vendor-hubspot-10: #f24d25;
   --wui-vendor-hubspot-11: #d93a0f;
   --wui-vendor-hubspot-12: #5b2a1e;
+  --wui-vendor-hubspot-alpha-1: #c0400004;
+  --wui-vendor-hubspot-alpha-2: #ff3b000d;
+  --wui-vendor-hubspot-alpha-3: #ff3e001d;
+  --wui-vendor-hubspot-alpha-4: #ff430036;
+  --wui-vendor-hubspot-alpha-5: #ff3d0048;
+  --wui-vendor-hubspot-alpha-6: #ff3b005c;
+  --wui-vendor-hubspot-alpha-7: #ff340072;
+  --wui-vendor-hubspot-alpha-8: #ef2f008f;
+  --wui-vendor-hubspot-alpha-9: #ff3000c9;
+  --wui-vendor-hubspot-alpha-10: #f02f00da;
+  --wui-vendor-hubspot-alpha-11: #d72e00f0;
+  --wui-vendor-hubspot-alpha-12: #450e00e1;
   --wui-vendor-hubspot-surface: #fff3efcc;
   --wui-vendor-hubspot-contrast: #ffffff;
   --wui-vendor-marketo-1: #fdfdff;
@@ -602,6 +614,18 @@ var lightGlobalTokens = import_styled_components2.css`
   --wui-vendor-marketo-10: #4040bb;
   --wui-vendor-marketo-11: #4f55c7;
   --wui-vendor-marketo-12: #252a62;
+  --wui-vendor-marketo-alpha-1: #0000ff02;
+  --wui-vendor-marketo-alpha-2: #0020ff08;
+  --wui-vendor-marketo-alpha-3: #0030ff10;
+  --wui-vendor-marketo-alpha-4: #002eff1c;
+  --wui-vendor-marketo-alpha-5: #0031ff2a;
+  --wui-vendor-marketo-alpha-6: #002cff3a;
+  --wui-vendor-marketo-alpha-7: #0027ef4f;
+  --wui-vendor-marketo-alpha-8: #001fe16c;
+  --wui-vendor-marketo-alpha-9: #0006b7b3;
+  --wui-vendor-marketo-alpha-10: #0000a4bf;
+  --wui-vendor-marketo-alpha-11: #0009aeb0;
+  --wui-vendor-marketo-alpha-12: #000647da;
   --wui-vendor-marketo-surface: #f5f6ffcc;
   --wui-vendor-marketo-contrast: #ffffff;
   --wui-vendor-pardot-1: #fafdff;
@@ -616,6 +640,18 @@ var lightGlobalTokens = import_styled_components2.css`
   --wui-vendor-pardot-10: #0094cf;
   --wui-vendor-pardot-11: #0079b5;
   --wui-vendor-pardot-12: #0c3a51;
+  --wui-vendor-pardot-alpha-1: #0099ff05;
+  --wui-vendor-pardot-alpha-2: #0095ea0c;
+  --wui-vendor-pardot-alpha-3: #00aaff1e;
+  --wui-vendor-pardot-alpha-4: #00a7ff31;
+  --wui-vendor-pardot-alpha-5: #009fff45;
+  --wui-vendor-pardot-alpha-6: #0195f15b;
+  --wui-vendor-pardot-alpha-7: #018fe27a;
+  --wui-vendor-pardot-alpha-8: #0091deb0;
+  --wui-vendor-pardot-alpha-9: #00a1e0;
+  --wui-vendor-pardot-alpha-10: #0094cf;
+  --wui-vendor-pardot-alpha-11: #0079b5;
+  --wui-vendor-pardot-alpha-12: #003048f3;
   --wui-vendor-pardot-surface: #f0f9fecc;
   --wui-vendor-pardot-contrast: #ffffff;
 `;
@@ -919,6 +955,18 @@ var darkGlobalTokens = import_styled_components2.css`
   --wui-vendor-hubspot-10: #f14f28;
   --wui-vendor-hubspot-11: #ff9578;
   --wui-vendor-hubspot-12: #ffd5ca;
+  --wui-vendor-hubspot-alpha-1: #fd04000e;
+  --wui-vendor-hubspot-alpha-2: #f72f0015;
+  --wui-vendor-hubspot-alpha-3: #ff2d002e;
+  --wui-vendor-hubspot-alpha-4: #fd160046;
+  --wui-vendor-hubspot-alpha-5: #fd2a0056;
+  --wui-vendor-hubspot-alpha-6: #fd480467;
+  --wui-vendor-hubspot-alpha-7: #fe5d2681;
+  --wui-vendor-hubspot-alpha-8: #ff6538aa;
+  --wui-vendor-hubspot-alpha-9: #ff5c36;
+  --wui-vendor-hubspot-alpha-10: #fe5328f1;
+  --wui-vendor-hubspot-alpha-11: #ff9578;
+  --wui-vendor-hubspot-alpha-12: #ffd5ca;
   --wui-vendor-hubspot-surface: #361a0280;
   --wui-vendor-hubspot-contrast: #ffffff;
   --wui-vendor-marketo-1: #141621;
@@ -933,6 +981,18 @@ var darkGlobalTokens = import_styled_components2.css`
   --wui-vendor-marketo-10: #4040bb;
   --wui-vendor-marketo-11: #9faeff;
   --wui-vendor-marketo-12: #dae1ff;
+  --wui-vendor-marketo-alpha-1: #dd170005;
+  --wui-vendor-marketo-alpha-2: #eb5f0007;
+  --wui-vendor-marketo-alpha-3: #7069fb28;
+  --wui-vendor-marketo-alpha-4: #5d5cff49;
+  --wui-vendor-marketo-alpha-5: #666aff5c;
+  --wui-vendor-marketo-alpha-6: #6f77fd6c;
+  --wui-vendor-marketo-alpha-7: #747efe84;
+  --wui-vendor-marketo-alpha-8: #737effa6;
+  --wui-vendor-marketo-alpha-9: #5e62fec3;
+  --wui-vendor-marketo-alpha-10: #5754ffae;
+  --wui-vendor-marketo-alpha-11: #9faeff;
+  --wui-vendor-marketo-alpha-12: #dae1ff;
   --wui-vendor-marketo-surface: #1c1a2680;
   --wui-vendor-marketo-contrast: #ffffff;
   --wui-vendor-pardot-1: #0e191f;
@@ -947,26 +1007,38 @@ var darkGlobalTokens = import_styled_components2.css`
   --wui-vendor-pardot-10: #0095d3;
   --wui-vendor-pardot-11: #62c3f8;
   --wui-vendor-pardot-12: #bfe7ff;
+  --wui-vendor-pardot-alpha-1: #00d60004;
+  --wui-vendor-pardot-alpha-2: #30f60008;
+  --wui-vendor-pardot-alpha-3: #00f7f519;
+  --wui-vendor-pardot-alpha-4: #00c2ff31;
+  --wui-vendor-pardot-alpha-5: #00befd46;
+  --wui-vendor-pardot-alpha-6: #00c0fd5a;
+  --wui-vendor-pardot-alpha-7: #1bc2ff74;
+  --wui-vendor-pardot-alpha-8: #20beff99;
+  --wui-vendor-pardot-alpha-9: #00b8fedb;
+  --wui-vendor-pardot-alpha-10: #00b6ffcb;
+  --wui-vendor-pardot-alpha-11: #64c8fff7;
+  --wui-vendor-pardot-alpha-12: #bfe7ff;
   --wui-vendor-pardot-surface: #12242080;
   --wui-vendor-pardot-contrast: #ffffff;
 `;
 
 // src/css/designTokens/colorAlias.tsx
 var import_styled_components3 = require("styled-components");
-var colorAliasTokens = import_styled_components3.css`
-  --wui-color-bg-app: var(--wui-app-background);
-
-  /* --- default --- */
+var defaultColorAliasTokens = import_styled_components3.css`
   --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-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);
-  --wui-color-bg-surface-secondary-active: var(--wui-gray-5);
-  --wui-color-bg-surface-secondary-hover: var(--wui-gray-4);
-  --wui-color-bg-surface-tertiary: var(--wui-gray-5);
+  --wui-color-bg-surface: var(--wui-gray-alpha-1);
+  --wui-color-bg-surface-solid: var(--wui-gray-1);
+  --wui-color-bg-surface-active: var(--wui-gray-alpha-4);
+  --wui-color-bg-surface-hover: var(--wui-gray-alpha-3);
+  --wui-color-bg-surface-secondary: var(--wui-gray-alpha-3);
+  --wui-color-bg-surface-secondary-solid: var(--wui-gray-3);
+  --wui-color-bg-surface-secondary-active: var(--wui-gray-alpha-5);
+  --wui-color-bg-surface-secondary-hover: var(--wui-gray-alpha-4);
+  --wui-color-bg-surface-tertiary: var(--wui-gray-alpha-5);
+  --wui-color-bg-surface-tertiary-solid: var(--wui-gray-5);
   --wui-color-border: var(--wui-gray-6);
   --wui-color-border-hover: var(--wui-gray-8);
   --wui-color-border-active: var(--wui-gray-9);
@@ -981,6 +1053,11 @@ var colorAliasTokens = import_styled_components3.css`
   --wui-color-text-on-fill: var(--wui-gray-contrast);
   --wui-color-text-secondary: var(--wui-gray-11);
   --wui-color-focus-ring: var(--wui-blue-9);
+`;
+var colorAliasTokens = import_styled_components3.css`
+  --wui-color-bg-app: var(--wui-app-background);
+
+  ${defaultColorAliasTokens}
 
   /* --- Semantic --- */
 
@@ -988,13 +1065,16 @@ var colorAliasTokens = import_styled_components3.css`
   --wui-color-bg-fill-active-error: var(--wui-error-11);
   --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-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);
-  --wui-color-bg-surface-secondary-hover-error: var(--wui-error-4);
-  --wui-color-bg-surface-tertiary-error: var(--wui-error-5);
+  --wui-color-bg-surface-active-error: var(--wui-error-alpha-4);
+  --wui-color-bg-surface-error: var(--wui-error-alpha-2);
+  --wui-color-bg-surface-error-solid: var(--wui-error-2);
+  --wui-color-bg-surface-hover-error: var(--wui-error-alpha-3);
+  --wui-color-bg-surface-secondary-active-error: var(--wui-error-alpha-5);
+  --wui-color-bg-surface-secondary-error: var(--wui-error-alpha-3);
+  --wui-color-bg-surface-secondary-error-solid: var(--wui-error-3);
+  --wui-color-bg-surface-secondary-hover-error: var(--wui-error-alpha-4);
+  --wui-color-bg-surface-tertiary-error: var(--wui-error-alpha-5);
+  --wui-color-bg-surface-tertiary-error-solid: var(--wui-error-5);
   --wui-color-border-error: var(--wui-error-6);
   --wui-color-border-hover-errror: var(--wui-error-8);
   --wui-color-border-active-error: var(--wui-error-9);
@@ -1014,13 +1094,16 @@ var colorAliasTokens = import_styled_components3.css`
   --wui-color-bg-fill-active-info: var(--wui-blue-11);
   --wui-color-bg-fill-hover-info: var(--wui-blue-10);
   --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-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);
-  --wui-color-bg-surface-tertiary-info: var(--wui-blue-6);
+  --wui-color-bg-surface-active-info: var(--wui-blue-alpha-4);
+  --wui-color-bg-surface-hover-info: var(--wui-blue-alpha-3);
+  --wui-color-bg-surface-info: var(--wui-blue-alpha-2);
+  --wui-color-bg-surface-info-solid: var(--wui-blue-2);
+  --wui-color-bg-surface-secondary-active-info: var(--wui-blue-alpha-5);
+  --wui-color-bg-surface-secondary-hover-info: var(--wui-blue-alpha-4);
+  --wui-color-bg-surface-secondary-info: var(--wui-blue-alpha-3);
+  --wui-color-bg-surface-secondary-info-solid: var(--wui-blue-3);
+  --wui-color-bg-surface-tertiary-info: var(--wui-blue-alpha-6);
+  --wui-color-bg-surface-tertiary-info-solid: var(--wui-blue-6);
   --wui-color-border-info: var(--wui-blue-6);
   --wui-color-border-hover-info: var(--wui-blue-8);
   --wui-color-border-active-info: var(--wui-blue-9);
@@ -1040,13 +1123,16 @@ var colorAliasTokens = import_styled_components3.css`
   --wui-color-bg-fill-active-success: var(--wui-success-11);
   --wui-color-bg-fill-hover-success: var(--wui-success-10);
   --wui-color-bg-fill-success: var(--wui-success-9);
-  --wui-color-bg-surface-active-success: var(--wui-success-4);
-  --wui-color-bg-surface-hover-success: var(--wui-success-3);
-  --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-2);
-  --wui-color-bg-surface-tertiary-success: var(--wui-success-5);
+  --wui-color-bg-surface-active-success: var(--wui-success-alpha-4);
+  --wui-color-bg-surface-hover-success: var(--wui-success-alpha-3);
+  --wui-color-bg-surface-secondary-active-success: var(--wui-success-alpha-5);
+  --wui-color-bg-surface-secondary-hover-success: var(--wui-success-alpha-4);
+  --wui-color-bg-surface-secondary-success: var(--wui-success-alpha-3);
+  --wui-color-bg-surface-secondary-success-solid: var(--wui-success-3);
+  --wui-color-bg-surface-success: var(--wui-success-alpha-2);
+  --wui-color-bg-surface-success-solid: var(--wui-success-2);
+  --wui-color-bg-surface-tertiary-success: var(--wui-success-alpha-5);
+  --wui-color-bg-surface-tertiary-success-solid: var(--wui-success-5);
   --wui-color-border-success: var(--wui-success-6);
   --wui-color-border-hover-success: var(--wui-success-8);
   --wui-color-border-active-success: var(--wui-success-9);
@@ -1066,13 +1152,16 @@ var colorAliasTokens = import_styled_components3.css`
   --wui-color-bg-fill-active-warning: var(--wui-warning-11);
   --wui-color-bg-fill-hover-warning: var(--wui-warning-10);
   --wui-color-bg-fill-warning: var(--wui-warning-9);
-  --wui-color-bg-surface-active-warning: var(--wui-warning-4);
-  --wui-color-bg-surface-hover-warning: var(--wui-warning-3);
-  --wui-color-bg-surface-secondary-active-warning: var(--wui-warning-5);
-  --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-2);
+  --wui-color-bg-surface-active-warning: var(--wui-warning-alpha-4);
+  --wui-color-bg-surface-hover-warning: var(--wui-warning-alpha-3);
+  --wui-color-bg-surface-secondary-active-warning: var(--wui-warning-alpha-5);
+  --wui-color-bg-surface-secondary-hover-warning: var(--wui-warning-alpha-4);
+  --wui-color-bg-surface-secondary-warning: var(--wui-warning-alpha-3);
+  --wui-color-bg-surface-secondary-warning-solid: var(--wui-warning-3);
+  --wui-color-bg-surface-tertiary-warning: var(--wui-warning-alpha-5);
+  --wui-color-bg-surface-tertiary-warning-solid: var(--wui-warning-5);
+  --wui-color-bg-surface-warning: var(--wui-warning-alpha-2);
+  --wui-color-bg-surface-warning-solid: 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);
@@ -1094,13 +1183,16 @@ var colorAliasTokens = import_styled_components3.css`
   --wui-color-bg-fill-active-blue: var(--wui-blue-11);
   --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-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);
-  --wui-color-bg-surface-secondary-hover-blue: var(--wui-blue-4);
-  --wui-color-bg-surface-tertiary-blue: var(--wui-blue-5);
+  --wui-color-bg-surface-active-blue: var(--wui-blue-alpha-4);
+  --wui-color-bg-surface-blue: var(--wui-blue-alpha-2);
+  --wui-color-bg-surface-blue-solid: var(--wui-blue-2);
+  --wui-color-bg-surface-hover-blue: var(--wui-blue-alpha-3);
+  --wui-color-bg-surface-secondary-active-blue: var(--wui-blue-alpha-5);
+  --wui-color-bg-surface-secondary-blue: var(--wui-blue-alpha-3);
+  --wui-color-bg-surface-secondary-blue-solid: var(--wui-blue-3);
+  --wui-color-bg-surface-secondary-hover-blue: var(--wui-blue-alpha-4);
+  --wui-color-bg-surface-tertiary-blue: var(--wui-blue-alpha-5);
+  --wui-color-bg-surface-tertiary-blue-solid: var(--wui-blue-5);
   --wui-color-border-blue: var(--wui-blue-6);
   --wui-color-border-hover-blue: var(--wui-blue-8);
   --wui-color-border-active-blue: var(--wui-blue-9);
@@ -1120,13 +1212,16 @@ var colorAliasTokens = import_styled_components3.css`
   --wui-color-bg-fill-active-green: var(--wui-green-11);
   --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-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);
-  --wui-color-bg-surface-secondary-hover-green: var(--wui-green-4);
-  --wui-color-bg-surface-tertiary-green: var(--wui-green-5);
+  --wui-color-bg-surface-active-green: var(--wui-green-alpha-4);
+  --wui-color-bg-surface-green: var(--wui-green-alpha-2);
+  --wui-color-bg-surface-green-solid: var(--wui-green-2);
+  --wui-color-bg-surface-hover-green: var(--wui-green-alpha-3);
+  --wui-color-bg-surface-secondary-active-green: var(--wui-green-alpha-5);
+  --wui-color-bg-surface-secondary-green: var(--wui-green-alpha-3);
+  --wui-color-bg-surface-secondary-green-solid: var(--wui-green-3);
+  --wui-color-bg-surface-secondary-hover-green: var(--wui-green-alpha-4);
+  --wui-color-bg-surface-tertiary-green: var(--wui-green-alpha-5);
+  --wui-color-bg-surface-tertiary-green-solid: var(--wui-green-5);
   --wui-color-border-green: var(--wui-green-6);
   --wui-color-border-hover-green: var(--wui-green-8);
   --wui-color-border-active-green: var(--wui-green-9);
@@ -1146,13 +1241,16 @@ var colorAliasTokens = import_styled_components3.css`
   --wui-color-bg-fill-active-orange: var(--wui-orange-11);
   --wui-color-bg-fill-hover-orange: var(--wui-orange-10);
   --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-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);
-  --wui-color-bg-surface-tertiary-orange: var(--wui-orange-5);
+  --wui-color-bg-surface-active-orange: var(--wui-orange-alpha-4);
+  --wui-color-bg-surface-hover-orange: var(--wui-orange-alpha-3);
+  --wui-color-bg-surface-orange: var(--wui-orange-alpha-2);
+  --wui-color-bg-surface-orange-solid: var(--wui-orange-2);
+  --wui-color-bg-surface-secondary-active-orange: var(--wui-orange-alpha-5);
+  --wui-color-bg-surface-secondary-hover-orange: var(--wui-orange-alpha-4);
+  --wui-color-bg-surface-secondary-orange: var(--wui-orange-alpha-3);
+  --wui-color-bg-surface-secondary-orange-solid: var(--wui-orange-3);
+  --wui-color-bg-surface-tertiary-orange: var(--wui-orange-alpha-5);
+  --wui-color-bg-surface-tertiary-orange-solid: var(--wui-orange-5);
   --wui-color-border-orange: var(--wui-orange-6);
   --wui-color-border-hover-orange: var(--wui-orange-8);
   --wui-color-border-active-orange: var(--wui-orange-9);
@@ -1172,13 +1270,16 @@ var colorAliasTokens = import_styled_components3.css`
   --wui-color-bg-fill-active-pink: var(--wui-pink-11);
   --wui-color-bg-fill-hover-pink: var(--wui-pink-10);
   --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-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);
-  --wui-color-bg-surface-tertiary-pink: var(--wui-pink-5);
+  --wui-color-bg-surface-active-pink: var(--wui-pink-alpha-4);
+  --wui-color-bg-surface-hover-pink: var(--wui-pink-alpha-3);
+  --wui-color-bg-surface-pink: var(--wui-pink-alpha-2);
+  --wui-color-bg-surface-pink-solid: var(--wui-pink-2);
+  --wui-color-bg-surface-secondary-active-pink: var(--wui-pink-alpha-5);
+  --wui-color-bg-surface-secondary-hover-pink: var(--wui-pink-alpha-4);
+  --wui-color-bg-surface-secondary-pink: var(--wui-pink-alpha-3);
+  --wui-color-bg-surface-secondary-pink-solid: var(--wui-pink-3);
+  --wui-color-bg-surface-tertiary-pink: var(--wui-pink-alpha-5);
+  --wui-color-bg-surface-tertiary-pink-solid: var(--wui-pink-5);
   --wui-color-border-pink: var(--wui-pink-6);
   --wui-color-border-hover-pink: var(--wui-pink-8);
   --wui-color-border-active-pink: var(--wui-pink-9);
@@ -1198,13 +1299,16 @@ var colorAliasTokens = import_styled_components3.css`
   --wui-color-bg-fill-active-purple: var(--wui-purple-11);
   --wui-color-bg-fill-hover-purple: var(--wui-purple-10);
   --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-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);
-  --wui-color-bg-surface-tertiary-purple: var(--wui-purple-5);
+  --wui-color-bg-surface-active-purple: var(--wui-purple-alpha-4);
+  --wui-color-bg-surface-hover-purple: var(--wui-purple-alpha-3);
+  --wui-color-bg-surface-purple: var(--wui-purple-alpha-2);
+  --wui-color-bg-surface-purple-solid: var(--wui-purple-2);
+  --wui-color-bg-surface-secondary-active-purple: var(--wui-purple-alpha-5);
+  --wui-color-bg-surface-secondary-hover-purple: var(--wui-purple-alpha-4);
+  --wui-color-bg-surface-secondary-purple: var(--wui-purple-alpha-3);
+  --wui-color-bg-surface-secondary-purple-solid: var(--wui-purple-3);
+  --wui-color-bg-surface-tertiary-purple: var(--wui-purple-alpha-5);
+  --wui-color-bg-surface-tertiary-purple-solid: var(--wui-purple-5);
   --wui-color-border-purple: var(--wui-purple-6);
   --wui-color-border-hover-purple: var(--wui-purple-8);
   --wui-color-border-active-purple: var(--wui-purple-9);
@@ -1224,13 +1328,16 @@ var colorAliasTokens = import_styled_components3.css`
   --wui-color-bg-fill-active-yellow: var(--wui-yellow-11);
   --wui-color-bg-fill-hover-yellow: var(--wui-yellow-10);
   --wui-color-bg-fill-yellow: var(--wui-yellow-9);
-  --wui-color-bg-surface-active-yellow: var(--wui-yellow-4);
-  --wui-color-bg-surface-hover-yellow: var(--wui-yellow-3);
-  --wui-color-bg-surface-secondary-active-yellow: var(--wui-yellow-5);
-  --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-2);
+  --wui-color-bg-surface-active-yellow: var(--wui-yellow-alpha-4);
+  --wui-color-bg-surface-hover-yellow: var(--wui-yellow-alpha-3);
+  --wui-color-bg-surface-secondary-active-yellow: var(--wui-yellow-alpha-5);
+  --wui-color-bg-surface-secondary-hover-yellow: var(--wui-yellow-alpha-4);
+  --wui-color-bg-surface-secondary-yellow: var(--wui-yellow-alpha-3);
+  --wui-color-bg-surface-secondary-yellow-solid: var(--wui-yellow-3);
+  --wui-color-bg-surface-tertiary-yellow: var(--wui-yellow-alpha-5);
+  --wui-color-bg-surface-tertiary-yellow-solid: var(--wui-yellow-5);
+  --wui-color-bg-surface-yellow: var(--wui-yellow-alpha-2);
+  --wui-color-bg-surface-yellow-solid: 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);
@@ -1260,16 +1367,18 @@ var colorAliasTokens = import_styled_components3.css`
   /* --- State --- */
 
   /* Disabled */
-  --wui-color-bg-surface-disabled: var(--wui-gray-3);
+  --wui-color-bg-surface-disabled: var(--wui-gray-alpha-3);
+  --wui-color-bg-surface-disabled-solid: var(--wui-gray-3);
   --wui-color-border-disabled: var(--wui-gray-4);
   --wui-color-icon-disabled: var(--wui-gray-8);
   --wui-color-text-disabled: var(--wui-gray-10);
   --wui-color-focus-ring-disabled: var(--wui-gray-6);
 
   /* 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-bg-surface-selected: var(--wui-blue-alpha-3);
+  --wui-color-bg-surface-selected-solid: var(--wui-blue-3);
+  --wui-color-bg-surface-selected-active: var(--wui-blue-alpha-5);
+  --wui-color-bg-surface-selected-hover: var(--wui-blue-alpha-4);
   --wui-color-icon-selected: var(--wui-blue-9);
   --wui-color-text-selected: var(--wui-blue-9);
   --wui-color-border-selected: var(--wui-blue-6);
@@ -2703,13 +2812,16 @@ Ellipsis.displayName = "Ellipsis";
 // src/private/helpers/getColorScheme/getColorScheme.ts
 var import_styled_components15 = require("styled-components");
 var colorSchemeSchema = [
-  { token: "bg-surface", step: "2" },
-  { token: "bg-surface-hover", step: "3" },
-  { token: "bg-surface-active", step: "4" },
-  { token: "bg-surface-secondary", step: "3" },
-  { token: "bg-surface-secondary-hover", step: "4" },
-  { token: "bg-surface-secondary-active", step: "5" },
-  { token: "bg-surface-tertiary", step: "5" },
+  { token: "bg-surface", step: "alpha-1" },
+  { token: "bg-surface-solid", step: "1" },
+  { token: "bg-surface-hover", step: "alpha-3" },
+  { token: "bg-surface-active", step: "alpha-4" },
+  { token: "bg-surface-secondary", step: "alpha-3" },
+  { token: "bg-surface-secondary-solid", step: "3" },
+  { token: "bg-surface-secondary-hover", step: "alpha-4" },
+  { token: "bg-surface-secondary-active", step: "alpha-5" },
+  { token: "bg-surface-tertiary", step: "alpha-5" },
+  { token: "bg-surface-tertiary-solid", step: "5" },
   { token: "bg-fill", step: "9" },
   { token: "bg-fill-hover", step: "10" },
   { token: "bg-fill-active", step: "11" },
@@ -2728,32 +2840,6 @@ var colorSchemeSchema = [
   { token: "icon-on-fill", step: "contrast" },
   { token: "focus-ring", step: "9" }
 ];
-var defaultScheme = import_styled_components15.css`
-  --wui-color-bg-surface: var(--wui-gray-1);
-  --wui-color-bg-surface-hover: var(--wui-gray-3);
-  --wui-color-bg-surface-active: var(--wui-gray-4);
-  --wui-color-bg-surface-secondary: var(--wui-gray-3);
-  --wui-color-bg-surface-secondary-hover: var(--wui-gray-4);
-  --wui-color-bg-surface-secondary-active: var(--wui-gray-5);
-  --wui-color-bg-surface-tertiary: var(--wui-gray-5);
-  --wui-color-bg-fill: var(--wui-blue-9);
-  --wui-color-bg-fill-hover: var(--wui-blue-10);
-  --wui-color-bg-fill-active: var(--wui-blue-11);
-  --wui-color-text: var(--wui-gray-12);
-  --wui-color-text-button: var(--wui-gray-12);
-  --wui-color-text-link: var(--wui-blue-9);
-  --wui-color-text-secondary: var(--wui-gray-11);
-  --wui-color-text-on-fill: var(--wui-gray-contrast);
-  --wui-color-border: var(--wui-gray-6);
-  --wui-color-border-hover: var(--wui-gray-8);
-  --wui-color-border-active: var(--wui-gray-9);
-  --wui-color-border-secondary: var(--wui-gray-8);
-  --wui-color-border-secondary-hover: var(--wui-gray-10);
-  --wui-color-border-secondary-active: var(--wui-gray-11);
-  --wui-color-icon: var(--wui-gray-11);
-  --wui-color-icon-on-fill: var(--wui-gray-contrast);
-  --wui-color-focus-ring: var(--wui-blue-9);
-`;
 var navScheme = import_styled_components15.css`
   --wui-color-bg-app: #1e3399;
 
@@ -2813,7 +2899,7 @@ var getColorScheme = (colorScheme) => {
     return null;
   }
   if (colorScheme === "default") {
-    return defaultScheme;
+    return defaultColorAliasTokens;
   }
   return import_styled_components15.css`
     ${colorSchemeSchema.map(({ token, step }) => {
@@ -2858,7 +2944,7 @@ var StyledToast = import_styled_components16.default.div`
   min-height: 56px;
   width: 356px;
   border-radius: var(--wui-border-radius-01);
-  background-color: var(--wui-color-bg-surface);
+  background-color: var(--wui-color-bg-surface-solid);
   border: 1px solid var(--wui-color-border);
   color: var(--wui-color-text);
   padding-top: var(--wui-space-02);
@@ -8133,15 +8219,15 @@ var StyledCard = (0, import_styled_components31.default)(Box)`
 `;
 var prominenceMap = {
   default: {
-    backgroundColor: "var(--wui-color-bg-surface)",
+    backgroundColor: "var(--wui-color-bg-surface-solid)",
     borderColor: "var(--wui-color-border)"
   },
   secondary: {
-    backgroundColor: "var(--wui-color-bg-surface-secondary)",
+    backgroundColor: "var(--wui-color-bg-surface-secondary-solid)",
     borderColor: "var(--wui-color-border-secondary)"
   },
   tertiary: {
-    backgroundColor: "var(--wui-color-bg-surface-tertiary)",
+    backgroundColor: "var(--wui-color-bg-surface-tertiary-solid)",
     borderColor: "var(--wui-color-border-secondary)"
   }
 };
@@ -8402,7 +8488,7 @@ var StyledCheckboxInput = import_styled_components36.default.div`
   border-width: 1px;
   border-style: solid;
   border-color: ${({ $disabled }) => $disabled ? "var(--wui-color-border-disabled)" : "var(--wui-color-border)"};
-  background-color: ${({ $disabled }) => $disabled ? "var(--wui-color-bg-surface-disabled)" : "var(--wui-color-bg-surface)"};
+  background-color: ${({ $disabled }) => $disabled ? "var(--wui-color-bg-surface-disabled)" : "var(--wui-color-bg-surface-solid)"};
 
   /* checkmark icon */
   svg {
@@ -9299,7 +9385,7 @@ var import_type_guards31 = require("@wistia/type-guards");
 var import_styled_components46 = require("styled-components");
 var inputCssVariables = import_styled_components46.css`
   /* Colors */
-  --wui-input-color-bg: var(--wui-color-bg-surface);
+  --wui-input-color-bg: var(--wui-color-bg-surface-solid);
   --wui-input-color-bg-disabled: var(--wui-color-bg-surface-disabled);
   --wui-input-color-border: var(--wui-color-border-secondary);
   --wui-input-color-border-focus: var(--wui-color-focus-ring);
@@ -10236,7 +10322,7 @@ var StyledKeyboardShortcut = import_styled_components56.default.div`
 `;
 var StyledKey = import_styled_components56.default.kbd`
   align-items: center;
-  background: var(--wui-color-bg-surface-secondary);
+  background: var(--wui-color-bg-surface-secondary-solid);
   border-bottom: 1px solid var(--wui-color-border-secondary);
   border-radius: 4px;
   color: var(--wui-color-text);
@@ -10390,7 +10476,7 @@ var compactMenuItemCss = import_styled_components57.css`
 `;
 var menuContentCss = import_styled_components57.css`
   --menu-font-family: var(--wui-typography-family-default);
-  --menu-bg: var(--wui-color-bg-surface);
+  --menu-bg: var(--wui-color-bg-surface-solid);
   --menu-shadow: var(--wui-elevation-01);
   --menu-border-radius: var(--wui-border-radius-02);
   --menu-padding: var(--wui-space-02);
@@ -11293,7 +11379,7 @@ var StyledContent2 = (0, import_styled_components68.default)(import_react_popove
       padding: var(--wui-space-04);
       max-width: var(--wui-popover-max-width, 320px);
       max-height: var(--wui-popover-max-height, auto);
-      background-color: var(--wui-color-bg-surface);
+      background-color: var(--wui-color-bg-surface-solid);
       box-shadow: var(--wui-elevation-01);
       border: 1px solid var(--wui-color-border);
       overflow: auto;
@@ -11512,7 +11598,7 @@ var StyledRadioInput = import_styled_components70.default.div`
   border-width: 1px;
   border-style: solid;
   border-color: ${({ $disabled }) => $disabled ? "var(--wui-color-border-disabled)" : "var(--wui-color-border)"};
-  background-color: ${({ $disabled }) => $disabled ? "var(--wui-color-bg-surface-disabled)" : "var(--wui-color-bg-surface)"};
+  background-color: ${({ $disabled }) => $disabled ? "var(--wui-color-bg-surface-disabled)" : "var(--wui-color-bg-surface-solid)"};
 
   /* radio button circle icon */
   svg {
@@ -11906,7 +11992,7 @@ var StyledTrigger = (0, import_styled_components74.default)(import_react_select.
 `;
 var StyledContent3 = (0, import_styled_components74.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-bg: var(--wui-color-bg-surface-solid);
   --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);
@@ -12809,8 +12895,8 @@ ThumbnailBadge.displayName = "ThumbnailBadge";
 
 // src/components/Thumbnail/Thumbnail.tsx
 var import_react71 = require("react");
-var import_styled_components93 = __toESM(require("styled-components"));
-var import_type_guards56 = require("@wistia/type-guards");
+var import_styled_components92 = __toESM(require("styled-components"));
+var import_type_guards55 = require("@wistia/type-guards");
 
 // src/private/helpers/getBackgroundGradient/getBackgroundGradient.ts
 var import_type_guards54 = require("@wistia/type-guards");
@@ -12945,17 +13031,7 @@ var getBackgroundGradient = (gradientName = void 0) => {
 };
 
 // src/components/Thumbnail/ThumbnailStoryboardViewer.tsx
-var import_styled_components92 = __toESM(require("styled-components"));
-var import_type_guards55 = require("@wistia/type-guards");
 var import_jsx_runtime272 = require("react/jsx-runtime");
-var ScrubLine = import_styled_components92.default.div`
-  position: absolute;
-  top: 0;
-  height: 100%;
-  width: 2px;
-  background-color: var(--wui-color-bg-surface-selected-active);
-  z-index: 1;
-`;
 var getScaledDimensions = (originalAspectRatio, targetAspectRatio, viewerWidth, viewerHeight) => {
   let scaledHeight = viewerHeight;
   let scaledWidth = viewerWidth;
@@ -12995,7 +13071,7 @@ var ThumbnailStoryboardViewer = ({
   targetAspectRatio,
   scaleFactor = 1,
   framesPerRow = 10,
-  cursorPosition,
+  shouldLoadStoryboard = true,
   ...props
 }) => {
   const originalAspectRatio = frameWidth / frameHeight;
@@ -13031,9 +13107,7 @@ var ThumbnailStoryboardViewer = ({
     storyboardHeight * scaleFactorFromAspectRatioFit * scaleFactor
   );
   const backgroundSize = `${scaledStoryboardWidth}px ${scaledStoryboardHeight}px`;
-  const backgroundImage = `url(${storyboardUrl})`;
-  const showScrubLine = (0, import_type_guards55.isNotNil)(cursorPosition);
-  const scrubLinePosition = (0, import_type_guards55.isNotNil)(cursorPosition) ? `${cursorPosition - 1}px` : "0";
+  const backgroundImage = shouldLoadStoryboard ? `url(${storyboardUrl})` : "";
   const viewerStyles = {
     position: "relative",
     overflow: "hidden",
@@ -13050,34 +13124,24 @@ var ThumbnailStoryboardViewer = ({
     backgroundPosition,
     backgroundSize
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime272.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime272.jsx)(
     "div",
     {
       ...props,
       style: viewerStyles,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime272.jsx)("div", { style: storyboardStyles }),
-        showScrubLine ? /* @__PURE__ */ (0, import_jsx_runtime272.jsx)(
-          ScrubLine,
-          {
-            style: {
-              left: scrubLinePosition
-            }
-          }
-        ) : null
-      ]
+      children: /* @__PURE__ */ (0, import_jsx_runtime272.jsx)("div", { style: storyboardStyles })
     }
   );
 };
 
 // src/components/Thumbnail/Thumbnail.tsx
 var import_jsx_runtime273 = require("react/jsx-runtime");
-var WideThumbnailImage = import_styled_components93.default.img`
+var WideThumbnailImage = import_styled_components92.default.img`
   height: 100%;
   object-fit: cover;
   width: 100%;
 `;
-var SquareThumbnailImage = import_styled_components93.default.img`
+var SquareThumbnailImage = import_styled_components92.default.img`
   backdrop-filter: blur(8px);
   object-fit: contain;
   width: 100%;
@@ -13088,6 +13152,7 @@ var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
       WideThumbnailImage,
       {
         alt: "",
+        role: "img",
         src: thumbnailUrl
       }
     );
@@ -13096,15 +13161,16 @@ var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
     SquareThumbnailImage,
     {
       alt: "",
+      role: "img",
       src: thumbnailUrl
     }
   );
 };
-var StyledThumbnail = import_styled_components93.default.div`
-  background-image: ${({ $backgroundUrl }) => (0, import_type_guards56.isNotNil)($backgroundUrl) ? `url('${$backgroundUrl}')` : void 0};
+var StyledThumbnail = import_styled_components92.default.div`
+  background-image: ${({ $backgroundUrl }) => (0, import_type_guards55.isNotNil)($backgroundUrl) ? `url('${$backgroundUrl}')` : void 0};
   ${({ $backgroundUrl, $gradientBackground }) => (
   // if we don't have $backgroundUrl show a gradient
-  (0, import_type_guards56.isNil)($backgroundUrl) ? getBackgroundGradient($gradientBackground) : void 0
+  (0, import_type_guards55.isNil)($backgroundUrl) ? getBackgroundGradient($gradientBackground) : void 0
 )};
   background-position: center center;
   background-size: cover;
@@ -13113,7 +13179,7 @@ var StyledThumbnail = import_styled_components93.default.div`
   overflow: hidden;
   position: relative;
   width: ${({ $width }) => $width};
-  ${({ $isScrubbable }) => $isScrubbable && "cursor: pointer;"}
+  ${({ $isScrubbable }) => $isScrubbable && "cursor: ew-resize;"}
 
   &,
   img {
@@ -13144,12 +13210,11 @@ var Thumbnail = (0, import_react71.forwardRef)(
     const [isMouseOver, setIsMouseOver] = (0, import_react71.useState)(false);
     const [isStoryboardReady, setIsStoryboardReady] = (0, import_react71.useState)(false);
     const storyboardElementRef = (0, import_react71.useRef)(null);
-    const [cursorPosition, setCursorPosition] = (0, import_react71.useState)(null);
     const backgroundUrl = (0, import_react71.useMemo)(
-      () => thumbnailImageType === "square" && (0, import_type_guards56.isNotNil)(thumbnailUrl) ? thumbnailUrl : void 0,
+      () => thumbnailImageType === "square" && (0, import_type_guards55.isNotNil)(thumbnailUrl) ? thumbnailUrl : void 0,
       [thumbnailImageType, thumbnailUrl]
     );
-    const isScrubbable = (0, import_type_guards56.isNotNil)(storyboard);
+    const isScrubbable = (0, import_type_guards55.isNotNil)(storyboard);
     const trackStoryboardLoadStatus = (0, import_react71.useCallback)(() => {
       if (storyboardElementRef.current || !storyboard) {
         return storyboardElementRef.current;
@@ -13168,7 +13233,6 @@ var Thumbnail = (0, import_react71.forwardRef)(
         const newPercent = relMousePos.left / elem.clientWidth;
         trackStoryboardLoadStatus();
         setPercent(newPercent);
-        setCursorPosition(relMousePos.left);
         setIsMouseOver(true);
       },
       [isScrubbable, trackStoryboardLoadStatus]
@@ -13176,13 +13240,12 @@ var Thumbnail = (0, import_react71.forwardRef)(
     const handleMouseOut = (0, import_react71.useCallback)(() => {
       if (!isScrubbable) return;
       setIsMouseOver(false);
-      setCursorPosition(null);
     }, [isScrubbable]);
     const shouldRenderStoryboard = (0, import_react71.useMemo)(() => {
       return Boolean(isScrubbable && isMouseOver && isStoryboardReady);
     }, [isScrubbable, isMouseOver, isStoryboardReady]);
     const renderStoryboard = (0, import_react71.useCallback)(() => {
-      if (!storyboard || (0, import_type_guards56.isUndefined)(height) || (0, import_type_guards56.isEmptyString)(height)) return null;
+      if (!storyboard || (0, import_type_guards55.isUndefined)(height) || (0, import_type_guards55.isEmptyString)(height)) return null;
       const {
         url,
         width: sbWidth,
@@ -13192,12 +13255,10 @@ var Thumbnail = (0, import_react71.forwardRef)(
         frameCount,
         aspectRatio
       } = storyboard;
-      const targetWidth = (0, import_type_guards56.isString)(width) ? parseInt(width, 10) : Number(width);
-      const effectiveCursorPosition = isStoryboardReady ? cursorPosition : null;
+      const targetWidth = (0, import_type_guards55.isString)(width) ? parseInt(width, 10) : Number(width);
       return /* @__PURE__ */ (0, import_jsx_runtime273.jsx)(
         ThumbnailStoryboardViewer,
         {
-          cursorPosition: effectiveCursorPosition,
           frameCount,
           frameHeight,
           frameWidth,
@@ -13209,11 +13270,11 @@ var Thumbnail = (0, import_react71.forwardRef)(
           targetWidth
         }
       );
-    }, [storyboard, percent, width, height, cursorPosition, isStoryboardReady]);
+    }, [storyboard, percent, width, height]);
     let thumbnailContent = null;
     if (shouldRenderStoryboard) {
       thumbnailContent = renderStoryboard();
-    } else if ((0, import_type_guards56.isNotNil)(thumbnailUrl)) {
+    } else if ((0, import_type_guards55.isNotNil)(thumbnailUrl)) {
       thumbnailContent = /* @__PURE__ */ (0, import_jsx_runtime273.jsx)(
         ThumbnailImage,
         {
@@ -13238,7 +13299,7 @@ var Thumbnail = (0, import_react71.forwardRef)(
         onMouseOut: handleMouseOut,
         role: "presentation",
         children: [
-          (0, import_type_guards56.isNotNil)(children) ? children : null,
+          (0, import_type_guards55.isNotNil)(children) ? children : null,
           thumbnailContent
         ]
       }
@@ -13249,13 +13310,13 @@ Thumbnail.displayName = "Thumbnail";
 
 // src/components/ThumbnailCollage/ThumbnailCollage.tsx
 var import_react72 = __toESM(require("react"));
-var import_styled_components94 = __toESM(require("styled-components"));
-var import_type_guards57 = require("@wistia/type-guards");
+var import_styled_components93 = __toESM(require("styled-components"));
+var import_type_guards56 = require("@wistia/type-guards");
 var import_jsx_runtime274 = (
   // ThumbnailCollage will fallback to a Thumbnail with a gradient background if no children are provided
   require("react/jsx-runtime")
 );
-var StyledThumbnailCollage = import_styled_components94.default.div`
+var StyledThumbnailCollage = import_styled_components93.default.div`
   display: grid;
   gap: var(--wui-space-01);
   width: 100%;
@@ -13330,7 +13391,7 @@ var ThumbnailCollage = ({
 }) => {
   const thumbnailArray = import_react72.default.Children.toArray(children);
   const truncatedThumbnails = thumbnailArray.slice(0, 3);
-  const thumbnails = (0, import_type_guards57.isNonEmptyArray)(thumbnailArray) ? truncatedThumbnails.map((child) => {
+  const thumbnails = (0, import_type_guards56.isNonEmptyArray)(thumbnailArray) ? truncatedThumbnails.map((child) => {
     return import_react72.default.cloneElement(child, {
       ...child.props,
       children: void 0
@@ -13357,8 +13418,8 @@ var ThumbnailCollage = ({
 };
 
 // src/components/WistiaLogo/WistiaLogo.tsx
-var import_styled_components95 = __toESM(require("styled-components"));
-var import_type_guards58 = require("@wistia/type-guards");
+var import_styled_components94 = __toESM(require("styled-components"));
+var import_type_guards57 = require("@wistia/type-guards");
 var import_jsx_runtime275 = require("react/jsx-runtime");
 var renderBrandmark = (brandmarkColor, iconOnly) => {
   if (iconOnly) {
@@ -13399,7 +13460,7 @@ var computedViewBox = (iconOnly) => {
   }
   return "0 0 144 31.47";
 };
-var WistiaLogoComponent = import_styled_components95.default.svg`
+var WistiaLogoComponent = import_styled_components94.default.svg`
   height: ${({ height }) => `${height}px`};
 
   /* ensure it will always fit on mobile */
@@ -13415,12 +13476,12 @@ var WistiaLogoComponent = import_styled_components95.default.svg`
   ${({ $opticallyCentered, $iconOnly }) => {
   if ($opticallyCentered) {
     if ($iconOnly) {
-      return import_styled_components95.css`
+      return import_styled_components94.css`
           aspect-ratio: 1;
           padding: 11.85% 3.12% 13.91%;
         `;
     }
-    return import_styled_components95.css`
+    return import_styled_components94.css`
         aspect-ratio: 127 / 32;
       `;
   }
@@ -13471,7 +13532,7 @@ var WistiaLogo = ({
       ...props,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime275.jsx)("title", { children: title }),
-        (0, import_type_guards58.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime275.jsx)("desc", { children: description }) : null,
+        (0, import_type_guards57.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime275.jsx)("desc", { children: description }) : null,
         renderBrandmark(brandmarkColor, iconOnly),
         renderLogotype(logotypeColor, iconOnly)
       ]
@@ -13482,18 +13543,18 @@ var WistiaLogo = ({
 WistiaLogo.displayName = "WistiaLogo";
 
 // src/components/List/List.tsx
-var import_type_guards60 = require("@wistia/type-guards");
-var import_styled_components97 = __toESM(require("styled-components"));
+var import_type_guards59 = require("@wistia/type-guards");
+var import_styled_components96 = __toESM(require("styled-components"));
 
 // src/components/List/ListItem.tsx
-var import_styled_components96 = __toESM(require("styled-components"));
-var import_type_guards59 = require("@wistia/type-guards");
+var import_styled_components95 = __toESM(require("styled-components"));
+var import_type_guards58 = require("@wistia/type-guards");
 var import_jsx_runtime276 = require("react/jsx-runtime");
-var ListItemComponent = import_styled_components96.default.li`
+var ListItemComponent = import_styled_components95.default.li`
   margin-bottom: var(--wui-space-02);
 `;
 var ListItem = ({ children }) => {
-  if ((0, import_type_guards59.isNil)(children)) {
+  if ((0, import_type_guards58.isNil)(children)) {
     return null;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime276.jsx)(ListItemComponent, { children });
@@ -13502,7 +13563,7 @@ ListItem.displayName = "ListItem";
 
 // src/components/List/List.tsx
 var import_jsx_runtime277 = require("react/jsx-runtime");
-var spacesStyle = import_styled_components97.css`
+var spacesStyle = import_styled_components96.css`
   overflow: hidden;
   padding-left: 0;
   vertical-align: bottom;
@@ -13524,7 +13585,7 @@ var spacesStyle = import_styled_components97.css`
     }
   }
 `;
-var commasStyle = import_styled_components97.css`
+var commasStyle = import_styled_components96.css`
   ${spacesStyle};
 
   li {
@@ -13534,7 +13595,7 @@ var commasStyle = import_styled_components97.css`
     }
   }
 `;
-var slashesStyle = import_styled_components97.css`
+var slashesStyle = import_styled_components96.css`
   ${spacesStyle};
 
   li {
@@ -13545,7 +13606,7 @@ var slashesStyle = import_styled_components97.css`
     }
   }
 `;
-var breadcrumbsStyle = import_styled_components97.css`
+var breadcrumbsStyle = import_styled_components96.css`
   ${spacesStyle};
 
   li {
@@ -13556,11 +13617,11 @@ var breadcrumbsStyle = import_styled_components97.css`
     }
   }
 `;
-var unbulletedStyle = import_styled_components97.css`
+var unbulletedStyle = import_styled_components96.css`
   list-style: none;
   padding-left: 0;
 `;
-var ListComponent = import_styled_components97.default.ul`
+var ListComponent = import_styled_components96.default.ul`
   list-style-position: outside;
   margin: 0 0 var(--wui-space-01);
   padding: 0 0 0 var(--wui-space-04);
@@ -13623,13 +13684,13 @@ var List = ({
   ...otherProps
 }) => {
   const listVariant = variant ?? "bullets";
-  if ((0, import_type_guards60.isNotNil)(children)) {
+  if ((0, import_type_guards59.isNotNil)(children)) {
     if (Array.isArray(children) && !children.length) {
       return null;
     }
     return renderListComponent(children, listVariant, otherProps);
   }
-  if ((0, import_type_guards60.isNotNil)(items)) {
+  if ((0, import_type_guards59.isNotNil)(items)) {
     if (!items.length) {
       return null;
     }