@wistia/ui 0.0.9 → 0.0.10

package/dist/index.cjs

@@ -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.
  *
@@ -49,6 +49,7 @@ __export(src_exports, {
   Heading: () => Heading,
   Icon: () => Icon,
   IconButton: () => IconButton,
+  Label: () => Label,
   Link: () => Link,
   ScreenReaderOnly: () => ScreenReaderOnly,
   Stack: () => Stack,
@@ -56,6 +57,7 @@ __export(src_exports, {
   Tooltip: () => Tooltip,
   UIProvider: () => UIProvider,
   WistiaLogo: () => WistiaLogo,
+  colorSchemeOptions: () => colorSchemeOptions,
   copyToClipboard: () => copyToClipboard,
   ellipsisFlexParentStyle: () => ellipsisFlexParentStyle,
   ellipsisStyle: () => ellipsisStyle,
@@ -1576,22 +1578,22 @@ var getFillViewportStyle = (fillViewport) => {
   return void 0;
 };
 var BoxComponent = import_styled_components12.default.div`
-  align-content: ${({ alignContent }) => alignContent};
-  align-items: ${({ alignItems }) => alignItems};
-  align-self: ${({ alignSelf }) => alignSelf ?? null};
-  display: ${({ inline }) => (0, import_type_guards6.isNotNil)(inline) && inline ? "inline-flex" : "flex"};
-  flex-basis: ${({ basis }) => (0, import_type_guards6.isNotNil)(basis) ? basis : null};
-  flex-direction: ${({ flexDirection }) => flexDirection};
-  ${({ fillBox: fill }) => getFillStyle(fill)};
-  ${({ fillViewport }) => getFillViewportStyle(fillViewport)};
+  align-content: ${({ $alignContent }) => $alignContent};
+  align-items: ${({ $alignItems }) => $alignItems};
+  align-self: ${({ $alignSelf }) => $alignSelf ?? null};
+  display: ${({ $inline }) => (0, import_type_guards6.isNotNil)($inline) && $inline ? "inline-flex" : "flex"};
+  flex-basis: ${({ $basis }) => (0, import_type_guards6.isNotNil)($basis) ? $basis : null};
+  flex-direction: ${({ $flexDirection }) => $flexDirection};
+  ${({ $fillBox: fill }) => getFillStyle(fill)};
+  ${({ $fillViewport }) => getFillViewportStyle($fillViewport)};
 
   /* Box children styles */
-  flex-grow: ${({ grow }) => (0, import_type_guards6.isNotNil)(grow) ? grow : null};
-  flex-shrink: ${({ shrink }) => (0, import_type_guards6.isNotNil)(shrink) ? shrink : null};
-  flex-wrap: ${({ wrapItems }) => wrapItems ? "wrap" : "nowrap"};
-  ${({ gap }) => getGapStyle(gap)};
-  justify-content: ${({ justifyContent }) => justifyContent};
-  order: ${({ order }) => (0, import_type_guards6.isNotNil)(order) ? order : null};
+  flex-grow: ${({ $grow }) => (0, import_type_guards6.isNotNil)($grow) ? $grow : null};
+  flex-shrink: ${({ $shrink }) => (0, import_type_guards6.isNotNil)($shrink) ? $shrink : null};
+  flex-wrap: ${({ $wrapItems }) => $wrapItems ? "wrap" : "nowrap"};
+  ${({ $gap }) => getGapStyle($gap)};
+  justify-content: ${({ $justifyContent }) => $justifyContent};
+  order: ${({ $order }) => (0, import_type_guards6.isNotNil)($order) ? $order : null};
 `;
 var wrapChildren = (children) => {
   if ((0, import_type_guards6.isNotNil)(children)) {
@@ -1617,6 +1619,7 @@ var Box = ({
   hasBoxParent = false,
   fill = false,
   fillViewport = false,
+  gap,
   inline = false,
   justifyContent = "flex-start",
   wrapItems = false,
@@ -1632,15 +1635,16 @@ var Box = ({
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     BoxComponent,
     {
-      alignContent,
-      alignItems,
+      $alignContent: alignContent,
+      $alignItems: alignItems,
+      $fillBox: fill,
+      $fillViewport: fillViewport,
+      $flexDirection: direction,
+      $gap: gap,
+      $inline: inline,
+      $justifyContent: justifyContent,
+      $wrapItems: wrapItems,
       as: "div",
-      fillBox: fill,
-      fillViewport,
-      flexDirection: direction,
-      inline,
-      justifyContent,
-      wrapItems,
       ...otherProps,
       children: wrapChildren(children)
     }
@@ -1650,8 +1654,8 @@ Box.displayName = "Box";
 
 // src/components/Button/Button.tsx
 var import_react9 = require("react");
-var import_type_guards10 = require("@wistia/type-guards");
 var import_styled_components17 = __toESM(require("styled-components"));
+var import_type_guards10 = require("@wistia/type-guards");
 
 // src/css/buttonResetCss.tsx
 var import_styled_components13 = require("styled-components");
@@ -1734,7 +1738,7 @@ var buttonLargeStyles = import_styled_components14.css`
   --button-icon-size: 24px;
   --button-label-gap: 8px;
 `;
-var buttonHeroStyles = import_styled_components14.css`
+var buttonExtraLargeStyles = import_styled_components14.css`
   --button-padding-vertical: var(--space-03);
   --button-padding-horizontal: var(--space-03);
   --button-label-padding-horizontal: var(--space-02);
@@ -1849,10 +1853,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
@@ -4397,21 +4401,34 @@ var SparkleIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
 
 // src/components/Icon/icons/SpinnerIcon.tsx
 var import_jsx_runtime135 = require("react/jsx-runtime");
-var SpinnerIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
+var SpinnerIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(
   "svg",
   {
     ...props,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
-      "path",
-      {
-        clipRule: "evenodd",
-        d: "M11.9999 5.33314C8.31802 5.33314 5.33326 8.31788 5.33326 11.9998C5.33326 15.6817 8.31802 18.6664 11.9999 18.6664C15.6818 18.6664 18.6666 15.6817 18.6666 11.9998C18.6666 11.0793 19.4127 10.3331 20.3332 10.3331C21.2537 10.3331 21.9999 11.0793 21.9999 11.9998C21.9999 17.5226 17.5227 21.9998 11.9999 21.9998C6.47708 21.9998 1.99994 17.5226 1.99994 11.9998C1.99994 6.47697 6.47708 1.99981 11.9999 1.99981C12.9204 1.99981 13.6666 2.74598 13.6666 3.66647C13.6666 4.58697 12.9204 5.33314 11.9999 5.33314Z",
-        fill: "currentColor",
-        fillRule: "evenodd"
-      }
-    )
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
+        "path",
+        {
+          clipRule: "evenodd",
+          d: "M11.9999 5.33314C8.31802 5.33314 5.33326 8.31788 5.33326 11.9998C5.33326 15.6817 8.31802 18.6664 11.9999 18.6664C15.6818 18.6664 18.6666 15.6817 18.6666 11.9998C18.6666 11.0793 19.4127 10.3331 20.3332 10.3331C21.2537 10.3331 21.9999 11.0793 21.9999 11.9998C21.9999 17.5226 17.5227 21.9998 11.9999 21.9998C6.47708 21.9998 1.99994 17.5226 1.99994 11.9998C1.99994 6.47697 6.47708 1.99981 11.9999 1.99981C12.9204 1.99981 13.6666 2.74598 13.6666 3.66647C13.6666 4.58697 12.9204 5.33314 11.9999 5.33314Z",
+          fill: "currentColor",
+          fillRule: "evenodd"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
+        "animateTransform",
+        {
+          attributeName: "transform",
+          dur: "1.5s",
+          keyTimes: "0;1",
+          repeatCount: "indefinite",
+          type: "rotate",
+          values: "0 0 0;360 0 0"
+        }
+      )
+    ]
   }
 );
 
@@ -5176,11 +5193,11 @@ var import_jsx_runtime159 = require("react/jsx-runtime");
 var isLink2 = (props) => (0, import_type_guards10.isNotUndefined)(props.href);
 var StyledButton = import_styled_components17.default.button`
   ${buttonResetCss}
-  ${({ colorScheme }) => getColorScheme(colorScheme)}
-  ${({ size }) => buttonSizeStyles[size]}
-  ${({ variant }) => buttonVariantsStyles[variant]}
-  ${({ unstyled }) => !unstyled && buttonBaseStyles}
-  ${({ fullWidth }) => fullWidth && "width: 100%;"}
+  ${({ $colorScheme }) => getColorScheme($colorScheme)}
+  ${({ $size }) => buttonSizeStyles[$size]}
+  ${({ $variant }) => buttonVariantsStyles[$variant]}
+  ${({ $unstyled }) => !$unstyled && buttonBaseStyles}
+  ${({ $fullWidth }) => $fullWidth && "width: 100%;"}
   position: relative;
 `;
 var StyledButtonContent = import_styled_components17.default.div`
@@ -5239,7 +5256,7 @@ var Button = (0, import_react9.forwardRef)(
     unstyled = false,
     onClick,
     fullWidth = false,
-    size = "medium",
+    size = "md",
     variant = "solid",
     ...props
   }, ref) => {
@@ -5248,14 +5265,14 @@ var Button = (0, import_react9.forwardRef)(
     const isAriaDisabled = () => isLoading || disabled;
     const commonProps = {
       "aria-disabled": isAriaDisabled() || void 0,
-      colorScheme,
-      variant,
-      forceState,
-      unstyled,
+      $colorScheme: colorScheme,
+      $fullWidth: responsiveFullWidth,
+      $size: responsiveSize,
+      $unstyled: unstyled,
+      $variant: variant,
       className,
-      isLoading,
-      size: responsiveSize,
-      fullWidth: responsiveFullWidth
+      forceState,
+      isLoading
     };
     if (forceState) {
       commonProps.className = `${className ?? ""} force-state-${forceState}`;
@@ -5332,11 +5349,11 @@ var ButtonGroupComponent = import_styled_components18.default.div`
   display: flex;
 
   /* this helps ensure that primary buttons appear at the top of the column */
-  flex-direction: ${({ align }) => align === "right" ? "column-reverse" : "column"};
+  flex-direction: ${({ $align }) => $align === "right" ? "column-reverse" : "column"};
   gap: var(--space-04);
   align-items: center;
-  justify-content: ${({ align }) => getAlignment(align)};
-  width: ${({ fullWidth }) => fullWidth ? "100%" : "auto"};
+  justify-content: ${({ $align }) => getAlignment($align)};
+  width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
 
   ${mq.smAndUp} {
     flex-direction: row;
@@ -5360,8 +5377,8 @@ var ButtonGroup = ({
   return /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(
     ButtonGroupComponent,
     {
-      align,
-      fullWidth,
+      $align: align,
+      $fullWidth: fullWidth,
       ...otherProps,
       children
     }
@@ -5369,21 +5386,55 @@ var ButtonGroup = ({
 };
 ButtonGroup.displayName = "ButtonGroup";
 
-// src/components/Divider/Divider.tsx
+// src/components/ColorSchemeWrapper/ColorSchemeWrapper.tsx
 var import_styled_components19 = __toESM(require("styled-components"));
 var import_jsx_runtime161 = require("react/jsx-runtime");
+var colorSchemeOptions = [
+  "inherit",
+  "default",
+  "info",
+  "success",
+  "warning",
+  "error",
+  "blue",
+  "green",
+  "orange",
+  "pink",
+  "purple",
+  "yellow"
+];
+var StyledColorSchemeWrapper = import_styled_components19.default.div`
+  ${({ $colorScheme }) => getColorScheme($colorScheme)};
+`;
+var ColorSchemeWrapper = ({
+  colorScheme,
+  children,
+  ...otherProps
+}) => /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
+  StyledColorSchemeWrapper,
+  {
+    $colorScheme: colorScheme,
+    ...otherProps,
+    children
+  }
+);
+ColorSchemeWrapper.displayName = "ColorSchemeWrapper";
+
+// src/components/Divider/Divider.tsx
+var import_styled_components20 = __toESM(require("styled-components"));
+var import_jsx_runtime162 = require("react/jsx-runtime");
 var sizeToPixelMap = {
   lg: 4,
   sm: 1
 };
-var DividerComponent = import_styled_components19.default.hr`
+var DividerComponent = import_styled_components20.default.hr`
   background: none;
   border-bottom: none;
   border-left: none;
   border-right: none;
   border-top-color: var(--color-border);
   border-top-style: solid;
-  border-top-width: ${({ borderHeight }) => `${borderHeight}px`};
+  border-top-width: ${({ $borderHeight }) => `${$borderHeight}px`};
   clear: both;
   height: 0;
   line-height: 0;
@@ -5391,10 +5442,10 @@ var DividerComponent = import_styled_components19.default.hr`
 `;
 var Divider = ({ size = "sm", ...otherProps }) => {
   const responsiveSize = useResponsiveProp(size);
-  return /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(
     DividerComponent,
     {
-      borderHeight: sizeToPixelMap[responsiveSize],
+      $borderHeight: sizeToPixelMap[responsiveSize],
       ...otherProps
     }
   );
@@ -5403,9 +5454,9 @@ Divider.displayName = "Divider";
 
 // src/components/Ellipsis/Ellipsis.tsx
 var import_type_guards12 = require("@wistia/type-guards");
-var import_styled_components20 = __toESM(require("styled-components"));
-var import_jsx_runtime162 = require("react/jsx-runtime");
-var ellipsisStyle = import_styled_components20.css`
+var import_styled_components21 = __toESM(require("styled-components"));
+var import_jsx_runtime163 = require("react/jsx-runtime");
+var ellipsisStyle = import_styled_components21.css`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -5428,16 +5479,16 @@ var ellipsisStyle = import_styled_components20.css`
     }
   }
 `;
-var ellipsisFlexParentStyle = import_styled_components20.css`
+var ellipsisFlexParentStyle = import_styled_components21.css`
   min-width: 0;
 `;
-var EllipsisComponent = import_styled_components20.default.div`
+var EllipsisComponent = import_styled_components21.default.div`
   ${ellipsisStyle};
-  ${({ lines }) => {
-  if ((0, import_type_guards12.isNotNil)(lines)) {
-    return import_styled_components20.css`
+  ${({ $lines }) => {
+  if ((0, import_type_guards12.isNotNil)($lines)) {
+    return import_styled_components21.css`
         -webkit-box-orient: vertical;
-        -webkit-line-clamp: ${lines};
+        -webkit-line-clamp: ${$lines};
         display: -webkit-box;
         white-space: initial;
       `;
@@ -5445,10 +5496,10 @@ var EllipsisComponent = import_styled_components20.default.div`
   return void 0;
 }}
 `;
-var Ellipsis = ({ children, lines, ...otherProps }) => /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(
+var Ellipsis = ({ children, lines, ...otherProps }) => /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
   EllipsisComponent,
   {
-    lines,
+    $lines: lines,
     ...otherProps,
     children
   }
@@ -5457,7 +5508,7 @@ Ellipsis.displayName = "Ellipsis";
 
 // src/components/Heading/Heading.tsx
 var import_react10 = require("react");
-var import_styled_components21 = __toESM(require("styled-components"));
+var import_styled_components22 = __toESM(require("styled-components"));
 
 // src/private/helpers/makePolymorphic/makePolymorphic.tsx
 var makePolymorphic = (component) => {
@@ -5465,44 +5516,44 @@ var makePolymorphic = (component) => {
 };
 
 // src/components/Heading/Heading.tsx
-var import_jsx_runtime163 = require("react/jsx-runtime");
-var heroStyle = import_styled_components21.css`
+var import_jsx_runtime164 = require("react/jsx-runtime");
+var heroStyle = import_styled_components22.css`
   --font-family: var(--typography-heading-hero-family);
   --font-size: var(--typography-heading-hero-size);
   --font-weight: var(--typography-heading-hero-weight);
   --line-height: var(--typography-heading-hero-line-height);
 `;
-var heading1TextStyle = import_styled_components21.css`
+var heading1TextStyle = import_styled_components22.css`
   --font-family: var(--typography-heading-1-family);
   --font-size: var(--typography-heading-1-size);
   --font-weight: var(--typography-heading-1-weight);
   --line-height: var(--typography-heading-1-line-height);
 `;
-var heading2TextStyle = import_styled_components21.css`
+var heading2TextStyle = import_styled_components22.css`
   --font-family: var(--typography-heading-2-family);
   --font-size: var(--typography-heading-2-size);
   --font-weight: var(--typography-heading-2-weight);
   --line-height: var(--typography-heading-2-line-height);
 `;
-var heading3TextStyle = import_styled_components21.css`
+var heading3TextStyle = import_styled_components22.css`
   --font-family: var(--typography-heading-3-family);
   --font-size: var(--typography-heading-3-size);
   --font-weight: var(--typography-heading-3-weight);
   --line-height: var(--typography-heading-3-line-height);
 `;
-var heading4TextStyle = import_styled_components21.css`
+var heading4TextStyle = import_styled_components22.css`
   --font-family: var(--typography-heading-4-family);
   --font-size: var(--typography-heading-4-size);
   --font-weight: var(--typography-heading-4-weight);
   --line-height: var(--typography-heading-4-line-height);
 `;
-var heading5TextStyle = import_styled_components21.css`
+var heading5TextStyle = import_styled_components22.css`
   --font-family: var(--typography-heading-5-family);
   --font-size: var(--typography-heading-5-size);
   --font-weight: var(--typography-heading-5-weight);
   --line-height: var(--typography-heading-5-line-height);
 `;
-var heading6TextStyle = import_styled_components21.css`
+var heading6TextStyle = import_styled_components22.css`
   --font-family: var(--typography-heading-6-family);
   --font-size: var(--typography-heading-6-size);
   --font-weight: var(--typography-heading-6-weight);
@@ -5518,26 +5569,26 @@ var variantStyleMap = {
   heading6: heading6TextStyle
 };
 var DEFAULT_ELEMENT = "h1";
-var StyledHeading = import_styled_components21.default.div`
-  ${({ colorScheme }) => getColorScheme(colorScheme)};
+var StyledHeading = import_styled_components22.default.div`
+  ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-family: var(--font-family);
   font-size: var(--font-size);
   font-weight: var(--font-weight);
   line-height: var(--line-height);
   color: var(--color-text);
-  ${({ variant }) => variantStyleMap[variant]}
-  ${({ ellipsis }) => ellipsis && ellipsisStyle};
-  ${({ inline }) => inline && import_styled_components21.css`
+  ${({ $variant }) => variantStyleMap[$variant]}
+  ${({ $ellipsis }) => $ellipsis && ellipsisStyle};
+  ${({ $inline }) => $inline && import_styled_components22.css`
       display: inline-block;
     `}
-  ${({ disabled }) => disabled && import_styled_components21.css`
+  ${({ $disabled }) => $disabled && import_styled_components22.css`
       color: var(--color-text-disabled);
     `}
-  ${({ preventUserSelect }) => preventUserSelect && import_styled_components21.css`
+  ${({ $preventUserSelect }) => $preventUserSelect && import_styled_components22.css`
       user-select: none;
     `}
-  ${({ align }) => import_styled_components21.css`
-    text-align: ${align};
+  ${({ $align }) => import_styled_components22.css`
+    text-align: ${$align};
   `}
   margin: 0;
 `;
@@ -5561,18 +5612,18 @@ var HeadingComponent = (0, import_react10.forwardRef)(
     variant = "heading1",
     renderAs,
     ...otherProps
-  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(
     StyledHeading,
     {
       ref,
-      align,
+      $align: align,
+      $colorScheme: colorScheme,
+      $disabled: disabled,
+      $ellipsis: ellipsis,
+      $inline: inline,
+      $preventUserSelect: preventUserSelect,
+      $variant: variant,
       as: renderAs ?? variantElementMap[variant],
-      colorScheme,
-      disabled,
-      ellipsis,
-      inline,
-      preventUserSelect,
-      variant,
       ...otherProps
     }
   )
@@ -5582,20 +5633,20 @@ var Heading = makePolymorphic(HeadingComponent);
 
 // src/components/IconButton/IconButton.tsx
 var import_react11 = require("react");
-var import_styled_components23 = __toESM(require("styled-components"));
+var import_styled_components24 = __toESM(require("styled-components"));
 
 // src/components/Tooltip/Tooltip.tsx
 var import_react_tooltip2 = require("@radix-ui/react-tooltip");
-var import_styled_components22 = __toESM(require("styled-components"));
-var import_jsx_runtime164 = require("react/jsx-runtime");
-var CompactTooltipStyles = import_styled_components22.css`
+var import_styled_components23 = __toESM(require("styled-components"));
+var import_jsx_runtime165 = require("react/jsx-runtime");
+var CompactTooltipStyles = import_styled_components23.css`
   --tooltip-font-size: var(--typography-label-4-size);
   --tooltip-line-height: var(--typography-label-4-line-height);
   --tooltip-font-weight: var(--typography-label-4-weight);
   --tooltip-horizontal-padding: var(--space-02);
   --tooltip-vertical-padding: var(--space-03);
 `;
-var StyledContent = (0, import_styled_components22.default)(import_react_tooltip2.Content)`
+var StyledContent = (0, import_styled_components23.default)(import_react_tooltip2.Content)`
   --tooltip-font-family: var(--typography-family-default);
   --tooltip-border-radius: var(--border-radius-05);
   --tooltip-bg: var(--color-bg-tooltip);
@@ -5653,14 +5704,14 @@ var Tooltip = ({
   if (forceOpen === true) {
     rootProps.open = true;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime164.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime165.jsxs)(
     import_react_tooltip2.Root,
     {
       delayDuration: delay,
       ...rootProps,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(import_react_tooltip2.Trigger, { asChild: true, children }),
-        /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(import_react_tooltip2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime164.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(import_react_tooltip2.Trigger, { asChild: true, children }),
+        /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(import_react_tooltip2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime165.jsxs)(
           StyledContent,
           {
             $compact: compact,
@@ -5668,7 +5719,7 @@ var Tooltip = ({
             sideOffset: hideArrow ? VISUAL_OFFSET : VISUAL_OFFSET - 2,
             children: [
               content,
-              !hideArrow ? /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(import_react_tooltip2.Arrow, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(
+              !hideArrow ? /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(import_react_tooltip2.Arrow, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(
                 "svg",
                 {
                   fill: "var(--tooltip-bg)",
@@ -5677,7 +5728,7 @@ var Tooltip = ({
                   viewBox: "0 0 12 8",
                   width: "12",
                   xmlns: "http://www.w3.org/2000/svg",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime164.jsx)("path", { d: "M6.8 6.93333C6.4 7.46667 5.6 7.46667 5.2 6.93333L-2.54292e-07 -1.04907e-06L12 0L6.8 6.93333Z" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime165.jsx)("path", { d: "M6.8 6.93333C6.4 7.46667 5.6 7.46667 5.2 6.93333L-2.54292e-07 -1.04907e-06L12 0L6.8 6.93333Z" })
                 }
               ) }) : null
             ]
@@ -5690,18 +5741,12 @@ var Tooltip = ({
 Tooltip.displayName = "Tooltip";
 
 // src/components/IconButton/IconButton.tsx
-var import_jsx_runtime165 = require("react/jsx-runtime");
-var buttonIconSizeMap = {
-  small: "sm",
-  medium: "md",
-  large: "lg",
-  hero: "xl"
-};
-var StyledButton2 = (0, import_styled_components23.default)(Button)`
-  --icon-button-size-small: 24px;
-  --icon-button-size-medium: 32px;
-  --icon-button-size-large: 40px;
-  --icon-button-size-hero: 48px;
+var import_jsx_runtime166 = require("react/jsx-runtime");
+var StyledButton2 = (0, import_styled_components24.default)(Button)`
+  --icon-button-size-sm: 24px;
+  --icon-button-size-md: 32px;
+  --icon-button-size-lg: 40px;
+  --icon-button-size-xl: 48px;
 
   border-radius: 50%;
   height: ${({ size }) => `var(--icon-button-size-${size})`};
@@ -5712,9 +5757,9 @@ var StyledButton2 = (0, import_styled_components23.default)(Button)`
   line-height: 1;
 `;
 var IconButton = (0, import_react11.forwardRef)(
-  ({ children, label, disableTooltip = false, size = "medium", ...props }, ref) => {
+  ({ children, label, disableTooltip = false, size = "md", ...props }, ref) => {
     const responsiveSize = useResponsiveProp(size);
-    const button = /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(
+    const button = /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(
       StyledButton2,
       {
         ...props,
@@ -5723,24 +5768,82 @@ var IconButton = (0, import_react11.forwardRef)(
         "data-wistia-ui-icon-button": true,
         size: responsiveSize,
         children: (0, import_react11.cloneElement)(import_react11.Children.only(children), {
-          size: buttonIconSizeMap[responsiveSize]
+          size: responsiveSize
         })
       }
     );
     if (disableTooltip) {
       return button;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(Tooltip, { content: label, children: button });
+    return /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(Tooltip, { content: label, children: button });
   }
 );
 IconButton.displayName = "IconButton";
 
+// src/components/Label/Label.tsx
+var import_styled_components25 = __toESM(require("styled-components"));
+var import_jsx_runtime167 = require("react/jsx-runtime");
+var requiredStyle = import_styled_components25.css`
+  &::after {
+    color: red; /* TODO need a color for this */
+    display: inline;
+    padding-left: var(--space-01);
+    content: '*';
+  }
+`;
+var disabledStyle = import_styled_components25.css`
+  color: var(--color-text-disabled);
+`;
+var SPACE_BETWEEN_LABEL_AND_INPUT = "var(--space-02)";
+var StyledLabel = import_styled_components25.default.label`
+  display: block;
+  font-size: var(--typography-label-1-size);
+  font-weight: var(--typography-label-1-weight);
+  line-height: var(--typography-label-1-line-height);
+  margin-bottom: ${SPACE_BETWEEN_LABEL_AND_INPUT};
+  width: 100%;
+
+  /* if label is wrapping an input this ensures it appears beneath the label with a nice margin */
+  > input,
+  > textarea,
+  > select {
+    display: block;
+    margin-top: ${SPACE_BETWEEN_LABEL_AND_INPUT};
+  }
+
+  > label {
+    font-weight: normal;
+  }
+
+  ${({ screenReaderOnly }) => screenReaderOnly && visuallyHiddenStyle}
+  ${({ disabled }) => disabled && disabledStyle}
+  ${({ required }) => required && requiredStyle}
+`;
+var Label = ({
+  children,
+  disabled = false,
+  htmlFor,
+  required = false,
+  screenReaderOnly = false,
+  ...otherProps
+}) => /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(
+  StyledLabel,
+  {
+    disabled,
+    required,
+    screenReaderOnly,
+    ...otherProps,
+    children
+  }
+);
+Label.displayName = "Label";
+
 // src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
-var import_styled_components24 = __toESM(require("styled-components"));
+var import_styled_components26 = __toESM(require("styled-components"));
 var import_type_guards13 = require("@wistia/type-guards");
-var import_jsx_runtime166 = require("react/jsx-runtime");
-var VisuallyHidden = import_styled_components24.default.div({ ...visuallyHiddenStyle });
-var VisuallyHiddenButFocusable = import_styled_components24.default.div({
+var import_jsx_runtime168 = require("react/jsx-runtime");
+var VisuallyHidden = import_styled_components26.default.div({ ...visuallyHiddenStyle });
+var VisuallyHiddenButFocusable = import_styled_components26.default.div({
   "&:not(:focus-within)": visuallyHiddenStyle
 });
 var ScreenReaderOnly = ({
@@ -5751,21 +5854,21 @@ var ScreenReaderOnly = ({
 }) => {
   const accessibleText = (0, import_type_guards13.isNotNil)(text) ? text : children;
   if (focusable) {
-    return /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
+    return /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(VisuallyHidden, { ...otherProps, children: accessibleText });
+  return /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(VisuallyHidden, { ...otherProps, children: accessibleText });
 };
 ScreenReaderOnly.displayName = "ScreenReaderOnly";
 
 // src/components/Stack/Stack.tsx
 var import_react12 = require("react");
-var import_styled_components25 = __toESM(require("styled-components"));
-var import_jsx_runtime167 = require("react/jsx-runtime");
+var import_styled_components27 = __toESM(require("styled-components"));
+var import_jsx_runtime169 = require("react/jsx-runtime");
 var DEFAULT_ELEMENT2 = "div";
-var StyledStack = import_styled_components25.default.div`
+var StyledStack = import_styled_components27.default.div`
   display: flex;
   flex-direction: ${({ $direction }) => $direction === "horizontal" ? "row" : "column"};
-  gap: ${({ gap }) => `var(--${gap})`};
+  gap: ${({ $gap }) => `var(--${$gap})`};
 
   > * {
     flex: 1;
@@ -5775,13 +5878,13 @@ var StackComponent = (0, import_react12.forwardRef)(
   ({ renderAs, direction = "vertical", gap = "space-02", ...props }, ref) => {
     const responsiveGap = useResponsiveProp(gap);
     const responsiveDirection = useResponsiveProp(direction);
-    return /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
       StyledStack,
       {
         ref,
         $direction: responsiveDirection,
+        $gap: responsiveGap,
         as: renderAs ?? DEFAULT_ELEMENT2,
-        gap: responsiveGap,
         ...props
       }
     );
@@ -5792,89 +5895,89 @@ var Stack = makePolymorphic(StackComponent);
 
 // src/components/Text/Text.tsx
 var import_react13 = require("react");
-var import_styled_components26 = __toESM(require("styled-components"));
-var import_jsx_runtime168 = require("react/jsx-runtime");
-var bodyBoldStyles = import_styled_components26.css`
+var import_styled_components28 = __toESM(require("styled-components"));
+var import_jsx_runtime170 = require("react/jsx-runtime");
+var bodyBoldStyles = import_styled_components28.css`
   > strong,
   b {
     font-weight: var(--typography-weight-body-bold);
   }
 `;
-var labelBoldStyles = import_styled_components26.css`
+var labelBoldStyles = import_styled_components28.css`
   > strong,
   b {
     font-weight: var(--typography-weight-label-bold);
   }
 `;
-var body1TextStyle = import_styled_components26.css`
+var body1TextStyle = import_styled_components28.css`
   --font-family: var(--typography-body-1-family);
   --font-size: var(--typography-body-1-size);
   --font-weight: var(--typography-body-1-weight);
   --line-height: var(--typography-body-1-line-height);
   ${bodyBoldStyles}
 `;
-var body2TextStyle = import_styled_components26.css`
+var body2TextStyle = import_styled_components28.css`
   --font-family: var(--typography-body-2-family);
   --font-size: var(--typography-body-2-size);
   --font-weight: var(--typography-body-2-weight);
   --line-height: var(--typography-body-2-line-height);
   ${bodyBoldStyles}
 `;
-var body3TextStyle = import_styled_components26.css`
+var body3TextStyle = import_styled_components28.css`
   --font-family: var(--typography-body-3-family);
   --font-size: var(--typography-body-3-size);
   --font-weight: var(--typography-body-3-weight);
   --line-height: var(--typography-body-3-line-height);
   ${bodyBoldStyles}
 `;
-var body4TextStyle = import_styled_components26.css`
+var body4TextStyle = import_styled_components28.css`
   --font-family: var(--typography-body-4-family);
   --font-size: var(--typography-body-4-size);
   --font-weight: var(--typography-body-4-weight);
   --line-height: var(--typography-body-4-line-height);
   ${bodyBoldStyles}
 `;
-var label1TextStyle = import_styled_components26.css`
+var label1TextStyle = import_styled_components28.css`
   --font-family: var(--typography-label-1-family);
   --font-size: var(--typography-label-1-size);
   --font-weight: var(--typography-label-1-weight);
   --line-height: var(--typography-label-1-line-height);
   ${labelBoldStyles}
 `;
-var label2TextStyle = import_styled_components26.css`
+var label2TextStyle = import_styled_components28.css`
   --font-family: var(--typography-label-2-family);
   --font-size: var(--typography-label-2-size);
   --font-weight: var(--typography-label-2-weight);
   --line-height: var(--typography-label-2-line-height);
   ${labelBoldStyles}
 `;
-var label3TextStyle = import_styled_components26.css`
+var label3TextStyle = import_styled_components28.css`
   --font-family: var(--typography-label-3-family);
   --font-size: var(--typography-label-3-size);
   --font-weight: var(--typography-label-3-weight);
   --line-height: var(--typography-label-3-line-height);
   ${labelBoldStyles}
 `;
-var label4TextStyle = import_styled_components26.css`
+var label4TextStyle = import_styled_components28.css`
   --font-family: var(--typography-label-4-family);
   --font-size: var(--typography-label-4-size);
   --font-weight: var(--typography-label-4-weight);
   --line-height: var(--typography-label-4-line-height);
   ${labelBoldStyles}
 `;
-var body1MonoTextStyle = import_styled_components26.css`
+var body1MonoTextStyle = import_styled_components28.css`
   ${body1TextStyle};
   --font-family: var(--typography-family-mono);
 `;
-var body2MonoTextStyle = import_styled_components26.css`
+var body2MonoTextStyle = import_styled_components28.css`
   ${body2TextStyle};
   --font-family: var(--typography-family-mono);
 `;
-var body3MonoTextStyle = import_styled_components26.css`
+var body3MonoTextStyle = import_styled_components28.css`
   ${body3TextStyle};
   --font-family: var(--typography-family-mono);
 `;
-var body4MonoTextStyle = import_styled_components26.css`
+var body4MonoTextStyle = import_styled_components28.css`
   ${body4TextStyle};
   --font-family: var(--typography-family-mono);
 `;
@@ -5892,13 +5995,13 @@ var variantStyleMap2 = {
   label3: label3TextStyle,
   label4: label4TextStyle
 };
-var highContrastProminenceStyle = import_styled_components26.css`
+var highContrastProminenceStyle = import_styled_components28.css`
   --text-color: var(--color-text-high-contrast);
 `;
-var vibrantProminenceStyle = import_styled_components26.css`
+var vibrantProminenceStyle = import_styled_components28.css`
   --text-color: var(--color-text);
 `;
-var secondaryProminenceStyle = import_styled_components26.css`
+var secondaryProminenceStyle = import_styled_components28.css`
   --text-color: var(--color-text-secondary);
 `;
 var prominenceMap = {
@@ -5906,8 +6009,8 @@ var prominenceMap = {
   vibrant: vibrantProminenceStyle,
   secondary: secondaryProminenceStyle
 };
-var StyledText = import_styled_components26.default.div`
-  ${({ colorScheme }) => getColorScheme(colorScheme)};
+var StyledText = import_styled_components28.default.div`
+  ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-family: var(--font-family);
   font-size: var(--font-size);
   font-weight: var(--font-weight);
@@ -5915,22 +6018,22 @@ var StyledText = import_styled_components26.default.div`
   color: var(--text-color);
   font-style: normal;
   margin: 0;
-  ${({ variant }) => variantStyleMap2[variant]}
-  ${({ prominence }) => prominenceMap[prominence]}
-  ${({ ellipsis }) => ellipsis && ellipsisStyle};
-  ${({ inline }) => inline && import_styled_components26.css`
+  ${({ $variant }) => variantStyleMap2[$variant]}
+  ${({ $prominence }) => prominenceMap[$prominence]}
+  ${({ $ellipsis }) => $ellipsis && ellipsisStyle};
+  ${({ $inline }) => $inline && import_styled_components28.css`
       display: inline-block;
     `}
-  ${({ disabled }) => disabled && import_styled_components26.css`
+  ${({ $disabled }) => $disabled && import_styled_components28.css`
       --text-color: var(--color-text-disabled);
     `}
-  ${({ preventUserSelect }) => preventUserSelect && import_styled_components26.css`
+  ${({ $preventUserSelect }) => $preventUserSelect && import_styled_components28.css`
       user-select: none;
     `}
-  ${({ align }) => import_styled_components26.css`
+  ${({ align }) => import_styled_components28.css`
     text-align: ${align};
   `}
-  ${({ as }) => as === "p" && import_styled_components26.css`
+  ${({ as }) => as === "p" && import_styled_components28.css`
       display: block;
     `}
 `;
@@ -5948,19 +6051,19 @@ var TextComponent = (0, import_react13.forwardRef)(
     renderAs,
     ...otherProps
   }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(
       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
       }
     );
@@ -5970,20 +6073,20 @@ TextComponent.displayName = "Text";
 var Text = makePolymorphic(TextComponent);
 
 // src/components/WistiaLogo/WistiaLogo.tsx
-var import_styled_components27 = __toESM(require("styled-components"));
+var import_styled_components29 = __toESM(require("styled-components"));
 var import_type_guards14 = require("@wistia/type-guards");
-var import_jsx_runtime169 = require("react/jsx-runtime");
+var import_jsx_runtime171 = require("react/jsx-runtime");
 var renderBrandmark = (brandmarkColor, iconOnly) => {
   if (iconOnly) {
-    return /* @__PURE__ */ (0, import_jsx_runtime169.jsx)("g", { fill: brandmarkColor, children: /* @__PURE__ */ (0, import_jsx_runtime169.jsx)("path", { d: "M16.09 17.1h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 26.53c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87ZM32.14 0c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime171.jsx)("g", { fill: brandmarkColor, children: /* @__PURE__ */ (0, import_jsx_runtime171.jsx)("path", { d: "M16.09 17.1h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 26.53c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87ZM32.14 0c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime169.jsx)("g", { fill: brandmarkColor, children: /* @__PURE__ */ (0, import_jsx_runtime169.jsx)("path", { d: "M16.09 21.37h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 30.8c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87Zm16.05-17.1c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime171.jsx)("g", { fill: brandmarkColor, children: /* @__PURE__ */ (0, import_jsx_runtime171.jsx)("path", { d: "M16.09 21.37h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 30.8c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87Zm16.05-17.1c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" }) });
 };
 var renderLogotype = (logotypeColor, iconOnly) => {
   if (iconOnly) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime169.jsx)("g", { fill: logotypeColor, children: /* @__PURE__ */ (0, import_jsx_runtime169.jsx)("path", { d: "M70.16 8.66v15.18c0 1.68-.35 3.09-1.05 4.23a6.612 6.612 0 0 1-2.85 2.54c-1.19.55-2.52.82-4.01.82s-2.8-.28-4.01-.85a6.655 6.655 0 0 1-3.11-2.96c-.08.15-.16.29-.24.42a6.552 6.552 0 0 1-2.87 2.54c-1.2.56-2.54.85-4.01.85s-2.8-.27-3.94-.82a6.214 6.214 0 0 1-2.71-2.52c-.67-1.14-1.01-2.56-1.02-4.25l-.22-15.18h7.34V22.3c0 .82.19 1.37.56 1.67.39.28.85.42 1.38.42s1.02-.15 1.45-.45c.43-.3.65-.85.65-1.65V8.65h7.3v13.64c0 .8.22 1.35.65 1.65.43.3.91.45 1.45.45s.99-.14 1.36-.42c.39-.3.58-.85.58-1.67V8.66h7.34Zm2.45 0v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89A3.43 3.43 0 0 0 78.28.44c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.13 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm8.86 1.96c-1.42.4-2.6 1.11-3.54 2.14-.93 1.02-1.4 2.4-1.4 4.12 0 1.11.17 2.09.51 2.94.36.85.82 1.62 1.38 2.34.22.28.55.65.98 1.11.37.4.64.72.8.96.18.24.27.47.27.69 0 .5-.4.87-1.2 1.09-.8.21-1.62.31-2.47.31-.1-.01-.22-.02-.33-.02l1.02 6.94c.42.07.92.11 1.51.11 1.9 0 3.6-.28 5.1-.85 1.5-.56 2.68-1.42 3.54-2.56.88-1.14 1.31-2.55 1.31-4.23 0-.68-.07-1.31-.22-1.87-.13-.58-.32-1.09-.56-1.54a6.64 6.64 0 0 0-.8-1.27c-.3-.37-.74-.82-1.34-1.36-.39-.33-.67-.59-.85-.8-.18-.22-.27-.45-.27-.67 0-.46.26-.79.78-.98.53-.19 1.17-.29 1.91-.29.25 0 .51.01.78.04l-.71-6.88a10.4 10.4 0 0 0-1.56-.11c-1.66 0-3.21.21-4.65.62Zm19.54 15.71c-.99 0-1.71-.23-2.14-.69-.42-.47-.62-1.18-.62-2.11v-6.57h4.21V8.66h-4.21V3.38l-7.34 1.85V24.1c0 2.45.47 4.29 1.4 5.52.95 1.22 2.45 1.83 4.49 1.83.95 0 1.86-.07 2.74-.22.88-.13 1.62-.34 2.25-.62l1.38-6.3c-.55.1-1.27.16-2.16.16Zm4.13-15.8v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89a3.43 3.43 0 0 0-1.42-1.27c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.14 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm27.51 1.87v22.26h-7.34v-2.28c-.41.43-.85.83-1.34 1.19-1.44 1.07-3.12 1.6-5.05 1.6s-3.61-.52-5.1-1.56c-1.48-1.05-2.63-2.47-3.45-4.25-.82-1.78-1.22-3.73-1.22-5.85s.41-4.07 1.22-5.83c.82-1.78 1.97-3.19 3.45-4.23 1.48-1.05 3.18-1.58 5.1-1.58s3.61.53 5.05 1.6c.48.36.93.75 1.34 1.19V8.66h7.34Zm-7.1 11.11c0-.8-.19-1.53-.56-2.18-.37-.67-.88-1.19-1.54-1.58-.64-.39-1.34-.58-2.09-.58s-1.45.19-2.09.58c-.64.39-1.15.91-1.54 1.58-.37.67-.56 1.39-.56 2.18s.19 1.51.56 2.18c.39.67.9 1.19 1.54 1.58.64.39 1.34.58 2.09.58s1.45-.19 2.09-.58c.65-.39 1.16-.91 1.54-1.56.37-.67.56-1.4.56-2.2Z" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime171.jsx)("g", { fill: logotypeColor, children: /* @__PURE__ */ (0, import_jsx_runtime171.jsx)("path", { d: "M70.16 8.66v15.18c0 1.68-.35 3.09-1.05 4.23a6.612 6.612 0 0 1-2.85 2.54c-1.19.55-2.52.82-4.01.82s-2.8-.28-4.01-.85a6.655 6.655 0 0 1-3.11-2.96c-.08.15-.16.29-.24.42a6.552 6.552 0 0 1-2.87 2.54c-1.2.56-2.54.85-4.01.85s-2.8-.27-3.94-.82a6.214 6.214 0 0 1-2.71-2.52c-.67-1.14-1.01-2.56-1.02-4.25l-.22-15.18h7.34V22.3c0 .82.19 1.37.56 1.67.39.28.85.42 1.38.42s1.02-.15 1.45-.45c.43-.3.65-.85.65-1.65V8.65h7.3v13.64c0 .8.22 1.35.65 1.65.43.3.91.45 1.45.45s.99-.14 1.36-.42c.39-.3.58-.85.58-1.67V8.66h7.34Zm2.45 0v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89A3.43 3.43 0 0 0 78.28.44c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.13 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm8.86 1.96c-1.42.4-2.6 1.11-3.54 2.14-.93 1.02-1.4 2.4-1.4 4.12 0 1.11.17 2.09.51 2.94.36.85.82 1.62 1.38 2.34.22.28.55.65.98 1.11.37.4.64.72.8.96.18.24.27.47.27.69 0 .5-.4.87-1.2 1.09-.8.21-1.62.31-2.47.31-.1-.01-.22-.02-.33-.02l1.02 6.94c.42.07.92.11 1.51.11 1.9 0 3.6-.28 5.1-.85 1.5-.56 2.68-1.42 3.54-2.56.88-1.14 1.31-2.55 1.31-4.23 0-.68-.07-1.31-.22-1.87-.13-.58-.32-1.09-.56-1.54a6.64 6.64 0 0 0-.8-1.27c-.3-.37-.74-.82-1.34-1.36-.39-.33-.67-.59-.85-.8-.18-.22-.27-.45-.27-.67 0-.46.26-.79.78-.98.53-.19 1.17-.29 1.91-.29.25 0 .51.01.78.04l-.71-6.88a10.4 10.4 0 0 0-1.56-.11c-1.66 0-3.21.21-4.65.62Zm19.54 15.71c-.99 0-1.71-.23-2.14-.69-.42-.47-.62-1.18-.62-2.11v-6.57h4.21V8.66h-4.21V3.38l-7.34 1.85V24.1c0 2.45.47 4.29 1.4 5.52.95 1.22 2.45 1.83 4.49 1.83.95 0 1.86-.07 2.74-.22.88-.13 1.62-.34 2.25-.62l1.38-6.3c-.55.1-1.27.16-2.16.16Zm4.13-15.8v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89a3.43 3.43 0 0 0-1.42-1.27c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.14 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm27.51 1.87v22.26h-7.34v-2.28c-.41.43-.85.83-1.34 1.19-1.44 1.07-3.12 1.6-5.05 1.6s-3.61-.52-5.1-1.56c-1.48-1.05-2.63-2.47-3.45-4.25-.82-1.78-1.22-3.73-1.22-5.85s.41-4.07 1.22-5.83c.82-1.78 1.97-3.19 3.45-4.23 1.48-1.05 3.18-1.58 5.1-1.58s3.61.53 5.05 1.6c.48.36.93.75 1.34 1.19V8.66h7.34Zm-7.1 11.11c0-.8-.19-1.53-.56-2.18-.37-.67-.88-1.19-1.54-1.58-.64-.39-1.34-.58-2.09-.58s-1.45.19-2.09.58c-.64.39-1.15.91-1.54 1.58-.37.67-.56 1.39-.56 2.18s.19 1.51.56 2.18c.39.67.9 1.19 1.54 1.58.64.39 1.34.58 2.09.58s1.45-.19 2.09-.58c.65-.39 1.16-.91 1.54-1.56.37-.67.56-1.4.56-2.2Z" }) });
 };
 var computedViewBox = (iconOnly) => {
   if (iconOnly) {
@@ -5991,7 +6094,7 @@ var computedViewBox = (iconOnly) => {
   }
   return "0 0 144 31.47";
 };
-var WistiaLogoComponent = import_styled_components27.default.svg`
+var WistiaLogoComponent = import_styled_components29.default.svg`
   height: ${({ height }) => `${height}px`};
 
   /* ensure it will always fit on mobile */
@@ -6000,7 +6103,7 @@ var WistiaLogoComponent = import_styled_components27.default.svg`
 
   &:hover {
     path {
-      ${({ hoverColor }) => hoverColor !== void 0 ? `fill: ${hoverColor}` : null};
+      ${({ $hoverColor }) => $hoverColor !== void 0 ? `fill: ${$hoverColor}` : null};
     }
   }
 `;
@@ -6033,46 +6136,26 @@ var WistiaLogo = ({
   };
   const brandmarkColor = VARIANT_COLORS[variant].brandmark;
   const logotypeColor = VARIANT_COLORS[variant].logotype;
-  const Logo = /* @__PURE__ */ (0, import_jsx_runtime169.jsxs)(
+  const Logo = /* @__PURE__ */ (0, import_jsx_runtime171.jsxs)(
     WistiaLogoComponent,
     {
+      $hoverColor: hoverColor,
       height,
-      hoverColor,
       role: "img",
       viewBox: computedViewBox(iconOnly),
       xmlns: "http://www.w3.org/2000/svg",
       ...otherProps,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime169.jsx)("title", { children: title }),
-        (0, import_type_guards14.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime169.jsx)("desc", { children: description }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime171.jsx)("title", { children: title }),
+        (0, import_type_guards14.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime171.jsx)("desc", { children: description }) : null,
         renderBrandmark(brandmarkColor, iconOnly),
         renderLogotype(logotypeColor, iconOnly)
       ]
     }
   );
-  return href !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime169.jsx)("a", { href, children: Logo }) : Logo;
+  return href !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime171.jsx)("a", { href, children: Logo }) : Logo;
 };
 WistiaLogo.displayName = "WistiaLogo";
-
-// src/components/ColorSchemeWrapper/ColorSchemeWrapper.tsx
-var import_styled_components28 = __toESM(require("styled-components"));
-var import_jsx_runtime170 = require("react/jsx-runtime");
-var StyledColorSchemeWrapper = import_styled_components28.default.div`
-  ${({ colorScheme }) => getColorScheme(colorScheme)};
-`;
-var ColorSchemeWrapper = ({
-  colorScheme,
-  children,
-  ...otherProps
-}) => /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(
-  StyledColorSchemeWrapper,
-  {
-    colorScheme,
-    ...otherProps,
-    children
-  }
-);
-ColorSchemeWrapper.displayName = "ColorSchemeWrapper";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Badge,
@@ -6085,6 +6168,7 @@ ColorSchemeWrapper.displayName = "ColorSchemeWrapper";
   Heading,
   Icon,
   IconButton,
+  Label,
   Link,
   ScreenReaderOnly,
   Stack,
@@ -6092,6 +6176,7 @@ ColorSchemeWrapper.displayName = "ColorSchemeWrapper";
   Tooltip,
   UIProvider,
   WistiaLogo,
+  colorSchemeOptions,
   copyToClipboard,
   ellipsisFlexParentStyle,
   ellipsisStyle,