@yamada-ui/react 2.1.3-dev-20260315102458 → 2.1.3

package/dist/cjs/components/fieldset/fieldset.cjs

@@ -7,9 +7,9 @@ const require_utils_index = require('../../utils/index.cjs');
 const require_factory = require('../../core/system/factory.cjs');
 const require_create_component = require('../../core/components/create-component.cjs');
 require('../../core/index.cjs');
-const require_fieldset_style = require('./fieldset.style.cjs');
 const require_form = require('../form/form.cjs');
 require('../form/index.cjs');
+const require_fieldset_style = require('./fieldset.style.cjs');
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 

package/dist/cjs/components/fieldset/fieldset.style.cjs

@@ -1,5 +1,7 @@
 const require_config = require('../../core/system/config.cjs');
 require('../../core/index.cjs');
+const require_form_style = require('../form/form.style.cjs');
+require('../form/index.cjs');
 
 //#region src/components/fieldset/fieldset.style.ts
 const fieldsetStyle = require_config.defineComponentSlotStyle({
@@ -37,13 +39,10 @@ const fieldsetStyle = require_config.defineComponentSlotStyle({
 		}
 	},
 	variants: {
-		elevated: { root: {
-			bg: "bg.panel",
-			boxShadow: "md"
-		} },
-		outline: { root: { borderWidth: "1px" } },
-		panel: { root: { layerStyle: "panel" } },
-		plain: { root: {} }
+		elevated: { root: require_form_style.formStyle.variants?.elevated.group },
+		outline: { root: require_form_style.formStyle.variants?.outline.group },
+		panel: { root: require_form_style.formStyle.variants?.panel.group },
+		plain: { root: require_form_style.formStyle.variants?.plain.group }
 	},
 	sizes: {
 		sm: {
@@ -52,7 +51,7 @@ const fieldsetStyle = require_config.defineComponentSlotStyle({
 			header: { gap: "1" },
 			helperMessage: { fontSize: "sm" },
 			legend: { fontSize: "md" },
-			root: { gap: "3" }
+			root: { gap: require_form_style.formStyle.sizes?.sm.root.gap }
 		},
 		md: {
 			content: { gap: "4" },
@@ -60,7 +59,7 @@ const fieldsetStyle = require_config.defineComponentSlotStyle({
 			header: { gap: "1" },
 			helperMessage: { fontSize: "sm" },
 			legend: { fontSize: "md" },
-			root: { gap: "4" }
+			root: { gap: require_form_style.formStyle.sizes?.md.root.gap }
 		},
 		lg: {
 			content: { gap: "6" },
@@ -68,47 +67,13 @@ const fieldsetStyle = require_config.defineComponentSlotStyle({
 			header: { gap: "1" },
 			helperMessage: { fontSize: "md" },
 			legend: { fontSize: "lg" },
-			root: { gap: "6" }
+			root: { gap: require_form_style.formStyle.sizes?.lg.root.gap }
 		}
 	},
-	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"
-			]
-		}
-	],
+	compounds: require_form_style.formStyle.compounds?.map(({ css, ...rest }) => ({
+		css: { root: css.group },
+		...rest
+	})),
 	defaultProps: {
 		size: "md",
 		variant: "plain"

package/dist/cjs/components/fieldset/fieldset.style.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"fieldset.style.cjs","names":["defineComponentSlotStyle"],"sources":["../../../../src/components/fieldset/fieldset.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const fieldsetStyle = defineComponentSlotStyle({\n  base: {\n    content: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      w: \"full\",\n    },\n    errorMessage: {\n      alignItems: \"center\",\n      color: \"fg.error\",\n      display: \"inline-flex\",\n      gap: \"1\",\n    },\n    header: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      w: \"full\",\n    },\n    helperMessage: {\n      alignItems: \"center\",\n      color: \"fg.muted\",\n      display: \"inline-flex\",\n      gap: \"1\",\n    },\n    legend: {\n      fontWeight: \"medium\",\n      _disabled: { opacity: 0.4 },\n    },\n    root: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      w: \"full\",\n    },\n  },\n\n  variants: {\n    elevated: { root: { bg: \"bg.panel\", boxShadow: \"md\" } },\n    outline: { root: { borderWidth: \"1px\" } },\n    panel: { root: { layerStyle: \"panel\" } },\n    plain: { root: {} },\n  },\n\n  sizes: {\n    sm: {\n      content: { gap: \"3\" },\n      errorMessage: { fontSize: \"sm\" },\n      header: { gap: \"1\" },\n      helperMessage: { fontSize: \"sm\" },\n      legend: { fontSize: \"md\" },\n      root: { gap: \"3\" },\n    },\n    md: {\n      content: { gap: \"4\" },\n      errorMessage: { fontSize: \"sm\" },\n      header: { gap: \"1\" },\n      helperMessage: { fontSize: \"sm\" },\n      legend: { fontSize: \"md\" },\n      root: { gap: \"4\" },\n    },\n    lg: {\n      content: { gap: \"6\" },\n      errorMessage: { fontSize: \"md\" },\n      header: { gap: \"1\" },\n      helperMessage: { fontSize: \"md\" },\n      legend: { fontSize: \"lg\" },\n      root: { gap: \"6\" },\n    },\n  },\n\n  compounds: [\n    {\n      css: { root: { p: \"3\", rounded: \"l2\" } },\n      size: \"sm\",\n      variant: [\"elevated\", \"outline\", \"panel\"],\n    },\n    {\n      css: { root: { p: \"4\", rounded: \"l2\" } },\n      size: \"md\",\n      variant: [\"elevated\", \"outline\", \"panel\"],\n    },\n    {\n      css: { root: { p: \"6\", rounded: \"l2\" } },\n      size: \"lg\",\n      variant: [\"elevated\", \"outline\", \"panel\"],\n    },\n  ],\n\n  defaultProps: {\n    size: \"md\",\n    variant: \"plain\",\n  },\n})\n\nexport type FieldsetStyle = typeof fieldsetStyle\n"],"mappings":";;;;AAEA,MAAa,gBAAgBA,wCAAyB;CACpD,MAAM;EACJ,SAAS;GACP,SAAS;GACT,eAAe;GACf,GAAG;GACJ;EACD,cAAc;GACZ,YAAY;GACZ,OAAO;GACP,SAAS;GACT,KAAK;GACN;EACD,QAAQ;GACN,SAAS;GACT,eAAe;GACf,GAAG;GACJ;EACD,eAAe;GACb,YAAY;GACZ,OAAO;GACP,SAAS;GACT,KAAK;GACN;EACD,QAAQ;GACN,YAAY;GACZ,WAAW,EAAE,SAAS,IAAK;GAC5B;EACD,MAAM;GACJ,SAAS;GACT,eAAe;GACf,GAAG;GACJ;EACF;CAED,UAAU;EACR,UAAU,EAAE,MAAM;GAAE,IAAI;GAAY,WAAW;GAAM,EAAE;EACvD,SAAS,EAAE,MAAM,EAAE,aAAa,OAAO,EAAE;EACzC,OAAO,EAAE,MAAM,EAAE,YAAY,SAAS,EAAE;EACxC,OAAO,EAAE,MAAM,EAAE,EAAE;EACpB;CAED,OAAO;EACL,IAAI;GACF,SAAS,EAAE,KAAK,KAAK;GACrB,cAAc,EAAE,UAAU,MAAM;GAChC,QAAQ,EAAE,KAAK,KAAK;GACpB,eAAe,EAAE,UAAU,MAAM;GACjC,QAAQ,EAAE,UAAU,MAAM;GAC1B,MAAM,EAAE,KAAK,KAAK;GACnB;EACD,IAAI;GACF,SAAS,EAAE,KAAK,KAAK;GACrB,cAAc,EAAE,UAAU,MAAM;GAChC,QAAQ,EAAE,KAAK,KAAK;GACpB,eAAe,EAAE,UAAU,MAAM;GACjC,QAAQ,EAAE,UAAU,MAAM;GAC1B,MAAM,EAAE,KAAK,KAAK;GACnB;EACD,IAAI;GACF,SAAS,EAAE,KAAK,KAAK;GACrB,cAAc,EAAE,UAAU,MAAM;GAChC,QAAQ,EAAE,KAAK,KAAK;GACpB,eAAe,EAAE,UAAU,MAAM;GACjC,QAAQ,EAAE,UAAU,MAAM;GAC1B,MAAM,EAAE,KAAK,KAAK;GACnB;EACF;CAED,WAAW;EACT;GACE,KAAK,EAAE,MAAM;IAAE,GAAG;IAAK,SAAS;IAAM,EAAE;GACxC,MAAM;GACN,SAAS;IAAC;IAAY;IAAW;IAAQ;GAC1C;EACD;GACE,KAAK,EAAE,MAAM;IAAE,GAAG;IAAK,SAAS;IAAM,EAAE;GACxC,MAAM;GACN,SAAS;IAAC;IAAY;IAAW;IAAQ;GAC1C;EACD;GACE,KAAK,EAAE,MAAM;IAAE,GAAG;IAAK,SAAS;IAAM,EAAE;GACxC,MAAM;GACN,SAAS;IAAC;IAAY;IAAW;IAAQ;GAC1C;EACF;CAED,cAAc;EACZ,MAAM;EACN,SAAS;EACV;CACF,CAAC"}
+{"version":3,"file":"fieldset.style.cjs","names":["defineComponentSlotStyle","formStyle"],"sources":["../../../../src/components/fieldset/fieldset.style.ts"],"sourcesContent":["import type { ComponentCompound, CSSSlotObject } from \"../../core\"\nimport { defineComponentSlotStyle } from \"../../core\"\nimport { formStyle } from \"../form\"\n\nexport const fieldsetStyle = defineComponentSlotStyle({\n  base: {\n    content: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      w: \"full\",\n    },\n    errorMessage: {\n      alignItems: \"center\",\n      color: \"fg.error\",\n      display: \"inline-flex\",\n      gap: \"1\",\n    },\n    header: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      w: \"full\",\n    },\n    helperMessage: {\n      alignItems: \"center\",\n      color: \"fg.muted\",\n      display: \"inline-flex\",\n      gap: \"1\",\n    },\n    legend: {\n      fontWeight: \"medium\",\n      _disabled: { opacity: 0.4 },\n    },\n    root: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      w: \"full\",\n    },\n  },\n\n  variants: {\n    elevated: { root: formStyle.variants?.elevated.group },\n    outline: { root: formStyle.variants?.outline.group },\n    panel: { root: formStyle.variants?.panel.group },\n    plain: { root: formStyle.variants?.plain.group },\n  },\n\n  sizes: {\n    sm: {\n      content: { gap: \"3\" },\n      errorMessage: { fontSize: \"sm\" },\n      header: { gap: \"1\" },\n      helperMessage: { fontSize: \"sm\" },\n      legend: { fontSize: \"md\" },\n      root: { gap: formStyle.sizes?.sm.root.gap },\n    },\n    md: {\n      content: { gap: \"4\" },\n      errorMessage: { fontSize: \"sm\" },\n      header: { gap: \"1\" },\n      helperMessage: { fontSize: \"sm\" },\n      legend: { fontSize: \"md\" },\n      root: { gap: formStyle.sizes?.md.root.gap },\n    },\n    lg: {\n      content: { gap: \"6\" },\n      errorMessage: { fontSize: \"md\" },\n      header: { gap: \"1\" },\n      helperMessage: { fontSize: \"md\" },\n      legend: { fontSize: \"lg\" },\n      root: { gap: formStyle.sizes?.lg.root.gap },\n    },\n  },\n\n  compounds: (\n    formStyle.compounds as ComponentCompound<CSSSlotObject>[] | undefined\n  )?.map(({ css, ...rest }) => ({\n    css: { root: css.group },\n    ...rest,\n  })),\n\n  defaultProps: {\n    size: \"md\",\n    variant: \"plain\",\n  },\n})\n\nexport type FieldsetStyle = typeof fieldsetStyle\n"],"mappings":";;;;;;AAIA,MAAa,gBAAgBA,wCAAyB;CACpD,MAAM;EACJ,SAAS;GACP,SAAS;GACT,eAAe;GACf,GAAG;GACJ;EACD,cAAc;GACZ,YAAY;GACZ,OAAO;GACP,SAAS;GACT,KAAK;GACN;EACD,QAAQ;GACN,SAAS;GACT,eAAe;GACf,GAAG;GACJ;EACD,eAAe;GACb,YAAY;GACZ,OAAO;GACP,SAAS;GACT,KAAK;GACN;EACD,QAAQ;GACN,YAAY;GACZ,WAAW,EAAE,SAAS,IAAK;GAC5B;EACD,MAAM;GACJ,SAAS;GACT,eAAe;GACf,GAAG;GACJ;EACF;CAED,UAAU;EACR,UAAU,EAAE,MAAMC,6BAAU,UAAU,SAAS,OAAO;EACtD,SAAS,EAAE,MAAMA,6BAAU,UAAU,QAAQ,OAAO;EACpD,OAAO,EAAE,MAAMA,6BAAU,UAAU,MAAM,OAAO;EAChD,OAAO,EAAE,MAAMA,6BAAU,UAAU,MAAM,OAAO;EACjD;CAED,OAAO;EACL,IAAI;GACF,SAAS,EAAE,KAAK,KAAK;GACrB,cAAc,EAAE,UAAU,MAAM;GAChC,QAAQ,EAAE,KAAK,KAAK;GACpB,eAAe,EAAE,UAAU,MAAM;GACjC,QAAQ,EAAE,UAAU,MAAM;GAC1B,MAAM,EAAE,KAAKA,6BAAU,OAAO,GAAG,KAAK,KAAK;GAC5C;EACD,IAAI;GACF,SAAS,EAAE,KAAK,KAAK;GACrB,cAAc,EAAE,UAAU,MAAM;GAChC,QAAQ,EAAE,KAAK,KAAK;GACpB,eAAe,EAAE,UAAU,MAAM;GACjC,QAAQ,EAAE,UAAU,MAAM;GAC1B,MAAM,EAAE,KAAKA,6BAAU,OAAO,GAAG,KAAK,KAAK;GAC5C;EACD,IAAI;GACF,SAAS,EAAE,KAAK,KAAK;GACrB,cAAc,EAAE,UAAU,MAAM;GAChC,QAAQ,EAAE,KAAK,KAAK;GACpB,eAAe,EAAE,UAAU,MAAM;GACjC,QAAQ,EAAE,UAAU,MAAM;GAC1B,MAAM,EAAE,KAAKA,6BAAU,OAAO,GAAG,KAAK,KAAK;GAC5C;EACF;CAED,WACEA,6BAAU,WACT,KAAK,EAAE,KAAK,GAAG,YAAY;EAC5B,KAAK,EAAE,MAAM,IAAI,OAAO;EACxB,GAAG;EACJ,EAAE;CAEH,cAAc;EACZ,MAAM;EACN,SAAS;EACV;CACF,CAAC"}

package/dist/cjs/components/form/form.style.cjs

@@ -1,7 +1,5 @@
 const require_config = require('../../core/system/config.cjs');
 require('../../core/index.cjs');
-const require_fieldset_style = require('../fieldset/fieldset.style.cjs');
-require('../fieldset/index.cjs');
 
 //#region src/components/form/form.style.ts
 const formStyle = require_config.defineComponentSlotStyle({
@@ -41,10 +39,13 @@ const formStyle = require_config.defineComponentSlotStyle({
 		}
 	},
 	variants: {
-		elevated: { group: require_fieldset_style.fieldsetStyle.variants?.elevated.root },
-		outline: { group: require_fieldset_style.fieldsetStyle.variants?.outline.root },
-		panel: { group: require_fieldset_style.fieldsetStyle.variants?.panel.root },
-		plain: { group: require_fieldset_style.fieldsetStyle.variants?.plain.root }
+		elevated: { group: {
+			bg: "bg.panel",
+			boxShadow: "md"
+		} },
+		outline: { group: { borderWidth: "1px" } },
+		panel: { group: { layerStyle: "panel" } },
+		plain: { group: {} }
 	},
 	sizes: {
 		sm: {
@@ -54,7 +55,7 @@ const formStyle = require_config.defineComponentSlotStyle({
 				gap: "1"
 			},
 			footer: { gap: "3" },
-			group: { gap: require_fieldset_style.fieldsetStyle.sizes?.sm.root.gap },
+			group: { gap: "3" },
 			header: { gap: "1" },
 			root: { gap: "5" },
 			title: {
@@ -69,7 +70,7 @@ const formStyle = require_config.defineComponentSlotStyle({
 				gap: "1"
 			},
 			footer: { gap: "4" },
-			group: { gap: require_fieldset_style.fieldsetStyle.sizes?.md.root.gap },
+			group: { gap: "4" },
 			header: { gap: "1" },
 			root: { gap: "6" },
 			title: {
@@ -84,7 +85,7 @@ const formStyle = require_config.defineComponentSlotStyle({
 				gap: "1"
 			},
 			footer: { gap: "6" },
-			group: { gap: require_fieldset_style.fieldsetStyle.sizes?.lg.root.gap },
+			group: { gap: "6" },
 			header: { gap: "1" },
 			root: { gap: "8" },
 			title: {
@@ -93,10 +94,44 @@ const formStyle = require_config.defineComponentSlotStyle({
 			}
 		}
 	},
-	compounds: require_fieldset_style.fieldsetStyle.compounds?.map(({ css, ...rest }) => ({
-		css: { group: css.root },
-		...rest
-	})),
+	compounds: [
+		{
+			css: { group: {
+				p: "3",
+				rounded: "l2"
+			} },
+			size: "sm",
+			variant: [
+				"elevated",
+				"outline",
+				"panel"
+			]
+		},
+		{
+			css: { group: {
+				p: "4",
+				rounded: "l2"
+			} },
+			size: "md",
+			variant: [
+				"elevated",
+				"outline",
+				"panel"
+			]
+		},
+		{
+			css: { group: {
+				p: "6",
+				rounded: "l2"
+			} },
+			size: "lg",
+			variant: [
+				"elevated",
+				"outline",
+				"panel"
+			]
+		}
+	],
 	defaultProps: {
 		size: "md",
 		variant: "plain"

package/dist/cjs/components/form/form.style.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"form.style.cjs","names":["defineComponentSlotStyle","fieldsetStyle"],"sources":["../../../../src/components/form/form.style.ts"],"sourcesContent":["import type { ComponentCompound, CSSSlotObject } from \"../../core\"\nimport { defineComponentSlotStyle } from \"../../core\"\nimport { fieldsetStyle } from \"../fieldset\"\n\nexport const formStyle = defineComponentSlotStyle({\n  base: {\n    body: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      w: \"full\",\n    },\n    description: {\n      alignItems: \"center\",\n      color: \"fg.muted\",\n      display: \"inline-flex\",\n    },\n    footer: {\n      display: \"flex\",\n      justifyContent: \"flex-end\",\n    },\n    group: {\n      display: \"flex\",\n      flexDirection: \"column\",\n    },\n    header: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      w: \"full\",\n    },\n    root: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      w: \"full\",\n    },\n    submitButton: {},\n    title: {\n      display: \"flex\",\n      fontWeight: \"medium\",\n    },\n  },\n\n  variants: {\n    elevated: { group: fieldsetStyle.variants?.elevated.root },\n    outline: { group: fieldsetStyle.variants?.outline.root },\n    panel: { group: fieldsetStyle.variants?.panel.root },\n    plain: { group: fieldsetStyle.variants?.plain.root },\n  },\n\n  sizes: {\n    sm: {\n      body: { gap: \"5\" },\n      description: { fontSize: \"sm\", gap: \"1\" },\n      footer: { gap: \"3\" },\n      group: { gap: fieldsetStyle.sizes?.sm.root.gap },\n      header: { gap: \"1\" },\n      root: { gap: \"5\" },\n      title: { fontSize: \"xl\", gap: \"1\" },\n    },\n    md: {\n      body: { gap: \"6\" },\n      description: { fontSize: \"sm\", gap: \"1\" },\n      footer: { gap: \"4\" },\n      group: { gap: fieldsetStyle.sizes?.md.root.gap },\n      header: { gap: \"1\" },\n      root: { gap: \"6\" },\n      title: { fontSize: \"2xl\", gap: \"1\" },\n    },\n    lg: {\n      body: { gap: \"8\" },\n      description: { fontSize: \"md\", gap: \"1\" },\n      footer: { gap: \"6\" },\n      group: { gap: fieldsetStyle.sizes?.lg.root.gap },\n      header: { gap: \"1\" },\n      root: { gap: \"8\" },\n      title: { fontSize: \"3xl\", gap: \"1\" },\n    },\n  },\n\n  compounds: (\n    fieldsetStyle.compounds as ComponentCompound<CSSSlotObject>[] | undefined\n  )?.map(({ css, ...rest }) => ({\n    css: { group: css.root },\n    ...rest,\n  })),\n\n  defaultProps: {\n    size: \"md\",\n    variant: \"plain\",\n  },\n})\n\nexport type FormStyle = typeof formStyle\n"],"mappings":";;;;;;AAIA,MAAa,YAAYA,wCAAyB;CAChD,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,GAAG;GACJ;EACD,aAAa;GACX,YAAY;GACZ,OAAO;GACP,SAAS;GACV;EACD,QAAQ;GACN,SAAS;GACT,gBAAgB;GACjB;EACD,OAAO;GACL,SAAS;GACT,eAAe;GAChB;EACD,QAAQ;GACN,SAAS;GACT,eAAe;GACf,GAAG;GACJ;EACD,MAAM;GACJ,SAAS;GACT,eAAe;GACf,GAAG;GACJ;EACD,cAAc,EAAE;EAChB,OAAO;GACL,SAAS;GACT,YAAY;GACb;EACF;CAED,UAAU;EACR,UAAU,EAAE,OAAOC,qCAAc,UAAU,SAAS,MAAM;EAC1D,SAAS,EAAE,OAAOA,qCAAc,UAAU,QAAQ,MAAM;EACxD,OAAO,EAAE,OAAOA,qCAAc,UAAU,MAAM,MAAM;EACpD,OAAO,EAAE,OAAOA,qCAAc,UAAU,MAAM,MAAM;EACrD;CAED,OAAO;EACL,IAAI;GACF,MAAM,EAAE,KAAK,KAAK;GAClB,aAAa;IAAE,UAAU;IAAM,KAAK;IAAK;GACzC,QAAQ,EAAE,KAAK,KAAK;GACpB,OAAO,EAAE,KAAKA,qCAAc,OAAO,GAAG,KAAK,KAAK;GAChD,QAAQ,EAAE,KAAK,KAAK;GACpB,MAAM,EAAE,KAAK,KAAK;GAClB,OAAO;IAAE,UAAU;IAAM,KAAK;IAAK;GACpC;EACD,IAAI;GACF,MAAM,EAAE,KAAK,KAAK;GAClB,aAAa;IAAE,UAAU;IAAM,KAAK;IAAK;GACzC,QAAQ,EAAE,KAAK,KAAK;GACpB,OAAO,EAAE,KAAKA,qCAAc,OAAO,GAAG,KAAK,KAAK;GAChD,QAAQ,EAAE,KAAK,KAAK;GACpB,MAAM,EAAE,KAAK,KAAK;GAClB,OAAO;IAAE,UAAU;IAAO,KAAK;IAAK;GACrC;EACD,IAAI;GACF,MAAM,EAAE,KAAK,KAAK;GAClB,aAAa;IAAE,UAAU;IAAM,KAAK;IAAK;GACzC,QAAQ,EAAE,KAAK,KAAK;GACpB,OAAO,EAAE,KAAKA,qCAAc,OAAO,GAAG,KAAK,KAAK;GAChD,QAAQ,EAAE,KAAK,KAAK;GACpB,MAAM,EAAE,KAAK,KAAK;GAClB,OAAO;IAAE,UAAU;IAAO,KAAK;IAAK;GACrC;EACF;CAED,WACEA,qCAAc,WACb,KAAK,EAAE,KAAK,GAAG,YAAY;EAC5B,KAAK,EAAE,OAAO,IAAI,MAAM;EACxB,GAAG;EACJ,EAAE;CAEH,cAAc;EACZ,MAAM;EACN,SAAS;EACV;CACF,CAAC"}
+{"version":3,"file":"form.style.cjs","names":["defineComponentSlotStyle"],"sources":["../../../../src/components/form/form.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const formStyle = defineComponentSlotStyle({\n  base: {\n    body: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      w: \"full\",\n    },\n    description: {\n      alignItems: \"center\",\n      color: \"fg.muted\",\n      display: \"inline-flex\",\n    },\n    footer: {\n      display: \"flex\",\n      justifyContent: \"flex-end\",\n    },\n    group: {\n      display: \"flex\",\n      flexDirection: \"column\",\n    },\n    header: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      w: \"full\",\n    },\n    root: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      w: \"full\",\n    },\n    submitButton: {},\n    title: {\n      display: \"flex\",\n      fontWeight: \"medium\",\n    },\n  },\n\n  variants: {\n    elevated: { group: { bg: \"bg.panel\", boxShadow: \"md\" } },\n    outline: { group: { borderWidth: \"1px\" } },\n    panel: { group: { layerStyle: \"panel\" } },\n    plain: { group: {} },\n  },\n\n  sizes: {\n    sm: {\n      body: { gap: \"5\" },\n      description: { fontSize: \"sm\", gap: \"1\" },\n      footer: { gap: \"3\" },\n      group: { gap: \"3\" },\n      header: { gap: \"1\" },\n      root: { gap: \"5\" },\n      title: { fontSize: \"xl\", gap: \"1\" },\n    },\n    md: {\n      body: { gap: \"6\" },\n      description: { fontSize: \"sm\", gap: \"1\" },\n      footer: { gap: \"4\" },\n      group: { gap: \"4\" },\n      header: { gap: \"1\" },\n      root: { gap: \"6\" },\n      title: { fontSize: \"2xl\", gap: \"1\" },\n    },\n    lg: {\n      body: { gap: \"8\" },\n      description: { fontSize: \"md\", gap: \"1\" },\n      footer: { gap: \"6\" },\n      group: { gap: \"6\" },\n      header: { gap: \"1\" },\n      root: { gap: \"8\" },\n      title: { fontSize: \"3xl\", gap: \"1\" },\n    },\n  },\n\n  compounds: [\n    {\n      css: { group: { p: \"3\", rounded: \"l2\" } },\n      size: \"sm\",\n      variant: [\"elevated\", \"outline\", \"panel\"],\n    },\n    {\n      css: { group: { p: \"4\", rounded: \"l2\" } },\n      size: \"md\",\n      variant: [\"elevated\", \"outline\", \"panel\"],\n    },\n    {\n      css: { group: { p: \"6\", rounded: \"l2\" } },\n      size: \"lg\",\n      variant: [\"elevated\", \"outline\", \"panel\"],\n    },\n  ],\n\n  defaultProps: {\n    size: \"md\",\n    variant: \"plain\",\n  },\n})\n\nexport type FormStyle = typeof formStyle\n"],"mappings":";;;;AAEA,MAAa,YAAYA,wCAAyB;CAChD,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,GAAG;GACJ;EACD,aAAa;GACX,YAAY;GACZ,OAAO;GACP,SAAS;GACV;EACD,QAAQ;GACN,SAAS;GACT,gBAAgB;GACjB;EACD,OAAO;GACL,SAAS;GACT,eAAe;GAChB;EACD,QAAQ;GACN,SAAS;GACT,eAAe;GACf,GAAG;GACJ;EACD,MAAM;GACJ,SAAS;GACT,eAAe;GACf,GAAG;GACJ;EACD,cAAc,EAAE;EAChB,OAAO;GACL,SAAS;GACT,YAAY;GACb;EACF;CAED,UAAU;EACR,UAAU,EAAE,OAAO;GAAE,IAAI;GAAY,WAAW;GAAM,EAAE;EACxD,SAAS,EAAE,OAAO,EAAE,aAAa,OAAO,EAAE;EAC1C,OAAO,EAAE,OAAO,EAAE,YAAY,SAAS,EAAE;EACzC,OAAO,EAAE,OAAO,EAAE,EAAE;EACrB;CAED,OAAO;EACL,IAAI;GACF,MAAM,EAAE,KAAK,KAAK;GAClB,aAAa;IAAE,UAAU;IAAM,KAAK;IAAK;GACzC,QAAQ,EAAE,KAAK,KAAK;GACpB,OAAO,EAAE,KAAK,KAAK;GACnB,QAAQ,EAAE,KAAK,KAAK;GACpB,MAAM,EAAE,KAAK,KAAK;GAClB,OAAO;IAAE,UAAU;IAAM,KAAK;IAAK;GACpC;EACD,IAAI;GACF,MAAM,EAAE,KAAK,KAAK;GAClB,aAAa;IAAE,UAAU;IAAM,KAAK;IAAK;GACzC,QAAQ,EAAE,KAAK,KAAK;GACpB,OAAO,EAAE,KAAK,KAAK;GACnB,QAAQ,EAAE,KAAK,KAAK;GACpB,MAAM,EAAE,KAAK,KAAK;GAClB,OAAO;IAAE,UAAU;IAAO,KAAK;IAAK;GACrC;EACD,IAAI;GACF,MAAM,EAAE,KAAK,KAAK;GAClB,aAAa;IAAE,UAAU;IAAM,KAAK;IAAK;GACzC,QAAQ,EAAE,KAAK,KAAK;GACpB,OAAO,EAAE,KAAK,KAAK;GACnB,QAAQ,EAAE,KAAK,KAAK;GACpB,MAAM,EAAE,KAAK,KAAK;GAClB,OAAO;IAAE,UAAU;IAAO,KAAK;IAAK;GACrC;EACF;CAED,WAAW;EACT;GACE,KAAK,EAAE,OAAO;IAAE,GAAG;IAAK,SAAS;IAAM,EAAE;GACzC,MAAM;GACN,SAAS;IAAC;IAAY;IAAW;IAAQ;GAC1C;EACD;GACE,KAAK,EAAE,OAAO;IAAE,GAAG;IAAK,SAAS;IAAM,EAAE;GACzC,MAAM;GACN,SAAS;IAAC;IAAY;IAAW;IAAQ;GAC1C;EACD;GACE,KAAK,EAAE,OAAO;IAAE,GAAG;IAAK,SAAS;IAAM,EAAE;GACzC,MAAM;GACN,SAAS;IAAC;IAAY;IAAW;IAAQ;GAC1C;EACF;CAED,cAAc;EACZ,MAAM;EACN,SAAS;EACV;CACF,CAAC"}

package/dist/cjs/index.cjs

@@ -1817,7 +1817,6 @@ require('./components/color-swatch/index.cjs');
 const require_slider_style = require('./components/slider/slider.style.cjs');
 const require_hooks_use_pan_event_index = require('./hooks/use-pan-event/index.cjs');
 const require_field_style = require('./components/field/field.style.cjs');
-const require_fieldset_style = require('./components/fieldset/fieldset.style.cjs');
 const require_form_style = require('./components/form/form.style.cjs');
 const require_button_style = require('./components/button/button.style.cjs');
 const require_icon_button_style = require('./components/button/icon-button.style.cjs');
@@ -1840,6 +1839,7 @@ require('./components/button/index.cjs');
 const require_form = require('./components/form/form.cjs');
 const require_namespace$5 = require('./components/form/namespace.cjs');
 require('./components/form/index.cjs');
+const require_fieldset_style = require('./components/fieldset/fieldset.style.cjs');
 const require_fieldset = require('./components/fieldset/fieldset.cjs');
 const require_namespace$6 = require('./components/fieldset/namespace.cjs');
 require('./components/fieldset/index.cjs');

package/dist/esm/components/fieldset/fieldset.js

@@ -6,9 +6,9 @@ import { utils_exports } from "../../utils/index.js";
 import { styled } from "../../core/system/factory.js";
 import { createSlotComponent } from "../../core/components/create-component.js";
 import "../../core/index.js";
-import { fieldsetStyle } from "./fieldset.style.js";
 import { useFormContext } from "../form/form.js";
 import "../form/index.js";
+import { fieldsetStyle } from "./fieldset.style.js";
 import { useId, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 

package/dist/esm/components/fieldset/fieldset.style.js

@@ -1,5 +1,7 @@
 import { defineComponentSlotStyle } from "../../core/system/config.js";
 import "../../core/index.js";
+import { formStyle } from "../form/form.style.js";
+import "../form/index.js";
 
 //#region src/components/fieldset/fieldset.style.ts
 const fieldsetStyle = defineComponentSlotStyle({
@@ -37,13 +39,10 @@ const fieldsetStyle = defineComponentSlotStyle({
 		}
 	},
 	variants: {
-		elevated: { root: {
-			bg: "bg.panel",
-			boxShadow: "md"
-		} },
-		outline: { root: { borderWidth: "1px" } },
-		panel: { root: { layerStyle: "panel" } },
-		plain: { root: {} }
+		elevated: { root: formStyle.variants?.elevated.group },
+		outline: { root: formStyle.variants?.outline.group },
+		panel: { root: formStyle.variants?.panel.group },
+		plain: { root: formStyle.variants?.plain.group }
 	},
 	sizes: {
 		sm: {
@@ -52,7 +51,7 @@ const fieldsetStyle = defineComponentSlotStyle({
 			header: { gap: "1" },
 			helperMessage: { fontSize: "sm" },
 			legend: { fontSize: "md" },
-			root: { gap: "3" }
+			root: { gap: formStyle.sizes?.sm.root.gap }
 		},
 		md: {
 			content: { gap: "4" },
@@ -60,7 +59,7 @@ const fieldsetStyle = defineComponentSlotStyle({
 			header: { gap: "1" },
 			helperMessage: { fontSize: "sm" },
 			legend: { fontSize: "md" },
-			root: { gap: "4" }
+			root: { gap: formStyle.sizes?.md.root.gap }
 		},
 		lg: {
 			content: { gap: "6" },
@@ -68,47 +67,13 @@ const fieldsetStyle = defineComponentSlotStyle({
 			header: { gap: "1" },
 			helperMessage: { fontSize: "md" },
 			legend: { fontSize: "lg" },
-			root: { gap: "6" }
+			root: { gap: formStyle.sizes?.lg.root.gap }
 		}
 	},
-	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"
-			]
-		}
-	],
+	compounds: formStyle.compounds?.map(({ css, ...rest }) => ({
+		css: { root: css.group },
+		...rest
+	})),
 	defaultProps: {
 		size: "md",
 		variant: "plain"

package/dist/esm/components/fieldset/fieldset.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"fieldset.style.js","names":[],"sources":["../../../../src/components/fieldset/fieldset.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const fieldsetStyle = defineComponentSlotStyle({\n  base: {\n    content: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      w: \"full\",\n    },\n    errorMessage: {\n      alignItems: \"center\",\n      color: \"fg.error\",\n      display: \"inline-flex\",\n      gap: \"1\",\n    },\n    header: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      w: \"full\",\n    },\n    helperMessage: {\n      alignItems: \"center\",\n      color: \"fg.muted\",\n      display: \"inline-flex\",\n      gap: \"1\",\n    },\n    legend: {\n      fontWeight: \"medium\",\n      _disabled: { opacity: 0.4 },\n    },\n    root: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      w: \"full\",\n    },\n  },\n\n  variants: {\n    elevated: { root: { bg: \"bg.panel\", boxShadow: \"md\" } },\n    outline: { root: { borderWidth: \"1px\" } },\n    panel: { root: { layerStyle: \"panel\" } },\n    plain: { root: {} },\n  },\n\n  sizes: {\n    sm: {\n      content: { gap: \"3\" },\n      errorMessage: { fontSize: \"sm\" },\n      header: { gap: \"1\" },\n      helperMessage: { fontSize: \"sm\" },\n      legend: { fontSize: \"md\" },\n      root: { gap: \"3\" },\n    },\n    md: {\n      content: { gap: \"4\" },\n      errorMessage: { fontSize: \"sm\" },\n      header: { gap: \"1\" },\n      helperMessage: { fontSize: \"sm\" },\n      legend: { fontSize: \"md\" },\n      root: { gap: \"4\" },\n    },\n    lg: {\n      content: { gap: \"6\" },\n      errorMessage: { fontSize: \"md\" },\n      header: { gap: \"1\" },\n      helperMessage: { fontSize: \"md\" },\n      legend: { fontSize: \"lg\" },\n      root: { gap: \"6\" },\n    },\n  },\n\n  compounds: [\n    {\n      css: { root: { p: \"3\", rounded: \"l2\" } },\n      size: \"sm\",\n      variant: [\"elevated\", \"outline\", \"panel\"],\n    },\n    {\n      css: { root: { p: \"4\", rounded: \"l2\" } },\n      size: \"md\",\n      variant: [\"elevated\", \"outline\", \"panel\"],\n    },\n    {\n      css: { root: { p: \"6\", rounded: \"l2\" } },\n      size: \"lg\",\n      variant: [\"elevated\", \"outline\", \"panel\"],\n    },\n  ],\n\n  defaultProps: {\n    size: \"md\",\n    variant: \"plain\",\n  },\n})\n\nexport type FieldsetStyle = typeof fieldsetStyle\n"],"mappings":";;;;AAEA,MAAa,gBAAgB,yBAAyB;CACpD,MAAM;EACJ,SAAS;GACP,SAAS;GACT,eAAe;GACf,GAAG;GACJ;EACD,cAAc;GACZ,YAAY;GACZ,OAAO;GACP,SAAS;GACT,KAAK;GACN;EACD,QAAQ;GACN,SAAS;GACT,eAAe;GACf,GAAG;GACJ;EACD,eAAe;GACb,YAAY;GACZ,OAAO;GACP,SAAS;GACT,KAAK;GACN;EACD,QAAQ;GACN,YAAY;GACZ,WAAW,EAAE,SAAS,IAAK;GAC5B;EACD,MAAM;GACJ,SAAS;GACT,eAAe;GACf,GAAG;GACJ;EACF;CAED,UAAU;EACR,UAAU,EAAE,MAAM;GAAE,IAAI;GAAY,WAAW;GAAM,EAAE;EACvD,SAAS,EAAE,MAAM,EAAE,aAAa,OAAO,EAAE;EACzC,OAAO,EAAE,MAAM,EAAE,YAAY,SAAS,EAAE;EACxC,OAAO,EAAE,MAAM,EAAE,EAAE;EACpB;CAED,OAAO;EACL,IAAI;GACF,SAAS,EAAE,KAAK,KAAK;GACrB,cAAc,EAAE,UAAU,MAAM;GAChC,QAAQ,EAAE,KAAK,KAAK;GACpB,eAAe,EAAE,UAAU,MAAM;GACjC,QAAQ,EAAE,UAAU,MAAM;GAC1B,MAAM,EAAE,KAAK,KAAK;GACnB;EACD,IAAI;GACF,SAAS,EAAE,KAAK,KAAK;GACrB,cAAc,EAAE,UAAU,MAAM;GAChC,QAAQ,EAAE,KAAK,KAAK;GACpB,eAAe,EAAE,UAAU,MAAM;GACjC,QAAQ,EAAE,UAAU,MAAM;GAC1B,MAAM,EAAE,KAAK,KAAK;GACnB;EACD,IAAI;GACF,SAAS,EAAE,KAAK,KAAK;GACrB,cAAc,EAAE,UAAU,MAAM;GAChC,QAAQ,EAAE,KAAK,KAAK;GACpB,eAAe,EAAE,UAAU,MAAM;GACjC,QAAQ,EAAE,UAAU,MAAM;GAC1B,MAAM,EAAE,KAAK,KAAK;GACnB;EACF;CAED,WAAW;EACT;GACE,KAAK,EAAE,MAAM;IAAE,GAAG;IAAK,SAAS;IAAM,EAAE;GACxC,MAAM;GACN,SAAS;IAAC;IAAY;IAAW;IAAQ;GAC1C;EACD;GACE,KAAK,EAAE,MAAM;IAAE,GAAG;IAAK,SAAS;IAAM,EAAE;GACxC,MAAM;GACN,SAAS;IAAC;IAAY;IAAW;IAAQ;GAC1C;EACD;GACE,KAAK,EAAE,MAAM;IAAE,GAAG;IAAK,SAAS;IAAM,EAAE;GACxC,MAAM;GACN,SAAS;IAAC;IAAY;IAAW;IAAQ;GAC1C;EACF;CAED,cAAc;EACZ,MAAM;EACN,SAAS;EACV;CACF,CAAC"}
+{"version":3,"file":"fieldset.style.js","names":[],"sources":["../../../../src/components/fieldset/fieldset.style.ts"],"sourcesContent":["import type { ComponentCompound, CSSSlotObject } from \"../../core\"\nimport { defineComponentSlotStyle } from \"../../core\"\nimport { formStyle } from \"../form\"\n\nexport const fieldsetStyle = defineComponentSlotStyle({\n  base: {\n    content: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      w: \"full\",\n    },\n    errorMessage: {\n      alignItems: \"center\",\n      color: \"fg.error\",\n      display: \"inline-flex\",\n      gap: \"1\",\n    },\n    header: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      w: \"full\",\n    },\n    helperMessage: {\n      alignItems: \"center\",\n      color: \"fg.muted\",\n      display: \"inline-flex\",\n      gap: \"1\",\n    },\n    legend: {\n      fontWeight: \"medium\",\n      _disabled: { opacity: 0.4 },\n    },\n    root: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      w: \"full\",\n    },\n  },\n\n  variants: {\n    elevated: { root: formStyle.variants?.elevated.group },\n    outline: { root: formStyle.variants?.outline.group },\n    panel: { root: formStyle.variants?.panel.group },\n    plain: { root: formStyle.variants?.plain.group },\n  },\n\n  sizes: {\n    sm: {\n      content: { gap: \"3\" },\n      errorMessage: { fontSize: \"sm\" },\n      header: { gap: \"1\" },\n      helperMessage: { fontSize: \"sm\" },\n      legend: { fontSize: \"md\" },\n      root: { gap: formStyle.sizes?.sm.root.gap },\n    },\n    md: {\n      content: { gap: \"4\" },\n      errorMessage: { fontSize: \"sm\" },\n      header: { gap: \"1\" },\n      helperMessage: { fontSize: \"sm\" },\n      legend: { fontSize: \"md\" },\n      root: { gap: formStyle.sizes?.md.root.gap },\n    },\n    lg: {\n      content: { gap: \"6\" },\n      errorMessage: { fontSize: \"md\" },\n      header: { gap: \"1\" },\n      helperMessage: { fontSize: \"md\" },\n      legend: { fontSize: \"lg\" },\n      root: { gap: formStyle.sizes?.lg.root.gap },\n    },\n  },\n\n  compounds: (\n    formStyle.compounds as ComponentCompound<CSSSlotObject>[] | undefined\n  )?.map(({ css, ...rest }) => ({\n    css: { root: css.group },\n    ...rest,\n  })),\n\n  defaultProps: {\n    size: \"md\",\n    variant: \"plain\",\n  },\n})\n\nexport type FieldsetStyle = typeof fieldsetStyle\n"],"mappings":";;;;;;AAIA,MAAa,gBAAgB,yBAAyB;CACpD,MAAM;EACJ,SAAS;GACP,SAAS;GACT,eAAe;GACf,GAAG;GACJ;EACD,cAAc;GACZ,YAAY;GACZ,OAAO;GACP,SAAS;GACT,KAAK;GACN;EACD,QAAQ;GACN,SAAS;GACT,eAAe;GACf,GAAG;GACJ;EACD,eAAe;GACb,YAAY;GACZ,OAAO;GACP,SAAS;GACT,KAAK;GACN;EACD,QAAQ;GACN,YAAY;GACZ,WAAW,EAAE,SAAS,IAAK;GAC5B;EACD,MAAM;GACJ,SAAS;GACT,eAAe;GACf,GAAG;GACJ;EACF;CAED,UAAU;EACR,UAAU,EAAE,MAAM,UAAU,UAAU,SAAS,OAAO;EACtD,SAAS,EAAE,MAAM,UAAU,UAAU,QAAQ,OAAO;EACpD,OAAO,EAAE,MAAM,UAAU,UAAU,MAAM,OAAO;EAChD,OAAO,EAAE,MAAM,UAAU,UAAU,MAAM,OAAO;EACjD;CAED,OAAO;EACL,IAAI;GACF,SAAS,EAAE,KAAK,KAAK;GACrB,cAAc,EAAE,UAAU,MAAM;GAChC,QAAQ,EAAE,KAAK,KAAK;GACpB,eAAe,EAAE,UAAU,MAAM;GACjC,QAAQ,EAAE,UAAU,MAAM;GAC1B,MAAM,EAAE,KAAK,UAAU,OAAO,GAAG,KAAK,KAAK;GAC5C;EACD,IAAI;GACF,SAAS,EAAE,KAAK,KAAK;GACrB,cAAc,EAAE,UAAU,MAAM;GAChC,QAAQ,EAAE,KAAK,KAAK;GACpB,eAAe,EAAE,UAAU,MAAM;GACjC,QAAQ,EAAE,UAAU,MAAM;GAC1B,MAAM,EAAE,KAAK,UAAU,OAAO,GAAG,KAAK,KAAK;GAC5C;EACD,IAAI;GACF,SAAS,EAAE,KAAK,KAAK;GACrB,cAAc,EAAE,UAAU,MAAM;GAChC,QAAQ,EAAE,KAAK,KAAK;GACpB,eAAe,EAAE,UAAU,MAAM;GACjC,QAAQ,EAAE,UAAU,MAAM;GAC1B,MAAM,EAAE,KAAK,UAAU,OAAO,GAAG,KAAK,KAAK;GAC5C;EACF;CAED,WACE,UAAU,WACT,KAAK,EAAE,KAAK,GAAG,YAAY;EAC5B,KAAK,EAAE,MAAM,IAAI,OAAO;EACxB,GAAG;EACJ,EAAE;CAEH,cAAc;EACZ,MAAM;EACN,SAAS;EACV;CACF,CAAC"}

package/dist/esm/components/form/form.style.js

@@ -1,7 +1,5 @@
 import { defineComponentSlotStyle } from "../../core/system/config.js";
 import "../../core/index.js";
-import { fieldsetStyle } from "../fieldset/fieldset.style.js";
-import "../fieldset/index.js";
 
 //#region src/components/form/form.style.ts
 const formStyle = defineComponentSlotStyle({
@@ -41,10 +39,13 @@ const formStyle = defineComponentSlotStyle({
 		}
 	},
 	variants: {
-		elevated: { group: fieldsetStyle.variants?.elevated.root },
-		outline: { group: fieldsetStyle.variants?.outline.root },
-		panel: { group: fieldsetStyle.variants?.panel.root },
-		plain: { group: fieldsetStyle.variants?.plain.root }
+		elevated: { group: {
+			bg: "bg.panel",
+			boxShadow: "md"
+		} },
+		outline: { group: { borderWidth: "1px" } },
+		panel: { group: { layerStyle: "panel" } },
+		plain: { group: {} }
 	},
 	sizes: {
 		sm: {
@@ -54,7 +55,7 @@ const formStyle = defineComponentSlotStyle({
 				gap: "1"
 			},
 			footer: { gap: "3" },
-			group: { gap: fieldsetStyle.sizes?.sm.root.gap },
+			group: { gap: "3" },
 			header: { gap: "1" },
 			root: { gap: "5" },
 			title: {
@@ -69,7 +70,7 @@ const formStyle = defineComponentSlotStyle({
 				gap: "1"
 			},
 			footer: { gap: "4" },
-			group: { gap: fieldsetStyle.sizes?.md.root.gap },
+			group: { gap: "4" },
 			header: { gap: "1" },
 			root: { gap: "6" },
 			title: {
@@ -84,7 +85,7 @@ const formStyle = defineComponentSlotStyle({
 				gap: "1"
 			},
 			footer: { gap: "6" },
-			group: { gap: fieldsetStyle.sizes?.lg.root.gap },
+			group: { gap: "6" },
 			header: { gap: "1" },
 			root: { gap: "8" },
 			title: {
@@ -93,10 +94,44 @@ const formStyle = defineComponentSlotStyle({
 			}
 		}
 	},
-	compounds: fieldsetStyle.compounds?.map(({ css, ...rest }) => ({
-		css: { group: css.root },
-		...rest
-	})),
+	compounds: [
+		{
+			css: { group: {
+				p: "3",
+				rounded: "l2"
+			} },
+			size: "sm",
+			variant: [
+				"elevated",
+				"outline",
+				"panel"
+			]
+		},
+		{
+			css: { group: {
+				p: "4",
+				rounded: "l2"
+			} },
+			size: "md",
+			variant: [
+				"elevated",
+				"outline",
+				"panel"
+			]
+		},
+		{
+			css: { group: {
+				p: "6",
+				rounded: "l2"
+			} },
+			size: "lg",
+			variant: [
+				"elevated",
+				"outline",
+				"panel"
+			]
+		}
+	],
 	defaultProps: {
 		size: "md",
 		variant: "plain"

package/dist/esm/components/form/form.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"form.style.js","names":[],"sources":["../../../../src/components/form/form.style.ts"],"sourcesContent":["import type { ComponentCompound, CSSSlotObject } from \"../../core\"\nimport { defineComponentSlotStyle } from \"../../core\"\nimport { fieldsetStyle } from \"../fieldset\"\n\nexport const formStyle = defineComponentSlotStyle({\n  base: {\n    body: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      w: \"full\",\n    },\n    description: {\n      alignItems: \"center\",\n      color: \"fg.muted\",\n      display: \"inline-flex\",\n    },\n    footer: {\n      display: \"flex\",\n      justifyContent: \"flex-end\",\n    },\n    group: {\n      display: \"flex\",\n      flexDirection: \"column\",\n    },\n    header: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      w: \"full\",\n    },\n    root: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      w: \"full\",\n    },\n    submitButton: {},\n    title: {\n      display: \"flex\",\n      fontWeight: \"medium\",\n    },\n  },\n\n  variants: {\n    elevated: { group: fieldsetStyle.variants?.elevated.root },\n    outline: { group: fieldsetStyle.variants?.outline.root },\n    panel: { group: fieldsetStyle.variants?.panel.root },\n    plain: { group: fieldsetStyle.variants?.plain.root },\n  },\n\n  sizes: {\n    sm: {\n      body: { gap: \"5\" },\n      description: { fontSize: \"sm\", gap: \"1\" },\n      footer: { gap: \"3\" },\n      group: { gap: fieldsetStyle.sizes?.sm.root.gap },\n      header: { gap: \"1\" },\n      root: { gap: \"5\" },\n      title: { fontSize: \"xl\", gap: \"1\" },\n    },\n    md: {\n      body: { gap: \"6\" },\n      description: { fontSize: \"sm\", gap: \"1\" },\n      footer: { gap: \"4\" },\n      group: { gap: fieldsetStyle.sizes?.md.root.gap },\n      header: { gap: \"1\" },\n      root: { gap: \"6\" },\n      title: { fontSize: \"2xl\", gap: \"1\" },\n    },\n    lg: {\n      body: { gap: \"8\" },\n      description: { fontSize: \"md\", gap: \"1\" },\n      footer: { gap: \"6\" },\n      group: { gap: fieldsetStyle.sizes?.lg.root.gap },\n      header: { gap: \"1\" },\n      root: { gap: \"8\" },\n      title: { fontSize: \"3xl\", gap: \"1\" },\n    },\n  },\n\n  compounds: (\n    fieldsetStyle.compounds as ComponentCompound<CSSSlotObject>[] | undefined\n  )?.map(({ css, ...rest }) => ({\n    css: { group: css.root },\n    ...rest,\n  })),\n\n  defaultProps: {\n    size: \"md\",\n    variant: \"plain\",\n  },\n})\n\nexport type FormStyle = typeof formStyle\n"],"mappings":";;;;;;AAIA,MAAa,YAAY,yBAAyB;CAChD,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,GAAG;GACJ;EACD,aAAa;GACX,YAAY;GACZ,OAAO;GACP,SAAS;GACV;EACD,QAAQ;GACN,SAAS;GACT,gBAAgB;GACjB;EACD,OAAO;GACL,SAAS;GACT,eAAe;GAChB;EACD,QAAQ;GACN,SAAS;GACT,eAAe;GACf,GAAG;GACJ;EACD,MAAM;GACJ,SAAS;GACT,eAAe;GACf,GAAG;GACJ;EACD,cAAc,EAAE;EAChB,OAAO;GACL,SAAS;GACT,YAAY;GACb;EACF;CAED,UAAU;EACR,UAAU,EAAE,OAAO,cAAc,UAAU,SAAS,MAAM;EAC1D,SAAS,EAAE,OAAO,cAAc,UAAU,QAAQ,MAAM;EACxD,OAAO,EAAE,OAAO,cAAc,UAAU,MAAM,MAAM;EACpD,OAAO,EAAE,OAAO,cAAc,UAAU,MAAM,MAAM;EACrD;CAED,OAAO;EACL,IAAI;GACF,MAAM,EAAE,KAAK,KAAK;GAClB,aAAa;IAAE,UAAU;IAAM,KAAK;IAAK;GACzC,QAAQ,EAAE,KAAK,KAAK;GACpB,OAAO,EAAE,KAAK,cAAc,OAAO,GAAG,KAAK,KAAK;GAChD,QAAQ,EAAE,KAAK,KAAK;GACpB,MAAM,EAAE,KAAK,KAAK;GAClB,OAAO;IAAE,UAAU;IAAM,KAAK;IAAK;GACpC;EACD,IAAI;GACF,MAAM,EAAE,KAAK,KAAK;GAClB,aAAa;IAAE,UAAU;IAAM,KAAK;IAAK;GACzC,QAAQ,EAAE,KAAK,KAAK;GACpB,OAAO,EAAE,KAAK,cAAc,OAAO,GAAG,KAAK,KAAK;GAChD,QAAQ,EAAE,KAAK,KAAK;GACpB,MAAM,EAAE,KAAK,KAAK;GAClB,OAAO;IAAE,UAAU;IAAO,KAAK;IAAK;GACrC;EACD,IAAI;GACF,MAAM,EAAE,KAAK,KAAK;GAClB,aAAa;IAAE,UAAU;IAAM,KAAK;IAAK;GACzC,QAAQ,EAAE,KAAK,KAAK;GACpB,OAAO,EAAE,KAAK,cAAc,OAAO,GAAG,KAAK,KAAK;GAChD,QAAQ,EAAE,KAAK,KAAK;GACpB,MAAM,EAAE,KAAK,KAAK;GAClB,OAAO;IAAE,UAAU;IAAO,KAAK;IAAK;GACrC;EACF;CAED,WACE,cAAc,WACb,KAAK,EAAE,KAAK,GAAG,YAAY;EAC5B,KAAK,EAAE,OAAO,IAAI,MAAM;EACxB,GAAG;EACJ,EAAE;CAEH,cAAc;EACZ,MAAM;EACN,SAAS;EACV;CACF,CAAC"}
+{"version":3,"file":"form.style.js","names":[],"sources":["../../../../src/components/form/form.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const formStyle = defineComponentSlotStyle({\n  base: {\n    body: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      w: \"full\",\n    },\n    description: {\n      alignItems: \"center\",\n      color: \"fg.muted\",\n      display: \"inline-flex\",\n    },\n    footer: {\n      display: \"flex\",\n      justifyContent: \"flex-end\",\n    },\n    group: {\n      display: \"flex\",\n      flexDirection: \"column\",\n    },\n    header: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      w: \"full\",\n    },\n    root: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      w: \"full\",\n    },\n    submitButton: {},\n    title: {\n      display: \"flex\",\n      fontWeight: \"medium\",\n    },\n  },\n\n  variants: {\n    elevated: { group: { bg: \"bg.panel\", boxShadow: \"md\" } },\n    outline: { group: { borderWidth: \"1px\" } },\n    panel: { group: { layerStyle: \"panel\" } },\n    plain: { group: {} },\n  },\n\n  sizes: {\n    sm: {\n      body: { gap: \"5\" },\n      description: { fontSize: \"sm\", gap: \"1\" },\n      footer: { gap: \"3\" },\n      group: { gap: \"3\" },\n      header: { gap: \"1\" },\n      root: { gap: \"5\" },\n      title: { fontSize: \"xl\", gap: \"1\" },\n    },\n    md: {\n      body: { gap: \"6\" },\n      description: { fontSize: \"sm\", gap: \"1\" },\n      footer: { gap: \"4\" },\n      group: { gap: \"4\" },\n      header: { gap: \"1\" },\n      root: { gap: \"6\" },\n      title: { fontSize: \"2xl\", gap: \"1\" },\n    },\n    lg: {\n      body: { gap: \"8\" },\n      description: { fontSize: \"md\", gap: \"1\" },\n      footer: { gap: \"6\" },\n      group: { gap: \"6\" },\n      header: { gap: \"1\" },\n      root: { gap: \"8\" },\n      title: { fontSize: \"3xl\", gap: \"1\" },\n    },\n  },\n\n  compounds: [\n    {\n      css: { group: { p: \"3\", rounded: \"l2\" } },\n      size: \"sm\",\n      variant: [\"elevated\", \"outline\", \"panel\"],\n    },\n    {\n      css: { group: { p: \"4\", rounded: \"l2\" } },\n      size: \"md\",\n      variant: [\"elevated\", \"outline\", \"panel\"],\n    },\n    {\n      css: { group: { p: \"6\", rounded: \"l2\" } },\n      size: \"lg\",\n      variant: [\"elevated\", \"outline\", \"panel\"],\n    },\n  ],\n\n  defaultProps: {\n    size: \"md\",\n    variant: \"plain\",\n  },\n})\n\nexport type FormStyle = typeof formStyle\n"],"mappings":";;;;AAEA,MAAa,YAAY,yBAAyB;CAChD,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,GAAG;GACJ;EACD,aAAa;GACX,YAAY;GACZ,OAAO;GACP,SAAS;GACV;EACD,QAAQ;GACN,SAAS;GACT,gBAAgB;GACjB;EACD,OAAO;GACL,SAAS;GACT,eAAe;GAChB;EACD,QAAQ;GACN,SAAS;GACT,eAAe;GACf,GAAG;GACJ;EACD,MAAM;GACJ,SAAS;GACT,eAAe;GACf,GAAG;GACJ;EACD,cAAc,EAAE;EAChB,OAAO;GACL,SAAS;GACT,YAAY;GACb;EACF;CAED,UAAU;EACR,UAAU,EAAE,OAAO;GAAE,IAAI;GAAY,WAAW;GAAM,EAAE;EACxD,SAAS,EAAE,OAAO,EAAE,aAAa,OAAO,EAAE;EAC1C,OAAO,EAAE,OAAO,EAAE,YAAY,SAAS,EAAE;EACzC,OAAO,EAAE,OAAO,EAAE,EAAE;EACrB;CAED,OAAO;EACL,IAAI;GACF,MAAM,EAAE,KAAK,KAAK;GAClB,aAAa;IAAE,UAAU;IAAM,KAAK;IAAK;GACzC,QAAQ,EAAE,KAAK,KAAK;GACpB,OAAO,EAAE,KAAK,KAAK;GACnB,QAAQ,EAAE,KAAK,KAAK;GACpB,MAAM,EAAE,KAAK,KAAK;GAClB,OAAO;IAAE,UAAU;IAAM,KAAK;IAAK;GACpC;EACD,IAAI;GACF,MAAM,EAAE,KAAK,KAAK;GAClB,aAAa;IAAE,UAAU;IAAM,KAAK;IAAK;GACzC,QAAQ,EAAE,KAAK,KAAK;GACpB,OAAO,EAAE,KAAK,KAAK;GACnB,QAAQ,EAAE,KAAK,KAAK;GACpB,MAAM,EAAE,KAAK,KAAK;GAClB,OAAO;IAAE,UAAU;IAAO,KAAK;IAAK;GACrC;EACD,IAAI;GACF,MAAM,EAAE,KAAK,KAAK;GAClB,aAAa;IAAE,UAAU;IAAM,KAAK;IAAK;GACzC,QAAQ,EAAE,KAAK,KAAK;GACpB,OAAO,EAAE,KAAK,KAAK;GACnB,QAAQ,EAAE,KAAK,KAAK;GACpB,MAAM,EAAE,KAAK,KAAK;GAClB,OAAO;IAAE,UAAU;IAAO,KAAK;IAAK;GACrC;EACF;CAED,WAAW;EACT;GACE,KAAK,EAAE,OAAO;IAAE,GAAG;IAAK,SAAS;IAAM,EAAE;GACzC,MAAM;GACN,SAAS;IAAC;IAAY;IAAW;IAAQ;GAC1C;EACD;GACE,KAAK,EAAE,OAAO;IAAE,GAAG;IAAK,SAAS;IAAM,EAAE;GACzC,MAAM;GACN,SAAS;IAAC;IAAY;IAAW;IAAQ;GAC1C;EACD;GACE,KAAK,EAAE,OAAO;IAAE,GAAG;IAAK,SAAS;IAAM,EAAE;GACzC,MAAM;GACN,SAAS;IAAC;IAAY;IAAW;IAAQ;GAC1C;EACF;CAED,cAAc;EACZ,MAAM;EACN,SAAS;EACV;CACF,CAAC"}

package/dist/esm/index.js

@@ -1817,7 +1817,6 @@ import "./components/color-swatch/index.js";
 import { sliderStyle } from "./components/slider/slider.style.js";
 import { usePanEvent } from "./hooks/use-pan-event/index.js";
 import { fieldStyle } from "./components/field/field.style.js";
-import { fieldsetStyle } from "./components/fieldset/fieldset.style.js";
 import { formStyle } from "./components/form/form.style.js";
 import { buttonStyle } from "./components/button/button.style.js";
 import { iconButtonStyle } from "./components/button/icon-button.style.js";
@@ -1840,6 +1839,7 @@ import "./components/button/index.js";
 import { FormBody, FormContext, FormDescription, FormFooter, FormGroup, FormHeader, FormPropsContext, FormRoot, FormSubmitButton, FormTitle, useFormContext, useFormPropsContext } from "./components/form/form.js";
 import { namespace_exports as namespace_exports$22 } from "./components/form/namespace.js";
 import "./components/form/index.js";
+import { fieldsetStyle } from "./components/fieldset/fieldset.style.js";
 import { FieldsetContent, FieldsetContext, FieldsetErrorMessage, FieldsetHeader, FieldsetHelperMessage, FieldsetLegend, FieldsetPropsContext, FieldsetRoot, useFieldsetContext, useFieldsetPropsContext } from "./components/fieldset/fieldset.js";
 import { namespace_exports as namespace_exports$21 } from "./components/fieldset/namespace.js";
 import "./components/fieldset/index.js";

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

@@ -7,7 +7,7 @@ import { CollapseProps } from "../collapse/collapse.js";
 import "../../index.js";
 import { AccordionStyle } from "./accordion.style.js";
 import { UseAccordionItemProps, UseAccordionProps } from "./use-accordion.js";
-import * as react966 from "react";
+import * as react96 from "react";
 
 //#region src/components/accordion/accordion.d.ts
 interface AccordionCallBackProps {
@@ -31,7 +31,7 @@ interface AccordionRootProps extends Omit<HTMLStyledProps, "onChange">, ThemePro
    */
   items?: AccordionItem[];
 }
-declare const AccordionPropsContext: react966.Context<Partial<AccordionRootProps> | undefined>, useAccordionPropsContext: () => Partial<AccordionRootProps> | undefined;
+declare const AccordionPropsContext: react96.Context<Partial<AccordionRootProps> | undefined>, useAccordionPropsContext: () => Partial<AccordionRootProps> | undefined;
 /**
  * `Accordion` is a component for a list that displays information in an expandable or collapsible manner.
  *

package/dist/types/components/accordion/use-accordion.d.ts

@@ -2,10 +2,10 @@ import { HTMLProps, PropGetter } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import { Descendant } from "../../hooks/use-descendants/index.js";
 import "../../index.js";
-import * as react967 from "react";
+import * as react97 from "react";
 
 //#region src/components/accordion/use-accordion.d.ts
-declare const AccordionDescendantsContext: react967.Context<{
+declare const AccordionDescendantsContext: react97.Context<{
     active: (target?: HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null | undefined, options?: FocusOptions) => void;
     count: () => number;
     destroy: () => void;
@@ -24,7 +24,7 @@ declare const AccordionDescendantsContext: react967.Context<{
     prevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean) => Descendant<HTMLButtonElement, {}> | undefined;
     register: (props?: {
       disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
-    } | undefined) => react967.RefCallback<HTMLButtonElement>;
+    } | undefined) => react97.RefCallback<HTMLButtonElement>;
     unregister: (node?: HTMLButtonElement | null | undefined) => void;
     value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
     values: () => Descendant<HTMLButtonElement, {}>[];
@@ -50,12 +50,12 @@ declare const AccordionDescendantsContext: react967.Context<{
       prevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean) => Descendant<HTMLButtonElement, {}> | undefined;
       register: (props?: {
         disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
-      } | undefined) => react967.RefCallback<HTMLButtonElement>;
+      } | undefined) => react97.RefCallback<HTMLButtonElement>;
       unregister: (node?: HTMLButtonElement | null | undefined) => void;
       value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
       values: () => Descendant<HTMLButtonElement, {}>[];
     };
-    register: react967.RefCallback<HTMLButtonElement>;
+    register: react97.RefCallback<HTMLButtonElement>;
   }, useAccordionDescendants: () => {
     active: (target?: HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null | undefined, options?: FocusOptions) => void;
     count: () => number;
@@ -75,15 +75,15 @@ declare const AccordionDescendantsContext: react967.Context<{
     prevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean) => Descendant<HTMLButtonElement, {}> | undefined;
     register: (props?: {
       disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
-    } | undefined) => react967.RefCallback<HTMLButtonElement>;
+    } | undefined) => react97.RefCallback<HTMLButtonElement>;
     unregister: (node?: HTMLButtonElement | null | undefined) => void;
     value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
     values: () => Descendant<HTMLButtonElement, {}>[];
   };
 interface AccordionContext extends Omit<UseAccordionReturn, "descendants" | "getRootProps"> {}
-declare const AccordionContext: react967.Context<AccordionContext>, useAccordionContext: () => AccordionContext;
+declare const AccordionContext: react97.Context<AccordionContext>, useAccordionContext: () => AccordionContext;
 interface AccordionItemContext extends Omit<UseAccordionItemReturn, "getItemProps"> {}
-declare const AccordionItemContext: react967.Context<AccordionItemContext>, useAccordionItemContext: () => AccordionItemContext;
+declare const AccordionItemContext: react97.Context<AccordionItemContext>, useAccordionItemContext: () => AccordionItemContext;
 interface UseAccordionProps extends Omit<HTMLProps, "onChange"> {
   /**
    * The initial index(es) of the accordion item to expand.
@@ -137,7 +137,7 @@ declare const useAccordion: ({
     prevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean) => Descendant<HTMLButtonElement, {}> | undefined;
     register: (props?: {
       disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
-    } | undefined) => react967.RefCallback<HTMLButtonElement>;
+    } | undefined) => react97.RefCallback<HTMLButtonElement>;
     unregister: (node?: HTMLButtonElement | null | undefined) => void;
     value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
     values: () => Descendant<HTMLButtonElement, {}>[];
@@ -145,8 +145,8 @@ declare const useAccordion: ({
   focusedIndex: number;
   index: number | number[];
   multiple: boolean | undefined;
-  setFocusedIndex: react967.Dispatch<react967.SetStateAction<number>>;
-  setIndex: react967.Dispatch<react967.SetStateAction<number | number[]>>;
+  setFocusedIndex: react97.Dispatch<react97.SetStateAction<number>>;
+  setIndex: react97.Dispatch<react97.SetStateAction<number | number[]>>;
   toggle: boolean | undefined;
   getRootProps: PropGetter<"div", undefined, undefined>;
 };