@blockle/blocks 0.11.3 → 0.12.1

package/dist/index.cjs

@@ -152,19 +152,19 @@ const useClickOutside = (ref, onClickOutside, { enabled = true } = {}) => {
     };
   }, [ref, onClickOutside, enabled]);
 };
-function getDropdownPosition(align, anchorRef, dropdownRef) {
-  if (!anchorRef.current || !dropdownRef.current) {
+function getDopoverPosition(align, anchorRef, popoverRef) {
+  if (!anchorRef.current || !popoverRef.current) {
     return [0, 0];
   }
-  dropdownRef.current.style.transform = "none";
-  dropdownRef.current.style.transitionDuration = "0s";
+  popoverRef.current.style.transform = "none";
+  popoverRef.current.style.transitionDuration = "0s";
   const anchorRect = anchorRef.current.getBoundingClientRect();
-  const dropdownRect = dropdownRef.current.getBoundingClientRect();
-  const dropdownStyles = getComputedStyle(dropdownRef.current);
-  const marginTop = Number.parseFloat(dropdownStyles.getPropertyValue("margin-top"));
-  const marginRight = Number.parseFloat(dropdownStyles.getPropertyValue("margin-right"));
-  const marginBottom = Number.parseFloat(dropdownStyles.getPropertyValue("margin-bottom"));
-  const marginLeft = Number.parseFloat(dropdownStyles.getPropertyValue("margin-left"));
+  const popoverRect = popoverRef.current.getBoundingClientRect();
+  const popoverStyles = getComputedStyle(popoverRef.current);
+  const marginTop = Number.parseFloat(popoverStyles.getPropertyValue("margin-top"));
+  const marginRight = Number.parseFloat(popoverStyles.getPropertyValue("margin-right"));
+  const marginBottom = Number.parseFloat(popoverStyles.getPropertyValue("margin-bottom"));
+  const marginLeft = Number.parseFloat(popoverStyles.getPropertyValue("margin-left"));
   const marginY = marginTop + marginBottom;
   const marginX = marginRight + marginLeft;
   const docHeight = document.documentElement.clientHeight;
@@ -173,30 +173,30 @@ function getDropdownPosition(align, anchorRef, dropdownRef) {
   const docScrollLeft = document.documentElement.scrollLeft;
   const anchorLeft = anchorRect.left + docScrollLeft;
   const anchorTop = anchorRect.top + docScrollTop;
-  const topPosition = anchorRect.top - (dropdownRect.height + marginTop);
-  const rightPosition = anchorRect.left + anchorRect.width + dropdownRect.width;
-  const bottomPosition = anchorRect.top + anchorRect.height + dropdownRect.height;
-  const leftPosition = anchorRect.left - dropdownRect.width;
-  const offsetX = anchorLeft - (dropdownRect.width - anchorRect.width) / 2;
-  const offsetY = anchorTop - (dropdownRect.height - anchorRect.height) / 2;
-  dropdownRef.current.style.transform = "";
-  dropdownRef.current.style.transitionDuration = "";
+  const topPosition = anchorRect.top - (popoverRect.height + marginTop);
+  const rightPosition = anchorRect.left + anchorRect.width + popoverRect.width;
+  const bottomPosition = anchorRect.top + anchorRect.height + popoverRect.height;
+  const leftPosition = anchorRect.left - popoverRect.width;
+  const offsetX = anchorLeft - marginLeft - (popoverRect.width - anchorRect.width) / 2;
+  const offsetY = anchorTop - marginTop - (popoverRect.height - anchorRect.height) / 2;
+  popoverRef.current.style.transform = "";
+  popoverRef.current.style.transitionDuration = "";
   switch (align) {
     case "top": {
-      return topPosition > 0 ? [offsetX, anchorTop - dropdownRect.height - marginY] : [offsetX, anchorTop + anchorRect.height];
+      return topPosition > 0 ? [offsetX, anchorTop - popoverRect.height - marginY] : [offsetX, anchorTop + anchorRect.height];
     }
     case "bottom": {
-      return bottomPosition < docHeight || topPosition < 0 ? [offsetX, anchorTop + anchorRect.height] : [offsetX, anchorTop - dropdownRect.height - marginY];
+      return bottomPosition < docHeight || topPosition < 0 ? [offsetX, anchorTop + anchorRect.height] : [offsetX, anchorTop - popoverRect.height - marginY];
     }
     case "left": {
-      return leftPosition > docWidth || leftPosition > 0 ? [anchorLeft - dropdownRect.width - marginX, offsetY] : [anchorLeft + anchorRect.width, offsetY];
+      return leftPosition > docWidth || leftPosition > 0 ? [anchorLeft - popoverRect.width - marginX, offsetY] : [anchorLeft + anchorRect.width, offsetY];
     }
     case "right": {
-      return rightPosition < docWidth || leftPosition < 0 ? [anchorLeft + anchorRect.width, offsetY] : [anchorLeft - dropdownRect.width - marginX, offsetY];
+      return rightPosition < docWidth || leftPosition < 0 ? [anchorLeft + anchorRect.width, offsetY] : [anchorLeft - popoverRect.width - marginX, offsetY];
     }
   }
 }
-const Dropdown = ({
+const Popover = ({
   align = "bottom",
   anchorElement,
   children,
@@ -205,23 +205,18 @@ const Dropdown = ({
   open,
   repositionOnScroll,
   style,
-  variant,
   ...restProps
 }) => {
   const layer = styles_components_overlay_Dialog_Dialog_cjs.useLayer();
   const [visible, hide] = styles_components_overlay_Dialog_Dialog_cjs.useVisibilityState(open);
   const [position, setPosition] = react.useState({ x: 0, y: 0 });
-  const dropdownRef = react.useRef(null);
-  const containerClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles(
-    "dropdown",
-    { base: true, variants: { variant } },
-    false
-  );
+  const popoverRef = react.useRef(null);
+  const containerClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("popover", { base: true }, false);
   react.useLayoutEffect(() => {
     if (!visible) {
       return;
     }
-    const position2 = getDropdownPosition(align, anchorElement, dropdownRef);
+    const position2 = getDopoverPosition(align, anchorElement, popoverRef);
     setPosition({ x: position2[0], y: position2[1] });
   }, [align, anchorElement, visible]);
   react.useEffect(() => {
@@ -229,7 +224,7 @@ const Dropdown = ({
       return;
     }
     function handleResize() {
-      const position2 = getDropdownPosition(align, anchorElement, dropdownRef);
+      const position2 = getDopoverPosition(align, anchorElement, popoverRef);
       setPosition({ x: position2[0], y: position2[1] });
     }
     window.addEventListener("resize", handleResize);
@@ -242,13 +237,13 @@ const Dropdown = ({
   styles_components_overlay_Dialog_Dialog_cjs.useIsomorphicLayoutEffect(() => {
     var _a;
     if (!open) {
-      (_a = dropdownRef.current) == null ? void 0 : _a.removeAttribute("data-open");
+      (_a = popoverRef.current) == null ? void 0 : _a.removeAttribute("data-open");
       return;
     }
     let timer = requestAnimationFrame(() => {
       timer = requestAnimationFrame(() => {
         var _a2;
-        (_a2 = dropdownRef.current) == null ? void 0 : _a2.setAttribute("data-open", "");
+        (_a2 = popoverRef.current) == null ? void 0 : _a2.setAttribute("data-open", "");
       });
     });
     return () => {
@@ -264,12 +259,12 @@ const Dropdown = ({
     if (open) {
       return;
     }
-    if (!styles_components_overlay_Dialog_Dialog_cjs.hasAnimationDuration(dropdownRef.current)) {
+    if (!styles_components_overlay_Dialog_Dialog_cjs.hasAnimationDuration(popoverRef.current)) {
       hide();
     }
   }, [hide, open]);
   styles_components_overlay_Dialog_Dialog_cjs.useKeyboard("Escape", onRequestClose, { enabled: visible });
-  useClickOutside(dropdownRef, onRequestClose, { enabled: visible });
+  useClickOutside(popoverRef, onRequestClose, { enabled: visible });
   if (!visible) {
     return null;
   }
@@ -277,7 +272,7 @@ const Dropdown = ({
   return /* @__PURE__ */ jsxRuntime.jsx(styles_components_overlay_Dialog_Dialog_cjs.Portal, { container: layer(), children: /* @__PURE__ */ jsxRuntime.jsx(
     styles_components_display_Divider_Divider_cjs.Box,
     {
-      ref: dropdownRef,
+      ref: popoverRef,
       "data-open": dataOpen,
       onAnimationEnd,
       onTransitionEnd: onAnimationEnd,
@@ -285,10 +280,6 @@ const Dropdown = ({
       position: "absolute",
       style: {
         ...style,
-        // TODO Think about how to handle this, perhaps we could add a custom class to the dropdown
-        // Or we remove it from getDropdownPosition?
-        // "horizontal" ? "vertical"
-        margin: align === "bottom" || align === "top" ? "var(--spacing) 0" : "0 var(--spacing)",
         left: position.x,
         top: position.y
       },
@@ -297,10 +288,19 @@ const Dropdown = ({
     }
   ) });
 };
-const Tooltip = ({ align = "top", children, label }) => {
+const Tooltip = ({
+  align = "top",
+  children,
+  label,
+  colorScheme
+}) => {
   const id = react.useId();
   const ref = react.useRef(null);
   const [open, setOpen] = react.useState(false);
+  const tooltipClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("tooltip", {
+    base: true,
+    variants: { colorScheme }
+  });
   react.useEffect(() => {
     const element = ref.current;
     if (!element) {
@@ -336,7 +336,7 @@ const Tooltip = ({ align = "top", children, label }) => {
       ["aria-describedby"]: open ? id : void 0
     }),
     /* @__PURE__ */ jsxRuntime.jsx(
-      Dropdown,
+      Popover,
       {
         id,
         role: "tooltip",
@@ -346,11 +346,19 @@ const Tooltip = ({ align = "top", children, label }) => {
           setOpen(false);
         },
         align,
+        className: tooltipClassName,
         children: label
       }
     )
   ] });
 };
+const useRootAriaHidden = (hidden) => {
+  const context = react.useContext(styles_components_display_Divider_Divider_cjs.BlocksProviderContext);
+  if (!context) {
+    throw new Error("useRootAriaHidden must be used within a BlocksProvider");
+  }
+  context.setAriaHidden(hidden);
+};
 exports.breakpointQuery = styles_lib_css_atoms_breakpoints_cjs.breakpointQuery;
 exports.style = styles_lib_css_style_style_cjs.style;
 exports.makeComponentTheme = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme;
@@ -379,7 +387,6 @@ exports.Portal = styles_components_overlay_Dialog_Dialog_cjs.Portal;
 exports.useIsomorphicLayoutEffect = styles_components_overlay_Dialog_Dialog_cjs.useIsomorphicLayoutEffect;
 exports.useKeyboard = styles_components_overlay_Dialog_Dialog_cjs.useKeyboard;
 exports.usePreventBodyScroll = styles_components_overlay_Dialog_Dialog_cjs.usePreventBodyScroll;
-exports.useRootAriaHidden = styles_components_overlay_Dialog_Dialog_cjs.useRootAriaHidden;
 exports.Heading = styles_components_typography_Heading_Heading_cjs.Heading;
 exports.Text = styles_components_typography_Text_Text_cjs.Text;
 exports.Inline = Inline;
@@ -387,3 +394,4 @@ exports.Link = Link;
 exports.Progress = Progress;
 exports.Stack = Stack;
 exports.Tooltip = Tooltip;
+exports.useRootAriaHidden = useRootAriaHidden;

package/dist/index.mjs

@@ -5,11 +5,11 @@ import { style } from "./styles/lib/css/style/style.mjs";
 import { makeComponentTheme } from "./styles/lib/theme/makeComponentTheme.mjs";
 import { makeTheme } from "./styles/lib/theme/makeTheme.mjs";
 import { vars } from "./styles/lib/theme/vars.css.mjs";
-import { useComponentStyles, Box, classnames, createSlottable, composeRefs } from "./styles/components/display/Divider/Divider.mjs";
+import { useComponentStyles, Box, classnames, createSlottable, composeRefs, BlocksProviderContext } from "./styles/components/display/Divider/Divider.mjs";
 import { Divider, Slot, useComponentStyleDefaultProps } from "./styles/components/display/Divider/Divider.mjs";
 import { atoms } from "./styles/lib/css/atoms/sprinkles.css.mjs";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { forwardRef, useEffect, useState, useRef, useLayoutEffect, useCallback, useId, Children, isValidElement, cloneElement } from "react";
+import { forwardRef, useEffect, useState, useRef, useLayoutEffect, useCallback, useId, Children, isValidElement, cloneElement, useContext } from "react";
 import { Button, Spinner } from "./styles/components/form/Button/Button.mjs";
 import { Checkbox, Label } from "./styles/components/form/Checkbox/Checkbox.mjs";
 import { Input } from "./styles/components/form/Input/Input.mjs";
@@ -19,7 +19,7 @@ import { Slider } from "./styles/components/form/Slider/Slider.mjs";
 import { Switch } from "./styles/components/form/Switch/Switch.mjs";
 import { BlocksProvider } from "./styles/components/other/BlocksProvider/BlocksProvider.mjs";
 import { useLayer, useVisibilityState, useIsomorphicLayoutEffect, hasAnimationDuration, useKeyboard, Portal } from "./styles/components/overlay/Dialog/Dialog.mjs";
-import { Dialog, usePreventBodyScroll, useRootAriaHidden } from "./styles/components/overlay/Dialog/Dialog.mjs";
+import { Dialog, usePreventBodyScroll } from "./styles/components/overlay/Dialog/Dialog.mjs";
 import { Heading } from "./styles/components/typography/Heading/Heading.mjs";
 import { Text } from "./styles/components/typography/Text/Text.mjs";
 const Progress = forwardRef(function Progress2({ value, max = 100, className, ...restProps }, ref) {
@@ -154,19 +154,19 @@ const useClickOutside = (ref, onClickOutside, { enabled = true } = {}) => {
     };
   }, [ref, onClickOutside, enabled]);
 };
-function getDropdownPosition(align, anchorRef, dropdownRef) {
-  if (!anchorRef.current || !dropdownRef.current) {
+function getDopoverPosition(align, anchorRef, popoverRef) {
+  if (!anchorRef.current || !popoverRef.current) {
     return [0, 0];
   }
-  dropdownRef.current.style.transform = "none";
-  dropdownRef.current.style.transitionDuration = "0s";
+  popoverRef.current.style.transform = "none";
+  popoverRef.current.style.transitionDuration = "0s";
   const anchorRect = anchorRef.current.getBoundingClientRect();
-  const dropdownRect = dropdownRef.current.getBoundingClientRect();
-  const dropdownStyles = getComputedStyle(dropdownRef.current);
-  const marginTop = Number.parseFloat(dropdownStyles.getPropertyValue("margin-top"));
-  const marginRight = Number.parseFloat(dropdownStyles.getPropertyValue("margin-right"));
-  const marginBottom = Number.parseFloat(dropdownStyles.getPropertyValue("margin-bottom"));
-  const marginLeft = Number.parseFloat(dropdownStyles.getPropertyValue("margin-left"));
+  const popoverRect = popoverRef.current.getBoundingClientRect();
+  const popoverStyles = getComputedStyle(popoverRef.current);
+  const marginTop = Number.parseFloat(popoverStyles.getPropertyValue("margin-top"));
+  const marginRight = Number.parseFloat(popoverStyles.getPropertyValue("margin-right"));
+  const marginBottom = Number.parseFloat(popoverStyles.getPropertyValue("margin-bottom"));
+  const marginLeft = Number.parseFloat(popoverStyles.getPropertyValue("margin-left"));
   const marginY = marginTop + marginBottom;
   const marginX = marginRight + marginLeft;
   const docHeight = document.documentElement.clientHeight;
@@ -175,30 +175,30 @@ function getDropdownPosition(align, anchorRef, dropdownRef) {
   const docScrollLeft = document.documentElement.scrollLeft;
   const anchorLeft = anchorRect.left + docScrollLeft;
   const anchorTop = anchorRect.top + docScrollTop;
-  const topPosition = anchorRect.top - (dropdownRect.height + marginTop);
-  const rightPosition = anchorRect.left + anchorRect.width + dropdownRect.width;
-  const bottomPosition = anchorRect.top + anchorRect.height + dropdownRect.height;
-  const leftPosition = anchorRect.left - dropdownRect.width;
-  const offsetX = anchorLeft - (dropdownRect.width - anchorRect.width) / 2;
-  const offsetY = anchorTop - (dropdownRect.height - anchorRect.height) / 2;
-  dropdownRef.current.style.transform = "";
-  dropdownRef.current.style.transitionDuration = "";
+  const topPosition = anchorRect.top - (popoverRect.height + marginTop);
+  const rightPosition = anchorRect.left + anchorRect.width + popoverRect.width;
+  const bottomPosition = anchorRect.top + anchorRect.height + popoverRect.height;
+  const leftPosition = anchorRect.left - popoverRect.width;
+  const offsetX = anchorLeft - marginLeft - (popoverRect.width - anchorRect.width) / 2;
+  const offsetY = anchorTop - marginTop - (popoverRect.height - anchorRect.height) / 2;
+  popoverRef.current.style.transform = "";
+  popoverRef.current.style.transitionDuration = "";
   switch (align) {
     case "top": {
-      return topPosition > 0 ? [offsetX, anchorTop - dropdownRect.height - marginY] : [offsetX, anchorTop + anchorRect.height];
+      return topPosition > 0 ? [offsetX, anchorTop - popoverRect.height - marginY] : [offsetX, anchorTop + anchorRect.height];
     }
     case "bottom": {
-      return bottomPosition < docHeight || topPosition < 0 ? [offsetX, anchorTop + anchorRect.height] : [offsetX, anchorTop - dropdownRect.height - marginY];
+      return bottomPosition < docHeight || topPosition < 0 ? [offsetX, anchorTop + anchorRect.height] : [offsetX, anchorTop - popoverRect.height - marginY];
     }
     case "left": {
-      return leftPosition > docWidth || leftPosition > 0 ? [anchorLeft - dropdownRect.width - marginX, offsetY] : [anchorLeft + anchorRect.width, offsetY];
+      return leftPosition > docWidth || leftPosition > 0 ? [anchorLeft - popoverRect.width - marginX, offsetY] : [anchorLeft + anchorRect.width, offsetY];
     }
     case "right": {
-      return rightPosition < docWidth || leftPosition < 0 ? [anchorLeft + anchorRect.width, offsetY] : [anchorLeft - dropdownRect.width - marginX, offsetY];
+      return rightPosition < docWidth || leftPosition < 0 ? [anchorLeft + anchorRect.width, offsetY] : [anchorLeft - popoverRect.width - marginX, offsetY];
     }
   }
 }
-const Dropdown = ({
+const Popover = ({
   align = "bottom",
   anchorElement,
   children,
@@ -207,23 +207,18 @@ const Dropdown = ({
   open,
   repositionOnScroll,
   style: style2,
-  variant,
   ...restProps
 }) => {
   const layer = useLayer();
   const [visible, hide] = useVisibilityState(open);
   const [position, setPosition] = useState({ x: 0, y: 0 });
-  const dropdownRef = useRef(null);
-  const containerClassName = useComponentStyles(
-    "dropdown",
-    { base: true, variants: { variant } },
-    false
-  );
+  const popoverRef = useRef(null);
+  const containerClassName = useComponentStyles("popover", { base: true }, false);
   useLayoutEffect(() => {
     if (!visible) {
       return;
     }
-    const position2 = getDropdownPosition(align, anchorElement, dropdownRef);
+    const position2 = getDopoverPosition(align, anchorElement, popoverRef);
     setPosition({ x: position2[0], y: position2[1] });
   }, [align, anchorElement, visible]);
   useEffect(() => {
@@ -231,7 +226,7 @@ const Dropdown = ({
       return;
     }
     function handleResize() {
-      const position2 = getDropdownPosition(align, anchorElement, dropdownRef);
+      const position2 = getDopoverPosition(align, anchorElement, popoverRef);
       setPosition({ x: position2[0], y: position2[1] });
     }
     window.addEventListener("resize", handleResize);
@@ -244,13 +239,13 @@ const Dropdown = ({
   useIsomorphicLayoutEffect(() => {
     var _a;
     if (!open) {
-      (_a = dropdownRef.current) == null ? void 0 : _a.removeAttribute("data-open");
+      (_a = popoverRef.current) == null ? void 0 : _a.removeAttribute("data-open");
       return;
     }
     let timer = requestAnimationFrame(() => {
       timer = requestAnimationFrame(() => {
         var _a2;
-        (_a2 = dropdownRef.current) == null ? void 0 : _a2.setAttribute("data-open", "");
+        (_a2 = popoverRef.current) == null ? void 0 : _a2.setAttribute("data-open", "");
       });
     });
     return () => {
@@ -266,12 +261,12 @@ const Dropdown = ({
     if (open) {
       return;
     }
-    if (!hasAnimationDuration(dropdownRef.current)) {
+    if (!hasAnimationDuration(popoverRef.current)) {
       hide();
     }
   }, [hide, open]);
   useKeyboard("Escape", onRequestClose, { enabled: visible });
-  useClickOutside(dropdownRef, onRequestClose, { enabled: visible });
+  useClickOutside(popoverRef, onRequestClose, { enabled: visible });
   if (!visible) {
     return null;
   }
@@ -279,7 +274,7 @@ const Dropdown = ({
   return /* @__PURE__ */ jsx(Portal, { container: layer(), children: /* @__PURE__ */ jsx(
     Box,
     {
-      ref: dropdownRef,
+      ref: popoverRef,
       "data-open": dataOpen,
       onAnimationEnd,
       onTransitionEnd: onAnimationEnd,
@@ -287,10 +282,6 @@ const Dropdown = ({
       position: "absolute",
       style: {
         ...style2,
-        // TODO Think about how to handle this, perhaps we could add a custom class to the dropdown
-        // Or we remove it from getDropdownPosition?
-        // "horizontal" ? "vertical"
-        margin: align === "bottom" || align === "top" ? "var(--spacing) 0" : "0 var(--spacing)",
         left: position.x,
         top: position.y
       },
@@ -299,10 +290,19 @@ const Dropdown = ({
     }
   ) });
 };
-const Tooltip = ({ align = "top", children, label }) => {
+const Tooltip = ({
+  align = "top",
+  children,
+  label,
+  colorScheme
+}) => {
   const id = useId();
   const ref = useRef(null);
   const [open, setOpen] = useState(false);
+  const tooltipClassName = useComponentStyles("tooltip", {
+    base: true,
+    variants: { colorScheme }
+  });
   useEffect(() => {
     const element = ref.current;
     if (!element) {
@@ -338,7 +338,7 @@ const Tooltip = ({ align = "top", children, label }) => {
       ["aria-describedby"]: open ? id : void 0
     }),
     /* @__PURE__ */ jsx(
-      Dropdown,
+      Popover,
       {
         id,
         role: "tooltip",
@@ -348,11 +348,19 @@ const Tooltip = ({ align = "top", children, label }) => {
           setOpen(false);
         },
         align,
+        className: tooltipClassName,
         children: label
       }
     )
   ] });
 };
+const useRootAriaHidden = (hidden) => {
+  const context = useContext(BlocksProviderContext);
+  if (!context) {
+    throw new Error("useRootAriaHidden must be used within a BlocksProvider");
+  }
+  context.setAriaHidden(hidden);
+};
 export {
   BlocksProvider,
   Box,

package/dist/momotaro.chunk.d.ts

@@ -234,7 +234,7 @@ declare const atoms: ((props: {
         wide?: "center" | "flex-start" | "flex-end" | undefined;
     } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "center" | "flex-start" | "flex-end" | null>;
 }) => string) & {
-    properties: Set<"borderRadius" | "color" | "borderWidth" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "transition" | "boxShadow" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "blockSize" | "columnGap" | "cursor" | "display" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "inlineSize" | "insetBlockEnd" | "insetBlockStart" | "insetInlineEnd" | "insetInlineStart" | "justifyContent" | "marginBlockEnd" | "marginBlockStart" | "marginInlineEnd" | "marginInlineStart" | "maxBlockSize" | "maxInlineSize" | "opacity" | "overflowBlock" | "overflowInline" | "paddingBlockEnd" | "paddingBlockStart" | "paddingInlineEnd" | "paddingInlineStart" | "pointerEvents" | "position" | "rowGap" | "textAlign" | "textTransform" | "userSelect" | "whiteSpace" | "wordBreak" | "wordWrap" | "border" | "borderColor" | "flex" | "gap" | "inset" | "insetBlock" | "insetInline" | "margin" | "marginBlock" | "marginInline" | "outline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "placeItems" | "textDecoration" | "textWrap">;
+    properties: Set<"borderRadius" | "color" | "borderWidth" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "transition" | "boxShadow" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "blockSize" | "columnGap" | "cursor" | "display" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "inlineSize" | "insetBlockEnd" | "insetBlockStart" | "insetInlineEnd" | "insetInlineStart" | "justifyContent" | "marginBlockEnd" | "marginBlockStart" | "marginInlineEnd" | "marginInlineStart" | "maxBlockSize" | "maxInlineSize" | "opacity" | "overflowBlock" | "overflowInline" | "paddingBlockEnd" | "paddingBlockStart" | "paddingInlineEnd" | "paddingInlineStart" | "pointerEvents" | "position" | "rowGap" | "textAlign" | "textTransform" | "textWrap" | "userSelect" | "whiteSpace" | "wordBreak" | "wordWrap" | "border" | "borderColor" | "flex" | "gap" | "inset" | "insetBlock" | "insetInline" | "margin" | "marginBlock" | "marginInline" | "outline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "placeItems" | "textDecoration">;
 };
 
 declare const breakpoints: {
@@ -330,7 +330,6 @@ type DividerTheme = {
     };
 };
 type DialogTheme = {
-    backdrop: string;
     dialog: string;
     variants: {
         size: 'small' | 'medium' | 'large';
@@ -376,11 +375,8 @@ type SwitchTheme = {
     base: string;
     slider: string;
 };
-type DropdownTheme = {
+type PopoverTheme = {
     base: string;
-    variants: {
-        variant: 'solid' | 'outline';
-    };
 };
 type SelectTheme = {
     wrapper?: string;
@@ -400,21 +396,28 @@ type SliderTheme = {
         colorScheme: 'primary' | 'secondary';
     };
 };
+type TooltipTheme = {
+    base: string;
+    variants: {
+        colorScheme: 'primary' | 'secondary';
+    };
+};
 type ComponentThemes = {
     button: ButtonTheme;
     checkbox: CheckboxTheme;
     dialog: DialogTheme;
     divider: DividerTheme;
-    dropdown: DropdownTheme;
     input: InputTheme;
     label: LabelTheme;
     link: LinkTheme;
+    popover: PopoverTheme;
     progress: ProgressTheme;
     radio: RadioTheme;
     select: SelectTheme;
+    slider: SliderTheme;
     spinner: SpinnerTheme;
     switch: SwitchTheme;
-    slider: SliderTheme;
+    tooltip: TooltipTheme;
 };
 /**
  * ComponentThemeProps is a helper type to define the props passed to useComponentStyles.
@@ -1069,7 +1072,7 @@ type DialogProps = {
 };
 declare const Dialog: React.FC<DialogProps>;
 
-type DropdownProps = {
+type PopoverProps = {
     align?: 'top' | 'bottom' | 'left' | 'right';
     anchorElement: React.RefObject<HTMLElement>;
     children: React.ReactNode;
@@ -1078,14 +1081,14 @@ type DropdownProps = {
     open: boolean;
     repositionOnScroll?: boolean;
     style?: React.CSSProperties;
-    variant?: DropdownTheme['variants']['variant'];
 } & HTMLElementProps<HTMLDivElement>;
 
 type ReactElement = React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 type TooltipProps = {
-    align?: DropdownProps['align'];
+    align?: PopoverProps['align'];
     children: ReactElement;
     label: React.ReactNode;
+    colorScheme?: TooltipTheme['variants']['colorScheme'];
 };
 declare const Tooltip: React.FC<TooltipProps>;
 
@@ -1135,7 +1138,7 @@ type UseKeyboardOptions = {
     enabled?: boolean;
     type?: 'keydown' | 'keyup';
 };
-declare const useKeyboard: (key: KeyboardEvent['key'], callback: () => void, { enabled, type }?: UseKeyboardOptions) => void;
+declare const useKeyboard: (key: KeyboardEvent['key'], callback: (event: KeyboardEvent) => void, { enabled, type }?: UseKeyboardOptions) => void;
 
 declare const usePreventBodyScroll: (enabled?: boolean) => void;