@wistia/vhs 4.0.0-beta.7034eb93.0e6bb17 → 4.0.0-beta.71b676f3.95c7760

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.cjs CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  /*
3
- * @license @wistia/vhs v4.0.0-beta.7034eb93.0e6bb17
3
+ * @license @wistia/vhs v4.0.0-beta.71b676f3.95c7760
4
4
  *
5
5
  * Copyright (c) 2021-2025, Wistia, Inc. and its affiliates.
6
6
  *
@@ -96,6 +96,7 @@ __export(index_exports, {
96
96
  ScreenReaderOnly: () => ScreenReaderOnly,
97
97
  Select: () => Select,
98
98
  Slider: () => Slider,
99
+ Stack: () => Stack,
99
100
  SubMenu: () => SubMenu,
100
101
  Switch: () => Switch,
101
102
  Text: () => Text,
@@ -3839,7 +3840,7 @@ var normalize = import_styled_components7.css`
3839
3840
  [type='button'],
3840
3841
  [type='reset'],
3841
3842
  [type='submit'] {
3842
- appearance: button;
3843
+ appearance: auto;
3843
3844
  }
3844
3845
 
3845
3846
  /**
@@ -3949,7 +3950,7 @@ var normalize = import_styled_components7.css`
3949
3950
  */
3950
3951
 
3951
3952
  ::-webkit-file-upload-button {
3952
- appearance: button; /* 1 */
3953
+ appearance: auto; /* 1 */
3953
3954
  font: inherit; /* 2 */
3954
3955
  }
3955
3956
 
@@ -5108,8 +5109,7 @@ var import_type_guards14 = require("@wistia/type-guards");
5108
5109
  var import_jsx_runtime126 = require("react/jsx-runtime");
5109
5110
  var screenReaderOnlyStyle = import_styled_components15.css`
5110
5111
  border: 0;
5111
- clip: rect(1px, 1px, 1px, 1px); /* deprecated but remains as fallback */
5112
- clip-path: inset(50%); /* modern but less support */
5112
+ clip-path: inset(50%);
5113
5113
  height: 1px;
5114
5114
  overflow: hidden;
5115
5115
  padding: 0;
@@ -9364,7 +9364,7 @@ var import_slate_react = require("slate-react");
9364
9364
  var import_styled_components48 = require("styled-components");
9365
9365
  var import_jsx_runtime169 = require("react/jsx-runtime");
9366
9366
  var Wrapper = import_styled_components48.styled.span`
9367
- display: 'inline-block';
9367
+ display: inline-block;
9368
9368
  user-select: none;
9369
9369
  `;
9370
9370
  var Image = import_styled_components48.styled.img`
@@ -12727,7 +12727,7 @@ var setCursorPosition = (ref, start, end) => {
12727
12727
  var getSelectionFromMove = (selection, move, positions) => {
12728
12728
  const currentIndex = positions.findIndex((pos) => pos.start === selection[0]);
12729
12729
  let nextPosition = positions[currentIndex + move];
12730
- if (nextPosition && nextPosition.type === "skip") {
12730
+ if (nextPosition?.type === "skip") {
12731
12731
  nextPosition = positions[currentIndex + move * 2];
12732
12732
  }
12733
12733
  if (nextPosition) {
@@ -13500,10 +13500,39 @@ var Slider = ({
13500
13500
  };
13501
13501
  Slider.displayName = "Slider_VHS";
13502
13502
 
13503
- // src/components/Switch/Switch.tsx
13503
+ // src/components/Stack/Stack.tsx
13504
+ var import_react63 = require("react");
13504
13505
  var import_styled_components77 = require("styled-components");
13505
13506
  var import_jsx_runtime209 = require("react/jsx-runtime");
13506
- var SwitchComponent = import_styled_components77.styled.button`
13507
+ var StyledStack = import_styled_components77.styled.div`
13508
+ display: flex;
13509
+ flex-direction: ${({ $direction }) => $direction === "horizontal" ? "row" : "column"};
13510
+ gap: ${({ $gap, theme: theme2 }) => theme2.spacing[$gap]};
13511
+
13512
+ > * {
13513
+ flex: 1;
13514
+ }
13515
+ `;
13516
+ var Stack = (0, import_react63.forwardRef)(
13517
+ ({ renderAs = "div", direction = "vertical", gap = "space02", ...props }, ref) => {
13518
+ return /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(
13519
+ StyledStack,
13520
+ {
13521
+ ...props,
13522
+ ref,
13523
+ $direction: direction,
13524
+ $gap: gap,
13525
+ as: renderAs
13526
+ }
13527
+ );
13528
+ }
13529
+ );
13530
+ Stack.displayName = "Stack_VHS";
13531
+
13532
+ // src/components/Switch/Switch.tsx
13533
+ var import_styled_components78 = require("styled-components");
13534
+ var import_jsx_runtime210 = require("react/jsx-runtime");
13535
+ var SwitchComponent = import_styled_components78.styled.button`
13507
13536
  background-color: white;
13508
13537
  border-color: ${({ theme: theme2 }) => theme2.color.grey700};
13509
13538
  border-radius: 20px;
@@ -13540,7 +13569,7 @@ var SwitchComponent = import_styled_components77.styled.button`
13540
13569
  opacity: 0.5;
13541
13570
  }
13542
13571
  `;
13543
- var ShowTextStyles = import_styled_components77.css`
13572
+ var ShowTextStyles = import_styled_components78.css`
13544
13573
  &::before,
13545
13574
  &::after {
13546
13575
  display: inline-block;
@@ -13568,7 +13597,7 @@ var ShowTextStyles = import_styled_components77.css`
13568
13597
  }
13569
13598
  }
13570
13599
  `;
13571
- var SwitchKnob = import_styled_components77.styled.div`
13600
+ var SwitchKnob = import_styled_components78.styled.div`
13572
13601
  background-color: ${({ theme: theme2 }) => theme2.color.grey700};
13573
13602
  border-radius: 50%;
13574
13603
  height: 12px;
@@ -13603,7 +13632,7 @@ var Switch = ({
13603
13632
  onChange(!isChecked);
13604
13633
  }
13605
13634
  };
13606
- return /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(
13635
+ return /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(
13607
13636
  SwitchComponent,
13608
13637
  {
13609
13638
  $colorOverride: colorOverride,
@@ -13615,17 +13644,17 @@ var Switch = ({
13615
13644
  role: "switch",
13616
13645
  type: "button",
13617
13646
  ...otherProps,
13618
- children: /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(SwitchKnob, { $hideText: hideText })
13647
+ children: /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(SwitchKnob, { $hideText: hideText })
13619
13648
  }
13620
13649
  );
13621
13650
  };
13622
13651
  Switch.displayName = "Switch_VHS";
13623
13652
 
13624
13653
  // src/components/Thumbnail/Thumbnail.tsx
13625
- var import_styled_components78 = require("styled-components");
13654
+ var import_styled_components79 = require("styled-components");
13626
13655
  var import_type_guards71 = require("@wistia/type-guards");
13627
- var import_jsx_runtime210 = require("react/jsx-runtime");
13628
- var ThumbnailComponent = import_styled_components78.styled.div`
13656
+ var import_jsx_runtime211 = require("react/jsx-runtime");
13657
+ var ThumbnailComponent = import_styled_components79.styled.div`
13629
13658
  ${({ $gradientBackground }) => getBackgroundGradient($gradientBackground)};
13630
13659
  aspect-ratio: 16 / 9;
13631
13660
  background-image: ${({ $backgroundUrl }) => $backgroundUrl};
@@ -13637,17 +13666,17 @@ var ThumbnailComponent = import_styled_components78.styled.div`
13637
13666
  position: relative;
13638
13667
  width: ${({ $width }) => $width};
13639
13668
  `;
13640
- var WideThumbnailImage = import_styled_components78.styled.img`
13669
+ var WideThumbnailImage = import_styled_components79.styled.img`
13641
13670
  height: 100%;
13642
13671
  object-fit: cover;
13643
13672
  width: 100%;
13644
13673
  `;
13645
- var SquareThumbnailImage = import_styled_components78.styled.img`
13674
+ var SquareThumbnailImage = import_styled_components79.styled.img`
13646
13675
  backdrop-filter: blur(8px);
13647
13676
  object-fit: contain;
13648
13677
  width: 100%;
13649
13678
  `;
13650
- var BottomRightText = import_styled_components78.styled.div`
13679
+ var BottomRightText = import_styled_components79.styled.div`
13651
13680
  align-items: center;
13652
13681
  background-color: rgb(0 0 0 / 50%);
13653
13682
  border-radius: 2px;
@@ -13664,7 +13693,7 @@ var BottomRightText = import_styled_components78.styled.div`
13664
13693
  right: 0;
13665
13694
  z-index: 1;
13666
13695
  `;
13667
- var IconContainer3 = import_styled_components78.styled.div`
13696
+ var IconContainer3 = import_styled_components79.styled.div`
13668
13697
  align-self: center;
13669
13698
  aspect-ratio: 1;
13670
13699
  margin: 30%;
@@ -13677,7 +13706,7 @@ var IconContainer3 = import_styled_components78.styled.div`
13677
13706
  `;
13678
13707
  var ThumbnailImage = ({ $thumbnailImageType, $thumbnailUrl }) => {
13679
13708
  if ($thumbnailImageType === "wide") {
13680
- return /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(
13709
+ return /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(
13681
13710
  WideThumbnailImage,
13682
13711
  {
13683
13712
  alt: "",
@@ -13686,7 +13715,7 @@ var ThumbnailImage = ({ $thumbnailImageType, $thumbnailUrl }) => {
13686
13715
  );
13687
13716
  }
13688
13717
  if ($thumbnailImageType === "square") {
13689
- return /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(
13718
+ return /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(
13690
13719
  SquareThumbnailImage,
13691
13720
  {
13692
13721
  alt: "",
@@ -13696,13 +13725,13 @@ var ThumbnailImage = ({ $thumbnailImageType, $thumbnailUrl }) => {
13696
13725
  }
13697
13726
  return null;
13698
13727
  };
13699
- var Collage = import_styled_components78.styled.div`
13728
+ var Collage = import_styled_components79.styled.div`
13700
13729
  display: grid;
13701
13730
  grid-template-columns: auto auto;
13702
13731
  grid-template-rows: 50% 50%;
13703
13732
  width: 100%;
13704
13733
  `;
13705
- var CollageImage = import_styled_components78.styled.div`
13734
+ var CollageImage = import_styled_components79.styled.div`
13706
13735
  background-image: ${({ $thumbnailUrl }) => `url(${$thumbnailUrl})`};
13707
13736
  background-position: center;
13708
13737
  background-size: cover;
@@ -13730,7 +13759,7 @@ var Thumbnail = ({
13730
13759
  ...otherProps
13731
13760
  }) => {
13732
13761
  const thumbnailUrlToUse = Array.isArray(thumbnailUrl) ? thumbnailUrl[0] : thumbnailUrl;
13733
- return /* @__PURE__ */ (0, import_jsx_runtime210.jsxs)(
13762
+ return /* @__PURE__ */ (0, import_jsx_runtime211.jsxs)(
13734
13763
  ThumbnailComponent,
13735
13764
  {
13736
13765
  $backgroundUrl: thumbnailImageType === "square" && (0, import_type_guards71.isNotNil)(thumbnailUrlToUse) ? `url(${thumbnailUrlToUse})` : "",
@@ -13738,31 +13767,31 @@ var Thumbnail = ({
13738
13767
  $width: width,
13739
13768
  ...otherProps,
13740
13769
  children: [
13741
- (0, import_type_guards71.isNotNil)(bottomRightText) ? /* @__PURE__ */ (0, import_jsx_runtime210.jsxs)(BottomRightText, { children: [
13742
- bottomRightIcon ? /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(
13770
+ (0, import_type_guards71.isNotNil)(bottomRightText) ? /* @__PURE__ */ (0, import_jsx_runtime211.jsxs)(BottomRightText, { children: [
13771
+ bottomRightIcon ? /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(
13743
13772
  Icon,
13744
13773
  {
13745
13774
  size: "sm",
13746
13775
  type: bottomRightIcon
13747
13776
  }
13748
13777
  ) : null,
13749
- /* @__PURE__ */ (0, import_jsx_runtime210.jsx)("span", { children: bottomRightText })
13778
+ /* @__PURE__ */ (0, import_jsx_runtime211.jsx)("span", { children: bottomRightText })
13750
13779
  ] }) : null,
13751
- (0, import_type_guards71.isNotNil)(icon) && /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(IconContainer3, { children: /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(
13780
+ (0, import_type_guards71.isNotNil)(icon) && /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(IconContainer3, { children: /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(
13752
13781
  Icon,
13753
13782
  {
13754
13783
  color: iconColor,
13755
13784
  type: icon
13756
13785
  }
13757
13786
  ) }),
13758
- !Array.isArray(thumbnailUrl) && (0, import_type_guards71.isNotNil)(thumbnailImageType) && (0, import_type_guards71.isNotNil)(thumbnailUrl) && /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(
13787
+ !Array.isArray(thumbnailUrl) && (0, import_type_guards71.isNotNil)(thumbnailImageType) && (0, import_type_guards71.isNotNil)(thumbnailUrl) && /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(
13759
13788
  ThumbnailImage,
13760
13789
  {
13761
13790
  $thumbnailImageType: thumbnailImageType,
13762
13791
  $thumbnailUrl: thumbnailUrl
13763
13792
  }
13764
13793
  ),
13765
- Array.isArray(thumbnailUrl) && (0, import_type_guards71.isNotNil)(thumbnailImageType) && (0, import_type_guards71.isNotNil)(thumbnailUrl) && /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(Collage, { "data-testid": "thumbnail-collage", children: thumbnailUrl.map((url, index) => /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(
13794
+ Array.isArray(thumbnailUrl) && (0, import_type_guards71.isNotNil)(thumbnailImageType) && (0, import_type_guards71.isNotNil)(thumbnailUrl) && /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(Collage, { "data-testid": "thumbnail-collage", children: thumbnailUrl.map((url, index) => /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(
13766
13795
  CollageImage,
13767
13796
  {
13768
13797
  $thumbnailUrl: url,
@@ -13778,18 +13807,18 @@ var Thumbnail = ({
13778
13807
  Thumbnail.displayName = "Thumbnail_VHS";
13779
13808
 
13780
13809
  // src/components/ThumbnailCollage/ThumbnailCollage.tsx
13781
- var import_styled_components79 = require("styled-components");
13810
+ var import_styled_components80 = require("styled-components");
13782
13811
  var import_type_guards72 = require("@wistia/type-guards");
13783
- var import_jsx_runtime211 = require("react/jsx-runtime");
13784
- var ThumbnailCollageContainer = import_styled_components79.styled.div`
13812
+ var import_jsx_runtime212 = require("react/jsx-runtime");
13813
+ var ThumbnailCollageContainer = import_styled_components80.styled.div`
13785
13814
  display: grid;
13786
13815
  grid-template-columns: 3fr 2fr;
13787
13816
  grid-template-rows: 1fr 1fr;
13788
13817
  width: 100%;
13789
- grid-gap: ${({ theme: theme2 }) => theme2.spacing.space01};
13818
+ gap: ${({ theme: theme2 }) => theme2.spacing.space01};
13790
13819
  height: 100%;
13791
13820
  `;
13792
- var CollageImage2 = import_styled_components79.styled.div`
13821
+ var CollageImage2 = import_styled_components80.styled.div`
13793
13822
  ${({ $thumbnailUrl }) => (0, import_type_guards72.isNotNil)($thumbnailUrl) && `background-image: url(${$thumbnailUrl})`};
13794
13823
  ${({ $backgroundGradient }) => $backgroundGradient && getBackgroundGradient($backgroundGradient)};
13795
13824
  background-position: center;
@@ -13819,37 +13848,37 @@ var ThumbnailCollage = ({
13819
13848
  gradientBackground = "defaultMidOne",
13820
13849
  ...props
13821
13850
  }) => {
13822
- return /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(
13851
+ return /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(
13823
13852
  ThumbnailCollageContainer,
13824
13853
  {
13825
13854
  role: "presentation",
13826
13855
  ...props,
13827
- children: thumbnailUrls.length ? thumbnailUrls.map((thumbnailUrl) => /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(
13856
+ children: thumbnailUrls.length ? thumbnailUrls.map((thumbnailUrl) => /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(
13828
13857
  CollageImage2,
13829
13858
  {
13830
13859
  $thumbnailUrl: thumbnailUrl
13831
13860
  },
13832
13861
  thumbnailUrl
13833
- )) : /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(CollageImage2, { $backgroundGradient: gradientBackground })
13862
+ )) : /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(CollageImage2, { $backgroundGradient: gradientBackground })
13834
13863
  }
13835
13864
  );
13836
13865
  };
13837
13866
 
13838
13867
  // src/components/WistiaLogo/WistiaLogo.tsx
13839
- var import_styled_components80 = require("styled-components");
13868
+ var import_styled_components81 = require("styled-components");
13840
13869
  var import_type_guards73 = require("@wistia/type-guards");
13841
- var import_jsx_runtime212 = require("react/jsx-runtime");
13870
+ var import_jsx_runtime213 = require("react/jsx-runtime");
13842
13871
  var renderBrandmark = (brandmarkColor, iconOnly) => {
13843
13872
  if (iconOnly) {
13844
- return /* @__PURE__ */ (0, import_jsx_runtime212.jsx)("g", { fill: brandmarkColor, children: /* @__PURE__ */ (0, import_jsx_runtime212.jsx)("path", { d: "M16.09 17.1h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 26.53c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87ZM32.14 0c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" }) });
13873
+ return /* @__PURE__ */ (0, import_jsx_runtime213.jsx)("g", { fill: brandmarkColor, children: /* @__PURE__ */ (0, import_jsx_runtime213.jsx)("path", { d: "M16.09 17.1h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 26.53c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87ZM32.14 0c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" }) });
13845
13874
  }
13846
- return /* @__PURE__ */ (0, import_jsx_runtime212.jsx)("g", { fill: brandmarkColor, children: /* @__PURE__ */ (0, import_jsx_runtime212.jsx)("path", { d: "M16.09 21.37h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 30.8c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87Zm16.05-17.1c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" }) });
13875
+ return /* @__PURE__ */ (0, import_jsx_runtime213.jsx)("g", { fill: brandmarkColor, children: /* @__PURE__ */ (0, import_jsx_runtime213.jsx)("path", { d: "M16.09 21.37h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 30.8c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87Zm16.05-17.1c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" }) });
13847
13876
  };
13848
13877
  var renderLogotype = (logotypeColor, iconOnly) => {
13849
13878
  if (iconOnly) {
13850
13879
  return null;
13851
13880
  }
13852
- return /* @__PURE__ */ (0, import_jsx_runtime212.jsx)("g", { fill: logotypeColor, children: /* @__PURE__ */ (0, import_jsx_runtime212.jsx)("path", { d: "M70.16 8.66v15.18c0 1.68-.35 3.09-1.05 4.23a6.612 6.612 0 0 1-2.85 2.54c-1.19.55-2.52.82-4.01.82s-2.8-.28-4.01-.85a6.655 6.655 0 0 1-3.11-2.96c-.08.15-.16.29-.24.42a6.552 6.552 0 0 1-2.87 2.54c-1.2.56-2.54.85-4.01.85s-2.8-.27-3.94-.82a6.214 6.214 0 0 1-2.71-2.52c-.67-1.14-1.01-2.56-1.02-4.25l-.22-15.18h7.34V22.3c0 .82.19 1.37.56 1.67.39.28.85.42 1.38.42s1.02-.15 1.45-.45c.43-.3.65-.85.65-1.65V8.65h7.3v13.64c0 .8.22 1.35.65 1.65.43.3.91.45 1.45.45s.99-.14 1.36-.42c.39-.3.58-.85.58-1.67V8.66h7.34Zm2.45 0v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89A3.43 3.43 0 0 0 78.28.44c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.13 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm8.86 1.96c-1.42.4-2.6 1.11-3.54 2.14-.93 1.02-1.4 2.4-1.4 4.12 0 1.11.17 2.09.51 2.94.36.85.82 1.62 1.38 2.34.22.28.55.65.98 1.11.37.4.64.72.8.96.18.24.27.47.27.69 0 .5-.4.87-1.2 1.09-.8.21-1.62.31-2.47.31-.1-.01-.22-.02-.33-.02l1.02 6.94c.42.07.92.11 1.51.11 1.9 0 3.6-.28 5.1-.85 1.5-.56 2.68-1.42 3.54-2.56.88-1.14 1.31-2.55 1.31-4.23 0-.68-.07-1.31-.22-1.87-.13-.58-.32-1.09-.56-1.54a6.64 6.64 0 0 0-.8-1.27c-.3-.37-.74-.82-1.34-1.36-.39-.33-.67-.59-.85-.8-.18-.22-.27-.45-.27-.67 0-.46.26-.79.78-.98.53-.19 1.17-.29 1.91-.29.25 0 .51.01.78.04l-.71-6.88a10.4 10.4 0 0 0-1.56-.11c-1.66 0-3.21.21-4.65.62Zm19.54 15.71c-.99 0-1.71-.23-2.14-.69-.42-.47-.62-1.18-.62-2.11v-6.57h4.21V8.66h-4.21V3.38l-7.34 1.85V24.1c0 2.45.47 4.29 1.4 5.52.95 1.22 2.45 1.83 4.49 1.83.95 0 1.86-.07 2.74-.22.88-.13 1.62-.34 2.25-.62l1.38-6.3c-.55.1-1.27.16-2.16.16Zm4.13-15.8v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89a3.43 3.43 0 0 0-1.42-1.27c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.14 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm27.51 1.87v22.26h-7.34v-2.28c-.41.43-.85.83-1.34 1.19-1.44 1.07-3.12 1.6-5.05 1.6s-3.61-.52-5.1-1.56c-1.48-1.05-2.63-2.47-3.45-4.25-.82-1.78-1.22-3.73-1.22-5.85s.41-4.07 1.22-5.83c.82-1.78 1.97-3.19 3.45-4.23 1.48-1.05 3.18-1.58 5.1-1.58s3.61.53 5.05 1.6c.48.36.93.75 1.34 1.19V8.66h7.34Zm-7.1 11.11c0-.8-.19-1.53-.56-2.18-.37-.67-.88-1.19-1.54-1.58-.64-.39-1.34-.58-2.09-.58s-1.45.19-2.09.58c-.64.39-1.15.91-1.54 1.58-.37.67-.56 1.39-.56 2.18s.19 1.51.56 2.18c.39.67.9 1.19 1.54 1.58.64.39 1.34.58 2.09.58s1.45-.19 2.09-.58c.65-.39 1.16-.91 1.54-1.56.37-.67.56-1.4.56-2.2Z" }) });
13881
+ return /* @__PURE__ */ (0, import_jsx_runtime213.jsx)("g", { fill: logotypeColor, children: /* @__PURE__ */ (0, import_jsx_runtime213.jsx)("path", { d: "M70.16 8.66v15.18c0 1.68-.35 3.09-1.05 4.23a6.612 6.612 0 0 1-2.85 2.54c-1.19.55-2.52.82-4.01.82s-2.8-.28-4.01-.85a6.655 6.655 0 0 1-3.11-2.96c-.08.15-.16.29-.24.42a6.552 6.552 0 0 1-2.87 2.54c-1.2.56-2.54.85-4.01.85s-2.8-.27-3.94-.82a6.214 6.214 0 0 1-2.71-2.52c-.67-1.14-1.01-2.56-1.02-4.25l-.22-15.18h7.34V22.3c0 .82.19 1.37.56 1.67.39.28.85.42 1.38.42s1.02-.15 1.45-.45c.43-.3.65-.85.65-1.65V8.65h7.3v13.64c0 .8.22 1.35.65 1.65.43.3.91.45 1.45.45s.99-.14 1.36-.42c.39-.3.58-.85.58-1.67V8.66h7.34Zm2.45 0v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89A3.43 3.43 0 0 0 78.28.44c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.13 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm8.86 1.96c-1.42.4-2.6 1.11-3.54 2.14-.93 1.02-1.4 2.4-1.4 4.12 0 1.11.17 2.09.51 2.94.36.85.82 1.62 1.38 2.34.22.28.55.65.98 1.11.37.4.64.72.8.96.18.24.27.47.27.69 0 .5-.4.87-1.2 1.09-.8.21-1.62.31-2.47.31-.1-.01-.22-.02-.33-.02l1.02 6.94c.42.07.92.11 1.51.11 1.9 0 3.6-.28 5.1-.85 1.5-.56 2.68-1.42 3.54-2.56.88-1.14 1.31-2.55 1.31-4.23 0-.68-.07-1.31-.22-1.87-.13-.58-.32-1.09-.56-1.54a6.64 6.64 0 0 0-.8-1.27c-.3-.37-.74-.82-1.34-1.36-.39-.33-.67-.59-.85-.8-.18-.22-.27-.45-.27-.67 0-.46.26-.79.78-.98.53-.19 1.17-.29 1.91-.29.25 0 .51.01.78.04l-.71-6.88a10.4 10.4 0 0 0-1.56-.11c-1.66 0-3.21.21-4.65.62Zm19.54 15.71c-.99 0-1.71-.23-2.14-.69-.42-.47-.62-1.18-.62-2.11v-6.57h4.21V8.66h-4.21V3.38l-7.34 1.85V24.1c0 2.45.47 4.29 1.4 5.52.95 1.22 2.45 1.83 4.49 1.83.95 0 1.86-.07 2.74-.22.88-.13 1.62-.34 2.25-.62l1.38-6.3c-.55.1-1.27.16-2.16.16Zm4.13-15.8v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89a3.43 3.43 0 0 0-1.42-1.27c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.14 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm27.51 1.87v22.26h-7.34v-2.28c-.41.43-.85.83-1.34 1.19-1.44 1.07-3.12 1.6-5.05 1.6s-3.61-.52-5.1-1.56c-1.48-1.05-2.63-2.47-3.45-4.25-.82-1.78-1.22-3.73-1.22-5.85s.41-4.07 1.22-5.83c.82-1.78 1.97-3.19 3.45-4.23 1.48-1.05 3.18-1.58 5.1-1.58s3.61.53 5.05 1.6c.48.36.93.75 1.34 1.19V8.66h7.34Zm-7.1 11.11c0-.8-.19-1.53-.56-2.18-.37-.67-.88-1.19-1.54-1.58-.64-.39-1.34-.58-2.09-.58s-1.45.19-2.09.58c-.64.39-1.15.91-1.54 1.58-.37.67-.56 1.39-.56 2.18s.19 1.51.56 2.18c.39.67.9 1.19 1.54 1.58.64.39 1.34.58 2.09.58s1.45-.19 2.09-.58c.65-.39 1.16-.91 1.54-1.56.37-.67.56-1.4.56-2.2Z" }) });
13853
13882
  };
13854
13883
  var computedViewBox = (iconOnly) => {
13855
13884
  if (iconOnly) {
@@ -13857,7 +13886,7 @@ var computedViewBox = (iconOnly) => {
13857
13886
  }
13858
13887
  return "0 0 144 31.47";
13859
13888
  };
13860
- var WistiaLogoComponent = import_styled_components80.styled.svg`
13889
+ var WistiaLogoComponent = import_styled_components81.styled.svg`
13861
13890
  height: ${({ height }) => `${height}px`};
13862
13891
 
13863
13892
  /* ensure it will always fit on mobile */
@@ -13899,7 +13928,7 @@ var WistiaLogo = ({
13899
13928
  };
13900
13929
  const brandmarkColor = VARIANT_COLORS[variant].brandmark;
13901
13930
  const logotypeColor = VARIANT_COLORS[variant].logotype;
13902
- const Logo = /* @__PURE__ */ (0, import_jsx_runtime212.jsxs)(
13931
+ const Logo = /* @__PURE__ */ (0, import_jsx_runtime213.jsxs)(
13903
13932
  WistiaLogoComponent,
13904
13933
  {
13905
13934
  $hoverColor: hoverColor,
@@ -13909,14 +13938,14 @@ var WistiaLogo = ({
13909
13938
  xmlns: "http://www.w3.org/2000/svg",
13910
13939
  ...otherProps,
13911
13940
  children: [
13912
- /* @__PURE__ */ (0, import_jsx_runtime212.jsx)("title", { children: title }),
13913
- (0, import_type_guards73.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime212.jsx)("desc", { children: description }) : null,
13941
+ /* @__PURE__ */ (0, import_jsx_runtime213.jsx)("title", { children: title }),
13942
+ (0, import_type_guards73.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime213.jsx)("desc", { children: description }) : null,
13914
13943
  renderBrandmark(brandmarkColor, iconOnly),
13915
13944
  renderLogotype(logotypeColor, iconOnly)
13916
13945
  ]
13917
13946
  }
13918
13947
  );
13919
- return href !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime212.jsx)("a", { href, children: Logo }) : Logo;
13948
+ return href !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime213.jsx)("a", { href, children: Logo }) : Logo;
13920
13949
  };
13921
13950
  WistiaLogo.displayName = "WistiaLogo_VHS";
13922
13951
  // Annotate the CommonJS export names for ESM import in node:
@@ -13978,6 +14007,7 @@ WistiaLogo.displayName = "WistiaLogo_VHS";
13978
14007
  ScreenReaderOnly,
13979
14008
  Select,
13980
14009
  Slider,
14010
+ Stack,
13981
14011
  SubMenu,
13982
14012
  Switch,
13983
14013
  Text,