@gnist/design-system 0.0.6

package/dist/components/surfaces/cards/package.json

@@ -0,0 +1,7 @@
+{
+    "type": "module",
+    "internal": true,
+    "main": "./index.cjs",
+    "module": "./index.js",
+    "types": "./index.d.ts"
+}

package/dist/components/surfaces/cards/shared.css.d.ts

@@ -0,0 +1,11 @@
+export declare const sharedCardStyles: import("@vanilla-extract/recipes").RuntimeFn<{
+    density: {
+        compact: string;
+        default: string;
+    };
+    isLoading: {
+        false: string[];
+        true: string;
+    };
+}>;
+//# sourceMappingURL=shared.css.d.ts.map

package/dist/components/surfaces/cards/shared.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared.css.d.ts","sourceRoot":"","sources":["../../../../src/components/surfaces/cards/shared.css.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,gBAAgB;;;;;;;;;EAiC3B,CAAC"}

package/dist/components/surfaces/index.cjs

@@ -0,0 +1,17 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const ActionCard = require("./cards/ActionCard.cjs");
+const CheckboxCard = require("./cards/CheckboxCard.cjs");
+const InfoCard = require("./cards/InfoCard.cjs");
+const LinkCard = require("./cards/LinkCard.cjs");
+const RadioCard = require("./cards/RadioCard.cjs");
+const Modal = require("./modal/Modal.cjs");
+const Accordion = require("./accordion/Accordion.cjs");
+exports.ActionCard = ActionCard.ActionCard;
+exports.CheckboxCard = CheckboxCard.CheckboxCard;
+exports.InfoCard = InfoCard.InfoCard;
+exports.LinkCard = LinkCard.LinkCard;
+exports.RadioCard = RadioCard.RadioCard;
+exports.Modal = Modal.Modal;
+exports.Accordion = Accordion.Accordion;

package/dist/components/surfaces/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./cards/index.js";
+export * from "./modal/index.js";
+export * from "./accordion/index.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/surfaces/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/surfaces/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC"}

package/dist/components/surfaces/index.js

@@ -0,0 +1,17 @@
+"use client";
+import { ActionCard } from "./cards/ActionCard.js";
+import { CheckboxCard } from "./cards/CheckboxCard.js";
+import { InfoCard } from "./cards/InfoCard.js";
+import { LinkCard } from "./cards/LinkCard.js";
+import { RadioCard } from "./cards/RadioCard.js";
+import { Modal } from "./modal/Modal.js";
+import { Accordion } from "./accordion/Accordion.js";
+export {
+  Accordion,
+  ActionCard,
+  CheckboxCard,
+  InfoCard,
+  LinkCard,
+  Modal,
+  RadioCard
+};

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

@@ -0,0 +1,78 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const PrimaryButton = require("../../actions/buttons/PrimaryButton.cjs");
+require("../../actions/buttons/SecondaryButton.cjs");
+require("../../actions/buttons/SuccessButton.cjs");
+require("../../actions/buttons/DangerButton.cjs");
+require("../../actions/buttons/GhostButton.cjs");
+const TextButton = require("../../actions/buttons/TextButton.cjs");
+const IconButton = require("../../actions/buttons/IconButton.cjs");
+require("../../actions/selectionControls/Checkbox.cjs");
+require("../../actions/selectionControls/RadioButton.cjs");
+require("../../actions/chips/ActionChip.cjs");
+require("../../actions/chips/FilterChip.cjs");
+require("../../actions/chips/TagChip.cjs");
+const index$1 = require("../../../foundation/typography/index.cjs");
+const index = require("../../../translations/index.cjs");
+const tokens_css_js = require("@gnist/themes/tokens.css.js");
+const base = require("@mui/base");
+const React = require("react");
+const modal_css = require("./modal.css.cjs");
+function _interopNamespaceCompat(e) {
+  if (e && typeof e === "object" && "default" in e) return e;
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceCompat(React);
+const hasScroll = (size, height) => {
+  switch (size) {
+    case "fullscreen":
+      return true;
+    case "large":
+      return height > 654;
+    case "medium":
+      return height > 487;
+    default:
+      return height > 271;
+  }
+};
+const Modal = React__namespace.forwardRef(function Modal2({ children, title, isOpen, handleClose, size = "medium", primaryAction, secondaryAction, action, backgroundColor = tokens_css_js.tokens.color.surface, ...rest }, ref) {
+  var _a, _b;
+  const text = index.useTranslation((t) => t.components.surfaces.modal);
+  const [contentHeight, setContentHeight] = React.useState(0);
+  const handleBackdropClick = (event) => {
+    if (event.target === event.currentTarget) {
+      handleClose();
+    }
+  };
+  const Backdrop = () => jsxRuntime.jsx("div", { role: "presentation", className: modal_css.backdropStyle, onClick: handleBackdropClick });
+  return jsxRuntime.jsx(base.Modal, { className: modal_css.modalStyle, open: isOpen, slots: { backdrop: Backdrop }, children: jsxRuntime.jsxs("div", { ref, className: modal_css.dialogRecipe({ size }), ...rest, style: { backgroundColor }, children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: modal_css.headerRowRecipe({
+    size,
+    hasScroll: hasScroll(size, contentHeight)
+  }), style: { backgroundColor }, children: [title ? jsxRuntime.jsx(index$1.Heading1Text, { children: title }) : jsxRuntime.jsx("span", { "aria-hidden": true }), jsxRuntime.jsx(IconButton.IconButton, { icon: "close", label: text.dismissLabel, onClick: handleClose, disabled: (_a = primaryAction == null ? void 0 : primaryAction.loading) == null ? void 0 : _a.isLoading, autoFocus: true })] }), jsxRuntime.jsx("div", { ref: (element) => {
+    if (element) {
+      setContentHeight(element.offsetHeight);
+    }
+  }, className: modal_css.contentContainerRecipe({
+    size,
+    hasScroll: hasScroll(size, contentHeight)
+  }), children })] }), primaryAction || secondaryAction || action ? jsxRuntime.jsxs("div", { className: modal_css.actionRowRecipe({
+    size,
+    hasScroll: hasScroll(size, contentHeight)
+  }), style: { backgroundColor }, children: [primaryAction ? jsxRuntime.jsx(PrimaryButton.PrimaryButton, { ...primaryAction, children: primaryAction.label }) : null, secondaryAction ? jsxRuntime.jsx(TextButton.TextButton, { ...secondaryAction, disabled: (_b = primaryAction == null ? void 0 : primaryAction.loading) == null ? void 0 : _b.isLoading, children: secondaryAction.label }) : null, action ? action : null] }) : null] }) });
+});
+exports.Modal = Modal;

package/dist/components/surfaces/modal/Modal.d.ts

@@ -0,0 +1,29 @@
+import { BoxedButtonProps } from "../../actions/buttons/ButtonBase.js";
+import * as React from "react";
+import { DialogSize } from "./modal.css.js";
+interface Action extends BoxedButtonProps<"button"> {
+    label: string;
+}
+export interface ModalProps {
+    /** Content within the modal dialog. */
+    children: React.ReactNode;
+    /** True if modal is open, false otherwise. */
+    isOpen: boolean;
+    /** Function for closing modal. */
+    handleClose: () => void;
+    /** Headline of the modal. */
+    title?: string;
+    /** Choose between small, medium, large and fullsize modal. On smaller screensizes max-width will be 95vw. */
+    size?: DialogSize;
+    /** Primary action offers standard button props, including label for button content. */
+    primaryAction?: Action;
+    /** Secondary action offers standard button props, except loading, and including label for button content.   */
+    secondaryAction?: Omit<Action, "loading">;
+    /** Any action component. */
+    action?: React.ReactNode;
+    /** Background color of the modal. */
+    backgroundColor?: string;
+}
+export declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=Modal.d.ts.map

package/dist/components/surfaces/modal/Modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../src/components/surfaces/modal/Modal.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,gBAAgB,EAAE,4CAAsE;AAKjG,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAKH,UAAU,EAGb,uBAAmD;AAEpD,UAAU,MAAO,SAAQ,gBAAgB,CAAC,QAAQ,CAAC;IAC/C,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,UAAU;IACvB,uCAAuC;IACvC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,8CAA8C;IAC9C,MAAM,EAAE,OAAO,CAAC;IAChB,kCAAkC;IAClC,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6GAA6G;IAC7G,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,uFAAuF;IACvF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,+GAA+G;IAC/G,eAAe,CAAC,EAAE,IAAI,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAC1C,4BAA4B;IAC5B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,qCAAqC;IACrC,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B;AAeD,eAAO,MAAM,KAAK,mFA0GhB,CAAC"}

package/dist/components/surfaces/modal/Modal.js

@@ -0,0 +1,61 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { PrimaryButton } from "../../actions/buttons/PrimaryButton.js";
+import "../../actions/buttons/SecondaryButton.js";
+import "../../actions/buttons/SuccessButton.js";
+import "../../actions/buttons/DangerButton.js";
+import "../../actions/buttons/GhostButton.js";
+import { TextButton } from "../../actions/buttons/TextButton.js";
+import { IconButton } from "../../actions/buttons/IconButton.js";
+import "../../actions/selectionControls/Checkbox.js";
+import "../../actions/selectionControls/RadioButton.js";
+import "../../actions/chips/ActionChip.js";
+import "../../actions/chips/FilterChip.js";
+import "../../actions/chips/TagChip.js";
+import { Heading1Text } from "../../../foundation/typography/index.js";
+import { useTranslation } from "../../../translations/index.js";
+import { tokens } from "@gnist/themes/tokens.css.js";
+import { Modal as Modal$1 } from "@mui/base";
+import * as React from "react";
+import { useState } from "react";
+import { modalStyle, dialogRecipe, headerRowRecipe, contentContainerRecipe, actionRowRecipe, backdropStyle } from "./modal.css.js";
+const hasScroll = (size, height) => {
+  switch (size) {
+    case "fullscreen":
+      return true;
+    case "large":
+      return height > 654;
+    case "medium":
+      return height > 487;
+    default:
+      return height > 271;
+  }
+};
+const Modal = React.forwardRef(function Modal2({ children, title, isOpen, handleClose, size = "medium", primaryAction, secondaryAction, action, backgroundColor = tokens.color.surface, ...rest }, ref) {
+  var _a, _b;
+  const text = useTranslation((t) => t.components.surfaces.modal);
+  const [contentHeight, setContentHeight] = useState(0);
+  const handleBackdropClick = (event) => {
+    if (event.target === event.currentTarget) {
+      handleClose();
+    }
+  };
+  const Backdrop = () => jsx("div", { role: "presentation", className: backdropStyle, onClick: handleBackdropClick });
+  return jsx(Modal$1, { className: modalStyle, open: isOpen, slots: { backdrop: Backdrop }, children: jsxs("div", { ref, className: dialogRecipe({ size }), ...rest, style: { backgroundColor }, children: [jsxs("div", { children: [jsxs("div", { className: headerRowRecipe({
+    size,
+    hasScroll: hasScroll(size, contentHeight)
+  }), style: { backgroundColor }, children: [title ? jsx(Heading1Text, { children: title }) : jsx("span", { "aria-hidden": true }), jsx(IconButton, { icon: "close", label: text.dismissLabel, onClick: handleClose, disabled: (_a = primaryAction == null ? void 0 : primaryAction.loading) == null ? void 0 : _a.isLoading, autoFocus: true })] }), jsx("div", { ref: (element) => {
+    if (element) {
+      setContentHeight(element.offsetHeight);
+    }
+  }, className: contentContainerRecipe({
+    size,
+    hasScroll: hasScroll(size, contentHeight)
+  }), children })] }), primaryAction || secondaryAction || action ? jsxs("div", { className: actionRowRecipe({
+    size,
+    hasScroll: hasScroll(size, contentHeight)
+  }), style: { backgroundColor }, children: [primaryAction ? jsx(PrimaryButton, { ...primaryAction, children: primaryAction.label }) : null, secondaryAction ? jsx(TextButton, { ...secondaryAction, disabled: (_b = primaryAction == null ? void 0 : primaryAction.loading) == null ? void 0 : _b.isLoading, children: secondaryAction.label }) : null, action ? action : null] }) : null] }) });
+});
+export {
+  Modal
+};

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

@@ -0,0 +1,5 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const Modal = require("./Modal.cjs");
+exports.Modal = Modal.Modal;

package/dist/components/surfaces/modal/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Modal.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/surfaces/modal/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/surfaces/modal/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}

package/dist/components/surfaces/modal/index.js

@@ -0,0 +1,5 @@
+"use client";
+import { Modal } from "./Modal.js";
+export {
+  Modal
+};

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

@@ -0,0 +1,241 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const atoms_css_js = require("@gnist/themes/atoms.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 recipes = require("@vanilla-extract/recipes");
+const backdropStyle = 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 = css.style({
+  position: "fixed",
+  zIndex: 1300,
+  right: 0,
+  bottom: 0,
+  top: 0,
+  left: 0,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  isolation: "isolate"
+});
+const dialogPadding = (size) => {
+  switch (size) {
+    case "fullscreen":
+    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;
+  }
+};
+const dialogRecipe = recipes.recipe({
+  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()
+      },
+      large: {
+        maxHeight: "848px",
+        width: "800px",
+        maxWidth: "95vw",
+        paddingBottom: cssUtils.calc("env(safe-area-inset-bottom)").add(dialogPadding("large")).toString()
+      },
+      medium: {
+        maxHeight: "656px",
+        width: "496px",
+        maxWidth: "95vw",
+        paddingBottom: cssUtils.calc("env(safe-area-inset-bottom)").add(dialogPadding("medium")).toString()
+      },
+      small: {
+        maxHeight: "480px",
+        width: "304px",
+        maxWidth: "95vw",
+        paddingBottom: cssUtils.calc("env(safe-area-inset-bottom)").add(dialogPadding("small")).toString()
+      }
+    }
+  },
+  defaultVariants: {
+    size: "medium"
+  }
+});
+const headerRowPaddingBySize = (size) => css.style({
+  paddingTop: dialogPadding(size),
+  paddingRight: dialogPadding(size),
+  paddingLeft: dialogPadding(size)
+});
+const headerRowRecipe = recipes.recipe({
+  base: [
+    {
+      position: "sticky",
+      top: 0,
+      zIndex: 20,
+      paddingBottom: tokens_css_js.tokens.spacing.xs,
+      display: "flex",
+      justifyContent: "space-between"
+    }
+  ],
+  variants: {
+    size: {
+      fullscreen: [headerRowPaddingBySize("fullscreen")],
+      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"
+      }
+    }
+  ]
+});
+const contentContainerRecipe = recipes.recipe({
+  base: [
+    atoms_css_js.atoms({
+      display: "flex",
+      flexDirection: "column"
+    }),
+    {
+      overflow: "hidden"
+    }
+  ],
+  variants: {
+    size: {
+      fullscreen: {
+        padding: `0 ${dialogPadding("fullscreen")}`
+      },
+      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: "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) => css.style({
+  paddingTop: cssUtils.calc(dialogPadding(size)).add(tokens_css_js.tokens.spacing.xxs).toString(),
+  paddingRight: dialogPadding(size),
+  paddingLeft: dialogPadding(size)
+});
+const actionRowRecipe = recipes.recipe({
+  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"
+        })
+      ],
+      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: {}
+    }
+  }
+});
+css.globalStyle(`${actionRowRecipe.classNames.variants.size.small} > button`, {
+  left: "unset",
+  width: "100%"
+});
+exports.actionRowRecipe = actionRowRecipe;
+exports.backdropStyle = backdropStyle;
+exports.contentContainerRecipe = contentContainerRecipe;
+exports.dialogRecipe = dialogRecipe;
+exports.headerRowRecipe = headerRowRecipe;
+exports.modalStyle = modalStyle;

package/dist/components/surfaces/modal/modal.css.d.ts

@@ -0,0 +1,79 @@
+export type DialogSize = "small" | "medium" | "large" | "fullscreen";
+export declare const backdropStyle: string;
+export declare const modalStyle: string;
+export declare const dialogRecipe: import("@vanilla-extract/recipes").RuntimeFn<{
+    size: {
+        fullscreen: {
+            height: "100dvh";
+            width: "100dvw";
+            paddingBottom: string;
+        };
+        large: {
+            maxHeight: "848px";
+            width: "800px";
+            maxWidth: "95vw";
+            paddingBottom: string;
+        };
+        medium: {
+            maxHeight: "656px";
+            width: "496px";
+            maxWidth: "95vw";
+            paddingBottom: string;
+        };
+        small: {
+            maxHeight: "480px";
+            width: "304px";
+            maxWidth: "95vw";
+            paddingBottom: string;
+        };
+    };
+}>;
+export declare const headerRowRecipe: import("@vanilla-extract/recipes").RuntimeFn<{
+    size: {
+        fullscreen: string[];
+        large: string[];
+        medium: string[];
+        small: string[];
+    };
+    hasScroll: {
+        true: {
+            borderBottom: `solid var(--${string}) var(--${string})` | `solid var(--${string}) var(--${string}, ${string})` | `solid var(--${string}) var(--${string}, ${number})` | `solid var(--${string}, ${string}) var(--${string})` | `solid var(--${string}, ${string}) var(--${string}, ${string})` | `solid var(--${string}, ${string}) var(--${string}, ${number})` | `solid var(--${string}, ${number}) var(--${string})` | `solid var(--${string}, ${number}) var(--${string}, ${string})` | `solid var(--${string}, ${number}) var(--${string}, ${number})`;
+        };
+        false: {};
+    };
+}>;
+export declare const contentContainerRecipe: import("@vanilla-extract/recipes").RuntimeFn<{
+    size: {
+        fullscreen: {
+            padding: `0 var(--${string})` | `0 var(--${string}, ${string})` | `0 var(--${string}, ${number})`;
+        };
+        large: {
+            padding: `0 var(--${string})` | `0 var(--${string}, ${string})` | `0 var(--${string}, ${number})`;
+        };
+        medium: {
+            padding: `0 var(--${string})` | `0 var(--${string}, ${string})` | `0 var(--${string}, ${number})`;
+        };
+        small: {
+            padding: `0 var(--${string})` | `0 var(--${string}, ${string})` | `0 var(--${string}, ${number})`;
+        };
+    };
+    hasScroll: {
+        true: {};
+        false: {};
+    };
+}>;
+export declare const actionRowRecipe: import("@vanilla-extract/recipes").RuntimeFn<{
+    size: {
+        fullscreen: string[];
+        large: string[];
+        medium: string[];
+        small: string[];
+    };
+    hasScroll: {
+        true: {
+            borderTop: `solid var(--${string}) var(--${string})` | `solid var(--${string}) var(--${string}, ${string})` | `solid var(--${string}) var(--${string}, ${number})` | `solid var(--${string}, ${string}) var(--${string})` | `solid var(--${string}, ${string}) var(--${string}, ${string})` | `solid var(--${string}, ${string}) var(--${string}, ${number})` | `solid var(--${string}, ${number}) var(--${string})` | `solid var(--${string}, ${number}) var(--${string}, ${string})` | `solid var(--${string}, ${number}) var(--${string}, ${number})`;
+        };
+        false: {};
+    };
+}>;
+//# sourceMappingURL=modal.css.d.ts.map

package/dist/components/surfaces/modal/modal.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.css.d.ts","sourceRoot":"","sources":["../../../../src/components/surfaces/modal/modal.css.ts"],"names":[],"mappings":"AAMA,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,YAAY,CAAC;AAErE,eAAO,MAAM,aAAa,QASxB,CAAC;AAEH,eAAO,MAAM,UAAU,QAWrB,CAAC;AAcH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;EAsDvB,CAAC;AASH,eAAO,MAAM,eAAe;;;;;;;;;;;;;EAiC1B,CAAC;AAEH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;EAwDjC,CAAC;AAWH,eAAO,MAAM,eAAe;;;;;;;;;;;;;EAyC1B,CAAC"}