@wistia/ui 0.4.8-beta.d9bacfdc.e51055f → 0.4.8

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.mjs CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  /*
3
- * @license @wistia/ui v0.4.8-beta.d9bacfdc.e51055f
3
+ * @license @wistia/ui v0.4.8
4
4
  *
5
5
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
6
6
  *
@@ -5360,7 +5360,7 @@ import { forwardRef } from "react";
5360
5360
  import { isNil as isNil4, isNotNil as isNotNil4, isNotUndefined as isNotUndefined2, isUndefined as isUndefined2 } from "@wistia/type-guards";
5361
5361
  import styled4 from "styled-components";
5362
5362
  import { Link as RouterLink, useInRouterContext } from "react-router-dom";
5363
- import { jsx as jsx161, jsxs as jsxs5 } from "react/jsx-runtime";
5363
+ import { jsx as jsx161 } from "react/jsx-runtime";
5364
5364
  var generateHref = (href, type, disabled) => {
5365
5365
  if (disabled || isNil4(href)) {
5366
5366
  return void 0;
@@ -5377,25 +5377,12 @@ var generateHref = (href, type, disabled) => {
5377
5377
  var isButton = (props) => isUndefined2(props.href);
5378
5378
  var isLink = (props) => isNotUndefined2(props.href);
5379
5379
  var StyledLink = styled4.a`
5380
- --link-icon-size: 14px;
5381
-
5382
5380
  ${({ href }) => isNil4(href) && buttonResetCss};
5383
5381
  ${({ $colorScheme }) => getColorScheme($colorScheme)}
5384
5382
  cursor: pointer;
5385
5383
  font-family: var(--wui-typography-family-default);
5386
5384
  color: var(--wui-color-text-link);
5387
5385
  text-decoration: ${({ $underline }) => $underline ? "underline" : "none"};
5388
- display: inline-flex;
5389
- align-items: baseline;
5390
- gap: var(--wui-space-01);
5391
-
5392
- /* This ensure that the icon is the corect color when the style is solid or the button is disabled */
5393
- && {
5394
- svg {
5395
- width: var(--link-icon-size);
5396
- height: var(--link-icon-size);
5397
- }
5398
- }
5399
5386
  `;
5400
5387
  var Link = forwardRef(
5401
5388
  ({
@@ -5405,8 +5392,6 @@ var Link = forwardRef(
5405
5392
  disabled = false,
5406
5393
  colorScheme = "inherit",
5407
5394
  underline = false,
5408
- leftIcon,
5409
- rightIcon,
5410
5395
  ...props
5411
5396
  }, ref) => {
5412
5397
  const inRouterContext = useInRouterContext();
@@ -5465,17 +5450,13 @@ var Link = forwardRef(
5465
5450
  to: to ?? "",
5466
5451
  children
5467
5452
  }
5468
- ) : /* @__PURE__ */ jsxs5(
5453
+ ) : /* @__PURE__ */ jsx161(
5469
5454
  StyledLink,
5470
5455
  {
5471
5456
  as: "a",
5472
5457
  ...combinedProps,
5473
5458
  href: to,
5474
- children: [
5475
- leftIcon ?? null,
5476
- children,
5477
- rightIcon ?? null
5478
- ]
5459
+ children
5479
5460
  }
5480
5461
  );
5481
5462
  }
@@ -5485,7 +5466,7 @@ var Link = forwardRef(
5485
5466
  Link.displayName = "Link";
5486
5467
 
5487
5468
  // src/components/Button/Button.tsx
5488
- import { Fragment, jsx as jsx162, jsxs as jsxs6 } from "react/jsx-runtime";
5469
+ import { Fragment, jsx as jsx162, jsxs as jsxs5 } from "react/jsx-runtime";
5489
5470
  var isLink2 = (props) => isNotUndefined3(props.href);
5490
5471
  var StyledButton = styled5.button`
5491
5472
  ${buttonResetCss}
@@ -5522,9 +5503,9 @@ var ButtonContent = ({
5522
5503
  rightIcon,
5523
5504
  children
5524
5505
  }) => {
5525
- return /* @__PURE__ */ jsxs6(Fragment, { children: [
5506
+ return /* @__PURE__ */ jsxs5(Fragment, { children: [
5526
5507
  isLoading ? /* @__PURE__ */ jsx162(StyledButtonLoading, { children: /* @__PURE__ */ jsx162(Icon, { type: "spinner" }) }) : null,
5527
- /* @__PURE__ */ jsxs6(
5508
+ /* @__PURE__ */ jsxs5(
5528
5509
  StyledButtonContent,
5529
5510
  {
5530
5511
  $hasLeftIcon: isNotNil5(leftIcon),
@@ -5624,7 +5605,7 @@ var Button = forwardRef2(
5624
5605
  Button.displayName = "Button";
5625
5606
 
5626
5607
  // src/components/ActionButton/ActionButton.tsx
5627
- import { jsx as jsx163, jsxs as jsxs7 } from "react/jsx-runtime";
5608
+ import { jsx as jsx163, jsxs as jsxs6 } from "react/jsx-runtime";
5628
5609
  var StyledActionButton = styled6(Button)`
5629
5610
  ${({ $colorScheme }) => getColorScheme($colorScheme)};
5630
5611
  display: grid;
@@ -5729,7 +5710,7 @@ var ActionButton = forwardRef3(
5729
5710
  "menu-up": "caret-up",
5730
5711
  "menu-down": "caret-down"
5731
5712
  };
5732
- return /* @__PURE__ */ jsxs7(
5713
+ return /* @__PURE__ */ jsxs6(
5733
5714
  StyledActionButton,
5734
5715
  {
5735
5716
  ...props,
@@ -5933,7 +5914,7 @@ Avatar.displayName = "Avatar";
5933
5914
  import { forwardRef as forwardRef4 } from "react";
5934
5915
  import styled9 from "styled-components";
5935
5916
  import { isNotNil as isNotNil6 } from "@wistia/type-guards";
5936
- import { jsx as jsx166, jsxs as jsxs8 } from "react/jsx-runtime";
5917
+ import { jsx as jsx166, jsxs as jsxs7 } from "react/jsx-runtime";
5937
5918
  var StyledBadge = styled9.div`
5938
5919
  ${({ $colorScheme }) => getColorScheme($colorScheme)};
5939
5920
  align-items: center;
@@ -5957,7 +5938,7 @@ var StyledBadge = styled9.div`
5957
5938
  var Badge = forwardRef4(
5958
5939
  ({ colorScheme = "inherit", label, icon, ...otherProps }, ref) => {
5959
5940
  const hasIcon = isNotNil6(icon);
5960
- return /* @__PURE__ */ jsxs8(
5941
+ return /* @__PURE__ */ jsxs7(
5961
5942
  StyledBadge,
5962
5943
  {
5963
5944
  ref,
@@ -6125,9 +6106,9 @@ var Breadcrumbs = ({ children, ...props }) => {
6125
6106
  Breadcrumbs.displayName = "Breadcrumbs";
6126
6107
 
6127
6108
  // src/components/Breadcrumbs/Breadcrumb.tsx
6128
- import { Fragment as Fragment2, jsx as jsx169, jsxs as jsxs9 } from "react/jsx-runtime";
6109
+ import { Fragment as Fragment2, jsx as jsx169, jsxs as jsxs8 } from "react/jsx-runtime";
6129
6110
  var Breadcrumb = ({ icon, href, children, ...props }) => {
6130
- return /* @__PURE__ */ jsxs9(Fragment2, { children: [
6111
+ return /* @__PURE__ */ jsxs8(Fragment2, { children: [
6131
6112
  /* @__PURE__ */ jsx169(
6132
6113
  Button,
6133
6114
  {
@@ -6467,7 +6448,7 @@ var LabelDescription = ({
6467
6448
  LabelDescription.displayName = "LabelDescription";
6468
6449
 
6469
6450
  // src/components/Checkbox/Checkbox.tsx
6470
- import { jsx as jsx175, jsxs as jsxs10 } from "react/jsx-runtime";
6451
+ import { jsx as jsx175, jsxs as jsxs9 } from "react/jsx-runtime";
6471
6452
  var CheckIcon = () => /* @__PURE__ */ jsx175(
6472
6453
  "svg",
6473
6454
  {
@@ -6557,7 +6538,7 @@ var Checkbox = forwardRef6(
6557
6538
  }, ref) => {
6558
6539
  const generatedId = useId();
6559
6540
  const computedId = isNonEmptyString2(id) ? id : `wistia-ui-checkbox-group-${generatedId}`;
6560
- return /* @__PURE__ */ jsxs10(StyledCheckboxWrapper, { children: [
6541
+ return /* @__PURE__ */ jsxs9(StyledCheckboxWrapper, { children: [
6561
6542
  /* @__PURE__ */ jsx175(
6562
6543
  StyledCheckboxRoot,
6563
6544
  {
@@ -6586,7 +6567,7 @@ var Checkbox = forwardRef6(
6586
6567
  children: /* @__PURE__ */ jsx175(StyledCheckboxIndicator, { children: /* @__PURE__ */ jsx175(CheckIcon, {}) })
6587
6568
  }
6588
6569
  ),
6589
- /* @__PURE__ */ jsxs10(StyledLabelWrapper, { children: [
6570
+ /* @__PURE__ */ jsxs9(StyledLabelWrapper, { children: [
6590
6571
  /* @__PURE__ */ jsx175(
6591
6572
  Label,
6592
6573
  {
@@ -6810,7 +6791,7 @@ var useFormState = (action, initialData = {}) => {
6810
6791
  // src/components/Form/FormErrorSummary.tsx
6811
6792
  import { useContext as useContext2, useRef as useRef4 } from "react";
6812
6793
  import { isArray, isNotUndefined as isNotUndefined5 } from "@wistia/type-guards";
6813
- import { jsx as jsx179, jsxs as jsxs11 } from "react/jsx-runtime";
6794
+ import { jsx as jsx179, jsxs as jsxs10 } from "react/jsx-runtime";
6814
6795
  var ErrorItem = ({ name, error, formId }) => {
6815
6796
  return /* @__PURE__ */ jsx179("li", { children: /* @__PURE__ */ jsx179(Link, { href: `${formId}-${name}`, children: error }) }, name);
6816
6797
  };
@@ -6821,7 +6802,7 @@ var FormErrorSummary = ({ description }) => {
6821
6802
  if (isValid || !hasSubmitted) {
6822
6803
  return null;
6823
6804
  }
6824
- return /* @__PURE__ */ jsxs11("div", { ref, children: [
6805
+ return /* @__PURE__ */ jsxs10("div", { ref, children: [
6825
6806
  /* @__PURE__ */ jsx179("p", { children: description }),
6826
6807
  /* @__PURE__ */ jsx179("ul", { children: Object.entries(errors).filter(([, error]) => isNotUndefined5(error)).map(
6827
6808
  ([name, error]) => isArray(error) ? error.map((err) => /* @__PURE__ */ jsx179(
@@ -7033,7 +7014,7 @@ import { createContext as createContext3, useMemo as useMemo5 } from "react";
7033
7014
  // src/components/FormGroup/FormGroup.tsx
7034
7015
  import styled22 from "styled-components";
7035
7016
  import { useRef as useRef5 } from "react";
7036
- import { jsx as jsx181, jsxs as jsxs12 } from "react/jsx-runtime";
7017
+ import { jsx as jsx181, jsxs as jsxs11 } from "react/jsx-runtime";
7037
7018
  var StyledFieldset = styled22.fieldset`
7038
7019
  border: 0;
7039
7020
  `;
@@ -7042,7 +7023,7 @@ var StyledLegend = styled22.legend`
7042
7023
  `;
7043
7024
  var FormGroup = ({ children, label, ...props }) => {
7044
7025
  const ref = useRef5();
7045
- return /* @__PURE__ */ jsxs12(
7026
+ return /* @__PURE__ */ jsxs11(
7046
7027
  Stack,
7047
7028
  {
7048
7029
  ...props,
@@ -7085,7 +7066,7 @@ var CheckboxGroup = ({
7085
7066
  CheckboxGroup.displayName = "CheckboxGroup";
7086
7067
 
7087
7068
  // src/components/FormField/FormField.tsx
7088
- import { jsx as jsx183, jsxs as jsxs13 } from "react/jsx-runtime";
7069
+ import { jsx as jsx183, jsxs as jsxs12 } from "react/jsx-runtime";
7089
7070
  var StyledFormField = styled23.div`
7090
7071
  --form-field-spacing: var(--wui-space-01);
7091
7072
  --form-field-error-color: var(--wui-color-text-secondary-error);
@@ -7171,7 +7152,7 @@ var FormField = ({
7171
7152
  };
7172
7153
  }
7173
7154
  Children2.only(children);
7174
- return /* @__PURE__ */ jsxs13(StyledFormField, { ...props, children: [
7155
+ return /* @__PURE__ */ jsxs12(StyledFormField, { ...props, children: [
7175
7156
  !isInlineLabel && /* @__PURE__ */ jsx183(Label, { htmlFor: id, children: label }),
7176
7157
  cloneElement3(children, childProps),
7177
7158
  isNotNil8(computedError) ? /* @__PURE__ */ jsx183(
@@ -7248,7 +7229,7 @@ IconButton.displayName = "IconButton";
7248
7229
  import { forwardRef as forwardRef11, cloneElement as cloneElement5, useRef as useRef6 } from "react";
7249
7230
  import styled25, { css as css19 } from "styled-components";
7250
7231
  import { isNil as isNil10, isNotNil as isNotNil9 } from "@wistia/type-guards";
7251
- import { jsx as jsx186, jsxs as jsxs14 } from "react/jsx-runtime";
7232
+ import { jsx as jsx186, jsxs as jsxs13 } from "react/jsx-runtime";
7252
7233
  var inputStyles = css19`
7253
7234
  --wui-input-color-bg: var(--wui-color-bg-surface);
7254
7235
  --wui-input-color-bg-disabled: var(--wui-color-bg-surface-disabled);
@@ -7376,7 +7357,7 @@ var Input = forwardRef11(
7376
7357
  });
7377
7358
  }
7378
7359
  };
7379
- return /* @__PURE__ */ jsxs14(
7360
+ return /* @__PURE__ */ jsxs13(
7380
7361
  StyledInputContainer,
7381
7362
  {
7382
7363
  $fullWidth: fullWidth,
@@ -7424,7 +7405,7 @@ var MenuContext = createContext5({ compact: false });
7424
7405
  var useMenuContext = () => useContext4(MenuContext);
7425
7406
 
7426
7407
  // src/components/Menu/Menu.tsx
7427
- import { jsx as jsx187, jsxs as jsxs15 } from "react/jsx-runtime";
7408
+ import { jsx as jsx187, jsxs as jsxs14 } from "react/jsx-runtime";
7428
7409
  var open = keyframes`
7429
7410
  from {
7430
7411
  opacity: 0;
@@ -7534,7 +7515,7 @@ var Menu = ({
7534
7515
  onOpenChange: () => null
7535
7516
  };
7536
7517
  }
7537
- return /* @__PURE__ */ jsx187(MenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs15(
7518
+ return /* @__PURE__ */ jsx187(MenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs14(
7538
7519
  DropdownMenu,
7539
7520
  {
7540
7521
  modal: false,
@@ -7614,7 +7595,7 @@ import { isNotNil as isNotNil12 } from "@wistia/type-guards";
7614
7595
  import { forwardRef as forwardRef12 } from "react";
7615
7596
  import styled28 from "styled-components";
7616
7597
  import { isNotNil as isNotNil11, isNotUndefined as isNotUndefined8 } from "@wistia/type-guards";
7617
- import { jsx as jsx189, jsxs as jsxs16 } from "react/jsx-runtime";
7598
+ import { jsx as jsx189, jsxs as jsxs15 } from "react/jsx-runtime";
7618
7599
  var StyledButton3 = styled28(Button)`
7619
7600
  ${({ colorScheme }) => getColorScheme(colorScheme)};
7620
7601
 
@@ -7704,7 +7685,7 @@ var MenuItemButton = forwardRef12(({ children, appearance, command, icon, ...pro
7704
7685
  }
7705
7686
  );
7706
7687
  }
7707
- return /* @__PURE__ */ jsxs16(
7688
+ return /* @__PURE__ */ jsxs15(
7708
7689
  StyledButton3,
7709
7690
  {
7710
7691
  ...props,
@@ -7740,7 +7721,7 @@ var MenuItemDescription = ({ children }) => {
7740
7721
  };
7741
7722
 
7742
7723
  // src/components/Menu/SubMenu.tsx
7743
- import { jsx as jsx191, jsxs as jsxs17 } from "react/jsx-runtime";
7724
+ import { jsx as jsx191, jsxs as jsxs16 } from "react/jsx-runtime";
7744
7725
  var SubMenuContent = styled30(DropdownMenuSubContent)`
7745
7726
  ${menuContentCss}
7746
7727
 
@@ -7761,8 +7742,8 @@ var StyledSubTrigger = styled30(DropdownMenuSubTrigger)`
7761
7742
  `;
7762
7743
  var SubMenuTrigger = (props) => {
7763
7744
  const { isSmAndUp } = useMq();
7764
- const Trigger3 = isSmAndUp ? StyledSubTrigger : DropdownMenuItem;
7765
- return /* @__PURE__ */ jsx191(Trigger3, { asChild: true, children: /* @__PURE__ */ jsx191(
7745
+ const Trigger2 = isSmAndUp ? StyledSubTrigger : DropdownMenuItem;
7746
+ return /* @__PURE__ */ jsx191(Trigger2, { asChild: true, children: /* @__PURE__ */ jsx191(
7766
7747
  MenuItemButton,
7767
7748
  {
7768
7749
  ...props,
@@ -7780,14 +7761,14 @@ var SubMenu = ({
7780
7761
  const { isSmAndUp } = useMq();
7781
7762
  const [isExpanded, setIsExpanded] = useState7(false);
7782
7763
  const { compact } = useMenuContext();
7783
- return isSmAndUp ? /* @__PURE__ */ jsxs17(DropdownMenuSub, { onOpenChange, children: [
7784
- /* @__PURE__ */ jsxs17(SubMenuTrigger, { ...props, children: [
7764
+ return isSmAndUp ? /* @__PURE__ */ jsxs16(DropdownMenuSub, { onOpenChange, children: [
7765
+ /* @__PURE__ */ jsxs16(SubMenuTrigger, { ...props, children: [
7785
7766
  /* @__PURE__ */ jsx191(MenuItemLabel, { children: label }),
7786
7767
  isNotNil12(description) ? /* @__PURE__ */ jsx191(MenuItemDescription, { children: description }) : null
7787
7768
  ] }),
7788
7769
  /* @__PURE__ */ jsx191(DropdownMenuPortal2, { children: /* @__PURE__ */ jsx191(SubMenuContent, { $compact: compact, children }) })
7789
- ] }) : /* @__PURE__ */ jsxs17(DropdownMenuGroup, { children: [
7790
- /* @__PURE__ */ jsxs17(
7770
+ ] }) : /* @__PURE__ */ jsxs16(DropdownMenuGroup, { children: [
7771
+ /* @__PURE__ */ jsxs16(
7791
7772
  SubMenuTrigger,
7792
7773
  {
7793
7774
  ...props,
@@ -7835,9 +7816,9 @@ MenuItem.displayName = "MenuItem";
7835
7816
  import {
7836
7817
  DropdownMenuRadioGroup
7837
7818
  } from "@radix-ui/react-dropdown-menu";
7838
- import { jsx as jsx193, jsxs as jsxs18 } from "react/jsx-runtime";
7819
+ import { jsx as jsx193, jsxs as jsxs17 } from "react/jsx-runtime";
7839
7820
  var MenuRadioGroup = ({ children, label, ...props }) => {
7840
- return /* @__PURE__ */ jsxs18(DropdownMenuRadioGroup, { ...props, children: [
7821
+ return /* @__PURE__ */ jsxs17(DropdownMenuRadioGroup, { ...props, children: [
7841
7822
  /* @__PURE__ */ jsx193(MenuLabel, { children: label }),
7842
7823
  children
7843
7824
  ] });
@@ -7885,9 +7866,9 @@ RadioMenuItem.displayName = "RadioMenuItem";
7885
7866
  import {
7886
7867
  DropdownMenuCheckboxItem
7887
7868
  } from "@radix-ui/react-dropdown-menu";
7888
- import { jsx as jsx195, jsxs as jsxs19 } from "react/jsx-runtime";
7869
+ import { jsx as jsx195, jsxs as jsxs18 } from "react/jsx-runtime";
7889
7870
  var CheckboxIndicator2 = ({ checked, ...props }) => {
7890
- return checked ? /* @__PURE__ */ jsxs19(
7871
+ return checked ? /* @__PURE__ */ jsxs18(
7891
7872
  "svg",
7892
7873
  {
7893
7874
  ...props,
@@ -7913,7 +7894,7 @@ var CheckboxIndicator2 = ({ checked, ...props }) => {
7913
7894
  )
7914
7895
  ]
7915
7896
  }
7916
- ) : /* @__PURE__ */ jsxs19(
7897
+ ) : /* @__PURE__ */ jsxs18(
7917
7898
  "svg",
7918
7899
  {
7919
7900
  ...props,
@@ -8018,7 +7999,7 @@ var ScreenReaderOnly = ({
8018
7999
  ScreenReaderOnly.displayName = "ScreenReaderOnly";
8019
8000
 
8020
8001
  // src/components/Modal/ModalHeader.tsx
8021
- import { jsx as jsx198, jsxs as jsxs20 } from "react/jsx-runtime";
8002
+ import { jsx as jsx198, jsxs as jsxs19 } from "react/jsx-runtime";
8022
8003
  var Header = styled33.header`
8023
8004
  display: flex;
8024
8005
  order: 1;
@@ -8043,7 +8024,7 @@ var ModalHeader = ({
8043
8024
  hideCloseButton
8044
8025
  }) => {
8045
8026
  const TitleWrapper = hideTitle ? ScreenReaderOnly : Title;
8046
- return /* @__PURE__ */ jsxs20(Header, { children: [
8027
+ return /* @__PURE__ */ jsxs19(Header, { children: [
8047
8028
  /* @__PURE__ */ jsx198(TitleWrapper, { children: title }),
8048
8029
  hideCloseButton ? null : /* @__PURE__ */ jsx198(ModalCloseButton, {})
8049
8030
  ] });
@@ -8185,7 +8166,7 @@ var Backdrop = forwardRef15(
8185
8166
  Backdrop.displayName = "Backdrop";
8186
8167
 
8187
8168
  // src/components/Modal/Modal.tsx
8188
- import { jsx as jsx201, jsxs as jsxs21 } from "react/jsx-runtime";
8169
+ import { jsx as jsx201, jsxs as jsxs20 } from "react/jsx-runtime";
8189
8170
  var ModalBody = styled36.div`
8190
8171
  flex-direction: column;
8191
8172
  display: flex;
@@ -8213,9 +8194,9 @@ var Modal = forwardRef16(
8213
8194
  }
8214
8195
  },
8215
8196
  open: isOpen,
8216
- children: /* @__PURE__ */ jsxs21(DialogPortal, { children: [
8197
+ children: /* @__PURE__ */ jsxs20(DialogPortal, { children: [
8217
8198
  /* @__PURE__ */ jsx201(Backdrop, {}),
8218
- /* @__PURE__ */ jsxs21(
8199
+ /* @__PURE__ */ jsxs20(
8219
8200
  ModalContent,
8220
8201
  {
8221
8202
  ref,
@@ -8255,7 +8236,7 @@ Modal.displayName = "Modal";
8255
8236
  import { forwardRef as forwardRef17, useId as useId3 } from "react";
8256
8237
  import styled37, { css as css21 } from "styled-components";
8257
8238
  import { isNonEmptyString as isNonEmptyString3 } from "@wistia/type-guards";
8258
- import { jsx as jsx202, jsxs as jsxs22 } from "react/jsx-runtime";
8239
+ import { jsx as jsx202, jsxs as jsxs21 } from "react/jsx-runtime";
8259
8240
  var StyledLabelWrapper2 = styled37.div`
8260
8241
  display: flex;
8261
8242
  flex-direction: column;
@@ -8341,7 +8322,7 @@ var Radio = forwardRef17(
8341
8322
  }, ref) => {
8342
8323
  const generatedId = useId3();
8343
8324
  const computedId = isNonEmptyString3(id) ? id : `ui-radio-${generatedId}`;
8344
- return /* @__PURE__ */ jsxs22(
8325
+ return /* @__PURE__ */ jsxs21(
8345
8326
  StyledRadioWrapper,
8346
8327
  {
8347
8328
  "aria-invalid": otherProps["aria-invalid"],
@@ -8362,7 +8343,7 @@ var Radio = forwardRef17(
8362
8343
  ...otherProps
8363
8344
  }
8364
8345
  ),
8365
- /* @__PURE__ */ jsxs22(StyledLabelWrapper2, { children: [
8346
+ /* @__PURE__ */ jsxs21(StyledLabelWrapper2, { children: [
8366
8347
  /* @__PURE__ */ jsx202(
8367
8348
  Label,
8368
8349
  {
@@ -8385,7 +8366,7 @@ Radio.displayName = "Radio";
8385
8366
  import { forwardRef as forwardRef18 } from "react";
8386
8367
  import styled38 from "styled-components";
8387
8368
  import { isNil as isNil11, isNotNil as isNotNil16, isNonEmptyString as isNonEmptyString4 } from "@wistia/type-guards";
8388
- import { Fragment as Fragment3, jsx as jsx203, jsxs as jsxs23 } from "react/jsx-runtime";
8369
+ import { Fragment as Fragment3, jsx as jsx203, jsxs as jsxs22 } from "react/jsx-runtime";
8389
8370
  var TagLabel = styled38.a`
8390
8371
  ${({ $colorScheme }) => getColorScheme($colorScheme)};
8391
8372
  font-size: var(--wui-typography-label-4-size);
@@ -8466,9 +8447,9 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
8466
8447
  "for accessibility, onClickRemoveLabel must be provided if onClickRemove is provided"
8467
8448
  );
8468
8449
  }
8469
- return /* @__PURE__ */ jsxs23(Fragment3, { children: [
8450
+ return /* @__PURE__ */ jsxs22(Fragment3, { children: [
8470
8451
  /* @__PURE__ */ jsx203(TagDivider, { $colorScheme: colorScheme }),
8471
- /* @__PURE__ */ jsxs23(
8452
+ /* @__PURE__ */ jsxs22(
8472
8453
  StyledRemoveButton,
8473
8454
  {
8474
8455
  $colorScheme: colorScheme,
@@ -8491,7 +8472,7 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
8491
8472
  var Tag = forwardRef18(
8492
8473
  ({ onClickRemove, colorScheme = "inherit", href, label, onClickRemoveLabel, ...otherProps }, ref) => {
8493
8474
  const labelProps = isNotNil16(href) && isNonEmptyString4(href) ? { href, as: "a" } : { as: "span" };
8494
- return /* @__PURE__ */ jsxs23(
8475
+ return /* @__PURE__ */ jsxs22(
8495
8476
  StyledTag,
8496
8477
  {
8497
8478
  ref,
@@ -8530,7 +8511,7 @@ import {
8530
8511
  Arrow
8531
8512
  } from "@radix-ui/react-tooltip";
8532
8513
  import styled39, { css as css22 } from "styled-components";
8533
- import { jsx as jsx204, jsxs as jsxs24 } from "react/jsx-runtime";
8514
+ import { jsx as jsx204, jsxs as jsxs23 } from "react/jsx-runtime";
8534
8515
  var CompactTooltipStyles = css22`
8535
8516
  --tooltip-font-size: var(--wui-typography-label-4-size);
8536
8517
  --tooltip-line-height: var(--wui-typography-label-4-line-height);
@@ -8596,14 +8577,14 @@ var Tooltip = ({
8596
8577
  if (forceOpen === true) {
8597
8578
  rootProps.open = true;
8598
8579
  }
8599
- return /* @__PURE__ */ jsxs24(
8580
+ return /* @__PURE__ */ jsxs23(
8600
8581
  Root,
8601
8582
  {
8602
8583
  delayDuration: delay,
8603
8584
  ...rootProps,
8604
8585
  children: [
8605
8586
  /* @__PURE__ */ jsx204(Trigger, { asChild: true, children }),
8606
- /* @__PURE__ */ jsx204(Portal, { children: /* @__PURE__ */ jsxs24(
8587
+ /* @__PURE__ */ jsx204(Portal, { children: /* @__PURE__ */ jsxs23(
8607
8588
  StyledContent,
8608
8589
  {
8609
8590
  $compact: compact,
@@ -8635,7 +8616,7 @@ Tooltip.displayName = "Tooltip";
8635
8616
  // src/components/WistiaLogo/WistiaLogo.tsx
8636
8617
  import styled40 from "styled-components";
8637
8618
  import { isNotNil as isNotNil17 } from "@wistia/type-guards";
8638
- import { jsx as jsx205, jsxs as jsxs25 } from "react/jsx-runtime";
8619
+ import { jsx as jsx205, jsxs as jsxs24 } from "react/jsx-runtime";
8639
8620
  var renderBrandmark = (brandmarkColor, iconOnly) => {
8640
8621
  if (iconOnly) {
8641
8622
  return /* @__PURE__ */ jsx205(
@@ -8717,7 +8698,7 @@ var WistiaLogo = ({
8717
8698
  };
8718
8699
  const brandmarkColor = VARIANT_COLORS[variant].brandmark;
8719
8700
  const logotypeColor = VARIANT_COLORS[variant].logotype;
8720
- const Logo = /* @__PURE__ */ jsxs25(
8701
+ const Logo = /* @__PURE__ */ jsxs24(
8721
8702
  WistiaLogoComponent,
8722
8703
  {
8723
8704
  $hoverColor: hoverColor,
@@ -8737,199 +8718,6 @@ var WistiaLogo = ({
8737
8718
  return href !== void 0 ? /* @__PURE__ */ jsx205("a", { href, children: Logo }) : Logo;
8738
8719
  };
8739
8720
  WistiaLogo.displayName = "WistiaLogo";
8740
-
8741
- // src/components/Select/Select.tsx
8742
- import {
8743
- Root as Root2,
8744
- Trigger as Trigger2,
8745
- Portal as Portal2,
8746
- Content as Content2,
8747
- ScrollUpButton,
8748
- Viewport,
8749
- Value,
8750
- ScrollDownButton
8751
- } from "@radix-ui/react-select";
8752
- import { forwardRef as forwardRef19 } from "react";
8753
- import styled41 from "styled-components";
8754
- import { jsx as jsx206, jsxs as jsxs26 } from "react/jsx-runtime";
8755
- var StyledTrigger = styled41(Trigger2)`
8756
- ${({ $colorScheme }) => getColorScheme($colorScheme)};
8757
- --wui-select-color-bg: var(--wui-color-bg-surface);
8758
- --wui-select-color-bg-disabled: var(--wui-color-bg-surface-disabled);
8759
- --wui-select-color-border: var(--wui-color-border);
8760
- --wui-select-color-border-focus: var(--wui-color-border-active);
8761
- --wui-select-color-border-error: var(--wui-color-border-error);
8762
- --wui-select-color-border-disabled: var(--wui-color-border-disabled);
8763
- --wui-select-border-radius: var(--wui-border-radius-rounded);
8764
- --wui-select-multiline-border-radius: var(--wui-border-radius-02);
8765
- --wui-select-vertical-padding: var(--wui-space-02);
8766
- --wui-select-horizontal-padding: var(--wui-space-03);
8767
- --wui-select-placeholder: var(--wui-gray-10);
8768
- --wui-select-color-text-error: var(--wui-color-text-error);
8769
-
8770
- padding: var(--wui-select-vertical-padding) var(--wui-select-horizontal-padding);
8771
- background-color: var(--wui-select-color-bg);
8772
- border: 1px solid var(--wui-select-color-border);
8773
- border-radius: var(--wui-select-border-radius);
8774
- min-width: 200px;
8775
- text-align: left;
8776
- display: inline-flex;
8777
- align-items: center;
8778
- justify-content: space-between;
8779
- width: ${({ $fullWidth = false }) => $fullWidth ? "100%" : "auto"};
8780
-
8781
- &[aria-expanded='true'],
8782
- &:focus {
8783
- outline: 2px solid var(--wui-color-focus-ring);
8784
- }
8785
-
8786
- &[aria-invalid='true'] {
8787
- outline: 2px solid var(--wui-select-color-border-error);
8788
- color: var(--wui-select-color-text-error);
8789
- }
8790
-
8791
- &:disabled {
8792
- border-color: var(--wui-color-bg-surface-disabled);
8793
- background-color: var(--wui-color-bg-surface-disabled);
8794
- }
8795
- `;
8796
- var StyledContent2 = styled41(Content2)`
8797
- --wui-select-content-border: var(--wui-color-border);
8798
- --wui-select-content-bg: var(--wui-color-bg-surface);
8799
- --wui-select-content-border-radius: var(--wui-border-radius-02);
8800
- --wui-select-option-padding: var(--wui-space-02);
8801
- --wui-select-option-inner-gap: var(--wui-space-03);
8802
- --wui-select-option-bg-hover: var(--wui-color-bg-surface-hover);
8803
-
8804
- overflow: hidden;
8805
- transform: translateY(8px);
8806
- background-color: var(--wui-select-content-bg);
8807
- border: 1px solid var(--wui-select-content-border);
8808
- border-radius: var(--wui-select-content-border-radius);
8809
- padding: var(--wui-select-option-padding);
8810
- min-width: 200px;
8811
- `;
8812
- var Select = forwardRef19(
8813
- ({
8814
- colorScheme = "inherit",
8815
- children,
8816
- onChange = () => null,
8817
- placeholder = "Select...",
8818
- fullWidth = false,
8819
- ...props
8820
- }, forwardedRef) => {
8821
- const responsiveFullWidth = useResponsiveProp(fullWidth);
8822
- return /* @__PURE__ */ jsxs26(
8823
- Root2,
8824
- {
8825
- ...props,
8826
- onValueChange: onChange,
8827
- children: [
8828
- /* @__PURE__ */ jsxs26(
8829
- StyledTrigger,
8830
- {
8831
- ref: forwardedRef,
8832
- $colorScheme: colorScheme,
8833
- $fullWidth: responsiveFullWidth,
8834
- ...props,
8835
- children: [
8836
- /* @__PURE__ */ jsx206(Value, { placeholder }),
8837
- /* @__PURE__ */ jsx206(
8838
- Icon,
8839
- {
8840
- size: "md",
8841
- type: "caret-down"
8842
- }
8843
- )
8844
- ]
8845
- }
8846
- ),
8847
- /* @__PURE__ */ jsx206(Portal2, { children: /* @__PURE__ */ jsxs26(StyledContent2, { position: "popper", children: [
8848
- /* @__PURE__ */ jsx206(ScrollUpButton, { children: /* @__PURE__ */ jsx206(Icon, { type: "caret-up" }) }),
8849
- /* @__PURE__ */ jsx206(Viewport, { children }),
8850
- /* @__PURE__ */ jsx206(ScrollDownButton, { children: /* @__PURE__ */ jsx206(Icon, { type: "caret-down" }) })
8851
- ] }) })
8852
- ]
8853
- }
8854
- );
8855
- }
8856
- );
8857
- Select.displayName = "Select";
8858
-
8859
- // src/components/Select/SelectOption.tsx
8860
- import { Item, ItemText, ItemIndicator } from "@radix-ui/react-select";
8861
- import { forwardRef as forwardRef20 } from "react";
8862
- import styled42 from "styled-components";
8863
- import { jsx as jsx207, jsxs as jsxs27 } from "react/jsx-runtime";
8864
- var StyledItem = styled42(Item)`
8865
- ${variantStyleMap2.body3};
8866
- display: flex;
8867
- padding: var(--wui-select-option-padding);
8868
- gap: var(--wui-select-option-inner-gap);
8869
- font-size: var(--font-size);
8870
- font-weight: var(--font-weight);
8871
- border-radius: var(--wui-border-radius-01);
8872
-
8873
- &:hover,
8874
- &:focus-visible {
8875
- background-color: var(--wui-select-option-bg-hover);
8876
- outline: none;
8877
- }
8878
-
8879
- &[aria-disabled='true'] {
8880
- color: var(--wui-color-text-disabled);
8881
- }
8882
-
8883
- &[aria-disabled='true']:hover {
8884
- background-color: transparent;
8885
- }
8886
- `;
8887
- var StyledIconContainer = styled42.span`
8888
- width: 12px;
8889
- `;
8890
- var SelectOption = forwardRef20(
8891
- ({ children, ...props }, forwardedRef) => {
8892
- return /* @__PURE__ */ jsxs27(
8893
- StyledItem,
8894
- {
8895
- ...props,
8896
- ref: forwardedRef,
8897
- children: [
8898
- /* @__PURE__ */ jsx207(StyledIconContainer, { children: /* @__PURE__ */ jsx207(ItemIndicator, { children: /* @__PURE__ */ jsx207(
8899
- Icon,
8900
- {
8901
- size: "sm",
8902
- type: "checkmark"
8903
- }
8904
- ) }) }),
8905
- /* @__PURE__ */ jsx207(ItemText, { children })
8906
- ]
8907
- }
8908
- );
8909
- }
8910
- );
8911
- SelectOption.displayName = "Option";
8912
-
8913
- // src/components/Select/SelectOptionGroup.tsx
8914
- import { Group, Label as Label2 } from "@radix-ui/react-select";
8915
- import styled43 from "styled-components";
8916
- import { jsx as jsx208, jsxs as jsxs28 } from "react/jsx-runtime";
8917
- var StyledLabel3 = styled43(Label2)`
8918
- padding: var(--wui-select-option-padding);
8919
- `;
8920
- var SelectOptionGroup = ({ children, label, ...props }) => {
8921
- return /* @__PURE__ */ jsxs28(Group, { ...props, children: [
8922
- /* @__PURE__ */ jsx208(StyledLabel3, { children: /* @__PURE__ */ jsx208(
8923
- Text,
8924
- {
8925
- prominence: "secondary",
8926
- variant: "body3",
8927
- children: label
8928
- }
8929
- ) }),
8930
- children
8931
- ] });
8932
- };
8933
8721
  export {
8934
8722
  ActionButton,
8935
8723
  Avatar,
@@ -8967,9 +8755,6 @@ export {
8967
8755
  RadioGroup,
8968
8756
  RadioMenuItem,
8969
8757
  ScreenReaderOnly,
8970
- Select,
8971
- SelectOption,
8972
- SelectOptionGroup,
8973
8758
  Stack,
8974
8759
  SubMenu,
8975
8760
  Tag,