@blockle/blocks 0.11.3 → 0.12.1

package/dist/styles/components/overlay/Dialog/Dialog.cjs

@@ -12,33 +12,6 @@ const Portal = ({ children, container }) => {
     container || document.body
   );
 };
-const focusableSelectors = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
-const getFirstFocusableElement = (container) => {
-  const focusable = container.querySelector(focusableSelectors);
-  return focusable || null;
-};
-const focusFirstElement = (container) => {
-  const focusable = getFirstFocusableElement(container);
-  if (focusable) {
-    focusable.focus();
-  }
-};
-const useFocusLock = ({ ref, active }) => {
-  react.useEffect(() => {
-    if (!active) {
-      return;
-    }
-    const handleFocus = (event) => {
-      if (ref.current && event.target instanceof HTMLElement && !ref.current.contains(event.target)) {
-        focusFirstElement(ref.current);
-      }
-    };
-    document.addEventListener("focusin", handleFocus);
-    return () => {
-      document.removeEventListener("focusin", handleFocus);
-    };
-  }, [active, ref]);
-};
 const useIsomorphicLayoutEffect = typeof window === "undefined" ? react.useEffect : react.useLayoutEffect;
 const useKeyboard = (key, callback, { enabled = true, type = "keydown" } = {}) => {
   react.useEffect(() => {
@@ -47,7 +20,7 @@ const useKeyboard = (key, callback, { enabled = true, type = "keydown" } = {}) =
     }
     function handleKeyDown(event) {
       if (event.key === key) {
-        callback();
+        callback(event);
       }
     }
     document.addEventListener(type, handleKeyDown);
@@ -110,21 +83,13 @@ const useRestoreFocus = (active) => {
     target.current = document.activeElement;
   }
   react.useEffect(() => {
+    var _a;
     if (target.current && !active && target.current instanceof HTMLElement) {
-      target.current.focus();
-    }
-    if (!active) {
+      (_a = target.current) == null ? void 0 : _a.focus();
       target.current = null;
     }
   }, [active]);
 };
-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);
-};
 const useVisibilityState = (open) => {
   const [visible, setVisible] = react.useState(open);
   const hide = react.useCallback(() => {
@@ -166,38 +131,56 @@ const Dialog = ({
   size,
   ...restProps
 }) => {
-  const backdropClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("dialog", { backdrop: true }, false);
   const dialogClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("dialog", { dialog: true, variants: { size } });
-  const backdropRef = react.useRef(null);
   const dialogRef = react.useRef(null);
   const layer = useLayer();
   const [visible, hide] = useVisibilityState(open);
   const [enabled, setEnabled] = react.useState(true);
-  const onBackdropClick = react.useCallback(
+  const lastAction = react.useRef(0);
+  useRestoreFocus(open);
+  const isNested = useNestedDialog(visible);
+  usePreventBodyScroll(visible && !isNested);
+  const onEscape = react.useCallback(
     (event) => {
-      if (event.target === event.currentTarget) {
-        onRequestClose();
-      }
+      event.preventDefault();
+      onRequestClose();
     },
     [onRequestClose]
   );
-  useFocusLock({ ref: dialogRef, active: open && enabled });
-  useRestoreFocus(open);
-  const isNested = useNestedDialog(visible);
-  usePreventBodyScroll(visible && !isNested);
-  useKeyboard("Escape", onRequestClose, { enabled: open && enabled });
-  useRootAriaHidden(visible);
+  useKeyboard("Escape", onEscape, { enabled: open && enabled });
+  react.useEffect(() => {
+    if (!open || !enabled) {
+      return;
+    }
+    lastAction.current = Date.now();
+    const listener = (event) => {
+      var _a;
+      if (lastAction.current + 30 > Date.now()) {
+        return;
+      }
+      if ((_a = dialogRef.current) == null ? void 0 : _a.contains(event.target)) {
+        return;
+      }
+      onRequestClose();
+    };
+    document.addEventListener("click", listener);
+    return () => {
+      document.removeEventListener("click", listener);
+    };
+  }, [enabled, onRequestClose, open]);
   useIsomorphicLayoutEffect(() => {
     var _a, _b;
+    if (!visible) {
+      (_a = dialogRef.current) == null ? void 0 : _a.close();
+    }
     if (!open) {
-      (_a = backdropRef.current) == null ? void 0 : _a.removeAttribute("data-open");
       (_b = dialogRef.current) == null ? void 0 : _b.removeAttribute("data-open");
       return;
     }
     let timer = requestAnimationFrame(() => {
       timer = requestAnimationFrame(() => {
         var _a2, _b2;
-        (_a2 = backdropRef.current) == null ? void 0 : _a2.setAttribute("data-open", "");
+        (_a2 = dialogRef.current) == null ? void 0 : _a2.showModal();
         (_b2 = dialogRef.current) == null ? void 0 : _b2.setAttribute("data-open", "");
       });
     });
@@ -223,26 +206,16 @@ const Dialog = ({
   }
   const dataOpen = typeof window === "undefined" && open ? "" : void 0;
   return /* @__PURE__ */ jsxRuntime.jsx(Portal, { container: layer(), children: /* @__PURE__ */ jsxRuntime.jsx(DialogContext.Provider, { value: { setEnabled }, children: /* @__PURE__ */ jsxRuntime.jsx(
-    styles_components_display_Divider_Divider_cjs.Box,
+    "dialog",
     {
-      ref: backdropRef,
-      className: styles_components_display_Divider_Divider_cjs.classnames(styles_components_overlay_Dialog_dialog_css_cjs.backdrop, backdropClassName),
+      ref: dialogRef,
+      "aria-modal": "true",
       "data-open": dataOpen,
-      onClick: onBackdropClick,
+      className: styles_components_display_Divider_Divider_cjs.classnames(styles_components_overlay_Dialog_dialog_css_cjs.dialog, dialogClassName, className),
       onAnimationEnd,
       onTransitionEnd: onAnimationEnd,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        "dialog",
-        {
-          ref: dialogRef,
-          "aria-modal": "true",
-          open: true,
-          "data-open": dataOpen,
-          className: styles_components_display_Divider_Divider_cjs.classnames(dialogClassName, className),
-          ...restProps,
-          children
-        }
-      )
+      ...restProps,
+      children
     }
   ) }) });
 };
@@ -253,5 +226,4 @@ exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
 exports.useKeyboard = useKeyboard;
 exports.useLayer = useLayer;
 exports.usePreventBodyScroll = usePreventBodyScroll;
-exports.useRootAriaHidden = useRootAriaHidden;
 exports.useVisibilityState = useVisibilityState;

package/dist/styles/components/overlay/Dialog/Dialog.mjs

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
-import { useEffect, useLayoutEffect, useRef, useContext, useState, useCallback, createContext } from "react";
-import { useTheme, BlocksProviderContext, useComponentStyles, Box, classnames } from "../../display/Divider/Divider.mjs";
-import { backdrop } from "./dialog.css.mjs";
+import { useEffect, useLayoutEffect, useRef, useState, useCallback, createContext, useContext } from "react";
+import { useTheme, useComponentStyles, classnames } from "../../display/Divider/Divider.mjs";
+import { dialog } from "./dialog.css.mjs";
 import { createPortal } from "react-dom";
 import { BlocksProvider } from "../../other/BlocksProvider/BlocksProvider.mjs";
 const Portal = ({ children, container }) => {
@@ -11,33 +11,6 @@ const Portal = ({ children, container }) => {
     container || document.body
   );
 };
-const focusableSelectors = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
-const getFirstFocusableElement = (container) => {
-  const focusable = container.querySelector(focusableSelectors);
-  return focusable || null;
-};
-const focusFirstElement = (container) => {
-  const focusable = getFirstFocusableElement(container);
-  if (focusable) {
-    focusable.focus();
-  }
-};
-const useFocusLock = ({ ref, active }) => {
-  useEffect(() => {
-    if (!active) {
-      return;
-    }
-    const handleFocus = (event) => {
-      if (ref.current && event.target instanceof HTMLElement && !ref.current.contains(event.target)) {
-        focusFirstElement(ref.current);
-      }
-    };
-    document.addEventListener("focusin", handleFocus);
-    return () => {
-      document.removeEventListener("focusin", handleFocus);
-    };
-  }, [active, ref]);
-};
 const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
 const useKeyboard = (key, callback, { enabled = true, type = "keydown" } = {}) => {
   useEffect(() => {
@@ -46,7 +19,7 @@ const useKeyboard = (key, callback, { enabled = true, type = "keydown" } = {}) =
     }
     function handleKeyDown(event) {
       if (event.key === key) {
-        callback();
+        callback(event);
       }
     }
     document.addEventListener(type, handleKeyDown);
@@ -109,21 +82,13 @@ const useRestoreFocus = (active) => {
     target.current = document.activeElement;
   }
   useEffect(() => {
+    var _a;
     if (target.current && !active && target.current instanceof HTMLElement) {
-      target.current.focus();
-    }
-    if (!active) {
+      (_a = target.current) == null ? void 0 : _a.focus();
       target.current = null;
     }
   }, [active]);
 };
-const useRootAriaHidden = (hidden) => {
-  const context = useContext(BlocksProviderContext);
-  if (!context) {
-    throw new Error("useRootAriaHidden must be used within a BlocksProvider");
-  }
-  context.setAriaHidden(hidden);
-};
 const useVisibilityState = (open) => {
   const [visible, setVisible] = useState(open);
   const hide = useCallback(() => {
@@ -165,38 +130,56 @@ const Dialog = ({
   size,
   ...restProps
 }) => {
-  const backdropClassName = useComponentStyles("dialog", { backdrop: true }, false);
   const dialogClassName = useComponentStyles("dialog", { dialog: true, variants: { size } });
-  const backdropRef = useRef(null);
   const dialogRef = useRef(null);
   const layer = useLayer();
   const [visible, hide] = useVisibilityState(open);
   const [enabled, setEnabled] = useState(true);
-  const onBackdropClick = useCallback(
+  const lastAction = useRef(0);
+  useRestoreFocus(open);
+  const isNested = useNestedDialog(visible);
+  usePreventBodyScroll(visible && !isNested);
+  const onEscape = useCallback(
     (event) => {
-      if (event.target === event.currentTarget) {
-        onRequestClose();
-      }
+      event.preventDefault();
+      onRequestClose();
     },
     [onRequestClose]
   );
-  useFocusLock({ ref: dialogRef, active: open && enabled });
-  useRestoreFocus(open);
-  const isNested = useNestedDialog(visible);
-  usePreventBodyScroll(visible && !isNested);
-  useKeyboard("Escape", onRequestClose, { enabled: open && enabled });
-  useRootAriaHidden(visible);
+  useKeyboard("Escape", onEscape, { enabled: open && enabled });
+  useEffect(() => {
+    if (!open || !enabled) {
+      return;
+    }
+    lastAction.current = Date.now();
+    const listener = (event) => {
+      var _a;
+      if (lastAction.current + 30 > Date.now()) {
+        return;
+      }
+      if ((_a = dialogRef.current) == null ? void 0 : _a.contains(event.target)) {
+        return;
+      }
+      onRequestClose();
+    };
+    document.addEventListener("click", listener);
+    return () => {
+      document.removeEventListener("click", listener);
+    };
+  }, [enabled, onRequestClose, open]);
   useIsomorphicLayoutEffect(() => {
     var _a, _b;
+    if (!visible) {
+      (_a = dialogRef.current) == null ? void 0 : _a.close();
+    }
     if (!open) {
-      (_a = backdropRef.current) == null ? void 0 : _a.removeAttribute("data-open");
       (_b = dialogRef.current) == null ? void 0 : _b.removeAttribute("data-open");
       return;
     }
     let timer = requestAnimationFrame(() => {
       timer = requestAnimationFrame(() => {
         var _a2, _b2;
-        (_a2 = backdropRef.current) == null ? void 0 : _a2.setAttribute("data-open", "");
+        (_a2 = dialogRef.current) == null ? void 0 : _a2.showModal();
         (_b2 = dialogRef.current) == null ? void 0 : _b2.setAttribute("data-open", "");
       });
     });
@@ -222,26 +205,16 @@ const Dialog = ({
   }
   const dataOpen = typeof window === "undefined" && open ? "" : void 0;
   return /* @__PURE__ */ jsx(Portal, { container: layer(), children: /* @__PURE__ */ jsx(DialogContext.Provider, { value: { setEnabled }, children: /* @__PURE__ */ jsx(
-    Box,
+    "dialog",
     {
-      ref: backdropRef,
-      className: classnames(backdrop, backdropClassName),
+      ref: dialogRef,
+      "aria-modal": "true",
       "data-open": dataOpen,
-      onClick: onBackdropClick,
+      className: classnames(dialog, dialogClassName, className),
       onAnimationEnd,
       onTransitionEnd: onAnimationEnd,
-      children: /* @__PURE__ */ jsx(
-        "dialog",
-        {
-          ref: dialogRef,
-          "aria-modal": "true",
-          open: true,
-          "data-open": dataOpen,
-          className: classnames(dialogClassName, className),
-          ...restProps,
-          children
-        }
-      )
+      ...restProps,
+      children
     }
   ) }) });
 };
@@ -253,6 +226,5 @@ export {
   useKeyboard,
   useLayer,
   usePreventBodyScroll,
-  useRootAriaHidden,
   useVisibilityState
 };

package/dist/styles/components/overlay/Dialog/dialog.css.cjs

@@ -3,21 +3,19 @@ const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
 const styles_lib_css_layers_layers_css_cjs = require("../../../lib/css/layers/layers.css.cjs");
 fileScope.setFileScope("src/components/overlay/Dialog/dialog.css.ts", "@blockle/blocks");
-const backdrop = css.style({
+const dialog = css.style({
   "@layer": {
     [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
-      contain: "layout",
-      display: "flex",
-      placeItems: "center",
       position: "fixed",
-      inlineSize: "100%",
-      blockSize: "100%",
-      insetInlineStart: 0,
-      insetBlockStart: 0,
-      overflow: "hidden",
-      zIndex: 1e3
+      inset: 0,
+      border: "none",
+      "::backdrop": {
+        // Remove pointer event to prevent clicks on the backdrop
+        // and make it easier to check if the click was outside the dialog
+        pointerEvents: "none"
+      }
     }
   }
-}, "backdrop");
+}, "dialog");
 fileScope.endFileScope();
-exports.backdrop = backdrop;
+exports.dialog = dialog;

package/dist/styles/components/overlay/Dialog/dialog.css.mjs

@@ -2,23 +2,21 @@ import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { style } from "@vanilla-extract/css";
 import { blocksLayer } from "../../../lib/css/layers/layers.css.mjs";
 setFileScope("src/components/overlay/Dialog/dialog.css.ts", "@blockle/blocks");
-const backdrop = style({
+const dialog = style({
   "@layer": {
     [blocksLayer]: {
-      contain: "layout",
-      display: "flex",
-      placeItems: "center",
       position: "fixed",
-      inlineSize: "100%",
-      blockSize: "100%",
-      insetInlineStart: 0,
-      insetBlockStart: 0,
-      overflow: "hidden",
-      zIndex: 1e3
+      inset: 0,
+      border: "none",
+      "::backdrop": {
+        // Remove pointer event to prevent clicks on the backdrop
+        // and make it easier to check if the click was outside the dialog
+        pointerEvents: "none"
+      }
     }
   }
-}, "backdrop");
+}, "dialog");
 endFileScope();
 export {
-  backdrop
+  dialog
 };

package/dist/styles/themes/momotaro/components/dialog.css.cjs

@@ -16,34 +16,31 @@ const dialog = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("dialo
   }), {
     maxHeight: "90%",
     minWidth: "300px",
-    selectors: {
-      "&[data-open]": {
-        transform: "scale(1)"
-      }
+    "::backdrop": {
+      backgroundColor: "rgba(0, 0, 0, 0.5)"
     },
-    // Apply the animation only if the user has not requested reduced motion
-    "@media": {
-      "(prefers-reduced-motion: no-preference)": {
-        transform: "scale(0.9)",
-        transition: "transform 160ms"
-      }
-    }
-  }], "dialog_dialog"),
-  backdrop: css.style({
-    backgroundColor: "rgba(0, 0, 0, 0.5)",
     selectors: {
       "&[data-open]": {
+        transform: "translate(0, 0)",
+        opacity: 1
+      },
+      "&[data-open]::backdrop": {
         opacity: 1
       }
     },
     // Apply the animation only if the user has not requested reduced motion
     "@media": {
       "(prefers-reduced-motion: no-preference)": {
+        transform: "translate(0, -120px)",
         opacity: 0,
-        transition: "opacity 160ms"
+        transition: "transform 240ms, opacity 160ms",
+        "::backdrop": {
+          opacity: 0,
+          transition: "opacity 160ms"
+        }
       }
     }
-  }, "dialog_backdrop"),
+  }], "dialog_dialog"),
   variants: {
     size: {
       small: css.style({

package/dist/styles/themes/momotaro/components/dialog.css.mjs

@@ -15,34 +15,31 @@ const dialog = makeComponentTheme("dialog", {
   }), {
     maxHeight: "90%",
     minWidth: "300px",
-    selectors: {
-      "&[data-open]": {
-        transform: "scale(1)"
-      }
+    "::backdrop": {
+      backgroundColor: "rgba(0, 0, 0, 0.5)"
     },
-    // Apply the animation only if the user has not requested reduced motion
-    "@media": {
-      "(prefers-reduced-motion: no-preference)": {
-        transform: "scale(0.9)",
-        transition: "transform 160ms"
-      }
-    }
-  }], "dialog_dialog"),
-  backdrop: style({
-    backgroundColor: "rgba(0, 0, 0, 0.5)",
     selectors: {
       "&[data-open]": {
+        transform: "translate(0, 0)",
+        opacity: 1
+      },
+      "&[data-open]::backdrop": {
         opacity: 1
       }
     },
     // Apply the animation only if the user has not requested reduced motion
     "@media": {
       "(prefers-reduced-motion: no-preference)": {
+        transform: "translate(0, -120px)",
         opacity: 0,
-        transition: "opacity 160ms"
+        transition: "transform 240ms, opacity 160ms",
+        "::backdrop": {
+          opacity: 0,
+          transition: "opacity 160ms"
+        }
       }
     }
-  }, "dialog_backdrop"),
+  }], "dialog_dialog"),
   variants: {
     size: {
       small: style({

package/dist/styles/themes/momotaro/components/index.cjs

@@ -3,30 +3,32 @@ const styles_themes_momotaro_components_button_css_cjs = require("./button.css.c
 const styles_themes_momotaro_components_checkbox_css_cjs = require("./checkbox.css.cjs");
 const styles_themes_momotaro_components_dialog_css_cjs = require("./dialog.css.cjs");
 const styles_themes_momotaro_components_divider_css_cjs = require("./divider.css.cjs");
-const styles_themes_momotaro_components_dropdown_css_cjs = require("./dropdown.css.cjs");
 const styles_themes_momotaro_components_input_css_cjs = require("./input.css.cjs");
 const styles_themes_momotaro_components_label_css_cjs = require("./label.css.cjs");
 const styles_themes_momotaro_components_link_css_cjs = require("./link.css.cjs");
+const styles_themes_momotaro_components_popover_css_cjs = require("./popover.css.cjs");
 const styles_themes_momotaro_components_progress_css_cjs = require("./progress.css.cjs");
 const styles_themes_momotaro_components_radio_css_cjs = require("./radio.css.cjs");
 const styles_themes_momotaro_components_select_css_cjs = require("./select.css.cjs");
 const styles_themes_momotaro_components_slider_css_cjs = require("./slider.css.cjs");
 const styles_themes_momotaro_components_spinner_css_cjs = require("./spinner.css.cjs");
 const styles_themes_momotaro_components_switch_css_cjs = require("./switch.css.cjs");
+const styles_themes_momotaro_components_tooltip_css_cjs = require("./tooltip.css.cjs");
 const components = {
   button: styles_themes_momotaro_components_button_css_cjs.button,
   checkbox: styles_themes_momotaro_components_checkbox_css_cjs.checkbox,
   dialog: styles_themes_momotaro_components_dialog_css_cjs.dialog,
   divider: styles_themes_momotaro_components_divider_css_cjs.divider,
-  dropdown: styles_themes_momotaro_components_dropdown_css_cjs.dropdown,
   input: styles_themes_momotaro_components_input_css_cjs.input,
   label: styles_themes_momotaro_components_label_css_cjs.label,
   link: styles_themes_momotaro_components_link_css_cjs.link,
+  popover: styles_themes_momotaro_components_popover_css_cjs.popover,
   progress: styles_themes_momotaro_components_progress_css_cjs.progress,
   radio: styles_themes_momotaro_components_radio_css_cjs.radio,
   select: styles_themes_momotaro_components_select_css_cjs.select,
+  slider: styles_themes_momotaro_components_slider_css_cjs.slider,
   spinner: styles_themes_momotaro_components_spinner_css_cjs.spinner,
   switch: styles_themes_momotaro_components_switch_css_cjs.switchTheme,
-  slider: styles_themes_momotaro_components_slider_css_cjs.slider
+  tooltip: styles_themes_momotaro_components_tooltip_css_cjs.tooltip
 };
 exports.components = components;

package/dist/styles/themes/momotaro/components/index.mjs

@@ -2,31 +2,33 @@ import { button } from "./button.css.mjs";
 import { checkbox } from "./checkbox.css.mjs";
 import { dialog } from "./dialog.css.mjs";
 import { divider } from "./divider.css.mjs";
-import { dropdown } from "./dropdown.css.mjs";
 import { input } from "./input.css.mjs";
 import { label } from "./label.css.mjs";
 import { link } from "./link.css.mjs";
+import { popover } from "./popover.css.mjs";
 import { progress } from "./progress.css.mjs";
 import { radio } from "./radio.css.mjs";
 import { select } from "./select.css.mjs";
 import { slider } from "./slider.css.mjs";
 import { spinner } from "./spinner.css.mjs";
 import { switchTheme } from "./switch.css.mjs";
+import { tooltip } from "./tooltip.css.mjs";
 const components = {
   button,
   checkbox,
   dialog,
   divider,
-  dropdown,
   input,
   label,
   link,
+  popover,
   progress,
   radio,
   select,
+  slider,
   spinner,
   switch: switchTheme,
-  slider
+  tooltip
 };
 export {
   components

package/dist/styles/themes/momotaro/components/{dropdown.css.cjs → popover.css.cjs}

@@ -2,16 +2,15 @@
 const fileScope = require("@vanilla-extract/css/fileScope");
 const styles_lib_css_style_style_cjs = require("../../../lib/css/style/style.cjs");
 const styles_lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
-fileScope.setFileScope("src/themes/momotaro/components/dropdown.css.ts", "@blockle/blocks");
-const dropdown = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("dropdown", {
+fileScope.setFileScope("src/themes/momotaro/components/popover.css.ts", "@blockle/blocks");
+const popover = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("popover", {
   base: styles_lib_css_style_style_cjs.style({
     backgroundColor: "white",
     borderRadius: "small",
     boxShadow: "medium",
     padding: "medium",
-    vars: {
-      "--spacing": "0.5rem"
-    },
+    margin: "small",
+    // Space between the popover and the anchor element
     selectors: {
       "&[data-open]": {
         transform: "scale(1)",
@@ -26,28 +25,7 @@ const dropdown = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("dro
         opacity: 0
       }
     }
-  }),
-  variants: {
-    variant: {
-      solid: styles_lib_css_style_style_cjs.style({
-        backgroundColor: "white",
-        border: "none",
-        boxShadow: "medium",
-        color: "black",
-        padding: "medium"
-      }),
-      outline: styles_lib_css_style_style_cjs.style({
-        backgroundColor: "transparent",
-        border: "1px solid black",
-        boxShadow: "none",
-        color: "black",
-        padding: "medium"
-      })
-    }
-  },
-  defaultVariants: {
-    variant: "solid"
-  }
+  })
 });
 fileScope.endFileScope();
-exports.dropdown = dropdown;
+exports.popover = popover;