@wistia/ui 0.20.0 → 0.20.1

package/dist/index.js

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.20.0
+ * @license @wistia/ui v0.20.1
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -6487,15 +6487,33 @@ var RefreshIcon = (props) => /* @__PURE__ */ jsx155(
   }
 );
 
-// src/components/Icon/icons/ReplaceIcon.tsx
+// src/components/Icon/icons/RemixIcon.tsx
 import { jsx as jsx156 } from "react/jsx-runtime";
-var ReplaceIcon = (props) => /* @__PURE__ */ jsx156(
+var RemixIcon = (props) => /* @__PURE__ */ jsx156(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
     children: /* @__PURE__ */ jsx156(
+      "path",
+      {
+        d: "M2.30971 11.2705C2.86171 11.2093 3.32278 11.691 3.33705 12.2432C3.46757 16.9662 7.27243 20.667 12.0001 20.667C14.8872 20.667 17.5063 19.2363 19.1037 16.9316L17.1613 17.2002C16.6171 17.2672 16.1091 16.8934 16.0333 16.3467C15.9577 15.7997 16.3404 15.2949 16.8878 15.2188L20.8126 14.6758C21.351 14.6048 21.8635 14.9824 21.9396 15.5293L22.4835 19.4561C22.5595 20.0028 22.1777 20.5075 21.631 20.583C21.5841 20.5895 21.5379 20.5928 21.4923 20.5928C21.0008 20.5928 20.5722 20.231 20.5031 19.7305L20.3497 18.623C18.3603 21.1364 15.3202 22.667 12.0001 22.667C6.18107 22.667 1.49749 18.1113 1.33803 12.2969C1.32269 11.7452 1.75785 11.2856 2.30971 11.2705ZM12.0001 8.33301C14.0252 8.33301 15.6671 9.97496 15.6671 12C15.6671 14.0251 14.0252 15.667 12.0001 15.667C9.97511 15.667 8.33315 14.0251 8.33315 12C8.33315 9.97497 9.97511 8.33302 12.0001 8.33301ZM12.0001 1.33301C17.8184 1.33311 22.5019 5.88662 22.6622 11.7002C22.6778 12.2522 22.2417 12.7126 21.6896 12.7275C21.6807 12.7282 21.6711 12.7275 21.6622 12.7275C21.1225 12.7275 20.6782 12.2978 20.6632 11.7549C20.5321 7.03254 16.7271 3.33318 12.0001 3.33301C9.11427 3.33301 6.49396 4.76369 4.89662 7.06836L6.839 6.7998C7.37795 6.72489 7.88996 7.10605 7.96693 7.65332C8.04253 8.20025 7.65991 8.70512 7.11244 8.78125L3.18764 9.32422C3.14137 9.33009 3.09457 9.33301 3.04897 9.33301C2.55757 9.33279 2.12976 8.97119 2.06068 8.4707L1.51576 4.54395C1.43972 3.99716 1.82247 3.49244 2.36928 3.41699C2.92066 3.34152 3.42077 3.72214 3.49623 4.26953L3.65053 5.37891C5.64026 2.86531 8.68134 1.33301 12.0001 1.33301Z",
+        fill: "currentColor"
+      }
+    )
+  }
+);
+
+// src/components/Icon/icons/ReplaceIcon.tsx
+import { jsx as jsx157 } from "react/jsx-runtime";
+var ReplaceIcon = (props) => /* @__PURE__ */ jsx157(
+  "svg",
+  {
+    ...props,
+    viewBox: "0 0 24 24",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ jsx157(
       "path",
       {
         clipRule: "evenodd",
@@ -6508,14 +6526,14 @@ var ReplaceIcon = (props) => /* @__PURE__ */ jsx156(
 );
 
 // src/components/Icon/icons/ReplyIcon.tsx
-import { jsx as jsx157 } from "react/jsx-runtime";
-var ReplyIcon = (props) => /* @__PURE__ */ jsx157(
+import { jsx as jsx158 } from "react/jsx-runtime";
+var ReplyIcon = (props) => /* @__PURE__ */ jsx158(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx157(
+    children: /* @__PURE__ */ jsx158(
       "path",
       {
         clipRule: "evenodd",
@@ -6528,14 +6546,14 @@ var ReplyIcon = (props) => /* @__PURE__ */ jsx157(
 );
 
 // src/components/Icon/icons/RequestVideoIcon.tsx
-import { jsx as jsx158 } from "react/jsx-runtime";
-var RequestVideoIcon = (props) => /* @__PURE__ */ jsx158(
+import { jsx as jsx159 } from "react/jsx-runtime";
+var RequestVideoIcon = (props) => /* @__PURE__ */ jsx159(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx158(
+    children: /* @__PURE__ */ jsx159(
       "path",
       {
         clipRule: "evenodd",
@@ -6548,14 +6566,14 @@ var RequestVideoIcon = (props) => /* @__PURE__ */ jsx158(
 );
 
 // src/components/Icon/icons/RevertToOriginalIcon.tsx
-import { jsx as jsx159 } from "react/jsx-runtime";
-var RevertToOriginalIcon = (props) => /* @__PURE__ */ jsx159(
+import { jsx as jsx160 } from "react/jsx-runtime";
+var RevertToOriginalIcon = (props) => /* @__PURE__ */ jsx160(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx159(
+    children: /* @__PURE__ */ jsx160(
       "path",
       {
         clipRule: "evenodd",
@@ -6568,14 +6586,14 @@ var RevertToOriginalIcon = (props) => /* @__PURE__ */ jsx159(
 );
 
 // src/components/Icon/icons/RewindIcon.tsx
-import { jsx as jsx160 } from "react/jsx-runtime";
-var RewindIcon = (props) => /* @__PURE__ */ jsx160(
+import { jsx as jsx161 } from "react/jsx-runtime";
+var RewindIcon = (props) => /* @__PURE__ */ jsx161(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx160(
+    children: /* @__PURE__ */ jsx161(
       "path",
       {
         d: "M23.1796 5.02255C22.6636 4.71988 22.0489 4.71188 21.5262 4.99988L13.3329 9.53988V6.45855C13.3329 5.86255 13.0262 5.32521 12.5129 5.02255C11.9982 4.71988 11.3809 4.71055 10.8596 5.00121L0.859573 10.5412C0.330239 10.8345 -0.000427246 11.3932 -0.000427246 11.9999C-0.000427246 12.6065 0.328906 13.1652 0.859573 13.4585L10.8596 18.9985C11.1129 19.1399 11.3902 19.2105 11.6662 19.2105C11.9582 19.2105 12.2489 19.1319 12.5129 18.9772C13.0262 18.6745 13.3329 18.1372 13.3329 17.5412V14.4599L21.5262 18.9985C21.7796 19.1399 22.0569 19.2105 22.3329 19.2105C22.6249 19.2105 22.9156 19.1319 23.1796 18.9772C23.6929 18.6745 23.9996 18.1372 23.9996 17.5412V6.45855C23.9996 5.86255 23.6929 5.32521 23.1796 5.02255Z",
@@ -6586,14 +6604,14 @@ var RewindIcon = (props) => /* @__PURE__ */ jsx160(
 );
 
 // src/components/Icon/icons/SaveIcon.tsx
-import { jsx as jsx161 } from "react/jsx-runtime";
-var SaveIcon = (props) => /* @__PURE__ */ jsx161(
+import { jsx as jsx162 } from "react/jsx-runtime";
+var SaveIcon = (props) => /* @__PURE__ */ jsx162(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx161(
+    children: /* @__PURE__ */ jsx162(
       "path",
       {
         d: "M21.3155 6.5692L17.4301 2.68387C16.9888 2.24254 16.4035 1.99987 15.7808 1.99987H5.87949C3.74083 1.99987 1.9995 3.7412 1.9995 5.87986V18.1198C1.9995 20.2585 3.74083 21.9998 5.87949 21.9998H18.1195C20.2581 21.9998 21.9995 20.2585 21.9995 18.1198V8.21852C21.9995 7.59586 21.7568 7.00919 21.3155 6.5692ZM6.66616 3.99987H14.6661V6.66653C14.6661 7.39986 14.0661 7.99986 13.3328 7.99986H7.99949C7.26616 7.99986 6.66616 7.39986 6.66616 6.66653V3.99987ZM17.3328 19.9998H6.66616V14.6665C6.66616 13.9332 7.26616 13.3332 7.99949 13.3332H15.9995C16.7328 13.3332 17.3328 13.9332 17.3328 14.6665V19.9998Z",
@@ -6604,14 +6622,14 @@ var SaveIcon = (props) => /* @__PURE__ */ jsx161(
 );
 
 // src/components/Icon/icons/SaveAsCopyIcon.tsx
-import { jsx as jsx162 } from "react/jsx-runtime";
-var SaveAsCopyIcon = (props) => /* @__PURE__ */ jsx162(
+import { jsx as jsx163 } from "react/jsx-runtime";
+var SaveAsCopyIcon = (props) => /* @__PURE__ */ jsx163(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx162(
+    children: /* @__PURE__ */ jsx163(
       "path",
       {
         clipRule: "evenodd",
@@ -6624,14 +6642,14 @@ var SaveAsCopyIcon = (props) => /* @__PURE__ */ jsx162(
 );
 
 // src/components/Icon/icons/ScissorsIcon.tsx
-import { jsx as jsx163 } from "react/jsx-runtime";
-var ScissorsIcon = (props) => /* @__PURE__ */ jsx163(
+import { jsx as jsx164 } from "react/jsx-runtime";
+var ScissorsIcon = (props) => /* @__PURE__ */ jsx164(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx163(
+    children: /* @__PURE__ */ jsx164(
       "path",
       {
         d: "M8.03042 13.6605C7.73535 14.0006 7.25074 14.0917 6.8028 14.0461C6.54217 14.0195 6.27019 14.0236 5.96972 14.0236C3.76414 14.0236 2.01959 16.1038 1.97773 18.0156C1.93586 19.9273 3.23259 22.2035 5.96972 22.0076C8.70686 21.8116 9.96172 20.2211 9.96172 18.0156C9.96172 17.6742 9.91811 17.3462 9.83672 17.0336C9.73128 16.6286 9.79891 16.1824 10.0948 15.8865L11.2506 14.7307C11.6411 14.3401 12.2743 14.3401 12.6648 14.7307L13.8206 15.8865C14.1165 16.1824 14.1841 16.6286 14.0787 17.0336C13.9973 17.3462 13.9537 17.6742 13.9537 18.0156C13.9537 20.2211 15.1616 22.1277 17.9457 22.0076C20.1138 22.0076 21.8769 20.2813 21.9362 18.1275C21.9382 18.0533 21.9472 17.9794 21.9583 17.906C22.2072 16.2536 19.8847 13.8188 17.9457 14.0236C17.606 14.0236 17.2796 14.0667 16.9684 14.1474C16.561 14.2529 16.1121 14.1834 15.8164 13.8839L15.5341 13.5979C15.1988 13.2583 15.1485 12.7314 15.4153 12.3357C16.7051 10.4232 20.3129 5.04458 20.9214 3.82741C21.5171 2.63608 20.8216 2.27428 20.5213 2.17749C20.4397 2.15115 20.3538 2.15005 20.2692 2.16438C19.9626 2.21628 19.1552 2.39484 18.4294 2.91739C17.5596 3.54369 11.1772 10.0335 8.03042 13.6605ZM7.96572 18.0156C7.96572 19.1134 7.62753 20.2005 5.93739 20.2918C4.24725 20.3831 4.00273 19.3194 3.97372 18.0156C3.94472 16.7117 4.78907 16.3065 5.90361 16.2727C7.01816 16.2389 7.96572 16.9178 7.96572 18.0156ZM19.5954 17.9155C19.5954 19.0133 18.9851 19.6891 17.8773 19.6891C16.7695 19.6891 16.2146 19.1796 16.2146 18.0818C16.2146 16.984 16.7141 16.3637 17.8219 16.3637C18.9297 16.3637 19.5954 16.8177 19.5954 17.9155ZM3.59453 4.26526C3.95765 4.87977 7.97772 9.95022 8.7319 10.3133C9.48608 10.6765 11.7442 7.95976 11.3532 7.17765C10.9621 6.39553 4.78187 2.23266 3.97372 2.04758C3.45763 1.92939 3.19544 2.20587 3.07334 2.42113C2.99439 2.56032 2.99979 2.7259 3.0443 2.87961C3.14116 3.21412 3.3405 3.83537 3.59453 4.26526Z",
@@ -6642,14 +6660,14 @@ var ScissorsIcon = (props) => /* @__PURE__ */ jsx163(
 );
 
 // src/components/Icon/icons/ScreenshareOffIcon.tsx
-import { jsx as jsx164 } from "react/jsx-runtime";
-var ScreenshareOffIcon = (props) => /* @__PURE__ */ jsx164(
+import { jsx as jsx165 } from "react/jsx-runtime";
+var ScreenshareOffIcon = (props) => /* @__PURE__ */ jsx165(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx164(
+    children: /* @__PURE__ */ jsx165(
       "path",
       {
         clipRule: "evenodd",
@@ -6662,14 +6680,14 @@ var ScreenshareOffIcon = (props) => /* @__PURE__ */ jsx164(
 );
 
 // src/components/Icon/icons/ScreenshareOnIcon.tsx
-import { jsx as jsx165 } from "react/jsx-runtime";
-var ScreenshareOnIcon = (props) => /* @__PURE__ */ jsx165(
+import { jsx as jsx166 } from "react/jsx-runtime";
+var ScreenshareOnIcon = (props) => /* @__PURE__ */ jsx166(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx165(
+    children: /* @__PURE__ */ jsx166(
       "path",
       {
         clipRule: "evenodd",
@@ -6682,14 +6700,14 @@ var ScreenshareOnIcon = (props) => /* @__PURE__ */ jsx165(
 );
 
 // src/components/Icon/icons/SearchIcon.tsx
-import { jsx as jsx166 } from "react/jsx-runtime";
-var SearchIcon = (props) => /* @__PURE__ */ jsx166(
+import { jsx as jsx167 } from "react/jsx-runtime";
+var SearchIcon = (props) => /* @__PURE__ */ jsx167(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx166(
+    children: /* @__PURE__ */ jsx167(
       "path",
       {
         clipRule: "evenodd",
@@ -6702,14 +6720,14 @@ var SearchIcon = (props) => /* @__PURE__ */ jsx166(
 );
 
 // src/components/Icon/icons/SendIcon.tsx
-import { jsx as jsx167 } from "react/jsx-runtime";
-var SendIcon = (props) => /* @__PURE__ */ jsx167(
+import { jsx as jsx168 } from "react/jsx-runtime";
+var SendIcon = (props) => /* @__PURE__ */ jsx168(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx167(
+    children: /* @__PURE__ */ jsx168(
       "path",
       {
         d: "M21.0892 10.5011L5.8012 2.56248C5.1972 2.25048 4.47187 2.32915 3.94787 2.75981C3.4252 3.19181 3.21187 3.89181 3.40387 4.54114L5.3172 10.9998H11.8478C12.3998 10.9998 12.8478 11.4478 12.8478 11.9998C12.8478 12.5518 12.3998 12.9998 11.8478 12.9998H5.3172L3.40387 19.4584C3.21054 20.1091 3.4252 20.8078 3.94787 21.2398C4.2572 21.4944 4.63853 21.6264 5.02253 21.6264C5.28787 21.6264 5.55453 21.5638 5.8012 21.4358L21.0892 13.4971C21.6505 13.2051 21.9998 12.6318 21.9998 11.9985C21.9998 11.3651 21.6505 10.7931 21.0892 10.5011Z",
@@ -6720,14 +6738,14 @@ var SendIcon = (props) => /* @__PURE__ */ jsx167(
 );
 
 // src/components/Icon/icons/ShapesIcon.tsx
-import { jsx as jsx168 } from "react/jsx-runtime";
-var ShapesIcon = (props) => /* @__PURE__ */ jsx168(
+import { jsx as jsx169 } from "react/jsx-runtime";
+var ShapesIcon = (props) => /* @__PURE__ */ jsx169(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx168(
+    children: /* @__PURE__ */ jsx169(
       "path",
       {
         clipRule: "evenodd",
@@ -6740,14 +6758,14 @@ var ShapesIcon = (props) => /* @__PURE__ */ jsx168(
 );
 
 // src/components/Icon/icons/ShareIcon.tsx
-import { jsx as jsx169 } from "react/jsx-runtime";
-var ShareIcon = (props) => /* @__PURE__ */ jsx169(
+import { jsx as jsx170 } from "react/jsx-runtime";
+var ShareIcon = (props) => /* @__PURE__ */ jsx170(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx169(
+    children: /* @__PURE__ */ jsx170(
       "path",
       {
         clipRule: "evenodd",
@@ -6760,14 +6778,14 @@ var ShareIcon = (props) => /* @__PURE__ */ jsx169(
 );
 
 // src/components/Icon/icons/SharingPermissionsIcon.tsx
-import { jsx as jsx170 } from "react/jsx-runtime";
-var SharingPermissionsIcon = (props) => /* @__PURE__ */ jsx170(
+import { jsx as jsx171 } from "react/jsx-runtime";
+var SharingPermissionsIcon = (props) => /* @__PURE__ */ jsx171(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx170(
+    children: /* @__PURE__ */ jsx171(
       "path",
       {
         clipRule: "evenodd",
@@ -6780,14 +6798,14 @@ var SharingPermissionsIcon = (props) => /* @__PURE__ */ jsx170(
 );
 
 // src/components/Icon/icons/SimulcastIcon.tsx
-import { jsx as jsx171 } from "react/jsx-runtime";
-var SimulcastIcon = (props) => /* @__PURE__ */ jsx171(
+import { jsx as jsx172 } from "react/jsx-runtime";
+var SimulcastIcon = (props) => /* @__PURE__ */ jsx172(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx171(
+    children: /* @__PURE__ */ jsx172(
       "path",
       {
         clipRule: "evenodd",
@@ -6800,14 +6818,14 @@ var SimulcastIcon = (props) => /* @__PURE__ */ jsx171(
 );
 
 // src/components/Icon/icons/SortIcon.tsx
-import { jsx as jsx172 } from "react/jsx-runtime";
-var SortIcon = (props) => /* @__PURE__ */ jsx172(
+import { jsx as jsx173 } from "react/jsx-runtime";
+var SortIcon = (props) => /* @__PURE__ */ jsx173(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx172(
+    children: /* @__PURE__ */ jsx173(
       "path",
       {
         clipRule: "evenodd",
@@ -6820,14 +6838,14 @@ var SortIcon = (props) => /* @__PURE__ */ jsx172(
 );
 
 // src/components/Icon/icons/SparkleIcon.tsx
-import { jsx as jsx173 } from "react/jsx-runtime";
-var SparkleIcon = (props) => /* @__PURE__ */ jsx173(
+import { jsx as jsx174 } from "react/jsx-runtime";
+var SparkleIcon = (props) => /* @__PURE__ */ jsx174(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx173(
+    children: /* @__PURE__ */ jsx174(
       "path",
       {
         clipRule: "evenodd",
@@ -6840,14 +6858,14 @@ var SparkleIcon = (props) => /* @__PURE__ */ jsx173(
 );
 
 // src/components/Icon/icons/SpeedIcon.tsx
-import { jsx as jsx174 } from "react/jsx-runtime";
-var SpeedIcon = (props) => /* @__PURE__ */ jsx174(
+import { jsx as jsx175 } from "react/jsx-runtime";
+var SpeedIcon = (props) => /* @__PURE__ */ jsx175(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx174(
+    children: /* @__PURE__ */ jsx175(
       "path",
       {
         clipRule: "evenodd",
@@ -6861,7 +6879,7 @@ var SpeedIcon = (props) => /* @__PURE__ */ jsx174(
 
 // src/components/Icon/icons/SpinnerIcon.tsx
 import { styled as styled3, keyframes } from "styled-components";
-import { jsx as jsx175 } from "react/jsx-runtime";
+import { jsx as jsx176 } from "react/jsx-runtime";
 var spin = keyframes`
   from {
     transform: rotate(0deg);
@@ -6874,13 +6892,13 @@ var SpinnerGroup = styled3.g`
   animation: ${spin} 1.5s linear infinite;
   transform-origin: 50% 50%;
 `;
-var SpinnerIcon = (props) => /* @__PURE__ */ jsx175(
+var SpinnerIcon = (props) => /* @__PURE__ */ jsx176(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx175(SpinnerGroup, { children: /* @__PURE__ */ jsx175(
+    children: /* @__PURE__ */ jsx176(SpinnerGroup, { children: /* @__PURE__ */ jsx176(
       "path",
       {
         clipRule: "evenodd",
@@ -6893,14 +6911,14 @@ var SpinnerIcon = (props) => /* @__PURE__ */ jsx175(
 );
 
 // src/components/Icon/icons/StatsIcon.tsx
-import { jsx as jsx176 } from "react/jsx-runtime";
-var StatsIcon = (props) => /* @__PURE__ */ jsx176(
+import { jsx as jsx177 } from "react/jsx-runtime";
+var StatsIcon = (props) => /* @__PURE__ */ jsx177(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx176(
+    children: /* @__PURE__ */ jsx177(
       "path",
       {
         clipRule: "evenodd",
@@ -6913,14 +6931,14 @@ var StatsIcon = (props) => /* @__PURE__ */ jsx176(
 );
 
 // src/components/Icon/icons/SwitchAccountsIcon.tsx
-import { jsx as jsx177 } from "react/jsx-runtime";
-var SwitchAccountsIcon = (props) => /* @__PURE__ */ jsx177(
+import { jsx as jsx178 } from "react/jsx-runtime";
+var SwitchAccountsIcon = (props) => /* @__PURE__ */ jsx178(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx177(
+    children: /* @__PURE__ */ jsx178(
       "path",
       {
         clipRule: "evenodd",
@@ -6933,14 +6951,14 @@ var SwitchAccountsIcon = (props) => /* @__PURE__ */ jsx177(
 );
 
 // src/components/Icon/icons/TagIcon.tsx
-import { jsx as jsx178 } from "react/jsx-runtime";
-var TagIcon = (props) => /* @__PURE__ */ jsx178(
+import { jsx as jsx179 } from "react/jsx-runtime";
+var TagIcon = (props) => /* @__PURE__ */ jsx179(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx178(
+    children: /* @__PURE__ */ jsx179(
       "path",
       {
         d: "M16.3331 1.33315H7.66641C5.64374 1.33315 3.99975 2.97714 3.99975 4.9998V21.6664C3.99975 22.0344 4.20241 22.3744 4.52775 22.5478C4.85308 22.7224 5.24775 22.7038 5.55441 22.4984L11.9997 18.2011L18.445 22.4984C18.6117 22.6091 18.8064 22.6664 18.9997 22.6664C19.1624 22.6664 19.3237 22.6278 19.4717 22.5478C19.797 22.3744 19.9997 22.0344 19.9997 21.6664V4.9998C19.9997 2.97714 18.3557 1.33315 16.3331 1.33315Z",
@@ -6951,14 +6969,14 @@ var TagIcon = (props) => /* @__PURE__ */ jsx178(
 );
 
 // src/components/Icon/icons/TeleprompterIcon.tsx
-import { jsx as jsx179 } from "react/jsx-runtime";
-var TeleprompterIcon = (props) => /* @__PURE__ */ jsx179(
+import { jsx as jsx180 } from "react/jsx-runtime";
+var TeleprompterIcon = (props) => /* @__PURE__ */ jsx180(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx179(
+    children: /* @__PURE__ */ jsx180(
       "path",
       {
         clipRule: "evenodd",
@@ -6971,14 +6989,14 @@ var TeleprompterIcon = (props) => /* @__PURE__ */ jsx179(
 );
 
 // src/components/Icon/icons/TextSizeIcon.tsx
-import { jsx as jsx180 } from "react/jsx-runtime";
-var TextSizeIcon = (props) => /* @__PURE__ */ jsx180(
+import { jsx as jsx181 } from "react/jsx-runtime";
+var TextSizeIcon = (props) => /* @__PURE__ */ jsx181(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx180(
+    children: /* @__PURE__ */ jsx181(
       "path",
       {
         clipRule: "evenodd",
@@ -6991,14 +7009,14 @@ var TextSizeIcon = (props) => /* @__PURE__ */ jsx180(
 );
 
 // src/components/Icon/icons/ThumbnailIcon.tsx
-import { jsx as jsx181 } from "react/jsx-runtime";
-var ThumbnailIcon = (props) => /* @__PURE__ */ jsx181(
+import { jsx as jsx182 } from "react/jsx-runtime";
+var ThumbnailIcon = (props) => /* @__PURE__ */ jsx182(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx181(
+    children: /* @__PURE__ */ jsx182(
       "path",
       {
         clipRule: "evenodd",
@@ -7011,14 +7029,14 @@ var ThumbnailIcon = (props) => /* @__PURE__ */ jsx181(
 );
 
 // src/components/Icon/icons/ThumbsDownIcon.tsx
-import { jsx as jsx182 } from "react/jsx-runtime";
-var ThumbsDownIcon = (props) => /* @__PURE__ */ jsx182(
+import { jsx as jsx183 } from "react/jsx-runtime";
+var ThumbsDownIcon = (props) => /* @__PURE__ */ jsx183(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx182(
+    children: /* @__PURE__ */ jsx183(
       "path",
       {
         clipRule: "evenodd",
@@ -7031,14 +7049,14 @@ var ThumbsDownIcon = (props) => /* @__PURE__ */ jsx182(
 );
 
 // src/components/Icon/icons/ThumbsUpIcon.tsx
-import { jsx as jsx183 } from "react/jsx-runtime";
-var ThumbsUpIcon = (props) => /* @__PURE__ */ jsx183(
+import { jsx as jsx184 } from "react/jsx-runtime";
+var ThumbsUpIcon = (props) => /* @__PURE__ */ jsx184(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx183(
+    children: /* @__PURE__ */ jsx184(
       "path",
       {
         clipRule: "evenodd",
@@ -7051,14 +7069,14 @@ var ThumbsUpIcon = (props) => /* @__PURE__ */ jsx183(
 );
 
 // src/components/Icon/icons/TimelineVerticalIcon.tsx
-import { jsx as jsx184 } from "react/jsx-runtime";
-var TimelineVerticalIcon = (props) => /* @__PURE__ */ jsx184(
+import { jsx as jsx185 } from "react/jsx-runtime";
+var TimelineVerticalIcon = (props) => /* @__PURE__ */ jsx185(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx184(
+    children: /* @__PURE__ */ jsx185(
       "path",
       {
         d: "M5 1.33301C5.55202 1.33301 5.99982 1.78102 6 2.33301V8.83691C7.34747 9.26465 8.33301 10.5129 8.33301 12C8.33301 13.4871 7.34747 14.7354 6 15.1631V21.667C5.99982 22.219 5.55202 22.667 5 22.667C4.44798 22.667 4.00018 22.219 4 21.667V15.1631C2.65253 14.7354 1.66699 13.4871 1.66699 12C1.66699 10.5129 2.65253 9.26465 4 8.83691V2.33301C4.00018 1.78102 4.44798 1.33301 5 1.33301ZM19 13.333C20.2887 13.333 21.333 14.3783 21.333 15.667V19C21.333 20.2887 20.2887 21.333 19 21.333H11.667C10.3783 21.333 9.33301 20.2887 9.33301 19V15.667C9.33301 14.3783 10.3783 13.333 11.667 13.333H19ZM5 10.667C4.26493 10.667 3.66699 11.2649 3.66699 12C3.66699 12.7351 4.26493 13.333 5 13.333C5.73507 13.333 6.33301 12.7351 6.33301 12C6.33301 11.2649 5.73507 10.667 5 10.667ZM19 2.66699C20.2887 2.66699 21.333 3.71133 21.333 5V8.33301C21.333 9.62167 20.2887 10.667 19 10.667H11.667C10.3783 10.667 9.33301 9.62167 9.33301 8.33301V5C9.33301 3.71133 10.3783 2.66699 11.667 2.66699H19Z",
@@ -7069,14 +7087,14 @@ var TimelineVerticalIcon = (props) => /* @__PURE__ */ jsx184(
 );
 
 // src/components/Icon/icons/TokenIcon.tsx
-import { jsx as jsx185 } from "react/jsx-runtime";
-var TokenIcon = (props) => /* @__PURE__ */ jsx185(
+import { jsx as jsx186 } from "react/jsx-runtime";
+var TokenIcon = (props) => /* @__PURE__ */ jsx186(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx185(
+    children: /* @__PURE__ */ jsx186(
       "path",
       {
         d: "M6.38086 19.0273C7.92121 20.2612 9.87483 21.001 12.002 21.001C14.1268 21.0009 16.0776 20.2618 17.6172 19.0303L19.04 20.4531C17.1326 22.0432 14.6794 23.0009 12.002 23.001C9.3223 23.001 6.86712 22.0416 4.95898 20.4492L6.38086 19.0273ZM20.4502 4.95801C22.0426 6.86614 23.0019 9.32133 23.002 12.001C23.0019 14.6784 22.0442 17.1316 20.4541 19.0391L19.0312 17.6162C20.2627 16.0766 21.0019 14.1258 21.002 12.001C21.0019 9.87386 20.2621 7.92025 19.0283 6.37988L20.4502 4.95801ZM4.9707 6.38379C3.7391 7.92345 3.00196 9.87597 3.00195 12.001C3.002 14.1237 3.73848 16.0734 4.96777 17.6123L3.54492 19.0352C1.95713 17.1284 1.002 14.6763 1.00195 12.001C1.00196 9.32345 1.9587 6.86941 3.54883 4.96191L4.9707 6.38379ZM12 5C15.866 5 19 8.13401 19 12C19 15.866 15.866 19 12 19C8.13401 19 5 15.866 5 12C5 8.13401 8.13401 5 12 5ZM9 12L12 15L15 12L12 9L9 12ZM12.002 1.00098C14.6773 1.00102 17.1293 1.95613 19.0361 3.54395L17.6133 4.9668C16.0744 3.7375 14.1246 3.00102 12.002 3.00098C9.87718 3.00099 7.92531 3.73839 6.38574 4.96973L4.96289 3.54785C6.87038 1.95772 9.32439 1.00099 12.002 1.00098Z",
@@ -7087,14 +7105,14 @@ var TokenIcon = (props) => /* @__PURE__ */ jsx185(
 );
 
 // src/components/Icon/icons/TranscriptIcon.tsx
-import { jsx as jsx186 } from "react/jsx-runtime";
-var TranscriptIcon = (props) => /* @__PURE__ */ jsx186(
+import { jsx as jsx187 } from "react/jsx-runtime";
+var TranscriptIcon = (props) => /* @__PURE__ */ jsx187(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx186(
+    children: /* @__PURE__ */ jsx187(
       "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",
@@ -7105,14 +7123,14 @@ var TranscriptIcon = (props) => /* @__PURE__ */ jsx186(
 );
 
 // src/components/Icon/icons/TransitionsIcon.tsx
-import { jsx as jsx187 } from "react/jsx-runtime";
-var TransitionsIcon = (props) => /* @__PURE__ */ jsx187(
+import { jsx as jsx188 } from "react/jsx-runtime";
+var TransitionsIcon = (props) => /* @__PURE__ */ jsx188(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx187(
+    children: /* @__PURE__ */ jsx188(
       "path",
       {
         clipRule: "evenodd",
@@ -7125,14 +7143,14 @@ var TransitionsIcon = (props) => /* @__PURE__ */ jsx187(
 );
 
 // src/components/Icon/icons/TransparencyIcon.tsx
-import { jsx as jsx188 } from "react/jsx-runtime";
-var TransparencyIcon = (props) => /* @__PURE__ */ jsx188(
+import { jsx as jsx189 } from "react/jsx-runtime";
+var TransparencyIcon = (props) => /* @__PURE__ */ jsx189(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx188(
+    children: /* @__PURE__ */ jsx189(
       "path",
       {
         clipRule: "evenodd",
@@ -7145,14 +7163,14 @@ var TransparencyIcon = (props) => /* @__PURE__ */ jsx188(
 );
 
 // src/components/Icon/icons/TrendsIcon.tsx
-import { jsx as jsx189 } from "react/jsx-runtime";
-var TrendsIcon = (props) => /* @__PURE__ */ jsx189(
+import { jsx as jsx190 } from "react/jsx-runtime";
+var TrendsIcon = (props) => /* @__PURE__ */ jsx190(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx189(
+    children: /* @__PURE__ */ jsx190(
       "path",
       {
         clipRule: "evenodd",
@@ -7165,14 +7183,14 @@ var TrendsIcon = (props) => /* @__PURE__ */ jsx189(
 );
 
 // src/components/Icon/icons/TrialUnlockClockIcon.tsx
-import { jsx as jsx190 } from "react/jsx-runtime";
-var TrialUnlockClockIcon = (props) => /* @__PURE__ */ jsx190(
+import { jsx as jsx191 } from "react/jsx-runtime";
+var TrialUnlockClockIcon = (props) => /* @__PURE__ */ jsx191(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx190(
+    children: /* @__PURE__ */ jsx191(
       "path",
       {
         clipRule: "evenodd",
@@ -7185,14 +7203,14 @@ var TrialUnlockClockIcon = (props) => /* @__PURE__ */ jsx190(
 );
 
 // src/components/Icon/icons/TrimIcon.tsx
-import { jsx as jsx191 } from "react/jsx-runtime";
-var TrimIcon = (props) => /* @__PURE__ */ jsx191(
+import { jsx as jsx192 } from "react/jsx-runtime";
+var TrimIcon = (props) => /* @__PURE__ */ jsx192(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx191(
+    children: /* @__PURE__ */ jsx192(
       "path",
       {
         clipRule: "evenodd",
@@ -7205,14 +7223,14 @@ var TrimIcon = (props) => /* @__PURE__ */ jsx191(
 );
 
 // src/components/Icon/icons/TurnstileIcon.tsx
-import { jsx as jsx192 } from "react/jsx-runtime";
-var TurnstileIcon = (props) => /* @__PURE__ */ jsx192(
+import { jsx as jsx193 } from "react/jsx-runtime";
+var TurnstileIcon = (props) => /* @__PURE__ */ jsx193(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx192(
+    children: /* @__PURE__ */ jsx193(
       "path",
       {
         clipRule: "evenodd",
@@ -7225,14 +7243,14 @@ var TurnstileIcon = (props) => /* @__PURE__ */ jsx192(
 );
 
 // src/components/Icon/icons/UndoIcon.tsx
-import { jsx as jsx193 } from "react/jsx-runtime";
-var UndoIcon = (props) => /* @__PURE__ */ jsx193(
+import { jsx as jsx194 } from "react/jsx-runtime";
+var UndoIcon = (props) => /* @__PURE__ */ jsx194(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx193(
+    children: /* @__PURE__ */ jsx194(
       "path",
       {
         clipRule: "evenodd",
@@ -7245,14 +7263,14 @@ var UndoIcon = (props) => /* @__PURE__ */ jsx193(
 );
 
 // src/components/Icon/icons/UnlockIcon.tsx
-import { jsx as jsx194 } from "react/jsx-runtime";
-var UnlockIcon = (props) => /* @__PURE__ */ jsx194(
+import { jsx as jsx195 } from "react/jsx-runtime";
+var UnlockIcon = (props) => /* @__PURE__ */ jsx195(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx194(
+    children: /* @__PURE__ */ jsx195(
       "path",
       {
         clipRule: "evenodd",
@@ -7265,14 +7283,14 @@ var UnlockIcon = (props) => /* @__PURE__ */ jsx194(
 );
 
 // src/components/Icon/icons/UploadIcon.tsx
-import { jsx as jsx195 } from "react/jsx-runtime";
-var UploadIcon = (props) => /* @__PURE__ */ jsx195(
+import { jsx as jsx196 } from "react/jsx-runtime";
+var UploadIcon = (props) => /* @__PURE__ */ jsx196(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx195(
+    children: /* @__PURE__ */ jsx196(
       "path",
       {
         clipRule: "evenodd",
@@ -7285,14 +7303,14 @@ var UploadIcon = (props) => /* @__PURE__ */ jsx195(
 );
 
 // src/components/Icon/icons/UsersPermissionsIcon.tsx
-import { jsx as jsx196 } from "react/jsx-runtime";
-var UsersPermissionsIcon = (props) => /* @__PURE__ */ jsx196(
+import { jsx as jsx197 } from "react/jsx-runtime";
+var UsersPermissionsIcon = (props) => /* @__PURE__ */ jsx197(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx196(
+    children: /* @__PURE__ */ jsx197(
       "path",
       {
         clipRule: "evenodd",
@@ -7305,14 +7323,14 @@ var UsersPermissionsIcon = (props) => /* @__PURE__ */ jsx196(
 );
 
 // src/components/Icon/icons/ViewStreamIcon.tsx
-import { jsx as jsx197 } from "react/jsx-runtime";
-var ViewStreamIcon = (props) => /* @__PURE__ */ jsx197(
+import { jsx as jsx198 } from "react/jsx-runtime";
+var ViewStreamIcon = (props) => /* @__PURE__ */ jsx198(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx197(
+    children: /* @__PURE__ */ jsx198(
       "path",
       {
         clipRule: "evenodd",
@@ -7325,14 +7343,14 @@ var ViewStreamIcon = (props) => /* @__PURE__ */ jsx197(
 );
 
 // src/components/Icon/icons/VolumeIcon.tsx
-import { jsx as jsx198 } from "react/jsx-runtime";
-var VolumeIcon = (props) => /* @__PURE__ */ jsx198(
+import { jsx as jsx199 } from "react/jsx-runtime";
+var VolumeIcon = (props) => /* @__PURE__ */ jsx199(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx198(
+    children: /* @__PURE__ */ jsx199(
       "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",
@@ -7343,14 +7361,14 @@ var VolumeIcon = (props) => /* @__PURE__ */ jsx198(
 );
 
 // src/components/Icon/icons/VolumeOffIcon.tsx
-import { jsx as jsx199 } from "react/jsx-runtime";
-var VolumeOffIcon = (props) => /* @__PURE__ */ jsx199(
+import { jsx as jsx200 } from "react/jsx-runtime";
+var VolumeOffIcon = (props) => /* @__PURE__ */ jsx200(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx199(
+    children: /* @__PURE__ */ jsx200(
       "path",
       {
         clipRule: "evenodd",
@@ -7363,14 +7381,14 @@ var VolumeOffIcon = (props) => /* @__PURE__ */ jsx199(
 );
 
 // src/components/Icon/icons/VolumeUpIcon.tsx
-import { jsx as jsx200 } from "react/jsx-runtime";
-var VolumeUpIcon = (props) => /* @__PURE__ */ jsx200(
+import { jsx as jsx201 } from "react/jsx-runtime";
+var VolumeUpIcon = (props) => /* @__PURE__ */ jsx201(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx200(
+    children: /* @__PURE__ */ jsx201(
       "path",
       {
         clipRule: "evenodd",
@@ -7383,14 +7401,14 @@ var VolumeUpIcon = (props) => /* @__PURE__ */ jsx200(
 );
 
 // src/components/Icon/icons/VolumeXIcon.tsx
-import { jsx as jsx201 } from "react/jsx-runtime";
-var VolumeXIcon = (props) => /* @__PURE__ */ jsx201(
+import { jsx as jsx202 } from "react/jsx-runtime";
+var VolumeXIcon = (props) => /* @__PURE__ */ jsx202(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx201(
+    children: /* @__PURE__ */ jsx202(
       "path",
       {
         clipRule: "evenodd",
@@ -7403,14 +7421,14 @@ var VolumeXIcon = (props) => /* @__PURE__ */ jsx201(
 );
 
 // src/components/Icon/icons/WandIcon.tsx
-import { jsx as jsx202 } from "react/jsx-runtime";
-var WandIcon = (props) => /* @__PURE__ */ jsx202(
+import { jsx as jsx203 } from "react/jsx-runtime";
+var WandIcon = (props) => /* @__PURE__ */ jsx203(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx202(
+    children: /* @__PURE__ */ jsx203(
       "path",
       {
         clipRule: "evenodd",
@@ -7423,14 +7441,14 @@ var WandIcon = (props) => /* @__PURE__ */ jsx202(
 );
 
 // src/components/Icon/icons/WaveformIcon.tsx
-import { jsx as jsx203 } from "react/jsx-runtime";
-var WaveformIcon = (props) => /* @__PURE__ */ jsx203(
+import { jsx as jsx204 } from "react/jsx-runtime";
+var WaveformIcon = (props) => /* @__PURE__ */ jsx204(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx203(
+    children: /* @__PURE__ */ jsx204(
       "path",
       {
         clipRule: "evenodd",
@@ -7443,14 +7461,14 @@ var WaveformIcon = (props) => /* @__PURE__ */ jsx203(
 );
 
 // src/components/Icon/icons/WebhookIcon.tsx
-import { jsx as jsx204 } from "react/jsx-runtime";
-var WebhookIcon = (props) => /* @__PURE__ */ jsx204(
+import { jsx as jsx205 } from "react/jsx-runtime";
+var WebhookIcon = (props) => /* @__PURE__ */ jsx205(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx204(
+    children: /* @__PURE__ */ jsx205(
       "path",
       {
         d: "M2.92116 13.1937C3.41849 12.955 4.01648 13.1638 4.25515 13.6624C4.49381 14.1597 4.28409 14.7577 3.78542 14.9964C3.71348 15.0297 3.64411 15.0668 3.57351 15.1068C2.14151 15.9334 1.64821 17.772 2.47487 19.2054C3.3029 20.6373 5.14289 21.1296 6.57351 20.303C7.50814 19.7631 8.0828 18.7574 8.07351 17.6761C8.07084 17.4081 8.17457 17.1516 8.36257 16.9622C8.55055 16.773 8.80692 16.6663 9.07351 16.6663H17.6663C17.7969 16.4917 17.9643 16.3409 18.1643 16.2249C18.9616 15.7652 19.9817 16.039 20.4417 16.8362L20.4426 16.8343C20.9026 17.6315 20.6293 18.6515 19.8323 19.1116C19.1016 19.5343 18.2031 19.317 17.7005 18.6663H9.97976C9.70243 20.0663 8.83482 21.3055 7.57351 22.0335C6.78817 22.4868 5.92932 22.7025 5.08132 22.7025C3.35207 22.7024 1.66781 21.8069 0.742451 20.2044C-0.636164 17.8165 0.185358 14.7524 2.57448 13.3763C2.68906 13.3097 2.80525 13.2496 2.92116 13.1937ZM12.0003 3.96124C12.9201 3.96138 13.6663 4.70832 13.6663 5.62823C13.6662 5.86137 13.6177 6.08134 13.5325 6.28253L17.3733 12.9359C18.724 12.4745 20.2321 12.6082 21.4934 13.3362C22.6507 14.0042 23.4792 15.0818 23.8245 16.3724L23.8225 16.3694C24.1678 17.6601 23.9905 19.0071 23.3225 20.1644C22.3985 21.7655 20.7129 22.6624 18.9837 22.6624C18.1358 22.6624 17.2787 22.4477 16.4934 21.9944C16.3775 21.9265 16.2651 21.8578 16.1585 21.7845C15.7038 21.4712 15.5906 20.8475 15.9026 20.3929C16.2146 19.9385 16.8387 19.8239 17.2932 20.137C17.3571 20.1823 17.4252 20.225 17.4944 20.265C18.9237 21.089 20.7644 20.5987 21.5911 19.1653C21.9923 18.4707 22.0989 17.6626 21.8909 16.888C21.6842 16.1147 21.1881 15.468 20.4934 15.0667C19.5575 14.5254 18.3977 14.5309 17.4671 15.0814C17.2377 15.216 16.964 15.2548 16.7053 15.1868C16.4481 15.1188 16.2283 14.9506 16.095 14.72L11.7825 7.25031C10.9693 7.13956 10.3334 6.47205 10.3333 5.62823C10.3333 4.70823 11.0803 3.96124 12.0003 3.96124ZM11.9983 0.630188C14.7555 0.630188 16.9981 2.87306 16.9983 5.63019C16.9983 5.76352 16.9934 5.89601 16.9827 6.02667C16.9387 6.57859 16.4548 6.98524 15.9055 6.94269C15.3549 6.89736 14.9443 6.41612 14.9895 5.86554C14.9962 5.78821 14.9983 5.70885 14.9983 5.63019C14.9981 3.97573 13.6528 2.63019 11.9983 2.63019C10.344 2.63039 8.99856 3.97585 8.99831 5.63019C8.99831 6.70874 9.58254 7.71045 10.5237 8.24249C10.7557 8.37449 10.9257 8.59356 10.9964 8.85089C11.0669 9.10813 11.031 9.38301 10.8977 9.61359L6.6028 17.0521C6.68944 17.252 6.73757 17.4734 6.73757 17.7054C6.73753 18.6254 5.99055 19.3724 5.07058 19.3724C4.15065 19.3723 3.40362 18.6253 3.40358 17.7054C3.40358 16.8627 4.04178 16.193 4.85378 16.0823L8.71315 9.39777C7.63849 8.45777 7.00026 7.08521 7.00026 5.62921C7.00032 2.87192 9.24296 0.629211 12.0003 0.629211L11.9983 0.630188Z",
@@ -7461,14 +7479,14 @@ var WebhookIcon = (props) => /* @__PURE__ */ jsx204(
 );
 
 // src/components/Icon/icons/ZoomInIcon.tsx
-import { jsx as jsx205 } from "react/jsx-runtime";
-var ZoomInIcon = (props) => /* @__PURE__ */ jsx205(
+import { jsx as jsx206 } from "react/jsx-runtime";
+var ZoomInIcon = (props) => /* @__PURE__ */ jsx206(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx205(
+    children: /* @__PURE__ */ jsx206(
       "path",
       {
         clipRule: "evenodd",
@@ -7481,14 +7499,14 @@ var ZoomInIcon = (props) => /* @__PURE__ */ jsx205(
 );
 
 // src/components/Icon/icons/ZoomOutIcon.tsx
-import { jsx as jsx206 } from "react/jsx-runtime";
-var ZoomOutIcon = (props) => /* @__PURE__ */ jsx206(
+import { jsx as jsx207 } from "react/jsx-runtime";
+var ZoomOutIcon = (props) => /* @__PURE__ */ jsx207(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx206(
+    children: /* @__PURE__ */ jsx207(
       "path",
       {
         clipRule: "evenodd",
@@ -7651,6 +7669,7 @@ var iconMap = {
   "record-group": RecordGroupIcon,
   redo: RedoIcon,
   refresh: RefreshIcon,
+  remix: RemixIcon,
   replace: ReplaceIcon,
   reply: ReplyIcon,
   "request-video": RequestVideoIcon,
@@ -7722,7 +7741,7 @@ var useResponsiveProp = (values) => {
 };
 
 // src/components/Icon/Icon.tsx
-import { jsx as jsx207 } from "react/jsx-runtime";
+import { jsx as jsx208 } from "react/jsx-runtime";
 var iconSizeMap = {
   sm: "12",
   md: "16",
@@ -7776,7 +7795,7 @@ var Icon = ({
     ...style
   };
   const iconColor = invertColor ? "var(--wui-color-icon-on-fill)" : "var(--wui-color-icon)";
-  return /* @__PURE__ */ jsx207(
+  return /* @__PURE__ */ jsx208(
     StyledIcon,
     {
       $colorScheme: colorScheme,
@@ -7801,7 +7820,7 @@ import { forwardRef } from "react";
 import { styled as styled5 } from "styled-components";
 import { Link as RouterLink, useInRouterContext } from "react-router";
 import { isFunction as isFunction2, isNil as isNil6, isNotNil as isNotNil5, isNotUndefined as isNotUndefined3, isUndefined as isUndefined2 } from "@wistia/type-guards";
-import { jsx as jsx208, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx209, jsxs as jsxs9 } from "react/jsx-runtime";
 var generateHref = (href, type, disabled) => {
   if (disabled || isNil6(href)) {
     return void 0;
@@ -7895,7 +7914,7 @@ var Link = forwardRef(
       "aria-disabled": ariaDisabled ?? (disabled ? "true" : void 0)
     };
     if (isButton(props)) {
-      return /* @__PURE__ */ jsx208(
+      return /* @__PURE__ */ jsx209(
         StyledLink,
         {
           ref,
@@ -7944,7 +7963,7 @@ var Link = forwardRef(
 Link.displayName = "Link_UI";
 
 // src/components/Button/Button.tsx
-import { Fragment as Fragment2, jsx as jsx209, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx210, jsxs as jsxs10 } from "react/jsx-runtime";
 var isLink2 = (props) => isNotUndefined4(props.href);
 var StyledButton = styled6.button`
   ${buttonResetCss}
@@ -7982,7 +8001,7 @@ var ButtonContent = ({
   fullWidth = false
 }) => {
   return /* @__PURE__ */ jsxs10(Fragment2, { children: [
-    isLoading ? /* @__PURE__ */ jsx209(StyledButtonLoading, { children: /* @__PURE__ */ jsx209(Icon, { type: "spinner" }) }) : null,
+    isLoading ? /* @__PURE__ */ jsx210(StyledButtonLoading, { children: /* @__PURE__ */ jsx210(Icon, { type: "spinner" }) }) : null,
     /* @__PURE__ */ jsxs10(
       StyledButtonContent,
       {
@@ -7991,7 +8010,7 @@ var ButtonContent = ({
         $isLoading: isLoading,
         children: [
           leftIcon ?? null,
-          /* @__PURE__ */ jsx209(StyledButtonContentLabel, { $fullWidth: fullWidth, children }),
+          /* @__PURE__ */ jsx210(StyledButtonContentLabel, { $fullWidth: fullWidth, children }),
           rightIcon ?? null
         ]
       }
@@ -8031,7 +8050,7 @@ var Button = forwardRef2(
       commonProps.className = `${className ?? ""} force-state-${forceState}`;
     }
     if (isLink2(props)) {
-      return /* @__PURE__ */ jsx209(
+      return /* @__PURE__ */ jsx210(
         StyledButton,
         {
           ref,
@@ -8039,7 +8058,7 @@ var Button = forwardRef2(
           disabled: isAriaDisabled(),
           ...props,
           ...commonProps,
-          children: unstyled ? children : /* @__PURE__ */ jsx209(
+          children: unstyled ? children : /* @__PURE__ */ jsx210(
             ButtonContent,
             {
               fullWidth: responsiveFullWidth,
@@ -8061,7 +8080,7 @@ var Button = forwardRef2(
         onClick(event);
       }
     };
-    return /* @__PURE__ */ jsx209(
+    return /* @__PURE__ */ jsx210(
       StyledButton,
       {
         ref,
@@ -8070,7 +8089,7 @@ var Button = forwardRef2(
         ...props,
         ...commonProps,
         "data-wui-button": true,
-        children: unstyled ? children : /* @__PURE__ */ jsx209(
+        children: unstyled ? children : /* @__PURE__ */ jsx210(
           ButtonContent,
           {
             fullWidth: responsiveFullWidth,
@@ -8087,7 +8106,7 @@ var Button = forwardRef2(
 Button.displayName = "Button_UI";
 
 // src/components/ActionButton/ActionButton.tsx
-import { jsx as jsx210, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx211, jsxs as jsxs11 } from "react/jsx-runtime";
 var StyledActionButton = styled7(Button)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   display: grid;
@@ -8223,15 +8242,15 @@ var ActionButton = forwardRef3(
         forceState,
         unstyled: true,
         children: [
-          /* @__PURE__ */ jsx210(StyledMainIcon, { children: icon }),
-          /* @__PURE__ */ jsx210(StyledSecondaryIcon, { $hideUntilHover: variant === "default", children: /* @__PURE__ */ jsx210(
+          /* @__PURE__ */ jsx211(StyledMainIcon, { children: icon }),
+          /* @__PURE__ */ jsx211(StyledSecondaryIcon, { $hideUntilHover: variant === "default", children: /* @__PURE__ */ jsx211(
             Icon,
             {
               colorScheme: variant === "gated" ? "purple" : "inherit",
               type: secondaryIconMap[variant]
             }
           ) }),
-          /* @__PURE__ */ jsx210(StyledLabel, { $disabled: disabled, children })
+          /* @__PURE__ */ jsx211(StyledLabel, { $disabled: disabled, children })
         ]
       }
     );
@@ -8261,7 +8280,7 @@ var formatNameForDisplay = (name) => {
 // src/components/Image/Image.tsx
 import { styled as styled8 } from "styled-components";
 import { isNotNil as isNotNil7 } from "@wistia/type-guards";
-import { jsx as jsx211 } from "react/jsx-runtime";
+import { jsx as jsx212 } from "react/jsx-runtime";
 var getFillStyle = (fillContainer) => {
   if (fillContainer === "horizontal") {
     return "width: 100%;";
@@ -8294,7 +8313,7 @@ var Image = ({
   onLoad,
   onError,
   ...props
-}) => /* @__PURE__ */ jsx211(
+}) => /* @__PURE__ */ jsx212(
   StyledImage,
   {
     $borderRadius: borderRadius,
@@ -8313,7 +8332,7 @@ Image.displayName = "Image_UI";
 
 // src/components/ColorSchemeWrapper/ColorSchemeWrapper.tsx
 import { styled as styled9 } from "styled-components";
-import { jsx as jsx212 } from "react/jsx-runtime";
+import { jsx as jsx213 } from "react/jsx-runtime";
 var defaultColorSchemeOptions = ["standard", "inherit"];
 var semanticColorSchemeOptions = ["error", "info", "success", "warning"];
 var brandColorSchemeOptions = [
@@ -8344,7 +8363,7 @@ var ColorSchemeWrapper = ({
   colorScheme = "inherit",
   children,
   ...props
-}) => /* @__PURE__ */ jsx212(
+}) => /* @__PURE__ */ jsx213(
   StyledColorSchemeWrapper,
   {
     $colorScheme: colorScheme,
@@ -8356,7 +8375,7 @@ var ColorSchemeWrapper = ({
 ColorSchemeWrapper.displayName = "ColorSchemeWrapper_UI";
 
 // src/components/Avatar/Avatar.tsx
-import { jsx as jsx213, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx214, jsxs as jsxs12 } from "react/jsx-runtime";
 var avatarSizeMap = {
   sm: 16,
   md: 24,
@@ -8370,14 +8389,14 @@ var Initial = ({ initial }) => /* @__PURE__ */ jsxs12(
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
     children: [
-      /* @__PURE__ */ jsx213(
+      /* @__PURE__ */ jsx214(
         "path",
         {
           d: "M0 13.5h24",
           id: "P"
         }
       ),
-      /* @__PURE__ */ jsx213("text", { children: /* @__PURE__ */ jsx213(
+      /* @__PURE__ */ jsx214("text", { children: /* @__PURE__ */ jsx214(
         "textPath",
         {
           dominantBaseline: "middle",
@@ -8474,8 +8493,8 @@ var Avatar = ({
       $heightAndWidth: avatarSize,
       ...props,
       children: [
-        /* @__PURE__ */ jsx213(Initial, { initial: formatNameForDisplay(name) }),
-        isNotNil8(imageUrl) && imageLoadState !== "error" && /* @__PURE__ */ jsx213(
+        /* @__PURE__ */ jsx214(Initial, { initial: formatNameForDisplay(name) }),
+        isNotNil8(imageUrl) && imageLoadState !== "error" && /* @__PURE__ */ jsx214(
           Image,
           {
             alt: isNotNil8(name) ? name : "",
@@ -8496,7 +8515,7 @@ Avatar.displayName = "Avatar_UI";
 import { forwardRef as forwardRef4 } from "react";
 import { styled as styled11 } from "styled-components";
 import { isNotNil as isNotNil9 } from "@wistia/type-guards";
-import { jsx as jsx214, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx215, jsxs as jsxs13 } from "react/jsx-runtime";
 var StyledBadge = styled11.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   align-items: center;
@@ -8536,7 +8555,7 @@ var Badge = forwardRef4(
         $variant: variant,
         children: [
           hasIcon ? icon : null,
-          isNotNil9(label) ? /* @__PURE__ */ jsx214("span", { children: label }) : null
+          isNotNil9(label) ? /* @__PURE__ */ jsx215("span", { children: label }) : null
         ]
       }
     );
@@ -8560,7 +8579,7 @@ var makePolymorphic = (component) => {
 };
 
 // src/components/Box/Box.tsx
-import { jsx as jsx215 } from "react/jsx-runtime";
+import { jsx as jsx216 } from "react/jsx-runtime";
 var getGapStyle = (gap) => {
   if (isNotNil10(gap)) {
     if (isRecord3(gap)) {
@@ -8717,7 +8736,7 @@ var BoxComponent = forwardRef5(
         );
       }
     }
-    return /* @__PURE__ */ jsx215(
+    return /* @__PURE__ */ jsx216(
       StyledBoxComponent,
       {
         ref,
@@ -8784,7 +8803,7 @@ var applyMaxCharsToChildren = (children, maxChars) => {
 };
 
 // src/components/Heading/Heading.tsx
-import { jsx as jsx216 } from "react/jsx-runtime";
+import { jsx as jsx217 } from "react/jsx-runtime";
 var heroStyle = css21`
   --font-family: var(--wui-typography-heading-hero-family);
   --font-size: var(--wui-typography-heading-hero-size);
@@ -8905,7 +8924,7 @@ var HeadingComponent = forwardRef6(
     ...props
   }, ref) => {
     const processedChildren = applyMaxCharsToChildren(children, maxChars);
-    return /* @__PURE__ */ jsx216(
+    return /* @__PURE__ */ jsx217(
       StyledHeading,
       {
         ref,
@@ -8931,7 +8950,7 @@ var Heading = makePolymorphic(HeadingComponent);
 import { forwardRef as forwardRef7 } from "react";
 import { styled as styled14, css as css22 } from "styled-components";
 import { isNotNil as isNotNil12 } from "@wistia/type-guards";
-import { jsx as jsx217 } from "react/jsx-runtime";
+import { jsx as jsx218 } from "react/jsx-runtime";
 var sharedBodyStyle = css22`
   > strong,
   b {
@@ -9128,7 +9147,7 @@ var TextComponent = forwardRef7(
     ...props
   }, ref) => {
     const processedChildren = applyMaxCharsToChildren(children, maxChars);
-    return /* @__PURE__ */ jsx217(
+    return /* @__PURE__ */ jsx218(
       StyledText,
       {
         ref,
@@ -9153,7 +9172,7 @@ var Text = makePolymorphic(TextComponent);
 // src/components/ButtonGroup/ButtonGroup.tsx
 import { styled as styled15, css as css23 } from "styled-components";
 import { isNil as isNil10 } from "@wistia/type-guards";
-import { jsx as jsx218 } from "react/jsx-runtime";
+import { jsx as jsx219 } from "react/jsx-runtime";
 var getAlignment = (align) => {
   if (align === "center") {
     return "center";
@@ -9215,7 +9234,7 @@ var ButtonGroup = ({
   if (isNil10(children)) {
     return null;
   }
-  return /* @__PURE__ */ jsx218(
+  return /* @__PURE__ */ jsx219(
     ButtonGroupComponent,
     {
       $align: align,
@@ -9232,7 +9251,7 @@ ButtonGroup.displayName = "ButtonGroup_UI";
 // src/components/IconButton/IconButton.tsx
 import { Children, cloneElement as cloneElement2, forwardRef as forwardRef8 } from "react";
 import { styled as styled16 } from "styled-components";
-import { jsx as jsx219 } from "react/jsx-runtime";
+import { jsx as jsx220 } from "react/jsx-runtime";
 var StyledButton2 = styled16(Button)`
   --icon-button-size-sm: 24px;
   --icon-button-size-md: 32px;
@@ -9250,7 +9269,7 @@ var StyledButton2 = styled16(Button)`
 var IconButton = forwardRef8(
   ({ children, label, size = "md", ...props }, ref) => {
     const responsiveSize = useResponsiveProp(size);
-    return /* @__PURE__ */ jsx219(
+    return /* @__PURE__ */ jsx220(
       StyledButton2,
       {
         ...props,
@@ -9268,7 +9287,7 @@ var IconButton = forwardRef8(
 IconButton.displayName = "IconButton_UI";
 
 // src/components/Banner/Banner.tsx
-import { Fragment as Fragment3, jsx as jsx220, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx221, jsxs as jsxs14 } from "react/jsx-runtime";
 var BREAKPOINT_WIDTH = 600;
 var VERTICAL_BREAKPOINT_WIDTH = 284;
 var MIN_IMAGE_WIDTH = 400;
@@ -9372,7 +9391,7 @@ var Banner = ({
             gap: "space-04",
             style: { padding: "var(--wui-banner-padding)" },
             children: [
-              iconPosition === "above" && /* @__PURE__ */ jsx220(
+              iconPosition === "above" && /* @__PURE__ */ jsx221(
                 Box,
                 {
                   alignSelf: "stretch",
@@ -9396,7 +9415,7 @@ var Banner = ({
                       ] }),
                       headingText
                     ] }) : null,
-                    /* @__PURE__ */ jsx220(Text, { variant: textVariant, children: bodyText })
+                    /* @__PURE__ */ jsx221(Text, { variant: textVariant, children: bodyText })
                   ]
                 }
               ),
@@ -9415,7 +9434,7 @@ var Banner = ({
             ]
           }
         ),
-        isNotNil13(onClose) && /* @__PURE__ */ jsx220(
+        isNotNil13(onClose) && /* @__PURE__ */ jsx221(
           IconButton,
           {
             label: "Close",
@@ -9427,7 +9446,7 @@ var Banner = ({
               right: "var(--wui-space-01)"
             },
             variant: "soft",
-            children: /* @__PURE__ */ jsx220(Icon, { type: "close" })
+            children: /* @__PURE__ */ jsx221(Icon, { type: "close" })
           }
         )
       ]
@@ -9438,7 +9457,7 @@ Banner.displayName = "Banner_UI";
 
 // src/components/Banner/BannerImage.tsx
 import { styled as styled18 } from "styled-components";
-import { jsx as jsx221 } from "react/jsx-runtime";
+import { jsx as jsx222 } from "react/jsx-runtime";
 var StyledBannerImageContainer = styled18.div`
   --wui-banner-image-border-radius: var(--wui-border-radius-02);
   --wui-banner-image-height: auto;
@@ -9497,12 +9516,12 @@ var StyledBannerImageContainer = styled18.div`
   }
 `;
 var BannerImage = ({ alignment = "left", alt, src, ...props }) => {
-  return /* @__PURE__ */ jsx221(
+  return /* @__PURE__ */ jsx222(
     StyledBannerImageContainer,
     {
       "data-wui-banner-image": alignment,
       ...props,
-      children: /* @__PURE__ */ jsx221(
+      children: /* @__PURE__ */ jsx222(
         Image,
         {
           alt: alt ?? "",
@@ -9518,7 +9537,7 @@ var BannerImage = ({ alignment = "left", alt, src, ...props }) => {
 // src/components/Breadcrumbs/Breadcrumbs.tsx
 import { Children as Children2 } from "react";
 import { styled as styled19 } from "styled-components";
-import { Fragment as Fragment4, jsx as jsx222, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx223, jsxs as jsxs15 } from "react/jsx-runtime";
 var StyledBreadcrumbs = styled19.nav`
   display: flex;
   align-items: center;
@@ -9538,7 +9557,7 @@ var Breadcrumbs = ({ children, ...props }) => {
   }
   const crumbMaxWidth = Math.floor(100 / crumbs.length) - BUFFER_WIDTH;
   return /* @__PURE__ */ jsxs15(Fragment4, { children: [
-    /* @__PURE__ */ jsx222("style", { type: "text/css", children: `
+    /* @__PURE__ */ jsx223("style", { type: "text/css", children: `
        [data-wui-breadcrumbs] {
           container-type: inline-size;
           container-name: breadcrumbs;
@@ -9550,7 +9569,7 @@ var Breadcrumbs = ({ children, ...props }) => {
           }
         }
      ` }),
-    /* @__PURE__ */ jsx222(
+    /* @__PURE__ */ jsx223(
       StyledBreadcrumbs,
       {
         "aria-label": "Breadcrumbs",
@@ -9565,7 +9584,7 @@ Breadcrumbs.displayName = "Breadcrumbs_UI";
 
 // src/components/Breadcrumbs/Breadcrumb.tsx
 import { styled as styled20 } from "styled-components";
-import { Fragment as Fragment5, jsx as jsx223, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx224, jsxs as jsxs16 } from "react/jsx-runtime";
 var BreadcrumbContent = styled20.span`
   overflow: hidden;
   white-space: nowrap;
@@ -9576,17 +9595,17 @@ var BreadcrumbContent = styled20.span`
 `;
 var Breadcrumb = ({ icon, href, children, ...props }) => {
   return /* @__PURE__ */ jsxs16(Fragment5, { children: [
-    /* @__PURE__ */ jsx223(
+    /* @__PURE__ */ jsx224(
       Button,
       {
         ...props,
         href,
         leftIcon: icon,
         variant: "ghost",
-        children: /* @__PURE__ */ jsx223(BreadcrumbContent, { "data-wui-breadcrumb": true, children })
+        children: /* @__PURE__ */ jsx224(BreadcrumbContent, { "data-wui-breadcrumb": true, children })
       }
     ),
-    /* @__PURE__ */ jsx223("div", { "data-wui-breadcrumb-divider": true, children: /* @__PURE__ */ jsx223(
+    /* @__PURE__ */ jsx224("div", { "data-wui-breadcrumb-divider": true, children: /* @__PURE__ */ jsx224(
       Icon,
       {
         size: "sm",
@@ -9599,7 +9618,7 @@ var Breadcrumb = ({ icon, href, children, ...props }) => {
 
 // src/components/Card/Card.tsx
 import { styled as styled21 } from "styled-components";
-import { jsx as jsx224 } from "react/jsx-runtime";
+import { jsx as jsx225 } from "react/jsx-runtime";
 var StyledCard = styled21(Box)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   box-sizing: border-box;
@@ -9638,7 +9657,7 @@ var Card = ({
   prominence = "secondary",
   width,
   ...props
-}) => /* @__PURE__ */ jsx224(
+}) => /* @__PURE__ */ jsx225(
   StyledCard,
   {
     $backgroundColor: prominenceMap[prominence].backgroundColor,
@@ -9659,7 +9678,7 @@ Card.displayName = "Card_UI";
 // src/components/Center/Center.tsx
 import { forwardRef as forwardRef9 } from "react";
 import { styled as styled22 } from "styled-components";
-import { jsx as jsx225 } from "react/jsx-runtime";
+import { jsx as jsx226 } from "react/jsx-runtime";
 var StyledCenter = styled22.div`
   box-sizing: border-box;
   margin-left: auto;
@@ -9673,7 +9692,7 @@ var StyledCenter = styled22.div`
   `}
 `;
 var Center = forwardRef9(
-  ({ maxWidth = "100%", gutterWidth = "space-00", intrinsic = false, children, ...props }, ref) => /* @__PURE__ */ jsx225(
+  ({ maxWidth = "100%", gutterWidth = "space-00", intrinsic = false, children, ...props }, ref) => /* @__PURE__ */ jsx226(
     StyledCenter,
     {
       ref,
@@ -9699,7 +9718,7 @@ import { styled as styled25, css as css25 } from "styled-components";
 // src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
 import { styled as styled23 } from "styled-components";
 import { isNotNil as isNotNil14 } from "@wistia/type-guards";
-import { jsx as jsx226 } from "react/jsx-runtime";
+import { jsx as jsx227 } from "react/jsx-runtime";
 var VisuallyHidden = styled23.div({ ...visuallyHiddenStyle });
 var VisuallyHiddenButFocusable = styled23.div({
   "&:not(:focus-within)": visuallyHiddenStyle
@@ -9712,16 +9731,16 @@ var ScreenReaderOnly = ({
 }) => {
   const accessibleText = isNotNil14(text) ? text : children;
   if (focusable) {
-    return /* @__PURE__ */ jsx226(VisuallyHiddenButFocusable, { ...props, children: accessibleText });
+    return /* @__PURE__ */ jsx227(VisuallyHiddenButFocusable, { ...props, children: accessibleText });
   }
-  return /* @__PURE__ */ jsx226(VisuallyHidden, { ...props, children: accessibleText });
+  return /* @__PURE__ */ jsx227(VisuallyHidden, { ...props, children: accessibleText });
 };
 ScreenReaderOnly.displayName = "ScreenReaderOnly_UI";
 
 // src/private/components/FormControlLabel/FormControlLabelDescription.tsx
 import { styled as styled24, css as css24 } from "styled-components";
 import { isNil as isNil12 } from "@wistia/type-guards";
-import { jsx as jsx227 } from "react/jsx-runtime";
+import { jsx as jsx228 } from "react/jsx-runtime";
 var disabledStyle = css24`
   color: var(--wui-color-text-disabled);
 `;
@@ -9742,7 +9761,7 @@ var FormControlLabelDescription = ({
   if (isNil12(children)) {
     return null;
   }
-  return /* @__PURE__ */ jsx227(
+  return /* @__PURE__ */ jsx228(
     StyledFormControlLabelDescription,
     {
       ...props,
@@ -9754,7 +9773,7 @@ var FormControlLabelDescription = ({
 FormControlLabelDescription.displayName = "FormControlLabelDescription";
 
 // src/private/components/FormControlLabel/FormControlLabel.tsx
-import { jsx as jsx228, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx229, jsxs as jsxs17 } from "react/jsx-runtime";
 var disabledStyle2 = css25`
   cursor: not-allowed;
   color: var(--wui-color-text-disabled);
@@ -9790,9 +9809,9 @@ var FormControlLabel = ({
   if (isNil13(label)) {
     return null;
   }
-  const labelContent = hideLabel ? /* @__PURE__ */ jsx228(ScreenReaderOnly, { children: label }) : /* @__PURE__ */ jsxs17(StyledLabelWrapper, { children: [
+  const labelContent = hideLabel ? /* @__PURE__ */ jsx229(ScreenReaderOnly, { children: label }) : /* @__PURE__ */ jsxs17(StyledLabelWrapper, { children: [
     label,
-    /* @__PURE__ */ jsx228(FormControlLabelDescription, { children: description })
+    /* @__PURE__ */ jsx229(FormControlLabelDescription, { children: description })
   ] });
   const slot = isNotNil15(controlSlot) ? controlSlot : null;
   return /* @__PURE__ */ jsxs17(
@@ -9823,7 +9842,7 @@ import { isNonEmptyString as isNonEmptyString2, isNotNil as isNotNil16 } from "@
 // src/components/Stack/Stack.tsx
 import { forwardRef as forwardRef10 } from "react";
 import { styled as styled26 } from "styled-components";
-import { jsx as jsx229 } from "react/jsx-runtime";
+import { jsx as jsx230 } from "react/jsx-runtime";
 var DEFAULT_ELEMENT4 = "div";
 var StyledStack = styled26.div`
   display: flex;
@@ -9836,7 +9855,7 @@ var StackComponent = forwardRef10(
     const responsiveGap = useResponsiveProp(gap);
     const responsiveDirection = useResponsiveProp(direction);
     const responsiveAlignItems = useResponsiveProp(alignItems);
-    return /* @__PURE__ */ jsx229(
+    return /* @__PURE__ */ jsx230(
       StyledStack,
       {
         ref,
@@ -9853,7 +9872,7 @@ StackComponent.displayName = "Stack_UI";
 var Stack = makePolymorphic(StackComponent);
 
 // src/components/FormGroup/FormGroup.tsx
-import { jsx as jsx230, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx231, jsxs as jsxs18 } from "react/jsx-runtime";
 var StyledFieldset = styled27.fieldset`
   padding: 0;
   margin: 0;
@@ -9889,7 +9908,7 @@ var FormGroup = ({
             variant: "heading5",
             children: [
               hasLabel ? label : null,
-              hasDescription ? /* @__PURE__ */ jsx230(
+              hasDescription ? /* @__PURE__ */ jsx231(
                 Text,
                 {
                   "data-wui-form-group-description": true,
@@ -9930,7 +9949,7 @@ var serializeFormData = (formData) => {
 };
 
 // src/components/Form/Form.tsx
-import { jsx as jsx231 } from "react/jsx-runtime";
+import { jsx as jsx232 } from "react/jsx-runtime";
 var StyledForm = styled28.form`
   --form-default-width: 690px;
 
@@ -10010,7 +10029,7 @@ var Form = forwardRef11(
     }, [labelPosition, values, errors, id, hasSubmitted]);
     return (
       // @ts-expect-error - generic context providers are a giant pain
-      /* @__PURE__ */ jsx231(FormContext.Provider, { value: context, children: /* @__PURE__ */ jsx231(
+      /* @__PURE__ */ jsx232(FormContext.Provider, { value: context, children: /* @__PURE__ */ jsx232(
         Stack,
         {
           ...props,
@@ -10031,7 +10050,7 @@ var Form = forwardRef11(
 );
 
 // src/components/FormGroup/CheckboxGroup.tsx
-import { jsx as jsx232 } from "react/jsx-runtime";
+import { jsx as jsx233 } from "react/jsx-runtime";
 var CheckboxGroupContext = createContext4(null);
 var useCheckboxGroup = () => {
   return useContext3(CheckboxGroupContext);
@@ -10052,13 +10071,13 @@ var CheckboxGroup = ({
       value: derivedValue
     };
   }, [name, derivedValue, onChange]);
-  return /* @__PURE__ */ jsx232(CheckboxGroupContext.Provider, { value: context, children: /* @__PURE__ */ jsx232(FormGroup, { ...props, children }) });
+  return /* @__PURE__ */ jsx233(CheckboxGroupContext.Provider, { value: context, children: /* @__PURE__ */ jsx233(FormGroup, { ...props, children }) });
 };
 CheckboxGroup.displayName = "CheckboxGroup_UI";
 
 // src/components/Checkbox/Checkbox.tsx
-import { jsx as jsx233, jsxs as jsxs19 } from "react/jsx-runtime";
-var CheckIcon = () => /* @__PURE__ */ jsx233(
+import { jsx as jsx234, jsxs as jsxs19 } from "react/jsx-runtime";
+var CheckIcon = () => /* @__PURE__ */ jsx234(
   "svg",
   {
     fill: "inherit",
@@ -10066,7 +10085,7 @@ var CheckIcon = () => /* @__PURE__ */ jsx233(
     viewBox: "0 0 10 8",
     width: "10",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx233(
+    children: /* @__PURE__ */ jsx234(
       "path",
       {
         d: "M3.47281 7.19303L0.377565 4.07999C0.191609 3.89297 0.191609 3.58973 0.377565 3.40268L1.05098 2.72537C1.23694 2.53833 1.53847 2.53833 1.72442 2.72537L3.80953 4.82245L8.27558 0.330729C8.46154 0.143704 8.76306 0.143704 8.94902 0.330729L9.62244 1.00804C9.8084 1.19506 9.8084 1.49831 9.62244 1.68535L4.14624 7.19305C3.96027 7.38008 3.65876 7.38008 3.47281 7.19303Z",
@@ -10194,7 +10213,7 @@ var Checkbox = forwardRef12(
         $hideLabel: hideLabel,
         disabled,
         children: [
-          /* @__PURE__ */ jsx233(
+          /* @__PURE__ */ jsx234(
             StyledHiddenCheckboxInput,
             {
               ...props,
@@ -10209,16 +10228,16 @@ var Checkbox = forwardRef12(
               value
             }
           ),
-          /* @__PURE__ */ jsx233(
+          /* @__PURE__ */ jsx234(
             FormControlLabel,
             {
-              controlSlot: /* @__PURE__ */ jsx233(
+              controlSlot: /* @__PURE__ */ jsx234(
                 StyledCheckboxInput,
                 {
                   $disabled: disabled,
                   $size: size,
                   "data-wui-faux-input": "true",
-                  children: /* @__PURE__ */ jsx233(CheckIcon, {})
+                  children: /* @__PURE__ */ jsx234(CheckIcon, {})
                 }
               ),
               description,
@@ -10284,7 +10303,7 @@ ClickRegion.displayName = "ClickRegion_UI";
 import { Root as CollapsibleRoot } from "@radix-ui/react-collapsible";
 import { isNotNil as isNotNil17 } from "@wistia/type-guards";
 import { styled as styled30 } from "styled-components";
-import { jsx as jsx234 } from "react/jsx-runtime";
+import { jsx as jsx235 } from "react/jsx-runtime";
 var StyledRoot = styled30(CollapsibleRoot)`
   &[data-state='closed'] [data-wui-collapsible-content] {
     display: -webkit-box;
@@ -10301,7 +10320,7 @@ var Collapsible = ({
   const controlProps = {
     ...isNotNil17(onOpenChange) && isNotNil17(isOpen) ? { open: isOpen, onOpenChange } : {}
   };
-  return /* @__PURE__ */ jsx234(StyledRoot, { ...controlProps, children });
+  return /* @__PURE__ */ jsx235(StyledRoot, { ...controlProps, children });
 };
 Collapsible.displayName = "Collapsible_UI";
 
@@ -10309,7 +10328,7 @@ Collapsible.displayName = "Collapsible_UI";
 import { Children as Children4 } from "react";
 import { Trigger } from "@radix-ui/react-collapsible";
 import { styled as styled31 } from "styled-components";
-import { jsx as jsx235 } from "react/jsx-runtime";
+import { jsx as jsx236 } from "react/jsx-runtime";
 var StyledTrigger = styled31(Trigger)`
   [data-wui-collapsible-icon] {
     transition: transform var(--wui-motion-duration-03) ease-in-out;
@@ -10333,11 +10352,11 @@ var StyledTrigger = styled31(Trigger)`
 `;
 var CollapsibleTrigger = ({ children }) => {
   Children4.only(children);
-  return /* @__PURE__ */ jsx235(StyledTrigger, { asChild: true, children });
+  return /* @__PURE__ */ jsx236(StyledTrigger, { asChild: true, children });
 };
 
 // src/components/Collapsible/CollapsibleTriggerIcon.tsx
-import { jsx as jsx236 } from "react/jsx-runtime";
+import { jsx as jsx237 } from "react/jsx-runtime";
 var iconRotationMap = {
   "caret-left-strong": "-90",
   "caret-left": "-90",
@@ -10346,7 +10365,7 @@ var iconRotationMap = {
   plus: "45"
 };
 var CollapsibleTriggerIcon = ({ type, ...props }) => {
-  return /* @__PURE__ */ jsx236(
+  return /* @__PURE__ */ jsx237(
     Icon,
     {
       ...props,
@@ -10362,13 +10381,13 @@ CollapsibleTriggerIcon.displayName = "CollapsibleTriggerIcon_UI";
 import { styled as styled32 } from "styled-components";
 import { Content } from "@radix-ui/react-collapsible";
 import { isNotUndefined as isNotUndefined8 } from "@wistia/type-guards";
-import { Fragment as Fragment6, jsx as jsx237, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx238, jsxs as jsxs20 } from "react/jsx-runtime";
 var ClampedContent = styled32.div`
   --wui-collapsible-content-clamp-lines: ${({ $clamp }) => $clamp};
 `;
 var CollapsibleContent = ({ clamp, children }) => {
   if (isNotUndefined8(clamp)) {
-    return /* @__PURE__ */ jsx237(
+    return /* @__PURE__ */ jsx238(
       ClampedContent,
       {
         $clamp: clamp,
@@ -10377,7 +10396,7 @@ var CollapsibleContent = ({ clamp, children }) => {
       }
     );
   }
-  return /* @__PURE__ */ jsx237(Content, { children: /* @__PURE__ */ jsxs20(Fragment6, { children: [
+  return /* @__PURE__ */ jsx238(Content, { children: /* @__PURE__ */ jsxs20(Fragment6, { children: [
     children,
     " "
   ] }) });
@@ -10778,7 +10797,7 @@ var hasAccessibleDerivatives = ({
 };
 
 // src/components/ColorPicker/ColorPickerContext.tsx
-import { jsx as jsx238 } from "react/jsx-runtime";
+import { jsx as jsx239 } from "react/jsx-runtime";
 var ColorPickerContext = createContext5(null);
 var ColorPickerProvider = ({
   children,
@@ -10919,7 +10938,7 @@ var ColorPickerProvider = ({
       valueAsHsv
     ]
   );
-  return /* @__PURE__ */ jsx238(ColorPickerContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ jsx239(ColorPickerContext.Provider, { value: contextValue, children });
 };
 var useColorPickerState = () => {
   const context = useContext4(ColorPickerContext);
@@ -10931,7 +10950,7 @@ var useColorPickerState = () => {
 
 // src/components/Label/Label.tsx
 import { styled as styled33, css as css27 } from "styled-components";
-import { jsx as jsx239 } from "react/jsx-runtime";
+import { jsx as jsx240 } from "react/jsx-runtime";
 var requiredStyle = css27`
   &::after {
     color: var(--wui-color-text-error);
@@ -10975,7 +10994,7 @@ var Label = ({
   screenReaderOnly = false,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx239(
+  return /* @__PURE__ */ jsx240(
     StyledLabel2,
     {
       ...props,
@@ -10990,7 +11009,7 @@ var Label = ({
 Label.displayName = "Label_UI";
 
 // src/components/ColorPicker/ColorGrid.tsx
-import { jsx as jsx240, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx241, jsxs as jsxs21 } from "react/jsx-runtime";
 var Container = styled34.div`
   display: grid;
   gap: var(--wui-space-01);
@@ -11017,8 +11036,8 @@ var ColorGrid = ({ children, label }) => {
     [onChangeNonDerivedValueAsHsv]
   );
   return /* @__PURE__ */ jsxs21(Container, { children: [
-    label != null && /* @__PURE__ */ jsx240(LabelContainer, { children: /* @__PURE__ */ jsx240(Label, { children: label }) }),
-    /* @__PURE__ */ jsx240(
+    label != null && /* @__PURE__ */ jsx241(LabelContainer, { children: /* @__PURE__ */ jsx241(Label, { children: label }) }),
+    /* @__PURE__ */ jsx241(
       ItemsContainer,
       {
         onValueChange,
@@ -11037,7 +11056,7 @@ import { formatHex as formatHex3 } from "culori/fn";
 
 // src/components/ColorPicker/ColorSwatch.tsx
 import { styled as styled35 } from "styled-components";
-import { jsx as jsx241, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx242, jsxs as jsxs22 } from "react/jsx-runtime";
 var ColorSwatchDiv = styled35.div`
   aspect-ratio: 1;
   width: ${({ $diameterPx }) => `${$diameterPx}px`};
@@ -11085,7 +11104,7 @@ var ColorSwatch = ({
         backgroundColor: value
       },
       children: [
-        derivativeIsSelected ? /* @__PURE__ */ jsx241(DerivativeHalfCircle, { $color: colorPickerValueAsHex }) : null,
+        derivativeIsSelected ? /* @__PURE__ */ jsx242(DerivativeHalfCircle, { $color: colorPickerValueAsHex }) : null,
         children
       ]
     }
@@ -11101,7 +11120,7 @@ import {
   Arrow as TooltipArrow
 } from "@radix-ui/react-tooltip";
 import { styled as styled36, keyframes as keyframes2 } from "styled-components";
-import { jsx as jsx242, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx243, jsxs as jsxs23 } from "react/jsx-runtime";
 var hide = keyframes2`
   from {
     opacity: 1;
@@ -11219,15 +11238,15 @@ var Tooltip = ({
       delayDuration: delay,
       ...rootProps,
       children: [
-        /* @__PURE__ */ jsx242(TooltipTrigger, { asChild: true, children }),
-        /* @__PURE__ */ jsx242(TooltipPortal, { container, children: /* @__PURE__ */ jsxs23(
+        /* @__PURE__ */ jsx243(TooltipTrigger, { asChild: true, children }),
+        /* @__PURE__ */ jsx243(TooltipPortal, { container, children: /* @__PURE__ */ jsxs23(
           StyledContent,
           {
             side: direction,
             sideOffset: hideArrow ? VISUAL_OFFSET : VISUAL_OFFSET - 2,
             children: [
               content,
-              !hideArrow ? /* @__PURE__ */ jsx242(TooltipArrow, { asChild: true, children: /* @__PURE__ */ jsx242(
+              !hideArrow ? /* @__PURE__ */ jsx243(TooltipArrow, { asChild: true, children: /* @__PURE__ */ jsx243(
                 "svg",
                 {
                   fill: "var(--tooltip-bg)",
@@ -11236,7 +11255,7 @@ var Tooltip = ({
                   viewBox: "0 0 12 8",
                   width: "12",
                   xmlns: "http://www.w3.org/2000/svg",
-                  children: /* @__PURE__ */ jsx242("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__ */ jsx243("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
             ]
@@ -11249,7 +11268,7 @@ var Tooltip = ({
 Tooltip.displayName = "Tooltip_UI";
 
 // src/components/ColorPicker/ColorGridOption.tsx
-import { jsx as jsx243 } from "react/jsx-runtime";
+import { jsx as jsx244 } from "react/jsx-runtime";
 var Container2 = styled37(RadioGroupItem)`
   border: none;
   appearance: none;
@@ -11266,11 +11285,11 @@ var ColorGridOption = ({ value: rawValue, name }) => {
   const valueAsHex = formatHex3(valueAsHsv);
   const isSelected = valueAsHex === value;
   const derivativeIsSelected = !isSelected && nonDerivedValueAsHex === value;
-  return /* @__PURE__ */ jsx243(
+  return /* @__PURE__ */ jsx244(
     Tooltip,
     {
-      content: name ?? /* @__PURE__ */ jsx243("span", { style: { fontFamily: "var(--wui-typography-family-mono)" }, children: value }),
-      children: /* @__PURE__ */ jsx243(
+      content: name ?? /* @__PURE__ */ jsx244("span", { style: { fontFamily: "var(--wui-typography-family-mono)" }, children: value }),
+      children: /* @__PURE__ */ jsx244(
         Container2,
         {
           "aria-label": value,
@@ -11278,7 +11297,7 @@ var ColorGridOption = ({ value: rawValue, name }) => {
           role: "option",
           tabIndex: -1,
           value,
-          children: /* @__PURE__ */ jsx243(
+          children: /* @__PURE__ */ jsx244(
             ColorSwatch,
             {
               derivativeIsSelected,
@@ -11297,7 +11316,7 @@ ColorGridOption.displayName = "ColorGridOption_UI";
 import { useCallback as useCallback11 } from "react";
 import { styled as styled38 } from "styled-components";
 import { Root as ToggleGroupRoot } from "@radix-ui/react-toggle-group";
-import { jsx as jsx244 } from "react/jsx-runtime";
+import { jsx as jsx245 } from "react/jsx-runtime";
 var Container3 = styled38(ToggleGroupRoot)`
   display: grid;
   grid-template-columns: minmax(0, 1fr);
@@ -11314,7 +11333,7 @@ var ColorList = ({ children }) => {
     },
     [onChangeNonDerivedValueAsHsv]
   );
-  return /* @__PURE__ */ jsx244(
+  return /* @__PURE__ */ jsx245(
     Container3,
     {
       onValueChange,
@@ -11328,7 +11347,7 @@ ColorList.displayName = "ColorList_UI";
 
 // src/components/ColorPicker/ColorListGroup.tsx
 import { styled as styled39 } from "styled-components";
-import { jsx as jsx245, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx246, jsxs as jsxs24 } from "react/jsx-runtime";
 var Container4 = styled39.div`
   display: grid;
   gap: var(--wui-space-01);
@@ -11348,8 +11367,8 @@ var ColorListGroup = ({ label, children }) => {
       "aria-label": label,
       role: "group",
       children: [
-        /* @__PURE__ */ jsx245(LabelContainer2, { children: /* @__PURE__ */ jsx245(Label, { children: label }) }),
-        /* @__PURE__ */ jsx245(ItemsContainer2, { children })
+        /* @__PURE__ */ jsx246(LabelContainer2, { children: /* @__PURE__ */ jsx246(Label, { children: label }) }),
+        /* @__PURE__ */ jsx246(ItemsContainer2, { children })
       ]
     }
   );
@@ -11362,7 +11381,7 @@ import { Item as ToggleGroupItem } from "@radix-ui/react-toggle-group";
 import { formatHex as formatHex4 } from "culori/fn";
 
 // src/components/ColorPicker/ColorNameOrHexCode.tsx
-import { jsx as jsx246, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx247, jsxs as jsxs25 } from "react/jsx-runtime";
 var ColorNameOrHexCode = ({ name, hexCode }) => {
   return /* @__PURE__ */ jsxs25(
     Box,
@@ -11372,7 +11391,7 @@ var ColorNameOrHexCode = ({ name, hexCode }) => {
       grow: 1,
       justifyContent: "space-between",
       children: [
-        /* @__PURE__ */ jsx246(
+        /* @__PURE__ */ jsx247(
           Text,
           {
             renderAs: "span",
@@ -11380,7 +11399,7 @@ var ColorNameOrHexCode = ({ name, hexCode }) => {
             children: name ?? hexCode
           }
         ),
-        name != null && /* @__PURE__ */ jsx246(
+        name != null && /* @__PURE__ */ jsx247(
           Text,
           {
             prominence: "secondary",
@@ -11395,7 +11414,7 @@ var ColorNameOrHexCode = ({ name, hexCode }) => {
 };
 
 // src/components/ColorPicker/ColorListOption.tsx
-import { jsx as jsx247, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx248, jsxs as jsxs26 } from "react/jsx-runtime";
 var Container5 = styled40(ToggleGroupItem)`
   border: none;
   appearance: none;
@@ -11433,7 +11452,7 @@ var ColorListOption = ({ value: rawValue, name }) => {
       tabIndex: -1,
       value,
       children: [
-        /* @__PURE__ */ jsx247(
+        /* @__PURE__ */ jsx248(
           ColorSwatch,
           {
             derivativeIsSelected,
@@ -11441,7 +11460,7 @@ var ColorListOption = ({ value: rawValue, name }) => {
             value
           }
         ),
-        /* @__PURE__ */ jsx247(
+        /* @__PURE__ */ jsx248(
           ColorNameOrHexCode,
           {
             hexCode: value,
@@ -11456,7 +11475,7 @@ ColorListOption.displayName = "ColorListOption_UI";
 
 // src/components/ColorPicker/ColorPicker.tsx
 import { Root as PopoverRoot } from "@radix-ui/react-popover";
-import { jsx as jsx248 } from "react/jsx-runtime";
+import { jsx as jsx249 } from "react/jsx-runtime";
 var ColorPicker = ({
   children,
   colorForComparison = DEFAULT_COLOR_FOR_COMPARISON,
@@ -11465,7 +11484,7 @@ var ColorPicker = ({
   onValueChange,
   value
 }) => {
-  return /* @__PURE__ */ jsx248(PopoverRoot, { modal: false, children: /* @__PURE__ */ jsx248(
+  return /* @__PURE__ */ jsx249(PopoverRoot, { modal: false, children: /* @__PURE__ */ jsx249(
     ColorPickerProvider,
     {
       colorForComparison,
@@ -11482,7 +11501,7 @@ ColorPicker.displayName = "ColorPicker_UI";
 // src/components/ColorPicker/ColorPickerPopoverContent.tsx
 import { Content as PopoverContent, Portal as PopoverPortal } from "@radix-ui/react-popover";
 import { styled as styled41 } from "styled-components";
-import { jsx as jsx249 } from "react/jsx-runtime";
+import { jsx as jsx250 } from "react/jsx-runtime";
 var StyledPopoverContent = styled41(PopoverContent)`
   background-color: var(--wui-color-bg-surface);
   border-radius: var(--wui-border-radius-02);
@@ -11498,7 +11517,7 @@ var StyledPopoverContent = styled41(PopoverContent)`
 var ColorPickerPopoverContent = ({
   children
 }) => {
-  return /* @__PURE__ */ jsx249(PopoverPortal, { children: /* @__PURE__ */ jsx249(
+  return /* @__PURE__ */ jsx250(PopoverPortal, { children: /* @__PURE__ */ jsx250(
     StyledPopoverContent,
     {
       align: "start",
@@ -11511,12 +11530,12 @@ ColorPickerPopoverContent.displayName = "ColorPickerPopoverContent_UI";
 
 // src/components/ColorPicker/ColorPickerSection.tsx
 import { styled as styled42 } from "styled-components";
-import { jsx as jsx250 } from "react/jsx-runtime";
+import { jsx as jsx251 } from "react/jsx-runtime";
 var Container6 = styled42.div`
   padding: var(--wui-space-02);
 `;
 var ColorPickerSection = ({ children }) => {
-  return /* @__PURE__ */ jsx250(Container6, { children: /* @__PURE__ */ jsx250(Stack, { children }) });
+  return /* @__PURE__ */ jsx251(Container6, { children: /* @__PURE__ */ jsx251(Stack, { children }) });
 };
 ColorPickerSection.displayName = "ColorPickerSection_UI";
 
@@ -11526,12 +11545,12 @@ import { Trigger as PopoverTrigger } from "@radix-ui/react-popover";
 import { styled as styled43 } from "styled-components";
 
 // src/components/ColorPicker/ValueSwatch.tsx
-import { jsx as jsx251 } from "react/jsx-runtime";
+import { jsx as jsx252 } from "react/jsx-runtime";
 var ValueSwatch = ({
   diameterPx = DEFAULT_SWATCH_DIAMETER_PX
 }) => {
   const { valueAsHex } = useColorPickerState();
-  return /* @__PURE__ */ jsx251(
+  return /* @__PURE__ */ jsx252(
     ColorSwatch,
     {
       diameterPx,
@@ -11542,15 +11561,15 @@ var ValueSwatch = ({
 ValueSwatch.displayName = "ValueSwatch_UI";
 
 // src/components/ColorPicker/ValueNameOrHexCode.tsx
-import { jsx as jsx252 } from "react/jsx-runtime";
+import { jsx as jsx253 } from "react/jsx-runtime";
 var ValueNameOrHexCode = () => {
   const { valueAsHex } = useColorPickerState();
-  return /* @__PURE__ */ jsx252(ColorNameOrHexCode, { hexCode: valueAsHex });
+  return /* @__PURE__ */ jsx253(ColorNameOrHexCode, { hexCode: valueAsHex });
 };
 ValueNameOrHexCode.displayName = "ValueNameOrHexCode_UI";
 
 // src/components/ColorPicker/ColorPickerTrigger.tsx
-import { jsx as jsx253, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx254, jsxs as jsxs27 } from "react/jsx-runtime";
 var StyledPopoverTrigger = styled43(PopoverTrigger)`
   background-color: var(--wui-color-bg-surface);
   border-radius: var(--wui-border-radius-rounded);
@@ -11571,18 +11590,18 @@ var DefaultTriggerContentContainer = styled43.div`
 `;
 var DefaultTriggerContent = () => {
   return /* @__PURE__ */ jsxs27(DefaultTriggerContentContainer, { children: [
-    /* @__PURE__ */ jsx253(ValueSwatch, {}),
-    /* @__PURE__ */ jsx253(ValueNameOrHexCode, {})
+    /* @__PURE__ */ jsx254(ValueSwatch, {}),
+    /* @__PURE__ */ jsx254(ValueNameOrHexCode, {})
   ] });
 };
 var ColorPickerTrigger = forwardRef13(
   ({ children, ...props }, forwardedRef) => {
-    return /* @__PURE__ */ jsx253(
+    return /* @__PURE__ */ jsx254(
       StyledPopoverTrigger,
       {
         ref: forwardedRef,
         ...props,
-        children: children ?? /* @__PURE__ */ jsx253(DefaultTriggerContent, {})
+        children: children ?? /* @__PURE__ */ jsx254(DefaultTriggerContent, {})
       }
     );
   }
@@ -11591,7 +11610,7 @@ ColorPickerTrigger.displayName = "ColorPickerTrigger_UI";
 
 // src/components/ColorPicker/ContrastIndicator.tsx
 import { styled as styled44 } from "styled-components";
-import { jsx as jsx254, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx255, jsxs as jsxs28 } from "react/jsx-runtime";
 var Container7 = styled44.div`
   display: flex;
   flex-direction: row;
@@ -11605,7 +11624,7 @@ var ContrastIndicator = () => {
   const { currentContrastRatio, minimumContrastRatio } = useColorPickerState();
   const isContrastSufficient = currentContrastRatio >= minimumContrastRatio;
   const label = /* @__PURE__ */ jsxs28("div", { children: [
-    /* @__PURE__ */ jsx254(
+    /* @__PURE__ */ jsx255(
       Text,
       {
         renderAs: "span",
@@ -11626,19 +11645,19 @@ var ContrastIndicator = () => {
       }
     )
   ] });
-  return /* @__PURE__ */ jsx254(Container7, { children: isContrastSufficient ? /* @__PURE__ */ jsx254(
+  return /* @__PURE__ */ jsx255(Container7, { children: isContrastSufficient ? /* @__PURE__ */ jsx255(
     Badge,
     {
       colorScheme: "success",
-      icon: /* @__PURE__ */ jsx254(Icon, { type: "checkmark" }),
+      icon: /* @__PURE__ */ jsx255(Icon, { type: "checkmark" }),
       label,
       variant: "outline"
     }
-  ) : /* @__PURE__ */ jsx254(
+  ) : /* @__PURE__ */ jsx255(
     Badge,
     {
       colorScheme: "warning",
-      icon: /* @__PURE__ */ jsx254(Icon, { type: "error" }),
+      icon: /* @__PURE__ */ jsx255(Icon, { type: "error" }),
       label,
       variant: "outline"
     }
@@ -11652,7 +11671,7 @@ import { useCallback as useCallback12 } from "react";
 import { forwardRef as forwardRef14, useId as useId3 } from "react";
 import { styled as styled45, css as css28 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString4 } from "@wistia/type-guards";
-import { jsx as jsx255, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx256, jsxs as jsxs29 } from "react/jsx-runtime";
 var switchHeightMap = {
   sm: 16,
   md: 20,
@@ -11752,7 +11771,7 @@ var Switch = forwardRef14(
         $hideLabel: hideLabel,
         $size: size,
         children: [
-          /* @__PURE__ */ jsx255(
+          /* @__PURE__ */ jsx256(
             StyledHiddenSwitchInput,
             {
               ...props,
@@ -11767,16 +11786,16 @@ var Switch = forwardRef14(
               value
             }
           ),
-          /* @__PURE__ */ jsx255(
+          /* @__PURE__ */ jsx256(
             FormControlLabel,
             {
               align,
-              controlSlot: /* @__PURE__ */ jsx255(
+              controlSlot: /* @__PURE__ */ jsx256(
                 StyledSwitchTrack,
                 {
                   "data-testid": "wui-faux-input",
                   "data-wui-faux-input": "true",
-                  children: /* @__PURE__ */ jsx255(StyledSwitchThumb, {})
+                  children: /* @__PURE__ */ jsx256(StyledSwitchThumb, {})
                 }
               ),
               description,
@@ -11794,7 +11813,7 @@ var Switch = forwardRef14(
 Switch.displayName = "Switch_UI";
 
 // src/components/ColorPicker/ContrastEnforcerSwitch.tsx
-import { jsx as jsx256 } from "react/jsx-runtime";
+import { jsx as jsx257 } from "react/jsx-runtime";
 var ContrastEnforcerSwitch = () => {
   const { setShouldEnforceMinContrast, shouldEnforceMinContrast, hasAccessibleDerivatives: hasAccessibleDerivatives2 } = useColorPickerState();
   const onChangeContrastLimitedSwitch = useCallback12(
@@ -11810,7 +11829,7 @@ var ContrastEnforcerSwitch = () => {
   if (!hasAccessibleDerivatives2) {
     return null;
   }
-  return /* @__PURE__ */ jsx256(
+  return /* @__PURE__ */ jsx257(
     Switch,
     {
       align: "right",
@@ -11822,21 +11841,21 @@ var ContrastEnforcerSwitch = () => {
 };
 
 // src/components/ColorPicker/ContrastPreview.tsx
-import { jsx as jsx257 } from "react/jsx-runtime";
+import { jsx as jsx258 } from "react/jsx-runtime";
 var ContrastPreview = () => {
   const { valueAsHex, colorForComparison } = useColorPickerState();
-  return /* @__PURE__ */ jsx257(
+  return /* @__PURE__ */ jsx258(
     ColorSwatch,
     {
       diameterPx: 36,
       value: valueAsHex,
-      children: /* @__PURE__ */ jsx257(Text, { style: { color: colorForComparison }, children: "Aa" })
+      children: /* @__PURE__ */ jsx258(Text, { style: { color: colorForComparison }, children: "Aa" })
     }
   );
 };
 
 // src/components/ColorPicker/ContrastControls.tsx
-import { jsx as jsx258, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx259, jsxs as jsxs30 } from "react/jsx-runtime";
 var ContrastControls = () => {
   return /* @__PURE__ */ jsxs30(Stack, { children: [
     /* @__PURE__ */ jsxs30(
@@ -11846,12 +11865,12 @@ var ContrastControls = () => {
         direction: "row",
         justifyContent: "space-between",
         children: [
-          /* @__PURE__ */ jsx258(ContrastPreview, {}),
-          /* @__PURE__ */ jsx258(ContrastIndicator, {})
+          /* @__PURE__ */ jsx259(ContrastPreview, {}),
+          /* @__PURE__ */ jsx259(ContrastIndicator, {})
         ]
       }
     ),
-    /* @__PURE__ */ jsx258(ContrastEnforcerSwitch, {})
+    /* @__PURE__ */ jsx259(ContrastEnforcerSwitch, {})
   ] });
 };
 ContrastControls.displayName = "ContrastControls_UI";
@@ -11893,7 +11912,7 @@ var inputCss = css29`
 `;
 
 // src/components/Input/Input.tsx
-import { jsx as jsx259, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx260, jsxs as jsxs31 } from "react/jsx-runtime";
 var inputStyles = css30`
   ${inputCss}
   input,
@@ -12060,7 +12079,7 @@ var Input = forwardRef15(
     const ref = isNotNil18(externalRef) && isRecord4(externalRef) && "current" in externalRef ? externalRef : internalRef;
     let leftIconToDisplay = leftIcon;
     if (isNil14(leftIcon) && type === "search") {
-      leftIconToDisplay = /* @__PURE__ */ jsx259(Icon, { type: "search" });
+      leftIconToDisplay = /* @__PURE__ */ jsx260(Icon, { type: "search" });
     }
     if (isNotNil18(leftIconToDisplay) && isValidElement2(leftIconToDisplay)) {
       leftIconToDisplay = cloneElement4(leftIconToDisplay, {
@@ -12095,14 +12114,14 @@ var Input = forwardRef15(
         "data-wui-input-container": true,
         children: [
           leftIconToDisplay ?? null,
-          type === "multiline" ? /* @__PURE__ */ jsx259(
+          type === "multiline" ? /* @__PURE__ */ jsx260(
             "textarea",
             {
               ...props,
               ref,
               onFocus: handleFocus2
             }
-          ) : /* @__PURE__ */ jsx259(
+          ) : /* @__PURE__ */ jsx260(
             "input",
             {
               ...props,
@@ -12120,7 +12139,7 @@ var Input = forwardRef15(
 Input.displayName = "Input_UI";
 
 // src/components/ColorPicker/HexColorInput.tsx
-import { jsx as jsx260 } from "react/jsx-runtime";
+import { jsx as jsx261 } from "react/jsx-runtime";
 var SIX_DIGIT_HEX_CODE_LENGTH = 7;
 var isValidHexChar = (char) => {
   return /^[0-9a-fA-F]$/.test(char);
@@ -12260,7 +12279,7 @@ var HexColorInput = ({ autoFocus = true }) => {
   useEffect11(() => {
     setTextInputValue(valueAsHex);
   }, [valueAsHex]);
-  return /* @__PURE__ */ jsx260(
+  return /* @__PURE__ */ jsx261(
     Input,
     {
       ref: inputRef,
@@ -12296,7 +12315,7 @@ import { formatHex as formatHex6 } from "culori/fn";
 import { useEffect as useEffect12, useRef as useRef11 } from "react";
 import { styled as styled47 } from "styled-components";
 import { formatHex as formatHex5 } from "culori/fn";
-import { jsx as jsx261 } from "react/jsx-runtime";
+import { jsx as jsx262 } from "react/jsx-runtime";
 var Canvas = styled47.canvas`
   display: block;
   height: 100%;
@@ -12325,7 +12344,7 @@ var HSVHueCanvas = ({ hsv }) => {
     ctx.fillStyle = gradient;
     ctx.fillRect(0, 0, width, height);
   }, [hsv.s, hsv.v]);
-  return /* @__PURE__ */ jsx261(
+  return /* @__PURE__ */ jsx262(
     Canvas,
     {
       ref: canvasRef,
@@ -12335,7 +12354,7 @@ var HSVHueCanvas = ({ hsv }) => {
 };
 
 // src/components/ColorPicker/HueSlider.tsx
-import { jsx as jsx262, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx263, jsxs as jsxs32 } from "react/jsx-runtime";
 var TWENTY_FOUR = 24;
 var Container8 = styled48.div`
   border-radius: var(--wui-border-radius-rounded);
@@ -12415,12 +12434,12 @@ var HueSlider = () => {
         step: 1,
         value: [nonDerivedValueAsHsv.h ?? 0],
         children: [
-          /* @__PURE__ */ jsx262(Track, {}),
-          /* @__PURE__ */ jsx262(Thumb, { "aria-label": "Hue slider", children: /* @__PURE__ */ jsx262(ThumbInner, { style: thumbInnerStyle }) })
+          /* @__PURE__ */ jsx263(Track, {}),
+          /* @__PURE__ */ jsx263(Thumb, { "aria-label": "Hue slider", children: /* @__PURE__ */ jsx263(ThumbInner, { style: thumbInnerStyle }) })
         ]
       }
     ),
-    /* @__PURE__ */ jsx262(HSVHueCanvas, { hsv: valueAsHsv })
+    /* @__PURE__ */ jsx263(HSVHueCanvas, { hsv: valueAsHsv })
   ] });
 };
 HueSlider.displayName = "HueSlider_UI";
@@ -12460,7 +12479,7 @@ var drawSmoothCurve = (context, points) => {
 };
 
 // src/components/ColorPicker/HSVSaturationValueCanvas.tsx
-import { jsx as jsx263 } from "react/jsx-runtime";
+import { jsx as jsx264 } from "react/jsx-runtime";
 var Canvas2 = styled49.canvas`
   display: block;
   width: 100%;
@@ -12568,7 +12587,7 @@ var HSVSaturationValueCanvas = ({
     colorForComparison,
     opacityForContrastCalculation
   ]);
-  return /* @__PURE__ */ jsx263(
+  return /* @__PURE__ */ jsx264(
     Canvas2,
     {
       ref: canvasRef,
@@ -12579,7 +12598,7 @@ var HSVSaturationValueCanvas = ({
 };
 
 // src/components/ColorPicker/SaturationAndValuePicker.tsx
-import { jsx as jsx264, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx265, jsxs as jsxs33 } from "react/jsx-runtime";
 var SATURATION_NUDGE = 0.02;
 var VALUE_NUDGE = 0.02;
 var Container9 = styled50.div`
@@ -12756,7 +12775,7 @@ var SaturationAndValuePicker = ({
         "data-testid": dataTestId,
         onMouseDown: onContainerMouseDown,
         children: [
-          /* @__PURE__ */ jsx264(
+          /* @__PURE__ */ jsx265(
             Thumb2,
             {
               ref: thumbRef,
@@ -12768,7 +12787,7 @@ var SaturationAndValuePicker = ({
               tabIndex: 0
             }
           ),
-          /* @__PURE__ */ jsx264(
+          /* @__PURE__ */ jsx265(
             HSVSaturationValueCanvas,
             {
               colorForComparison,
@@ -12778,7 +12797,7 @@ var SaturationAndValuePicker = ({
               shouldShowContrastCurve: shouldEnforceMinContrast
             }
           ),
-          /* @__PURE__ */ jsx264(ScreenReaderOnly, { id: instructionsId, children: "Move right to increase saturation, left to decrease saturation, up to increase value, and down to decrease value." }),
+          /* @__PURE__ */ jsx265(ScreenReaderOnly, { id: instructionsId, children: "Move right to increase saturation, left to decrease saturation, up to increase value, and down to decrease value." }),
           /* @__PURE__ */ jsxs33(ScreenReaderOnly, { "aria-live": "polite", children: [
             "Current color: ",
             valueAsHex,
@@ -12817,7 +12836,7 @@ import { isArray as isArray2, isString as isString3 } from "@wistia/type-guards"
 import { forwardRef as forwardRef16 } from "react";
 import { styled as styled51 } from "styled-components";
 import { isNil as isNil15, isNotNil as isNotNil19, isNonEmptyString as isNonEmptyString5 } from "@wistia/type-guards";
-import { Fragment as Fragment7, jsx as jsx265, jsxs as jsxs34 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx266, jsxs as jsxs34 } from "react/jsx-runtime";
 var TagLabel = styled51.a`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-size: var(--wui-typography-label-4-size);
@@ -12911,7 +12930,7 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
     );
   }
   return /* @__PURE__ */ jsxs34(Fragment7, { children: [
-    /* @__PURE__ */ jsx265(TagDivider, { $colorScheme: colorScheme }),
+    /* @__PURE__ */ jsx266(TagDivider, { $colorScheme: colorScheme }),
     /* @__PURE__ */ jsxs34(
       StyledRemoveButton,
       {
@@ -12919,14 +12938,14 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
         onClick: onClickRemove,
         type: "button",
         children: [
-          /* @__PURE__ */ jsx265(
+          /* @__PURE__ */ jsx266(
             Icon,
             {
               size: "sm",
               type: "close"
             }
           ),
-          /* @__PURE__ */ jsx265(ScreenReaderOnly, { children: onClickRemoveLabel })
+          /* @__PURE__ */ jsx266(ScreenReaderOnly, { children: onClickRemoveLabel })
         ]
       }
     )
@@ -12954,7 +12973,7 @@ var Tag = forwardRef16(
               ]
             }
           ),
-          /* @__PURE__ */ jsx265(
+          /* @__PURE__ */ jsx266(
             RemoveButton,
             {
               colorScheme,
@@ -12987,7 +13006,7 @@ var getDefaultTypographicElement = (variant) => {
 };
 
 // src/components/Combobox/Combobox.tsx
-import { jsx as jsx266, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx267, jsxs as jsxs35 } from "react/jsx-runtime";
 var ComboboxWrapper = styled52.div`
   ${inputCss};
   width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
@@ -13111,7 +13130,7 @@ var NoResults = styled52.div`
 `;
 var POPOVER_WIDTH_OFFSET = 20;
 var ComboboxOption = ({ value, children }) => {
-  return /* @__PURE__ */ jsx266(
+  return /* @__PURE__ */ jsx267(
     ComboboxItem2,
     {
       className: "combobox-item",
@@ -13132,7 +13151,7 @@ var extractOptions = (children) => {
 };
 var defaultDisplayValues = (values, onRemove) => {
   const valueArray = Array.isArray(values) ? values : [values];
-  return valueArray.map((selectedValue) => /* @__PURE__ */ jsx266(
+  return valueArray.map((selectedValue) => /* @__PURE__ */ jsx267(
     Tag,
     {
       label: selectedValue,
@@ -13205,7 +13224,7 @@ var Combobox2 = ({
             $fullWidth: fullWidth,
             children: [
               isMultiSelect ? displayValues(value, handleRemoveValue) : null,
-              /* @__PURE__ */ jsx266(
+              /* @__PURE__ */ jsx267(
                 ComboboxInput,
                 {
                   autoSelect: true,
@@ -13234,7 +13253,7 @@ var Combobox2 = ({
                   value: match,
                   children: [
                     options[match],
-                    /* @__PURE__ */ jsx266(
+                    /* @__PURE__ */ jsx267(
                       Icon,
                       {
                         size: "md",
@@ -13248,7 +13267,7 @@ var Combobox2 = ({
                 },
                 match
               )),
-              !matches.length && /* @__PURE__ */ jsx266(NoResults, { children: "No results found" })
+              !matches.length && /* @__PURE__ */ jsx267(NoResults, { children: "No results found" })
             ]
           }
         )
@@ -13279,7 +13298,7 @@ var MenuContext = createContext6({ compact: false });
 var useMenuContext = () => useContext5(MenuContext);
 
 // src/components/Menu/Menu.tsx
-import { jsx as jsx267, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx268, jsxs as jsxs36 } from "react/jsx-runtime";
 var open = keyframes3`
   from {
     opacity: 0;
@@ -13392,25 +13411,25 @@ var Menu = forwardRef17(
         onOpenChange: () => null
       };
     }
-    return /* @__PURE__ */ jsx267(MenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs36(
+    return /* @__PURE__ */ jsx268(MenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs36(
       DropdownMenu,
       {
         modal: false,
         ...controlProps,
         children: [
-          /* @__PURE__ */ jsx267(DropdownMenuTrigger, { asChild: true, children: isNotUndefined9(trigger) ? trigger : /* @__PURE__ */ jsx267(
+          /* @__PURE__ */ jsx268(DropdownMenuTrigger, { asChild: true, children: isNotUndefined9(trigger) ? trigger : /* @__PURE__ */ jsx268(
             Button,
             {
               ref,
               "aria-expanded": isOpen,
               disabled,
               forceState: isOpen ? "active" : void 0,
-              rightIcon: /* @__PURE__ */ jsx267(Icon, { type: "caret-down" }),
+              rightIcon: /* @__PURE__ */ jsx268(Icon, { type: "caret-down" }),
               ...triggerProps,
               children: label
             }
           ) }),
-          /* @__PURE__ */ jsx267(DropdownMenuPortal, { children: /* @__PURE__ */ jsx267(
+          /* @__PURE__ */ jsx268(DropdownMenuPortal, { children: /* @__PURE__ */ jsx268(
             MenuContent,
             {
               ...props,
@@ -13436,17 +13455,17 @@ Menu.displayName = "Menu_UI";
 // src/components/Menu/MenuLabel.tsx
 import { styled as styled54 } from "styled-components";
 import { DropdownMenuLabel } from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx268 } from "react/jsx-runtime";
+import { jsx as jsx269 } from "react/jsx-runtime";
 var StyledMenuLabel = styled54(DropdownMenuLabel)`
   padding: var(--wui-space-02);
 `;
 var MenuLabel = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx268(
+  return /* @__PURE__ */ jsx269(
     StyledMenuLabel,
     {
       asChild: true,
       ...props,
-      children: /* @__PURE__ */ jsx268(
+      children: /* @__PURE__ */ jsx269(
         Heading,
         {
           renderAs: "span",
@@ -13477,7 +13496,7 @@ import { isNotNil as isNotNil22 } from "@wistia/type-guards";
 import { forwardRef as forwardRef18 } from "react";
 import { styled as styled55 } from "styled-components";
 import { isNotNil as isNotNil21, isNotUndefined as isNotUndefined10 } from "@wistia/type-guards";
-import { jsx as jsx269, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx270, jsxs as jsxs37 } from "react/jsx-runtime";
 var StyledButton3 = styled55(Button)`
   ${({ colorScheme }) => getColorScheme(colorScheme)};
 
@@ -13562,7 +13581,7 @@ var MenuItemButton = forwardRef18(({ children, appearance, command, icon, ...pro
     colorScheme = "error";
   }
   if (appearance === "gated") {
-    badge = /* @__PURE__ */ jsx269(
+    badge = /* @__PURE__ */ jsx270(
       Icon,
       {
         colorScheme: "purple",
@@ -13584,10 +13603,10 @@ var MenuItemButton = forwardRef18(({ children, appearance, command, icon, ...pro
       fullWidth: true,
       unstyled: true,
       children: [
-        isNotNil21(props.leftIcon) ? /* @__PURE__ */ jsx269(StyledLeftIconContainer, { children: props.leftIcon }) : null,
-        /* @__PURE__ */ jsx269(StyledLabelAndDescriptionContainer, { children }),
-        isNotNil21(badge) || isNotNil21(command) ? /* @__PURE__ */ jsx269(StyledBadgeContainer, { children: badge ?? command }) : null,
-        isNotNil21(props.rightIcon) ? /* @__PURE__ */ jsx269(StyledRightIconContainer, { children: props.rightIcon }) : null
+        isNotNil21(props.leftIcon) ? /* @__PURE__ */ jsx270(StyledLeftIconContainer, { children: props.leftIcon }) : null,
+        /* @__PURE__ */ jsx270(StyledLabelAndDescriptionContainer, { children }),
+        isNotNil21(badge) || isNotNil21(command) ? /* @__PURE__ */ jsx270(StyledBadgeContainer, { children: badge ?? command }) : null,
+        isNotNil21(props.rightIcon) ? /* @__PURE__ */ jsx270(StyledRightIconContainer, { children: props.rightIcon }) : null
       ]
     }
   );
@@ -13596,7 +13615,7 @@ MenuItemButton.displayName = "MenuItemButton_UI";
 
 // src/components/Menu/MenuItemLabelDescription.tsx
 import { styled as styled56 } from "styled-components";
-import { jsx as jsx270 } from "react/jsx-runtime";
+import { jsx as jsx271 } from "react/jsx-runtime";
 var StyledMenuItemLabel = styled56.span`
   /* avoid no-empty-source rule */
 `;
@@ -13604,10 +13623,10 @@ var StyledMenuItemDescription = styled56(Text)`
   /* avoid no-empty-source rule */
 `;
 var MenuItemLabel = ({ children }) => {
-  return /* @__PURE__ */ jsx270(StyledMenuItemLabel, { children });
+  return /* @__PURE__ */ jsx271(StyledMenuItemLabel, { children });
 };
 var MenuItemDescription = ({ children }) => {
-  return /* @__PURE__ */ jsx270(
+  return /* @__PURE__ */ jsx271(
     StyledMenuItemDescription,
     {
       prominence: "secondary",
@@ -13618,7 +13637,7 @@ var MenuItemDescription = ({ children }) => {
 };
 
 // src/components/Menu/SubMenu.tsx
-import { jsx as jsx271, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx272, jsxs as jsxs38 } from "react/jsx-runtime";
 var SubMenuContent = styled57(DropdownMenuSubContent)`
   ${menuContentCss}
 
@@ -13640,12 +13659,12 @@ var StyledSubTrigger = styled57(DropdownMenuSubTrigger)`
 var SubMenuTrigger = ({ icon, ...props }) => {
   const { isSmAndUp } = useMq();
   const Trigger4 = isSmAndUp ? StyledSubTrigger : DropdownMenuItem;
-  return /* @__PURE__ */ jsx271(Trigger4, { asChild: true, children: /* @__PURE__ */ jsx271(
+  return /* @__PURE__ */ jsx272(Trigger4, { asChild: true, children: /* @__PURE__ */ jsx272(
     MenuItemButton,
     {
       ...props,
       leftIcon: icon,
-      rightIcon: /* @__PURE__ */ jsx271(Icon, { type: "caret-right" })
+      rightIcon: /* @__PURE__ */ jsx272(Icon, { type: "caret-right" })
     }
   ) });
 };
@@ -13661,10 +13680,10 @@ var SubMenu = ({
   const { compact } = useMenuContext();
   return isSmAndUp ? /* @__PURE__ */ jsxs38(DropdownMenuSub, { onOpenChange, children: [
     /* @__PURE__ */ jsxs38(SubMenuTrigger, { ...props, children: [
-      /* @__PURE__ */ jsx271(MenuItemLabel, { children: label }),
-      isNotNil22(description) ? /* @__PURE__ */ jsx271(MenuItemDescription, { children: description }) : null
+      /* @__PURE__ */ jsx272(MenuItemLabel, { children: label }),
+      isNotNil22(description) ? /* @__PURE__ */ jsx272(MenuItemDescription, { children: description }) : null
     ] }),
-    /* @__PURE__ */ jsx271(DropdownMenuPortal2, { children: /* @__PURE__ */ jsx271(SubMenuContent, { $compact: compact, children }) })
+    /* @__PURE__ */ jsx272(DropdownMenuPortal2, { children: /* @__PURE__ */ jsx272(SubMenuContent, { $compact: compact, children }) })
   ] }) : /* @__PURE__ */ jsxs38(DropdownMenuGroup, { children: [
     /* @__PURE__ */ jsxs38(
       SubMenuTrigger,
@@ -13675,12 +13694,12 @@ var SubMenu = ({
           setIsExpanded((prev) => !prev);
         },
         children: [
-          /* @__PURE__ */ jsx271(MenuItemLabel, { children: label }),
-          /* @__PURE__ */ jsx271(MenuItemDescription, { children: description })
+          /* @__PURE__ */ jsx272(MenuItemLabel, { children: label }),
+          /* @__PURE__ */ jsx272(MenuItemDescription, { children: description })
         ]
       }
     ),
-    /* @__PURE__ */ jsx271(StyledMobileSubMenuItems, { children: isExpanded ? children : null })
+    /* @__PURE__ */ jsx272(StyledMobileSubMenuItems, { children: isExpanded ? children : null })
   ] });
 };
 SubMenu.displayName = "SubMenu_UI";
@@ -13688,15 +13707,15 @@ SubMenu.displayName = "SubMenu_UI";
 // src/components/Menu/MenuItem.tsx
 import { forwardRef as forwardRef19 } from "react";
 import { DropdownMenuItem as DropdownMenuItem2 } from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx272 } from "react/jsx-runtime";
+import { jsx as jsx273 } from "react/jsx-runtime";
 var MenuItem = forwardRef19(
   ({ onSelect = () => null, ...props }, ref) => {
-    return /* @__PURE__ */ jsx272(
+    return /* @__PURE__ */ jsx273(
       DropdownMenuItem2,
       {
         asChild: true,
         onSelect,
-        children: /* @__PURE__ */ jsx272(
+        children: /* @__PURE__ */ jsx273(
           MenuItemButton,
           {
             ...props,
@@ -13712,19 +13731,19 @@ MenuItem.displayName = "MenuItem_UI";
 
 // src/components/Menu/MenuRadioGroup.tsx
 import { DropdownMenuRadioGroup } from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx273 } from "react/jsx-runtime";
+import { jsx as jsx274 } from "react/jsx-runtime";
 var MenuRadioGroup = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx273(DropdownMenuRadioGroup, { ...props, children });
+  return /* @__PURE__ */ jsx274(DropdownMenuRadioGroup, { ...props, children });
 };
 MenuRadioGroup.displayName = "MenuRadioGroup_UI";
 
 // src/components/Menu/RadioMenuItem.tsx
 import { DropdownMenuItemIndicator, DropdownMenuRadioItem } from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx274 } from "react/jsx-runtime";
+import { jsx as jsx275 } from "react/jsx-runtime";
 var RadioMenuItem = ({
   onSelect,
   value,
-  indicator = /* @__PURE__ */ jsx274(
+  indicator = /* @__PURE__ */ jsx275(
     Icon,
     {
       size: "sm",
@@ -13734,17 +13753,17 @@ var RadioMenuItem = ({
   ...props
 }) => {
   const extraProps = onSelect ? { onSelect } : {};
-  return /* @__PURE__ */ jsx274(
+  return /* @__PURE__ */ jsx275(
     DropdownMenuRadioItem,
     {
       ...extraProps,
       asChild: true,
       value,
-      children: /* @__PURE__ */ jsx274(
+      children: /* @__PURE__ */ jsx275(
         MenuItemButton,
         {
           ...props,
-          rightIcon: /* @__PURE__ */ jsx274(DropdownMenuItemIndicator, { children: indicator })
+          rightIcon: /* @__PURE__ */ jsx275(DropdownMenuItemIndicator, { children: indicator })
         }
       )
     }
@@ -13755,7 +13774,7 @@ RadioMenuItem.displayName = "RadioMenuItem_UI";
 // src/components/Menu/CheckboxMenuItem.tsx
 import { DropdownMenuCheckboxItem, DropdownMenuItemIndicator as DropdownMenuItemIndicator2 } from "@radix-ui/react-dropdown-menu";
 import { isNotNil as isNotNil23 } from "@wistia/type-guards";
-import { jsx as jsx275, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx276, jsxs as jsxs39 } from "react/jsx-runtime";
 var CheckboxIndicator = ({ checked, ...props }) => {
   return checked ? /* @__PURE__ */ jsxs39(
     "svg",
@@ -13767,14 +13786,14 @@ var CheckboxIndicator = ({ checked, ...props }) => {
       width: "24",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ jsx275(
+        /* @__PURE__ */ jsx276(
           "path",
           {
             d: "m4 8c0-2.20914 1.79086-4 4-4h8c2.2091 0 4 1.79086 4 4v8c0 2.2091-1.7909 4-4 4h-8c-2.20914 0-4-1.7909-4-4z",
             fill: "#2949e5"
           }
         ),
-        /* @__PURE__ */ jsx275(
+        /* @__PURE__ */ jsx276(
           "path",
           {
             d: "m10.4728 15.1931-3.09523-3.1131c-.18596-.187-.18596-.4902 0-.6773l.67341-.6773c.18596-.187.48749-.187.67344 0l2.08508 2.0971 4.4661-4.49174c.1859-.18703.4875-.18703.6734 0l.6734.67731c.186.18703.186.49027 0 .67731l-5.4762 5.50772c-.1859.187-.4874.187-.6734 0z",
@@ -13793,14 +13812,14 @@ var CheckboxIndicator = ({ checked, ...props }) => {
       width: "24",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ jsx275(
+        /* @__PURE__ */ jsx276(
           "path",
           {
             d: "m8 4.5h8c1.933 0 3.5 1.567 3.5 3.5v8c0 1.933-1.567 3.5-3.5 3.5h-8c-1.933 0-3.5-1.567-3.5-3.5v-8c0-1.933 1.567-3.5 3.5-3.5z",
             fill: "#fcfcfd"
           }
         ),
-        /* @__PURE__ */ jsx275(
+        /* @__PURE__ */ jsx276(
           "path",
           {
             d: "m8 4.5h8c1.933 0 3.5 1.567 3.5 3.5v8c0 1.933-1.567 3.5-3.5 3.5h-8c-1.933 0-3.5-1.567-3.5-3.5v-8c0-1.933 1.567-3.5 3.5-3.5z",
@@ -13817,19 +13836,19 @@ var CheckboxMenuItem = ({
   onCheckedChange,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx275(
+  return /* @__PURE__ */ jsx276(
     DropdownMenuCheckboxItem,
     {
       asChild: true,
       checked,
       onCheckedChange,
       onSelect,
-      children: /* @__PURE__ */ jsx275(
+      children: /* @__PURE__ */ jsx276(
         MenuItemButton,
         {
           ...props,
-          leftIcon: isNotNil23(props.icon) ? props.icon : /* @__PURE__ */ jsx275(CheckboxIndicator, { checked }),
-          rightIcon: isNotNil23(props.icon) ? /* @__PURE__ */ jsx275(DropdownMenuItemIndicator2, { children: /* @__PURE__ */ jsx275(Icon, { type: "checkmark" }) }) : void 0
+          leftIcon: isNotNil23(props.icon) ? props.icon : /* @__PURE__ */ jsx276(CheckboxIndicator, { checked }),
+          rightIcon: isNotNil23(props.icon) ? /* @__PURE__ */ jsx276(DropdownMenuItemIndicator2, { children: /* @__PURE__ */ jsx276(Icon, { type: "checkmark" }) }) : void 0
         }
       )
     }
@@ -13840,7 +13859,7 @@ CheckboxMenuItem.displayName = "CheckboxMenuItem_UI";
 // src/components/Menu/FilterMenu.tsx
 import { Children as Children6, forwardRef as forwardRef20 } from "react";
 import { DropdownMenuItem as DropdownMenuItem3 } from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx276, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx277, jsxs as jsxs40 } from "react/jsx-runtime";
 var FilterMenuItem = CheckboxMenuItem;
 var FilterMenu = forwardRef20(
   ({ value, onChange, searchValue, onSearchValueChange, children, ...props }, ref) => {
@@ -13850,7 +13869,7 @@ var FilterMenu = forwardRef20(
         ...props,
         ref,
         children: [
-          /* @__PURE__ */ jsx276(
+          /* @__PURE__ */ jsx277(
             Card,
             {
               alignItems: "flex-end",
@@ -13865,7 +13884,7 @@ var FilterMenu = forwardRef20(
                 right: 0,
                 margin: "1px"
               },
-              children: /* @__PURE__ */ jsx276(
+              children: /* @__PURE__ */ jsx277(
                 Input,
                 {
                   autoFocus: true,
@@ -13891,7 +13910,7 @@ var FilterMenu = forwardRef20(
               )
             }
           ),
-          /* @__PURE__ */ jsx276(
+          /* @__PURE__ */ jsx277(
             MenuItem,
             {
               disabled: true,
@@ -13899,13 +13918,13 @@ var FilterMenu = forwardRef20(
               children: " "
             }
           ),
-          Children6.toArray(children).length > 0 ? children : /* @__PURE__ */ jsx276(MenuItem, { disabled: true, children: "No results found" }),
-          value.length > 0 && /* @__PURE__ */ jsx276(
+          Children6.toArray(children).length > 0 ? children : /* @__PURE__ */ jsx277(MenuItem, { disabled: true, children: "No results found" }),
+          value.length > 0 && /* @__PURE__ */ jsx277(
             DropdownMenuItem3,
             {
               disabled: true,
               style: { marginTop: "24px" },
-              children: /* @__PURE__ */ jsx276(
+              children: /* @__PURE__ */ jsx277(
                 Card,
                 {
                   alignItems: "flex-end",
@@ -13920,7 +13939,7 @@ var FilterMenu = forwardRef20(
                     right: 0,
                     margin: "1px"
                   },
-                  children: /* @__PURE__ */ jsx276(
+                  children: /* @__PURE__ */ jsx277(
                     Button,
                     {
                       onClick: () => onChange([]),
@@ -13940,7 +13959,7 @@ var FilterMenu = forwardRef20(
 FilterMenu.displayName = "FilterMenu_UI";
 
 // src/components/ContextMenu/ContextMenu.tsx
-import { jsx as jsx277 } from "react/jsx-runtime";
+import { jsx as jsx278 } from "react/jsx-runtime";
 var ContextMenu = ({
   position,
   triggerRef,
@@ -13970,7 +13989,7 @@ var ContextMenu = ({
   if (!isOpen) {
     return null;
   }
-  const menu = /* @__PURE__ */ jsx277(
+  const menu = /* @__PURE__ */ jsx278(
     Menu,
     {
       compact,
@@ -13982,7 +14001,7 @@ var ContextMenu = ({
         }
       },
       side,
-      trigger: /* @__PURE__ */ jsx277(
+      trigger: /* @__PURE__ */ jsx278(
         "button",
         {
           "aria-label": "context menu",
@@ -14010,7 +14029,7 @@ var ContextMenu = ({
 import { useRef as useRef15 } from "react";
 import { styled as styled58, keyframes as keyframes4 } from "styled-components";
 import { isNotNil as isNotNil25 } from "@wistia/type-guards";
-import { jsx as jsx278, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx279, jsxs as jsxs41 } from "react/jsx-runtime";
 var pulse = keyframes4`
   0%,
       100% {
@@ -14153,7 +14172,7 @@ var DataCardInner = ({
     $colorScheme: colorScheme,
     ...props,
     children: [
-      /* @__PURE__ */ jsx278(
+      /* @__PURE__ */ jsx279(
         StyledLabel3,
         {
           "data-wui-data-card-skeleton": isLoading,
@@ -14162,7 +14181,7 @@ var DataCardInner = ({
           children: label
         }
       ),
-      /* @__PURE__ */ jsx278(
+      /* @__PURE__ */ jsx279(
         StyledValue,
         {
           "data-wui-data-card-skeleton": isLoading,
@@ -14171,8 +14190,8 @@ var DataCardInner = ({
           children: value
         }
       ),
-      isNotNil25(upperRightSlot) && !isLoading && /* @__PURE__ */ jsx278(StyledSlot, { children: upperRightSlot }),
-      isNotNil25(subtitle) && !isLoading && /* @__PURE__ */ jsx278(
+      isNotNil25(upperRightSlot) && !isLoading && /* @__PURE__ */ jsx279(StyledSlot, { children: upperRightSlot }),
+      isNotNil25(subtitle) && !isLoading && /* @__PURE__ */ jsx279(
         StyledSubtitle,
         {
           "data-wui-data-card-subtitle": true,
@@ -14180,7 +14199,7 @@ var DataCardInner = ({
           children: subtitle
         }
       ),
-      isNotNil25(trend) && !isLoading && /* @__PURE__ */ jsx278(StyledDataCardTrendContainer, { children: trend })
+      isNotNil25(trend) && !isLoading && /* @__PURE__ */ jsx279(StyledDataCardTrendContainer, { children: trend })
     ]
   }
 );
@@ -14188,12 +14207,12 @@ var DataCard = (props) => {
   const ref = useRef15(null);
   if (isNotNil25(props.href) || isNotNil25(props.onClick)) {
     const { "aria-pressed": ariaPressed, ...dataCardProps } = props;
-    return /* @__PURE__ */ jsx278(ClickRegion, { targetRef: ref, children: /* @__PURE__ */ jsx278(
+    return /* @__PURE__ */ jsx279(ClickRegion, { targetRef: ref, children: /* @__PURE__ */ jsx279(
       DataCardInner,
       {
         upperRightSlot: props.upperRightSlot,
         ...dataCardProps,
-        label: /* @__PURE__ */ jsx278(
+        label: /* @__PURE__ */ jsx279(
           Button,
           {
             ref,
@@ -14210,13 +14229,13 @@ var DataCard = (props) => {
       }
     ) });
   }
-  return /* @__PURE__ */ jsx278(DataCardInner, { ...props });
+  return /* @__PURE__ */ jsx279(DataCardInner, { ...props });
 };
 DataCard.displayName = "DataCard_UI";
 
 // src/components/DataCards/DataCards.tsx
 import { styled as styled59 } from "styled-components";
-import { jsx as jsx279 } from "react/jsx-runtime";
+import { jsx as jsx280 } from "react/jsx-runtime";
 var StyledDataCards = styled59(Box)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   --wui-data-cards-column-count: ${({ $columns }) => $columns === "auto" ? void 0 : $columns};
@@ -14241,7 +14260,7 @@ var DataCards = ({
 }) => {
   const responsiveCardMaxWidth = useResponsiveProp(cardMaxWidth);
   const responsiveColumns = useResponsiveProp(columns);
-  return /* @__PURE__ */ jsx279(
+  return /* @__PURE__ */ jsx280(
     StyledDataCards,
     {
       ...props,
@@ -14261,7 +14280,7 @@ DataCards.displayName = "DataCards_UI";
 
 // src/components/DataCards/DataCardTrend.tsx
 import { styled as styled60 } from "styled-components";
-import { jsx as jsx280, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx281, jsxs as jsxs42 } from "react/jsx-runtime";
 var StyledDataCardTrend = styled60.div`
   ${({ $outlook }) => getColorScheme($outlook === "positive" ? "success" : "error")};
   background: var(--wui-color-bg-app);
@@ -14278,7 +14297,7 @@ var DataCardTrend = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsxs42(StyledDataCardTrend, { $outlook: outlook, children: [
-    /* @__PURE__ */ jsx280(
+    /* @__PURE__ */ jsx281(
       Icon,
       {
         size: "md",
@@ -14286,7 +14305,7 @@ var DataCardTrend = ({
         ...props
       }
     ),
-    /* @__PURE__ */ jsx280(
+    /* @__PURE__ */ jsx281(
       Text,
       {
         prominence: "secondary",
@@ -14299,14 +14318,14 @@ var DataCardTrend = ({
 
 // src/components/DataCards/DataCardHoverArrow.tsx
 import { styled as styled61 } from "styled-components";
-import { jsx as jsx281 } from "react/jsx-runtime";
+import { jsx as jsx282 } from "react/jsx-runtime";
 var StyledIconContainer = styled61.div`
   display: flex;
   align-items: center;
   align-self: center;
   height: 0;
 `;
-var DataCardHoverArrow = () => /* @__PURE__ */ jsx281(StyledIconContainer, { children: /* @__PURE__ */ jsx281(
+var DataCardHoverArrow = () => /* @__PURE__ */ jsx282(StyledIconContainer, { children: /* @__PURE__ */ jsx282(
   Icon,
   {
     "data-wui-data-card-hover-icon": true,
@@ -14317,7 +14336,7 @@ DataCardHoverArrow.displayName = "DataCardHoverArrow_UI";
 
 // src/components/DataList/DataList.tsx
 import { styled as styled62 } from "styled-components";
-import { jsx as jsx282 } from "react/jsx-runtime";
+import { jsx as jsx283 } from "react/jsx-runtime";
 var StyledDataList = styled62.dl`
   display: grid;
   grid-template-columns: auto 1fr;
@@ -14346,7 +14365,7 @@ var DataList = ({
   labelProminence = "primary",
   ...props
 }) => {
-  return /* @__PURE__ */ jsx282(
+  return /* @__PURE__ */ jsx283(
     StyledDataList,
     {
       role: "list",
@@ -14369,9 +14388,9 @@ var DataListItem = ({ children }) => {
 DataListItem.displayName = "DataListItem_UI";
 
 // src/components/DataList/DataListItemLabel.tsx
-import { jsx as jsx283 } from "react/jsx-runtime";
+import { jsx as jsx284 } from "react/jsx-runtime";
 var DataListItemLabel = (props) => {
-  return /* @__PURE__ */ jsx283(
+  return /* @__PURE__ */ jsx284(
     Text,
     {
       variant: "label4",
@@ -14383,9 +14402,9 @@ var DataListItemLabel = (props) => {
 DataListItemLabel.displayName = "DataListItemLabel_UI";
 
 // src/components/DataList/DataListItemValue.tsx
-import { jsx as jsx284 } from "react/jsx-runtime";
+import { jsx as jsx285 } from "react/jsx-runtime";
 var DataListItemValue = (props) => {
-  return /* @__PURE__ */ jsx284(
+  return /* @__PURE__ */ jsx285(
     Text,
     {
       variant: "body3",
@@ -14398,7 +14417,7 @@ DataListItemValue.displayName = "DataListItemValue_UI";
 
 // src/components/Divider/Divider.tsx
 import { styled as styled63, css as css33 } from "styled-components";
-import { jsx as jsx285 } from "react/jsx-runtime";
+import { jsx as jsx286 } from "react/jsx-runtime";
 var horizontalBorderCss = css33`
   border-top-color: var(--wui-color-border);
   border-top-style: solid;
@@ -14425,7 +14444,7 @@ var DividerComponent = styled63.div`
 `;
 var Divider = ({ orientation = "horizontal", ...props }) => {
   const responsiveOrientation = useResponsiveProp(orientation);
-  return /* @__PURE__ */ jsx285(
+  return /* @__PURE__ */ jsx286(
     DividerComponent,
     {
       $orientation: responsiveOrientation,
@@ -14440,7 +14459,7 @@ Divider.displayName = "Divider_UI";
 // src/components/EditableHeading/EditableHeading.tsx
 import { styled as styled64, css as css34 } from "styled-components";
 import { useState as useState18, useRef as useRef16 } from "react";
-import { Fragment as Fragment8, jsx as jsx286, jsxs as jsxs43 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx287, jsxs as jsxs43 } from "react/jsx-runtime";
 var StyledInput = styled64(Input)`
   &:not([rows]) {
     min-height: unset;
@@ -14533,7 +14552,7 @@ var EditableHeading = ({
       handleSetEditing(false);
     }
   };
-  const HeadingComponent2 = /* @__PURE__ */ jsx286(
+  const HeadingComponent2 = /* @__PURE__ */ jsx287(
     StyledHeading2,
     {
       ref: headingRef,
@@ -14547,7 +14566,7 @@ var EditableHeading = ({
     return HeadingComponent2;
   }
   if (isEditing || __forceEditing) {
-    return /* @__PURE__ */ jsx286(
+    return /* @__PURE__ */ jsx287(
       StyledInput,
       {
         $height: headingHeight,
@@ -14567,8 +14586,8 @@ var EditableHeading = ({
     );
   }
   return /* @__PURE__ */ jsxs43(Fragment8, { children: [
-    /* @__PURE__ */ jsx286(Tooltip, { content: tooltipText, children: HeadingComponent2 }),
-    /* @__PURE__ */ jsx286(ScreenReaderOnly, { children: /* @__PURE__ */ jsx286(
+    /* @__PURE__ */ jsx287(Tooltip, { content: tooltipText, children: HeadingComponent2 }),
+    /* @__PURE__ */ jsx287(ScreenReaderOnly, { children: /* @__PURE__ */ jsx287(
       "button",
       {
         "aria-label": ariaLabel,
@@ -14588,7 +14607,7 @@ import { isNotNil as isNotNil26 } from "@wistia/type-guards";
 import { createContext as createContext7, useMemo as useMemo13, useState as useState19, useCallback as useCallback16, useId as useId4 } from "react";
 import { isNonEmptyString as isNonEmptyString6 } from "@wistia/type-guards";
 import { styled as styled65 } from "styled-components";
-import { jsx as jsx287 } from "react/jsx-runtime";
+import { jsx as jsx288 } from "react/jsx-runtime";
 var LARGE_PADDING = "var(--wui-space-02)";
 var SMALL_PADDING = "var(--wui-space-01)";
 var getPaddingForVariant = (variant) => {
@@ -14721,7 +14740,7 @@ var EditableTextRoot = ({
     }
     return "idle";
   };
-  return /* @__PURE__ */ jsx287(
+  return /* @__PURE__ */ jsx288(
     StyledEditableTextRoot,
     {
       $typographicVariant: typographicVariant,
@@ -14729,13 +14748,13 @@ var EditableTextRoot = ({
       "data-wui-editable-text-root": true,
       "data-wui-editable-text-state": getState(),
       ...props,
-      children: /* @__PURE__ */ jsx287(EditableTextContext.Provider, { value: context, children })
+      children: /* @__PURE__ */ jsx288(EditableTextContext.Provider, { value: context, children })
     }
   );
 };
 
 // src/components/EditableText/EditableTextDisplay.tsx
-import { jsx as jsx288, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx289, jsxs as jsxs44 } from "react/jsx-runtime";
 var StyledEditableTextDisplay = styled66.div`
   ${({ $typographicVariant }) => getTypographicStyles($typographicVariant)}
   padding: var(--wui-editable-text-padding);
@@ -14789,7 +14808,7 @@ var EditableTextDisplayComponent = forwardRef21(
       return null;
     }
     if (asTrigger && !context.readOnly) {
-      return /* @__PURE__ */ jsx288(ClickRegion, { targetRef: triggerButtonRef, children: /* @__PURE__ */ jsxs44(
+      return /* @__PURE__ */ jsx289(ClickRegion, { targetRef: triggerButtonRef, children: /* @__PURE__ */ jsxs44(
         StyledEditableTextDisplay,
         {
           ref,
@@ -14801,7 +14820,7 @@ var EditableTextDisplayComponent = forwardRef21(
           ...props,
           children: [
             displayText,
-            /* @__PURE__ */ jsx288(
+            /* @__PURE__ */ jsx289(
               "button",
               {
                 ref: triggerButtonRef,
@@ -14815,7 +14834,7 @@ var EditableTextDisplayComponent = forwardRef21(
         }
       ) });
     }
-    return /* @__PURE__ */ jsx288(
+    return /* @__PURE__ */ jsx289(
       StyledEditableTextDisplay,
       {
         ref,
@@ -14841,7 +14860,7 @@ var EditableTextDisplay = makePolymorphic(
 import { useContext as useContext7, useEffect as useEffect17, useRef as useRef18 } from "react";
 import { styled as styled67 } from "styled-components";
 import { isNotNil as isNotNil27 } from "@wistia/type-guards";
-import { jsx as jsx289 } from "react/jsx-runtime";
+import { jsx as jsx290 } from "react/jsx-runtime";
 var StyledInput2 = styled67(Input)`
   && {
     ${({ $minLines }) => isNotNil27($minLines) && `min-height: calc(${$minLines}lh + calc(var(--wui-editable-text-padding) * 2));`}
@@ -14932,7 +14951,7 @@ var EditableTextInput = (props) => {
   if (!isEditing) {
     return null;
   }
-  return /* @__PURE__ */ jsx289(
+  return /* @__PURE__ */ jsx290(
     StyledInput2,
     {
       ref: inputRef,
@@ -14958,14 +14977,14 @@ var EditableTextInput = (props) => {
 
 // src/components/EditableText/EditableTextLabel.tsx
 import { useContext as useContext8 } from "react";
-import { jsx as jsx290 } from "react/jsx-runtime";
+import { jsx as jsx291 } from "react/jsx-runtime";
 var EditableTextLabel = ({ ...props }) => {
   const context = useContext8(EditableTextContext);
   if (!context) {
     throw new Error("EditableTextLabel must be used within an EditableTextRoot context");
   }
   const { id, label, isEditing } = context;
-  return /* @__PURE__ */ jsx290(
+  return /* @__PURE__ */ jsx291(
     Label,
     {
       ...isEditing && { htmlFor: id },
@@ -14976,11 +14995,11 @@ var EditableTextLabel = ({ ...props }) => {
 };
 
 // src/components/EditableText/EditableText.tsx
-import { jsx as jsx291, jsxs as jsxs45 } from "react/jsx-runtime";
+import { jsx as jsx292, jsxs as jsxs45 } from "react/jsx-runtime";
 var EditableText = ({ hideLabel = true, ...props }) => /* @__PURE__ */ jsxs45(EditableTextRoot, { ...props, children: [
-  /* @__PURE__ */ jsx291(EditableTextLabel, { screenReaderOnly: hideLabel }),
-  /* @__PURE__ */ jsx291(EditableTextInput, {}),
-  /* @__PURE__ */ jsx291(EditableTextDisplay, { asTrigger: true })
+  /* @__PURE__ */ jsx292(EditableTextLabel, { screenReaderOnly: hideLabel }),
+  /* @__PURE__ */ jsx292(EditableTextInput, {}),
+  /* @__PURE__ */ jsx292(EditableTextDisplay, { asTrigger: true })
 ] });
 EditableText.displayName = "EditableText_UI";
 
@@ -15115,9 +15134,9 @@ var useFormState = (action, initialData = {}) => {
 // src/components/Form/FormErrorSummary.tsx
 import { useContext as useContext12, useRef as useRef19 } from "react";
 import { isArray as isArray3, isNotUndefined as isNotUndefined11 } from "@wistia/type-guards";
-import { jsx as jsx292, jsxs as jsxs46 } from "react/jsx-runtime";
+import { jsx as jsx293, jsxs as jsxs46 } from "react/jsx-runtime";
 var ErrorItem = ({ name, error, formId }) => {
-  return /* @__PURE__ */ jsx292("li", { children: /* @__PURE__ */ jsx292(Link, { href: `#${formId}-${name}`, children: error }) }, name);
+  return /* @__PURE__ */ jsx293("li", { children: /* @__PURE__ */ jsx293(Link, { href: `#${formId}-${name}`, children: error }) }, name);
 };
 var FormErrorSummary = ({ description }) => {
   const ref = useRef19(null);
@@ -15127,9 +15146,9 @@ var FormErrorSummary = ({ description }) => {
     return null;
   }
   return /* @__PURE__ */ jsxs46("div", { ref, children: [
-    /* @__PURE__ */ jsx292("p", { children: description }),
-    /* @__PURE__ */ jsx292("ul", { children: Object.entries(errors).filter(([, error]) => isNotUndefined11(error)).map(
-      ([name, error]) => isArray3(error) ? error.map((err) => /* @__PURE__ */ jsx292(
+    /* @__PURE__ */ jsx293("p", { children: description }),
+    /* @__PURE__ */ jsx293("ul", { children: Object.entries(errors).filter(([, error]) => isNotUndefined11(error)).map(
+      ([name, error]) => isArray3(error) ? error.map((err) => /* @__PURE__ */ jsx293(
         ErrorItem,
         {
           error: err,
@@ -15137,7 +15156,7 @@ var FormErrorSummary = ({ description }) => {
           name
         },
         err
-      )) : /* @__PURE__ */ jsx292(
+      )) : /* @__PURE__ */ jsx293(
         ErrorItem,
         {
           error: error ?? "",
@@ -15154,7 +15173,7 @@ var FormErrorSummary = ({ description }) => {
 import { Children as Children10, cloneElement as cloneElement8, useContext as useContext13 } from "react";
 import { styled as styled68, css as css36 } from "styled-components";
 import { isArray as isArray4, isNotNil as isNotNil28, isNotUndefined as isNotUndefined12, isUndefined as isUndefined4 } from "@wistia/type-guards";
-import { jsx as jsx293, jsxs as jsxs47 } from "react/jsx-runtime";
+import { jsx as jsx294, jsxs as jsxs47 } from "react/jsx-runtime";
 var inlineErrorStyles = css36`
   grid-template-rows: 1fr auto;
   grid-template-areas: 'label-description input' '. error';
@@ -15217,7 +15236,7 @@ var ErrorMessages = ({ errors, id }) => {
   const isErrorArray = isArray4(errors);
   const isMultipleErrors = isErrorArray && errors.length > 1;
   if (!isErrorArray) {
-    return /* @__PURE__ */ jsx293(
+    return /* @__PURE__ */ jsx294(
       ErrorText,
       {
         colorScheme: "error",
@@ -15230,7 +15249,7 @@ var ErrorMessages = ({ errors, id }) => {
     );
   }
   if (!isMultipleErrors) {
-    return /* @__PURE__ */ jsx293(
+    return /* @__PURE__ */ jsx294(
       ErrorText,
       {
         colorScheme: "error",
@@ -15242,7 +15261,7 @@ var ErrorMessages = ({ errors, id }) => {
       id
     );
   }
-  return /* @__PURE__ */ jsx293(StyledErrorList, { children: errors.map((error, index) => /* @__PURE__ */ jsx293(
+  return /* @__PURE__ */ jsx294(StyledErrorList, { children: errors.map((error, index) => /* @__PURE__ */ jsx294(
     Text,
     {
       colorScheme: "error",
@@ -15327,7 +15346,7 @@ var FormField = ({
               gridArea: "label-description"
             },
             children: [
-              !isIntegratedLabel && /* @__PURE__ */ jsx293(
+              !isIntegratedLabel && /* @__PURE__ */ jsx294(
                 Label,
                 {
                   htmlFor: computedId,
@@ -15335,12 +15354,12 @@ var FormField = ({
                   children: label
                 }
               ),
-              hasDescription ? /* @__PURE__ */ jsx293(FormControlLabelDescription, { id: descriptionId, children: description }) : null
+              hasDescription ? /* @__PURE__ */ jsx294(FormControlLabelDescription, { id: descriptionId, children: description }) : null
             ]
           }
         ) : null,
         cloneElement8(children, childProps),
-        hasError ? /* @__PURE__ */ jsx293(
+        hasError ? /* @__PURE__ */ jsx294(
           ErrorMessages,
           {
             errors: computedError,
@@ -15355,7 +15374,7 @@ FormField.displayName = "FormField_UI";
 
 // src/components/FormGroup/RadioGroup.tsx
 import { createContext as createContext8, useMemo as useMemo14, useContext as useContext14 } from "react";
-import { jsx as jsx294 } from "react/jsx-runtime";
+import { jsx as jsx295 } from "react/jsx-runtime";
 var RadioGroupContext = createContext8(null);
 var useRadioGroup = () => {
   return useContext14(RadioGroupContext);
@@ -15376,7 +15395,7 @@ var RadioGroup = ({
       value: derivedValue
     };
   }, [name, derivedValue, onChange]);
-  return /* @__PURE__ */ jsx294(RadioGroupContext.Provider, { value: context, children: /* @__PURE__ */ jsx294(FormGroup, { ...props, children }) });
+  return /* @__PURE__ */ jsx295(RadioGroupContext.Provider, { value: context, children: /* @__PURE__ */ jsx295(FormGroup, { ...props, children }) });
 };
 RadioGroup.displayName = "RadioGroup_UI";
 
@@ -15384,7 +15403,7 @@ RadioGroup.displayName = "RadioGroup_UI";
 import { forwardRef as forwardRef22 } from "react";
 import { styled as styled69, css as css37 } from "styled-components";
 import { isRecord as isRecord5 } from "@wistia/type-guards";
-import { jsx as jsx295 } from "react/jsx-runtime";
+import { jsx as jsx296 } from "react/jsx-runtime";
 var DEFAULT_ELEMENT5 = "div";
 var getGridTemplateColumns = (maxColumns, minChildWidth, expandItems) => {
   if (minChildWidth === "auto" && maxColumns === "auto") {
@@ -15436,7 +15455,7 @@ var GridComponent = forwardRef22(
     const { column, row } = isRecord5(responsiveGap) ? responsiveGap : { column: responsiveGap, row: responsiveGap };
     const responsiveColumns = useResponsiveProp(columns);
     const responsiveMinChildWidth = useResponsiveProp(minChildWidth);
-    return /* @__PURE__ */ jsx295(
+    return /* @__PURE__ */ jsx296(
       StyledGrid,
       {
         ref,
@@ -15459,7 +15478,7 @@ var Grid = makePolymorphic(GridComponent);
 import { styled as styled70 } from "styled-components";
 import { forwardRef as forwardRef23, useEffect as useEffect18, useState as useState21 } from "react";
 import { isFunction as isFunction3 } from "@wistia/type-guards";
-import { jsx as jsx296 } from "react/jsx-runtime";
+import { jsx as jsx297 } from "react/jsx-runtime";
 var StyledIconButton = styled70(IconButton)`
   /* override size for icon button since prop gets changed by Input */
   height: var(--icon-button-size-sm);
@@ -15499,7 +15518,7 @@ var InputClickToCopy = forwardRef23(
         return value;
       });
     };
-    return /* @__PURE__ */ jsx296(
+    return /* @__PURE__ */ jsx297(
       Input,
       {
         "aria-label": "Click to Copy",
@@ -15507,7 +15526,7 @@ var InputClickToCopy = forwardRef23(
         ref,
         disabled,
         readOnly: true,
-        rightIcon: /* @__PURE__ */ jsx296(
+        rightIcon: /* @__PURE__ */ jsx297(
           StyledIconButton,
           {
             colorScheme: isCopied ? "success" : "inherit",
@@ -15515,7 +15534,7 @@ var InputClickToCopy = forwardRef23(
             label: "Copy to clipboard",
             onClick: handleClick,
             variant: "ghost",
-            children: isCopied ? /* @__PURE__ */ jsx296(Icon, { type: "checkmark-circle" }) : /* @__PURE__ */ jsx296(Icon, { type: "save-as-copy" })
+            children: isCopied ? /* @__PURE__ */ jsx297(Icon, { type: "checkmark-circle" }) : /* @__PURE__ */ jsx297(Icon, { type: "save-as-copy" })
           }
         ),
         value
@@ -15529,7 +15548,7 @@ InputClickToCopy.displayName = "InputClickToCopy_UI";
 import { styled as styled71 } from "styled-components";
 import { forwardRef as forwardRef24, useState as useState22 } from "react";
 import { isFunction as isFunction4 } from "@wistia/type-guards";
-import { jsx as jsx297 } from "react/jsx-runtime";
+import { jsx as jsx298 } from "react/jsx-runtime";
 var StyledIconButton2 = styled71(IconButton)`
   /* override size for icon button since prop gets changed by Input */
   height: var(--icon-button-size-sm);
@@ -15548,13 +15567,13 @@ var InputPassword = forwardRef24(
         onVisibilityToggle(newVisibility);
       }
     };
-    return /* @__PURE__ */ jsx297(
+    return /* @__PURE__ */ jsx298(
       Input,
       {
         ...props,
         ref,
         disabled,
-        rightIcon: /* @__PURE__ */ jsx297(
+        rightIcon: /* @__PURE__ */ jsx298(
           StyledIconButton2,
           {
             disabled,
@@ -15562,7 +15581,7 @@ var InputPassword = forwardRef24(
             onClick: handleClick,
             tabIndex: disabled ? -1 : 0,
             variant: "ghost",
-            children: /* @__PURE__ */ jsx297(Icon, { type: isVisible ? "preview" : "hide" })
+            children: /* @__PURE__ */ jsx298(Icon, { type: isVisible ? "preview" : "hide" })
           }
         ),
         type: isVisible ? "text" : "password"
@@ -15575,7 +15594,7 @@ InputPassword.displayName = "InputPassword_UI";
 // src/components/KeyboardShortcut/KeyboardShortcut.tsx
 import { styled as styled72 } from "styled-components";
 import { isNotNil as isNotNil29 } from "@wistia/type-guards";
-import { jsx as jsx298, jsxs as jsxs48 } from "react/jsx-runtime";
+import { jsx as jsx299, jsxs as jsxs48 } from "react/jsx-runtime";
 var StyledKeyboardShortcut = styled72.div`
   align-items: center;
   display: flex;
@@ -15668,8 +15687,8 @@ var KeyboardShortcut = ({
     $fullWidth: fullWidth,
     ...otherProps,
     children: [
-      isNotNil29(label) && /* @__PURE__ */ jsx298(Label2, { children: label }),
-      /* @__PURE__ */ jsx298(KeysContainer, { children: (Array.isArray(keyboardKeys) ? keyboardKeys : [keyboardKeys]).map((keyboardKey, index) => /* @__PURE__ */ jsx298(
+      isNotNil29(label) && /* @__PURE__ */ jsx299(Label2, { children: label }),
+      /* @__PURE__ */ jsx299(KeysContainer, { children: (Array.isArray(keyboardKeys) ? keyboardKeys : [keyboardKeys]).map((keyboardKey, index) => /* @__PURE__ */ jsx299(
         StyledKey,
         {
           children: keyToString(keyboardKey)
@@ -15688,7 +15707,7 @@ import { styled as styled74, css as css38 } from "styled-components";
 // src/components/List/ListItem.tsx
 import { styled as styled73 } from "styled-components";
 import { isNil as isNil17 } from "@wistia/type-guards";
-import { jsx as jsx299 } from "react/jsx-runtime";
+import { jsx as jsx300 } from "react/jsx-runtime";
 var ListItemComponent = styled73.li`
   margin-bottom: var(--wui-space-02);
 `;
@@ -15696,12 +15715,12 @@ var ListItem = ({ children }) => {
   if (isNil17(children)) {
     return null;
   }
-  return /* @__PURE__ */ jsx299(ListItemComponent, { children });
+  return /* @__PURE__ */ jsx300(ListItemComponent, { children });
 };
 ListItem.displayName = "ListItem_UI";
 
 // src/components/List/List.tsx
-import { jsx as jsx300, jsxs as jsxs49 } from "react/jsx-runtime";
+import { jsx as jsx301, jsxs as jsxs49 } from "react/jsx-runtime";
 var spacesStyle = css38`
   overflow: hidden;
   padding-left: 0;
@@ -15787,7 +15806,7 @@ var ListComponent = styled74.ul`
 `;
 var renderListComponent = (listItems, variant, { ...otherProps }) => {
   const elementType = variant === "ordered" ? "ol" : "ul";
-  return /* @__PURE__ */ jsx300(
+  return /* @__PURE__ */ jsx301(
     ListComponent,
     {
       as: elementType,
@@ -15812,7 +15831,7 @@ var renderListFromArray = (listItems, variant, otherProps) => {
     if (Array.isArray(item)) {
       return null;
     }
-    return /* @__PURE__ */ jsx300(ListItem, { children: item }, key);
+    return /* @__PURE__ */ jsx301(ListItem, { children: item }, key);
   });
   return renderListComponent(items, variant, otherProps);
 };
@@ -15841,7 +15860,7 @@ List.displayName = "List_UI";
 
 // src/components/Mark/Mark.tsx
 import { styled as styled75 } from "styled-components";
-import { jsx as jsx301 } from "react/jsx-runtime";
+import { jsx as jsx302 } from "react/jsx-runtime";
 var StyledMark = styled75.mark`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   background-color: var(--wui-color-bg-surface-tertiary);
@@ -15850,7 +15869,7 @@ var StyledMark = styled75.mark`
   padding-inline: 0.1em;
   margin-inline: -0.1em;
 `;
-var Mark = ({ children, colorScheme = "inherit", ...props }) => /* @__PURE__ */ jsx301(
+var Mark = ({ children, colorScheme = "inherit", ...props }) => /* @__PURE__ */ jsx302(
   StyledMark,
   {
     $colorScheme: colorScheme,
@@ -15873,24 +15892,24 @@ import { Title as DialogTitle } from "@radix-ui/react-dialog";
 // src/components/Modal/ModalCloseButton.tsx
 import { styled as styled76 } from "styled-components";
 import { Close as DialogClose } from "@radix-ui/react-dialog";
-import { jsx as jsx302 } from "react/jsx-runtime";
+import { jsx as jsx303 } from "react/jsx-runtime";
 var CloseButton = styled76(DialogClose)`
   align-self: start;
 `;
 var ModalCloseButton = () => {
-  return /* @__PURE__ */ jsx302(CloseButton, { asChild: true, children: /* @__PURE__ */ jsx302(
+  return /* @__PURE__ */ jsx303(CloseButton, { asChild: true, children: /* @__PURE__ */ jsx303(
     IconButton,
     {
       label: "Dismiss modal",
       size: "sm",
       variant: "ghost",
-      children: /* @__PURE__ */ jsx302(Icon, { type: "close" })
+      children: /* @__PURE__ */ jsx303(Icon, { type: "close" })
     }
   ) });
 };
 
 // src/components/Modal/ModalHeader.tsx
-import { jsx as jsx303, jsxs as jsxs50 } from "react/jsx-runtime";
+import { jsx as jsx304, jsxs as jsxs50 } from "react/jsx-runtime";
 var Header = styled77.header`
   display: flex;
   order: 1;
@@ -15922,7 +15941,7 @@ var ModalHeader = ({
   hideTitle,
   hideCloseButton
 }) => {
-  const TitleComponent = hideTitle ? /* @__PURE__ */ jsx303(ScreenReaderOnly, { children: /* @__PURE__ */ jsx303(Title, { children: title }) }) : /* @__PURE__ */ jsx303(Title, { children: title });
+  const TitleComponent = hideTitle ? /* @__PURE__ */ jsx304(ScreenReaderOnly, { children: /* @__PURE__ */ jsx304(Title, { children: title }) }) : /* @__PURE__ */ jsx304(Title, { children: title });
   return /* @__PURE__ */ jsxs50(
     Header,
     {
@@ -15930,7 +15949,7 @@ var ModalHeader = ({
       $hideTitle: hideTitle,
       children: [
         TitleComponent,
-        hideCloseButton ? null : /* @__PURE__ */ jsx303(ModalCloseButton, {})
+        hideCloseButton ? null : /* @__PURE__ */ jsx304(ModalCloseButton, {})
       ]
     }
   );
@@ -15964,7 +15983,7 @@ var useFocusRestore = () => {
 };
 
 // src/components/Modal/ModalContent.tsx
-import { jsx as jsx304 } from "react/jsx-runtime";
+import { jsx as jsx305 } from "react/jsx-runtime";
 var modalEnter = keyframes5`
   from {
     opacity: 0;
@@ -16092,7 +16111,7 @@ var StyledModalContent = styled78(DialogContent)`
 var ModalContent = forwardRef25(
   ({ width, positionVariant = "fixed-top", children, ...props }, ref) => {
     useFocusRestore();
-    return /* @__PURE__ */ jsx304(
+    return /* @__PURE__ */ jsx305(
       StyledModalContent,
       {
         ref,
@@ -16140,7 +16159,7 @@ var ModalOverlay = styled79(DialogOverlay)`
 `;
 
 // src/components/Modal/Modal.tsx
-import { jsx as jsx305, jsxs as jsxs51 } from "react/jsx-runtime";
+import { jsx as jsx306, jsxs as jsxs51 } from "react/jsx-runtime";
 var ModalBody = styled80.div`
   flex-direction: column;
   display: flex;
@@ -16170,7 +16189,7 @@ var Modal = forwardRef26(
     width = DEFAULT_MODAL_WIDTH,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ jsx305(
+    return /* @__PURE__ */ jsx306(
       DialogRoot,
       {
         onOpenChange: (open2) => {
@@ -16180,7 +16199,7 @@ var Modal = forwardRef26(
         },
         open: isOpen,
         children: /* @__PURE__ */ jsxs51(DialogPortal, { children: [
-          /* @__PURE__ */ jsx305(ModalOverlay, {}),
+          /* @__PURE__ */ jsx306(ModalOverlay, {}),
           /* @__PURE__ */ jsxs51(
             ModalContent,
             {
@@ -16197,9 +16216,9 @@ var Modal = forwardRef26(
               width,
               ...props,
               children: [
-                /* @__PURE__ */ jsx305(ModalScrollArea, { children: /* @__PURE__ */ jsx305(ModalBody, { children }) }),
-                isNotNil32(footer) ? /* @__PURE__ */ jsx305(ModalFooter, { children: footer }) : null,
-                hideCloseButton && hideTitle ? null : /* @__PURE__ */ jsx305(
+                /* @__PURE__ */ jsx306(ModalScrollArea, { children: /* @__PURE__ */ jsx306(ModalBody, { children }) }),
+                isNotNil32(footer) ? /* @__PURE__ */ jsx306(ModalFooter, { children: footer }) : null,
+                hideCloseButton && hideTitle ? null : /* @__PURE__ */ jsx306(
                   ModalHeader,
                   {
                     hideCloseButton,
@@ -16218,9 +16237,9 @@ var Modal = forwardRef26(
 Modal.displayName = "Modal_UI";
 
 // src/components/Modal/ModalCallouts.tsx
-import { jsx as jsx306, jsxs as jsxs52 } from "react/jsx-runtime";
+import { jsx as jsx307, jsxs as jsxs52 } from "react/jsx-runtime";
 var ModalCallouts = ({ children }) => {
-  return /* @__PURE__ */ jsx306(
+  return /* @__PURE__ */ jsx307(
     Stack,
     {
       direction: "horizontal",
@@ -16233,7 +16252,7 @@ ModalCallouts.displayName = "ModalCallouts_UI";
 var ModalCallout = ({ title, image, children }) => {
   return /* @__PURE__ */ jsxs52(Stack, { direction: "vertical", children: [
     image,
-    /* @__PURE__ */ jsx306(Heading, { variant: "heading4", children: title }),
+    /* @__PURE__ */ jsx307(Heading, { variant: "heading4", children: title }),
     children
   ] });
 };
@@ -16252,7 +16271,7 @@ var getControlProps = (isOpen, onOpenChange) => {
 // src/components/Popover/PopoverArrow.tsx
 import { PopoverArrow as RadixPopoverArrow } from "@radix-ui/react-popover";
 import { styled as styled81, css as css40, keyframes as keyframes7 } from "styled-components";
-import { jsx as jsx307, jsxs as jsxs53 } from "react/jsx-runtime";
+import { jsx as jsx308, jsxs as jsxs53 } from "react/jsx-runtime";
 var StyledPath = styled81.path`
   fill: var(--wui-color-border-secondary);
 `;
@@ -16291,7 +16310,7 @@ var StyledCircle = styled81.circle`
   }
 `;
 var PopoverArrow = ({ isAnimated }) => {
-  return /* @__PURE__ */ jsx307(RadixPopoverArrow, { asChild: true, children: /* @__PURE__ */ jsxs53(
+  return /* @__PURE__ */ jsx308(RadixPopoverArrow, { asChild: true, children: /* @__PURE__ */ jsxs53(
     "svg",
     {
       fill: "none",
@@ -16300,8 +16319,8 @@ var PopoverArrow = ({ isAnimated }) => {
       width: "48",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ jsx307(StyledPath, { d: "M24 26.6667C21.0545 26.6667 18.6667 29.0545 18.6667 32C18.6667 34.9455 21.0545 37.3333 24 37.3333C26.9455 37.3333 29.3333 34.9455 29.3333 32C29.3333 29.0545 26.9455 26.6667 24 26.6667ZM23 0V32H25V0H23Z" }),
-        /* @__PURE__ */ jsx307(
+        /* @__PURE__ */ jsx308(StyledPath, { d: "M24 26.6667C21.0545 26.6667 18.6667 29.0545 18.6667 32C18.6667 34.9455 21.0545 37.3333 24 37.3333C26.9455 37.3333 29.3333 34.9455 29.3333 32C29.3333 29.0545 26.9455 26.6667 24 26.6667ZM23 0V32H25V0H23Z" }),
+        /* @__PURE__ */ jsx308(
           StyledCircle,
           {
             $isAnimated: isAnimated,
@@ -16312,7 +16331,7 @@ var PopoverArrow = ({ isAnimated }) => {
             strokeWidth: "4"
           }
         ),
-        /* @__PURE__ */ jsx307(
+        /* @__PURE__ */ jsx308(
           StyledCircle,
           {
             $isAnimated: isAnimated,
@@ -16330,7 +16349,7 @@ var PopoverArrow = ({ isAnimated }) => {
 PopoverArrow.displayName = "PopoverArrow_UI";
 
 // src/components/Popover/Popover.tsx
-import { jsx as jsx308, jsxs as jsxs54 } from "react/jsx-runtime";
+import { jsx as jsx309, jsxs as jsxs54 } from "react/jsx-runtime";
 var StyledContent2 = styled82(Content2)`
   z-index: var(--wui-zindex-popover);
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
@@ -16371,8 +16390,8 @@ var Popover = ({
     "--wui-popover-max-height": maxHeight
   };
   return /* @__PURE__ */ jsxs54(Root2, { ...getControlProps(isOpen, onOpenChange), children: [
-    /* @__PURE__ */ jsx308(Trigger2, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsx308(Portal, { children: /* @__PURE__ */ jsxs54(
+    /* @__PURE__ */ jsx309(Trigger2, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx309(Portal, { children: /* @__PURE__ */ jsxs54(
       StyledContent2,
       {
         $colorScheme: colorScheme,
@@ -16381,17 +16400,17 @@ var Popover = ({
         $unstyled: unstyled,
         style,
         children: [
-          !hideCloseButton && /* @__PURE__ */ jsx308(Close, { asChild: true, children: /* @__PURE__ */ jsx308(
+          !hideCloseButton && /* @__PURE__ */ jsx309(Close, { asChild: true, children: /* @__PURE__ */ jsx309(
             IconButton,
             {
               "data-wui-popover-close": true,
               label: "Close",
               variant: "ghost",
-              children: /* @__PURE__ */ jsx308(Icon, { type: "close" })
+              children: /* @__PURE__ */ jsx309(Icon, { type: "close" })
             }
           ) }),
-          withArrow ? /* @__PURE__ */ jsx308(PopoverArrow, { isAnimated }) : null,
-          /* @__PURE__ */ jsx308("div", { children })
+          withArrow ? /* @__PURE__ */ jsx309(PopoverArrow, { isAnimated }) : null,
+          /* @__PURE__ */ jsx309("div", { children })
         ]
       }
     ) })
@@ -16403,7 +16422,7 @@ Popover.displayName = "Popover_UI";
 import { styled as styled83 } from "styled-components";
 import { Root as ProgressRoot, Indicator as ProgressIndicator } from "@radix-ui/react-progress";
 import { isNotNil as isNotNil34 } from "@wistia/type-guards";
-import { jsx as jsx309, jsxs as jsxs55 } from "react/jsx-runtime";
+import { jsx as jsx310, jsxs as jsxs55 } from "react/jsx-runtime";
 var ProgressBarWrapper = styled83.div`
   --progress-bar-height: 8px;
 
@@ -16458,15 +16477,15 @@ var ProgressBar = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsxs55(ProgressBarWrapper, { children: [
-    isNotNil34(labelLeft) ? /* @__PURE__ */ jsx309(ProgressBarLabel, { children: labelLeft }) : null,
-    /* @__PURE__ */ jsx309(
+    isNotNil34(labelLeft) ? /* @__PURE__ */ jsx310(ProgressBarLabel, { children: labelLeft }) : null,
+    /* @__PURE__ */ jsx310(
       StyledProgressBar,
       {
         $colorScheme: colorScheme,
         max,
         value: progress,
         ...props,
-        children: /* @__PURE__ */ jsx309(
+        children: /* @__PURE__ */ jsx310(
           StyledProgressIndicator,
           {
             $colorScheme: colorScheme,
@@ -16476,7 +16495,7 @@ var ProgressBar = ({
         )
       }
     ),
-    isNotNil34(labelRight) ? /* @__PURE__ */ jsx309(ProgressBarLabel, { children: labelRight }) : null
+    isNotNil34(labelRight) ? /* @__PURE__ */ jsx310(ProgressBarLabel, { children: labelRight }) : null
   ] });
 };
 ProgressBar.displayName = "ProgressBar_UI";
@@ -16485,7 +16504,7 @@ ProgressBar.displayName = "ProgressBar_UI";
 import { isNonEmptyString as isNonEmptyString7, isNotUndefined as isNotUndefined13 } from "@wistia/type-guards";
 import { forwardRef as forwardRef27, useId as useId5 } from "react";
 import { styled as styled84, css as css42 } from "styled-components";
-import { jsx as jsx310, jsxs as jsxs56 } from "react/jsx-runtime";
+import { jsx as jsx311, jsxs as jsxs56 } from "react/jsx-runtime";
 var sizeSmall2 = css42`
   --wui-radio-size: 14px;
   --wui-radio-icon-size: 7px;
@@ -16601,7 +16620,7 @@ var Radio = forwardRef27(
         $hideLabel: hideLabel,
         "aria-invalid": props["aria-invalid"],
         children: [
-          /* @__PURE__ */ jsx310(
+          /* @__PURE__ */ jsx311(
             StyledHiddenRadioInput,
             {
               ...props,
@@ -16616,10 +16635,10 @@ var Radio = forwardRef27(
               value
             }
           ),
-          /* @__PURE__ */ jsx310(
+          /* @__PURE__ */ jsx311(
             FormControlLabel,
             {
-              controlSlot: /* @__PURE__ */ jsx310(StyledRadioInput, { $size: size }),
+              controlSlot: /* @__PURE__ */ jsx311(StyledRadioInput, { $size: size }),
               description,
               disabled,
               hideLabel,
@@ -16641,7 +16660,7 @@ import { forwardRef as forwardRef29 } from "react";
 import { forwardRef as forwardRef28, useId as useId6 } from "react";
 import { styled as styled85, css as css43 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString8, isNotUndefined as isNotUndefined14 } from "@wistia/type-guards";
-import { jsx as jsx311, jsxs as jsxs57 } from "react/jsx-runtime";
+import { jsx as jsx312, jsxs as jsxs57 } from "react/jsx-runtime";
 var checkedStyles = css43`
   --wui-radio-card-border-color: var(--wui-color-focus-ring);
   --wui-color-icon: var(--wui-color-icon-selected);
@@ -16777,7 +16796,7 @@ var RadioCardRoot = forwardRef28(
         $padding: padding,
         htmlFor: computedId,
         children: [
-          /* @__PURE__ */ jsx311(
+          /* @__PURE__ */ jsx312(
             StyledHiddenInput,
             {
               ...props,
@@ -16854,7 +16873,7 @@ var RadioCardIndicator = styled86.div`
 RadioCardIndicator.displayName = "RadioCardIndicator_UI";
 
 // src/components/RadioCard/RadioCardDefaultLayout.tsx
-import { jsx as jsx312, jsxs as jsxs58 } from "react/jsx-runtime";
+import { jsx as jsx313, jsxs as jsxs58 } from "react/jsx-runtime";
 var StyledCardContent = styled87.div`
   display: grid;
   grid-auto-flow: column;
@@ -16875,17 +16894,17 @@ var RadioCardDefaultLayout = ({
   showIndicator = true
 }) => {
   return /* @__PURE__ */ jsxs58(StyledCardContent, { children: [
-    showIndicator ? /* @__PURE__ */ jsx312(StyledIndicatorContainer, { $hasIcon: isNotNil35(icon), children: /* @__PURE__ */ jsx312(RadioCardIndicator, { "data-testid": "wui-radio-card-indicator" }) }) : null,
+    showIndicator ? /* @__PURE__ */ jsx313(StyledIndicatorContainer, { $hasIcon: isNotNil35(icon), children: /* @__PURE__ */ jsx313(RadioCardIndicator, { "data-testid": "wui-radio-card-indicator" }) }) : null,
     /* @__PURE__ */ jsxs58(Stack, { gap: "space-02", children: [
-      isNotNil35(icon) && /* @__PURE__ */ jsx312(StyledCardIcon, { "data-wui-radio-card-icon": true, children: icon }),
+      isNotNil35(icon) && /* @__PURE__ */ jsx313(StyledCardIcon, { "data-wui-radio-card-icon": true, children: icon }),
       /* @__PURE__ */ jsxs58(
         Stack,
         {
           gap: "space-01",
           style: isNotNil35(icon) ? { paddingLeft: 2 } : void 0,
           children: [
-            isNotNil35(label) && /* @__PURE__ */ jsx312(Text, { variant: "label3", children: /* @__PURE__ */ jsx312("strong", { children: label }) }),
-            isNotNil35(description) && /* @__PURE__ */ jsx312(
+            isNotNil35(label) && /* @__PURE__ */ jsx313(Text, { variant: "label3", children: /* @__PURE__ */ jsx313("strong", { children: label }) }),
+            isNotNil35(description) && /* @__PURE__ */ jsx313(
               Text,
               {
                 prominence: "secondary",
@@ -16908,16 +16927,16 @@ var RadioCardChildrenContainer = styled88.div`
 `;
 
 // src/components/RadioCard/RadioCard.tsx
-import { jsx as jsx313 } from "react/jsx-runtime";
+import { jsx as jsx314 } from "react/jsx-runtime";
 var RadioCard = forwardRef29(
   ({ icon, label, description, showIndicator, children, ...rootProps }, ref) => {
-    return /* @__PURE__ */ jsx313(
+    return /* @__PURE__ */ jsx314(
       RadioCardRoot,
       {
         ref,
         padding: children != null ? "space-00" : "space-04",
         ...rootProps,
-        children: children != null ? /* @__PURE__ */ jsx313(RadioCardChildrenContainer, { "data-wui-radio-card-image": "cover", children }) : /* @__PURE__ */ jsx313(
+        children: children != null ? /* @__PURE__ */ jsx314(RadioCardChildrenContainer, { "data-wui-radio-card-image": "cover", children }) : /* @__PURE__ */ jsx314(
           RadioCardDefaultLayout,
           {
             description,
@@ -16934,17 +16953,17 @@ RadioCard.displayName = "RadioCard_UI";
 
 // src/components/RadioCard/RadioCardImage.tsx
 import { forwardRef as forwardRef30 } from "react";
-import { jsx as jsx314 } from "react/jsx-runtime";
+import { jsx as jsx315 } from "react/jsx-runtime";
 var RadioCardImage = forwardRef30(
   ({ label, imageSrc, aspectRatio, padding = "space-04", ...rootProps }, ref) => {
-    return /* @__PURE__ */ jsx314(
+    return /* @__PURE__ */ jsx315(
       RadioCardRoot,
       {
         ref,
         ...rootProps,
         aspectRatio,
         padding,
-        children: /* @__PURE__ */ jsx314(
+        children: /* @__PURE__ */ jsx315(
           Image,
           {
             alt: label,
@@ -16964,7 +16983,7 @@ RadioCardImage.displayName = "RadioCardImage_UI";
 import { forwardRef as forwardRef31, useCallback as useCallback18, useEffect as useEffect20, useMemo as useMemo15, useRef as useRef21, useState as useState23 } from "react";
 import { styled as styled89 } from "styled-components";
 import { throttle } from "throttle-debounce";
-import { jsx as jsx315, jsxs as jsxs59 } from "react/jsx-runtime";
+import { jsx as jsx316, jsxs as jsxs59 } from "react/jsx-runtime";
 var SHADOW_SIZE_PX = 8;
 var Container10 = styled89.div`
   overflow: hidden;
@@ -17045,11 +17064,11 @@ var ScrollArea = forwardRef31(
       updateShadows();
     }, [updateShadows]);
     return /* @__PURE__ */ jsxs59(Container10, { style, children: [
-      /* @__PURE__ */ jsx315(ShadowAtTop, { $isVisible: shadowState.canScrollUp }),
-      /* @__PURE__ */ jsx315(ShadowAtBottom, { $isVisible: shadowState.canScrollDown }),
-      /* @__PURE__ */ jsx315(ShadowAtLeft, { $isVisible: shadowState.canScrollLeft }),
-      /* @__PURE__ */ jsx315(ShadowAtRight, { $isVisible: shadowState.canScrollRight }),
-      /* @__PURE__ */ jsx315(
+      /* @__PURE__ */ jsx316(ShadowAtTop, { $isVisible: shadowState.canScrollUp }),
+      /* @__PURE__ */ jsx316(ShadowAtBottom, { $isVisible: shadowState.canScrollDown }),
+      /* @__PURE__ */ jsx316(ShadowAtLeft, { $isVisible: shadowState.canScrollLeft }),
+      /* @__PURE__ */ jsx316(ShadowAtRight, { $isVisible: shadowState.canScrollRight }),
+      /* @__PURE__ */ jsx316(
         ScrollContainer,
         {
           ref: scrollContainerRef,
@@ -17072,7 +17091,7 @@ import { isNil as isNil18 } from "@wistia/type-guards";
 
 // src/components/SegmentedControl/useSelectedItemStyle.tsx
 import { createContext as createContext9, useContext as useContext15, useMemo as useMemo16, useState as useState24 } from "react";
-import { jsx as jsx316 } from "react/jsx-runtime";
+import { jsx as jsx317 } from "react/jsx-runtime";
 var SelectedItemStyleContext = createContext9(null);
 var SelectedItemStyleProvider = ({
   children
@@ -17093,7 +17112,7 @@ var SelectedItemStyleProvider = ({
     }),
     [selectedItemIndicatorStyle]
   );
-  return /* @__PURE__ */ jsx316(SelectedItemStyleContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ jsx317(SelectedItemStyleContext.Provider, { value: contextValue, children });
 };
 var useSelectedItemStyle = () => {
   const context = useContext15(SelectedItemStyleContext);
@@ -17120,7 +17139,7 @@ var useSegmentedControlValue = () => {
 };
 
 // src/components/SegmentedControl/SelectedItemIndicator.tsx
-import { jsx as jsx317 } from "react/jsx-runtime";
+import { jsx as jsx318 } from "react/jsx-runtime";
 var selectedItemIndicatorStyles = css44`
   background-color: var(--wui-color-bg-fill-white);
   border-radius: var(--wui-border-radius-rounded);
@@ -17142,7 +17161,7 @@ var SelectedItemIndicator = () => {
   if (!selectedValue || isUndefined5(selectedItemIndicatorStyle)) {
     return null;
   }
-  return /* @__PURE__ */ jsx317(
+  return /* @__PURE__ */ jsx318(
     SelectedItemIndicatorDiv,
     {
       "data-wui-selected-item-indicator": true,
@@ -17152,7 +17171,7 @@ var SelectedItemIndicator = () => {
 };
 
 // src/components/SegmentedControl/SegmentedControl.tsx
-import { jsx as jsx318, jsxs as jsxs60 } from "react/jsx-runtime";
+import { jsx as jsx319, jsxs as jsxs60 } from "react/jsx-runtime";
 var segmentedControlStyles = css45`
   display: inline-flex;
   background-color: var(--wui-color-bg-surface-secondary);
@@ -17179,7 +17198,7 @@ var SegmentedControl = forwardRef32(
     if (isNil18(children)) {
       return null;
     }
-    return /* @__PURE__ */ jsx318(
+    return /* @__PURE__ */ jsx319(
       StyledSegmentedControl,
       {
         ref,
@@ -17191,9 +17210,9 @@ var SegmentedControl = forwardRef32(
         type: "single",
         value: selectedValue,
         ...props,
-        children: /* @__PURE__ */ jsx318(SegmentedControlValueProvider, { value: selectedValue, children: /* @__PURE__ */ jsxs60(SelectedItemStyleProvider, { children: [
+        children: /* @__PURE__ */ jsx319(SegmentedControlValueProvider, { value: selectedValue, children: /* @__PURE__ */ jsxs60(SelectedItemStyleProvider, { children: [
           children,
-          /* @__PURE__ */ jsx318(SelectedItemIndicator, {})
+          /* @__PURE__ */ jsx319(SelectedItemIndicator, {})
         ] }) })
       }
     );
@@ -17349,7 +17368,7 @@ import {
 } from "@radix-ui/react-select";
 import { forwardRef as forwardRef34 } from "react";
 import { styled as styled93, css as css47 } from "styled-components";
-import { jsx as jsx319, jsxs as jsxs62 } from "react/jsx-runtime";
+import { jsx as jsx320, jsxs as jsxs62 } from "react/jsx-runtime";
 var StyledTrigger2 = styled93(Trigger3)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   ${inputCss};
@@ -17458,8 +17477,8 @@ var Select = forwardRef34(
           $fullWidth: responsiveFullWidth,
           ...props,
           children: [
-            /* @__PURE__ */ jsx319(Value, { placeholder }),
-            /* @__PURE__ */ jsx319(
+            /* @__PURE__ */ jsx320(Value, { placeholder }),
+            /* @__PURE__ */ jsx320(
               Icon,
               {
                 size: "md",
@@ -17469,21 +17488,21 @@ var Select = forwardRef34(
           ]
         }
       ),
-      /* @__PURE__ */ jsx319(Portal2, { children: /* @__PURE__ */ jsxs62(
+      /* @__PURE__ */ jsx320(Portal2, { children: /* @__PURE__ */ jsxs62(
         StyledContent3,
         {
           position: "popper",
           sideOffset: 8,
           children: [
-            /* @__PURE__ */ jsx319(StyledScrollUpButton, { children: /* @__PURE__ */ jsx319(
+            /* @__PURE__ */ jsx320(StyledScrollUpButton, { children: /* @__PURE__ */ jsx320(
               Icon,
               {
                 size: "sm",
                 type: "caret-up"
               }
             ) }),
-            /* @__PURE__ */ jsx319(Viewport, { children }),
-            /* @__PURE__ */ jsx319(StyledScrollDownButton, { children: /* @__PURE__ */ jsx319(
+            /* @__PURE__ */ jsx320(Viewport, { children }),
+            /* @__PURE__ */ jsx320(StyledScrollDownButton, { children: /* @__PURE__ */ jsx320(
               Icon,
               {
                 size: "sm",
@@ -17503,7 +17522,7 @@ import { Item, ItemText, ItemIndicator } from "@radix-ui/react-select";
 import { forwardRef as forwardRef35 } from "react";
 import { styled as styled94 } from "styled-components";
 import { isNotNil as isNotNil37 } from "@wistia/type-guards";
-import { jsx as jsx320, jsxs as jsxs63 } from "react/jsx-runtime";
+import { jsx as jsx321, jsxs as jsxs63 } from "react/jsx-runtime";
 var StyledItem = styled94(Item)`
   ${getTypographicStyles("label3")}
   align-items: ${({ $checkmarkVerticalAlign }) => $checkmarkVerticalAlign === "center" ? "center" : "flex-start"};
@@ -17541,9 +17560,9 @@ var SelectOption = forwardRef35(
         children: [
           isNotNil37(selectedDisplayValue) ? /* @__PURE__ */ jsxs63("div", { children: [
             children,
-            /* @__PURE__ */ jsx320("div", { style: { display: "none" }, children: /* @__PURE__ */ jsx320(ItemText, { children: selectedDisplayValue }) })
-          ] }) : /* @__PURE__ */ jsx320(ItemText, { children }),
-          /* @__PURE__ */ jsx320(ItemIndicator, { children: /* @__PURE__ */ jsx320(
+            /* @__PURE__ */ jsx321("div", { style: { display: "none" }, children: /* @__PURE__ */ jsx321(ItemText, { children: selectedDisplayValue }) })
+          ] }) : /* @__PURE__ */ jsx321(ItemText, { children }),
+          /* @__PURE__ */ jsx321(ItemIndicator, { children: /* @__PURE__ */ jsx321(
             Icon,
             {
               size: "md",
@@ -17560,13 +17579,13 @@ SelectOption.displayName = "SelectOption_UI";
 // src/components/Select/SelectOptionGroup.tsx
 import { Group, Label as Label3 } from "@radix-ui/react-select";
 import { styled as styled95 } from "styled-components";
-import { jsx as jsx321, jsxs as jsxs64 } from "react/jsx-runtime";
+import { jsx as jsx322, jsxs as jsxs64 } from "react/jsx-runtime";
 var StyledLabel4 = styled95(Label3)`
   padding: var(--wui-select-option-padding);
 `;
 var SelectOptionGroup = ({ children, label, ...props }) => {
   return /* @__PURE__ */ jsxs64(Group, { ...props, children: [
-    /* @__PURE__ */ jsx321(StyledLabel4, { children: /* @__PURE__ */ jsx321(
+    /* @__PURE__ */ jsx322(StyledLabel4, { children: /* @__PURE__ */ jsx322(
       Heading,
       {
         renderAs: "span",
@@ -17587,7 +17606,7 @@ import {
 } from "@radix-ui/react-slider";
 import { styled as styled96 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString9 } from "@wistia/type-guards";
-import { jsx as jsx322, jsxs as jsxs65 } from "react/jsx-runtime";
+import { jsx as jsx323, jsxs as jsxs65 } from "react/jsx-runtime";
 var SliderContainer = styled96.div`
   --wui-slider-track-color: var(--wui-gray-6);
   --wui-slider-track-border-radius: var(--wui-border-radius-rounded);
@@ -17676,7 +17695,7 @@ var Slider = ({
       onChange(newValue);
     }
   };
-  return /* @__PURE__ */ jsx322(
+  return /* @__PURE__ */ jsx323(
     SliderContainer,
     {
       ...otherProps,
@@ -17694,8 +17713,8 @@ var Slider = ({
           step,
           ...value ? { value } : {},
           children: [
-            /* @__PURE__ */ jsx322(StyledSliderTrack, { "data-testid": `${dataTestId}-track`, children: /* @__PURE__ */ jsx322(StyledSliderRange, { "data-testid": `${dataTestId}-range` }) }),
-            values.map((_, index) => /* @__PURE__ */ jsx322(
+            /* @__PURE__ */ jsx323(StyledSliderTrack, { "data-testid": `${dataTestId}-track`, children: /* @__PURE__ */ jsx323(StyledSliderRange, { "data-testid": `${dataTestId}-range` }) }),
+            values.map((_, index) => /* @__PURE__ */ jsx323(
               StyledSliderThumb,
               {
                 "data-testid": `${dataTestId}-thumb-${index}`
@@ -17712,7 +17731,7 @@ Slider.displayName = "Slider_UI";
 
 // src/components/Table/Table.tsx
 import { styled as styled97, css as css48 } from "styled-components";
-import { jsx as jsx323 } from "react/jsx-runtime";
+import { jsx as jsx324 } from "react/jsx-runtime";
 var StyledTable = styled97.table`
   width: 100%;
   border-collapse: collapse;
@@ -17742,7 +17761,7 @@ var Table = ({
   visuallyHiddenHeader = false,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx323(
+  return /* @__PURE__ */ jsx324(
     StyledTable,
     {
       $divided: divided,
@@ -17762,18 +17781,18 @@ import { createContext as createContext11 } from "react";
 var TableSectionContext = createContext11(null);
 
 // src/components/Table/TableBody.tsx
-import { jsx as jsx324 } from "react/jsx-runtime";
+import { jsx as jsx325 } from "react/jsx-runtime";
 var StyledTableBody = styled98.tbody`
   width: 100%;
 `;
 var TableBody = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx324(TableSectionContext.Provider, { value: "body", children: /* @__PURE__ */ jsx324(StyledTableBody, { ...props, children }) });
+  return /* @__PURE__ */ jsx325(TableSectionContext.Provider, { value: "body", children: /* @__PURE__ */ jsx325(StyledTableBody, { ...props, children }) });
 };
 
 // src/components/Table/TableCell.tsx
 import { useContext as useContext17 } from "react";
 import { styled as styled99, css as css49 } from "styled-components";
-import { jsx as jsx325 } from "react/jsx-runtime";
+import { jsx as jsx326 } from "react/jsx-runtime";
 var sharedStyles = css49`
   color: var(--wui-color-text);
   padding: var(--wui-space-02);
@@ -17794,39 +17813,39 @@ var StyledTd = styled99.td`
 var TableCell = ({ children, ...props }) => {
   const section = useContext17(TableSectionContext);
   if (section === "head") {
-    return /* @__PURE__ */ jsx325(StyledTh, { ...props, children });
+    return /* @__PURE__ */ jsx326(StyledTh, { ...props, children });
   }
-  return /* @__PURE__ */ jsx325(StyledTd, { ...props, children });
+  return /* @__PURE__ */ jsx326(StyledTd, { ...props, children });
 };
 
 // src/components/Table/TableFoot.tsx
 import { styled as styled100 } from "styled-components";
-import { jsx as jsx326 } from "react/jsx-runtime";
+import { jsx as jsx327 } from "react/jsx-runtime";
 var StyledTableFoot = styled100.tfoot`
   width: 100%;
 `;
 var TableFoot = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx326(TableSectionContext.Provider, { value: "footer", children: /* @__PURE__ */ jsx326(StyledTableFoot, { ...props, children }) });
+  return /* @__PURE__ */ jsx327(TableSectionContext.Provider, { value: "footer", children: /* @__PURE__ */ jsx327(StyledTableFoot, { ...props, children }) });
 };
 
 // src/components/Table/TableHead.tsx
 import { styled as styled101 } from "styled-components";
-import { jsx as jsx327 } from "react/jsx-runtime";
+import { jsx as jsx328 } from "react/jsx-runtime";
 var StyledThead = styled101.thead`
   width: 100%;
 `;
 var TableHead = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx327(TableSectionContext.Provider, { value: "head", children: /* @__PURE__ */ jsx327(StyledThead, { ...props, children }) });
+  return /* @__PURE__ */ jsx328(TableSectionContext.Provider, { value: "head", children: /* @__PURE__ */ jsx328(StyledThead, { ...props, children }) });
 };
 
 // src/components/Table/TableRow.tsx
 import { styled as styled102 } from "styled-components";
-import { jsx as jsx328 } from "react/jsx-runtime";
+import { jsx as jsx329 } from "react/jsx-runtime";
 var StyledTableRow = styled102.tr`
   width: 100%;
 `;
 var TableRow = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx328(StyledTableRow, { ...props, children });
+  return /* @__PURE__ */ jsx329(StyledTableRow, { ...props, children });
 };
 
 // src/components/Tabs/Tabs.tsx
@@ -17847,7 +17866,7 @@ var useTabsValue = () => {
 };
 
 // src/components/Tabs/Tabs.tsx
-import { jsx as jsx329 } from "react/jsx-runtime";
+import { jsx as jsx330 } from "react/jsx-runtime";
 var Tabs = ({
   children,
   value: valueProp,
@@ -17875,15 +17894,15 @@ var Tabs = ({
   if (isNotNil38(defaultValue)) {
     rootProps.defaultValue = defaultValue;
   }
-  return /* @__PURE__ */ jsx329(RadixTabsRoot, { ...rootProps, children: /* @__PURE__ */ jsx329(TabsValueProvider, { value: value ?? defaultValue, children: /* @__PURE__ */ jsx329(SelectedItemStyleProvider, { children }) }) });
+  return /* @__PURE__ */ jsx330(RadixTabsRoot, { ...rootProps, children: /* @__PURE__ */ jsx330(TabsValueProvider, { value: value ?? defaultValue, children: /* @__PURE__ */ jsx330(SelectedItemStyleProvider, { children }) }) });
 };
 Tabs.displayName = "Tabs_UI";
 
 // src/components/Tabs/TabsContent.tsx
 import { Content as RadixTabsContent } from "@radix-ui/react-tabs";
-import { jsx as jsx330 } from "react/jsx-runtime";
+import { jsx as jsx331 } from "react/jsx-runtime";
 var TabsContent = ({ children, value }) => {
-  return /* @__PURE__ */ jsx330(RadixTabsContent, { value, children });
+  return /* @__PURE__ */ jsx331(RadixTabsContent, { value, children });
 };
 TabsContent.displayName = "TabsContent_UI";
 
@@ -17903,14 +17922,14 @@ var TabsSelectedItemIndicatorDiv = styled103(SelectedItemIndicatorDiv)`
 `;
 
 // src/components/Tabs/SelectedTabIndicator.tsx
-import { jsx as jsx331 } from "react/jsx-runtime";
+import { jsx as jsx332 } from "react/jsx-runtime";
 var SelectedTabIndicator = () => {
   const { selectedItemIndicatorStyle } = useSelectedItemStyle();
   const selectedValue = useTabsValue();
   if (selectedValue == null || isUndefined6(selectedItemIndicatorStyle)) {
     return null;
   }
-  return /* @__PURE__ */ jsx331(
+  return /* @__PURE__ */ jsx332(
     TabsSelectedItemIndicatorDiv,
     {
       "data-wui-selected-item-indicator": true,
@@ -17920,7 +17939,7 @@ var SelectedTabIndicator = () => {
 };
 
 // src/components/Tabs/TabsList.tsx
-import { jsx as jsx332, jsxs as jsxs66 } from "react/jsx-runtime";
+import { jsx as jsx333, jsxs as jsxs66 } from "react/jsx-runtime";
 var StyledRadixTabsList = styled104(RadixTabList)`
   ${segmentedControlStyles}
 `;
@@ -17932,7 +17951,7 @@ var TabsList = ({ children, fullWidth = true, ...props }) => {
       "aria-label": props["aria-label"],
       children: [
         children,
-        /* @__PURE__ */ jsx332(SelectedTabIndicator, {})
+        /* @__PURE__ */ jsx333(SelectedTabIndicator, {})
       ]
     }
   );
@@ -18009,7 +18028,7 @@ TabsTrigger.displayName = "TabsTrigger_UI";
 // src/components/Thumbnail/ThumbnailBadge.tsx
 import { styled as styled106 } from "styled-components";
 import { isNotNil as isNotNil40 } from "@wistia/type-guards";
-import { jsx as jsx333, jsxs as jsxs68 } from "react/jsx-runtime";
+import { jsx as jsx334, jsxs as jsxs68 } from "react/jsx-runtime";
 var StyledThumbnailBadge = styled106.div`
   align-items: center;
   background-color: rgb(0 0 0 / 50%);
@@ -18038,7 +18057,7 @@ var StyledThumbnailBadge = styled106.div`
 var ThumbnailBadge = ({ icon, label, ...props }) => {
   return /* @__PURE__ */ jsxs68(StyledThumbnailBadge, { ...props, children: [
     isNotNil40(icon) && icon,
-    /* @__PURE__ */ jsx333("span", { children: label })
+    /* @__PURE__ */ jsx334("span", { children: label })
   ] });
 };
 ThumbnailBadge.displayName = "ThumbnailBadge_UI";
@@ -18190,7 +18209,7 @@ var getBackgroundGradient = (gradientName = void 0) => {
 // src/components/Thumbnail/ThumbnailStoryboardViewer.tsx
 import { styled as styled107 } from "styled-components";
 import { isNotNil as isNotNil42 } from "@wistia/type-guards";
-import { jsx as jsx334, jsxs as jsxs69 } from "react/jsx-runtime";
+import { jsx as jsx335, jsxs as jsxs69 } from "react/jsx-runtime";
 var ScrubLine = styled107.div`
   position: absolute;
   top: 0;
@@ -18308,8 +18327,8 @@ var ThumbnailStoryboardViewer = ({
       ...props,
       style: viewerStyles,
       children: [
-        /* @__PURE__ */ jsx334("div", { style: storyboardStyles }),
-        showScrubLine ? /* @__PURE__ */ jsx334(
+        /* @__PURE__ */ jsx335("div", { style: storyboardStyles }),
+        showScrubLine ? /* @__PURE__ */ jsx335(
           ScrubLine,
           {
             style: {
@@ -18323,7 +18342,7 @@ var ThumbnailStoryboardViewer = ({
 };
 
 // src/components/Thumbnail/Thumbnail.tsx
-import { jsx as jsx335, jsxs as jsxs70 } from "react/jsx-runtime";
+import { jsx as jsx336, jsxs as jsxs70 } from "react/jsx-runtime";
 var WIDE_ASPECT_RATIO = 16 / 9;
 var SQUARE_ASPECT_RATIO = 1;
 var getAspectRatioValue = (aspectRatio) => {
@@ -18344,7 +18363,7 @@ var SquareThumbnailImage = styled108.img`
 `;
 var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
   if (thumbnailImageType === "wide") {
-    return /* @__PURE__ */ jsx335(
+    return /* @__PURE__ */ jsx336(
       WideThumbnailImage,
       {
         alt: "",
@@ -18353,7 +18372,7 @@ var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
       }
     );
   }
-  return /* @__PURE__ */ jsx335(
+  return /* @__PURE__ */ jsx336(
     SquareThumbnailImage,
     {
       alt: "",
@@ -18405,7 +18424,7 @@ var StoryboardRenderer = ({
   const { url, width: sbWidth, height: sbHeight, frameHeight, frameWidth, frameCount } = storyboard;
   const targetWidth = isString4(width) ? parseInt(width, 10) : Number(width);
   const effectiveCursorPosition = isStoryboardReady ? cursorPosition : null;
-  return /* @__PURE__ */ jsx335(
+  return /* @__PURE__ */ jsx336(
     ThumbnailStoryboardViewer,
     {
       cursorPosition: effectiveCursorPosition,
@@ -18495,7 +18514,7 @@ var Thumbnail = forwardRef37(
     }, [isScrubbable, isMouseOver, isStoryboardReady, storyboard, height]);
     let thumbnailContent = null;
     if (storyboard && shouldRenderStoryboard) {
-      thumbnailContent = /* @__PURE__ */ jsx335(
+      thumbnailContent = /* @__PURE__ */ jsx336(
         StoryboardRenderer,
         {
           aspectRatio,
@@ -18507,7 +18526,7 @@ var Thumbnail = forwardRef37(
         }
       );
     } else if (hasValidThumbnailUrl(thumbnailUrl)) {
-      thumbnailContent = /* @__PURE__ */ jsx335(
+      thumbnailContent = /* @__PURE__ */ jsx336(
         ThumbnailImage,
         {
           thumbnailImageType,
@@ -18517,7 +18536,7 @@ var Thumbnail = forwardRef37(
     } else {
       thumbnailContent = null;
     }
-    return /* @__PURE__ */ jsx335(
+    return /* @__PURE__ */ jsx336(
       StyledThumbnailContainer,
       {
         ref,
@@ -18552,7 +18571,7 @@ Thumbnail.displayName = "Thumbnail_UI";
 import { cloneElement as cloneElement9, Children as Children11 } from "react";
 import { styled as styled109 } from "styled-components";
 import { isNonEmptyArray } from "@wistia/type-guards";
-import { jsx as jsx336 } from "react/jsx-runtime";
+import { jsx as jsx337 } from "react/jsx-runtime";
 var ThumbnailCollageContainer = styled109.div`
   container-type: size;
   width: 100%;
@@ -18617,7 +18636,7 @@ var ThumbnailCollage = ({
     });
   }) : [
     // ThumbnailCollage will fallback to a Thumbnail with a gradient background if no children are provided
-    /* @__PURE__ */ jsx336(
+    /* @__PURE__ */ jsx337(
       Thumbnail,
       {
         gradientBackground,
@@ -18626,7 +18645,7 @@ var ThumbnailCollage = ({
       "fallback"
     )
   ];
-  return /* @__PURE__ */ jsx336(ThumbnailCollageContainer, { children: /* @__PURE__ */ jsx336(
+  return /* @__PURE__ */ jsx337(ThumbnailCollageContainer, { children: /* @__PURE__ */ jsx337(
     StyledThumbnailCollage,
     {
       $gradientBackground: gradientBackground,
@@ -18640,24 +18659,24 @@ var ThumbnailCollage = ({
 // src/components/WistiaLogo/WistiaLogo.tsx
 import { styled as styled110, css as css51 } from "styled-components";
 import { isNotNil as isNotNil44 } from "@wistia/type-guards";
-import { jsx as jsx337, jsxs as jsxs71 } from "react/jsx-runtime";
+import { jsx as jsx338, jsxs as jsxs71 } from "react/jsx-runtime";
 var renderBrandmark = (brandmarkColor, iconOnly) => {
   if (iconOnly) {
-    return /* @__PURE__ */ jsx337(
+    return /* @__PURE__ */ jsx338(
       "g",
       {
         "data-testid": "ui-wistia-logo-brandmark",
         fill: brandmarkColor,
-        children: /* @__PURE__ */ jsx337("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" })
+        children: /* @__PURE__ */ jsx338("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__ */ jsx337(
+  return /* @__PURE__ */ jsx338(
     "g",
     {
       "data-testid": "ui-wistia-logo-brandmark",
       fill: brandmarkColor,
-      children: /* @__PURE__ */ jsx337("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" })
+      children: /* @__PURE__ */ jsx338("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" })
     }
   );
 };
@@ -18665,12 +18684,12 @@ var renderLogotype = (logotypeColor, iconOnly) => {
   if (iconOnly) {
     return null;
   }
-  return /* @__PURE__ */ jsx337(
+  return /* @__PURE__ */ jsx338(
     "g",
     {
       "data-testid": "ui-wistia-logo-logotype",
       fill: logotypeColor,
-      children: /* @__PURE__ */ jsx337("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" })
+      children: /* @__PURE__ */ jsx338("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" })
     }
   );
 };
@@ -18751,14 +18770,14 @@ var WistiaLogo = ({
       xmlns: "http://www.w3.org/2000/svg",
       ...props,
       children: [
-        /* @__PURE__ */ jsx337("title", { children: title }),
-        isNotNil44(description) ? /* @__PURE__ */ jsx337("desc", { children: description }) : null,
+        /* @__PURE__ */ jsx338("title", { children: title }),
+        isNotNil44(description) ? /* @__PURE__ */ jsx338("desc", { children: description }) : null,
         renderBrandmark(brandmarkColor, iconOnly),
         renderLogotype(logotypeColor, iconOnly)
       ]
     }
   );
-  return href !== void 0 ? /* @__PURE__ */ jsx337("a", { href, children: Logo }) : Logo;
+  return href !== void 0 ? /* @__PURE__ */ jsx338("a", { href, children: Logo }) : Logo;
 };
 WistiaLogo.displayName = "WistiaLogo_UI";
 
@@ -18766,7 +18785,7 @@ WistiaLogo.displayName = "WistiaLogo_UI";
 import { styled as styled111 } from "styled-components";
 import { isNotNil as isNotNil45 } from "@wistia/type-guards";
 import { cloneElement as cloneElement10 } from "react";
-import { jsx as jsx338, jsxs as jsxs72 } from "react/jsx-runtime";
+import { jsx as jsx339, jsxs as jsxs72 } from "react/jsx-runtime";
 var StyledSplitButton = styled111.span`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   white-space: nowrap;
@@ -18788,7 +18807,7 @@ var StyledSplitButton = styled111.span`
 var SplitButton = ({
   children,
   menuLabel = "Select an option",
-  menuIcon = /* @__PURE__ */ jsx338(Icon, { type: "caret-down" }),
+  menuIcon = /* @__PURE__ */ jsx339(Icon, { type: "caret-down" }),
   menuItems,
   disabled = false,
   colorScheme = "inherit",
@@ -18800,7 +18819,7 @@ var SplitButton = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsxs72(StyledSplitButton, { $colorScheme: colorScheme, children: [
-    /* @__PURE__ */ jsx338(
+    /* @__PURE__ */ jsx339(
       Button,
       {
         disabled,
@@ -18811,12 +18830,12 @@ var SplitButton = ({
         children
       }
     ),
-    isNotNil45(menuItems) && /* @__PURE__ */ jsx338(
+    isNotNil45(menuItems) && /* @__PURE__ */ jsx339(
       Menu,
       {
         ...menuProps,
         disabled,
-        trigger: /* @__PURE__ */ jsx338(
+        trigger: /* @__PURE__ */ jsx339(
           IconButton,
           {
             disabled,
@@ -18837,7 +18856,7 @@ SplitButton.displayName = "SplitButton_UI";
 
 // src/components/CustomizableThemeWrapper/CustomizableThemeWrapper.tsx
 import { styled as styled112 } from "styled-components";
-import { jsx as jsx339 } from "react/jsx-runtime";
+import { jsx as jsx340 } from "react/jsx-runtime";
 var StyledCustomizableThemeWrapper = styled112.div(
   (props) => props.$overrides
 );
@@ -18845,7 +18864,7 @@ var CustomizableThemeWrapper = ({
   children,
   overrides,
   ...props
-}) => /* @__PURE__ */ jsx339(
+}) => /* @__PURE__ */ jsx340(
   StyledCustomizableThemeWrapper,
   {
     ...props,