@lunar-js/lunar 0.0.1

package/CHANGELOG.md

@@ -0,0 +1,12 @@
+# @lunar-js/lunar
+
+## 0.0.1 (2025-11-29)
+
+### Added
+
+- Button, Input, Label, Typography, Card, Dialog components -
+  [`7e55503`](https://github.com/lunar-js/lunar/commit/7e55503ee0ed95325ed6fd967abd2ca99c9851c9) Thanks astronaut
+  [@prests](https://github.com/prests)!
+- Initial design system and ThemeProvider -
+  [`7e55503`](https://github.com/lunar-js/lunar/commit/7e55503ee0ed95325ed6fd967abd2ca99c9851c9) Thanks astronaut
+  [@prests](https://github.com/prests)!

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Shayne Preston
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,41 @@
+# Lunar
+
+A modern React component library inspired by Radix UI and ShadCN, built with TypeScript and Vanilla Extract for
+CSS-in-JS styling.
+
+## Overview
+
+Lunar provides a comprehensive set of accessible, customizable React components with a powerful theming system. It
+combines the accessibility features of Radix UI with a clean design aesthetic and flexible styling approach.
+
+## Installation
+
+> **Note:** This package is ESM-only and requires a Node.js environment that supports ES modules.
+
+```bash
+# Using pnpm (recommended)
+pnpm add @lunar-js/lunar
+
+# Using npm
+npm install @lunar-js/lunar
+
+# Using yarn
+yarn add @lunar-js/lunar
+```
+
+## Quick Start
+
+Wrap your application with the `ThemeProvider` and provide a theme:
+
+```tsx
+import { ThemeProvider } from '@lunar-js/lunar';
+import { regalTheme } from '@lunar-js/lunar/styles.css';
+
+function App() {
+  return (
+    <ThemeProvider themeClassName={regalTheme}>
+      <YourAppContent />
+    </ThemeProvider>
+  );
+}
+```

package/dist/components/composite/Card/Card.d.ts

@@ -0,0 +1,64 @@
+import * as React from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/composite/Card/Card.d.ts
+
+/**
+ * Main card container component that provides a styled container with elevation and borders.
+ * Serves as the foundation for card-based layouts and content organization.
+ */
+declare const Card: ({
+  className,
+  ...props
+}: React.ComponentProps<"div">) => react_jsx_runtime0.JSX.Element;
+/**
+ * Header section of the card, typically containing the card title and description.
+ * Provides consistent spacing and layout for the card's top section.
+ */
+declare const CardHeader: ({
+  className,
+  ...props
+}: React.ComponentProps<"div">) => react_jsx_runtime0.JSX.Element;
+/**
+ * Title component for the card header with appropriate typography styling.
+ * Provides semantic structure and consistent text hierarchy.
+ */
+declare const CardTitle: ({
+  className,
+  ...props
+}: React.ComponentProps<"div">) => react_jsx_runtime0.JSX.Element;
+/**
+ * Description component for the card header with muted text styling.
+ * Used to provide additional context or subtitle information.
+ */
+declare const CardDescription: ({
+  className,
+  ...props
+}: React.ComponentProps<"div">) => react_jsx_runtime0.JSX.Element;
+/**
+ * Action area component for the card, typically containing buttons or interactive elements.
+ * Provides proper spacing and alignment for card actions.
+ */
+declare const CardAction: ({
+  className,
+  ...props
+}: React.ComponentProps<"div">) => react_jsx_runtime0.JSX.Element;
+/**
+ * Main content area of the card with appropriate padding and spacing.
+ * Houses the primary content between the header and footer sections.
+ */
+declare const CardContent: ({
+  className,
+  ...props
+}: React.ComponentProps<"div">) => react_jsx_runtime0.JSX.Element;
+/**
+ * Footer section of the card, typically used for actions, metadata, or additional information.
+ * Provides consistent spacing and styling for the card's bottom section.
+ */
+declare const CardFooter: ({
+  className,
+  ...props
+}: React.ComponentProps<"div">) => react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };
+//# sourceMappingURL=Card.d.ts.map

package/dist/components/composite/Card/Card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.d.ts","names":[],"sources":["../../../../src/components/composite/Card/Card.tsx"],"sourcesContent":[],"mappings":";;;;;;;;AAAoC;cAS9B,IAEL,EAAA,CAAA;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EAFsC,KAAA,CAAM,cAE5C,CAAA,KAAA,CAAA,EAAA,GAFiE,kBAAA,CAAA,GAAA,CAAA,OAEjE;;;;;AAAA,cAMK,UAEL,EAAA,CAAA;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EAF4C,KAAA,CAAM,cAElD,CAAA,KAAA,CAAA,EAAA,GAFuE,kBAAA,CAAA,GAAA,CAAA,OAEvE;;;;;cAMK,SANL,EAAA,CAAA;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EAM2C,KAAA,CAAM,cANjD,CAAA,KAAA,CAAA,EAAA,GAMsE,kBAAA,CAAA,GAAA,CAAA,OANtE;AAAA;;;;cAcK,eARiE,EAAA,CAAA;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EAQrB,KAAA,CAAM,cARe,CAAA,KAAA,CAAA,EAAA,GAQM,kBAAA,CAAA,GAAA,CAAA,OARN;;AAEtE;;;cAcK,UARkD,EAAA,CAAA;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EAQX,KAAA,CAAM,cARK,CAAA,KAAA,CAAA,EAAA,GAQgB,kBAAA,CAAA,GAAA,CAAA,OARhB;;;AAEvD;;cAcK,WARc,EAAA,CAAA;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EAQ0B,KAAA,CAAM,cARhC,CAAA,KAAA,CAAA,EAAA,GAQqD,kBAAA,CAAA,GAAA,CAAA,OARrD;;;;AAEnB;cAcK,UANL,EAAA,CAAA;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EAM4C,KAAA,CAAM,cANlD,CAAA,KAAA,CAAA,EAAA,GAMuE,kBAAA,CAAA,GAAA,CAAA,OANvE"}

package/dist/components/composite/Card/Card.js

@@ -0,0 +1,86 @@
+import { card, cardAction, cardContent, cardDescription, cardFooter, cardHeader, cardTitle } from "./card.css.js";
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/composite/Card/Card.tsx
+/**
+* Main card container component that provides a styled container with elevation and borders.
+* Serves as the foundation for card-based layouts and content organization.
+*/
+const Card = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card",
+		className: clsx(card, className),
+		...props
+	});
+};
+/**
+* Header section of the card, typically containing the card title and description.
+* Provides consistent spacing and layout for the card's top section.
+*/
+const CardHeader = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-header",
+		className: clsx(cardHeader, className),
+		...props
+	});
+};
+/**
+* Title component for the card header with appropriate typography styling.
+* Provides semantic structure and consistent text hierarchy.
+*/
+const CardTitle = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-title",
+		className: clsx(cardTitle, className),
+		...props
+	});
+};
+/**
+* Description component for the card header with muted text styling.
+* Used to provide additional context or subtitle information.
+*/
+const CardDescription = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-description",
+		className: clsx(cardDescription, className),
+		...props
+	});
+};
+/**
+* Action area component for the card, typically containing buttons or interactive elements.
+* Provides proper spacing and alignment for card actions.
+*/
+const CardAction = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-action",
+		className: clsx(cardAction, className),
+		...props
+	});
+};
+/**
+* Main content area of the card with appropriate padding and spacing.
+* Houses the primary content between the header and footer sections.
+*/
+const CardContent = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-content",
+		className: clsx(cardContent, className),
+		...props
+	});
+};
+/**
+* Footer section of the card, typically used for actions, metadata, or additional information.
+* Provides consistent spacing and styling for the card's bottom section.
+*/
+const CardFooter = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-footer",
+		className: clsx(cardFooter, className),
+		...props
+	});
+};
+
+//#endregion
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };
+//# sourceMappingURL=Card.js.map

package/dist/components/composite/Card/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","names":[],"sources":["../../../../src/components/composite/Card/Card.tsx"],"sourcesContent":["import type * as React from 'react';\nimport clsx from 'clsx';\n\nimport { card, cardHeader, cardTitle, cardDescription, cardAction, cardContent, cardFooter } from './card.css.js';\n\n/**\n * Main card container component that provides a styled container with elevation and borders.\n * Serves as the foundation for card-based layouts and content organization.\n */\nconst Card = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"card\" className={clsx(card, className)} {...props} />;\n};\n\n/**\n * Header section of the card, typically containing the card title and description.\n * Provides consistent spacing and layout for the card's top section.\n */\nconst CardHeader = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"card-header\" className={clsx(cardHeader, className)} {...props} />;\n};\n\n/**\n * Title component for the card header with appropriate typography styling.\n * Provides semantic structure and consistent text hierarchy.\n */\nconst CardTitle = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"card-title\" className={clsx(cardTitle, className)} {...props} />;\n};\n\n/**\n * Description component for the card header with muted text styling.\n * Used to provide additional context or subtitle information.\n */\nconst CardDescription = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"card-description\" className={clsx(cardDescription, className)} {...props} />;\n};\n\n/**\n * Action area component for the card, typically containing buttons or interactive elements.\n * Provides proper spacing and alignment for card actions.\n */\nconst CardAction = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"card-action\" className={clsx(cardAction, className)} {...props} />;\n};\n\n/**\n * Main content area of the card with appropriate padding and spacing.\n * Houses the primary content between the header and footer sections.\n */\nconst CardContent = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"card-content\" className={clsx(cardContent, className)} {...props} />;\n};\n\n/**\n * Footer section of the card, typically used for actions, metadata, or additional information.\n * Provides consistent spacing and styling for the card's bottom section.\n */\nconst CardFooter = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"card-footer\" className={clsx(cardFooter, className)} {...props} />;\n};\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };\n"],"mappings":";;;;;;;;;AASA,MAAM,QAAQ,EAAE,WAAW,GAAG,YAAyC;AACrE,QAAO,oBAAC;EAAI,aAAU;EAAO,WAAW,KAAK,MAAM,UAAU;EAAE,GAAI;GAAS;;;;;;AAO9E,MAAM,cAAc,EAAE,WAAW,GAAG,YAAyC;AAC3E,QAAO,oBAAC;EAAI,aAAU;EAAc,WAAW,KAAK,YAAY,UAAU;EAAE,GAAI;GAAS;;;;;;AAO3F,MAAM,aAAa,EAAE,WAAW,GAAG,YAAyC;AAC1E,QAAO,oBAAC;EAAI,aAAU;EAAa,WAAW,KAAK,WAAW,UAAU;EAAE,GAAI;GAAS;;;;;;AAOzF,MAAM,mBAAmB,EAAE,WAAW,GAAG,YAAyC;AAChF,QAAO,oBAAC;EAAI,aAAU;EAAmB,WAAW,KAAK,iBAAiB,UAAU;EAAE,GAAI;GAAS;;;;;;AAOrG,MAAM,cAAc,EAAE,WAAW,GAAG,YAAyC;AAC3E,QAAO,oBAAC;EAAI,aAAU;EAAc,WAAW,KAAK,YAAY,UAAU;EAAE,GAAI;GAAS;;;;;;AAO3F,MAAM,eAAe,EAAE,WAAW,GAAG,YAAyC;AAC5E,QAAO,oBAAC;EAAI,aAAU;EAAe,WAAW,KAAK,aAAa,UAAU;EAAE,GAAI;GAAS;;;;;;AAO7F,MAAM,cAAc,EAAE,WAAW,GAAG,YAAyC;AAC3E,QAAO,oBAAC;EAAI,aAAU;EAAc,WAAW,KAAK,YAAY,UAAU;EAAE,GAAI;GAAS"}

package/dist/components/composite/Card/card.css.js

@@ -0,0 +1,62 @@
+import { themeContract } from "../../../themes/tokens/tokens.css.js";
+import { style } from "@vanilla-extract/css";
+
+//#region src/components/composite/Card/card.css.ts
+const card = style({
+	backgroundColor: themeContract.colors.surface.bg.secondary,
+	color: themeContract.colors.text.primary,
+	display: "flex",
+	flexDirection: "column",
+	gap: themeContract.spacing[6],
+	borderRadius: themeContract.borderRadius["2xl"],
+	border: `${themeContract.borderWidth[1]} solid ${themeContract.colors.border.default}`,
+	paddingTop: themeContract.spacing[6],
+	paddingBottom: themeContract.spacing[6],
+	boxShadow: themeContract.boxShadow.lg
+});
+const cardHeader = style({
+	containerType: "inline-size",
+	containerName: "card-header",
+	display: "grid",
+	gridAutoRows: "min-content",
+	gridTemplateRows: "auto auto",
+	alignItems: "flex-start",
+	gap: themeContract.spacing[2],
+	paddingLeft: themeContract.spacing[6],
+	paddingRight: themeContract.spacing[6],
+	selectors: {
+		"&:has([data-slot=\"card-action\"])": { gridTemplateColumns: "1fr auto" },
+		"&.border-b": { paddingBottom: themeContract.spacing[6] }
+	}
+});
+const cardTitle = style({
+	lineHeight: "1",
+	fontWeight: themeContract.typography.body.md.bold.fontWeight
+});
+const cardDescription = style({
+	color: themeContract.colors.text.secondary,
+	fontSize: themeContract.typography.body.sm.medium.fontSize,
+	lineHeight: themeContract.typography.body.sm.medium.lineHeight
+});
+const cardAction = style({
+	gridColumn: "2",
+	gridRowStart: "1",
+	gridRowEnd: "span 2",
+	alignSelf: "flex-start",
+	justifySelf: "end"
+});
+const cardContent = style({
+	paddingLeft: themeContract.spacing[6],
+	paddingRight: themeContract.spacing[6]
+});
+const cardFooter = style({
+	display: "flex",
+	alignItems: "center",
+	paddingLeft: themeContract.spacing[6],
+	paddingRight: themeContract.spacing[6],
+	selectors: { "&.border-t": { paddingTop: themeContract.spacing[6] } }
+});
+
+//#endregion
+export { card, cardAction, cardContent, cardDescription, cardFooter, cardHeader, cardTitle };
+//# sourceMappingURL=card.css.js.map

package/dist/components/composite/Card/card.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.css.js","names":[],"sources":["../../../../src/components/composite/Card/card.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nimport { themeContract } from '../../../themes/tokens/tokens.css.js';\n\nconst card = style({\n  backgroundColor: themeContract.colors.surface.bg.secondary,\n  color: themeContract.colors.text.primary,\n  display: 'flex',\n  flexDirection: 'column',\n  gap: themeContract.spacing[6],\n  borderRadius: themeContract.borderRadius['2xl'],\n  border: `${themeContract.borderWidth[1]} solid ${themeContract.colors.border.default}`,\n  paddingTop: themeContract.spacing[6],\n  paddingBottom: themeContract.spacing[6],\n  boxShadow: themeContract.boxShadow.lg,\n});\n\nconst cardHeader = style({\n  containerType: 'inline-size',\n  containerName: 'card-header',\n  display: 'grid',\n  gridAutoRows: 'min-content',\n  gridTemplateRows: 'auto auto',\n  alignItems: 'flex-start',\n  gap: themeContract.spacing[2],\n  paddingLeft: themeContract.spacing[6],\n  paddingRight: themeContract.spacing[6],\n\n  // Conditional grid columns when card action is present\n  selectors: {\n    '&:has([data-slot=\"card-action\"])': {\n      gridTemplateColumns: '1fr auto',\n    },\n    // Conditional padding when border-b class is present\n    '&.border-b': {\n      paddingBottom: themeContract.spacing[6],\n    },\n  },\n});\n\nconst cardTitle = style({\n  lineHeight: '1',\n  fontWeight: themeContract.typography.body.md.bold.fontWeight,\n});\n\nconst cardDescription = style({\n  color: themeContract.colors.text.secondary,\n  fontSize: themeContract.typography.body.sm.medium.fontSize,\n  lineHeight: themeContract.typography.body.sm.medium.lineHeight,\n});\n\nconst cardAction = style({\n  gridColumn: '2',\n  gridRowStart: '1',\n  gridRowEnd: 'span 2',\n  alignSelf: 'flex-start',\n  justifySelf: 'end',\n});\n\nconst cardContent = style({\n  paddingLeft: themeContract.spacing[6],\n  paddingRight: themeContract.spacing[6],\n});\n\nconst cardFooter = style({\n  display: 'flex',\n  alignItems: 'center',\n  paddingLeft: themeContract.spacing[6],\n  paddingRight: themeContract.spacing[6],\n\n  // Conditional padding when border-t class is present\n  selectors: {\n    '&.border-t': {\n      paddingTop: themeContract.spacing[6],\n    },\n  },\n});\n\nexport { card, cardTitle, cardAction, cardFooter, cardHeader, cardContent, cardDescription };\n"],"mappings":";;;;AAIA,MAAM,OAAO,MAAM;CACjB,iBAAiB,cAAc,OAAO,QAAQ,GAAG;CACjD,OAAO,cAAc,OAAO,KAAK;CACjC,SAAS;CACT,eAAe;CACf,KAAK,cAAc,QAAQ;CAC3B,cAAc,cAAc,aAAa;CACzC,QAAQ,GAAG,cAAc,YAAY,GAAG,SAAS,cAAc,OAAO,OAAO;CAC7E,YAAY,cAAc,QAAQ;CAClC,eAAe,cAAc,QAAQ;CACrC,WAAW,cAAc,UAAU;CACpC,CAAC;AAEF,MAAM,aAAa,MAAM;CACvB,eAAe;CACf,eAAe;CACf,SAAS;CACT,cAAc;CACd,kBAAkB;CAClB,YAAY;CACZ,KAAK,cAAc,QAAQ;CAC3B,aAAa,cAAc,QAAQ;CACnC,cAAc,cAAc,QAAQ;CAGpC,WAAW;EACT,sCAAoC,EAClC,qBAAqB,YACtB;EAED,cAAc,EACZ,eAAe,cAAc,QAAQ,IACtC;EACF;CACF,CAAC;AAEF,MAAM,YAAY,MAAM;CACtB,YAAY;CACZ,YAAY,cAAc,WAAW,KAAK,GAAG,KAAK;CACnD,CAAC;AAEF,MAAM,kBAAkB,MAAM;CAC5B,OAAO,cAAc,OAAO,KAAK;CACjC,UAAU,cAAc,WAAW,KAAK,GAAG,OAAO;CAClD,YAAY,cAAc,WAAW,KAAK,GAAG,OAAO;CACrD,CAAC;AAEF,MAAM,aAAa,MAAM;CACvB,YAAY;CACZ,cAAc;CACd,YAAY;CACZ,WAAW;CACX,aAAa;CACd,CAAC;AAEF,MAAM,cAAc,MAAM;CACxB,aAAa,cAAc,QAAQ;CACnC,cAAc,cAAc,QAAQ;CACrC,CAAC;AAEF,MAAM,aAAa,MAAM;CACvB,SAAS;CACT,YAAY;CACZ,aAAa,cAAc,QAAQ;CACnC,cAAc,cAAc,QAAQ;CAGpC,WAAW,EACT,cAAc,EACZ,YAAY,cAAc,QAAQ,IACnC,EACF;CACF,CAAC"}

package/dist/components/composite/Dialog/Dialog.d.ts

@@ -0,0 +1,45 @@
+import { ButtonProps } from "../../primitives/Button/Button.js";
+import { ComponentProps, FC, ReactNode } from "react";
+import "dialog-closedby-polyfill";
+
+//#region src/components/composite/Dialog/Dialog.d.ts
+interface DialogProps extends ComponentProps<'dialog'> {
+  /**
+   * Optional function that renders the trigger element for the dialog.
+   * This allows custom trigger components while maintaining dialog functionality.
+   */
+  renderTrigger?: () => ReactNode;
+}
+/**
+ * Main Dialog component that renders a modal dialog element.
+ * Handles dialog state management and provides context for child components.
+ */
+declare const Dialog: FC<DialogProps>;
+/**
+ * Button component that triggers the dialog to open.
+ * Automatically handles aria attributes and dialog state management.
+ */
+declare const DialogTrigger: FC<ButtonProps>;
+/**
+ * Button component that closes the dialog when clicked.
+ * Handles dialog close functionality while preserving custom onClick handlers.
+ */
+declare const DialogClose: FC<ButtonProps>;
+/**
+ * Container component for the main content area of the dialog.
+ * Provides semantic structure and consistent styling for dialog content.
+ */
+declare const DialogContent: FC<ComponentProps<'div'>>;
+/**
+ * Header component for the dialog, typically containing the dialog title.
+ * Provides consistent spacing and styling for the dialog header area.
+ */
+declare const DialogHeader: FC<ComponentProps<'div'>>;
+/**
+ * Footer component for the dialog, typically containing action buttons.
+ * Provides consistent spacing and styling for the dialog footer area.
+ */
+declare const DialogFooter: FC<ComponentProps<'div'>>;
+//#endregion
+export { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader, DialogTrigger };
+//# sourceMappingURL=Dialog.d.ts.map

package/dist/components/composite/Dialog/Dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.d.ts","names":[],"sources":["../../../../src/components/composite/Dialog/Dialog.tsx"],"sourcesContent":[],"mappings":";;;;;UAoBU,WAAA,SAAoB;;AAH+C;;;eAG/C,CAAA,EAAA,GAAA,GAKN,SALM;;AAAc;;;;cAYtC,MAAU,EAAF,EAAE,CAAC,WAAD,CAAA;AAAA;;;;cAiCV,aAAiB,EAAF,EAAE,CAAC,WAAD,CAAA;AAAA;;;;cA6CjB,WAAe,EAAF,EAAE,CAAC,WAAD,CAAA;AAAA;;;;cAmBf,aAAiB,EAAF,EAAE,CAAC,cAAD,CAAA,KAAA,CAAA,CAAA;AAAA;;;;cAQjB,YAAgB,EAAF,EAAE,CAAC,cAAD,CAAA,KAAA,CAAA,CAAA;AAAA;;;;cAQhB,YAAgB,EAAF,EAAE,CAAC,cAAD,CAAA,KAAA,CAAA,CAAA"}

package/dist/components/composite/Dialog/Dialog.js

@@ -0,0 +1,117 @@
+import Button_default from "../../primitives/Button/Button.js";
+import DialogProvider_default from "./DialogProvider.js";
+import { useDialog } from "../../../hooks/dialog.js";
+import { useMergedRef } from "../../../hooks/refs.js";
+import { dialog, dialogContent, dialogFooter, dialogHeader } from "./dialog.css.js";
+import { useEffect, useEffectEvent, useRef, useState } from "react";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "dialog-closedby-polyfill";
+
+//#region src/components/composite/Dialog/Dialog.tsx
+/**
+* Main Dialog component that renders a modal dialog element.
+* Handles dialog state management and provides context for child components.
+*/
+const Dialog = ({ className, open = false, closedby = "any", renderTrigger, ref: forwardedRef, ...props }) => {
+	const internalDialogRef = useRef(null);
+	const mergedRef = useMergedRef(internalDialogRef, forwardedRef);
+	return /* @__PURE__ */ jsxs(DialogProvider_default, {
+		isOpen: open,
+		dialogRef: internalDialogRef,
+		children: [renderTrigger?.(), /* @__PURE__ */ jsx("dialog", {
+			ref: mergedRef,
+			open,
+			closedby,
+			"data-slot": "dialog",
+			className: clsx(dialog, className),
+			"aria-modal": "true",
+			...props
+		})]
+	});
+};
+/**
+* Button component that triggers the dialog to open.
+* Automatically handles aria attributes and dialog state management.
+*/
+const DialogTrigger = ({ onClick, ...props }) => {
+	const { dialogRef, isOpen } = useDialog();
+	const [isAriaExpanded, setIsAriaExpanded] = useState(isOpen);
+	const handleClick = (event) => {
+		onClick?.(event);
+		if (event.defaultPrevented || event.isPropagationStopped()) return;
+		setIsAriaExpanded(true);
+		dialogRef.current?.showModal();
+	};
+	const handleClose = useEffectEvent(() => {
+		setIsAriaExpanded(false);
+	});
+	useEffect(() => {
+		const dialog$1 = dialogRef.current;
+		if (!dialog$1) return;
+		dialog$1.addEventListener("close", handleClose);
+		return () => {
+			dialog$1.removeEventListener("close", handleClose);
+		};
+	}, [dialogRef]);
+	return /* @__PURE__ */ jsx(Button_default, {
+		"aria-expanded": isAriaExpanded,
+		"aria-haspopup": "dialog",
+		"data-slot": "dialog-trigger",
+		onClick: handleClick,
+		...props
+	});
+};
+/**
+* Button component that closes the dialog when clicked.
+* Handles dialog close functionality while preserving custom onClick handlers.
+*/
+const DialogClose = ({ onClick, ...props }) => {
+	const { dialogRef } = useDialog();
+	const handleClick = (event) => {
+		onClick?.(event);
+		if (event.defaultPrevented || event.isPropagationStopped()) return;
+		dialogRef.current?.close();
+	};
+	return /* @__PURE__ */ jsx(Button_default, {
+		onClick: handleClick,
+		...props
+	});
+};
+/**
+* Container component for the main content area of the dialog.
+* Provides semantic structure and consistent styling for dialog content.
+*/
+const DialogContent = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dialog-content",
+		className: clsx(dialogContent, className),
+		...props
+	});
+};
+/**
+* Header component for the dialog, typically containing the dialog title.
+* Provides consistent spacing and styling for the dialog header area.
+*/
+const DialogHeader = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dialog-header",
+		className: clsx(dialogHeader, className),
+		...props
+	});
+};
+/**
+* Footer component for the dialog, typically containing action buttons.
+* Provides consistent spacing and styling for the dialog footer area.
+*/
+const DialogFooter = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dialog-footer",
+		className: clsx(dialogFooter, className),
+		...props
+	});
+};
+
+//#endregion
+export { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader, DialogTrigger };
+//# sourceMappingURL=Dialog.js.map

package/dist/components/composite/Dialog/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.js","names":["Dialog: FC<DialogProps>","DialogProvider","DialogTrigger: FC<ButtonProps>","dialog","Button","DialogClose: FC<ButtonProps>","DialogContent: FC<ComponentProps<'div'>>","DialogHeader: FC<ComponentProps<'div'>>","DialogFooter: FC<ComponentProps<'div'>>"],"sources":["../../../../src/components/composite/Dialog/Dialog.tsx"],"sourcesContent":["import {\n  type ComponentProps,\n  type FC,\n  type MouseEvent,\n  type ReactNode,\n  useEffect,\n  useEffectEvent,\n  useRef,\n  useState,\n} from 'react';\nimport clsx from 'clsx';\n// TODO: Remove once there's full browser support for Dialog's closedby attribute.\nimport 'dialog-closedby-polyfill';\n\nimport DialogProvider from './DialogProvider.js';\nimport { useDialog } from '../../../hooks/dialog.js';\nimport { useMergedRef } from '../../../hooks/refs.js';\nimport Button, { type ButtonProps } from '../../primitives/Button/Button.js';\nimport { dialog, dialogContent, dialogFooter, dialogHeader } from './dialog.css.js';\n\ninterface DialogProps extends ComponentProps<'dialog'> {\n  /**\n   * Optional function that renders the trigger element for the dialog.\n   * This allows custom trigger components while maintaining dialog functionality.\n   */\n  renderTrigger?: () => ReactNode;\n}\n\n/**\n * Main Dialog component that renders a modal dialog element.\n * Handles dialog state management and provides context for child components.\n */\nconst Dialog: FC<DialogProps> = ({\n  className,\n  open = false,\n  closedby = 'any',\n  renderTrigger,\n  ref: forwardedRef,\n  ...props\n}) => {\n  const internalDialogRef = useRef<HTMLDialogElement>(null);\n  const mergedRef = useMergedRef(internalDialogRef, forwardedRef);\n\n  return (\n    <DialogProvider isOpen={open} dialogRef={internalDialogRef}>\n      {renderTrigger?.()}\n\n      <dialog\n        ref={mergedRef}\n        open={open}\n        // eslint-disable-next-line react/no-unknown-property\n        closedby={closedby}\n        data-slot=\"dialog\"\n        className={clsx(dialog, className)}\n        aria-modal=\"true\"\n        {...props}\n      />\n    </DialogProvider>\n  );\n};\n\n/**\n * Button component that triggers the dialog to open.\n * Automatically handles aria attributes and dialog state management.\n */\nconst DialogTrigger: FC<ButtonProps> = ({ onClick, ...props }) => {\n  const { dialogRef, isOpen } = useDialog();\n\n  const [isAriaExpanded, setIsAriaExpanded] = useState(isOpen);\n\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n    onClick?.(event);\n    if (event.defaultPrevented || event.isPropagationStopped()) {\n      return;\n    }\n\n    setIsAriaExpanded(true);\n    dialogRef.current?.showModal();\n  };\n\n  const handleClose = useEffectEvent(() => {\n    setIsAriaExpanded(false);\n  });\n\n  useEffect(() => {\n    const dialog = dialogRef.current;\n    if (!dialog) return;\n\n    dialog.addEventListener('close', handleClose);\n\n    return () => {\n      dialog.removeEventListener('close', handleClose);\n    };\n  }, [dialogRef]);\n\n  return (\n    <Button\n      aria-expanded={isAriaExpanded}\n      aria-haspopup=\"dialog\"\n      data-slot=\"dialog-trigger\"\n      onClick={handleClick}\n      {...props}\n    />\n  );\n};\n\n/**\n * Button component that closes the dialog when clicked.\n * Handles dialog close functionality while preserving custom onClick handlers.\n */\nconst DialogClose: FC<ButtonProps> = ({ onClick, ...props }) => {\n  const { dialogRef } = useDialog();\n\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n    onClick?.(event);\n    if (event.defaultPrevented || event.isPropagationStopped()) {\n      return;\n    }\n\n    dialogRef.current?.close();\n  };\n\n  return <Button onClick={handleClick} {...props} />;\n};\n\n/**\n * Container component for the main content area of the dialog.\n * Provides semantic structure and consistent styling for dialog content.\n */\nconst DialogContent: FC<ComponentProps<'div'>> = ({ className, ...props }) => {\n  return <div data-slot=\"dialog-content\" className={clsx(dialogContent, className)} {...props} />;\n};\n\n/**\n * Header component for the dialog, typically containing the dialog title.\n * Provides consistent spacing and styling for the dialog header area.\n */\nconst DialogHeader: FC<ComponentProps<'div'>> = ({ className, ...props }) => {\n  return <div data-slot=\"dialog-header\" className={clsx(dialogHeader, className)} {...props} />;\n};\n\n/**\n * Footer component for the dialog, typically containing action buttons.\n * Provides consistent spacing and styling for the dialog footer area.\n */\nconst DialogFooter: FC<ComponentProps<'div'>> = ({ className, ...props }) => {\n  return <div data-slot=\"dialog-footer\" className={clsx(dialogFooter, className)} {...props} />;\n};\n\nexport { Dialog, DialogTrigger, DialogClose, DialogContent, DialogHeader, DialogFooter };\n"],"mappings":";;;;;;;;;;;;;;;AAgCA,MAAMA,UAA2B,EAC/B,WACA,OAAO,OACP,WAAW,OACX,eACA,KAAK,cACL,GAAG,YACC;CACJ,MAAM,oBAAoB,OAA0B,KAAK;CACzD,MAAM,YAAY,aAAa,mBAAmB,aAAa;AAE/D,QACE,qBAACC;EAAe,QAAQ;EAAM,WAAW;aACtC,iBAAiB,EAElB,oBAAC;GACC,KAAK;GACC;GAEI;GACV,aAAU;GACV,WAAW,KAAK,QAAQ,UAAU;GAClC,cAAW;GACX,GAAI;IACJ;GACa;;;;;;AAQrB,MAAMC,iBAAkC,EAAE,SAAS,GAAG,YAAY;CAChE,MAAM,EAAE,WAAW,WAAW,WAAW;CAEzC,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,OAAO;CAE5D,MAAM,eAAe,UAAyC;AAC5D,YAAU,MAAM;AAChB,MAAI,MAAM,oBAAoB,MAAM,sBAAsB,CACxD;AAGF,oBAAkB,KAAK;AACvB,YAAU,SAAS,WAAW;;CAGhC,MAAM,cAAc,qBAAqB;AACvC,oBAAkB,MAAM;GACxB;AAEF,iBAAgB;EACd,MAAMC,WAAS,UAAU;AACzB,MAAI,CAACA,SAAQ;AAEb,WAAO,iBAAiB,SAAS,YAAY;AAE7C,eAAa;AACX,YAAO,oBAAoB,SAAS,YAAY;;IAEjD,CAAC,UAAU,CAAC;AAEf,QACE,oBAACC;EACC,iBAAe;EACf,iBAAc;EACd,aAAU;EACV,SAAS;EACT,GAAI;GACJ;;;;;;AAQN,MAAMC,eAAgC,EAAE,SAAS,GAAG,YAAY;CAC9D,MAAM,EAAE,cAAc,WAAW;CAEjC,MAAM,eAAe,UAAyC;AAC5D,YAAU,MAAM;AAChB,MAAI,MAAM,oBAAoB,MAAM,sBAAsB,CACxD;AAGF,YAAU,SAAS,OAAO;;AAG5B,QAAO,oBAACD;EAAO,SAAS;EAAa,GAAI;GAAS;;;;;;AAOpD,MAAME,iBAA4C,EAAE,WAAW,GAAG,YAAY;AAC5E,QAAO,oBAAC;EAAI,aAAU;EAAiB,WAAW,KAAK,eAAe,UAAU;EAAE,GAAI;GAAS;;;;;;AAOjG,MAAMC,gBAA2C,EAAE,WAAW,GAAG,YAAY;AAC3E,QAAO,oBAAC;EAAI,aAAU;EAAgB,WAAW,KAAK,cAAc,UAAU;EAAE,GAAI;GAAS;;;;;;AAO/F,MAAMC,gBAA2C,EAAE,WAAW,GAAG,YAAY;AAC3E,QAAO,oBAAC;EAAI,aAAU;EAAgB,WAAW,KAAK,cAAc,UAAU;EAAE,GAAI;GAAS"}

package/dist/components/composite/Dialog/DialogProvider.d.ts

@@ -0,0 +1,11 @@
+import { RefObject } from "react";
+import "react/jsx-runtime";
+
+//#region src/components/composite/Dialog/DialogProvider.d.ts
+interface DialogContextProps {
+  isOpen: boolean;
+  dialogRef: RefObject<HTMLDialogElement | null>;
+}
+//#endregion
+export { type DialogContextProps };
+//# sourceMappingURL=DialogProvider.d.ts.map

package/dist/components/composite/Dialog/DialogProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogProvider.d.ts","names":[],"sources":["../../../../src/components/composite/Dialog/DialogProvider.tsx"],"sourcesContent":[],"mappings":";;;;UAEU,kBAAA;;aAEG,UAAU;AAJuD"}

package/dist/components/composite/Dialog/DialogProvider.js

@@ -0,0 +1,19 @@
+import { createContext } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/composite/Dialog/DialogProvider.tsx
+const DialogContext = createContext(null);
+const DialogProvider = ({ children, isOpen, dialogRef }) => {
+	return /* @__PURE__ */ jsx(DialogContext.Provider, {
+		value: {
+			isOpen,
+			dialogRef
+		},
+		children
+	});
+};
+var DialogProvider_default = DialogProvider;
+
+//#endregion
+export { DialogContext, DialogProvider_default as default };
+//# sourceMappingURL=DialogProvider.js.map

package/dist/components/composite/Dialog/DialogProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogProvider.js","names":[],"sources":["../../../../src/components/composite/Dialog/DialogProvider.tsx"],"sourcesContent":["import { createContext, type PropsWithChildren, type RefObject } from 'react';\n\ninterface DialogContextProps {\n  isOpen: boolean;\n  dialogRef: RefObject<HTMLDialogElement | null>;\n}\n\nconst DialogContext = createContext<DialogContextProps | null>(null);\n\ninterface DialogProviderProps extends PropsWithChildren {\n  isOpen: boolean;\n  dialogRef: RefObject<HTMLDialogElement | null>;\n}\n\nconst DialogProvider = ({ children, isOpen, dialogRef }: DialogProviderProps) => {\n  return <DialogContext.Provider value={{ isOpen, dialogRef }}>{children}</DialogContext.Provider>;\n};\n\nexport type { DialogContextProps };\nexport default DialogProvider;\nexport { DialogContext };\n"],"mappings":";;;;AAOA,MAAM,gBAAgB,cAAyC,KAAK;AAOpE,MAAM,kBAAkB,EAAE,UAAU,QAAQ,gBAAqC;AAC/E,QAAO,oBAAC,cAAc;EAAS,OAAO;GAAE;GAAQ;GAAW;EAAG;GAAkC;;AAIlG,6BAAe"}

package/dist/components/composite/Dialog/dialog.css.js

@@ -0,0 +1,104 @@
+import { BREAKPOINT__MD, BREAKPOINT__SM } from "../../../constants/theming.js";
+import { themeContract } from "../../../themes/tokens/tokens.css.js";
+import { withBreakpoint, withSafeTransition } from "../../../themes/styles/utilities.js";
+import { keyframes, style } from "@vanilla-extract/css";
+
+//#region src/components/composite/Dialog/dialog.css.ts
+const fadeIn = keyframes({
+	from: {
+		opacity: "0",
+		transform: "scale(0.95) translateY(-10px)"
+	},
+	to: {
+		opacity: "1",
+		transform: "scale(1) translateY(0)"
+	}
+});
+const fadeOut = keyframes({
+	from: {
+		display: "block",
+		opacity: "1",
+		transform: "scale(1) translateY(0)"
+	},
+	to: {
+		display: "none",
+		opacity: "0",
+		transform: "scale(0.95) translateY(-10px)"
+	}
+});
+const fadeInBackdrop = keyframes({
+	from: { opacity: "0" },
+	to: { opacity: "1" }
+});
+const fadeOutBackdrop = keyframes({
+	from: { opacity: "1" },
+	to: { opacity: "0" }
+});
+const dialog = style([
+	{
+		boxSizing: "border-box",
+		padding: themeContract.spacing[4],
+		border: "none",
+		backgroundColor: themeContract.colors.surface.bg.primary,
+		color: themeContract.colors.text.primary,
+		borderRadius: themeContract.borderRadius.lg,
+		boxShadow: themeContract.boxShadow.xl,
+		width: "100vw",
+		height: "100vh",
+		maxWidth: "100vw",
+		maxHeight: "100vh",
+		"::backdrop": { filter: "brightness(0%)" }
+	},
+	withSafeTransition({
+		transition: "display 150ms allow-discrete, overlay 150ms allow-discrete",
+		animation: `${fadeOut} 150ms cubic-bezier(0.4, 0, 0.2, 1)`,
+		selectors: {
+			"&[open]": { animation: `${fadeIn} 250ms cubic-bezier(0.34, 1.56, 0.64, 1)` },
+			"&[open]::backdrop": { animation: `${fadeInBackdrop} 250ms` }
+		},
+		"::backdrop": {
+			transition: "display 150ms allow-discrete, overlay 150ms allow-discrete",
+			animation: `${fadeOutBackdrop} 150ms`
+		}
+	}),
+	withBreakpoint(BREAKPOINT__MD, {
+		width: "fit-content",
+		height: "fit-content",
+		maxWidth: "32rem",
+		maxHeight: "unset"
+	})
+]);
+const dialogContent = style([{
+	display: "flex",
+	flexDirection: "column",
+	gap: themeContract.spacing[4],
+	minHeight: "100%",
+	padding: 0,
+	overflowY: "auto",
+	WebkitOverflowScrolling: "touch"
+}, withBreakpoint(BREAKPOINT__SM, {
+	minHeight: "auto",
+	maxHeight: "calc(100vh - 64px)",
+	padding: themeContract.spacing[6]
+})]);
+const dialogHeader = style([{
+	display: "flex",
+	flexDirection: "column",
+	gap: themeContract.spacing[2],
+	paddingBottom: themeContract.spacing[2],
+	borderBottom: `${themeContract.borderWidth[1]} solid ${themeContract.colors.border.subtle}`
+}, withBreakpoint(BREAKPOINT__SM, { paddingBottom: themeContract.spacing[4] })]);
+const dialogFooter = style([{
+	display: "flex",
+	flexDirection: "column-reverse",
+	gap: themeContract.spacing[2],
+	paddingTop: themeContract.spacing[4],
+	marginTop: "auto"
+}, withBreakpoint(BREAKPOINT__SM, {
+	flexDirection: "row",
+	justifyContent: "flex-end"
+})]);
+
+//#endregion
+export { dialog, dialogContent, dialogFooter, dialogHeader };
+//# sourceMappingURL=dialog.css.js.map

package/dist/components/composite/Dialog/dialog.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.css.js","names":[],"sources":["../../../../src/components/composite/Dialog/dialog.css.ts"],"sourcesContent":["import { style, keyframes } from '@vanilla-extract/css';\n\nimport { themeContract } from '../../../themes/tokens/tokens.css.js';\nimport { withBreakpoint, withSafeTransition } from '../../../themes/styles/utilities.js';\nimport { BREAKPOINT__SM, BREAKPOINT__MD } from '../../../constants/theming.js';\n\nconst fadeIn = keyframes({\n  from: {\n    opacity: '0',\n    transform: 'scale(0.95) translateY(-10px)',\n  },\n  to: {\n    opacity: '1',\n    transform: 'scale(1) translateY(0)',\n  },\n});\n\nconst fadeOut = keyframes({\n  from: {\n    display: 'block',\n    opacity: '1',\n    transform: 'scale(1) translateY(0)',\n  },\n  to: {\n    display: 'none',\n    opacity: '0',\n    transform: 'scale(0.95) translateY(-10px)',\n  },\n});\n\nconst fadeInBackdrop = keyframes({\n  from: {\n    opacity: '0',\n  },\n  to: {\n    opacity: '1',\n  },\n});\n\nconst fadeOutBackdrop = keyframes({\n  from: {\n    opacity: '1',\n  },\n  to: {\n    opacity: '0',\n  },\n});\n\nconst dialog = style([\n  {\n    boxSizing: 'border-box',\n    padding: themeContract.spacing[4],\n    border: 'none',\n    backgroundColor: themeContract.colors.surface.bg.primary,\n    color: themeContract.colors.text.primary,\n    borderRadius: themeContract.borderRadius.lg,\n    boxShadow: themeContract.boxShadow.xl,\n    width: '100vw',\n    height: '100vh',\n    maxWidth: '100vw',\n    maxHeight: '100vh',\n\n    '::backdrop': {\n      filter: 'brightness(0%)',\n    },\n  },\n  withSafeTransition({\n    transition: 'display 150ms allow-discrete, overlay 150ms allow-discrete',\n    animation: `${fadeOut} 150ms cubic-bezier(0.4, 0, 0.2, 1)`,\n\n    selectors: {\n      '&[open]': {\n        animation: `${fadeIn} 250ms cubic-bezier(0.34, 1.56, 0.64, 1)`,\n      },\n      '&[open]::backdrop': {\n        animation: `${fadeInBackdrop} 250ms`,\n      },\n    },\n\n    '::backdrop': {\n      transition: 'display 150ms allow-discrete, overlay 150ms allow-discrete',\n      animation: `${fadeOutBackdrop} 150ms`,\n    },\n  }),\n  withBreakpoint(BREAKPOINT__MD, {\n    width: 'fit-content',\n    height: 'fit-content',\n    maxWidth: '32rem',\n    maxHeight: 'unset',\n  }),\n]);\n\nconst dialogContent = style([\n  {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: themeContract.spacing[4],\n    minHeight: '100%',\n    padding: 0,\n    overflowY: 'auto',\n    WebkitOverflowScrolling: 'touch',\n  },\n  withBreakpoint(BREAKPOINT__SM, {\n    minHeight: 'auto',\n    maxHeight: 'calc(100vh - 64px)',\n    padding: themeContract.spacing[6],\n  }),\n]);\n\nconst dialogHeader = style([\n  {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: themeContract.spacing[2],\n    paddingBottom: themeContract.spacing[2],\n    borderBottom: `${themeContract.borderWidth[1]} solid ${themeContract.colors.border.subtle}`,\n  },\n  withBreakpoint(BREAKPOINT__SM, {\n    paddingBottom: themeContract.spacing[4],\n  }),\n]);\n\nconst dialogFooter = style([\n  {\n    display: 'flex',\n    flexDirection: 'column-reverse',\n    gap: themeContract.spacing[2],\n    paddingTop: themeContract.spacing[4],\n    marginTop: 'auto',\n  },\n  withBreakpoint(BREAKPOINT__SM, {\n    flexDirection: 'row',\n    justifyContent: 'flex-end',\n  }),\n]);\n\nexport { dialog, dialogContent, dialogHeader, dialogFooter };\n"],"mappings":";;;;;;AAMA,MAAM,SAAS,UAAU;CACvB,MAAM;EACJ,SAAS;EACT,WAAW;EACZ;CACD,IAAI;EACF,SAAS;EACT,WAAW;EACZ;CACF,CAAC;AAEF,MAAM,UAAU,UAAU;CACxB,MAAM;EACJ,SAAS;EACT,SAAS;EACT,WAAW;EACZ;CACD,IAAI;EACF,SAAS;EACT,SAAS;EACT,WAAW;EACZ;CACF,CAAC;AAEF,MAAM,iBAAiB,UAAU;CAC/B,MAAM,EACJ,SAAS,KACV;CACD,IAAI,EACF,SAAS,KACV;CACF,CAAC;AAEF,MAAM,kBAAkB,UAAU;CAChC,MAAM,EACJ,SAAS,KACV;CACD,IAAI,EACF,SAAS,KACV;CACF,CAAC;AAEF,MAAM,SAAS,MAAM;CACnB;EACE,WAAW;EACX,SAAS,cAAc,QAAQ;EAC/B,QAAQ;EACR,iBAAiB,cAAc,OAAO,QAAQ,GAAG;EACjD,OAAO,cAAc,OAAO,KAAK;EACjC,cAAc,cAAc,aAAa;EACzC,WAAW,cAAc,UAAU;EACnC,OAAO;EACP,QAAQ;EACR,UAAU;EACV,WAAW;EAEX,cAAc,EACZ,QAAQ,kBACT;EACF;CACD,mBAAmB;EACjB,YAAY;EACZ,WAAW,GAAG,QAAQ;EAEtB,WAAW;GACT,WAAW,EACT,WAAW,GAAG,OAAO,2CACtB;GACD,qBAAqB,EACnB,WAAW,GAAG,eAAe,SAC9B;GACF;EAED,cAAc;GACZ,YAAY;GACZ,WAAW,GAAG,gBAAgB;GAC/B;EACF,CAAC;CACF,eAAe,gBAAgB;EAC7B,OAAO;EACP,QAAQ;EACR,UAAU;EACV,WAAW;EACZ,CAAC;CACH,CAAC;AAEF,MAAM,gBAAgB,MAAM,CAC1B;CACE,SAAS;CACT,eAAe;CACf,KAAK,cAAc,QAAQ;CAC3B,WAAW;CACX,SAAS;CACT,WAAW;CACX,yBAAyB;CAC1B,EACD,eAAe,gBAAgB;CAC7B,WAAW;CACX,WAAW;CACX,SAAS,cAAc,QAAQ;CAChC,CAAC,CACH,CAAC;AAEF,MAAM,eAAe,MAAM,CACzB;CACE,SAAS;CACT,eAAe;CACf,KAAK,cAAc,QAAQ;CAC3B,eAAe,cAAc,QAAQ;CACrC,cAAc,GAAG,cAAc,YAAY,GAAG,SAAS,cAAc,OAAO,OAAO;CACpF,EACD,eAAe,gBAAgB,EAC7B,eAAe,cAAc,QAAQ,IACtC,CAAC,CACH,CAAC;AAEF,MAAM,eAAe,MAAM,CACzB;CACE,SAAS;CACT,eAAe;CACf,KAAK,cAAc,QAAQ;CAC3B,YAAY,cAAc,QAAQ;CAClC,WAAW;CACZ,EACD,eAAe,gBAAgB;CAC7B,eAAe;CACf,gBAAgB;CACjB,CAAC,CACH,CAAC"}