@cieloazul310/digital-go-pandacss-preset 0.3.0 → 0.4.0

package/dist/index.mjs

@@ -5,17 +5,17 @@ import { anatomy } from "@zag-js/accordion";
 import { createAnatomy } from "@zag-js/anatomy";
 import { anatomy as anatomy$1 } from "@zag-js/checkbox";
 import { anatomy as anatomy$2 } from "@zag-js/date-picker";
-import { anatomy as anatomy$3 } from "@zag-js/collapsible";
-import { anatomy as anatomy$4 } from "@zag-js/dialog";
-import { anatomy as anatomy$5 } from "@zag-js/file-upload";
-import { anatomy as anatomy$6 } from "@zag-js/menu";
-import { anatomy as anatomy$7 } from "@zag-js/progress";
-import { anatomy as anatomy$8 } from "@zag-js/radio-group";
-import { anatomy as anatomy$9 } from "@zag-js/select";
-import { anatomy as anatomy$10 } from "@zag-js/steps";
-import { anatomy as anatomy$11 } from "@zag-js/tabs";
-import { anatomy as anatomy$12 } from "@zag-js/tree-view";
-
+import { anatomy as anatomy$3 } from "@zag-js/date-input";
+import { anatomy as anatomy$4 } from "@zag-js/collapsible";
+import { anatomy as anatomy$5 } from "@zag-js/drawer";
+import { anatomy as anatomy$6 } from "@zag-js/file-upload";
+import { anatomy as anatomy$7 } from "@zag-js/menu";
+import { anatomy as anatomy$8 } from "@zag-js/progress";
+import { anatomy as anatomy$9 } from "@zag-js/radio-group";
+import { anatomy as anatomy$10 } from "@zag-js/select";
+import { anatomy as anatomy$11 } from "@zag-js/steps";
+import { anatomy as anatomy$12 } from "@zag-js/tabs";
+import { anatomy as anatomy$13 } from "@zag-js/tree-view";
 //#region src/recipes/accordion.ts
 /**
 * source:
@@ -28,6 +28,11 @@ var accordion_default = defineSlotRecipe({
 	base: {
 		root: { colorPalette: "keyColor" },
 		item: {
+			/**
+			* group/accordion border-b border-solid-gray-420
+			[--icon-size:calc(20/16*1rem)] desktop:[--icon-size:calc(32/16*1rem)]
+			${className ?? ''}
+			*/
 			borderBottomWidth: "1px",
 			borderBottomColor: "solid-gray.420",
 			"--icon-size": {
@@ -36,8 +41,15 @@ var accordion_default = defineSlotRecipe({
 			}
 		},
 		itemTrigger: {
+			/**
+			* group/summary relative block cursor-default
+			*/
 			position: "relative",
 			display: "block",
+			/**
+			* hover:bg-solid-gray-50
+			* focus-visible:bg-yellow-300
+			*/
 			bg: {
 				base: "transparent",
 				_hover: "solid-gray.50",
@@ -59,7 +71,14 @@ var accordion_default = defineSlotRecipe({
 				md: 4
 			},
 			cursor: { _hover: "pointer" },
+			/**
+			* marker:[content:'']
+			[&::-webkit-details-marker]:hidden
+			*/
 			"&::marker": { content: "\"\"" },
+			/**
+			* focus-visible:rounded-4 focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-[calc(2/16*1rem)] focus-visible:outline-black focus-visible:ring-[calc(2/16*1rem)] focus-visible:ring-yellow-300
+			*/
 			_focusVisible: {
 				rounded: 4,
 				outlineStyle: "solid",
@@ -68,10 +87,19 @@ var accordion_default = defineSlotRecipe({
 				outlineOffset: .5,
 				focusBox: "calc({spacing.1} / 2)"
 			},
+			/**
+			* remove button style
+			*/
 			textAlign: "start",
 			width: "full"
 		},
 		itemIndicator: {
+			/**
+			* absolute top-2 left-0.5
+			* desktop:top-3.5 desktop:left-1.5
+			* size-[var(--icon-size)]
+			* mt-[calc((1lh-var(--icon-size))/2)]
+			*/
 			position: "absolute",
 			top: {
 				base: 2,
@@ -84,11 +112,23 @@ var accordion_default = defineSlotRecipe({
 			width: "var(--icon-size)",
 			height: "var(--icon-size)",
 			mt: "calc((1lh - var(--icon-size)) / 2)",
+			/**
+			* inline-flex items-center justify-center
+			*/
 			display: "inline-flex",
 			alignItems: "center",
 			justifyContent: "center",
+			/**
+			* bg-white text-blue-1000
+			*/
 			bg: "white",
 			color: "colorPalette.primary.100",
+			/**
+			* border border-current rounded-full
+			* group-hover/summary:outline group-hover/summary:outline-2
+			* group-hover/summary:outline-current
+			* group-open/accordion:rotate-180
+			*/
 			borderWidth: "1px",
 			borderColor: "currentcolor",
 			rounded: "full",
@@ -108,6 +148,10 @@ var accordion_default = defineSlotRecipe({
 			}
 		},
 		itemContent: {
+			/**
+			* pl-[calc(var(--icon-size)+(12/16*1rem))] pr-2 py-4
+			desktop:pl-[calc(var(--icon-size)+(20/16*1rem))] desktop:pr-4 desktop:py-6
+			*/
 			pl: {
 				base: "calc(var(--icon-size) + {spacing.3})",
 				md: "calc(var(--icon-size) + {spacing.5})"
@@ -123,12 +167,19 @@ var accordion_default = defineSlotRecipe({
 		}
 	}
 });
-
 //#endregion
 //#region src/recipes/blockquote.ts
 var blockquote_default = defineRecipe({
 	className: "blockquote",
 	base: {
+		/**
+		* margin: 0 calc(40 / 16 * 1rem);
+		* border-left: 8px solid var(--color-neutral-solid-gray-536);
+		* padding-top: calc(8 / 16 * 1rem);
+		* padding-right: calc(16 / 16 * 1rem);
+		* padding-bottom: calc(8 / 16 * 1rem);
+		* padding-left: calc(24 / 16 * 1rem);
+		*/
 		my: 0,
 		mx: 10,
 		borderLeftWidth: "8px",
@@ -141,7 +192,6 @@ var blockquote_default = defineRecipe({
 		"& > *:last-child": { mb: 0 }
 	}
 });
-
 //#endregion
 //#region src/anatomy.ts
 /**
@@ -166,7 +216,6 @@ const menuListAnatomy = createAnatomy("menu-list").parts("root", "label", "conte
 const notificationBannerAnatomy = createAnatomy("notification-banner").parts("root", "icon", "close", "header", "heading", "body", "actions");
 const resourceListAnatomy = createAnatomy("resource-list").parts("root", "main", "action", "content", "title");
 const tableAnatomy = createAnatomy("table").parts("root", "head", "body", "foot", "row", "header", "cell", "colgroup", "col", "caption");
-
 //#endregion
 //#region src/recipes/link.ts
 /**
@@ -177,6 +226,10 @@ var link_default = defineRecipe({
 	className: "link",
 	description: "リンクテキストは通常、色や下線などの視覚的な表現で通常のテキストと区別され、URLと関連づけられたテキスト文字列です。この関連付けをハイパーリンクと呼び、これはウェブをウェブたらしめている基本的な概念のひとつです。",
 	base: {
+		/**
+		* text-blue-1000 visited:text-magenta-900 hover:text-blue-1000
+		* focus-visible:text-blue-1000 active:text-orange-700
+		*/
 		colorPalette: "blue",
 		color: {
 			base: "colorPalette.primary.100",
@@ -185,10 +238,17 @@ var link_default = defineRecipe({
 			_focusVisible: "colorPalette.primary.100",
 			_active: "orange.800"
 		},
+		/**
+		* focus-visible:bg-yellow-300
+		*/
 		bg: {
 			base: "transparent",
 			_focusVisible: "yellow.300"
 		},
+		/**
+		* underline underline-offset-[calc(3/16*1rem)] hover:decoration-[calc(3/16*1rem)]
+		* active:decoration-1
+		*/
 		textDecoration: "underline",
 		textDecorationThickness: {
 			base: "1px",
@@ -196,6 +256,12 @@ var link_default = defineRecipe({
 			_active: "1px"
 		},
 		textUnderlineOffset: "calc(3 / 16 * 1rem)",
+		/**
+		* focus-visible:rounded-4
+		* focus-visible:outline focus-visible:outline-4
+		* focus-visible:outline-black focus-visible:outline-offset-[calc(2/16*1rem)]
+		* focus-visible:ring-[calc(2/16*1rem)] focus-visible:ring-yellow-300
+		*/
 		_focusVisible: {
 			rounded: 4,
 			outlineStyle: "solid",
@@ -204,6 +270,9 @@ var link_default = defineRecipe({
 			outlineOffset: .5,
 			focusBox: "calc({spacing.1} / 2)"
 		},
+		/**
+		* with icon
+		*/
 		"& > svg": {
 			display: "inline",
 			ml: 1,
@@ -213,7 +282,6 @@ var link_default = defineRecipe({
 		}
 	}
 });
-
 //#endregion
 //#region src/recipes/breadcrumb.ts
 /**
@@ -225,19 +293,42 @@ var breadcrumb_default = defineSlotRecipe({
 	description: "パンくずリストは、ウェブサイトの階層内でユーザーの現在の位置を表示します。",
 	slots: breadcrumbAnatomy.keys(),
 	base: {
-		root: { "--icon-size": "16px" },
+		root: { 
+		/**
+		* icon
+		*/
+"--icon-size": "16px" },
 		label: {
 			srOnly: true,
 			textStyle: "oln-16N-100"
 		},
-		list: { display: "inline" },
+		list: { 
+		/**
+		* inline
+		*/
+display: "inline" },
 		item: {
+			/**
+			* inline break-words text-oln-16N-100
+			*/
 			display: "inline",
 			overflowWrap: "break-word",
 			textStyle: "oln-16N-100"
 		},
 		link: {
+			/**
+			* text-blue-1000 text-oln-16N-100 underline underline-offset-[calc(3/16*1rem)]
+			* hover:text-blue-900 hover:decoration-[calc(3/16*1rem)]
+			* active:text-orange-700 active:decoration-1
+			* focus-visible:rounded-4 focus-visible:outline focus-visible:outline-4
+			* focus-visible:outline-black focus-visible:outline-offset-[calc(2/16*1rem)]
+			* focus-visible:bg-yellow-300 focus-visible:text-blue-1000
+			* focus-visible:ring-[calc(2/16*1rem)] focus-visible:ring-yellow-300
+			*/
 			...link_default.base,
+			/**
+			* icon
+			*/
 			"& svg": {
 				display: "inline",
 				width: "var(--icon-size)",
@@ -246,6 +337,9 @@ var breadcrumb_default = defineSlotRecipe({
 			}
 		},
 		separator: {
+			/**
+			* mx-2 inline
+			*/
 			mx: 2,
 			display: "inline-flex",
 			width: "12px",
@@ -258,7 +352,6 @@ var breadcrumb_default = defineSlotRecipe({
 		}
 	}
 });
-
 //#endregion
 //#region src/recipes/button.ts
 /**
@@ -270,7 +363,15 @@ var button_default = defineRecipe({
 	description: "ボタンは、主にアクション実行またはページ遷移のためのトリガーとして使用します。画面内におけるボタンの重要度に応じて使い分け可能な複数のスタイルがあります。",
 	base: {
 		colorPalette: "keyColor",
+		/**
+		* underline-offset-[calc(3/16*1rem)]
+		*/
 		textUnderlineOffset: "calc(3 / 16 * 1rem)",
+		/**
+		* focus-visible:outline focus-visible:outline-4 focus-visible:outline-black
+		* focus-visible:outline-offset-[calc(2/16*1rem)]
+		* focus-visible:ring-[calc(2/16*1rem)] focus-visible:ring-yellow-300
+		*/
 		_focusVisible: {
 			outlineStyle: "solid",
 			outlineWidth: "4px",
@@ -278,7 +379,13 @@ var button_default = defineRecipe({
 			outlineOffset: .5,
 			focusBox: "calc({spacing.1} / 2)"
 		},
+		/**
+		* aria-disabled:pointer-events-none aria-disabled:forced-colors:border-[GrayText] aria-disabled:forced-colors:text-[GrayText]
+		*/
 		_disabled: { pointerEvents: "none" },
+		/**
+		* button default
+		*/
 		display: "inline-flex",
 		columnGap: 1,
 		textAlign: "center",
@@ -290,6 +397,10 @@ var button_default = defineRecipe({
 	variants: {
 		variant: {
 			"solid-fill": {
+				/**
+				* text-white aria-disabled:text-solid-gray-50
+				* bg-blue-900 hover:bg-blue-1000 active:bg-blue-1200 aria-disabled:bg-solid-gray-300
+				*/
 				bg: {
 					base: "colorPalette.primary",
 					_hover: "colorPalette.primary.100",
@@ -300,6 +411,10 @@ var button_default = defineRecipe({
 					base: "white",
 					_disabled: "solid-gray.50"
 				},
+				/**
+				* border-4 border-double border-transparent
+				* hover:underline active:underline
+				*/
 				borderWidth: "4px",
 				borderStyle: "double",
 				borderColor: "transparent",
@@ -310,6 +425,11 @@ var button_default = defineRecipe({
 				}
 			},
 			outline: {
+				/**
+				* bg-white hover:bg-blue-200 active:bg-blue-300 aria-disabled:bg-white
+				* text-blue-900 hover:text-blue-1000 active:text-blue-1200
+				* aria-disabled:text-solid-gray-300
+				*/
 				bg: {
 					base: "white",
 					_hover: "colorPalette.200",
@@ -322,6 +442,9 @@ var button_default = defineRecipe({
 					_active: "colorPalette.primary.300",
 					_disabled: "solid-gray.300"
 				},
+				/**
+				* border border-current hover:underline active:underline
+				*/
 				borderWidth: "1px",
 				borderColor: "currentcolor",
 				textDecoration: {
@@ -331,6 +454,13 @@ var button_default = defineRecipe({
 				}
 			},
 			text: {
+				/**
+				*
+				* hover:bg-blue-50 active:bg-blue-100 focus-visible:bg-yellow-300
+				* aria-disabled:bg-transparent aria-disabled:focus-visible:bg-yellow-300
+				* text-blue-900 hover:text-blue-1000 active:text-blue-1200
+				* aria-disabled:text-solid-gray-300
+				*/
 				bg: {
 					base: "transparent",
 					_hover: "colorPalette.bg",
@@ -347,6 +477,9 @@ var button_default = defineRecipe({
 					_active: "colorPalette.primary.300",
 					_disabled: "solid-gray.300"
 				},
+				/**
+				* hover:decoration-[calc(3/16*1rem)] underline
+				*/
 				textDecoration: "underline",
 				textDecorationThickness: {
 					base: "1px",
@@ -356,6 +489,9 @@ var button_default = defineRecipe({
 		},
 		size: {
 			lg: {
+				/**
+				* lg: 'min-w-[calc(136/16*1rem)] min-h-14 rounded-8 px-4 py-3 text-oln-16B-100'
+				*/
 				minWidth: "calc({spacing.1} * 34)",
 				minHeight: 14,
 				rounded: 8,
@@ -364,6 +500,9 @@ var button_default = defineRecipe({
 				textStyle: "oln-16B-100"
 			},
 			md: {
+				/**
+				* md: 'min-w-24 min-h-12 rounded-8 px-4 py-2 text-oln-16B-100',
+				*/
 				minWidth: 24,
 				minHeight: 12,
 				textStyle: "oln-16B-100",
@@ -372,6 +511,9 @@ var button_default = defineRecipe({
 				rounded: 8
 			},
 			sm: {
+				/**
+				* sm: 'relative min-w-20 min-h-9 rounded-6 px-3 py-0.5 text-oln-16B-100 after:absolute after:inset-x-0 after:-inset-y-full after:m-auto after:h-[44px]',
+				*/
 				position: "relative",
 				minWidth: 20,
 				minHeight: 9,
@@ -388,6 +530,9 @@ var button_default = defineRecipe({
 				}
 			},
 			xs: {
+				/**
+				* xs: 'relative min-w-18 min-h-7 rounded-4 px-2 py-0.5 text-oln-14B-100 after:absolute after:inset-x-0 after:-inset-y-full after:m-auto after:h-[44px]',
+				*/
 				minWidth: 18,
 				minHeight: 7,
 				textStyle: "oln-14B-100",
@@ -409,7 +554,6 @@ var button_default = defineRecipe({
 		size: "md"
 	}
 });
-
 //#endregion
 //#region src/recipes/card.ts
 var card_default = defineSlotRecipe({
@@ -519,7 +663,6 @@ var card_default = defineSlotRecipe({
 		asLink: false
 	}
 });
-
 //#endregion
 //#region src/recipes/checkbox.ts
 var checkbox_default = defineSlotRecipe({
@@ -535,6 +678,10 @@ var checkbox_default = defineSlotRecipe({
 			colorPalette: "keyColor"
 		},
 		control: {
+			/**
+			* flex items-center justify-center shrink-0 rounded-[calc(1/8*100%)]
+			* has-[input:hover:not(:focus):not([aria-disabled="true"])]:bg-solid-gray-420
+			*/
 			flexShrink: 0,
 			rounded: "calc(2 / 18 * 100%)",
 			borderWidth: "2px",
@@ -565,6 +712,11 @@ var checkbox_default = defineSlotRecipe({
 					focusBox: "calc({spacing.1} / 2)"
 				}
 			},
+			/**
+			* focus:outline focus:outline-4 focus:outline-black
+			* focus:outline-offset-[calc(2/16*1rem)]
+			* focus:ring-[calc(2/16*1rem)] focus:ring-yellow-300
+			*/
 			_focus: {
 				outlineStyle: "solid",
 				outlineWidth: "4px",
@@ -574,22 +726,41 @@ var checkbox_default = defineSlotRecipe({
 			}
 		},
 		indicator: {
+			/**
+			* appearance-none size-3/4 rounded-[calc(2/18*100%)]
+			*/
 			appearance: "none",
 			width: "full",
 			height: "full",
 			zIndex: 1,
 			bg: {
+				/**
+				* bg-white
+				*/
 				base: "white",
+				/**
+				* checked:bg-blue-900 checked:hover:bg-blue-1100
+				* forced-colors:checked:!bg-[Highlight]
+				*/
 				_checked: {
 					base: "colorPalette.primary",
 					_hover: "colorPalette.primary.200",
 					_highContrast: "Highlight"
 				},
 				_indeterminate: {
+					/**
+					* indeterminate:bg-blue-900 indeterminate:hover:bg-blue-1100
+					* forced-colors:indeterminate:!bg-[Highlight]
+					*/
 					base: "colorPalette.primary",
 					_hover: "colorPalette.primary.200",
 					_highContrast: "Highlight"
 				},
+				/**
+				* data-[error]:indeterminate:bg-error-1
+				* data-[error]:indeterminate:hover:bg-red-1000
+				* data-[error]:checked:bg-error-1 data-[error]:checked:hover:bg-red-1000
+				*/
 				_invalid: {
 					_indeterminate: {
 						base: "error.1",
@@ -602,6 +773,12 @@ var checkbox_default = defineSlotRecipe({
 						_disabled: "solid-gray.300"
 					}
 				},
+				/**
+				* aria-disabled:!bg-solid-gray-50
+				* aria-disabled:checked:!bg-solid-gray-300
+				* aria-disabled:indeterminate:!bg-solid-gray-300
+				* forced-colors:aria-disabled:checked:!bg-[GrayText]
+				*/
 				_disabled: {
 					base: "solid-gray.50",
 					_checked: "solid-gray.300",
@@ -609,7 +786,17 @@ var checkbox_default = defineSlotRecipe({
 					_highContrast: { _checked: "GrayText" }
 				}
 			},
+			/**
+			* bg-clip-padding
+			*/
 			backgroundClip: "padding-box",
+			/**
+			* before:hidden checked:before:block indeterminate:before:block
+			* before:size-3.5
+			* before:bg-white
+			* forced-colors:before:!bg-[HighlightText]
+			* aria-disabled:before:border-solid-gray-50
+			*/
 			_before: {
 				content: "\"\"",
 				display: "none",
@@ -621,6 +808,10 @@ var checkbox_default = defineSlotRecipe({
 				},
 				borderColor: { _disabled: "solid-gray.50" }
 			},
+			/**
+			* checked:before:[clip-path:path('M5.6,11.2L12.65,4.15L11.25,2.75L5.6,8.4L2.75,5.55L1.35,6.95L5.6,11.2Z')]
+			* indeterminate:before:[clip-path:path('M3.25,7.75H10.75V6.25H3.25V7.75Z')]
+			*/
 			_checked: { _before: {
 				display: "block",
 				clipPath: "path('M5.6,11.2L12.65,4.15L11.25,2.75L5.6,8.4L2.75,5.55L1.35,6.95L5.6,11.2Z')"
@@ -677,7 +868,6 @@ var checkbox_default = defineSlotRecipe({
 	} },
 	defaultVariants: { size: "sm" }
 });
-
 //#endregion
 //#region src/recipes/chip-label.ts
 var chip_label_default = defineRecipe({
@@ -719,7 +909,6 @@ var chip_label_default = defineRecipe({
 	} },
 	defaultVariants: { variant: "text" }
 });
-
 //#endregion
 //#region src/recipes/chip-tag.ts
 const buttonCommon = {
@@ -787,7 +976,6 @@ var chip_tag_default = defineSlotRecipe({
 		}
 	}
 });
-
 //#endregion
 //#region src/recipes/label.ts
 /**
@@ -797,6 +985,9 @@ var chip_tag_default = defineSlotRecipe({
 var label_default = defineRecipe({
 	className: "label",
 	base: {
+		/**
+		* flex w-fit items-center gap-2 text-solid-gray-800
+		*/
 		display: "flex",
 		width: "fit-content",
 		alignItems: "center",
@@ -804,13 +995,15 @@ var label_default = defineRecipe({
 		color: "solid-gray.800"
 	},
 	variants: { size: {
+		/**
+		* data-[size=sm]:text-std-16B-170 data-[size=md]:text-std-17B-170 data-[size=lg]:text-std-18B-160
+		*/
 		sm: { textStyle: "std-16B-170" },
 		md: { textStyle: "std-17B-170" },
 		lg: { textStyle: "std-18B-160" }
 	} },
 	defaultVariants: { size: "md" }
 });
-
 //#endregion
 //#region src/recipes/input.ts
 /**
@@ -821,10 +1014,19 @@ var input_default = defineRecipe({
 	className: "input",
 	description: "インプットテキストコンポーネントは、名前や電話番号など、1行以内のテキストを入力する場合に使用します。",
 	base: {
+		/**
+		* max-w-full px-4 py-3 rounded-8
+		*/
 		maxWidth: "full",
 		rounded: 8,
 		px: 4,
 		py: 3,
+		/**
+		* border border-solid-gray-600 hover:border-black
+		* aria-disabled:border-solid-gray-300
+		* aria-disabled:forced-colors:border-[GrayText]
+		* aria-[invalid=true]:border-error-1 aria-[invalid=true]:hover:border-red-1000
+		*/
 		borderStyle: {
 			base: "solid",
 			_readOnly: "dashed"
@@ -842,6 +1044,12 @@ var input_default = defineRecipe({
 				_hover: "red.1000"
 			}
 		},
+		/**
+		* bg-white text-oln-16N-100 text-solid-gray-800
+		* aria-disabled:bg-solid-gray-50 aria-disabled:text-solid-gray-420
+		* aria-disabled:forced-colors:text-[GrayText]
+		*
+		*/
 		bg: {
 			base: "white",
 			_disabled: "solid-gray.50"
@@ -854,6 +1062,11 @@ var input_default = defineRecipe({
 			}
 		},
 		textStyle: "oln-16N-100",
+		/**
+		* focus:outline focus:outline-4 focus:outline-black
+		* focus:outline-offset-[calc(2/16*1rem)]
+		* focus:ring-[calc(2/16*1rem)] focus:ring-yellow-300
+		*/
 		_focus: {
 			outlineStyle: "solid",
 			outlineWidth: "4px",
@@ -861,19 +1074,24 @@ var input_default = defineRecipe({
 			outlineOffset: .5,
 			focusBox: "calc({spacing.1} / 2)"
 		},
+		/**
+		* aria-disabled:pointer-events-none
+		*/
 		pointerEvents: {
 			base: "inherit",
 			_disabled: "none"
 		}
 	},
 	variants: { size: {
+		/**
+		* data-[size=sm]:h-10 data-[size=md]:h-12 data-[size=lg]:h-14
+		*/
 		sm: { height: 10 },
 		md: { height: 12 },
 		lg: { height: 14 }
 	} },
 	defaultVariants: { size: "lg" }
 });
-
 //#endregion
 //#region src/recipes/select-box.ts
 /**
@@ -884,6 +1102,11 @@ var select_box_default = defineRecipe({
 	className: "select-box",
 	description: "セレクトボックスは、複数の選択肢を提供するフォームコントロールです。",
 	base: {
+		/**
+		* w-full pl-4 pr-10 py-[calc(11/16*1rem)]
+		* appearance-none rounded-8
+		* aria-disabled:pointer-events-none
+		*/
 		width: "full",
 		appearance: "none",
 		pl: 4,
@@ -894,6 +1117,11 @@ var select_box_default = defineRecipe({
 			base: "inherit",
 			_disabled: "none"
 		},
+		/**
+		* bg-white text-oln-16N-100 text-solid-gray-800
+		* aria-disabled:text-solid-gray-420
+		* aria-disabled:forced-colors:text-[GrayText]
+		*/
 		bg: {
 			base: "white",
 			_disabled: "solid-gray.50"
@@ -903,6 +1131,12 @@ var select_box_default = defineRecipe({
 			_disabled: "solid-gray.420"
 		},
 		textStyle: "oln-16N-100",
+		/**
+		* border border-solid-gray-600 hover:border-black
+		* aria-disabled:border-solid-gray-300 aria-disabled:bg-solid-gray-50
+		* aria-disabled:forced-colors:border-[GrayText]
+		* aria-[invalid=true]:border-error-1aria-[invalid=true]:hover:border-red-1000
+		*/
 		borderWidth: "1px",
 		borderColor: {
 			base: "solid-gray.900",
@@ -912,7 +1146,13 @@ var select_box_default = defineRecipe({
 				_hover: "red.1000"
 			}
 		},
+		/**
+		* remove button style
+		*/
 		textAlign: "start",
+		/**
+		* focus:outline focus:outline-4 focus:outline-black focus:outline-offset-[calc(2/16*1rem)] focus:ring-[calc(2/16*1rem)] focus:ring-yellow-300
+		*/
 		_focus: {
 			outlineStyle: "solid",
 			outlineWidth: "4px",
@@ -922,12 +1162,14 @@ var select_box_default = defineRecipe({
 		}
 	},
 	variants: { size: {
+		/**
+		* data-[size=sm]:h-10 data-[size=md]:h-12 data-[size=lg]:h-14
+		*/
 		sm: { height: 10 },
 		md: { height: 12 },
 		lg: { height: 14 }
 	} }
 });
-
 //#endregion
 //#region src/recipes/date-picker.ts
 var date_picker_default = defineSlotRecipe({
@@ -947,6 +1189,9 @@ var date_picker_default = defineSlotRecipe({
 			p: 4
 		},
 		content: {
+			/**
+			* border border-solid-gray-420 bg-white shadow-1 rounded-8 focus:outline-0
+			*/
 			bg: "white",
 			shadow: 1,
 			rounded: 8,
@@ -974,18 +1219,41 @@ var date_picker_default = defineSlotRecipe({
 			width: "fit-content"
 		},
 		table: {
+			/**
+			* mx-3 mb-2
+			*/
 			mx: 3,
 			mb: 2
 		},
-		tableHead: { "& th": { p: 0 } },
+		tableHead: { 
+		/**
+		* [&_th]:p-0
+		*/
+"& th": { p: 0 } },
 		tableHeader: {
+			/**
+			* size-12 text-center font-bold
+			*/
 			width: 12,
 			height: 12,
 			textAlign: "center",
 			fontWeight: "bold"
 		},
-		tableBody: { "& td": { p: 0 } },
+		tableBody: { 
+		/**
+		* [&_td]:p-0
+		*/
+"& td": { p: 0 } },
 		tableCellTrigger: {
+			/**
+			* m-1 flex items-center justify-center size-10 rounded-full
+			* underline-offset-[calc(3/16*1rem)] hover:bg-solid-gray-50 hover:underline
+			* data-[selected]:!bg-blue-900 data-[selected]:border
+			* data-[selected]:border-transparent data-[selected]:text-white
+			* focus-visible:bg-yellow-300 focus-visible:outline focus-visible:outline-4
+			* focus-visible:outline-black focus-visible:outline-offset-[calc(2/16*1rem)]
+			* focus-visible:ring-[calc(2/16*1rem)] focus-visible:ring-yellow-300
+			*/
 			m: 1,
 			display: "flex",
 			alignItems: "center",
@@ -1017,7 +1285,70 @@ var date_picker_default = defineSlotRecipe({
 		}
 	}
 });
-
+//#endregion
+//#region src/recipes/date-input.ts
+var date_input_default = defineSlotRecipe({
+	className: "date-input",
+	description: "日付入力は、日付を分割形式で入力できるフォームコントロールです。",
+	slots: anatomy$3.keys(),
+	base: {
+		root: {
+			/**
+			* inline-flex h-14 -space-x-1 rounded-8 border border-solid-gray-600 bg-[--bg] p-0.5 pe-0 text-solid-gray-900 [--bg:theme(colors.white)] focus-within:border-black hover:border-solid-gray-900 data-[size=md]:h-12 data-[size=sm]:h-10 data-[readonly]:border-dashed data-[disabled]:border-solid-gray-300 data-[error]:border-error-1 data-[disabled]:text-solid-gray-420 data-[disabled]:[--bg:theme(colors.solid-gray.50)] data-[error]:focus-within:border-red-1000 data-[error]:hover:border-red-1000 data-[error]:hover:data-[readonly]:border-error-1 hover:data-[readonly]:border-solid-gray-600 forced-colors:data-[disabled]:border-[GrayText] forced-colors:data-[disabled]:text-[GrayText] ${className ?? ''}
+			*/
+			display: "flex",
+			flexDirection: "column",
+			gap: 1.5
+		},
+		label: { ...label_default.base },
+		control: {
+			display: "flex",
+			alignItems: "center",
+			gap: 2
+		},
+		segmentGroup: {
+			display: "flex",
+			alignItems: "center",
+			gap: 1,
+			borderWidth: "1px",
+			borderStyle: "solid",
+			borderColor: "solid-gray.600",
+			rounded: 8,
+			py: 2,
+			px: 3,
+			bg: "white"
+		},
+		segment: {
+			...input_default.base,
+			borderWidth: "0px",
+			bg: "transparent",
+			px: 0,
+			minWidth: 10,
+			width: {
+				"&[data-type=year]": 16,
+				"&[data-type=month]": 11,
+				"&[data-type=day]": 11
+			},
+			textAlign: "right"
+		},
+		hiddenInput: { display: "none" }
+	},
+	variants: {
+		variant: {
+			consolidated: {},
+			separated: {}
+		},
+		size: {
+			sm: {},
+			md: {},
+			lg: {}
+		}
+	},
+	defaultVariants: {
+		variant: "consolidated",
+		size: "lg"
+	}
+});
 //#endregion
 //#region src/recipes/description-list.ts
 /**
@@ -1035,19 +1366,39 @@ var description_list_default = defineSlotRecipe({
 	],
 	base: {
 		root: {
+			/**
+			* margin-top: calc(16 / 16 * 1rem);
+			* margin-bottom: calc(16 / 16 * 1rem);
+			* display: grid;
+			* gap: calc(8 / 16 * 1rem) 0;
+			* overflow-wrap: anywhere;
+			*/
 			mt: 4,
 			mb: 4,
 			display: "grid",
 			rowGap: 2,
 			overflowWrap: "anywhere"
 		},
-		term: { fontWeight: "bold" },
+		term: { 
+		/**
+		* font-weight: bold;
+		*/
+fontWeight: "bold" },
 		marker: { display: "none" },
-		description: { ml: 8 }
+		description: { 
+		/**
+		* margin-left: calc(32 / 16 * 1rem);
+		*/
+ml: 8 }
 	},
 	variants: { marker: {
 		none: {},
 		bullet: { term: {
+			/**
+			* margin-left: calc(32 / 16 * 1rem);
+			* display: list-item;
+			* list-style-type: disc;
+			*/
 			ml: 8,
 			display: "list-item",
 			listStyleType: "disc"
@@ -1060,7 +1411,6 @@ var description_list_default = defineSlotRecipe({
 	} },
 	defaultVariants: { marker: "none" }
 });
-
 //#endregion
 //#region src/recipes/disclosure.ts
 /**
@@ -1070,10 +1420,21 @@ var description_list_default = defineSlotRecipe({
 var disclosure_default = defineSlotRecipe({
 	className: "disclosure",
 	description: "ディスクロージャーは、コンテンツのセクション内の任意の範囲を折りたたむことができるユーザーインターフェースです。※セクション単位で折りたたみ表示をする場合は「アコーディオン」コンポーネントを使用してください。",
-	slots: anatomy$3.extendWith("indicator").keys(),
+	slots: anatomy$4.extendWith("indicator").keys(),
 	base: {
-		root: { colorPalette: "keyColor" },
+		root: { 
+		/**
+		* group/disclosure
+		*/
+colorPalette: "keyColor" },
 		trigger: {
+			/**
+			* group/summary
+			* [&::-webkit-details-marker]:hidden
+			*/
+			/**
+			* flex w-fit cursor-default list-none items-start justify-start gap-2
+			*/
 			display: "flex",
 			width: "fit-content",
 			cursor: "default",
@@ -1081,11 +1442,23 @@ var disclosure_default = defineSlotRecipe({
 			alignItems: "start",
 			justifyContent: "start",
 			gap: 2,
+			/**
+			* remove button style
+			*/
 			textAlign: "start",
+			/**
+			* hover:underline hover:underline-offset-[calc(3/16*1rem)]
+			*/
 			_hover: {
 				textDecoration: "underline",
 				textUnderlineOffset: "calc(3 / 16 * 1rem)"
 			},
+			/**
+			* focus-visible:rounded-4 focus-visible:outline focus-visible:outline-4
+			* focus-visible:outline-black focus-visible:outline-offset-[calc(2/16*1rem)]
+			* focus-visible:bg-yellow-300
+			* focus-visible:ring-[calc(2/16*1rem)] focus-visible:ring-yellow-300
+			*/
 			_focusVisible: {
 				rounded: 4,
 				bg: "yellow.300",
@@ -1124,7 +1497,6 @@ var disclosure_default = defineSlotRecipe({
 		content: {}
 	}
 });
-
 //#endregion
 //#region src/recipes/divider.ts
 /**
@@ -1141,21 +1513,15 @@ var divider_default = defineRecipe({
 	} },
 	defaultVariants: { color: "gray-420" }
 });
-
-//#endregion
-//#region src/recipes/drawer.ts
-/**
-* source:
-* https://github.com/digital-go-jp/design-system-example-components-react/blob/main/src/components/Drawer/Drawer.stories.tsx
-* https://github.com/cschroeter/park-ui/blob/main/packages/preset/src/theme/recipes/drawer.ts
-*/
-const anatomy$13 = anatomy$4.extendWith("header", "body", "footer");
 var drawer_default = defineSlotRecipe({
 	className: "drawer",
 	description: "ブラウザ画面の四辺(上下左右端)から展開し、モバイルメニューなどのコンポーネントを格納可能なコンテナです。",
-	slots: anatomy$13.keys(),
+	slots: anatomy$5.extendWith("header", "body", "footer").keys(),
 	base: {
 		backdrop: {
+			/**
+			* backdrop:bg-opacity-gray-100 forced-colors:backdrop:bg-[#000b]
+			*/
 			backdropFilter: "blur(4px)",
 			background: "solid-gray.100/90",
 			height: "100vh",
@@ -1164,8 +1530,8 @@ var drawer_default = defineSlotRecipe({
 			left: 0,
 			width: "100vw",
 			zIndex: 10,
-			_open: { animation: "backdrop-in" },
-			_closed: { animation: "backdrop-out" }
+			_open: { animation: "fade-in 0.5s cubic-bezier(0.32, 0.72, 0, 1)" },
+			_closed: { animation: "fade-out 0.5s cubic-bezier(0.32, 0.72, 0, 1)" }
 		},
 		positioner: {
 			alignItems: "center",
@@ -1174,25 +1540,75 @@ var drawer_default = defineSlotRecipe({
 			justifyContent: "center",
 			position: "fixed",
 			top: 0,
-			width: 72,
-			zIndex: 1400
+			/**
+			* w-72
+			*/
+			width: {
+				base: "full",
+				"&[data-swipe-direction=right]": 72,
+				"&[data-swipe-direction=left]": 72
+			},
+			zIndex: 1400,
+			"&[data-swipe-direction=up]": { left: 0 },
+			"&[data-swipe-direction=down]": { left: 0 },
+			"&[data-swipe-direction=right]": { right: 0 },
+			"&[data-swipe-direction=left]": { left: 0 }
 		},
 		content: {
+			/**
+			* m-[unset] max-w-full max-h-[unset] overflow-visible start-auto
+			*/
 			margin: "unset",
 			maxWidth: "full",
 			maxHeight: "full",
 			overflow: "visible",
 			insetInlineStart: "auto",
 			width: "full",
+			/**
+			* bg-white shadow-2 border-l-transparent
+			*/
 			borderColor: "transparent",
 			background: "white",
 			boxShadow: 2,
+			/**
+			* grid grid-rows-[auto_1fr] h-dvh
+			*/
 			display: "grid",
 			gridTemplateRows: "auto 1fr",
-			height: "100dvh",
-			_hidden: { display: "none" }
+			height: "full",
+			_hidden: { display: "none" },
+			/**
+			* transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
+			* animation-duration: 0.5s;
+			* animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
+			*/
+			transition: "transform 0.5s cubic-bezier(0.32, 0.72, 0, 1)",
+			animationDuration: "0.5s",
+			animationTimingFunction: "cubic-bezier(0.32, 0.72, 0, 1)",
+			borderWidth: {
+				base: "0px",
+				"&[data-swipe-direction=right]": "0px 0px 0px 1px",
+				"&[data-swipe-direction=left]": "0px 1px 0px 0px",
+				"&[data-swipe-direction=down]": "1px 0px 0px 0px",
+				"&[data-swipe-direction=up]": "0px 0px 1px 0px"
+			},
+			_open: { animationName: {
+				"&[data-swipe-direction=up]": "slide-in-top",
+				"&[data-swipe-direction=down]": "slide-in-bottom",
+				"&[data-swipe-direction=left]": "slide-in-left",
+				"&[data-swipe-direction=right]": "slide-in-right"
+			} },
+			_closed: { animationName: {
+				"&[data-swipe-direction=up]": "slide-out-top",
+				"&[data-swipe-direction=down]": "slide-out-bottom",
+				"&[data-swipe-direction=left]": "slide-out-left",
+				"&[data-swipe-direction=right]": "slide-out-right"
+			} }
 		},
 		header: {
+			/**
+			* flex justify-end py-4 pl-4 pr-8
+			*/
 			display: "flex",
 			justifyContent: "start",
 			py: 4,
@@ -1200,25 +1616,16 @@ var drawer_default = defineSlotRecipe({
 		},
 		title: { textStyle: "std-20B-150" },
 		body: {
+			/**
+			* overflow-auto
+			*/
 			overflow: "auto",
 			px: 4,
 			py: 4,
 			textStyle: "std-17N-170"
 		}
-	},
-	variants: { placement: {
-		right: {
-			positioner: { right: 0 },
-			content: { borderLeftWidth: "1px" }
-		},
-		left: {
-			positioner: { left: 0 },
-			content: { borderRightWidth: "1px" }
-		}
-	} },
-	defaultVariants: { placement: "right" }
+	}
 });
-
 //#endregion
 //#region src/recipes/emergency-banner.ts
 /**
@@ -1230,6 +1637,9 @@ var emergency_banner_default = defineSlotRecipe({
 	slots: emergencyBannerAnatomy.keys(),
 	base: {
 		root: {
+			/**
+			* block px-2.5 py-3.5 border-[6px] bg-white desktop:p-[calc(26/16*1rem)] border-warning-orange-1
+			*/
 			display: "block",
 			px: {
 				base: 2.5,
@@ -1245,6 +1655,9 @@ var emergency_banner_default = defineSlotRecipe({
 			color: "solid-gray.800"
 		},
 		heading: {
+			/**
+			* text-std-20B-150 text-black desktop:text-std-24B-150
+			*/
 			color: "black",
 			textStyle: {
 				base: "std-20B-150",
@@ -1252,7 +1665,11 @@ var emergency_banner_default = defineSlotRecipe({
 			},
 			_before: { content: "\"【緊急】\"" }
 		},
-		body: { mt: {
+		body: { 
+		/**
+		* mt-2 desktop:mt-4
+		*/
+mt: {
 			base: 2,
 			md: 4
 		} },
@@ -1266,6 +1683,23 @@ var emergency_banner_default = defineSlotRecipe({
 			justifyContent: { md: "flex" }
 		},
 		button: {
+			/**
+			* relative block mx-auto
+			* p-[calc(18/16*1rem)] desktop:p-5
+			* w-full desktop:w-fit
+			* desktop:min-w-[50%]
+			* border-2 desktop:border-4 border-transparent
+			* bg-error-1 hover:bg-error-2
+			* text-white text-oln-16B-100 text-center
+			* rounded-12 desktop:rounded-16
+			* after:absolute after:inset-0 after:border-white
+			* after:border-2 desktop:after:border-4
+			* after:rounded-[calc(10/16*1rem)] desktop:after:rounded-12
+			* hover:underline hover:underline-offset-[calc(3/16*1rem)]
+			* focus-visible:outline focus-visible:outline-[calc(4/16*1rem)]
+			* focus-visible:outline-black focus-visible:outline-offset-[calc(2/16*1rem)]
+			* focus-visible:ring-[calc(2/16*1rem)] focus-visible:ring-yellow-300
+			*/
 			position: "relative",
 			display: "block",
 			mx: "auto",
@@ -1322,7 +1756,6 @@ var emergency_banner_default = defineSlotRecipe({
 		}
 	}
 });
-
 //#endregion
 //#region src/recipes/error-text.ts
 /**
@@ -1332,11 +1765,13 @@ var emergency_banner_default = defineSlotRecipe({
 var error_text_default = defineRecipe({
 	className: "error-text",
 	base: {
+		/**
+		* text-dns-16N-130 text-error-1
+		*/
 		textStyle: "dns-16N-130",
 		color: "error.1"
 	}
 });
-
 //#endregion
 //#region src/recipes/requirement-badge.ts
 /**
@@ -1346,11 +1781,13 @@ var error_text_default = defineRecipe({
 var requirement_badge_default = defineRecipe({
 	className: "requirement-badge",
 	base: {
+		/**
+		* text-oln-16N-100 text-red-800
+		*/
 		textStyle: "oln-16N-100",
 		color: "red.800"
 	}
 });
-
 //#endregion
 //#region src/recipes/support-text.ts
 /**
@@ -1360,11 +1797,13 @@ var requirement_badge_default = defineRecipe({
 var support_text_default = defineRecipe({
 	className: "support-text",
 	base: {
+		/**
+		* text-std-16N-170 text-solid-gray-600
+		*/
 		textStyle: "std-16N-170",
 		color: "solid-gray.600"
 	}
 });
-
 //#endregion
 //#region src/recipes/textarea.ts
 /**
@@ -1375,8 +1814,16 @@ var textarea_default = defineRecipe({
 	className: "textarea",
 	description: "テキストエリアコンポーネントは、1行以上のテキストを入力する場合に使用します。",
 	base: {
+		/**
+		* rounded-8 max-w-full p-4 aria-disabled:pointer-events-none
+		*/
 		rounded: 8,
 		p: 4,
+		/**
+		* text-std-16N-170 bg-white text-solid-gray-800
+		* aria-disabled:bg-solid-gray-50 aria-disabled:text-solid-gray-420
+		* aria-disabled:forced-colors:text-[GrayText]
+		*/
 		textStyle: "std-16N-170",
 		bg: {
 			base: "white",
@@ -1389,6 +1836,11 @@ var textarea_default = defineRecipe({
 				_highContrast: "GrayText"
 			}
 		},
+		/**
+		* border border-solid-gray-600 hover:border-black
+		* aria-disabled:border-solid-gray-300 aria-disabled:forced-colors:border-[GrayText]
+		* aria-[invalid=true]:border-error-1 aria-[invalid=true]:hover:border-red-1000
+		*/
 		borderStyle: {
 			base: "solid",
 			_readOnly: "dashed"
@@ -1406,6 +1858,11 @@ var textarea_default = defineRecipe({
 				_hover: "red.1000"
 			}
 		},
+		/**
+		* focus:outline focus:outline-4 focus:outline-black
+		* focus:outline-offset-[calc(2/16*1rem)]
+		* focus:ring-[calc(2/16*1rem)] focus:ring-yellow-300
+		*/
 		_focus: {
 			outlineStyle: "solid",
 			outlineWidth: "4px",
@@ -1415,7 +1872,6 @@ var textarea_default = defineRecipe({
 		}
 	}
 });
-
 //#endregion
 //#region src/recipes/field.ts
 /**
@@ -1458,8 +1914,6 @@ const field = defineSlotRecipe({
 	} },
 	defaultVariants: { size: "md" }
 });
-var field_default = field;
-
 //#endregion
 //#region src/recipes/fieldset.ts
 var fieldset_default = defineSlotRecipe({
@@ -1477,12 +1931,11 @@ var fieldset_default = defineSlotRecipe({
 	} },
 	defaultVariants: { size: "md" }
 });
-
 //#endregion
 //#region src/recipes/file-upload.ts
 var file_upload_default = defineSlotRecipe({
 	className: "file-upload",
-	slots: anatomy$5.extendWith("itemDetail").keys(),
+	slots: anatomy$6.extendWith("itemDetail").keys(),
 	base: {
 		root: {
 			display: "flex",
@@ -1532,7 +1985,7 @@ var file_upload_default = defineSlotRecipe({
 			display: "list-item",
 			color: {
 				base: "solid-gray.600",
-				"[data-status=rejected]": "error.1",
+				"&[data-status=rejected]": "error.1",
 				_marker: "solid-gray.600"
 			},
 			"& > *": {
@@ -1573,7 +2026,6 @@ var file_upload_default = defineSlotRecipe({
 		}
 	}
 });
-
 //#endregion
 //#region src/recipes/hamburger-menu-button.ts
 /**
@@ -1583,21 +2035,35 @@ var file_upload_default = defineSlotRecipe({
 var hamburger_menu_button_default = defineRecipe({
 	className: "hamburger-menu-button",
 	base: {
+		/**
+		* flex w-fit items-center text-oln-16N-100 rounded-6 touch-manipulation
+		*/
 		display: "flex",
 		width: "fit-content",
 		alignItems: "center",
 		textStyle: "oln-16N-100",
 		rounded: 6,
+		/**
+		* gap-x-1 px-3 pb-1.5 pt-1
+		*/
 		px: 3,
 		pb: 1.5,
 		pt: 1,
 		touchAction: "manipulation",
 		columnGap: 1.5,
+		/**
+		* hover:bg-solid-gray-50 hover:underline hover:underline-offset-[calc(3/16*1rem)]
+		*/
 		_hover: {
 			bg: "solid-gray.50",
 			textDecoration: "underline",
 			textUnderlineOffset: "calc(3 / 16 * 1rem)"
 		},
+		/**
+		* focus-visible:outline focus-visible:outline-4 focus-visible:outline-black
+		* focus-visible:outline-offset-[calc(2/16*1rem)] focus-visible:bg-yellow-300
+		* focus-visible:ring-[calc(2/16*1rem)] focus-visible:ring-yellow-300
+		*/
 		_focusVisible: {
 			bg: "yellow.300",
 			outlineStyle: "solid",
@@ -1606,10 +2072,12 @@ var hamburger_menu_button_default = defineRecipe({
 			outlineOffset: .5,
 			focusBox: "calc({spacing.1} / 2)"
 		},
+		/**
+		* override reset
+		*/
 		cursor: "pointer"
 	}
 });
-
 //#endregion
 //#region src/recipes/legend.ts
 /**
@@ -1619,6 +2087,9 @@ var hamburger_menu_button_default = defineRecipe({
 var legend_default = defineRecipe({
 	className: "legend",
 	base: {
+		/**
+		* flex w-fit items-center gap-2 text-solid-gray-800
+		*/
 		display: "flex",
 		width: "fit-content",
 		alignItems: "center",
@@ -1626,20 +2097,34 @@ var legend_default = defineRecipe({
 		color: "solid-gray.800"
 	},
 	variants: { size: {
-		sm: { textStyle: "std-16B-170" },
-		md: { textStyle: "std-17B-170" },
-		lg: { textStyle: "std-18B-160" }
+		sm: { 
+		/**
+		* data-[size=sm]:text-std-16B-170
+		*/
+textStyle: "std-16B-170" },
+		md: { 
+		/**
+		* data-[size=md]:text-std-17B-170
+		*/
+textStyle: "std-17B-170" },
+		lg: { 
+		/**
+		* data-[size=lg]:text-std-18B-160
+		*/
+textStyle: "std-18B-160" }
 	} },
 	defaultVariants: { size: "md" }
 });
-
 //#endregion
 //#region src/recipes/list.ts
 var list_default = defineRecipe({
 	className: "list",
-	base: { py: 1 }
+	base: { 
+	/**
+	* py-1
+	*/
+py: 1 }
 });
-
 //#endregion
 //#region src/recipes/menu-item.ts
 /**
@@ -1649,6 +2134,12 @@ var list_default = defineRecipe({
 var menu_item_default = defineRecipe({
 	className: "menu-item",
 	base: {
+		/**
+		* flex relative items-center text-nowrap
+		* bg-white hover:bg-solid-gray-50 focus-visible:bg-yellow-300
+		* text-oln-16N-100 text-solid-gray-800
+		* ${isCurrent ? '!text-blue-1000 !bg-blue-100 font-bold' : ''}
+		*/
 		display: "flex",
 		position: "relative",
 		alignItems: "center",
@@ -1683,14 +2174,26 @@ var menu_item_default = defineRecipe({
 			_selected: "bold",
 			_checked: "bold"
 		},
+		/**
+		* hover:underline hover:underline-offset-[calc(3/16*1rem)]
+		*/
 		_hover: {
 			textDecoration: "underline",
 			textUnderlineOffset: "calc(3 / 16 * 1rem)"
 		},
+		/**
+		* py-3 pl-3 pr-6 gap-x-2
+		*/
 		py: 3,
 		pl: 3,
 		pr: 6,
 		columnGap: 2,
+		/**
+		* focus-visible:outline focus-visible:outline-4 focus-visible:outline-black
+		* focus-visible:-outline-offset-4
+		* focus-visible:ring-[calc(6/16*1rem)] focus-visible:ring-inset
+		* focus-visible:ring-yellow-300
+		*/
 		_focusVisible: {
 			rounded: 4,
 			outlineStyle: "solid",
@@ -1719,6 +2222,9 @@ var menu_item_default = defineRecipe({
 			} }
 		},
 		isCondensed: { true: {
+			/**
+			* ${isCondensed ? 'py-1.5 pl-1.5 pr-4 gap-x-1.5'}
+			*/
 			py: 1.5,
 			pl: 1.5,
 			pr: 4,
@@ -1730,7 +2236,6 @@ var menu_item_default = defineRecipe({
 		isCondensed: false
 	}
 });
-
 //#endregion
 //#region src/recipes/menu.ts
 /**
@@ -1741,7 +2246,7 @@ var menu_item_default = defineRecipe({
 const itemStyle = { ...menu_item_default.base };
 var menu_default = defineSlotRecipe({
 	className: "menu",
-	slots: anatomy$6.keys(),
+	slots: anatomy$7.keys(),
 	base: {
 		content: {
 			minWidth: "fit-content",
@@ -1804,1200 +2309,1592 @@ var menu_default = defineSlotRecipe({
 	} } },
 	defaultVariants: { isCondensed: false }
 });
-
 //#endregion
-//#region src/recipes/menu-list.ts
-var menu_list_default = defineSlotRecipe({
-	className: "menu-list",
-	slots: menuListAnatomy.keys(),
-	base: {
-		root: {},
-		label: {
-			py: 3,
-			pl: 3,
-			pr: 6,
-			textStyle: "oln-17B-100",
-			textWrap: "nowrap",
-			display: "block",
-			mb: 2
-		},
-		content: {},
-		item: { ...menu_item_default.base },
-		itemGroup: { my: 1 },
-		itemGroupLabel: {
-			...menu_item_default.base,
-			position: "sticky",
-			top: 0,
-			bg: "white"
-		},
-		itemText: {},
-		itemIndicator: {
-			position: "absolute",
-			top: "50%",
-			right: 4,
-			transform: "translateY(-50%)"
-		}
-	},
-	variants: {
-		variant: {
-			standard: {
-				item: { ...menu_item_default.variants?.variant?.standard },
-				itemGroupLabel: { ...menu_item_default.variants?.variant?.standard }
+//#region src/recipes/index.ts
+const recipes = {
+	accordion: accordion_default,
+	blockquote: blockquote_default,
+	breadcrumb: breadcrumb_default,
+	button: button_default,
+	card: card_default,
+	checkbox: checkbox_default,
+	chipLabel: chip_label_default,
+	chipTag: chip_tag_default,
+	datePicker: date_picker_default,
+	dateInput: date_input_default,
+	descriptionList: description_list_default,
+	disclosure: disclosure_default,
+	digitalGoDivider: divider_default,
+	drawer: drawer_default,
+	emergencyBanner: emergency_banner_default,
+	errorText: error_text_default,
+	field,
+	fieldset: fieldset_default,
+	fileUpload: file_upload_default,
+	hamburgerMenuButton: hamburger_menu_button_default,
+	input: input_default,
+	label: label_default,
+	legend: legend_default,
+	link: link_default,
+	list: list_default,
+	menu: menu_default,
+	menuItem: menu_item_default,
+	menuList: defineSlotRecipe({
+		className: "menu-list",
+		slots: menuListAnatomy.keys(),
+		base: {
+			root: {},
+			label: {
+				py: 3,
+				pl: 3,
+				pr: 6,
+				textStyle: "oln-17B-100",
+				textWrap: "nowrap",
+				display: "block",
+				mb: 2
+			},
+			content: {},
+			item: { ...menu_item_default.base },
+			itemGroup: { my: 1 },
+			itemGroupLabel: {
+				...menu_item_default.base,
+				position: "sticky",
+				top: 0,
+				bg: "white"
 			},
-			boxed: {
-				item: { ...menu_item_default.variants?.variant?.boxed },
-				itemGroupLabel: { ...menu_item_default.variants?.variant?.boxed }
+			itemText: {},
+			itemIndicator: {
+				position: "absolute",
+				top: "50%",
+				right: 4,
+				transform: "translateY(-50%)"
 			}
 		},
-		isCondensed: { true: {} }
-	},
-	defaultVariants: {
-		variant: "standard",
-		isCondensed: false
-	}
-});
-
-//#endregion
-//#region src/recipes/notification-banner.ts
-/**
-* source:
-* https://github.com/digital-go-jp/design-system-example-components-react/tree/main/src/components/NotificationBanner
-* https://github.com/digital-go-jp/design-system-example-components-html/blob/main/src/components/notification-banner
-*
-* inspired by Park UI
-* https://park-ui.com/react/docs/components/alert
-*/
-var notification_banner_default = defineSlotRecipe({
-	className: "notification-banner",
-	description: "サイト/サービス全体に関わる、またはページや要素単位における重要度の高い情報を、ユーザーの操作に関わらず、サイト/サービス側からユーザーへ提示する場合に用いる通知バナーです。通知に対するユーザーアクションを要求することが可能です。メンテナンスを通知したい、ユーザーの対応が必要な情報を通知してアクションさせたい、といった要求に対応することができます。",
-	slots: notificationBannerAnatomy.keys(),
-	base: {
-		root: {
-			"--icon-size": {
-				base: "{spacing.6}",
-				md: "{spacing.9}"
-			},
-			"--icon-scale": {
-				base: 24 / 36,
-				md: 1
-			},
-			p: {
-				base: 4,
-				md: 6
-			},
-			borderColor: "currentcolor",
-			display: "grid",
-			gridTemplateColumns: "var(--icon-size) 1fr minmax(0, auto)",
-			columnGap: {
-				base: 3,
-				md: 6
+		variants: {
+			variant: {
+				standard: {
+					item: { ...menu_item_default.variants?.variant?.standard },
+					itemGroupLabel: { ...menu_item_default.variants?.variant?.standard }
+				},
+				boxed: {
+					item: { ...menu_item_default.variants?.variant?.boxed },
+					itemGroupLabel: { ...menu_item_default.variants?.variant?.boxed }
+				}
 			},
-			rowGap: 4
+			isCondensed: { true: {} }
 		},
-		header: {
-			display: "grid",
-			gridTemplateColumns: "subgrid",
-			gridColumnStart: 2,
-			gridColumnEnd: -1,
-			placeItems: "start",
-			"& > *:last-child": { gridColumnEnd: -1 }
-		},
-		icon: {
-			mt: {
-				base: .5,
-				md: 0
+		defaultVariants: {
+			variant: "standard",
+			isCondensed: false
+		}
+	}),
+	notificationBanner: defineSlotRecipe({
+		className: "notification-banner",
+		description: "サイト/サービス全体に関わる、またはページや要素単位における重要度の高い情報を、ユーザーの操作に関わらず、サイト/サービス側からユーザーへ提示する場合に用いる通知バナーです。通知に対するユーザーアクションを要求することが可能です。メンテナンスを通知したい、ユーザーの対応が必要な情報を通知してアクションさせたい、といった要求に対応することができます。",
+		slots: notificationBannerAnatomy.keys(),
+		base: {
+			root: {
+				/**
+				* [--icon-size:calc(24/16*1rem)] desktop:[--icon-size:calc(36/16*1rem)]
+				*/
+				"--icon-size": {
+					base: "{spacing.6}",
+					md: "{spacing.9}"
+				},
+				"--icon-scale": {
+					base: 24 / 36,
+					md: 1
+				},
+				/**
+				* p-4 desktop:p-6 border-current
+				*/
+				p: {
+					base: 4,
+					md: 6
+				},
+				borderColor: "currentcolor",
+				/**
+				* grid grid-cols-[var(--icon-size)_1fr_minmax(0,auto)]
+				* gap-x-3 desktop:gap-x-6 gap-y-4
+				*/
+				display: "grid",
+				gridTemplateColumns: "var(--icon-size) 1fr minmax(0, auto)",
+				columnGap: {
+					base: 3,
+					md: 6
+				},
+				rowGap: 4
+			},
+			header: {
+				/**
+				* grid grid-cols-subgrid col-start-2 -col-end-1 place-items-start
+				[&>*:last-child]:-col-end-1
+				*/
+				display: "grid",
+				gridTemplateColumns: "subgrid",
+				gridColumnStart: 2,
+				gridColumnEnd: -1,
+				placeItems: "start",
+				"& > *:last-child": { gridColumnEnd: -1 }
+			},
+			icon: {
+				/**
+				* mt-[calc(2/16*1rem)] desktop:mt-0
+				*/
+				mt: {
+					base: .5,
+					md: 0
+				},
+				/**
+				* h-auto max-w-full
+				*/
+				height: "auto",
+				maxWidth: "full",
+				/**
+				* icon element
+				* instead of icon component
+				*/
+				_before: {
+					content: "\"\"",
+					display: "block",
+					bg: "currentColor",
+					width: "36px",
+					height: "36px",
+					transformOrigin: "left center",
+					transform: "scale(var(--icon-scale))"
+				}
 			},
-			height: "auto",
-			maxWidth: "full",
-			_before: {
-				content: "\"\"",
-				display: "block",
-				bg: "currentColor",
-				width: "36px",
-				height: "36px",
-				transformOrigin: "left center",
-				transform: "scale(var(--icon-scale))"
-			}
-		},
-		close: {
-			_before: {
-				content: "\"\"",
-				display: "block",
-				mt: .5,
-				width: 6,
-				height: 6,
-				bg: "currentColor",
-				clipPath: "path('m6.4 18.6-1-1 5.5-5.6-5.6-5.6 1.1-1 5.6 5.5 5.6-5.6 1 1.1L13 12l5.6 5.6-1 1L12 13l-5.6 5.6Z')"
+			close: {
+				_before: {
+					content: "\"\"",
+					display: "block",
+					mt: .5,
+					width: 6,
+					height: 6,
+					bg: "currentColor",
+					clipPath: "path('m6.4 18.6-1-1 5.5-5.6-5.6-5.6 1.1-1 5.6 5.5 5.6-5.6 1 1.1L13 12l5.6 5.6-1 1L12 13l-5.6 5.6Z')"
+				},
+				...hamburger_menu_button_default.base,
+				display: "inline-flex",
+				gap: 1,
+				mr: -3,
+				color: "solid-gray.900"
+			},
+			heading: {
+				/**
+				* text-solid-gray-900 col-start-1 desktop:mt-0.5
+				* text-std-17B-170 desktop:text-std-20B-160
+				*
+				* @todo
+				* std-20B-160 doesn't exist and replace it to std-20B-150
+				*/
+				textStyle: {
+					base: "std-17B-170",
+					md: "std-20B-150"
+				},
+				color: "solid-gray.900",
+				gridColumnStart: 1,
+				mt: {
+					base: "auto",
+					md: .5
+				}
 			},
-			...hamburger_menu_button_default.base,
-			display: "inline-flex",
-			gap: 1,
-			mr: -3,
-			color: "solid-gray.900"
-		},
-		heading: {
-			textStyle: {
-				base: "std-17B-170",
-				md: "std-20B-150"
-			},
-			color: "solid-gray.900",
-			gridColumnStart: 1,
-			mt: {
-				base: "auto",
-				md: .5
+			body: {
+				/**
+				* col-start-1 -col-end-1 desktop:col-start-2 text-std-16N-170 text-solid-gray-800
+				*/
+				gridColumnStart: {
+					base: 1,
+					md: 2
+				},
+				gridColumnEnd: -1,
+				textStyle: "std-16N-170",
+				color: "solid-gray.800"
+			},
+			actions: {
+				/**
+				* margin-bottom: calc(-8 / 16 * 1rem);
+				* display: grid;
+				* gap: calc(8 / 16 * 1rem);
+				* grid-column: 1 / 4;
+				* @media (min-width: 48rem) {
+				*  .dads-notification-banner__actions {
+				*    grid-auto-flow: column;
+				*    gap: calc(16 / 16 * 1rem);
+				*    grid-column: 2 / 4;
+				*    justify-content: end;
+				*  }
+				* }
+				*/
+				mb: -2,
+				display: "grid",
+				gap: {
+					base: 2,
+					md: 4
+				},
+				gridColumn: {
+					base: "1 / 4",
+					md: "2 / 4"
+				},
+				gridAutoFlow: { md: "column" },
+				justifyContent: { md: "end" }
 			}
 		},
-		body: {
-			gridColumnStart: {
-				base: 1,
-				md: 2
+		variants: {
+			type: {
+				success: {
+					root: {
+						/**
+						* text-success-2 [--color-chip-color:currentColor]
+						*/
+						color: "success.2",
+						"--color-chip-color": "currentColor"
+					},
+					icon: { _before: { clipPath: "path('M18 0C8.064 0 0 8.064 0 18C0 27.936 8.064 36 18 36C27.936 36 36 27.936 36 18C36 8.064 27.936 0 18 0Z M14.4 27L5.4 18L7.938 15.462L14.4 21.906L28.062 8.244L30.6 10.8L14.4 27Z')" } },
+					actions: { "& button": { colorPalette: "green" } }
+				},
+				error: {
+					root: {
+						/**
+						* text-error-1 [--color-chip-color:currentColor]
+						*/
+						color: "error.1",
+						"--color-chip-color": "currentColor"
+					},
+					icon: { _before: { clipPath: "path('M10.82 35.3.74 25.22v-14.4L10.82.74h14.4L35.3 10.82v14.4L25.22 35.3h-14.4Zm7.2-14.592 5.472 5.472 2.688-2.688-5.472-5.472 5.472-5.472-2.688-2.688-5.472 5.472-5.472-5.472-2.688 2.688 5.472 5.472-5.472 5.472 2.688 2.688 5.472-5.472Z')" } },
+					actions: { "& button": { colorPalette: "red" } }
+				},
+				warning: {
+					root: {
+						/**
+						* text-warning-yellow-2 [--color-chip-color:theme(colors.yellow.400)]
+						*/
+						color: "warning.yellow.2",
+						"--color-chip-color": "{colors.yellow.400}"
+					},
+					icon: { _before: { clipPath: "path('M0 34.0909H36L18 3L0 34.0909ZM19.6364 29.1818H16.3636V25.9091H19.6364V29.1818ZM19.6364 22.6364H16.3636V16.0909H19.6364V22.6364Z')" } },
+					actions: { "& button": { colorPalette: "yellow" } }
+				},
+				info1: {
+					root: {
+						/**
+						* text-blue-900 [--color-chip-color:currentColor]
+						*/
+						color: "blue.900",
+						"--color-chip-color": "currentColor"
+					},
+					icon: { _before: { clipPath: "path('M18 0C8.064 0 0 8.064 0 18C0 27.936 8.064 36 18 36C27.936 36 36 27.936 36 18C36 8.064 27.936 0 18 0ZM19.8 27H16.2V16.2H19.8V27ZM19.8 12.6H16.2V9H19.8V12.6Z')" } },
+					actions: { "& button": { colorPalette: "blue" } }
+				},
+				info2: {
+					root: {
+						/**
+						* text-solid-gray-536 [--color-chip-color:currentColor]
+						*/
+						color: "solid-gray.536",
+						"--color-chip-color": "currentColor"
+					},
+					icon: { _before: { clipPath: "path('M18 0C8.064 0 0 8.064 0 18C0 27.936 8.064 36 18 36C27.936 36 36 27.936 36 18C36 8.064 27.936 0 18 0ZM19.8 27H16.2V16.2H19.8V27ZM19.8 12.6H16.2V9H19.8V12.6Z')" } },
+					actions: { "& button": { colorPalette: "solid-gray" } }
+				}
 			},
-			gridColumnEnd: -1,
-			textStyle: "std-16N-170",
-			color: "solid-gray.800"
+			bannerStyle: {
+				standard: { root: {
+					/**
+					* border-[3px] rounded-12
+					*/
+					borderWidth: "3px",
+					rounded: 12
+				} },
+				"color-chip": { root: {
+					/**
+					* border-2 !pl-6 desktop:!pl-10
+					* shadow-[inset_8px_0_0_0_var(--color-chip-color)]
+					* desktop:shadow-[inset_16px_0_0_0_var(--color-chip-color)]
+					*/
+					borderWidth: "2px",
+					pl: {
+						base: 6,
+						md: 10
+					},
+					shadow: "inset 16px 0 0 0 var(--color-chip-color)"
+				} }
+			}
 		},
-		actions: {
-			mb: -2,
-			display: "grid",
-			gap: {
-				base: 2,
-				md: 4
+		defaultVariants: {
+			type: "info1",
+			bannerStyle: "standard"
+		}
+	}),
+	orderedList: defineRecipe({
+		className: "ordered-list",
+		base: {
+			/**
+			* pl-8 list-[revert]
+			*/
+			pl: 8,
+			listStyle: "revert",
+			/**
+			* [&_:where(ol,ul)]:mt-1 [&_:where(ol,ul)]:-mb-1
+			*/
+			"&:where(ol,ul)": {
+				mt: 1,
+				mb: -1
+			}
+		}
+	}),
+	progress: defineSlotRecipe({
+		className: "progress",
+		description: "プログレスインジケーターは、ユーザーのアクションに対して処理進行中であることを通知します。データ取得リクエストの応答を待っていることをユーザーに伝えたいといった要求に対応します。",
+		slots: anatomy$8.keys(),
+		base: {
+			root: {
+				display: "flex",
+				alignItems: "center",
+				colorPalette: "keyColor"
+			},
+			track: {
+				height: "4px",
+				bg: "colorPalette.500",
+				rounded: "full",
+				overflow: "hidden",
+				position: "relative"
+			},
+			range: {
+				bg: "colorPalette.1200",
+				height: "full",
+				outlineStyle: "solid",
+				outlineWidth: "1px",
+				outlineColor: "white",
+				rounded: "full",
+				transition: "width 0.2s ease-in-out",
+				"--translate-x": "-100%",
+				_indeterminate: {
+					"--animate-from-x": "-40%",
+					"--animate-to-x": "100%",
+					position: "absolute",
+					willChange: "left",
+					minWidth: "50%",
+					animation: "position 1s ease infinite normal none running",
+					backgroundImage: `linear-gradient(to right, transparent 0%, var(--track-color) 50%, transparent 100%)`
+				}
 			},
-			gridColumn: {
-				base: "1 / 4",
-				md: "2 / 4"
+			circle: { _indeterminate: { animation: "spin 2s linear infinite" } },
+			circleTrack: { stroke: "colorPalette.500" },
+			circleRange: {
+				stroke: "colorPalette.1200",
+				strokeLinecap: "round",
+				transitionProperty: "stroke-dashoffset, stroke-dasharray",
+				transitionDuration: "0.6s",
+				_indeterminate: { animation: "circular-progress 1.5s linear infinite" }
 			},
-			gridAutoFlow: { md: "column" },
-			justifyContent: { md: "end" }
-		}
-	},
-	variants: {
-		type: {
-			success: {
+			label: { textStyle: "std-16N-170" }
+		},
+		variants: { layout: {
+			vertical: {
 				root: {
-					color: "success.2",
-					"--color-chip-color": "currentColor"
+					flexDirection: "column",
+					gap: 4,
+					"--size": "48px",
+					"--thickness": "4px"
 				},
-				icon: { _before: { clipPath: "path('M18 0C8.064 0 0 8.064 0 18C0 27.936 8.064 36 18 36C27.936 36 36 27.936 36 18C36 8.064 27.936 0 18 0Z M14.4 27L5.4 18L7.938 15.462L14.4 21.906L28.062 8.244L30.6 10.8L14.4 27Z')" } },
-				actions: { "& button": { colorPalette: "green" } }
+				track: { width: "240px" }
 			},
-			error: {
+			horizontal: {
 				root: {
-					color: "error.1",
-					"--color-chip-color": "currentColor"
+					flexDirection: "row",
+					gap: 2,
+					"--size": "24px",
+					"--thickness": "2px"
 				},
-				icon: { _before: { clipPath: "path('M10.82 35.3.74 25.22v-14.4L10.82.74h14.4L35.3 10.82v14.4L25.22 35.3h-14.4Zm7.2-14.592 5.472 5.472 2.688-2.688-5.472-5.472 5.472-5.472-2.688-2.688-5.472 5.472-5.472-5.472-2.688 2.688 5.472 5.472-5.472 5.472 2.688 2.688 5.472-5.472Z')" } },
-				actions: { "& button": { colorPalette: "red" } }
-			},
-			warning: {
-				root: {
-					color: "warning.yellow.2",
-					"--color-chip-color": "{colors.yellow.400}"
+				track: { width: "80px" }
+			}
+		} },
+		defaultVariants: { layout: "vertical" }
+	}),
+	radioGroup: defineSlotRecipe({
+		className: "radio-group",
+		slots: anatomy$9.keys(),
+		base: {
+			root: {
+				display: "flex",
+				colorPalette: "keyColor",
+				_vertical: {
+					flexDirection: "column",
+					gap: 0
 				},
-				icon: { _before: { clipPath: "path('M0 34.0909H36L18 3L0 34.0909ZM19.6364 29.1818H16.3636V25.9091H19.6364V29.1818ZM19.6364 22.6364H16.3636V16.0909H19.6364V22.6364Z')" } },
-				actions: { "& button": { colorPalette: "yellow" } }
+				_horizonal: {
+					flexDirection: "row",
+					gap: 4
+				}
 			},
-			info1: {
-				root: {
-					color: "blue.900",
-					"--color-chip-color": "currentColor"
-				},
-				icon: { _before: { clipPath: "path('M18 0C8.064 0 0 8.064 0 18C0 27.936 8.064 36 18 36C27.936 36 36 27.936 36 18C36 8.064 27.936 0 18 0ZM19.8 27H16.2V16.2H19.8V27ZM19.8 12.6H16.2V9H19.8V12.6Z')" } },
-				actions: { "& button": { colorPalette: "blue" } }
+			label: { ...legend_default.base },
+			item: {
+				/**
+				* flex w-fit items-start py-2
+				*/
+				display: "flex",
+				width: "fit-content",
+				alignItems: "start",
+				py: 2
 			},
-			info2: {
-				root: {
-					color: "solid-gray.536",
-					"--color-chip-color": "currentColor"
-				},
-				icon: { _before: { clipPath: "path('M18 0C8.064 0 0 8.064 0 18C0 27.936 8.064 36 18 36C27.936 36 36 27.936 36 18C36 8.064 27.936 0 18 0ZM19.8 27H16.2V16.2H19.8V27ZM19.8 12.6H16.2V9H19.8V12.6Z')" } },
-				actions: { "& button": { colorPalette: "solid-gray" } }
-			}
-		},
-		bannerStyle: {
-			standard: { root: {
-				borderWidth: "3px",
-				rounded: 12
-			} },
-			"color-chip": { root: {
-				borderWidth: "2px",
-				pl: {
-					base: 6,
-					md: 10
+			itemControl: {
+				/**
+				* flex items-center justify-center shrink-0 rounded-full
+				* has-[input:hover:not(:focus):not([aria-disabled="true"])]:bg-solid-gray-420
+				*/
+				/**
+				* appearance-none size-[calc(5/6*100%)] rounded-full
+				*/
+				appearance: "none",
+				rounded: "full",
+				width: "calc(var(--radio-size) * 5 / 6)",
+				height: "calc(var(--radio-size) * 5 / 6)",
+				m: "calc(var(--radio-size) / 12)",
+				flexShrink: 0,
+				/**
+				* bg-white aria-disabled:!bg-solid-gray-50
+				*/
+				bg: {
+					base: "white",
+					_disabled: "solid-gray.50"
 				},
-				shadow: "inset 16px 0 0 0 var(--color-chip-color)"
-			} }
-		}
-	},
-	defaultVariants: {
-		type: "info1",
-		bannerStyle: "standard"
-	}
-});
-
-//#endregion
-//#region src/recipes/ordered-list.ts
-/**
-* source:
-* https://github.com/digital-go-jp/design-system-example-components-react/blob/main/src/components/Ol/Ol.tsx
-*/
-var ordered_list_default = defineRecipe({
-	className: "ordered-list",
-	base: {
-		pl: 8,
-		listStyle: "revert",
-		"&:where(ol,ul)": {
-			mt: 1,
-			mb: -1
-		}
-	}
-});
-
-//#endregion
-//#region src/recipes/progress.ts
-/**
-* references:
-* https://github.com/cschroeter/park-ui/blob/main/packages/preset/src/theme/recipes/progress.ts
-* https://github.com/chakra-ui/chakra-ui/blob/main/packages/react/src/theme/recipes/progress.ts
-* https://github.com/chakra-ui/chakra-ui/blob/main/packages/react/src/theme/recipes/progress-circle.ts
-*/
-var progress_default = defineSlotRecipe({
-	className: "progress",
-	description: "プログレスインジケーターは、ユーザーのアクションに対して処理進行中であることを通知します。データ取得リクエストの応答を待っていることをユーザーに伝えたいといった要求に対応します。",
-	slots: anatomy$7.keys(),
-	base: {
-		root: {
-			display: "flex",
-			alignItems: "center",
-			colorPalette: "keyColor"
-		},
-		track: {
-			height: "4px",
-			bg: "colorPalette.500",
-			rounded: "full",
-			overflow: "hidden",
-			position: "relative"
-		},
-		range: {
-			bg: "colorPalette.1200",
-			height: "full",
-			outlineStyle: "solid",
-			outlineWidth: "1px",
-			outlineColor: "white",
-			rounded: "full",
-			transition: "width 0.2s ease-in-out",
-			"--translate-x": "-100%",
-			_indeterminate: {
-				"--animate-from-x": "-40%",
-				"--animate-to-x": "100%",
-				position: "absolute",
-				willChange: "left",
-				minWidth: "50%",
-				animation: "position 1s ease infinite normal none running",
-				backgroundImage: `linear-gradient(to right, transparent 0%, var(--track-color) 50%, transparent 100%)`
-			}
-		},
-		circle: { _indeterminate: { animation: "spin 2s linear infinite" } },
-		circleTrack: { stroke: "colorPalette.500" },
-		circleRange: {
-			stroke: "colorPalette.1200",
-			strokeLinecap: "round",
-			transitionProperty: "stroke-dashoffset, stroke-dasharray",
-			transitionDuration: "0.6s",
-			_indeterminate: { animation: "circular-progress 1.5s linear infinite" }
-		},
-		label: { textStyle: "std-16N-170" }
-	},
-	variants: { layout: {
-		vertical: {
-			root: {
-				flexDirection: "column",
-				gap: 4,
-				"--size": "48px",
-				"--thickness": "4px"
-			},
-			track: { width: "240px" }
-		},
-		horizontal: {
-			root: {
-				flexDirection: "row",
-				gap: 2,
-				"--size": "24px",
-				"--thickness": "2px"
-			},
-			track: { width: "80px" }
-		}
-	} },
-	defaultVariants: { layout: "vertical" }
-});
-
-//#endregion
-//#region src/recipes/radio-group.ts
-/**
-* source:
-* https://github.com/digital-go-jp/design-system-example-components-react/blob/main/src/components/Radio/Radio.tsx
-*/
-var radio_group_default = defineSlotRecipe({
-	className: "radio-group",
-	slots: anatomy$8.keys(),
-	base: {
-		root: {
-			display: "flex",
-			colorPalette: "keyColor",
-			_vertical: {
-				flexDirection: "column",
-				gap: 0
-			},
-			_horizonal: {
-				flexDirection: "row",
-				gap: 4
-			}
-		},
-		label: { ...legend_default.base },
-		item: {
-			display: "flex",
-			width: "fit-content",
-			alignItems: "start",
-			py: 2
-		},
-		itemControl: {
-			appearance: "none",
-			rounded: "full",
-			width: "calc(var(--radio-size) * 5 / 6)",
-			height: "calc(var(--radio-size) * 5 / 6)",
-			m: "calc(var(--radio-size) / 12)",
-			flexShrink: 0,
-			bg: {
-				base: "white",
-				_disabled: "solid-gray.50"
-			},
-			borderColor: {
-				base: "solid-gray.600",
-				_hover: "black",
-				_highContrast: { base: "ButtonText" },
-				_checked: {
-					base: "colorPalette.primary",
-					_hover: "colorPalette.primary.200",
+				borderColor: {
+					/**
+					* border-solid-gray-600
+					* hover:border-black
+					* checked:border-blue-900
+					* checked:hover:border-blue-1100
+					* forced-colors:!border-[ButtonText] forced-colors:checked:!border-[Highlight]
+					*/
+					base: "solid-gray.600",
+					_hover: "black",
+					_highContrast: { base: "ButtonText" },
+					_checked: {
+						base: "colorPalette.primary",
+						_hover: "colorPalette.primary.200",
+						_disabled: {
+							base: "solid-gray.300",
+							_highContrast: "GrayText"
+						},
+						_highContrast: "Highlight"
+					},
+					/**
+					* data-[error]:border-error-1 data-[error]:hover:border-red-1000
+					*/
+					_invalid: {
+						base: "error.1",
+						_hover: "red.1000",
+						_disabled: "solid-gray.300"
+					},
+					/**
+					* aria-disabled:!border-solid-gray-300
+					* forced-colors:aria-disabled:!border-[GrayText]
+					*/
 					_disabled: {
 						base: "solid-gray.300",
 						_highContrast: "GrayText"
-					},
-					_highContrast: "Highlight"
+					}
 				},
-				_invalid: {
-					base: "error.1",
-					_hover: "red.1000",
-					_disabled: "solid-gray.300"
+				/**
+				* outline on hover
+				* has-[input:hover:not(:focus):not([aria-disabled="true"])]:bg-solid-gray-420
+				*/
+				"&:is(:hover, [data-hover]):not([aria-disabled=\"true\"])": {
+					outlineStyle: "solid",
+					outlineWidth: "calc(var(--radio-size) / 12)",
+					outlineColor: "solid-gray.420",
+					_focus: {
+						outlineStyle: "solid",
+						outlineWidth: "4px",
+						outlineColor: "black",
+						outlineOffset: .5,
+						focusBox: "calc({spacing.1} / 2)"
+					}
 				},
-				_disabled: {
-					base: "solid-gray.300",
-					_highContrast: "GrayText"
-				}
-			},
-			"&:is(:hover, [data-hover]):not([aria-disabled=\"true\"])": {
-				outlineStyle: "solid",
-				outlineWidth: "calc(var(--radio-size) / 12)",
-				outlineColor: "solid-gray.420",
+				/**
+				* focus:outline focus:outline-4 focus:outline-black
+				* focus:outline-offset-[calc(2/16*1rem)]
+				* focus:ring-[calc(2/16*1rem)] focus:ring-yellow-300
+				*/
 				_focus: {
 					outlineStyle: "solid",
 					outlineWidth: "4px",
 					outlineColor: "black",
 					outlineOffset: .5,
 					focusBox: "calc({spacing.1} / 2)"
-				}
-			},
-			_focus: {
-				outlineStyle: "solid",
-				outlineWidth: "4px",
-				outlineColor: "black",
-				outlineOffset: .5,
-				focusBox: "calc({spacing.1} / 2)"
-			},
-			_before: {
-				content: "\"\"",
-				display: "none",
-				width: "full",
-				height: "full",
-				clipPath: "circle(calc(5 / 16 * 100%))",
-				bg: "white"
-			},
-			_checked: {
+				},
 				_before: {
-					display: "block",
-					bg: {
-						base: "colorPalette.primary",
-						_hover: "colorPalette.primary.200",
-						_highContrast: "Highlight"
-					}
+					/**
+					* before:hidden
+					* before:size-full
+					* before:[clip-path:circle(calc(5/16*100%))]
+					* before:bg-white
+					*/
+					content: "\"\"",
+					display: "none",
+					width: "full",
+					height: "full",
+					clipPath: "circle(calc(5 / 16 * 100%))",
+					bg: "white"
 				},
-				_invalid: { _before: { bg: {
-					base: "error.1",
-					_hover: "red.1000"
-				} } },
-				_disabled: {
-					_before: { bg: {
-						base: "solid-gray.300",
-						_highContrast: "GrayText"
-					} },
-					_invalid: { _before: { bg: { base: "solid-gray.300" } } }
+				_checked: {
+					/**
+					* checked:before:block
+					* checked:before:bg-blue-900 checked:hover:before:bg-blue-1100
+					* data-[error]:checked:before:bg-error-1
+					* data-[error]:checked:hover:before:bg-red-1000
+					* aria-disabled:checked:before:!bg-solid-gray-300
+					* forced-colors:checked:before:!bg-[Highlight]
+					* forced-colors:aria-disabled:checked:before:!bg-[GrayText]
+					*/
+					_before: {
+						display: "block",
+						bg: {
+							base: "colorPalette.primary",
+							_hover: "colorPalette.primary.200",
+							_highContrast: "Highlight"
+						}
+					},
+					_invalid: { _before: { bg: {
+						base: "error.1",
+						_hover: "red.1000"
+					} } },
+					_disabled: {
+						_before: { bg: {
+							base: "solid-gray.300",
+							_highContrast: "GrayText"
+						} },
+						_invalid: { _before: { bg: { base: "solid-gray.300" } } }
+					}
 				}
-			}
-		},
-		itemText: { color: "solid-gray.800" }
-	},
-	variants: { size: {
-		sm: {
-			label: { ...legend_default.variants?.size?.sm },
-			item: { gap: 1 },
-			itemControl: {
-				"--radio-size": "{spacing.6}",
-				borderWidth: "{spacing.0.5}"
-			},
-			itemText: {
-				pt: "1px",
-				textStyle: "dns-16N-130"
-			}
-		},
-		md: {
-			label: { ...legend_default.variants?.size?.md },
-			item: { gap: 2 },
-			itemControl: {
-				"--radio-size": "{spacing.8}",
-				borderWidth: "{spacing.0.5}"
-			},
-			itemText: {
-				pt: 1,
-				textStyle: "dns-16N-130"
-			}
-		},
-		lg: {
-			label: { ...legend_default.variants?.size?.lg },
-			item: { gap: 3 },
-			itemControl: {
-				"--radio-size": "{spacing.11}",
-				borderWidth: "calc({spacing.1} * 3 / 4)"
 			},
-			itemText: {
-				pt: 2.5,
-				textStyle: "dns-17N-130"
-			}
-		}
-	} },
-	defaultVariants: { size: "sm" }
-});
-
-//#endregion
-//#region src/recipes/resource-list.ts
-var resource_list_default = defineSlotRecipe({
-	className: "resource-list",
-	slots: resourceListAnatomy.keys(),
-	base: {
-		root: {
-			display: "flex",
-			borderColor: "solid-gray.420",
-			overflow: "hidden",
-			colorPalette: "keyColor",
-			bg: {
-				"&:has(input:checked)": "colorPalette.bg",
-				_selected: "colorPalette.bg"
-			}
+			itemText: { 
+			/**
+			* text-solid-gray-800
+			*/
+color: "solid-gray.800" }
 		},
-		main: {
-			display: "flex",
-			flexGrow: 1,
-			flexDirection: "row",
-			alignItems: "center",
-			justifyContent: "start",
-			gap: {
-				base: 4,
-				md: 6
-			},
-			color: "solid-gray.800",
-			textStyle: "dns-16N-130",
-			py: 4,
-			px: {
-				base: 4,
-				md: 6
+		variants: { size: {
+			sm: {
+				label: { ...legend_default.variants?.size?.sm },
+				item: { 
+				/**
+				* data-[size=sm]:gap-1
+				*/
+gap: 1 },
+				itemControl: {
+					/**
+					* data-[size=sm]:size-6
+					*/
+					"--radio-size": "{spacing.6}",
+					/**
+					* data-[size=sm]:border-[calc(2/16*1rem)]
+					*/
+					borderWidth: "{spacing.0.5}"
+				},
+				itemText: {
+					/**
+					* data-[size=sm]:pt-px
+					* data-[size=sm]:text-dns-16N-130
+					*/
+					pt: "1px",
+					textStyle: "dns-16N-130"
+				}
 			},
-			bg: {
-				base: "transparent",
-				_hover: "solid-gray.50"
+			md: {
+				label: { ...legend_default.variants?.size?.md },
+				item: { 
+				/**
+				* data-[size=md]:gap-2
+				*/
+gap: 2 },
+				itemControl: {
+					/**
+					* data-[size=md]:size-8
+					*/
+					"--radio-size": "{spacing.8}",
+					/**
+					* data-[size=md]:border-[calc(2/16*1rem)]
+					*/
+					borderWidth: "{spacing.0.5}"
+				},
+				itemText: {
+					/**
+					* data-[size=md]:pt-1
+					* data-[size=md]:text-dns-16N-130
+					*/
+					pt: 1,
+					textStyle: "dns-16N-130"
+				}
 			},
-			_focusVisible: {
-				outlineStyle: "solid",
-				outlineWidth: "4px",
-				outlineColor: "black",
-				outlineOffset: .5,
-				focusBox: "calc({spacing.1} / 2)"
-			}
-		},
-		action: {
-			p: 4,
-			display: "flex",
-			alignItems: "center",
-			justifyContent: "center"
-		},
-		content: {
-			height: "full",
-			flexGrow: 1,
-			display: "flex",
-			flexDirection: "column"
-		},
-		title: {
-			textStyle: "std-20B-150",
-			width: "fit-content"
-		}
-	},
-	variants: {
-		variant: {
-			list: { root: { borderBottomWidth: "1px" } },
-			frame: { root: {
-				rounded: 16,
-				borderWidth: "1px"
-			} }
-		},
-		asLink: { true: {
-			main: { position: "relative" },
-			title: { "& > a": { _before: {
-				content: "\"\"",
-				position: "absolute",
-				top: 0,
-				left: 0,
-				width: "full",
-				height: "full",
-				zIndex: 0,
-				cursor: "inherit"
-			} } }
-		} }
-	},
-	defaultVariants: {
-		variant: "list",
-		asLink: false
-	}
-});
-
-//#endregion
-//#region src/recipes/select.ts
-/**
-* source:
-* https://github.com/digital-go-jp/design-system-example-components-react/blob/main/src/components/Select/Select.tsx
-*/
-var select_default = defineSlotRecipe({
-	className: "select",
-	description: "セレクトボックスは、複数の選択肢を提供するフォームコントロールです。",
-	slots: anatomy$9.keys(),
-	base: {
-		root: {
-			display: "flex",
-			flexDirection: "column",
-			gap: 1.5
-		},
-		label: { ...label_default.base },
-		control: {
-			position: "relative",
-			minWidth: "80px",
-			maxWidth: "full"
-		},
-		trigger: {
-			...select_box_default.base,
-			pr: 20
-		},
-		indicator: {
-			pointerEvents: "none",
-			position: "absolute",
-			top: "50%",
-			transform: "translateY(-50%)",
-			right: 4,
-			color: {
-				base: {
-					base: "solid-gray.900",
-					_highContrast: "CanvasText"
+			lg: {
+				label: { ...legend_default.variants?.size?.lg },
+				item: { 
+				/**
+				* data-[size=lg]:gap-3
+				*/
+gap: 3 },
+				itemControl: {
+					/**
+					* data-[size=lg]:size-11
+					*/
+					"--radio-size": "{spacing.11}",
+					/**
+					* data-[size=lg]:border-[calc(3/16*1rem)]
+					*/
+					borderWidth: "calc({spacing.1} * 3 / 4)"
 				},
-				_disabled: {
-					base: "solid-gray.420",
-					_highContrast: "GrayText"
+				itemText: {
+					/**
+					* data-[size=lg]:pt-2.5
+					* data-[size=lg]:text-dns-17N-130
+					*/
+					pt: 2.5,
+					textStyle: "dns-17N-130"
 				}
 			}
-		},
-		clearTrigger: {
-			position: "absolute",
-			top: "50%",
-			right: 12,
-			transform: "translateY(-50%)"
-		},
-		content: { ...menu_default.base?.content },
-		itemGroupLabel: {
-			textStyle: "oln-16N-1",
-			fontWeight: "bold",
-			py: 3,
-			pl: 3,
-			pr: 6
-		},
-		item: { ...menu_default.base?.item },
-		itemIndicator: {
-			pointerEvents: "none",
-			position: "absolute",
-			right: 4,
-			top: "50%",
-			transform: "translateY(-50%)"
-		}
-	},
-	variants: { size: {
-		lg: {
-			trigger: { ...select_box_default.variants?.size?.lg },
-			label: { ...label_default.variants?.size?.lg }
-		},
-		md: {
-			trigger: { ...select_box_default.variants?.size?.md },
-			label: { ...label_default.variants?.size?.md }
-		},
-		sm: {
-			trigger: { ...select_box_default.variants?.size?.sm },
-			label: { ...label_default.variants?.size?.sm }
-		}
-	} },
-	defaultVariants: { size: "lg" }
-});
-
-//#endregion
-//#region src/recipes/step-navigation.ts
-/**
-* reference:
-* https://github.com/digital-go-jp/design-system-example-components-html/tree/main/src/components/step-navigation
-*/
-var step_navigation_default = defineSlotRecipe({
-	className: "step-navigation",
-	slots: anatomy$10.extendWith("title", "description").keys(),
-	base: {
-		root: {
-			textStyle: "std-16N-170",
-			overflowWrap: "anywhere",
-			colorPalette: "keyColor"
-		},
-		list: {
-			m: 0,
-			p: 0,
-			display: "flex",
-			_horizontal: { flexDirection: "row" },
-			_vertical: { flexDirection: "column" }
-		},
-		item: {
-			position: "relative",
-			boxSizing: "border-box",
-			_last: { "& [data-part=separator]": { display: "none" } },
-			_horizontal: {
-				width: "calc(var(--_step-width, 320) / 16 * 1rem)",
-				minWidth: "calc(var(--_step-min-width, 160) / 16 * 1rem)",
-				px: 4
-			},
-			_vertical: {
-				flex: 1,
-				pb: 6
-			}
-		},
-		trigger: {
-			display: "block",
-			borderWidth: 0,
-			bg: "none",
-			p: 0,
-			color: "inherit",
-			font: "inherit",
-			textWrap: "pretty",
-			cursor: "pointer",
-			_horizontal: {
-				width: "100%",
-				textAlign: "center"
-			},
-			_vertical: {
-				position: "relative",
+		} },
+		defaultVariants: { size: "sm" }
+	}),
+	requirementBadge: requirement_badge_default,
+	resourceList: defineSlotRecipe({
+		className: "resource-list",
+		slots: resourceListAnatomy.keys(),
+		base: {
+			root: {
 				display: "flex",
-				alignItems: "baseline",
-				columnGap: 4,
-				textAlign: "left"
-			}
-		},
-		indicator: {
-			position: "relative",
-			display: "grid",
-			placeContent: "center",
-			m: 1,
-			boxSizing: "border-box",
-			width: "fit-content",
-			height: "var(--_number-size)",
-			minWidth: "var(--_number-size)",
-			color: "colorPalette.primary",
-			borderWidth: "2px",
-			borderRadius: "full",
-			borderColor: "colorPalette.primary",
-			bg: "white",
-			py: 0,
-			px: .5,
-			textStyle: "std-20B-150",
-			textDecoration: "inherit",
-			textDecorationThickness: "inherit",
-			_after: { content: "\"\"" },
-			_current: {
-				bg: "colorPalette.primary",
-				color: "white",
-				borderColor: "colorPalette.primary",
-				outlineWidth: "var(--_outline-width)",
-				outlineStyle: "solid",
-				outlineColor: "colorPalette.primary",
-				outlineOffset: .5,
-				boxShadow: "0 0 0 {spacing.0.5} white"
+				borderColor: "solid-gray.420",
+				overflow: "hidden",
+				colorPalette: "keyColor",
+				bg: {
+					"&:has(input:checked)": "colorPalette.bg",
+					_selected: "colorPalette.bg"
+				}
 			},
-			_complete: {
-				bg: "colorPalette.bg",
-				_after: {
-					position: "absolute",
-					top: -2.5,
-					left: "calc(50% + {spacing.1.5})",
-					borderRadius: "full",
-					bg: "colorPalette.primary",
-					width: "36px",
-					height: "36px",
-					clipPath: "path('M18 0C8.064 0 0 8.064 0 18C0 27.936 8.064 36 18 36C27.936 36 36 27.936 36 18C36 8.064 27.936 0 18 0Z M14.4 27L5.4 18L7.938 15.462L14.4 21.906L28.062 8.244L30.6 10.8L14.4 27Z')"
+			main: {
+				display: "flex",
+				flexGrow: 1,
+				flexDirection: "row",
+				alignItems: "center",
+				justifyContent: "start",
+				gap: {
+					base: 4,
+					md: 6
+				},
+				color: "solid-gray.800",
+				textStyle: "dns-16N-130",
+				/**
+				* p-4 md:px-6 md:py-4
+				*/
+				py: 4,
+				px: {
+					base: 4,
+					md: 6
+				},
+				bg: {
+					base: "transparent",
+					_hover: "solid-gray.50"
+				},
+				_focusVisible: {
+					outlineStyle: "solid",
+					outlineWidth: "4px",
+					outlineColor: "black",
+					outlineOffset: .5,
+					focusBox: "calc({spacing.1} / 2)"
 				}
 			},
-			"[data-orientation=horizontal] > &": {
-				mr: "auto",
-				ml: "auto"
+			action: {
+				p: 4,
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center"
 			},
-			"[data-orientation=vertical] > &": {
-				flexShrink: 0,
-				mx: 1
-			}
-		},
-		title: {
-			display: "block",
-			textStyle: "std-18B-160",
-			textDecorationThickness: "inherit",
-			"[data-orientation=horizontal] &": { mt: "var(--_title-margin)" },
-			"[data-orientation=vertical] &": {
-				pt: "calc(var(--_number-size) / 2 + var(--_number-margin) - 0.875rem)",
-				pb: 0
+			content: {
+				height: "full",
+				flexGrow: 1,
+				display: "flex",
+				flexDirection: "column"
+			},
+			title: {
+				/**
+				* mb-4 text-std-20B-150 font-bold group-hover:text-blue-1000 group-hover:decoration-[calc(3/16*1rem)] md:mb-4
+				*/
+				textStyle: "std-20B-150",
+				width: "fit-content"
 			}
 		},
-		description: {
-			mt: "var(--_description-margin)",
-			"[data-orientation=horizontal] &": { textAlign: "center" },
-			"[data-orientation=vertical] &": {
-				mt: "calc(var(--_description-margin) - (var(--_number-size) / 2 + var(--_number-margin) - 0.875rem))",
-				pl: "calc(var(--_number-size) + var(--_number-margin) + var(--_number-margin) + {spacing.4})"
-			}
+		variants: {
+			variant: {
+				list: { root: { borderBottomWidth: "1px" } },
+				frame: { root: {
+					rounded: 16,
+					borderWidth: "1px"
+				} }
+			},
+			asLink: { true: {
+				main: { position: "relative" },
+				title: { "& > a": { _before: {
+					content: "\"\"",
+					position: "absolute",
+					top: 0,
+					left: 0,
+					width: "full",
+					height: "full",
+					zIndex: 0,
+					cursor: "inherit"
+				} } }
+			} }
 		},
-		separator: {
-			position: "absolute",
-			zIndex: -1,
-			content: "\"\"",
-			borderColor: "colorPalette.primary",
-			_horizontal: {
-				top: "calc(var(--_number-size) / 2 + var(--_number-margin))",
-				left: "50%",
-				width: "100%",
-				borderBottomWidth: "1px"
-			},
-			_vertical: {
-				left: "calc(var(--_number-size) / 2 + var(--_number-margin))",
-				top: "calc(50% - {spacing.4})",
-				height: "100%",
-				borderRightWidth: "1px"
-			}
+		defaultVariants: {
+			variant: "list",
+			asLink: false
 		}
-	},
-	variants: { size: {
-		md: {
-			root: { root: {
-				"--_number-size": "{spacing.11}",
-				"--_number-margin": "{spacing.1}",
-				"--_outline-width": "{spacing.0.5}",
-				"--_title-margin": "{spacing.6}",
-				"--_description-margin": "{spacing.2}"
-			} },
-			indicator: { _after: { transform: "scale(0.5)" } }
-		},
-		sm: {
+	}),
+	select: defineSlotRecipe({
+		className: "select",
+		description: "セレクトボックスは、複数の選択肢を提供するフォームコントロールです。",
+		slots: anatomy$10.keys(),
+		base: {
 			root: {
-				"--_number-size": "{spacing.8}",
-				"--_number-margin": "calc({spacing.1} * 3 / 4)",
-				"--_outline-width": "calc({spacing.1} / 4)",
-				"--_title-margin": "{spacing.4}",
-				"--_description-margin": "{spacing.1}"
+				display: "flex",
+				flexDirection: "column",
+				gap: 1.5
+			},
+			label: { ...label_default.base },
+			control: {
+				/**
+				* relative min-w-80 max-w-full
+				*/
+				position: "relative",
+				minWidth: "80px",
+				maxWidth: "full"
+			},
+			trigger: {
+				...select_box_default.base,
+				/**
+				* adapt to clearTrigger
+				*/
+				pr: 20
 			},
 			indicator: {
-				m: "calc({spacing.1} * 3 / 4)",
-				borderWidth: "1px",
-				textStyle: "std-16B-170",
-				"[data-orientation=horizontal] > &": {
-					mr: "auto",
-					ml: "auto"
-				},
-				"[data-orientation=vertical] > &": { mx: 1 },
-				_after: { transform: "scale(0.33)" }
+				/**
+				* pointer-events-none absolute right-4 top-1/2 -translate-y-1/2
+				*/
+				pointerEvents: "none",
+				position: "absolute",
+				top: "50%",
+				transform: "translateY(-50%)",
+				right: 4,
+				/**
+				* ${props['aria-disabled'] ? 'text-solid-gray-420 forced-colors:text-[GrayText]' : 'text-solid-gray-900 forced-colors:text-[CanvasText]'}
+				*/
+				color: {
+					base: {
+						base: "solid-gray.900",
+						_highContrast: "CanvasText"
+					},
+					_disabled: {
+						base: "solid-gray.420",
+						_highContrast: "GrayText"
+					}
+				}
 			},
-			title: { textStyle: "std-16B-170" }
-		}
-	} },
-	defaultVariants: { size: "md" }
-});
-
-//#endregion
-//#region src/recipes/table.ts
-/**
-* source:
-* https://github.com/digital-go-jp/design-system-example-components-react/blob/main/src/components/Table/Table.stories.tsx
-*/
-var table_default = defineSlotRecipe({
-	className: "table",
-	slots: tableAnatomy.keys(),
-	base: {
-		root: {
-			maxWidth: "full",
-			colorPalette: "keyColor"
-		},
-		head: { "& tr": {
-			borderColor: "black",
-			bg: "solid-gray.50"
-		} },
-		body: { "& tr": { borderColor: "solid-gray.420" } },
-		foot: {},
-		row: {
-			borderBottomWidth: "1px",
-			"tbody > &:has(input:checked)": { bg: "colorPalette.100" }
-		},
-		header: {
-			px: 4,
-			verticalAlign: "top",
-			textAlign: "start"
-		},
-		cell: {
-			px: 4,
-			verticalAlign: "top"
-		},
-		caption: {
-			mb: 4,
-			textStyle: "oln-17B-100"
-		}
-	},
-	variants: {
-		dense: {
-			false: {
-				root: { textStyle: "std-16N-170" },
-				header: { py: 5 },
-				cell: { py: 5 }
-			},
-			true: {
-				root: { textStyle: "dns-16N-130" },
-				header: { py: 2.5 },
-				cell: { py: 2.5 }
+			clearTrigger: {
+				position: "absolute",
+				top: "50%",
+				right: 12,
+				transform: "translateY(-50%)"
+			},
+			content: { ...menu_default.base?.content },
+			itemGroupLabel: {
+				textStyle: "oln-16N-1",
+				fontWeight: "bold",
+				py: 3,
+				pl: 3,
+				pr: 6
+			},
+			item: { ...menu_default.base?.item },
+			itemIndicator: {
+				pointerEvents: "none",
+				position: "absolute",
+				right: 4,
+				top: "50%",
+				transform: "translateY(-50%)"
 			}
 		},
-		striped: { true: { body: { "& tr": { _even: { "&:not(:has(input:checked))": { bg: "{colors.colorPalette.bg}/25" } } } } } },
-		hovered: { true: { body: { "& tr": {
-			_hover: { bg: "colorPalette.bg" },
-			_even: { "&:not(:has(input:checked))": { _hover: { bg: "{colors.colorPalette.bg}" } } }
-		} } } }
-	},
-	defaultVariants: {
-		dense: false,
-		striped: false,
-		hovered: false
-	}
-});
-
-//#endregion
-//#region src/recipes/tabs.ts
-var tabs_default = defineSlotRecipe({
-	className: "tabs",
-	slots: anatomy$11.keys(),
-	base: {
-		root: { colorPalette: "keyColor" },
-		list: {
-			display: "flex",
-			width: "full",
-			alignItems: "end",
-			whiteSpace: "nowrap",
-			borderBottomWidth: "1px",
-			borderColor: "solid-gray.420",
-			overflowX: "auto"
-		},
-		trigger: {
-			position: "relative",
-			zIndex: 0,
-			display: "inline-flex",
-			gap: 2,
-			justifyContent: "center",
-			alignItems: "center",
-			textStyle: {
-				base: "oln-14B-100",
-				md: "oln-16B-100"
+		variants: { size: {
+			lg: {
+				trigger: { ...select_box_default.variants?.size?.lg },
+				label: { ...label_default.variants?.size?.lg }
 			},
-			px: {
-				base: 4,
-				md: 8
+			md: {
+				trigger: { ...select_box_default.variants?.size?.md },
+				label: { ...label_default.variants?.size?.md }
 			},
-			py: 6,
-			cursor: "pointer",
-			bg: {
-				base: "transparent",
-				_hover: "solid-gray.50",
-				_focusVisible: {
-					base: "yellow.300",
-					_hover: "yellow.300"
+			sm: {
+				trigger: { ...select_box_default.variants?.size?.sm },
+				label: { ...label_default.variants?.size?.sm }
+			}
+		} },
+		defaultVariants: { size: "lg" }
+	}),
+	stepNavigation: defineSlotRecipe({
+		className: "step-navigation",
+		slots: anatomy$11.extendWith("title", "description").keys(),
+		base: {
+			root: {
+				/**
+				* color: var(--color-neutral-solid-gray-800);
+				* font-weight: normal;
+				* font-size: calc(16 / 16 * 1rem);
+				* font-family: var(--font-family-sans);
+				* line-height: 1.7;
+				* letter-spacing: 0.02em;
+				* overflow-wrap: anywhere;
+				*/
+				textStyle: "std-16N-170",
+				overflowWrap: "anywhere",
+				colorPalette: "keyColor"
+			},
+			list: {
+				/**
+				* margin: 0;
+				* padding: 0;
+				* list-style-type: none;
+				*/
+				m: 0,
+				p: 0,
+				display: "flex",
+				_horizontal: { flexDirection: "row" },
+				_vertical: { flexDirection: "column" }
+			},
+			item: {
+				/**
+				* position: relative;
+				* box-sizing: border-box;
+				*/
+				position: "relative",
+				boxSizing: "border-box",
+				_last: { "& [data-part=separator]": { display: "none" } },
+				_horizontal: {
+					/**
+					* width: calc(var(--_step-width, 320) / 16 * 1rem);
+					* min-width: calc(var(--_step-min-width, 160) / 16 * 1rem);
+					* padding: 0 calc(16 / 16 * 1rem);
+					*/
+					width: "calc(var(--_step-width, 320) / 16 * 1rem)",
+					minWidth: "calc(var(--_step-min-width, 160) / 16 * 1rem)",
+					px: 4
 				},
-				_selected: {
-					base: "white",
-					_hover: "white",
-					_focusVisible: "yellow.300"
+				_vertical: {
+					/**
+					* flex: 1;
+					* padding-bottom: calc(24 / 16 * 1rem);
+					*/
+					flex: 1,
+					pb: 6
 				}
 			},
-			_focusVisible: {
-				zIndex: 10,
-				rounded: 4,
-				outlineStyle: "solid",
-				outlineWidth: "4px",
-				outlineColor: "black",
-				outlineOffset: .5,
-				focusBox: "calc({spacing.1} / 2)"
+			trigger: {
+				/**
+				* display: block;
+				* border: 0;
+				* background: none;
+				* padding: 0;
+				* color: inherit;
+				* font: inherit;
+				* text-wrap: pretty;
+				*/
+				display: "block",
+				borderWidth: 0,
+				bg: "none",
+				p: 0,
+				color: "inherit",
+				font: "inherit",
+				textWrap: "pretty",
+				cursor: "pointer",
+				_horizontal: {
+					/**
+					* width: 100%;
+					* text-align: center;
+					*/
+					width: "100%",
+					textAlign: "center"
+				},
+				_vertical: {
+					/**
+					* position: relative;
+					* display: flex;
+					* align-items: baseline;
+					* column-gap: calc(16 / 16 * 1rem);
+					* text-align: left;
+					*/
+					position: "relative",
+					display: "flex",
+					alignItems: "baseline",
+					columnGap: 4,
+					textAlign: "left"
+				}
 			},
-			_selected: {
+			indicator: {
+				/**
+				* position: relative;
+				* display: grid;
+				* place-content: center;
+				* margin: calc(4 / 16 * 1rem);
+				* box-sizing: border-box;
+				* width: fit-content;
+				* height: var(--_number-size);
+				* min-width: var(--_number-size);
+				* border: 2px solid;
+				* border-radius: 50%;
+				* background-color: var(--color-neutral-white);
+				* padding: 0 calc(2 / 16 * 1rem) calc(2 / 16 * 1rem);
+				* font-weight: bold;
+				* font-size: calc(20 / 16 * 1rem);
+				* line-height: 1.5;
+				* letter-spacing: 0.02em;
+				* text-decoration: inherit;
+				* text-decoration-thickness: inherit;
+				*/
+				position: "relative",
+				display: "grid",
+				placeContent: "center",
+				m: 1,
+				boxSizing: "border-box",
+				width: "fit-content",
+				height: "var(--_number-size)",
+				minWidth: "var(--_number-size)",
 				color: "colorPalette.primary",
-				cursor: "default",
-				_after: {
-					content: "\"\"",
-					position: "absolute",
-					bottom: 0,
-					left: 0,
-					width: "full",
-					borderBottomWidth: "4px",
-					borderBlockColor: "currentcolor"
+				borderWidth: "2px",
+				borderRadius: "full",
+				borderColor: "colorPalette.primary",
+				bg: "white",
+				py: 0,
+				px: .5,
+				textStyle: "std-20B-150",
+				textDecoration: "inherit",
+				textDecorationThickness: "inherit",
+				_after: { content: "\"\"" },
+				_current: {
+					/**
+					* background-color: var(--color-neutral-solid-gray-800);
+					* color: var(--color-neutral-white);
+					* border-color: var(--color-neutral-solid-gray-800);
+					*/
+					bg: "colorPalette.primary",
+					color: "white",
+					borderColor: "colorPalette.primary",
+					/**
+					* outline: var(--_outline-width) solid var(--color-neutral-solid-gray-800);
+					* outline-offset: calc(2 / 16 * 1rem);
+					* box-shadow: 0 0 0 calc(2 / 16 * 1rem) var(--color-neutral-white);
+					*/
+					outlineWidth: "var(--_outline-width)",
+					outlineStyle: "solid",
+					outlineColor: "colorPalette.primary",
+					outlineOffset: .5,
+					boxShadow: "0 0 0 {spacing.0.5} white"
+				},
+				_complete: {
+					bg: "colorPalette.bg",
+					_after: {
+						/**
+						* position: absolute;
+						* top: calc(-10 / 16 * 1rem);
+						* left: calc(50% + calc(6 / 16 * 1rem));
+						* border-radius: 50%;
+						* background-color: var(--color-neutral-white);
+						*/
+						position: "absolute",
+						top: -2.5,
+						left: "calc(50% + {spacing.1.5})",
+						borderRadius: "full",
+						bg: "colorPalette.primary",
+						width: "36px",
+						height: "36px",
+						clipPath: "path('M18 0C8.064 0 0 8.064 0 18C0 27.936 8.064 36 18 36C27.936 36 36 27.936 36 18C36 8.064 27.936 0 18 0Z M14.4 27L5.4 18L7.938 15.462L14.4 21.906L28.062 8.244L30.6 10.8L14.4 27Z')"
+					}
+				},
+				"[data-orientation=horizontal] > &": {
+					/**
+					* margin-right: auto;
+					* margin-left: auto;
+					*/
+					mr: "auto",
+					ml: "auto"
+				},
+				"[data-orientation=vertical] > &": {
+					/**
+					* flex-shrink: 0;
+					*/
+					flexShrink: 0,
+					mx: 1
 				}
-			}
-		}
-	}
-});
-
-//#endregion
-//#region src/recipes/tree-view.ts
-var tree_view_default = defineSlotRecipe({
-	className: "tree-view",
-	slots: anatomy$12.keys(),
-	base: {
-		root: {},
-		label: {
-			py: 3,
-			pl: 3,
-			pr: 6,
-			textStyle: "oln-17B-100",
-			textWrap: "nowrap",
-			display: "block"
-		},
-		tree: {},
-		item: { ...menu_item_default.base },
-		itemIndicator: { _empty: {
-			_before: {
-				content: "\"\"",
+			},
+			title: {
+				/**
+				* display: block;
+				* font-weight: bold;
+				* font-size: calc(18 / 16 * 1rem);
+				* line-height: 1.6;
+				* letter-spacing: 0.02em;
+				* text-decoration-thickness: inherit;
+				*/
 				display: "block",
-				width: "24px",
-				height: "24px",
-				bg: "black",
-				clipPath: "path('M12 19L5 12L12 5L19 12L12 19Z')"
+				textStyle: "std-18B-160",
+				textDecorationThickness: "inherit",
+				"[data-orientation=horizontal] &": { 
+				/**
+				* margin-top: var(--_title-margin);
+				*/
+mt: "var(--_title-margin)" },
+				"[data-orientation=vertical] &": {
+					/**
+					* padding: calc(var(--_number-size) / 2 + var(--_number-margin) - 0.875rem) 0;
+					*/
+					pt: "calc(var(--_number-size) / 2 + var(--_number-margin) - 0.875rem)",
+					pb: 0
+				}
 			},
-			_selected: { _before: { clipPath: "path('M12 19L5 12L12 5L19 12L12 19ZM12 16.15L16.15 12L12 7.85L7.85 12L12 16.15Z')" } }
-		} },
-		itemText: { flexGrow: 1 },
-		branch: {},
-		branchControl: { ...menu_item_default.base },
-		branchTrigger: {},
-		branchContent: {
-			my: 1,
-			pl: 8
-		},
-		branchIndicator: { _empty: {
-			_before: {
+			description: {
+				/**
+				* margin: var(--_description-margin) 0 0;
+				*/
+				mt: "var(--_description-margin)",
+				"[data-orientation=horizontal] &": { 
+				/**
+				* text-align: center;
+				*/
+textAlign: "center" },
+				"[data-orientation=vertical] &": {
+					/**
+					* margin-top: calc(
+					*   var(--_description-margin) -
+					*   (var(--_number-size) / 2 + var(--_number-margin) - 0.875rem)
+					* );
+					* padding-left: calc(
+					*   var(--_number-size) +
+					*   var(--_number-margin) +
+					*   var(--_number-margin) +
+					*   calc(16 / 16 * 1rem)
+					* );
+					*/
+					mt: "calc(var(--_description-margin) - (var(--_number-size) / 2 + var(--_number-margin) - 0.875rem))",
+					pl: "calc(var(--_number-size) + var(--_number-margin) + var(--_number-margin) + {spacing.4})"
+				}
+			},
+			separator: {
+				/**
+				* position: absolute;
+				* z-index: -1;
+				* content: "";
+				*/
+				position: "absolute",
+				zIndex: -1,
 				content: "\"\"",
-				display: "block",
-				width: "24px",
-				height: "24px",
-				bg: "black",
-				clipPath: "path('M12 19L5 12L12 5L19 12L12 19Z')"
+				borderColor: "colorPalette.primary",
+				_horizontal: {
+					/**
+					* top: calc(var(--_number-size) / 2 + var(--_number-margin));
+					* left: 50%;
+					* width: 50%;
+					* border-bottom: 1px solid;
+					*/
+					top: "calc(var(--_number-size) / 2 + var(--_number-margin))",
+					left: "50%",
+					width: "100%",
+					borderBottomWidth: "1px"
+				},
+				_vertical: {
+					/**
+					* left: calc(var(--_number-size) / 2 + var(--_number-margin));
+					* bottom: 0;
+					* height: calc(100% - calc(32 / 16 * 1rem));
+					* border-right: 1px solid;
+					*/
+					left: "calc(var(--_number-size) / 2 + var(--_number-margin))",
+					top: "calc(50% - {spacing.4})",
+					height: "100%",
+					borderRightWidth: "1px"
+				}
+			}
+		},
+		variants: { size: {
+			md: {
+				root: { root: {
+					/**
+					* --_number-size: calc(44 / 16 * 1rem);
+					* --_number-margin: calc(4 / 16 * 1rem);
+					* --_outline-width: calc(2 / 16 * 1rem);
+					* --_title-margin: calc(24 / 16 * 1rem);
+					* --_description-margin: calc(8 / 16 * 1rem);
+					*/
+					"--_number-size": "{spacing.11}",
+					"--_number-margin": "{spacing.1}",
+					"--_outline-width": "{spacing.0.5}",
+					"--_title-margin": "{spacing.6}",
+					"--_description-margin": "{spacing.2}"
+				} },
+				indicator: { _after: { transform: "scale(0.5)" } }
 			},
-			_selected: { _before: { clipPath: "path('M12 19L5 12L12 5L19 12L12 19ZM12 16.15L16.15 12L12 7.85L7.85 12L12 16.15Z')" } },
-			_open: { _before: { clipPath: "path('M12 19L5 12L12 5L19 12L12 19ZM12 16.15L16.15 12L12 7.85L7.85 12L12 16.15Z')" } }
+			sm: {
+				root: {
+					/**
+					* --_number-size: calc(32 / 16 * 1rem);
+					* --_number-margin: calc(3 / 16 * 1rem);
+					* --_outline-width: calc(1 / 16 * 1rem);
+					* --_title-margin: calc(16 / 16 * 1rem);
+					* --_description-margin: calc(4 / 16 * 1rem);
+					*/
+					"--_number-size": "{spacing.8}",
+					"--_number-margin": "calc({spacing.1} * 3 / 4)",
+					"--_outline-width": "calc({spacing.1} / 4)",
+					"--_title-margin": "{spacing.4}",
+					"--_description-margin": "{spacing.1}"
+				},
+				indicator: {
+					/**
+					* margin: calc(3 / 16 * 1rem);
+					* border-width: 1px;
+					* font-size: calc(16 / 16 * 1rem);
+					*/
+					m: "calc({spacing.1} * 3 / 4)",
+					borderWidth: "1px",
+					textStyle: "std-16B-170",
+					"[data-orientation=horizontal] > &": {
+						/**
+						* margin-right: auto;
+						* margin-left: auto;
+						*/
+						mr: "auto",
+						ml: "auto"
+					},
+					"[data-orientation=vertical] > &": { mx: 1 },
+					_after: { transform: "scale(0.33)" }
+				},
+				title: { 
+				/**
+				* font-weight: bold;
+				* font-size: calc(16 / 16 * 1rem);
+				* line-height: 1.7;
+				* letter-spacing: 0.02em;
+				*/
+textStyle: "std-16B-170" }
+			}
 		} },
-		branchText: { flexGrow: 1 }
-	},
-	variants: {
-		variant: {
-			standard: {
-				item: { ...menu_item_default.variants?.variant?.standard },
-				branchControl: { ...menu_item_default.variants?.variant?.standard }
+		defaultVariants: { size: "md" }
+	}),
+	supportText: support_text_default,
+	table: defineSlotRecipe({
+		className: "table",
+		slots: tableAnatomy.keys(),
+		base: {
+			root: {
+				/**
+				* w-full text-std-16N-170
+				*/
+				maxWidth: "full",
+				colorPalette: "keyColor"
+			},
+			head: { "& tr": {
+				/**
+				* border-black bg-solid-gray-50
+				*/
+				borderColor: "black",
+				bg: "solid-gray.50"
+			} },
+			body: { "& tr": { 
+			/**
+			* border-solid-gray-420
+			*/
+borderColor: "solid-gray.420" } },
+			foot: {},
+			row: {
+				/**
+				* border-b
+				*/
+				borderBottomWidth: "1px",
+				"tbody > &:has(input:checked)": { bg: "colorPalette.100" }
+			},
+			header: {
+				/**
+				* px-4 text-start align-top
+				*/
+				px: 4,
+				verticalAlign: "top",
+				textAlign: "start"
+			},
+			cell: {
+				/**
+				* px-4 align-top
+				*/
+				px: 4,
+				verticalAlign: "top"
 			},
-			boxed: {
-				item: { ...menu_item_default.variants?.variant?.boxed },
-				branchControl: { ...menu_item_default.variants?.variant?.boxed }
+			caption: {
+				mb: 4,
+				textStyle: "oln-17B-100"
 			}
 		},
-		isCondensed: {
-			true: {
-				label: {
-					py: 1.5,
-					pl: 1.5,
-					pr: 4
+		variants: {
+			dense: {
+				false: {
+					root: { textStyle: "std-16N-170" },
+					header: { 
+					/**
+					* py-5
+					*/
+py: 5 },
+					cell: { 
+					/**
+					* py-5
+					*/
+py: 5 }
 				},
-				item: { ...menu_item_default.variants?.isCondensed?.true },
-				branchControl: { ...menu_item_default.variants?.isCondensed?.true }
+				true: {
+					root: { textStyle: "dns-16N-130" },
+					header: { 
+					/**
+					* py-2.5
+					*/
+py: 2.5 },
+					cell: { 
+					/**
+					* py-2.5
+					*/
+py: 2.5 }
+				}
 			},
-			false: {
-				item: { ...menu_item_default.variants?.isCondensed?.false },
-				branchControl: { ...menu_item_default.variants?.isCondensed?.false }
-			}
+			striped: { true: { body: { "& tr": { _even: { "&:not(:has(input:checked))": { bg: "{colors.colorPalette.bg}/25" } } } } } },
+			hovered: { true: { body: { "& tr": {
+				_hover: { bg: "colorPalette.bg" },
+				_even: { "&:not(:has(input:checked))": { _hover: { bg: "{colors.colorPalette.bg}" } } }
+			} } } }
+		},
+		defaultVariants: {
+			dense: false,
+			striped: false,
+			hovered: false
 		}
-	}
-});
-
-//#endregion
-//#region src/recipes/unordered-list.ts
-var unordered_list_default = defineRecipe({
-	className: "unordered-list",
-	base: {
-		pl: 8,
-		listStyle: "revert",
-		"&:where(ol,ul)": {
-			mt: 1,
-			mb: -1
+	}),
+	tabs: defineSlotRecipe({
+		className: "tabs",
+		slots: anatomy$12.keys(),
+		base: {
+			root: { colorPalette: "keyColor" },
+			list: {
+				/**
+				* flex w-full min-w-max items-end whitespace-nowrap
+				* border-b border-solid-gray-420
+				*/
+				display: "flex",
+				width: "full",
+				alignItems: "end",
+				whiteSpace: "nowrap",
+				borderBottomWidth: "1px",
+				borderColor: "solid-gray.420",
+				overflowX: "auto"
+			},
+			trigger: {
+				/**
+				* relative z-0 inline-flex gap-2 justify-center items-center
+				* text-oln-14B-100 md:text-oln-16B-100
+				*/
+				position: "relative",
+				zIndex: 0,
+				display: "inline-flex",
+				gap: 2,
+				justifyContent: "center",
+				alignItems: "center",
+				textStyle: {
+					base: "oln-14B-100",
+					md: "oln-16B-100"
+				},
+				/**
+				* px-4 py-6 group md:px-8 md:py-6
+				* hover:bg-solid-gray-50 focus-visible:bg-yellow-300
+				* aria-[current=page]:bg-white
+				*/
+				px: {
+					base: 4,
+					md: 8
+				},
+				py: 6,
+				cursor: "pointer",
+				bg: {
+					base: "transparent",
+					_hover: "solid-gray.50",
+					_focusVisible: {
+						base: "yellow.300",
+						_hover: "yellow.300"
+					},
+					_selected: {
+						base: "white",
+						_hover: "white",
+						_focusVisible: "yellow.300"
+					}
+				},
+				/**
+				* focus-visible:z-10 focus-visible:rounded-4
+				* focus-visible:outline focus-visible:outline-4
+				* focus-visible:outline-offset-[calc(2/16*1rem)] focus-visible:outline-black
+				* focus-visible:ring-[calc(2/16*1rem)] focus-visible:ring-yellow-300
+				*/
+				_focusVisible: {
+					zIndex: 10,
+					rounded: 4,
+					outlineStyle: "solid",
+					outlineWidth: "4px",
+					outlineColor: "black",
+					outlineOffset: .5,
+					focusBox: "calc({spacing.1} / 2)"
+				},
+				_selected: {
+					/**
+					* relative text-blue-900
+					* after:absolute after:bottom-0 after:left-0 after:w-full after:border-b-4
+					* after:border-current
+					* aria-[current=page]:cursor-default
+					*/
+					color: "colorPalette.primary",
+					cursor: "default",
+					_after: {
+						content: "\"\"",
+						position: "absolute",
+						bottom: 0,
+						left: 0,
+						width: "full",
+						borderBottomWidth: "4px",
+						borderBlockColor: "currentcolor"
+					}
+				}
+			}
 		}
-	}
-});
-
-//#endregion
-//#region src/recipes/utility-link.ts
-/**
-* https://github.com/digital-go-jp/design-system-example-components-react/blob/main/src/components/UtilityLink/UtilityLink.tsx
-*/
-var utility_link_default = defineRecipe({
-	className: "utility-link",
-	description: "ユーティリティリンクはふつうの横並びリンクリストに近いが、それよりもコンパクトに作られています。",
-	base: {
-		colorPalette: "keyColor",
-		textStyle: "dns-16N-130",
-		color: {
-			base: "solid-gray.800",
-			_focusVisible: "colorPalette.primary.100"
-		},
-		bg: {
-			base: "transparent",
-			_focusVisible: "yellow.300"
-		},
-		textDecoration: "underline",
-		textDecorationThickness: {
-			base: "1px",
-			_hover: "calc(3 / 16 * 1rem)"
-		},
-		textUnderlineOffset: "calc(3 / 16 * 1rem)",
-		_focusVisible: {
-			rounded: 4,
-			outlineStyle: "solid",
-			outlineWidth: "4px",
-			outlineColor: "black",
-			outlineOffset: .5,
-			focusBox: "calc({spacing.1} / 2)"
+	}),
+	textarea: textarea_default,
+	treeView: defineSlotRecipe({
+		className: "tree-view",
+		slots: anatomy$13.keys(),
+		base: {
+			root: {},
+			label: {
+				py: 3,
+				pl: 3,
+				pr: 6,
+				textStyle: "oln-17B-100",
+				textWrap: "nowrap",
+				display: "block"
+			},
+			tree: {},
+			item: { ...menu_item_default.base },
+			itemIndicator: { _empty: {
+				_before: {
+					content: "\"\"",
+					display: "block",
+					width: "24px",
+					height: "24px",
+					bg: "black",
+					clipPath: "path('M12 19L5 12L12 5L19 12L12 19Z')"
+				},
+				_selected: { _before: { clipPath: "path('M12 19L5 12L12 5L19 12L12 19ZM12 16.15L16.15 12L12 7.85L7.85 12L12 16.15Z')" } }
+			} },
+			itemText: { flexGrow: 1 },
+			branch: {},
+			branchControl: { ...menu_item_default.base },
+			branchTrigger: {},
+			branchContent: {
+				my: 1,
+				pl: 8
+			},
+			branchIndicator: { _empty: {
+				_before: {
+					content: "\"\"",
+					display: "block",
+					width: "24px",
+					height: "24px",
+					bg: "black",
+					clipPath: "path('M12 19L5 12L12 5L19 12L12 19Z')"
+				},
+				_selected: { _before: { clipPath: "path('M12 19L5 12L12 5L19 12L12 19ZM12 16.15L16.15 12L12 7.85L7.85 12L12 16.15Z')" } },
+				_open: { _before: { clipPath: "path('M12 19L5 12L12 5L19 12L12 19ZM12 16.15L16.15 12L12 7.85L7.85 12L12 16.15Z')" } }
+			} },
+			branchText: { flexGrow: 1 }
 		},
-		display: "inline-flex",
-		alignItems: "center",
-		gap: 1,
-		"& svg": {
-			width: "1em",
-			height: "1em"
+		variants: {
+			variant: {
+				standard: {
+					item: { ...menu_item_default.variants?.variant?.standard },
+					branchControl: { ...menu_item_default.variants?.variant?.standard }
+				},
+				boxed: {
+					item: { ...menu_item_default.variants?.variant?.boxed },
+					branchControl: { ...menu_item_default.variants?.variant?.boxed }
+				}
+			},
+			isCondensed: {
+				true: {
+					label: {
+						py: 1.5,
+						pl: 1.5,
+						pr: 4
+					},
+					item: { ...menu_item_default.variants?.isCondensed?.true },
+					branchControl: { ...menu_item_default.variants?.isCondensed?.true }
+				},
+				false: {
+					item: { ...menu_item_default.variants?.isCondensed?.false },
+					branchControl: { ...menu_item_default.variants?.isCondensed?.false }
+				}
+			}
 		}
-	}
-});
-
-//#endregion
-//#region src/recipes/index.ts
-const recipes = {
-	accordion: accordion_default,
-	blockquote: blockquote_default,
-	breadcrumb: breadcrumb_default,
-	button: button_default,
-	card: card_default,
-	checkbox: checkbox_default,
-	chipLabel: chip_label_default,
-	chipTag: chip_tag_default,
-	datePicker: date_picker_default,
-	descriptionList: description_list_default,
-	disclosure: disclosure_default,
-	digitalGoDivider: divider_default,
-	drawer: drawer_default,
-	emergencyBanner: emergency_banner_default,
-	errorText: error_text_default,
-	field: field_default,
-	fieldset: fieldset_default,
-	fileUpload: file_upload_default,
-	hamburgerMenuButton: hamburger_menu_button_default,
-	input: input_default,
-	label: label_default,
-	legend: legend_default,
-	link: link_default,
-	list: list_default,
-	menu: menu_default,
-	menuItem: menu_item_default,
-	menuList: menu_list_default,
-	notificationBanner: notification_banner_default,
-	orderedList: ordered_list_default,
-	progress: progress_default,
-	radioGroup: radio_group_default,
-	requirementBadge: requirement_badge_default,
-	resourceList: resource_list_default,
-	select: select_default,
-	stepNavigation: step_navigation_default,
-	supportText: support_text_default,
-	table: table_default,
-	tabs: tabs_default,
-	textarea: textarea_default,
-	treeView: tree_view_default,
-	unorderedList: unordered_list_default,
-	utilityLink: utility_link_default
-};
-var recipes_default = recipes;
-
-//#endregion
-//#region src/keyframes.ts
-const keyframes = {
-	"circular-progress": {
-		"0%": {
-			strokeDasharray: "1, 400",
-			strokeDashoffset: "0"
-		},
-		"50%": {
-			strokeDasharray: "400, 400",
-			strokeDashoffset: "-100%"
-		},
-		"100%": {
-			strokeDasharray: "400, 400",
-			strokeDashoffset: "-260%"
+	}),
+	unorderedList: defineRecipe({
+		className: "unordered-list",
+		base: {
+			/**
+			* pl-8 list-[revert]
+			*/
+			pl: 8,
+			listStyle: "revert",
+			/**
+			* [&_:where(ol,ul)]:mt-1 [&_:where(ol,ul)]:-mb-1
+			*/
+			"&:where(ol,ul)": {
+				mt: 1,
+				mb: -1
+			}
 		}
-	},
-	position: {
-		from: {
-			insetInlineStart: "var(--animate-from-x)",
-			insetBlockStart: "var(--animate-from-y)"
-		},
-		to: {
-			insetInlineStart: "var(--animate-to-x)",
-			insetBlockStart: "var(--animate-to-y)"
+	}),
+	utilityLink: defineRecipe({
+		className: "utility-link",
+		description: "ユーティリティリンクはふつうの横並びリンクリストに近いが、それよりもコンパクトに作られています。",
+		base: {
+			colorPalette: "keyColor",
+			/**
+			* !text-solid-gray-800 text-dns-16N-130
+			* focus-visible:bg-yellow-300 focus-visible:text-blue-1000
+			*/
+			textStyle: "dns-16N-130",
+			color: {
+				base: "solid-gray.800",
+				_focusVisible: "colorPalette.primary.100"
+			},
+			bg: {
+				base: "transparent",
+				_focusVisible: "yellow.300"
+			},
+			/**
+			* underline underline-offset-[calc(3/16*1rem)]
+			* hover:decoration-[calc(3/16*1rem)]
+			*/
+			textDecoration: "underline",
+			textDecorationThickness: {
+				base: "1px",
+				_hover: "calc(3 / 16 * 1rem)"
+			},
+			textUnderlineOffset: "calc(3 / 16 * 1rem)",
+			/**
+			* focus-visible:rounded-4
+			* focus-visible:outline focus-visible:outline-4
+			* focus-visible:outline-black focus-visible:outline-offset-[calc(2/16*1rem)]
+			* focus-visible:ring-[calc(2/16*1rem)] focus-visible:ring-yellow-300
+			*/
+			_focusVisible: {
+				rounded: 4,
+				outlineStyle: "solid",
+				outlineWidth: "4px",
+				outlineColor: "black",
+				outlineOffset: .5,
+				focusBox: "calc({spacing.1} / 2)"
+			},
+			/**
+			* with icon
+			*/
+			display: "inline-flex",
+			alignItems: "center",
+			gap: 1,
+			"& svg": {
+				width: "1em",
+				height: "1em"
+			}
 		}
-	}
+	})
 };
-
 //#endregion
 //#region src/index.ts
 const base = {
 	name: "digital-go-pandacss-preset",
 	presets: [presetBase],
 	theme: {
-		keyframes,
-		recipes: recipes_default
+		keyframes: {
+			"circular-progress": {
+				"0%": {
+					strokeDasharray: "1, 400",
+					strokeDashoffset: "0"
+				},
+				"50%": {
+					strokeDasharray: "400, 400",
+					strokeDashoffset: "-100%"
+				},
+				"100%": {
+					strokeDasharray: "400, 400",
+					strokeDashoffset: "-260%"
+				}
+			},
+			position: {
+				from: {
+					insetInlineStart: "var(--animate-from-x)",
+					insetBlockStart: "var(--animate-from-y)"
+				},
+				to: {
+					insetInlineStart: "var(--animate-to-x)",
+					insetBlockStart: "var(--animate-to-y)"
+				}
+			},
+			"fade-in": {
+				from: { opacity: 0 },
+				to: { opacity: 1 }
+			},
+			"fade-out": {
+				from: { opacity: 1 },
+				to: { opacity: 0 }
+			},
+			"slide-in-bottom": {
+				from: { transform: "translate3d(0, 100%, 0)" },
+				to: { transform: "translate3d(var(--drawer-translate-x, 0), var(--drawer-translate-y, 0), 0)" }
+			},
+			"slide-out-bottom": {
+				from: { transform: "translate3d(var(--drawer-translate-x, 0), var(--drawer-translate-y, 0), 0)" },
+				to: { transform: "translate3d(0, 100%, 0)" }
+			},
+			"slide-in-top": {
+				from: { transform: "translate3d(0, -100%, 0)" },
+				to: { transform: "translate3d(var(--drawer-translate-x, 0), var(--drawer-translate-y, 0), 0)" }
+			},
+			"slide-out-top": {
+				from: { transform: "translate3d(var(--drawer-translate-x, 0), var(--drawer-translate-y, 0), 0)" },
+				to: { transform: "translate3d(0, -100%, 0)" }
+			},
+			"slide-in-left": {
+				from: { transform: "translate3d(-100%, 0, 0)" },
+				to: { transform: "translate3d(var(--drawer-translate-x, 0), var(--drawer-translate-y, 0), 0)" }
+			},
+			"slide-out-left": {
+				from: { transform: "translate3d(var(--drawer-translate-x, 0), var(--drawer-translate-y, 0), 0)" },
+				to: { transform: "translate3d(-100%, 0, 0)" }
+			},
+			"slide-in-right": {
+				from: { transform: "translate3d(100%, 0, 0)" },
+				to: { transform: "translate3d(var(--drawer-translate-x, 0), var(--drawer-translate-y, 0), 0)" }
+			},
+			"slide-out-right": {
+				from: { transform: "translate3d(var(--drawer-translate-x, 0), var(--drawer-translate-y, 0), 0)" },
+				to: { transform: "translate3d(100%, 0, 0)" }
+			}
+		},
+		recipes
 	}
 };
 var src_default = definePreset(base);
@@ -3008,7 +3905,7 @@ const createPreset = (keyColor = "blue") => definePreset({
 		extend: { semanticTokens: { colors: { keyColor: createKeyColor(keyColor) } } }
 	}
 });
-
 //#endregion
 export { createPreset, src_default as default };
+
 //# sourceMappingURL=index.mjs.map