@usefui/components 1.7.1 → 1.7.3

package/dist/index.mjs

@@ -85,25 +85,6 @@ var ButtonIconStyles = css`
   svg {
     width: var(--fontsize-medium-20);
     height: var(--fontsize-medium-20);
-    fill: currentColor;
-  }
-
-  svg {
-    opacity: 0.6;
-  }
-
-  &:hover,
-  &:focus,
-  &:active {
-    svg {
-      opacity: 1;
-    }
-  }
-
-  &[data-variant="primary"] {
-    svg {
-      fill: var(--body-color);
-    }
   }
 `;
 var ButtonSizeStyles = css`
@@ -159,7 +140,6 @@ var ButtonBeforeDefaultStyles = css`
 `;
 var ButtonVariantsStyles = css`
   &[data-variant="primary"] {
-    color: var(--body-color-alpha-80);
     background-color: var(--font-color);
     background: linear-gradient(
       180deg,
@@ -169,6 +149,11 @@ var ButtonVariantsStyles = css`
     background-size: 100% 200%;
     background-position: 0% 50%;
 
+    color: var(--body-color-alpha-80) !important;
+    svg * {
+      stroke: var(--body-color-alpha-80) !important;
+    }
+
     ::before {
       ${ButtonBeforeDefaultStyles}
       border-color: var(--body-color-alpha-20);
@@ -187,7 +172,6 @@ var ButtonVariantsStyles = css`
     }
   }
   &[data-variant="secondary"] {
-    color: var(--font-color-alpha-60);
     border-color: var(--font-color-alpha-10);
 
     background-color: var(--body-color);
@@ -199,6 +183,8 @@ var ButtonVariantsStyles = css`
     background-size: 100% 200%;
     background-position: 0% 50%;
 
+    color: var(--font-color-alpha-60) !important;
+
     ::before {
       ${ButtonBeforeDefaultStyles}
       border-color: var(--font-color-alpha-10);
@@ -215,8 +201,6 @@ var ButtonVariantsStyles = css`
     }
   }
   &[data-variant="tertiary"] {
-    color: var(--font-color-alpha-60);
-
     background-color: transparent;
     background: linear-gradient(
       -180deg,
@@ -226,6 +210,8 @@ var ButtonVariantsStyles = css`
     background-size: 100% 200%;
     background-position: 0% 10%;
 
+    color: var(--font-color-alpha-60) !important;
+
     &:hover,
     &:focus,
     &:active {
@@ -241,8 +227,8 @@ var ButtonVariantsStyles = css`
     }
   }
   &[data-variant="mono"] {
-    color: var(--font-color-alpha-80);
     background-color: var(--contrast-color);
+    color: var(--font-color-alpha-80) !important;
 
     ::before {
       ${ButtonBeforeDefaultStyles}
@@ -261,9 +247,9 @@ var ButtonVariantsStyles = css`
     }
   }
   &[data-variant="border"] {
-    color: var(--font-color-alpha-60);
     background-color: transparent;
     border-color: var(--font-color-alpha-10);
+    color: var(--font-color-alpha-60) !important;
 
     &:hover,
     &:focus,
@@ -305,7 +291,6 @@ var ButtonVariantsStyles = css`
   }
 
   &[data-variant="meta"] {
-    color: var(--alpha-mono-white-80);
     background-color: var(--color-blue);
     background: linear-gradient(
       180deg,
@@ -315,6 +300,8 @@ var ButtonVariantsStyles = css`
     background-size: 100% 200%;
     background-position: 0% 50%;
 
+    color: var(--alpha-mono-white-80) !important;
+
     ::before {
       ${ButtonBeforeDefaultStyles}
       border-color: var(--tint-blue-30);
@@ -335,7 +322,6 @@ var ButtonVariantsStyles = css`
     }
   }
   &[data-variant="hint"] {
-    color: var(--alpha-mono-white-80);
     background-color: var(--color-purple);
     background: linear-gradient(
       180deg,
@@ -345,6 +331,8 @@ var ButtonVariantsStyles = css`
     background-size: 100% 200%;
     background-position: 0% 50%;
 
+    color: var(--alpha-mono-white-80) !important;
+
     ::before {
       ${ButtonBeforeDefaultStyles}
       border-color: var(--shade-purple-20);
@@ -361,7 +349,6 @@ var ButtonVariantsStyles = css`
     }
   }
   &[data-variant="success"] {
-    color: var(--alpha-mono-white-90);
     background-color: var(--shade-green-30);
     background: linear-gradient(
       180deg,
@@ -371,6 +358,8 @@ var ButtonVariantsStyles = css`
     background-size: 100% 200%;
     background-position: 0% 50%;
 
+    color: var(--alpha-mono-white-80) !important;
+
     ::before {
       ${ButtonBeforeDefaultStyles}
       border-color: var(--shade-green-20);
@@ -387,7 +376,6 @@ var ButtonVariantsStyles = css`
     }
   }
   &[data-variant="danger"] {
-    color: var(--alpha-mono-white-80);
     background-color: var(--color-red);
     background: linear-gradient(
       180deg,
@@ -397,6 +385,8 @@ var ButtonVariantsStyles = css`
     background-size: 100% 200%;
     background-position: 0% 50%;
 
+    color: var(--alpha-mono-white-80) !important;
+
     ::before {
       ${ButtonBeforeDefaultStyles}
       border-color: var(--tint-red-60);
@@ -416,7 +406,6 @@ var ButtonVariantsStyles = css`
     }
   }
   &[data-variant="warning"] {
-    color: var(--alpha-mono-dark-80);
     background-color: var(--color-orange);
     background: linear-gradient(
       180deg,
@@ -426,6 +415,8 @@ var ButtonVariantsStyles = css`
     background-size: 100% 200%;
     background-position: 0% 50%;
 
+    color: var(--alpha-mono-dark-80) !important;
+
     ::before {
       ${ButtonBeforeDefaultStyles}
       border-color: var(--tint-orange-30);
@@ -502,7 +493,8 @@ var ButtonWrapper = styled.button`
     ${ButtonSizeStyles}
     ${ButtonShapeStyles}
     ${ButtonVariantsStyles}
-      &[data-rawIcon="false"] {
+
+    &[data-rawIcon="false"] {
       ${ButtonIconStyles}
     }
   }
@@ -1012,6 +1004,28 @@ var BadgeVariantStyles = css3`
     }
   }
 `;
+var BadgeEmphasisVariantStyles = css3`
+  &[data-variant="danger"] {
+    background-color: var(--color-red) !important;
+    color: var(--color-mono-white) !important;
+  }
+  &[data-variant="warning"] {
+    background-color: var(--color-orange) !important;
+    color: var(--color-mono-dark) !important;
+  }
+  &[data-variant="success"] {
+    background-color: var(--color-green) !important;
+    color: var(--color-mono-white) !important;
+  }
+  &[data-variant="meta"] {
+    background-color: var(--color-blue) !important;
+    color: var(--color-mono-white) !important;
+  }
+  &[data-variant="hint"] {
+    background-color: var(--color-purple) !important;
+    color: var(--color-mono-white) !important;
+  }
+`;
 var BadgeShapeStyles = css3`
   &[data-shape="square"] {
     border-radius: 0;
@@ -1049,6 +1063,10 @@ var BadgeWrapper2 = styled3.div`
     ${BadgeVariantStyles}
     ${BadgeShapeStyles}
     ${BadgeSizeStyles}
+
+    &[data-emphasis="true"] {
+      ${BadgeEmphasisVariantStyles}
+    }
   }
 `;
 
@@ -1056,6 +1074,7 @@ var BadgeWrapper2 = styled3.div`
 var Badge = (props) => {
   const {
     raw = false,
+    emphasis = false,
     sizing = "small" /* Small */,
     variant = "primary" /* Primary */,
     shape = "smooth" /* Smooth */,
@@ -1069,6 +1088,7 @@ var Badge = (props) => {
       "data-variant": variant,
       "data-shape": shape,
       "data-size": sizing,
+      "data-emphasis": emphasis,
       ...restProps
     },
     children
@@ -2102,7 +2122,8 @@ var Dialog = (props) => {
     if (open && toggleDialog) toggleDialog();
   }, []);
   if (lock) useDisabledScroll(Boolean(states.open));
-  return /* @__PURE__ */ React15.createElement(React15.Fragment, null, states.open && /* @__PURE__ */ React15.createElement(
+  if (!states.open) return null;
+  return /* @__PURE__ */ React15.createElement(
     ScrollArea,
     {
       as: DialogWrapper,
@@ -2117,7 +2138,7 @@ var Dialog = (props) => {
       ...restProps
     },
     children
-  ));
+  );
 };
 Dialog.displayName = "Dialog";
 var DialogRoot = ({ children }) => {
@@ -2291,6 +2312,15 @@ var ContentWrapperSizes = css7`
     max-width: var(--large);
   }
 `;
+var ContentWrapperVariants = css7`
+  &[data-variant="body"] {
+    background-color: var(--body-color);
+  }
+
+  &[data-variant="contrast"] {
+    background-color: var(--contrast-color);
+  }
+`;
 var RootWrapper = styled9.div`
   position: relative;
 `;
@@ -2317,13 +2347,14 @@ var ContentWrapper = styled9.ul`
     padding: var(--measurement-medium-30);
     margin: var(--measurement-medium-10) 0;
 
-    background-color: var(--body-color);
     border: var(--measurement-small-10) solid var(--font-color-alpha-10);
     border-radius: var(--measurement-medium-30);
 
     z-index: var(--depth-default-100);
 
     ${ContentWrapperSizes}
+    ${ContentWrapperVariants}
+
     animation-duration: 0.2s;
     animation-name: slide-in;
     animation-fill-mode: backwards;
@@ -2338,14 +2369,13 @@ var ItemWrapper2 = styled9.li`
   &[data-raw="false"] {
     padding: var(--measurement-medium-10) var(--measurement-medium-30);
     border-radius: var(--measurement-medium-20);
+    color: var(--font-color);
 
-    text-align: left;
-    font-weight: 600;
     letter-spacing: calc(
       var(--fontsize-small-10) - ((var(--fontsize-small-10) * 1.066))
     );
-    font-size: var(--fontsize-medium-10);
-    color: var(--font-color);
+    font-size: inherit;
+    text-align: left;
 
     outline: none;
     cursor: pointer;
@@ -2357,7 +2387,7 @@ var ItemWrapper2 = styled9.li`
     &:active,
     &:focus-within,
     &:has(:active) {
-      background-color: var(--contrast-color);
+      background-color: var(--font-color-alpha-10);
     }
   }
 
@@ -2422,7 +2452,14 @@ var DropdownMenuTrigger = (props) => {
 };
 DropdownMenuTrigger.displayName = "DropdownMenu.Trigger";
 var DropdownMenuContent = React17.forwardRef((props, _) => {
-  const { raw, sizing = "medium", defaultOpen, children, ...restProps } = props;
+  const {
+    raw,
+    sizing = "medium" /* Medium */,
+    variant = "body",
+    defaultOpen,
+    children,
+    ...restProps
+  } = props;
   const { id, states, methods } = useDropdownMenu();
   const { toggleOpen, setContentProps } = methods;
   const mounted = React17.useRef(false);
@@ -2488,6 +2525,7 @@ var DropdownMenuContent = React17.forwardRef((props, _) => {
       "aria-labelledby": id.split("|").at(0),
       "data-state": applyDataState(Boolean(states.open)),
       "data-sizing": sizing,
+      "data-variant": variant,
       "data-side": hasEnoughHorizontalSpace ? "left" /* Left */ : "right" /* Right */,
       "data-align": hasEnoughHorizontalSpace ? "left" /* Left */ : "right" /* Right */,
       "data-raw": Boolean(raw),
@@ -2869,12 +2907,8 @@ var InnerWrapper = styled10.div`
     display: flex;
     flex-direction: column;
 
-    right: 0;
-    &[data-multiple="true"] {
-      right: var(--measurement-small-10) !important;
-    }
-
     top: var(--measurement-small-10);
+    right: var(--measurement-small-10);
     bottom: var(--measurement-small-10);
 
     border-left: var(--measurement-small-10) solid var(--font-color-alpha-10);
@@ -2885,7 +2919,6 @@ var InnerWrapper = styled10.div`
     &[data-error="true"] {
       border-color: var(--alpha-red-10) !important;
     }
-
     &[data-shape="round"] {
       border-radius: 0 var(--measurement-large-90) var(--measurement-large-90) 0;
     }
@@ -2911,16 +2944,7 @@ var InnerTrigger = styled10.button`
   padding: 0 var(--measurement-medium-40);
 
   color: var(--font-color-alpha-60);
-
-  background-color: var(--body-color);
-  background: linear-gradient(
-    180deg,
-    transparent 50%,
-    var(--font-color-alpha-10) 100%
-  );
-  background-size: 100% 200%;
-  background-position: 0% 0%;
-  backdrop-filter: blur(var(--measurement-medium-10));
+  backdrop-filter: blur(var(--measurement-small-60));
 
   cursor: pointer;
   transition: all ease-in-out 0.2s;
@@ -2930,7 +2954,7 @@ var InnerTrigger = styled10.button`
     transition: all ease-in-out 0.2s;
   }
 
-  ::before {
+  /* ::before {
     content: "";
     inset: 0;
 
@@ -2944,12 +2968,12 @@ var InnerTrigger = styled10.button`
 
     transition: all ease-in-out 0.2s;
     mask-image: linear-gradient(var(--font-color), transparent);
-  }
+  } */
 
   &:hover,
   &:active {
     color: var(--font-color);
-    background-position: 0% 50%;
+    /* background-position: 0% 50%; */
 
     svg {
       opacity: 0.8;
@@ -2968,7 +2992,7 @@ var InnerSegment = styled10.span`
     text-align: center;
     outline: none;
     color: inherit;
-    transition: background-color ease-in-out 0.2s;
+    /* transition: background-color ease-in-out 0.2s; */
 
     &[data-placeholder="true"] {
       color: var(--font-color-alpha-30);
@@ -2979,7 +3003,7 @@ var InnerSegment = styled10.span`
     &:active,
     &:focus-within,
     &:has(:active) {
-      background-color: var(--font-color-alpha-10);
+      /* background-color: var(--font-color-alpha-10); */
       color: var(--font-color);
     }
   }
@@ -3876,7 +3900,7 @@ var MessageBubble = (props) => {
 };
 MessageBubble.displayName = "MessageBubble";
 var MessageBubbleContent = (props) => {
-  const { sizing, shape, variant, children, raw, ...restProps } = props;
+  const { emphasis, sizing, shape, variant, children, raw, ...restProps } = props;
   const { id, states } = useMessageBubble();
   return /* @__PURE__ */ React21.createElement(
     MessageBubbleBadge,
@@ -3884,8 +3908,9 @@ var MessageBubbleContent = (props) => {
       "data-raw": Boolean(raw),
       "data-side": states?.side,
       variant: variant ?? "border" /* Border */,
-      shape: shape ?? "smooth" /* Smooth */,
+      shape: shape ?? "round" /* Round */,
       sizing: sizing ?? "medium" /* Medium */,
+      emphasis,
       "aria-label": `message-bubble-content-${id}`,
       ...restProps
     },
@@ -4539,7 +4564,7 @@ var SplitContainer = styled16.div`
 `;
 var Panel = styled16.div`
   overflow: hidden;
-  width: ${(props) => props.width}%;
+  width: ${(props) => props.width}dvw;
 `;
 var Divider2 = styled16.div`
   width: var(--measurement-medium-10);
@@ -4595,6 +4620,8 @@ var DragOverlay = styled16.div`
 // src/resizable/index.tsx
 var Resizable = ({
   defaultWidth,
+  minWidth,
+  maxWidth,
   left,
   right
 }) => {
@@ -4608,7 +4635,7 @@ var Resizable = ({
       if (!isDragging || !containerRef.current) return;
       const containerRect = containerRef.current.getBoundingClientRect();
       const newLeftWidth = (e.clientX - containerRect.left) / containerRect.width * 100;
-      const threshold = { min: 30, max: 70 };
+      const threshold = { min: minWidth ?? 30, max: maxWidth ?? 70 };
       const constrainedWidth = Math.min(
         Math.max(newLeftWidth, threshold.min),
         threshold.max
@@ -6097,235 +6124,23 @@ var Tooltip = ({
 };
 Tooltip.displayName = "Tooltip";
 
-// src/tree/index.tsx
-import React46 from "react";
-
-// src/tree/hooks/tree-provider.tsx
-import React44, { useState as useState10, createContext as createContext10, useContext as useContext10 } from "react";
-var defaultTreeAPI = {
-  id: "",
-  states: {},
-  methods: {}
-};
-var TreeContext = createContext10(defaultTreeAPI);
-var useTree = () => useContext10(TreeContext);
-var TreeProvider = ({
-  children,
-  defaultExpandedIds = [],
-  onSelectionChange
-}) => {
-  const context = useTreeProviderContext({
-    defaultExpandedIds,
-    onSelectionChange
-  });
-  return /* @__PURE__ */ React44.createElement(TreeContext.Provider, { value: context }, children);
-};
-function useTreeProviderContext({
-  defaultExpandedIds,
-  onSelectionChange
-}) {
-  const treeId = React44.useId();
-  const [expandedIds, setExpandedIds] = useState10(
-    () => new Set(defaultExpandedIds)
-  );
-  const [selectedIds, setSelectedIds] = useState10(() => /* @__PURE__ */ new Set());
-  return {
-    id: treeId,
-    states: {
-      expandedIds,
-      selectedIds
-    },
-    methods: {
-      isExpanded: (id) => expandedIds.has(id),
-      isSelected: (id) => selectedIds.has(id),
-      toggleExpanded: (id) => {
-        setExpandedIds((prev) => {
-          const next = new Set(prev);
-          next.has(id) ? next.delete(id) : next.add(id);
-          return next;
-        });
-      },
-      toggleSelected: (id) => {
-        setSelectedIds((prev) => {
-          const next = new Set(prev);
-          next.has(id) ? next.delete(id) : next.add(id);
-          onSelectionChange?.(Array.from(next));
-          return next;
-        });
-      },
-      getTreeId: ({ nodeId, type }) => `${treeId}-${type}-${nodeId}`
-    }
-  };
-}
-
-// src/tree/hooks/tree-node-provider.tsx
-import React45, { createContext as createContext11, useContext as useContext11 } from "react";
-var defaultTreeNodeAPI = {
-  id: "",
-  states: {},
-  methods: {}
-};
-var TreeNodeContext = createContext11(defaultTreeNodeAPI);
-var useTreeNode = () => useContext11(TreeNodeContext);
-var TreeNodeProvider = ({
-  children,
-  nodeId,
-  level,
-  isLast
-}) => {
-  const context = useTreeNodeProviderContext({ nodeId, level, isLast });
-  return /* @__PURE__ */ React45.createElement(TreeNodeContext.Provider, { value: context }, children);
-};
-function useTreeNodeProviderContext({
-  nodeId,
-  level,
-  isLast
-}) {
-  return {
-    id: nodeId,
-    states: {
-      nodeId,
-      level,
-      isLast
-    },
-    methods: {}
-  };
-}
-
-// src/tree/styles/index.ts
-import styled27 from "styled-components";
-var TreeView = styled27.ul`
-  display: flex;
-  flex-direction: column;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-`;
-var TreeItem = styled27.li`
-  display: flex;
-  flex-direction: column;
-  list-style: none;
-`;
-var TreeNodeContent = styled27.ul`
-  display: flex;
-  flex-direction: column;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-`;
-
-// src/tree/index.tsx
-var Tree = (props) => {
-  const { children, ...restProps } = props;
-  const { id } = useTree();
-  return /* @__PURE__ */ React46.createElement(TreeView, { id, role: "tree", ...restProps }, children);
-};
-Tree.displayName = "Tree";
-var TreeRoot = ({
-  children,
-  defaultExpandedIds,
-  onSelectionChange
-}) => {
-  return /* @__PURE__ */ React46.createElement(
-    TreeProvider,
-    {
-      defaultExpandedIds,
-      onSelectionChange
-    },
-    children
-  );
-};
-TreeRoot.displayName = "Tree.Root";
-var TreeNode = (props) => {
-  const { nodeId, level = 0, isLast = false, children, ...restProps } = props;
-  return /* @__PURE__ */ React46.createElement(TreeNodeProvider, { nodeId, level, isLast }, /* @__PURE__ */ React46.createElement(TreeItem, { role: "treeitem", "aria-level": level + 1, ...restProps }, children));
-};
-TreeNode.displayName = "Tree.Node";
-var TreeTrigger = (props) => {
-  const { nodeId, disabled, onClick, children, ...restProps } = props;
-  const { methods } = useTree();
-  const { getTreeId, toggleExpanded, toggleSelected } = methods;
-  const isExpanded = methods.isExpanded && methods.isExpanded(nodeId);
-  const isSelected = methods.isSelected && methods.isSelected(nodeId);
-  const IdHandler = {
-    trigger: getTreeId && getTreeId({ nodeId, type: "trigger" }),
-    content: getTreeId && getTreeId({ nodeId, type: "content" })
-  };
-  const { states: nodeStates } = useTreeNode();
-  const level = nodeStates.level ?? 0;
-  const handleClick = (event) => {
-    if (!disabled) {
-      onClick && onClick(event);
-      toggleExpanded && toggleExpanded(nodeId);
-      toggleSelected && toggleSelected(nodeId);
-    }
-  };
-  return /* @__PURE__ */ React46.createElement(
-    Button,
-    {
-      id: String(IdHandler.trigger),
-      disabled: disabled ?? false,
-      onClick: handleClick,
-      "data-state": isExpanded ? "expanded" : "collapsed",
-      "data-selected": isSelected || void 0,
-      variant: props.variant ?? "ghost" /* Ghost */,
-      style: { paddingLeft: `calc(${level} * 1rem + 0.5rem)` },
-      rawicon: true,
-      ...restProps
-    },
-    children
-  );
-};
-TreeTrigger.displayName = "Tree.Trigger";
-var TreeContent = (props) => {
-  const { nodeId, defaultOpen = false, children, ...restProps } = props;
-  const { methods } = useTree();
-  const { getTreeId, toggleExpanded } = methods;
-  const isExpanded = methods.isExpanded && methods.isExpanded(nodeId);
-  const IdHandler = {
-    trigger: getTreeId && getTreeId({ nodeId, type: "trigger" }),
-    content: getTreeId && getTreeId({ nodeId, type: "content" })
-  };
-  React46.useEffect(() => {
-    if (defaultOpen && !isExpanded && toggleExpanded) toggleExpanded(nodeId);
-  }, []);
-  if (isExpanded)
-    return /* @__PURE__ */ React46.createElement(
-      TreeNodeContent,
-      {
-        role: "group",
-        id: String(IdHandler.content),
-        "aria-labelledby": String(IdHandler.trigger),
-        "data-nodeId": nodeId,
-        ...restProps
-      },
-      children
-    );
-  return /* @__PURE__ */ React46.createElement(React46.Fragment, null);
-};
-TreeContent.displayName = "Tree.Content";
-Tree.Root = TreeRoot;
-Tree.Node = TreeNode;
-Tree.Trigger = TreeTrigger;
-Tree.Content = TreeContent;
-
 // src/select/index.tsx
-import React48 from "react";
+import React45 from "react";
 
 // src/select/hooks/index.tsx
-import React47 from "react";
+import React44 from "react";
 var defaultComponentAPI10 = {
   id: "",
   states: {},
   methods: {}
 };
-var SelectContext = React47.createContext(defaultComponentAPI10);
-var useSelect = () => React47.useContext(SelectContext);
+var SelectContext = React44.createContext(defaultComponentAPI10);
+var useSelect = () => React44.useContext(SelectContext);
 var SelectProvider = ({
   children
 }) => {
   const context = useSelectProvider();
-  return /* @__PURE__ */ React47.createElement(SelectContext.Provider, { value: context }, children);
+  return /* @__PURE__ */ React44.createElement(SelectContext.Provider, { value: context }, children);
 };
 function useSelectProvider() {
   const DEFAULT_POSITIONS2 = {
@@ -6338,19 +6153,19 @@ function useSelectProvider() {
     width: 0,
     height: 0
   };
-  const [open, setOpen] = React47.useState(false);
-  const [value, setValue] = React47.useState(null);
-  const [label, setLabel] = React47.useState("");
-  const [contentProps, setContentProps] = React47.useState({
+  const [open, setOpen] = React44.useState(false);
+  const [value, setValue] = React44.useState(null);
+  const [label, setLabel] = React44.useState("");
+  const [contentProps, setContentProps] = React44.useState({
     ...DEFAULT_POSITIONS2,
     ...DEFAULT_DIMENSIONS2
   });
-  const [triggerProps, setTriggerProps] = React47.useState({
+  const [triggerProps, setTriggerProps] = React44.useState({
     ...DEFAULT_POSITIONS2,
     ...DEFAULT_DIMENSIONS2
   });
-  const triggerId = React47.useId();
-  const listboxId = React47.useId();
+  const triggerId = React44.useId();
+  const listboxId = React44.useId();
   const composedId = `${triggerId}|${listboxId}`;
   return {
     id: composedId,
@@ -6373,12 +6188,12 @@ function useSelectProvider() {
 }
 
 // src/select/styles/index.tsx
-import styled28 from "styled-components";
-var Wrapper = styled28.div`
+import styled27 from "styled-components";
+var Wrapper = styled27.div`
   position: relative;
   width: 100%;
 `;
-var Trigger = styled28.button`
+var Trigger = styled27.button`
   all: unset;
   box-sizing: border-box;
 
@@ -6396,7 +6211,7 @@ var Trigger = styled28.button`
 
   cursor: pointer !important;
 `;
-var Label2 = styled28.span`
+var Label2 = styled27.span`
   flex: 1;
   text-align: left;
   font-weight: 400;
@@ -6404,7 +6219,7 @@ var Label2 = styled28.span`
   overflow: hidden;
   text-overflow: ellipsis;
 `;
-var Content = styled28.ul`
+var Content = styled27.ul`
   @keyframes select-slide-in-down {
     0% {
       opacity: 0;
@@ -6458,7 +6273,7 @@ var Content = styled28.ul`
     }
   }
 `;
-var List = styled28.li`
+var List = styled27.li`
   list-style: none;
   padding: 0;
   margin: 0;
@@ -6507,7 +6322,7 @@ var List = styled28.li`
     opacity: 0.6;
   }
 `;
-var Item = styled28.span`
+var Item = styled27.span`
   display: flex;
   align-items: center;
   gap: var(--measurement-small-60);
@@ -6519,11 +6334,11 @@ var Item = styled28.span`
 
 // src/select/index.tsx
 var SelectRoot = ({ children }) => {
-  return /* @__PURE__ */ React48.createElement(SelectProvider, null, children);
+  return /* @__PURE__ */ React45.createElement(SelectProvider, null, children);
 };
 SelectRoot.displayName = "Select.Root";
 var Select = ({ children }) => {
-  const selectRef = React48.useRef(null);
+  const selectRef = React45.useRef(null);
   const { states, methods } = useSelect();
   const handleClickOutside = () => {
     if (states.open && methods.setOpen) {
@@ -6534,7 +6349,7 @@ var Select = ({ children }) => {
     selectRef,
     handleClickOutside
   );
-  return /* @__PURE__ */ React48.createElement(Wrapper, { ref: selectRef }, children);
+  return /* @__PURE__ */ React45.createElement(Wrapper, { ref: selectRef }, children);
 };
 Select.displayName = "Select";
 var SelectTrigger = (props) => {
@@ -6548,7 +6363,7 @@ var SelectTrigger = (props) => {
     children,
     ...restProps
   } = props;
-  const triggerRef = React48.useRef(null);
+  const triggerRef = React45.useRef(null);
   const triggerRect = () => triggerRef.current?.getBoundingClientRect();
   const { id, states, methods } = useSelect();
   const { toggleOpen, setTriggerProps } = methods;
@@ -6566,7 +6381,7 @@ var SelectTrigger = (props) => {
       });
     }
   };
-  return /* @__PURE__ */ React48.createElement(
+  return /* @__PURE__ */ React45.createElement(
     Trigger,
     {
       ref: triggerRef,
@@ -6586,7 +6401,7 @@ var SelectTrigger = (props) => {
       disabled,
       ...restProps
     },
-    /* @__PURE__ */ React48.createElement(Label2, null, children)
+    /* @__PURE__ */ React45.createElement(Label2, null, children)
   );
 };
 SelectTrigger.displayName = "Select.Trigger";
@@ -6594,8 +6409,8 @@ var SelectContent = (props) => {
   const { raw, defaultOpen, children, ...restProps } = props;
   const { id, states, methods } = useSelect();
   const { toggleOpen, setContentProps } = methods;
-  const mounted = React48.useRef(false);
-  const contentRef = React48.useRef(null);
+  const mounted = React45.useRef(false);
+  const contentRef = React45.useRef(null);
   const contentRect = () => contentRef?.current?.getBoundingClientRect();
   const bodyRect = () => {
     if (typeof document !== "undefined") {
@@ -6613,10 +6428,10 @@ var SelectContent = (props) => {
     content_bottom: states.contentProps.bottom
   };
   const hasEnoughVerticalSpace = dimensions.body_height - dimensions.content_bottom > dimensions.content_height - dimensions.content_height * 0.9;
-  React48.useEffect(() => {
+  React45.useEffect(() => {
     if (defaultOpen && toggleOpen) toggleOpen();
   }, []);
-  React48.useEffect(() => {
+  React45.useEffect(() => {
     mounted.current = true;
     if (setContentProps) {
       setContentProps({
@@ -6632,7 +6447,7 @@ var SelectContent = (props) => {
       mounted.current = false;
     };
   }, [states.open]);
-  React48.useEffect(() => {
+  React45.useEffect(() => {
     if (!states.open) return;
     const handleKeyDown = (event) => {
       if (event.key === "Escape" && methods.setOpen) {
@@ -6643,7 +6458,7 @@ var SelectContent = (props) => {
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [states.open]);
   if (!states.open) return null;
-  return /* @__PURE__ */ React48.createElement(
+  return /* @__PURE__ */ React45.createElement(
     ScrollArea,
     {
       scrollbar: true,
@@ -6683,7 +6498,7 @@ var SelectItem = (props) => {
       handleSelect(event);
     }
   };
-  return /* @__PURE__ */ React48.createElement(
+  return /* @__PURE__ */ React45.createElement(
     List,
     {
       role: "option",
@@ -6697,7 +6512,7 @@ var SelectItem = (props) => {
       onKeyDown: handleKeyDown,
       ...restProps
     },
-    /* @__PURE__ */ React48.createElement(Item, null, children)
+    /* @__PURE__ */ React45.createElement(Item, null, children)
   );
 };
 SelectItem.displayName = "Select.Item";
@@ -6803,11 +6618,6 @@ export {
   ToolbarSection,
   ToolbarTrigger,
   Tooltip,
-  Tree,
-  TreeContent,
-  TreeNode,
-  TreeRoot,
-  TreeTrigger,
   useAccordion,
   useCheckbox,
   useCollapsible,
@@ -6819,7 +6629,5 @@ export {
   useSheet,
   useSwitch,
   useTabs,
-  useToolbar,
-  useTree,
-  useTreeNode
+  useToolbar
 };