@usefui/components 1.7.1 → 1.7.3

package/dist/index.js

@@ -127,11 +127,6 @@ __export(index_exports, {
   ToolbarSection: () => ToolbarSection,
   ToolbarTrigger: () => ToolbarTrigger,
   Tooltip: () => Tooltip,
-  Tree: () => Tree,
-  TreeContent: () => TreeContent,
-  TreeNode: () => TreeNode,
-  TreeRoot: () => TreeRoot,
-  TreeTrigger: () => TreeTrigger,
   useAccordion: () => useAccordion,
   useCheckbox: () => useCheckbox,
   useCollapsible: () => useCollapsible,
@@ -143,9 +138,7 @@ __export(index_exports, {
   useSheet: () => useSheet,
   useSwitch: () => useSwitch,
   useTabs: () => useTabs,
-  useToolbar: () => useToolbar,
-  useTree: () => useTree,
-  useTreeNode: () => useTreeNode
+  useToolbar: () => useToolbar
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -236,25 +229,6 @@ var ButtonIconStyles = import_styled_components.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 = import_styled_components.css`
@@ -310,7 +284,6 @@ var ButtonBeforeDefaultStyles = import_styled_components.css`
 `;
 var ButtonVariantsStyles = import_styled_components.css`
   &[data-variant="primary"] {
-    color: var(--body-color-alpha-80);
     background-color: var(--font-color);
     background: linear-gradient(
       180deg,
@@ -320,6 +293,11 @@ var ButtonVariantsStyles = import_styled_components.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);
@@ -338,7 +316,6 @@ var ButtonVariantsStyles = import_styled_components.css`
     }
   }
   &[data-variant="secondary"] {
-    color: var(--font-color-alpha-60);
     border-color: var(--font-color-alpha-10);
 
     background-color: var(--body-color);
@@ -350,6 +327,8 @@ var ButtonVariantsStyles = import_styled_components.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);
@@ -366,8 +345,6 @@ var ButtonVariantsStyles = import_styled_components.css`
     }
   }
   &[data-variant="tertiary"] {
-    color: var(--font-color-alpha-60);
-
     background-color: transparent;
     background: linear-gradient(
       -180deg,
@@ -377,6 +354,8 @@ var ButtonVariantsStyles = import_styled_components.css`
     background-size: 100% 200%;
     background-position: 0% 10%;
 
+    color: var(--font-color-alpha-60) !important;
+
     &:hover,
     &:focus,
     &:active {
@@ -392,8 +371,8 @@ var ButtonVariantsStyles = import_styled_components.css`
     }
   }
   &[data-variant="mono"] {
-    color: var(--font-color-alpha-80);
     background-color: var(--contrast-color);
+    color: var(--font-color-alpha-80) !important;
 
     ::before {
       ${ButtonBeforeDefaultStyles}
@@ -412,9 +391,9 @@ var ButtonVariantsStyles = import_styled_components.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,
@@ -456,7 +435,6 @@ var ButtonVariantsStyles = import_styled_components.css`
   }
 
   &[data-variant="meta"] {
-    color: var(--alpha-mono-white-80);
     background-color: var(--color-blue);
     background: linear-gradient(
       180deg,
@@ -466,6 +444,8 @@ var ButtonVariantsStyles = import_styled_components.css`
     background-size: 100% 200%;
     background-position: 0% 50%;
 
+    color: var(--alpha-mono-white-80) !important;
+
     ::before {
       ${ButtonBeforeDefaultStyles}
       border-color: var(--tint-blue-30);
@@ -486,7 +466,6 @@ var ButtonVariantsStyles = import_styled_components.css`
     }
   }
   &[data-variant="hint"] {
-    color: var(--alpha-mono-white-80);
     background-color: var(--color-purple);
     background: linear-gradient(
       180deg,
@@ -496,6 +475,8 @@ var ButtonVariantsStyles = import_styled_components.css`
     background-size: 100% 200%;
     background-position: 0% 50%;
 
+    color: var(--alpha-mono-white-80) !important;
+
     ::before {
       ${ButtonBeforeDefaultStyles}
       border-color: var(--shade-purple-20);
@@ -512,7 +493,6 @@ var ButtonVariantsStyles = import_styled_components.css`
     }
   }
   &[data-variant="success"] {
-    color: var(--alpha-mono-white-90);
     background-color: var(--shade-green-30);
     background: linear-gradient(
       180deg,
@@ -522,6 +502,8 @@ var ButtonVariantsStyles = import_styled_components.css`
     background-size: 100% 200%;
     background-position: 0% 50%;
 
+    color: var(--alpha-mono-white-80) !important;
+
     ::before {
       ${ButtonBeforeDefaultStyles}
       border-color: var(--shade-green-20);
@@ -538,7 +520,6 @@ var ButtonVariantsStyles = import_styled_components.css`
     }
   }
   &[data-variant="danger"] {
-    color: var(--alpha-mono-white-80);
     background-color: var(--color-red);
     background: linear-gradient(
       180deg,
@@ -548,6 +529,8 @@ var ButtonVariantsStyles = import_styled_components.css`
     background-size: 100% 200%;
     background-position: 0% 50%;
 
+    color: var(--alpha-mono-white-80) !important;
+
     ::before {
       ${ButtonBeforeDefaultStyles}
       border-color: var(--tint-red-60);
@@ -567,7 +550,6 @@ var ButtonVariantsStyles = import_styled_components.css`
     }
   }
   &[data-variant="warning"] {
-    color: var(--alpha-mono-dark-80);
     background-color: var(--color-orange);
     background: linear-gradient(
       180deg,
@@ -577,6 +559,8 @@ var ButtonVariantsStyles = import_styled_components.css`
     background-size: 100% 200%;
     background-position: 0% 50%;
 
+    color: var(--alpha-mono-dark-80) !important;
+
     ::before {
       ${ButtonBeforeDefaultStyles}
       border-color: var(--tint-orange-30);
@@ -653,7 +637,8 @@ var ButtonWrapper = import_styled_components.default.button`
     ${ButtonSizeStyles}
     ${ButtonShapeStyles}
     ${ButtonVariantsStyles}
-      &[data-rawIcon="false"] {
+
+    &[data-rawIcon="false"] {
       ${ButtonIconStyles}
     }
   }
@@ -1163,6 +1148,28 @@ var BadgeVariantStyles = import_styled_components3.css`
     }
   }
 `;
+var BadgeEmphasisVariantStyles = import_styled_components3.css`
+  &[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 = import_styled_components3.css`
   &[data-shape="square"] {
     border-radius: 0;
@@ -1200,6 +1207,10 @@ var BadgeWrapper2 = import_styled_components3.default.div`
     ${BadgeVariantStyles}
     ${BadgeShapeStyles}
     ${BadgeSizeStyles}
+
+    &[data-emphasis="true"] {
+      ${BadgeEmphasisVariantStyles}
+    }
   }
 `;
 
@@ -1207,6 +1218,7 @@ var BadgeWrapper2 = import_styled_components3.default.div`
 var Badge = (props) => {
   const {
     raw = false,
+    emphasis = false,
     sizing = "small" /* Small */,
     variant = "primary" /* Primary */,
     shape = "smooth" /* Smooth */,
@@ -1220,6 +1232,7 @@ var Badge = (props) => {
       "data-variant": variant,
       "data-shape": shape,
       "data-size": sizing,
+      "data-emphasis": emphasis,
       ...restProps
     },
     children
@@ -2253,7 +2266,8 @@ var Dialog = (props) => {
     if (open && toggleDialog) toggleDialog();
   }, []);
   if (lock) useDisabledScroll(Boolean(states.open));
-  return /* @__PURE__ */ import_react17.default.createElement(import_react17.default.Fragment, null, states.open && /* @__PURE__ */ import_react17.default.createElement(
+  if (!states.open) return null;
+  return /* @__PURE__ */ import_react17.default.createElement(
     ScrollArea,
     {
       as: DialogWrapper,
@@ -2268,7 +2282,7 @@ var Dialog = (props) => {
       ...restProps
     },
     children
-  ));
+  );
 };
 Dialog.displayName = "Dialog";
 var DialogRoot = ({ children }) => {
@@ -2442,6 +2456,15 @@ var ContentWrapperSizes = import_styled_components9.css`
     max-width: var(--large);
   }
 `;
+var ContentWrapperVariants = import_styled_components9.css`
+  &[data-variant="body"] {
+    background-color: var(--body-color);
+  }
+
+  &[data-variant="contrast"] {
+    background-color: var(--contrast-color);
+  }
+`;
 var RootWrapper = import_styled_components9.default.div`
   position: relative;
 `;
@@ -2468,13 +2491,14 @@ var ContentWrapper = import_styled_components9.default.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;
@@ -2489,14 +2513,13 @@ var ItemWrapper2 = import_styled_components9.default.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;
@@ -2508,7 +2531,7 @@ var ItemWrapper2 = import_styled_components9.default.li`
     &:active,
     &:focus-within,
     &:has(:active) {
-      background-color: var(--contrast-color);
+      background-color: var(--font-color-alpha-10);
     }
   }
 
@@ -2573,7 +2596,14 @@ var DropdownMenuTrigger = (props) => {
 };
 DropdownMenuTrigger.displayName = "DropdownMenu.Trigger";
 var DropdownMenuContent = import_react19.default.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 = import_react19.default.useRef(false);
@@ -2639,6 +2669,7 @@ var DropdownMenuContent = import_react19.default.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),
@@ -3020,12 +3051,8 @@ var InnerWrapper = import_styled_components10.default.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);
@@ -3036,7 +3063,6 @@ var InnerWrapper = import_styled_components10.default.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;
     }
@@ -3062,16 +3088,7 @@ var InnerTrigger = import_styled_components10.default.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;
@@ -3081,7 +3098,7 @@ var InnerTrigger = import_styled_components10.default.button`
     transition: all ease-in-out 0.2s;
   }
 
-  ::before {
+  /* ::before {
     content: "";
     inset: 0;
 
@@ -3095,12 +3112,12 @@ var InnerTrigger = import_styled_components10.default.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;
@@ -3119,7 +3136,7 @@ var InnerSegment = import_styled_components10.default.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);
@@ -3130,7 +3147,7 @@ var InnerSegment = import_styled_components10.default.span`
     &:active,
     &:focus-within,
     &:has(:active) {
-      background-color: var(--font-color-alpha-10);
+      /* background-color: var(--font-color-alpha-10); */
       color: var(--font-color);
     }
   }
@@ -4027,7 +4044,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__ */ import_react23.default.createElement(
     MessageBubbleBadge,
@@ -4035,8 +4052,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
     },
@@ -4690,7 +4708,7 @@ var SplitContainer = import_styled_components16.default.div`
 `;
 var Panel = import_styled_components16.default.div`
   overflow: hidden;
-  width: ${(props) => props.width}%;
+  width: ${(props) => props.width}dvw;
 `;
 var Divider2 = import_styled_components16.default.div`
   width: var(--measurement-medium-10);
@@ -4746,6 +4764,8 @@ var DragOverlay = import_styled_components16.default.div`
 // src/resizable/index.tsx
 var Resizable = ({
   defaultWidth,
+  minWidth,
+  maxWidth,
   left,
   right
 }) => {
@@ -4759,7 +4779,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
@@ -6248,235 +6268,23 @@ var Tooltip = ({
 };
 Tooltip.displayName = "Tooltip";
 
-// src/tree/index.tsx
-var import_react48 = __toESM(require("react"));
-
-// src/tree/hooks/tree-provider.tsx
-var import_react46 = __toESM(require("react"));
-var defaultTreeAPI = {
-  id: "",
-  states: {},
-  methods: {}
-};
-var TreeContext = (0, import_react46.createContext)(defaultTreeAPI);
-var useTree = () => (0, import_react46.useContext)(TreeContext);
-var TreeProvider = ({
-  children,
-  defaultExpandedIds = [],
-  onSelectionChange
-}) => {
-  const context = useTreeProviderContext({
-    defaultExpandedIds,
-    onSelectionChange
-  });
-  return /* @__PURE__ */ import_react46.default.createElement(TreeContext.Provider, { value: context }, children);
-};
-function useTreeProviderContext({
-  defaultExpandedIds,
-  onSelectionChange
-}) {
-  const treeId = import_react46.default.useId();
-  const [expandedIds, setExpandedIds] = (0, import_react46.useState)(
-    () => new Set(defaultExpandedIds)
-  );
-  const [selectedIds, setSelectedIds] = (0, import_react46.useState)(() => /* @__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
-var import_react47 = __toESM(require("react"));
-var defaultTreeNodeAPI = {
-  id: "",
-  states: {},
-  methods: {}
-};
-var TreeNodeContext = (0, import_react47.createContext)(defaultTreeNodeAPI);
-var useTreeNode = () => (0, import_react47.useContext)(TreeNodeContext);
-var TreeNodeProvider = ({
-  children,
-  nodeId,
-  level,
-  isLast
-}) => {
-  const context = useTreeNodeProviderContext({ nodeId, level, isLast });
-  return /* @__PURE__ */ import_react47.default.createElement(TreeNodeContext.Provider, { value: context }, children);
-};
-function useTreeNodeProviderContext({
-  nodeId,
-  level,
-  isLast
-}) {
-  return {
-    id: nodeId,
-    states: {
-      nodeId,
-      level,
-      isLast
-    },
-    methods: {}
-  };
-}
-
-// src/tree/styles/index.ts
-var import_styled_components27 = __toESM(require("styled-components"));
-var TreeView = import_styled_components27.default.ul`
-  display: flex;
-  flex-direction: column;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-`;
-var TreeItem = import_styled_components27.default.li`
-  display: flex;
-  flex-direction: column;
-  list-style: none;
-`;
-var TreeNodeContent = import_styled_components27.default.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__ */ import_react48.default.createElement(TreeView, { id, role: "tree", ...restProps }, children);
-};
-Tree.displayName = "Tree";
-var TreeRoot = ({
-  children,
-  defaultExpandedIds,
-  onSelectionChange
-}) => {
-  return /* @__PURE__ */ import_react48.default.createElement(
-    TreeProvider,
-    {
-      defaultExpandedIds,
-      onSelectionChange
-    },
-    children
-  );
-};
-TreeRoot.displayName = "Tree.Root";
-var TreeNode = (props) => {
-  const { nodeId, level = 0, isLast = false, children, ...restProps } = props;
-  return /* @__PURE__ */ import_react48.default.createElement(TreeNodeProvider, { nodeId, level, isLast }, /* @__PURE__ */ import_react48.default.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__ */ import_react48.default.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" })
-  };
-  import_react48.default.useEffect(() => {
-    if (defaultOpen && !isExpanded && toggleExpanded) toggleExpanded(nodeId);
-  }, []);
-  if (isExpanded)
-    return /* @__PURE__ */ import_react48.default.createElement(
-      TreeNodeContent,
-      {
-        role: "group",
-        id: String(IdHandler.content),
-        "aria-labelledby": String(IdHandler.trigger),
-        "data-nodeId": nodeId,
-        ...restProps
-      },
-      children
-    );
-  return /* @__PURE__ */ import_react48.default.createElement(import_react48.default.Fragment, null);
-};
-TreeContent.displayName = "Tree.Content";
-Tree.Root = TreeRoot;
-Tree.Node = TreeNode;
-Tree.Trigger = TreeTrigger;
-Tree.Content = TreeContent;
-
 // src/select/index.tsx
-var import_react50 = __toESM(require("react"));
+var import_react47 = __toESM(require("react"));
 
 // src/select/hooks/index.tsx
-var import_react49 = __toESM(require("react"));
+var import_react46 = __toESM(require("react"));
 var defaultComponentAPI10 = {
   id: "",
   states: {},
   methods: {}
 };
-var SelectContext = import_react49.default.createContext(defaultComponentAPI10);
-var useSelect = () => import_react49.default.useContext(SelectContext);
+var SelectContext = import_react46.default.createContext(defaultComponentAPI10);
+var useSelect = () => import_react46.default.useContext(SelectContext);
 var SelectProvider = ({
   children
 }) => {
   const context = useSelectProvider();
-  return /* @__PURE__ */ import_react49.default.createElement(SelectContext.Provider, { value: context }, children);
+  return /* @__PURE__ */ import_react46.default.createElement(SelectContext.Provider, { value: context }, children);
 };
 function useSelectProvider() {
   const DEFAULT_POSITIONS2 = {
@@ -6489,19 +6297,19 @@ function useSelectProvider() {
     width: 0,
     height: 0
   };
-  const [open, setOpen] = import_react49.default.useState(false);
-  const [value, setValue] = import_react49.default.useState(null);
-  const [label, setLabel] = import_react49.default.useState("");
-  const [contentProps, setContentProps] = import_react49.default.useState({
+  const [open, setOpen] = import_react46.default.useState(false);
+  const [value, setValue] = import_react46.default.useState(null);
+  const [label, setLabel] = import_react46.default.useState("");
+  const [contentProps, setContentProps] = import_react46.default.useState({
     ...DEFAULT_POSITIONS2,
     ...DEFAULT_DIMENSIONS2
   });
-  const [triggerProps, setTriggerProps] = import_react49.default.useState({
+  const [triggerProps, setTriggerProps] = import_react46.default.useState({
     ...DEFAULT_POSITIONS2,
     ...DEFAULT_DIMENSIONS2
   });
-  const triggerId = import_react49.default.useId();
-  const listboxId = import_react49.default.useId();
+  const triggerId = import_react46.default.useId();
+  const listboxId = import_react46.default.useId();
   const composedId = `${triggerId}|${listboxId}`;
   return {
     id: composedId,
@@ -6524,12 +6332,12 @@ function useSelectProvider() {
 }
 
 // src/select/styles/index.tsx
-var import_styled_components28 = __toESM(require("styled-components"));
-var Wrapper = import_styled_components28.default.div`
+var import_styled_components27 = __toESM(require("styled-components"));
+var Wrapper = import_styled_components27.default.div`
   position: relative;
   width: 100%;
 `;
-var Trigger = import_styled_components28.default.button`
+var Trigger = import_styled_components27.default.button`
   all: unset;
   box-sizing: border-box;
 
@@ -6547,7 +6355,7 @@ var Trigger = import_styled_components28.default.button`
 
   cursor: pointer !important;
 `;
-var Label2 = import_styled_components28.default.span`
+var Label2 = import_styled_components27.default.span`
   flex: 1;
   text-align: left;
   font-weight: 400;
@@ -6555,7 +6363,7 @@ var Label2 = import_styled_components28.default.span`
   overflow: hidden;
   text-overflow: ellipsis;
 `;
-var Content = import_styled_components28.default.ul`
+var Content = import_styled_components27.default.ul`
   @keyframes select-slide-in-down {
     0% {
       opacity: 0;
@@ -6609,7 +6417,7 @@ var Content = import_styled_components28.default.ul`
     }
   }
 `;
-var List = import_styled_components28.default.li`
+var List = import_styled_components27.default.li`
   list-style: none;
   padding: 0;
   margin: 0;
@@ -6658,7 +6466,7 @@ var List = import_styled_components28.default.li`
     opacity: 0.6;
   }
 `;
-var Item = import_styled_components28.default.span`
+var Item = import_styled_components27.default.span`
   display: flex;
   align-items: center;
   gap: var(--measurement-small-60);
@@ -6670,11 +6478,11 @@ var Item = import_styled_components28.default.span`
 
 // src/select/index.tsx
 var SelectRoot = ({ children }) => {
-  return /* @__PURE__ */ import_react50.default.createElement(SelectProvider, null, children);
+  return /* @__PURE__ */ import_react47.default.createElement(SelectProvider, null, children);
 };
 SelectRoot.displayName = "Select.Root";
 var Select = ({ children }) => {
-  const selectRef = import_react50.default.useRef(null);
+  const selectRef = import_react47.default.useRef(null);
   const { states, methods } = useSelect();
   const handleClickOutside = () => {
     if (states.open && methods.setOpen) {
@@ -6685,7 +6493,7 @@ var Select = ({ children }) => {
     selectRef,
     handleClickOutside
   );
-  return /* @__PURE__ */ import_react50.default.createElement(Wrapper, { ref: selectRef }, children);
+  return /* @__PURE__ */ import_react47.default.createElement(Wrapper, { ref: selectRef }, children);
 };
 Select.displayName = "Select";
 var SelectTrigger = (props) => {
@@ -6699,7 +6507,7 @@ var SelectTrigger = (props) => {
     children,
     ...restProps
   } = props;
-  const triggerRef = import_react50.default.useRef(null);
+  const triggerRef = import_react47.default.useRef(null);
   const triggerRect = () => triggerRef.current?.getBoundingClientRect();
   const { id, states, methods } = useSelect();
   const { toggleOpen, setTriggerProps } = methods;
@@ -6717,7 +6525,7 @@ var SelectTrigger = (props) => {
       });
     }
   };
-  return /* @__PURE__ */ import_react50.default.createElement(
+  return /* @__PURE__ */ import_react47.default.createElement(
     Trigger,
     {
       ref: triggerRef,
@@ -6737,7 +6545,7 @@ var SelectTrigger = (props) => {
       disabled,
       ...restProps
     },
-    /* @__PURE__ */ import_react50.default.createElement(Label2, null, children)
+    /* @__PURE__ */ import_react47.default.createElement(Label2, null, children)
   );
 };
 SelectTrigger.displayName = "Select.Trigger";
@@ -6745,8 +6553,8 @@ var SelectContent = (props) => {
   const { raw, defaultOpen, children, ...restProps } = props;
   const { id, states, methods } = useSelect();
   const { toggleOpen, setContentProps } = methods;
-  const mounted = import_react50.default.useRef(false);
-  const contentRef = import_react50.default.useRef(null);
+  const mounted = import_react47.default.useRef(false);
+  const contentRef = import_react47.default.useRef(null);
   const contentRect = () => contentRef?.current?.getBoundingClientRect();
   const bodyRect = () => {
     if (typeof document !== "undefined") {
@@ -6764,10 +6572,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;
-  import_react50.default.useEffect(() => {
+  import_react47.default.useEffect(() => {
     if (defaultOpen && toggleOpen) toggleOpen();
   }, []);
-  import_react50.default.useEffect(() => {
+  import_react47.default.useEffect(() => {
     mounted.current = true;
     if (setContentProps) {
       setContentProps({
@@ -6783,7 +6591,7 @@ var SelectContent = (props) => {
       mounted.current = false;
     };
   }, [states.open]);
-  import_react50.default.useEffect(() => {
+  import_react47.default.useEffect(() => {
     if (!states.open) return;
     const handleKeyDown = (event) => {
       if (event.key === "Escape" && methods.setOpen) {
@@ -6794,7 +6602,7 @@ var SelectContent = (props) => {
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [states.open]);
   if (!states.open) return null;
-  return /* @__PURE__ */ import_react50.default.createElement(
+  return /* @__PURE__ */ import_react47.default.createElement(
     ScrollArea,
     {
       scrollbar: true,
@@ -6834,7 +6642,7 @@ var SelectItem = (props) => {
       handleSelect(event);
     }
   };
-  return /* @__PURE__ */ import_react50.default.createElement(
+  return /* @__PURE__ */ import_react47.default.createElement(
     List,
     {
       role: "option",
@@ -6848,7 +6656,7 @@ var SelectItem = (props) => {
       onKeyDown: handleKeyDown,
       ...restProps
     },
-    /* @__PURE__ */ import_react50.default.createElement(Item, null, children)
+    /* @__PURE__ */ import_react47.default.createElement(Item, null, children)
   );
 };
 SelectItem.displayName = "Select.Item";
@@ -6955,11 +6763,6 @@ Select.Item = SelectItem;
   ToolbarSection,
   ToolbarTrigger,
   Tooltip,
-  Tree,
-  TreeContent,
-  TreeNode,
-  TreeRoot,
-  TreeTrigger,
   useAccordion,
   useCheckbox,
   useCollapsible,
@@ -6971,7 +6774,5 @@ Select.Item = SelectItem;
   useSheet,
   useSwitch,
   useTabs,
-  useToolbar,
-  useTree,
-  useTreeNode
+  useToolbar
 });