@wistia/ui 0.0.9 → 0.0.11

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.0.9
+ * @license @wistia/ui v0.0.11
  *
  * Copyright (c) 2024-2024, Wistia, Inc. and its affiliates.
  *
@@ -39,6 +39,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  Avatar: () => Avatar,
   Badge: () => Badge,
   Box: () => Box,
   Button: () => Button,
@@ -49,6 +50,7 @@ __export(src_exports, {
   Heading: () => Heading,
   Icon: () => Icon,
   IconButton: () => IconButton,
+  Label: () => Label,
   Link: () => Link,
   ScreenReaderOnly: () => ScreenReaderOnly,
   Stack: () => Stack,
@@ -56,6 +58,7 @@ __export(src_exports, {
   Tooltip: () => Tooltip,
   UIProvider: () => UIProvider,
   WistiaLogo: () => WistiaLogo,
+  colorSchemeOptions: () => colorSchemeOptions,
   copyToClipboard: () => copyToClipboard,
   ellipsisFlexParentStyle: () => ellipsisFlexParentStyle,
   ellipsisStyle: () => ellipsisStyle,
@@ -808,7 +811,8 @@ var colorAliasTokens = import_styled_components4.css`
   --color-bg-surface-secondary-hover: var(--gray-4);
   --color-bg-surface-tertiary: var(--gray-5);
   --color-border: var(--gray-6);
-  --color-border-selected: var(--blue-6);
+  --color-border-hover: var(--gray-8);
+  --color-border-active: var(--gray-9);
   --color-icon: var(--gray-11);
   --color-icon-on-fill: var(--gray-contrast);
   --color-text: var(--gray-12);
@@ -831,6 +835,8 @@ var colorAliasTokens = import_styled_components4.css`
   --color-bg-surface-secondary-hover-error: var(--error-4);
   --color-bg-surface-tertiary-error: var(--error-5);
   --color-border-error: var(--error-6);
+  --color-border-hover-errror: var(--error-8);
+  --color-border-active-error: var(--error-9);
   --color-icon-error: var(--error-11);
   --color-icon-on-fill-error: var(--error-contrast);
   --color-text-error: var(--error-11);
@@ -851,6 +857,8 @@ var colorAliasTokens = import_styled_components4.css`
   --color-bg-surface-secondary-info: var(--blue-3);
   --color-bg-surface-tertiary-info: var(--blue-6);
   --color-border-info: var(--blue-6);
+  --color-border-hover-info: var(--blue-8);
+  --color-border-active-info: var(--blue-9);
   --color-icon-info: var(--blue-11);
   --color-icon-on-fill-info: var(--blue-contrast);
   --color-text-high-contrast-info: var(--blue-12);
@@ -871,6 +879,8 @@ var colorAliasTokens = import_styled_components4.css`
   --color-bg-surface-success: var(--success-surface);
   --color-bg-surface-tertiary-success: var(--success-5);
   --color-border-success: var(--success-6);
+  --color-border-hover-success: var(--success-8);
+  --color-border-active-success: var(--success-9);
   --color-icon-on-fill-success: var(--success-contrast);
   --color-icon-success: var(--success-11);
   --color-text-high-contrast-success: var(--success-12);
@@ -891,6 +901,8 @@ var colorAliasTokens = import_styled_components4.css`
   --color-bg-surface-tertiary-warning: var(--warning-5);
   --color-bg-surface-warning: var(--warning-surface);
   --color-border-warning: var(--warning-6);
+  --color-border-hover-warning: var(--warning-8);
+  --color-border-active-warning: var(--warning-9);
   --color-icon-on-fill-warning: var(--warning-contrast);
   --color-icon-warning: var(--warning-11);
   --color-text-high-contrast-warning: var(--warning-12);
@@ -913,6 +925,8 @@ var colorAliasTokens = import_styled_components4.css`
   --color-bg-surface-secondary-hover-blue: var(--blue-4);
   --color-bg-surface-tertiary-blue: var(--blue-5);
   --color-border-blue: var(--blue-6);
+  --color-border-hover-blue: var(--blue-8);
+  --color-border-active-blue: var(--blue-9);
   --color-icon-blue: var(--blue-11);
   --color-icon-on-fill-blue: var(--blue-contrast);
   --color-text-blue: var(--blue-11);
@@ -933,6 +947,8 @@ var colorAliasTokens = import_styled_components4.css`
   --color-bg-surface-secondary-hover-green: var(--green-4);
   --color-bg-surface-tertiary-green: var(--green-5);
   --color-border-green: var(--green-6);
+  --color-border-hover-green: var(--green-8);
+  --color-border-active-green: var(--green-9);
   --color-icon-green: var(--green-11);
   --color-icon-on-fill-green: var(--green-contrast);
   --color-text-green: var(--green-11);
@@ -953,6 +969,8 @@ var colorAliasTokens = import_styled_components4.css`
   --color-bg-surface-secondary-orange: var(--orange-3);
   --color-bg-surface-tertiary-orange: var(--orange-5);
   --color-border-orange: var(--orange-6);
+  --color-border-hover-orange: var(--orange-8);
+  --color-border-active-orange: var(--orange-9);
   --color-icon-on-fill-orange: var(--orange-contrast);
   --color-icon-orange: var(--orange-11);
   --color-text-high-contrast-orange: var(--orange-12);
@@ -973,6 +991,8 @@ var colorAliasTokens = import_styled_components4.css`
   --color-bg-surface-secondary-pink: var(--pink-3);
   --color-bg-surface-tertiary-pink: var(--pink-5);
   --color-border-pink: var(--pink-6);
+  --color-border-hover-pink: var(--pink-8);
+  --color-border-active-pink: var(--pink-9);
   --color-icon-on-fill-pink: var(--pink-contrast);
   --color-icon-pink: var(--pink-11);
   --color-text-high-contrast-pink: var(--pink-12);
@@ -993,6 +1013,8 @@ var colorAliasTokens = import_styled_components4.css`
   --color-bg-surface-secondary-purple: var(--purple-3);
   --color-bg-surface-tertiary-purple: var(--purple-5);
   --color-border-purple: var(--purple-6);
+  --color-border-hover-purple: var(--purple-8);
+  --color-border-active-purple: var(--purple-9);
   --color-icon-on-fill-purple: var(--purple-contrast);
   --color-icon-purple: var(--purple-11);
   --color-text-high-contrast-purple: var(--purple-12);
@@ -1013,6 +1035,8 @@ var colorAliasTokens = import_styled_components4.css`
   --color-bg-surface-tertiary-yellow: var(--yellow-5);
   --color-bg-surface-yellow: var(--yellow-surface);
   --color-border-yellow: var(--yellow-6);
+  --color-border-hover-yellow: var(--yellow-8);
+  --color-border-active-yellow: var(--yellow-9);
   --color-icon-on-fill-yellow: var(--yellow-contrast);
   --color-icon-yellow: var(--yellow-11);
   --color-text-high-contrast-yellow: var(--yellow-12);
@@ -1044,6 +1068,9 @@ var colorAliasTokens = import_styled_components4.css`
   --color-bg-surface-selected-hover: var(--blue-4);
   --color-icon-selected: var(--blue-9);
   --color-text-selected: var(--blue-9);
+  --color-border-selected: var(--blue-6);
+  --color-border-hover-selected: var(--blue-8);
+  --color-border-active-selected: var(--blue-9);
 `;
 
 // src/css/designTokens/borderRadius.tsx
@@ -1427,10 +1454,13 @@ var useAriaLive = () => {
   return context;
 };
 
-// src/components/Badge/Badge.tsx
+// src/components/Avatar/Avatar.tsx
 var import_react5 = require("react");
+var import_type_guards6 = require("@wistia/type-guards");
+var import_styled_components12 = __toESM(require("styled-components"));
+
+// src/components/ColorSchemeWrapper/ColorSchemeWrapper.tsx
 var import_styled_components11 = __toESM(require("styled-components"));
-var import_type_guards5 = require("@wistia/type-guards");
 
 // src/private/helpers/getColorScheme/getColorScheme.ts
 var import_styled_components10 = require("styled-components");
@@ -1451,6 +1481,8 @@ var colorSchemeSchema = [
   { token: "text-secondary", step: "11" },
   { token: "text-on-fill", step: "contrast" },
   { token: "border", step: "6" },
+  { token: "border-hover", step: "8" },
+  { token: "border-active", step: "9" },
   { token: "icon", step: "11" },
   { token: "icon-on-fill", step: "contrast" }
 ];
@@ -1487,9 +1519,172 @@ var getColorScheme = (colorScheme) => {
   `;
 };
 
-// src/components/Badge/Badge.tsx
+// src/components/ColorSchemeWrapper/ColorSchemeWrapper.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var StyledBadge = import_styled_components11.default.div`
+var colorSchemeOptions = [
+  "inherit",
+  "default",
+  "info",
+  "success",
+  "warning",
+  "error",
+  "blue",
+  "green",
+  "orange",
+  "pink",
+  "purple",
+  "yellow"
+];
+var StyledColorSchemeWrapper = import_styled_components11.default.div`
+  ${({ $colorScheme }) => getColorScheme($colorScheme)};
+`;
+var ColorSchemeWrapper = ({
+  colorScheme,
+  children,
+  ...otherProps
+}) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  StyledColorSchemeWrapper,
+  {
+    $colorScheme: colorScheme,
+    ...otherProps,
+    children
+  }
+);
+ColorSchemeWrapper.displayName = "ColorSchemeWrapper";
+
+// src/components/Avatar/formatNameForDisplay.tsx
+var import_type_guards5 = require("@wistia/type-guards");
+var containsEmojiCharacter = (char) => {
+  const emojiRegex = /<a?:.+?:\d{18}>|\p{Extended_Pictographic}/gu;
+  return emojiRegex.test(char);
+};
+var formatNameForDisplay = (name) => {
+  if ((0, import_type_guards5.isNil)(name) || !(0, import_type_guards5.isString)(name) || (0, import_type_guards5.isEmptyString)(name) || containsEmojiCharacter(name)) {
+    return "U";
+  }
+  const firstChar = name.trim().substring(0, 1);
+  return firstChar.toUpperCase();
+};
+
+// src/components/Avatar/Avatar.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var AvatarImage = import_styled_components12.default.img`
+  align-items: center;
+  background-color: white;
+  border-radius: 50%;
+  display: flex;
+  height: ${({ $heightAndWidth }) => $heightAndWidth}px;
+  justify-content: center;
+  object-fit: cover;
+  overflow: hidden;
+  pointer-events: none;
+  user-select: none;
+  width: ${({ $heightAndWidth }) => $heightAndWidth}px;
+
+  a:hover & {
+    box-shadow: inset 0 0 0 2px rgb(0 0 0 / 25%);
+  }
+
+  a:active & {
+    box-shadow: inset 0 0 0 2px rgb(0 0 0 / 50%);
+  }
+`;
+var avatarSizeMap = {
+  sm: 16,
+  md: 24,
+  lg: 32
+};
+var fontSizeScaleMultiplier = 0.55;
+var InitialsContainer = import_styled_components12.default.div`
+  ${({ $colorScheme }) => getColorScheme($colorScheme)};
+  align-items: center;
+  background-color: var(--color-bg-fill);
+  border: 1px solid var(--color-border);
+  border-radius: 50%;
+  color: var(--color-text-on-fill);
+  display: flex;
+  font-size: ${({ $heightAndWidth }) => $heightAndWidth * fontSizeScaleMultiplier}px;
+  height: ${({ $heightAndWidth }) => $heightAndWidth}px;
+  justify-content: center;
+  overflow: hidden;
+  width: ${({ $heightAndWidth }) => $heightAndWidth}px;
+
+  a:hover & {
+    box-shadow: inset 0 0 0 2px rgb(0 0 0 / 25%);
+  }
+
+  a:active & {
+    box-shadow: inset 0 0 0 2px rgb(0 0 0 / 50%);
+  }
+`;
+var AvatarWrapper = import_styled_components12.default.div`
+  max-height: ${({ $maxHeight }) => $maxHeight}px;
+`;
+var chooseColorScheme = (name) => {
+  if ((0, import_type_guards6.isNil)(name) || name === "Anonymous") {
+    return "default";
+  }
+  const filteredColors = colorSchemeOptions.filter(
+    (color) => color !== "inherit" && color !== "default"
+  );
+  const multiplier = 31;
+  const hashCode = (str) => Array.from(str).reduce((sum, char) => Math.imul(multiplier, sum) + char.charCodeAt(0) | 0, 0);
+  const index = Math.abs(hashCode(name)) % filteredColors.length;
+  return filteredColors[index] ?? "default";
+};
+var Avatar = ({
+  imageUrl,
+  heightAndWidth,
+  name,
+  size = "md",
+  onImageLoad,
+  ...otherProps
+}) => {
+  const [imageLoadState, setImageLoadState] = (0, import_react5.useState)(null);
+  const handleImageLoad = () => {
+    setImageLoadState("loaded");
+    onImageLoad?.("image");
+  };
+  const handleImageLoadError = () => {
+    setImageLoadState("error");
+    onImageLoad?.("initials");
+  };
+  const avatarSize = heightAndWidth ?? avatarSizeMap[size];
+  const avatarColor = (0, import_react5.useMemo)(() => chooseColorScheme(name), [name]);
+  const showInitials = (0, import_type_guards6.isNil)(imageUrl) || imageLoadState === "error";
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    AvatarWrapper,
+    {
+      ...otherProps,
+      $maxHeight: avatarSize,
+      children: showInitials ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        InitialsContainer,
+        {
+          $colorScheme: avatarColor,
+          $heightAndWidth: avatarSize,
+          children: formatNameForDisplay(name)
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        AvatarImage,
+        {
+          $heightAndWidth: avatarSize,
+          alt: name ?? "Unavailable",
+          onError: handleImageLoadError,
+          onLoad: handleImageLoad,
+          src: imageUrl
+        }
+      )
+    }
+  );
+};
+Avatar.displayName = "Avatar";
+
+// src/components/Badge/Badge.tsx
+var import_react6 = require("react");
+var import_styled_components13 = __toESM(require("styled-components"));
+var import_type_guards7 = require("@wistia/type-guards");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var StyledBadge = import_styled_components13.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   align-items: center;
   background-color: var(--color-bg-surface-secondary);
@@ -1509,10 +1704,10 @@ var StyledBadge = import_styled_components11.default.div`
     width: 12px;
   }
 `;
-var Badge = (0, import_react5.forwardRef)(
+var Badge = (0, import_react6.forwardRef)(
   ({ colorScheme = "inherit", label, icon, ...otherProps }, ref) => {
-    const hasIcon = (0, import_type_guards5.isNotNil)(icon);
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    const hasIcon = (0, import_type_guards7.isNotNil)(icon);
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       StyledBadge,
       {
         ref,
@@ -1521,7 +1716,7 @@ var Badge = (0, import_react5.forwardRef)(
         $hasIcon: hasIcon,
         children: [
           hasIcon ? icon : null,
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: label })
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: label })
         ]
       }
     );
@@ -1530,15 +1725,15 @@ var Badge = (0, import_react5.forwardRef)(
 Badge.displayName = "Badge";
 
 // src/components/Box/Box.tsx
-var import_react6 = require("react");
-var import_styled_components12 = __toESM(require("styled-components"));
-var import_type_guards6 = require("@wistia/type-guards");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_react7 = require("react");
+var import_styled_components14 = __toESM(require("styled-components"));
+var import_type_guards8 = require("@wistia/type-guards");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var isDev = process.env["NODE_ENV"] === "development";
 var PROPS_FOR_FLEX_CHILDREN = /* @__PURE__ */ new Set(["alignSelf", "basis", "grow", "order", "shrink"]);
 var getGapStyle = (gap) => {
-  if ((0, import_type_guards6.isNotNil)(gap)) {
-    if ((0, import_type_guards6.isRecord)(gap)) {
+  if ((0, import_type_guards8.isNotNil)(gap)) {
+    if ((0, import_type_guards8.isRecord)(gap)) {
       return Object.entries(gap).map(([key, value]) => `${key}-gap: ${value};`).join("");
     }
     return `gap: ${gap.toString()};`;
@@ -1575,34 +1770,34 @@ var getFillViewportStyle = (fillViewport) => {
   }
   return void 0;
 };
-var BoxComponent = import_styled_components12.default.div`
-  align-content: ${({ alignContent }) => alignContent};
-  align-items: ${({ alignItems }) => alignItems};
-  align-self: ${({ alignSelf }) => alignSelf ?? null};
-  display: ${({ inline }) => (0, import_type_guards6.isNotNil)(inline) && inline ? "inline-flex" : "flex"};
-  flex-basis: ${({ basis }) => (0, import_type_guards6.isNotNil)(basis) ? basis : null};
-  flex-direction: ${({ flexDirection }) => flexDirection};
-  ${({ fillBox: fill }) => getFillStyle(fill)};
-  ${({ fillViewport }) => getFillViewportStyle(fillViewport)};
+var BoxComponent = import_styled_components14.default.div`
+  align-content: ${({ $alignContent }) => $alignContent};
+  align-items: ${({ $alignItems }) => $alignItems};
+  align-self: ${({ $alignSelf }) => $alignSelf ?? null};
+  display: ${({ $inline }) => (0, import_type_guards8.isNotNil)($inline) && $inline ? "inline-flex" : "flex"};
+  flex-basis: ${({ $basis }) => (0, import_type_guards8.isNotNil)($basis) ? $basis : null};
+  flex-direction: ${({ $flexDirection }) => $flexDirection};
+  ${({ $fillBox: fill }) => getFillStyle(fill)};
+  ${({ $fillViewport }) => getFillViewportStyle($fillViewport)};
 
   /* Box children styles */
-  flex-grow: ${({ grow }) => (0, import_type_guards6.isNotNil)(grow) ? grow : null};
-  flex-shrink: ${({ shrink }) => (0, import_type_guards6.isNotNil)(shrink) ? shrink : null};
-  flex-wrap: ${({ wrapItems }) => wrapItems ? "wrap" : "nowrap"};
-  ${({ gap }) => getGapStyle(gap)};
-  justify-content: ${({ justifyContent }) => justifyContent};
-  order: ${({ order }) => (0, import_type_guards6.isNotNil)(order) ? order : null};
+  flex-grow: ${({ $grow }) => (0, import_type_guards8.isNotNil)($grow) ? $grow : null};
+  flex-shrink: ${({ $shrink }) => (0, import_type_guards8.isNotNil)($shrink) ? $shrink : null};
+  flex-wrap: ${({ $wrapItems }) => $wrapItems ? "wrap" : "nowrap"};
+  ${({ $gap }) => getGapStyle($gap)};
+  justify-content: ${({ $justifyContent }) => $justifyContent};
+  order: ${({ $order }) => (0, import_type_guards8.isNotNil)($order) ? $order : null};
 `;
 var wrapChildren = (children) => {
-  if ((0, import_type_guards6.isNotNil)(children)) {
+  if ((0, import_type_guards8.isNotNil)(children)) {
     if (typeof children === "object" && isDev) {
-      return import_react6.Children.map(children, (child) => {
-        if ((0, import_type_guards6.isNil)(child)) return null;
+      return import_react7.Children.map(children, (child) => {
+        if ((0, import_type_guards8.isNil)(child)) return null;
         const elementParams = {};
         if (child.type?.displayName === "Box" || child.type?.displayName === "Box_UI") {
           elementParams.hasBoxParent = true;
         }
-        return (0, import_react6.cloneElement)(child, elementParams);
+        return (0, import_react7.cloneElement)(child, elementParams);
       });
     }
     return children;
@@ -1617,6 +1812,7 @@ var Box = ({
   hasBoxParent = false,
   fill = false,
   fillViewport = false,
+  gap,
   inline = false,
   justifyContent = "flex-start",
   wrapItems = false,
@@ -1629,18 +1825,19 @@ var Box = ({
       }
     });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     BoxComponent,
     {
-      alignContent,
-      alignItems,
+      $alignContent: alignContent,
+      $alignItems: alignItems,
+      $fillBox: fill,
+      $fillViewport: fillViewport,
+      $flexDirection: direction,
+      $gap: gap,
+      $inline: inline,
+      $justifyContent: justifyContent,
+      $wrapItems: wrapItems,
       as: "div",
-      fillBox: fill,
-      fillViewport,
-      flexDirection: direction,
-      inline,
-      justifyContent,
-      wrapItems,
       ...otherProps,
       children: wrapChildren(children)
     }
@@ -1649,13 +1846,13 @@ var Box = ({
 Box.displayName = "Box";
 
 // src/components/Button/Button.tsx
-var import_react9 = require("react");
-var import_type_guards10 = require("@wistia/type-guards");
-var import_styled_components17 = __toESM(require("styled-components"));
+var import_react10 = require("react");
+var import_styled_components19 = __toESM(require("styled-components"));
+var import_type_guards12 = require("@wistia/type-guards");
 
 // src/css/buttonResetCss.tsx
-var import_styled_components13 = require("styled-components");
-var buttonResetCss = import_styled_components13.css`
+var import_styled_components15 = require("styled-components");
+var buttonResetCss = import_styled_components15.css`
   align-items: center;
   background-color: transparent;
   background-image: none;
@@ -1700,8 +1897,8 @@ var buttonResetCss = import_styled_components13.css`
 `;
 
 // src/components/Button/buttonStyles.tsx
-var import_styled_components14 = require("styled-components");
-var buttonSmallStyles = import_styled_components14.css`
+var import_styled_components16 = require("styled-components");
+var buttonSmallStyles = import_styled_components16.css`
   --button-padding-vertical: var(--space-01);
   --button-padding-horizontal: var(--space-02);
   --button-label-padding-horizontal: var(--space-01);
@@ -1712,7 +1909,7 @@ var buttonSmallStyles = import_styled_components14.css`
   --button-icon-size: 12px;
   --button-label-gap: 4px;
 `;
-var buttonMediumStyles = import_styled_components14.css`
+var buttonMediumStyles = import_styled_components16.css`
   --button-padding-vertical: var(--space-02);
   --button-padding-horizontal: var(--space-02);
   --button-label-padding-horizontal: 6px;
@@ -1723,7 +1920,7 @@ var buttonMediumStyles = import_styled_components14.css`
   --button-icon-size: 16px;
   --button-label-gap: 6px;
 `;
-var buttonLargeStyles = import_styled_components14.css`
+var buttonLargeStyles = import_styled_components16.css`
   --button-padding-vertical: var(--space-02);
   --button-padding-horizontal: var(--space-02);
   --button-label-padding-horizontal: var(--space-02);
@@ -1734,7 +1931,7 @@ var buttonLargeStyles = import_styled_components14.css`
   --button-icon-size: 24px;
   --button-label-gap: 8px;
 `;
-var buttonHeroStyles = import_styled_components14.css`
+var buttonExtraLargeStyles = import_styled_components16.css`
   --button-padding-vertical: var(--space-03);
   --button-padding-horizontal: var(--space-03);
   --button-label-padding-horizontal: var(--space-02);
@@ -1745,35 +1942,35 @@ var buttonHeroStyles = import_styled_components14.css`
   --button-icon-size: 24px;
   --button-label-gap: 8px;
 `;
-var ghostButtonVariant = import_styled_components14.css`
+var ghostButtonVariant = import_styled_components16.css`
   --button-color-bg: transparent;
   --button-color-bg-hover: var(--color-bg-surface-hover);
   --button-color-bg-active: var(--color-bg-surface-active);
   --button-color-text: var(--color-text);
   --button-color-icon: var(--color-icon);
 `;
-var outlineButtonVariant = import_styled_components14.css`
+var outlineButtonVariant = import_styled_components16.css`
   ${ghostButtonVariant};
   --button-color-border: var(--color-border);
 
   border: 1px solid var(--button-color-border);
   box-shadow: 0 0 0 2px var(--button-color-border) inset;
 `;
-var softButtonVariant = import_styled_components14.css`
+var softButtonVariant = import_styled_components16.css`
   --button-color-bg: var(--color-bg-surface-secondary);
   --button-color-bg-hover: var(--color-bg-surface-secondary-hover);
   --button-color-bg-active: var(--color-bg-surface-secondary-active);
   --button-color-text: var(--color-text);
   --button-color-icon: var(--color-icon);
 `;
-var solidButtonVariant = import_styled_components14.css`
+var solidButtonVariant = import_styled_components16.css`
   --button-color-bg: var(--color-bg-fill);
   --button-color-bg-hover: var(--color-bg-fill-hover);
   --button-color-bg-active: var(--color-bg-fill-active);
   --button-color-text: var(--color-text-on-fill);
   --button-color-icon: var(--color-icon-on-fill);
 `;
-var disabledButtonVariant = import_styled_components14.css`
+var disabledButtonVariant = import_styled_components16.css`
   --button-color-bg: var(--color-bg-surface-disabled);
   --button-color-bg-hover: var(--color-bg-surface-disabled);
   --button-color-bg-active: var(--color-bg-surface-disabled);
@@ -1781,7 +1978,7 @@ var disabledButtonVariant = import_styled_components14.css`
   --button-color-icon: var(--color-icon-disabled);
   --button-color-border: var(--color-border-disabled);
 `;
-var pressedButtonVariant = import_styled_components14.css`
+var pressedButtonVariant = import_styled_components16.css`
   --button-color-bg: var(--color-bg-surface-selected);
   --button-color-bg-hover: var(--color-bg-surface-selected-hover);
   --button-color-bg-active: var(--color-bg-surface-selected-active);
@@ -1789,7 +1986,7 @@ var pressedButtonVariant = import_styled_components14.css`
   --button-color-icon: var(--color-icon-selected);
   --button-color-border: var(--color-border-selected);
 `;
-var buttonBaseStyles = import_styled_components14.css`
+var buttonBaseStyles = import_styled_components16.css`
   border-radius: var(--border-radius-rounded);
   font-family: var(--button-typography-family);
   font-size: var(--button-typography-size);
@@ -1849,25 +2046,25 @@ var buttonVariantsStyles = {
   solid: solidButtonVariant
 };
 var buttonSizeStyles = {
-  small: buttonSmallStyles,
-  medium: buttonMediumStyles,
-  large: buttonLargeStyles,
-  hero: buttonHeroStyles
+  sm: buttonSmallStyles,
+  md: buttonMediumStyles,
+  lg: buttonLargeStyles,
+  xl: buttonExtraLargeStyles
 };
 
 // src/components/Icon/Icon.tsx
-var import_type_guards8 = require("@wistia/type-guards");
-var import_styled_components15 = __toESM(require("styled-components"));
+var import_type_guards10 = require("@wistia/type-guards");
+var import_styled_components17 = __toESM(require("styled-components"));
 
 // src/components/Icon/icons/AbTestIcon.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var AbTestIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var AbTestIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "path",
       {
         d: "M20.0599 18.296L15.3332 9.09199V3.33334H16.3332C16.8852 3.33334 17.3332 2.88534 17.3332 2.33334C17.3332 1.78134 16.8852 1.33334 16.3332 1.33334H7.66659C7.11459 1.33334 6.66659 1.78134 6.66659 2.33334C6.66659 2.88534 7.11459 3.33334 7.66659 3.33334H8.66658V9.09199L3.93993 18.296C3.4586 19.2333 3.4986 20.3293 4.04793 21.2293C4.59726 22.1293 5.55459 22.6666 6.60792 22.6666H17.3906C18.4452 22.6666 19.4026 22.1293 19.9506 21.2293C20.4999 20.3293 20.5399 19.2333 20.0586 18.296H20.0599ZM10.5559 9.79066C10.6292 9.64932 10.6666 9.49199 10.6666 9.33332V3.33334H13.3332V9.33332C13.3332 9.49199 13.3706 9.64932 13.4439 9.79066L15.6052 14H8.39458L10.5559 9.79066Z",
@@ -1878,14 +2075,14 @@ var AbTestIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
 );
 
 // src/components/Icon/icons/AccessibilityIcon.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var AccessibilityIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var AccessibilityIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -1898,14 +2095,14 @@ var AccessibilityIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
 );
 
 // src/components/Icon/icons/ActivityIcon.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var ActivityIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var ActivityIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "path",
       {
         d: "M11.9998 1.33334C6.11847 1.33334 1.33315 6.11867 1.33315 12C1.33315 17.8813 6.11847 22.6666 11.9998 22.6666C17.8811 22.6666 22.6664 17.8813 22.6664 12C22.6664 6.11867 17.8811 1.33334 11.9998 1.33334ZM18.3731 10.3733L14.8451 13.9013C14.1971 14.5506 13.1371 14.5506 12.4878 13.9013L10.3331 11.7467L7.0398 15.04C6.84513 15.2346 6.58913 15.3333 6.33313 15.3333C6.07713 15.3333 5.82113 15.236 5.62647 15.04C5.2358 14.6493 5.2358 14.016 5.62647 13.6253L9.15446 10.0973C9.80246 9.44799 10.8625 9.44799 11.5118 10.0973L13.6664 12.252L16.9598 8.95866C17.3504 8.56799 17.9838 8.56799 18.3744 8.95866C18.7651 9.34932 18.7651 9.98266 18.3744 10.3733H18.3731Z",
@@ -1916,14 +2113,14 @@ var ActivityIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
 );
 
 // src/components/Icon/icons/AddMediaIcon.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var AddMediaIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var AddMediaIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -1936,14 +2133,14 @@ var AddMediaIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
 );
 
 // src/components/Icon/icons/AnnotationLinkIcon.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var AnnotationLinkIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var AnnotationLinkIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -1956,14 +2153,14 @@ var AnnotationLinkIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)
 );
 
 // src/components/Icon/icons/AppearanceIcon.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var AppearanceIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var AppearanceIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -1976,14 +2173,14 @@ var AppearanceIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
 );
 
 // src/components/Icon/icons/ArchiveIcon.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var ArchiveIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var ArchiveIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "path",
       {
         d: "M20.3329 2.66666H3.66623C2.37957 2.66666 1.3329 3.71332 1.3329 4.99998V6.99998C1.3329 8.17198 2.2049 9.13597 3.3329 9.29997V17.6666C3.3329 19.6893 4.97689 21.3333 6.99955 21.3333H16.9995C19.0222 21.3333 20.6662 19.6893 20.6662 17.6666V9.29997C21.7942 9.13597 22.6662 8.17331 22.6662 6.99998V4.99998C22.6662 3.71332 21.6195 2.66666 20.3329 2.66666ZM14.6662 13.3333H9.33288C8.78088 13.3333 8.33288 12.8853 8.33288 12.3333C8.33288 11.7813 8.78088 11.3333 9.33288 11.3333H14.6662C15.2182 11.3333 15.6662 11.7813 15.6662 12.3333C15.6662 12.8853 15.2182 13.3333 14.6662 13.3333ZM20.6662 6.99998C20.6662 7.18398 20.5169 7.33331 20.3329 7.33331H3.66623C3.48223 7.33331 3.3329 7.18398 3.3329 6.99998V4.99998C3.3329 4.81598 3.48223 4.66665 3.66623 4.66665H20.3329C20.5169 4.66665 20.6662 4.81598 20.6662 4.99998V6.99998Z",
@@ -1994,14 +2191,14 @@ var ArchiveIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
 );
 
 // src/components/Icon/icons/ArrowDownIcon.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var ArrowDownIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var ArrowDownIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -2014,14 +2211,14 @@ var ArrowDownIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
 );
 
 // src/components/Icon/icons/ArrowLeftIcon.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var ArrowLeftIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var ArrowLeftIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -2034,14 +2231,14 @@ var ArrowLeftIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
 );
 
 // src/components/Icon/icons/ArrowRightIcon.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var ArrowRightIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var ArrowRightIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -2054,14 +2251,14 @@ var ArrowRightIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
 );
 
 // src/components/Icon/icons/ArrowUpIcon.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var ArrowUpIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var ArrowUpIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -2074,14 +2271,14 @@ var ArrowUpIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
 );
 
 // src/components/Icon/icons/ArrowUpRightIcon.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var ArrowUpRightIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var ArrowUpRightIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -2094,14 +2291,14 @@ var ArrowUpRightIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
 );
 
 // src/components/Icon/icons/AsteriskIcon.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var AsteriskIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var AsteriskIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -2114,14 +2311,14 @@ var AsteriskIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
 );
 
 // src/components/Icon/icons/AudioDescriptionIcon.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var AudioDescriptionIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var AudioDescriptionIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -2134,14 +2331,14 @@ var AudioDescriptionIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime18.j
 );
 
 // src/components/Icon/icons/AutoScrollIcon.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
-var AutoScrollIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var AutoScrollIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -2154,14 +2351,14 @@ var AutoScrollIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
 );
 
 // src/components/Icon/icons/BackgroundIcon.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
-var BackgroundIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var BackgroundIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -2174,14 +2371,14 @@ var BackgroundIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
 );
 
 // src/components/Icon/icons/BellIcon.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var BellIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var BellIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -2194,14 +2391,14 @@ var BellIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
 );
 
 // src/components/Icon/icons/BoltIcon.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
-var BoltIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var BoltIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       "path",
       {
         d: "M20.2048 10.0546C19.9755 9.61061 19.5208 9.33328 19.0208 9.33328H13.4395L14.1288 2.5013C14.2155 1.89063 13.8768 1.30397 13.3021 1.07463C12.7301 0.8453 12.0781 1.03863 11.7208 1.5413L3.89017 12.5613C3.60084 12.9706 3.56484 13.5013 3.79417 13.9453C4.0235 14.3893 4.47817 14.6666 4.97817 14.6666H10.5595L9.87015 21.4986C9.78349 22.1092 10.1222 22.6959 10.6968 22.9252C10.8582 22.9892 11.0262 23.0212 11.1928 23.0212C11.6142 23.0212 12.0221 22.8199 12.2781 22.4586L20.1101 11.4386C20.3995 11.0293 20.4341 10.4986 20.2048 10.0546Z",
@@ -2212,14 +2409,14 @@ var BoltIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
 );
 
 // src/components/Icon/icons/CalendarIcon.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
-var CalendarIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var CalendarIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -2232,14 +2429,14 @@ var CalendarIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
 );
 
 // src/components/Icon/icons/CallToActionIcon.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
-var CallToActionIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var CallToActionIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -2252,14 +2449,14 @@ var CallToActionIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
 );
 
 // src/components/Icon/icons/CameraIcon.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
-var CameraIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var CameraIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -2272,14 +2469,14 @@ var CameraIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
 );
 
 // src/components/Icon/icons/CameraOffIcon.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var CameraOffIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var CameraOffIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -2292,14 +2489,14 @@ var CameraOffIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
 );
 
 // src/components/Icon/icons/CaretDownIcon.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
-var CaretDownIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var CaretDownIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       "path",
       {
         d: "M11.9999 19.3331C11.7439 19.3331 11.4879 19.2358 11.2932 19.0398L2.95992 10.7065C2.56926 10.3158 2.56926 9.68251 2.95992 9.29184C3.35059 8.90117 3.98392 8.90117 4.37459 9.29184L12.0012 16.9185L19.6279 9.29184C20.0185 8.90117 20.6519 8.90117 21.0425 9.29184C21.4332 9.68251 21.4332 10.3158 21.0425 10.7065L12.7092 19.0398C12.5146 19.2345 12.2586 19.3331 12.0026 19.3331H11.9999Z",
@@ -2310,14 +2507,14 @@ var CaretDownIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
 );
 
 // src/components/Icon/icons/CaretDownStrongIcon.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
-var CaretDownStrongIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var CaretDownStrongIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       "path",
       {
         d: "M18.6985 5.33321H5.30121C4.45054 5.33321 3.66654 5.79588 3.25721 6.54121C2.84788 7.28655 2.87454 8.19721 3.33054 8.91588L10.0292 19.4799C10.4599 20.1585 11.1959 20.5625 11.9999 20.5625C12.8039 20.5625 13.5399 20.1572 13.9705 19.4799L20.6705 8.91455C21.1252 8.19588 21.1532 7.28521 20.7439 6.53988C20.3345 5.79455 19.5505 5.33188 18.6999 5.33188L18.6985 5.33321Z",
@@ -2328,14 +2525,14 @@ var CaretDownStrongIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime28.js
 );
 
 // src/components/Icon/icons/CaretLeftIcon.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
-var CaretLeftIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var CaretLeftIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       "path",
       {
         d: "M15.3332 21.3332C15.0772 21.3332 14.8212 21.2358 14.6265 21.0398L6.29319 12.7065C5.90252 12.3158 5.90252 11.6825 6.29319 11.2918L14.6265 2.95987C15.0172 2.5692 15.6505 2.5692 16.0412 2.95987C16.4318 3.35054 16.4318 3.98387 16.0412 4.37453L8.41451 12.0012L16.0412 19.6278C16.4318 20.0185 16.4318 20.6518 16.0412 21.0425C15.8465 21.2372 15.5905 21.3358 15.3345 21.3358L15.3332 21.3332Z",
@@ -2346,14 +2543,14 @@ var CaretLeftIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
 );
 
 // src/components/Icon/icons/CaretLeftStrongIcon.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
-var CaretLeftStrongIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var CaretLeftStrongIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       "path",
       {
         d: "M4.51848 10.0292L15.0838 3.32921C15.8038 2.87321 16.7145 2.84521 17.4585 3.25587C18.2038 3.66654 18.6665 4.44921 18.6665 5.29987V18.6985C18.6665 19.5492 18.2038 20.3332 17.4585 20.7425C17.1078 20.9359 16.7198 21.0319 16.3331 21.0319C15.8985 21.0319 15.4638 20.9105 15.0825 20.6692L4.51848 13.9705C3.83981 13.5399 3.43581 12.8039 3.43581 11.9999C3.43581 11.1959 3.84115 10.4599 4.51848 10.0292Z",
@@ -2364,14 +2561,14 @@ var CaretLeftStrongIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime30.js
 );
 
 // src/components/Icon/icons/CaretRightIcon.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
-var CaretRightIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var CaretRightIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       "path",
       {
         d: "M17.7064 11.2932L9.37311 2.95987C8.98244 2.5692 8.34911 2.5692 7.95845 2.95987C7.56778 3.35054 7.56778 3.98387 7.95845 4.37453L15.5851 12.0012L7.95845 19.6278C7.56778 20.0185 7.56778 20.6518 7.95845 21.0425C8.15311 21.2372 8.40911 21.3358 8.66511 21.3358C8.92111 21.3358 9.17711 21.2385 9.37178 21.0425L17.7051 12.7092C18.0958 12.3185 18.0958 11.6852 17.7051 11.2945L17.7064 11.2932Z",
@@ -2382,14 +2579,14 @@ var CaretRightIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
 );
 
 // src/components/Icon/icons/CaretRightStrongIcon.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
-var CaretRightStrongIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var CaretRightStrongIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       "path",
       {
         d: "M19.4811 10.0292L8.91576 3.32921C8.19576 2.87321 7.28509 2.84521 6.54109 3.25587C5.79576 3.66654 5.33309 4.44921 5.33309 5.29987V18.6985C5.33309 19.5492 5.79576 20.3332 6.54109 20.7425C6.89176 20.9359 7.27976 21.0319 7.66643 21.0319C8.10109 21.0319 8.53576 20.9105 8.91709 20.6692L19.4811 13.9705C20.1598 13.5399 20.5638 12.8039 20.5638 11.9999C20.5638 11.1959 20.1584 10.4599 19.4811 10.0292Z",
@@ -2400,14 +2597,14 @@ var CaretRightStrongIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime32.j
 );
 
 // src/components/Icon/icons/CaretUpIcon.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
-var CaretUpIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var CaretUpIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       "path",
       {
         d: "M12.7064 6.29318C12.3157 5.90252 11.6824 5.90252 11.2917 6.29318L2.95974 14.6265C2.56907 15.0172 2.56907 15.6505 2.95974 16.0412C3.35041 16.4318 3.98374 16.4318 4.3744 16.0412L12.0011 8.41451L19.6277 16.0412C19.8224 16.2358 20.0784 16.3345 20.3344 16.3345C20.5904 16.3345 20.8464 16.2372 21.041 16.0412C21.4317 15.6505 21.4317 15.0172 21.041 14.6265L12.7077 6.29318H12.7064Z",
@@ -2418,14 +2615,14 @@ var CaretUpIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
 );
 
 // src/components/Icon/icons/CaretUpStrongIcon.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
-var CaretUpStrongIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var CaretUpStrongIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       "path",
       {
         d: "M18.6987 18.6665H5.30133C4.45066 18.6665 3.66666 18.2039 3.25733 17.4585C2.848 16.7132 2.87466 15.8025 3.33066 15.0839L10.0293 4.51988C10.46 3.84121 11.196 3.43721 12 3.43721C12.804 3.43721 13.54 3.84254 13.9707 4.51988L20.6707 15.0852C21.1253 15.8039 21.1533 16.7145 20.744 17.4599C20.3347 18.2052 19.5507 18.6679 18.7 18.6679L18.6987 18.6665Z",
@@ -2436,14 +2633,14 @@ var CaretUpStrongIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)
 );
 
 // src/components/Icon/icons/ChannelIcon.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
-var ChannelIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var ChannelIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -2456,14 +2653,14 @@ var ChannelIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
 );
 
 // src/components/Icon/icons/ChaptersIcon.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
-var ChaptersIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+var import_jsx_runtime38 = require("react/jsx-runtime");
+var ChaptersIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       "path",
       {
         d: "M17.6666 2.66653H6.33325C4.31059 2.66653 2.6666 4.31053 2.6666 6.33319V17.6665C2.6666 19.6892 4.31059 21.3332 6.33325 21.3332H17.6666C19.6892 21.3332 21.3332 19.6892 21.3332 17.6665V6.33319C21.3332 4.31053 19.6892 2.66653 17.6666 2.66653ZM7.66658 17.3332C6.93058 17.3332 6.33325 16.7358 6.33325 15.9998C6.33325 15.2638 6.93058 14.6665 7.66658 14.6665C8.40258 14.6665 8.99991 15.2638 8.99991 15.9998C8.99991 16.7358 8.40258 17.3332 7.66658 17.3332ZM7.66658 13.3332C6.93058 13.3332 6.33325 12.7358 6.33325 11.9998C6.33325 11.2638 6.93058 10.6665 7.66658 10.6665C8.40258 10.6665 8.99991 11.2638 8.99991 11.9998C8.99991 12.7358 8.40258 13.3332 7.66658 13.3332ZM7.66658 9.66652C6.93058 9.66652 6.33325 9.06919 6.33325 8.33319C6.33325 7.59719 6.93058 6.99986 7.66658 6.99986C8.40258 6.99986 8.99991 7.59719 8.99991 8.33319C8.99991 9.06919 8.40258 9.66652 7.66658 9.66652ZM16.6666 16.6665H11.6666C11.1146 16.6665 10.6666 16.2185 10.6666 15.6665C10.6666 15.1145 11.1146 14.6665 11.6666 14.6665H16.6666C17.2186 14.6665 17.6666 15.1145 17.6666 15.6665C17.6666 16.2185 17.2186 16.6665 16.6666 16.6665ZM16.6666 12.9998H11.6666C11.1146 12.9998 10.6666 12.5518 10.6666 11.9998C10.6666 11.4478 11.1146 10.9998 11.6666 10.9998H16.6666C17.2186 10.9998 17.6666 11.4478 17.6666 11.9998C17.6666 12.5518 17.2186 12.9998 16.6666 12.9998ZM16.6666 9.33318H11.6666C11.1146 9.33318 10.6666 8.88519 10.6666 8.33319C10.6666 7.78119 11.1146 7.33319 11.6666 7.33319H16.6666C17.2186 7.33319 17.6666 7.78119 17.6666 8.33319C17.6666 8.88519 17.2186 9.33318 16.6666 9.33318Z",
@@ -2474,14 +2671,14 @@ var ChaptersIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
 );
 
 // src/components/Icon/icons/CheckmarkCircleIcon.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
-var CheckmarkCircleIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var CheckmarkCircleIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       "path",
       {
         d: "M11.9998 1.33322C6.11847 1.33322 1.33315 6.11854 1.33315 11.9999C1.33315 17.8812 6.11847 22.6665 11.9998 22.6665C17.8811 22.6665 22.6664 17.8812 22.6664 11.9999C22.6664 6.11854 17.8811 1.33322 11.9998 1.33322ZM17.1238 8.94387L11.4571 16.2772C11.2758 16.5119 10.9998 16.6545 10.7038 16.6652C10.6905 16.6652 10.6785 16.6652 10.6665 16.6652C10.3838 16.6652 10.1131 16.5452 9.92246 16.3345L6.92246 13.0012C6.55313 12.5905 6.58647 11.9585 6.99713 11.5879C7.40913 11.2199 8.03846 11.2519 8.41046 11.6625L10.6078 14.1052L15.5424 7.71987C15.8798 7.28254 16.5091 7.20254 16.9451 7.53987C17.3824 7.87721 17.4624 8.5052 17.1251 8.94254L17.1238 8.94387Z",
@@ -2492,14 +2689,14 @@ var CheckmarkCircleIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime37.js
 );
 
 // src/components/Icon/icons/CheckmarkCircleOutlineIcon.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
-var CheckmarkCircleOutlineIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var CheckmarkCircleOutlineIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -2512,14 +2709,14 @@ var CheckmarkCircleOutlineIcon = (props) => /* @__PURE__ */ (0, import_jsx_runti
 );
 
 // src/components/Icon/icons/CheckmarkIcon.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
-var CheckmarkIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+var import_jsx_runtime41 = require("react/jsx-runtime");
+var CheckmarkIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       "path",
       {
         d: "M8.99985 19.9998H8.99718C8.69451 19.9998 8.40785 19.8612 8.21985 19.6252L2.88653 12.9585C2.54119 12.5265 2.61053 11.8985 3.04253 11.5532C3.47586 11.2078 4.10386 11.2785 4.44786 11.7092L9.00518 17.4052L19.5558 4.37053C19.9038 3.9412 20.5318 3.8732 20.9625 4.22253C21.3918 4.57053 21.4585 5.19986 21.1105 5.62919L9.77718 19.6292C9.58651 19.8638 9.30118 19.9998 8.99985 19.9998Z",
@@ -2530,14 +2727,14 @@ var CheckmarkIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
 );
 
 // src/components/Icon/icons/CheckmarkThreeQuatersCircleIcon.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
-var CheckmarkThreeQuatersCircleIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+var import_jsx_runtime42 = require("react/jsx-runtime");
+var CheckmarkThreeQuatersCircleIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -2550,14 +2747,14 @@ var CheckmarkThreeQuatersCircleIcon = (props) => /* @__PURE__ */ (0, import_jsx_
 );
 
 // src/components/Icon/icons/CircleSlashedIcon.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
-var CircleSlashedIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+var import_jsx_runtime43 = require("react/jsx-runtime");
+var CircleSlashedIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -2570,14 +2767,14 @@ var CircleSlashedIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)
 );
 
 // src/components/Icon/icons/CloseIcon.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
-var CloseIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+var import_jsx_runtime44 = require("react/jsx-runtime");
+var CloseIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -2590,14 +2787,14 @@ var CloseIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
 );
 
 // src/components/Icon/icons/CloseOctagonIcon.tsx
-var import_jsx_runtime43 = require("react/jsx-runtime");
-var CloseOctagonIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+var import_jsx_runtime45 = require("react/jsx-runtime");
+var CloseOctagonIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -2610,14 +2807,14 @@ var CloseOctagonIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
 );
 
 // src/components/Icon/icons/ClosedCaptionsIcon.tsx
-var import_jsx_runtime44 = require("react/jsx-runtime");
-var ClosedCaptionsIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+var import_jsx_runtime46 = require("react/jsx-runtime");
+var ClosedCaptionsIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
       "path",
       {
         d: "M19 2.66653H4.99999C2.97732 2.66653 1.33333 4.31053 1.33333 6.33319V17.6665C1.33333 19.6892 2.97732 21.3332 4.99999 21.3332H19C21.0226 21.3332 22.6666 19.6892 22.6666 17.6665V6.33319C22.6666 4.31053 21.0226 2.66653 19 2.66653ZM6.33332 11.3332H13C13.552 11.3332 14 11.7812 14 12.3332C14 12.8852 13.552 13.3332 13 13.3332H6.33332C5.78132 13.3332 5.33332 12.8852 5.33332 12.3332C5.33332 11.7812 5.78132 11.3332 6.33332 11.3332ZM7.66665 17.3332H6.33332C5.78132 17.3332 5.33332 16.8852 5.33332 16.3332C5.33332 15.7812 5.78132 15.3332 6.33332 15.3332H7.66665C8.21864 15.3332 8.66664 15.7812 8.66664 16.3332C8.66664 16.8852 8.21864 17.3332 7.66665 17.3332ZM17.6666 17.3332H11C10.448 17.3332 9.99997 16.8852 9.99997 16.3332C9.99997 15.7812 10.448 15.3332 11 15.3332H17.6666C18.2186 15.3332 18.6666 15.7812 18.6666 16.3332C18.6666 16.8852 18.2186 17.3332 17.6666 17.3332ZM17.6666 13.3332H16.3333C15.7813 13.3332 15.3333 12.8852 15.3333 12.3332C15.3333 11.7812 15.7813 11.3332 16.3333 11.3332H17.6666C18.2186 11.3332 18.6666 11.7812 18.6666 12.3332C18.6666 12.8852 18.2186 13.3332 17.6666 13.3332Z",
@@ -2628,14 +2825,14 @@ var ClosedCaptionsIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx
 );
 
 // src/components/Icon/icons/CollapseDiagonalIcon.tsx
-var import_jsx_runtime45 = require("react/jsx-runtime");
-var CollapseDiagonalIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+var import_jsx_runtime47 = require("react/jsx-runtime");
+var CollapseDiagonalIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -2648,14 +2845,14 @@ var CollapseDiagonalIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime45.j
 );
 
 // src/components/Icon/icons/CommentsIcon.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
-var CommentsIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+var import_jsx_runtime48 = require("react/jsx-runtime");
+var CommentsIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
       "path",
       {
         d: "M11.9999 1.33322C6.11859 1.33322 1.33327 6.11854 1.33327 11.9999C1.33327 13.8612 1.82793 15.7012 2.74926 17.2945C3.0666 17.8892 2.6226 19.9638 1.6266 20.9598C1.34793 21.2385 1.2586 21.6558 1.39993 22.0238C1.54127 22.3918 1.8866 22.6438 2.27993 22.6652C2.38526 22.6705 2.49326 22.6732 2.60126 22.6732C4.12793 22.6732 5.98126 22.1305 7.18792 21.5118C8.08792 21.9692 9.04125 22.2945 10.0292 22.4825C10.6746 22.6052 11.3386 22.6665 11.9999 22.6665C17.8812 22.6665 22.6665 17.8812 22.6665 11.9999C22.6665 6.11854 17.8812 1.33322 11.9999 1.33322ZM11.3332 14.3332C11.3332 14.8852 10.8852 15.3332 10.3332 15.3332H7.66658C7.11459 15.3332 6.66659 14.8852 6.66659 14.3332V12.3332C6.66659 9.7292 7.57859 8.16254 9.53591 7.40121C10.0506 7.20121 10.6292 7.45721 10.8306 7.97054C11.0306 8.4852 10.7746 9.0652 10.2612 9.2652C9.59058 9.5252 8.93325 9.91187 8.73058 11.3332H10.3332C10.8852 11.3332 11.3332 11.7812 11.3332 12.3332V14.3332ZM17.3332 14.3332C17.3332 14.8852 16.8852 15.3332 16.3332 15.3332H13.6666C13.1146 15.3332 12.6666 14.8852 12.6666 14.3332V12.3332C12.6666 9.7292 13.5786 8.16254 15.5359 7.40121C16.0506 7.20121 16.6306 7.45721 16.8306 7.97054C17.0306 8.4852 16.7746 9.0652 16.2612 9.2652C15.5906 9.5252 14.9332 9.91187 14.7306 11.3332H16.3332C16.8852 11.3332 17.3332 11.7812 17.3332 12.3332V14.3332Z",
@@ -2666,14 +2863,14 @@ var CommentsIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
 );
 
 // src/components/Icon/icons/CompanyIcon.tsx
-var import_jsx_runtime47 = require("react/jsx-runtime");
-var CompanyIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+var import_jsx_runtime49 = require("react/jsx-runtime");
+var CompanyIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -2686,14 +2883,14 @@ var CompanyIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
 );
 
 // src/components/Icon/icons/CompareIcon.tsx
-var import_jsx_runtime48 = require("react/jsx-runtime");
-var CompareIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+var import_jsx_runtime50 = require("react/jsx-runtime");
+var CompareIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       "path",
       {
         d: "M16.9878 7.01321C15.9904 3.73055 12.9384 1.33322 9.33313 1.33322C4.92114 1.33322 1.33315 4.92121 1.33315 9.3332C1.33315 12.9372 3.72914 15.9905 7.0118 16.9865C8.00913 20.2692 11.0611 22.6665 14.6664 22.6665C19.0784 22.6665 22.6664 19.0785 22.6664 14.6665C22.6664 11.0625 20.2704 8.00921 16.9878 7.01321ZM3.33314 9.3332C3.33314 6.02521 6.02513 3.33322 9.33313 3.33322C11.6798 3.33322 13.6944 4.69988 14.6798 6.66654C14.6758 6.66654 14.6704 6.66654 14.6664 6.66654C10.2545 6.66654 6.66647 10.2545 6.66647 14.6665C6.66647 14.6705 6.66647 14.6759 6.66647 14.6799C4.69847 13.6945 3.33314 11.6799 3.33314 9.3332ZM14.6664 20.6665C12.3198 20.6665 10.3051 19.2998 9.31979 17.3332C9.32379 17.3332 9.32913 17.3332 9.33313 17.3332C13.7451 17.3332 17.3331 13.7452 17.3331 9.3332C17.3331 9.3292 17.3331 9.32387 17.3331 9.31987C19.3011 10.3052 20.6664 12.3199 20.6664 14.6665C20.6664 17.9745 17.9744 20.6665 14.6664 20.6665Z",
@@ -2704,14 +2901,14 @@ var CompareIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
 );
 
 // src/components/Icon/icons/ContentLibraryIcon.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
-var ContentLibraryIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+var import_jsx_runtime51 = require("react/jsx-runtime");
+var ContentLibraryIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -2724,14 +2921,14 @@ var ContentLibraryIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx
 );
 
 // src/components/Icon/icons/ControlsIcon.tsx
-var import_jsx_runtime50 = require("react/jsx-runtime");
-var ControlsIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+var import_jsx_runtime52 = require("react/jsx-runtime");
+var ControlsIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -2744,14 +2941,14 @@ var ControlsIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
 );
 
 // src/components/Icon/icons/CursorClickIcon.tsx
-var import_jsx_runtime51 = require("react/jsx-runtime");
-var CursorClickIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+var import_jsx_runtime53 = require("react/jsx-runtime");
+var CursorClickIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -2764,14 +2961,14 @@ var CursorClickIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
 );
 
 // src/components/Icon/icons/DeleteIcon.tsx
-var import_jsx_runtime52 = require("react/jsx-runtime");
-var DeleteIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+var import_jsx_runtime54 = require("react/jsx-runtime");
+var DeleteIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -2784,14 +2981,14 @@ var DeleteIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
 );
 
 // src/components/Icon/icons/DesktopIcon.tsx
-var import_jsx_runtime53 = require("react/jsx-runtime");
-var DesktopIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+var import_jsx_runtime55 = require("react/jsx-runtime");
+var DesktopIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -2804,14 +3001,14 @@ var DesktopIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
 );
 
 // src/components/Icon/icons/DotsHorizontalIcon.tsx
-var import_jsx_runtime54 = require("react/jsx-runtime");
-var DotsHorizontalIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+var import_jsx_runtime56 = require("react/jsx-runtime");
+var DotsHorizontalIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -2824,14 +3021,14 @@ var DotsHorizontalIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx
 );
 
 // src/components/Icon/icons/DownloadIcon.tsx
-var import_jsx_runtime55 = require("react/jsx-runtime");
-var DownloadIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+var import_jsx_runtime57 = require("react/jsx-runtime");
+var DownloadIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -2844,14 +3041,14 @@ var DownloadIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
 );
 
 // src/components/Icon/icons/EditTranscriptIcon.tsx
-var import_jsx_runtime56 = require("react/jsx-runtime");
-var EditTranscriptIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+var import_jsx_runtime58 = require("react/jsx-runtime");
+var EditTranscriptIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -2864,14 +3061,14 @@ var EditTranscriptIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx
 );
 
 // src/components/Icon/icons/EllipsesVerticalIcon.tsx
-var import_jsx_runtime57 = require("react/jsx-runtime");
-var EllipsesVerticalIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+var import_jsx_runtime59 = require("react/jsx-runtime");
+var EllipsesVerticalIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -2884,14 +3081,14 @@ var EllipsesVerticalIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime57.j
 );
 
 // src/components/Icon/icons/EmbedIcon.tsx
-var import_jsx_runtime58 = require("react/jsx-runtime");
-var EmbedIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+var import_jsx_runtime60 = require("react/jsx-runtime");
+var EmbedIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -2904,14 +3101,14 @@ var EmbedIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
 );
 
 // src/components/Icon/icons/EnvelopeIcon.tsx
-var import_jsx_runtime59 = require("react/jsx-runtime");
-var EnvelopeIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+var import_jsx_runtime61 = require("react/jsx-runtime");
+var EnvelopeIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -2924,14 +3121,14 @@ var EnvelopeIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
 );
 
 // src/components/Icon/icons/ErrorIcon.tsx
-var import_jsx_runtime60 = require("react/jsx-runtime");
-var ErrorIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+var import_jsx_runtime62 = require("react/jsx-runtime");
+var ErrorIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
       "path",
       {
         d: "M21.9156 16.6878L14.6823 4.15987C14.1223 3.19054 13.1196 2.61188 11.9996 2.61188C10.8796 2.61188 9.87694 3.19054 9.31695 4.15987L2.08363 16.6878C1.52363 17.6572 1.52363 18.8145 2.08363 19.7838C2.64363 20.7545 3.64629 21.3332 4.76629 21.3332H19.2329C20.3529 21.3332 21.3556 20.7545 21.9156 19.7838C22.4756 18.8145 22.4756 17.6572 21.9156 16.6878ZM10.9996 8.66653C10.9996 8.11453 11.4476 7.66653 11.9996 7.66653C12.5516 7.66653 12.9996 8.11453 12.9996 8.66653V13.3332C12.9996 13.8852 12.5516 14.3332 11.9996 14.3332C11.4476 14.3332 10.9996 13.8852 10.9996 13.3332V8.66653ZM11.9996 18.0918C11.2636 18.0918 10.6663 17.4932 10.6663 16.7585C10.6663 16.0238 11.2636 15.4252 11.9996 15.4252C12.7356 15.4252 13.3329 16.0238 13.3329 16.7585C13.3329 17.4932 12.7356 18.0918 11.9996 18.0918Z",
@@ -2942,14 +3139,14 @@ var ErrorIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
 );
 
 // src/components/Icon/icons/ExpandDiagonalIcon.tsx
-var import_jsx_runtime61 = require("react/jsx-runtime");
-var ExpandDiagonalIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+var import_jsx_runtime63 = require("react/jsx-runtime");
+var ExpandDiagonalIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -2962,14 +3159,14 @@ var ExpandDiagonalIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx
 );
 
 // src/components/Icon/icons/ExpandIcon.tsx
-var import_jsx_runtime62 = require("react/jsx-runtime");
-var ExpandIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+var import_jsx_runtime64 = require("react/jsx-runtime");
+var ExpandIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -2982,14 +3179,14 @@ var ExpandIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
 );
 
 // src/components/Icon/icons/FavoriteIcon.tsx
-var import_jsx_runtime63 = require("react/jsx-runtime");
-var FavoriteIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+var import_jsx_runtime65 = require("react/jsx-runtime");
+var FavoriteIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
       "path",
       {
         d: "M22.6168 9.04785C22.4995 8.68652 22.1861 8.42252 21.8101 8.36786L15.6501 7.47319L12.8955 1.89054C12.5595 1.20787 11.4382 1.20787 11.1022 1.89054L8.34749 7.47186L2.18751 8.36652C1.81151 8.42119 1.49818 8.68519 1.38084 9.04652C1.26351 9.40785 1.36084 9.80652 1.63418 10.0719L6.0915 14.4158L5.03817 20.5505C4.97417 20.9265 5.1275 21.3052 5.4355 21.5292C5.7435 21.7518 6.15283 21.7812 6.48883 21.6052L11.9981 18.7078L17.5075 21.6052C17.6541 21.6825 17.8128 21.7198 17.9728 21.7198C18.1795 21.7198 18.3861 21.6558 18.5608 21.5292C18.8688 21.3052 19.0235 20.9265 18.9581 20.5505L17.9048 14.4158L22.3621 10.0719C22.6355 9.80652 22.7328 9.40785 22.6155 9.04652L22.6168 9.04785Z",
@@ -3000,14 +3197,14 @@ var FavoriteIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
 );
 
 // src/components/Icon/icons/FavoriteOutlineIcon.tsx
-var import_jsx_runtime64 = require("react/jsx-runtime");
-var FavoriteOutlineIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+var import_jsx_runtime66 = require("react/jsx-runtime");
+var FavoriteOutlineIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
       "path",
       {
         d: "M12 2.33321L14.9866 8.38519L21.6666 9.35586L16.8333 14.0678L17.9746 20.7198L12 17.5798L6.02532 20.7198L7.16665 14.0678L2.33333 9.35586L9.01331 8.38519L12 2.33321Z",
@@ -3021,14 +3218,14 @@ var FavoriteOutlineIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime64.js
 );
 
 // src/components/Icon/icons/FileTreeIcon.tsx
-var import_jsx_runtime65 = require("react/jsx-runtime");
-var FileTreeIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+var import_jsx_runtime67 = require("react/jsx-runtime");
+var FileTreeIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -3041,14 +3238,14 @@ var FileTreeIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
 );
 
 // src/components/Icon/icons/FilterIcon.tsx
-var import_jsx_runtime66 = require("react/jsx-runtime");
-var FilterIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+var import_jsx_runtime68 = require("react/jsx-runtime");
+var FilterIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -3061,14 +3258,14 @@ var FilterIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
 );
 
 // src/components/Icon/icons/FontsIcon.tsx
-var import_jsx_runtime67 = require("react/jsx-runtime");
-var FontsIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+var import_jsx_runtime69 = require("react/jsx-runtime");
+var FontsIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -3081,14 +3278,14 @@ var FontsIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
 );
 
 // src/components/Icon/icons/FullScreenIcon.tsx
-var import_jsx_runtime68 = require("react/jsx-runtime");
-var FullScreenIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+var import_jsx_runtime70 = require("react/jsx-runtime");
+var FullScreenIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -3101,14 +3298,14 @@ var FullScreenIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
 );
 
 // src/components/Icon/icons/GearIcon.tsx
-var import_jsx_runtime69 = require("react/jsx-runtime");
-var GearIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+var import_jsx_runtime71 = require("react/jsx-runtime");
+var GearIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
       "path",
       {
         d: "M21.253 9.92118L19.837 9.70384C19.6717 9.13851 19.4477 8.59585 19.1637 8.07985L20.0117 6.92385C20.5024 6.25585 20.433 5.34385 19.8464 4.75985L19.2384 4.15186C18.6544 3.56652 17.7437 3.49719 17.073 3.98652L15.917 4.83585C15.401 4.55186 14.8584 4.32786 14.2944 4.16252L14.0757 2.74519C13.9491 1.92653 13.2571 1.33186 12.4291 1.33186H11.5691C10.7411 1.33186 10.0477 1.92653 9.9224 2.74653L9.70506 4.16252C9.13973 4.32786 8.59707 4.55186 8.08107 4.83585L6.92507 3.98786C6.25574 3.49852 5.34507 3.56786 4.76108 4.15452L4.15308 4.76252C3.56774 5.34785 3.49841 6.25852 3.98774 6.92785L4.83708 8.08385C4.55441 8.59985 4.32908 9.14251 4.16374 9.70651L2.74641 9.92517C1.92775 10.0518 1.33308 10.7438 1.33308 11.5718V12.4318C1.33308 13.2598 1.92775 13.9532 2.74775 14.0785L4.16374 14.2958C4.32908 14.8612 4.55308 15.4038 4.83708 15.9198L3.98908 17.0758C3.49975 17.7438 3.56908 18.6545 4.15574 19.2398L4.76374 19.8478C5.34907 20.4345 6.26107 20.5038 6.92907 20.0132L8.08507 19.1638C8.60107 19.4465 9.14373 19.6718 9.70773 19.8372L9.9264 21.2545C10.0531 22.0731 10.7451 22.6678 11.5731 22.6678H12.4331C13.2611 22.6678 13.9544 22.0731 14.0797 21.2531L14.2971 19.8372C14.8624 19.6718 15.405 19.4478 15.921 19.1638L17.077 20.0118C17.745 20.5025 18.6557 20.4318 19.241 19.8465L19.849 19.2385C20.4344 18.6532 20.5037 17.7425 20.0144 17.0732L19.165 15.9172C19.449 15.4012 19.673 14.8585 19.8384 14.2945L21.2557 14.0758C22.0744 13.9492 22.669 13.2572 22.669 12.4292V11.5692C22.669 10.7412 22.0744 10.0478 21.2557 9.92251L21.253 9.92118ZM11.9997 14.9998C10.3424 14.9998 8.99973 13.6572 8.99973 11.9998C8.99973 10.3425 10.3424 8.99984 11.9997 8.99984C13.6571 8.99984 14.9997 10.3425 14.9997 11.9998C14.9997 13.6572 13.6571 14.9998 11.9997 14.9998Z",
@@ -3119,14 +3316,14 @@ var GearIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
 );
 
 // src/components/Icon/icons/GettingStartedIcon.tsx
-var import_jsx_runtime70 = require("react/jsx-runtime");
-var GettingStartedIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+var import_jsx_runtime72 = require("react/jsx-runtime");
+var GettingStartedIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -3139,14 +3336,14 @@ var GettingStartedIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime70.jsx
 );
 
 // src/components/Icon/icons/GridIcon.tsx
-var import_jsx_runtime71 = require("react/jsx-runtime");
-var GridIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+var import_jsx_runtime73 = require("react/jsx-runtime");
+var GridIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -3159,14 +3356,14 @@ var GridIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
 );
 
 // src/components/Icon/icons/GripDotsVerticalIcon.tsx
-var import_jsx_runtime72 = require("react/jsx-runtime");
-var GripDotsVerticalIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+var import_jsx_runtime74 = require("react/jsx-runtime");
+var GripDotsVerticalIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -3179,14 +3376,14 @@ var GripDotsVerticalIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime72.j
 );
 
 // src/components/Icon/icons/HelpCenterIcon.tsx
-var import_jsx_runtime73 = require("react/jsx-runtime");
-var HelpCenterIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+var import_jsx_runtime75 = require("react/jsx-runtime");
+var HelpCenterIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -3199,14 +3396,14 @@ var HelpCenterIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
 );
 
 // src/components/Icon/icons/HideIcon.tsx
-var import_jsx_runtime74 = require("react/jsx-runtime");
-var HideIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+var import_jsx_runtime76 = require("react/jsx-runtime");
+var HideIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -3219,14 +3416,14 @@ var HideIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
 );
 
 // src/components/Icon/icons/HomeIcon.tsx
-var import_jsx_runtime75 = require("react/jsx-runtime");
-var HomeIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+var import_jsx_runtime77 = require("react/jsx-runtime");
+var HomeIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
       "path",
       {
         d: "M20.4119 7.47053L13.4119 2.15054C12.5799 1.51721 11.4186 1.51854 10.5879 2.15054L3.58793 7.47053C3.01059 7.90919 2.6666 8.60386 2.6666 9.32786V18.9998C2.6666 21.0225 4.31059 22.6665 6.33325 22.6665H17.6666C19.6892 22.6665 21.3332 21.0225 21.3332 18.9998V9.32786C21.3332 8.60386 20.9892 7.91053 20.4119 7.47053Z",
@@ -3237,14 +3434,14 @@ var HomeIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
 );
 
 // src/components/Icon/icons/HourglassIcon.tsx
-var import_jsx_runtime76 = require("react/jsx-runtime");
-var HourglassIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+var import_jsx_runtime78 = require("react/jsx-runtime");
+var HourglassIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -3257,14 +3454,14 @@ var HourglassIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
 );
 
 // src/components/Icon/icons/InfoIcon.tsx
-var import_jsx_runtime77 = require("react/jsx-runtime");
-var InfoIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+var import_jsx_runtime79 = require("react/jsx-runtime");
+var InfoIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
       "path",
       {
         d: "M11.9998 1.33321C6.11847 1.33321 1.33315 6.11853 1.33315 11.9998C1.33315 17.8812 6.11847 22.6665 11.9998 22.6665C17.8811 22.6665 22.6664 17.8812 22.6664 11.9998C22.6664 6.11853 17.8811 1.33321 11.9998 1.33321ZM12.9998 17.0918C12.9998 17.6438 12.5518 18.0918 11.9998 18.0918C11.4478 18.0918 10.9998 17.6438 10.9998 17.0918V10.9998C10.9998 10.4479 11.4478 9.99985 11.9998 9.99985C12.5518 9.99985 12.9998 10.4479 12.9998 10.9998V17.0918ZM11.9998 8.99985C11.2638 8.99985 10.6665 8.40119 10.6665 7.66652C10.6665 6.93186 11.2638 6.33319 11.9998 6.33319C12.7358 6.33319 13.3331 6.93186 13.3331 7.66652C13.3331 8.40119 12.7358 8.99985 11.9998 8.99985Z",
@@ -3275,14 +3472,14 @@ var InfoIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
 );
 
 // src/components/Icon/icons/IntegrationsIcon.tsx
-var import_jsx_runtime78 = require("react/jsx-runtime");
-var IntegrationsIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+var import_jsx_runtime80 = require("react/jsx-runtime");
+var IntegrationsIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -3295,14 +3492,14 @@ var IntegrationsIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
 );
 
 // src/components/Icon/icons/LeaveIcon.tsx
-var import_jsx_runtime79 = require("react/jsx-runtime");
-var LeaveIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+var import_jsx_runtime81 = require("react/jsx-runtime");
+var LeaveIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -3315,14 +3512,14 @@ var LeaveIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
 );
 
 // src/components/Icon/icons/LinkIcon.tsx
-var import_jsx_runtime80 = require("react/jsx-runtime");
-var LinkIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+var import_jsx_runtime82 = require("react/jsx-runtime");
+var LinkIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -3335,14 +3532,14 @@ var LinkIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
 );
 
 // src/components/Icon/icons/ListIcon.tsx
-var import_jsx_runtime81 = require("react/jsx-runtime");
-var ListIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+var import_jsx_runtime83 = require("react/jsx-runtime");
+var ListIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -3355,14 +3552,14 @@ var ListIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
 );
 
 // src/components/Icon/icons/LiveIcon.tsx
-var import_jsx_runtime82 = require("react/jsx-runtime");
-var LiveIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+var import_jsx_runtime84 = require("react/jsx-runtime");
+var LiveIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -3375,14 +3572,14 @@ var LiveIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
 );
 
 // src/components/Icon/icons/LockIcon.tsx
-var import_jsx_runtime83 = require("react/jsx-runtime");
-var LockIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+var import_jsx_runtime85 = require("react/jsx-runtime");
+var LockIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -3395,14 +3592,14 @@ var LockIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
 );
 
 // src/components/Icon/icons/LogoutIcon.tsx
-var import_jsx_runtime84 = require("react/jsx-runtime");
-var LogoutIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+var import_jsx_runtime86 = require("react/jsx-runtime");
+var LogoutIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -3415,14 +3612,14 @@ var LogoutIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
 );
 
 // src/components/Icon/icons/MaximizeIcon.tsx
-var import_jsx_runtime85 = require("react/jsx-runtime");
-var MaximizeIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+var import_jsx_runtime87 = require("react/jsx-runtime");
+var MaximizeIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -3435,14 +3632,14 @@ var MaximizeIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
 );
 
 // src/components/Icon/icons/MediaIcon.tsx
-var import_jsx_runtime86 = require("react/jsx-runtime");
-var MediaIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+var import_jsx_runtime88 = require("react/jsx-runtime");
+var MediaIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
       "path",
       {
         d: "M17.6666 2.66653H6.33325C4.31059 2.66653 2.6666 4.31053 2.6666 6.33319V17.6665C2.6666 19.6892 4.31059 21.3332 6.33325 21.3332H17.6666C19.6892 21.3332 21.3332 19.6892 21.3332 17.6665V6.33319C21.3332 4.31053 19.6892 2.66653 17.6666 2.66653ZM15.0372 12.8638L10.1706 15.7025C10.0132 15.7945 9.83991 15.8412 9.66658 15.8412C9.49591 15.8412 9.32525 15.7958 9.16791 15.7065C8.85325 15.5265 8.66658 15.2025 8.66658 14.8398V9.16118C8.66658 8.79852 8.85458 8.47452 9.16791 8.29452C9.48258 8.11319 9.85724 8.11585 10.1692 8.29719L15.0359 11.1358C15.3466 11.3172 15.5332 11.6398 15.5332 11.9998C15.5332 12.3598 15.3492 12.6825 15.0372 12.8638Z",
@@ -3453,14 +3650,14 @@ var MediaIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
 );
 
 // src/components/Icon/icons/MenuIcon.tsx
-var import_jsx_runtime87 = require("react/jsx-runtime");
-var MenuIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+var import_jsx_runtime89 = require("react/jsx-runtime");
+var MenuIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -3473,14 +3670,14 @@ var MenuIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
 );
 
 // src/components/Icon/icons/MicIcon.tsx
-var import_jsx_runtime88 = require("react/jsx-runtime");
-var MicIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+var import_jsx_runtime90 = require("react/jsx-runtime");
+var MicIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -3493,14 +3690,14 @@ var MicIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
 );
 
 // src/components/Icon/icons/MicOffIcon.tsx
-var import_jsx_runtime89 = require("react/jsx-runtime");
-var MicOffIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+var import_jsx_runtime91 = require("react/jsx-runtime");
+var MicOffIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -3513,14 +3710,14 @@ var MicOffIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
 );
 
 // src/components/Icon/icons/MinimizeIcon.tsx
-var import_jsx_runtime90 = require("react/jsx-runtime");
-var MinimizeIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+var import_jsx_runtime92 = require("react/jsx-runtime");
+var MinimizeIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -3533,14 +3730,14 @@ var MinimizeIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
 );
 
 // src/components/Icon/icons/MinusCircleIcon.tsx
-var import_jsx_runtime91 = require("react/jsx-runtime");
-var MinusCircleIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+var import_jsx_runtime93 = require("react/jsx-runtime");
+var MinusCircleIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
       "path",
       {
         d: "M11.9998 1.33321C6.11842 1.33321 1.33309 6.11855 1.33309 11.9999C1.33309 17.8812 6.11842 22.6665 11.9998 22.6665C17.8811 22.6665 22.6664 17.8812 22.6664 11.9999C22.6664 6.11855 17.8811 1.33321 11.9998 1.33321ZM16.3331 12.9999H7.66642C7.11442 12.9999 6.66642 12.5519 6.66642 11.9999C6.66642 11.4479 7.11442 10.9999 7.66642 10.9999H16.3331C16.8851 10.9999 17.3331 11.4479 17.3331 11.9999C17.3331 12.5519 16.8851 12.9999 16.3331 12.9999Z",
@@ -3551,14 +3748,14 @@ var MinusCircleIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
 );
 
 // src/components/Icon/icons/MobileIcon.tsx
-var import_jsx_runtime92 = require("react/jsx-runtime");
-var MobileIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+var import_jsx_runtime94 = require("react/jsx-runtime");
+var MobileIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -3571,14 +3768,14 @@ var MobileIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
 );
 
 // src/components/Icon/icons/MoreOptionsIcon.tsx
-var import_jsx_runtime93 = require("react/jsx-runtime");
-var MoreOptionsIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+var import_jsx_runtime95 = require("react/jsx-runtime");
+var MoreOptionsIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -3591,14 +3788,14 @@ var MoreOptionsIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
 );
 
 // src/components/Icon/icons/MoveLeftIcon.tsx
-var import_jsx_runtime94 = require("react/jsx-runtime");
-var MoveLeftIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+var import_jsx_runtime96 = require("react/jsx-runtime");
+var MoveLeftIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -3611,14 +3808,14 @@ var MoveLeftIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
 );
 
 // src/components/Icon/icons/MoveRightIcon.tsx
-var import_jsx_runtime95 = require("react/jsx-runtime");
-var MoveRightIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+var import_jsx_runtime97 = require("react/jsx-runtime");
+var MoveRightIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -3631,14 +3828,14 @@ var MoveRightIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
 );
 
 // src/components/Icon/icons/MusicIcon.tsx
-var import_jsx_runtime96 = require("react/jsx-runtime");
-var MusicIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+var import_jsx_runtime98 = require("react/jsx-runtime");
+var MusicIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
       "path",
       {
         d: "M17.9493 1.93853L8.61598 3.49453C7.48665 3.68253 6.66665 4.65053 6.66665 5.79586V15.0852C6.16398 14.8265 5.60265 14.6665 4.99999 14.6665C2.97732 14.6665 1.33333 16.3105 1.33333 18.3332C1.33333 20.3558 2.97732 21.9998 4.99999 21.9998C7.02265 21.9998 8.66664 20.3558 8.66664 18.3332V9.84651L18.6666 8.17985V13.0852C18.164 12.8265 17.6026 12.6665 17 12.6665C14.9773 12.6665 13.3333 14.3105 13.3333 16.3332C13.3333 18.3558 14.9773 19.9998 17 19.9998C19.0226 19.9998 20.6666 18.3558 20.6666 16.3332V4.2412C20.6666 3.5532 20.3653 2.9052 19.8413 2.4612C19.3159 2.0172 18.6306 1.82787 17.9493 1.93987V1.93853Z",
@@ -3649,14 +3846,14 @@ var MusicIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
 );
 
 // src/components/Icon/icons/OpenNewIcon.tsx
-var import_jsx_runtime97 = require("react/jsx-runtime");
-var OpenNewIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+var import_jsx_runtime99 = require("react/jsx-runtime");
+var OpenNewIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -3669,14 +3866,14 @@ var OpenNewIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
 );
 
 // src/components/Icon/icons/OverviewIcon.tsx
-var import_jsx_runtime98 = require("react/jsx-runtime");
-var OverviewIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+var import_jsx_runtime100 = require("react/jsx-runtime");
+var OverviewIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -3689,14 +3886,14 @@ var OverviewIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
 );
 
 // src/components/Icon/icons/PageIcon.tsx
-var import_jsx_runtime99 = require("react/jsx-runtime");
-var PageIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
+var import_jsx_runtime101 = require("react/jsx-runtime");
+var PageIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -3709,14 +3906,14 @@ var PageIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
 );
 
 // src/components/Icon/icons/PanelLeftIcon.tsx
-var import_jsx_runtime100 = require("react/jsx-runtime");
-var PanelLeftIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
+var import_jsx_runtime102 = require("react/jsx-runtime");
+var PanelLeftIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
       "path",
       {
         d: "M18.9997 2.66653H4.99974C2.97708 2.66653 1.33309 4.31053 1.33309 6.33319V17.6665C1.33309 19.6892 2.97708 21.3332 4.99974 21.3332H18.9997C21.0224 21.3332 22.6664 19.6892 22.6664 17.6665V6.33319C22.6664 4.31053 21.0224 2.66653 18.9997 2.66653ZM7.33307 16.3332C7.33307 16.8852 6.88507 17.3332 6.33307 17.3332C5.78108 17.3332 5.33308 16.8852 5.33308 16.3332V7.66652C5.33308 7.11452 5.78108 6.66652 6.33307 6.66652C6.88507 6.66652 7.33307 7.11452 7.33307 7.66652V16.3332ZM17.6664 12.9998H12.0811L13.3744 14.2932C13.7651 14.6838 13.7651 15.3172 13.3744 15.7078C13.1797 15.9025 12.9237 16.0012 12.6677 16.0012C12.4117 16.0012 12.1557 15.9038 11.9611 15.7078L8.96107 12.7078C8.5704 12.3172 8.5704 11.6838 8.96107 11.2932L11.9611 8.29319C12.3517 7.90252 12.9851 7.90252 13.3757 8.29319C13.7664 8.68385 13.7664 9.31718 13.3757 9.70785L12.0824 11.0012H17.6677C18.2197 11.0012 18.6677 11.4492 18.6677 12.0012C18.6677 12.5532 18.2197 13.0012 17.6677 13.0012L17.6664 12.9998Z",
@@ -3727,14 +3924,14 @@ var PanelLeftIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
 );
 
 // src/components/Icon/icons/PanelRightIcon.tsx
-var import_jsx_runtime101 = require("react/jsx-runtime");
-var PanelRightIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
+var import_jsx_runtime103 = require("react/jsx-runtime");
+var PanelRightIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
       "path",
       {
         d: "M18.9996 2.66653H4.99968C2.97702 2.66653 1.33302 4.31053 1.33302 6.33319V17.6665C1.33302 19.6892 2.97702 21.3332 4.99968 21.3332H18.9996C21.0223 21.3332 22.6663 19.6892 22.6663 17.6665V6.33319C22.6663 4.31053 21.0223 2.66653 18.9996 2.66653ZM7.33301 16.3332C7.33301 16.8852 6.88501 17.3332 6.33301 17.3332C5.78101 17.3332 5.33301 16.8852 5.33301 16.3332V7.66652C5.33301 7.11452 5.78101 6.66652 6.33301 6.66652C6.88501 6.66652 7.33301 7.11452 7.33301 7.66652V16.3332ZM18.373 12.7065L15.373 15.7065C15.1783 15.9012 14.9223 15.9998 14.6663 15.9998C14.4103 15.9998 14.1543 15.9025 13.9597 15.7065C13.569 15.3158 13.569 14.6825 13.9597 14.2918L15.253 12.9985H9.66634C9.11434 12.9985 8.66634 12.5505 8.66634 11.9985C8.66634 11.4465 9.11434 10.9985 9.66634 10.9985H15.2517L13.9583 9.70518C13.5677 9.31452 13.5677 8.68119 13.9583 8.29052C14.349 7.89985 14.9823 7.89985 15.373 8.29052L18.373 11.2905C18.7636 11.6812 18.7636 12.3158 18.373 12.7065Z",
@@ -3745,14 +3942,14 @@ var PanelRightIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
 );
 
 // src/components/Icon/icons/PanelUpIcon.tsx
-var import_jsx_runtime102 = require("react/jsx-runtime");
-var PanelUpIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
+var import_jsx_runtime104 = require("react/jsx-runtime");
+var PanelUpIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
       "path",
       {
         d: "M18.9996 2.66653H4.99962C2.97696 2.66653 1.33296 4.31053 1.33296 6.33319V17.6665C1.33296 19.6892 2.97696 21.3332 4.99962 21.3332H18.9996C21.0222 21.3332 22.6662 19.6892 22.6662 17.6665V6.33319C22.6662 4.31053 21.0222 2.66653 18.9996 2.66653ZM15.5343 14.8678C15.3396 15.0625 15.0836 15.1612 14.8276 15.1612C14.5716 15.1612 14.3156 15.0638 14.1209 14.8678L12.9996 13.7465V16.6652C12.9996 17.2172 12.5516 17.6652 11.9996 17.6652C11.4476 17.6652 10.9996 17.2172 10.9996 16.6652V13.7465L9.87827 14.8678C9.48761 15.2585 8.85428 15.2585 8.46361 14.8678C8.07295 14.4772 8.07295 13.8438 8.46361 13.4532L11.2916 10.6252C11.6823 10.2345 12.3156 10.2345 12.7063 10.6252L15.5343 13.4532C15.9249 13.8438 15.9249 14.4772 15.5343 14.8678ZM17.6663 8.66652H6.33295C5.78095 8.66652 5.33295 8.21852 5.33295 7.66652C5.33295 7.11452 5.78095 6.66652 6.33295 6.66652H17.6663C18.2183 6.66652 18.6663 7.11452 18.6663 7.66652C18.6663 8.21852 18.2183 8.66652 17.6663 8.66652Z",
@@ -3763,14 +3960,14 @@ var PanelUpIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
 );
 
 // src/components/Icon/icons/PasswordIcon.tsx
-var import_jsx_runtime103 = require("react/jsx-runtime");
-var PasswordIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
+var import_jsx_runtime105 = require("react/jsx-runtime");
+var PasswordIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -3783,14 +3980,14 @@ var PasswordIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
 );
 
 // src/components/Icon/icons/PencilIcon.tsx
-var import_jsx_runtime104 = require("react/jsx-runtime");
-var PencilIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
+var import_jsx_runtime106 = require("react/jsx-runtime");
+var PencilIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
       "path",
       {
         d: "M15.2186 3.7972L4.80665 14.2092C3.65599 15.3612 2.93866 18.7505 2.68266 20.1545C2.62399 20.4772 2.72799 20.8092 2.95999 21.0412C3.14932 21.2305 3.40399 21.3345 3.66666 21.3345C3.72532 21.3345 3.78532 21.3292 3.84532 21.3185C5.24932 21.0638 8.63864 20.3465 9.79064 19.1945L20.2026 8.78252C21.5759 7.40786 21.5759 5.1732 20.2026 3.79854C18.872 2.46787 16.5493 2.46787 15.2186 3.7972Z",
@@ -3801,14 +3998,14 @@ var PencilIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
 );
 
 // src/components/Icon/icons/PeopleIcon.tsx
-var import_jsx_runtime105 = require("react/jsx-runtime");
-var PeopleIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+var import_jsx_runtime107 = require("react/jsx-runtime");
+var PeopleIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -3821,14 +4018,14 @@ var PeopleIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
 );
 
 // src/components/Icon/icons/PinIcon.tsx
-var import_jsx_runtime106 = require("react/jsx-runtime");
-var PinIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
+var import_jsx_runtime108 = require("react/jsx-runtime");
+var PinIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -3841,14 +4038,14 @@ var PinIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
 );
 
 // src/components/Icon/icons/PinSlashIcon.tsx
-var import_jsx_runtime107 = require("react/jsx-runtime");
-var PinSlashIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
+var import_jsx_runtime109 = require("react/jsx-runtime");
+var PinSlashIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -3861,14 +4058,14 @@ var PinSlashIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
 );
 
 // src/components/Icon/icons/PlayIcon.tsx
-var import_jsx_runtime108 = require("react/jsx-runtime");
-var PlayIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+var import_jsx_runtime110 = require("react/jsx-runtime");
+var PlayIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
       "path",
       {
         d: "M20.1332 9.97052L7.47719 2.96254C6.73986 2.55454 5.8692 2.56654 5.1452 2.9932C4.42787 3.41587 3.99987 4.16253 3.99987 4.99186V19.0078C3.99987 19.8372 4.42787 20.5838 5.1452 21.0065C5.5172 21.2252 5.92653 21.3358 6.33853 21.3358C6.7292 21.3358 7.11986 21.2358 7.47719 21.0385L20.1318 14.0305C20.8732 13.6212 21.3332 12.8425 21.3332 12.0012C21.3332 11.1598 20.8732 10.3799 20.1332 9.97052Z",
@@ -3879,14 +4076,14 @@ var PlayIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
 );
 
 // src/components/Icon/icons/PlayerIcon.tsx
-var import_jsx_runtime109 = require("react/jsx-runtime");
-var PlayerIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+var import_jsx_runtime111 = require("react/jsx-runtime");
+var PlayerIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
       "path",
       {
         d: "M18.9998 3.99987H4.9998C2.97714 3.99987 1.33315 5.64386 1.33315 7.66653V16.3332C1.33315 18.3558 2.97714 19.9998 4.9998 19.9998H18.9998C21.0224 19.9998 22.6664 18.3558 22.6664 16.3332V7.66653C22.6664 5.64386 21.0224 3.99987 18.9998 3.99987ZM15.0371 12.8638L10.1705 15.7025C10.0131 15.7945 9.83979 15.8412 9.66646 15.8412C9.49579 15.8412 9.32513 15.7958 9.16779 15.7065C8.85313 15.5265 8.66646 15.2025 8.66646 14.8398V9.16119C8.66646 8.79852 8.85446 8.47452 9.16779 8.29452C9.48246 8.11319 9.85712 8.11586 10.1691 8.29719L15.0358 11.1359C15.3464 11.3172 15.5331 11.6398 15.5331 11.9998C15.5331 12.3598 15.3491 12.6825 15.0371 12.8638Z",
@@ -3897,14 +4094,14 @@ var PlayerIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
 );
 
 // src/components/Icon/icons/PlusIcon.tsx
-var import_jsx_runtime110 = require("react/jsx-runtime");
-var PlusIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+var import_jsx_runtime112 = require("react/jsx-runtime");
+var PlusIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -3917,14 +4114,14 @@ var PlusIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
 );
 
 // src/components/Icon/icons/PodcastIcon.tsx
-var import_jsx_runtime111 = require("react/jsx-runtime");
-var PodcastIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
+var import_jsx_runtime113 = require("react/jsx-runtime");
+var PodcastIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -3937,14 +4134,14 @@ var PodcastIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
 );
 
 // src/components/Icon/icons/PreviewIcon.tsx
-var import_jsx_runtime112 = require("react/jsx-runtime");
-var PreviewIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
+var import_jsx_runtime114 = require("react/jsx-runtime");
+var PreviewIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -3957,14 +4154,14 @@ var PreviewIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
 );
 
 // src/components/Icon/icons/PrivateUserSessionsIcon.tsx
-var import_jsx_runtime113 = require("react/jsx-runtime");
-var PrivateUserSessionsIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+var import_jsx_runtime115 = require("react/jsx-runtime");
+var PrivateUserSessionsIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -3977,15 +4174,15 @@ var PrivateUserSessionsIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime1
 );
 
 // src/components/Icon/icons/ProjectIcon.tsx
-var import_jsx_runtime114 = require("react/jsx-runtime");
-var ProjectIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(
+var import_jsx_runtime116 = require("react/jsx-runtime");
+var ProjectIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
         "path",
         {
           clipRule: "evenodd",
@@ -3994,7 +4191,7 @@ var ProjectIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(
           fillRule: "evenodd"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
         "path",
         {
           d: "M9.95639 4.13386L8.95738 4.79867L8.95787 4.79941L9.95639 4.13386ZM12 7.19985L11.0015 7.8654C11.224 8.19929 11.5987 8.39985 12 8.39985V7.19985ZM4.8 7.19985V5.39986H2.40001V7.19985H4.8ZM4.8 5.39986C4.8 5.069 5.06914 4.79986 5.4 4.79986V2.39987C3.74366 2.39987 2.40001 3.74352 2.40001 5.39986H4.8ZM5.4 4.79986H8.95799V2.39987H5.4V4.79986ZM8.95799 4.79986C8.95808 4.79986 8.95805 4.79986 8.95807 4.79987C8.95816 4.79989 8.95836 4.79996 8.95858 4.80007C8.95903 4.80031 8.95826 4.8 8.95738 4.79867L10.9554 3.46906C10.51 2.79971 9.75864 2.39987 8.95799 2.39987V4.79986ZM8.95787 4.79941L11.0015 7.8654L12.9985 6.5343L10.9549 3.46832L8.95787 4.79941ZM12 8.39985H18.6V5.99985H12V8.39985ZM18.6 8.39985C18.9308 8.39985 19.2 8.66899 19.2 8.99984H21.6C21.6 7.34351 20.2563 5.99985 18.6 5.99985V8.39985ZM19.2 8.99984V16.7998H21.6V8.99984H19.2ZM19.2 16.7998C19.2 18.1243 18.1244 19.1998 16.8 19.1998V21.5998C19.4499 21.5998 21.6 19.4498 21.6 16.7998H19.2ZM16.8 19.1998H7.2V21.5998H16.8V19.1998ZM7.2 19.1998C5.87554 19.1998 4.8 18.1243 4.8 16.7998H2.40001C2.40001 19.4498 4.55006 21.5998 7.2 21.5998V19.1998ZM4.8 16.7998V7.19986H2.40001V16.7998H4.8ZM4.8 7.19986V7.19985H2.40001V7.19986H4.8Z",
@@ -4006,14 +4203,14 @@ var ProjectIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(
 );
 
 // src/components/Icon/icons/PropertiesIcon.tsx
-var import_jsx_runtime115 = require("react/jsx-runtime");
-var PropertiesIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
+var import_jsx_runtime117 = require("react/jsx-runtime");
+var PropertiesIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -4026,14 +4223,14 @@ var PropertiesIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
 );
 
 // src/components/Icon/icons/QuestionMarkIcon.tsx
-var import_jsx_runtime116 = require("react/jsx-runtime");
-var QuestionMarkIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
+var import_jsx_runtime118 = require("react/jsx-runtime");
+var QuestionMarkIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
       "path",
       {
         d: "M11.9998 1.33321C6.11853 1.33321 1.33321 6.11853 1.33321 11.9998C1.33321 17.8812 6.11853 22.6665 11.9998 22.6665C17.8812 22.6665 22.6665 17.8812 22.6665 11.9998C22.6665 6.11853 17.8812 1.33321 11.9998 1.33321ZM11.7212 18.0892C10.9852 18.0892 10.3879 17.4905 10.3879 16.7558C10.3879 16.0212 10.9852 15.4225 11.7212 15.4225C12.4572 15.4225 13.0545 16.0212 13.0545 16.7558C13.0545 17.4905 12.4572 18.0892 11.7212 18.0892ZM13.7598 12.2865C13.1505 12.7118 12.8532 12.9412 12.7532 13.5065C12.6692 13.9918 12.2465 14.3332 11.7705 14.3332C11.7132 14.3332 11.6545 14.3292 11.5958 14.3185C11.0518 14.2225 10.6878 13.7052 10.7852 13.1598C11.0332 11.7505 11.9478 11.1119 12.6172 10.6452C13.3198 10.1545 13.5638 9.94919 13.5638 9.24652C13.5638 8.13052 12.6332 7.83586 12.1412 7.83586C11.5892 7.83586 10.5985 8.00919 10.1719 9.16919C9.98118 9.68785 9.41052 9.95319 8.88785 9.76385C8.36919 9.57319 8.10386 8.99852 8.29452 8.48119C8.90252 6.82519 10.3399 5.83586 12.1412 5.83586C13.7998 5.83586 15.5638 7.03053 15.5638 9.24652C15.5638 11.0292 14.5225 11.7558 13.7598 12.2865Z",
@@ -4044,14 +4241,14 @@ var QuestionMarkIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime116.jsx)
 );
 
 // src/components/Icon/icons/ReactIcon.tsx
-var import_jsx_runtime117 = require("react/jsx-runtime");
-var ReactIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
+var import_jsx_runtime119 = require("react/jsx-runtime");
+var ReactIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
       "path",
       {
         d: "M11.9998 1.33321C6.11847 1.33321 1.33315 6.11853 1.33315 11.9998C1.33315 17.8812 6.11847 22.6665 11.9998 22.6665C17.8811 22.6665 22.6664 17.8812 22.6664 11.9998C22.6664 6.11853 17.8811 1.33321 11.9998 1.33321ZM6.66647 10.6665C6.66647 9.93052 7.2638 9.33319 7.9998 9.33319C8.73579 9.33319 9.33313 9.93052 9.33313 10.6665C9.33313 11.4025 8.73579 11.9998 7.9998 11.9998C7.2638 11.9998 6.66647 11.4025 6.66647 10.6665ZM11.9998 18.6665C9.95846 18.6665 8.18779 17.1465 7.88113 15.1318C7.8358 14.8372 7.93313 14.5398 8.13846 14.3345C8.33979 14.1345 8.61579 14.0452 8.90113 14.0878C10.9358 14.4078 13.0424 14.4078 15.0851 14.0892C15.3744 14.0465 15.6558 14.1372 15.8624 14.3412C16.0664 14.5452 16.1624 14.8385 16.1184 15.1265C15.8131 17.1438 14.0424 18.6652 11.9998 18.6652V18.6665ZM15.9998 11.9998C15.2638 11.9998 14.6664 11.4025 14.6664 10.6665C14.6664 9.93052 15.2638 9.33319 15.9998 9.33319C16.7358 9.33319 17.3331 9.93052 17.3331 10.6665C17.3331 11.4025 16.7358 11.9998 15.9998 11.9998Z",
@@ -4062,14 +4259,14 @@ var ReactIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
 );
 
 // src/components/Icon/icons/RecordIcon.tsx
-var import_jsx_runtime118 = require("react/jsx-runtime");
-var RecordIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
+var import_jsx_runtime120 = require("react/jsx-runtime");
+var RecordIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -4082,14 +4279,14 @@ var RecordIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
 );
 
 // src/components/Icon/icons/RedoIcon.tsx
-var import_jsx_runtime119 = require("react/jsx-runtime");
-var RedoIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+var import_jsx_runtime121 = require("react/jsx-runtime");
+var RedoIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -4102,14 +4299,14 @@ var RedoIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
 );
 
 // src/components/Icon/icons/ReplaceIcon.tsx
-var import_jsx_runtime120 = require("react/jsx-runtime");
-var ReplaceIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+var import_jsx_runtime122 = require("react/jsx-runtime");
+var ReplaceIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -4122,14 +4319,14 @@ var ReplaceIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
 );
 
 // src/components/Icon/icons/ReplyIcon.tsx
-var import_jsx_runtime121 = require("react/jsx-runtime");
-var ReplyIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+var import_jsx_runtime123 = require("react/jsx-runtime");
+var ReplyIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -4142,14 +4339,14 @@ var ReplyIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
 );
 
 // src/components/Icon/icons/SaveAsCopyIcon.tsx
-var import_jsx_runtime122 = require("react/jsx-runtime");
-var SaveAsCopyIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
+var import_jsx_runtime124 = require("react/jsx-runtime");
+var SaveAsCopyIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -4162,14 +4359,14 @@ var SaveAsCopyIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
 );
 
 // src/components/Icon/icons/SaveIcon.tsx
-var import_jsx_runtime123 = require("react/jsx-runtime");
-var SaveIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+var import_jsx_runtime125 = require("react/jsx-runtime");
+var SaveIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
       "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",
@@ -4180,14 +4377,14 @@ var SaveIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
 );
 
 // src/components/Icon/icons/ScissorsIcon.tsx
-var import_jsx_runtime124 = require("react/jsx-runtime");
-var ScissorsIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+var import_jsx_runtime126 = require("react/jsx-runtime");
+var ScissorsIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
       "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",
@@ -4198,14 +4395,14 @@ var ScissorsIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
 );
 
 // src/components/Icon/icons/ScreenshareOffIcon.tsx
-var import_jsx_runtime125 = require("react/jsx-runtime");
-var ScreenshareOffIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
+var import_jsx_runtime127 = require("react/jsx-runtime");
+var ScreenshareOffIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -4218,14 +4415,14 @@ var ScreenshareOffIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime125.js
 );
 
 // src/components/Icon/icons/ScreenshareOnIcon.tsx
-var import_jsx_runtime126 = require("react/jsx-runtime");
-var ScreenshareOnIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+var import_jsx_runtime128 = require("react/jsx-runtime");
+var ScreenshareOnIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -4238,14 +4435,14 @@ var ScreenshareOnIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime126.jsx
 );
 
 // src/components/Icon/icons/SearchIcon.tsx
-var import_jsx_runtime127 = require("react/jsx-runtime");
-var SearchIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
+var import_jsx_runtime129 = require("react/jsx-runtime");
+var SearchIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -4258,14 +4455,14 @@ var SearchIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
 );
 
 // src/components/Icon/icons/SendIcon.tsx
-var import_jsx_runtime128 = require("react/jsx-runtime");
-var SendIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+var import_jsx_runtime130 = require("react/jsx-runtime");
+var SendIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
       "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",
@@ -4276,14 +4473,14 @@ var SendIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
 );
 
 // src/components/Icon/icons/ShapesIcon.tsx
-var import_jsx_runtime129 = require("react/jsx-runtime");
-var ShapesIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+var import_jsx_runtime131 = require("react/jsx-runtime");
+var ShapesIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -4296,14 +4493,14 @@ var ShapesIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
 );
 
 // src/components/Icon/icons/ShareIcon.tsx
-var import_jsx_runtime130 = require("react/jsx-runtime");
-var ShareIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+var import_jsx_runtime132 = require("react/jsx-runtime");
+var ShareIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -4316,14 +4513,14 @@ var ShareIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
 );
 
 // src/components/Icon/icons/SharingPermissionsIcon.tsx
-var import_jsx_runtime131 = require("react/jsx-runtime");
-var SharingPermissionsIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+var import_jsx_runtime133 = require("react/jsx-runtime");
+var SharingPermissionsIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -4336,14 +4533,14 @@ var SharingPermissionsIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime13
 );
 
 // src/components/Icon/icons/SimulcastIcon.tsx
-var import_jsx_runtime132 = require("react/jsx-runtime");
-var SimulcastIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+var import_jsx_runtime134 = require("react/jsx-runtime");
+var SimulcastIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -4356,14 +4553,14 @@ var SimulcastIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
 );
 
 // src/components/Icon/icons/SortIcon.tsx
-var import_jsx_runtime133 = require("react/jsx-runtime");
-var SortIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+var import_jsx_runtime135 = require("react/jsx-runtime");
+var SortIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -4376,14 +4573,14 @@ var SortIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
 );
 
 // src/components/Icon/icons/SparkleIcon.tsx
-var import_jsx_runtime134 = require("react/jsx-runtime");
-var SparkleIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+var import_jsx_runtime136 = require("react/jsx-runtime");
+var SparkleIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -4396,34 +4593,47 @@ var SparkleIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
 );
 
 // src/components/Icon/icons/SpinnerIcon.tsx
-var import_jsx_runtime135 = require("react/jsx-runtime");
-var SpinnerIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
+var import_jsx_runtime137 = require("react/jsx-runtime");
+var SpinnerIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
-      "path",
-      {
-        clipRule: "evenodd",
-        d: "M11.9999 5.33314C8.31802 5.33314 5.33326 8.31788 5.33326 11.9998C5.33326 15.6817 8.31802 18.6664 11.9999 18.6664C15.6818 18.6664 18.6666 15.6817 18.6666 11.9998C18.6666 11.0793 19.4127 10.3331 20.3332 10.3331C21.2537 10.3331 21.9999 11.0793 21.9999 11.9998C21.9999 17.5226 17.5227 21.9998 11.9999 21.9998C6.47708 21.9998 1.99994 17.5226 1.99994 11.9998C1.99994 6.47697 6.47708 1.99981 11.9999 1.99981C12.9204 1.99981 13.6666 2.74598 13.6666 3.66647C13.6666 4.58697 12.9204 5.33314 11.9999 5.33314Z",
-        fill: "currentColor",
-        fillRule: "evenodd"
-      }
-    )
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
+        "path",
+        {
+          clipRule: "evenodd",
+          d: "M11.9999 5.33314C8.31802 5.33314 5.33326 8.31788 5.33326 11.9998C5.33326 15.6817 8.31802 18.6664 11.9999 18.6664C15.6818 18.6664 18.6666 15.6817 18.6666 11.9998C18.6666 11.0793 19.4127 10.3331 20.3332 10.3331C21.2537 10.3331 21.9999 11.0793 21.9999 11.9998C21.9999 17.5226 17.5227 21.9998 11.9999 21.9998C6.47708 21.9998 1.99994 17.5226 1.99994 11.9998C1.99994 6.47697 6.47708 1.99981 11.9999 1.99981C12.9204 1.99981 13.6666 2.74598 13.6666 3.66647C13.6666 4.58697 12.9204 5.33314 11.9999 5.33314Z",
+          fill: "currentColor",
+          fillRule: "evenodd"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
+        "animateTransform",
+        {
+          attributeName: "transform",
+          dur: "1.5s",
+          keyTimes: "0;1",
+          repeatCount: "indefinite",
+          type: "rotate",
+          values: "0 0 0;360 0 0"
+        }
+      )
+    ]
   }
 );
 
 // src/components/Icon/icons/StatsIcon.tsx
-var import_jsx_runtime136 = require("react/jsx-runtime");
-var StatsIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
+var import_jsx_runtime138 = require("react/jsx-runtime");
+var StatsIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -4436,14 +4646,14 @@ var StatsIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
 );
 
 // src/components/Icon/icons/SwitchAccountsIcon.tsx
-var import_jsx_runtime137 = require("react/jsx-runtime");
-var SwitchAccountsIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
+var import_jsx_runtime139 = require("react/jsx-runtime");
+var SwitchAccountsIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -4456,14 +4666,14 @@ var SwitchAccountsIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime137.js
 );
 
 // src/components/Icon/icons/TagIcon.tsx
-var import_jsx_runtime138 = require("react/jsx-runtime");
-var TagIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
+var import_jsx_runtime140 = require("react/jsx-runtime");
+var TagIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
       "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",
@@ -4474,14 +4684,14 @@ var TagIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
 );
 
 // src/components/Icon/icons/ThumbnailIcon.tsx
-var import_jsx_runtime139 = require("react/jsx-runtime");
-var ThumbnailIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
+var import_jsx_runtime141 = require("react/jsx-runtime");
+var ThumbnailIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -4494,14 +4704,14 @@ var ThumbnailIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
 );
 
 // src/components/Icon/icons/ThumbsDownIcon.tsx
-var import_jsx_runtime140 = require("react/jsx-runtime");
-var ThumbsDownIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
+var import_jsx_runtime142 = require("react/jsx-runtime");
+var ThumbsDownIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -4514,14 +4724,14 @@ var ThumbsDownIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
 );
 
 // src/components/Icon/icons/ThumbsUpIcon.tsx
-var import_jsx_runtime141 = require("react/jsx-runtime");
-var ThumbsUpIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
+var import_jsx_runtime143 = require("react/jsx-runtime");
+var ThumbsUpIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -4534,14 +4744,14 @@ var ThumbsUpIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
 );
 
 // src/components/Icon/icons/TransitionsIcon.tsx
-var import_jsx_runtime142 = require("react/jsx-runtime");
-var TransitionsIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
+var import_jsx_runtime144 = require("react/jsx-runtime");
+var TransitionsIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -4554,14 +4764,14 @@ var TransitionsIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
 );
 
 // src/components/Icon/icons/TrimIcon.tsx
-var import_jsx_runtime143 = require("react/jsx-runtime");
-var TrimIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
+var import_jsx_runtime145 = require("react/jsx-runtime");
+var TrimIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -4574,14 +4784,14 @@ var TrimIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
 );
 
 // src/components/Icon/icons/TurnstileIcon.tsx
-var import_jsx_runtime144 = require("react/jsx-runtime");
-var TurnstileIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
+var import_jsx_runtime146 = require("react/jsx-runtime");
+var TurnstileIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -4594,14 +4804,14 @@ var TurnstileIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
 );
 
 // src/components/Icon/icons/UndoIcon.tsx
-var import_jsx_runtime145 = require("react/jsx-runtime");
-var UndoIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(
+var import_jsx_runtime147 = require("react/jsx-runtime");
+var UndoIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -4614,14 +4824,14 @@ var UndoIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(
 );
 
 // src/components/Icon/icons/UnlockIcon.tsx
-var import_jsx_runtime146 = require("react/jsx-runtime");
-var UnlockIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
+var import_jsx_runtime148 = require("react/jsx-runtime");
+var UnlockIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -4634,14 +4844,14 @@ var UnlockIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
 );
 
 // src/components/Icon/icons/UploadIcon.tsx
-var import_jsx_runtime147 = require("react/jsx-runtime");
-var UploadIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(
+var import_jsx_runtime149 = require("react/jsx-runtime");
+var UploadIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -4654,14 +4864,14 @@ var UploadIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(
 );
 
 // src/components/Icon/icons/UsersPermissionsIcon.tsx
-var import_jsx_runtime148 = require("react/jsx-runtime");
-var UsersPermissionsIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(
+var import_jsx_runtime150 = require("react/jsx-runtime");
+var UsersPermissionsIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -4674,14 +4884,14 @@ var UsersPermissionsIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime148.
 );
 
 // src/components/Icon/icons/ViewStreamIcon.tsx
-var import_jsx_runtime149 = require("react/jsx-runtime");
-var ViewStreamIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(
+var import_jsx_runtime151 = require("react/jsx-runtime");
+var ViewStreamIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime151.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime151.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -4694,14 +4904,14 @@ var ViewStreamIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(
 );
 
 // src/components/Icon/icons/VolumeIcon.tsx
-var import_jsx_runtime150 = require("react/jsx-runtime");
-var VolumeIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(
+var import_jsx_runtime152 = require("react/jsx-runtime");
+var VolumeIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
       "path",
       {
         d: "M19.133 2.08909C18.5996 1.79709 17.9476 1.81843 17.4356 2.14776L10.3756 6.66643H5.66763C4.01297 6.66643 2.66763 8.01176 2.66763 9.66643V14.3331C2.66763 15.9878 4.01297 17.3331 5.66763 17.3331H10.3756L17.4356 21.8518C17.709 22.0264 18.021 22.1158 18.3356 22.1158C18.6103 22.1158 18.885 22.0478 19.1343 21.9118C19.669 21.6198 20.001 21.0584 20.001 20.4491V3.55176C20.001 2.94243 19.6676 2.38243 19.133 2.08909Z",
@@ -4712,14 +4922,14 @@ var VolumeIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(
 );
 
 // src/components/Icon/icons/VolumeOffIcon.tsx
-var import_jsx_runtime151 = require("react/jsx-runtime");
-var VolumeOffIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime151.jsx)(
+var import_jsx_runtime153 = require("react/jsx-runtime");
+var VolumeOffIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime151.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -4732,14 +4942,14 @@ var VolumeOffIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime151.jsx)(
 );
 
 // src/components/Icon/icons/VolumeUpIcon.tsx
-var import_jsx_runtime152 = require("react/jsx-runtime");
-var VolumeUpIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
+var import_jsx_runtime154 = require("react/jsx-runtime");
+var VolumeUpIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -4752,14 +4962,14 @@ var VolumeUpIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
 );
 
 // src/components/Icon/icons/VolumeXIcon.tsx
-var import_jsx_runtime153 = require("react/jsx-runtime");
-var VolumeXIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(
+var import_jsx_runtime155 = require("react/jsx-runtime");
+var VolumeXIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -4772,14 +4982,14 @@ var VolumeXIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(
 );
 
 // src/components/Icon/icons/WandIcon.tsx
-var import_jsx_runtime154 = require("react/jsx-runtime");
-var WandIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(
+var import_jsx_runtime156 = require("react/jsx-runtime");
+var WandIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -4792,14 +5002,14 @@ var WandIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(
 );
 
 // src/components/Icon/icons/ZoomInIcon.tsx
-var import_jsx_runtime155 = require("react/jsx-runtime");
-var ZoomInIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(
+var import_jsx_runtime157 = require("react/jsx-runtime");
+var ZoomInIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -4812,14 +5022,14 @@ var ZoomInIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(
 );
 
 // src/components/Icon/icons/ZoomOutIcon.tsx
-var import_jsx_runtime156 = require("react/jsx-runtime");
-var ZoomOutIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(
+var import_jsx_runtime158 = require("react/jsx-runtime");
+var ZoomOutIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
       "path",
       {
         clipRule: "evenodd",
@@ -4988,24 +5198,24 @@ var iconMap = {
 };
 
 // src/private/hooks/useResponsiveProp/useResponsiveProp.ts
-var import_type_guards7 = require("@wistia/type-guards");
-var import_react7 = require("react");
+var import_type_guards9 = require("@wistia/type-guards");
+var import_react8 = require("react");
 var isResponsiveObject = (values) => {
   return typeof values === "object" && values !== null && !Array.isArray(values) && "base" in values;
 };
 var useResponsiveProp = (values) => {
   const activeMediaQueries = useActiveMq();
-  return (0, import_react7.useMemo)(() => {
-    if ((0, import_type_guards7.isRecord)(values) && isResponsiveObject(values)) {
+  return (0, import_react8.useMemo)(() => {
+    if ((0, import_type_guards9.isRecord)(values) && isResponsiveObject(values)) {
       const mq2 = activeMediaQueries.find((key) => key in values);
-      return (0, import_type_guards7.isNotUndefined)(mq2) && (0, import_type_guards7.isNotUndefined)(values[mq2]) ? values[mq2] : values.base;
+      return (0, import_type_guards9.isNotUndefined)(mq2) && (0, import_type_guards9.isNotUndefined)(values[mq2]) ? values[mq2] : values.base;
     }
     return values;
   }, [activeMediaQueries, values]);
 };
 
 // src/components/Icon/Icon.tsx
-var import_jsx_runtime157 = require("react/jsx-runtime");
+var import_jsx_runtime159 = require("react/jsx-runtime");
 var iconSizeMap = {
   sm: "12",
   md: "16",
@@ -5013,7 +5223,7 @@ var iconSizeMap = {
   xl: "32",
   xxl: "48"
 };
-var StyledIcon = import_styled_components15.default.svg`
+var StyledIcon = import_styled_components17.default.svg`
   ${({ $colorScheme }) => getColorScheme($colorScheme ?? "inherit")}
 `;
 var Icon = ({
@@ -5025,13 +5235,13 @@ var Icon = ({
   ...otherProps
 }) => {
   const responsiveSize = useResponsiveProp(size);
-  if ((0, import_type_guards8.isNil)(type)) {
+  if ((0, import_type_guards10.isNil)(type)) {
     throw new Error("An Icon component requires a `type` prop to be provided");
   }
-  if ((0, import_type_guards8.isNil)(iconMap[type])) {
+  if ((0, import_type_guards10.isNil)(iconMap[type])) {
     throw new Error(`Type "${type}" does not exist, please update type prop in Icon component.`);
   }
-  if ((0, import_type_guards8.isNil)(iconSizeMap[responsiveSize])) {
+  if ((0, import_type_guards10.isNil)(iconSizeMap[responsiveSize])) {
     throw new Error(
       `Size "${responsiveSize}" does not exist, please update size prop in Icon component.`
     );
@@ -5042,7 +5252,7 @@ var Icon = ({
     ...style
   };
   const iconColor = invertColor ? "var(--color-icon-on-fill)" : "var(--color-icon)";
-  return /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
     StyledIcon,
     {
       $colorScheme: colorScheme,
@@ -5062,13 +5272,13 @@ var Icon = ({
 Icon.displayName = "Icon";
 
 // src/components/Link/Link.tsx
-var import_react8 = require("react");
-var import_type_guards9 = require("@wistia/type-guards");
-var import_styled_components16 = __toESM(require("styled-components"));
+var import_react9 = require("react");
+var import_type_guards11 = require("@wistia/type-guards");
+var import_styled_components18 = __toESM(require("styled-components"));
 var import_react_router_dom = require("react-router-dom");
-var import_jsx_runtime158 = require("react/jsx-runtime");
+var import_jsx_runtime160 = require("react/jsx-runtime");
 var generateHref = (href, type, disabled) => {
-  if (disabled || (0, import_type_guards9.isNil)(href)) {
+  if (disabled || (0, import_type_guards11.isNil)(href)) {
     return void 0;
   }
   let to = href;
@@ -5080,17 +5290,17 @@ var generateHref = (href, type, disabled) => {
   }
   return to;
 };
-var isButton = (props) => (0, import_type_guards9.isUndefined)(props.href);
-var isLink = (props) => (0, import_type_guards9.isNotUndefined)(props.href);
-var StyledLink = import_styled_components16.default.a`
-  ${({ href }) => (0, import_type_guards9.isNil)(href) && buttonResetCss};
+var isButton = (props) => (0, import_type_guards11.isUndefined)(props.href);
+var isLink = (props) => (0, import_type_guards11.isNotUndefined)(props.href);
+var StyledLink = import_styled_components18.default.a`
+  ${({ href }) => (0, import_type_guards11.isNil)(href) && buttonResetCss};
   ${({ $colorScheme }) => getColorScheme($colorScheme)}
   cursor: pointer;
   font-family: var(--typography-family-default);
   color: var(--color-text-link);
   text-decoration: ${({ $underline }) => $underline ? "underline" : "none"};
 `;
-var Link = (0, import_react8.forwardRef)(
+var Link = (0, import_react9.forwardRef)(
   ({
     beforeAction,
     children,
@@ -5114,7 +5324,7 @@ var Link = (0, import_react8.forwardRef)(
         } finally {
           if (routingCallback !== null) {
             routingCallback();
-          } else if ((0, import_type_guards9.isNotNil)(to)) {
+          } else if ((0, import_type_guards11.isNotNil)(to)) {
             window.location.assign(to);
           } else {
           }
@@ -5128,7 +5338,7 @@ var Link = (0, import_react8.forwardRef)(
       onClick: handleClick
     };
     if (isButton(props)) {
-      return /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(
         StyledLink,
         {
           ref,
@@ -5148,7 +5358,7 @@ var Link = (0, import_react8.forwardRef)(
         ...commonProps,
         ...externalLinkProps
       };
-      return inRouterContext && type !== "external" ? /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
+      return inRouterContext && type !== "external" ? /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(
         StyledLink,
         {
           as: import_react_router_dom.Link,
@@ -5156,7 +5366,7 @@ var Link = (0, import_react8.forwardRef)(
           to: to ?? "",
           children
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(
         StyledLink,
         {
           as: "a",
@@ -5172,18 +5382,18 @@ var Link = (0, import_react8.forwardRef)(
 Link.displayName = "Link";
 
 // src/components/Button/Button.tsx
-var import_jsx_runtime159 = require("react/jsx-runtime");
-var isLink2 = (props) => (0, import_type_guards10.isNotUndefined)(props.href);
-var StyledButton = import_styled_components17.default.button`
+var import_jsx_runtime161 = require("react/jsx-runtime");
+var isLink2 = (props) => (0, import_type_guards12.isNotUndefined)(props.href);
+var StyledButton = import_styled_components19.default.button`
   ${buttonResetCss}
-  ${({ colorScheme }) => getColorScheme(colorScheme)}
-  ${({ size }) => buttonSizeStyles[size]}
-  ${({ variant }) => buttonVariantsStyles[variant]}
-  ${({ unstyled }) => !unstyled && buttonBaseStyles}
-  ${({ fullWidth }) => fullWidth && "width: 100%;"}
+  ${({ $colorScheme }) => getColorScheme($colorScheme)}
+  ${({ $size }) => buttonSizeStyles[$size]}
+  ${({ $variant }) => buttonVariantsStyles[$variant]}
+  ${({ $unstyled }) => !$unstyled && buttonBaseStyles}
+  ${({ $fullWidth }) => $fullWidth && "width: 100%;"}
   position: relative;
 `;
-var StyledButtonContent = import_styled_components17.default.div`
+var StyledButtonContent = import_styled_components19.default.div`
   align-items: center;
   display: inline-flex;
   flex-grow: 1;
@@ -5195,11 +5405,11 @@ var StyledButtonContent = import_styled_components17.default.div`
   ${({ $hasLeftIcon }) => $hasLeftIcon && "padding-left: 0;"}
   ${({ $hasRightIcon }) => $hasRightIcon && "padding-right: 0;"}
 `;
-var StyledButtonContentLabel = import_styled_components17.default.span`
+var StyledButtonContentLabel = import_styled_components19.default.span`
   flex: 1;
   text-align: center;
 `;
-var StyledButtonLoading = import_styled_components17.default.div`
+var StyledButtonLoading = import_styled_components19.default.div`
   position: absolute;
   display: flex;
 `;
@@ -5209,24 +5419,24 @@ var ButtonContent = ({
   rightIcon,
   children
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime159.jsxs)(import_jsx_runtime159.Fragment, { children: [
-    isLoading ? /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(StyledButtonLoading, { children: /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(Icon, { type: "spinner" }) }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime159.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime161.jsxs)(import_jsx_runtime161.Fragment, { children: [
+    isLoading ? /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(StyledButtonLoading, { children: /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(Icon, { type: "spinner" }) }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime161.jsxs)(
       StyledButtonContent,
       {
-        $hasLeftIcon: (0, import_type_guards10.isNotNil)(leftIcon),
-        $hasRightIcon: (0, import_type_guards10.isNotNil)(rightIcon),
+        $hasLeftIcon: (0, import_type_guards12.isNotNil)(leftIcon),
+        $hasRightIcon: (0, import_type_guards12.isNotNil)(rightIcon),
         $isLoading: isLoading,
         children: [
           leftIcon ?? null,
-          /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(StyledButtonContentLabel, { children }),
+          /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(StyledButtonContentLabel, { children }),
           rightIcon ?? null
         ]
       }
     )
   ] });
 };
-var Button = (0, import_react9.forwardRef)(
+var Button = (0, import_react10.forwardRef)(
   ({
     children,
     forceState,
@@ -5239,7 +5449,7 @@ var Button = (0, import_react9.forwardRef)(
     unstyled = false,
     onClick,
     fullWidth = false,
-    size = "medium",
+    size = "md",
     variant = "solid",
     ...props
   }, ref) => {
@@ -5248,27 +5458,27 @@ var Button = (0, import_react9.forwardRef)(
     const isAriaDisabled = () => isLoading || disabled;
     const commonProps = {
       "aria-disabled": isAriaDisabled() || void 0,
-      colorScheme,
-      variant,
-      forceState,
-      unstyled,
+      $colorScheme: colorScheme,
+      $fullWidth: responsiveFullWidth,
+      $size: responsiveSize,
+      $unstyled: unstyled,
+      $variant: variant,
       className,
-      isLoading,
-      size: responsiveSize,
-      fullWidth: responsiveFullWidth
+      forceState,
+      isLoading
     };
     if (forceState) {
       commonProps.className = `${className ?? ""} force-state-${forceState}`;
     }
     if (isLink2(props)) {
-      return /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
         StyledButton,
         {
           ref,
           as: Link,
           ...props,
           ...commonProps,
-          children: /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
             ButtonContent,
             {
               isLoading,
@@ -5285,11 +5495,11 @@ var Button = (0, import_react9.forwardRef)(
         event.preventDefault();
         return;
       }
-      if ((0, import_type_guards10.isNotNil)(onClick)) {
+      if ((0, import_type_guards12.isNotNil)(onClick)) {
         onClick(event);
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
       StyledButton,
       {
         ref,
@@ -5297,7 +5507,7 @@ var Button = (0, import_react9.forwardRef)(
         type: "button",
         ...props,
         ...commonProps,
-        children: /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
           ButtonContent,
           {
             isLoading,
@@ -5313,9 +5523,9 @@ var Button = (0, import_react9.forwardRef)(
 Button.displayName = "Button";
 
 // src/components/ButtonGroup/ButtonGroup.tsx
-var import_styled_components18 = __toESM(require("styled-components"));
-var import_type_guards11 = require("@wistia/type-guards");
-var import_jsx_runtime160 = require("react/jsx-runtime");
+var import_styled_components20 = __toESM(require("styled-components"));
+var import_type_guards13 = require("@wistia/type-guards");
+var import_jsx_runtime162 = require("react/jsx-runtime");
 var getAlignment = (align) => {
   if (align === "center") {
     return "center";
@@ -5328,15 +5538,15 @@ var getAlignment = (align) => {
   }
   return void 0;
 };
-var ButtonGroupComponent = import_styled_components18.default.div`
+var ButtonGroupComponent = import_styled_components20.default.div`
   display: flex;
 
   /* this helps ensure that primary buttons appear at the top of the column */
-  flex-direction: ${({ align }) => align === "right" ? "column-reverse" : "column"};
+  flex-direction: ${({ $align }) => $align === "right" ? "column-reverse" : "column"};
   gap: var(--space-04);
   align-items: center;
-  justify-content: ${({ align }) => getAlignment(align)};
-  width: ${({ fullWidth }) => fullWidth ? "100%" : "auto"};
+  justify-content: ${({ $align }) => getAlignment($align)};
+  width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
 
   ${mq.smAndUp} {
     flex-direction: row;
@@ -5354,14 +5564,14 @@ var ButtonGroup = ({
   fullWidth = false,
   ...otherProps
 }) => {
-  if ((0, import_type_guards11.isNil)(children)) {
+  if ((0, import_type_guards13.isNil)(children)) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(
     ButtonGroupComponent,
     {
-      align,
-      fullWidth,
+      $align: align,
+      $fullWidth: fullWidth,
       ...otherProps,
       children
     }
@@ -5370,20 +5580,20 @@ var ButtonGroup = ({
 ButtonGroup.displayName = "ButtonGroup";
 
 // src/components/Divider/Divider.tsx
-var import_styled_components19 = __toESM(require("styled-components"));
-var import_jsx_runtime161 = require("react/jsx-runtime");
+var import_styled_components21 = __toESM(require("styled-components"));
+var import_jsx_runtime163 = require("react/jsx-runtime");
 var sizeToPixelMap = {
   lg: 4,
   sm: 1
 };
-var DividerComponent = import_styled_components19.default.hr`
+var DividerComponent = import_styled_components21.default.hr`
   background: none;
   border-bottom: none;
   border-left: none;
   border-right: none;
   border-top-color: var(--color-border);
   border-top-style: solid;
-  border-top-width: ${({ borderHeight }) => `${borderHeight}px`};
+  border-top-width: ${({ $borderHeight }) => `${$borderHeight}px`};
   clear: both;
   height: 0;
   line-height: 0;
@@ -5391,10 +5601,10 @@ var DividerComponent = import_styled_components19.default.hr`
 `;
 var Divider = ({ size = "sm", ...otherProps }) => {
   const responsiveSize = useResponsiveProp(size);
-  return /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
     DividerComponent,
     {
-      borderHeight: sizeToPixelMap[responsiveSize],
+      $borderHeight: sizeToPixelMap[responsiveSize],
       ...otherProps
     }
   );
@@ -5402,10 +5612,10 @@ var Divider = ({ size = "sm", ...otherProps }) => {
 Divider.displayName = "Divider";
 
 // src/components/Ellipsis/Ellipsis.tsx
-var import_type_guards12 = require("@wistia/type-guards");
-var import_styled_components20 = __toESM(require("styled-components"));
-var import_jsx_runtime162 = require("react/jsx-runtime");
-var ellipsisStyle = import_styled_components20.css`
+var import_type_guards14 = require("@wistia/type-guards");
+var import_styled_components22 = __toESM(require("styled-components"));
+var import_jsx_runtime164 = require("react/jsx-runtime");
+var ellipsisStyle = import_styled_components22.css`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -5428,16 +5638,16 @@ var ellipsisStyle = import_styled_components20.css`
     }
   }
 `;
-var ellipsisFlexParentStyle = import_styled_components20.css`
+var ellipsisFlexParentStyle = import_styled_components22.css`
   min-width: 0;
 `;
-var EllipsisComponent = import_styled_components20.default.div`
+var EllipsisComponent = import_styled_components22.default.div`
   ${ellipsisStyle};
-  ${({ lines }) => {
-  if ((0, import_type_guards12.isNotNil)(lines)) {
-    return import_styled_components20.css`
+  ${({ $lines }) => {
+  if ((0, import_type_guards14.isNotNil)($lines)) {
+    return import_styled_components22.css`
         -webkit-box-orient: vertical;
-        -webkit-line-clamp: ${lines};
+        -webkit-line-clamp: ${$lines};
         display: -webkit-box;
         white-space: initial;
       `;
@@ -5445,10 +5655,10 @@ var EllipsisComponent = import_styled_components20.default.div`
   return void 0;
 }}
 `;
-var Ellipsis = ({ children, lines, ...otherProps }) => /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(
+var Ellipsis = ({ children, lines, ...otherProps }) => /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(
   EllipsisComponent,
   {
-    lines,
+    $lines: lines,
     ...otherProps,
     children
   }
@@ -5456,8 +5666,8 @@ var Ellipsis = ({ children, lines, ...otherProps }) => /* @__PURE__ */ (0, impor
 Ellipsis.displayName = "Ellipsis";
 
 // src/components/Heading/Heading.tsx
-var import_react10 = require("react");
-var import_styled_components21 = __toESM(require("styled-components"));
+var import_react11 = require("react");
+var import_styled_components23 = __toESM(require("styled-components"));
 
 // src/private/helpers/makePolymorphic/makePolymorphic.tsx
 var makePolymorphic = (component) => {
@@ -5465,44 +5675,44 @@ var makePolymorphic = (component) => {
 };
 
 // src/components/Heading/Heading.tsx
-var import_jsx_runtime163 = require("react/jsx-runtime");
-var heroStyle = import_styled_components21.css`
+var import_jsx_runtime165 = require("react/jsx-runtime");
+var heroStyle = import_styled_components23.css`
   --font-family: var(--typography-heading-hero-family);
   --font-size: var(--typography-heading-hero-size);
   --font-weight: var(--typography-heading-hero-weight);
   --line-height: var(--typography-heading-hero-line-height);
 `;
-var heading1TextStyle = import_styled_components21.css`
+var heading1TextStyle = import_styled_components23.css`
   --font-family: var(--typography-heading-1-family);
   --font-size: var(--typography-heading-1-size);
   --font-weight: var(--typography-heading-1-weight);
   --line-height: var(--typography-heading-1-line-height);
 `;
-var heading2TextStyle = import_styled_components21.css`
+var heading2TextStyle = import_styled_components23.css`
   --font-family: var(--typography-heading-2-family);
   --font-size: var(--typography-heading-2-size);
   --font-weight: var(--typography-heading-2-weight);
   --line-height: var(--typography-heading-2-line-height);
 `;
-var heading3TextStyle = import_styled_components21.css`
+var heading3TextStyle = import_styled_components23.css`
   --font-family: var(--typography-heading-3-family);
   --font-size: var(--typography-heading-3-size);
   --font-weight: var(--typography-heading-3-weight);
   --line-height: var(--typography-heading-3-line-height);
 `;
-var heading4TextStyle = import_styled_components21.css`
+var heading4TextStyle = import_styled_components23.css`
   --font-family: var(--typography-heading-4-family);
   --font-size: var(--typography-heading-4-size);
   --font-weight: var(--typography-heading-4-weight);
   --line-height: var(--typography-heading-4-line-height);
 `;
-var heading5TextStyle = import_styled_components21.css`
+var heading5TextStyle = import_styled_components23.css`
   --font-family: var(--typography-heading-5-family);
   --font-size: var(--typography-heading-5-size);
   --font-weight: var(--typography-heading-5-weight);
   --line-height: var(--typography-heading-5-line-height);
 `;
-var heading6TextStyle = import_styled_components21.css`
+var heading6TextStyle = import_styled_components23.css`
   --font-family: var(--typography-heading-6-family);
   --font-size: var(--typography-heading-6-size);
   --font-weight: var(--typography-heading-6-weight);
@@ -5518,26 +5728,26 @@ var variantStyleMap = {
   heading6: heading6TextStyle
 };
 var DEFAULT_ELEMENT = "h1";
-var StyledHeading = import_styled_components21.default.div`
-  ${({ colorScheme }) => getColorScheme(colorScheme)};
+var StyledHeading = import_styled_components23.default.div`
+  ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-family: var(--font-family);
   font-size: var(--font-size);
   font-weight: var(--font-weight);
   line-height: var(--line-height);
   color: var(--color-text);
-  ${({ variant }) => variantStyleMap[variant]}
-  ${({ ellipsis }) => ellipsis && ellipsisStyle};
-  ${({ inline }) => inline && import_styled_components21.css`
+  ${({ $variant }) => variantStyleMap[$variant]}
+  ${({ $ellipsis }) => $ellipsis && ellipsisStyle};
+  ${({ $inline }) => $inline && import_styled_components23.css`
       display: inline-block;
     `}
-  ${({ disabled }) => disabled && import_styled_components21.css`
+  ${({ $disabled }) => $disabled && import_styled_components23.css`
       color: var(--color-text-disabled);
     `}
-  ${({ preventUserSelect }) => preventUserSelect && import_styled_components21.css`
+  ${({ $preventUserSelect }) => $preventUserSelect && import_styled_components23.css`
       user-select: none;
     `}
-  ${({ align }) => import_styled_components21.css`
-    text-align: ${align};
+  ${({ $align }) => import_styled_components23.css`
+    text-align: ${$align};
   `}
   margin: 0;
 `;
@@ -5550,7 +5760,7 @@ var variantElementMap = {
   heading5: "h5",
   heading6: "h6"
 };
-var HeadingComponent = (0, import_react10.forwardRef)(
+var HeadingComponent = (0, import_react11.forwardRef)(
   ({
     align = "left",
     colorScheme = "inherit",
@@ -5561,18 +5771,18 @@ var HeadingComponent = (0, import_react10.forwardRef)(
     variant = "heading1",
     renderAs,
     ...otherProps
-  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(
     StyledHeading,
     {
       ref,
-      align,
+      $align: align,
+      $colorScheme: colorScheme,
+      $disabled: disabled,
+      $ellipsis: ellipsis,
+      $inline: inline,
+      $preventUserSelect: preventUserSelect,
+      $variant: variant,
       as: renderAs ?? variantElementMap[variant],
-      colorScheme,
-      disabled,
-      ellipsis,
-      inline,
-      preventUserSelect,
-      variant,
       ...otherProps
     }
   )
@@ -5581,21 +5791,21 @@ HeadingComponent.displayName = "Heading";
 var Heading = makePolymorphic(HeadingComponent);
 
 // src/components/IconButton/IconButton.tsx
-var import_react11 = require("react");
-var import_styled_components23 = __toESM(require("styled-components"));
+var import_react12 = require("react");
+var import_styled_components25 = __toESM(require("styled-components"));
 
 // src/components/Tooltip/Tooltip.tsx
 var import_react_tooltip2 = require("@radix-ui/react-tooltip");
-var import_styled_components22 = __toESM(require("styled-components"));
-var import_jsx_runtime164 = require("react/jsx-runtime");
-var CompactTooltipStyles = import_styled_components22.css`
+var import_styled_components24 = __toESM(require("styled-components"));
+var import_jsx_runtime166 = require("react/jsx-runtime");
+var CompactTooltipStyles = import_styled_components24.css`
   --tooltip-font-size: var(--typography-label-4-size);
   --tooltip-line-height: var(--typography-label-4-line-height);
   --tooltip-font-weight: var(--typography-label-4-weight);
   --tooltip-horizontal-padding: var(--space-02);
   --tooltip-vertical-padding: var(--space-03);
 `;
-var StyledContent = (0, import_styled_components22.default)(import_react_tooltip2.Content)`
+var StyledContent = (0, import_styled_components24.default)(import_react_tooltip2.Content)`
   --tooltip-font-family: var(--typography-family-default);
   --tooltip-border-radius: var(--border-radius-05);
   --tooltip-bg: var(--color-bg-tooltip);
@@ -5653,14 +5863,14 @@ var Tooltip = ({
   if (forceOpen === true) {
     rootProps.open = true;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime164.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime166.jsxs)(
     import_react_tooltip2.Root,
     {
       delayDuration: delay,
       ...rootProps,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(import_react_tooltip2.Trigger, { asChild: true, children }),
-        /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(import_react_tooltip2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime164.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(import_react_tooltip2.Trigger, { asChild: true, children }),
+        /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(import_react_tooltip2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime166.jsxs)(
           StyledContent,
           {
             $compact: compact,
@@ -5668,7 +5878,7 @@ var Tooltip = ({
             sideOffset: hideArrow ? VISUAL_OFFSET : VISUAL_OFFSET - 2,
             children: [
               content,
-              !hideArrow ? /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(import_react_tooltip2.Arrow, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(
+              !hideArrow ? /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(import_react_tooltip2.Arrow, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(
                 "svg",
                 {
                   fill: "var(--tooltip-bg)",
@@ -5677,7 +5887,7 @@ var Tooltip = ({
                   viewBox: "0 0 12 8",
                   width: "12",
                   xmlns: "http://www.w3.org/2000/svg",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime164.jsx)("path", { d: "M6.8 6.93333C6.4 7.46667 5.6 7.46667 5.2 6.93333L-2.54292e-07 -1.04907e-06L12 0L6.8 6.93333Z" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime166.jsx)("path", { d: "M6.8 6.93333C6.4 7.46667 5.6 7.46667 5.2 6.93333L-2.54292e-07 -1.04907e-06L12 0L6.8 6.93333Z" })
                 }
               ) }) : null
             ]
@@ -5690,18 +5900,12 @@ var Tooltip = ({
 Tooltip.displayName = "Tooltip";
 
 // src/components/IconButton/IconButton.tsx
-var import_jsx_runtime165 = require("react/jsx-runtime");
-var buttonIconSizeMap = {
-  small: "sm",
-  medium: "md",
-  large: "lg",
-  hero: "xl"
-};
-var StyledButton2 = (0, import_styled_components23.default)(Button)`
-  --icon-button-size-small: 24px;
-  --icon-button-size-medium: 32px;
-  --icon-button-size-large: 40px;
-  --icon-button-size-hero: 48px;
+var import_jsx_runtime167 = require("react/jsx-runtime");
+var StyledButton2 = (0, import_styled_components25.default)(Button)`
+  --icon-button-size-sm: 24px;
+  --icon-button-size-md: 32px;
+  --icon-button-size-lg: 40px;
+  --icon-button-size-xl: 48px;
 
   border-radius: 50%;
   height: ${({ size }) => `var(--icon-button-size-${size})`};
@@ -5711,10 +5915,10 @@ var StyledButton2 = (0, import_styled_components23.default)(Button)`
   align-items: center;
   line-height: 1;
 `;
-var IconButton = (0, import_react11.forwardRef)(
-  ({ children, label, disableTooltip = false, size = "medium", ...props }, ref) => {
+var IconButton = (0, import_react12.forwardRef)(
+  ({ children, label, disableTooltip = false, size = "md", ...props }, ref) => {
     const responsiveSize = useResponsiveProp(size);
-    const button = /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(
+    const button = /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(
       StyledButton2,
       {
         ...props,
@@ -5722,25 +5926,83 @@ var IconButton = (0, import_react11.forwardRef)(
         "aria-label": label,
         "data-wistia-ui-icon-button": true,
         size: responsiveSize,
-        children: (0, import_react11.cloneElement)(import_react11.Children.only(children), {
-          size: buttonIconSizeMap[responsiveSize]
+        children: (0, import_react12.cloneElement)(import_react12.Children.only(children), {
+          size: responsiveSize
         })
       }
     );
     if (disableTooltip) {
       return button;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(Tooltip, { content: label, children: button });
+    return /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(Tooltip, { content: label, children: button });
   }
 );
 IconButton.displayName = "IconButton";
 
+// src/components/Label/Label.tsx
+var import_styled_components26 = __toESM(require("styled-components"));
+var import_jsx_runtime168 = require("react/jsx-runtime");
+var requiredStyle = import_styled_components26.css`
+  &::after {
+    color: red; /* TODO need a color for this */
+    display: inline;
+    padding-left: var(--space-01);
+    content: '*';
+  }
+`;
+var disabledStyle = import_styled_components26.css`
+  color: var(--color-text-disabled);
+`;
+var SPACE_BETWEEN_LABEL_AND_INPUT = "var(--space-02)";
+var StyledLabel = import_styled_components26.default.label`
+  display: block;
+  font-size: var(--typography-label-1-size);
+  font-weight: var(--typography-label-1-weight);
+  line-height: var(--typography-label-1-line-height);
+  margin-bottom: ${SPACE_BETWEEN_LABEL_AND_INPUT};
+  width: 100%;
+
+  /* if label is wrapping an input this ensures it appears beneath the label with a nice margin */
+  > input,
+  > textarea,
+  > select {
+    display: block;
+    margin-top: ${SPACE_BETWEEN_LABEL_AND_INPUT};
+  }
+
+  > label {
+    font-weight: normal;
+  }
+
+  ${({ screenReaderOnly }) => screenReaderOnly && visuallyHiddenStyle}
+  ${({ disabled }) => disabled && disabledStyle}
+  ${({ required }) => required && requiredStyle}
+`;
+var Label = ({
+  children,
+  disabled = false,
+  htmlFor,
+  required = false,
+  screenReaderOnly = false,
+  ...otherProps
+}) => /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(
+  StyledLabel,
+  {
+    disabled,
+    required,
+    screenReaderOnly,
+    ...otherProps,
+    children
+  }
+);
+Label.displayName = "Label";
+
 // src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
-var import_styled_components24 = __toESM(require("styled-components"));
-var import_type_guards13 = require("@wistia/type-guards");
-var import_jsx_runtime166 = require("react/jsx-runtime");
-var VisuallyHidden = import_styled_components24.default.div({ ...visuallyHiddenStyle });
-var VisuallyHiddenButFocusable = import_styled_components24.default.div({
+var import_styled_components27 = __toESM(require("styled-components"));
+var import_type_guards15 = require("@wistia/type-guards");
+var import_jsx_runtime169 = require("react/jsx-runtime");
+var VisuallyHidden = import_styled_components27.default.div({ ...visuallyHiddenStyle });
+var VisuallyHiddenButFocusable = import_styled_components27.default.div({
   "&:not(:focus-within)": visuallyHiddenStyle
 });
 var ScreenReaderOnly = ({
@@ -5749,39 +6011,39 @@ var ScreenReaderOnly = ({
   focusable = false,
   ...otherProps
 }) => {
-  const accessibleText = (0, import_type_guards13.isNotNil)(text) ? text : children;
+  const accessibleText = (0, import_type_guards15.isNotNil)(text) ? text : children;
   if (focusable) {
-    return /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
+    return /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(VisuallyHidden, { ...otherProps, children: accessibleText });
+  return /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(VisuallyHidden, { ...otherProps, children: accessibleText });
 };
 ScreenReaderOnly.displayName = "ScreenReaderOnly";
 
 // src/components/Stack/Stack.tsx
-var import_react12 = require("react");
-var import_styled_components25 = __toESM(require("styled-components"));
-var import_jsx_runtime167 = require("react/jsx-runtime");
+var import_react13 = require("react");
+var import_styled_components28 = __toESM(require("styled-components"));
+var import_jsx_runtime170 = require("react/jsx-runtime");
 var DEFAULT_ELEMENT2 = "div";
-var StyledStack = import_styled_components25.default.div`
+var StyledStack = import_styled_components28.default.div`
   display: flex;
   flex-direction: ${({ $direction }) => $direction === "horizontal" ? "row" : "column"};
-  gap: ${({ gap }) => `var(--${gap})`};
+  gap: ${({ $gap }) => `var(--${$gap})`};
 
   > * {
     flex: 1;
   }
 `;
-var StackComponent = (0, import_react12.forwardRef)(
+var StackComponent = (0, import_react13.forwardRef)(
   ({ renderAs, direction = "vertical", gap = "space-02", ...props }, ref) => {
     const responsiveGap = useResponsiveProp(gap);
     const responsiveDirection = useResponsiveProp(direction);
-    return /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(
       StyledStack,
       {
         ref,
         $direction: responsiveDirection,
+        $gap: responsiveGap,
         as: renderAs ?? DEFAULT_ELEMENT2,
-        gap: responsiveGap,
         ...props
       }
     );
@@ -5791,90 +6053,90 @@ StackComponent.displayName = "Stack";
 var Stack = makePolymorphic(StackComponent);
 
 // src/components/Text/Text.tsx
-var import_react13 = require("react");
-var import_styled_components26 = __toESM(require("styled-components"));
-var import_jsx_runtime168 = require("react/jsx-runtime");
-var bodyBoldStyles = import_styled_components26.css`
+var import_react14 = require("react");
+var import_styled_components29 = __toESM(require("styled-components"));
+var import_jsx_runtime171 = require("react/jsx-runtime");
+var bodyBoldStyles = import_styled_components29.css`
   > strong,
   b {
     font-weight: var(--typography-weight-body-bold);
   }
 `;
-var labelBoldStyles = import_styled_components26.css`
+var labelBoldStyles = import_styled_components29.css`
   > strong,
   b {
     font-weight: var(--typography-weight-label-bold);
   }
 `;
-var body1TextStyle = import_styled_components26.css`
+var body1TextStyle = import_styled_components29.css`
   --font-family: var(--typography-body-1-family);
   --font-size: var(--typography-body-1-size);
   --font-weight: var(--typography-body-1-weight);
   --line-height: var(--typography-body-1-line-height);
   ${bodyBoldStyles}
 `;
-var body2TextStyle = import_styled_components26.css`
+var body2TextStyle = import_styled_components29.css`
   --font-family: var(--typography-body-2-family);
   --font-size: var(--typography-body-2-size);
   --font-weight: var(--typography-body-2-weight);
   --line-height: var(--typography-body-2-line-height);
   ${bodyBoldStyles}
 `;
-var body3TextStyle = import_styled_components26.css`
+var body3TextStyle = import_styled_components29.css`
   --font-family: var(--typography-body-3-family);
   --font-size: var(--typography-body-3-size);
   --font-weight: var(--typography-body-3-weight);
   --line-height: var(--typography-body-3-line-height);
   ${bodyBoldStyles}
 `;
-var body4TextStyle = import_styled_components26.css`
+var body4TextStyle = import_styled_components29.css`
   --font-family: var(--typography-body-4-family);
   --font-size: var(--typography-body-4-size);
   --font-weight: var(--typography-body-4-weight);
   --line-height: var(--typography-body-4-line-height);
   ${bodyBoldStyles}
 `;
-var label1TextStyle = import_styled_components26.css`
+var label1TextStyle = import_styled_components29.css`
   --font-family: var(--typography-label-1-family);
   --font-size: var(--typography-label-1-size);
   --font-weight: var(--typography-label-1-weight);
   --line-height: var(--typography-label-1-line-height);
   ${labelBoldStyles}
 `;
-var label2TextStyle = import_styled_components26.css`
+var label2TextStyle = import_styled_components29.css`
   --font-family: var(--typography-label-2-family);
   --font-size: var(--typography-label-2-size);
   --font-weight: var(--typography-label-2-weight);
   --line-height: var(--typography-label-2-line-height);
   ${labelBoldStyles}
 `;
-var label3TextStyle = import_styled_components26.css`
+var label3TextStyle = import_styled_components29.css`
   --font-family: var(--typography-label-3-family);
   --font-size: var(--typography-label-3-size);
   --font-weight: var(--typography-label-3-weight);
   --line-height: var(--typography-label-3-line-height);
   ${labelBoldStyles}
 `;
-var label4TextStyle = import_styled_components26.css`
+var label4TextStyle = import_styled_components29.css`
   --font-family: var(--typography-label-4-family);
   --font-size: var(--typography-label-4-size);
   --font-weight: var(--typography-label-4-weight);
   --line-height: var(--typography-label-4-line-height);
   ${labelBoldStyles}
 `;
-var body1MonoTextStyle = import_styled_components26.css`
+var body1MonoTextStyle = import_styled_components29.css`
   ${body1TextStyle};
   --font-family: var(--typography-family-mono);
 `;
-var body2MonoTextStyle = import_styled_components26.css`
+var body2MonoTextStyle = import_styled_components29.css`
   ${body2TextStyle};
   --font-family: var(--typography-family-mono);
 `;
-var body3MonoTextStyle = import_styled_components26.css`
+var body3MonoTextStyle = import_styled_components29.css`
   ${body3TextStyle};
   --font-family: var(--typography-family-mono);
 `;
-var body4MonoTextStyle = import_styled_components26.css`
+var body4MonoTextStyle = import_styled_components29.css`
   ${body4TextStyle};
   --font-family: var(--typography-family-mono);
 `;
@@ -5892,13 +6154,13 @@ var variantStyleMap2 = {
   label3: label3TextStyle,
   label4: label4TextStyle
 };
-var highContrastProminenceStyle = import_styled_components26.css`
+var highContrastProminenceStyle = import_styled_components29.css`
   --text-color: var(--color-text-high-contrast);
 `;
-var vibrantProminenceStyle = import_styled_components26.css`
+var vibrantProminenceStyle = import_styled_components29.css`
   --text-color: var(--color-text);
 `;
-var secondaryProminenceStyle = import_styled_components26.css`
+var secondaryProminenceStyle = import_styled_components29.css`
   --text-color: var(--color-text-secondary);
 `;
 var prominenceMap = {
@@ -5906,8 +6168,8 @@ var prominenceMap = {
   vibrant: vibrantProminenceStyle,
   secondary: secondaryProminenceStyle
 };
-var StyledText = import_styled_components26.default.div`
-  ${({ colorScheme }) => getColorScheme(colorScheme)};
+var StyledText = import_styled_components29.default.div`
+  ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-family: var(--font-family);
   font-size: var(--font-size);
   font-weight: var(--font-weight);
@@ -5915,27 +6177,27 @@ var StyledText = import_styled_components26.default.div`
   color: var(--text-color);
   font-style: normal;
   margin: 0;
-  ${({ variant }) => variantStyleMap2[variant]}
-  ${({ prominence }) => prominenceMap[prominence]}
-  ${({ ellipsis }) => ellipsis && ellipsisStyle};
-  ${({ inline }) => inline && import_styled_components26.css`
+  ${({ $variant }) => variantStyleMap2[$variant]}
+  ${({ $prominence }) => prominenceMap[$prominence]}
+  ${({ $ellipsis }) => $ellipsis && ellipsisStyle};
+  ${({ $inline }) => $inline && import_styled_components29.css`
       display: inline-block;
     `}
-  ${({ disabled }) => disabled && import_styled_components26.css`
+  ${({ $disabled }) => $disabled && import_styled_components29.css`
       --text-color: var(--color-text-disabled);
     `}
-  ${({ preventUserSelect }) => preventUserSelect && import_styled_components26.css`
+  ${({ $preventUserSelect }) => $preventUserSelect && import_styled_components29.css`
       user-select: none;
     `}
-  ${({ align }) => import_styled_components26.css`
-    text-align: ${align};
+  ${({ $align }) => import_styled_components29.css`
+    text-align: ${$align};
   `}
-  ${({ as }) => as === "p" && import_styled_components26.css`
+  ${({ as }) => as === "p" && import_styled_components29.css`
       display: block;
     `}
 `;
 var DEFAULT_ELEMENT3 = "div";
-var TextComponent = (0, import_react13.forwardRef)(
+var TextComponent = (0, import_react14.forwardRef)(
   ({
     align = "left",
     colorScheme = "inherit",
@@ -5948,19 +6210,19 @@ var TextComponent = (0, import_react13.forwardRef)(
     renderAs,
     ...otherProps
   }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(
       StyledText,
       {
         ref,
-        align,
+        $align: align,
+        $colorScheme: colorScheme,
+        $disabled: disabled,
+        $ellipsis: ellipsis,
+        $inline: inline,
+        $preventUserSelect: preventUserSelect,
+        $prominence: prominence,
+        $variant: variant,
         as: renderAs ?? DEFAULT_ELEMENT3,
-        colorScheme,
-        disabled,
-        ellipsis,
-        inline,
-        preventUserSelect,
-        prominence,
-        variant,
         ...otherProps
       }
     );
@@ -5970,20 +6232,20 @@ TextComponent.displayName = "Text";
 var Text = makePolymorphic(TextComponent);
 
 // src/components/WistiaLogo/WistiaLogo.tsx
-var import_styled_components27 = __toESM(require("styled-components"));
-var import_type_guards14 = require("@wistia/type-guards");
-var import_jsx_runtime169 = require("react/jsx-runtime");
+var import_styled_components30 = __toESM(require("styled-components"));
+var import_type_guards16 = require("@wistia/type-guards");
+var import_jsx_runtime172 = require("react/jsx-runtime");
 var renderBrandmark = (brandmarkColor, iconOnly) => {
   if (iconOnly) {
-    return /* @__PURE__ */ (0, import_jsx_runtime169.jsx)("g", { fill: brandmarkColor, children: /* @__PURE__ */ (0, import_jsx_runtime169.jsx)("path", { d: "M16.09 17.1h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 26.53c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87ZM32.14 0c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime172.jsx)("g", { fill: brandmarkColor, children: /* @__PURE__ */ (0, import_jsx_runtime172.jsx)("path", { d: "M16.09 17.1h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 26.53c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87ZM32.14 0c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime169.jsx)("g", { fill: brandmarkColor, children: /* @__PURE__ */ (0, import_jsx_runtime169.jsx)("path", { d: "M16.09 21.37h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 30.8c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87Zm16.05-17.1c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime172.jsx)("g", { fill: brandmarkColor, children: /* @__PURE__ */ (0, import_jsx_runtime172.jsx)("path", { d: "M16.09 21.37h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 30.8c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87Zm16.05-17.1c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" }) });
 };
 var renderLogotype = (logotypeColor, iconOnly) => {
   if (iconOnly) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime169.jsx)("g", { fill: logotypeColor, children: /* @__PURE__ */ (0, import_jsx_runtime169.jsx)("path", { d: "M70.16 8.66v15.18c0 1.68-.35 3.09-1.05 4.23a6.612 6.612 0 0 1-2.85 2.54c-1.19.55-2.52.82-4.01.82s-2.8-.28-4.01-.85a6.655 6.655 0 0 1-3.11-2.96c-.08.15-.16.29-.24.42a6.552 6.552 0 0 1-2.87 2.54c-1.2.56-2.54.85-4.01.85s-2.8-.27-3.94-.82a6.214 6.214 0 0 1-2.71-2.52c-.67-1.14-1.01-2.56-1.02-4.25l-.22-15.18h7.34V22.3c0 .82.19 1.37.56 1.67.39.28.85.42 1.38.42s1.02-.15 1.45-.45c.43-.3.65-.85.65-1.65V8.65h7.3v13.64c0 .8.22 1.35.65 1.65.43.3.91.45 1.45.45s.99-.14 1.36-.42c.39-.3.58-.85.58-1.67V8.66h7.34Zm2.45 0v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89A3.43 3.43 0 0 0 78.28.44c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.13 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm8.86 1.96c-1.42.4-2.6 1.11-3.54 2.14-.93 1.02-1.4 2.4-1.4 4.12 0 1.11.17 2.09.51 2.94.36.85.82 1.62 1.38 2.34.22.28.55.65.98 1.11.37.4.64.72.8.96.18.24.27.47.27.69 0 .5-.4.87-1.2 1.09-.8.21-1.62.31-2.47.31-.1-.01-.22-.02-.33-.02l1.02 6.94c.42.07.92.11 1.51.11 1.9 0 3.6-.28 5.1-.85 1.5-.56 2.68-1.42 3.54-2.56.88-1.14 1.31-2.55 1.31-4.23 0-.68-.07-1.31-.22-1.87-.13-.58-.32-1.09-.56-1.54a6.64 6.64 0 0 0-.8-1.27c-.3-.37-.74-.82-1.34-1.36-.39-.33-.67-.59-.85-.8-.18-.22-.27-.45-.27-.67 0-.46.26-.79.78-.98.53-.19 1.17-.29 1.91-.29.25 0 .51.01.78.04l-.71-6.88a10.4 10.4 0 0 0-1.56-.11c-1.66 0-3.21.21-4.65.62Zm19.54 15.71c-.99 0-1.71-.23-2.14-.69-.42-.47-.62-1.18-.62-2.11v-6.57h4.21V8.66h-4.21V3.38l-7.34 1.85V24.1c0 2.45.47 4.29 1.4 5.52.95 1.22 2.45 1.83 4.49 1.83.95 0 1.86-.07 2.74-.22.88-.13 1.62-.34 2.25-.62l1.38-6.3c-.55.1-1.27.16-2.16.16Zm4.13-15.8v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89a3.43 3.43 0 0 0-1.42-1.27c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.14 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm27.51 1.87v22.26h-7.34v-2.28c-.41.43-.85.83-1.34 1.19-1.44 1.07-3.12 1.6-5.05 1.6s-3.61-.52-5.1-1.56c-1.48-1.05-2.63-2.47-3.45-4.25-.82-1.78-1.22-3.73-1.22-5.85s.41-4.07 1.22-5.83c.82-1.78 1.97-3.19 3.45-4.23 1.48-1.05 3.18-1.58 5.1-1.58s3.61.53 5.05 1.6c.48.36.93.75 1.34 1.19V8.66h7.34Zm-7.1 11.11c0-.8-.19-1.53-.56-2.18-.37-.67-.88-1.19-1.54-1.58-.64-.39-1.34-.58-2.09-.58s-1.45.19-2.09.58c-.64.39-1.15.91-1.54 1.58-.37.67-.56 1.39-.56 2.18s.19 1.51.56 2.18c.39.67.9 1.19 1.54 1.58.64.39 1.34.58 2.09.58s1.45-.19 2.09-.58c.65-.39 1.16-.91 1.54-1.56.37-.67.56-1.4.56-2.2Z" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime172.jsx)("g", { fill: logotypeColor, children: /* @__PURE__ */ (0, import_jsx_runtime172.jsx)("path", { d: "M70.16 8.66v15.18c0 1.68-.35 3.09-1.05 4.23a6.612 6.612 0 0 1-2.85 2.54c-1.19.55-2.52.82-4.01.82s-2.8-.28-4.01-.85a6.655 6.655 0 0 1-3.11-2.96c-.08.15-.16.29-.24.42a6.552 6.552 0 0 1-2.87 2.54c-1.2.56-2.54.85-4.01.85s-2.8-.27-3.94-.82a6.214 6.214 0 0 1-2.71-2.52c-.67-1.14-1.01-2.56-1.02-4.25l-.22-15.18h7.34V22.3c0 .82.19 1.37.56 1.67.39.28.85.42 1.38.42s1.02-.15 1.45-.45c.43-.3.65-.85.65-1.65V8.65h7.3v13.64c0 .8.22 1.35.65 1.65.43.3.91.45 1.45.45s.99-.14 1.36-.42c.39-.3.58-.85.58-1.67V8.66h7.34Zm2.45 0v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89A3.43 3.43 0 0 0 78.28.44c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.13 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm8.86 1.96c-1.42.4-2.6 1.11-3.54 2.14-.93 1.02-1.4 2.4-1.4 4.12 0 1.11.17 2.09.51 2.94.36.85.82 1.62 1.38 2.34.22.28.55.65.98 1.11.37.4.64.72.8.96.18.24.27.47.27.69 0 .5-.4.87-1.2 1.09-.8.21-1.62.31-2.47.31-.1-.01-.22-.02-.33-.02l1.02 6.94c.42.07.92.11 1.51.11 1.9 0 3.6-.28 5.1-.85 1.5-.56 2.68-1.42 3.54-2.56.88-1.14 1.31-2.55 1.31-4.23 0-.68-.07-1.31-.22-1.87-.13-.58-.32-1.09-.56-1.54a6.64 6.64 0 0 0-.8-1.27c-.3-.37-.74-.82-1.34-1.36-.39-.33-.67-.59-.85-.8-.18-.22-.27-.45-.27-.67 0-.46.26-.79.78-.98.53-.19 1.17-.29 1.91-.29.25 0 .51.01.78.04l-.71-6.88a10.4 10.4 0 0 0-1.56-.11c-1.66 0-3.21.21-4.65.62Zm19.54 15.71c-.99 0-1.71-.23-2.14-.69-.42-.47-.62-1.18-.62-2.11v-6.57h4.21V8.66h-4.21V3.38l-7.34 1.85V24.1c0 2.45.47 4.29 1.4 5.52.95 1.22 2.45 1.83 4.49 1.83.95 0 1.86-.07 2.74-.22.88-.13 1.62-.34 2.25-.62l1.38-6.3c-.55.1-1.27.16-2.16.16Zm4.13-15.8v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89a3.43 3.43 0 0 0-1.42-1.27c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.14 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm27.51 1.87v22.26h-7.34v-2.28c-.41.43-.85.83-1.34 1.19-1.44 1.07-3.12 1.6-5.05 1.6s-3.61-.52-5.1-1.56c-1.48-1.05-2.63-2.47-3.45-4.25-.82-1.78-1.22-3.73-1.22-5.85s.41-4.07 1.22-5.83c.82-1.78 1.97-3.19 3.45-4.23 1.48-1.05 3.18-1.58 5.1-1.58s3.61.53 5.05 1.6c.48.36.93.75 1.34 1.19V8.66h7.34Zm-7.1 11.11c0-.8-.19-1.53-.56-2.18-.37-.67-.88-1.19-1.54-1.58-.64-.39-1.34-.58-2.09-.58s-1.45.19-2.09.58c-.64.39-1.15.91-1.54 1.58-.37.67-.56 1.39-.56 2.18s.19 1.51.56 2.18c.39.67.9 1.19 1.54 1.58.64.39 1.34.58 2.09.58s1.45-.19 2.09-.58c.65-.39 1.16-.91 1.54-1.56.37-.67.56-1.4.56-2.2Z" }) });
 };
 var computedViewBox = (iconOnly) => {
   if (iconOnly) {
@@ -5991,7 +6253,7 @@ var computedViewBox = (iconOnly) => {
   }
   return "0 0 144 31.47";
 };
-var WistiaLogoComponent = import_styled_components27.default.svg`
+var WistiaLogoComponent = import_styled_components30.default.svg`
   height: ${({ height }) => `${height}px`};
 
   /* ensure it will always fit on mobile */
@@ -6000,7 +6262,7 @@ var WistiaLogoComponent = import_styled_components27.default.svg`
 
   &:hover {
     path {
-      ${({ hoverColor }) => hoverColor !== void 0 ? `fill: ${hoverColor}` : null};
+      ${({ $hoverColor }) => $hoverColor !== void 0 ? `fill: ${$hoverColor}` : null};
     }
   }
 `;
@@ -6033,48 +6295,29 @@ var WistiaLogo = ({
   };
   const brandmarkColor = VARIANT_COLORS[variant].brandmark;
   const logotypeColor = VARIANT_COLORS[variant].logotype;
-  const Logo = /* @__PURE__ */ (0, import_jsx_runtime169.jsxs)(
+  const Logo = /* @__PURE__ */ (0, import_jsx_runtime172.jsxs)(
     WistiaLogoComponent,
     {
+      $hoverColor: hoverColor,
       height,
-      hoverColor,
       role: "img",
       viewBox: computedViewBox(iconOnly),
       xmlns: "http://www.w3.org/2000/svg",
       ...otherProps,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime169.jsx)("title", { children: title }),
-        (0, import_type_guards14.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime169.jsx)("desc", { children: description }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime172.jsx)("title", { children: title }),
+        (0, import_type_guards16.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime172.jsx)("desc", { children: description }) : null,
         renderBrandmark(brandmarkColor, iconOnly),
         renderLogotype(logotypeColor, iconOnly)
       ]
     }
   );
-  return href !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime169.jsx)("a", { href, children: Logo }) : Logo;
+  return href !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime172.jsx)("a", { href, children: Logo }) : Logo;
 };
 WistiaLogo.displayName = "WistiaLogo";
-
-// src/components/ColorSchemeWrapper/ColorSchemeWrapper.tsx
-var import_styled_components28 = __toESM(require("styled-components"));
-var import_jsx_runtime170 = require("react/jsx-runtime");
-var StyledColorSchemeWrapper = import_styled_components28.default.div`
-  ${({ colorScheme }) => getColorScheme(colorScheme)};
-`;
-var ColorSchemeWrapper = ({
-  colorScheme,
-  children,
-  ...otherProps
-}) => /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(
-  StyledColorSchemeWrapper,
-  {
-    colorScheme,
-    ...otherProps,
-    children
-  }
-);
-ColorSchemeWrapper.displayName = "ColorSchemeWrapper";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Avatar,
   Badge,
   Box,
   Button,
@@ -6085,6 +6328,7 @@ ColorSchemeWrapper.displayName = "ColorSchemeWrapper";
   Heading,
   Icon,
   IconButton,
+  Label,
   Link,
   ScreenReaderOnly,
   Stack,
@@ -6092,6 +6336,7 @@ ColorSchemeWrapper.displayName = "ColorSchemeWrapper";
   Tooltip,
   UIProvider,
   WistiaLogo,
+  colorSchemeOptions,
   copyToClipboard,
   ellipsisFlexParentStyle,
   ellipsisStyle,