@blockle/blocks 0.3.8 → 0.4.0

package/dist/index.cjs

@@ -1,14 +1,16 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const styles_lib_css_atoms_breakpoints_cjs = require("./styles/lib/css/atoms/breakpoints.cjs");
-const styles_lib_css_theme_makeTheme_cjs = require("./styles/lib/css/theme/makeTheme.cjs");
 const styles_lib_css_theme_makeComponentTheme_cjs = require("./styles/lib/css/theme/makeComponentTheme.cjs");
+const styles_lib_css_theme_makeTheme_cjs = require("./styles/lib/css/theme/makeTheme.cjs");
 const styles_lib_css_theme_vars_css_cjs = require("./styles/lib/css/theme/vars.css.cjs");
 const styles_lib_css_atoms_sprinkles_css_cjs = require("./styles/lib/css/atoms/sprinkles.css.cjs");
-const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
+const jsxRuntime = require("react/jsx-runtime");
 const styles_components_Button_Button_css_cjs = require("./styles/components/Button/Button.css.cjs");
 const styles_components_Divider_divider_css_cjs = require("./styles/components/Divider/divider.css.cjs");
+const styles_components_Dialog_dialog_css_cjs = require("./styles/components/Dialog/dialog.css.cjs");
+const reactDom = require("react-dom");
 const classnames = (...args) => {
   const className = args.filter((arg) => arg && typeof arg === "string").join(" ");
   return className || void 0;
@@ -286,14 +288,186 @@ const Divider = ({ className, color }) => {
     }
   );
 };
+const useLayer = () => {
+  const layerRef = react.useRef();
+  react.useEffect(
+    () => () => {
+      if (layerRef.current) {
+        layerRef.current.remove();
+      }
+    },
+    []
+  );
+  return () => {
+    if (!layerRef.current) {
+      layerRef.current = document.createElement("div");
+      document.body.append(layerRef.current);
+    }
+    return layerRef.current;
+  };
+};
+const useVisibilityState = (open) => {
+  const [visible, setVisible] = react.useState(open);
+  const hide = react.useCallback(() => {
+    setVisible(false);
+  }, []);
+  react.useEffect(() => {
+    if (open) {
+      setVisible(true);
+    }
+  }, [open]);
+  return [visible, hide];
+};
+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]);
+};
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? react.useLayoutEffect : react.useEffect;
+const useRestoreFocus = (active) => {
+  const [target, setTarget] = react.useState(null);
+  useIsomorphicLayoutEffect(() => {
+    if (active && !target) {
+      setTarget(document.activeElement);
+    }
+  }, [active]);
+  react.useEffect(() => {
+    if (!active && target instanceof HTMLElement) {
+      target.focus();
+    }
+  }, [active]);
+};
+const DialogContext = react.createContext(void 0);
+const useNestedDialog = (open) => {
+  const parentDialog = react.useContext(DialogContext);
+  react.useEffect(() => {
+    if (!parentDialog || !open) {
+      return;
+    }
+    parentDialog.setEnabled(false);
+    return () => {
+      parentDialog.setEnabled(true);
+    };
+  }, [parentDialog, open]);
+  return !!parentDialog;
+};
+const usePreventBodyScroll = (enabled = true) => {
+  useIsomorphicLayoutEffect(() => {
+    const prevValue = document.body.style.getPropertyValue("overflow");
+    if (enabled) {
+      document.body.style.overflow = "hidden";
+    }
+    return () => {
+      document.body.style.overflow = prevValue;
+    };
+  }, [enabled]);
+};
+const Portal = ({ children, container }) => {
+  const context = useTheme();
+  return reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsx(BlocksProvider, { theme: context, children }),
+    container || document.body
+  );
+};
+const Dialog = ({ children, open, className, onRequestClose }) => {
+  const dialogRef = react.useRef(null);
+  const layer = useLayer();
+  const [visible, hide] = useVisibilityState(open);
+  const [enabled, setEnabled] = react.useState(true);
+  const onBackdropClick = react.useCallback(
+    (event) => {
+      if (event.target === event.currentTarget) {
+        onRequestClose();
+      }
+    },
+    [onRequestClose]
+  );
+  const onAnimationEnd = react.useCallback((event) => {
+    if (event.animationName === styles_components_Dialog_dialog_css_cjs.backdropLeaveAnimation) {
+      event.stopPropagation();
+      hide();
+    }
+  }, []);
+  useFocusLock({ ref: dialogRef, active: open && enabled });
+  useRestoreFocus(open);
+  const isNested = useNestedDialog(visible);
+  usePreventBodyScroll(visible && !isNested);
+  react.useEffect(() => {
+    if (!open || !enabled) {
+      return;
+    }
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        onRequestClose();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [open, enabled]);
+  const backdropClassName = useComponentStyles("dialog", { backdrop: true });
+  const dialogClassName = useComponentStyles("dialog", { base: true });
+  if (!visible) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(Portal, { container: layer(), children: /* @__PURE__ */ jsxRuntime.jsx(DialogContext.Provider, { value: { setEnabled }, children: /* @__PURE__ */ jsxRuntime.jsx(
+    Box,
+    {
+      className: classnames(styles_components_Dialog_dialog_css_cjs.backdrop, !open && styles_components_Dialog_dialog_css_cjs.backdropLeave, backdropClassName),
+      display: "flex",
+      placeItems: "center",
+      onClick: onBackdropClick,
+      onAnimationEnd,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        Box,
+        {
+          ref: dialogRef,
+          as: "dialog",
+          open: true,
+          className: classnames(
+            styles_components_Dialog_dialog_css_cjs.dialog,
+            !open && styles_components_Dialog_dialog_css_cjs.dialogLeave,
+            dialogClassName,
+            className
+          ),
+          children
+        }
+      )
+    }
+  ) }) });
+};
 exports.breakpointQuery = styles_lib_css_atoms_breakpoints_cjs.breakpointQuery;
-exports.makeTheme = styles_lib_css_theme_makeTheme_cjs.makeTheme;
 exports.makeComponentTheme = styles_lib_css_theme_makeComponentTheme_cjs.makeComponentTheme;
+exports.makeTheme = styles_lib_css_theme_makeTheme_cjs.makeTheme;
 exports.vars = styles_lib_css_theme_vars_css_cjs.vars;
 exports.atoms = styles_lib_css_atoms_sprinkles_css_cjs.atoms;
 exports.BlocksProvider = BlocksProvider;
 exports.Box = Box;
 exports.Button = Button;
+exports.Dialog = Dialog;
 exports.Divider = Divider;
 exports.Heading = Heading;
 exports.Inline = Inline;
@@ -302,3 +476,5 @@ exports.Spinner = Spinner;
 exports.Stack = Stack;
 exports.Text = Text;
 exports.classnames = classnames;
+exports.useComponentStyleDefaultProps = useComponentStyleDefaultProps;
+exports.useComponentStyles = useComponentStyles;

package/dist/index.d.ts

@@ -1 +1 @@
-export { BlocksProvider, BlocksProviderProps, BlocksTokens, Box, BoxProps, Button, ButtonProps, ComponentThemesMap, Divider, DividerProps, Heading, HeadingProps, Inline, InlineProps, Link, LinkProps, Spinner, SpinnerProps, Stack, StackProps, Text, TextProps, atoms, breakpointQuery, classnames, makeComponentTheme, makeTheme, vars } from './momotaro.chunk.js';
+export { BlocksProvider, BlocksProviderProps, BlocksTokens, Box, BoxProps, Button, ButtonProps, ComponentThemesMap, Dialog, DialogProps, Divider, DividerProps, Heading, HeadingProps, Inline, InlineProps, Link, LinkProps, Spinner, SpinnerProps, Stack, StackProps, Text, TextProps, atoms, breakpointQuery, classnames, makeComponentTheme, makeTheme, useComponentStyleDefaultProps, useComponentStyles, vars } from './momotaro.chunk.js';

package/dist/index.mjs

@@ -1,14 +1,16 @@
 'use client';
 
 import { breakpointQuery } from "./styles/lib/css/atoms/breakpoints.mjs";
-import { makeTheme } from "./styles/lib/css/theme/makeTheme.mjs";
 import { makeComponentTheme } from "./styles/lib/css/theme/makeComponentTheme.mjs";
+import { makeTheme } from "./styles/lib/css/theme/makeTheme.mjs";
 import { vars } from "./styles/lib/css/theme/vars.css.mjs";
 import { atoms } from "./styles/lib/css/atoms/sprinkles.css.mjs";
+import { createContext, forwardRef, useContext, useRef, useEffect, useState, useCallback, useLayoutEffect } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { createContext, forwardRef, useContext } from "react";
 import { buttonReset } from "./styles/components/Button/Button.css.mjs";
 import { divider } from "./styles/components/Divider/divider.css.mjs";
+import { backdropLeaveAnimation, backdropLeave, backdrop, dialogLeave, dialog } from "./styles/components/Dialog/dialog.css.mjs";
+import { createPortal } from "react-dom";
 const classnames = (...args) => {
   const className = args.filter((arg) => arg && typeof arg === "string").join(" ");
   return className || void 0;
@@ -286,10 +288,182 @@ const Divider = ({ className, color }) => {
     }
   );
 };
+const useLayer = () => {
+  const layerRef = useRef();
+  useEffect(
+    () => () => {
+      if (layerRef.current) {
+        layerRef.current.remove();
+      }
+    },
+    []
+  );
+  return () => {
+    if (!layerRef.current) {
+      layerRef.current = document.createElement("div");
+      document.body.append(layerRef.current);
+    }
+    return layerRef.current;
+  };
+};
+const useVisibilityState = (open) => {
+  const [visible, setVisible] = useState(open);
+  const hide = useCallback(() => {
+    setVisible(false);
+  }, []);
+  useEffect(() => {
+    if (open) {
+      setVisible(true);
+    }
+  }, [open]);
+  return [visible, hide];
+};
+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]);
+};
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+const useRestoreFocus = (active) => {
+  const [target, setTarget] = useState(null);
+  useIsomorphicLayoutEffect(() => {
+    if (active && !target) {
+      setTarget(document.activeElement);
+    }
+  }, [active]);
+  useEffect(() => {
+    if (!active && target instanceof HTMLElement) {
+      target.focus();
+    }
+  }, [active]);
+};
+const DialogContext = createContext(void 0);
+const useNestedDialog = (open) => {
+  const parentDialog = useContext(DialogContext);
+  useEffect(() => {
+    if (!parentDialog || !open) {
+      return;
+    }
+    parentDialog.setEnabled(false);
+    return () => {
+      parentDialog.setEnabled(true);
+    };
+  }, [parentDialog, open]);
+  return !!parentDialog;
+};
+const usePreventBodyScroll = (enabled = true) => {
+  useIsomorphicLayoutEffect(() => {
+    const prevValue = document.body.style.getPropertyValue("overflow");
+    if (enabled) {
+      document.body.style.overflow = "hidden";
+    }
+    return () => {
+      document.body.style.overflow = prevValue;
+    };
+  }, [enabled]);
+};
+const Portal = ({ children, container }) => {
+  const context = useTheme();
+  return createPortal(
+    /* @__PURE__ */ jsx(BlocksProvider, { theme: context, children }),
+    container || document.body
+  );
+};
+const Dialog = ({ children, open, className, onRequestClose }) => {
+  const dialogRef = useRef(null);
+  const layer = useLayer();
+  const [visible, hide] = useVisibilityState(open);
+  const [enabled, setEnabled] = useState(true);
+  const onBackdropClick = useCallback(
+    (event) => {
+      if (event.target === event.currentTarget) {
+        onRequestClose();
+      }
+    },
+    [onRequestClose]
+  );
+  const onAnimationEnd = useCallback((event) => {
+    if (event.animationName === backdropLeaveAnimation) {
+      event.stopPropagation();
+      hide();
+    }
+  }, []);
+  useFocusLock({ ref: dialogRef, active: open && enabled });
+  useRestoreFocus(open);
+  const isNested = useNestedDialog(visible);
+  usePreventBodyScroll(visible && !isNested);
+  useEffect(() => {
+    if (!open || !enabled) {
+      return;
+    }
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        onRequestClose();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [open, enabled]);
+  const backdropClassName = useComponentStyles("dialog", { backdrop: true });
+  const dialogClassName = useComponentStyles("dialog", { base: true });
+  if (!visible) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Portal, { container: layer(), children: /* @__PURE__ */ jsx(DialogContext.Provider, { value: { setEnabled }, children: /* @__PURE__ */ jsx(
+    Box,
+    {
+      className: classnames(backdrop, !open && backdropLeave, backdropClassName),
+      display: "flex",
+      placeItems: "center",
+      onClick: onBackdropClick,
+      onAnimationEnd,
+      children: /* @__PURE__ */ jsx(
+        Box,
+        {
+          ref: dialogRef,
+          as: "dialog",
+          open: true,
+          className: classnames(
+            dialog,
+            !open && dialogLeave,
+            dialogClassName,
+            className
+          ),
+          children
+        }
+      )
+    }
+  ) }) });
+};
 export {
   BlocksProvider,
   Box,
   Button,
+  Dialog,
   Divider,
   Heading,
   Inline,
@@ -302,5 +476,7 @@ export {
   classnames,
   makeComponentTheme,
   makeTheme,
+  useComponentStyleDefaultProps,
+  useComponentStyles,
   vars
 };

package/dist/momotaro.chunk.d.ts

@@ -7,6 +7,7 @@ declare const atoms: ((props: {
     readonly backgroundColor?: "link" | "danger" | "primary" | "secondary" | "white" | "black" | "body" | "primaryLight" | "primaryDark" | "secondaryLight" | "secondaryDark" | "text" | "textLight" | "textDark" | "currentColor" | undefined;
     readonly borderColor?: "link" | "danger" | "primary" | "secondary" | "white" | "black" | "body" | "primaryLight" | "primaryDark" | "secondaryLight" | "secondaryDark" | "text" | "textLight" | "textDark" | "currentColor" | undefined;
     readonly borderRadius?: ("small" | "medium" | "large" | "xlarge") | undefined;
+    readonly border?: "none" | undefined;
     readonly bottom?: 0 | undefined;
     readonly boxShadow?: ("small" | "medium" | "large") | undefined;
     readonly color?: "link" | "danger" | "primary" | "secondary" | "white" | "black" | "body" | "primaryLight" | "primaryDark" | "secondaryLight" | "secondaryDark" | "text" | "textLight" | "textDark" | "currentColor" | undefined;
@@ -218,9 +219,18 @@ 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<"outline" | "borderRadius" | "color" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "transition" | "boxShadow" | "alignItems" | "backgroundColor" | "bottom" | "columnGap" | "cursor" | "display" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "height" | "justifyContent" | "left" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "opacity" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "right" | "rowGap" | "textAlign" | "textTransform" | "top" | "userSelect" | "whiteSpace" | "width" | "wordBreak" | "wordWrap" | "borderColor" | "flex" | "gap" | "inset" | "margin" | "overflow" | "padding" | "placeItems" | "textDecoration" | "textWrap" | "marginX" | "marginY" | "paddingX" | "paddingY">;
+    properties: Set<"outline" | "borderRadius" | "color" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "transition" | "boxShadow" | "alignItems" | "backgroundColor" | "bottom" | "columnGap" | "cursor" | "display" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "height" | "justifyContent" | "left" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "opacity" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "right" | "rowGap" | "textAlign" | "textTransform" | "top" | "userSelect" | "whiteSpace" | "width" | "wordBreak" | "wordWrap" | "border" | "borderColor" | "flex" | "gap" | "inset" | "margin" | "overflow" | "padding" | "placeItems" | "textDecoration" | "textWrap" | "marginX" | "marginY" | "paddingX" | "paddingY">;
 };
 
+declare const breakpoints: {
+    readonly mobile: 0;
+    readonly tablet: 740;
+    readonly desktop: 992;
+    readonly wide: 1200;
+};
+type Breakpoint = keyof typeof breakpoints;
+declare const breakpointQuery: (key: Breakpoint) => string;
+
 type Atoms = Parameters<typeof atoms>[0];
 type ResponsiveValue<T> = T | [T] | [T, T] | [T, T, T] | [T, T, T, T];
 type ResponsiveDisplayFlex = ResponsiveValue<'none' | 'flex' | 'inline-flex'>;
@@ -266,6 +276,12 @@ type CreateComponentTheme<T extends Theme$1> = {
         [VariantGroup in keyof T['variants']]?: T['variants'][VariantGroup] extends string ? T['variants'][VariantGroup] : boolean;
     };
 };
+type CreateThemeProps<T extends Theme$1> = {
+    [K in keyof T['variants']]?: T['variants'][K] extends string ? T['variants'][K] : boolean;
+} & {
+    type: T['type'];
+    base?: boolean;
+};
 declare const makeComponentTheme: <T extends ComponentThemes>(options: T) => T;
 
 type ButtonTheme = {
@@ -276,6 +292,7 @@ type ButtonTheme = {
         size: 'small' | 'medium' | 'large';
     };
 };
+type ButtonThemeProps = CreateThemeProps<ButtonTheme>;
 type ButtonThemeComponent = CreateComponentTheme<ButtonTheme>;
 type LinkTheme = {
     type: 'link';
@@ -284,6 +301,7 @@ type LinkTheme = {
         underline: boolean;
     };
 };
+type LinkThemeProps = CreateThemeProps<LinkTheme>;
 type LinkThemeComponent = CreateComponentTheme<LinkTheme>;
 type SpinnerTheme = {
     type: 'spinner';
@@ -292,6 +310,7 @@ type SpinnerTheme = {
         color: Exclude<Atoms['color'], undefined>;
     };
 };
+type SpinnerThemeProps = CreateThemeProps<SpinnerTheme>;
 type SpinnerThemeComponent = CreateComponentTheme<SpinnerTheme>;
 type DividerTheme = {
     type: 'divider';
@@ -299,8 +318,18 @@ type DividerTheme = {
         color: Exclude<Atoms['color'], undefined>;
     };
 };
+type DividerThemeProps = CreateThemeProps<DividerTheme>;
 type DividerThemeComponent = CreateComponentTheme<DividerTheme>;
-type ComponentThemes = ButtonThemeComponent | LinkThemeComponent | SpinnerThemeComponent | DividerThemeComponent;
+type DialogTheme = {
+    type: 'dialog';
+    variants: {
+        backdrop: boolean;
+    };
+};
+type DialogThemeProps = CreateThemeProps<DialogTheme>;
+type DialogThemeComponent = CreateComponentTheme<DialogTheme>;
+type ComponentThemeProps = UnionThemesToRecord<ButtonThemeProps | LinkThemeProps | SpinnerThemeProps | DividerThemeProps | DialogThemeProps>;
+type ComponentThemes = ButtonThemeComponent | LinkThemeComponent | SpinnerThemeComponent | DividerThemeComponent | DialogThemeComponent;
 type ComponentThemesMap = UnionThemesToRecord<ComponentThemes>;
 type UnionThemesToRecord<T extends {
     type: string;
@@ -310,6 +339,123 @@ type UnionThemesToRecord<T extends {
     }>, 'type'>;
 };
 
+type FontWeight = 'regular' | 'medium' | 'strong';
+type Space = 'none' | 'gutter' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+type Transition = 'slow' | 'normal' | 'fast';
+type BorderRadius = 'small' | 'medium' | 'large' | 'xlarge';
+type BorderWidth = 'small' | 'medium' | 'large';
+type BoxShadow = 'small' | 'medium' | 'large';
+type FontSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+type LineHeight = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+type Color = 'white' | 'black' | 'body' | 'primaryLight' | 'primary' | 'primaryDark' | 'secondaryLight' | 'secondary' | 'secondaryDark' | 'text' | 'textLight' | 'textDark' | 'danger' | 'link';
+type BlocksTokens = {
+    typography: {
+        fontFamily: {
+            primary?: string;
+            secondary?: string;
+        };
+        fontSize: Record<FontSize, number | string>;
+        fontWeight: Record<FontWeight, 400 | 500 | 600 | 700 | 800>;
+        lineHeight: Record<LineHeight, number | string>;
+    };
+    spacing: Record<Space, number | string>;
+    transition: Record<Transition, string>;
+    border: {
+        radius: Record<BorderRadius, number | string>;
+        width: Record<BorderWidth, number | string>;
+    };
+    shadow: Record<BoxShadow, string>;
+    focus: {
+        boxShadow: string;
+    };
+    color: Record<Color, string>;
+};
+
+type Theme = {
+    name: string;
+    tokens: BlocksTokens;
+    components: ComponentThemesMap;
+};
+declare const makeTheme: (theme: Theme) => {
+    vars: string;
+    components: ComponentThemesMap;
+};
+
+declare const vars: {
+    space: {
+        small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        none: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        gutter: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    borderRadius: {
+        small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    color: {
+        link: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        danger: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        white: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        black: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        body: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        primaryLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        primaryDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        secondaryLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        secondaryDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        text: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        textLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        textDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    borderWidth: {
+        small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    fontFamily: {
+        primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    fontSize: {
+        small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    fontWeight: {
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        regular: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        strong: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    lineHeight: {
+        small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    transition: {
+        slow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        normal: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        fast: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    shadow: {
+        small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    focus: {
+        boxShadow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+};
+
 type BlocksProviderContextData = {
     vars: string;
     components: ComponentThemesMap;
@@ -445,131 +591,17 @@ type DividerProps = {
 };
 declare const Divider: FC<DividerProps>;
 
-declare const breakpoints: {
-    readonly mobile: 0;
-    readonly tablet: 740;
-    readonly desktop: 992;
-    readonly wide: 1200;
-};
-type Breakpoint = keyof typeof breakpoints;
-declare const breakpointQuery: (key: Breakpoint) => string;
-
-type FontWeight = 'regular' | 'medium' | 'strong';
-type Space = 'none' | 'gutter' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
-type Transition = 'slow' | 'normal' | 'fast';
-type BorderRadius = 'small' | 'medium' | 'large' | 'xlarge';
-type BorderWidth = 'small' | 'medium' | 'large';
-type BoxShadow = 'small' | 'medium' | 'large';
-type FontSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
-type LineHeight = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
-type Color = 'white' | 'black' | 'body' | 'primaryLight' | 'primary' | 'primaryDark' | 'secondaryLight' | 'secondary' | 'secondaryDark' | 'text' | 'textLight' | 'textDark' | 'danger' | 'link';
-type BlocksTokens = {
-    typography: {
-        fontFamily: {
-            primary?: string;
-            secondary?: string;
-        };
-        fontSize: Record<FontSize, number | string>;
-        fontWeight: Record<FontWeight, 400 | 500 | 600 | 700 | 800>;
-        lineHeight: Record<LineHeight, number | string>;
-    };
-    spacing: Record<Space, number | string>;
-    transition: Record<Transition, string>;
-    border: {
-        radius: Record<BorderRadius, number | string>;
-        width: Record<BorderWidth, number | string>;
-    };
-    shadow: Record<BoxShadow, string>;
-    focus: {
-        boxShadow: string;
-    };
-    color: Record<Color, string>;
+type DialogProps = {
+    children?: ReactNode;
+    open: boolean;
+    onRequestClose: () => void;
+    className?: string;
 };
+declare const Dialog: FC<DialogProps>;
 
-type Theme = {
-    name: string;
-    tokens: BlocksTokens;
-    components: ComponentThemesMap;
-};
-declare const makeTheme: (theme: Theme) => {
-    vars: string;
-    components: ComponentThemesMap;
-};
+declare function useComponentStyles<T extends keyof ComponentThemeProps>(name: T, props: ComponentThemeProps[T]): string;
 
-declare const vars: {
-    space: {
-        small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        none: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        gutter: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    };
-    borderRadius: {
-        small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    };
-    color: {
-        link: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        danger: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        white: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        black: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        body: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        primaryLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        primaryDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        secondaryLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        secondaryDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        text: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        textLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        textDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    };
-    borderWidth: {
-        small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    };
-    fontFamily: {
-        primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    };
-    fontSize: {
-        small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    };
-    fontWeight: {
-        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        regular: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        strong: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    };
-    lineHeight: {
-        small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    };
-    transition: {
-        slow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        normal: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        fast: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    };
-    shadow: {
-        small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    };
-    focus: {
-        boxShadow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    };
-};
+declare const useComponentStyleDefaultProps: <T extends "button" | "link" | "spinner" | "divider" | "dialog">(name: T) => ComponentThemeProps[T];
 
 type Args = null | undefined | boolean | string;
 declare const classnames: (...args: Args[]) => string | undefined;
@@ -579,4 +611,4 @@ declare const momotaro: {
     components: ComponentThemesMap;
 };
 
-export { BlocksProvider, BlocksProviderProps, BlocksTokens, Box, BoxProps, Button, ButtonProps, ComponentThemesMap, Divider, DividerProps, Heading, HeadingProps, Inline, InlineProps, Link, LinkProps, Spinner, SpinnerProps, Stack, StackProps, Text, TextProps, atoms, breakpointQuery, classnames, makeComponentTheme, makeTheme, momotaro, vars };
+export { BlocksProvider, BlocksProviderProps, BlocksTokens, Box, BoxProps, Button, ButtonProps, ComponentThemesMap, Dialog, DialogProps, Divider, DividerProps, Heading, HeadingProps, Inline, InlineProps, Link, LinkProps, Spinner, SpinnerProps, Stack, StackProps, Text, TextProps, atoms, breakpointQuery, classnames, makeComponentTheme, makeTheme, momotaro, useComponentStyleDefaultProps, useComponentStyles, vars };

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

@@ -0,0 +1,83 @@
+"use strict";
+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/Dialog/dialog.css.ts?used", "blocks");
+const backdropEnterAnimation = css.keyframes({
+  "0%": {
+    opacity: 0
+  },
+  "100%": {
+    opacity: 1
+  }
+}, "backdropEnterAnimation");
+const backdropLeaveAnimation = css.keyframes({
+  "0%": {
+    opacity: 1
+  },
+  "100%": {
+    opacity: 0
+  }
+}, "backdropLeaveAnimation");
+const dialogEnterAnimation = css.keyframes({
+  "0%": {
+    transform: "translateY(-34px)"
+  },
+  "100%": {
+    transform: "translateY(0)"
+  }
+}, "dialogEnterAnimation");
+const dialogLeaveAnimation = css.keyframes({
+  "0%": {
+    transform: "translateY(0)"
+  },
+  "100%": {
+    transform: "translateY(-34px)"
+  }
+}, "dialogLeaveAnimation");
+const backdrop = css.style({
+  "@layer": {
+    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+      contain: "layout",
+      position: "fixed",
+      width: "100%",
+      height: "100%",
+      left: 0,
+      top: 0,
+      overflow: "hidden",
+      opacity: "0",
+      animationName: backdropEnterAnimation,
+      animationDuration: "100ms",
+      animationFillMode: "both"
+    }
+  }
+}, "backdrop");
+const backdropLeave = css.style({
+  "@layer": {
+    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+      animationName: backdropLeaveAnimation
+    }
+  }
+}, "backdropLeave");
+const dialog = css.style({
+  "@layer": {
+    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+      animationName: dialogEnterAnimation,
+      animationDuration: "160ms",
+      animationFillMode: "both"
+    }
+  }
+}, "dialog");
+const dialogLeave = css.style({
+  "@layer": {
+    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+      animationName: dialogLeaveAnimation
+    }
+  }
+}, "dialogLeave");
+fileScope.endFileScope();
+exports.backdrop = backdrop;
+exports.backdropLeave = backdropLeave;
+exports.backdropLeaveAnimation = backdropLeaveAnimation;
+exports.dialog = dialog;
+exports.dialogLeave = dialogLeave;

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

@@ -0,0 +1,84 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { keyframes, style } from "@vanilla-extract/css";
+import { blocksLayer } from "../../lib/css/layers/layers.css.mjs";
+setFileScope("src/components/Dialog/dialog.css.ts?used", "blocks");
+const backdropEnterAnimation = keyframes({
+  "0%": {
+    opacity: 0
+  },
+  "100%": {
+    opacity: 1
+  }
+}, "backdropEnterAnimation");
+const backdropLeaveAnimation = keyframes({
+  "0%": {
+    opacity: 1
+  },
+  "100%": {
+    opacity: 0
+  }
+}, "backdropLeaveAnimation");
+const dialogEnterAnimation = keyframes({
+  "0%": {
+    transform: "translateY(-34px)"
+  },
+  "100%": {
+    transform: "translateY(0)"
+  }
+}, "dialogEnterAnimation");
+const dialogLeaveAnimation = keyframes({
+  "0%": {
+    transform: "translateY(0)"
+  },
+  "100%": {
+    transform: "translateY(-34px)"
+  }
+}, "dialogLeaveAnimation");
+const backdrop = style({
+  "@layer": {
+    [blocksLayer]: {
+      contain: "layout",
+      position: "fixed",
+      width: "100%",
+      height: "100%",
+      left: 0,
+      top: 0,
+      overflow: "hidden",
+      opacity: "0",
+      animationName: backdropEnterAnimation,
+      animationDuration: "100ms",
+      animationFillMode: "both"
+    }
+  }
+}, "backdrop");
+const backdropLeave = style({
+  "@layer": {
+    [blocksLayer]: {
+      animationName: backdropLeaveAnimation
+    }
+  }
+}, "backdropLeave");
+const dialog = style({
+  "@layer": {
+    [blocksLayer]: {
+      animationName: dialogEnterAnimation,
+      animationDuration: "160ms",
+      animationFillMode: "both"
+    }
+  }
+}, "dialog");
+const dialogLeave = style({
+  "@layer": {
+    [blocksLayer]: {
+      animationName: dialogLeaveAnimation
+    }
+  }
+}, "dialogLeave");
+endFileScope();
+export {
+  backdrop,
+  backdropLeave,
+  backdropLeaveAnimation,
+  dialog,
+  dialogLeave
+};

package/dist/styles/lib/css/atoms/atomicProperties.cjs

@@ -5,6 +5,7 @@ const unresponsiveProperties = {
   backgroundColor: colorWithCurrentColor,
   borderColor: colorWithCurrentColor,
   borderRadius: styles_lib_css_theme_vars_css_cjs.vars.borderRadius,
+  border: ["none"],
   bottom: [0],
   boxShadow: styles_lib_css_theme_vars_css_cjs.vars.shadow,
   color: colorWithCurrentColor,

package/dist/styles/lib/css/atoms/atomicProperties.mjs

@@ -4,6 +4,7 @@ const unresponsiveProperties = {
   backgroundColor: colorWithCurrentColor,
   borderColor: colorWithCurrentColor,
   borderRadius: vars.borderRadius,
+  border: ["none"],
   bottom: [0],
   boxShadow: vars.shadow,
   color: colorWithCurrentColor,

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

@@ -0,0 +1,25 @@
+"use strict";
+const fileScope = require("@vanilla-extract/css/fileScope");
+const css = require("@vanilla-extract/css");
+const styles_lib_css_theme_makeComponentTheme_cjs = require("../../../lib/css/theme/makeComponentTheme.cjs");
+const styles_lib_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
+fileScope.setFileScope("src/themes/momotaro/components/dialog.css.ts?used", "blocks");
+const dialog = styles_lib_css_theme_makeComponentTheme_cjs.makeComponentTheme({
+  type: "dialog",
+  base: css.style([styles_lib_css_atoms_sprinkles_css_cjs.atoms({
+    display: "flex",
+    flexDirection: "column",
+    padding: "gutter",
+    border: "none",
+    overflow: "auto"
+  }), {
+    minWidth: "300px"
+  }], "dialog_base"),
+  variants: {
+    backdrop: css.style({
+      backgroundColor: "rgba(0, 0, 0, 0.5)"
+    }, "dialog_variants_backdrop")
+  }
+});
+fileScope.endFileScope();
+exports.dialog = dialog;

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

@@ -0,0 +1,26 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { style } from "@vanilla-extract/css";
+import { makeComponentTheme } from "../../../lib/css/theme/makeComponentTheme.mjs";
+import { atoms } from "../../../lib/css/atoms/sprinkles.css.mjs";
+setFileScope("src/themes/momotaro/components/dialog.css.ts?used", "blocks");
+const dialog = makeComponentTheme({
+  type: "dialog",
+  base: style([atoms({
+    display: "flex",
+    flexDirection: "column",
+    padding: "gutter",
+    border: "none",
+    overflow: "auto"
+  }), {
+    minWidth: "300px"
+  }], "dialog_base"),
+  variants: {
+    backdrop: style({
+      backgroundColor: "rgba(0, 0, 0, 0.5)"
+    }, "dialog_variants_backdrop")
+  }
+});
+endFileScope();
+export {
+  dialog
+};

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

@@ -3,10 +3,12 @@ const styles_themes_momotaro_components_button_css_cjs = require("./button.css.c
 const styles_themes_momotaro_components_link_css_cjs = require("./link.css.cjs");
 const styles_themes_momotaro_components_spinner_css_cjs = require("./spinner.css.cjs");
 const styles_themes_momotaro_components_divider_css_cjs = require("./divider.css.cjs");
+const styles_themes_momotaro_components_dialog_css_cjs = require("./dialog.css.cjs");
 const components = {
   button: styles_themes_momotaro_components_button_css_cjs.button,
   link: styles_themes_momotaro_components_link_css_cjs.link,
   spinner: styles_themes_momotaro_components_spinner_css_cjs.spinner,
-  divider: styles_themes_momotaro_components_divider_css_cjs.divider
+  divider: styles_themes_momotaro_components_divider_css_cjs.divider,
+  dialog: styles_themes_momotaro_components_dialog_css_cjs.dialog
 };
 exports.components = components;

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

@@ -2,11 +2,13 @@ import { button } from "./button.css.mjs";
 import { link } from "./link.css.mjs";
 import { spinner } from "./spinner.css.mjs";
 import { divider } from "./divider.css.mjs";
+import { dialog } from "./dialog.css.mjs";
 const components = {
   button,
   link,
   spinner,
-  divider
+  divider,
+  dialog
 };
 export {
   components

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockle/blocks",
-  "version": "0.3.8",
+  "version": "0.4.0",
   "description": "Blocks design system",
   "repository": "git@github.com:Blockle/blocks.git",
   "license": "MIT",