@wistia/ui 0.4.8-beta.f2d03166.7c06caa → 0.4.8

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