@wistia/ui 0.6.10-beta.93026e4d.9b8a499 → 0.6.10

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.6.10-beta.93026e4d.9b8a499
3
+ * @license @wistia/ui v0.6.10
4
4
  *
5
5
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
6
6
  *
@@ -97,12 +97,6 @@ __export(index_exports, {
97
97
  Stack: () => Stack,
98
98
  SubMenu: () => SubMenu,
99
99
  Tab: () => Tab,
100
- Table: () => Table,
101
- TableBody: () => TableBody,
102
- TableCell: () => TableCell,
103
- TableFooter: () => TableFooter,
104
- TableHead: () => TableHead,
105
- TableRow: () => TableRow,
106
100
  Tabs: () => Tabs,
107
101
  Tag: () => Tag,
108
102
  Text: () => Text,
@@ -9168,59 +9162,10 @@ var IconButton = (0, import_react32.forwardRef)(
9168
9162
  );
9169
9163
  IconButton.displayName = "IconButton";
9170
9164
 
9171
- // src/components/Image/Image.tsx
9172
- var import_styled_components50 = __toESM(require("styled-components"));
9173
- var import_type_guards29 = require("@wistia/type-guards");
9174
- var import_jsx_runtime223 = require("react/jsx-runtime");
9175
- var getFillStyle2 = (fillContainer) => {
9176
- if (fillContainer === "horizontal") {
9177
- return "width: 100%;";
9178
- }
9179
- if (fillContainer === "vertical") {
9180
- return "height: 100%;";
9181
- }
9182
- if (fillContainer === true) {
9183
- return `
9184
- width: 100%;
9185
- height: 100%;
9186
- `;
9187
- }
9188
- return void 0;
9189
- };
9190
- var StyledImage = import_styled_components50.default.img`
9191
- border-radius: ${({ $borderRadius }) => (0, import_type_guards29.isNotNil)($borderRadius) ? `var(--wui-${$borderRadius})` : void 0};
9192
- ${({ $fillContainer }) => getFillStyle2($fillContainer)};
9193
- object-fit: ${({ $objFit }) => $objFit};
9194
- object-position: ${({ $objPosition }) => $objPosition};
9195
- `;
9196
- var Image = ({
9197
- src,
9198
- alt,
9199
- borderRadius,
9200
- fill: fillContainer = false,
9201
- fit: objFit,
9202
- loading = "lazy",
9203
- position: objPosition,
9204
- ...otherProps
9205
- }) => /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(
9206
- StyledImage,
9207
- {
9208
- $borderRadius: borderRadius,
9209
- $fillContainer: fillContainer,
9210
- $objFit: objFit,
9211
- $objPosition: objPosition,
9212
- alt,
9213
- loading,
9214
- src,
9215
- ...otherProps
9216
- }
9217
- );
9218
- Image.displayName = "Image";
9219
-
9220
9165
  // src/components/Menu/Menu.tsx
9221
- var import_styled_components51 = __toESM(require("styled-components"));
9166
+ var import_styled_components50 = __toESM(require("styled-components"));
9222
9167
  var import_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
9223
- var import_type_guards30 = require("@wistia/type-guards");
9168
+ var import_type_guards29 = require("@wistia/type-guards");
9224
9169
  var import_react34 = require("react");
9225
9170
 
9226
9171
  // src/components/Menu/MenuContext.tsx
@@ -9229,8 +9174,8 @@ var MenuContext = (0, import_react33.createContext)({ compact: false });
9229
9174
  var useMenuContext = () => (0, import_react33.useContext)(MenuContext);
9230
9175
 
9231
9176
  // src/components/Menu/Menu.tsx
9232
- var import_jsx_runtime224 = require("react/jsx-runtime");
9233
- var open = import_styled_components51.keyframes`
9177
+ var import_jsx_runtime223 = require("react/jsx-runtime");
9178
+ var open = import_styled_components50.keyframes`
9234
9179
  from {
9235
9180
  opacity: 0;
9236
9181
  transform: scale(.97) translateY(-8px);
@@ -9240,7 +9185,7 @@ var open = import_styled_components51.keyframes`
9240
9185
  transform: scale(1);
9241
9186
  }
9242
9187
  `;
9243
- var close = import_styled_components51.keyframes`
9188
+ var close = import_styled_components50.keyframes`
9244
9189
  from {
9245
9190
  opacity: 1;
9246
9191
  transform: scale(1);
@@ -9250,7 +9195,7 @@ var close = import_styled_components51.keyframes`
9250
9195
  transform: scale(.97) translateY(-8px);
9251
9196
  }
9252
9197
  `;
9253
- var menuItemCss = import_styled_components51.css`
9198
+ var menuItemCss = import_styled_components50.css`
9254
9199
  --menu-label-description-gap: var(--wui-space-01);
9255
9200
  --menu-item-inner-gap: var(--wui-space-03);
9256
9201
  --menu-item-left-icon-size: 24px;
@@ -9261,7 +9206,7 @@ var menuItemCss = import_styled_components51.css`
9261
9206
  --menu-label-line-height: var(--wui-typography-label-3-line-height);
9262
9207
  --menu-divider-margin: var(--wui-space-02);
9263
9208
  `;
9264
- var compactMenuItemCss = import_styled_components51.css`
9209
+ var compactMenuItemCss = import_styled_components50.css`
9265
9210
  --menu-label-description-gap: 0;
9266
9211
  --menu-item-inner-gap: var(--wui-space-02);
9267
9212
  --menu-item-left-icon-size: 16px;
@@ -9272,7 +9217,7 @@ var compactMenuItemCss = import_styled_components51.css`
9272
9217
  --menu-label-line-height: var(--wui-typography-label-4-line-height);
9273
9218
  --menu-divider-margin: var(--wui-space-01);
9274
9219
  `;
9275
- var menuContentCss = import_styled_components51.css`
9220
+ var menuContentCss = import_styled_components50.css`
9276
9221
  --menu-font-family: var(--wui-typography-family-default);
9277
9222
  --menu-bg: var(--wui-color-bg-surface);
9278
9223
  --menu-shadow: var(--wui-elevation-01);
@@ -9314,7 +9259,7 @@ var menuContentCss = import_styled_components51.css`
9314
9259
  margin: var(--menu-divider-margin) 0;
9315
9260
  }
9316
9261
  `;
9317
- var MenuContent = (0, import_styled_components51.default)(import_react_dropdown_menu.DropdownMenuContent)`
9262
+ var MenuContent = (0, import_styled_components50.default)(import_react_dropdown_menu.DropdownMenuContent)`
9318
9263
  ${menuContentCss}
9319
9264
  `;
9320
9265
  var Menu = ({
@@ -9332,7 +9277,7 @@ var Menu = ({
9332
9277
  }) => {
9333
9278
  const contextValue = (0, import_react34.useMemo)(() => ({ compact }), [compact]);
9334
9279
  let controlProps = {
9335
- ...(0, import_type_guards30.isNotNil)(onOpenChange) && (0, import_type_guards30.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {}
9280
+ ...(0, import_type_guards29.isNotNil)(onOpenChange) && (0, import_type_guards29.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {}
9336
9281
  };
9337
9282
  if (disabled) {
9338
9283
  controlProps = {
@@ -9340,24 +9285,24 @@ var Menu = ({
9340
9285
  onOpenChange: () => null
9341
9286
  };
9342
9287
  }
9343
- return /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(MenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime224.jsxs)(
9288
+ return /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(MenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime223.jsxs)(
9344
9289
  import_react_dropdown_menu.DropdownMenu,
9345
9290
  {
9346
9291
  modal: false,
9347
9292
  ...controlProps,
9348
9293
  children: [
9349
- /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(import_react_dropdown_menu.DropdownMenuTrigger, { asChild: true, children: (0, import_type_guards30.isNotUndefined)(trigger) ? trigger : /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(
9294
+ /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(import_react_dropdown_menu.DropdownMenuTrigger, { asChild: true, children: (0, import_type_guards29.isNotUndefined)(trigger) ? trigger : /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(
9350
9295
  Button,
9351
9296
  {
9352
9297
  "aria-expanded": isOpen,
9353
9298
  disabled,
9354
9299
  forceState: isOpen ? "active" : void 0,
9355
- rightIcon: /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(Icon, { type: "caret-down" }),
9300
+ rightIcon: /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(Icon, { type: "caret-down" }),
9356
9301
  ...triggerProps,
9357
9302
  children: label
9358
9303
  }
9359
9304
  ) }),
9360
- /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(import_react_dropdown_menu.DropdownMenuPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(
9305
+ /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(import_react_dropdown_menu.DropdownMenuPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(
9361
9306
  MenuContent,
9362
9307
  {
9363
9308
  ...props,
@@ -9377,19 +9322,19 @@ var Menu = ({
9377
9322
  Menu.displayName = "Menu";
9378
9323
 
9379
9324
  // src/components/Menu/MenuLabel.tsx
9380
- var import_styled_components52 = __toESM(require("styled-components"));
9325
+ var import_styled_components51 = __toESM(require("styled-components"));
9381
9326
  var import_react_dropdown_menu2 = require("@radix-ui/react-dropdown-menu");
9382
- var import_jsx_runtime225 = require("react/jsx-runtime");
9383
- var StyledMenuLabel = (0, import_styled_components52.default)(import_react_dropdown_menu2.DropdownMenuLabel)`
9327
+ var import_jsx_runtime224 = require("react/jsx-runtime");
9328
+ var StyledMenuLabel = (0, import_styled_components51.default)(import_react_dropdown_menu2.DropdownMenuLabel)`
9384
9329
  padding: var(--wui-space-02);
9385
9330
  `;
9386
9331
  var MenuLabel = ({ children, ...props }) => {
9387
- return /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(
9332
+ return /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(
9388
9333
  StyledMenuLabel,
9389
9334
  {
9390
9335
  asChild: true,
9391
9336
  ...props,
9392
- children: /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(
9337
+ children: /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(
9393
9338
  Heading,
9394
9339
  {
9395
9340
  renderAs: "span",
@@ -9405,16 +9350,16 @@ MenuLabel.displayName = "MenuLabel";
9405
9350
 
9406
9351
  // src/components/Menu/SubMenu.tsx
9407
9352
  var import_react36 = require("react");
9408
- var import_styled_components55 = __toESM(require("styled-components"));
9353
+ var import_styled_components54 = __toESM(require("styled-components"));
9409
9354
  var import_react_dropdown_menu3 = require("@radix-ui/react-dropdown-menu");
9410
- var import_type_guards32 = require("@wistia/type-guards");
9355
+ var import_type_guards31 = require("@wistia/type-guards");
9411
9356
 
9412
9357
  // src/components/Menu/MenuItemButton.tsx
9413
9358
  var import_react35 = require("react");
9414
- var import_styled_components53 = __toESM(require("styled-components"));
9415
- var import_type_guards31 = require("@wistia/type-guards");
9416
- var import_jsx_runtime226 = require("react/jsx-runtime");
9417
- var StyledButton3 = (0, import_styled_components53.default)(Button)`
9359
+ var import_styled_components52 = __toESM(require("styled-components"));
9360
+ var import_type_guards30 = require("@wistia/type-guards");
9361
+ var import_jsx_runtime225 = require("react/jsx-runtime");
9362
+ var StyledButton3 = (0, import_styled_components52.default)(Button)`
9418
9363
  ${({ colorScheme }) => getColorScheme(colorScheme)};
9419
9364
 
9420
9365
  display: flex;
@@ -9453,7 +9398,7 @@ var StyledButton3 = (0, import_styled_components53.default)(Button)`
9453
9398
  padding-left: var(--wui-space-04);
9454
9399
  }
9455
9400
  `;
9456
- var StyledLeftIconContainer = import_styled_components53.default.div`
9401
+ var StyledLeftIconContainer = import_styled_components52.default.div`
9457
9402
  height: var(--menu-item-left-icon-size);
9458
9403
  width: var(--menu-item-left-icon-size);
9459
9404
 
@@ -9464,7 +9409,7 @@ var StyledLeftIconContainer = import_styled_components53.default.div`
9464
9409
  }
9465
9410
  }
9466
9411
  `;
9467
- var StyledRightIconContainer = import_styled_components53.default.div`
9412
+ var StyledRightIconContainer = import_styled_components52.default.div`
9468
9413
  height: var(--menu-item-right-icon-size);
9469
9414
  width: var(--menu-item-right-icon-size);
9470
9415
 
@@ -9475,13 +9420,13 @@ var StyledRightIconContainer = import_styled_components53.default.div`
9475
9420
  }
9476
9421
  }
9477
9422
  `;
9478
- var StyledLabelAndDescriptionContainer = import_styled_components53.default.div`
9423
+ var StyledLabelAndDescriptionContainer = import_styled_components52.default.div`
9479
9424
  display: flex;
9480
9425
  flex-direction: column;
9481
9426
  gap: var(--menu-label-description-gap);
9482
9427
  flex-basis: 100%;
9483
9428
  `;
9484
- var StyledBadgeContainer = import_styled_components53.default.div`
9429
+ var StyledBadgeContainer = import_styled_components52.default.div`
9485
9430
  align-self: start;
9486
9431
  justify-self: end;
9487
9432
  font-size: var(--wui-typography-label-4-size);
@@ -9490,13 +9435,13 @@ var StyledBadgeContainer = import_styled_components53.default.div`
9490
9435
  var MenuItemButton = (0, import_react35.forwardRef)(({ children, appearance, command, icon, ...props }, ref) => {
9491
9436
  let { colorScheme, badge } = props;
9492
9437
  if (appearance === "dangerous") {
9493
- if ((0, import_type_guards31.isNotUndefined)(colorScheme)) {
9438
+ if ((0, import_type_guards30.isNotUndefined)(colorScheme)) {
9494
9439
  console.warn("colorScheme prop is ignored when appearance is dangerous");
9495
9440
  }
9496
9441
  colorScheme = "error";
9497
9442
  }
9498
9443
  if (appearance === "gated") {
9499
- badge = /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(
9444
+ badge = /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(
9500
9445
  Icon,
9501
9446
  {
9502
9447
  colorScheme: "purple",
@@ -9508,7 +9453,7 @@ var MenuItemButton = (0, import_react35.forwardRef)(({ children, appearance, com
9508
9453
  }
9509
9454
  );
9510
9455
  }
9511
- return /* @__PURE__ */ (0, import_jsx_runtime226.jsxs)(
9456
+ return /* @__PURE__ */ (0, import_jsx_runtime225.jsxs)(
9512
9457
  StyledButton3,
9513
9458
  {
9514
9459
  ...props,
@@ -9518,10 +9463,10 @@ var MenuItemButton = (0, import_react35.forwardRef)(({ children, appearance, com
9518
9463
  fullWidth: true,
9519
9464
  unstyled: true,
9520
9465
  children: [
9521
- props.leftIcon ? /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(StyledLeftIconContainer, { children: props.leftIcon }) : null,
9522
- /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(StyledLabelAndDescriptionContainer, { children }),
9523
- (0, import_type_guards31.isNotNil)(badge) || (0, import_type_guards31.isNotNil)(command) ? /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(StyledBadgeContainer, { children: badge ?? command }) : null,
9524
- props.rightIcon ? /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(StyledRightIconContainer, { children: props.rightIcon }) : null
9466
+ props.leftIcon ? /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(StyledLeftIconContainer, { children: props.leftIcon }) : null,
9467
+ /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(StyledLabelAndDescriptionContainer, { children }),
9468
+ (0, import_type_guards30.isNotNil)(badge) || (0, import_type_guards30.isNotNil)(command) ? /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(StyledBadgeContainer, { children: badge ?? command }) : null,
9469
+ props.rightIcon ? /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(StyledRightIconContainer, { children: props.rightIcon }) : null
9525
9470
  ]
9526
9471
  }
9527
9472
  );
@@ -9529,33 +9474,33 @@ var MenuItemButton = (0, import_react35.forwardRef)(({ children, appearance, com
9529
9474
  MenuItemButton.displayName = "MenuItemButton";
9530
9475
 
9531
9476
  // src/components/Menu/MenuItemLabelDescription.tsx
9532
- var import_styled_components54 = __toESM(require("styled-components"));
9533
- var import_jsx_runtime227 = require("react/jsx-runtime");
9534
- var StyledMenuItemLabel = import_styled_components54.default.span``;
9535
- var StyledMenuItemDescription = (0, import_styled_components54.default)(Text).attrs({
9477
+ var import_styled_components53 = __toESM(require("styled-components"));
9478
+ var import_jsx_runtime226 = require("react/jsx-runtime");
9479
+ var StyledMenuItemLabel = import_styled_components53.default.span``;
9480
+ var StyledMenuItemDescription = (0, import_styled_components53.default)(Text).attrs({
9536
9481
  variant: "body4",
9537
9482
  prominence: "secondary"
9538
9483
  })``;
9539
9484
  var MenuItemLabel = ({ children }) => {
9540
- return /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(StyledMenuItemLabel, { children });
9485
+ return /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(StyledMenuItemLabel, { children });
9541
9486
  };
9542
9487
  var MenuItemDescription = ({ children }) => {
9543
- return /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(StyledMenuItemDescription, { children });
9488
+ return /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(StyledMenuItemDescription, { children });
9544
9489
  };
9545
9490
 
9546
9491
  // src/components/Menu/SubMenu.tsx
9547
- var import_jsx_runtime228 = require("react/jsx-runtime");
9548
- var SubMenuContent = (0, import_styled_components55.default)(import_react_dropdown_menu3.DropdownMenuSubContent)`
9492
+ var import_jsx_runtime227 = require("react/jsx-runtime");
9493
+ var SubMenuContent = (0, import_styled_components54.default)(import_react_dropdown_menu3.DropdownMenuSubContent)`
9549
9494
  ${menuContentCss}
9550
9495
 
9551
9496
  ${mq.smAndDown} {
9552
9497
  transform: translateX(-100%) !important;
9553
9498
  }
9554
9499
  `;
9555
- var StyledMobileSubMenuItems = import_styled_components55.default.div`
9500
+ var StyledMobileSubMenuItems = import_styled_components54.default.div`
9556
9501
  margin-left: var(--wui-space-04);
9557
9502
  `;
9558
- var StyledSubTrigger = (0, import_styled_components55.default)(import_react_dropdown_menu3.DropdownMenuSubTrigger)`
9503
+ var StyledSubTrigger = (0, import_styled_components54.default)(import_react_dropdown_menu3.DropdownMenuSubTrigger)`
9559
9504
  outline: none;
9560
9505
 
9561
9506
  &[data-state='open'],
@@ -9566,11 +9511,11 @@ var StyledSubTrigger = (0, import_styled_components55.default)(import_react_drop
9566
9511
  var SubMenuTrigger = (props) => {
9567
9512
  const { isSmAndUp } = useMq();
9568
9513
  const Trigger4 = isSmAndUp ? StyledSubTrigger : import_react_dropdown_menu3.DropdownMenuItem;
9569
- return /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(Trigger4, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(
9514
+ return /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(Trigger4, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(
9570
9515
  MenuItemButton,
9571
9516
  {
9572
9517
  ...props,
9573
- rightIcon: /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(Icon, { type: "caret-right" })
9518
+ rightIcon: /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(Icon, { type: "caret-right" })
9574
9519
  }
9575
9520
  ) });
9576
9521
  };
@@ -9584,14 +9529,14 @@ var SubMenu = ({
9584
9529
  const { isSmAndUp } = useMq();
9585
9530
  const [isExpanded, setIsExpanded] = (0, import_react36.useState)(false);
9586
9531
  const { compact } = useMenuContext();
9587
- return isSmAndUp ? /* @__PURE__ */ (0, import_jsx_runtime228.jsxs)(import_react_dropdown_menu3.DropdownMenuSub, { onOpenChange, children: [
9588
- /* @__PURE__ */ (0, import_jsx_runtime228.jsxs)(SubMenuTrigger, { ...props, children: [
9589
- /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(MenuItemLabel, { children: label }),
9590
- (0, import_type_guards32.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(MenuItemDescription, { children: description }) : null
9532
+ return isSmAndUp ? /* @__PURE__ */ (0, import_jsx_runtime227.jsxs)(import_react_dropdown_menu3.DropdownMenuSub, { onOpenChange, children: [
9533
+ /* @__PURE__ */ (0, import_jsx_runtime227.jsxs)(SubMenuTrigger, { ...props, children: [
9534
+ /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(MenuItemLabel, { children: label }),
9535
+ (0, import_type_guards31.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(MenuItemDescription, { children: description }) : null
9591
9536
  ] }),
9592
- /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(import_react_dropdown_menu3.DropdownMenuPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(SubMenuContent, { $compact: compact, children }) })
9593
- ] }) : /* @__PURE__ */ (0, import_jsx_runtime228.jsxs)(import_react_dropdown_menu3.DropdownMenuGroup, { children: [
9594
- /* @__PURE__ */ (0, import_jsx_runtime228.jsxs)(
9537
+ /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(import_react_dropdown_menu3.DropdownMenuPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(SubMenuContent, { $compact: compact, children }) })
9538
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime227.jsxs)(import_react_dropdown_menu3.DropdownMenuGroup, { children: [
9539
+ /* @__PURE__ */ (0, import_jsx_runtime227.jsxs)(
9595
9540
  SubMenuTrigger,
9596
9541
  {
9597
9542
  ...props,
@@ -9600,12 +9545,12 @@ var SubMenu = ({
9600
9545
  setIsExpanded((prev) => !prev);
9601
9546
  },
9602
9547
  children: [
9603
- /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(MenuItemLabel, { children: label }),
9604
- /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(MenuItemDescription, { children: description })
9548
+ /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(MenuItemLabel, { children: label }),
9549
+ /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(MenuItemDescription, { children: description })
9605
9550
  ]
9606
9551
  }
9607
9552
  ),
9608
- /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(StyledMobileSubMenuItems, { children: isExpanded ? children : null })
9553
+ /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(StyledMobileSubMenuItems, { children: isExpanded ? children : null })
9609
9554
  ] });
9610
9555
  };
9611
9556
  SubMenu.displayName = "SubMenu";
@@ -9613,15 +9558,15 @@ SubMenu.displayName = "SubMenu";
9613
9558
  // src/components/Menu/MenuItem.tsx
9614
9559
  var import_react37 = require("react");
9615
9560
  var import_react_dropdown_menu4 = require("@radix-ui/react-dropdown-menu");
9616
- var import_jsx_runtime229 = require("react/jsx-runtime");
9561
+ var import_jsx_runtime228 = require("react/jsx-runtime");
9617
9562
  var MenuItem = (0, import_react37.forwardRef)(
9618
9563
  ({ onSelect = () => null, ...props }, ref) => {
9619
- return /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(
9564
+ return /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(
9620
9565
  import_react_dropdown_menu4.DropdownMenuItem,
9621
9566
  {
9622
9567
  asChild: true,
9623
9568
  onSelect,
9624
- children: /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(
9569
+ children: /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(
9625
9570
  MenuItemButton,
9626
9571
  {
9627
9572
  ...props,
@@ -9637,10 +9582,10 @@ MenuItem.displayName = "MenuItem";
9637
9582
 
9638
9583
  // src/components/Menu/MenuRadioGroup.tsx
9639
9584
  var import_react_dropdown_menu5 = require("@radix-ui/react-dropdown-menu");
9640
- var import_jsx_runtime230 = require("react/jsx-runtime");
9585
+ var import_jsx_runtime229 = require("react/jsx-runtime");
9641
9586
  var MenuRadioGroup = ({ children, label, ...props }) => {
9642
- return /* @__PURE__ */ (0, import_jsx_runtime230.jsxs)(import_react_dropdown_menu5.DropdownMenuRadioGroup, { ...props, children: [
9643
- /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(MenuLabel, { children: label }),
9587
+ return /* @__PURE__ */ (0, import_jsx_runtime229.jsxs)(import_react_dropdown_menu5.DropdownMenuRadioGroup, { ...props, children: [
9588
+ /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(MenuLabel, { children: label }),
9644
9589
  children
9645
9590
  ] });
9646
9591
  };
@@ -9648,11 +9593,11 @@ MenuRadioGroup.displayName = "MenuRadioGroup";
9648
9593
 
9649
9594
  // src/components/Menu/RadioMenuItem.tsx
9650
9595
  var import_react_dropdown_menu6 = require("@radix-ui/react-dropdown-menu");
9651
- var import_jsx_runtime231 = require("react/jsx-runtime");
9596
+ var import_jsx_runtime230 = require("react/jsx-runtime");
9652
9597
  var RadioMenuItem = ({
9653
9598
  onSelect,
9654
9599
  value,
9655
- indicator = /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(
9600
+ indicator = /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(
9656
9601
  Icon,
9657
9602
  {
9658
9603
  size: "sm",
@@ -9662,17 +9607,17 @@ var RadioMenuItem = ({
9662
9607
  ...props
9663
9608
  }) => {
9664
9609
  const extraProps = onSelect ? { onSelect } : {};
9665
- return /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(
9610
+ return /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(
9666
9611
  import_react_dropdown_menu6.DropdownMenuRadioItem,
9667
9612
  {
9668
9613
  ...extraProps,
9669
9614
  asChild: true,
9670
9615
  value,
9671
- children: /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(
9616
+ children: /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(
9672
9617
  MenuItemButton,
9673
9618
  {
9674
9619
  ...props,
9675
- rightIcon: /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(import_react_dropdown_menu6.DropdownMenuItemIndicator, { children: indicator })
9620
+ rightIcon: /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(import_react_dropdown_menu6.DropdownMenuItemIndicator, { children: indicator })
9676
9621
  }
9677
9622
  )
9678
9623
  }
@@ -9682,9 +9627,9 @@ RadioMenuItem.displayName = "RadioMenuItem";
9682
9627
 
9683
9628
  // src/components/Menu/CheckboxMenuItem.tsx
9684
9629
  var import_react_dropdown_menu7 = require("@radix-ui/react-dropdown-menu");
9685
- var import_jsx_runtime232 = require("react/jsx-runtime");
9630
+ var import_jsx_runtime231 = require("react/jsx-runtime");
9686
9631
  var CheckboxIndicator2 = ({ checked, ...props }) => {
9687
- return checked ? /* @__PURE__ */ (0, import_jsx_runtime232.jsxs)(
9632
+ return checked ? /* @__PURE__ */ (0, import_jsx_runtime231.jsxs)(
9688
9633
  "svg",
9689
9634
  {
9690
9635
  ...props,
@@ -9694,14 +9639,14 @@ var CheckboxIndicator2 = ({ checked, ...props }) => {
9694
9639
  width: "24",
9695
9640
  xmlns: "http://www.w3.org/2000/svg",
9696
9641
  children: [
9697
- /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(
9642
+ /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(
9698
9643
  "path",
9699
9644
  {
9700
9645
  d: "m4 8c0-2.20914 1.79086-4 4-4h8c2.2091 0 4 1.79086 4 4v8c0 2.2091-1.7909 4-4 4h-8c-2.20914 0-4-1.7909-4-4z",
9701
9646
  fill: "#2949e5"
9702
9647
  }
9703
9648
  ),
9704
- /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(
9649
+ /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(
9705
9650
  "path",
9706
9651
  {
9707
9652
  d: "m10.4728 15.1931-3.09523-3.1131c-.18596-.187-.18596-.4902 0-.6773l.67341-.6773c.18596-.187.48749-.187.67344 0l2.08508 2.0971 4.4661-4.49174c.1859-.18703.4875-.18703.6734 0l.6734.67731c.186.18703.186.49027 0 .67731l-5.4762 5.50772c-.1859.187-.4874.187-.6734 0z",
@@ -9710,7 +9655,7 @@ var CheckboxIndicator2 = ({ checked, ...props }) => {
9710
9655
  )
9711
9656
  ]
9712
9657
  }
9713
- ) : /* @__PURE__ */ (0, import_jsx_runtime232.jsxs)(
9658
+ ) : /* @__PURE__ */ (0, import_jsx_runtime231.jsxs)(
9714
9659
  "svg",
9715
9660
  {
9716
9661
  ...props,
@@ -9720,14 +9665,14 @@ var CheckboxIndicator2 = ({ checked, ...props }) => {
9720
9665
  width: "24",
9721
9666
  xmlns: "http://www.w3.org/2000/svg",
9722
9667
  children: [
9723
- /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(
9668
+ /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(
9724
9669
  "path",
9725
9670
  {
9726
9671
  d: "m8 4.5h8c1.933 0 3.5 1.567 3.5 3.5v8c0 1.933-1.567 3.5-3.5 3.5h-8c-1.933 0-3.5-1.567-3.5-3.5v-8c0-1.933 1.567-3.5 3.5-3.5z",
9727
9672
  fill: "#fcfcfd"
9728
9673
  }
9729
9674
  ),
9730
- /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(
9675
+ /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(
9731
9676
  "path",
9732
9677
  {
9733
9678
  d: "m8 4.5h8c1.933 0 3.5 1.567 3.5 3.5v8c0 1.933-1.567 3.5-3.5 3.5h-8c-1.933 0-3.5-1.567-3.5-3.5v-8c0-1.933 1.567-3.5 3.5-3.5z",
@@ -9744,18 +9689,18 @@ var CheckboxMenuItem = ({
9744
9689
  onCheckedChange,
9745
9690
  ...props
9746
9691
  }) => {
9747
- return /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(
9692
+ return /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(
9748
9693
  import_react_dropdown_menu7.DropdownMenuCheckboxItem,
9749
9694
  {
9750
9695
  asChild: true,
9751
9696
  checked,
9752
9697
  onCheckedChange,
9753
9698
  onSelect,
9754
- children: /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(
9699
+ children: /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(
9755
9700
  MenuItemButton,
9756
9701
  {
9757
9702
  ...props,
9758
- leftIcon: /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(CheckboxIndicator2, { checked })
9703
+ leftIcon: /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(CheckboxIndicator2, { checked })
9759
9704
  }
9760
9705
  )
9761
9706
  }
@@ -9765,36 +9710,36 @@ CheckboxMenuItem.displayName = "CheckboxMenuItem";
9765
9710
 
9766
9711
  // src/components/Modal/Modal.tsx
9767
9712
  var import_react41 = require("react");
9768
- var import_styled_components60 = __toESM(require("styled-components"));
9713
+ var import_styled_components59 = __toESM(require("styled-components"));
9769
9714
  var import_react_dialog4 = require("@radix-ui/react-dialog");
9770
- var import_type_guards34 = require("@wistia/type-guards");
9715
+ var import_type_guards33 = require("@wistia/type-guards");
9771
9716
 
9772
9717
  // src/components/Modal/ModalHeader.tsx
9773
- var import_styled_components57 = __toESM(require("styled-components"));
9718
+ var import_styled_components56 = __toESM(require("styled-components"));
9774
9719
  var import_react_dialog2 = require("@radix-ui/react-dialog");
9775
9720
 
9776
9721
  // src/components/Modal/ModalCloseButton.tsx
9777
- var import_styled_components56 = __toESM(require("styled-components"));
9722
+ var import_styled_components55 = __toESM(require("styled-components"));
9778
9723
  var import_react_dialog = require("@radix-ui/react-dialog");
9779
- var import_jsx_runtime233 = require("react/jsx-runtime");
9780
- var CloseButton = (0, import_styled_components56.default)(import_react_dialog.Close)`
9724
+ var import_jsx_runtime232 = require("react/jsx-runtime");
9725
+ var CloseButton = (0, import_styled_components55.default)(import_react_dialog.Close)`
9781
9726
  align-self: start;
9782
9727
  `;
9783
9728
  var ModalCloseButton = () => {
9784
- return /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(CloseButton, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(
9729
+ return /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(CloseButton, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(
9785
9730
  IconButton,
9786
9731
  {
9787
9732
  label: "Dismiss modal",
9788
9733
  size: "sm",
9789
9734
  variant: "ghost",
9790
- children: /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(Icon, { type: "close" })
9735
+ children: /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(Icon, { type: "close" })
9791
9736
  }
9792
9737
  ) });
9793
9738
  };
9794
9739
 
9795
9740
  // src/components/Modal/ModalHeader.tsx
9796
- var import_jsx_runtime234 = require("react/jsx-runtime");
9797
- var Header = import_styled_components57.default.header`
9741
+ var import_jsx_runtime233 = require("react/jsx-runtime");
9742
+ var Header = import_styled_components56.default.header`
9798
9743
  display: flex;
9799
9744
  order: 1;
9800
9745
  gap: var(--wui-space-01);
@@ -9806,7 +9751,7 @@ var Header = import_styled_components57.default.header`
9806
9751
  margin-top: 0;
9807
9752
  }
9808
9753
  `;
9809
- var Title = (0, import_styled_components57.default)(import_react_dialog2.Title)`
9754
+ var Title = (0, import_styled_components56.default)(import_react_dialog2.Title)`
9810
9755
  font-family: var(--wui-typography-heading-2-family);
9811
9756
  line-height: var(--wui-typography-heading-2-line-height);
9812
9757
  font-size: var(--wui-typography-heading-2-size);
@@ -9818,20 +9763,20 @@ var ModalHeader = ({
9818
9763
  hideCloseButton
9819
9764
  }) => {
9820
9765
  const TitleWrapper = hideTitle ? ScreenReaderOnly : Title;
9821
- return /* @__PURE__ */ (0, import_jsx_runtime234.jsxs)(Header, { children: [
9822
- /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(TitleWrapper, { children: title }),
9823
- hideCloseButton ? null : /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(ModalCloseButton, {})
9766
+ return /* @__PURE__ */ (0, import_jsx_runtime233.jsxs)(Header, { children: [
9767
+ /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(TitleWrapper, { children: title }),
9768
+ hideCloseButton ? null : /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(ModalCloseButton, {})
9824
9769
  ] });
9825
9770
  };
9826
9771
 
9827
9772
  // src/components/Modal/ModalContent.tsx
9828
9773
  var import_react39 = require("react");
9829
- var import_styled_components58 = __toESM(require("styled-components"));
9774
+ var import_styled_components57 = __toESM(require("styled-components"));
9830
9775
  var import_react_dialog3 = require("@radix-ui/react-dialog");
9831
9776
 
9832
9777
  // src/private/hooks/useFocusRestore/useFocusRestore.ts
9833
9778
  var import_react38 = require("react");
9834
- var import_type_guards33 = require("@wistia/type-guards");
9779
+ var import_type_guards32 = require("@wistia/type-guards");
9835
9780
  var useFocusRestore = () => {
9836
9781
  const previouslyFocusedRef = (0, import_react38.useRef)(null);
9837
9782
  (0, import_react38.useEffect)(() => {
@@ -9839,7 +9784,7 @@ var useFocusRestore = () => {
9839
9784
  }, []);
9840
9785
  (0, import_react38.useEffect)(() => {
9841
9786
  return () => {
9842
- if ((0, import_type_guards33.isNotNil)(previouslyFocusedRef.current)) {
9787
+ if ((0, import_type_guards32.isNotNil)(previouslyFocusedRef.current)) {
9843
9788
  setTimeout(() => {
9844
9789
  previouslyFocusedRef.current?.focus();
9845
9790
  }, 0);
@@ -9849,8 +9794,8 @@ var useFocusRestore = () => {
9849
9794
  };
9850
9795
 
9851
9796
  // src/components/Modal/ModalContent.tsx
9852
- var import_jsx_runtime235 = require("react/jsx-runtime");
9853
- var StyledModalContent = (0, import_styled_components58.default)(import_react_dialog3.Content)`
9797
+ var import_jsx_runtime234 = require("react/jsx-runtime");
9798
+ var StyledModalContent = (0, import_styled_components57.default)(import_react_dialog3.Content)`
9854
9799
  background-color: var(--wui-color-bg-app);
9855
9800
  box-sizing: border-box;
9856
9801
  display: flex;
@@ -9894,7 +9839,7 @@ var StyledModalContent = (0, import_styled_components58.default)(import_react_di
9894
9839
  var ModalContent = (0, import_react39.forwardRef)(
9895
9840
  ({ fullHeight, width, children, ...otherProps }, ref) => {
9896
9841
  useFocusRestore();
9897
- return /* @__PURE__ */ (0, import_jsx_runtime235.jsx)(
9842
+ return /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(
9898
9843
  StyledModalContent,
9899
9844
  {
9900
9845
  ref,
@@ -9910,8 +9855,8 @@ var ModalContent = (0, import_react39.forwardRef)(
9910
9855
 
9911
9856
  // src/private/components/Backdrop/Backdrop.tsx
9912
9857
  var import_react40 = require("react");
9913
- var import_styled_components59 = __toESM(require("styled-components"));
9914
- var import_jsx_runtime236 = require("react/jsx-runtime");
9858
+ var import_styled_components58 = __toESM(require("styled-components"));
9859
+ var import_jsx_runtime235 = require("react/jsx-runtime");
9915
9860
  var backdropAnimationDuration = 150;
9916
9861
  var alignVerticalMap = {
9917
9862
  stretch: "normal",
@@ -9924,7 +9869,7 @@ var alignHorizontalMap = {
9924
9869
  center: "center",
9925
9870
  right: "end"
9926
9871
  };
9927
- var BackdropComponent = import_styled_components59.default.div`
9872
+ var BackdropComponent = import_styled_components58.default.div`
9928
9873
  align-items: ${({ $alignVertical }) => alignVerticalMap[$alignVertical]};
9929
9874
  animation-name: backdropShow;
9930
9875
  animation-duration: ${() => `${backdropAnimationDuration}ms`};
@@ -9948,7 +9893,7 @@ var BackdropComponent = import_styled_components59.default.div`
9948
9893
  }
9949
9894
  `;
9950
9895
  var Backdrop = (0, import_react40.forwardRef)(
9951
- ({ alignHorizontal = "center", alignVertical = "center", children, ...otherProps }, ref) => /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(
9896
+ ({ alignHorizontal = "center", alignVertical = "center", children, ...otherProps }, ref) => /* @__PURE__ */ (0, import_jsx_runtime235.jsx)(
9952
9897
  BackdropComponent,
9953
9898
  {
9954
9899
  ref,
@@ -9962,9 +9907,9 @@ var Backdrop = (0, import_react40.forwardRef)(
9962
9907
  Backdrop.displayName = "Backdrop";
9963
9908
 
9964
9909
  // src/components/Modal/Modal.tsx
9965
- var import_jsx_runtime237 = require("react/jsx-runtime");
9910
+ var import_jsx_runtime236 = require("react/jsx-runtime");
9966
9911
  var DEFAULT_MODAL_WIDTH = "532px";
9967
- var ModalBody = import_styled_components60.default.div`
9912
+ var ModalBody = import_styled_components59.default.div`
9968
9913
  flex-direction: column;
9969
9914
  display: flex;
9970
9915
  order: 2;
@@ -9982,24 +9927,24 @@ var Modal = (0, import_react41.forwardRef)(
9982
9927
  width = DEFAULT_MODAL_WIDTH,
9983
9928
  ...props
9984
9929
  }, ref) => {
9985
- return /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(
9930
+ return /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(
9986
9931
  import_react_dialog4.Root,
9987
9932
  {
9988
9933
  onOpenChange: (open2) => {
9989
- if (!open2 && (0, import_type_guards34.isNotNil)(onRequestClose)) {
9934
+ if (!open2 && (0, import_type_guards33.isNotNil)(onRequestClose)) {
9990
9935
  onRequestClose();
9991
9936
  }
9992
9937
  },
9993
9938
  open: isOpen,
9994
- children: /* @__PURE__ */ (0, import_jsx_runtime237.jsxs)(import_react_dialog4.Portal, { children: [
9995
- /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(Backdrop, {}),
9996
- /* @__PURE__ */ (0, import_jsx_runtime237.jsxs)(
9939
+ children: /* @__PURE__ */ (0, import_jsx_runtime236.jsxs)(import_react_dialog4.Portal, { children: [
9940
+ /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(Backdrop, {}),
9941
+ /* @__PURE__ */ (0, import_jsx_runtime236.jsxs)(
9997
9942
  ModalContent,
9998
9943
  {
9999
9944
  ref,
10000
9945
  fullHeight,
10001
9946
  onOpenAutoFocus: (event) => {
10002
- if ((0, import_type_guards34.isNotNil)(initialFocusRef) && initialFocusRef.current) {
9947
+ if ((0, import_type_guards33.isNotNil)(initialFocusRef) && initialFocusRef.current) {
10003
9948
  event.preventDefault();
10004
9949
  requestAnimationFrame(() => {
10005
9950
  initialFocusRef.current?.focus();
@@ -10009,8 +9954,8 @@ var Modal = (0, import_react41.forwardRef)(
10009
9954
  width,
10010
9955
  ...props,
10011
9956
  children: [
10012
- /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(ModalBody, { children }),
10013
- /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(
9957
+ /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(ModalBody, { children }),
9958
+ /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(
10014
9959
  ModalHeader,
10015
9960
  {
10016
9961
  hideCloseButton,
@@ -10030,17 +9975,17 @@ Modal.displayName = "Modal";
10030
9975
 
10031
9976
  // src/components/Popover/Popover.tsx
10032
9977
  var import_react_popover = require("@radix-ui/react-popover");
10033
- var import_styled_components61 = __toESM(require("styled-components"));
9978
+ var import_styled_components60 = __toESM(require("styled-components"));
10034
9979
 
10035
9980
  // src/private/helpers/getControls/getControlProps.tsx
10036
- var import_type_guards35 = require("@wistia/type-guards");
9981
+ var import_type_guards34 = require("@wistia/type-guards");
10037
9982
  var getControlProps = (isOpen, onOpenChange) => {
10038
- return (0, import_type_guards35.isNotNil)(onOpenChange) && (0, import_type_guards35.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {};
9983
+ return (0, import_type_guards34.isNotNil)(onOpenChange) && (0, import_type_guards34.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {};
10039
9984
  };
10040
9985
 
10041
9986
  // src/components/Popover/Popover.tsx
10042
- var import_jsx_runtime238 = require("react/jsx-runtime");
10043
- var StyledContent2 = (0, import_styled_components61.default)(import_react_popover.Content)`
9987
+ var import_jsx_runtime237 = require("react/jsx-runtime");
9988
+ var StyledContent2 = (0, import_styled_components60.default)(import_react_popover.Content)`
10044
9989
  border-radius: var(--wui-border-radius-02);
10045
9990
  padding: var(--wui-space-04);
10046
9991
  max-width: 320px;
@@ -10054,7 +9999,7 @@ var StyledContent2 = (0, import_styled_components61.default)(import_react_popove
10054
9999
  right: var(--wui-space-02);
10055
10000
  }
10056
10001
  `;
10057
- var StyledArrow = (0, import_styled_components61.default)(import_react_popover.Arrow)`
10002
+ var StyledArrow = (0, import_styled_components60.default)(import_react_popover.Arrow)`
10058
10003
  fill: white;
10059
10004
  display: none;
10060
10005
  `;
@@ -10066,25 +10011,25 @@ var Popover = ({
10066
10011
  onOpenChange,
10067
10012
  ...props
10068
10013
  }) => {
10069
- return /* @__PURE__ */ (0, import_jsx_runtime238.jsxs)(import_react_popover.Root, { ...getControlProps(isOpen, onOpenChange), children: [
10070
- /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(import_react_popover.Trigger, { asChild: true, children: trigger }),
10071
- /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(import_react_popover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime238.jsxs)(
10014
+ return /* @__PURE__ */ (0, import_jsx_runtime237.jsxs)(import_react_popover.Root, { ...getControlProps(isOpen, onOpenChange), children: [
10015
+ /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(import_react_popover.Trigger, { asChild: true, children: trigger }),
10016
+ /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(import_react_popover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime237.jsxs)(
10072
10017
  StyledContent2,
10073
10018
  {
10074
10019
  sideOffset: 5,
10075
10020
  ...props,
10076
10021
  children: [
10077
- /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(StyledArrow, {}),
10078
- !hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(import_react_popover.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(
10022
+ /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(StyledArrow, {}),
10023
+ !hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(import_react_popover.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(
10079
10024
  IconButton,
10080
10025
  {
10081
10026
  "data-wui-popover-close": true,
10082
10027
  label: "Close",
10083
10028
  variant: "ghost",
10084
- children: /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(Icon, { type: "close" })
10029
+ children: /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(Icon, { type: "close" })
10085
10030
  }
10086
10031
  ) }),
10087
- /* @__PURE__ */ (0, import_jsx_runtime238.jsx)("div", { children })
10032
+ /* @__PURE__ */ (0, import_jsx_runtime237.jsx)("div", { children })
10088
10033
  ]
10089
10034
  }
10090
10035
  ) })
@@ -10094,15 +10039,15 @@ Popover.displayName = "Popover";
10094
10039
 
10095
10040
  // src/components/Radio/Radio.tsx
10096
10041
  var import_react42 = require("react");
10097
- var import_styled_components62 = __toESM(require("styled-components"));
10098
- var import_type_guards36 = require("@wistia/type-guards");
10099
- var import_jsx_runtime239 = require("react/jsx-runtime");
10100
- var StyledLabelWrapper2 = import_styled_components62.default.div`
10042
+ var import_styled_components61 = __toESM(require("styled-components"));
10043
+ var import_type_guards35 = require("@wistia/type-guards");
10044
+ var import_jsx_runtime238 = require("react/jsx-runtime");
10045
+ var StyledLabelWrapper2 = import_styled_components61.default.div`
10101
10046
  display: flex;
10102
10047
  flex-direction: column;
10103
10048
  padding-left: var(--wui-space-02);
10104
10049
  `;
10105
- var StyledRadio = import_styled_components62.default.input`
10050
+ var StyledRadio = import_styled_components61.default.input`
10106
10051
  box-shadow: ${({ type }) => type === "checkbox" ? "inset 0 0.5px 1.5px 0 rgba(0, 0, 0, 0.38)" : "none"};
10107
10052
  appearance: none;
10108
10053
  margin: 0;
@@ -10128,11 +10073,11 @@ var StyledRadio = import_styled_components62.default.input`
10128
10073
  transform: scale(1);
10129
10074
  }
10130
10075
  `;
10131
- var disabledStyle2 = import_styled_components62.css`
10076
+ var disabledStyle2 = import_styled_components61.css`
10132
10077
  cursor: not-allowed;
10133
10078
  opacity: 0.5;
10134
10079
  `;
10135
- var errorStyle = import_styled_components62.css`
10080
+ var errorStyle = import_styled_components61.css`
10136
10081
  /* TODO Lamp to design error state */
10137
10082
  &:hover,
10138
10083
  &:focus,
@@ -10140,11 +10085,11 @@ var errorStyle = import_styled_components62.css`
10140
10085
  border-color: transparent !important;
10141
10086
  }
10142
10087
  `;
10143
- var defaultHoverStyle = import_styled_components62.css`
10088
+ var defaultHoverStyle = import_styled_components61.css`
10144
10089
  /* TODO Lamp to design hover state */
10145
10090
  cursor: pointer;
10146
10091
  `;
10147
- var StyledRadioWrapper = import_styled_components62.default.div`
10092
+ var StyledRadioWrapper = import_styled_components61.default.div`
10148
10093
  align-items: baseline;
10149
10094
  border: 1px solid transparent;
10150
10095
  border-radius: 4px;
@@ -10181,14 +10126,14 @@ var Radio = (0, import_react42.forwardRef)(
10181
10126
  ...otherProps
10182
10127
  }, ref) => {
10183
10128
  const generatedId = (0, import_react42.useId)();
10184
- const computedId = (0, import_type_guards36.isNonEmptyString)(id) ? id : `ui-radio-${generatedId}`;
10185
- return /* @__PURE__ */ (0, import_jsx_runtime239.jsxs)(
10129
+ const computedId = (0, import_type_guards35.isNonEmptyString)(id) ? id : `ui-radio-${generatedId}`;
10130
+ return /* @__PURE__ */ (0, import_jsx_runtime238.jsxs)(
10186
10131
  StyledRadioWrapper,
10187
10132
  {
10188
10133
  "aria-invalid": otherProps["aria-invalid"],
10189
10134
  disabled,
10190
10135
  children: [
10191
- /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(
10136
+ /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(
10192
10137
  StyledRadio,
10193
10138
  {
10194
10139
  ref,
@@ -10203,8 +10148,8 @@ var Radio = (0, import_react42.forwardRef)(
10203
10148
  ...otherProps
10204
10149
  }
10205
10150
  ),
10206
- /* @__PURE__ */ (0, import_jsx_runtime239.jsxs)(StyledLabelWrapper2, { children: [
10207
- /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(
10151
+ /* @__PURE__ */ (0, import_jsx_runtime238.jsxs)(StyledLabelWrapper2, { children: [
10152
+ /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(
10208
10153
  Label,
10209
10154
  {
10210
10155
  disabled,
@@ -10213,7 +10158,7 @@ var Radio = (0, import_react42.forwardRef)(
10213
10158
  children: label
10214
10159
  }
10215
10160
  ),
10216
- /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(LabelDescription, { children: description })
10161
+ /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(LabelDescription, { children: description })
10217
10162
  ] })
10218
10163
  ]
10219
10164
  }
@@ -10224,13 +10169,13 @@ Radio.displayName = "Radio";
10224
10169
 
10225
10170
  // src/components/SegmentedControl/SegmentedControl.tsx
10226
10171
  var import_react46 = require("react");
10227
- var import_styled_components64 = __toESM(require("styled-components"));
10172
+ var import_styled_components63 = __toESM(require("styled-components"));
10228
10173
  var import_react_toggle_group = require("@radix-ui/react-toggle-group");
10229
- var import_type_guards37 = require("@wistia/type-guards");
10174
+ var import_type_guards36 = require("@wistia/type-guards");
10230
10175
 
10231
10176
  // src/components/SegmentedControl/useSelectedItemMeasurements.tsx
10232
10177
  var import_react43 = require("react");
10233
- var import_jsx_runtime240 = require("react/jsx-runtime");
10178
+ var import_jsx_runtime239 = require("react/jsx-runtime");
10234
10179
  var SelectedItemMeasurementsContext = (0, import_react43.createContext)(
10235
10180
  null
10236
10181
  );
@@ -10245,7 +10190,7 @@ var SelectedItemMeasurementsProvider = ({
10245
10190
  }),
10246
10191
  [selectedItemMeasurements]
10247
10192
  );
10248
- return /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(SelectedItemMeasurementsContext.Provider, { value: contextValue, children });
10193
+ return /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(SelectedItemMeasurementsContext.Provider, { value: contextValue, children });
10249
10194
  };
10250
10195
  var useSelectedItemMeasurements = () => {
10251
10196
  const context = (0, import_react43.useContext)(SelectedItemMeasurementsContext);
@@ -10259,7 +10204,7 @@ var useSelectedItemMeasurements = () => {
10259
10204
 
10260
10205
  // src/components/SegmentedControl/SelectedItemIndicator.tsx
10261
10206
  var import_react45 = require("react");
10262
- var import_styled_components63 = __toESM(require("styled-components"));
10207
+ var import_styled_components62 = __toESM(require("styled-components"));
10263
10208
 
10264
10209
  // src/components/SegmentedControl/useSegmentedControlValue.tsx
10265
10210
  var import_react44 = require("react");
@@ -10274,8 +10219,8 @@ var useSegmentedControlValue = () => {
10274
10219
  };
10275
10220
 
10276
10221
  // src/components/SegmentedControl/SelectedItemIndicator.tsx
10277
- var import_jsx_runtime241 = require("react/jsx-runtime");
10278
- var SelectedItemIndicatorDiv = import_styled_components63.default.div`
10222
+ var import_jsx_runtime240 = require("react/jsx-runtime");
10223
+ var SelectedItemIndicatorDiv = import_styled_components62.default.div`
10279
10224
  background-color: var(--wui-color-bg-fill-white);
10280
10225
  border-radius: var(--wui-border-radius-rounded);
10281
10226
  left: 0;
@@ -10301,7 +10246,7 @@ var SelectedItemIndicator = () => {
10301
10246
  if (!selectedValue) {
10302
10247
  return null;
10303
10248
  }
10304
- return /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(
10249
+ return /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(
10305
10250
  SelectedItemIndicatorDiv,
10306
10251
  {
10307
10252
  style: {
@@ -10314,8 +10259,8 @@ var SelectedItemIndicator = () => {
10314
10259
  };
10315
10260
 
10316
10261
  // src/components/SegmentedControl/SegmentedControl.tsx
10317
- var import_jsx_runtime242 = require("react/jsx-runtime");
10318
- var segmentedControlStyles = import_styled_components64.css`
10262
+ var import_jsx_runtime241 = require("react/jsx-runtime");
10263
+ var segmentedControlStyles = import_styled_components63.css`
10319
10264
  display: inline-flex;
10320
10265
  background-color: var(--wui-color-bg-surface-secondary);
10321
10266
  border-radius: var(--wui-border-radius-rounded);
@@ -10325,7 +10270,7 @@ var segmentedControlStyles = import_styled_components64.css`
10325
10270
  position: relative;
10326
10271
  width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
10327
10272
  `;
10328
- var StyledSegmentedControl = (0, import_styled_components64.default)(import_react_toggle_group.Root)`
10273
+ var StyledSegmentedControl = (0, import_styled_components63.default)(import_react_toggle_group.Root)`
10329
10274
  ${segmentedControlStyles}
10330
10275
  `;
10331
10276
  var SegmentedControl = (0, import_react46.forwardRef)(
@@ -10337,10 +10282,10 @@ var SegmentedControl = (0, import_react46.forwardRef)(
10337
10282
  onSelectedValueChange,
10338
10283
  ...props
10339
10284
  }, ref) => {
10340
- if ((0, import_type_guards37.isNil)(children)) {
10285
+ if ((0, import_type_guards36.isNil)(children)) {
10341
10286
  return null;
10342
10287
  }
10343
- return /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(
10288
+ return /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(
10344
10289
  StyledSegmentedControl,
10345
10290
  {
10346
10291
  ref,
@@ -10352,8 +10297,8 @@ var SegmentedControl = (0, import_react46.forwardRef)(
10352
10297
  type: "single",
10353
10298
  value: selectedValue,
10354
10299
  ...props,
10355
- children: /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(SegmentedControlValueProvider, { value: selectedValue, children: /* @__PURE__ */ (0, import_jsx_runtime242.jsxs)(SelectedItemMeasurementsProvider, { children: [
10356
- /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(SelectedItemIndicator, {}),
10300
+ children: /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(SegmentedControlValueProvider, { value: selectedValue, children: /* @__PURE__ */ (0, import_jsx_runtime241.jsxs)(SelectedItemMeasurementsProvider, { children: [
10301
+ /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(SelectedItemIndicator, {}),
10357
10302
  children
10358
10303
  ] }) })
10359
10304
  }
@@ -10364,27 +10309,27 @@ SegmentedControl.displayName = "SegmentedControl";
10364
10309
 
10365
10310
  // src/components/SegmentedControl/SegmentedControlItem.tsx
10366
10311
  var import_react47 = require("react");
10367
- var import_styled_components65 = __toESM(require("styled-components"));
10312
+ var import_styled_components64 = __toESM(require("styled-components"));
10368
10313
  var import_react_toggle_group2 = require("@radix-ui/react-toggle-group");
10369
- var import_type_guards39 = require("@wistia/type-guards");
10314
+ var import_type_guards38 = require("@wistia/type-guards");
10370
10315
 
10371
10316
  // src/private/helpers/mergeRefs/mergeRefs.ts
10372
- var import_type_guards38 = require("@wistia/type-guards");
10317
+ var import_type_guards37 = require("@wistia/type-guards");
10373
10318
  var mergeRefs = (refs) => (value) => {
10374
10319
  refs.forEach((ref) => {
10375
- if ((0, import_type_guards38.isFunction)(ref)) {
10320
+ if ((0, import_type_guards37.isFunction)(ref)) {
10376
10321
  ref(value);
10377
10322
  return;
10378
10323
  }
10379
- if ((0, import_type_guards38.isNotNil)(ref)) {
10324
+ if ((0, import_type_guards37.isNotNil)(ref)) {
10380
10325
  ref.current = value;
10381
10326
  }
10382
10327
  });
10383
10328
  };
10384
10329
 
10385
10330
  // src/components/SegmentedControl/SegmentedControlItem.tsx
10386
- var import_jsx_runtime243 = require("react/jsx-runtime");
10387
- var segmentedControlItemStyles = import_styled_components65.css`
10331
+ var import_jsx_runtime242 = require("react/jsx-runtime");
10332
+ var segmentedControlItemStyles = import_styled_components64.css`
10388
10333
  all: unset; /* ToggleGroupItem is a button element */
10389
10334
  align-items: center;
10390
10335
  border-radius: var(--wui-border-radius-rounded);
@@ -10443,7 +10388,7 @@ var segmentedControlItemStyles = import_styled_components65.css`
10443
10388
  }
10444
10389
  }
10445
10390
  `;
10446
- var StyledSegmentedControlItem = (0, import_styled_components65.default)(import_react_toggle_group2.Item)`
10391
+ var StyledSegmentedControlItem = (0, import_styled_components64.default)(import_react_toggle_group2.Item)`
10447
10392
  ${segmentedControlItemStyles}
10448
10393
  `;
10449
10394
  var SegmentedControlItem = (0, import_react47.forwardRef)(
@@ -10484,12 +10429,12 @@ var SegmentedControlItem = (0, import_react47.forwardRef)(
10484
10429
  resizeObserver.disconnect();
10485
10430
  };
10486
10431
  }, [selectedValue, setSelectedItemMeasurements, value]);
10487
- return /* @__PURE__ */ (0, import_jsx_runtime243.jsxs)(
10432
+ return /* @__PURE__ */ (0, import_jsx_runtime242.jsxs)(
10488
10433
  StyledSegmentedControlItem,
10489
10434
  {
10490
10435
  ref: combinedRef,
10491
- $hasLabel: (0, import_type_guards39.isNotNil)(label),
10492
- "aria-label": (0, import_type_guards39.isNotNil)(label) ? void 0 : ariaLabel,
10436
+ $hasLabel: (0, import_type_guards38.isNotNil)(label),
10437
+ "aria-label": (0, import_type_guards38.isNotNil)(label) ? void 0 : ariaLabel,
10493
10438
  disabled,
10494
10439
  onClick: handleClick,
10495
10440
  value,
@@ -10503,400 +10448,92 @@ var SegmentedControlItem = (0, import_react47.forwardRef)(
10503
10448
  );
10504
10449
  SegmentedControlItem.displayName = "SegmentedControlItem";
10505
10450
 
10506
- // src/components/Select/Select.tsx
10507
- var import_react_select = require("@radix-ui/react-select");
10508
- var import_react48 = require("react");
10451
+ // src/components/Tabs/Tabs.tsx
10452
+ var import_react52 = require("react");
10453
+ var import_react_tabs4 = require("@radix-ui/react-tabs");
10454
+ var import_type_guards40 = require("@wistia/type-guards");
10455
+
10456
+ // src/components/Tabs/TabPanel.tsx
10457
+ var import_styled_components65 = __toESM(require("styled-components"));
10458
+ var import_react_tabs = require("@radix-ui/react-tabs");
10459
+ var import_jsx_runtime243 = require("react/jsx-runtime");
10460
+ var StyledTabPanel = (0, import_styled_components65.default)(import_react_tabs.Content)`
10461
+ display: flex;
10462
+ flex-direction: column;
10463
+ `;
10464
+ var TabPanel = ({ children, value, ...props }) => {
10465
+ return /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(
10466
+ StyledTabPanel,
10467
+ {
10468
+ value,
10469
+ ...props,
10470
+ children
10471
+ }
10472
+ );
10473
+ };
10474
+ TabPanel.displayName = "TabPanel";
10475
+
10476
+ // src/components/Tabs/TabList.tsx
10509
10477
  var import_styled_components66 = __toESM(require("styled-components"));
10478
+ var import_react_tabs2 = require("@radix-ui/react-tabs");
10510
10479
  var import_jsx_runtime244 = require("react/jsx-runtime");
10511
- var StyledTrigger = (0, import_styled_components66.default)(import_react_select.Trigger)`
10512
- ${({ $colorScheme }) => getColorScheme($colorScheme)};
10513
- --wui-select-color-bg: var(--wui-color-bg-surface);
10514
- --wui-select-color-bg-disabled: var(--wui-color-bg-surface-disabled);
10515
- --wui-select-color-border: var(--wui-color-border);
10516
- --wui-select-color-border-focus: var(--wui-color-border-active);
10517
- --wui-select-color-border-error: var(--wui-color-border-error);
10518
- --wui-select-color-border-disabled: var(--wui-color-border-disabled);
10519
- --wui-select-border-radius: var(--wui-border-radius-rounded);
10520
- --wui-select-multiline-border-radius: var(--wui-border-radius-02);
10521
- --wui-select-vertical-padding: var(--wui-space-02);
10522
- --wui-select-horizontal-padding: var(--wui-space-03);
10523
- --wui-select-placeholder: var(--wui-gray-10);
10524
- --wui-select-color-text-error: var(--wui-color-text-error);
10480
+ var StyledTabList = (0, import_styled_components66.default)(import_react_tabs2.List)`
10481
+ ${segmentedControlStyles}
10525
10482
 
10526
- padding: var(--wui-select-vertical-padding) var(--wui-select-horizontal-padding);
10527
- background-color: var(--wui-select-color-bg);
10528
- border: 1px solid var(--wui-select-color-border);
10529
- border-radius: var(--wui-select-border-radius);
10530
- min-width: 200px;
10531
- text-align: left;
10532
- display: inline-flex;
10533
- align-items: center;
10534
- justify-content: space-between;
10535
- max-width: 100%;
10536
- width: ${({ $fullWidth = false }) => $fullWidth ? "100%" : "auto"};
10483
+ margin-bottom: var(--wui-space-04);
10484
+ `;
10485
+ var TabList = ({
10486
+ children,
10487
+ fullWidth,
10488
+ ariaLabel,
10489
+ ...props
10490
+ }) => {
10491
+ return /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(
10492
+ StyledTabList,
10493
+ {
10494
+ $fullWidth: fullWidth,
10495
+ "aria-label": ariaLabel,
10496
+ ...props,
10497
+ children
10498
+ }
10499
+ );
10500
+ };
10501
+ TabList.displayName = "TabList";
10537
10502
 
10538
- > span {
10539
- white-space: nowrap;
10540
- text-overflow: ellipsis;
10541
- overflow: hidden;
10542
- }
10503
+ // src/components/Tabs/TabItem.tsx
10504
+ var import_react49 = require("react");
10505
+ var import_styled_components67 = __toESM(require("styled-components"));
10506
+ var import_react_tabs3 = require("@radix-ui/react-tabs");
10507
+ var import_type_guards39 = require("@wistia/type-guards");
10543
10508
 
10544
- &[aria-expanded='true'],
10545
- &:focus {
10546
- outline: 2px solid var(--wui-color-focus-ring);
10509
+ // src/components/Tabs/useTabsValue.tsx
10510
+ var import_react48 = require("react");
10511
+ var TabsValueContext = (0, import_react48.createContext)(null);
10512
+ var TabsValueProvider = TabsValueContext.Provider;
10513
+ var useTabsValue = () => {
10514
+ const context = (0, import_react48.useContext)(TabsValueContext);
10515
+ if (context === null) {
10516
+ throw new Error("useTabsValue must be used within a TabsValueProvider");
10547
10517
  }
10518
+ return context;
10519
+ };
10548
10520
 
10549
- &[aria-invalid='true'] {
10550
- outline: 2px solid var(--wui-select-color-border-error);
10551
- color: var(--wui-select-color-text-error);
10552
- }
10521
+ // src/components/Tabs/TabItem.tsx
10522
+ var import_jsx_runtime245 = require("react/jsx-runtime");
10523
+ var StyledTabItem = (0, import_styled_components67.default)(import_react_tabs3.Trigger)`
10524
+ ${segmentedControlItemStyles}
10553
10525
 
10554
- &:disabled {
10555
- border-color: var(--wui-color-bg-surface-disabled);
10556
- background-color: var(--wui-color-bg-surface-disabled);
10526
+ &:focus-visible {
10527
+ outline: none;
10557
10528
  }
10558
10529
  `;
10559
- var StyledContent3 = (0, import_styled_components66.default)(import_react_select.Content)`
10560
- --wui-select-content-border: var(--wui-color-border);
10561
- --wui-select-content-bg: var(--wui-color-bg-surface);
10562
- --wui-select-content-border-radius: var(--wui-border-radius-02);
10563
- --wui-select-option-padding: var(--wui-space-02);
10564
- --wui-select-option-inner-gap: var(--wui-space-03);
10565
- --wui-select-option-bg-hover: var(--wui-color-bg-surface-hover);
10566
-
10567
- overflow: hidden;
10568
- transform: translateY(8px);
10569
- background-color: var(--wui-select-content-bg);
10570
- border: 1px solid var(--wui-select-content-border);
10571
- border-radius: var(--wui-select-content-border-radius);
10572
- padding: var(--wui-select-option-padding);
10573
- min-width: var(--radix-select-trigger-width);
10574
- max-height: var(--radix-select-content-available-height);
10575
- z-index: var(--wui-zindex-select);
10576
- `;
10577
- var Select = (0, import_react48.forwardRef)(
10578
- ({
10579
- colorScheme = "inherit",
10580
- children,
10581
- onChange = () => null,
10582
- placeholder = "Select...",
10583
- fullWidth = false,
10584
- ...props
10585
- }, forwardedRef) => {
10586
- const responsiveFullWidth = useResponsiveProp(fullWidth);
10587
- return /* @__PURE__ */ (0, import_jsx_runtime244.jsxs)(
10588
- import_react_select.Root,
10589
- {
10590
- ...props,
10591
- onValueChange: onChange,
10592
- children: [
10593
- /* @__PURE__ */ (0, import_jsx_runtime244.jsxs)(
10594
- StyledTrigger,
10595
- {
10596
- ref: forwardedRef,
10597
- $colorScheme: colorScheme,
10598
- $fullWidth: responsiveFullWidth,
10599
- ...props,
10600
- children: [
10601
- /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(import_react_select.Value, { placeholder }),
10602
- /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(
10603
- Icon,
10604
- {
10605
- size: "md",
10606
- type: "caret-down"
10607
- }
10608
- )
10609
- ]
10610
- }
10611
- ),
10612
- /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(import_react_select.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime244.jsxs)(StyledContent3, { position: "popper", children: [
10613
- /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(import_react_select.ScrollUpButton, { children: /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(Icon, { type: "caret-up" }) }),
10614
- /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(import_react_select.Viewport, { children }),
10615
- /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(import_react_select.ScrollDownButton, { children: /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(Icon, { type: "caret-down" }) })
10616
- ] }) })
10617
- ]
10618
- }
10619
- );
10620
- }
10621
- );
10622
- Select.displayName = "Select";
10623
-
10624
- // src/components/Select/SelectOption.tsx
10625
- var import_react_select2 = require("@radix-ui/react-select");
10626
- var import_react49 = require("react");
10627
- var import_styled_components67 = __toESM(require("styled-components"));
10628
- var import_jsx_runtime245 = require("react/jsx-runtime");
10629
- var StyledItem = (0, import_styled_components67.default)(import_react_select2.Item)`
10630
- ${variantStyleMap2.body3};
10631
- display: flex;
10632
- padding: var(--wui-select-option-padding);
10633
- gap: var(--wui-select-option-inner-gap);
10634
- font-size: var(--font-size);
10635
- font-weight: var(--font-weight);
10636
- border-radius: var(--wui-border-radius-01);
10637
-
10638
- &:hover,
10639
- &:focus-visible {
10640
- background-color: var(--wui-select-option-bg-hover);
10641
- outline: none;
10642
- }
10643
-
10644
- &[aria-disabled='true'] {
10645
- color: var(--wui-color-text-disabled);
10646
- }
10647
-
10648
- &[aria-disabled='true']:hover {
10649
- background-color: transparent;
10650
- }
10651
- `;
10652
- var StyledIconContainer = import_styled_components67.default.span`
10653
- width: 12px;
10654
- `;
10655
- var SelectOption = (0, import_react49.forwardRef)(
10656
- ({ children, ...props }, forwardedRef) => {
10657
- return /* @__PURE__ */ (0, import_jsx_runtime245.jsxs)(
10658
- StyledItem,
10659
- {
10660
- ...props,
10661
- ref: forwardedRef,
10662
- children: [
10663
- /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(StyledIconContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(import_react_select2.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(
10664
- Icon,
10665
- {
10666
- size: "sm",
10667
- type: "checkmark"
10668
- }
10669
- ) }) }),
10670
- /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(import_react_select2.ItemText, { children })
10671
- ]
10672
- }
10673
- );
10674
- }
10675
- );
10676
- SelectOption.displayName = "Option";
10677
-
10678
- // src/components/Select/SelectOptionGroup.tsx
10679
- var import_react_select3 = require("@radix-ui/react-select");
10680
- var import_styled_components68 = __toESM(require("styled-components"));
10681
- var import_jsx_runtime246 = require("react/jsx-runtime");
10682
- var StyledLabel4 = (0, import_styled_components68.default)(import_react_select3.Label)`
10683
- padding: var(--wui-select-option-padding);
10684
- `;
10685
- var SelectOptionGroup = ({ children, label, ...props }) => {
10686
- return /* @__PURE__ */ (0, import_jsx_runtime246.jsxs)(import_react_select3.Group, { ...props, children: [
10687
- /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(StyledLabel4, { children: /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(
10688
- Text,
10689
- {
10690
- prominence: "secondary",
10691
- variant: "body3",
10692
- children: label
10693
- }
10694
- ) }),
10695
- children
10696
- ] });
10697
- };
10698
-
10699
- // src/components/Table/Table.tsx
10700
- var import_react51 = require("react");
10701
- var import_styled_components69 = __toESM(require("styled-components"));
10702
-
10703
- // src/components/Table/TableContext.tsx
10704
- var import_react50 = __toESM(require("react"));
10705
- var TableContext = import_react50.default.createContext({ divided: false });
10706
-
10707
- // src/components/Table/Table.tsx
10708
- var import_jsx_runtime247 = require("react/jsx-runtime");
10709
- var StyledTable = import_styled_components69.default.table`
10710
- width: 100%;
10711
- border-collapse: collapse;
10712
-
10713
- ${({ $striped }) => $striped && import_styled_components69.css`
10714
- tbody tr:nth-child(even) {
10715
- background-color: var(--wui-color-bg-surface-secondary);
10716
- }
10717
- `}
10718
- `;
10719
- var Table = ({
10720
- children,
10721
- striped = false,
10722
- divided = false,
10723
- ...props
10724
- }) => {
10725
- const contextValue = (0, import_react51.useMemo)(() => ({ divided }), [divided]);
10726
- return /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(TableContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(
10727
- StyledTable,
10728
- {
10729
- $striped: striped,
10730
- ...props,
10731
- children
10732
- }
10733
- ) });
10734
- };
10735
-
10736
- // src/components/Table/TableBody.tsx
10737
- var import_styled_components70 = __toESM(require("styled-components"));
10738
-
10739
- // src/components/Table/TableSectionContext.ts
10740
- var import_react52 = require("react");
10741
- var TableSectionContext = (0, import_react52.createContext)(null);
10742
-
10743
- // src/components/Table/TableBody.tsx
10744
- var import_jsx_runtime248 = require("react/jsx-runtime");
10745
- var StyledTbody = import_styled_components70.default.tbody``;
10746
- var TableBody = ({ children, ...props }) => {
10747
- return /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(TableSectionContext.Provider, { value: "body", children: /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(StyledTbody, { ...props, children }) });
10748
- };
10749
-
10750
- // src/components/Table/TableCell.tsx
10751
- var import_react53 = require("react");
10752
- var import_styled_components71 = __toESM(require("styled-components"));
10753
- var import_jsx_runtime249 = require("react/jsx-runtime");
10754
- var sharedStyles = import_styled_components71.css`
10755
- color: var(--wui-color-text);
10756
- padding: var(--wui-space-02);
10757
- text-align: left;
10758
- `;
10759
- var StyledTh = import_styled_components71.default.th`
10760
- ${sharedStyles}
10761
- font-size: var(--wui-typography-body-4-size);
10762
- font-weight: var(--wui-typography-weight-label-bold);
10763
- line-height: var(--wui-typography-body-4-line-height);
10764
- `;
10765
- var StyledTd = import_styled_components71.default.td`
10766
- ${sharedStyles}
10767
- font-size: var(--wui-typography-body-2-size);
10768
- font-weight: var(--wui-typography-body-2-weight);
10769
- line-height: var(--wui-typography-body-2-line-height);
10770
- `;
10771
- var TableCell = ({ children, ...props }) => {
10772
- const section = (0, import_react53.useContext)(TableSectionContext);
10773
- if (section === "head") {
10774
- return /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(StyledTh, { ...props, children });
10775
- }
10776
- return /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(StyledTd, { ...props, children });
10777
- };
10778
-
10779
- // src/components/Table/TableFooter.tsx
10780
- var import_styled_components72 = __toESM(require("styled-components"));
10781
- var import_jsx_runtime250 = require("react/jsx-runtime");
10782
- var StyledTfoot = import_styled_components72.default.tfoot``;
10783
- var TableFooter = ({ children, ...props }) => {
10784
- return /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(TableSectionContext.Provider, { value: "footer", children: /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(StyledTfoot, { ...props, children }) });
10785
- };
10786
-
10787
- // src/components/Table/TableHead.tsx
10788
- var import_styled_components73 = __toESM(require("styled-components"));
10789
- var import_jsx_runtime251 = require("react/jsx-runtime");
10790
- var StyledThead = import_styled_components73.default.thead``;
10791
- var TableHead = ({ children, ...props }) => {
10792
- return /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(TableSectionContext.Provider, { value: "head", children: /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(StyledThead, { ...props, children }) });
10793
- };
10794
-
10795
- // src/components/Table/TableRow.tsx
10796
- var import_react54 = require("react");
10797
- var import_styled_components74 = __toESM(require("styled-components"));
10798
- var import_jsx_runtime252 = require("react/jsx-runtime");
10799
- var StyledTr = import_styled_components74.default.tr`
10800
- ${({ $divided }) => $divided && `border-bottom: 1px solid var(--wui-color-border);`}
10801
- `;
10802
- var TableRow = ({ children, ...props }) => {
10803
- const { divided = false } = (0, import_react54.useContext)(TableContext);
10804
- return /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(
10805
- StyledTr,
10806
- {
10807
- $divided: divided,
10808
- ...props,
10809
- children
10810
- }
10811
- );
10812
- };
10813
-
10814
- // src/components/Tabs/Tabs.tsx
10815
- var import_react59 = require("react");
10816
- var import_react_tabs4 = require("@radix-ui/react-tabs");
10817
- var import_type_guards41 = require("@wistia/type-guards");
10818
-
10819
- // src/components/Tabs/TabPanel.tsx
10820
- var import_styled_components75 = __toESM(require("styled-components"));
10821
- var import_react_tabs = require("@radix-ui/react-tabs");
10822
- var import_jsx_runtime253 = require("react/jsx-runtime");
10823
- var StyledTabPanel = (0, import_styled_components75.default)(import_react_tabs.Content)`
10824
- display: flex;
10825
- flex-direction: column;
10826
- `;
10827
- var TabPanel = ({ children, value, ...props }) => {
10828
- return /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(
10829
- StyledTabPanel,
10830
- {
10831
- value,
10832
- ...props,
10833
- children
10834
- }
10835
- );
10836
- };
10837
- TabPanel.displayName = "TabPanel";
10838
-
10839
- // src/components/Tabs/TabList.tsx
10840
- var import_styled_components76 = __toESM(require("styled-components"));
10841
- var import_react_tabs2 = require("@radix-ui/react-tabs");
10842
- var import_jsx_runtime254 = require("react/jsx-runtime");
10843
- var StyledTabList = (0, import_styled_components76.default)(import_react_tabs2.List)`
10844
- ${segmentedControlStyles}
10845
-
10846
- margin-bottom: var(--wui-space-04);
10847
- `;
10848
- var TabList = ({
10849
- children,
10850
- fullWidth,
10851
- ariaLabel,
10852
- ...props
10853
- }) => {
10854
- return /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(
10855
- StyledTabList,
10856
- {
10857
- $fullWidth: fullWidth,
10858
- "aria-label": ariaLabel,
10859
- ...props,
10860
- children
10861
- }
10862
- );
10863
- };
10864
- TabList.displayName = "TabList";
10865
-
10866
- // src/components/Tabs/TabItem.tsx
10867
- var import_react56 = require("react");
10868
- var import_styled_components77 = __toESM(require("styled-components"));
10869
- var import_react_tabs3 = require("@radix-ui/react-tabs");
10870
- var import_type_guards40 = require("@wistia/type-guards");
10871
-
10872
- // src/components/Tabs/useTabsValue.tsx
10873
- var import_react55 = require("react");
10874
- var TabsValueContext = (0, import_react55.createContext)(null);
10875
- var TabsValueProvider = TabsValueContext.Provider;
10876
- var useTabsValue = () => {
10877
- const context = (0, import_react55.useContext)(TabsValueContext);
10878
- if (context === null) {
10879
- throw new Error("useTabsValue must be used within a TabsValueProvider");
10880
- }
10881
- return context;
10882
- };
10883
-
10884
- // src/components/Tabs/TabItem.tsx
10885
- var import_jsx_runtime255 = require("react/jsx-runtime");
10886
- var StyledTabItem = (0, import_styled_components77.default)(import_react_tabs3.Trigger)`
10887
- ${segmentedControlItemStyles}
10888
-
10889
- &:focus-visible {
10890
- outline: none;
10891
- }
10892
- `;
10893
- var TabItem = (0, import_react56.forwardRef)(
10530
+ var TabItem = (0, import_react49.forwardRef)(
10894
10531
  ({ disabled = false, icon, label, "aria-label": ariaLabel, value }, forwardedRef) => {
10895
10532
  const selectedValue = useTabsValue();
10896
10533
  const { setSelectedItemMeasurements } = useSelectedItemMeasurements();
10897
- const buttonRef = (0, import_react56.useRef)(null);
10534
+ const buttonRef = (0, import_react49.useRef)(null);
10898
10535
  const combinedRef = mergeRefs([buttonRef, forwardedRef]);
10899
- (0, import_react56.useEffect)(() => {
10536
+ (0, import_react49.useEffect)(() => {
10900
10537
  const buttonElem = buttonRef.current;
10901
10538
  if (!buttonElem) {
10902
10539
  return void 0;
@@ -10921,12 +10558,12 @@ var TabItem = (0, import_react56.forwardRef)(
10921
10558
  resizeObserver.disconnect();
10922
10559
  };
10923
10560
  }, [selectedValue, setSelectedItemMeasurements, value]);
10924
- return /* @__PURE__ */ (0, import_jsx_runtime255.jsxs)(
10561
+ return /* @__PURE__ */ (0, import_jsx_runtime245.jsxs)(
10925
10562
  StyledTabItem,
10926
10563
  {
10927
10564
  ref: combinedRef,
10928
- $hasLabel: (0, import_type_guards40.isNotNil)(label),
10929
- "aria-label": (0, import_type_guards40.isNotNil)(label) ? void 0 : ariaLabel,
10565
+ $hasLabel: (0, import_type_guards39.isNotNil)(label),
10566
+ "aria-label": (0, import_type_guards39.isNotNil)(label) ? void 0 : ariaLabel,
10930
10567
  disabled,
10931
10568
  value,
10932
10569
  children: [
@@ -10940,16 +10577,16 @@ var TabItem = (0, import_react56.forwardRef)(
10940
10577
  TabItem.displayName = "TabItem";
10941
10578
 
10942
10579
  // src/components/Tabs/extractTabItems.ts
10943
- var import_react57 = require("react");
10580
+ var import_react50 = require("react");
10944
10581
  var extractTabItems = (children) => {
10945
10582
  const tabItems = [];
10946
- import_react57.Children.forEach(children, (child) => {
10947
- if (!(0, import_react57.isValidElement)(child)) {
10583
+ import_react50.Children.forEach(children, (child) => {
10584
+ if (!(0, import_react50.isValidElement)(child)) {
10948
10585
  return;
10949
10586
  }
10950
10587
  if (typeof child.type !== "string" && child.type.displayName === "Tab") {
10951
10588
  tabItems.push(child);
10952
- } else if (child.type === import_react57.Fragment) {
10589
+ } else if (child.type === import_react50.Fragment) {
10953
10590
  const fragmentElement = child;
10954
10591
  tabItems.push(...extractTabItems(fragmentElement.props.children));
10955
10592
  } else if ((child.props.children ?? null) != null) {
@@ -10962,10 +10599,10 @@ var extractTabItems = (children) => {
10962
10599
  };
10963
10600
 
10964
10601
  // src/components/Tabs/SelectedItemIndicator.tsx
10965
- var import_react58 = require("react");
10966
- var import_styled_components78 = __toESM(require("styled-components"));
10967
- var import_jsx_runtime256 = require("react/jsx-runtime");
10968
- var TabsSelectedItemIndicatorDiv = (0, import_styled_components78.default)(SelectedItemIndicatorDiv)`
10602
+ var import_react51 = require("react");
10603
+ var import_styled_components68 = __toESM(require("styled-components"));
10604
+ var import_jsx_runtime246 = require("react/jsx-runtime");
10605
+ var TabsSelectedItemIndicatorDiv = (0, import_styled_components68.default)(SelectedItemIndicatorDiv)`
10969
10606
  &:has(~ ${StyledTabItem}:focus-visible) {
10970
10607
  outline: 2px solid var(--wui-color-focus-ring);
10971
10608
  }
@@ -10973,7 +10610,7 @@ var TabsSelectedItemIndicatorDiv = (0, import_styled_components78.default)(Selec
10973
10610
  var SelectedItemIndicator2 = () => {
10974
10611
  const { selectedItemMeasurements } = useSelectedItemMeasurements();
10975
10612
  const selectedValue = useTabsValue();
10976
- const selectedItemIndicatorStyle = (0, import_react58.useMemo)(
10613
+ const selectedItemIndicatorStyle = (0, import_react51.useMemo)(
10977
10614
  () => selectedItemMeasurements != null ? {
10978
10615
  height: `${selectedItemMeasurements.offsetHeight}px`,
10979
10616
  transform: `translateX(${selectedItemMeasurements.offsetLeft}px)`,
@@ -10984,7 +10621,7 @@ var SelectedItemIndicator2 = () => {
10984
10621
  if (selectedValue == null) {
10985
10622
  return null;
10986
10623
  }
10987
- return /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(
10624
+ return /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(
10988
10625
  TabsSelectedItemIndicatorDiv,
10989
10626
  {
10990
10627
  style: {
@@ -10997,8 +10634,8 @@ var SelectedItemIndicator2 = () => {
10997
10634
  };
10998
10635
 
10999
10636
  // src/components/Tabs/Tabs.tsx
11000
- var import_jsx_runtime257 = require("react/jsx-runtime");
11001
- var Tabs = (0, import_react59.forwardRef)(
10637
+ var import_jsx_runtime247 = require("react/jsx-runtime");
10638
+ var Tabs = (0, import_react52.forwardRef)(
11002
10639
  ({
11003
10640
  children,
11004
10641
  fullWidth = true,
@@ -11009,30 +10646,30 @@ var Tabs = (0, import_react59.forwardRef)(
11009
10646
  ...otherProps
11010
10647
  }, ref) => {
11011
10648
  const tabItems = extractTabItems(children);
11012
- const [internalSelectedValue, setInternalSelectedValue] = (0, import_react59.useState)(defaultSelectedValue);
10649
+ const [internalSelectedValue, setInternalSelectedValue] = (0, import_react52.useState)(defaultSelectedValue);
11013
10650
  const modeProps = defaultSelectedValue !== void 0 ? {
11014
10651
  defaultValue: defaultSelectedValue,
11015
10652
  onValueChange: setInternalSelectedValue
11016
10653
  } : { value: selectedValue, onValueChange: onSelectedValueChange };
11017
- return /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(
10654
+ return /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(
11018
10655
  import_react_tabs4.Root,
11019
10656
  {
11020
10657
  ref,
11021
10658
  activationMode: "automatic",
11022
10659
  ...otherProps,
11023
10660
  ...modeProps,
11024
- children: /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(
10661
+ children: /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(
11025
10662
  TabsValueProvider,
11026
10663
  {
11027
10664
  value: defaultSelectedValue !== void 0 ? internalSelectedValue : selectedValue,
11028
- children: /* @__PURE__ */ (0, import_jsx_runtime257.jsxs)(SelectedItemMeasurementsProvider, { children: [
11029
- /* @__PURE__ */ (0, import_jsx_runtime257.jsxs)(
10665
+ children: /* @__PURE__ */ (0, import_jsx_runtime247.jsxs)(SelectedItemMeasurementsProvider, { children: [
10666
+ /* @__PURE__ */ (0, import_jsx_runtime247.jsxs)(
11030
10667
  TabList,
11031
10668
  {
11032
10669
  ariaLabel,
11033
10670
  fullWidth,
11034
10671
  children: [
11035
- /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(SelectedItemIndicator2, {}),
10672
+ /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(SelectedItemIndicator2, {}),
11036
10673
  tabItems.map((tab) => {
11037
10674
  const {
11038
10675
  value,
@@ -11041,8 +10678,8 @@ var Tabs = (0, import_react59.forwardRef)(
11041
10678
  label,
11042
10679
  "aria-label": ariaLabelForTab
11043
10680
  } = tab.props;
11044
- if ((0, import_type_guards41.isNil)(icon)) {
11045
- return /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(
10681
+ if ((0, import_type_guards40.isNil)(icon)) {
10682
+ return /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(
11046
10683
  TabItem,
11047
10684
  {
11048
10685
  disabled,
@@ -11052,8 +10689,8 @@ var Tabs = (0, import_react59.forwardRef)(
11052
10689
  value
11053
10690
  );
11054
10691
  }
11055
- if ((0, import_type_guards41.isNotNil)(label)) {
11056
- return /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(
10692
+ if ((0, import_type_guards40.isNotNil)(label)) {
10693
+ return /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(
11057
10694
  TabItem,
11058
10695
  {
11059
10696
  disabled,
@@ -11064,8 +10701,8 @@ var Tabs = (0, import_react59.forwardRef)(
11064
10701
  value
11065
10702
  );
11066
10703
  }
11067
- if ((0, import_type_guards41.isNotNil)(ariaLabelForTab)) {
11068
- return /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(
10704
+ if ((0, import_type_guards40.isNotNil)(ariaLabelForTab)) {
10705
+ return /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(
11069
10706
  TabItem,
11070
10707
  {
11071
10708
  "aria-label": ariaLabelForTab,
@@ -11081,7 +10718,7 @@ var Tabs = (0, import_react59.forwardRef)(
11081
10718
  ]
11082
10719
  }
11083
10720
  ),
11084
- tabItems.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(
10721
+ tabItems.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(
11085
10722
  TabPanel,
11086
10723
  {
11087
10724
  value: tab.props.value,
@@ -11099,19 +10736,19 @@ var Tabs = (0, import_react59.forwardRef)(
11099
10736
  Tabs.displayName = "Tabs";
11100
10737
 
11101
10738
  // src/components/Tabs/Tab.tsx
11102
- var import_react60 = require("react");
11103
- var import_jsx_runtime258 = require("react/jsx-runtime");
11104
- var Tab = (0, import_react60.forwardRef)(({ children }, ref) => {
11105
- return /* @__PURE__ */ (0, import_jsx_runtime258.jsx)("div", { ref, children });
10739
+ var import_react53 = require("react");
10740
+ var import_jsx_runtime248 = require("react/jsx-runtime");
10741
+ var Tab = (0, import_react53.forwardRef)(({ children }, ref) => {
10742
+ return /* @__PURE__ */ (0, import_jsx_runtime248.jsx)("div", { ref, children });
11106
10743
  });
11107
10744
  Tab.displayName = "Tab";
11108
10745
 
11109
10746
  // src/components/Tag/Tag.tsx
11110
- var import_react61 = require("react");
11111
- var import_styled_components79 = __toESM(require("styled-components"));
11112
- var import_type_guards42 = require("@wistia/type-guards");
11113
- var import_jsx_runtime259 = require("react/jsx-runtime");
11114
- var TagLabel = import_styled_components79.default.a`
10747
+ var import_react54 = require("react");
10748
+ var import_styled_components69 = __toESM(require("styled-components"));
10749
+ var import_type_guards41 = require("@wistia/type-guards");
10750
+ var import_jsx_runtime249 = require("react/jsx-runtime");
10751
+ var TagLabel = import_styled_components69.default.a`
11115
10752
  ${({ $colorScheme }) => getColorScheme($colorScheme)};
11116
10753
  font-size: var(--wui-typography-label-4-size);
11117
10754
  font-weight: var(--wui-typography-label-4-weight);
@@ -11139,14 +10776,14 @@ var TagLabel = import_styled_components79.default.a`
11139
10776
  box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
11140
10777
  }
11141
10778
  `;
11142
- var TagDivider = import_styled_components79.default.div`
10779
+ var TagDivider = import_styled_components69.default.div`
11143
10780
  ${({ $colorScheme }) => getColorScheme($colorScheme)};
11144
10781
  border-left: 1px solid var(--wui-color-border);
11145
10782
  display: flex;
11146
10783
  height: 14px;
11147
10784
  width: 1px;
11148
10785
  `;
11149
- var StyledRemoveButton = import_styled_components79.default.button`
10786
+ var StyledRemoveButton = import_styled_components69.default.button`
11150
10787
  ${({ $colorScheme }) => getColorScheme($colorScheme)};
11151
10788
  all: unset;
11152
10789
  cursor: pointer;
@@ -11174,7 +10811,7 @@ var StyledRemoveButton = import_styled_components79.default.button`
11174
10811
  box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
11175
10812
  }
11176
10813
  `;
11177
- var StyledTag = import_styled_components79.default.div`
10814
+ var StyledTag = import_styled_components69.default.div`
11178
10815
  ${({ $colorScheme }) => getColorScheme($colorScheme)};
11179
10816
  align-items: center;
11180
10817
  background-color: var(--wui-color-bg-surface-secondary);
@@ -11187,47 +10824,47 @@ var StyledTag = import_styled_components79.default.div`
11187
10824
  }
11188
10825
  `;
11189
10826
  var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
11190
- if ((0, import_type_guards42.isNil)(onClickRemove)) {
10827
+ if ((0, import_type_guards41.isNil)(onClickRemove)) {
11191
10828
  return null;
11192
10829
  }
11193
- if ((0, import_type_guards42.isNil)(onClickRemoveLabel)) {
10830
+ if ((0, import_type_guards41.isNil)(onClickRemoveLabel)) {
11194
10831
  throw new Error(
11195
10832
  "for accessibility, onClickRemoveLabel must be provided if onClickRemove is provided"
11196
10833
  );
11197
10834
  }
11198
- return /* @__PURE__ */ (0, import_jsx_runtime259.jsxs)(import_jsx_runtime259.Fragment, { children: [
11199
- /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(TagDivider, { $colorScheme: colorScheme }),
11200
- /* @__PURE__ */ (0, import_jsx_runtime259.jsxs)(
10835
+ return /* @__PURE__ */ (0, import_jsx_runtime249.jsxs)(import_jsx_runtime249.Fragment, { children: [
10836
+ /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(TagDivider, { $colorScheme: colorScheme }),
10837
+ /* @__PURE__ */ (0, import_jsx_runtime249.jsxs)(
11201
10838
  StyledRemoveButton,
11202
10839
  {
11203
10840
  $colorScheme: colorScheme,
11204
10841
  onClick: onClickRemove,
11205
10842
  type: "button",
11206
10843
  children: [
11207
- /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(
10844
+ /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(
11208
10845
  Icon,
11209
10846
  {
11210
10847
  size: "sm",
11211
10848
  type: "close"
11212
10849
  }
11213
10850
  ),
11214
- /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(ScreenReaderOnly, { children: onClickRemoveLabel })
10851
+ /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(ScreenReaderOnly, { children: onClickRemoveLabel })
11215
10852
  ]
11216
10853
  }
11217
10854
  )
11218
10855
  ] });
11219
10856
  };
11220
- var Tag = (0, import_react61.forwardRef)(
10857
+ var Tag = (0, import_react54.forwardRef)(
11221
10858
  ({ onClickRemove, colorScheme = "inherit", href, label, onClickRemoveLabel, ...otherProps }, ref) => {
11222
- const labelProps = (0, import_type_guards42.isNotNil)(href) && (0, import_type_guards42.isNonEmptyString)(href) ? { href, as: "a" } : { as: "span" };
11223
- return /* @__PURE__ */ (0, import_jsx_runtime259.jsxs)(
10859
+ const labelProps = (0, import_type_guards41.isNotNil)(href) && (0, import_type_guards41.isNonEmptyString)(href) ? { href, as: "a" } : { as: "span" };
10860
+ return /* @__PURE__ */ (0, import_jsx_runtime249.jsxs)(
11224
10861
  StyledTag,
11225
10862
  {
11226
10863
  ref,
11227
10864
  $colorScheme: colorScheme,
11228
10865
  ...otherProps,
11229
10866
  children: [
11230
- /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(
10867
+ /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(
11231
10868
  TagLabel,
11232
10869
  {
11233
10870
  ...labelProps,
@@ -11235,7 +10872,7 @@ var Tag = (0, import_react61.forwardRef)(
11235
10872
  children: label
11236
10873
  }
11237
10874
  ),
11238
- /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(
10875
+ /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(
11239
10876
  RemoveButton,
11240
10877
  {
11241
10878
  colorScheme,
@@ -11251,26 +10888,26 @@ var Tag = (0, import_react61.forwardRef)(
11251
10888
  Tag.displayName = "Tag";
11252
10889
 
11253
10890
  // src/components/WistiaLogo/WistiaLogo.tsx
11254
- var import_styled_components80 = __toESM(require("styled-components"));
11255
- var import_type_guards43 = require("@wistia/type-guards");
11256
- var import_jsx_runtime260 = require("react/jsx-runtime");
10891
+ var import_styled_components70 = __toESM(require("styled-components"));
10892
+ var import_type_guards42 = require("@wistia/type-guards");
10893
+ var import_jsx_runtime250 = require("react/jsx-runtime");
11257
10894
  var renderBrandmark = (brandmarkColor, iconOnly) => {
11258
10895
  if (iconOnly) {
11259
- return /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(
10896
+ return /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
11260
10897
  "g",
11261
10898
  {
11262
10899
  "data-testid": "ui-wistia-logo-brandmark",
11263
10900
  fill: brandmarkColor,
11264
- children: /* @__PURE__ */ (0, import_jsx_runtime260.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" })
10901
+ children: /* @__PURE__ */ (0, import_jsx_runtime250.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" })
11265
10902
  }
11266
10903
  );
11267
10904
  }
11268
- return /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(
10905
+ return /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
11269
10906
  "g",
11270
10907
  {
11271
10908
  "data-testid": "ui-wistia-logo-brandmark",
11272
10909
  fill: brandmarkColor,
11273
- children: /* @__PURE__ */ (0, import_jsx_runtime260.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" })
10910
+ children: /* @__PURE__ */ (0, import_jsx_runtime250.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" })
11274
10911
  }
11275
10912
  );
11276
10913
  };
@@ -11278,12 +10915,12 @@ var renderLogotype = (logotypeColor, iconOnly) => {
11278
10915
  if (iconOnly) {
11279
10916
  return null;
11280
10917
  }
11281
- return /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(
10918
+ return /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
11282
10919
  "g",
11283
10920
  {
11284
10921
  "data-testid": "ui-wistia-logo-logotype",
11285
10922
  fill: logotypeColor,
11286
- children: /* @__PURE__ */ (0, import_jsx_runtime260.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" })
10923
+ children: /* @__PURE__ */ (0, import_jsx_runtime250.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" })
11287
10924
  }
11288
10925
  );
11289
10926
  };
@@ -11293,7 +10930,7 @@ var computedViewBox = (iconOnly) => {
11293
10930
  }
11294
10931
  return "0 0 144 31.47";
11295
10932
  };
11296
- var WistiaLogoComponent = import_styled_components80.default.svg`
10933
+ var WistiaLogoComponent = import_styled_components70.default.svg`
11297
10934
  height: ${({ height }) => `${height}px`};
11298
10935
 
11299
10936
  /* ensure it will always fit on mobile */
@@ -11309,12 +10946,12 @@ var WistiaLogoComponent = import_styled_components80.default.svg`
11309
10946
  ${({ $opticallyCentered, $iconOnly }) => {
11310
10947
  if ($opticallyCentered) {
11311
10948
  if ($iconOnly) {
11312
- return import_styled_components80.css`
10949
+ return import_styled_components70.css`
11313
10950
  aspect-ratio: 1;
11314
10951
  padding: 11.85% 3.12% 13.91%;
11315
10952
  `;
11316
10953
  }
11317
- return import_styled_components80.css`
10954
+ return import_styled_components70.css`
11318
10955
  aspect-ratio: 127 / 32;
11319
10956
  `;
11320
10957
  }
@@ -11351,7 +10988,7 @@ var WistiaLogo = ({
11351
10988
  };
11352
10989
  const brandmarkColor = VARIANT_COLORS[variant].brandmark;
11353
10990
  const logotypeColor = VARIANT_COLORS[variant].logotype;
11354
- const Logo = /* @__PURE__ */ (0, import_jsx_runtime260.jsxs)(
10991
+ const Logo = /* @__PURE__ */ (0, import_jsx_runtime250.jsxs)(
11355
10992
  WistiaLogoComponent,
11356
10993
  {
11357
10994
  $hoverColor: hoverColor,
@@ -11364,16 +11001,258 @@ var WistiaLogo = ({
11364
11001
  xmlns: "http://www.w3.org/2000/svg",
11365
11002
  ...otherProps,
11366
11003
  children: [
11367
- /* @__PURE__ */ (0, import_jsx_runtime260.jsx)("title", { children: title }),
11368
- (0, import_type_guards43.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime260.jsx)("desc", { children: description }) : null,
11004
+ /* @__PURE__ */ (0, import_jsx_runtime250.jsx)("title", { children: title }),
11005
+ (0, import_type_guards42.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime250.jsx)("desc", { children: description }) : null,
11369
11006
  renderBrandmark(brandmarkColor, iconOnly),
11370
11007
  renderLogotype(logotypeColor, iconOnly)
11371
11008
  ]
11372
11009
  }
11373
11010
  );
11374
- return href !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime260.jsx)("a", { href, children: Logo }) : Logo;
11011
+ return href !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime250.jsx)("a", { href, children: Logo }) : Logo;
11375
11012
  };
11376
11013
  WistiaLogo.displayName = "WistiaLogo";
11014
+
11015
+ // src/components/Select/Select.tsx
11016
+ var import_react_select = require("@radix-ui/react-select");
11017
+ var import_react55 = require("react");
11018
+ var import_styled_components71 = __toESM(require("styled-components"));
11019
+ var import_jsx_runtime251 = require("react/jsx-runtime");
11020
+ var StyledTrigger = (0, import_styled_components71.default)(import_react_select.Trigger)`
11021
+ ${({ $colorScheme }) => getColorScheme($colorScheme)};
11022
+ --wui-select-color-bg: var(--wui-color-bg-surface);
11023
+ --wui-select-color-bg-disabled: var(--wui-color-bg-surface-disabled);
11024
+ --wui-select-color-border: var(--wui-color-border);
11025
+ --wui-select-color-border-focus: var(--wui-color-border-active);
11026
+ --wui-select-color-border-error: var(--wui-color-border-error);
11027
+ --wui-select-color-border-disabled: var(--wui-color-border-disabled);
11028
+ --wui-select-border-radius: var(--wui-border-radius-rounded);
11029
+ --wui-select-multiline-border-radius: var(--wui-border-radius-02);
11030
+ --wui-select-vertical-padding: var(--wui-space-02);
11031
+ --wui-select-horizontal-padding: var(--wui-space-03);
11032
+ --wui-select-placeholder: var(--wui-gray-10);
11033
+ --wui-select-color-text-error: var(--wui-color-text-error);
11034
+
11035
+ padding: var(--wui-select-vertical-padding) var(--wui-select-horizontal-padding);
11036
+ background-color: var(--wui-select-color-bg);
11037
+ border: 1px solid var(--wui-select-color-border);
11038
+ border-radius: var(--wui-select-border-radius);
11039
+ min-width: 200px;
11040
+ text-align: left;
11041
+ display: inline-flex;
11042
+ align-items: center;
11043
+ justify-content: space-between;
11044
+ max-width: 100%;
11045
+ width: ${({ $fullWidth = false }) => $fullWidth ? "100%" : "auto"};
11046
+
11047
+ > span {
11048
+ white-space: nowrap;
11049
+ text-overflow: ellipsis;
11050
+ overflow: hidden;
11051
+ }
11052
+
11053
+ &[aria-expanded='true'],
11054
+ &:focus {
11055
+ outline: 2px solid var(--wui-color-focus-ring);
11056
+ }
11057
+
11058
+ &[aria-invalid='true'] {
11059
+ outline: 2px solid var(--wui-select-color-border-error);
11060
+ color: var(--wui-select-color-text-error);
11061
+ }
11062
+
11063
+ &:disabled {
11064
+ border-color: var(--wui-color-bg-surface-disabled);
11065
+ background-color: var(--wui-color-bg-surface-disabled);
11066
+ }
11067
+ `;
11068
+ var StyledContent3 = (0, import_styled_components71.default)(import_react_select.Content)`
11069
+ --wui-select-content-border: var(--wui-color-border);
11070
+ --wui-select-content-bg: var(--wui-color-bg-surface);
11071
+ --wui-select-content-border-radius: var(--wui-border-radius-02);
11072
+ --wui-select-option-padding: var(--wui-space-02);
11073
+ --wui-select-option-inner-gap: var(--wui-space-03);
11074
+ --wui-select-option-bg-hover: var(--wui-color-bg-surface-hover);
11075
+
11076
+ overflow: hidden;
11077
+ transform: translateY(8px);
11078
+ background-color: var(--wui-select-content-bg);
11079
+ border: 1px solid var(--wui-select-content-border);
11080
+ border-radius: var(--wui-select-content-border-radius);
11081
+ padding: var(--wui-select-option-padding);
11082
+ min-width: var(--radix-select-trigger-width);
11083
+ max-height: var(--radix-select-content-available-height);
11084
+ z-index: var(--wui-zindex-select);
11085
+ `;
11086
+ var Select = (0, import_react55.forwardRef)(
11087
+ ({
11088
+ colorScheme = "inherit",
11089
+ children,
11090
+ onChange = () => null,
11091
+ placeholder = "Select...",
11092
+ fullWidth = false,
11093
+ ...props
11094
+ }, forwardedRef) => {
11095
+ const responsiveFullWidth = useResponsiveProp(fullWidth);
11096
+ return /* @__PURE__ */ (0, import_jsx_runtime251.jsxs)(
11097
+ import_react_select.Root,
11098
+ {
11099
+ ...props,
11100
+ onValueChange: onChange,
11101
+ children: [
11102
+ /* @__PURE__ */ (0, import_jsx_runtime251.jsxs)(
11103
+ StyledTrigger,
11104
+ {
11105
+ ref: forwardedRef,
11106
+ $colorScheme: colorScheme,
11107
+ $fullWidth: responsiveFullWidth,
11108
+ ...props,
11109
+ children: [
11110
+ /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(import_react_select.Value, { placeholder }),
11111
+ /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(
11112
+ Icon,
11113
+ {
11114
+ size: "md",
11115
+ type: "caret-down"
11116
+ }
11117
+ )
11118
+ ]
11119
+ }
11120
+ ),
11121
+ /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(import_react_select.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime251.jsxs)(StyledContent3, { position: "popper", children: [
11122
+ /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(import_react_select.ScrollUpButton, { children: /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(Icon, { type: "caret-up" }) }),
11123
+ /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(import_react_select.Viewport, { children }),
11124
+ /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(import_react_select.ScrollDownButton, { children: /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(Icon, { type: "caret-down" }) })
11125
+ ] }) })
11126
+ ]
11127
+ }
11128
+ );
11129
+ }
11130
+ );
11131
+ Select.displayName = "Select";
11132
+
11133
+ // src/components/Select/SelectOption.tsx
11134
+ var import_react_select2 = require("@radix-ui/react-select");
11135
+ var import_react56 = require("react");
11136
+ var import_styled_components72 = __toESM(require("styled-components"));
11137
+ var import_jsx_runtime252 = require("react/jsx-runtime");
11138
+ var StyledItem = (0, import_styled_components72.default)(import_react_select2.Item)`
11139
+ ${variantStyleMap2.body3};
11140
+ display: flex;
11141
+ padding: var(--wui-select-option-padding);
11142
+ gap: var(--wui-select-option-inner-gap);
11143
+ font-size: var(--font-size);
11144
+ font-weight: var(--font-weight);
11145
+ border-radius: var(--wui-border-radius-01);
11146
+
11147
+ &:hover,
11148
+ &:focus-visible {
11149
+ background-color: var(--wui-select-option-bg-hover);
11150
+ outline: none;
11151
+ }
11152
+
11153
+ &[aria-disabled='true'] {
11154
+ color: var(--wui-color-text-disabled);
11155
+ }
11156
+
11157
+ &[aria-disabled='true']:hover {
11158
+ background-color: transparent;
11159
+ }
11160
+ `;
11161
+ var StyledIconContainer = import_styled_components72.default.span`
11162
+ width: 12px;
11163
+ `;
11164
+ var SelectOption = (0, import_react56.forwardRef)(
11165
+ ({ children, ...props }, forwardedRef) => {
11166
+ return /* @__PURE__ */ (0, import_jsx_runtime252.jsxs)(
11167
+ StyledItem,
11168
+ {
11169
+ ...props,
11170
+ ref: forwardedRef,
11171
+ children: [
11172
+ /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(StyledIconContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(import_react_select2.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(
11173
+ Icon,
11174
+ {
11175
+ size: "sm",
11176
+ type: "checkmark"
11177
+ }
11178
+ ) }) }),
11179
+ /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(import_react_select2.ItemText, { children })
11180
+ ]
11181
+ }
11182
+ );
11183
+ }
11184
+ );
11185
+ SelectOption.displayName = "Option";
11186
+
11187
+ // src/components/Select/SelectOptionGroup.tsx
11188
+ var import_react_select3 = require("@radix-ui/react-select");
11189
+ var import_styled_components73 = __toESM(require("styled-components"));
11190
+ var import_jsx_runtime253 = require("react/jsx-runtime");
11191
+ var StyledLabel4 = (0, import_styled_components73.default)(import_react_select3.Label)`
11192
+ padding: var(--wui-select-option-padding);
11193
+ `;
11194
+ var SelectOptionGroup = ({ children, label, ...props }) => {
11195
+ return /* @__PURE__ */ (0, import_jsx_runtime253.jsxs)(import_react_select3.Group, { ...props, children: [
11196
+ /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(StyledLabel4, { children: /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(
11197
+ Text,
11198
+ {
11199
+ prominence: "secondary",
11200
+ variant: "body3",
11201
+ children: label
11202
+ }
11203
+ ) }),
11204
+ children
11205
+ ] });
11206
+ };
11207
+
11208
+ // src/components/Image/Image.tsx
11209
+ var import_styled_components74 = __toESM(require("styled-components"));
11210
+ var import_type_guards43 = require("@wistia/type-guards");
11211
+ var import_jsx_runtime254 = require("react/jsx-runtime");
11212
+ var getFillStyle2 = (fillContainer) => {
11213
+ if (fillContainer === "horizontal") {
11214
+ return "width: 100%;";
11215
+ }
11216
+ if (fillContainer === "vertical") {
11217
+ return "height: 100%;";
11218
+ }
11219
+ if (fillContainer === true) {
11220
+ return `
11221
+ width: 100%;
11222
+ height: 100%;
11223
+ `;
11224
+ }
11225
+ return void 0;
11226
+ };
11227
+ var StyledImage = import_styled_components74.default.img`
11228
+ border-radius: ${({ $borderRadius }) => (0, import_type_guards43.isNotNil)($borderRadius) ? `var(--wui-${$borderRadius})` : void 0};
11229
+ ${({ $fillContainer }) => getFillStyle2($fillContainer)};
11230
+ object-fit: ${({ $objFit }) => $objFit};
11231
+ object-position: ${({ $objPosition }) => $objPosition};
11232
+ `;
11233
+ var Image = ({
11234
+ src,
11235
+ alt,
11236
+ borderRadius,
11237
+ fill: fillContainer = false,
11238
+ fit: objFit,
11239
+ loading = "lazy",
11240
+ position: objPosition,
11241
+ ...otherProps
11242
+ }) => /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(
11243
+ StyledImage,
11244
+ {
11245
+ $borderRadius: borderRadius,
11246
+ $fillContainer: fillContainer,
11247
+ $objFit: objFit,
11248
+ $objPosition: objPosition,
11249
+ alt,
11250
+ loading,
11251
+ src,
11252
+ ...otherProps
11253
+ }
11254
+ );
11255
+ Image.displayName = "Image";
11377
11256
  // Annotate the CommonJS export names for ESM import in node:
11378
11257
  0 && (module.exports = {
11379
11258
  ActionButton,
@@ -11434,12 +11313,6 @@ WistiaLogo.displayName = "WistiaLogo";
11434
11313
  Stack,
11435
11314
  SubMenu,
11436
11315
  Tab,
11437
- Table,
11438
- TableBody,
11439
- TableCell,
11440
- TableFooter,
11441
- TableHead,
11442
- TableRow,
11443
11316
  Tabs,
11444
11317
  Tag,
11445
11318
  Text,