@wistia/ui 0.4.5-beta.6e03699d.b924d76 → 0.4.5-beta.e27ea928.c4e583e

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.cjs CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  /*
3
- * @license @wistia/ui v0.4.5-beta.6e03699d.b924d76
3
+ * @license @wistia/ui v0.4.5-beta.e27ea928.c4e583e
4
4
  *
5
5
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
6
6
  *
@@ -71,13 +71,10 @@ __export(index_exports, {
71
71
  MenuLabel: () => MenuLabel,
72
72
  MenuRadioGroup: () => MenuRadioGroup,
73
73
  Modal: () => Modal,
74
- Option: () => Option,
75
- OptionGroup: () => OptionGroup,
76
74
  Radio: () => Radio,
77
75
  RadioGroup: () => RadioGroup,
78
76
  RadioMenuItem: () => RadioMenuItem,
79
77
  ScreenReaderOnly: () => ScreenReaderOnly,
80
- Select: () => Select,
81
78
  Stack: () => Stack,
82
79
  SubMenu: () => SubMenu,
83
80
  Tag: () => Tag,
@@ -7811,8 +7808,8 @@ var StyledSubTrigger = (0, import_styled_components43.default)(import_react_drop
7811
7808
  `;
7812
7809
  var SubMenuTrigger = (props) => {
7813
7810
  const { isSmAndUp } = useMq();
7814
- const Trigger3 = isSmAndUp ? StyledSubTrigger : import_react_dropdown_menu3.DropdownMenuItem;
7815
- return /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(Trigger3, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
7811
+ const Trigger2 = isSmAndUp ? StyledSubTrigger : import_react_dropdown_menu3.DropdownMenuItem;
7812
+ return /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(Trigger2, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
7816
7813
  MenuItemButton,
7817
7814
  {
7818
7815
  ...props,
@@ -8773,190 +8770,6 @@ var WistiaLogo = ({
8773
8770
  return href !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime205.jsx)("a", { href, children: Logo }) : Logo;
8774
8771
  };
8775
8772
  WistiaLogo.displayName = "WistiaLogo";
8776
-
8777
- // src/components/Select/Select.tsx
8778
- var import_react_select = require("@radix-ui/react-select");
8779
- var import_react39 = require("react");
8780
- var import_styled_components54 = __toESM(require("styled-components"));
8781
- var import_jsx_runtime206 = require("react/jsx-runtime");
8782
- var StyledTrigger = (0, import_styled_components54.default)(import_react_select.Trigger)`
8783
- ${({ $colorScheme }) => getColorScheme($colorScheme)};
8784
-
8785
- --wui-select-color-bg: var(--wui-color-bg-surface);
8786
- --wui-select-color-bg-disabled: var(--wui-color-bg-surface-disabled);
8787
- --wui-select-color-border: var(--wui-color-border);
8788
- --wui-select-color-border-focus: var(--wui-color-border-active);
8789
- --wui-select-color-border-error: var(--wui-color-border-error);
8790
- --wui-select-color-border-disabled: var(--wui-color-border-disabled);
8791
- --wui-select-border-radius: var(--wui-border-radius-rounded);
8792
- --wui-select-multiline-border-radius: var(--wui-border-radius-02);
8793
- --wui-select-vertical-padding: var(--wui-space-02);
8794
- --wui-select-horizontal-padding: var(--wui-space-03);
8795
- --wui-select-placeholder: var(--wui-gray-10);
8796
- --wui-select-color-text-error: var(--wui-color-text-error);
8797
-
8798
- padding: var(--wui-select-vertical-padding) var(--wui-select-horizontal-padding);
8799
- background-color: var(--wui-select-color-bg);
8800
- border: 1px solid var(--wui-select-color-border);
8801
- border-radius: var(--wui-select-border-radius);
8802
- min-width: 200px;
8803
- text-align: left;
8804
- display: inline-flex;
8805
- align-items: center;
8806
- justify-content: space-between;
8807
- width: ${({ $fullWidth = false }) => $fullWidth ? "100%" : "auto"};
8808
-
8809
- &[aria-expanded='true'],
8810
- &:focus {
8811
- outline: 2px solid var(--wui-color-focus-ring);
8812
- }
8813
-
8814
- &[aria-invalid='true'] {
8815
- outline: 2px solid var(--wui-select-color-border-error);
8816
- color: var(--wui-select-color-text-error);
8817
- }
8818
-
8819
- &:disabled {
8820
- border-color: var(--wui-color-bg-surface-disabled);
8821
- background-color: var(--wui-color-bg-surface-disabled);
8822
- }
8823
- `;
8824
- var StyledContent2 = (0, import_styled_components54.default)(import_react_select.Content)`
8825
- --wui-select-content-border: var(--wui-color-border);
8826
- --wui-select-content-bg: var(--wui-color-bg-surface);
8827
- --wui-select-content-border-radius: var(--wui-border-radius-02);
8828
- --wui-select-option-padding: var(--wui-space-02);
8829
- --wui-select-option-inner-gap: var(--wui-space-03);
8830
- --wui-select-option-bg-hover: var(--wui-color-bg-surface-hover);
8831
- overflow: hidden;
8832
- transform: translateY(8px);
8833
- background-color: var(--wui-select-content-bg);
8834
- border: 1px solid var(--wui-select-content-border);
8835
- border-radius: var(--wui-select-content-border-radius);
8836
- padding: var(--wui-select-option-padding);
8837
- min-width: 200px;
8838
- `;
8839
- var Select = (0, import_react39.forwardRef)(
8840
- ({
8841
- colorScheme = "inherit",
8842
- children,
8843
- onChange = () => null,
8844
- placeholder = "Select...",
8845
- fullWidth = false,
8846
- ...props
8847
- }, forwardedRef) => {
8848
- const responsiveFullWidth = useResponsiveProp(fullWidth);
8849
- return /* @__PURE__ */ (0, import_jsx_runtime206.jsxs)(
8850
- import_react_select.Root,
8851
- {
8852
- ...props,
8853
- onValueChange: onChange,
8854
- children: [
8855
- /* @__PURE__ */ (0, import_jsx_runtime206.jsxs)(
8856
- StyledTrigger,
8857
- {
8858
- ref: forwardedRef,
8859
- $colorScheme: colorScheme,
8860
- $fullWidth: responsiveFullWidth,
8861
- ...props,
8862
- children: [
8863
- /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(import_react_select.Value, { placeholder }),
8864
- /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(
8865
- Icon,
8866
- {
8867
- size: "md",
8868
- type: "caret-down"
8869
- }
8870
- )
8871
- ]
8872
- }
8873
- ),
8874
- /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(import_react_select.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime206.jsxs)(StyledContent2, { position: "popper", children: [
8875
- /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(import_react_select.ScrollUpButton, { children: /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(Icon, { type: "caret-up" }) }),
8876
- /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(import_react_select.Viewport, { children }),
8877
- /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(import_react_select.ScrollDownButton, { children: /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(Icon, { type: "caret-down" }) })
8878
- ] }) })
8879
- ]
8880
- }
8881
- );
8882
- }
8883
- );
8884
- Select.displayName = "Select";
8885
-
8886
- // src/components/Select/Option.tsx
8887
- var import_react_select2 = require("@radix-ui/react-select");
8888
- var import_react40 = require("react");
8889
- var import_styled_components55 = __toESM(require("styled-components"));
8890
- var import_jsx_runtime207 = require("react/jsx-runtime");
8891
- var StyledItem = (0, import_styled_components55.default)(import_react_select2.Item)`
8892
- ${variantStyleMap2.body3};
8893
- display: flex;
8894
- padding: var(--wui-select-option-padding);
8895
- gap: var(--wui-select-option-inner-gap);
8896
- font-size: var(--font-size);
8897
- font-weight: var(--font-weight);
8898
- border-radius: var(--wui-border-radius-01);
8899
-
8900
- &:hover,
8901
- &:focus-visible {
8902
- background-color: var(--wui-select-option-bg-hover);
8903
- outline: none;
8904
- }
8905
-
8906
- &[aria-disabled='true'] {
8907
- color: var(--wui-color-text-disabled);
8908
- }
8909
-
8910
- &[aria-disabled='true']:hover {
8911
- background-color: transparent;
8912
- }
8913
- `;
8914
- var StyledIconContainer = import_styled_components55.default.span`
8915
- width: 12px;
8916
- `;
8917
- var Option = (0, import_react40.forwardRef)(
8918
- ({ children, ...props }, forwardedRef) => {
8919
- return /* @__PURE__ */ (0, import_jsx_runtime207.jsxs)(
8920
- StyledItem,
8921
- {
8922
- ...props,
8923
- ref: forwardedRef,
8924
- children: [
8925
- /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(StyledIconContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(import_react_select2.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(
8926
- Icon,
8927
- {
8928
- size: "sm",
8929
- type: "checkmark"
8930
- }
8931
- ) }) }),
8932
- /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(import_react_select2.ItemText, { children })
8933
- ]
8934
- }
8935
- );
8936
- }
8937
- );
8938
- Option.displayName = "Option";
8939
-
8940
- // src/components/Select/OptionGroup.tsx
8941
- var import_react_select3 = require("@radix-ui/react-select");
8942
- var import_styled_components56 = __toESM(require("styled-components"));
8943
- var import_jsx_runtime208 = require("react/jsx-runtime");
8944
- var StyledLabel3 = (0, import_styled_components56.default)(import_react_select3.Label)`
8945
- padding: var(--wui-select-option-padding);
8946
- `;
8947
- var OptionGroup = ({ children, label, ...props }) => {
8948
- return /* @__PURE__ */ (0, import_jsx_runtime208.jsxs)(import_react_select3.Group, { ...props, children: [
8949
- /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(StyledLabel3, { children: /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(
8950
- Text,
8951
- {
8952
- prominence: "secondary",
8953
- variant: "body3",
8954
- children: label
8955
- }
8956
- ) }),
8957
- children
8958
- ] });
8959
- };
8960
8773
  // Annotate the CommonJS export names for ESM import in node:
8961
8774
  0 && (module.exports = {
8962
8775
  ActionButton,
@@ -8991,13 +8804,10 @@ var OptionGroup = ({ children, label, ...props }) => {
8991
8804
  MenuLabel,
8992
8805
  MenuRadioGroup,
8993
8806
  Modal,
8994
- Option,
8995
- OptionGroup,
8996
8807
  Radio,
8997
8808
  RadioGroup,
8998
8809
  RadioMenuItem,
8999
8810
  ScreenReaderOnly,
9000
- Select,
9001
8811
  Stack,
9002
8812
  SubMenu,
9003
8813
  Tag,