@wistia/ui 0.0.9 → 0.0.10

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.0.9
+ * @license @wistia/ui v0.0.10
  *
  * Copyright (c) 2024-2024, Wistia, Inc. and its affiliates.
  *
@@ -1516,22 +1516,22 @@ 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)};
+  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)) {
@@ -1557,6 +1557,7 @@ var Box = ({
   hasBoxParent = false,
   fill = false,
   fillViewport = false,
+  gap,
   inline = false,
   justifyContent = "flex-start",
   wrapItems = false,
@@ -1572,15 +1573,16 @@ var Box = ({
   return /* @__PURE__ */ jsx4(
     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 +1592,8 @@ Box.displayName = "Box";
 
 // src/components/Button/Button.tsx
 import { forwardRef as forwardRef3 } from "react";
-import { isNotNil as isNotNil4, isNotUndefined as isNotUndefined3 } from "@wistia/type-guards";
 import styled5 from "styled-components";
+import { isNotNil as isNotNil4, isNotUndefined as isNotUndefined3 } from "@wistia/type-guards";
 
 // src/css/buttonResetCss.tsx
 import { css as css10 } from "styled-components";
@@ -1674,7 +1676,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,10 +1791,10 @@ 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
@@ -4336,22 +4338,35 @@ 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 jsx135, 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__ */ 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"
+        }
+      ),
+      /* @__PURE__ */ jsx135(
+        "animateTransform",
+        {
+          attributeName: "transform",
+          dur: "1.5s",
+          keyTimes: "0;1",
+          repeatCount: "indefinite",
+          type: "rotate",
+          values: "0 0 0;360 0 0"
+        }
+      )
+    ]
   }
 );
 
@@ -5112,15 +5127,15 @@ 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 jsx159, jsxs as jsxs5 } from "react/jsx-runtime";
 var isLink2 = (props) => isNotUndefined3(props.href);
 var StyledButton = styled5.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`
@@ -5149,9 +5164,9 @@ var ButtonContent = ({
   rightIcon,
   children
 }) => {
-  return /* @__PURE__ */ jsxs4(Fragment, { children: [
+  return /* @__PURE__ */ jsxs5(Fragment, { children: [
     isLoading ? /* @__PURE__ */ jsx159(StyledButtonLoading, { children: /* @__PURE__ */ jsx159(Icon, { type: "spinner" }) }) : null,
-    /* @__PURE__ */ jsxs4(
+    /* @__PURE__ */ jsxs5(
       StyledButtonContent,
       {
         $hasLeftIcon: isNotNil4(leftIcon),
@@ -5179,7 +5194,7 @@ var Button = forwardRef3(
     unstyled = false,
     onClick,
     fullWidth = false,
-    size = "medium",
+    size = "md",
     variant = "solid",
     ...props
   }, ref) => {
@@ -5188,14 +5203,14 @@ 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}`;
@@ -5272,11 +5287,11 @@ var ButtonGroupComponent = styled6.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;
@@ -5300,8 +5315,8 @@ var ButtonGroup = ({
   return /* @__PURE__ */ jsx160(
     ButtonGroupComponent,
     {
-      align,
-      fullWidth,
+      $align: align,
+      $fullWidth: fullWidth,
       ...otherProps,
       children
     }
@@ -5309,21 +5324,55 @@ var ButtonGroup = ({
 };
 ButtonGroup.displayName = "ButtonGroup";
 
-// src/components/Divider/Divider.tsx
+// src/components/ColorSchemeWrapper/ColorSchemeWrapper.tsx
 import styled7 from "styled-components";
 import { jsx as jsx161 } from "react/jsx-runtime";
+var colorSchemeOptions = [
+  "inherit",
+  "default",
+  "info",
+  "success",
+  "warning",
+  "error",
+  "blue",
+  "green",
+  "orange",
+  "pink",
+  "purple",
+  "yellow"
+];
+var StyledColorSchemeWrapper = styled7.div`
+  ${({ $colorScheme }) => getColorScheme($colorScheme)};
+`;
+var ColorSchemeWrapper = ({
+  colorScheme,
+  children,
+  ...otherProps
+}) => /* @__PURE__ */ jsx161(
+  StyledColorSchemeWrapper,
+  {
+    $colorScheme: colorScheme,
+    ...otherProps,
+    children
+  }
+);
+ColorSchemeWrapper.displayName = "ColorSchemeWrapper";
+
+// src/components/Divider/Divider.tsx
+import styled8 from "styled-components";
+import { jsx as jsx162 } from "react/jsx-runtime";
 var sizeToPixelMap = {
   lg: 4,
   sm: 1
 };
-var DividerComponent = styled7.hr`
+var DividerComponent = styled8.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 +5380,10 @@ var DividerComponent = styled7.hr`
 `;
 var Divider = ({ size = "sm", ...otherProps }) => {
   const responsiveSize = useResponsiveProp(size);
-  return /* @__PURE__ */ jsx161(
+  return /* @__PURE__ */ jsx162(
     DividerComponent,
     {
-      borderHeight: sizeToPixelMap[responsiveSize],
+      $borderHeight: sizeToPixelMap[responsiveSize],
       ...otherProps
     }
   );
@@ -5343,8 +5392,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 styled9, { css as css12 } from "styled-components";
+import { jsx as jsx163 } from "react/jsx-runtime";
 var ellipsisStyle = css12`
   overflow: hidden;
   text-overflow: ellipsis;
@@ -5371,13 +5420,13 @@ var ellipsisStyle = css12`
 var ellipsisFlexParentStyle = css12`
   min-width: 0;
 `;
-var EllipsisComponent = styled8.div`
+var EllipsisComponent = styled9.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 +5434,10 @@ var EllipsisComponent = styled8.div`
   return void 0;
 }}
 `;
-var Ellipsis = ({ children, lines, ...otherProps }) => /* @__PURE__ */ jsx162(
+var Ellipsis = ({ children, lines, ...otherProps }) => /* @__PURE__ */ jsx163(
   EllipsisComponent,
   {
-    lines,
+    $lines: lines,
     ...otherProps,
     children
   }
@@ -5397,7 +5446,7 @@ Ellipsis.displayName = "Ellipsis";
 
 // src/components/Heading/Heading.tsx
 import { forwardRef as forwardRef4 } from "react";
-import styled9, { css as css13 } from "styled-components";
+import styled10, { css as css13 } from "styled-components";
 
 // src/private/helpers/makePolymorphic/makePolymorphic.tsx
 var makePolymorphic = (component) => {
@@ -5405,7 +5454,7 @@ var makePolymorphic = (component) => {
 };
 
 // src/components/Heading/Heading.tsx
-import { jsx as jsx163 } from "react/jsx-runtime";
+import { jsx as jsx164 } from "react/jsx-runtime";
 var heroStyle = css13`
   --font-family: var(--typography-heading-hero-family);
   --font-size: var(--typography-heading-hero-size);
@@ -5458,26 +5507,26 @@ var variantStyleMap = {
   heading6: heading6TextStyle
 };
 var DEFAULT_ELEMENT = "h1";
-var StyledHeading = styled9.div`
-  ${({ colorScheme }) => getColorScheme(colorScheme)};
+var StyledHeading = styled10.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 +5550,18 @@ var HeadingComponent = forwardRef4(
     variant = "heading1",
     renderAs,
     ...otherProps
-  }, ref) => /* @__PURE__ */ jsx163(
+  }, ref) => /* @__PURE__ */ jsx164(
     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 +5571,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 styled12 from "styled-components";
 
 // src/components/Tooltip/Tooltip.tsx
 import {
@@ -5532,8 +5581,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 styled11, { css as css14 } from "styled-components";
+import { jsx as jsx165, 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 +5590,7 @@ var CompactTooltipStyles = css14`
   --tooltip-horizontal-padding: var(--space-02);
   --tooltip-vertical-padding: var(--space-03);
 `;
-var StyledContent = styled10(Content)`
+var StyledContent = styled11(Content)`
   --tooltip-font-family: var(--typography-family-default);
   --tooltip-border-radius: var(--border-radius-05);
   --tooltip-bg: var(--color-bg-tooltip);
@@ -5599,14 +5648,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__ */ jsx165(Trigger, { asChild: true, children }),
+        /* @__PURE__ */ jsx165(Portal, { children: /* @__PURE__ */ jsxs6(
           StyledContent,
           {
             $compact: compact,
@@ -5614,7 +5663,7 @@ var Tooltip = ({
             sideOffset: hideArrow ? VISUAL_OFFSET : VISUAL_OFFSET - 2,
             children: [
               content,
-              !hideArrow ? /* @__PURE__ */ jsx164(Arrow, { asChild: true, children: /* @__PURE__ */ jsx164(
+              !hideArrow ? /* @__PURE__ */ jsx165(Arrow, { asChild: true, children: /* @__PURE__ */ jsx165(
                 "svg",
                 {
                   fill: "var(--tooltip-bg)",
@@ -5623,7 +5672,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__ */ jsx165("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 +5685,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 jsx166 } from "react/jsx-runtime";
+var StyledButton2 = styled12(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 +5701,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__ */ jsx166(
       StyledButton2,
       {
         ...props,
@@ -5669,24 +5712,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__ */ jsx166(Tooltip, { content: label, children: button });
   }
 );
 IconButton.displayName = "IconButton";
 
+// src/components/Label/Label.tsx
+import styled13, { css as css15 } from "styled-components";
+import { jsx as jsx167 } 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 = styled13.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__ */ jsx167(
+  StyledLabel,
+  {
+    disabled,
+    required,
+    screenReaderOnly,
+    ...otherProps,
+    children
+  }
+);
+Label.displayName = "Label";
+
 // src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
-import styled12 from "styled-components";
+import styled14 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 jsx168 } from "react/jsx-runtime";
+var VisuallyHidden = styled14.div({ ...visuallyHiddenStyle });
+var VisuallyHiddenButFocusable = styled14.div({
   "&:not(:focus-within)": visuallyHiddenStyle
 });
 var ScreenReaderOnly = ({
@@ -5697,21 +5798,21 @@ var ScreenReaderOnly = ({
 }) => {
   const accessibleText = isNotNil6(text) ? text : children;
   if (focusable) {
-    return /* @__PURE__ */ jsx166(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
+    return /* @__PURE__ */ jsx168(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
   }
-  return /* @__PURE__ */ jsx166(VisuallyHidden, { ...otherProps, children: accessibleText });
+  return /* @__PURE__ */ jsx168(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 styled15 from "styled-components";
+import { jsx as jsx169 } from "react/jsx-runtime";
 var DEFAULT_ELEMENT2 = "div";
-var StyledStack = styled13.div`
+var StyledStack = styled15.div`
   display: flex;
   flex-direction: ${({ $direction }) => $direction === "horizontal" ? "row" : "column"};
-  gap: ${({ gap }) => `var(--${gap})`};
+  gap: ${({ $gap }) => `var(--${$gap})`};
 
   > * {
     flex: 1;
@@ -5721,13 +5822,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__ */ jsx169(
       StyledStack,
       {
         ref,
         $direction: responsiveDirection,
+        $gap: responsiveGap,
         as: renderAs ?? DEFAULT_ELEMENT2,
-        gap: responsiveGap,
         ...props
       }
     );
@@ -5738,89 +5839,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 styled16, { css as css16 } from "styled-components";
+import { jsx as jsx170 } 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 +5939,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 +5953,8 @@ var prominenceMap = {
   vibrant: vibrantProminenceStyle,
   secondary: secondaryProminenceStyle
 };
-var StyledText = styled14.div`
-  ${({ colorScheme }) => getColorScheme(colorScheme)};
+var StyledText = styled16.div`
+  ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-family: var(--font-family);
   font-size: var(--font-size);
   font-weight: var(--font-weight);
@@ -5861,22 +5962,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`
+  ${({ align }) => css16`
     text-align: ${align};
   `}
-  ${({ as }) => as === "p" && css15`
+  ${({ as }) => as === "p" && css16`
       display: block;
     `}
 `;
@@ -5894,19 +5995,19 @@ var TextComponent = forwardRef7(
     renderAs,
     ...otherProps
   }, ref) => {
-    return /* @__PURE__ */ jsx168(
+    return /* @__PURE__ */ jsx170(
       StyledText,
       {
         ref,
+        $colorScheme: colorScheme,
+        $disabled: disabled,
+        $ellipsis: ellipsis,
+        $inline: inline,
+        $preventUserSelect: preventUserSelect,
+        $prominence: prominence,
+        $variant: variant,
         align,
         as: renderAs ?? DEFAULT_ELEMENT3,
-        colorScheme,
-        disabled,
-        ellipsis,
-        inline,
-        preventUserSelect,
-        prominence,
-        variant,
         ...otherProps
       }
     );
@@ -5916,20 +6017,20 @@ TextComponent.displayName = "Text";
 var Text = makePolymorphic(TextComponent);
 
 // src/components/WistiaLogo/WistiaLogo.tsx
-import styled15 from "styled-components";
+import styled17 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 jsx171, 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__ */ jsx171("g", { fill: brandmarkColor, children: /* @__PURE__ */ jsx171("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__ */ jsx171("g", { fill: brandmarkColor, children: /* @__PURE__ */ jsx171("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__ */ jsx171("g", { fill: logotypeColor, children: /* @__PURE__ */ jsx171("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 +6038,7 @@ var computedViewBox = (iconOnly) => {
   }
   return "0 0 144 31.47";
 };
-var WistiaLogoComponent = styled15.svg`
+var WistiaLogoComponent = styled17.svg`
   height: ${({ height }) => `${height}px`};
 
   /* ensure it will always fit on mobile */
@@ -5946,7 +6047,7 @@ var WistiaLogoComponent = styled15.svg`
 
   &:hover {
     path {
-      ${({ hoverColor }) => hoverColor !== void 0 ? `fill: ${hoverColor}` : null};
+      ${({ $hoverColor }) => $hoverColor !== void 0 ? `fill: ${$hoverColor}` : null};
     }
   }
 `;
@@ -5979,46 +6080,26 @@ 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__ */ jsx171("title", { children: title }),
+        isNotNil7(description) ? /* @__PURE__ */ jsx171("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__ */ jsx171("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 {
   Badge,
   Box,
@@ -6030,6 +6111,7 @@ export {
   Heading,
   Icon,
   IconButton,
+  Label,
   Link,
   ScreenReaderOnly,
   Stack,
@@ -6037,6 +6119,7 @@ export {
   Tooltip,
   UIProvider,
   WistiaLogo,
+  colorSchemeOptions,
   copyToClipboard,
   ellipsisFlexParentStyle,
   ellipsisStyle,