@wistia/ui 0.0.11 → 0.0.13

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.0.11
+ * @license @wistia/ui v0.0.13
  *
  * Copyright (c) 2024-2024, Wistia, Inc. and its affiliates.
  *
@@ -813,6 +813,9 @@ var colorAliasTokens = import_styled_components4.css`
   --color-border: var(--gray-6);
   --color-border-hover: var(--gray-8);
   --color-border-active: var(--gray-9);
+  --color-border-secondary: var(--gray-8);
+  --color-border-secondary-hover: var(--gray-10);
+  --color-border-secondary-active: var(--gray-11);
   --color-icon: var(--gray-11);
   --color-icon-on-fill: var(--gray-contrast);
   --color-text: var(--gray-12);
@@ -837,6 +840,9 @@ var colorAliasTokens = import_styled_components4.css`
   --color-border-error: var(--error-6);
   --color-border-hover-errror: var(--error-8);
   --color-border-active-error: var(--error-9);
+  --color-border-secondary-error: var(--error-8);
+  --color-border-secondary-hover-error: var(--error-10);
+  --color-border-secondary-active-error: var(--error-11);
   --color-icon-error: var(--error-11);
   --color-icon-on-fill-error: var(--error-contrast);
   --color-text-error: var(--error-11);
@@ -859,6 +865,9 @@ var colorAliasTokens = import_styled_components4.css`
   --color-border-info: var(--blue-6);
   --color-border-hover-info: var(--blue-8);
   --color-border-active-info: var(--blue-9);
+  --color-border-secondary-info: var(--blue-8);
+  --color-border-secondary-hover-info: var(--blue-10);
+  --color-border-secondary-active-info: var(--blue-11);
   --color-icon-info: var(--blue-11);
   --color-icon-on-fill-info: var(--blue-contrast);
   --color-text-high-contrast-info: var(--blue-12);
@@ -881,6 +890,9 @@ var colorAliasTokens = import_styled_components4.css`
   --color-border-success: var(--success-6);
   --color-border-hover-success: var(--success-8);
   --color-border-active-success: var(--success-9);
+  --color-border-secondary-success: var(--success-8);
+  --color-border-secondary-hover-success: var(--success-10);
+  --color-border-secondary-active-success: var(--success-11);
   --color-icon-on-fill-success: var(--success-contrast);
   --color-icon-success: var(--success-11);
   --color-text-high-contrast-success: var(--success-12);
@@ -903,6 +915,9 @@ var colorAliasTokens = import_styled_components4.css`
   --color-border-warning: var(--warning-6);
   --color-border-hover-warning: var(--warning-8);
   --color-border-active-warning: var(--warning-9);
+  --color-border-secondary-warning: var(--warning-8);
+  --color-border-secondary-hover-warning: var(--warning-10);
+  --color-border-secondary-active-warning: var(--warning-11);
   --color-icon-on-fill-warning: var(--warning-contrast);
   --color-icon-warning: var(--warning-11);
   --color-text-high-contrast-warning: var(--warning-12);
@@ -927,6 +942,9 @@ var colorAliasTokens = import_styled_components4.css`
   --color-border-blue: var(--blue-6);
   --color-border-hover-blue: var(--blue-8);
   --color-border-active-blue: var(--blue-9);
+  --color-border-secondary-blue: var(--blue-8);
+  --color-border-secondary-hover-blue: var(--blue-10);
+  --color-border-secondary-active-blue: var(--blue-11);
   --color-icon-blue: var(--blue-11);
   --color-icon-on-fill-blue: var(--blue-contrast);
   --color-text-blue: var(--blue-11);
@@ -949,6 +967,9 @@ var colorAliasTokens = import_styled_components4.css`
   --color-border-green: var(--green-6);
   --color-border-hover-green: var(--green-8);
   --color-border-active-green: var(--green-9);
+  --color-border-secondary-green: var(--green-8);
+  --color-border-secondary-hover-green: var(--green-10);
+  --color-border-secondary-active-green: var(--green-11);
   --color-icon-green: var(--green-11);
   --color-icon-on-fill-green: var(--green-contrast);
   --color-text-green: var(--green-11);
@@ -971,6 +992,9 @@ var colorAliasTokens = import_styled_components4.css`
   --color-border-orange: var(--orange-6);
   --color-border-hover-orange: var(--orange-8);
   --color-border-active-orange: var(--orange-9);
+  --color-border-secondary-orange: var(--orange-8);
+  --color-border-secondary-hover-orange: var(--orange-10);
+  --color-border-secondary-active-orange: var(--orange-11);
   --color-icon-on-fill-orange: var(--orange-contrast);
   --color-icon-orange: var(--orange-11);
   --color-text-high-contrast-orange: var(--orange-12);
@@ -993,6 +1017,9 @@ var colorAliasTokens = import_styled_components4.css`
   --color-border-pink: var(--pink-6);
   --color-border-hover-pink: var(--pink-8);
   --color-border-active-pink: var(--pink-9);
+  --color-border-secondary-pink: var(--pink-8);
+  --color-border-secondary-hover-pink: var(--pink-10);
+  --color-border-secondary-active-pink: var(--pink-11);
   --color-icon-on-fill-pink: var(--pink-contrast);
   --color-icon-pink: var(--pink-11);
   --color-text-high-contrast-pink: var(--pink-12);
@@ -1015,6 +1042,9 @@ var colorAliasTokens = import_styled_components4.css`
   --color-border-purple: var(--purple-6);
   --color-border-hover-purple: var(--purple-8);
   --color-border-active-purple: var(--purple-9);
+  --color-border-secondary-purple: var(--purple-8);
+  --color-border-secondary-hover-purple: var(--purple-10);
+  --color-border-secondary-active-purple: var(--purple-11);
   --color-icon-on-fill-purple: var(--purple-contrast);
   --color-icon-purple: var(--purple-11);
   --color-text-high-contrast-purple: var(--purple-12);
@@ -1037,6 +1067,9 @@ var colorAliasTokens = import_styled_components4.css`
   --color-border-yellow: var(--yellow-6);
   --color-border-hover-yellow: var(--yellow-8);
   --color-border-active-yellow: var(--yellow-9);
+  --color-border-secondary-yellow: var(--yellow-8);
+  --color-border-secondary-hover-yellow: var(--yellow-10);
+  --color-border-secondary-active-yellow: var(--yellow-11);
   --color-icon-on-fill-yellow: var(--yellow-contrast);
   --color-icon-yellow: var(--yellow-11);
   --color-text-high-contrast-yellow: var(--yellow-12);
@@ -1483,6 +1516,9 @@ var colorSchemeSchema = [
   { token: "border", step: "6" },
   { token: "border-hover", step: "8" },
   { token: "border-active", step: "9" },
+  { token: "border-secondary", step: "8" },
+  { token: "border-secondary-hover", step: "10" },
+  { token: "border-secondary-active", step: "11" },
   { token: "icon", step: "11" },
   { token: "icon-on-fill", step: "contrast" }
 ];
@@ -1502,6 +1538,11 @@ var defaultScheme = import_styled_components10.css`
   --color-text-secondary: var(--gray-11);
   --color-text-on-fill: var(--gray-contrast);
   --color-border: var(--gray-6);
+  --color-border-hover: var(--gray-8);
+  --color-border-active: var(--gray-9);
+  --color-border-secondary: var(--gray-8);
+  --color-border-secondary-hover: var(--gray-10);
+  --color-border-secondary-active: var(--gray-11);
   --color-icon: var(--gray-11);
   --color-icon-on-fill: var(--gray-contrast);
 `;
@@ -4743,15 +4784,33 @@ var ThumbsUpIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
   }
 );
 
-// src/components/Icon/icons/TransitionsIcon.tsx
+// src/components/Icon/icons/TranscriptIcon.tsx
 var import_jsx_runtime144 = require("react/jsx-runtime");
-var TransitionsIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
+var TranscriptIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
     children: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
+      "path",
+      {
+        d: "M19.4132 7.98019L14.9401 3.57694C14.5618 3.20457 14.0601 2.99982 13.5264 2.99982H7.14237C5.40865 2.99982 3.99951 4.38694 3.99951 6.09357V17.9061C3.99951 19.6127 5.40865 20.9998 7.14237 20.9998H16.8567C18.5904 20.9998 19.9995 19.6127 19.9995 17.9061V9.37182C19.9995 8.84644 19.7915 8.35144 19.4132 7.98019ZM8.28523 8.62482H10.5709C11.0441 8.62482 11.4281 9.00282 11.4281 9.46857C11.4281 9.93432 11.0441 10.3123 10.5709 10.3123H8.28523C7.81208 10.3123 7.42808 9.93432 7.42808 9.46857C7.42808 9.00282 7.81208 8.62482 8.28523 8.62482ZM15.7138 17.0623H8.28523C7.81208 17.0623 7.42808 16.6843 7.42808 16.2186C7.42808 15.7528 7.81208 15.3748 8.28523 15.3748H15.7138C16.1869 15.3748 16.5709 15.7528 16.5709 16.2186C16.5709 16.6843 16.1869 17.0623 15.7138 17.0623ZM15.7138 13.6873H8.28523C7.81208 13.6873 7.42808 13.3093 7.42808 12.8436C7.42808 12.3778 7.81208 11.9998 8.28523 11.9998H15.7138C16.1869 11.9998 16.5709 12.3778 16.5709 12.8436C16.5709 13.3093 16.1869 13.6873 15.7138 13.6873ZM18.2075 9.18732H14.8567C14.2281 9.18732 13.7138 8.68107 13.7138 8.06232V4.77619L13.7287 4.77057L18.2109 9.18169L18.2075 9.18732Z",
+        fill: "currentColor"
+      }
+    )
+  }
+);
+
+// src/components/Icon/icons/TransitionsIcon.tsx
+var import_jsx_runtime145 = require("react/jsx-runtime");
+var TransitionsIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(
+  "svg",
+  {
+    ...props,
+    viewBox: "0 0 24 24",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -4764,14 +4823,14 @@ var TransitionsIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
 );
 
 // src/components/Icon/icons/TrimIcon.tsx
-var import_jsx_runtime145 = require("react/jsx-runtime");
-var TrimIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(
+var import_jsx_runtime146 = require("react/jsx-runtime");
+var TrimIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -4784,14 +4843,14 @@ var TrimIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(
 );
 
 // src/components/Icon/icons/TurnstileIcon.tsx
-var import_jsx_runtime146 = require("react/jsx-runtime");
-var TurnstileIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
+var import_jsx_runtime147 = require("react/jsx-runtime");
+var TurnstileIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -4804,14 +4863,14 @@ var TurnstileIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
 );
 
 // src/components/Icon/icons/UndoIcon.tsx
-var import_jsx_runtime147 = require("react/jsx-runtime");
-var UndoIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(
+var import_jsx_runtime148 = require("react/jsx-runtime");
+var UndoIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -4824,14 +4883,14 @@ var UndoIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(
 );
 
 // src/components/Icon/icons/UnlockIcon.tsx
-var import_jsx_runtime148 = require("react/jsx-runtime");
-var UnlockIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(
+var import_jsx_runtime149 = require("react/jsx-runtime");
+var UnlockIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -4844,14 +4903,14 @@ var UnlockIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(
 );
 
 // src/components/Icon/icons/UploadIcon.tsx
-var import_jsx_runtime149 = require("react/jsx-runtime");
-var UploadIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(
+var import_jsx_runtime150 = require("react/jsx-runtime");
+var UploadIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -4864,14 +4923,14 @@ var UploadIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(
 );
 
 // src/components/Icon/icons/UsersPermissionsIcon.tsx
-var import_jsx_runtime150 = require("react/jsx-runtime");
-var UsersPermissionsIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(
+var import_jsx_runtime151 = require("react/jsx-runtime");
+var UsersPermissionsIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime151.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime151.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -4884,14 +4943,14 @@ var UsersPermissionsIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime150.
 );
 
 // src/components/Icon/icons/ViewStreamIcon.tsx
-var import_jsx_runtime151 = require("react/jsx-runtime");
-var ViewStreamIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime151.jsx)(
+var import_jsx_runtime152 = require("react/jsx-runtime");
+var ViewStreamIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime151.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -4904,14 +4963,14 @@ var ViewStreamIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime151.jsx)(
 );
 
 // src/components/Icon/icons/VolumeIcon.tsx
-var import_jsx_runtime152 = require("react/jsx-runtime");
-var VolumeIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
+var import_jsx_runtime153 = require("react/jsx-runtime");
+var VolumeIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(
       "path",
       {
         d: "M19.133 2.08909C18.5996 1.79709 17.9476 1.81843 17.4356 2.14776L10.3756 6.66643H5.66763C4.01297 6.66643 2.66763 8.01176 2.66763 9.66643V14.3331C2.66763 15.9878 4.01297 17.3331 5.66763 17.3331H10.3756L17.4356 21.8518C17.709 22.0264 18.021 22.1158 18.3356 22.1158C18.6103 22.1158 18.885 22.0478 19.1343 21.9118C19.669 21.6198 20.001 21.0584 20.001 20.4491V3.55176C20.001 2.94243 19.6676 2.38243 19.133 2.08909Z",
@@ -4922,14 +4981,14 @@ var VolumeIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
 );
 
 // src/components/Icon/icons/VolumeOffIcon.tsx
-var import_jsx_runtime153 = require("react/jsx-runtime");
-var VolumeOffIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(
+var import_jsx_runtime154 = require("react/jsx-runtime");
+var VolumeOffIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -4942,14 +5001,14 @@ var VolumeOffIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(
 );
 
 // src/components/Icon/icons/VolumeUpIcon.tsx
-var import_jsx_runtime154 = require("react/jsx-runtime");
-var VolumeUpIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(
+var import_jsx_runtime155 = require("react/jsx-runtime");
+var VolumeUpIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -4962,14 +5021,14 @@ var VolumeUpIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(
 );
 
 // src/components/Icon/icons/VolumeXIcon.tsx
-var import_jsx_runtime155 = require("react/jsx-runtime");
-var VolumeXIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(
+var import_jsx_runtime156 = require("react/jsx-runtime");
+var VolumeXIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -4982,14 +5041,14 @@ var VolumeXIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(
 );
 
 // src/components/Icon/icons/WandIcon.tsx
-var import_jsx_runtime156 = require("react/jsx-runtime");
-var WandIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(
+var import_jsx_runtime157 = require("react/jsx-runtime");
+var WandIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -5002,14 +5061,14 @@ var WandIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(
 );
 
 // src/components/Icon/icons/ZoomInIcon.tsx
-var import_jsx_runtime157 = require("react/jsx-runtime");
-var ZoomInIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(
+var import_jsx_runtime158 = require("react/jsx-runtime");
+var ZoomInIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -5022,14 +5081,14 @@ var ZoomInIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(
 );
 
 // src/components/Icon/icons/ZoomOutIcon.tsx
-var import_jsx_runtime158 = require("react/jsx-runtime");
-var ZoomOutIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
+var import_jsx_runtime159 = require("react/jsx-runtime");
+var ZoomOutIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -5181,6 +5240,7 @@ var iconMap = {
   "thumbs-down": ThumbsDownIcon,
   "thumbs-up": ThumbsUpIcon,
   transitions: TransitionsIcon,
+  transcript: TranscriptIcon,
   trim: TrimIcon,
   turnstile: TurnstileIcon,
   undo: UndoIcon,
@@ -5215,7 +5275,7 @@ var useResponsiveProp = (values) => {
 };
 
 // src/components/Icon/Icon.tsx
-var import_jsx_runtime159 = require("react/jsx-runtime");
+var import_jsx_runtime160 = require("react/jsx-runtime");
 var iconSizeMap = {
   sm: "12",
   md: "16",
@@ -5252,7 +5312,7 @@ var Icon = ({
     ...style
   };
   const iconColor = invertColor ? "var(--color-icon-on-fill)" : "var(--color-icon)";
-  return /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(
     StyledIcon,
     {
       $colorScheme: colorScheme,
@@ -5276,7 +5336,7 @@ var import_react9 = require("react");
 var import_type_guards11 = require("@wistia/type-guards");
 var import_styled_components18 = __toESM(require("styled-components"));
 var import_react_router_dom = require("react-router-dom");
-var import_jsx_runtime160 = require("react/jsx-runtime");
+var import_jsx_runtime161 = require("react/jsx-runtime");
 var generateHref = (href, type, disabled) => {
   if (disabled || (0, import_type_guards11.isNil)(href)) {
     return void 0;
@@ -5338,7 +5398,7 @@ var Link = (0, import_react9.forwardRef)(
       onClick: handleClick
     };
     if (isButton(props)) {
-      return /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
         StyledLink,
         {
           ref,
@@ -5358,7 +5418,7 @@ var Link = (0, import_react9.forwardRef)(
         ...commonProps,
         ...externalLinkProps
       };
-      return inRouterContext && type !== "external" ? /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(
+      return inRouterContext && type !== "external" ? /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
         StyledLink,
         {
           as: import_react_router_dom.Link,
@@ -5366,7 +5426,7 @@ var Link = (0, import_react9.forwardRef)(
           to: to ?? "",
           children
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
         StyledLink,
         {
           as: "a",
@@ -5382,7 +5442,7 @@ var Link = (0, import_react9.forwardRef)(
 Link.displayName = "Link";
 
 // src/components/Button/Button.tsx
-var import_jsx_runtime161 = require("react/jsx-runtime");
+var import_jsx_runtime162 = require("react/jsx-runtime");
 var isLink2 = (props) => (0, import_type_guards12.isNotUndefined)(props.href);
 var StyledButton = import_styled_components19.default.button`
   ${buttonResetCss}
@@ -5419,9 +5479,9 @@ var ButtonContent = ({
   rightIcon,
   children
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime161.jsxs)(import_jsx_runtime161.Fragment, { children: [
-    isLoading ? /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(StyledButtonLoading, { children: /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(Icon, { type: "spinner" }) }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime161.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime162.jsxs)(import_jsx_runtime162.Fragment, { children: [
+    isLoading ? /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(StyledButtonLoading, { children: /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(Icon, { type: "spinner" }) }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime162.jsxs)(
       StyledButtonContent,
       {
         $hasLeftIcon: (0, import_type_guards12.isNotNil)(leftIcon),
@@ -5429,7 +5489,7 @@ var ButtonContent = ({
         $isLoading: isLoading,
         children: [
           leftIcon ?? null,
-          /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(StyledButtonContentLabel, { children }),
+          /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(StyledButtonContentLabel, { children }),
           rightIcon ?? null
         ]
       }
@@ -5471,14 +5531,14 @@ var Button = (0, import_react10.forwardRef)(
       commonProps.className = `${className ?? ""} force-state-${forceState}`;
     }
     if (isLink2(props)) {
-      return /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(
         StyledButton,
         {
           ref,
           as: Link,
           ...props,
           ...commonProps,
-          children: /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(
             ButtonContent,
             {
               isLoading,
@@ -5499,7 +5559,7 @@ var Button = (0, import_react10.forwardRef)(
         onClick(event);
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(
       StyledButton,
       {
         ref,
@@ -5507,7 +5567,7 @@ var Button = (0, import_react10.forwardRef)(
         type: "button",
         ...props,
         ...commonProps,
-        children: /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(
           ButtonContent,
           {
             isLoading,
@@ -5525,7 +5585,7 @@ Button.displayName = "Button";
 // src/components/ButtonGroup/ButtonGroup.tsx
 var import_styled_components20 = __toESM(require("styled-components"));
 var import_type_guards13 = require("@wistia/type-guards");
-var import_jsx_runtime162 = require("react/jsx-runtime");
+var import_jsx_runtime163 = require("react/jsx-runtime");
 var getAlignment = (align) => {
   if (align === "center") {
     return "center";
@@ -5567,7 +5627,7 @@ var ButtonGroup = ({
   if ((0, import_type_guards13.isNil)(children)) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
     ButtonGroupComponent,
     {
       $align: align,
@@ -5581,7 +5641,7 @@ ButtonGroup.displayName = "ButtonGroup";
 
 // src/components/Divider/Divider.tsx
 var import_styled_components21 = __toESM(require("styled-components"));
-var import_jsx_runtime163 = require("react/jsx-runtime");
+var import_jsx_runtime164 = require("react/jsx-runtime");
 var sizeToPixelMap = {
   lg: 4,
   sm: 1
@@ -5601,7 +5661,7 @@ var DividerComponent = import_styled_components21.default.hr`
 `;
 var Divider = ({ size = "sm", ...otherProps }) => {
   const responsiveSize = useResponsiveProp(size);
-  return /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(
     DividerComponent,
     {
       $borderHeight: sizeToPixelMap[responsiveSize],
@@ -5614,7 +5674,7 @@ Divider.displayName = "Divider";
 // src/components/Ellipsis/Ellipsis.tsx
 var import_type_guards14 = require("@wistia/type-guards");
 var import_styled_components22 = __toESM(require("styled-components"));
-var import_jsx_runtime164 = require("react/jsx-runtime");
+var import_jsx_runtime165 = require("react/jsx-runtime");
 var ellipsisStyle = import_styled_components22.css`
   overflow: hidden;
   text-overflow: ellipsis;
@@ -5655,7 +5715,7 @@ var EllipsisComponent = import_styled_components22.default.div`
   return void 0;
 }}
 `;
-var Ellipsis = ({ children, lines, ...otherProps }) => /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(
+var Ellipsis = ({ children, lines, ...otherProps }) => /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(
   EllipsisComponent,
   {
     $lines: lines,
@@ -5675,7 +5735,7 @@ var makePolymorphic = (component) => {
 };
 
 // src/components/Heading/Heading.tsx
-var import_jsx_runtime165 = require("react/jsx-runtime");
+var import_jsx_runtime166 = require("react/jsx-runtime");
 var heroStyle = import_styled_components23.css`
   --font-family: var(--typography-heading-hero-family);
   --font-size: var(--typography-heading-hero-size);
@@ -5771,7 +5831,7 @@ var HeadingComponent = (0, import_react11.forwardRef)(
     variant = "heading1",
     renderAs,
     ...otherProps
-  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(
     StyledHeading,
     {
       ref,
@@ -5797,7 +5857,7 @@ var import_styled_components25 = __toESM(require("styled-components"));
 // src/components/Tooltip/Tooltip.tsx
 var import_react_tooltip2 = require("@radix-ui/react-tooltip");
 var import_styled_components24 = __toESM(require("styled-components"));
-var import_jsx_runtime166 = require("react/jsx-runtime");
+var import_jsx_runtime167 = require("react/jsx-runtime");
 var CompactTooltipStyles = import_styled_components24.css`
   --tooltip-font-size: var(--typography-label-4-size);
   --tooltip-line-height: var(--typography-label-4-line-height);
@@ -5863,14 +5923,14 @@ var Tooltip = ({
   if (forceOpen === true) {
     rootProps.open = true;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime166.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime167.jsxs)(
     import_react_tooltip2.Root,
     {
       delayDuration: delay,
       ...rootProps,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(import_react_tooltip2.Trigger, { asChild: true, children }),
-        /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(import_react_tooltip2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime166.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(import_react_tooltip2.Trigger, { asChild: true, children }),
+        /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(import_react_tooltip2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime167.jsxs)(
           StyledContent,
           {
             $compact: compact,
@@ -5878,7 +5938,7 @@ var Tooltip = ({
             sideOffset: hideArrow ? VISUAL_OFFSET : VISUAL_OFFSET - 2,
             children: [
               content,
-              !hideArrow ? /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(import_react_tooltip2.Arrow, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(
+              !hideArrow ? /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(import_react_tooltip2.Arrow, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(
                 "svg",
                 {
                   fill: "var(--tooltip-bg)",
@@ -5887,7 +5947,7 @@ var Tooltip = ({
                   viewBox: "0 0 12 8",
                   width: "12",
                   xmlns: "http://www.w3.org/2000/svg",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime166.jsx)("path", { d: "M6.8 6.93333C6.4 7.46667 5.6 7.46667 5.2 6.93333L-2.54292e-07 -1.04907e-06L12 0L6.8 6.93333Z" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime167.jsx)("path", { d: "M6.8 6.93333C6.4 7.46667 5.6 7.46667 5.2 6.93333L-2.54292e-07 -1.04907e-06L12 0L6.8 6.93333Z" })
                 }
               ) }) : null
             ]
@@ -5900,7 +5960,7 @@ var Tooltip = ({
 Tooltip.displayName = "Tooltip";
 
 // src/components/IconButton/IconButton.tsx
-var import_jsx_runtime167 = require("react/jsx-runtime");
+var import_jsx_runtime168 = require("react/jsx-runtime");
 var StyledButton2 = (0, import_styled_components25.default)(Button)`
   --icon-button-size-sm: 24px;
   --icon-button-size-md: 32px;
@@ -5918,7 +5978,7 @@ var StyledButton2 = (0, import_styled_components25.default)(Button)`
 var IconButton = (0, import_react12.forwardRef)(
   ({ children, label, disableTooltip = false, size = "md", ...props }, ref) => {
     const responsiveSize = useResponsiveProp(size);
-    const button = /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(
+    const button = /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(
       StyledButton2,
       {
         ...props,
@@ -5934,14 +5994,14 @@ var IconButton = (0, import_react12.forwardRef)(
     if (disableTooltip) {
       return button;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(Tooltip, { content: label, children: button });
+    return /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(Tooltip, { content: label, children: button });
   }
 );
 IconButton.displayName = "IconButton";
 
 // src/components/Label/Label.tsx
 var import_styled_components26 = __toESM(require("styled-components"));
-var import_jsx_runtime168 = require("react/jsx-runtime");
+var import_jsx_runtime169 = require("react/jsx-runtime");
 var requiredStyle = import_styled_components26.css`
   &::after {
     color: red; /* TODO need a color for this */
@@ -5985,7 +6045,7 @@ var Label = ({
   required = false,
   screenReaderOnly = false,
   ...otherProps
-}) => /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
   StyledLabel,
   {
     disabled,
@@ -6000,7 +6060,7 @@ Label.displayName = "Label";
 // src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
 var import_styled_components27 = __toESM(require("styled-components"));
 var import_type_guards15 = require("@wistia/type-guards");
-var import_jsx_runtime169 = require("react/jsx-runtime");
+var import_jsx_runtime170 = require("react/jsx-runtime");
 var VisuallyHidden = import_styled_components27.default.div({ ...visuallyHiddenStyle });
 var VisuallyHiddenButFocusable = import_styled_components27.default.div({
   "&:not(:focus-within)": visuallyHiddenStyle
@@ -6013,16 +6073,16 @@ var ScreenReaderOnly = ({
 }) => {
   const accessibleText = (0, import_type_guards15.isNotNil)(text) ? text : children;
   if (focusable) {
-    return /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
+    return /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(VisuallyHidden, { ...otherProps, children: accessibleText });
+  return /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(VisuallyHidden, { ...otherProps, children: accessibleText });
 };
 ScreenReaderOnly.displayName = "ScreenReaderOnly";
 
 // src/components/Stack/Stack.tsx
 var import_react13 = require("react");
 var import_styled_components28 = __toESM(require("styled-components"));
-var import_jsx_runtime170 = require("react/jsx-runtime");
+var import_jsx_runtime171 = require("react/jsx-runtime");
 var DEFAULT_ELEMENT2 = "div";
 var StyledStack = import_styled_components28.default.div`
   display: flex;
@@ -6037,7 +6097,7 @@ var StackComponent = (0, import_react13.forwardRef)(
   ({ renderAs, direction = "vertical", gap = "space-02", ...props }, ref) => {
     const responsiveGap = useResponsiveProp(gap);
     const responsiveDirection = useResponsiveProp(direction);
-    return /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(
       StyledStack,
       {
         ref,
@@ -6055,7 +6115,7 @@ var Stack = makePolymorphic(StackComponent);
 // src/components/Text/Text.tsx
 var import_react14 = require("react");
 var import_styled_components29 = __toESM(require("styled-components"));
-var import_jsx_runtime171 = require("react/jsx-runtime");
+var import_jsx_runtime172 = require("react/jsx-runtime");
 var bodyBoldStyles = import_styled_components29.css`
   > strong,
   b {
@@ -6210,7 +6270,7 @@ var TextComponent = (0, import_react14.forwardRef)(
     renderAs,
     ...otherProps
   }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(
       StyledText,
       {
         ref,
@@ -6234,18 +6294,18 @@ var Text = makePolymorphic(TextComponent);
 // src/components/WistiaLogo/WistiaLogo.tsx
 var import_styled_components30 = __toESM(require("styled-components"));
 var import_type_guards16 = require("@wistia/type-guards");
-var import_jsx_runtime172 = require("react/jsx-runtime");
+var import_jsx_runtime173 = require("react/jsx-runtime");
 var renderBrandmark = (brandmarkColor, iconOnly) => {
   if (iconOnly) {
-    return /* @__PURE__ */ (0, import_jsx_runtime172.jsx)("g", { fill: brandmarkColor, children: /* @__PURE__ */ (0, import_jsx_runtime172.jsx)("path", { d: "M16.09 17.1h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 26.53c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87ZM32.14 0c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime173.jsx)("g", { fill: brandmarkColor, children: /* @__PURE__ */ (0, import_jsx_runtime173.jsx)("path", { d: "M16.09 17.1h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 26.53c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87ZM32.14 0c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime172.jsx)("g", { fill: brandmarkColor, children: /* @__PURE__ */ (0, import_jsx_runtime172.jsx)("path", { d: "M16.09 21.37h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 30.8c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87Zm16.05-17.1c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime173.jsx)("g", { fill: brandmarkColor, children: /* @__PURE__ */ (0, import_jsx_runtime173.jsx)("path", { d: "M16.09 21.37h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 30.8c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87Zm16.05-17.1c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" }) });
 };
 var renderLogotype = (logotypeColor, iconOnly) => {
   if (iconOnly) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime172.jsx)("g", { fill: logotypeColor, children: /* @__PURE__ */ (0, import_jsx_runtime172.jsx)("path", { d: "M70.16 8.66v15.18c0 1.68-.35 3.09-1.05 4.23a6.612 6.612 0 0 1-2.85 2.54c-1.19.55-2.52.82-4.01.82s-2.8-.28-4.01-.85a6.655 6.655 0 0 1-3.11-2.96c-.08.15-.16.29-.24.42a6.552 6.552 0 0 1-2.87 2.54c-1.2.56-2.54.85-4.01.85s-2.8-.27-3.94-.82a6.214 6.214 0 0 1-2.71-2.52c-.67-1.14-1.01-2.56-1.02-4.25l-.22-15.18h7.34V22.3c0 .82.19 1.37.56 1.67.39.28.85.42 1.38.42s1.02-.15 1.45-.45c.43-.3.65-.85.65-1.65V8.65h7.3v13.64c0 .8.22 1.35.65 1.65.43.3.91.45 1.45.45s.99-.14 1.36-.42c.39-.3.58-.85.58-1.67V8.66h7.34Zm2.45 0v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89A3.43 3.43 0 0 0 78.28.44c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.13 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm8.86 1.96c-1.42.4-2.6 1.11-3.54 2.14-.93 1.02-1.4 2.4-1.4 4.12 0 1.11.17 2.09.51 2.94.36.85.82 1.62 1.38 2.34.22.28.55.65.98 1.11.37.4.64.72.8.96.18.24.27.47.27.69 0 .5-.4.87-1.2 1.09-.8.21-1.62.31-2.47.31-.1-.01-.22-.02-.33-.02l1.02 6.94c.42.07.92.11 1.51.11 1.9 0 3.6-.28 5.1-.85 1.5-.56 2.68-1.42 3.54-2.56.88-1.14 1.31-2.55 1.31-4.23 0-.68-.07-1.31-.22-1.87-.13-.58-.32-1.09-.56-1.54a6.64 6.64 0 0 0-.8-1.27c-.3-.37-.74-.82-1.34-1.36-.39-.33-.67-.59-.85-.8-.18-.22-.27-.45-.27-.67 0-.46.26-.79.78-.98.53-.19 1.17-.29 1.91-.29.25 0 .51.01.78.04l-.71-6.88a10.4 10.4 0 0 0-1.56-.11c-1.66 0-3.21.21-4.65.62Zm19.54 15.71c-.99 0-1.71-.23-2.14-.69-.42-.47-.62-1.18-.62-2.11v-6.57h4.21V8.66h-4.21V3.38l-7.34 1.85V24.1c0 2.45.47 4.29 1.4 5.52.95 1.22 2.45 1.83 4.49 1.83.95 0 1.86-.07 2.74-.22.88-.13 1.62-.34 2.25-.62l1.38-6.3c-.55.1-1.27.16-2.16.16Zm4.13-15.8v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89a3.43 3.43 0 0 0-1.42-1.27c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.14 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm27.51 1.87v22.26h-7.34v-2.28c-.41.43-.85.83-1.34 1.19-1.44 1.07-3.12 1.6-5.05 1.6s-3.61-.52-5.1-1.56c-1.48-1.05-2.63-2.47-3.45-4.25-.82-1.78-1.22-3.73-1.22-5.85s.41-4.07 1.22-5.83c.82-1.78 1.97-3.19 3.45-4.23 1.48-1.05 3.18-1.58 5.1-1.58s3.61.53 5.05 1.6c.48.36.93.75 1.34 1.19V8.66h7.34Zm-7.1 11.11c0-.8-.19-1.53-.56-2.18-.37-.67-.88-1.19-1.54-1.58-.64-.39-1.34-.58-2.09-.58s-1.45.19-2.09.58c-.64.39-1.15.91-1.54 1.58-.37.67-.56 1.39-.56 2.18s.19 1.51.56 2.18c.39.67.9 1.19 1.54 1.58.64.39 1.34.58 2.09.58s1.45-.19 2.09-.58c.65-.39 1.16-.91 1.54-1.56.37-.67.56-1.4.56-2.2Z" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime173.jsx)("g", { fill: logotypeColor, children: /* @__PURE__ */ (0, import_jsx_runtime173.jsx)("path", { d: "M70.16 8.66v15.18c0 1.68-.35 3.09-1.05 4.23a6.612 6.612 0 0 1-2.85 2.54c-1.19.55-2.52.82-4.01.82s-2.8-.28-4.01-.85a6.655 6.655 0 0 1-3.11-2.96c-.08.15-.16.29-.24.42a6.552 6.552 0 0 1-2.87 2.54c-1.2.56-2.54.85-4.01.85s-2.8-.27-3.94-.82a6.214 6.214 0 0 1-2.71-2.52c-.67-1.14-1.01-2.56-1.02-4.25l-.22-15.18h7.34V22.3c0 .82.19 1.37.56 1.67.39.28.85.42 1.38.42s1.02-.15 1.45-.45c.43-.3.65-.85.65-1.65V8.65h7.3v13.64c0 .8.22 1.35.65 1.65.43.3.91.45 1.45.45s.99-.14 1.36-.42c.39-.3.58-.85.58-1.67V8.66h7.34Zm2.45 0v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89A3.43 3.43 0 0 0 78.28.44c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.13 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm8.86 1.96c-1.42.4-2.6 1.11-3.54 2.14-.93 1.02-1.4 2.4-1.4 4.12 0 1.11.17 2.09.51 2.94.36.85.82 1.62 1.38 2.34.22.28.55.65.98 1.11.37.4.64.72.8.96.18.24.27.47.27.69 0 .5-.4.87-1.2 1.09-.8.21-1.62.31-2.47.31-.1-.01-.22-.02-.33-.02l1.02 6.94c.42.07.92.11 1.51.11 1.9 0 3.6-.28 5.1-.85 1.5-.56 2.68-1.42 3.54-2.56.88-1.14 1.31-2.55 1.31-4.23 0-.68-.07-1.31-.22-1.87-.13-.58-.32-1.09-.56-1.54a6.64 6.64 0 0 0-.8-1.27c-.3-.37-.74-.82-1.34-1.36-.39-.33-.67-.59-.85-.8-.18-.22-.27-.45-.27-.67 0-.46.26-.79.78-.98.53-.19 1.17-.29 1.91-.29.25 0 .51.01.78.04l-.71-6.88a10.4 10.4 0 0 0-1.56-.11c-1.66 0-3.21.21-4.65.62Zm19.54 15.71c-.99 0-1.71-.23-2.14-.69-.42-.47-.62-1.18-.62-2.11v-6.57h4.21V8.66h-4.21V3.38l-7.34 1.85V24.1c0 2.45.47 4.29 1.4 5.52.95 1.22 2.45 1.83 4.49 1.83.95 0 1.86-.07 2.74-.22.88-.13 1.62-.34 2.25-.62l1.38-6.3c-.55.1-1.27.16-2.16.16Zm4.13-15.8v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89a3.43 3.43 0 0 0-1.42-1.27c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.14 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm27.51 1.87v22.26h-7.34v-2.28c-.41.43-.85.83-1.34 1.19-1.44 1.07-3.12 1.6-5.05 1.6s-3.61-.52-5.1-1.56c-1.48-1.05-2.63-2.47-3.45-4.25-.82-1.78-1.22-3.73-1.22-5.85s.41-4.07 1.22-5.83c.82-1.78 1.97-3.19 3.45-4.23 1.48-1.05 3.18-1.58 5.1-1.58s3.61.53 5.05 1.6c.48.36.93.75 1.34 1.19V8.66h7.34Zm-7.1 11.11c0-.8-.19-1.53-.56-2.18-.37-.67-.88-1.19-1.54-1.58-.64-.39-1.34-.58-2.09-.58s-1.45.19-2.09.58c-.64.39-1.15.91-1.54 1.58-.37.67-.56 1.39-.56 2.18s.19 1.51.56 2.18c.39.67.9 1.19 1.54 1.58.64.39 1.34.58 2.09.58s1.45-.19 2.09-.58c.65-.39 1.16-.91 1.54-1.56.37-.67.56-1.4.56-2.2Z" }) });
 };
 var computedViewBox = (iconOnly) => {
   if (iconOnly) {
@@ -6295,7 +6355,7 @@ var WistiaLogo = ({
   };
   const brandmarkColor = VARIANT_COLORS[variant].brandmark;
   const logotypeColor = VARIANT_COLORS[variant].logotype;
-  const Logo = /* @__PURE__ */ (0, import_jsx_runtime172.jsxs)(
+  const Logo = /* @__PURE__ */ (0, import_jsx_runtime173.jsxs)(
     WistiaLogoComponent,
     {
       $hoverColor: hoverColor,
@@ -6305,14 +6365,14 @@ var WistiaLogo = ({
       xmlns: "http://www.w3.org/2000/svg",
       ...otherProps,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime172.jsx)("title", { children: title }),
-        (0, import_type_guards16.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime172.jsx)("desc", { children: description }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime173.jsx)("title", { children: title }),
+        (0, import_type_guards16.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime173.jsx)("desc", { children: description }) : null,
         renderBrandmark(brandmarkColor, iconOnly),
         renderLogotype(logotypeColor, iconOnly)
       ]
     }
   );
-  return href !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime172.jsx)("a", { href, children: Logo }) : Logo;
+  return href !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime173.jsx)("a", { href, children: Logo }) : Logo;
 };
 WistiaLogo.displayName = "WistiaLogo";
 // Annotate the CommonJS export names for ESM import in node: