@blockle/blocks-react 1.0.0

package/dist/components/overlay/Popover/Popover.js

@@ -0,0 +1,112 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { hasAnimationDuration, classnames } from "@blockle/blocks-core";
+import { useState, useRef, useLayoutEffect, useEffect, useCallback } from "react";
+import { useClickOutside } from "../../../hooks/useClickOutside/useClickOutside.js";
+import { getPopoverPosition } from "./popover-utils.js";
+import { useLayer } from "../../../hooks/useLayer/useLayer.js";
+import { useVisibilityState } from "../../../hooks/useVisibilityState/useVisibilityState.js";
+import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
+import { useIsomorphicLayoutEffect } from "../../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js";
+import { useKeyboard } from "../../../hooks/useKeyboard/useKeyboard.js";
+import { Portal } from "../Portal/Portal.js";
+import { Box } from "../../layout/Box/Box.js";
+const Popover = ({
+  align = "bottom",
+  anchorElement,
+  children,
+  className,
+  onRequestClose,
+  open,
+  repositionOnScroll,
+  style,
+  ...restProps
+}) => {
+  const layer = useLayer();
+  const [visible, hide] = useVisibilityState(open);
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const popoverRef = useRef(null);
+  const containerClassName = useComponentStyles(
+    "popover",
+    { base: true },
+    false
+  );
+  useLayoutEffect(() => {
+    if (!visible) {
+      return;
+    }
+    const position2 = getPopoverPosition(align, anchorElement, popoverRef);
+    setPosition({ x: position2[0], y: position2[1] });
+  }, [align, anchorElement, visible]);
+  useEffect(() => {
+    if (!open || !repositionOnScroll) {
+      return;
+    }
+    function handleResize() {
+      const position2 = getPopoverPosition(align, anchorElement, popoverRef);
+      setPosition({ x: position2[0], y: position2[1] });
+    }
+    window.addEventListener("resize", handleResize);
+    window.addEventListener("scroll", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+      window.removeEventListener("scroll", handleResize);
+    };
+  }, [align, anchorElement, open, repositionOnScroll]);
+  useIsomorphicLayoutEffect(() => {
+    var _a;
+    if (!open) {
+      (_a = popoverRef.current) == null ? void 0 : _a.removeAttribute("data-open");
+      return;
+    }
+    let timer = requestAnimationFrame(() => {
+      timer = requestAnimationFrame(() => {
+        var _a2;
+        (_a2 = popoverRef.current) == null ? void 0 : _a2.setAttribute("data-open", "");
+      });
+    });
+    return () => {
+      cancelAnimationFrame(timer);
+    };
+  }, [open, visible]);
+  const onAnimationEnd = useCallback(() => {
+    if (!open) {
+      hide();
+    }
+  }, [hide, open]);
+  useEffect(() => {
+    if (open) {
+      return;
+    }
+    if (!hasAnimationDuration(popoverRef.current)) {
+      hide();
+    }
+  }, [hide, open]);
+  useKeyboard("Escape", onRequestClose, { enabled: visible });
+  useClickOutside(popoverRef, onRequestClose, { enabled: visible });
+  if (!visible) {
+    return null;
+  }
+  const dataOpen = typeof window === "undefined" && open ? "" : void 0;
+  return /* @__PURE__ */ jsx(Portal, { container: layer(), children: /* @__PURE__ */ jsx(
+    Box,
+    {
+      ref: popoverRef,
+      "data-open": dataOpen,
+      onAnimationEnd,
+      onTransitionEnd: onAnimationEnd,
+      className: classnames(containerClassName, className),
+      position: "absolute",
+      style: {
+        ...style,
+        left: position.x,
+        top: position.y
+      },
+      ...restProps,
+      children
+    }
+  ) });
+};
+export {
+  Popover
+};

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/index.d.ts

@@ -0,0 +1 @@
+export { Popover, type PopoverProps } from './Popover';

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

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+function getPopoverPosition(align, anchorRef, popoverRef) {
+  if (!anchorRef.current || !popoverRef.current) {
+    return [0, 0];
+  }
+  popoverRef.current.style.transform = "none";
+  popoverRef.current.style.transitionDuration = "0s";
+  const anchorRect = anchorRef.current.getBoundingClientRect();
+  const popoverRect = popoverRef.current.getBoundingClientRect();
+  let popoverStyles = getComputedStyle(popoverRef.current);
+  const top = popoverStyles.getPropertyValue("top");
+  const left = popoverStyles.getPropertyValue("left");
+  popoverRef.current.style.left = "0";
+  popoverRef.current.style.top = "0";
+  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;
+  const docWidth = document.documentElement.clientWidth;
+  const docScrollTop = document.documentElement.scrollTop;
+  const docScrollLeft = document.documentElement.scrollLeft;
+  const anchorLeft = anchorRect.left + docScrollLeft;
+  const anchorTop = anchorRect.top + docScrollTop;
+  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 = "";
+  popoverRef.current.style.top = top;
+  popoverRef.current.style.left = left;
+  switch (align) {
+    case "top": {
+      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 - popoverRect.height - marginY];
+    }
+    case "left": {
+      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 - popoverRect.width - marginX, offsetY];
+    }
+  }
+}
+exports.getPopoverPosition = getPopoverPosition;

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/Popover/popover-utils.js

@@ -0,0 +1,62 @@
+function getPopoverPosition(align, anchorRef, popoverRef) {
+  if (!anchorRef.current || !popoverRef.current) {
+    return [0, 0];
+  }
+  popoverRef.current.style.transform = "none";
+  popoverRef.current.style.transitionDuration = "0s";
+  const anchorRect = anchorRef.current.getBoundingClientRect();
+  const popoverRect = popoverRef.current.getBoundingClientRect();
+  let popoverStyles = getComputedStyle(popoverRef.current);
+  const top = popoverStyles.getPropertyValue("top");
+  const left = popoverStyles.getPropertyValue("left");
+  popoverRef.current.style.left = "0";
+  popoverRef.current.style.top = "0";
+  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;
+  const docWidth = document.documentElement.clientWidth;
+  const docScrollTop = document.documentElement.scrollTop;
+  const docScrollLeft = document.documentElement.scrollLeft;
+  const anchorLeft = anchorRect.left + docScrollLeft;
+  const anchorTop = anchorRect.top + docScrollTop;
+  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 = "";
+  popoverRef.current.style.top = top;
+  popoverRef.current.style.left = left;
+  switch (align) {
+    case "top": {
+      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 - popoverRect.height - marginY];
+    }
+    case "left": {
+      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 - popoverRect.width - marginX, offsetY];
+    }
+  }
+}
+export {
+  getPopoverPosition
+};

package/dist/components/overlay/Portal/Portal.cjs

@@ -0,0 +1,15 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const reactDom = require("react-dom");
+const useTheme = require("../../../hooks/useTheme/useTheme.cjs");
+const BlocksProvider = require("../../providers/BlocksProvider/BlocksProvider.cjs");
+const Portal = ({ children, container }) => {
+  const context = useTheme.useTheme();
+  return reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsx(BlocksProvider.BlocksProvider, { theme: context, children }),
+    container || document.body
+  );
+};
+exports.Portal = Portal;

package/dist/components/overlay/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/overlay/Portal/Portal.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+import { useTheme } from "../../../hooks/useTheme/useTheme.js";
+import { BlocksProvider } from "../../providers/BlocksProvider/BlocksProvider.js";
+const Portal = ({ children, container }) => {
+  const context = useTheme();
+  return createPortal(
+    /* @__PURE__ */ jsx(BlocksProvider, { theme: context, children }),
+    container || document.body
+  );
+};
+export {
+  Portal
+};

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

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

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

@@ -0,0 +1,73 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const blocksCore = require("@blockle/blocks-core");
+const react = require("react");
+const useComponentStyles = require("../../../hooks/useComponentStyles/useComponentStyles.cjs");
+const Popover = require("../Popover/Popover.cjs");
+const Tooltip = ({
+  align = "top",
+  children,
+  label,
+  colorScheme
+}) => {
+  const id = react.useId();
+  const ref = react.useRef(null);
+  const [open, setOpen] = react.useState(false);
+  const tooltipClassName = useComponentStyles.useComponentStyles("tooltip", {
+    base: true,
+    variants: { colorScheme }
+  });
+  react.useEffect(() => {
+    const element = ref.current;
+    if (!element) {
+      return;
+    }
+    function onEnter() {
+      setOpen(true);
+    }
+    function onLeave() {
+      setOpen(false);
+    }
+    element.addEventListener("mouseenter", onEnter);
+    element.addEventListener("mouseleave", onLeave);
+    element.addEventListener("focusin", onEnter);
+    element.addEventListener("focusout", onLeave);
+    return () => {
+      element.removeEventListener("mouseenter", onEnter);
+      element.removeEventListener("mouseleave", onLeave);
+      element.removeEventListener("focusin", onEnter);
+      element.removeEventListener("focusout", onLeave);
+    };
+  }, []);
+  if (react.Children.count(children) !== 1) {
+    throw new Error("Tooltip component can only have one child");
+  }
+  const child = react.Children.toArray(children)[0];
+  if (!react.isValidElement(child)) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    react.cloneElement(child, {
+      ref: blocksCore.composeRefs(ref, child.ref),
+      "aria-describedby": open ? id : void 0
+    }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Popover.Popover,
+      {
+        id,
+        role: "tooltip",
+        anchorElement: ref,
+        open,
+        onRequestClose: () => {
+          setOpen(false);
+        },
+        align,
+        className: tooltipClassName,
+        children: label
+      }
+    )
+  ] });
+};
+exports.Tooltip = Tooltip;

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

@@ -0,0 +1,12 @@
+import { ComponentThemes } from '@blockle/blocks-core';
+import { PopoverProps } from '../Popover';
+type ReactElement = React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+type TooltipTheme = ComponentThemes['tooltip'];
+export type TooltipProps = {
+    align?: PopoverProps['align'];
+    children: ReactElement;
+    label: React.ReactNode;
+    colorScheme?: TooltipTheme['variants']['colorScheme'];
+};
+export declare const Tooltip: React.FC<TooltipProps>;
+export {};

package/dist/components/overlay/Tooltip/Tooltip.js

@@ -0,0 +1,73 @@
+"use client";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { composeRefs } from "@blockle/blocks-core";
+import { useId, useRef, useState, useEffect, Children, isValidElement, cloneElement } from "react";
+import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
+import { Popover } from "../Popover/Popover.js";
+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) {
+      return;
+    }
+    function onEnter() {
+      setOpen(true);
+    }
+    function onLeave() {
+      setOpen(false);
+    }
+    element.addEventListener("mouseenter", onEnter);
+    element.addEventListener("mouseleave", onLeave);
+    element.addEventListener("focusin", onEnter);
+    element.addEventListener("focusout", onLeave);
+    return () => {
+      element.removeEventListener("mouseenter", onEnter);
+      element.removeEventListener("mouseleave", onLeave);
+      element.removeEventListener("focusin", onEnter);
+      element.removeEventListener("focusout", onLeave);
+    };
+  }, []);
+  if (Children.count(children) !== 1) {
+    throw new Error("Tooltip component can only have one child");
+  }
+  const child = Children.toArray(children)[0];
+  if (!isValidElement(child)) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    cloneElement(child, {
+      ref: composeRefs(ref, child.ref),
+      "aria-describedby": open ? id : void 0
+    }),
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        id,
+        role: "tooltip",
+        anchorElement: ref,
+        open,
+        onRequestClose: () => {
+          setOpen(false);
+        },
+        align,
+        className: tooltipClassName,
+        children: label
+      }
+    )
+  ] });
+};
+export {
+  Tooltip
+};

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

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

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

@@ -0,0 +1 @@
+export { Tooltip, type TooltipProps } from './Tooltip';

package/dist/components/providers/BlocksProvider/BlocksProvider.cjs

@@ -0,0 +1,35 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const blocksCore = require("@blockle/blocks-core");
+const blocksReactSlot = require("@blockle/blocks-react-slot");
+const context = require("./context.cjs");
+const [Template, Slot] = blocksReactSlot.createSlottable("div");
+const BlocksProvider = ({
+  children,
+  theme,
+  className,
+  ...restProps
+}) => {
+  const contextValue = react.useMemo(
+    () => ({
+      theme
+    }),
+    [theme]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(context.BlocksProviderContext, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+    Template,
+    {
+      className: blocksCore.classnames(
+        theme.vars,
+        blocksCore.sprinkles({ fontFamily: "primary" }),
+        className
+      ),
+      ...restProps,
+      children: /* @__PURE__ */ jsxRuntime.jsx(Slot, { children })
+    }
+  ) });
+};
+exports.BlocksProvider = BlocksProvider;

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

@@ -0,0 +1,9 @@
+import { Theme } from '@blockle/blocks-core';
+export type BlocksProviderProps = {
+    children: React.ReactNode;
+    theme: Theme;
+    className?: string;
+    style?: React.CSSProperties;
+    asChild?: boolean;
+};
+export declare const BlocksProvider: React.FC<BlocksProviderProps>;

package/dist/components/providers/BlocksProvider/BlocksProvider.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { classnames, sprinkles } from "@blockle/blocks-core";
+import { createSlottable } from "@blockle/blocks-react-slot";
+import { BlocksProviderContext } from "./context.js";
+const [Template, Slot] = createSlottable("div");
+const BlocksProvider = ({
+  children,
+  theme,
+  className,
+  ...restProps
+}) => {
+  const contextValue = useMemo(
+    () => ({
+      theme
+    }),
+    [theme]
+  );
+  return /* @__PURE__ */ jsx(BlocksProviderContext, { value: contextValue, children: /* @__PURE__ */ jsx(
+    Template,
+    {
+      className: classnames(
+        theme.vars,
+        sprinkles({ fontFamily: "primary" }),
+        className
+      ),
+      ...restProps,
+      children: /* @__PURE__ */ jsx(Slot, { children })
+    }
+  ) });
+};
+export {
+  BlocksProvider
+};

package/dist/components/providers/BlocksProvider/BlocksProvider.test.d.ts

@@ -0,0 +1 @@
+export {};

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

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

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

@@ -0,0 +1,5 @@
+import { Theme } from '@blockle/blocks-core';
+export type BlocksProviderContextProps = {
+    theme: Theme;
+};
+export declare const BlocksProviderContext: import('react').Context<BlocksProviderContextProps | null>;

package/dist/components/providers/BlocksProvider/context.js

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

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

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

package/dist/components/typography/Heading/Heading.cjs

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const blocksCore = require("@blockle/blocks-core");
+const heading_css = require("./heading.css.cjs");
+const Box = require("../../layout/Box/Box.cjs");
+const Heading = ({
+  className,
+  level = 1,
+  children,
+  ...restProps
+}) => {
+  const Tag = `h${level}`;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Box.Box,
+    {
+      asChild: true,
+      className: blocksCore.classnames(heading_css.heading, className),
+      ...restProps,
+      children: /* @__PURE__ */ jsxRuntime.jsx(Tag, { children })
+    }
+  );
+};
+exports.Heading = Heading;

package/dist/components/typography/Heading/Heading.d.ts

@@ -0,0 +1,7 @@
+import { HTMLElementProps, MarginSprinkles, PaddingSprinkles, TextSprinkles } from '@blockle/blocks-core';
+export type HeadingProps = {
+    children: React.ReactNode;
+    className?: string;
+    level: 1 | 2 | 3 | 4 | 5 | 6;
+} & TextSprinkles & MarginSprinkles & PaddingSprinkles & HTMLElementProps<HTMLHeadingElement>;
+export declare const Heading: React.FC<HeadingProps>;

package/dist/components/typography/Heading/Heading.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import { classnames } from "@blockle/blocks-core";
+import { heading } from "./heading.css.js";
+import { Box } from "../../layout/Box/Box.js";
+const Heading = ({
+  className,
+  level = 1,
+  children,
+  ...restProps
+}) => {
+  const Tag = `h${level}`;
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      asChild: true,
+      className: classnames(heading, className),
+      ...restProps,
+      children: /* @__PURE__ */ jsx(Tag, { children })
+    }
+  );
+};
+export {
+  Heading
+};

package/dist/components/typography/Heading/Heading.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/typography/Heading/heading.css.cjs

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const fileScope = require("@vanilla-extract/css/fileScope");
+const blocksCore = require("@blockle/blocks-core");
+const css = require("@vanilla-extract/css");
+fileScope.setFileScope("src/components/typography/Heading/heading.css.ts", "@blockle/blocks-react");
+const heading = css.style({
+  "@layer": {
+    [blocksCore.blocksLayer]: {
+      margin: 0,
+      padding: 0
+    }
+  }
+});
+fileScope.endFileScope();
+exports.heading = heading;

package/dist/components/typography/Heading/heading.css.d.ts

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