@blockle/blocks 0.8.8 → 0.8.9

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

@@ -0,0 +1,246 @@
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState, useCallback, createContext, useContext } from "react";
+import { useTheme, useComponentStyles, Box, classnames } from "../../display/Divider/Divider.mjs";
+import { backdrop } from "./dialog.css.mjs";
+import { createPortal } from "react-dom";
+import { BlocksProvider } from "../../other/BlocksProvider/BlocksProvider.mjs";
+const Portal = ({ children, container }) => {
+  const context = useTheme();
+  return createPortal(
+    /* @__PURE__ */ jsx(BlocksProvider, { theme: context, children }),
+    container || document.body
+  );
+};
+const focusableSelectors = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+const getFirstFocusableElement = (container) => {
+  const focusable = container.querySelector(focusableSelectors);
+  return focusable || null;
+};
+const focusFirstElement = (container) => {
+  const focusable = getFirstFocusableElement(container);
+  if (focusable) {
+    focusable.focus();
+  }
+};
+const useFocusLock = ({ ref, active }) => {
+  useEffect(() => {
+    if (!active) {
+      return;
+    }
+    const handleFocus = (event) => {
+      if (ref.current && event.target instanceof HTMLElement && !ref.current.contains(event.target)) {
+        focusFirstElement(ref.current);
+      }
+    };
+    document.addEventListener("focusin", handleFocus);
+    return () => {
+      document.removeEventListener("focusin", handleFocus);
+    };
+  }, [active, ref]);
+};
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+const useKeyboard = (key, callback, { enabled = true, type = "keydown" } = {}) => {
+  useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+    function handleKeyDown(event) {
+      if (event.key === key) {
+        callback();
+      }
+    }
+    document.addEventListener(type, handleKeyDown);
+    return () => {
+      document.removeEventListener(type, handleKeyDown);
+    };
+  }, [callback, enabled, key, type]);
+};
+const useLayer = () => {
+  const layerRef = useRef();
+  useEffect(
+    () => () => {
+      if (layerRef.current) {
+        layerRef.current.remove();
+        layerRef.current = void 0;
+      }
+    },
+    []
+  );
+  return () => {
+    if (!layerRef.current) {
+      const div = document.createElement("div");
+      div.dataset.layer = "blocks";
+      layerRef.current = div;
+      document.body.append(layerRef.current);
+    }
+    return layerRef.current;
+  };
+};
+const usePreventBodyScroll = (enabled = true) => {
+  useIsomorphicLayoutEffect(() => {
+    if (!enabled) {
+      return;
+    }
+    const prevOverflow = document.body.style.getPropertyValue("overflow");
+    const prevScrollTop = document.documentElement.scrollTop;
+    if (document.body.scrollHeight > window.innerHeight) {
+      document.body.style.position = "fixed";
+      document.body.style.overflow = "hidden";
+      document.body.style.overflowY = "scroll";
+      document.body.style.width = "100%";
+      document.body.style.top = `-${prevScrollTop}px`;
+    } else {
+      document.body.style.overflow = "hidden";
+    }
+    return () => {
+      document.body.style.position = "";
+      document.body.style.overflow = prevOverflow;
+      document.body.style.overflowY = "";
+      document.body.style.width = "";
+      document.body.style.top = "";
+      document.documentElement.scrollTop = prevScrollTop;
+    };
+  }, [enabled]);
+};
+const isBrowser = typeof window !== "undefined";
+const useRestoreFocus = (active) => {
+  const target = useRef(null);
+  if (isBrowser && active && !target.current) {
+    target.current = document.activeElement;
+  }
+  useEffect(() => {
+    if (target.current && !active && target.current instanceof HTMLElement) {
+      target.current.focus();
+    }
+    if (!active) {
+      target.current = null;
+    }
+  }, [active]);
+};
+const useVisibilityState = (open) => {
+  const [visible, setVisible] = useState(open);
+  const hide = useCallback(() => {
+    setVisible(false);
+  }, []);
+  useEffect(() => {
+    if (open) {
+      setVisible(true);
+    }
+  }, [open]);
+  return [visible, hide];
+};
+function hasAnimationDuration(element) {
+  if (!element) {
+    return false;
+  }
+  const style = window.getComputedStyle(element);
+  return style.transitionDuration !== "0s" || style.animationDuration !== "0s";
+}
+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 Dialog = ({
+  children,
+  open,
+  className,
+  onRequestClose,
+  size,
+  ...restProps
+}) => {
+  const backdropClassName = useComponentStyles("dialog", { backdrop: true }, false);
+  const dialogClassName = useComponentStyles("dialog", { dialog: true, variants: { size } });
+  const backdropRef = useRef(null);
+  const dialogRef = useRef(null);
+  const layer = useLayer();
+  const [visible, hide] = useVisibilityState(open);
+  const [enabled, setEnabled] = useState(true);
+  const onBackdropClick = useCallback(
+    (event) => {
+      if (event.target === event.currentTarget) {
+        onRequestClose();
+      }
+    },
+    [onRequestClose]
+  );
+  useFocusLock({ ref: dialogRef, active: open && enabled });
+  useRestoreFocus(open);
+  const isNested = useNestedDialog(visible);
+  usePreventBodyScroll(visible && !isNested);
+  useKeyboard("Escape", onRequestClose, { enabled: open && enabled });
+  useIsomorphicLayoutEffect(() => {
+    var _a, _b;
+    if (!open) {
+      (_a = backdropRef.current) == null ? void 0 : _a.removeAttribute("data-open");
+      (_b = dialogRef.current) == null ? void 0 : _b.removeAttribute("data-open");
+      return;
+    }
+    let timer = requestAnimationFrame(() => {
+      timer = requestAnimationFrame(() => {
+        var _a2, _b2;
+        (_a2 = backdropRef.current) == null ? void 0 : _a2.setAttribute("data-open", "");
+        (_b2 = dialogRef.current) == null ? void 0 : _b2.setAttribute("data-open", "");
+      });
+    });
+    return () => {
+      cancelAnimationFrame(timer);
+    };
+  }, [open, visible]);
+  const onAnimationEnd = useCallback(() => {
+    if (!open) {
+      hide();
+    }
+  }, [hide, open]);
+  useEffect(() => {
+    if (open) {
+      return;
+    }
+    if (!hasAnimationDuration(dialogRef.current)) {
+      hide();
+    }
+  }, [hide, open]);
+  if (!visible) {
+    return null;
+  }
+  const dataOpen = typeof window === "undefined" && open ? "" : void 0;
+  return /* @__PURE__ */ jsx(Portal, { container: layer(), children: /* @__PURE__ */ jsx(DialogContext.Provider, { value: { setEnabled }, children: /* @__PURE__ */ jsx(
+    Box,
+    {
+      ref: backdropRef,
+      className: classnames(backdrop, backdropClassName),
+      "data-open": dataOpen,
+      onClick: onBackdropClick,
+      onAnimationEnd,
+      onTransitionEnd: onAnimationEnd,
+      children: /* @__PURE__ */ jsx(
+        "dialog",
+        {
+          ref: dialogRef,
+          "aria-modal": "true",
+          open: true,
+          "data-open": dataOpen,
+          className: classnames(dialogClassName, className),
+          ...restProps,
+          children
+        }
+      )
+    }
+  ) }) });
+};
+export {
+  Dialog,
+  Portal,
+  useIsomorphicLayoutEffect,
+  useKeyboard,
+  usePreventBodyScroll
+};

package/dist/styles/components/{Dialog → overlay/Dialog}/dialog.css.cjs

@@ -1,8 +1,8 @@
 "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 styles_lib_css_layers_layers_css_cjs = require("../../../lib/css/layers/layers.css.cjs");
+fileScope.setFileScope("src/components/overlay/Dialog/dialog.css.ts", "blocks");
 const backdrop = css.style({
   "@layer": {
     [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {

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

@@ -1,7 +1,7 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { style } from "@vanilla-extract/css";
-import { blocksLayer } from "../../lib/css/layers/layers.css.mjs";
-setFileScope("src/components/Dialog/dialog.css.ts?used", "blocks");
+import { blocksLayer } from "../../../lib/css/layers/layers.css.mjs";
+setFileScope("src/components/overlay/Dialog/dialog.css.ts", "blocks");
 const backdrop = style({
   "@layer": {
     [blocksLayer]: {

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

@@ -0,0 +1,14 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const styles_components_display_Divider_Divider_cjs = require("../../display/Divider/Divider.cjs");
+const styles_components_typography_Heading_heading_css_cjs = require("./heading.css.cjs");
+const Heading = ({
+  className,
+  level = 1,
+  children,
+  ...restProps
+}) => {
+  const Tag = `h${level}`;
+  return /* @__PURE__ */ jsxRuntime.jsx(styles_components_display_Divider_Divider_cjs.Box, { asChild: true, className: styles_components_display_Divider_Divider_cjs.classnames(styles_components_typography_Heading_heading_css_cjs.heading, className), ...restProps, children: /* @__PURE__ */ jsxRuntime.jsx(Tag, { children }) });
+};
+exports.Heading = Heading;

package/dist/styles/components/typography/Heading/Heading.mjs

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import { Box, classnames } from "../../display/Divider/Divider.mjs";
+import { heading } from "./heading.css.mjs";
+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/styles/components/{Heading → typography/Heading}/heading.css.cjs

@@ -1,8 +1,8 @@
 "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/Heading/heading.css.ts?used", "blocks");
+const styles_lib_css_layers_layers_css_cjs = require("../../../lib/css/layers/layers.css.cjs");
+fileScope.setFileScope("src/components/typography/Heading/heading.css.ts", "blocks");
 const heading = css.style({
   "@layer": {
     [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {

package/dist/styles/components/{Heading → typography/Heading}/heading.css.mjs

@@ -1,7 +1,7 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { style } from "@vanilla-extract/css";
-import { blocksLayer } from "../../lib/css/layers/layers.css.mjs";
-setFileScope("src/components/Heading/heading.css.ts?used", "blocks");
+import { blocksLayer } from "../../../lib/css/layers/layers.css.mjs";
+setFileScope("src/components/typography/Heading/heading.css.ts", "blocks");
 const heading = style({
   "@layer": {
     [blocksLayer]: {

package/dist/styles/components/typography/Text/Text.cjs

@@ -0,0 +1,9 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const styles_components_display_Divider_Divider_cjs = require("../../display/Divider/Divider.cjs");
+const styles_components_typography_Text_text_css_cjs = require("./text.css.cjs");
+const Text = react.forwardRef(function Text2({ tag: Tag = "span", asChild, children, className, ...restProps }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(styles_components_display_Divider_Divider_cjs.Box, { ref, asChild: true, className: styles_components_display_Divider_Divider_cjs.classnames(styles_components_typography_Text_text_css_cjs.text, className), ...restProps, children: asChild ? children : /* @__PURE__ */ jsxRuntime.jsx(Tag, { children }) });
+});
+exports.Text = Text;

package/dist/styles/components/typography/Text/Text.mjs

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Box, classnames } from "../../display/Divider/Divider.mjs";
+import { text } from "./text.css.mjs";
+const Text = forwardRef(function Text2({ tag: Tag = "span", asChild, children, className, ...restProps }, ref) {
+  return /* @__PURE__ */ jsx(Box, { ref, asChild: true, className: classnames(text, className), ...restProps, children: asChild ? children : /* @__PURE__ */ jsx(Tag, { children }) });
+});
+export {
+  Text
+};

package/dist/styles/components/{Text → typography/Text}/text.css.cjs

@@ -1,8 +1,8 @@
 "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/Text/text.css.ts?used", "blocks");
+const styles_lib_css_layers_layers_css_cjs = require("../../../lib/css/layers/layers.css.cjs");
+fileScope.setFileScope("src/components/typography/Text/text.css.ts", "blocks");
 const text = css.style({
   "@layer": {
     [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {

package/dist/styles/components/{Text → typography/Text}/text.css.mjs

@@ -1,7 +1,7 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { style } from "@vanilla-extract/css";
-import { blocksLayer } from "../../lib/css/layers/layers.css.mjs";
-setFileScope("src/components/Text/text.css.ts?used", "blocks");
+import { blocksLayer } from "../../../lib/css/layers/layers.css.mjs";
+setFileScope("src/components/typography/Text/text.css.ts", "blocks");
 const text = style({
   "@layer": {
     [blocksLayer]: {

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

@@ -0,0 +1 @@
+"use strict";

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

@@ -0,0 +1 @@
+

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

@@ -3,7 +3,7 @@ const fileScope = require("@vanilla-extract/css/fileScope");
 const sprinkles = require("@vanilla-extract/sprinkles");
 const styles_lib_css_atoms_atomicProperties_cjs = require("./atomicProperties.cjs");
 const styles_lib_css_atoms_breakpoints_cjs = require("./breakpoints.cjs");
-fileScope.setFileScope("src/lib/css/atoms/sprinkles.css.ts?used", "blocks");
+fileScope.setFileScope("src/lib/css/atoms/sprinkles.css.ts", "blocks");
 const unresponsiveAtomicProperties = sprinkles.defineProperties({
   properties: styles_lib_css_atoms_atomicProperties_cjs.unresponsiveProperties,
   shorthands: {
@@ -36,10 +36,6 @@ const responsiveAtomicProperties = sprinkles.defineProperties({
     placeItems: ["justifyContent", "alignItems"]
   }
 });
-const atoms = sprinkles.createSprinkles(
-  unresponsiveAtomicProperties,
-  responsiveAtomicProperties
-  // colorAtomicProperties,
-);
+const atoms = sprinkles.createSprinkles(unresponsiveAtomicProperties, responsiveAtomicProperties);
 fileScope.endFileScope();
 exports.atoms = atoms;

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

@@ -2,7 +2,7 @@ import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { defineProperties, createSprinkles } from "@vanilla-extract/sprinkles";
 import { unresponsiveProperties, responsiveProperties } from "./atomicProperties.mjs";
 import { breakpointQuery, breakpointNames } from "./breakpoints.mjs";
-setFileScope("src/lib/css/atoms/sprinkles.css.ts?used", "blocks");
+setFileScope("src/lib/css/atoms/sprinkles.css.ts", "blocks");
 const unresponsiveAtomicProperties = defineProperties({
   properties: unresponsiveProperties,
   shorthands: {
@@ -35,11 +35,7 @@ const responsiveAtomicProperties = defineProperties({
     placeItems: ["justifyContent", "alignItems"]
   }
 });
-const atoms = createSprinkles(
-  unresponsiveAtomicProperties,
-  responsiveAtomicProperties
-  // colorAtomicProperties,
-);
+const atoms = createSprinkles(unresponsiveAtomicProperties, responsiveAtomicProperties);
 endFileScope();
 export {
   atoms

package/dist/styles/lib/css/layers/layers.css.cjs

@@ -1,7 +1,7 @@
 "use strict";
 const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
-fileScope.setFileScope("src/lib/css/layers/layers.css.ts?used", "blocks");
+fileScope.setFileScope("src/lib/css/layers/layers.css.ts", "blocks");
 const blocksLayer = css.layer("blockle-blocks");
 fileScope.endFileScope();
 exports.blocksLayer = blocksLayer;

package/dist/styles/lib/css/layers/layers.css.mjs

@@ -1,6 +1,6 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { layer } from "@vanilla-extract/css";
-setFileScope("src/lib/css/layers/layers.css.ts?used", "blocks");
+setFileScope("src/lib/css/layers/layers.css.ts", "blocks");
 const blocksLayer = layer("blockle-blocks");
 endFileScope();
 export {

package/dist/styles/lib/theme/vars.css.cjs

@@ -3,7 +3,7 @@ const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
 const styles_lib_theme_makeVanillaTheme_cjs = require("./makeVanillaTheme.cjs");
 const styles_lib_theme_tokens_cjs = require("./tokens.cjs");
-fileScope.setFileScope("src/lib/theme/vars.css.ts?used", "blocks");
+fileScope.setFileScope("src/lib/theme/vars.css.ts", "blocks");
 const vars = css.createThemeContract(styles_lib_theme_makeVanillaTheme_cjs.makeVanillaTheme(styles_lib_theme_tokens_cjs.tokens));
 fileScope.endFileScope();
 exports.vars = vars;

package/dist/styles/lib/theme/vars.css.mjs

@@ -2,7 +2,7 @@ import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { createThemeContract } from "@vanilla-extract/css";
 import { makeVanillaTheme } from "./makeVanillaTheme.mjs";
 import { tokens } from "./tokens.mjs";
-setFileScope("src/lib/theme/vars.css.ts?used", "blocks");
+setFileScope("src/lib/theme/vars.css.ts", "blocks");
 const vars = createThemeContract(makeVanillaTheme(tokens));
 endFileScope();
 export {

package/dist/styles/lib/utils/atom-props.cjs

@@ -0,0 +1,15 @@
+"use strict";
+const styles_lib_css_atoms_sprinkles_css_cjs = require("../css/atoms/sprinkles.css.cjs");
+function getAtomsAndProps(props) {
+  const atomProps = {};
+  const otherProps = {};
+  for (const [name, value] of Object.entries(props)) {
+    if (styles_lib_css_atoms_sprinkles_css_cjs.atoms.properties.has(name)) {
+      atomProps[name] = value;
+    } else {
+      otherProps[name] = value;
+    }
+  }
+  return [atomProps, otherProps];
+}
+exports.getAtomsAndProps = getAtomsAndProps;

package/dist/styles/lib/utils/atom-props.mjs

@@ -0,0 +1,16 @@
+import { atoms } from "../css/atoms/sprinkles.css.mjs";
+function getAtomsAndProps(props) {
+  const atomProps = {};
+  const otherProps = {};
+  for (const [name, value] of Object.entries(props)) {
+    if (atoms.properties.has(name)) {
+      atomProps[name] = value;
+    } else {
+      otherProps[name] = value;
+    }
+  }
+  return [atomProps, otherProps];
+}
+export {
+  getAtomsAndProps
+};

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

@@ -5,7 +5,7 @@ const styles_lib_css_style_style_cjs = require("../../../lib/css/style/style.cjs
 const styles_lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
 const styles_lib_theme_vars_css_cjs = require("../../../lib/theme/vars.css.cjs");
 const styles_themes_momotaro_components_helpers_css_cjs = require("./helpers.css.cjs");
-fileScope.setFileScope("src/themes/momotaro/components/button.css.ts?used", "blocks");
+fileScope.setFileScope("src/themes/momotaro/components/button.css.ts", "blocks");
 const intentColor = css.createVar("intentColor");
 const hoverBackgroundColor = css.createVar("hoverBackgroundColor");
 const button = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("button", {

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

@@ -4,7 +4,7 @@ import { style } from "../../../lib/css/style/style.mjs";
 import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.mjs";
 import { vars } from "../../../lib/theme/vars.css.mjs";
 import { clickable, focusRingColor } from "./helpers.css.mjs";
-setFileScope("src/themes/momotaro/components/button.css.ts?used", "blocks");
+setFileScope("src/themes/momotaro/components/button.css.ts", "blocks");
 const intentColor = createVar("intentColor");
 const hoverBackgroundColor = createVar("hoverBackgroundColor");
 const button = makeComponentTheme("button", {

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

@@ -6,7 +6,7 @@ const styles_lib_theme_vars_css_cjs = require("../../../lib/theme/vars.css.cjs")
 const styles_themes_momotaro_components_helpers_css_cjs = require("./helpers.css.cjs");
 const styles_themes_momotaro_components_transitions_cjs = require("./transitions.cjs");
 const styles_lib_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
-fileScope.setFileScope("src/themes/momotaro/components/checkbox.css.ts?used", "blocks");
+fileScope.setFileScope("src/themes/momotaro/components/checkbox.css.ts", "blocks");
 const checkbox = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("checkbox", {
   base: css.style([{
     display: "flex",

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

@@ -5,7 +5,7 @@ import { vars } from "../../../lib/theme/vars.css.mjs";
 import { focusable } from "./helpers.css.mjs";
 import { bounceOut } from "./transitions.mjs";
 import { atoms } from "../../../lib/css/atoms/sprinkles.css.mjs";
-setFileScope("src/themes/momotaro/components/checkbox.css.ts?used", "blocks");
+setFileScope("src/themes/momotaro/components/checkbox.css.ts", "blocks");
 const checkbox = makeComponentTheme("checkbox", {
   base: style([{
     display: "flex",

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

@@ -3,7 +3,7 @@ const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
 const styles_lib_theme_makeComponentTheme_cjs = require("../../../lib/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");
+fileScope.setFileScope("src/themes/momotaro/components/dialog.css.ts", "blocks");
 const dialog = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("dialog", {
   dialog: css.style([styles_lib_css_atoms_sprinkles_css_cjs.atoms({
     display: "flex",

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

@@ -2,7 +2,7 @@ import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { style } from "@vanilla-extract/css";
 import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.mjs";
 import { atoms } from "../../../lib/css/atoms/sprinkles.css.mjs";
-setFileScope("src/themes/momotaro/components/dialog.css.ts?used", "blocks");
+setFileScope("src/themes/momotaro/components/dialog.css.ts", "blocks");
 const dialog = makeComponentTheme("dialog", {
   dialog: style([atoms({
     display: "flex",

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

@@ -1,7 +1,7 @@
 "use strict";
 const fileScope = require("@vanilla-extract/css/fileScope");
 const styles_lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
-fileScope.setFileScope("src/themes/momotaro/components/divider.css.ts?used", "blocks");
+fileScope.setFileScope("src/themes/momotaro/components/divider.css.ts", "blocks");
 const divider = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("divider", {
   defaultVariants: {
     color: "textLight"

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

@@ -1,6 +1,6 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.mjs";
-setFileScope("src/themes/momotaro/components/divider.css.ts?used", "blocks");
+setFileScope("src/themes/momotaro/components/divider.css.ts", "blocks");
 const divider = makeComponentTheme("divider", {
   defaultVariants: {
     color: "textLight"

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

@@ -0,0 +1,54 @@
+"use strict";
+const fileScope = require("@vanilla-extract/css/fileScope");
+const styles_lib_css_style_style_cjs = require("../../../lib/css/style/style.cjs");
+const styles_lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
+fileScope.setFileScope("src/themes/momotaro/components/dropdown.css.ts", "blocks");
+const dropdown = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("dropdown", {
+  base: styles_lib_css_style_style_cjs.style({
+    backgroundColor: "white",
+    borderRadius: "small",
+    boxShadow: "medium",
+    padding: "medium",
+    vars: {
+      "--spacing": "0.5rem"
+    },
+    selectors: {
+      "&[data-open]": {
+        transform: "translate(0, 0)",
+        opacity: 1
+      }
+    },
+    // Apply the animation only if the user has not requested reduced motion
+    "@media": {
+      "(prefers-reduced-motion: no-preference)": {
+        // transform: 'scale(0.9)',
+        transform: "translateY(var(--spacing))",
+        transition: "opacity 80ms linear, transform 80ms",
+        opacity: 0
+      }
+    }
+  }),
+  variants: {
+    variant: {
+      solid: styles_lib_css_style_style_cjs.style({
+        backgroundColor: "white",
+        border: "none",
+        boxShadow: "medium",
+        color: "black",
+        padding: "medium"
+      }),
+      outline: styles_lib_css_style_style_cjs.style({
+        backgroundColor: "transparent",
+        border: "1px solid black",
+        boxShadow: "none",
+        color: "black",
+        padding: "medium"
+      })
+    }
+  },
+  defaultVariants: {
+    variant: "solid"
+  }
+});
+fileScope.endFileScope();
+exports.dropdown = dropdown;