@guardian/stand 0.0.51 → 0.0.53

package/dist/Modal.cjs

@@ -0,0 +1,7 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_modal = require("./styleD/build/typescript/component/modal.cjs");
+const require_Modal = require("./components/Modal/Modal.cjs");
+exports.Dialog = require_Modal.Dialog;
+exports.DialogTrigger = require_Modal.DialogTrigger;
+exports.Modal = require_Modal.Modal;
+exports.componentModal = require_modal.componentModal;

package/dist/Modal.d.cts

@@ -0,0 +1,5 @@
+import { ComponentModal, componentModal } from "./styleD/build/typescript/component/modal.cjs";
+import { PartialModalTheme } from "./components/Modal/styles.cjs";
+import { DialogButtonsProps, DialogContentProps, DialogHeaderProps, DialogProps, DialogTriggerProps, ModalProps } from "./components/Modal/types.cjs";
+import { Dialog, DialogTrigger, Modal } from "./components/Modal/Modal.cjs";
+export { type ComponentModal, Dialog, type DialogButtonsProps, type DialogContentProps, type DialogHeaderProps, type DialogProps, DialogTrigger, type DialogTriggerProps, Modal, type ModalProps, type PartialModalTheme as ModalTheme, componentModal };

package/dist/Modal.d.ts

@@ -0,0 +1,5 @@
+import { ComponentModal, componentModal } from "./styleD/build/typescript/component/modal.js";
+import { PartialModalTheme } from "./components/Modal/styles.js";
+import { DialogButtonsProps, DialogContentProps, DialogHeaderProps, DialogProps, DialogTriggerProps, ModalProps } from "./components/Modal/types.js";
+import { Dialog, DialogTrigger, Modal } from "./components/Modal/Modal.js";
+export { type ComponentModal, Dialog, type DialogButtonsProps, type DialogContentProps, type DialogHeaderProps, type DialogProps, DialogTrigger, type DialogTriggerProps, Modal, type ModalProps, type PartialModalTheme as ModalTheme, componentModal };

package/dist/Modal.js

@@ -0,0 +1,3 @@
+import { componentModal } from "./styleD/build/typescript/component/modal.js";
+import { Dialog, DialogTrigger, Modal } from "./components/Modal/Modal.js";
+export { Dialog, DialogTrigger, Modal, componentModal };

package/dist/components/Form/Form.cjs

@@ -27,6 +27,7 @@ function FormInputContainer({ as: Component, size = "md", fluid = false, label,
 			children,
 			error && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.FieldError, { children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_InlineMessage.InlineMessage, {
 				level: "error",
+				slot: "errorMessage",
 				children: error
 			}) })
 		]

package/dist/components/Form/Form.js

@@ -27,6 +27,7 @@ function FormInputContainer({ as: Component, size = "md", fluid = false, label,
 			children,
 			error && /* @__PURE__ */ jsx(FieldError, { children: /* @__PURE__ */ jsx(InlineMessage, {
 				level: "error",
+				slot: "errorMessage",
 				children: error
 			}) })
 		]

package/dist/components/InlineMessage/InlineMessage.cjs

@@ -5,7 +5,7 @@ const require_styles = require("./styles.cjs");
 let react = require("react");
 let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
 //#region src/components/InlineMessage/InlineMessage.tsx
-function InlineMessage({ children, level, hideIcon = false, icon, theme = {}, cssOverrides, className, ...props }) {
+function InlineMessage({ children, level, hideIcon = false, icon, theme = {}, cssOverrides, className, slot, ...props }) {
 	const mergedTheme = require_mergeDeep.mergeDeep(require_styles.defaultInlineMessageTheme, theme);
 	const determinedIcon = (0, react.useMemo)(() => {
 		if (icon) return icon;
@@ -27,6 +27,7 @@ function InlineMessage({ children, level, hideIcon = false, icon, theme = {}, cs
 		}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_Typography.Typography, {
 			variant: "helpTextFormMd",
 			theme: { color: mergedTheme[level].color },
+			slot,
 			children
 		})]
 	});

package/dist/components/InlineMessage/InlineMessage.d.cts

@@ -9,6 +9,7 @@ declare function InlineMessage({
   theme,
   cssOverrides,
   className,
+  slot,
   ...props
 }: InlineMessageProps): import("@emotion/react/jsx-runtime").JSX.Element;
 //#endregion

package/dist/components/InlineMessage/InlineMessage.d.ts

@@ -9,6 +9,7 @@ declare function InlineMessage({
   theme,
   cssOverrides,
   className,
+  slot,
   ...props
 }: InlineMessageProps): import("@emotion/react/jsx-runtime").JSX.Element;
 //#endregion

package/dist/components/InlineMessage/InlineMessage.js

@@ -5,7 +5,7 @@ import { defaultInlineMessageTheme, inlineMessageIconStyles, inlineMessageStyles
 import { useMemo } from "react";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 //#region src/components/InlineMessage/InlineMessage.tsx
-function InlineMessage({ children, level, hideIcon = false, icon, theme = {}, cssOverrides, className, ...props }) {
+function InlineMessage({ children, level, hideIcon = false, icon, theme = {}, cssOverrides, className, slot, ...props }) {
 	const mergedTheme = mergeDeep(defaultInlineMessageTheme, theme);
 	const determinedIcon = useMemo(() => {
 		if (icon) return icon;
@@ -27,6 +27,7 @@ function InlineMessage({ children, level, hideIcon = false, icon, theme = {}, cs
 		}), /* @__PURE__ */ jsx(Typography, {
 			variant: "helpTextFormMd",
 			theme: { color: mergedTheme[level].color },
+			slot,
 			children
 		})]
 	});

package/dist/components/InlineMessage/types.d.cts

@@ -1,5 +1,6 @@
 import { DefaultPropsWithChildren } from "../../util/types.cjs";
 import { IconProps } from "../Icon/types.cjs";
+import { TypographyProps } from "../Typography/types.cjs";
 import { InlineMessageTheme } from "./styles.cjs";
 
 //#region src/components/InlineMessage/types.d.ts
@@ -20,6 +21,10 @@ interface InlineMessageProps extends DefaultPropsWithChildren<InlineMessageTheme
    * Passed to the Icon component, so can be either a string (for material symbols) or an SVG element.
    */
   icon?: IconProps['symbol'] | Exclude<IconProps['children'], string>;
+  /**
+   * Optional prop to specify the slot for the Typography component, allowing for better accessibility and semantic structure.
+   */
+  slot?: TypographyProps['slot'];
 }
 //#endregion
 export { InlineMessageProps };

package/dist/components/InlineMessage/types.d.ts

@@ -1,5 +1,6 @@
 import { DefaultPropsWithChildren } from "../../util/types.js";
 import { IconProps } from "../Icon/types.js";
+import { TypographyProps } from "../Typography/types.js";
 import { InlineMessageTheme } from "./styles.js";
 
 //#region src/components/InlineMessage/types.d.ts
@@ -20,6 +21,10 @@ interface InlineMessageProps extends DefaultPropsWithChildren<InlineMessageTheme
    * Passed to the Icon component, so can be either a string (for material symbols) or an SVG element.
    */
   icon?: IconProps['symbol'] | Exclude<IconProps['children'], string>;
+  /**
+   * Optional prop to specify the slot for the Typography component, allowing for better accessibility and semantic structure.
+   */
+  slot?: TypographyProps['slot'];
 }
 //#endregion
 export { InlineMessageProps };

package/dist/components/Modal/Modal.cjs

@@ -0,0 +1,97 @@
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_mergeDeep = require("../../util/mergeDeep.cjs");
+const require_IconButton = require("../IconButton/IconButton.cjs");
+const require_AvatarButton = require("../AvatarButton/AvatarButton.cjs");
+const require_Button = require("../Button/Button.cjs");
+const require_Typography = require("../Typography/Typography.cjs");
+const require_styles = require("./styles.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
+let react_aria_components = require("react-aria-components");
+//#region src/components/Modal/Modal.tsx
+const Modal = ({ theme = {}, children, cssOverrides, ...props }) => {
+	const mergedTheme = require_mergeDeep.mergeDeep(require_styles.defaultModalTheme, theme);
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.ModalOverlay, {
+		css: require_styles.modalOverlayStyles(mergedTheme),
+		...props,
+		children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.Modal, {
+			css: [require_styles.modalStyles(mergedTheme), cssOverrides],
+			children
+		})
+	});
+};
+const DialogTrigger = (props) => {
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.DialogTrigger, { ...props });
+};
+const DialogRoot = ({ children, theme = {}, cssOverrides, ...props }) => {
+	const mergedTheme = require_mergeDeep.mergeDeep(require_styles.defaultDialogTheme.container, theme);
+	const filteredChildren = react.default.Children.toArray(typeof children === "function" ? void 0 : children).map((child) => {
+		if (!react.default.isValidElement(child)) return false;
+		switch (child.type) {
+			case Dialog.Header:
+			case Dialog.Buttons:
+			case Dialog.Content:
+			case Dialog.Dismiss: return child;
+			default: return false;
+		}
+	}).filter((child) => child !== false);
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.Dialog, {
+		css: [require_styles.dialogStyles(mergedTheme), cssOverrides],
+		...props,
+		children: filteredChildren
+	});
+};
+const DialogHeader = ({ variant = "headingLg", element = "h2", theme = {}, cssOverrides, ...props }) => {
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_Typography.Typography, {
+		slot: "title",
+		variant,
+		element,
+		cssOverrides: [require_styles.dialogHeadingStyles(require_mergeDeep.mergeDeep(require_styles.defaultDialogTheme.title, theme)), ...cssOverrides == null ? [] : Array.isArray(cssOverrides) ? cssOverrides : [cssOverrides]],
+		...props
+	});
+};
+const DialogButtons = ({ children, theme = {}, cssOverrides, ...props }) => {
+	const mergedTheme = require_mergeDeep.mergeDeep(require_styles.defaultDialogTheme.ctas, theme);
+	const buttons = react.default.Children.toArray(children).map((child) => {
+		if (!react.default.isValidElement(child)) return false;
+		switch (child.type) {
+			case require_Button.Button:
+			case require_AvatarButton.AvatarButton:
+			case require_IconButton.IconButton: return child;
+			default: return false;
+		}
+	}).filter((child) => child !== false);
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
+		css: [require_styles.dialogButtonsStyles(mergedTheme), cssOverrides],
+		...props,
+		children: buttons
+	});
+};
+const DialogContent = ({ children, theme = {}, cssOverrides, ...props }) => {
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
+		css: [require_styles.dialogContentStyles(require_mergeDeep.mergeDeep(require_styles.defaultDialogTheme.children, theme)), cssOverrides],
+		...props,
+		children
+	});
+};
+const DialogDismiss = ({ theme = {}, size = "lg", symbol = "close", variant = "tertiary", ...props }) => {
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_IconButton.IconButton, {
+		size,
+		symbol,
+		variant,
+		cssOverrides: require_styles.dialogDismissStyles(require_mergeDeep.mergeDeep(require_styles.defaultDialogTheme.dismiss, theme)),
+		slot: "close",
+		...props
+	});
+};
+const Dialog = Object.assign(DialogRoot, {
+	Header: DialogHeader,
+	Buttons: DialogButtons,
+	Content: DialogContent,
+	Dismiss: DialogDismiss
+});
+//#endregion
+exports.Dialog = Dialog;
+exports.DialogTrigger = DialogTrigger;
+exports.Modal = Modal;

package/dist/components/Modal/Modal.d.cts

@@ -0,0 +1,21 @@
+import { DialogButtonsProps, DialogContentProps, DialogDismissProps, DialogHeaderProps, DialogProps, DialogTriggerProps, ModalProps } from "./types.cjs";
+import React from "react";
+
+//#region src/components/Modal/Modal.d.ts
+declare const Modal: ({
+  theme,
+  children,
+  cssOverrides,
+  ...props
+}: ModalProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+declare const DialogTrigger: (props: DialogTriggerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+interface DialogCompound {
+  (props: DialogProps): React.ReactElement;
+  Header: (props: DialogHeaderProps) => React.ReactElement;
+  Buttons: (props: DialogButtonsProps) => React.ReactElement;
+  Content: (props: DialogContentProps) => React.ReactElement;
+  Dismiss: (props: DialogDismissProps) => React.ReactElement;
+}
+declare const Dialog: DialogCompound;
+//#endregion
+export { Dialog, DialogTrigger, Modal };

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

@@ -0,0 +1,21 @@
+import { DialogButtonsProps, DialogContentProps, DialogDismissProps, DialogHeaderProps, DialogProps, DialogTriggerProps, ModalProps } from "./types.js";
+import React from "react";
+
+//#region src/components/Modal/Modal.d.ts
+declare const Modal: ({
+  theme,
+  children,
+  cssOverrides,
+  ...props
+}: ModalProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+declare const DialogTrigger: (props: DialogTriggerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+interface DialogCompound {
+  (props: DialogProps): React.ReactElement;
+  Header: (props: DialogHeaderProps) => React.ReactElement;
+  Buttons: (props: DialogButtonsProps) => React.ReactElement;
+  Content: (props: DialogContentProps) => React.ReactElement;
+  Dismiss: (props: DialogDismissProps) => React.ReactElement;
+}
+declare const Dialog: DialogCompound;
+//#endregion
+export { Dialog, DialogTrigger, Modal };

package/dist/components/Modal/Modal.js

@@ -0,0 +1,93 @@
+import { mergeDeep } from "../../util/mergeDeep.js";
+import { IconButton } from "../IconButton/IconButton.js";
+import { AvatarButton } from "../AvatarButton/AvatarButton.js";
+import { Button as Button$1 } from "../Button/Button.js";
+import { Typography } from "../Typography/Typography.js";
+import { defaultDialogTheme, defaultModalTheme, dialogButtonsStyles, dialogContentStyles, dialogDismissStyles, dialogHeadingStyles, dialogStyles, modalOverlayStyles, modalStyles } from "./styles.js";
+import React from "react";
+import { jsx } from "@emotion/react/jsx-runtime";
+import { Dialog, DialogTrigger, Modal, ModalOverlay } from "react-aria-components";
+//#region src/components/Modal/Modal.tsx
+const Modal$1 = ({ theme = {}, children, cssOverrides, ...props }) => {
+	const mergedTheme = mergeDeep(defaultModalTheme, theme);
+	return /* @__PURE__ */ jsx(ModalOverlay, {
+		css: modalOverlayStyles(mergedTheme),
+		...props,
+		children: /* @__PURE__ */ jsx(Modal, {
+			css: [modalStyles(mergedTheme), cssOverrides],
+			children
+		})
+	});
+};
+const DialogTrigger$1 = (props) => {
+	return /* @__PURE__ */ jsx(DialogTrigger, { ...props });
+};
+const DialogRoot = ({ children, theme = {}, cssOverrides, ...props }) => {
+	const mergedTheme = mergeDeep(defaultDialogTheme.container, theme);
+	const filteredChildren = React.Children.toArray(typeof children === "function" ? void 0 : children).map((child) => {
+		if (!React.isValidElement(child)) return false;
+		switch (child.type) {
+			case Dialog$1.Header:
+			case Dialog$1.Buttons:
+			case Dialog$1.Content:
+			case Dialog$1.Dismiss: return child;
+			default: return false;
+		}
+	}).filter((child) => child !== false);
+	return /* @__PURE__ */ jsx(Dialog, {
+		css: [dialogStyles(mergedTheme), cssOverrides],
+		...props,
+		children: filteredChildren
+	});
+};
+const DialogHeader = ({ variant = "headingLg", element = "h2", theme = {}, cssOverrides, ...props }) => {
+	return /* @__PURE__ */ jsx(Typography, {
+		slot: "title",
+		variant,
+		element,
+		cssOverrides: [dialogHeadingStyles(mergeDeep(defaultDialogTheme.title, theme)), ...cssOverrides == null ? [] : Array.isArray(cssOverrides) ? cssOverrides : [cssOverrides]],
+		...props
+	});
+};
+const DialogButtons = ({ children, theme = {}, cssOverrides, ...props }) => {
+	const mergedTheme = mergeDeep(defaultDialogTheme.ctas, theme);
+	const buttons = React.Children.toArray(children).map((child) => {
+		if (!React.isValidElement(child)) return false;
+		switch (child.type) {
+			case Button$1:
+			case AvatarButton:
+			case IconButton: return child;
+			default: return false;
+		}
+	}).filter((child) => child !== false);
+	return /* @__PURE__ */ jsx("div", {
+		css: [dialogButtonsStyles(mergedTheme), cssOverrides],
+		...props,
+		children: buttons
+	});
+};
+const DialogContent = ({ children, theme = {}, cssOverrides, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		css: [dialogContentStyles(mergeDeep(defaultDialogTheme.children, theme)), cssOverrides],
+		...props,
+		children
+	});
+};
+const DialogDismiss = ({ theme = {}, size = "lg", symbol = "close", variant = "tertiary", ...props }) => {
+	return /* @__PURE__ */ jsx(IconButton, {
+		size,
+		symbol,
+		variant,
+		cssOverrides: dialogDismissStyles(mergeDeep(defaultDialogTheme.dismiss, theme)),
+		slot: "close",
+		...props
+	});
+};
+const Dialog$1 = Object.assign(DialogRoot, {
+	Header: DialogHeader,
+	Buttons: DialogButtons,
+	Content: DialogContent,
+	Dismiss: DialogDismiss
+});
+//#endregion
+export { Dialog$1 as Dialog, DialogTrigger$1 as DialogTrigger, Modal$1 as Modal };

package/dist/components/Modal/styles.cjs

@@ -0,0 +1,100 @@
+const require_typography = require("../../styleD/utils/semantic/typography.cjs");
+const require_mq = require("../../styleD/utils/semantic/mq.cjs");
+const require_modal = require("../../styleD/build/typescript/component/modal.cjs");
+const require_typography$1 = require("../../styleD/build/typescript/semantic/typography.cjs");
+let _emotion_react = require("@emotion/react");
+//#region src/components/Modal/styles.ts
+const defaultModalTheme = {
+	modal: require_modal.componentModal.modal,
+	overlay: require_modal.componentModal.overlay
+};
+const modalOverlayStyles = (theme) => {
+	return _emotion_react.css`
+		position: ${theme.overlay.position};
+		top: ${theme.overlay.top};
+		left: ${theme.overlay.left};
+		width: ${theme.overlay.width};
+		height: ${theme.overlay.height};
+		background: ${theme.overlay.backgroundColor};
+		overflow: ${theme.overlay.overflow};
+		z-index: ${theme.overlay.zIndex};
+	`;
+};
+const modalStyles = (theme) => {
+	return _emotion_react.css`
+		position: ${theme.modal.position};
+		max-height: calc(var(--visual-viewport-height, 100svh) * 0.9);
+		top: calc(var(--visual-viewport-height, 100svh) / 2);
+		margin-left: ${theme.modal.marginLeft};
+		translate: ${theme.modal.translate};
+		box-shadow: ${theme.modal.boxShadow};
+		border-radius: ${theme.modal.borderRadius};
+		width: ${theme.modal.width};
+		max-width: ${theme.modal.maxWidth};
+		background-color: ${theme.modal.backgroundColor};
+		padding-top: ${theme.modal.padding.top};
+		padding-bottom: ${theme.modal.padding.bottom};
+		padding-left: ${theme.modal.padding.left};
+		padding-right: ${theme.modal.padding.right};
+	`;
+};
+const defaultDialogTheme = require_modal.componentModal.dialog;
+const dialogStyles = (theme) => {
+	return _emotion_react.css`
+		display: ${theme.display};
+		grid-template-areas: ${theme.gridTemplateAreas};
+		grid-template-columns: ${theme.gridTemplateColumns};
+		grid-template-rows: ${theme.gridTemplateRows};
+	`;
+};
+const dialogDismissStyles = (theme) => {
+	return _emotion_react.css`
+		grid-area: ${theme.gridArea};
+		margin-left: ${theme.marginLeft};
+		margin-bottom: ${theme.marginBottom};
+		border: ${theme.border};
+		height: ${theme.height};
+		width: ${theme.width};
+
+		&[data-hovered] {
+			background: ${theme.hovered.background};
+			border: ${theme.hovered.border};
+		}
+	`;
+};
+const dialogHeadingStyles = (theme) => {
+	return _emotion_react.css`
+		grid-area: ${theme.gridArea};
+		margin-bottom: ${theme.marginBottom};
+	`;
+};
+const dialogContentStyles = (theme) => {
+	return _emotion_react.css`
+		grid-area: ${theme.gridArea};
+		margin-bottom: ${theme.marginBottom};
+		${require_typography.convertTypographyToEmotionStringStyle(require_typography$1.semanticTypography.bodyMd)}
+	`;
+};
+const dialogButtonsStyles = (theme) => {
+	return _emotion_react.css`
+		grid-area: ${theme.gridArea};
+		display: ${theme.display};
+		flex-direction: ${theme.flexDirection};
+		gap: ${theme.gap};
+		justify-content: ${theme.justifyContent};
+
+		${require_mq.from.md} {
+			flex-direction: ${theme.md.flexDirection};
+		}
+	`;
+};
+//#endregion
+exports.defaultDialogTheme = defaultDialogTheme;
+exports.defaultModalTheme = defaultModalTheme;
+exports.dialogButtonsStyles = dialogButtonsStyles;
+exports.dialogContentStyles = dialogContentStyles;
+exports.dialogDismissStyles = dialogDismissStyles;
+exports.dialogHeadingStyles = dialogHeadingStyles;
+exports.dialogStyles = dialogStyles;
+exports.modalOverlayStyles = modalOverlayStyles;
+exports.modalStyles = modalStyles;

package/dist/components/Modal/styles.d.cts

@@ -0,0 +1,10 @@
+import { DeepPartial, Prettify } from "../../util/types.cjs";
+import { ComponentModal } from "../../styleD/build/typescript/component/modal.cjs";
+import { SerializedStyles } from "@emotion/react";
+
+//#region src/components/Modal/styles.d.ts
+type ModalTheme = Prettify<Pick<ComponentModal, 'modal' | 'overlay'>>;
+type PartialModalTheme = Prettify<DeepPartial<ModalTheme>>;
+type DialogTheme = Prettify<ComponentModal['dialog']>;
+//#endregion
+export { DialogTheme, ModalTheme, PartialModalTheme };

package/dist/components/Modal/styles.d.ts

@@ -0,0 +1,10 @@
+import { DeepPartial, Prettify } from "../../util/types.js";
+import { ComponentModal } from "../../styleD/build/typescript/component/modal.js";
+import { SerializedStyles } from "@emotion/react";
+
+//#region src/components/Modal/styles.d.ts
+type ModalTheme = Prettify<Pick<ComponentModal, 'modal' | 'overlay'>>;
+type PartialModalTheme = Prettify<DeepPartial<ModalTheme>>;
+type DialogTheme = Prettify<ComponentModal['dialog']>;
+//#endregion
+export { DialogTheme, ModalTheme, PartialModalTheme };

package/dist/components/Modal/styles.js

@@ -0,0 +1,92 @@
+import { convertTypographyToEmotionStringStyle } from "../../styleD/utils/semantic/typography.js";
+import { from } from "../../styleD/utils/semantic/mq.js";
+import { componentModal } from "../../styleD/build/typescript/component/modal.js";
+import { semanticTypography } from "../../styleD/build/typescript/semantic/typography.js";
+import { css } from "@emotion/react";
+//#region src/components/Modal/styles.ts
+const defaultModalTheme = {
+	modal: componentModal.modal,
+	overlay: componentModal.overlay
+};
+const modalOverlayStyles = (theme) => {
+	return css`
+		position: ${theme.overlay.position};
+		top: ${theme.overlay.top};
+		left: ${theme.overlay.left};
+		width: ${theme.overlay.width};
+		height: ${theme.overlay.height};
+		background: ${theme.overlay.backgroundColor};
+		overflow: ${theme.overlay.overflow};
+		z-index: ${theme.overlay.zIndex};
+	`;
+};
+const modalStyles = (theme) => {
+	return css`
+		position: ${theme.modal.position};
+		max-height: calc(var(--visual-viewport-height, 100svh) * 0.9);
+		top: calc(var(--visual-viewport-height, 100svh) / 2);
+		margin-left: ${theme.modal.marginLeft};
+		translate: ${theme.modal.translate};
+		box-shadow: ${theme.modal.boxShadow};
+		border-radius: ${theme.modal.borderRadius};
+		width: ${theme.modal.width};
+		max-width: ${theme.modal.maxWidth};
+		background-color: ${theme.modal.backgroundColor};
+		padding-top: ${theme.modal.padding.top};
+		padding-bottom: ${theme.modal.padding.bottom};
+		padding-left: ${theme.modal.padding.left};
+		padding-right: ${theme.modal.padding.right};
+	`;
+};
+const defaultDialogTheme = componentModal.dialog;
+const dialogStyles = (theme) => {
+	return css`
+		display: ${theme.display};
+		grid-template-areas: ${theme.gridTemplateAreas};
+		grid-template-columns: ${theme.gridTemplateColumns};
+		grid-template-rows: ${theme.gridTemplateRows};
+	`;
+};
+const dialogDismissStyles = (theme) => {
+	return css`
+		grid-area: ${theme.gridArea};
+		margin-left: ${theme.marginLeft};
+		margin-bottom: ${theme.marginBottom};
+		border: ${theme.border};
+		height: ${theme.height};
+		width: ${theme.width};
+
+		&[data-hovered] {
+			background: ${theme.hovered.background};
+			border: ${theme.hovered.border};
+		}
+	`;
+};
+const dialogHeadingStyles = (theme) => {
+	return css`
+		grid-area: ${theme.gridArea};
+		margin-bottom: ${theme.marginBottom};
+	`;
+};
+const dialogContentStyles = (theme) => {
+	return css`
+		grid-area: ${theme.gridArea};
+		margin-bottom: ${theme.marginBottom};
+		${convertTypographyToEmotionStringStyle(semanticTypography.bodyMd)}
+	`;
+};
+const dialogButtonsStyles = (theme) => {
+	return css`
+		grid-area: ${theme.gridArea};
+		display: ${theme.display};
+		flex-direction: ${theme.flexDirection};
+		gap: ${theme.gap};
+		justify-content: ${theme.justifyContent};
+
+		${from.md} {
+			flex-direction: ${theme.md.flexDirection};
+		}
+	`;
+};
+//#endregion
+export { defaultDialogTheme, defaultModalTheme, dialogButtonsStyles, dialogContentStyles, dialogDismissStyles, dialogHeadingStyles, dialogStyles, modalOverlayStyles, modalStyles };

package/dist/components/Modal/types.d.cts

@@ -0,0 +1,20 @@
+import { DeepPartial, DefaultProps, DefaultPropsWithChildren } from "../../util/types.cjs";
+import { IconButtonProps } from "../IconButton/types.cjs";
+import { TypographyProps } from "../Typography/types.cjs";
+import { DialogTheme, ModalTheme } from "./styles.cjs";
+import { DialogProps, DialogTriggerProps, ModalOverlayProps } from "react-aria-components";
+
+//#region src/components/Modal/types.d.ts
+type ModalProps = DefaultProps<ModalTheme, ModalOverlayProps['className']> & ModalOverlayProps;
+type DialogProps$1 = DefaultProps<DialogTheme['container'], DialogProps['className']> & DialogProps;
+type DialogHeaderProps = Omit<TypographyProps, 'theme'> & {
+  theme?: DeepPartial<DialogTheme['title']>;
+};
+type DialogButtonsProps = DefaultPropsWithChildren<DialogTheme['ctas']>;
+type DialogContentProps = DefaultPropsWithChildren<DialogTheme['children']>;
+type DialogDismissProps = Omit<IconButtonProps, 'theme'> & {
+  theme?: DeepPartial<DialogTheme['dismiss']>;
+};
+type DialogTriggerProps$1 = DialogTriggerProps;
+//#endregion
+export { DialogButtonsProps, DialogContentProps, DialogDismissProps, DialogHeaderProps, DialogProps$1 as DialogProps, DialogTriggerProps$1 as DialogTriggerProps, ModalProps };

package/dist/components/Modal/types.d.ts

@@ -0,0 +1,20 @@
+import { DeepPartial, DefaultProps, DefaultPropsWithChildren } from "../../util/types.js";
+import { IconButtonProps } from "../IconButton/types.js";
+import { TypographyProps } from "../Typography/types.js";
+import { DialogTheme, ModalTheme } from "./styles.js";
+import { DialogProps, DialogTriggerProps, ModalOverlayProps } from "react-aria-components";
+
+//#region src/components/Modal/types.d.ts
+type ModalProps = DefaultProps<ModalTheme, ModalOverlayProps['className']> & ModalOverlayProps;
+type DialogProps$1 = DefaultProps<DialogTheme['container'], DialogProps['className']> & DialogProps;
+type DialogHeaderProps = Omit<TypographyProps, 'theme'> & {
+  theme?: DeepPartial<DialogTheme['title']>;
+};
+type DialogButtonsProps = DefaultPropsWithChildren<DialogTheme['ctas']>;
+type DialogContentProps = DefaultPropsWithChildren<DialogTheme['children']>;
+type DialogDismissProps = Omit<IconButtonProps, 'theme'> & {
+  theme?: DeepPartial<DialogTheme['dismiss']>;
+};
+type DialogTriggerProps$1 = DialogTriggerProps;
+//#endregion
+export { DialogButtonsProps, DialogContentProps, DialogDismissProps, DialogHeaderProps, DialogProps$1 as DialogProps, DialogTriggerProps$1 as DialogTriggerProps, ModalProps };