@wistia/ui 0.0.9 → 0.0.11

package/dist/index.mjs

@@ -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.
  *
@@ -748,7 +748,8 @@ var colorAliasTokens = css4`
   --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);
@@ -771,6 +772,8 @@ var colorAliasTokens = css4`
   --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);
@@ -791,6 +794,8 @@ var colorAliasTokens = css4`
   --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);
@@ -811,6 +816,8 @@ var colorAliasTokens = css4`
   --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);
@@ -831,6 +838,8 @@ var colorAliasTokens = css4`
   --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);
@@ -853,6 +862,8 @@ var colorAliasTokens = css4`
   --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);
@@ -873,6 +884,8 @@ var colorAliasTokens = css4`
   --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);
@@ -893,6 +906,8 @@ var colorAliasTokens = css4`
   --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);
@@ -913,6 +928,8 @@ var colorAliasTokens = css4`
   --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);
@@ -933,6 +950,8 @@ var colorAliasTokens = css4`
   --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);
@@ -953,6 +972,8 @@ var colorAliasTokens = css4`
   --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);
@@ -984,6 +1005,9 @@ var colorAliasTokens = css4`
   --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
@@ -1367,10 +1391,13 @@ var useAriaLive = () => {
   return context;
 };
 
-// src/components/Badge/Badge.tsx
-import { forwardRef } from "react";
+// src/components/Avatar/Avatar.tsx
+import { useState as useState3, useMemo as useMemo2 } from "react";
+import { isNil as isNil4 } from "@wistia/type-guards";
+import styled2 from "styled-components";
+
+// src/components/ColorSchemeWrapper/ColorSchemeWrapper.tsx
 import styled from "styled-components";
-import { isNotNil } from "@wistia/type-guards";
 
 // src/private/helpers/getColorScheme/getColorScheme.ts
 import { css as css9 } from "styled-components";
@@ -1391,6 +1418,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" }
 ];
@@ -1427,9 +1456,172 @@ var getColorScheme = (colorScheme) => {
   `;
 };
 
+// src/components/ColorSchemeWrapper/ColorSchemeWrapper.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var colorSchemeOptions = [
+  "inherit",
+  "default",
+  "info",
+  "success",
+  "warning",
+  "error",
+  "blue",
+  "green",
+  "orange",
+  "pink",
+  "purple",
+  "yellow"
+];
+var StyledColorSchemeWrapper = styled.div`
+  ${({ $colorScheme }) => getColorScheme($colorScheme)};
+`;
+var ColorSchemeWrapper = ({
+  colorScheme,
+  children,
+  ...otherProps
+}) => /* @__PURE__ */ jsx3(
+  StyledColorSchemeWrapper,
+  {
+    $colorScheme: colorScheme,
+    ...otherProps,
+    children
+  }
+);
+ColorSchemeWrapper.displayName = "ColorSchemeWrapper";
+
+// src/components/Avatar/formatNameForDisplay.tsx
+import { isNil as isNil3, isString, isEmptyString } from "@wistia/type-guards";
+var containsEmojiCharacter = (char) => {
+  const emojiRegex = /<a?:.+?:\d{18}>|\p{Extended_Pictographic}/gu;
+  return emojiRegex.test(char);
+};
+var formatNameForDisplay = (name) => {
+  if (isNil3(name) || !isString(name) || isEmptyString(name) || containsEmojiCharacter(name)) {
+    return "U";
+  }
+  const firstChar = name.trim().substring(0, 1);
+  return firstChar.toUpperCase();
+};
+
+// src/components/Avatar/Avatar.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var AvatarImage = styled2.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 = styled2.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 = styled2.div`
+  max-height: ${({ $maxHeight }) => $maxHeight}px;
+`;
+var chooseColorScheme = (name) => {
+  if (isNil4(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] = useState3(null);
+  const handleImageLoad = () => {
+    setImageLoadState("loaded");
+    onImageLoad?.("image");
+  };
+  const handleImageLoadError = () => {
+    setImageLoadState("error");
+    onImageLoad?.("initials");
+  };
+  const avatarSize = heightAndWidth ?? avatarSizeMap[size];
+  const avatarColor = useMemo2(() => chooseColorScheme(name), [name]);
+  const showInitials = isNil4(imageUrl) || imageLoadState === "error";
+  return /* @__PURE__ */ jsx4(
+    AvatarWrapper,
+    {
+      ...otherProps,
+      $maxHeight: avatarSize,
+      children: showInitials ? /* @__PURE__ */ jsx4(
+        InitialsContainer,
+        {
+          $colorScheme: avatarColor,
+          $heightAndWidth: avatarSize,
+          children: formatNameForDisplay(name)
+        }
+      ) : /* @__PURE__ */ jsx4(
+        AvatarImage,
+        {
+          $heightAndWidth: avatarSize,
+          alt: name ?? "Unavailable",
+          onError: handleImageLoadError,
+          onLoad: handleImageLoad,
+          src: imageUrl
+        }
+      )
+    }
+  );
+};
+Avatar.displayName = "Avatar";
+
 // src/components/Badge/Badge.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var StyledBadge = styled.div`
+import { forwardRef } from "react";
+import styled3 from "styled-components";
+import { isNotNil } from "@wistia/type-guards";
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+var StyledBadge = styled3.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   align-items: center;
   background-color: var(--color-bg-surface-secondary);
@@ -1461,7 +1653,7 @@ var Badge = forwardRef(
         $hasIcon: hasIcon,
         children: [
           hasIcon ? icon : null,
-          /* @__PURE__ */ jsx3("span", { children: label })
+          /* @__PURE__ */ jsx5("span", { children: label })
         ]
       }
     );
@@ -1471,9 +1663,9 @@ Badge.displayName = "Badge";
 
 // src/components/Box/Box.tsx
 import { Children, cloneElement } from "react";
-import styled2 from "styled-components";
-import { isNotNil as isNotNil2, isNil as isNil3, isRecord } from "@wistia/type-guards";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import styled4 from "styled-components";
+import { isNotNil as isNotNil2, isNil as isNil5, isRecord } from "@wistia/type-guards";
+import { jsx as jsx6 } from "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) => {
@@ -1515,29 +1707,29 @@ var getFillViewportStyle = (fillViewport) => {
   }
   return void 0;
 };
-var BoxComponent = styled2.div`
-  align-content: ${({ alignContent }) => alignContent};
-  align-items: ${({ alignItems }) => alignItems};
-  align-self: ${({ alignSelf }) => alignSelf ?? null};
-  display: ${({ inline }) => isNotNil2(inline) && inline ? "inline-flex" : "flex"};
-  flex-basis: ${({ basis }) => isNotNil2(basis) ? basis : null};
-  flex-direction: ${({ flexDirection }) => flexDirection};
-  ${({ fillBox: fill }) => getFillStyle(fill)};
-  ${({ fillViewport }) => getFillViewportStyle(fillViewport)};
+var BoxComponent = styled4.div`
+  align-content: ${({ $alignContent }) => $alignContent};
+  align-items: ${({ $alignItems }) => $alignItems};
+  align-self: ${({ $alignSelf }) => $alignSelf ?? null};
+  display: ${({ $inline }) => isNotNil2($inline) && $inline ? "inline-flex" : "flex"};
+  flex-basis: ${({ $basis }) => isNotNil2($basis) ? $basis : null};
+  flex-direction: ${({ $flexDirection }) => $flexDirection};
+  ${({ $fillBox: fill }) => getFillStyle(fill)};
+  ${({ $fillViewport }) => getFillViewportStyle($fillViewport)};
 
   /* Box children styles */
-  flex-grow: ${({ grow }) => isNotNil2(grow) ? grow : null};
-  flex-shrink: ${({ shrink }) => isNotNil2(shrink) ? shrink : null};
-  flex-wrap: ${({ wrapItems }) => wrapItems ? "wrap" : "nowrap"};
-  ${({ gap }) => getGapStyle(gap)};
-  justify-content: ${({ justifyContent }) => justifyContent};
-  order: ${({ order }) => isNotNil2(order) ? order : null};
+  flex-grow: ${({ $grow }) => isNotNil2($grow) ? $grow : null};
+  flex-shrink: ${({ $shrink }) => isNotNil2($shrink) ? $shrink : null};
+  flex-wrap: ${({ $wrapItems }) => $wrapItems ? "wrap" : "nowrap"};
+  ${({ $gap }) => getGapStyle($gap)};
+  justify-content: ${({ $justifyContent }) => $justifyContent};
+  order: ${({ $order }) => isNotNil2($order) ? $order : null};
 `;
 var wrapChildren = (children) => {
   if (isNotNil2(children)) {
     if (typeof children === "object" && isDev) {
       return Children.map(children, (child) => {
-        if (isNil3(child)) return null;
+        if (isNil5(child)) return null;
         const elementParams = {};
         if (child.type?.displayName === "Box" || child.type?.displayName === "Box_UI") {
           elementParams.hasBoxParent = true;
@@ -1557,6 +1749,7 @@ var Box = ({
   hasBoxParent = false,
   fill = false,
   fillViewport = false,
+  gap,
   inline = false,
   justifyContent = "flex-start",
   wrapItems = false,
@@ -1569,18 +1762,19 @@ var Box = ({
       }
     });
   }
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx6(
     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)
     }
@@ -1590,8 +1784,8 @@ Box.displayName = "Box";
 
 // src/components/Button/Button.tsx
 import { forwardRef as forwardRef3 } from "react";
+import styled7 from "styled-components";
 import { isNotNil as isNotNil4, isNotUndefined as isNotUndefined3 } from "@wistia/type-guards";
-import styled5 from "styled-components";
 
 // src/css/buttonResetCss.tsx
 import { css as css10 } from "styled-components";
@@ -1674,7 +1868,7 @@ var buttonLargeStyles = css11`
   --button-icon-size: 24px;
   --button-label-gap: 8px;
 `;
-var buttonHeroStyles = css11`
+var buttonExtraLargeStyles = css11`
   --button-padding-vertical: var(--space-03);
   --button-padding-horizontal: var(--space-03);
   --button-label-padding-horizontal: var(--space-02);
@@ -1789,25 +1983,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
-import { isNil as isNil4 } from "@wistia/type-guards";
-import styled3 from "styled-components";
+import { isNil as isNil6 } from "@wistia/type-guards";
+import styled5 from "styled-components";
 
 // src/components/Icon/icons/AbTestIcon.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
-var AbTestIcon = (props) => /* @__PURE__ */ jsx5(
+import { jsx as jsx7 } from "react/jsx-runtime";
+var AbTestIcon = (props) => /* @__PURE__ */ jsx7(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx5(
+    children: /* @__PURE__ */ jsx7(
       "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",
@@ -1818,14 +2012,14 @@ var AbTestIcon = (props) => /* @__PURE__ */ jsx5(
 );
 
 // src/components/Icon/icons/AccessibilityIcon.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
-var AccessibilityIcon = (props) => /* @__PURE__ */ jsx6(
+import { jsx as jsx8 } from "react/jsx-runtime";
+var AccessibilityIcon = (props) => /* @__PURE__ */ jsx8(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx6(
+    children: /* @__PURE__ */ jsx8(
       "path",
       {
         clipRule: "evenodd",
@@ -1838,14 +2032,14 @@ var AccessibilityIcon = (props) => /* @__PURE__ */ jsx6(
 );
 
 // src/components/Icon/icons/ActivityIcon.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
-var ActivityIcon = (props) => /* @__PURE__ */ jsx7(
+import { jsx as jsx9 } from "react/jsx-runtime";
+var ActivityIcon = (props) => /* @__PURE__ */ jsx9(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx7(
+    children: /* @__PURE__ */ jsx9(
       "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",
@@ -1856,14 +2050,14 @@ var ActivityIcon = (props) => /* @__PURE__ */ jsx7(
 );
 
 // src/components/Icon/icons/AddMediaIcon.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
-var AddMediaIcon = (props) => /* @__PURE__ */ jsx8(
+import { jsx as jsx10 } from "react/jsx-runtime";
+var AddMediaIcon = (props) => /* @__PURE__ */ jsx10(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx8(
+    children: /* @__PURE__ */ jsx10(
       "path",
       {
         clipRule: "evenodd",
@@ -1876,14 +2070,14 @@ var AddMediaIcon = (props) => /* @__PURE__ */ jsx8(
 );
 
 // src/components/Icon/icons/AnnotationLinkIcon.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
-var AnnotationLinkIcon = (props) => /* @__PURE__ */ jsx9(
+import { jsx as jsx11 } from "react/jsx-runtime";
+var AnnotationLinkIcon = (props) => /* @__PURE__ */ jsx11(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx9(
+    children: /* @__PURE__ */ jsx11(
       "path",
       {
         clipRule: "evenodd",
@@ -1896,14 +2090,14 @@ var AnnotationLinkIcon = (props) => /* @__PURE__ */ jsx9(
 );
 
 // src/components/Icon/icons/AppearanceIcon.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
-var AppearanceIcon = (props) => /* @__PURE__ */ jsx10(
+import { jsx as jsx12 } from "react/jsx-runtime";
+var AppearanceIcon = (props) => /* @__PURE__ */ jsx12(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx10(
+    children: /* @__PURE__ */ jsx12(
       "path",
       {
         clipRule: "evenodd",
@@ -1916,14 +2110,14 @@ var AppearanceIcon = (props) => /* @__PURE__ */ jsx10(
 );
 
 // src/components/Icon/icons/ArchiveIcon.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
-var ArchiveIcon = (props) => /* @__PURE__ */ jsx11(
+import { jsx as jsx13 } from "react/jsx-runtime";
+var ArchiveIcon = (props) => /* @__PURE__ */ jsx13(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx11(
+    children: /* @__PURE__ */ jsx13(
       "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",
@@ -1934,14 +2128,14 @@ var ArchiveIcon = (props) => /* @__PURE__ */ jsx11(
 );
 
 // src/components/Icon/icons/ArrowDownIcon.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
-var ArrowDownIcon = (props) => /* @__PURE__ */ jsx12(
+import { jsx as jsx14 } from "react/jsx-runtime";
+var ArrowDownIcon = (props) => /* @__PURE__ */ jsx14(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx12(
+    children: /* @__PURE__ */ jsx14(
       "path",
       {
         clipRule: "evenodd",
@@ -1954,14 +2148,14 @@ var ArrowDownIcon = (props) => /* @__PURE__ */ jsx12(
 );
 
 // src/components/Icon/icons/ArrowLeftIcon.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
-var ArrowLeftIcon = (props) => /* @__PURE__ */ jsx13(
+import { jsx as jsx15 } from "react/jsx-runtime";
+var ArrowLeftIcon = (props) => /* @__PURE__ */ jsx15(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx13(
+    children: /* @__PURE__ */ jsx15(
       "path",
       {
         clipRule: "evenodd",
@@ -1974,14 +2168,14 @@ var ArrowLeftIcon = (props) => /* @__PURE__ */ jsx13(
 );
 
 // src/components/Icon/icons/ArrowRightIcon.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
-var ArrowRightIcon = (props) => /* @__PURE__ */ jsx14(
+import { jsx as jsx16 } from "react/jsx-runtime";
+var ArrowRightIcon = (props) => /* @__PURE__ */ jsx16(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx14(
+    children: /* @__PURE__ */ jsx16(
       "path",
       {
         clipRule: "evenodd",
@@ -1994,14 +2188,14 @@ var ArrowRightIcon = (props) => /* @__PURE__ */ jsx14(
 );
 
 // src/components/Icon/icons/ArrowUpIcon.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
-var ArrowUpIcon = (props) => /* @__PURE__ */ jsx15(
+import { jsx as jsx17 } from "react/jsx-runtime";
+var ArrowUpIcon = (props) => /* @__PURE__ */ jsx17(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx15(
+    children: /* @__PURE__ */ jsx17(
       "path",
       {
         clipRule: "evenodd",
@@ -2014,14 +2208,14 @@ var ArrowUpIcon = (props) => /* @__PURE__ */ jsx15(
 );
 
 // src/components/Icon/icons/ArrowUpRightIcon.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
-var ArrowUpRightIcon = (props) => /* @__PURE__ */ jsx16(
+import { jsx as jsx18 } from "react/jsx-runtime";
+var ArrowUpRightIcon = (props) => /* @__PURE__ */ jsx18(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx16(
+    children: /* @__PURE__ */ jsx18(
       "path",
       {
         clipRule: "evenodd",
@@ -2034,14 +2228,14 @@ var ArrowUpRightIcon = (props) => /* @__PURE__ */ jsx16(
 );
 
 // src/components/Icon/icons/AsteriskIcon.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
-var AsteriskIcon = (props) => /* @__PURE__ */ jsx17(
+import { jsx as jsx19 } from "react/jsx-runtime";
+var AsteriskIcon = (props) => /* @__PURE__ */ jsx19(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx17(
+    children: /* @__PURE__ */ jsx19(
       "path",
       {
         clipRule: "evenodd",
@@ -2054,14 +2248,14 @@ var AsteriskIcon = (props) => /* @__PURE__ */ jsx17(
 );
 
 // src/components/Icon/icons/AudioDescriptionIcon.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
-var AudioDescriptionIcon = (props) => /* @__PURE__ */ jsx18(
+import { jsx as jsx20 } from "react/jsx-runtime";
+var AudioDescriptionIcon = (props) => /* @__PURE__ */ jsx20(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx18(
+    children: /* @__PURE__ */ jsx20(
       "path",
       {
         clipRule: "evenodd",
@@ -2074,14 +2268,14 @@ var AudioDescriptionIcon = (props) => /* @__PURE__ */ jsx18(
 );
 
 // src/components/Icon/icons/AutoScrollIcon.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
-var AutoScrollIcon = (props) => /* @__PURE__ */ jsx19(
+import { jsx as jsx21 } from "react/jsx-runtime";
+var AutoScrollIcon = (props) => /* @__PURE__ */ jsx21(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx19(
+    children: /* @__PURE__ */ jsx21(
       "path",
       {
         clipRule: "evenodd",
@@ -2094,14 +2288,14 @@ var AutoScrollIcon = (props) => /* @__PURE__ */ jsx19(
 );
 
 // src/components/Icon/icons/BackgroundIcon.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
-var BackgroundIcon = (props) => /* @__PURE__ */ jsx20(
+import { jsx as jsx22 } from "react/jsx-runtime";
+var BackgroundIcon = (props) => /* @__PURE__ */ jsx22(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx20(
+    children: /* @__PURE__ */ jsx22(
       "path",
       {
         clipRule: "evenodd",
@@ -2114,14 +2308,14 @@ var BackgroundIcon = (props) => /* @__PURE__ */ jsx20(
 );
 
 // src/components/Icon/icons/BellIcon.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
-var BellIcon = (props) => /* @__PURE__ */ jsx21(
+import { jsx as jsx23 } from "react/jsx-runtime";
+var BellIcon = (props) => /* @__PURE__ */ jsx23(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx21(
+    children: /* @__PURE__ */ jsx23(
       "path",
       {
         clipRule: "evenodd",
@@ -2134,14 +2328,14 @@ var BellIcon = (props) => /* @__PURE__ */ jsx21(
 );
 
 // src/components/Icon/icons/BoltIcon.tsx
-import { jsx as jsx22 } from "react/jsx-runtime";
-var BoltIcon = (props) => /* @__PURE__ */ jsx22(
+import { jsx as jsx24 } from "react/jsx-runtime";
+var BoltIcon = (props) => /* @__PURE__ */ jsx24(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx22(
+    children: /* @__PURE__ */ jsx24(
       "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",
@@ -2152,14 +2346,14 @@ var BoltIcon = (props) => /* @__PURE__ */ jsx22(
 );
 
 // src/components/Icon/icons/CalendarIcon.tsx
-import { jsx as jsx23 } from "react/jsx-runtime";
-var CalendarIcon = (props) => /* @__PURE__ */ jsx23(
+import { jsx as jsx25 } from "react/jsx-runtime";
+var CalendarIcon = (props) => /* @__PURE__ */ jsx25(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx23(
+    children: /* @__PURE__ */ jsx25(
       "path",
       {
         clipRule: "evenodd",
@@ -2172,14 +2366,14 @@ var CalendarIcon = (props) => /* @__PURE__ */ jsx23(
 );
 
 // src/components/Icon/icons/CallToActionIcon.tsx
-import { jsx as jsx24 } from "react/jsx-runtime";
-var CallToActionIcon = (props) => /* @__PURE__ */ jsx24(
+import { jsx as jsx26 } from "react/jsx-runtime";
+var CallToActionIcon = (props) => /* @__PURE__ */ jsx26(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx24(
+    children: /* @__PURE__ */ jsx26(
       "path",
       {
         clipRule: "evenodd",
@@ -2192,14 +2386,14 @@ var CallToActionIcon = (props) => /* @__PURE__ */ jsx24(
 );
 
 // src/components/Icon/icons/CameraIcon.tsx
-import { jsx as jsx25 } from "react/jsx-runtime";
-var CameraIcon = (props) => /* @__PURE__ */ jsx25(
+import { jsx as jsx27 } from "react/jsx-runtime";
+var CameraIcon = (props) => /* @__PURE__ */ jsx27(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx25(
+    children: /* @__PURE__ */ jsx27(
       "path",
       {
         clipRule: "evenodd",
@@ -2212,14 +2406,14 @@ var CameraIcon = (props) => /* @__PURE__ */ jsx25(
 );
 
 // src/components/Icon/icons/CameraOffIcon.tsx
-import { jsx as jsx26 } from "react/jsx-runtime";
-var CameraOffIcon = (props) => /* @__PURE__ */ jsx26(
+import { jsx as jsx28 } from "react/jsx-runtime";
+var CameraOffIcon = (props) => /* @__PURE__ */ jsx28(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx26(
+    children: /* @__PURE__ */ jsx28(
       "path",
       {
         clipRule: "evenodd",
@@ -2232,14 +2426,14 @@ var CameraOffIcon = (props) => /* @__PURE__ */ jsx26(
 );
 
 // src/components/Icon/icons/CaretDownIcon.tsx
-import { jsx as jsx27 } from "react/jsx-runtime";
-var CaretDownIcon = (props) => /* @__PURE__ */ jsx27(
+import { jsx as jsx29 } from "react/jsx-runtime";
+var CaretDownIcon = (props) => /* @__PURE__ */ jsx29(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx27(
+    children: /* @__PURE__ */ jsx29(
       "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",
@@ -2250,14 +2444,14 @@ var CaretDownIcon = (props) => /* @__PURE__ */ jsx27(
 );
 
 // src/components/Icon/icons/CaretDownStrongIcon.tsx
-import { jsx as jsx28 } from "react/jsx-runtime";
-var CaretDownStrongIcon = (props) => /* @__PURE__ */ jsx28(
+import { jsx as jsx30 } from "react/jsx-runtime";
+var CaretDownStrongIcon = (props) => /* @__PURE__ */ jsx30(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx28(
+    children: /* @__PURE__ */ jsx30(
       "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",
@@ -2268,14 +2462,14 @@ var CaretDownStrongIcon = (props) => /* @__PURE__ */ jsx28(
 );
 
 // src/components/Icon/icons/CaretLeftIcon.tsx
-import { jsx as jsx29 } from "react/jsx-runtime";
-var CaretLeftIcon = (props) => /* @__PURE__ */ jsx29(
+import { jsx as jsx31 } from "react/jsx-runtime";
+var CaretLeftIcon = (props) => /* @__PURE__ */ jsx31(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx29(
+    children: /* @__PURE__ */ jsx31(
       "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",
@@ -2286,14 +2480,14 @@ var CaretLeftIcon = (props) => /* @__PURE__ */ jsx29(
 );
 
 // src/components/Icon/icons/CaretLeftStrongIcon.tsx
-import { jsx as jsx30 } from "react/jsx-runtime";
-var CaretLeftStrongIcon = (props) => /* @__PURE__ */ jsx30(
+import { jsx as jsx32 } from "react/jsx-runtime";
+var CaretLeftStrongIcon = (props) => /* @__PURE__ */ jsx32(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx30(
+    children: /* @__PURE__ */ jsx32(
       "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",
@@ -2304,14 +2498,14 @@ var CaretLeftStrongIcon = (props) => /* @__PURE__ */ jsx30(
 );
 
 // src/components/Icon/icons/CaretRightIcon.tsx
-import { jsx as jsx31 } from "react/jsx-runtime";
-var CaretRightIcon = (props) => /* @__PURE__ */ jsx31(
+import { jsx as jsx33 } from "react/jsx-runtime";
+var CaretRightIcon = (props) => /* @__PURE__ */ jsx33(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx31(
+    children: /* @__PURE__ */ jsx33(
       "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",
@@ -2322,14 +2516,14 @@ var CaretRightIcon = (props) => /* @__PURE__ */ jsx31(
 );
 
 // src/components/Icon/icons/CaretRightStrongIcon.tsx
-import { jsx as jsx32 } from "react/jsx-runtime";
-var CaretRightStrongIcon = (props) => /* @__PURE__ */ jsx32(
+import { jsx as jsx34 } from "react/jsx-runtime";
+var CaretRightStrongIcon = (props) => /* @__PURE__ */ jsx34(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx32(
+    children: /* @__PURE__ */ jsx34(
       "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",
@@ -2340,14 +2534,14 @@ var CaretRightStrongIcon = (props) => /* @__PURE__ */ jsx32(
 );
 
 // src/components/Icon/icons/CaretUpIcon.tsx
-import { jsx as jsx33 } from "react/jsx-runtime";
-var CaretUpIcon = (props) => /* @__PURE__ */ jsx33(
+import { jsx as jsx35 } from "react/jsx-runtime";
+var CaretUpIcon = (props) => /* @__PURE__ */ jsx35(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx33(
+    children: /* @__PURE__ */ jsx35(
       "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",
@@ -2358,14 +2552,14 @@ var CaretUpIcon = (props) => /* @__PURE__ */ jsx33(
 );
 
 // src/components/Icon/icons/CaretUpStrongIcon.tsx
-import { jsx as jsx34 } from "react/jsx-runtime";
-var CaretUpStrongIcon = (props) => /* @__PURE__ */ jsx34(
+import { jsx as jsx36 } from "react/jsx-runtime";
+var CaretUpStrongIcon = (props) => /* @__PURE__ */ jsx36(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx34(
+    children: /* @__PURE__ */ jsx36(
       "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",
@@ -2376,14 +2570,14 @@ var CaretUpStrongIcon = (props) => /* @__PURE__ */ jsx34(
 );
 
 // src/components/Icon/icons/ChannelIcon.tsx
-import { jsx as jsx35 } from "react/jsx-runtime";
-var ChannelIcon = (props) => /* @__PURE__ */ jsx35(
+import { jsx as jsx37 } from "react/jsx-runtime";
+var ChannelIcon = (props) => /* @__PURE__ */ jsx37(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx35(
+    children: /* @__PURE__ */ jsx37(
       "path",
       {
         clipRule: "evenodd",
@@ -2396,14 +2590,14 @@ var ChannelIcon = (props) => /* @__PURE__ */ jsx35(
 );
 
 // src/components/Icon/icons/ChaptersIcon.tsx
-import { jsx as jsx36 } from "react/jsx-runtime";
-var ChaptersIcon = (props) => /* @__PURE__ */ jsx36(
+import { jsx as jsx38 } from "react/jsx-runtime";
+var ChaptersIcon = (props) => /* @__PURE__ */ jsx38(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx36(
+    children: /* @__PURE__ */ jsx38(
       "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",
@@ -2414,14 +2608,14 @@ var ChaptersIcon = (props) => /* @__PURE__ */ jsx36(
 );
 
 // src/components/Icon/icons/CheckmarkCircleIcon.tsx
-import { jsx as jsx37 } from "react/jsx-runtime";
-var CheckmarkCircleIcon = (props) => /* @__PURE__ */ jsx37(
+import { jsx as jsx39 } from "react/jsx-runtime";
+var CheckmarkCircleIcon = (props) => /* @__PURE__ */ jsx39(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx37(
+    children: /* @__PURE__ */ jsx39(
       "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",
@@ -2432,14 +2626,14 @@ var CheckmarkCircleIcon = (props) => /* @__PURE__ */ jsx37(
 );
 
 // src/components/Icon/icons/CheckmarkCircleOutlineIcon.tsx
-import { jsx as jsx38 } from "react/jsx-runtime";
-var CheckmarkCircleOutlineIcon = (props) => /* @__PURE__ */ jsx38(
+import { jsx as jsx40 } from "react/jsx-runtime";
+var CheckmarkCircleOutlineIcon = (props) => /* @__PURE__ */ jsx40(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx38(
+    children: /* @__PURE__ */ jsx40(
       "path",
       {
         clipRule: "evenodd",
@@ -2452,14 +2646,14 @@ var CheckmarkCircleOutlineIcon = (props) => /* @__PURE__ */ jsx38(
 );
 
 // src/components/Icon/icons/CheckmarkIcon.tsx
-import { jsx as jsx39 } from "react/jsx-runtime";
-var CheckmarkIcon = (props) => /* @__PURE__ */ jsx39(
+import { jsx as jsx41 } from "react/jsx-runtime";
+var CheckmarkIcon = (props) => /* @__PURE__ */ jsx41(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx39(
+    children: /* @__PURE__ */ jsx41(
       "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",
@@ -2470,14 +2664,14 @@ var CheckmarkIcon = (props) => /* @__PURE__ */ jsx39(
 );
 
 // src/components/Icon/icons/CheckmarkThreeQuatersCircleIcon.tsx
-import { jsx as jsx40 } from "react/jsx-runtime";
-var CheckmarkThreeQuatersCircleIcon = (props) => /* @__PURE__ */ jsx40(
+import { jsx as jsx42 } from "react/jsx-runtime";
+var CheckmarkThreeQuatersCircleIcon = (props) => /* @__PURE__ */ jsx42(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx40(
+    children: /* @__PURE__ */ jsx42(
       "path",
       {
         clipRule: "evenodd",
@@ -2490,14 +2684,14 @@ var CheckmarkThreeQuatersCircleIcon = (props) => /* @__PURE__ */ jsx40(
 );
 
 // src/components/Icon/icons/CircleSlashedIcon.tsx
-import { jsx as jsx41 } from "react/jsx-runtime";
-var CircleSlashedIcon = (props) => /* @__PURE__ */ jsx41(
+import { jsx as jsx43 } from "react/jsx-runtime";
+var CircleSlashedIcon = (props) => /* @__PURE__ */ jsx43(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx41(
+    children: /* @__PURE__ */ jsx43(
       "path",
       {
         clipRule: "evenodd",
@@ -2510,14 +2704,14 @@ var CircleSlashedIcon = (props) => /* @__PURE__ */ jsx41(
 );
 
 // src/components/Icon/icons/CloseIcon.tsx
-import { jsx as jsx42 } from "react/jsx-runtime";
-var CloseIcon = (props) => /* @__PURE__ */ jsx42(
+import { jsx as jsx44 } from "react/jsx-runtime";
+var CloseIcon = (props) => /* @__PURE__ */ jsx44(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx42(
+    children: /* @__PURE__ */ jsx44(
       "path",
       {
         clipRule: "evenodd",
@@ -2530,14 +2724,14 @@ var CloseIcon = (props) => /* @__PURE__ */ jsx42(
 );
 
 // src/components/Icon/icons/CloseOctagonIcon.tsx
-import { jsx as jsx43 } from "react/jsx-runtime";
-var CloseOctagonIcon = (props) => /* @__PURE__ */ jsx43(
+import { jsx as jsx45 } from "react/jsx-runtime";
+var CloseOctagonIcon = (props) => /* @__PURE__ */ jsx45(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx43(
+    children: /* @__PURE__ */ jsx45(
       "path",
       {
         clipRule: "evenodd",
@@ -2550,14 +2744,14 @@ var CloseOctagonIcon = (props) => /* @__PURE__ */ jsx43(
 );
 
 // src/components/Icon/icons/ClosedCaptionsIcon.tsx
-import { jsx as jsx44 } from "react/jsx-runtime";
-var ClosedCaptionsIcon = (props) => /* @__PURE__ */ jsx44(
+import { jsx as jsx46 } from "react/jsx-runtime";
+var ClosedCaptionsIcon = (props) => /* @__PURE__ */ jsx46(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx44(
+    children: /* @__PURE__ */ jsx46(
       "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",
@@ -2568,14 +2762,14 @@ var ClosedCaptionsIcon = (props) => /* @__PURE__ */ jsx44(
 );
 
 // src/components/Icon/icons/CollapseDiagonalIcon.tsx
-import { jsx as jsx45 } from "react/jsx-runtime";
-var CollapseDiagonalIcon = (props) => /* @__PURE__ */ jsx45(
+import { jsx as jsx47 } from "react/jsx-runtime";
+var CollapseDiagonalIcon = (props) => /* @__PURE__ */ jsx47(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx45(
+    children: /* @__PURE__ */ jsx47(
       "path",
       {
         clipRule: "evenodd",
@@ -2588,14 +2782,14 @@ var CollapseDiagonalIcon = (props) => /* @__PURE__ */ jsx45(
 );
 
 // src/components/Icon/icons/CommentsIcon.tsx
-import { jsx as jsx46 } from "react/jsx-runtime";
-var CommentsIcon = (props) => /* @__PURE__ */ jsx46(
+import { jsx as jsx48 } from "react/jsx-runtime";
+var CommentsIcon = (props) => /* @__PURE__ */ jsx48(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx46(
+    children: /* @__PURE__ */ jsx48(
       "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",
@@ -2606,14 +2800,14 @@ var CommentsIcon = (props) => /* @__PURE__ */ jsx46(
 );
 
 // src/components/Icon/icons/CompanyIcon.tsx
-import { jsx as jsx47 } from "react/jsx-runtime";
-var CompanyIcon = (props) => /* @__PURE__ */ jsx47(
+import { jsx as jsx49 } from "react/jsx-runtime";
+var CompanyIcon = (props) => /* @__PURE__ */ jsx49(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx47(
+    children: /* @__PURE__ */ jsx49(
       "path",
       {
         clipRule: "evenodd",
@@ -2626,14 +2820,14 @@ var CompanyIcon = (props) => /* @__PURE__ */ jsx47(
 );
 
 // src/components/Icon/icons/CompareIcon.tsx
-import { jsx as jsx48 } from "react/jsx-runtime";
-var CompareIcon = (props) => /* @__PURE__ */ jsx48(
+import { jsx as jsx50 } from "react/jsx-runtime";
+var CompareIcon = (props) => /* @__PURE__ */ jsx50(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx48(
+    children: /* @__PURE__ */ jsx50(
       "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",
@@ -2644,14 +2838,14 @@ var CompareIcon = (props) => /* @__PURE__ */ jsx48(
 );
 
 // src/components/Icon/icons/ContentLibraryIcon.tsx
-import { jsx as jsx49 } from "react/jsx-runtime";
-var ContentLibraryIcon = (props) => /* @__PURE__ */ jsx49(
+import { jsx as jsx51 } from "react/jsx-runtime";
+var ContentLibraryIcon = (props) => /* @__PURE__ */ jsx51(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx49(
+    children: /* @__PURE__ */ jsx51(
       "path",
       {
         clipRule: "evenodd",
@@ -2664,14 +2858,14 @@ var ContentLibraryIcon = (props) => /* @__PURE__ */ jsx49(
 );
 
 // src/components/Icon/icons/ControlsIcon.tsx
-import { jsx as jsx50 } from "react/jsx-runtime";
-var ControlsIcon = (props) => /* @__PURE__ */ jsx50(
+import { jsx as jsx52 } from "react/jsx-runtime";
+var ControlsIcon = (props) => /* @__PURE__ */ jsx52(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx50(
+    children: /* @__PURE__ */ jsx52(
       "path",
       {
         clipRule: "evenodd",
@@ -2684,14 +2878,14 @@ var ControlsIcon = (props) => /* @__PURE__ */ jsx50(
 );
 
 // src/components/Icon/icons/CursorClickIcon.tsx
-import { jsx as jsx51 } from "react/jsx-runtime";
-var CursorClickIcon = (props) => /* @__PURE__ */ jsx51(
+import { jsx as jsx53 } from "react/jsx-runtime";
+var CursorClickIcon = (props) => /* @__PURE__ */ jsx53(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx51(
+    children: /* @__PURE__ */ jsx53(
       "path",
       {
         clipRule: "evenodd",
@@ -2704,14 +2898,14 @@ var CursorClickIcon = (props) => /* @__PURE__ */ jsx51(
 );
 
 // src/components/Icon/icons/DeleteIcon.tsx
-import { jsx as jsx52 } from "react/jsx-runtime";
-var DeleteIcon = (props) => /* @__PURE__ */ jsx52(
+import { jsx as jsx54 } from "react/jsx-runtime";
+var DeleteIcon = (props) => /* @__PURE__ */ jsx54(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx52(
+    children: /* @__PURE__ */ jsx54(
       "path",
       {
         clipRule: "evenodd",
@@ -2724,14 +2918,14 @@ var DeleteIcon = (props) => /* @__PURE__ */ jsx52(
 );
 
 // src/components/Icon/icons/DesktopIcon.tsx
-import { jsx as jsx53 } from "react/jsx-runtime";
-var DesktopIcon = (props) => /* @__PURE__ */ jsx53(
+import { jsx as jsx55 } from "react/jsx-runtime";
+var DesktopIcon = (props) => /* @__PURE__ */ jsx55(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx53(
+    children: /* @__PURE__ */ jsx55(
       "path",
       {
         clipRule: "evenodd",
@@ -2744,14 +2938,14 @@ var DesktopIcon = (props) => /* @__PURE__ */ jsx53(
 );
 
 // src/components/Icon/icons/DotsHorizontalIcon.tsx
-import { jsx as jsx54 } from "react/jsx-runtime";
-var DotsHorizontalIcon = (props) => /* @__PURE__ */ jsx54(
+import { jsx as jsx56 } from "react/jsx-runtime";
+var DotsHorizontalIcon = (props) => /* @__PURE__ */ jsx56(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx54(
+    children: /* @__PURE__ */ jsx56(
       "path",
       {
         clipRule: "evenodd",
@@ -2764,14 +2958,14 @@ var DotsHorizontalIcon = (props) => /* @__PURE__ */ jsx54(
 );
 
 // src/components/Icon/icons/DownloadIcon.tsx
-import { jsx as jsx55 } from "react/jsx-runtime";
-var DownloadIcon = (props) => /* @__PURE__ */ jsx55(
+import { jsx as jsx57 } from "react/jsx-runtime";
+var DownloadIcon = (props) => /* @__PURE__ */ jsx57(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx55(
+    children: /* @__PURE__ */ jsx57(
       "path",
       {
         clipRule: "evenodd",
@@ -2784,14 +2978,14 @@ var DownloadIcon = (props) => /* @__PURE__ */ jsx55(
 );
 
 // src/components/Icon/icons/EditTranscriptIcon.tsx
-import { jsx as jsx56 } from "react/jsx-runtime";
-var EditTranscriptIcon = (props) => /* @__PURE__ */ jsx56(
+import { jsx as jsx58 } from "react/jsx-runtime";
+var EditTranscriptIcon = (props) => /* @__PURE__ */ jsx58(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx56(
+    children: /* @__PURE__ */ jsx58(
       "path",
       {
         clipRule: "evenodd",
@@ -2804,14 +2998,14 @@ var EditTranscriptIcon = (props) => /* @__PURE__ */ jsx56(
 );
 
 // src/components/Icon/icons/EllipsesVerticalIcon.tsx
-import { jsx as jsx57 } from "react/jsx-runtime";
-var EllipsesVerticalIcon = (props) => /* @__PURE__ */ jsx57(
+import { jsx as jsx59 } from "react/jsx-runtime";
+var EllipsesVerticalIcon = (props) => /* @__PURE__ */ jsx59(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx57(
+    children: /* @__PURE__ */ jsx59(
       "path",
       {
         clipRule: "evenodd",
@@ -2824,14 +3018,14 @@ var EllipsesVerticalIcon = (props) => /* @__PURE__ */ jsx57(
 );
 
 // src/components/Icon/icons/EmbedIcon.tsx
-import { jsx as jsx58 } from "react/jsx-runtime";
-var EmbedIcon = (props) => /* @__PURE__ */ jsx58(
+import { jsx as jsx60 } from "react/jsx-runtime";
+var EmbedIcon = (props) => /* @__PURE__ */ jsx60(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx58(
+    children: /* @__PURE__ */ jsx60(
       "path",
       {
         clipRule: "evenodd",
@@ -2844,14 +3038,14 @@ var EmbedIcon = (props) => /* @__PURE__ */ jsx58(
 );
 
 // src/components/Icon/icons/EnvelopeIcon.tsx
-import { jsx as jsx59 } from "react/jsx-runtime";
-var EnvelopeIcon = (props) => /* @__PURE__ */ jsx59(
+import { jsx as jsx61 } from "react/jsx-runtime";
+var EnvelopeIcon = (props) => /* @__PURE__ */ jsx61(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx59(
+    children: /* @__PURE__ */ jsx61(
       "path",
       {
         clipRule: "evenodd",
@@ -2864,14 +3058,14 @@ var EnvelopeIcon = (props) => /* @__PURE__ */ jsx59(
 );
 
 // src/components/Icon/icons/ErrorIcon.tsx
-import { jsx as jsx60 } from "react/jsx-runtime";
-var ErrorIcon = (props) => /* @__PURE__ */ jsx60(
+import { jsx as jsx62 } from "react/jsx-runtime";
+var ErrorIcon = (props) => /* @__PURE__ */ jsx62(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx60(
+    children: /* @__PURE__ */ jsx62(
       "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",
@@ -2882,14 +3076,14 @@ var ErrorIcon = (props) => /* @__PURE__ */ jsx60(
 );
 
 // src/components/Icon/icons/ExpandDiagonalIcon.tsx
-import { jsx as jsx61 } from "react/jsx-runtime";
-var ExpandDiagonalIcon = (props) => /* @__PURE__ */ jsx61(
+import { jsx as jsx63 } from "react/jsx-runtime";
+var ExpandDiagonalIcon = (props) => /* @__PURE__ */ jsx63(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx61(
+    children: /* @__PURE__ */ jsx63(
       "path",
       {
         clipRule: "evenodd",
@@ -2902,14 +3096,14 @@ var ExpandDiagonalIcon = (props) => /* @__PURE__ */ jsx61(
 );
 
 // src/components/Icon/icons/ExpandIcon.tsx
-import { jsx as jsx62 } from "react/jsx-runtime";
-var ExpandIcon = (props) => /* @__PURE__ */ jsx62(
+import { jsx as jsx64 } from "react/jsx-runtime";
+var ExpandIcon = (props) => /* @__PURE__ */ jsx64(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx62(
+    children: /* @__PURE__ */ jsx64(
       "path",
       {
         clipRule: "evenodd",
@@ -2922,14 +3116,14 @@ var ExpandIcon = (props) => /* @__PURE__ */ jsx62(
 );
 
 // src/components/Icon/icons/FavoriteIcon.tsx
-import { jsx as jsx63 } from "react/jsx-runtime";
-var FavoriteIcon = (props) => /* @__PURE__ */ jsx63(
+import { jsx as jsx65 } from "react/jsx-runtime";
+var FavoriteIcon = (props) => /* @__PURE__ */ jsx65(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx63(
+    children: /* @__PURE__ */ jsx65(
       "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",
@@ -2940,14 +3134,14 @@ var FavoriteIcon = (props) => /* @__PURE__ */ jsx63(
 );
 
 // src/components/Icon/icons/FavoriteOutlineIcon.tsx
-import { jsx as jsx64 } from "react/jsx-runtime";
-var FavoriteOutlineIcon = (props) => /* @__PURE__ */ jsx64(
+import { jsx as jsx66 } from "react/jsx-runtime";
+var FavoriteOutlineIcon = (props) => /* @__PURE__ */ jsx66(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx64(
+    children: /* @__PURE__ */ jsx66(
       "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",
@@ -2961,14 +3155,14 @@ var FavoriteOutlineIcon = (props) => /* @__PURE__ */ jsx64(
 );
 
 // src/components/Icon/icons/FileTreeIcon.tsx
-import { jsx as jsx65 } from "react/jsx-runtime";
-var FileTreeIcon = (props) => /* @__PURE__ */ jsx65(
+import { jsx as jsx67 } from "react/jsx-runtime";
+var FileTreeIcon = (props) => /* @__PURE__ */ jsx67(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx65(
+    children: /* @__PURE__ */ jsx67(
       "path",
       {
         clipRule: "evenodd",
@@ -2981,14 +3175,14 @@ var FileTreeIcon = (props) => /* @__PURE__ */ jsx65(
 );
 
 // src/components/Icon/icons/FilterIcon.tsx
-import { jsx as jsx66 } from "react/jsx-runtime";
-var FilterIcon = (props) => /* @__PURE__ */ jsx66(
+import { jsx as jsx68 } from "react/jsx-runtime";
+var FilterIcon = (props) => /* @__PURE__ */ jsx68(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx66(
+    children: /* @__PURE__ */ jsx68(
       "path",
       {
         clipRule: "evenodd",
@@ -3001,14 +3195,14 @@ var FilterIcon = (props) => /* @__PURE__ */ jsx66(
 );
 
 // src/components/Icon/icons/FontsIcon.tsx
-import { jsx as jsx67 } from "react/jsx-runtime";
-var FontsIcon = (props) => /* @__PURE__ */ jsx67(
+import { jsx as jsx69 } from "react/jsx-runtime";
+var FontsIcon = (props) => /* @__PURE__ */ jsx69(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx67(
+    children: /* @__PURE__ */ jsx69(
       "path",
       {
         clipRule: "evenodd",
@@ -3021,14 +3215,14 @@ var FontsIcon = (props) => /* @__PURE__ */ jsx67(
 );
 
 // src/components/Icon/icons/FullScreenIcon.tsx
-import { jsx as jsx68 } from "react/jsx-runtime";
-var FullScreenIcon = (props) => /* @__PURE__ */ jsx68(
+import { jsx as jsx70 } from "react/jsx-runtime";
+var FullScreenIcon = (props) => /* @__PURE__ */ jsx70(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx68(
+    children: /* @__PURE__ */ jsx70(
       "path",
       {
         clipRule: "evenodd",
@@ -3041,14 +3235,14 @@ var FullScreenIcon = (props) => /* @__PURE__ */ jsx68(
 );
 
 // src/components/Icon/icons/GearIcon.tsx
-import { jsx as jsx69 } from "react/jsx-runtime";
-var GearIcon = (props) => /* @__PURE__ */ jsx69(
+import { jsx as jsx71 } from "react/jsx-runtime";
+var GearIcon = (props) => /* @__PURE__ */ jsx71(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx69(
+    children: /* @__PURE__ */ jsx71(
       "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",
@@ -3059,14 +3253,14 @@ var GearIcon = (props) => /* @__PURE__ */ jsx69(
 );
 
 // src/components/Icon/icons/GettingStartedIcon.tsx
-import { jsx as jsx70 } from "react/jsx-runtime";
-var GettingStartedIcon = (props) => /* @__PURE__ */ jsx70(
+import { jsx as jsx72 } from "react/jsx-runtime";
+var GettingStartedIcon = (props) => /* @__PURE__ */ jsx72(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx70(
+    children: /* @__PURE__ */ jsx72(
       "path",
       {
         clipRule: "evenodd",
@@ -3079,14 +3273,14 @@ var GettingStartedIcon = (props) => /* @__PURE__ */ jsx70(
 );
 
 // src/components/Icon/icons/GridIcon.tsx
-import { jsx as jsx71 } from "react/jsx-runtime";
-var GridIcon = (props) => /* @__PURE__ */ jsx71(
+import { jsx as jsx73 } from "react/jsx-runtime";
+var GridIcon = (props) => /* @__PURE__ */ jsx73(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx71(
+    children: /* @__PURE__ */ jsx73(
       "path",
       {
         clipRule: "evenodd",
@@ -3099,14 +3293,14 @@ var GridIcon = (props) => /* @__PURE__ */ jsx71(
 );
 
 // src/components/Icon/icons/GripDotsVerticalIcon.tsx
-import { jsx as jsx72 } from "react/jsx-runtime";
-var GripDotsVerticalIcon = (props) => /* @__PURE__ */ jsx72(
+import { jsx as jsx74 } from "react/jsx-runtime";
+var GripDotsVerticalIcon = (props) => /* @__PURE__ */ jsx74(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx72(
+    children: /* @__PURE__ */ jsx74(
       "path",
       {
         clipRule: "evenodd",
@@ -3119,14 +3313,14 @@ var GripDotsVerticalIcon = (props) => /* @__PURE__ */ jsx72(
 );
 
 // src/components/Icon/icons/HelpCenterIcon.tsx
-import { jsx as jsx73 } from "react/jsx-runtime";
-var HelpCenterIcon = (props) => /* @__PURE__ */ jsx73(
+import { jsx as jsx75 } from "react/jsx-runtime";
+var HelpCenterIcon = (props) => /* @__PURE__ */ jsx75(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx73(
+    children: /* @__PURE__ */ jsx75(
       "path",
       {
         clipRule: "evenodd",
@@ -3139,14 +3333,14 @@ var HelpCenterIcon = (props) => /* @__PURE__ */ jsx73(
 );
 
 // src/components/Icon/icons/HideIcon.tsx
-import { jsx as jsx74 } from "react/jsx-runtime";
-var HideIcon = (props) => /* @__PURE__ */ jsx74(
+import { jsx as jsx76 } from "react/jsx-runtime";
+var HideIcon = (props) => /* @__PURE__ */ jsx76(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx74(
+    children: /* @__PURE__ */ jsx76(
       "path",
       {
         clipRule: "evenodd",
@@ -3159,14 +3353,14 @@ var HideIcon = (props) => /* @__PURE__ */ jsx74(
 );
 
 // src/components/Icon/icons/HomeIcon.tsx
-import { jsx as jsx75 } from "react/jsx-runtime";
-var HomeIcon = (props) => /* @__PURE__ */ jsx75(
+import { jsx as jsx77 } from "react/jsx-runtime";
+var HomeIcon = (props) => /* @__PURE__ */ jsx77(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx75(
+    children: /* @__PURE__ */ jsx77(
       "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",
@@ -3177,14 +3371,14 @@ var HomeIcon = (props) => /* @__PURE__ */ jsx75(
 );
 
 // src/components/Icon/icons/HourglassIcon.tsx
-import { jsx as jsx76 } from "react/jsx-runtime";
-var HourglassIcon = (props) => /* @__PURE__ */ jsx76(
+import { jsx as jsx78 } from "react/jsx-runtime";
+var HourglassIcon = (props) => /* @__PURE__ */ jsx78(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx76(
+    children: /* @__PURE__ */ jsx78(
       "path",
       {
         clipRule: "evenodd",
@@ -3197,14 +3391,14 @@ var HourglassIcon = (props) => /* @__PURE__ */ jsx76(
 );
 
 // src/components/Icon/icons/InfoIcon.tsx
-import { jsx as jsx77 } from "react/jsx-runtime";
-var InfoIcon = (props) => /* @__PURE__ */ jsx77(
+import { jsx as jsx79 } from "react/jsx-runtime";
+var InfoIcon = (props) => /* @__PURE__ */ jsx79(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx77(
+    children: /* @__PURE__ */ jsx79(
       "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",
@@ -3215,14 +3409,14 @@ var InfoIcon = (props) => /* @__PURE__ */ jsx77(
 );
 
 // src/components/Icon/icons/IntegrationsIcon.tsx
-import { jsx as jsx78 } from "react/jsx-runtime";
-var IntegrationsIcon = (props) => /* @__PURE__ */ jsx78(
+import { jsx as jsx80 } from "react/jsx-runtime";
+var IntegrationsIcon = (props) => /* @__PURE__ */ jsx80(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx78(
+    children: /* @__PURE__ */ jsx80(
       "path",
       {
         clipRule: "evenodd",
@@ -3235,14 +3429,14 @@ var IntegrationsIcon = (props) => /* @__PURE__ */ jsx78(
 );
 
 // src/components/Icon/icons/LeaveIcon.tsx
-import { jsx as jsx79 } from "react/jsx-runtime";
-var LeaveIcon = (props) => /* @__PURE__ */ jsx79(
+import { jsx as jsx81 } from "react/jsx-runtime";
+var LeaveIcon = (props) => /* @__PURE__ */ jsx81(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx79(
+    children: /* @__PURE__ */ jsx81(
       "path",
       {
         clipRule: "evenodd",
@@ -3255,14 +3449,14 @@ var LeaveIcon = (props) => /* @__PURE__ */ jsx79(
 );
 
 // src/components/Icon/icons/LinkIcon.tsx
-import { jsx as jsx80 } from "react/jsx-runtime";
-var LinkIcon = (props) => /* @__PURE__ */ jsx80(
+import { jsx as jsx82 } from "react/jsx-runtime";
+var LinkIcon = (props) => /* @__PURE__ */ jsx82(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx80(
+    children: /* @__PURE__ */ jsx82(
       "path",
       {
         clipRule: "evenodd",
@@ -3275,14 +3469,14 @@ var LinkIcon = (props) => /* @__PURE__ */ jsx80(
 );
 
 // src/components/Icon/icons/ListIcon.tsx
-import { jsx as jsx81 } from "react/jsx-runtime";
-var ListIcon = (props) => /* @__PURE__ */ jsx81(
+import { jsx as jsx83 } from "react/jsx-runtime";
+var ListIcon = (props) => /* @__PURE__ */ jsx83(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx81(
+    children: /* @__PURE__ */ jsx83(
       "path",
       {
         clipRule: "evenodd",
@@ -3295,14 +3489,14 @@ var ListIcon = (props) => /* @__PURE__ */ jsx81(
 );
 
 // src/components/Icon/icons/LiveIcon.tsx
-import { jsx as jsx82 } from "react/jsx-runtime";
-var LiveIcon = (props) => /* @__PURE__ */ jsx82(
+import { jsx as jsx84 } from "react/jsx-runtime";
+var LiveIcon = (props) => /* @__PURE__ */ jsx84(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx82(
+    children: /* @__PURE__ */ jsx84(
       "path",
       {
         clipRule: "evenodd",
@@ -3315,14 +3509,14 @@ var LiveIcon = (props) => /* @__PURE__ */ jsx82(
 );
 
 // src/components/Icon/icons/LockIcon.tsx
-import { jsx as jsx83 } from "react/jsx-runtime";
-var LockIcon = (props) => /* @__PURE__ */ jsx83(
+import { jsx as jsx85 } from "react/jsx-runtime";
+var LockIcon = (props) => /* @__PURE__ */ jsx85(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx83(
+    children: /* @__PURE__ */ jsx85(
       "path",
       {
         clipRule: "evenodd",
@@ -3335,14 +3529,14 @@ var LockIcon = (props) => /* @__PURE__ */ jsx83(
 );
 
 // src/components/Icon/icons/LogoutIcon.tsx
-import { jsx as jsx84 } from "react/jsx-runtime";
-var LogoutIcon = (props) => /* @__PURE__ */ jsx84(
+import { jsx as jsx86 } from "react/jsx-runtime";
+var LogoutIcon = (props) => /* @__PURE__ */ jsx86(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx84(
+    children: /* @__PURE__ */ jsx86(
       "path",
       {
         clipRule: "evenodd",
@@ -3355,14 +3549,14 @@ var LogoutIcon = (props) => /* @__PURE__ */ jsx84(
 );
 
 // src/components/Icon/icons/MaximizeIcon.tsx
-import { jsx as jsx85 } from "react/jsx-runtime";
-var MaximizeIcon = (props) => /* @__PURE__ */ jsx85(
+import { jsx as jsx87 } from "react/jsx-runtime";
+var MaximizeIcon = (props) => /* @__PURE__ */ jsx87(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx85(
+    children: /* @__PURE__ */ jsx87(
       "path",
       {
         clipRule: "evenodd",
@@ -3375,14 +3569,14 @@ var MaximizeIcon = (props) => /* @__PURE__ */ jsx85(
 );
 
 // src/components/Icon/icons/MediaIcon.tsx
-import { jsx as jsx86 } from "react/jsx-runtime";
-var MediaIcon = (props) => /* @__PURE__ */ jsx86(
+import { jsx as jsx88 } from "react/jsx-runtime";
+var MediaIcon = (props) => /* @__PURE__ */ jsx88(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx86(
+    children: /* @__PURE__ */ jsx88(
       "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",
@@ -3393,14 +3587,14 @@ var MediaIcon = (props) => /* @__PURE__ */ jsx86(
 );
 
 // src/components/Icon/icons/MenuIcon.tsx
-import { jsx as jsx87 } from "react/jsx-runtime";
-var MenuIcon = (props) => /* @__PURE__ */ jsx87(
+import { jsx as jsx89 } from "react/jsx-runtime";
+var MenuIcon = (props) => /* @__PURE__ */ jsx89(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx87(
+    children: /* @__PURE__ */ jsx89(
       "path",
       {
         clipRule: "evenodd",
@@ -3413,14 +3607,14 @@ var MenuIcon = (props) => /* @__PURE__ */ jsx87(
 );
 
 // src/components/Icon/icons/MicIcon.tsx
-import { jsx as jsx88 } from "react/jsx-runtime";
-var MicIcon = (props) => /* @__PURE__ */ jsx88(
+import { jsx as jsx90 } from "react/jsx-runtime";
+var MicIcon = (props) => /* @__PURE__ */ jsx90(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx88(
+    children: /* @__PURE__ */ jsx90(
       "path",
       {
         clipRule: "evenodd",
@@ -3433,14 +3627,14 @@ var MicIcon = (props) => /* @__PURE__ */ jsx88(
 );
 
 // src/components/Icon/icons/MicOffIcon.tsx
-import { jsx as jsx89 } from "react/jsx-runtime";
-var MicOffIcon = (props) => /* @__PURE__ */ jsx89(
+import { jsx as jsx91 } from "react/jsx-runtime";
+var MicOffIcon = (props) => /* @__PURE__ */ jsx91(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx89(
+    children: /* @__PURE__ */ jsx91(
       "path",
       {
         clipRule: "evenodd",
@@ -3453,14 +3647,14 @@ var MicOffIcon = (props) => /* @__PURE__ */ jsx89(
 );
 
 // src/components/Icon/icons/MinimizeIcon.tsx
-import { jsx as jsx90 } from "react/jsx-runtime";
-var MinimizeIcon = (props) => /* @__PURE__ */ jsx90(
+import { jsx as jsx92 } from "react/jsx-runtime";
+var MinimizeIcon = (props) => /* @__PURE__ */ jsx92(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx90(
+    children: /* @__PURE__ */ jsx92(
       "path",
       {
         clipRule: "evenodd",
@@ -3473,14 +3667,14 @@ var MinimizeIcon = (props) => /* @__PURE__ */ jsx90(
 );
 
 // src/components/Icon/icons/MinusCircleIcon.tsx
-import { jsx as jsx91 } from "react/jsx-runtime";
-var MinusCircleIcon = (props) => /* @__PURE__ */ jsx91(
+import { jsx as jsx93 } from "react/jsx-runtime";
+var MinusCircleIcon = (props) => /* @__PURE__ */ jsx93(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx91(
+    children: /* @__PURE__ */ jsx93(
       "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",
@@ -3491,14 +3685,14 @@ var MinusCircleIcon = (props) => /* @__PURE__ */ jsx91(
 );
 
 // src/components/Icon/icons/MobileIcon.tsx
-import { jsx as jsx92 } from "react/jsx-runtime";
-var MobileIcon = (props) => /* @__PURE__ */ jsx92(
+import { jsx as jsx94 } from "react/jsx-runtime";
+var MobileIcon = (props) => /* @__PURE__ */ jsx94(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx92(
+    children: /* @__PURE__ */ jsx94(
       "path",
       {
         clipRule: "evenodd",
@@ -3511,14 +3705,14 @@ var MobileIcon = (props) => /* @__PURE__ */ jsx92(
 );
 
 // src/components/Icon/icons/MoreOptionsIcon.tsx
-import { jsx as jsx93 } from "react/jsx-runtime";
-var MoreOptionsIcon = (props) => /* @__PURE__ */ jsx93(
+import { jsx as jsx95 } from "react/jsx-runtime";
+var MoreOptionsIcon = (props) => /* @__PURE__ */ jsx95(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx93(
+    children: /* @__PURE__ */ jsx95(
       "path",
       {
         clipRule: "evenodd",
@@ -3531,14 +3725,14 @@ var MoreOptionsIcon = (props) => /* @__PURE__ */ jsx93(
 );
 
 // src/components/Icon/icons/MoveLeftIcon.tsx
-import { jsx as jsx94 } from "react/jsx-runtime";
-var MoveLeftIcon = (props) => /* @__PURE__ */ jsx94(
+import { jsx as jsx96 } from "react/jsx-runtime";
+var MoveLeftIcon = (props) => /* @__PURE__ */ jsx96(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx94(
+    children: /* @__PURE__ */ jsx96(
       "path",
       {
         clipRule: "evenodd",
@@ -3551,14 +3745,14 @@ var MoveLeftIcon = (props) => /* @__PURE__ */ jsx94(
 );
 
 // src/components/Icon/icons/MoveRightIcon.tsx
-import { jsx as jsx95 } from "react/jsx-runtime";
-var MoveRightIcon = (props) => /* @__PURE__ */ jsx95(
+import { jsx as jsx97 } from "react/jsx-runtime";
+var MoveRightIcon = (props) => /* @__PURE__ */ jsx97(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx95(
+    children: /* @__PURE__ */ jsx97(
       "path",
       {
         clipRule: "evenodd",
@@ -3571,14 +3765,14 @@ var MoveRightIcon = (props) => /* @__PURE__ */ jsx95(
 );
 
 // src/components/Icon/icons/MusicIcon.tsx
-import { jsx as jsx96 } from "react/jsx-runtime";
-var MusicIcon = (props) => /* @__PURE__ */ jsx96(
+import { jsx as jsx98 } from "react/jsx-runtime";
+var MusicIcon = (props) => /* @__PURE__ */ jsx98(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx96(
+    children: /* @__PURE__ */ jsx98(
       "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",
@@ -3589,14 +3783,14 @@ var MusicIcon = (props) => /* @__PURE__ */ jsx96(
 );
 
 // src/components/Icon/icons/OpenNewIcon.tsx
-import { jsx as jsx97 } from "react/jsx-runtime";
-var OpenNewIcon = (props) => /* @__PURE__ */ jsx97(
+import { jsx as jsx99 } from "react/jsx-runtime";
+var OpenNewIcon = (props) => /* @__PURE__ */ jsx99(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx97(
+    children: /* @__PURE__ */ jsx99(
       "path",
       {
         clipRule: "evenodd",
@@ -3609,14 +3803,14 @@ var OpenNewIcon = (props) => /* @__PURE__ */ jsx97(
 );
 
 // src/components/Icon/icons/OverviewIcon.tsx
-import { jsx as jsx98 } from "react/jsx-runtime";
-var OverviewIcon = (props) => /* @__PURE__ */ jsx98(
+import { jsx as jsx100 } from "react/jsx-runtime";
+var OverviewIcon = (props) => /* @__PURE__ */ jsx100(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx98(
+    children: /* @__PURE__ */ jsx100(
       "path",
       {
         clipRule: "evenodd",
@@ -3629,14 +3823,14 @@ var OverviewIcon = (props) => /* @__PURE__ */ jsx98(
 );
 
 // src/components/Icon/icons/PageIcon.tsx
-import { jsx as jsx99 } from "react/jsx-runtime";
-var PageIcon = (props) => /* @__PURE__ */ jsx99(
+import { jsx as jsx101 } from "react/jsx-runtime";
+var PageIcon = (props) => /* @__PURE__ */ jsx101(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx99(
+    children: /* @__PURE__ */ jsx101(
       "path",
       {
         clipRule: "evenodd",
@@ -3649,14 +3843,14 @@ var PageIcon = (props) => /* @__PURE__ */ jsx99(
 );
 
 // src/components/Icon/icons/PanelLeftIcon.tsx
-import { jsx as jsx100 } from "react/jsx-runtime";
-var PanelLeftIcon = (props) => /* @__PURE__ */ jsx100(
+import { jsx as jsx102 } from "react/jsx-runtime";
+var PanelLeftIcon = (props) => /* @__PURE__ */ jsx102(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx100(
+    children: /* @__PURE__ */ jsx102(
       "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",
@@ -3667,14 +3861,14 @@ var PanelLeftIcon = (props) => /* @__PURE__ */ jsx100(
 );
 
 // src/components/Icon/icons/PanelRightIcon.tsx
-import { jsx as jsx101 } from "react/jsx-runtime";
-var PanelRightIcon = (props) => /* @__PURE__ */ jsx101(
+import { jsx as jsx103 } from "react/jsx-runtime";
+var PanelRightIcon = (props) => /* @__PURE__ */ jsx103(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx101(
+    children: /* @__PURE__ */ jsx103(
       "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",
@@ -3685,14 +3879,14 @@ var PanelRightIcon = (props) => /* @__PURE__ */ jsx101(
 );
 
 // src/components/Icon/icons/PanelUpIcon.tsx
-import { jsx as jsx102 } from "react/jsx-runtime";
-var PanelUpIcon = (props) => /* @__PURE__ */ jsx102(
+import { jsx as jsx104 } from "react/jsx-runtime";
+var PanelUpIcon = (props) => /* @__PURE__ */ jsx104(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx102(
+    children: /* @__PURE__ */ jsx104(
       "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",
@@ -3703,14 +3897,14 @@ var PanelUpIcon = (props) => /* @__PURE__ */ jsx102(
 );
 
 // src/components/Icon/icons/PasswordIcon.tsx
-import { jsx as jsx103 } from "react/jsx-runtime";
-var PasswordIcon = (props) => /* @__PURE__ */ jsx103(
+import { jsx as jsx105 } from "react/jsx-runtime";
+var PasswordIcon = (props) => /* @__PURE__ */ jsx105(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx103(
+    children: /* @__PURE__ */ jsx105(
       "path",
       {
         clipRule: "evenodd",
@@ -3723,14 +3917,14 @@ var PasswordIcon = (props) => /* @__PURE__ */ jsx103(
 );
 
 // src/components/Icon/icons/PencilIcon.tsx
-import { jsx as jsx104 } from "react/jsx-runtime";
-var PencilIcon = (props) => /* @__PURE__ */ jsx104(
+import { jsx as jsx106 } from "react/jsx-runtime";
+var PencilIcon = (props) => /* @__PURE__ */ jsx106(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx104(
+    children: /* @__PURE__ */ jsx106(
       "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",
@@ -3741,14 +3935,14 @@ var PencilIcon = (props) => /* @__PURE__ */ jsx104(
 );
 
 // src/components/Icon/icons/PeopleIcon.tsx
-import { jsx as jsx105 } from "react/jsx-runtime";
-var PeopleIcon = (props) => /* @__PURE__ */ jsx105(
+import { jsx as jsx107 } from "react/jsx-runtime";
+var PeopleIcon = (props) => /* @__PURE__ */ jsx107(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx105(
+    children: /* @__PURE__ */ jsx107(
       "path",
       {
         clipRule: "evenodd",
@@ -3761,14 +3955,14 @@ var PeopleIcon = (props) => /* @__PURE__ */ jsx105(
 );
 
 // src/components/Icon/icons/PinIcon.tsx
-import { jsx as jsx106 } from "react/jsx-runtime";
-var PinIcon = (props) => /* @__PURE__ */ jsx106(
+import { jsx as jsx108 } from "react/jsx-runtime";
+var PinIcon = (props) => /* @__PURE__ */ jsx108(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx106(
+    children: /* @__PURE__ */ jsx108(
       "path",
       {
         clipRule: "evenodd",
@@ -3781,14 +3975,14 @@ var PinIcon = (props) => /* @__PURE__ */ jsx106(
 );
 
 // src/components/Icon/icons/PinSlashIcon.tsx
-import { jsx as jsx107 } from "react/jsx-runtime";
-var PinSlashIcon = (props) => /* @__PURE__ */ jsx107(
+import { jsx as jsx109 } from "react/jsx-runtime";
+var PinSlashIcon = (props) => /* @__PURE__ */ jsx109(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx107(
+    children: /* @__PURE__ */ jsx109(
       "path",
       {
         clipRule: "evenodd",
@@ -3801,14 +3995,14 @@ var PinSlashIcon = (props) => /* @__PURE__ */ jsx107(
 );
 
 // src/components/Icon/icons/PlayIcon.tsx
-import { jsx as jsx108 } from "react/jsx-runtime";
-var PlayIcon = (props) => /* @__PURE__ */ jsx108(
+import { jsx as jsx110 } from "react/jsx-runtime";
+var PlayIcon = (props) => /* @__PURE__ */ jsx110(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx108(
+    children: /* @__PURE__ */ jsx110(
       "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",
@@ -3819,14 +4013,14 @@ var PlayIcon = (props) => /* @__PURE__ */ jsx108(
 );
 
 // src/components/Icon/icons/PlayerIcon.tsx
-import { jsx as jsx109 } from "react/jsx-runtime";
-var PlayerIcon = (props) => /* @__PURE__ */ jsx109(
+import { jsx as jsx111 } from "react/jsx-runtime";
+var PlayerIcon = (props) => /* @__PURE__ */ jsx111(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx109(
+    children: /* @__PURE__ */ jsx111(
       "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",
@@ -3837,14 +4031,14 @@ var PlayerIcon = (props) => /* @__PURE__ */ jsx109(
 );
 
 // src/components/Icon/icons/PlusIcon.tsx
-import { jsx as jsx110 } from "react/jsx-runtime";
-var PlusIcon = (props) => /* @__PURE__ */ jsx110(
+import { jsx as jsx112 } from "react/jsx-runtime";
+var PlusIcon = (props) => /* @__PURE__ */ jsx112(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx110(
+    children: /* @__PURE__ */ jsx112(
       "path",
       {
         clipRule: "evenodd",
@@ -3857,14 +4051,14 @@ var PlusIcon = (props) => /* @__PURE__ */ jsx110(
 );
 
 // src/components/Icon/icons/PodcastIcon.tsx
-import { jsx as jsx111 } from "react/jsx-runtime";
-var PodcastIcon = (props) => /* @__PURE__ */ jsx111(
+import { jsx as jsx113 } from "react/jsx-runtime";
+var PodcastIcon = (props) => /* @__PURE__ */ jsx113(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx111(
+    children: /* @__PURE__ */ jsx113(
       "path",
       {
         clipRule: "evenodd",
@@ -3877,14 +4071,14 @@ var PodcastIcon = (props) => /* @__PURE__ */ jsx111(
 );
 
 // src/components/Icon/icons/PreviewIcon.tsx
-import { jsx as jsx112 } from "react/jsx-runtime";
-var PreviewIcon = (props) => /* @__PURE__ */ jsx112(
+import { jsx as jsx114 } from "react/jsx-runtime";
+var PreviewIcon = (props) => /* @__PURE__ */ jsx114(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx112(
+    children: /* @__PURE__ */ jsx114(
       "path",
       {
         clipRule: "evenodd",
@@ -3897,14 +4091,14 @@ var PreviewIcon = (props) => /* @__PURE__ */ jsx112(
 );
 
 // src/components/Icon/icons/PrivateUserSessionsIcon.tsx
-import { jsx as jsx113 } from "react/jsx-runtime";
-var PrivateUserSessionsIcon = (props) => /* @__PURE__ */ jsx113(
+import { jsx as jsx115 } from "react/jsx-runtime";
+var PrivateUserSessionsIcon = (props) => /* @__PURE__ */ jsx115(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx113(
+    children: /* @__PURE__ */ jsx115(
       "path",
       {
         clipRule: "evenodd",
@@ -3917,7 +4111,7 @@ var PrivateUserSessionsIcon = (props) => /* @__PURE__ */ jsx113(
 );
 
 // src/components/Icon/icons/ProjectIcon.tsx
-import { jsx as jsx114, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx116, jsxs as jsxs3 } from "react/jsx-runtime";
 var ProjectIcon = (props) => /* @__PURE__ */ jsxs3(
   "svg",
   {
@@ -3925,7 +4119,7 @@ var ProjectIcon = (props) => /* @__PURE__ */ jsxs3(
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
     children: [
-      /* @__PURE__ */ jsx114(
+      /* @__PURE__ */ jsx116(
         "path",
         {
           clipRule: "evenodd",
@@ -3934,7 +4128,7 @@ var ProjectIcon = (props) => /* @__PURE__ */ jsxs3(
           fillRule: "evenodd"
         }
       ),
-      /* @__PURE__ */ jsx114(
+      /* @__PURE__ */ jsx116(
         "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",
@@ -3946,14 +4140,14 @@ var ProjectIcon = (props) => /* @__PURE__ */ jsxs3(
 );
 
 // src/components/Icon/icons/PropertiesIcon.tsx
-import { jsx as jsx115 } from "react/jsx-runtime";
-var PropertiesIcon = (props) => /* @__PURE__ */ jsx115(
+import { jsx as jsx117 } from "react/jsx-runtime";
+var PropertiesIcon = (props) => /* @__PURE__ */ jsx117(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx115(
+    children: /* @__PURE__ */ jsx117(
       "path",
       {
         clipRule: "evenodd",
@@ -3966,14 +4160,14 @@ var PropertiesIcon = (props) => /* @__PURE__ */ jsx115(
 );
 
 // src/components/Icon/icons/QuestionMarkIcon.tsx
-import { jsx as jsx116 } from "react/jsx-runtime";
-var QuestionMarkIcon = (props) => /* @__PURE__ */ jsx116(
+import { jsx as jsx118 } from "react/jsx-runtime";
+var QuestionMarkIcon = (props) => /* @__PURE__ */ jsx118(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx116(
+    children: /* @__PURE__ */ jsx118(
       "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",
@@ -3984,14 +4178,14 @@ var QuestionMarkIcon = (props) => /* @__PURE__ */ jsx116(
 );
 
 // src/components/Icon/icons/ReactIcon.tsx
-import { jsx as jsx117 } from "react/jsx-runtime";
-var ReactIcon = (props) => /* @__PURE__ */ jsx117(
+import { jsx as jsx119 } from "react/jsx-runtime";
+var ReactIcon = (props) => /* @__PURE__ */ jsx119(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx117(
+    children: /* @__PURE__ */ jsx119(
       "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",
@@ -4002,14 +4196,14 @@ var ReactIcon = (props) => /* @__PURE__ */ jsx117(
 );
 
 // src/components/Icon/icons/RecordIcon.tsx
-import { jsx as jsx118 } from "react/jsx-runtime";
-var RecordIcon = (props) => /* @__PURE__ */ jsx118(
+import { jsx as jsx120 } from "react/jsx-runtime";
+var RecordIcon = (props) => /* @__PURE__ */ jsx120(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx118(
+    children: /* @__PURE__ */ jsx120(
       "path",
       {
         clipRule: "evenodd",
@@ -4022,14 +4216,14 @@ var RecordIcon = (props) => /* @__PURE__ */ jsx118(
 );
 
 // src/components/Icon/icons/RedoIcon.tsx
-import { jsx as jsx119 } from "react/jsx-runtime";
-var RedoIcon = (props) => /* @__PURE__ */ jsx119(
+import { jsx as jsx121 } from "react/jsx-runtime";
+var RedoIcon = (props) => /* @__PURE__ */ jsx121(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx119(
+    children: /* @__PURE__ */ jsx121(
       "path",
       {
         clipRule: "evenodd",
@@ -4042,14 +4236,14 @@ var RedoIcon = (props) => /* @__PURE__ */ jsx119(
 );
 
 // src/components/Icon/icons/ReplaceIcon.tsx
-import { jsx as jsx120 } from "react/jsx-runtime";
-var ReplaceIcon = (props) => /* @__PURE__ */ jsx120(
+import { jsx as jsx122 } from "react/jsx-runtime";
+var ReplaceIcon = (props) => /* @__PURE__ */ jsx122(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx120(
+    children: /* @__PURE__ */ jsx122(
       "path",
       {
         clipRule: "evenodd",
@@ -4062,14 +4256,14 @@ var ReplaceIcon = (props) => /* @__PURE__ */ jsx120(
 );
 
 // src/components/Icon/icons/ReplyIcon.tsx
-import { jsx as jsx121 } from "react/jsx-runtime";
-var ReplyIcon = (props) => /* @__PURE__ */ jsx121(
+import { jsx as jsx123 } from "react/jsx-runtime";
+var ReplyIcon = (props) => /* @__PURE__ */ jsx123(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx121(
+    children: /* @__PURE__ */ jsx123(
       "path",
       {
         clipRule: "evenodd",
@@ -4082,14 +4276,14 @@ var ReplyIcon = (props) => /* @__PURE__ */ jsx121(
 );
 
 // src/components/Icon/icons/SaveAsCopyIcon.tsx
-import { jsx as jsx122 } from "react/jsx-runtime";
-var SaveAsCopyIcon = (props) => /* @__PURE__ */ jsx122(
+import { jsx as jsx124 } from "react/jsx-runtime";
+var SaveAsCopyIcon = (props) => /* @__PURE__ */ jsx124(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx122(
+    children: /* @__PURE__ */ jsx124(
       "path",
       {
         clipRule: "evenodd",
@@ -4102,14 +4296,14 @@ var SaveAsCopyIcon = (props) => /* @__PURE__ */ jsx122(
 );
 
 // src/components/Icon/icons/SaveIcon.tsx
-import { jsx as jsx123 } from "react/jsx-runtime";
-var SaveIcon = (props) => /* @__PURE__ */ jsx123(
+import { jsx as jsx125 } from "react/jsx-runtime";
+var SaveIcon = (props) => /* @__PURE__ */ jsx125(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx123(
+    children: /* @__PURE__ */ jsx125(
       "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",
@@ -4120,14 +4314,14 @@ var SaveIcon = (props) => /* @__PURE__ */ jsx123(
 );
 
 // src/components/Icon/icons/ScissorsIcon.tsx
-import { jsx as jsx124 } from "react/jsx-runtime";
-var ScissorsIcon = (props) => /* @__PURE__ */ jsx124(
+import { jsx as jsx126 } from "react/jsx-runtime";
+var ScissorsIcon = (props) => /* @__PURE__ */ jsx126(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx124(
+    children: /* @__PURE__ */ jsx126(
       "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",
@@ -4138,14 +4332,14 @@ var ScissorsIcon = (props) => /* @__PURE__ */ jsx124(
 );
 
 // src/components/Icon/icons/ScreenshareOffIcon.tsx
-import { jsx as jsx125 } from "react/jsx-runtime";
-var ScreenshareOffIcon = (props) => /* @__PURE__ */ jsx125(
+import { jsx as jsx127 } from "react/jsx-runtime";
+var ScreenshareOffIcon = (props) => /* @__PURE__ */ jsx127(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx125(
+    children: /* @__PURE__ */ jsx127(
       "path",
       {
         clipRule: "evenodd",
@@ -4158,14 +4352,14 @@ var ScreenshareOffIcon = (props) => /* @__PURE__ */ jsx125(
 );
 
 // src/components/Icon/icons/ScreenshareOnIcon.tsx
-import { jsx as jsx126 } from "react/jsx-runtime";
-var ScreenshareOnIcon = (props) => /* @__PURE__ */ jsx126(
+import { jsx as jsx128 } from "react/jsx-runtime";
+var ScreenshareOnIcon = (props) => /* @__PURE__ */ jsx128(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx126(
+    children: /* @__PURE__ */ jsx128(
       "path",
       {
         clipRule: "evenodd",
@@ -4178,14 +4372,14 @@ var ScreenshareOnIcon = (props) => /* @__PURE__ */ jsx126(
 );
 
 // src/components/Icon/icons/SearchIcon.tsx
-import { jsx as jsx127 } from "react/jsx-runtime";
-var SearchIcon = (props) => /* @__PURE__ */ jsx127(
+import { jsx as jsx129 } from "react/jsx-runtime";
+var SearchIcon = (props) => /* @__PURE__ */ jsx129(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx127(
+    children: /* @__PURE__ */ jsx129(
       "path",
       {
         clipRule: "evenodd",
@@ -4198,14 +4392,14 @@ var SearchIcon = (props) => /* @__PURE__ */ jsx127(
 );
 
 // src/components/Icon/icons/SendIcon.tsx
-import { jsx as jsx128 } from "react/jsx-runtime";
-var SendIcon = (props) => /* @__PURE__ */ jsx128(
+import { jsx as jsx130 } from "react/jsx-runtime";
+var SendIcon = (props) => /* @__PURE__ */ jsx130(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx128(
+    children: /* @__PURE__ */ jsx130(
       "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",
@@ -4216,14 +4410,14 @@ var SendIcon = (props) => /* @__PURE__ */ jsx128(
 );
 
 // src/components/Icon/icons/ShapesIcon.tsx
-import { jsx as jsx129 } from "react/jsx-runtime";
-var ShapesIcon = (props) => /* @__PURE__ */ jsx129(
+import { jsx as jsx131 } from "react/jsx-runtime";
+var ShapesIcon = (props) => /* @__PURE__ */ jsx131(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx129(
+    children: /* @__PURE__ */ jsx131(
       "path",
       {
         clipRule: "evenodd",
@@ -4236,14 +4430,14 @@ var ShapesIcon = (props) => /* @__PURE__ */ jsx129(
 );
 
 // src/components/Icon/icons/ShareIcon.tsx
-import { jsx as jsx130 } from "react/jsx-runtime";
-var ShareIcon = (props) => /* @__PURE__ */ jsx130(
+import { jsx as jsx132 } from "react/jsx-runtime";
+var ShareIcon = (props) => /* @__PURE__ */ jsx132(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx130(
+    children: /* @__PURE__ */ jsx132(
       "path",
       {
         clipRule: "evenodd",
@@ -4256,14 +4450,14 @@ var ShareIcon = (props) => /* @__PURE__ */ jsx130(
 );
 
 // src/components/Icon/icons/SharingPermissionsIcon.tsx
-import { jsx as jsx131 } from "react/jsx-runtime";
-var SharingPermissionsIcon = (props) => /* @__PURE__ */ jsx131(
+import { jsx as jsx133 } from "react/jsx-runtime";
+var SharingPermissionsIcon = (props) => /* @__PURE__ */ jsx133(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx131(
+    children: /* @__PURE__ */ jsx133(
       "path",
       {
         clipRule: "evenodd",
@@ -4276,14 +4470,14 @@ var SharingPermissionsIcon = (props) => /* @__PURE__ */ jsx131(
 );
 
 // src/components/Icon/icons/SimulcastIcon.tsx
-import { jsx as jsx132 } from "react/jsx-runtime";
-var SimulcastIcon = (props) => /* @__PURE__ */ jsx132(
+import { jsx as jsx134 } from "react/jsx-runtime";
+var SimulcastIcon = (props) => /* @__PURE__ */ jsx134(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx132(
+    children: /* @__PURE__ */ jsx134(
       "path",
       {
         clipRule: "evenodd",
@@ -4296,14 +4490,14 @@ var SimulcastIcon = (props) => /* @__PURE__ */ jsx132(
 );
 
 // src/components/Icon/icons/SortIcon.tsx
-import { jsx as jsx133 } from "react/jsx-runtime";
-var SortIcon = (props) => /* @__PURE__ */ jsx133(
+import { jsx as jsx135 } from "react/jsx-runtime";
+var SortIcon = (props) => /* @__PURE__ */ jsx135(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx133(
+    children: /* @__PURE__ */ jsx135(
       "path",
       {
         clipRule: "evenodd",
@@ -4316,14 +4510,14 @@ var SortIcon = (props) => /* @__PURE__ */ jsx133(
 );
 
 // src/components/Icon/icons/SparkleIcon.tsx
-import { jsx as jsx134 } from "react/jsx-runtime";
-var SparkleIcon = (props) => /* @__PURE__ */ jsx134(
+import { jsx as jsx136 } from "react/jsx-runtime";
+var SparkleIcon = (props) => /* @__PURE__ */ jsx136(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx134(
+    children: /* @__PURE__ */ jsx136(
       "path",
       {
         clipRule: "evenodd",
@@ -4336,34 +4530,47 @@ var SparkleIcon = (props) => /* @__PURE__ */ jsx134(
 );
 
 // src/components/Icon/icons/SpinnerIcon.tsx
-import { jsx as jsx135 } from "react/jsx-runtime";
-var SpinnerIcon = (props) => /* @__PURE__ */ jsx135(
+import { jsx as jsx137, jsxs as jsxs4 } from "react/jsx-runtime";
+var SpinnerIcon = (props) => /* @__PURE__ */ jsxs4(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx135(
-      "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__ */ jsx137(
+        "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__ */ jsx137(
+        "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
-import { jsx as jsx136 } from "react/jsx-runtime";
-var StatsIcon = (props) => /* @__PURE__ */ jsx136(
+import { jsx as jsx138 } from "react/jsx-runtime";
+var StatsIcon = (props) => /* @__PURE__ */ jsx138(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx136(
+    children: /* @__PURE__ */ jsx138(
       "path",
       {
         clipRule: "evenodd",
@@ -4376,14 +4583,14 @@ var StatsIcon = (props) => /* @__PURE__ */ jsx136(
 );
 
 // src/components/Icon/icons/SwitchAccountsIcon.tsx
-import { jsx as jsx137 } from "react/jsx-runtime";
-var SwitchAccountsIcon = (props) => /* @__PURE__ */ jsx137(
+import { jsx as jsx139 } from "react/jsx-runtime";
+var SwitchAccountsIcon = (props) => /* @__PURE__ */ jsx139(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx137(
+    children: /* @__PURE__ */ jsx139(
       "path",
       {
         clipRule: "evenodd",
@@ -4396,14 +4603,14 @@ var SwitchAccountsIcon = (props) => /* @__PURE__ */ jsx137(
 );
 
 // src/components/Icon/icons/TagIcon.tsx
-import { jsx as jsx138 } from "react/jsx-runtime";
-var TagIcon = (props) => /* @__PURE__ */ jsx138(
+import { jsx as jsx140 } from "react/jsx-runtime";
+var TagIcon = (props) => /* @__PURE__ */ jsx140(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx138(
+    children: /* @__PURE__ */ jsx140(
       "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",
@@ -4414,14 +4621,14 @@ var TagIcon = (props) => /* @__PURE__ */ jsx138(
 );
 
 // src/components/Icon/icons/ThumbnailIcon.tsx
-import { jsx as jsx139 } from "react/jsx-runtime";
-var ThumbnailIcon = (props) => /* @__PURE__ */ jsx139(
+import { jsx as jsx141 } from "react/jsx-runtime";
+var ThumbnailIcon = (props) => /* @__PURE__ */ jsx141(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx139(
+    children: /* @__PURE__ */ jsx141(
       "path",
       {
         clipRule: "evenodd",
@@ -4434,14 +4641,14 @@ var ThumbnailIcon = (props) => /* @__PURE__ */ jsx139(
 );
 
 // src/components/Icon/icons/ThumbsDownIcon.tsx
-import { jsx as jsx140 } from "react/jsx-runtime";
-var ThumbsDownIcon = (props) => /* @__PURE__ */ jsx140(
+import { jsx as jsx142 } from "react/jsx-runtime";
+var ThumbsDownIcon = (props) => /* @__PURE__ */ jsx142(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx140(
+    children: /* @__PURE__ */ jsx142(
       "path",
       {
         clipRule: "evenodd",
@@ -4454,14 +4661,14 @@ var ThumbsDownIcon = (props) => /* @__PURE__ */ jsx140(
 );
 
 // src/components/Icon/icons/ThumbsUpIcon.tsx
-import { jsx as jsx141 } from "react/jsx-runtime";
-var ThumbsUpIcon = (props) => /* @__PURE__ */ jsx141(
+import { jsx as jsx143 } from "react/jsx-runtime";
+var ThumbsUpIcon = (props) => /* @__PURE__ */ jsx143(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx141(
+    children: /* @__PURE__ */ jsx143(
       "path",
       {
         clipRule: "evenodd",
@@ -4474,14 +4681,14 @@ var ThumbsUpIcon = (props) => /* @__PURE__ */ jsx141(
 );
 
 // src/components/Icon/icons/TransitionsIcon.tsx
-import { jsx as jsx142 } from "react/jsx-runtime";
-var TransitionsIcon = (props) => /* @__PURE__ */ jsx142(
+import { jsx as jsx144 } from "react/jsx-runtime";
+var TransitionsIcon = (props) => /* @__PURE__ */ jsx144(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx142(
+    children: /* @__PURE__ */ jsx144(
       "path",
       {
         clipRule: "evenodd",
@@ -4494,14 +4701,14 @@ var TransitionsIcon = (props) => /* @__PURE__ */ jsx142(
 );
 
 // src/components/Icon/icons/TrimIcon.tsx
-import { jsx as jsx143 } from "react/jsx-runtime";
-var TrimIcon = (props) => /* @__PURE__ */ jsx143(
+import { jsx as jsx145 } from "react/jsx-runtime";
+var TrimIcon = (props) => /* @__PURE__ */ jsx145(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx143(
+    children: /* @__PURE__ */ jsx145(
       "path",
       {
         clipRule: "evenodd",
@@ -4514,14 +4721,14 @@ var TrimIcon = (props) => /* @__PURE__ */ jsx143(
 );
 
 // src/components/Icon/icons/TurnstileIcon.tsx
-import { jsx as jsx144 } from "react/jsx-runtime";
-var TurnstileIcon = (props) => /* @__PURE__ */ jsx144(
+import { jsx as jsx146 } from "react/jsx-runtime";
+var TurnstileIcon = (props) => /* @__PURE__ */ jsx146(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx144(
+    children: /* @__PURE__ */ jsx146(
       "path",
       {
         clipRule: "evenodd",
@@ -4534,14 +4741,14 @@ var TurnstileIcon = (props) => /* @__PURE__ */ jsx144(
 );
 
 // src/components/Icon/icons/UndoIcon.tsx
-import { jsx as jsx145 } from "react/jsx-runtime";
-var UndoIcon = (props) => /* @__PURE__ */ jsx145(
+import { jsx as jsx147 } from "react/jsx-runtime";
+var UndoIcon = (props) => /* @__PURE__ */ jsx147(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx145(
+    children: /* @__PURE__ */ jsx147(
       "path",
       {
         clipRule: "evenodd",
@@ -4554,14 +4761,14 @@ var UndoIcon = (props) => /* @__PURE__ */ jsx145(
 );
 
 // src/components/Icon/icons/UnlockIcon.tsx
-import { jsx as jsx146 } from "react/jsx-runtime";
-var UnlockIcon = (props) => /* @__PURE__ */ jsx146(
+import { jsx as jsx148 } from "react/jsx-runtime";
+var UnlockIcon = (props) => /* @__PURE__ */ jsx148(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx146(
+    children: /* @__PURE__ */ jsx148(
       "path",
       {
         clipRule: "evenodd",
@@ -4574,14 +4781,14 @@ var UnlockIcon = (props) => /* @__PURE__ */ jsx146(
 );
 
 // src/components/Icon/icons/UploadIcon.tsx
-import { jsx as jsx147 } from "react/jsx-runtime";
-var UploadIcon = (props) => /* @__PURE__ */ jsx147(
+import { jsx as jsx149 } from "react/jsx-runtime";
+var UploadIcon = (props) => /* @__PURE__ */ jsx149(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx147(
+    children: /* @__PURE__ */ jsx149(
       "path",
       {
         clipRule: "evenodd",
@@ -4594,14 +4801,14 @@ var UploadIcon = (props) => /* @__PURE__ */ jsx147(
 );
 
 // src/components/Icon/icons/UsersPermissionsIcon.tsx
-import { jsx as jsx148 } from "react/jsx-runtime";
-var UsersPermissionsIcon = (props) => /* @__PURE__ */ jsx148(
+import { jsx as jsx150 } from "react/jsx-runtime";
+var UsersPermissionsIcon = (props) => /* @__PURE__ */ jsx150(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx148(
+    children: /* @__PURE__ */ jsx150(
       "path",
       {
         clipRule: "evenodd",
@@ -4614,14 +4821,14 @@ var UsersPermissionsIcon = (props) => /* @__PURE__ */ jsx148(
 );
 
 // src/components/Icon/icons/ViewStreamIcon.tsx
-import { jsx as jsx149 } from "react/jsx-runtime";
-var ViewStreamIcon = (props) => /* @__PURE__ */ jsx149(
+import { jsx as jsx151 } from "react/jsx-runtime";
+var ViewStreamIcon = (props) => /* @__PURE__ */ jsx151(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx149(
+    children: /* @__PURE__ */ jsx151(
       "path",
       {
         clipRule: "evenodd",
@@ -4634,14 +4841,14 @@ var ViewStreamIcon = (props) => /* @__PURE__ */ jsx149(
 );
 
 // src/components/Icon/icons/VolumeIcon.tsx
-import { jsx as jsx150 } from "react/jsx-runtime";
-var VolumeIcon = (props) => /* @__PURE__ */ jsx150(
+import { jsx as jsx152 } from "react/jsx-runtime";
+var VolumeIcon = (props) => /* @__PURE__ */ jsx152(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx150(
+    children: /* @__PURE__ */ jsx152(
       "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",
@@ -4652,14 +4859,14 @@ var VolumeIcon = (props) => /* @__PURE__ */ jsx150(
 );
 
 // src/components/Icon/icons/VolumeOffIcon.tsx
-import { jsx as jsx151 } from "react/jsx-runtime";
-var VolumeOffIcon = (props) => /* @__PURE__ */ jsx151(
+import { jsx as jsx153 } from "react/jsx-runtime";
+var VolumeOffIcon = (props) => /* @__PURE__ */ jsx153(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx151(
+    children: /* @__PURE__ */ jsx153(
       "path",
       {
         clipRule: "evenodd",
@@ -4672,14 +4879,14 @@ var VolumeOffIcon = (props) => /* @__PURE__ */ jsx151(
 );
 
 // src/components/Icon/icons/VolumeUpIcon.tsx
-import { jsx as jsx152 } from "react/jsx-runtime";
-var VolumeUpIcon = (props) => /* @__PURE__ */ jsx152(
+import { jsx as jsx154 } from "react/jsx-runtime";
+var VolumeUpIcon = (props) => /* @__PURE__ */ jsx154(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx152(
+    children: /* @__PURE__ */ jsx154(
       "path",
       {
         clipRule: "evenodd",
@@ -4692,14 +4899,14 @@ var VolumeUpIcon = (props) => /* @__PURE__ */ jsx152(
 );
 
 // src/components/Icon/icons/VolumeXIcon.tsx
-import { jsx as jsx153 } from "react/jsx-runtime";
-var VolumeXIcon = (props) => /* @__PURE__ */ jsx153(
+import { jsx as jsx155 } from "react/jsx-runtime";
+var VolumeXIcon = (props) => /* @__PURE__ */ jsx155(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx153(
+    children: /* @__PURE__ */ jsx155(
       "path",
       {
         clipRule: "evenodd",
@@ -4712,14 +4919,14 @@ var VolumeXIcon = (props) => /* @__PURE__ */ jsx153(
 );
 
 // src/components/Icon/icons/WandIcon.tsx
-import { jsx as jsx154 } from "react/jsx-runtime";
-var WandIcon = (props) => /* @__PURE__ */ jsx154(
+import { jsx as jsx156 } from "react/jsx-runtime";
+var WandIcon = (props) => /* @__PURE__ */ jsx156(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx154(
+    children: /* @__PURE__ */ jsx156(
       "path",
       {
         clipRule: "evenodd",
@@ -4732,14 +4939,14 @@ var WandIcon = (props) => /* @__PURE__ */ jsx154(
 );
 
 // src/components/Icon/icons/ZoomInIcon.tsx
-import { jsx as jsx155 } from "react/jsx-runtime";
-var ZoomInIcon = (props) => /* @__PURE__ */ jsx155(
+import { jsx as jsx157 } from "react/jsx-runtime";
+var ZoomInIcon = (props) => /* @__PURE__ */ jsx157(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx155(
+    children: /* @__PURE__ */ jsx157(
       "path",
       {
         clipRule: "evenodd",
@@ -4752,14 +4959,14 @@ var ZoomInIcon = (props) => /* @__PURE__ */ jsx155(
 );
 
 // src/components/Icon/icons/ZoomOutIcon.tsx
-import { jsx as jsx156 } from "react/jsx-runtime";
-var ZoomOutIcon = (props) => /* @__PURE__ */ jsx156(
+import { jsx as jsx158 } from "react/jsx-runtime";
+var ZoomOutIcon = (props) => /* @__PURE__ */ jsx158(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx156(
+    children: /* @__PURE__ */ jsx158(
       "path",
       {
         clipRule: "evenodd",
@@ -4929,13 +5136,13 @@ var iconMap = {
 
 // src/private/hooks/useResponsiveProp/useResponsiveProp.ts
 import { isNotUndefined, isRecord as isRecord2, isUndefined } from "@wistia/type-guards";
-import { useMemo as useMemo2 } from "react";
+import { useMemo as useMemo3 } from "react";
 var isResponsiveObject = (values) => {
   return typeof values === "object" && values !== null && !Array.isArray(values) && "base" in values;
 };
 var useResponsiveProp = (values) => {
   const activeMediaQueries = useActiveMq();
-  return useMemo2(() => {
+  return useMemo3(() => {
     if (isRecord2(values) && isResponsiveObject(values)) {
       const mq2 = activeMediaQueries.find((key) => key in values);
       return isNotUndefined(mq2) && isNotUndefined(values[mq2]) ? values[mq2] : values.base;
@@ -4945,7 +5152,7 @@ var useResponsiveProp = (values) => {
 };
 
 // src/components/Icon/Icon.tsx
-import { jsx as jsx157 } from "react/jsx-runtime";
+import { jsx as jsx159 } from "react/jsx-runtime";
 var iconSizeMap = {
   sm: "12",
   md: "16",
@@ -4953,7 +5160,7 @@ var iconSizeMap = {
   xl: "32",
   xxl: "48"
 };
-var StyledIcon = styled3.svg`
+var StyledIcon = styled5.svg`
   ${({ $colorScheme }) => getColorScheme($colorScheme ?? "inherit")}
 `;
 var Icon = ({
@@ -4965,13 +5172,13 @@ var Icon = ({
   ...otherProps
 }) => {
   const responsiveSize = useResponsiveProp(size);
-  if (isNil4(type)) {
+  if (isNil6(type)) {
     throw new Error("An Icon component requires a `type` prop to be provided");
   }
-  if (isNil4(iconMap[type])) {
+  if (isNil6(iconMap[type])) {
     throw new Error(`Type "${type}" does not exist, please update type prop in Icon component.`);
   }
-  if (isNil4(iconSizeMap[responsiveSize])) {
+  if (isNil6(iconSizeMap[responsiveSize])) {
     throw new Error(
       `Size "${responsiveSize}" does not exist, please update size prop in Icon component.`
     );
@@ -4982,7 +5189,7 @@ var Icon = ({
     ...style
   };
   const iconColor = invertColor ? "var(--color-icon-on-fill)" : "var(--color-icon)";
-  return /* @__PURE__ */ jsx157(
+  return /* @__PURE__ */ jsx159(
     StyledIcon,
     {
       $colorScheme: colorScheme,
@@ -5003,12 +5210,12 @@ Icon.displayName = "Icon";
 
 // src/components/Link/Link.tsx
 import { forwardRef as forwardRef2 } from "react";
-import { isNil as isNil5, isNotNil as isNotNil3, isNotUndefined as isNotUndefined2, isUndefined as isUndefined2 } from "@wistia/type-guards";
-import styled4 from "styled-components";
+import { isNil as isNil7, isNotNil as isNotNil3, isNotUndefined as isNotUndefined2, isUndefined as isUndefined2 } from "@wistia/type-guards";
+import styled6 from "styled-components";
 import { Link as RouterLink, useInRouterContext } from "react-router-dom";
-import { jsx as jsx158 } from "react/jsx-runtime";
+import { jsx as jsx160 } from "react/jsx-runtime";
 var generateHref = (href, type, disabled) => {
-  if (disabled || isNil5(href)) {
+  if (disabled || isNil7(href)) {
     return void 0;
   }
   let to = href;
@@ -5022,8 +5229,8 @@ var generateHref = (href, type, disabled) => {
 };
 var isButton = (props) => isUndefined2(props.href);
 var isLink = (props) => isNotUndefined2(props.href);
-var StyledLink = styled4.a`
-  ${({ href }) => isNil5(href) && buttonResetCss};
+var StyledLink = styled6.a`
+  ${({ href }) => isNil7(href) && buttonResetCss};
   ${({ $colorScheme }) => getColorScheme($colorScheme)}
   cursor: pointer;
   font-family: var(--typography-family-default);
@@ -5068,7 +5275,7 @@ var Link = forwardRef2(
       onClick: handleClick
     };
     if (isButton(props)) {
-      return /* @__PURE__ */ jsx158(
+      return /* @__PURE__ */ jsx160(
         StyledLink,
         {
           ref,
@@ -5088,7 +5295,7 @@ var Link = forwardRef2(
         ...commonProps,
         ...externalLinkProps
       };
-      return inRouterContext && type !== "external" ? /* @__PURE__ */ jsx158(
+      return inRouterContext && type !== "external" ? /* @__PURE__ */ jsx160(
         StyledLink,
         {
           as: RouterLink,
@@ -5096,7 +5303,7 @@ var Link = forwardRef2(
           to: to ?? "",
           children
         }
-      ) : /* @__PURE__ */ jsx158(
+      ) : /* @__PURE__ */ jsx160(
         StyledLink,
         {
           as: "a",
@@ -5112,18 +5319,18 @@ var Link = forwardRef2(
 Link.displayName = "Link";
 
 // src/components/Button/Button.tsx
-import { Fragment, jsx as jsx159, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx161, jsxs as jsxs5 } from "react/jsx-runtime";
 var isLink2 = (props) => isNotUndefined3(props.href);
-var StyledButton = styled5.button`
+var StyledButton = styled7.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 = styled5.div`
+var StyledButtonContent = styled7.div`
   align-items: center;
   display: inline-flex;
   flex-grow: 1;
@@ -5135,11 +5342,11 @@ var StyledButtonContent = styled5.div`
   ${({ $hasLeftIcon }) => $hasLeftIcon && "padding-left: 0;"}
   ${({ $hasRightIcon }) => $hasRightIcon && "padding-right: 0;"}
 `;
-var StyledButtonContentLabel = styled5.span`
+var StyledButtonContentLabel = styled7.span`
   flex: 1;
   text-align: center;
 `;
-var StyledButtonLoading = styled5.div`
+var StyledButtonLoading = styled7.div`
   position: absolute;
   display: flex;
 `;
@@ -5149,9 +5356,9 @@ var ButtonContent = ({
   rightIcon,
   children
 }) => {
-  return /* @__PURE__ */ jsxs4(Fragment, { children: [
-    isLoading ? /* @__PURE__ */ jsx159(StyledButtonLoading, { children: /* @__PURE__ */ jsx159(Icon, { type: "spinner" }) }) : null,
-    /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(Fragment, { children: [
+    isLoading ? /* @__PURE__ */ jsx161(StyledButtonLoading, { children: /* @__PURE__ */ jsx161(Icon, { type: "spinner" }) }) : null,
+    /* @__PURE__ */ jsxs5(
       StyledButtonContent,
       {
         $hasLeftIcon: isNotNil4(leftIcon),
@@ -5159,7 +5366,7 @@ var ButtonContent = ({
         $isLoading: isLoading,
         children: [
           leftIcon ?? null,
-          /* @__PURE__ */ jsx159(StyledButtonContentLabel, { children }),
+          /* @__PURE__ */ jsx161(StyledButtonContentLabel, { children }),
           rightIcon ?? null
         ]
       }
@@ -5179,7 +5386,7 @@ var Button = forwardRef3(
     unstyled = false,
     onClick,
     fullWidth = false,
-    size = "medium",
+    size = "md",
     variant = "solid",
     ...props
   }, ref) => {
@@ -5188,27 +5395,27 @@ var Button = forwardRef3(
     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__ */ jsx159(
+      return /* @__PURE__ */ jsx161(
         StyledButton,
         {
           ref,
           as: Link,
           ...props,
           ...commonProps,
-          children: /* @__PURE__ */ jsx159(
+          children: /* @__PURE__ */ jsx161(
             ButtonContent,
             {
               isLoading,
@@ -5229,7 +5436,7 @@ var Button = forwardRef3(
         onClick(event);
       }
     };
-    return /* @__PURE__ */ jsx159(
+    return /* @__PURE__ */ jsx161(
       StyledButton,
       {
         ref,
@@ -5237,7 +5444,7 @@ var Button = forwardRef3(
         type: "button",
         ...props,
         ...commonProps,
-        children: /* @__PURE__ */ jsx159(
+        children: /* @__PURE__ */ jsx161(
           ButtonContent,
           {
             isLoading,
@@ -5253,9 +5460,9 @@ var Button = forwardRef3(
 Button.displayName = "Button";
 
 // src/components/ButtonGroup/ButtonGroup.tsx
-import styled6 from "styled-components";
-import { isNil as isNil6 } from "@wistia/type-guards";
-import { jsx as jsx160 } from "react/jsx-runtime";
+import styled8 from "styled-components";
+import { isNil as isNil8 } from "@wistia/type-guards";
+import { jsx as jsx162 } from "react/jsx-runtime";
 var getAlignment = (align) => {
   if (align === "center") {
     return "center";
@@ -5268,15 +5475,15 @@ var getAlignment = (align) => {
   }
   return void 0;
 };
-var ButtonGroupComponent = styled6.div`
+var ButtonGroupComponent = styled8.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;
@@ -5294,14 +5501,14 @@ var ButtonGroup = ({
   fullWidth = false,
   ...otherProps
 }) => {
-  if (isNil6(children)) {
+  if (isNil8(children)) {
     return null;
   }
-  return /* @__PURE__ */ jsx160(
+  return /* @__PURE__ */ jsx162(
     ButtonGroupComponent,
     {
-      align,
-      fullWidth,
+      $align: align,
+      $fullWidth: fullWidth,
       ...otherProps,
       children
     }
@@ -5310,20 +5517,20 @@ var ButtonGroup = ({
 ButtonGroup.displayName = "ButtonGroup";
 
 // src/components/Divider/Divider.tsx
-import styled7 from "styled-components";
-import { jsx as jsx161 } from "react/jsx-runtime";
+import styled9 from "styled-components";
+import { jsx as jsx163 } from "react/jsx-runtime";
 var sizeToPixelMap = {
   lg: 4,
   sm: 1
 };
-var DividerComponent = styled7.hr`
+var DividerComponent = styled9.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;
@@ -5331,10 +5538,10 @@ var DividerComponent = styled7.hr`
 `;
 var Divider = ({ size = "sm", ...otherProps }) => {
   const responsiveSize = useResponsiveProp(size);
-  return /* @__PURE__ */ jsx161(
+  return /* @__PURE__ */ jsx163(
     DividerComponent,
     {
-      borderHeight: sizeToPixelMap[responsiveSize],
+      $borderHeight: sizeToPixelMap[responsiveSize],
       ...otherProps
     }
   );
@@ -5343,8 +5550,8 @@ Divider.displayName = "Divider";
 
 // src/components/Ellipsis/Ellipsis.tsx
 import { isNotNil as isNotNil5 } from "@wistia/type-guards";
-import styled8, { css as css12 } from "styled-components";
-import { jsx as jsx162 } from "react/jsx-runtime";
+import styled10, { css as css12 } from "styled-components";
+import { jsx as jsx164 } from "react/jsx-runtime";
 var ellipsisStyle = css12`
   overflow: hidden;
   text-overflow: ellipsis;
@@ -5371,13 +5578,13 @@ var ellipsisStyle = css12`
 var ellipsisFlexParentStyle = css12`
   min-width: 0;
 `;
-var EllipsisComponent = styled8.div`
+var EllipsisComponent = styled10.div`
   ${ellipsisStyle};
-  ${({ lines }) => {
-  if (isNotNil5(lines)) {
+  ${({ $lines }) => {
+  if (isNotNil5($lines)) {
     return css12`
         -webkit-box-orient: vertical;
-        -webkit-line-clamp: ${lines};
+        -webkit-line-clamp: ${$lines};
         display: -webkit-box;
         white-space: initial;
       `;
@@ -5385,10 +5592,10 @@ var EllipsisComponent = styled8.div`
   return void 0;
 }}
 `;
-var Ellipsis = ({ children, lines, ...otherProps }) => /* @__PURE__ */ jsx162(
+var Ellipsis = ({ children, lines, ...otherProps }) => /* @__PURE__ */ jsx164(
   EllipsisComponent,
   {
-    lines,
+    $lines: lines,
     ...otherProps,
     children
   }
@@ -5397,7 +5604,7 @@ Ellipsis.displayName = "Ellipsis";
 
 // src/components/Heading/Heading.tsx
 import { forwardRef as forwardRef4 } from "react";
-import styled9, { css as css13 } from "styled-components";
+import styled11, { css as css13 } from "styled-components";
 
 // src/private/helpers/makePolymorphic/makePolymorphic.tsx
 var makePolymorphic = (component) => {
@@ -5405,7 +5612,7 @@ var makePolymorphic = (component) => {
 };
 
 // src/components/Heading/Heading.tsx
-import { jsx as jsx163 } from "react/jsx-runtime";
+import { jsx as jsx165 } from "react/jsx-runtime";
 var heroStyle = css13`
   --font-family: var(--typography-heading-hero-family);
   --font-size: var(--typography-heading-hero-size);
@@ -5458,26 +5665,26 @@ var variantStyleMap = {
   heading6: heading6TextStyle
 };
 var DEFAULT_ELEMENT = "h1";
-var StyledHeading = styled9.div`
-  ${({ colorScheme }) => getColorScheme(colorScheme)};
+var StyledHeading = styled11.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 && css13`
+  ${({ $variant }) => variantStyleMap[$variant]}
+  ${({ $ellipsis }) => $ellipsis && ellipsisStyle};
+  ${({ $inline }) => $inline && css13`
       display: inline-block;
     `}
-  ${({ disabled }) => disabled && css13`
+  ${({ $disabled }) => $disabled && css13`
       color: var(--color-text-disabled);
     `}
-  ${({ preventUserSelect }) => preventUserSelect && css13`
+  ${({ $preventUserSelect }) => $preventUserSelect && css13`
       user-select: none;
     `}
-  ${({ align }) => css13`
-    text-align: ${align};
+  ${({ $align }) => css13`
+    text-align: ${$align};
   `}
   margin: 0;
 `;
@@ -5501,18 +5708,18 @@ var HeadingComponent = forwardRef4(
     variant = "heading1",
     renderAs,
     ...otherProps
-  }, ref) => /* @__PURE__ */ jsx163(
+  }, ref) => /* @__PURE__ */ jsx165(
     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
     }
   )
@@ -5522,7 +5729,7 @@ var Heading = makePolymorphic(HeadingComponent);
 
 // src/components/IconButton/IconButton.tsx
 import { Children as Children2, cloneElement as cloneElement2, forwardRef as forwardRef5 } from "react";
-import styled11 from "styled-components";
+import styled13 from "styled-components";
 
 // src/components/Tooltip/Tooltip.tsx
 import {
@@ -5532,8 +5739,8 @@ import {
   Portal,
   Arrow
 } from "@radix-ui/react-tooltip";
-import styled10, { css as css14 } from "styled-components";
-import { jsx as jsx164, jsxs as jsxs5 } from "react/jsx-runtime";
+import styled12, { css as css14 } from "styled-components";
+import { jsx as jsx166, jsxs as jsxs6 } from "react/jsx-runtime";
 var CompactTooltipStyles = css14`
   --tooltip-font-size: var(--typography-label-4-size);
   --tooltip-line-height: var(--typography-label-4-line-height);
@@ -5541,7 +5748,7 @@ var CompactTooltipStyles = css14`
   --tooltip-horizontal-padding: var(--space-02);
   --tooltip-vertical-padding: var(--space-03);
 `;
-var StyledContent = styled10(Content)`
+var StyledContent = styled12(Content)`
   --tooltip-font-family: var(--typography-family-default);
   --tooltip-border-radius: var(--border-radius-05);
   --tooltip-bg: var(--color-bg-tooltip);
@@ -5599,14 +5806,14 @@ var Tooltip = ({
   if (forceOpen === true) {
     rootProps.open = true;
   }
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     Root,
     {
       delayDuration: delay,
       ...rootProps,
       children: [
-        /* @__PURE__ */ jsx164(Trigger, { asChild: true, children }),
-        /* @__PURE__ */ jsx164(Portal, { children: /* @__PURE__ */ jsxs5(
+        /* @__PURE__ */ jsx166(Trigger, { asChild: true, children }),
+        /* @__PURE__ */ jsx166(Portal, { children: /* @__PURE__ */ jsxs6(
           StyledContent,
           {
             $compact: compact,
@@ -5614,7 +5821,7 @@ var Tooltip = ({
             sideOffset: hideArrow ? VISUAL_OFFSET : VISUAL_OFFSET - 2,
             children: [
               content,
-              !hideArrow ? /* @__PURE__ */ jsx164(Arrow, { asChild: true, children: /* @__PURE__ */ jsx164(
+              !hideArrow ? /* @__PURE__ */ jsx166(Arrow, { asChild: true, children: /* @__PURE__ */ jsx166(
                 "svg",
                 {
                   fill: "var(--tooltip-bg)",
@@ -5623,7 +5830,7 @@ var Tooltip = ({
                   viewBox: "0 0 12 8",
                   width: "12",
                   xmlns: "http://www.w3.org/2000/svg",
-                  children: /* @__PURE__ */ jsx164("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__ */ jsx166("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
             ]
@@ -5636,18 +5843,12 @@ var Tooltip = ({
 Tooltip.displayName = "Tooltip";
 
 // src/components/IconButton/IconButton.tsx
-import { jsx as jsx165 } from "react/jsx-runtime";
-var buttonIconSizeMap = {
-  small: "sm",
-  medium: "md",
-  large: "lg",
-  hero: "xl"
-};
-var StyledButton2 = styled11(Button)`
-  --icon-button-size-small: 24px;
-  --icon-button-size-medium: 32px;
-  --icon-button-size-large: 40px;
-  --icon-button-size-hero: 48px;
+import { jsx as jsx167 } from "react/jsx-runtime";
+var StyledButton2 = styled13(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})`};
@@ -5658,9 +5859,9 @@ var StyledButton2 = styled11(Button)`
   line-height: 1;
 `;
 var IconButton = forwardRef5(
-  ({ children, label, disableTooltip = false, size = "medium", ...props }, ref) => {
+  ({ children, label, disableTooltip = false, size = "md", ...props }, ref) => {
     const responsiveSize = useResponsiveProp(size);
-    const button = /* @__PURE__ */ jsx165(
+    const button = /* @__PURE__ */ jsx167(
       StyledButton2,
       {
         ...props,
@@ -5669,24 +5870,82 @@ var IconButton = forwardRef5(
         "data-wistia-ui-icon-button": true,
         size: responsiveSize,
         children: cloneElement2(Children2.only(children), {
-          size: buttonIconSizeMap[responsiveSize]
+          size: responsiveSize
         })
       }
     );
     if (disableTooltip) {
       return button;
     }
-    return /* @__PURE__ */ jsx165(Tooltip, { content: label, children: button });
+    return /* @__PURE__ */ jsx167(Tooltip, { content: label, children: button });
   }
 );
 IconButton.displayName = "IconButton";
 
+// src/components/Label/Label.tsx
+import styled14, { css as css15 } from "styled-components";
+import { jsx as jsx168 } from "react/jsx-runtime";
+var requiredStyle = css15`
+  &::after {
+    color: red; /* TODO need a color for this */
+    display: inline;
+    padding-left: var(--space-01);
+    content: '*';
+  }
+`;
+var disabledStyle = css15`
+  color: var(--color-text-disabled);
+`;
+var SPACE_BETWEEN_LABEL_AND_INPUT = "var(--space-02)";
+var StyledLabel = styled14.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__ */ jsx168(
+  StyledLabel,
+  {
+    disabled,
+    required,
+    screenReaderOnly,
+    ...otherProps,
+    children
+  }
+);
+Label.displayName = "Label";
+
 // src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
-import styled12 from "styled-components";
+import styled15 from "styled-components";
 import { isNotNil as isNotNil6 } from "@wistia/type-guards";
-import { jsx as jsx166 } from "react/jsx-runtime";
-var VisuallyHidden = styled12.div({ ...visuallyHiddenStyle });
-var VisuallyHiddenButFocusable = styled12.div({
+import { jsx as jsx169 } from "react/jsx-runtime";
+var VisuallyHidden = styled15.div({ ...visuallyHiddenStyle });
+var VisuallyHiddenButFocusable = styled15.div({
   "&:not(:focus-within)": visuallyHiddenStyle
 });
 var ScreenReaderOnly = ({
@@ -5697,21 +5956,21 @@ var ScreenReaderOnly = ({
 }) => {
   const accessibleText = isNotNil6(text) ? text : children;
   if (focusable) {
-    return /* @__PURE__ */ jsx166(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
+    return /* @__PURE__ */ jsx169(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
   }
-  return /* @__PURE__ */ jsx166(VisuallyHidden, { ...otherProps, children: accessibleText });
+  return /* @__PURE__ */ jsx169(VisuallyHidden, { ...otherProps, children: accessibleText });
 };
 ScreenReaderOnly.displayName = "ScreenReaderOnly";
 
 // src/components/Stack/Stack.tsx
 import { forwardRef as forwardRef6 } from "react";
-import styled13 from "styled-components";
-import { jsx as jsx167 } from "react/jsx-runtime";
+import styled16 from "styled-components";
+import { jsx as jsx170 } from "react/jsx-runtime";
 var DEFAULT_ELEMENT2 = "div";
-var StyledStack = styled13.div`
+var StyledStack = styled16.div`
   display: flex;
   flex-direction: ${({ $direction }) => $direction === "horizontal" ? "row" : "column"};
-  gap: ${({ gap }) => `var(--${gap})`};
+  gap: ${({ $gap }) => `var(--${$gap})`};
 
   > * {
     flex: 1;
@@ -5721,13 +5980,13 @@ var StackComponent = forwardRef6(
   ({ renderAs, direction = "vertical", gap = "space-02", ...props }, ref) => {
     const responsiveGap = useResponsiveProp(gap);
     const responsiveDirection = useResponsiveProp(direction);
-    return /* @__PURE__ */ jsx167(
+    return /* @__PURE__ */ jsx170(
       StyledStack,
       {
         ref,
         $direction: responsiveDirection,
+        $gap: responsiveGap,
         as: renderAs ?? DEFAULT_ELEMENT2,
-        gap: responsiveGap,
         ...props
       }
     );
@@ -5738,89 +5997,89 @@ var Stack = makePolymorphic(StackComponent);
 
 // src/components/Text/Text.tsx
 import { forwardRef as forwardRef7 } from "react";
-import styled14, { css as css15 } from "styled-components";
-import { jsx as jsx168 } from "react/jsx-runtime";
-var bodyBoldStyles = css15`
+import styled17, { css as css16 } from "styled-components";
+import { jsx as jsx171 } from "react/jsx-runtime";
+var bodyBoldStyles = css16`
   > strong,
   b {
     font-weight: var(--typography-weight-body-bold);
   }
 `;
-var labelBoldStyles = css15`
+var labelBoldStyles = css16`
   > strong,
   b {
     font-weight: var(--typography-weight-label-bold);
   }
 `;
-var body1TextStyle = css15`
+var body1TextStyle = css16`
   --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 = css15`
+var body2TextStyle = css16`
   --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 = css15`
+var body3TextStyle = css16`
   --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 = css15`
+var body4TextStyle = css16`
   --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 = css15`
+var label1TextStyle = css16`
   --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 = css15`
+var label2TextStyle = css16`
   --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 = css15`
+var label3TextStyle = css16`
   --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 = css15`
+var label4TextStyle = css16`
   --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 = css15`
+var body1MonoTextStyle = css16`
   ${body1TextStyle};
   --font-family: var(--typography-family-mono);
 `;
-var body2MonoTextStyle = css15`
+var body2MonoTextStyle = css16`
   ${body2TextStyle};
   --font-family: var(--typography-family-mono);
 `;
-var body3MonoTextStyle = css15`
+var body3MonoTextStyle = css16`
   ${body3TextStyle};
   --font-family: var(--typography-family-mono);
 `;
-var body4MonoTextStyle = css15`
+var body4MonoTextStyle = css16`
   ${body4TextStyle};
   --font-family: var(--typography-family-mono);
 `;
@@ -5838,13 +6097,13 @@ var variantStyleMap2 = {
   label3: label3TextStyle,
   label4: label4TextStyle
 };
-var highContrastProminenceStyle = css15`
+var highContrastProminenceStyle = css16`
   --text-color: var(--color-text-high-contrast);
 `;
-var vibrantProminenceStyle = css15`
+var vibrantProminenceStyle = css16`
   --text-color: var(--color-text);
 `;
-var secondaryProminenceStyle = css15`
+var secondaryProminenceStyle = css16`
   --text-color: var(--color-text-secondary);
 `;
 var prominenceMap = {
@@ -5852,8 +6111,8 @@ var prominenceMap = {
   vibrant: vibrantProminenceStyle,
   secondary: secondaryProminenceStyle
 };
-var StyledText = styled14.div`
-  ${({ colorScheme }) => getColorScheme(colorScheme)};
+var StyledText = styled17.div`
+  ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-family: var(--font-family);
   font-size: var(--font-size);
   font-weight: var(--font-weight);
@@ -5861,22 +6120,22 @@ var StyledText = styled14.div`
   color: var(--text-color);
   font-style: normal;
   margin: 0;
-  ${({ variant }) => variantStyleMap2[variant]}
-  ${({ prominence }) => prominenceMap[prominence]}
-  ${({ ellipsis }) => ellipsis && ellipsisStyle};
-  ${({ inline }) => inline && css15`
+  ${({ $variant }) => variantStyleMap2[$variant]}
+  ${({ $prominence }) => prominenceMap[$prominence]}
+  ${({ $ellipsis }) => $ellipsis && ellipsisStyle};
+  ${({ $inline }) => $inline && css16`
       display: inline-block;
     `}
-  ${({ disabled }) => disabled && css15`
+  ${({ $disabled }) => $disabled && css16`
       --text-color: var(--color-text-disabled);
     `}
-  ${({ preventUserSelect }) => preventUserSelect && css15`
+  ${({ $preventUserSelect }) => $preventUserSelect && css16`
       user-select: none;
     `}
-  ${({ align }) => css15`
-    text-align: ${align};
+  ${({ $align }) => css16`
+    text-align: ${$align};
   `}
-  ${({ as }) => as === "p" && css15`
+  ${({ as }) => as === "p" && css16`
       display: block;
     `}
 `;
@@ -5894,19 +6153,19 @@ var TextComponent = forwardRef7(
     renderAs,
     ...otherProps
   }, ref) => {
-    return /* @__PURE__ */ jsx168(
+    return /* @__PURE__ */ jsx171(
       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
       }
     );
@@ -5916,20 +6175,20 @@ TextComponent.displayName = "Text";
 var Text = makePolymorphic(TextComponent);
 
 // src/components/WistiaLogo/WistiaLogo.tsx
-import styled15 from "styled-components";
+import styled18 from "styled-components";
 import { isNotNil as isNotNil7 } from "@wistia/type-guards";
-import { jsx as jsx169, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx172, jsxs as jsxs7 } from "react/jsx-runtime";
 var renderBrandmark = (brandmarkColor, iconOnly) => {
   if (iconOnly) {
-    return /* @__PURE__ */ jsx169("g", { fill: brandmarkColor, children: /* @__PURE__ */ jsx169("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__ */ jsx172("g", { fill: brandmarkColor, children: /* @__PURE__ */ jsx172("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__ */ jsx169("g", { fill: brandmarkColor, children: /* @__PURE__ */ jsx169("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__ */ jsx172("g", { fill: brandmarkColor, children: /* @__PURE__ */ jsx172("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__ */ jsx169("g", { fill: logotypeColor, children: /* @__PURE__ */ jsx169("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__ */ jsx172("g", { fill: logotypeColor, children: /* @__PURE__ */ jsx172("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) {
@@ -5937,7 +6196,7 @@ var computedViewBox = (iconOnly) => {
   }
   return "0 0 144 31.47";
 };
-var WistiaLogoComponent = styled15.svg`
+var WistiaLogoComponent = styled18.svg`
   height: ${({ height }) => `${height}px`};
 
   /* ensure it will always fit on mobile */
@@ -5946,7 +6205,7 @@ var WistiaLogoComponent = styled15.svg`
 
   &:hover {
     path {
-      ${({ hoverColor }) => hoverColor !== void 0 ? `fill: ${hoverColor}` : null};
+      ${({ $hoverColor }) => $hoverColor !== void 0 ? `fill: ${$hoverColor}` : null};
     }
   }
 `;
@@ -5979,47 +6238,28 @@ var WistiaLogo = ({
   };
   const brandmarkColor = VARIANT_COLORS[variant].brandmark;
   const logotypeColor = VARIANT_COLORS[variant].logotype;
-  const Logo = /* @__PURE__ */ jsxs6(
+  const Logo = /* @__PURE__ */ jsxs7(
     WistiaLogoComponent,
     {
+      $hoverColor: hoverColor,
       height,
-      hoverColor,
       role: "img",
       viewBox: computedViewBox(iconOnly),
       xmlns: "http://www.w3.org/2000/svg",
       ...otherProps,
       children: [
-        /* @__PURE__ */ jsx169("title", { children: title }),
-        isNotNil7(description) ? /* @__PURE__ */ jsx169("desc", { children: description }) : null,
+        /* @__PURE__ */ jsx172("title", { children: title }),
+        isNotNil7(description) ? /* @__PURE__ */ jsx172("desc", { children: description }) : null,
         renderBrandmark(brandmarkColor, iconOnly),
         renderLogotype(logotypeColor, iconOnly)
       ]
     }
   );
-  return href !== void 0 ? /* @__PURE__ */ jsx169("a", { href, children: Logo }) : Logo;
+  return href !== void 0 ? /* @__PURE__ */ jsx172("a", { href, children: Logo }) : Logo;
 };
 WistiaLogo.displayName = "WistiaLogo";
-
-// src/components/ColorSchemeWrapper/ColorSchemeWrapper.tsx
-import styled16 from "styled-components";
-import { jsx as jsx170 } from "react/jsx-runtime";
-var StyledColorSchemeWrapper = styled16.div`
-  ${({ colorScheme }) => getColorScheme(colorScheme)};
-`;
-var ColorSchemeWrapper = ({
-  colorScheme,
-  children,
-  ...otherProps
-}) => /* @__PURE__ */ jsx170(
-  StyledColorSchemeWrapper,
-  {
-    colorScheme,
-    ...otherProps,
-    children
-  }
-);
-ColorSchemeWrapper.displayName = "ColorSchemeWrapper";
 export {
+  Avatar,
   Badge,
   Box,
   Button,
@@ -6030,6 +6270,7 @@ export {
   Heading,
   Icon,
   IconButton,
+  Label,
   Link,
   ScreenReaderOnly,
   Stack,
@@ -6037,6 +6278,7 @@ export {
   Tooltip,
   UIProvider,
   WistiaLogo,
+  colorSchemeOptions,
   copyToClipboard,
   ellipsisFlexParentStyle,
   ellipsisStyle,