@yamada-ui/react/dist/esm/components/fieldset/fieldset.style.js

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

import { defineComponentSlotStyle } from "../../core/system/config.js";

//#region src/components/fieldset/fieldset.style.ts
const fieldsetStyle = defineComponentSlotStyle({
	base: {
		content: {
			display: "flex",
			flexDirection: "column",
			w: "full"
		},
		errorMessage: {
			alignItems: "center",
			color: "fg.error",
			display: "inline-flex",
			gap: "1"
		},
		header: {
			display: "flex",
			flexDirection: "column",
			w: "full"
		},
		helperMessage: {
			alignItems: "center",
			color: "fg.muted",
			display: "inline-flex",
			gap: "1"
		},
		legend: {
			fontWeight: "medium",
			_disabled: { opacity: .4 }
		},
		root: {
			display: "flex",
			flexDirection: "column",
			w: "full"
		}
	},
	variants: {
		elevated: { root: {
			bg: "bg.panel",
			boxShadow: "md"
		} },
		outline: { root: { borderWidth: "1px" } },
		panel: { root: { layerStyle: "panel" } },
		plain: {}
	},
	sizes: {
		sm: {
			content: { gap: "3" },
			errorMessage: { fontSize: "sm" },
			header: { gap: "1" },
			helperMessage: { fontSize: "sm" },
			legend: { fontSize: "md" },
			root: { gap: "3" }
		},
		md: {
			content: { gap: "4" },
			errorMessage: { fontSize: "sm" },
			header: { gap: "1" },
			helperMessage: { fontSize: "sm" },
			legend: { fontSize: "md" },
			root: { gap: "4" }
		},
		lg: {
			content: { gap: "6" },
			errorMessage: { fontSize: "md" },
			header: { gap: "1" },
			helperMessage: { fontSize: "md" },
			legend: { fontSize: "lg" },
			root: { gap: "6" }
		}
	},
	compounds: [
		{
			css: { root: {
				p: "3",
				rounded: "l2"
			} },
			size: "sm",
			variant: [
				"elevated",
				"outline",
				"panel"
			]
		},
		{
			css: { root: {
				p: "4",
				rounded: "l2"
			} },
			size: "md",
			variant: [
				"elevated",
				"outline",
				"panel"
			]
		},
		{
			css: { root: {
				p: "6",
				rounded: "l2"
			} },
			size: "lg",
			variant: [
				"elevated",
				"outline",
				"panel"
			]
		}
	],
	defaultProps: {
		size: "md",
		variant: "plain"
	}
});

//#endregion
export { fieldsetStyle };
//# sourceMappingURL=fieldset.style.js.map