@gnist/design-system 6.0.0-alpha.3 → 6.1.0

package/dist/components/surfaces/modal/modal.css.cjs

@@ -1,267 +1,224 @@
 "use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const atoms_css_js = require("@gnist/themes/atoms.css.js");
-const layers_css_js = require("@gnist/themes/layers.css.js");
-const tokens_css_js = require("@gnist/themes/tokens.css.js");
-const css = require("@vanilla-extract/css");
-const cssUtils = require("@vanilla-extract/css-utils");
-const backdropStyle = layers_css_js.gnistStyle({
-  zIndex: -1,
-  position: "fixed",
-  right: 0,
-  bottom: 0,
-  top: 0,
-  left: 0,
-  backgroundColor: "rgba(0, 0, 0, 0.5)",
-  WebkitTapHighlightColor: "transparent"
+require("../../../_virtual/_rolldown/runtime.cjs");
+let _gnist_themes_atoms_css_js = require("@gnist/themes/atoms.css.js");
+let _vanilla_extract_recipes = require("@vanilla-extract/recipes");
+let _gnist_themes_tokens_css_js = require("@gnist/themes/tokens.css.js");
+let _vanilla_extract_css_utils = require("@vanilla-extract/css-utils");
+let _vanilla_extract_css = require("@vanilla-extract/css");
+//#region src/components/surfaces/modal/modal.css.ts
+var backdropStyle = (0, _vanilla_extract_css.style)({
+	zIndex: -1,
+	position: "fixed",
+	right: 0,
+	bottom: 0,
+	top: 0,
+	left: 0,
+	backgroundColor: "rgba(0, 0, 0, 0.5)",
+	WebkitTapHighlightColor: "transparent"
 });
-const modalStyle = layers_css_js.gnistStyle({
-  position: "fixed",
-  zIndex: 1300,
-  right: 0,
-  bottom: 0,
-  top: 0,
-  left: 0,
-  width: "100%",
-  maxWidth: "unset",
-  maxHeight: "unset",
-  backgroundColor: "transparent",
-  border: "none",
-  height: "100%",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  isolation: "isolate",
-  margin: 0,
-  padding: 0
+var modalStyle = (0, _vanilla_extract_css.style)({
+	position: "fixed",
+	zIndex: 1300,
+	right: 0,
+	bottom: 0,
+	top: 0,
+	left: 0,
+	width: "100%",
+	maxWidth: "unset",
+	maxHeight: "unset",
+	backgroundColor: "transparent",
+	border: "none",
+	height: "100%",
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	isolation: "isolate",
+	margin: 0,
+	padding: 0
 });
-const modalHeadingStyle = layers_css_js.gnistStyle({
-  fontWeight: tokens_css_js.tokens.typeface.weight.semibold
-});
-const dialogPadding = (size) => {
-  switch (size) {
-    case "fullscreen":
-    case "x-large":
-    case "large":
-      return tokens_css_js.tokens.spacing.xl;
-    case "medium":
-      return tokens_css_js.tokens.spacing.l;
-    case "small":
-      return tokens_css_js.tokens.spacing.m;
-  }
+var modalHeadingStyle = (0, _vanilla_extract_css.style)({ fontWeight: _gnist_themes_tokens_css_js.tokens.typeface.weight.semibold });
+var dialogPadding = (size) => {
+	switch (size) {
+		case "fullscreen":
+		case "x-large":
+		case "large": return _gnist_themes_tokens_css_js.tokens.spacing.xl;
+		case "medium": return _gnist_themes_tokens_css_js.tokens.spacing.l;
+		case "small": return _gnist_themes_tokens_css_js.tokens.spacing.m;
+	}
 };
-const dialogRecipe = layers_css_js.gnistRecipe({
-  base: [
-    atoms_css_js.atoms({
-      color: "on-surface",
-      display: "flex",
-      flexDirection: "column",
-      justifyContent: "space-between"
-    }),
-    {
-      boxSizing: "border-box",
-      overflow: "auto",
-      position: "fixed",
-      paddingTop: "env(safe-area-inset-top)",
-      zIndex: 1100
-    }
-  ],
-  variants: {
-    size: {
-      fullscreen: {
-        height: "100dvh",
-        width: "100dvw",
-        paddingBottom: cssUtils.calc("env(safe-area-inset-bottom)").add(dialogPadding("fullscreen")).toString()
-      },
-      "x-large": {
-        maxHeight: cssUtils.calc("100dvh").subtract("env(safe-area-inset-bottom)").subtract(dialogPadding("x-large")).toString(),
-        width: "1024px",
-        maxWidth: "95vw",
-        paddingBottom: cssUtils.calc("env(safe-area-inset-bottom)").add(dialogPadding("x-large")).toString()
-      },
-      large: {
-        maxHeight: cssUtils.calc("100dvh").subtract("env(safe-area-inset-bottom)").subtract(dialogPadding("large")).toString(),
-        width: "800px",
-        maxWidth: "95vw",
-        paddingBottom: cssUtils.calc("env(safe-area-inset-bottom)").add(dialogPadding("large")).toString()
-      },
-      medium: {
-        maxHeight: cssUtils.calc("100dvh").subtract("env(safe-area-inset-bottom)").subtract(dialogPadding("medium")).toString(),
-        width: "496px",
-        maxWidth: "95vw",
-        paddingBottom: cssUtils.calc("env(safe-area-inset-bottom)").add(dialogPadding("medium")).toString()
-      },
-      small: {
-        maxHeight: cssUtils.calc("100dvh").subtract("env(safe-area-inset-bottom)").subtract(dialogPadding("small")).toString(),
-        width: "304px",
-        maxWidth: "95vw",
-        paddingBottom: cssUtils.calc("env(safe-area-inset-bottom)").add(dialogPadding("small")).toString()
-      }
-    }
-  },
-  defaultVariants: {
-    size: "medium"
-  }
+var dialogRecipe = (0, _vanilla_extract_recipes.recipe)({
+	base: [(0, _gnist_themes_atoms_css_js.atoms)({
+		color: "on-surface",
+		display: "flex",
+		flexDirection: "column",
+		justifyContent: "space-between"
+	}), {
+		boxSizing: "border-box",
+		overflow: "auto",
+		position: "fixed",
+		paddingTop: "env(safe-area-inset-top)",
+		zIndex: 1100
+	}],
+	variants: { size: {
+		fullscreen: {
+			height: "100dvh",
+			width: "100dvw",
+			paddingBottom: (0, _vanilla_extract_css_utils.calc)("env(safe-area-inset-bottom)").add(dialogPadding("fullscreen")).toString()
+		},
+		"x-large": {
+			maxHeight: (0, _vanilla_extract_css_utils.calc)("100dvh").subtract("env(safe-area-inset-bottom)").subtract(dialogPadding("x-large")).toString(),
+			width: "1024px",
+			maxWidth: "95vw",
+			paddingBottom: (0, _vanilla_extract_css_utils.calc)("env(safe-area-inset-bottom)").add(dialogPadding("x-large")).toString()
+		},
+		large: {
+			maxHeight: (0, _vanilla_extract_css_utils.calc)("100dvh").subtract("env(safe-area-inset-bottom)").subtract(dialogPadding("large")).toString(),
+			width: "800px",
+			maxWidth: "95vw",
+			paddingBottom: (0, _vanilla_extract_css_utils.calc)("env(safe-area-inset-bottom)").add(dialogPadding("large")).toString()
+		},
+		medium: {
+			maxHeight: (0, _vanilla_extract_css_utils.calc)("100dvh").subtract("env(safe-area-inset-bottom)").subtract(dialogPadding("medium")).toString(),
+			width: "496px",
+			maxWidth: "95vw",
+			paddingBottom: (0, _vanilla_extract_css_utils.calc)("env(safe-area-inset-bottom)").add(dialogPadding("medium")).toString()
+		},
+		small: {
+			maxHeight: (0, _vanilla_extract_css_utils.calc)("100dvh").subtract("env(safe-area-inset-bottom)").subtract(dialogPadding("small")).toString(),
+			width: "304px",
+			maxWidth: "95vw",
+			paddingBottom: (0, _vanilla_extract_css_utils.calc)("env(safe-area-inset-bottom)").add(dialogPadding("small")).toString()
+		}
+	} },
+	defaultVariants: { size: "medium" }
 });
-const headerRowPaddingBySize = (size) => layers_css_js.gnistStyle({
-  paddingTop: dialogPadding(size),
-  paddingRight: dialogPadding(size),
-  paddingLeft: dialogPadding(size)
+var headerRowPaddingBySize = (size) => (0, _vanilla_extract_css.style)({
+	paddingTop: dialogPadding(size),
+	paddingRight: dialogPadding(size),
+	paddingLeft: dialogPadding(size)
 });
-const headerRowRecipe = layers_css_js.gnistRecipe({
-  base: [
-    {
-      position: "sticky",
-      top: 0,
-      zIndex: 20,
-      paddingBottom: tokens_css_js.tokens.spacing.xs,
-      display: "flex",
-      justifyContent: "space-between"
-    }
-  ],
-  variants: {
-    size: {
-      fullscreen: [headerRowPaddingBySize("fullscreen")],
-      "x-large": [headerRowPaddingBySize("x-large")],
-      large: [headerRowPaddingBySize("large")],
-      medium: [headerRowPaddingBySize("medium")],
-      small: [headerRowPaddingBySize("small")]
-    },
-    hasScroll: {
-      true: {
-        borderBottom: `solid ${tokens_css_js.tokens.stroke.small} ${tokens_css_js.tokens.color.outline}`
-      },
-      false: {}
-    }
-  },
-  compoundVariants: [
-    {
-      variants: { size: "fullscreen", hasScroll: true },
-      style: {
-        border: "none"
-      }
-    }
-  ]
+var headerRowRecipe = (0, _vanilla_extract_recipes.recipe)({
+	base: [{
+		position: "sticky",
+		top: 0,
+		zIndex: 20,
+		paddingBottom: _gnist_themes_tokens_css_js.tokens.spacing.xs,
+		display: "flex",
+		justifyContent: "space-between"
+	}],
+	variants: {
+		size: {
+			fullscreen: [headerRowPaddingBySize("fullscreen")],
+			"x-large": [headerRowPaddingBySize("x-large")],
+			large: [headerRowPaddingBySize("large")],
+			medium: [headerRowPaddingBySize("medium")],
+			small: [headerRowPaddingBySize("small")]
+		},
+		hasScroll: {
+			true: { borderBottom: `solid ${_gnist_themes_tokens_css_js.tokens.stroke.small} ${_gnist_themes_tokens_css_js.tokens.color.outline}` },
+			false: {}
+		}
+	},
+	compoundVariants: [{
+		variants: {
+			size: "fullscreen",
+			hasScroll: true
+		},
+		style: { border: "none" }
+	}]
 });
-const contentContainerRecipe = layers_css_js.gnistRecipe({
-  base: [
-    atoms_css_js.atoms({
-      display: "flex",
-      flexDirection: "column"
-    }),
-    {
-      overflow: "hidden"
-    }
-  ],
-  variants: {
-    size: {
-      fullscreen: {
-        padding: `0 ${dialogPadding("fullscreen")}`
-      },
-      "x-large": {
-        padding: `0 ${dialogPadding("x-large")}`
-      },
-      large: {
-        padding: `0 ${dialogPadding("large")}`
-      },
-      medium: {
-        padding: `0 ${dialogPadding("medium")}`
-      },
-      small: {
-        padding: `0 ${dialogPadding("small")}`
-      }
-    },
-    hasScroll: {
-      true: {},
-      false: {}
-    }
-  },
-  compoundVariants: [
-    {
-      variants: { size: "fullscreen", hasScroll: true },
-      style: {
-        paddingBottom: dialogPadding("fullscreen")
-      }
-    },
-    {
-      variants: { size: "x-large", hasScroll: true },
-      style: {
-        paddingBottom: dialogPadding("x-large")
-      }
-    },
-    {
-      variants: { size: "large", hasScroll: true },
-      style: {
-        paddingBottom: dialogPadding("large")
-      }
-    },
-    {
-      variants: { size: "medium", hasScroll: true },
-      style: {
-        paddingBottom: dialogPadding("medium")
-      }
-    },
-    {
-      variants: { size: "small", hasScroll: true },
-      style: {
-        paddingBottom: dialogPadding("small")
-      }
-    }
-  ]
+var contentContainerRecipe = (0, _vanilla_extract_recipes.recipe)({
+	base: [(0, _gnist_themes_atoms_css_js.atoms)({
+		display: "flex",
+		flexDirection: "column"
+	}), { overflow: "hidden" }],
+	variants: {
+		size: {
+			fullscreen: { padding: `0 ${dialogPadding("fullscreen")}` },
+			"x-large": { padding: `0 ${dialogPadding("x-large")}` },
+			large: { padding: `0 ${dialogPadding("large")}` },
+			medium: { padding: `0 ${dialogPadding("medium")}` },
+			small: { padding: `0 ${dialogPadding("small")}` }
+		},
+		hasScroll: {
+			true: {},
+			false: {}
+		}
+	},
+	compoundVariants: [
+		{
+			variants: {
+				size: "fullscreen",
+				hasScroll: true
+			},
+			style: { paddingBottom: dialogPadding("fullscreen") }
+		},
+		{
+			variants: {
+				size: "x-large",
+				hasScroll: true
+			},
+			style: { paddingBottom: dialogPadding("x-large") }
+		},
+		{
+			variants: {
+				size: "large",
+				hasScroll: true
+			},
+			style: { paddingBottom: dialogPadding("large") }
+		},
+		{
+			variants: {
+				size: "medium",
+				hasScroll: true
+			},
+			style: { paddingBottom: dialogPadding("medium") }
+		},
+		{
+			variants: {
+				size: "small",
+				hasScroll: true
+			},
+			style: { paddingBottom: dialogPadding("small") }
+		}
+	]
 });
-const actionRowPaddingBySize = (size) => layers_css_js.gnistStyle({
-  paddingTop: cssUtils.calc(dialogPadding(size)).add(tokens_css_js.tokens.spacing.xxs).toString(),
-  paddingRight: dialogPadding(size),
-  paddingLeft: dialogPadding(size)
+var actionRowPaddingBySize = (size) => (0, _vanilla_extract_css.style)({
+	paddingTop: (0, _vanilla_extract_css_utils.calc)(dialogPadding(size)).add(_gnist_themes_tokens_css_js.tokens.spacing.xxs).toString(),
+	paddingRight: dialogPadding(size),
+	paddingLeft: dialogPadding(size)
 });
-const actionRowRecipe = layers_css_js.gnistRecipe({
-  base: [
-    atoms_css_js.atoms({
-      display: "flex",
-      alignItems: "center",
-      gap: "xs"
-    }),
-    {
-      flexDirection: "row-reverse",
-      "@media": {
-        "screen and (max-width: 480px)": {
-          flexDirection: "column"
-        }
-      }
-    }
-  ],
-  variants: {
-    size: {
-      fullscreen: [
-        actionRowPaddingBySize("fullscreen"),
-        atoms_css_js.atoms({
-          justifyContent: "center"
-        })
-      ],
-      "x-large": [actionRowPaddingBySize("x-large")],
-      large: [actionRowPaddingBySize("large")],
-      medium: [actionRowPaddingBySize("medium")],
-      small: [
-        actionRowPaddingBySize("small"),
-        atoms_css_js.atoms({
-          gap: "m",
-          flexDirection: "column"
-        })
-      ]
-    },
-    hasScroll: {
-      true: {
-        borderTop: `solid ${tokens_css_js.tokens.stroke.small} ${tokens_css_js.tokens.color.outline}`
-      },
-      false: {}
-    }
-  }
+var actionRowRecipe = (0, _vanilla_extract_recipes.recipe)({
+	base: [(0, _gnist_themes_atoms_css_js.atoms)({
+		display: "flex",
+		alignItems: "center",
+		gap: "xs"
+	}), {
+		flexDirection: "row-reverse",
+		"@media": { "screen and (max-width: 480px)": { flexDirection: "column" } }
+	}],
+	variants: {
+		size: {
+			fullscreen: [actionRowPaddingBySize("fullscreen"), (0, _gnist_themes_atoms_css_js.atoms)({ justifyContent: "center" })],
+			"x-large": [actionRowPaddingBySize("x-large")],
+			large: [actionRowPaddingBySize("large")],
+			medium: [actionRowPaddingBySize("medium")],
+			small: [actionRowPaddingBySize("small"), (0, _gnist_themes_atoms_css_js.atoms)({
+				gap: "m",
+				flexDirection: "column"
+			})]
+		},
+		hasScroll: {
+			true: { borderTop: `solid ${_gnist_themes_tokens_css_js.tokens.stroke.small} ${_gnist_themes_tokens_css_js.tokens.color.outline}` },
+			false: {}
+		}
+	}
 });
-css.globalStyle(`${actionRowRecipe.classNames.variants.size.small} > button`, {
-  left: "unset",
-  width: "100%"
+(0, _vanilla_extract_css.globalStyle)(`${actionRowRecipe.classNames.variants.size.small} > button`, {
+	left: "unset",
+	width: "100%"
 });
+//#endregion
 exports.actionRowRecipe = actionRowRecipe;
 exports.backdropStyle = backdropStyle;
 exports.contentContainerRecipe = contentContainerRecipe;