@wistia/ui 0.4.10-beta.ec177e4f.e232e9c → 0.4.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.mjs CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  /*
3
- * @license @wistia/ui v0.4.10-beta.ec177e4f.e232e9c
3
+ * @license @wistia/ui v0.4.10
4
4
  *
5
5
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
6
6
  *
@@ -5975,7 +5975,7 @@ var Badge = forwardRef4(
5975
5975
  Badge.displayName = "Badge";
5976
5976
 
5977
5977
  // src/components/Box/Box.tsx
5978
- import { Children, cloneElement as cloneElement2, forwardRef as forwardRef5 } from "react";
5978
+ import { Children, cloneElement as cloneElement2 } from "react";
5979
5979
  import styled10 from "styled-components";
5980
5980
  import { isNotNil as isNotNil7, isNil as isNil7, isRecord as isRecord3 } from "@wistia/type-guards";
5981
5981
  import { jsx as jsx167 } from "react/jsx-runtime";
@@ -6055,52 +6055,49 @@ var wrapChildren = (children) => {
6055
6055
  }
6056
6056
  return null;
6057
6057
  };
6058
- var Box = forwardRef5(
6059
- ({
6060
- alignContent = "stretch",
6061
- alignItems = "flex-start",
6062
- alignSelf,
6063
- basis,
6064
- children,
6065
- direction = "row",
6066
- fill = false,
6067
- fillViewport = false,
6068
- gap,
6069
- grow,
6070
- hasBoxParent = false,
6071
- // eslint-disable-line @typescript-eslint/no-unused-vars
6072
- inline = false,
6073
- justifyContent = "flex-start",
6074
- order,
6075
- shrink,
6076
- wrapItems = false,
6077
- ...otherProps
6078
- }, ref) => {
6079
- return /* @__PURE__ */ jsx167(
6080
- BoxComponent,
6081
- {
6082
- ref,
6083
- $alignContent: alignContent,
6084
- $alignItems: alignItems,
6085
- $alignSelf: alignSelf,
6086
- $basis: basis,
6087
- $fillBox: fill,
6088
- $fillViewport: fillViewport,
6089
- $flexDirection: direction,
6090
- $gap: gap,
6091
- $grow: grow,
6092
- $inline: inline,
6093
- $justifyContent: justifyContent,
6094
- $order: order,
6095
- $shrink: shrink,
6096
- $wrapItems: wrapItems,
6097
- as: "div",
6098
- ...otherProps,
6099
- children: wrapChildren(children)
6100
- }
6101
- );
6102
- }
6103
- );
6058
+ var Box = ({
6059
+ alignContent = "stretch",
6060
+ alignItems = "flex-start",
6061
+ alignSelf,
6062
+ basis,
6063
+ children,
6064
+ direction = "row",
6065
+ fill = false,
6066
+ fillViewport = false,
6067
+ gap,
6068
+ grow,
6069
+ hasBoxParent = false,
6070
+ // eslint-disable-line @typescript-eslint/no-unused-vars
6071
+ inline = false,
6072
+ justifyContent = "flex-start",
6073
+ order,
6074
+ shrink,
6075
+ wrapItems = false,
6076
+ ...otherProps
6077
+ }) => {
6078
+ return /* @__PURE__ */ jsx167(
6079
+ BoxComponent,
6080
+ {
6081
+ $alignContent: alignContent,
6082
+ $alignItems: alignItems,
6083
+ $alignSelf: alignSelf,
6084
+ $basis: basis,
6085
+ $fillBox: fill,
6086
+ $fillViewport: fillViewport,
6087
+ $flexDirection: direction,
6088
+ $gap: gap,
6089
+ $grow: grow,
6090
+ $inline: inline,
6091
+ $justifyContent: justifyContent,
6092
+ $order: order,
6093
+ $shrink: shrink,
6094
+ $wrapItems: wrapItems,
6095
+ as: "div",
6096
+ ...otherProps,
6097
+ children: wrapChildren(children)
6098
+ }
6099
+ );
6100
+ };
6104
6101
  Box.displayName = "Box";
6105
6102
 
6106
6103
  // src/components/Breadcrumbs/Breadcrumbs.tsx
@@ -6260,7 +6257,7 @@ var Card = ({
6260
6257
  Card.displayName = "Card";
6261
6258
 
6262
6259
  // src/components/Checkbox/Checkbox.tsx
6263
- import { forwardRef as forwardRef7, useId } from "react";
6260
+ import { forwardRef as forwardRef6, useId } from "react";
6264
6261
  import { Root as CheckboxRoot, Indicator as CheckboxIndicator } from "@radix-ui/react-checkbox";
6265
6262
  import styled17 from "styled-components";
6266
6263
  import { isNonEmptyString as isNonEmptyString2 } from "@wistia/type-guards";
@@ -6269,7 +6266,7 @@ import { isNonEmptyString as isNonEmptyString2 } from "@wistia/type-guards";
6269
6266
  import styled15, { css as css16 } from "styled-components";
6270
6267
 
6271
6268
  // src/components/Heading/Heading.tsx
6272
- import { forwardRef as forwardRef6 } from "react";
6269
+ import { forwardRef as forwardRef5 } from "react";
6273
6270
  import styled14, { css as css15 } from "styled-components";
6274
6271
 
6275
6272
  // src/private/helpers/makePolymorphic/makePolymorphic.tsx
@@ -6363,7 +6360,7 @@ var variantElementMap = {
6363
6360
  heading5: "h5",
6364
6361
  heading6: "h6"
6365
6362
  };
6366
- var HeadingComponent = forwardRef6(
6363
+ var HeadingComponent = forwardRef5(
6367
6364
  ({
6368
6365
  align = "left",
6369
6366
  colorScheme = "inherit",
@@ -6544,7 +6541,7 @@ var StyledLabelWrapper = styled17.div`
6544
6541
  flex-direction: column;
6545
6542
  margin-left: var(--wui-space-02);
6546
6543
  `;
6547
- var Checkbox = forwardRef7(
6544
+ var Checkbox = forwardRef6(
6548
6545
  ({
6549
6546
  checked,
6550
6547
  disabled = false,
@@ -6650,12 +6647,12 @@ var Divider = ({
6650
6647
  Divider.displayName = "Divider";
6651
6648
 
6652
6649
  // src/components/Form/Form.tsx
6653
- import { forwardRef as forwardRef9, useRef as useRef3, useMemo as useMemo4, createContext as createContext2, useState as useState5, useId as useId2 } from "react";
6650
+ import { forwardRef as forwardRef8, useRef as useRef3, useMemo as useMemo4, createContext as createContext2, useState as useState5, useId as useId2 } from "react";
6654
6651
  import styled20 from "styled-components";
6655
6652
  import { isNotUndefined as isNotUndefined4, isUndefined as isUndefined3 } from "@wistia/type-guards";
6656
6653
 
6657
6654
  // src/components/Stack/Stack.tsx
6658
- import { forwardRef as forwardRef8 } from "react";
6655
+ import { forwardRef as forwardRef7 } from "react";
6659
6656
  import styled19 from "styled-components";
6660
6657
  import { jsx as jsx177 } from "react/jsx-runtime";
6661
6658
  var DEFAULT_ELEMENT2 = "div";
@@ -6664,7 +6661,7 @@ var StyledStack = styled19.div`
6664
6661
  flex-direction: ${({ $direction }) => $direction === "horizontal" ? "row" : "column"};
6665
6662
  gap: ${({ $gap }) => `var(--wui-${$gap})`};
6666
6663
  `;
6667
- var StackComponent = forwardRef8(
6664
+ var StackComponent = forwardRef7(
6668
6665
  ({ renderAs, direction = "vertical", gap = "space-02", ...props }, ref) => {
6669
6666
  const responsiveGap = useResponsiveProp(gap);
6670
6667
  const responsiveDirection = useResponsiveProp(direction);
@@ -6772,7 +6769,7 @@ var FormComponent = ({ children, action, values = {}, validate, fullWidth = fals
6772
6769
  );
6773
6770
  };
6774
6771
  FormComponent.displayName = "Form";
6775
- var Form = forwardRef9(FormComponent);
6772
+ var Form = forwardRef8(FormComponent);
6776
6773
 
6777
6774
  // src/components/Form/useFormState.tsx
6778
6775
  import { useCallback as useCallback5, useState as useState6 } from "react";
@@ -6854,7 +6851,7 @@ import styled23 from "styled-components";
6854
6851
  import { isArray as isArray2, isNotNil as isNotNil8, isNotUndefined as isNotUndefined6, isUndefined as isUndefined4 } from "@wistia/type-guards";
6855
6852
 
6856
6853
  // src/components/Text/Text.tsx
6857
- import { forwardRef as forwardRef10 } from "react";
6854
+ import { forwardRef as forwardRef9 } from "react";
6858
6855
  import styled21, { css as css18 } from "styled-components";
6859
6856
  import { jsx as jsx180 } from "react/jsx-runtime";
6860
6857
  var bodyBoldStyles = css18`
@@ -6996,7 +6993,7 @@ var StyledText = styled21.div`
6996
6993
  `}
6997
6994
  `;
6998
6995
  var DEFAULT_ELEMENT3 = "div";
6999
- var TextComponent = forwardRef10(
6996
+ var TextComponent = forwardRef9(
7000
6997
  ({
7001
6998
  align = "left",
7002
6999
  colorScheme = "inherit",
@@ -7210,7 +7207,7 @@ var RadioGroup = ({
7210
7207
  RadioGroup.displayName = "RadioGroup";
7211
7208
 
7212
7209
  // src/components/IconButton/IconButton.tsx
7213
- import { Children as Children3, cloneElement as cloneElement4, forwardRef as forwardRef11 } from "react";
7210
+ import { Children as Children3, cloneElement as cloneElement4, forwardRef as forwardRef10 } from "react";
7214
7211
  import styled24 from "styled-components";
7215
7212
  import { jsx as jsx185 } from "react/jsx-runtime";
7216
7213
  var StyledButton2 = styled24(Button)`
@@ -7227,7 +7224,7 @@ var StyledButton2 = styled24(Button)`
7227
7224
  align-items: center;
7228
7225
  line-height: 1;
7229
7226
  `;
7230
- var IconButton = forwardRef11(
7227
+ var IconButton = forwardRef10(
7231
7228
  ({ children, label, size = "md", ...props }, ref) => {
7232
7229
  const responsiveSize = useResponsiveProp(size);
7233
7230
  return /* @__PURE__ */ jsx185(
@@ -7248,7 +7245,7 @@ var IconButton = forwardRef11(
7248
7245
  IconButton.displayName = "IconButton";
7249
7246
 
7250
7247
  // src/components/Input/Input.tsx
7251
- import { forwardRef as forwardRef12, cloneElement as cloneElement5, useRef as useRef6 } from "react";
7248
+ import { forwardRef as forwardRef11, cloneElement as cloneElement5, useRef as useRef6 } from "react";
7252
7249
  import styled25, { css as css19 } from "styled-components";
7253
7250
  import { isNil as isNil10, isNotNil as isNotNil9 } from "@wistia/type-guards";
7254
7251
  import { jsx as jsx186, jsxs as jsxs14 } from "react/jsx-runtime";
@@ -7340,7 +7337,7 @@ var StyledInputContainer = styled25.div`
7340
7337
  var isValidRef = (ref) => {
7341
7338
  return typeof ref === "object" && ref !== null && "current" in ref && isNotNil9(ref.current);
7342
7339
  };
7343
- var Input = forwardRef12(
7340
+ var Input = forwardRef11(
7344
7341
  ({
7345
7342
  fullWidth = false,
7346
7343
  monospace = false,
@@ -7614,7 +7611,7 @@ import {
7614
7611
  import { isNotNil as isNotNil12 } from "@wistia/type-guards";
7615
7612
 
7616
7613
  // src/components/Menu/MenuItemButton.tsx
7617
- import { forwardRef as forwardRef13 } from "react";
7614
+ import { forwardRef as forwardRef12 } from "react";
7618
7615
  import styled28 from "styled-components";
7619
7616
  import { isNotNil as isNotNil11, isNotUndefined as isNotUndefined8 } from "@wistia/type-guards";
7620
7617
  import { jsx as jsx189, jsxs as jsxs16 } from "react/jsx-runtime";
@@ -7686,7 +7683,7 @@ var StyledBadgeContainer = styled28.div`
7686
7683
  font-size: var(--wui-typography-label-4-size);
7687
7684
  color: var(--wui-color-text-secondary);
7688
7685
  `;
7689
- var MenuItemButton = forwardRef13(({ children, appearance, command, icon, ...props }, ref) => {
7686
+ var MenuItemButton = forwardRef12(({ children, appearance, command, icon, ...props }, ref) => {
7690
7687
  let { colorScheme, badge } = props;
7691
7688
  if (appearance === "dangerous") {
7692
7689
  if (isNotUndefined8(colorScheme)) {
@@ -7810,10 +7807,10 @@ var SubMenu = ({
7810
7807
  SubMenu.displayName = "SubMenu";
7811
7808
 
7812
7809
  // src/components/Menu/MenuItem.tsx
7813
- import { forwardRef as forwardRef14 } from "react";
7810
+ import { forwardRef as forwardRef13 } from "react";
7814
7811
  import { DropdownMenuItem as DropdownMenuItem2 } from "@radix-ui/react-dropdown-menu";
7815
7812
  import { jsx as jsx192 } from "react/jsx-runtime";
7816
- var MenuItem = forwardRef14(
7813
+ var MenuItem = forwardRef13(
7817
7814
  ({ onSelect = () => null, ...props }, ref) => {
7818
7815
  return /* @__PURE__ */ jsx192(
7819
7816
  DropdownMenuItem2,
@@ -7970,7 +7967,7 @@ var CheckboxMenuItem = ({
7970
7967
  CheckboxMenuItem.displayName = "CheckboxMenuItem";
7971
7968
 
7972
7969
  // src/components/Modal/Modal.tsx
7973
- import { forwardRef as forwardRef17 } from "react";
7970
+ import { forwardRef as forwardRef16 } from "react";
7974
7971
  import styled36 from "styled-components";
7975
7972
  import { Root as DialogRoot, Portal as DialogPortal } from "@radix-ui/react-dialog";
7976
7973
  import { isNotNil as isNotNil15 } from "@wistia/type-guards";
@@ -8053,7 +8050,7 @@ var ModalHeader = ({
8053
8050
  };
8054
8051
 
8055
8052
  // src/components/Modal/ModalContent.tsx
8056
- import { forwardRef as forwardRef15 } from "react";
8053
+ import { forwardRef as forwardRef14 } from "react";
8057
8054
  import styled34 from "styled-components";
8058
8055
  import { Content as DialogContent } from "@radix-ui/react-dialog";
8059
8056
 
@@ -8118,7 +8115,7 @@ var StyledModalContent = styled34(DialogContent)`
8118
8115
  }
8119
8116
  }
8120
8117
  `;
8121
- var ModalContent = forwardRef15(
8118
+ var ModalContent = forwardRef14(
8122
8119
  ({ fullHeight, width, children, ...otherProps }, ref) => {
8123
8120
  useFocusRestore();
8124
8121
  return /* @__PURE__ */ jsx199(
@@ -8127,7 +8124,6 @@ var ModalContent = forwardRef15(
8127
8124
  ref,
8128
8125
  $fullHeight: fullHeight,
8129
8126
  $width: width,
8130
- "aria-describedby": void 0,
8131
8127
  ...otherProps,
8132
8128
  children
8133
8129
  }
@@ -8136,7 +8132,7 @@ var ModalContent = forwardRef15(
8136
8132
  );
8137
8133
 
8138
8134
  // src/private/components/Backdrop/Backdrop.tsx
8139
- import { forwardRef as forwardRef16 } from "react";
8135
+ import { forwardRef as forwardRef15 } from "react";
8140
8136
  import styled35 from "styled-components";
8141
8137
  import { jsx as jsx200 } from "react/jsx-runtime";
8142
8138
  var backdropAnimationDuration = 150;
@@ -8174,7 +8170,7 @@ var BackdropComponent = styled35.div`
8174
8170
  }
8175
8171
  }
8176
8172
  `;
8177
- var Backdrop = forwardRef16(
8173
+ var Backdrop = forwardRef15(
8178
8174
  ({ alignHorizontal = "center", alignVertical = "center", children, ...otherProps }, ref) => /* @__PURE__ */ jsx200(
8179
8175
  BackdropComponent,
8180
8176
  {
@@ -8195,7 +8191,7 @@ var ModalBody = styled36.div`
8195
8191
  display: flex;
8196
8192
  order: 2;
8197
8193
  `;
8198
- var Modal = forwardRef17(
8194
+ var Modal = forwardRef16(
8199
8195
  ({
8200
8196
  children,
8201
8197
  fullHeight = false,
@@ -8223,6 +8219,7 @@ var Modal = forwardRef17(
8223
8219
  ModalContent,
8224
8220
  {
8225
8221
  ref,
8222
+ "aria-describedby": void 0,
8226
8223
  fullHeight,
8227
8224
  onOpenAutoFocus: (event) => {
8228
8225
  if (isNotNil15(initialFocusRef) && initialFocusRef.current) {
@@ -8255,7 +8252,7 @@ var Modal = forwardRef17(
8255
8252
  Modal.displayName = "Modal";
8256
8253
 
8257
8254
  // src/components/Radio/Radio.tsx
8258
- import { forwardRef as forwardRef18, useId as useId3 } from "react";
8255
+ import { forwardRef as forwardRef17, useId as useId3 } from "react";
8259
8256
  import styled37, { css as css21 } from "styled-components";
8260
8257
  import { isNonEmptyString as isNonEmptyString3 } from "@wistia/type-guards";
8261
8258
  import { jsx as jsx202, jsxs as jsxs22 } from "react/jsx-runtime";
@@ -8329,7 +8326,7 @@ var StyledRadioWrapper = styled37.div`
8329
8326
 
8330
8327
  ${({ disabled }) => disabled && disabledStyle2};
8331
8328
  `;
8332
- var Radio = forwardRef18(
8329
+ var Radio = forwardRef17(
8333
8330
  ({
8334
8331
  checked,
8335
8332
  disabled = false,
@@ -8385,7 +8382,7 @@ var Radio = forwardRef18(
8385
8382
  Radio.displayName = "Radio";
8386
8383
 
8387
8384
  // src/components/SegmentedControl/SegmentedControl.tsx
8388
- import { forwardRef as forwardRef19 } from "react";
8385
+ import { forwardRef as forwardRef18 } from "react";
8389
8386
  import styled38 from "styled-components";
8390
8387
  import { Root as ToggleGroupRoot } from "@radix-ui/react-toggle-group";
8391
8388
  import { isNil as isNil11 } from "@wistia/type-guards";
@@ -8398,7 +8395,7 @@ var StyledSegmentedControl = styled38(ToggleGroupRoot)`
8398
8395
  gap: var(--wui-space-01);
8399
8396
  width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
8400
8397
  `;
8401
- var SegmentedControl = forwardRef19(
8398
+ var SegmentedControl = forwardRef18(
8402
8399
  ({
8403
8400
  children,
8404
8401
  disabled = false,
@@ -8430,7 +8427,7 @@ var SegmentedControl = forwardRef19(
8430
8427
  SegmentedControl.displayName = "SegmentedControl";
8431
8428
 
8432
8429
  // src/components/SegmentedControl/SegmentedControlItem.tsx
8433
- import { forwardRef as forwardRef20 } from "react";
8430
+ import { forwardRef as forwardRef19 } from "react";
8434
8431
  import styled39 from "styled-components";
8435
8432
  import { Item as ToggleGroupItem } from "@radix-ui/react-toggle-group";
8436
8433
  import { isNotNil as isNotNil16 } from "@wistia/type-guards";
@@ -8487,7 +8484,7 @@ var StyledSegmentedControlItem = styled39(ToggleGroupItem)`
8487
8484
  }
8488
8485
  }
8489
8486
  `;
8490
- var SegmentedControlItem = forwardRef20(
8487
+ var SegmentedControlItem = forwardRef19(
8491
8488
  ({ disabled, icon, label, "aria-label": ariaLabel, value }, ref) => {
8492
8489
  const handleClick = (event) => {
8493
8490
  const target = event.target;
@@ -8516,7 +8513,7 @@ var SegmentedControlItem = forwardRef20(
8516
8513
  SegmentedControlItem.displayName = "SegmentedControlItem";
8517
8514
 
8518
8515
  // src/components/Tag/Tag.tsx
8519
- import { forwardRef as forwardRef21 } from "react";
8516
+ import { forwardRef as forwardRef20 } from "react";
8520
8517
  import styled40 from "styled-components";
8521
8518
  import { isNil as isNil12, isNotNil as isNotNil17, isNonEmptyString as isNonEmptyString4 } from "@wistia/type-guards";
8522
8519
  import { Fragment as Fragment3, jsx as jsx204, jsxs as jsxs24 } from "react/jsx-runtime";
@@ -8622,7 +8619,7 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
8622
8619
  )
8623
8620
  ] });
8624
8621
  };
8625
- var Tag = forwardRef21(
8622
+ var Tag = forwardRef20(
8626
8623
  ({ onClickRemove, colorScheme = "inherit", href, label, onClickRemoveLabel, ...otherProps }, ref) => {
8627
8624
  const labelProps = isNotNil17(href) && isNonEmptyString4(href) ? { href, as: "a" } : { as: "span" };
8628
8625
  return /* @__PURE__ */ jsxs24(
@@ -8883,7 +8880,7 @@ import {
8883
8880
  Value,
8884
8881
  ScrollDownButton
8885
8882
  } from "@radix-ui/react-select";
8886
- import { forwardRef as forwardRef22 } from "react";
8883
+ import { forwardRef as forwardRef21 } from "react";
8887
8884
  import styled43 from "styled-components";
8888
8885
  import { jsx as jsx207, jsxs as jsxs27 } from "react/jsx-runtime";
8889
8886
  var StyledTrigger = styled43(Trigger2)`
@@ -8943,7 +8940,7 @@ var StyledContent2 = styled43(Content2)`
8943
8940
  padding: var(--wui-select-option-padding);
8944
8941
  min-width: 200px;
8945
8942
  `;
8946
- var Select = forwardRef22(
8943
+ var Select = forwardRef21(
8947
8944
  ({
8948
8945
  colorScheme = "inherit",
8949
8946
  children,
@@ -8992,7 +8989,7 @@ Select.displayName = "Select";
8992
8989
 
8993
8990
  // src/components/Select/SelectOption.tsx
8994
8991
  import { Item, ItemText, ItemIndicator } from "@radix-ui/react-select";
8995
- import { forwardRef as forwardRef23 } from "react";
8992
+ import { forwardRef as forwardRef22 } from "react";
8996
8993
  import styled44 from "styled-components";
8997
8994
  import { jsx as jsx208, jsxs as jsxs28 } from "react/jsx-runtime";
8998
8995
  var StyledItem = styled44(Item)`
@@ -9021,7 +9018,7 @@ var StyledItem = styled44(Item)`
9021
9018
  var StyledIconContainer = styled44.span`
9022
9019
  width: 12px;
9023
9020
  `;
9024
- var SelectOption = forwardRef23(
9021
+ var SelectOption = forwardRef22(
9025
9022
  ({ children, ...props }, forwardedRef) => {
9026
9023
  return /* @__PURE__ */ jsxs28(
9027
9024
  StyledItem,