@strapi/design-system 1.9.0 → 1.10.0

package/dist/Select/SelectList.js

@@ -1,85 +1,150 @@
-import { jsx as A } from "react/jsx-runtime";
-import * as b from "react";
-import { compute as S } from "compute-scroll-into-view";
-import { KeyboardKeys as u } from "../helpers/keyboardKeys.js";
-import { Flex as h } from "../Flex/Flex.js";
-const g = {
-  Keyboard: "down:keyboard",
-  Mouse: "down:mouse"
-}, m = { Keyboard: "up:keyboard", Mouse: "up:mouse" };
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const computeScrollIntoView = require('compute-scroll-into-view');
+const keyboardKeys = require('../helpers/keyboardKeys.js');
+const Flex = require('../Flex/Flex.js');
+
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+    if (e) {
+        for (const k in e) {
+            if (k !== 'default') {
+                const d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: () => e[k]
+                });
+            }
+        }
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+const React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+const DownState = {
+    Keyboard: 'down:keyboard',
+    Mouse: 'down:mouse',
+};
+const UpState = { Keyboard: 'up:keyboard', Mouse: 'up:mouse' };
 /**
  * @preserve
  * @deprecated This component will be removed in the next major release.
  * If you need a custom listbox I would recommend opening a new issue.
  */
-const E = ({ labelledBy: r, onSelectItem: e, children: c, multi: s = !1, onEscape: t, expanded: f }) => {
-  const o = K(f);
-  return A(h, { as: "ul", gap: 1, direction: "column", alignItems: "stretch", role: "listbox", "aria-labelledby": r, tabIndex: -1, ref: o, onKeyDown: (i) => {
-    switch (i.key) {
-      case u.ESCAPE: {
-        i.stopPropagation(), t();
-        break;
-      }
-      case u.DOWN: {
-        i.preventDefault();
-        const n = y(o.current);
-        if (!n)
-          return;
-        const a = n.nextSibling;
-        if (a)
-          l(o.current, a);
-        else {
-          const d = o.current.querySelectorAll('[role="option"]')[0];
-          l(o.current, d);
+const SelectList = ({ labelledBy, onSelectItem, children, multi = false, onEscape, expanded, }) => {
+    const listRef = useListRef(expanded);
+    const handleKeyDown = (e) => {
+        switch (e.key) {
+            case keyboardKeys.KeyboardKeys.ESCAPE: {
+                e.stopPropagation();
+                onEscape();
+                break;
+            }
+            case keyboardKeys.KeyboardKeys.DOWN: {
+                e.preventDefault();
+                const currentOption = getActiveDescendant(listRef.current);
+                if (!currentOption)
+                    return;
+                const nextOption = currentOption.nextSibling;
+                if (nextOption) {
+                    changeDescendant(listRef.current, nextOption);
+                }
+                else {
+                    const options = listRef.current.querySelectorAll('[role="option"]');
+                    const firstOption = options[0];
+                    changeDescendant(listRef.current, firstOption);
+                }
+                break;
+            }
+            case keyboardKeys.KeyboardKeys.UP: {
+                e.preventDefault();
+                const currentOption = getActiveDescendant(listRef.current);
+                if (!currentOption)
+                    return;
+                const previousOption = currentOption.previousSibling;
+                if (previousOption) {
+                    changeDescendant(listRef.current, previousOption);
+                }
+                else {
+                    const options = listRef.current.querySelectorAll('[role="option"]');
+                    const lastOption = options[options.length - 1];
+                    changeDescendant(listRef.current, lastOption);
+                }
+                break;
+            }
+            case keyboardKeys.KeyboardKeys.SPACE:
+            case keyboardKeys.KeyboardKeys.ENTER: {
+                e.preventDefault();
+                const currentOption = getActiveDescendant(listRef.current);
+                if (currentOption.getAttribute('data-opt-group')) {
+                    onSelectItem(currentOption.getAttribute('data-opt-group-children').split(','), currentOption.getAttribute('data-opt-group'));
+                }
+                else {
+                    onSelectItem(currentOption.getAttribute('data-strapi-value'));
+                }
+                if (!multi) {
+                    onEscape();
+                }
+                break;
+            }
         }
-        break;
-      }
-      case u.UP: {
-        i.preventDefault();
-        const n = y(o.current);
-        if (!n)
-          return;
-        const a = n.previousSibling;
-        if (a)
-          l(o.current, a);
-        else {
-          const p = o.current.querySelectorAll('[role="option"]'), d = p[p.length - 1];
-          l(o.current, d);
+    };
+    return (jsxRuntime.jsx(Flex.Flex, { as: "ul", gap: 1, direction: "column", alignItems: "stretch", role: "listbox", "aria-labelledby": labelledBy, tabIndex: -1, ref: listRef, onKeyDown: handleKeyDown, onBlur: onEscape, children: children }));
+};
+const changeDescendant = (list, option) => {
+    list.setAttribute('aria-activedescendant', option.getAttribute('id'));
+    const options = list.querySelectorAll('[role="option"]');
+    options.forEach((opt) => opt.classList.remove('is-focused'));
+    option.classList.add('is-focused');
+    const actions = computeScrollIntoView.compute(option, {
+        scrollMode: 'if-needed',
+        block: 'nearest',
+        inline: 'nearest',
+    });
+    actions.forEach(({ el, top, left }) => {
+        el.scrollTop = top;
+        el.scrollLeft = left;
+    });
+};
+const useListRef = (expanded) => {
+    const listRef = React__namespace.useRef(null);
+    React__namespace.useEffect(() => {
+        listRef.current.focus();
+    }, []);
+    React__namespace.useEffect(() => {
+        if (!listRef.current)
+            return;
+        const lastSelected = listRef.current.querySelector('[aria-selected="true"]');
+        const options = listRef.current.querySelectorAll('[role="option"]');
+        let nextOption;
+        if (lastSelected) {
+            nextOption = lastSelected;
         }
-        break;
-      }
-      case u.SPACE:
-      case u.ENTER: {
-        i.preventDefault();
-        const n = y(o.current);
-        n.getAttribute("data-opt-group") ? e(n.getAttribute("data-opt-group-children").split(","), n.getAttribute("data-opt-group")) : e(n.getAttribute("data-strapi-value")), s || t();
-        break;
-      }
-    }
-  }, onBlur: t, children: c });
-}, l = (r, e) => {
-  r.setAttribute("aria-activedescendant", e.getAttribute("id")), r.querySelectorAll('[role="option"]').forEach((t) => t.classList.remove("is-focused")), e.classList.add("is-focused"), S(e, {
-    scrollMode: "if-needed",
-    block: "nearest",
-    inline: "nearest"
-  }).forEach(({ el: t, top: f, left: o }) => {
-    t.scrollTop = f, t.scrollLeft = o;
-  });
-}, K = (r) => {
-  const e = b.useRef(null);
-  return b.useEffect(() => {
-    e.current.focus();
-  }, []), b.useEffect(() => {
-    if (!e.current)
-      return;
-    const c = e.current.querySelector('[aria-selected="true"]'), s = e.current.querySelectorAll('[role="option"]');
-    let t;
-    c ? t = c : r === m.Keyboard ? t = s[s.length - 1] : r === g.Keyboard && (t = s[0]), t && (r === m.Keyboard || r === g.Keyboard) && l(e.current, t);
-  }, []), e;
-}, y = (r) => {
-  const e = r.getAttribute("aria-activedescendant");
-  return r.querySelector(`#${e}`);
+        else if (expanded === UpState.Keyboard) {
+            nextOption = options[options.length - 1];
+        }
+        else if (expanded === DownState.Keyboard) {
+            nextOption = options[0];
+        }
+        if (nextOption) {
+            if (expanded === UpState.Keyboard || expanded === DownState.Keyboard) {
+                changeDescendant(listRef.current, nextOption);
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return listRef;
 };
-export {
-  E as SelectList
+const getActiveDescendant = (list) => {
+    const id = list.getAttribute('aria-activedescendant');
+    return list.querySelector(`#${id}`);
 };
+
+exports.SelectList = SelectList;

package/dist/Select/SelectList.mjs

@@ -0,0 +1,126 @@
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { compute } from 'compute-scroll-into-view';
+import { KeyboardKeys } from '../helpers/keyboardKeys.mjs';
+import { Flex } from '../Flex/Flex.mjs';
+
+const DownState = {
+    Keyboard: 'down:keyboard',
+    Mouse: 'down:mouse',
+};
+const UpState = { Keyboard: 'up:keyboard', Mouse: 'up:mouse' };
+/**
+ * @preserve
+ * @deprecated This component will be removed in the next major release.
+ * If you need a custom listbox I would recommend opening a new issue.
+ */
+const SelectList = ({ labelledBy, onSelectItem, children, multi = false, onEscape, expanded, }) => {
+    const listRef = useListRef(expanded);
+    const handleKeyDown = (e) => {
+        switch (e.key) {
+            case KeyboardKeys.ESCAPE: {
+                e.stopPropagation();
+                onEscape();
+                break;
+            }
+            case KeyboardKeys.DOWN: {
+                e.preventDefault();
+                const currentOption = getActiveDescendant(listRef.current);
+                if (!currentOption)
+                    return;
+                const nextOption = currentOption.nextSibling;
+                if (nextOption) {
+                    changeDescendant(listRef.current, nextOption);
+                }
+                else {
+                    const options = listRef.current.querySelectorAll('[role="option"]');
+                    const firstOption = options[0];
+                    changeDescendant(listRef.current, firstOption);
+                }
+                break;
+            }
+            case KeyboardKeys.UP: {
+                e.preventDefault();
+                const currentOption = getActiveDescendant(listRef.current);
+                if (!currentOption)
+                    return;
+                const previousOption = currentOption.previousSibling;
+                if (previousOption) {
+                    changeDescendant(listRef.current, previousOption);
+                }
+                else {
+                    const options = listRef.current.querySelectorAll('[role="option"]');
+                    const lastOption = options[options.length - 1];
+                    changeDescendant(listRef.current, lastOption);
+                }
+                break;
+            }
+            case KeyboardKeys.SPACE:
+            case KeyboardKeys.ENTER: {
+                e.preventDefault();
+                const currentOption = getActiveDescendant(listRef.current);
+                if (currentOption.getAttribute('data-opt-group')) {
+                    onSelectItem(currentOption.getAttribute('data-opt-group-children').split(','), currentOption.getAttribute('data-opt-group'));
+                }
+                else {
+                    onSelectItem(currentOption.getAttribute('data-strapi-value'));
+                }
+                if (!multi) {
+                    onEscape();
+                }
+                break;
+            }
+        }
+    };
+    return (jsx(Flex, { as: "ul", gap: 1, direction: "column", alignItems: "stretch", role: "listbox", "aria-labelledby": labelledBy, tabIndex: -1, ref: listRef, onKeyDown: handleKeyDown, onBlur: onEscape, children: children }));
+};
+const changeDescendant = (list, option) => {
+    list.setAttribute('aria-activedescendant', option.getAttribute('id'));
+    const options = list.querySelectorAll('[role="option"]');
+    options.forEach((opt) => opt.classList.remove('is-focused'));
+    option.classList.add('is-focused');
+    const actions = compute(option, {
+        scrollMode: 'if-needed',
+        block: 'nearest',
+        inline: 'nearest',
+    });
+    actions.forEach(({ el, top, left }) => {
+        el.scrollTop = top;
+        el.scrollLeft = left;
+    });
+};
+const useListRef = (expanded) => {
+    const listRef = React.useRef(null);
+    React.useEffect(() => {
+        listRef.current.focus();
+    }, []);
+    React.useEffect(() => {
+        if (!listRef.current)
+            return;
+        const lastSelected = listRef.current.querySelector('[aria-selected="true"]');
+        const options = listRef.current.querySelectorAll('[role="option"]');
+        let nextOption;
+        if (lastSelected) {
+            nextOption = lastSelected;
+        }
+        else if (expanded === UpState.Keyboard) {
+            nextOption = options[options.length - 1];
+        }
+        else if (expanded === DownState.Keyboard) {
+            nextOption = options[0];
+        }
+        if (nextOption) {
+            if (expanded === UpState.Keyboard || expanded === DownState.Keyboard) {
+                changeDescendant(listRef.current, nextOption);
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return listRef;
+};
+const getActiveDescendant = (list) => {
+    const id = list.getAttribute('aria-activedescendant');
+    return list.querySelector(`#${id}`);
+};
+
+export { SelectList };

package/dist/Select/SelectParts.js

@@ -1,19 +1,53 @@
-import { jsx as t, jsxs as l } from "react/jsx-runtime";
-import * as a from "react";
-import { Cross as y, CarretDown as R } from "@strapi/icons";
-import { Select as o } from "@strapi/ui-primitives";
-import s, { css as I } from "styled-components";
-import { useComposedRefs as S } from "../hooks/useComposeRefs.js";
-import { Flex as c } from "../Flex/Flex.js";
-import { Box as p } from "../Box/Box.js";
-import { getThemeSize as C, inputFocusStyle as T } from "../themes/utils.js";
-import { Typography as u } from "../Typography/Typography.js";
-const k = a.forwardRef(({ onClear: e, clearLabel: r = "Clear", startIcon: i, disabled: n, hasError: m, size: h = "M", children: f, ...g }, $) => {
-  const d = a.useRef(null), w = (x) => {
-    e && !n && (e(x), d.current.focus());
-  }, b = S(d, $);
-  return t(o.Trigger, { asChild: !0, children: l(V, { "aria-disabled": n, $hasError: m, $size: h, ref: b, alignItems: "center", justifyContent: "space-between", position: "relative", overflow: "hidden", hasRadius: !0, background: n ? "neutral150" : "neutral0", paddingLeft: 3, paddingRight: 3, gap: 4, cursor: "default", width: "100%", ...g, children: [l(c, { flex: "1", as: "span", gap: 3, children: [i && t(p, { as: "span", "aria-hidden": !0, children: i }), f] }), l(c, { as: "span", gap: 3, children: [e ? t(v, { as: "button", hasRadius: !0, background: "transparent", role: "button", tabIndex: 0, onClick: w, "aria-disabled": n, "aria-label": r, title: r, cursor: "pointer", children: t(y, {}) }) : null, t(z, { children: t(R, {}) })] })] }) });
-}), v = s(p)`
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const icons = require('@strapi/icons');
+const uiPrimitives = require('@strapi/ui-primitives');
+const styled = require('styled-components');
+const useComposeRefs = require('../hooks/useComposeRefs.js');
+const Flex = require('../Flex/Flex.js');
+const Box = require('../Box/Box.js');
+const utils = require('../themes/utils.js');
+const Typography = require('../Typography/Typography.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const React__namespace = /*#__PURE__*/_interopNamespace(React);
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const SelectTrigger = React__namespace.forwardRef(({ onClear, clearLabel = 'Clear', startIcon, disabled, hasError, size = 'M', children, ...restProps }, ref) => {
+    const triggerRef = React__namespace.useRef(null);
+    const handleClearClick = (e) => {
+        if (onClear && !disabled) {
+            onClear(e);
+            triggerRef.current.focus();
+        }
+    };
+    const composedRefs = useComposeRefs.useComposedRefs(triggerRef, ref);
+    return (jsxRuntime.jsx(uiPrimitives.Select.Trigger, { asChild: true, children: jsxRuntime.jsxs(StyledTrigger, { "aria-disabled": disabled, "$hasError": hasError, "$size": size, ref: composedRefs, alignItems: "center", justifyContent: "space-between", position: "relative", overflow: "hidden", hasRadius: true, background: disabled ? 'neutral150' : 'neutral0', paddingLeft: 3, paddingRight: 3, gap: 4, cursor: "default", width: "100%", ...restProps, children: [jsxRuntime.jsxs(Flex.Flex, { flex: "1", as: "span", gap: 3, children: [startIcon && (jsxRuntime.jsx(Box.Box, { as: "span", "aria-hidden": true, children: startIcon })), children] }), jsxRuntime.jsxs(Flex.Flex, { as: "span", gap: 3, children: [onClear ? (jsxRuntime.jsx(IconBox, { as: "button", hasRadius: true, background: "transparent", role: "button", tabIndex: 0, onClick: handleClearClick, "aria-disabled": disabled, "aria-label": clearLabel, title: clearLabel, cursor: "pointer", children: jsxRuntime.jsx(icons.Cross, {}) })) : null, jsxRuntime.jsx(DownIcon, { children: jsxRuntime.jsx(icons.CarretDown, {}) })] })] }) }));
+});
+const IconBox = styled__default.default(Box.Box) `
   border: none;
 
   svg {
@@ -22,14 +56,15 @@ const k = a.forwardRef(({ onClear: e, clearLabel: r = "Clear", startIcon: i, dis
   }
 
   svg path {
-    fill: ${({ theme: e }) => e.colors.neutral600};
+    fill: ${({ theme }) => theme.colors.neutral600};
   }
-`, V = s(c)`
-  border: 1px solid ${({ theme: e, $hasError: r }) => r ? e.colors.danger600 : e.colors.neutral200};
-  min-height: ${({ theme: e, $size: r }) => C("input")({ theme: e, size: r })};
+`;
+const StyledTrigger = styled__default.default(Flex.Flex) `
+  border: 1px solid ${({ theme, $hasError }) => ($hasError ? theme.colors.danger600 : theme.colors.neutral200)};
+  min-height: ${({ theme, $size }) => utils.getThemeSize('input')({ theme, size: $size })};
 
   &[aria-disabled='true'] {
-    color: ${(e) => e.theme.colors.neutral600};
+    color: ${(props) => props.theme.colors.neutral600};
   }
 
   /* Required to ensure the below inputFocusStyles are adhered too */
@@ -37,74 +72,98 @@ const k = a.forwardRef(({ onClear: e, clearLabel: r = "Clear", startIcon: i, dis
     outline: none;
   }
 
-  ${({ theme: e, $hasError: r }) => T()({ theme: e, hasError: r })};
-`, z = s(o.Icon)`
+  ${({ theme, $hasError }) => utils.inputFocusStyle()({ theme, hasError: $hasError })};
+`;
+const DownIcon = styled__default.default(uiPrimitives.Select.Icon) `
   & > svg {
     width: ${6 / 16}rem;
 
     & > path {
-      fill: ${({ theme: e }) => e.colors.neutral600};
+      fill: ${({ theme }) => theme.colors.neutral600};
     }
   }
-`, j = a.forwardRef(({ children: e, placeholder: r, ...i }, n) => t(F, { ref: n, ellipsis: !0, ...i, children: t(B, { placeholder: r, children: e }) })), F = s(u)`
+`;
+const SelectValue = React__namespace.forwardRef(({ children, placeholder, ...restProps }, ref) => (jsxRuntime.jsx(ValueType, { ref: ref, ellipsis: true, ...restProps, children: jsxRuntime.jsx(StyledValue, { placeholder: placeholder, children: children }) })));
+const ValueType = styled__default.default(Typography.Typography) `
   flex: 1;
-`, B = s(o.Value)`
+`;
+const StyledValue = styled__default.default(uiPrimitives.Select.Value) `
   display: flex;
-  gap: ${({ theme: e }) => e.spaces[1]};
+  gap: ${({ theme }) => theme.spaces[1]};
   flex-wrap: wrap;
-`, D = s(o.Content)`
-  background: ${({ theme: e }) => e.colors.neutral0};
-  box-shadow: ${({ theme: e }) => e.shadows.filterShadow};
-  border: 1px solid ${({ theme: e }) => e.colors.neutral150};
-  border-radius: ${({ theme: e }) => e.borderRadius};
+`;
+/* -------------------------------------------------------------------------------------------------
+ * SelectContent
+ * -----------------------------------------------------------------------------------------------*/
+const SelectContent = styled__default.default(uiPrimitives.Select.Content) `
+  background: ${({ theme }) => theme.colors.neutral0};
+  box-shadow: ${({ theme }) => theme.shadows.filterShadow};
+  border: 1px solid ${({ theme }) => theme.colors.neutral150};
+  border-radius: ${({ theme }) => theme.borderRadius};
   min-width: var(--radix-select-trigger-width);
   /* This is from the design-system figma file. */
   max-height: 15rem;
-  z-index: ${({ theme: e }) => e.zIndices[1]};
-`, E = s(o.Viewport)`
-  padding: ${({ theme: e }) => e.spaces[1]};
-`, G = a.forwardRef((e, r) => t(q, { ref: r, ...e })), P = I`
+  z-index: ${({ theme }) => theme.zIndices[1]};
+`;
+/* -------------------------------------------------------------------------------------------------
+ * SelectViewport
+ * -----------------------------------------------------------------------------------------------*/
+const SelectViewport = styled__default.default(uiPrimitives.Select.Viewport) `
+  padding: ${({ theme }) => theme.spaces[1]};
+`;
+const SelectItem = React__namespace.forwardRef((props, ref) => (jsxRuntime.jsx(StyledSelectItem, { ref: ref, ...props })));
+const itemStyles = styled.css `
   width: 100%;
   border: none;
   text-align: left;
   outline-offset: -3px;
-  border-radius: ${(e) => e.theme.borderRadius};
-  padding: ${(e) => `${e.theme.spaces[2]} ${e.theme.spaces[4]}`};
-  padding-left: ${({ theme: e }) => e.spaces[4]};
-  background-color: ${({ theme: e }) => e.colors.neutral0};
+  border-radius: ${(props) => props.theme.borderRadius};
+  padding: ${(props) => `${props.theme.spaces[2]} ${props.theme.spaces[4]}`};
+  padding-left: ${({ theme }) => theme.spaces[4]};
+  background-color: ${({ theme }) => theme.colors.neutral0};
   display: flex;
   align-items: center;
-  gap: ${({ theme: e }) => e.spaces[2]};
+  gap: ${({ theme }) => theme.spaces[2]};
   white-space: nowrap;
   user-select: none;
 
   &:focus-visible {
     outline: none;
-    background-color: ${({ theme: e }) => e.colors.primary100};
+    background-color: ${({ theme }) => theme.colors.primary100};
   }
-`, q = s(o.Item)`
-  ${P}
+`;
+const StyledSelectItem = styled__default.default(uiPrimitives.Select.Item) `
+  ${itemStyles}
 
   &:hover {
-    background-color: ${({ theme: e }) => e.colors.primary100};
+    background-color: ${({ theme }) => theme.colors.primary100};
   }
 
   &[data-state='checked'] {
-    ${u} {
+    ${Typography.Typography} {
       font-weight: bold;
-      color: ${({ theme: e }) => e.colors.primary600};
+      color: ${({ theme }) => theme.colors.primary600};
     }
   }
-`, U = o.Root, W = k, X = j, Y = o.Portal, Z = D, _ = E, ee = G, re = o.ItemIndicator, oe = o.ItemText, te = o.Group;
-export {
-  Z as Content,
-  te as Group,
-  ee as Item,
-  re as ItemIndicator,
-  oe as ItemText,
-  Y as Portal,
-  U as Root,
-  W as Trigger,
-  X as Value,
-  _ as Viewport
-};
+`;
+const Root = uiPrimitives.Select.Root;
+const Trigger = SelectTrigger;
+const Value = SelectValue;
+const Portal = uiPrimitives.Select.Portal;
+const Content = SelectContent;
+const Viewport = SelectViewport;
+const Item = SelectItem;
+const ItemIndicator = uiPrimitives.Select.ItemIndicator;
+const ItemText = uiPrimitives.Select.ItemText;
+const Group = uiPrimitives.Select.Group;
+
+exports.Content = Content;
+exports.Group = Group;
+exports.Item = Item;
+exports.ItemIndicator = ItemIndicator;
+exports.ItemText = ItemText;
+exports.Portal = Portal;
+exports.Root = Root;
+exports.Trigger = Trigger;
+exports.Value = Value;
+exports.Viewport = Viewport;