@wistia/ui 0.4.9-beta.f08d243b.56e8ca2 → 0.4.9

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/ui v0.4.9-beta.f08d243b.56e8ca2
3
+ * @license @wistia/ui v0.4.9
4
4
  *
5
5
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
6
6
  *
@@ -75,8 +75,6 @@ __export(index_exports, {
75
75
  RadioGroup: () => RadioGroup,
76
76
  RadioMenuItem: () => RadioMenuItem,
77
77
  ScreenReaderOnly: () => ScreenReaderOnly,
78
- SegmentedControl: () => SegmentedControl,
79
- SegmentedControlItem: () => SegmentedControlItem,
80
78
  Select: () => Select,
81
79
  SelectOption: () => SelectOption,
82
80
  SelectOptionGroup: () => SelectOptionGroup,
@@ -6044,7 +6042,7 @@ var StyledBadge = import_styled_components22.default.div`
6044
6042
  padding: var(--wui-space-01) var(--wui-space-02);
6045
6043
  width: fit-content;
6046
6044
 
6047
- /* Icon component size */
6045
+ /* TODO should these be a token? */
6048
6046
  svg {
6049
6047
  height: 12px;
6050
6048
  width: 12px;
@@ -8458,143 +8456,12 @@ var Radio = (0, import_react39.forwardRef)(
8458
8456
  );
8459
8457
  Radio.displayName = "Radio";
8460
8458
 
8461
- // src/components/SegmentedControl/SegmentedControl.tsx
8459
+ // src/components/Tag/Tag.tsx
8462
8460
  var import_react40 = require("react");
8463
8461
  var import_styled_components51 = __toESM(require("styled-components"));
8464
- var import_react_toggle_group = require("@radix-ui/react-toggle-group");
8465
8462
  var import_type_guards30 = require("@wistia/type-guards");
8466
8463
  var import_jsx_runtime203 = require("react/jsx-runtime");
8467
- var StyledSegmentedControl = (0, import_styled_components51.default)(import_react_toggle_group.Root)`
8468
- display: inline-flex;
8469
- background-color: var(--wui-color-bg-surface-secondary);
8470
- border-radius: var(--wui-border-radius-rounded);
8471
- border: 2px solid var(--wui-color-bg-surface-secondary);
8472
- gap: var(--wui-space-01);
8473
- width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
8474
- `;
8475
- var SegmentedControl = (0, import_react40.forwardRef)(
8476
- ({
8477
- children,
8478
- disabled = false,
8479
- fullWidth = false,
8480
- selectedValue,
8481
- onSelectedValueChange,
8482
- ...props
8483
- }, ref) => {
8484
- if ((0, import_type_guards30.isNil)(children)) {
8485
- return null;
8486
- }
8487
- return /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(
8488
- StyledSegmentedControl,
8489
- {
8490
- ref,
8491
- $fullWidth: fullWidth,
8492
- disabled,
8493
- loop: true,
8494
- onValueChange: onSelectedValueChange,
8495
- rovingFocus: true,
8496
- type: "single",
8497
- value: selectedValue,
8498
- ...props,
8499
- children
8500
- }
8501
- );
8502
- }
8503
- );
8504
- SegmentedControl.displayName = "SegmentedControl";
8505
-
8506
- // src/components/SegmentedControl/SegmentedControlItem.tsx
8507
- var import_react41 = require("react");
8508
- var import_styled_components52 = __toESM(require("styled-components"));
8509
- var import_react_toggle_group2 = require("@radix-ui/react-toggle-group");
8510
- var import_type_guards31 = require("@wistia/type-guards");
8511
- var import_jsx_runtime204 = require("react/jsx-runtime");
8512
- var StyledSegmentedControlItem = (0, import_styled_components52.default)(import_react_toggle_group2.Item)`
8513
- all: unset; /* ToggleGroupItem is a button element */
8514
- align-items: center;
8515
- border-radius: var(--wui-border-radius-rounded);
8516
- color: var(--wui-color-text-secondary);
8517
- cursor: pointer;
8518
- display: flex;
8519
- flex-grow: 1;
8520
- flex-shrink: 1;
8521
- font-size: var(--wui-typography-label-3-size);
8522
- justify-content: center;
8523
- padding: 6px 8px;
8524
- user-select: none;
8525
-
8526
- /* Icon component */
8527
- svg {
8528
- height: 16px;
8529
- width: 16px;
8530
-
8531
- /* add right margin if there's a label and an icon */
8532
- ${({ $hasLabel }) => $hasLabel ? "margin-right: var(--wui-space-01)" : ""}
8533
- }
8534
-
8535
- &:hover {
8536
- background-color: var(--wui-color-bg-surface-secondary-hover);
8537
- }
8538
-
8539
- &:focus-visible {
8540
- outline: 2px solid var(--wui-color-focus-ring);
8541
- }
8542
-
8543
- &[data-state='on'] {
8544
- background-color: var(--wui-color-bg-fill-white);
8545
- color: var(--wui-color-text-selected);
8546
- cursor: default;
8547
- }
8548
-
8549
- &:focus-visible,
8550
- &[data-state='on'] {
8551
- svg path {
8552
- fill: var(--wui-color-focus-ring);
8553
- }
8554
- }
8555
-
8556
- &[data-disabled] {
8557
- cursor: not-allowed;
8558
-
8559
- &:hover {
8560
- background-color: inherit;
8561
- }
8562
- }
8563
- `;
8564
- var SegmentedControlItem = (0, import_react41.forwardRef)(
8565
- ({ disabled, icon, label, "aria-label": ariaLabel, value }, ref) => {
8566
- const handleClick = (event) => {
8567
- const target = event.target;
8568
- const { state } = target.dataset;
8569
- if (state === "on") {
8570
- event.preventDefault();
8571
- }
8572
- };
8573
- return /* @__PURE__ */ (0, import_jsx_runtime204.jsxs)(
8574
- StyledSegmentedControlItem,
8575
- {
8576
- ref,
8577
- $hasLabel: (0, import_type_guards31.isNotNil)(label),
8578
- "aria-label": (0, import_type_guards31.isNotNil)(label) ? void 0 : ariaLabel,
8579
- disabled,
8580
- onClick: handleClick,
8581
- value,
8582
- children: [
8583
- icon,
8584
- label
8585
- ]
8586
- }
8587
- );
8588
- }
8589
- );
8590
- SegmentedControlItem.displayName = "SegmentedControlItem";
8591
-
8592
- // src/components/Tag/Tag.tsx
8593
- var import_react42 = require("react");
8594
- var import_styled_components53 = __toESM(require("styled-components"));
8595
- var import_type_guards32 = require("@wistia/type-guards");
8596
- var import_jsx_runtime205 = require("react/jsx-runtime");
8597
- var TagLabel = import_styled_components53.default.a`
8464
+ var TagLabel = import_styled_components51.default.a`
8598
8465
  ${({ $colorScheme }) => getColorScheme($colorScheme)};
8599
8466
  font-size: var(--wui-typography-label-4-size);
8600
8467
  font-weight: var(--wui-typography-label-4-weight);
@@ -8622,14 +8489,14 @@ var TagLabel = import_styled_components53.default.a`
8622
8489
  box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
8623
8490
  }
8624
8491
  `;
8625
- var TagDivider = import_styled_components53.default.div`
8492
+ var TagDivider = import_styled_components51.default.div`
8626
8493
  ${({ $colorScheme }) => getColorScheme($colorScheme)};
8627
8494
  border-left: 1px solid var(--wui-color-border);
8628
8495
  display: flex;
8629
8496
  height: 14px;
8630
8497
  width: 1px;
8631
8498
  `;
8632
- var StyledRemoveButton = import_styled_components53.default.button`
8499
+ var StyledRemoveButton = import_styled_components51.default.button`
8633
8500
  ${({ $colorScheme }) => getColorScheme($colorScheme)};
8634
8501
  all: unset;
8635
8502
  cursor: pointer;
@@ -8657,7 +8524,7 @@ var StyledRemoveButton = import_styled_components53.default.button`
8657
8524
  box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
8658
8525
  }
8659
8526
  `;
8660
- var StyledTag = import_styled_components53.default.div`
8527
+ var StyledTag = import_styled_components51.default.div`
8661
8528
  ${({ $colorScheme }) => getColorScheme($colorScheme)};
8662
8529
  align-items: center;
8663
8530
  background-color: var(--wui-color-bg-surface-secondary);
@@ -8666,47 +8533,47 @@ var StyledTag = import_styled_components53.default.div`
8666
8533
  overflow: hidden;
8667
8534
  `;
8668
8535
  var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
8669
- if ((0, import_type_guards32.isNil)(onClickRemove)) {
8536
+ if ((0, import_type_guards30.isNil)(onClickRemove)) {
8670
8537
  return null;
8671
8538
  }
8672
- if ((0, import_type_guards32.isNil)(onClickRemoveLabel)) {
8539
+ if ((0, import_type_guards30.isNil)(onClickRemoveLabel)) {
8673
8540
  throw new Error(
8674
8541
  "for accessibility, onClickRemoveLabel must be provided if onClickRemove is provided"
8675
8542
  );
8676
8543
  }
8677
- return /* @__PURE__ */ (0, import_jsx_runtime205.jsxs)(import_jsx_runtime205.Fragment, { children: [
8678
- /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(TagDivider, { $colorScheme: colorScheme }),
8679
- /* @__PURE__ */ (0, import_jsx_runtime205.jsxs)(
8544
+ return /* @__PURE__ */ (0, import_jsx_runtime203.jsxs)(import_jsx_runtime203.Fragment, { children: [
8545
+ /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(TagDivider, { $colorScheme: colorScheme }),
8546
+ /* @__PURE__ */ (0, import_jsx_runtime203.jsxs)(
8680
8547
  StyledRemoveButton,
8681
8548
  {
8682
8549
  $colorScheme: colorScheme,
8683
8550
  onClick: onClickRemove,
8684
8551
  type: "button",
8685
8552
  children: [
8686
- /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(
8553
+ /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(
8687
8554
  Icon,
8688
8555
  {
8689
8556
  size: "sm",
8690
8557
  type: "close"
8691
8558
  }
8692
8559
  ),
8693
- /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(ScreenReaderOnly, { children: onClickRemoveLabel })
8560
+ /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(ScreenReaderOnly, { children: onClickRemoveLabel })
8694
8561
  ]
8695
8562
  }
8696
8563
  )
8697
8564
  ] });
8698
8565
  };
8699
- var Tag = (0, import_react42.forwardRef)(
8566
+ var Tag = (0, import_react40.forwardRef)(
8700
8567
  ({ onClickRemove, colorScheme = "inherit", href, label, onClickRemoveLabel, ...otherProps }, ref) => {
8701
- const labelProps = (0, import_type_guards32.isNotNil)(href) && (0, import_type_guards32.isNonEmptyString)(href) ? { href, as: "a" } : { as: "span" };
8702
- return /* @__PURE__ */ (0, import_jsx_runtime205.jsxs)(
8568
+ const labelProps = (0, import_type_guards30.isNotNil)(href) && (0, import_type_guards30.isNonEmptyString)(href) ? { href, as: "a" } : { as: "span" };
8569
+ return /* @__PURE__ */ (0, import_jsx_runtime203.jsxs)(
8703
8570
  StyledTag,
8704
8571
  {
8705
8572
  ref,
8706
8573
  $colorScheme: colorScheme,
8707
8574
  ...otherProps,
8708
8575
  children: [
8709
- /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(
8576
+ /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(
8710
8577
  TagLabel,
8711
8578
  {
8712
8579
  ...labelProps,
@@ -8714,7 +8581,7 @@ var Tag = (0, import_react42.forwardRef)(
8714
8581
  children: label
8715
8582
  }
8716
8583
  ),
8717
- /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(
8584
+ /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(
8718
8585
  RemoveButton,
8719
8586
  {
8720
8587
  colorScheme,
@@ -8731,16 +8598,16 @@ Tag.displayName = "Tag";
8731
8598
 
8732
8599
  // src/components/Tooltip/Tooltip.tsx
8733
8600
  var import_react_tooltip2 = require("@radix-ui/react-tooltip");
8734
- var import_styled_components54 = __toESM(require("styled-components"));
8735
- var import_jsx_runtime206 = require("react/jsx-runtime");
8736
- var CompactTooltipStyles = import_styled_components54.css`
8601
+ var import_styled_components52 = __toESM(require("styled-components"));
8602
+ var import_jsx_runtime204 = require("react/jsx-runtime");
8603
+ var CompactTooltipStyles = import_styled_components52.css`
8737
8604
  --tooltip-font-size: var(--wui-typography-label-4-size);
8738
8605
  --tooltip-line-height: var(--wui-typography-label-4-line-height);
8739
8606
  --tooltip-font-weight: var(--wui-typography-label-4-weight);
8740
8607
  --tooltip-horizontal-padding: var(--wui-space-02);
8741
8608
  --tooltip-vertical-padding: var(--wui-space-03);
8742
8609
  `;
8743
- var StyledContent = (0, import_styled_components54.default)(import_react_tooltip2.Content)`
8610
+ var StyledContent = (0, import_styled_components52.default)(import_react_tooltip2.Content)`
8744
8611
  --tooltip-font-family: var(--wui-typography-family-default);
8745
8612
  --tooltip-border-radius: var(--wui-border-radius-05);
8746
8613
  --tooltip-bg: var(--wui-color-bg-tooltip);
@@ -8798,14 +8665,14 @@ var Tooltip = ({
8798
8665
  if (forceOpen === true) {
8799
8666
  rootProps.open = true;
8800
8667
  }
8801
- return /* @__PURE__ */ (0, import_jsx_runtime206.jsxs)(
8668
+ return /* @__PURE__ */ (0, import_jsx_runtime204.jsxs)(
8802
8669
  import_react_tooltip2.Root,
8803
8670
  {
8804
8671
  delayDuration: delay,
8805
8672
  ...rootProps,
8806
8673
  children: [
8807
- /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(import_react_tooltip2.Trigger, { asChild: true, children }),
8808
- /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(import_react_tooltip2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime206.jsxs)(
8674
+ /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(import_react_tooltip2.Trigger, { asChild: true, children }),
8675
+ /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(import_react_tooltip2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime204.jsxs)(
8809
8676
  StyledContent,
8810
8677
  {
8811
8678
  $compact: compact,
@@ -8813,7 +8680,7 @@ var Tooltip = ({
8813
8680
  sideOffset: hideArrow ? VISUAL_OFFSET : VISUAL_OFFSET - 2,
8814
8681
  children: [
8815
8682
  content,
8816
- !hideArrow ? /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(import_react_tooltip2.Arrow, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(
8683
+ !hideArrow ? /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(import_react_tooltip2.Arrow, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(
8817
8684
  "svg",
8818
8685
  {
8819
8686
  fill: "var(--tooltip-bg)",
@@ -8822,7 +8689,7 @@ var Tooltip = ({
8822
8689
  viewBox: "0 0 12 8",
8823
8690
  width: "12",
8824
8691
  xmlns: "http://www.w3.org/2000/svg",
8825
- children: /* @__PURE__ */ (0, import_jsx_runtime206.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" })
8692
+ children: /* @__PURE__ */ (0, import_jsx_runtime204.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" })
8826
8693
  }
8827
8694
  ) }) : null
8828
8695
  ]
@@ -8835,26 +8702,26 @@ var Tooltip = ({
8835
8702
  Tooltip.displayName = "Tooltip";
8836
8703
 
8837
8704
  // src/components/WistiaLogo/WistiaLogo.tsx
8838
- var import_styled_components55 = __toESM(require("styled-components"));
8839
- var import_type_guards33 = require("@wistia/type-guards");
8840
- var import_jsx_runtime207 = require("react/jsx-runtime");
8705
+ var import_styled_components53 = __toESM(require("styled-components"));
8706
+ var import_type_guards31 = require("@wistia/type-guards");
8707
+ var import_jsx_runtime205 = require("react/jsx-runtime");
8841
8708
  var renderBrandmark = (brandmarkColor, iconOnly) => {
8842
8709
  if (iconOnly) {
8843
- return /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(
8710
+ return /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(
8844
8711
  "g",
8845
8712
  {
8846
8713
  "data-testid": "ui-wistia-logo-brandmark",
8847
8714
  fill: brandmarkColor,
8848
- children: /* @__PURE__ */ (0, import_jsx_runtime207.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" })
8715
+ children: /* @__PURE__ */ (0, import_jsx_runtime205.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" })
8849
8716
  }
8850
8717
  );
8851
8718
  }
8852
- return /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(
8719
+ return /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(
8853
8720
  "g",
8854
8721
  {
8855
8722
  "data-testid": "ui-wistia-logo-brandmark",
8856
8723
  fill: brandmarkColor,
8857
- children: /* @__PURE__ */ (0, import_jsx_runtime207.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" })
8724
+ children: /* @__PURE__ */ (0, import_jsx_runtime205.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" })
8858
8725
  }
8859
8726
  );
8860
8727
  };
@@ -8862,12 +8729,12 @@ var renderLogotype = (logotypeColor, iconOnly) => {
8862
8729
  if (iconOnly) {
8863
8730
  return null;
8864
8731
  }
8865
- return /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(
8732
+ return /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(
8866
8733
  "g",
8867
8734
  {
8868
8735
  "data-testid": "ui-wistia-logo-logotype",
8869
8736
  fill: logotypeColor,
8870
- children: /* @__PURE__ */ (0, import_jsx_runtime207.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" })
8737
+ children: /* @__PURE__ */ (0, import_jsx_runtime205.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" })
8871
8738
  }
8872
8739
  );
8873
8740
  };
@@ -8877,7 +8744,7 @@ var computedViewBox = (iconOnly) => {
8877
8744
  }
8878
8745
  return "0 0 144 31.47";
8879
8746
  };
8880
- var WistiaLogoComponent = import_styled_components55.default.svg`
8747
+ var WistiaLogoComponent = import_styled_components53.default.svg`
8881
8748
  height: ${({ height }) => `${height}px`};
8882
8749
 
8883
8750
  /* ensure it will always fit on mobile */
@@ -8919,7 +8786,7 @@ var WistiaLogo = ({
8919
8786
  };
8920
8787
  const brandmarkColor = VARIANT_COLORS[variant].brandmark;
8921
8788
  const logotypeColor = VARIANT_COLORS[variant].logotype;
8922
- const Logo = /* @__PURE__ */ (0, import_jsx_runtime207.jsxs)(
8789
+ const Logo = /* @__PURE__ */ (0, import_jsx_runtime205.jsxs)(
8923
8790
  WistiaLogoComponent,
8924
8791
  {
8925
8792
  $hoverColor: hoverColor,
@@ -8929,23 +8796,23 @@ var WistiaLogo = ({
8929
8796
  xmlns: "http://www.w3.org/2000/svg",
8930
8797
  ...otherProps,
8931
8798
  children: [
8932
- /* @__PURE__ */ (0, import_jsx_runtime207.jsx)("title", { children: title }),
8933
- (0, import_type_guards33.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime207.jsx)("desc", { children: description }) : null,
8799
+ /* @__PURE__ */ (0, import_jsx_runtime205.jsx)("title", { children: title }),
8800
+ (0, import_type_guards31.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime205.jsx)("desc", { children: description }) : null,
8934
8801
  renderBrandmark(brandmarkColor, iconOnly),
8935
8802
  renderLogotype(logotypeColor, iconOnly)
8936
8803
  ]
8937
8804
  }
8938
8805
  );
8939
- return href !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime207.jsx)("a", { href, children: Logo }) : Logo;
8806
+ return href !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime205.jsx)("a", { href, children: Logo }) : Logo;
8940
8807
  };
8941
8808
  WistiaLogo.displayName = "WistiaLogo";
8942
8809
 
8943
8810
  // src/components/Select/Select.tsx
8944
8811
  var import_react_select = require("@radix-ui/react-select");
8945
- var import_react43 = require("react");
8946
- var import_styled_components56 = __toESM(require("styled-components"));
8947
- var import_jsx_runtime208 = require("react/jsx-runtime");
8948
- var StyledTrigger = (0, import_styled_components56.default)(import_react_select.Trigger)`
8812
+ var import_react41 = require("react");
8813
+ var import_styled_components54 = __toESM(require("styled-components"));
8814
+ var import_jsx_runtime206 = require("react/jsx-runtime");
8815
+ var StyledTrigger = (0, import_styled_components54.default)(import_react_select.Trigger)`
8949
8816
  ${({ $colorScheme }) => getColorScheme($colorScheme)};
8950
8817
  --wui-select-color-bg: var(--wui-color-bg-surface);
8951
8818
  --wui-select-color-bg-disabled: var(--wui-color-bg-surface-disabled);
@@ -8986,7 +8853,7 @@ var StyledTrigger = (0, import_styled_components56.default)(import_react_select.
8986
8853
  background-color: var(--wui-color-bg-surface-disabled);
8987
8854
  }
8988
8855
  `;
8989
- var StyledContent2 = (0, import_styled_components56.default)(import_react_select.Content)`
8856
+ var StyledContent2 = (0, import_styled_components54.default)(import_react_select.Content)`
8990
8857
  --wui-select-content-border: var(--wui-color-border);
8991
8858
  --wui-select-content-bg: var(--wui-color-bg-surface);
8992
8859
  --wui-select-content-border-radius: var(--wui-border-radius-02);
@@ -9002,7 +8869,7 @@ var StyledContent2 = (0, import_styled_components56.default)(import_react_select
9002
8869
  padding: var(--wui-select-option-padding);
9003
8870
  min-width: 200px;
9004
8871
  `;
9005
- var Select = (0, import_react43.forwardRef)(
8872
+ var Select = (0, import_react41.forwardRef)(
9006
8873
  ({
9007
8874
  colorScheme = "inherit",
9008
8875
  children,
@@ -9012,13 +8879,13 @@ var Select = (0, import_react43.forwardRef)(
9012
8879
  ...props
9013
8880
  }, forwardedRef) => {
9014
8881
  const responsiveFullWidth = useResponsiveProp(fullWidth);
9015
- return /* @__PURE__ */ (0, import_jsx_runtime208.jsxs)(
8882
+ return /* @__PURE__ */ (0, import_jsx_runtime206.jsxs)(
9016
8883
  import_react_select.Root,
9017
8884
  {
9018
8885
  ...props,
9019
8886
  onValueChange: onChange,
9020
8887
  children: [
9021
- /* @__PURE__ */ (0, import_jsx_runtime208.jsxs)(
8888
+ /* @__PURE__ */ (0, import_jsx_runtime206.jsxs)(
9022
8889
  StyledTrigger,
9023
8890
  {
9024
8891
  ref: forwardedRef,
@@ -9026,8 +8893,8 @@ var Select = (0, import_react43.forwardRef)(
9026
8893
  $fullWidth: responsiveFullWidth,
9027
8894
  ...props,
9028
8895
  children: [
9029
- /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(import_react_select.Value, { placeholder }),
9030
- /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(
8896
+ /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(import_react_select.Value, { placeholder }),
8897
+ /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(
9031
8898
  Icon,
9032
8899
  {
9033
8900
  size: "md",
@@ -9037,10 +8904,10 @@ var Select = (0, import_react43.forwardRef)(
9037
8904
  ]
9038
8905
  }
9039
8906
  ),
9040
- /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(import_react_select.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime208.jsxs)(StyledContent2, { position: "popper", children: [
9041
- /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(import_react_select.ScrollUpButton, { children: /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(Icon, { type: "caret-up" }) }),
9042
- /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(import_react_select.Viewport, { children }),
9043
- /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(import_react_select.ScrollDownButton, { children: /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(Icon, { type: "caret-down" }) })
8907
+ /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(import_react_select.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime206.jsxs)(StyledContent2, { position: "popper", children: [
8908
+ /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(import_react_select.ScrollUpButton, { children: /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(Icon, { type: "caret-up" }) }),
8909
+ /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(import_react_select.Viewport, { children }),
8910
+ /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(import_react_select.ScrollDownButton, { children: /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(Icon, { type: "caret-down" }) })
9044
8911
  ] }) })
9045
8912
  ]
9046
8913
  }
@@ -9051,10 +8918,10 @@ Select.displayName = "Select";
9051
8918
 
9052
8919
  // src/components/Select/SelectOption.tsx
9053
8920
  var import_react_select2 = require("@radix-ui/react-select");
9054
- var import_react44 = require("react");
9055
- var import_styled_components57 = __toESM(require("styled-components"));
9056
- var import_jsx_runtime209 = require("react/jsx-runtime");
9057
- var StyledItem = (0, import_styled_components57.default)(import_react_select2.Item)`
8921
+ var import_react42 = require("react");
8922
+ var import_styled_components55 = __toESM(require("styled-components"));
8923
+ var import_jsx_runtime207 = require("react/jsx-runtime");
8924
+ var StyledItem = (0, import_styled_components55.default)(import_react_select2.Item)`
9058
8925
  ${variantStyleMap2.body3};
9059
8926
  display: flex;
9060
8927
  padding: var(--wui-select-option-padding);
@@ -9077,25 +8944,25 @@ var StyledItem = (0, import_styled_components57.default)(import_react_select2.It
9077
8944
  background-color: transparent;
9078
8945
  }
9079
8946
  `;
9080
- var StyledIconContainer = import_styled_components57.default.span`
8947
+ var StyledIconContainer = import_styled_components55.default.span`
9081
8948
  width: 12px;
9082
8949
  `;
9083
- var SelectOption = (0, import_react44.forwardRef)(
8950
+ var SelectOption = (0, import_react42.forwardRef)(
9084
8951
  ({ children, ...props }, forwardedRef) => {
9085
- return /* @__PURE__ */ (0, import_jsx_runtime209.jsxs)(
8952
+ return /* @__PURE__ */ (0, import_jsx_runtime207.jsxs)(
9086
8953
  StyledItem,
9087
8954
  {
9088
8955
  ...props,
9089
8956
  ref: forwardedRef,
9090
8957
  children: [
9091
- /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(StyledIconContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(import_react_select2.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(
8958
+ /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(StyledIconContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(import_react_select2.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(
9092
8959
  Icon,
9093
8960
  {
9094
8961
  size: "sm",
9095
8962
  type: "checkmark"
9096
8963
  }
9097
8964
  ) }) }),
9098
- /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(import_react_select2.ItemText, { children })
8965
+ /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(import_react_select2.ItemText, { children })
9099
8966
  ]
9100
8967
  }
9101
8968
  );
@@ -9105,14 +8972,14 @@ SelectOption.displayName = "Option";
9105
8972
 
9106
8973
  // src/components/Select/SelectOptionGroup.tsx
9107
8974
  var import_react_select3 = require("@radix-ui/react-select");
9108
- var import_styled_components58 = __toESM(require("styled-components"));
9109
- var import_jsx_runtime210 = require("react/jsx-runtime");
9110
- var StyledLabel3 = (0, import_styled_components58.default)(import_react_select3.Label)`
8975
+ var import_styled_components56 = __toESM(require("styled-components"));
8976
+ var import_jsx_runtime208 = require("react/jsx-runtime");
8977
+ var StyledLabel3 = (0, import_styled_components56.default)(import_react_select3.Label)`
9111
8978
  padding: var(--wui-select-option-padding);
9112
8979
  `;
9113
8980
  var SelectOptionGroup = ({ children, label, ...props }) => {
9114
- return /* @__PURE__ */ (0, import_jsx_runtime210.jsxs)(import_react_select3.Group, { ...props, children: [
9115
- /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(StyledLabel3, { children: /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(
8981
+ return /* @__PURE__ */ (0, import_jsx_runtime208.jsxs)(import_react_select3.Group, { ...props, children: [
8982
+ /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(StyledLabel3, { children: /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(
9116
8983
  Text,
9117
8984
  {
9118
8985
  prominence: "secondary",
@@ -9161,8 +9028,6 @@ var SelectOptionGroup = ({ children, label, ...props }) => {
9161
9028
  RadioGroup,
9162
9029
  RadioMenuItem,
9163
9030
  ScreenReaderOnly,
9164
- SegmentedControl,
9165
- SegmentedControlItem,
9166
9031
  Select,
9167
9032
  SelectOption,
9168
9033
  SelectOptionGroup,