@atom-learning/components 6.10.0 → 6.11.0

package/dist/index.cjs.js

@@ -5679,6 +5679,16 @@ var DateField = ({ className, hideLabel, label, name, validation, prompt, descri
 };
 DateField.displayName = "DateField";
 //#endregion
+//#region src/components/dialog/DialogActionBar.tsx
+var DialogActionBar = styled("div", { base: [
+	"border-t",
+	"border-grey-300",
+	"p-4",
+	"flex",
+	"gap-4",
+	"shadow-[0_-6px_6px_-1px_rgba(51,51,51,0.05)]"
+] });
+//#endregion
 //#region src/components/dialog/DialogBackground.tsx
 var DialogBackground = styled("div", { base: ["w-screen", "h-screen"] });
 //#endregion
@@ -5718,62 +5728,69 @@ var StyledDialogContent = styled(_radix_ui_react_dialog.Content, {
 		"motion-safe:data-[state=open]:animate-slide-in-center",
 		"motion-safe:data-[state=closed]:animate-slide-out-center"
 	],
-	variants: { size: {
-		xs: [
-			"rounded-md",
-			"size-auto",
-			"max-w-[90vw]",
-			"max-h-[90vh]",
-			"supports-svh:h-auto",
-			"supports-svh:max-h-[90vh]",
-			"w-95"
-		],
-		sm: [
-			"rounded-md",
-			"size-auto",
-			"max-w-[90vw]",
-			"max-h-[90vh]",
-			"supports-svh:h-auto",
-			"supports-svh:max-h-[90vh]",
-			"w-120"
-		],
-		md: [
-			"rounded-md",
-			"size-auto",
-			"max-w-[90vw]",
-			"max-h-[90vh]",
-			"supports-svh:h-auto",
-			"supports-svh:max-h-[90vh]",
-			"w-150"
-		],
-		lg: [
-			"rounded-md",
-			"size-auto",
-			"max-w-[90vw]",
-			"max-h-[90vh]",
-			"supports-svh:h-auto",
-			"supports-svh:max-h-[90vh]",
-			"w-200"
-		],
-		xl: [
-			"rounded-md",
-			"size-auto",
-			"max-w-[90vw]",
-			"max-h-[90vh]",
-			"supports-svh:h-auto",
-			"supports-svh:max-h-[90vh]",
-			"w-275"
-		],
-		fullscreen: [
-			"rounded-none",
-			"w-screen",
-			"h-screen",
-			"max-w-screen",
-			"max-h-screen",
-			"supports-svh:h-svh",
-			"supports-svh:max-h-svh"
-		]
-	} }
+	variants: {
+		size: {
+			xs: [
+				"rounded-md",
+				"size-auto",
+				"max-w-[90vw]",
+				"max-h-[90vh]",
+				"supports-svh:h-auto",
+				"supports-svh:max-h-[90vh]",
+				"w-95"
+			],
+			sm: [
+				"rounded-md",
+				"size-auto",
+				"max-w-[90vw]",
+				"max-h-[90vh]",
+				"supports-svh:h-auto",
+				"supports-svh:max-h-[90vh]",
+				"w-120"
+			],
+			md: [
+				"rounded-md",
+				"size-auto",
+				"max-w-[90vw]",
+				"max-h-[90vh]",
+				"supports-svh:h-auto",
+				"supports-svh:max-h-[90vh]",
+				"w-150"
+			],
+			lg: [
+				"rounded-md",
+				"size-auto",
+				"max-w-[90vw]",
+				"max-h-[90vh]",
+				"supports-svh:h-auto",
+				"supports-svh:max-h-[90vh]",
+				"w-200"
+			],
+			xl: [
+				"rounded-md",
+				"size-auto",
+				"max-w-[90vw]",
+				"max-h-[90vh]",
+				"supports-svh:h-auto",
+				"supports-svh:max-h-[90vh]",
+				"w-275"
+			],
+			fullscreen: [
+				"rounded-none",
+				"w-screen",
+				"h-screen",
+				"max-w-screen",
+				"max-h-screen",
+				"supports-svh:h-svh",
+				"supports-svh:max-h-svh"
+			]
+		},
+		layout: { panel: [
+			"flex",
+			"flex-col",
+			"p-0"
+		] }
+	}
 }, { enabledResponsiveVariants: true });
 var DialogContent = ({ size = "sm", children, closeDialogText = "Close dialog", showCloseButton = true, ...remainingProps }) => /* @__PURE__ */ react.createElement(_radix_ui_react_dialog.Portal, null, /* @__PURE__ */ react.createElement(StyledDialogOverlay, { id: modalOverlayId }, react.Children.map(children, (child) => child?.type === DialogBackground && child), /* @__PURE__ */ react.createElement(StyledDialogContent, {
 	size,
@@ -5806,13 +5823,33 @@ var DialogHeading = ({ className, ...rest }) => /* @__PURE__ */ react.createElem
 	className: (0, clsx.default)("border-b", "border-b-grey-200", "pb-8", "pt-0", "px-8", "mb-8", "-mx-8", "box-content", className)
 });
 //#endregion
+//#region src/components/dialog/DialogNavigationBar.tsx
+var DialogNavigationBar = styled("div", { base: [
+	"flex",
+	"justify-between",
+	"items-center",
+	"border-b",
+	"border-grey-300",
+	"p-4"
+] });
+//#endregion
+//#region src/components/dialog/DialogScrollableContent.tsx
+var DialogScrollableContent = styled("div", { base: [
+	"overflow-scroll",
+	"flex-1",
+	"p-4"
+] });
+//#endregion
 //#region src/components/dialog/Dialog.tsx
 var Dialog = Object.assign(_radix_ui_react_dialog.Root, {
+	ActionBar: DialogActionBar,
 	Background: DialogBackground,
 	Close: DialogClose$1,
 	Content: DialogContent,
 	Heading: DialogHeading,
 	Footer: DialogFooter,
+	NavigationBar: DialogNavigationBar,
+	ScrollableContent: DialogScrollableContent,
 	Description: _radix_ui_react_dialog.Description,
 	Title: _radix_ui_react_dialog.Title,
 	Trigger: _radix_ui_react_dialog.Trigger