@blockle/blocks 0.20.0-alpha1 → 0.20.0-alpha1.0

package/dist/components/layout/Stack/{Stack.mjs → Stack.js}

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
-import { alignItemsMap } from "../../../lib/css/flexbox/flexbox.mjs";
-import { Box } from "../Box/Box.mjs";
+import { alignItemsMap } from "../../../lib/css/flexbox/flexbox.js";
+import { Box } from "../Box/Box.js";
 const Stack = ({
   tag: Tag = "div",
   display = "flex",

package/dist/components/layout/Stack/Stack.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Stack, StackProps } from './Stack';
+declare const _default: Meta<typeof Stack>;
+export default _default;
+export declare const Default: StoryObj<StackProps>;
+export declare const List: StoryObj<StackProps>;

package/dist/components/layout/Stack/index.d.ts

@@ -0,0 +1 @@
+export { Stack, type StackProps } from './Stack';

package/dist/components/navigation/Link/Link.cjs

@@ -1,9 +1,10 @@
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const lib_asChildRenderer_createAsChildTemplate_cjs = require("../../../lib/asChildRenderer/createAsChildTemplate.cjs");
-const lib_theme_store_theme_cjs = require("../../../lib/theme/store/theme.cjs");
-const lib_utils_classnames_cjs = require("../../../lib/utils/classnames.cjs");
-const { Template, Slot } = lib_asChildRenderer_createAsChildTemplate_cjs.createAsChildTemplate("a");
+const createAsChildTemplate = require("../../../lib/asChildRenderer/createAsChildTemplate.cjs");
+const theme = require("../../../lib/theme/store/theme.cjs");
+const classnames = require("../../../lib/utils/classnames.cjs");
+const { Template, Slot } = createAsChildTemplate.createAsChildTemplate("a");
 const Link = ({
   asChild,
   children,
@@ -13,7 +14,7 @@ const Link = ({
   variant,
   ...restProps
 }) => {
-  const linkClassName = lib_theme_store_theme_cjs.getComponentStyles("link", {
+  const linkClassName = theme.getComponentStyles("link", {
     base: true,
     variants: { variant, underline }
   });
@@ -22,7 +23,7 @@ const Link = ({
     {
       asChild,
       ref,
-      className: lib_utils_classnames_cjs.classnames(className, linkClassName),
+      className: classnames.classnames(className, linkClassName),
       ...restProps,
       children: /* @__PURE__ */ jsxRuntime.jsx(Slot, { children })
     }

package/dist/components/navigation/Link/Link.d.ts

@@ -0,0 +1,11 @@
+import { MarginAtoms } from '../../../lib/css/atoms';
+import { LinkTheme } from '../../../lib/theme/componentThemes';
+import { HTMLElementProps } from '../../../lib/utils/utils';
+export type LinkProps = {
+    asChild?: boolean;
+    children?: React.ReactNode;
+    ref?: React.Ref<HTMLAnchorElement>;
+    underline?: LinkTheme['variants']['underline'];
+    variant?: LinkTheme['variants']['variant'];
+} & MarginAtoms & HTMLElementProps<HTMLAnchorElement>;
+export declare const Link: React.FC<LinkProps>;

package/dist/components/navigation/Link/{Link.mjs → Link.js}

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
-import { createAsChildTemplate } from "../../../lib/asChildRenderer/createAsChildTemplate.mjs";
-import { getComponentStyles } from "../../../lib/theme/store/theme.mjs";
-import { classnames } from "../../../lib/utils/classnames.mjs";
+import { createAsChildTemplate } from "../../../lib/asChildRenderer/createAsChildTemplate.js";
+import { getComponentStyles } from "../../../lib/theme/store/theme.js";
+import { classnames } from "../../../lib/utils/classnames.js";
 const { Template, Slot } = createAsChildTemplate("a");
 const Link = ({
   asChild,

package/dist/components/navigation/Link/Link.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { LinkProps } from './Link';
+declare const _default: Meta;
+export default _default;
+export declare const Default: StoryObj<LinkProps>;
+export declare const Play: StoryObj<LinkProps>;

package/dist/components/navigation/Link/index.d.ts

@@ -0,0 +1 @@
+export { Link, type LinkProps } from './Link';

package/dist/components/other/BlocksProvider/BlocksProvider.cjs

@@ -1,13 +1,15 @@
+"use client";
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const lib_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
-const lib_theme_store_theme_cjs = require("../../../lib/theme/store/theme.cjs");
-const lib_utils_classnames_cjs = require("../../../lib/utils/classnames.cjs");
-const components_other_BlocksProvider_context_cjs = require("./context.cjs");
+const sprinkles_css = require("../../../lib/css/atoms/sprinkles.css.cjs");
+const theme = require("../../../lib/theme/store/theme.cjs");
+const classnames = require("../../../lib/utils/classnames.cjs");
+const context = require("./context.cjs");
 const BlocksProvider = ({
   children,
-  theme,
+  theme: theme$1,
   className,
   ...restProps
 }) => {
@@ -18,13 +20,13 @@ const BlocksProvider = ({
     }),
     []
   );
-  lib_theme_store_theme_cjs.setTheme(theme);
-  return /* @__PURE__ */ jsxRuntime.jsx(components_other_BlocksProvider_context_cjs.BlocksProviderContext, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+  theme.setTheme(theme$1);
+  return /* @__PURE__ */ jsxRuntime.jsx(context.BlocksProviderContext, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: lib_utils_classnames_cjs.classnames(
-        theme.vars,
-        lib_css_atoms_sprinkles_css_cjs.atoms({ fontFamily: "primary" }),
+      className: classnames.classnames(
+        theme$1.vars,
+        sprinkles_css.atoms({ fontFamily: "primary" }),
         className
       ),
       inert: ariaHidden ? true : void 0,

package/dist/components/other/BlocksProvider/BlocksProvider.d.ts

@@ -0,0 +1,8 @@
+import { Theme } from '../../../lib/theme/makeTheme';
+export type BlocksProviderProps = {
+    children: React.ReactNode;
+    theme: Theme;
+    className?: string;
+    style?: React.CSSProperties;
+};
+export declare const BlocksProvider: React.FC<BlocksProviderProps>;

package/dist/components/other/BlocksProvider/{BlocksProvider.mjs → BlocksProvider.js}

@@ -1,11 +1,10 @@
-'use client';
-
+"use client";
 import { jsx } from "react/jsx-runtime";
 import { useState, useMemo } from "react";
-import { atoms } from "../../../lib/css/atoms/sprinkles.css.mjs";
-import { setTheme } from "../../../lib/theme/store/theme.mjs";
-import { classnames } from "../../../lib/utils/classnames.mjs";
-import { BlocksProviderContext } from "./context.mjs";
+import { atoms } from "../../../lib/css/atoms/sprinkles.css.js";
+import { setTheme } from "../../../lib/theme/store/theme.js";
+import { classnames } from "../../../lib/utils/classnames.js";
+import { BlocksProviderContext } from "./context.js";
 const BlocksProvider = ({
   children,
   theme,

package/dist/components/other/BlocksProvider/context.cjs

@@ -1,4 +1,6 @@
+"use client";
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const react = require("react");
 const BlocksProviderContext = react.createContext(null);
 exports.BlocksProviderContext = BlocksProviderContext;

package/dist/components/other/BlocksProvider/context.d.ts

@@ -0,0 +1,4 @@
+export type BlocksProviderContextProps = {
+    setAriaHidden: (value: boolean) => void;
+};
+export declare const BlocksProviderContext: import('react').Context<BlocksProviderContextProps | null>;

package/dist/components/other/BlocksProvider/{context.mjs → context.js}

@@ -1,5 +1,4 @@
-'use client';
-
+"use client";
 import { createContext } from "react";
 const BlocksProviderContext = createContext(null);
 export {

package/dist/components/other/BlocksProvider/index.d.ts

@@ -0,0 +1,2 @@
+export { BlocksProvider } from './BlocksProvider';
+export type { BlocksProviderProps } from './BlocksProvider';

package/dist/components/other/Portal/Portal.cjs

@@ -1,4 +1,5 @@
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const reactDom = require("react-dom");
 const Portal = ({ children, container }) => {

package/dist/components/other/Portal/Portal.d.ts

@@ -0,0 +1,5 @@
+export type PortalProps = {
+    children: React.ReactNode;
+    container?: HTMLElement;
+};
+export declare const Portal: React.FC<PortalProps>;

package/dist/components/other/Portal/index.d.ts

@@ -0,0 +1 @@
+export { Portal, type PortalProps } from './Portal';

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

@@ -1,16 +1,18 @@
+"use client";
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const hooks_useClickOutside_useClickOutside_cjs = require("../../../hooks/useClickOutside/useClickOutside.cjs");
-const lib_theme_store_theme_cjs = require("../../../lib/theme/store/theme.cjs");
-const lib_utils_classnames_cjs = require("../../../lib/utils/classnames.cjs");
-const lib_utils_dom_cjs = require("../../../lib/utils/dom.cjs");
-const components_overlay_Dialog_dialog_css_cjs = require("./dialog.css.cjs");
-const components_overlay_Dialog_dialogHelper_cjs = require("./dialogHelper.cjs");
-const hooks_useRestoreFocus_useRestoreFocus_cjs = require("../../../hooks/useRestoreFocus/useRestoreFocus.cjs");
-const hooks_usePreventBodyScroll_usePreventBodyScroll_cjs = require("../../../hooks/usePreventBodyScroll/usePreventBodyScroll.cjs");
-const hooks_useKeyboard_useKeyboard_cjs = require("../../../hooks/useKeyboard/useKeyboard.cjs");
-const hooks_useIsomorphicLayoutEffect_useIsomorphicLayoutEffect_cjs = require("../../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs");
+const useClickOutside = require("../../../hooks/useClickOutside/useClickOutside.cjs");
+const theme = require("../../../lib/theme/store/theme.cjs");
+const classnames = require("../../../lib/utils/classnames.cjs");
+const dom = require("../../../lib/utils/dom.cjs");
+const dialog_css = require("./dialog.css.cjs");
+const dialogHelper = require("./dialogHelper.cjs");
+const useRestoreFocus = require("../../../hooks/useRestoreFocus/useRestoreFocus.cjs");
+const usePreventBodyScroll = require("../../../hooks/usePreventBodyScroll/usePreventBodyScroll.cjs");
+const useKeyboard = require("../../../hooks/useKeyboard/useKeyboard.cjs");
+const useIsomorphicLayoutEffect = require("../../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs");
 const Dialog = ({
   children,
   open,
@@ -19,16 +21,16 @@ const Dialog = ({
   size,
   ...restProps
 }) => {
-  const dialogClassName = lib_theme_store_theme_cjs.getComponentStyles("dialog", {
+  const dialogClassName = theme.getComponentStyles("dialog", {
     dialog: true,
     variants: { size }
   });
   const dialogRef = react.useRef(null);
   const [enabled, setEnabled] = react.useState(true);
   const [visible, setVisible] = react.useState(open);
-  hooks_useRestoreFocus_useRestoreFocus_cjs.useRestoreFocus(open);
-  const isNested = components_overlay_Dialog_dialogHelper_cjs.useNestedDialog(open);
-  hooks_usePreventBodyScroll_usePreventBodyScroll_cjs.usePreventBodyScroll(open && !isNested);
+  useRestoreFocus.useRestoreFocus(open);
+  const isNested = dialogHelper.useNestedDialog(open);
+  usePreventBodyScroll.usePreventBodyScroll(open && !isNested);
   const onEscape = react.useCallback(
     (event) => {
       event.preventDefault();
@@ -36,16 +38,16 @@ const Dialog = ({
     },
     [onRequestClose]
   );
-  hooks_useKeyboard_useKeyboard_cjs.useKeyboard("Escape", onEscape, { enabled: open && enabled });
-  hooks_useClickOutside_useClickOutside_cjs.useClickOutside(dialogRef, onRequestClose, { enabled: open && enabled });
-  hooks_useIsomorphicLayoutEffect_useIsomorphicLayoutEffect_cjs.useIsomorphicLayoutEffect(() => {
+  useKeyboard.useKeyboard("Escape", onEscape, { enabled: open && enabled });
+  useClickOutside.useClickOutside(dialogRef, onRequestClose, { enabled: open && enabled });
+  useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
     var _a, _b;
     if (open && visible) {
       (_a = dialogRef.current) == null ? void 0 : _a.showModal();
     } else if (open) {
       setVisible(true);
     } else {
-      if (!lib_utils_dom_cjs.hasAnimationDuration(dialogRef.current)) {
+      if (!dom.hasAnimationDuration(dialogRef.current)) {
         setVisible(false);
       }
       (_b = dialogRef.current) == null ? void 0 : _b.close();
@@ -60,13 +62,13 @@ const Dialog = ({
     return null;
   }
   const dataOpen = typeof window === "undefined" && open ? true : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(components_overlay_Dialog_dialogHelper_cjs.DialogContext.Provider, { value: { setEnabled }, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(dialogHelper.DialogContext.Provider, { value: { setEnabled }, children: /* @__PURE__ */ jsxRuntime.jsx(
     "dialog",
     {
       ref: dialogRef,
       "aria-modal": "true",
       open: dataOpen,
-      className: lib_utils_classnames_cjs.classnames(components_overlay_Dialog_dialog_css_cjs.dialog, dialogClassName, className),
+      className: classnames.classnames(dialog_css.dialog, dialogClassName, className),
       onAnimationEnd,
       onTransitionEnd: onAnimationEnd,
       ...restProps,

package/dist/components/overlay/Dialog/Dialog.d.ts

@@ -0,0 +1,10 @@
+import { DialogTheme } from '../../../lib/theme/componentThemes';
+export type DialogProps = {
+    children?: React.ReactNode;
+    open: boolean;
+    onRequestClose: () => void;
+    className?: string;
+    size?: DialogTheme['variants']['size'];
+    'aria-label'?: string;
+};
+export declare const Dialog: React.FC<DialogProps>;

package/dist/components/overlay/Dialog/{Dialog.mjs → Dialog.js}

@@ -1,17 +1,16 @@
-'use client';
-
+"use client";
 import { jsx, Fragment } from "react/jsx-runtime";
 import { useRef, useState, useCallback } from "react";
-import { useClickOutside } from "../../../hooks/useClickOutside/useClickOutside.mjs";
-import { getComponentStyles } from "../../../lib/theme/store/theme.mjs";
-import { classnames } from "../../../lib/utils/classnames.mjs";
-import { hasAnimationDuration } from "../../../lib/utils/dom.mjs";
-import { dialog } from "./dialog.css.mjs";
-import { useNestedDialog, DialogContext } from "./dialogHelper.mjs";
-import { useRestoreFocus } from "../../../hooks/useRestoreFocus/useRestoreFocus.mjs";
-import { usePreventBodyScroll } from "../../../hooks/usePreventBodyScroll/usePreventBodyScroll.mjs";
-import { useKeyboard } from "../../../hooks/useKeyboard/useKeyboard.mjs";
-import { useIsomorphicLayoutEffect } from "../../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.mjs";
+import { useClickOutside } from "../../../hooks/useClickOutside/useClickOutside.js";
+import { getComponentStyles } from "../../../lib/theme/store/theme.js";
+import { classnames } from "../../../lib/utils/classnames.js";
+import { hasAnimationDuration } from "../../../lib/utils/dom.js";
+import { dialog } from "./dialog.css.js";
+import { useNestedDialog, DialogContext } from "./dialogHelper.js";
+import { useRestoreFocus } from "../../../hooks/useRestoreFocus/useRestoreFocus.js";
+import { usePreventBodyScroll } from "../../../hooks/usePreventBodyScroll/usePreventBodyScroll.js";
+import { useKeyboard } from "../../../hooks/useKeyboard/useKeyboard.js";
+import { useIsomorphicLayoutEffect } from "../../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js";
 const Dialog = ({
   children,
   open,

package/dist/components/overlay/Dialog/Dialog.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { DialogProps } from './Dialog';
+declare const _default: Meta;
+export default _default;
+export declare const Default: StoryObj<DialogProps>;
+export declare const WithAriaMarkup: StoryObj<DialogProps>;
+export declare const Play: StoryObj<DialogProps>;

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

@@ -1,11 +1,12 @@
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
-const lib_css_layers_layers_css_cjs = require("../../../lib/css/layers/layers.css.cjs");
+const layers_css = require("../../../lib/css/layers/layers.css.cjs");
 fileScope.setFileScope("src/components/overlay/Dialog/dialog.css.ts", "@blockle/blocks");
 const dialog = css.style({
   "@layer": {
-    [lib_css_layers_layers_css_cjs.blocksLayer]: {
+    [layers_css.blocksLayer]: {
       position: "fixed",
       inset: 0,
       border: "none",
@@ -16,6 +17,6 @@ const dialog = css.style({
       }
     }
   }
-}, "dialog");
+});
 fileScope.endFileScope();
 exports.dialog = dialog;

package/dist/components/overlay/Dialog/dialog.css.d.ts

@@ -0,0 +1 @@
+export declare const dialog: string;

package/dist/components/overlay/Dialog/{dialog.css.mjs → dialog.css.js}

@@ -1,6 +1,6 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { style } from "@vanilla-extract/css";
-import { blocksLayer } from "../../../lib/css/layers/layers.css.mjs";
+import { blocksLayer } from "../../../lib/css/layers/layers.css.js";
 setFileScope("src/components/overlay/Dialog/dialog.css.ts", "@blockle/blocks");
 const dialog = style({
   "@layer": {
@@ -15,7 +15,7 @@ const dialog = style({
       }
     }
   }
-}, "dialog");
+});
 endFileScope();
 export {
   dialog

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

@@ -1,4 +1,6 @@
+"use client";
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const react = require("react");
 const DialogContext = react.createContext(
   void 0

package/dist/components/overlay/Dialog/dialogHelper.d.ts

@@ -0,0 +1,6 @@
+type DialogContextValue = {
+    setEnabled: (active: boolean) => void;
+};
+export declare const DialogContext: import('react').Context<DialogContextValue | undefined>;
+export declare const useNestedDialog: (open: boolean) => boolean;
+export {};

package/dist/components/overlay/Dialog/{dialogHelper.mjs → dialogHelper.js}

@@ -1,3 +1,4 @@
+"use client";
 import { createContext, useContext, useEffect } from "react";
 const DialogContext = createContext(
   void 0

package/dist/components/overlay/Dialog/index.d.ts

@@ -0,0 +1 @@
+export { Dialog, type DialogProps } from './Dialog';

package/dist/components/overlay/Popover/Popover.cjs

@@ -1,17 +1,19 @@
+"use client";
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const hooks_useClickOutside_useClickOutside_cjs = require("../../../hooks/useClickOutside/useClickOutside.cjs");
-const lib_theme_store_theme_cjs = require("../../../lib/theme/store/theme.cjs");
-const lib_utils_classnames_cjs = require("../../../lib/utils/classnames.cjs");
-const lib_utils_dom_cjs = require("../../../lib/utils/dom.cjs");
-const components_overlay_Popover_popoverUtils_cjs = require("./popover-utils.cjs");
-const hooks_useLayer_useLayer_cjs = require("../../../hooks/useLayer/useLayer.cjs");
-const hooks_useVisibilityState_useVisibilityState_cjs = require("../../../hooks/useVisibilityState/useVisibilityState.cjs");
-const hooks_useIsomorphicLayoutEffect_useIsomorphicLayoutEffect_cjs = require("../../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs");
-const hooks_useKeyboard_useKeyboard_cjs = require("../../../hooks/useKeyboard/useKeyboard.cjs");
-const components_other_Portal_Portal_cjs = require("../../other/Portal/Portal.cjs");
-const components_layout_Box_Box_cjs = require("../../layout/Box/Box.cjs");
+const useClickOutside = require("../../../hooks/useClickOutside/useClickOutside.cjs");
+const theme = require("../../../lib/theme/store/theme.cjs");
+const classnames = require("../../../lib/utils/classnames.cjs");
+const dom = require("../../../lib/utils/dom.cjs");
+const popoverUtils = require("./popover-utils.cjs");
+const useLayer = require("../../../hooks/useLayer/useLayer.cjs");
+const useVisibilityState = require("../../../hooks/useVisibilityState/useVisibilityState.cjs");
+const useIsomorphicLayoutEffect = require("../../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs");
+const useKeyboard = require("../../../hooks/useKeyboard/useKeyboard.cjs");
+const Portal = require("../../other/Portal/Portal.cjs");
+const Box = require("../../layout/Box/Box.cjs");
 const Popover = ({
   align = "bottom",
   anchorElement,
@@ -23,11 +25,11 @@ const Popover = ({
   style,
   ...restProps
 }) => {
-  const layer = hooks_useLayer_useLayer_cjs.useLayer();
-  const [visible, hide] = hooks_useVisibilityState_useVisibilityState_cjs.useVisibilityState(open);
+  const layer = useLayer.useLayer();
+  const [visible, hide] = useVisibilityState.useVisibilityState(open);
   const [position, setPosition] = react.useState({ x: 0, y: 0 });
   const popoverRef = react.useRef(null);
-  const containerClassName = lib_theme_store_theme_cjs.getComponentStyles(
+  const containerClassName = theme.getComponentStyles(
     "popover",
     { base: true },
     false
@@ -36,7 +38,7 @@ const Popover = ({
     if (!visible) {
       return;
     }
-    const position2 = components_overlay_Popover_popoverUtils_cjs.getPopoverPosition(align, anchorElement, popoverRef);
+    const position2 = popoverUtils.getPopoverPosition(align, anchorElement, popoverRef);
     setPosition({ x: position2[0], y: position2[1] });
   }, [align, anchorElement, visible]);
   react.useEffect(() => {
@@ -44,7 +46,7 @@ const Popover = ({
       return;
     }
     function handleResize() {
-      const position2 = components_overlay_Popover_popoverUtils_cjs.getPopoverPosition(align, anchorElement, popoverRef);
+      const position2 = popoverUtils.getPopoverPosition(align, anchorElement, popoverRef);
       setPosition({ x: position2[0], y: position2[1] });
     }
     window.addEventListener("resize", handleResize);
@@ -54,7 +56,7 @@ const Popover = ({
       window.removeEventListener("scroll", handleResize);
     };
   }, [align, anchorElement, open, repositionOnScroll]);
-  hooks_useIsomorphicLayoutEffect_useIsomorphicLayoutEffect_cjs.useIsomorphicLayoutEffect(() => {
+  useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
     var _a;
     if (!open) {
       (_a = popoverRef.current) == null ? void 0 : _a.removeAttribute("data-open");
@@ -79,24 +81,24 @@ const Popover = ({
     if (open) {
       return;
     }
-    if (!lib_utils_dom_cjs.hasAnimationDuration(popoverRef.current)) {
+    if (!dom.hasAnimationDuration(popoverRef.current)) {
       hide();
     }
   }, [hide, open]);
-  hooks_useKeyboard_useKeyboard_cjs.useKeyboard("Escape", onRequestClose, { enabled: visible });
-  hooks_useClickOutside_useClickOutside_cjs.useClickOutside(popoverRef, onRequestClose, { enabled: visible });
+  useKeyboard.useKeyboard("Escape", onRequestClose, { enabled: visible });
+  useClickOutside.useClickOutside(popoverRef, onRequestClose, { enabled: visible });
   if (!visible) {
     return null;
   }
   const dataOpen = typeof window === "undefined" && open ? "" : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsx(components_other_Portal_Portal_cjs.Portal, { container: layer(), children: /* @__PURE__ */ jsxRuntime.jsx(
-    components_layout_Box_Box_cjs.Box,
+  return /* @__PURE__ */ jsxRuntime.jsx(Portal.Portal, { container: layer(), children: /* @__PURE__ */ jsxRuntime.jsx(
+    Box.Box,
     {
       ref: popoverRef,
       "data-open": dataOpen,
       onAnimationEnd,
       onTransitionEnd: onAnimationEnd,
-      className: lib_utils_classnames_cjs.classnames(containerClassName, className),
+      className: classnames.classnames(containerClassName, className),
       position: "absolute",
       style: {
         ...style,

package/dist/components/overlay/Popover/Popover.d.ts

@@ -0,0 +1,12 @@
+import { HTMLElementProps } from '../../../lib/utils/utils';
+export type PopoverProps = {
+    align?: 'top' | 'bottom' | 'left' | 'right';
+    anchorElement: React.RefObject<HTMLElement | null>;
+    children: React.ReactNode;
+    className?: string;
+    onRequestClose: () => void;
+    open: boolean;
+    repositionOnScroll?: boolean;
+    style?: React.CSSProperties;
+} & HTMLElementProps<HTMLDivElement>;
+export declare const Popover: React.FC<PopoverProps>;

package/dist/components/overlay/Popover/{Popover.mjs → Popover.js}

@@ -1,16 +1,17 @@
+"use client";
 import { jsx } from "react/jsx-runtime";
 import { useState, useRef, useLayoutEffect, useEffect, useCallback } from "react";
-import { useClickOutside } from "../../../hooks/useClickOutside/useClickOutside.mjs";
-import { getComponentStyles } from "../../../lib/theme/store/theme.mjs";
-import { classnames } from "../../../lib/utils/classnames.mjs";
-import { hasAnimationDuration } from "../../../lib/utils/dom.mjs";
-import { getPopoverPosition } from "./popover-utils.mjs";
-import { useLayer } from "../../../hooks/useLayer/useLayer.mjs";
-import { useVisibilityState } from "../../../hooks/useVisibilityState/useVisibilityState.mjs";
-import { useIsomorphicLayoutEffect } from "../../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.mjs";
-import { useKeyboard } from "../../../hooks/useKeyboard/useKeyboard.mjs";
-import { Portal } from "../../other/Portal/Portal.mjs";
-import { Box } from "../../layout/Box/Box.mjs";
+import { useClickOutside } from "../../../hooks/useClickOutside/useClickOutside.js";
+import { getComponentStyles } from "../../../lib/theme/store/theme.js";
+import { classnames } from "../../../lib/utils/classnames.js";
+import { hasAnimationDuration } from "../../../lib/utils/dom.js";
+import { getPopoverPosition } from "./popover-utils.js";
+import { useLayer } from "../../../hooks/useLayer/useLayer.js";
+import { useVisibilityState } from "../../../hooks/useVisibilityState/useVisibilityState.js";
+import { useIsomorphicLayoutEffect } from "../../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js";
+import { useKeyboard } from "../../../hooks/useKeyboard/useKeyboard.js";
+import { Portal } from "../../other/Portal/Portal.js";
+import { Box } from "../../layout/Box/Box.js";
 const Popover = ({
   align = "bottom",
   anchorElement,

package/dist/components/overlay/Popover/Popover.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { PopoverProps } from './Popover';
+declare const _default: Meta;
+export default _default;
+export declare const Default: StoryObj<PopoverProps>;

package/dist/components/overlay/Popover/popover-utils.cjs

@@ -1,4 +1,5 @@
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 function getPopoverPosition(align, anchorRef, popoverRef) {
   if (!anchorRef.current || !popoverRef.current) {
     return [0, 0];

package/dist/components/overlay/Popover/popover-utils.d.ts

@@ -0,0 +1,2 @@
+export type PopoverPositions = [x: number, y: number];
+export declare function getPopoverPosition(align: 'top' | 'bottom' | 'left' | 'right', anchorRef: React.RefObject<HTMLElement | null>, popoverRef: React.RefObject<HTMLElement | null>): PopoverPositions;

package/dist/components/overlay/Tooltip/Tooltip.cjs

@@ -1,9 +1,11 @@
+"use client";
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const lib_react_refs_cjs = require("../../../lib/react/refs.cjs");
-const lib_theme_store_theme_cjs = require("../../../lib/theme/store/theme.cjs");
-const components_overlay_Popover_Popover_cjs = require("../Popover/Popover.cjs");
+const refs = require("../../../lib/react/refs.cjs");
+const theme = require("../../../lib/theme/store/theme.cjs");
+const Popover = require("../Popover/Popover.cjs");
 const Tooltip = ({
   align = "top",
   children,
@@ -13,7 +15,7 @@ const Tooltip = ({
   const id = react.useId();
   const ref = react.useRef(null);
   const [open, setOpen] = react.useState(false);
-  const tooltipClassName = lib_theme_store_theme_cjs.getComponentStyles("tooltip", {
+  const tooltipClassName = theme.getComponentStyles("tooltip", {
     base: true,
     variants: { colorScheme }
   });
@@ -48,11 +50,11 @@ const Tooltip = ({
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     react.cloneElement(child, {
-      ref: lib_react_refs_cjs.composeRefs(ref, child.ref),
+      ref: refs.composeRefs(ref, child.ref),
       ["aria-describedby"]: open ? id : void 0
     }),
     /* @__PURE__ */ jsxRuntime.jsx(
-      components_overlay_Popover_Popover_cjs.Popover,
+      Popover.Popover,
       {
         id,
         role: "tooltip",