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

package/dist/index.cjs

@@ -0,0 +1,3043 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+//#region rolldown:runtime
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+			key = keys[i];
+			if (!__hasOwnProp.call(to, key) && key !== except) {
+				__defProp(to, key, {
+					get: ((k) => from[k]).bind(null, key),
+					enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+				});
+			}
+		}
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+
+//#endregion
+let _pandacss_dev = require("@pandacss/dev");
+let _cieloazul310_digital_go_pandacss_plugin = require("@cieloazul310/digital-go-pandacss-plugin");
+_cieloazul310_digital_go_pandacss_plugin = __toESM(_cieloazul310_digital_go_pandacss_plugin);
+let _cieloazul310_digital_go_pandacss_utils = require("@cieloazul310/digital-go-pandacss-utils");
+let _zag_js_accordion = require("@zag-js/accordion");
+let _zag_js_anatomy = require("@zag-js/anatomy");
+let _zag_js_checkbox = require("@zag-js/checkbox");
+let _zag_js_date_picker = require("@zag-js/date-picker");
+let _zag_js_collapsible = require("@zag-js/collapsible");
+let _zag_js_dialog = require("@zag-js/dialog");
+let _zag_js_file_upload = require("@zag-js/file-upload");
+let _zag_js_menu = require("@zag-js/menu");
+let _zag_js_progress = require("@zag-js/progress");
+let _zag_js_radio_group = require("@zag-js/radio-group");
+let _zag_js_select = require("@zag-js/select");
+let _zag_js_steps = require("@zag-js/steps");
+let _zag_js_tabs = require("@zag-js/tabs");
+let _zag_js_tree_view = require("@zag-js/tree-view");
+
+//#region src/recipes/accordion.ts
+/**
+* source:
+* https://github.com/digital-go-jp/design-system-example-components-react/blob/main/src/components/Accordion/Accordion.tsx
+*/
+var accordion_default = (0, _pandacss_dev.defineSlotRecipe)({
+	className: "accordion",
+	description: "アコーディオンは、ユーザーがコンテンツのセクションを展開または折りたたむことができるユーザーインターフェースです。項目をコンパクトにリスト表示しつつページ遷移せず関連情報を表示したいという要求に対応します。※セクション内の任意の範囲で折りたたみ表示をする場合は「ディスクロージャー」コンポーネントを使用してください。",
+	slots: _zag_js_accordion.anatomy.keys(),
+	base: {
+		root: { colorPalette: "keyColor" },
+		item: {
+			borderBottomWidth: "1px",
+			borderBottomColor: "solid-gray.420",
+			"--icon-size": {
+				base: "{spacing.5}",
+				md: "{spacing.8}"
+			}
+		},
+		itemTrigger: {
+			position: "relative",
+			display: "block",
+			bg: {
+				base: "transparent",
+				_hover: "solid-gray.50",
+				_focusVisible: {
+					base: "yellow.300",
+					_hover: "yellow.300"
+				}
+			},
+			py: {
+				base: 2,
+				md: 3.5
+			},
+			pl: {
+				base: "calc(var(--icon-size) + {spacing.3})",
+				md: "calc(var(--icon-size) + {spacing.5})"
+			},
+			pr: {
+				base: 2,
+				md: 4
+			},
+			cursor: { _hover: "pointer" },
+			"&::marker": { content: "\"\"" },
+			_focusVisible: {
+				rounded: 4,
+				outlineStyle: "solid",
+				outlineWidth: "4px",
+				outlineColor: "black",
+				outlineOffset: .5,
+				focusBox: "calc({spacing.1} / 2)"
+			},
+			textAlign: "start",
+			width: "full"
+		},
+		itemIndicator: {
+			position: "absolute",
+			top: {
+				base: 2,
+				md: 3.5
+			},
+			left: {
+				base: .5,
+				md: 1.5
+			},
+			width: "var(--icon-size)",
+			height: "var(--icon-size)",
+			mt: "calc((1lh - var(--icon-size)) / 2)",
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			bg: "white",
+			color: "colorPalette.primary.100",
+			borderWidth: "1px",
+			borderColor: "currentcolor",
+			rounded: "full",
+			outlineStyle: "solid",
+			outlineWidth: {
+				base: "0px",
+				_groupHover: "2px"
+			},
+			outlineColor: {
+				base: "transparent",
+				_groupHover: "currentcolor"
+			},
+			transition: "transform",
+			transform: {
+				base: "rotate(0deg)",
+				_open: "rotate(-180deg)"
+			}
+		},
+		itemContent: {
+			pl: {
+				base: "calc(var(--icon-size) + {spacing.3})",
+				md: "calc(var(--icon-size) + {spacing.5})"
+			},
+			pr: {
+				base: 2,
+				md: 4
+			},
+			py: {
+				base: 4,
+				md: 6
+			}
+		}
+	}
+});
+
+//#endregion
+//#region src/recipes/blockquote.ts
+var blockquote_default = (0, _pandacss_dev.defineRecipe)({
+	className: "blockquote",
+	base: {
+		my: 0,
+		mx: 10,
+		borderLeftWidth: "8px",
+		borderColor: "solid-gray.536",
+		pt: 2,
+		pr: 4,
+		pb: 2,
+		pl: 6,
+		"& > *:first-child": { mt: 0 },
+		"& > *:last-child": { mb: 0 }
+	}
+});
+
+//#endregion
+//#region src/anatomy.ts
+/**
+* https://github.com/chakra-ui/chakra-ui/blob/main/packages/react/src/anatomy.ts
+*/
+const breadcrumbAnatomy = (0, _zag_js_anatomy.createAnatomy)("breadcrumb").parts("root", "label", "list", "item", "link", "separator");
+const cardAnatomy = (0, _zag_js_anatomy.createAnatomy)("card").parts("root", "main", "image", "sub", "title");
+const chipTagAnatomy = (0, _zag_js_anatomy.createAnatomy)("chip-tag").parts("root", "icon", "label", "removeButton", "addButton");
+/**
+* https://github.com/digital-go-jp/design-system-example-components-react/tree/main/src/components/EmergencyBanner/parts
+*/
+const emergencyBannerAnatomy = (0, _zag_js_anatomy.createAnatomy)("emergency-banner").parts("root", "heading", "body", "action", "button");
+/**
+* https://github.com/chakra-ui/ark/blob/main/packages/react/src/components/field/field.anatomy.ts
+*/
+const fieldAnatomy = (0, _zag_js_anatomy.createAnatomy)("field").parts("root", "errorText", "supportText", "input", "label", "select", "textarea", "requirementBadge");
+/**
+* https://github.com/chakra-ui/ark/blob/main/packages/react/src/components/fieldset/fieldset.anatomy.ts
+*/
+const fieldsetAnatomy = (0, _zag_js_anatomy.createAnatomy)("fieldset").parts("root", "errorText", "supportText", "legend");
+const menuListAnatomy = (0, _zag_js_anatomy.createAnatomy)("menu-list").parts("root", "label", "content", "item", "itemGroup", "itemGroupLabel", "itemText", "itemIndicator", "input");
+const notificationBannerAnatomy = (0, _zag_js_anatomy.createAnatomy)("notification-banner").parts("root", "icon", "close", "header", "heading", "body", "actions");
+const resourceListAnatomy = (0, _zag_js_anatomy.createAnatomy)("resource-list").parts("root", "main", "action", "content", "title");
+const tableAnatomy = (0, _zag_js_anatomy.createAnatomy)("table").parts("root", "head", "body", "foot", "row", "header", "cell", "colgroup", "col", "caption");
+
+//#endregion
+//#region src/recipes/link.ts
+/**
+* source:
+* https://github.com/digital-go-jp/design-system-example-components-react/blob/main/src/components/Link/Link.tsx
+*/
+var link_default = (0, _pandacss_dev.defineRecipe)({
+	className: "link",
+	description: "リンクテキストは通常、色や下線などの視覚的な表現で通常のテキストと区別され、URLと関連づけられたテキスト文字列です。この関連付けをハイパーリンクと呼び、これはウェブをウェブたらしめている基本的な概念のひとつです。",
+	base: {
+		colorPalette: "blue",
+		color: {
+			base: "colorPalette.primary.100",
+			_visited: "magenta.900",
+			_hover: "colorPalette.primary.100",
+			_focusVisible: "colorPalette.primary.100",
+			_active: "orange.800"
+		},
+		bg: {
+			base: "transparent",
+			_focusVisible: "yellow.300"
+		},
+		textDecoration: "underline",
+		textDecorationThickness: {
+			base: "1px",
+			_hover: "calc(3 / 16 * 1rem)",
+			_active: "1px"
+		},
+		textUnderlineOffset: "calc(3 / 16 * 1rem)",
+		_focusVisible: {
+			rounded: 4,
+			outlineStyle: "solid",
+			outlineWidth: "4px",
+			outlineColor: "black",
+			outlineOffset: .5,
+			focusBox: "calc({spacing.1} / 2)"
+		},
+		"& > svg": {
+			display: "inline",
+			ml: 1,
+			mb: 1,
+			width: "1em",
+			height: "1em"
+		}
+	}
+});
+
+//#endregion
+//#region src/recipes/breadcrumb.ts
+/**
+* source:
+* https://github.com/digital-go-jp/design-system-example-components-react/blob/main/src/components/Breadcrumbs/Breadcrumbs.tsx
+*/
+var breadcrumb_default = (0, _pandacss_dev.defineSlotRecipe)({
+	className: "breadcrumb",
+	description: "パンくずリストは、ウェブサイトの階層内でユーザーの現在の位置を表示します。",
+	slots: breadcrumbAnatomy.keys(),
+	base: {
+		root: { "--icon-size": "16px" },
+		label: {
+			srOnly: true,
+			textStyle: "oln-16N-100"
+		},
+		list: { display: "inline" },
+		item: {
+			display: "inline",
+			overflowWrap: "break-word",
+			textStyle: "oln-16N-100"
+		},
+		link: {
+			...link_default.base,
+			"& svg": {
+				display: "inline",
+				width: "var(--icon-size)",
+				height: "var(--icon-size)",
+				mr: 1
+			}
+		},
+		separator: {
+			mx: 2,
+			display: "inline-flex",
+			width: "12px",
+			height: "12px",
+			"& > svg": {
+				width: "full",
+				height: "full",
+				fill: "none"
+			}
+		}
+	}
+});
+
+//#endregion
+//#region src/recipes/button.ts
+/**
+* source:
+* https://github.com/digital-go-jp/design-system-example-components-react/blob/main/src/components/Button/Button.tsx
+*/
+var button_default = (0, _pandacss_dev.defineRecipe)({
+	className: "button",
+	description: "ボタンは、主にアクション実行またはページ遷移のためのトリガーとして使用します。画面内におけるボタンの重要度に応じて使い分け可能な複数のスタイルがあります。",
+	base: {
+		colorPalette: "keyColor",
+		textUnderlineOffset: "calc(3 / 16 * 1rem)",
+		_focusVisible: {
+			outlineStyle: "solid",
+			outlineWidth: "4px",
+			outlineColor: "black",
+			outlineOffset: .5,
+			focusBox: "calc({spacing.1} / 2)"
+		},
+		_disabled: { pointerEvents: "none" },
+		display: "inline-flex",
+		columnGap: 1,
+		textAlign: "center",
+		alignItems: "center",
+		justifyContent: "center",
+		cursor: "pointer",
+		_icon: { flexShrink: 0 }
+	},
+	variants: {
+		variant: {
+			"solid-fill": {
+				bg: {
+					base: "colorPalette.primary",
+					_hover: "colorPalette.primary.100",
+					_active: "colorPalette.primary.300",
+					_disabled: "solid-gray.300"
+				},
+				color: {
+					base: "white",
+					_disabled: "solid-gray.50"
+				},
+				borderWidth: "4px",
+				borderStyle: "double",
+				borderColor: "transparent",
+				textDecoration: {
+					base: "none",
+					_hover: "underline",
+					_active: "underline"
+				}
+			},
+			outline: {
+				bg: {
+					base: "white",
+					_hover: "colorPalette.200",
+					_active: "colorPalette.300",
+					_disabled: "white"
+				},
+				color: {
+					base: "colorPalette.primary",
+					_hover: "colorPalette.primary.100",
+					_active: "colorPalette.primary.300",
+					_disabled: "solid-gray.300"
+				},
+				borderWidth: "1px",
+				borderColor: "currentcolor",
+				textDecoration: {
+					base: "none",
+					_hover: "underline",
+					_active: "underline"
+				}
+			},
+			text: {
+				bg: {
+					base: "transparent",
+					_hover: "colorPalette.bg",
+					_active: "colorPalette.100",
+					_focusVisible: {
+						base: "yellow.300",
+						_hover: "yellow.300"
+					},
+					_disabled: "transparent"
+				},
+				color: {
+					base: "colorPalette.primary",
+					_hover: "colorPalette.primary.100",
+					_active: "colorPalette.primary.300",
+					_disabled: "solid-gray.300"
+				},
+				textDecoration: "underline",
+				textDecorationThickness: {
+					base: "1px",
+					_hover: "calc(3 / 16 * 1rem)"
+				}
+			}
+		},
+		size: {
+			lg: {
+				minWidth: "calc({spacing.1} * 34)",
+				minHeight: 14,
+				rounded: 8,
+				px: 4,
+				py: 3,
+				textStyle: "oln-16B-100"
+			},
+			md: {
+				minWidth: 24,
+				minHeight: 12,
+				textStyle: "oln-16B-100",
+				px: 4,
+				py: 2,
+				rounded: 8
+			},
+			sm: {
+				position: "relative",
+				minWidth: 20,
+				minHeight: 9,
+				textStyle: "oln-16B-100",
+				px: 3,
+				py: .5,
+				rounded: 6,
+				_after: {
+					position: "absolute",
+					insetInline: 0,
+					insetBlock: "full",
+					m: "auto",
+					height: "44px"
+				}
+			},
+			xs: {
+				minWidth: 18,
+				minHeight: 7,
+				textStyle: "oln-14B-100",
+				px: 2,
+				py: .5,
+				rounded: 4,
+				_after: {
+					position: "absolute",
+					insetInline: 0,
+					insetBlock: "full",
+					m: "auto",
+					height: "44px"
+				}
+			}
+		}
+	},
+	defaultVariants: {
+		variant: "solid-fill",
+		size: "md"
+	}
+});
+
+//#endregion
+//#region src/recipes/card.ts
+var card_default = (0, _pandacss_dev.defineSlotRecipe)({
+	className: "card",
+	description: "単一の主題に関するコンテンツをまとめて表示するコンテナとなるコンポーネントです。さまざまなタイプとサイズの要素やコンポーネントを柔軟に格納できます。本来カードコンポーネントは、あらゆるコンテンツ（コンポーネントや要素）を内包することができ、非常に自由度の高いコンテナとなります。本デザインシステムでは、情報設計をしやすいカードを提供するため、自由度に制約を設けたコンポーネント仕様として策定しています。",
+	slots: cardAnatomy.keys(),
+	base: {
+		root: {
+			display: "grid",
+			gridTemplateAreas: `
+        "image"
+        "main"
+        "sub"
+      `,
+			bg: {
+				base: "white",
+				"&:has(input:checked)": "colorPalette.bg"
+			},
+			color: "solid-gray.800",
+			textStyle: "std-16N-170",
+			borderColor: "solid-gray.420",
+			borderWidth: "1px",
+			rounded: 16,
+			overflow: "hidden",
+			colorPalette: "keyColor"
+		},
+		main: {
+			gridArea: "main",
+			py: 4,
+			px: {
+				base: 4,
+				md: 6
+			},
+			display: "flex",
+			flexDirection: "column",
+			gap: 4,
+			_focusVisible: {
+				outlineStyle: "solid",
+				outlineWidth: "4px",
+				outlineColor: "black",
+				outlineOffset: .5,
+				focusBox: "calc({spacing.1} / 2)"
+			}
+		},
+		image: {
+			gridArea: "image",
+			position: "relative",
+			overflow: "hidden",
+			"& > img": {
+				objectFit: "cover",
+				width: "full",
+				height: "full"
+			}
+		},
+		sub: {
+			gridArea: "sub",
+			py: 4,
+			px: {
+				base: 4,
+				md: 6
+			}
+		},
+		title: { textStyle: "std-20B-150" }
+	},
+	variants: {
+		orientation: {
+			vertical: { root: {
+				gridTemplateAreas: `
+            "image"
+            "main"
+            "sub"
+          `,
+				gridTemplateColumns: "1fr"
+			} },
+			horizontal: { root: {
+				gridTemplateAreas: `
+            "image main"
+            "image sub"
+          `,
+				gridTemplateColumns: "minmax(auto, 320px) 1fr"
+			} }
+		},
+		asLink: { true: {
+			root: {
+				position: "relative",
+				bg: { _hover: "solid-gray.50" }
+			},
+			image: { "& > img": {
+				transition: "transform",
+				_groupHover: { transform: "scale(1.05)" }
+			} },
+			sub: { "& > *": { zIndex: 1 } },
+			title: { "& > a": { _before: {
+				content: "\"\"",
+				position: "absolute",
+				top: 0,
+				left: 0,
+				width: "full",
+				height: "full",
+				zIndex: 0,
+				cursor: "inherit"
+			} } }
+		} }
+	},
+	defaultVariants: {
+		orientation: "vertical",
+		asLink: false
+	}
+});
+
+//#endregion
+//#region src/recipes/checkbox.ts
+var checkbox_default = (0, _pandacss_dev.defineSlotRecipe)({
+	className: "checkbox",
+	description: "チェックボックスは、複数の項目の中から複数の選択肢を選ぶことを可能にします。また、ひとつの選択肢のオン・オフの切り替えにも用いることができます。",
+	slots: _zag_js_checkbox.anatomy.extendWith("group").keys(),
+	base: {
+		root: {
+			display: "flex",
+			alignItems: "center",
+			width: "fit-content",
+			py: 2,
+			colorPalette: "keyColor"
+		},
+		control: {
+			flexShrink: 0,
+			rounded: "calc(2 / 18 * 100%)",
+			borderWidth: "2px",
+			borderColor: {
+				base: "solid-gray.420",
+				_checked: "colorPalette.primary",
+				_invalid: {
+					base: "error.1",
+					_disabled: "solid-gray.420"
+				},
+				_groupHover: {
+					base: "black",
+					_disabled: "solid-gray.420"
+				}
+			},
+			_disabled: { bg: "solid-gray.50" },
+			_groupHover: {
+				outlineStyle: {
+					base: "solid",
+					_disabled: "hidden"
+				},
+				outlineColor: "solid-gray.420",
+				_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)"
+			}
+		},
+		indicator: {
+			appearance: "none",
+			width: "full",
+			height: "full",
+			zIndex: 1,
+			bg: {
+				base: "white",
+				_checked: {
+					base: "colorPalette.primary",
+					_hover: "colorPalette.primary.200",
+					_highContrast: "Highlight"
+				},
+				_indeterminate: {
+					base: "colorPalette.primary",
+					_hover: "colorPalette.primary.200",
+					_highContrast: "Highlight"
+				},
+				_invalid: {
+					_indeterminate: {
+						base: "error.1",
+						_hover: "red.1000",
+						_disabled: "solid-gray.300"
+					},
+					_checked: {
+						base: "error.1",
+						_hover: "red.1000",
+						_disabled: "solid-gray.300"
+					}
+				},
+				_disabled: {
+					base: "solid-gray.50",
+					_checked: "solid-gray.300",
+					_indeterminate: "solid-gray.300",
+					_highContrast: { _checked: "GrayText" }
+				}
+			},
+			backgroundClip: "padding-box",
+			_before: {
+				content: "\"\"",
+				display: "none",
+				width: 3.5,
+				height: 3.5,
+				bg: {
+					base: "white",
+					_highContrast: "HighlightText"
+				},
+				borderColor: { _disabled: "solid-gray.50" }
+			},
+			_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')"
+			} },
+			_indeterminate: { _before: {
+				display: "block",
+				clipPath: "path('M3.25,7.75H10.75V6.25H3.25V7.75Z')"
+			} }
+		},
+		label: { color: "solid-gray.800" }
+	},
+	variants: { size: {
+		sm: {
+			root: { gap: 1.5 },
+			control: {
+				width: "calc({spacing.9} / 2)",
+				height: "calc({spacing.9} / 2)",
+				_groupHover: {
+					outlineWidth: "2px",
+					_focus: { outlineWidth: "4px" }
+				}
+			},
+			label: { textStyle: "dns-16N-130" }
+		},
+		md: {
+			root: { gap: 2.5 },
+			control: {
+				width: 6,
+				height: 6,
+				_groupHover: { outlineWidth: "4px" }
+			},
+			indicator: { _before: {
+				transformOrigin: "top left",
+				scale: "calc(20 / 14)"
+			} },
+			label: { textStyle: "dns-16N-130" }
+		},
+		lg: {
+			root: { gap: 2.5 },
+			control: {
+				width: 8,
+				height: 8,
+				_groupHover: {
+					outlineWidth: "6px",
+					_focus: { outlineWidth: "4px" }
+				}
+			},
+			indicator: { _before: {
+				transformOrigin: "top left",
+				scale: "calc(27 / 14)"
+			} },
+			label: { textStyle: "dns-17N-130" }
+		}
+	} },
+	defaultVariants: { size: "sm" }
+});
+
+//#endregion
+//#region src/recipes/chip-label.ts
+var chip_label_default = (0, _pandacss_dev.defineRecipe)({
+	className: "chip-label",
+	description: "状態や状況を示すキーワードを表示して、情報の分類・整理の効率を向上させるグラフィック要素です。情報リストやテーブルの各行などのステータスを分かりやすく表示したい場合に有効です。",
+	base: {
+		display: "inline-flex",
+		alignItems: "center",
+		gap: 1,
+		px: 2,
+		py: 1,
+		minHeight: "32px",
+		borderWidth: "1px",
+		colorPalette: "keyColor",
+		rounded: 8,
+		flexShrink: 0,
+		whiteSpace: "nowrap",
+		textStyle: "oln-16N-100"
+	},
+	variants: { variant: {
+		text: {
+			color: "colorPalette.primary",
+			borderColor: "transparent"
+		},
+		outlined: {
+			color: "colorPalette.primary",
+			borderColor: "currentcolor"
+		},
+		ghost: {
+			color: "colorPalette.primary",
+			bg: "colorPalette.bg",
+			borderColor: "currentColor"
+		},
+		"solid-fill": {
+			bg: "colorPalette.primary",
+			color: "white",
+			borderColor: "transparent"
+		}
+	} },
+	defaultVariants: { variant: "text" }
+});
+
+//#endregion
+//#region src/recipes/chip-tag.ts
+const buttonCommon = {
+	width: "24px",
+	height: "24px",
+	rounded: "full",
+	p: "2px",
+	_before: {
+		content: "\"\"",
+		display: "block",
+		width: "full",
+		height: "full",
+		rounded: "full",
+		bg: "colorPalette.primary"
+	},
+	_groupActive: { _before: { bg: "colorPalette.primary.300" } },
+	_focus: {
+		outlineStyle: "solid",
+		outlineWidth: "4px",
+		outlineColor: "black",
+		outlineOffset: .5,
+		focusBox: "calc({spacing.1} / 2)"
+	}
+};
+var chip_tag_default = (0, _pandacss_dev.defineSlotRecipe)({
+	slots: chipTagAnatomy.keys(),
+	className: "chip-tag",
+	base: {
+		root: {
+			display: "inline-flex",
+			alignItems: "center",
+			px: 2,
+			py: 1,
+			minHeight: "32px",
+			borderWidth: "1px",
+			colorPalette: "keyColor",
+			rounded: "full",
+			flexShrink: 0,
+			whiteSpace: "nowrap",
+			textStyle: "oln-16N-100",
+			color: "colorPalette.primary",
+			bg: "colorPalette.bg",
+			borderColor: "currentColor",
+			cursor: "pointer"
+		},
+		label: {
+			flexGrow: 1,
+			px: 2
+		},
+		removeButton: {
+			...buttonCommon,
+			_before: {
+				...buttonCommon._before,
+				clipPath: "path('M6.39998 14.6538L9.99998 11.0538L13.6 14.6538L14.6538 13.6L11.0538 9.99998L14.6538 6.39998L13.6 5.34615L9.99998 8.94615L6.39998 5.34615L5.34615 6.39998L8.94615 9.99998L5.34615 13.6L6.39998 14.6538ZM10.0016 19.5C8.68772 19.5 7.45268 19.2506 6.29655 18.752C5.1404 18.2533 4.13472 17.5765 3.2795 16.7217C2.42427 15.8669 1.74721 14.8616 1.24833 13.706C0.749442 12.5504 0.5 11.3156 0.5 10.0017C0.5 8.68772 0.749334 7.45268 1.248 6.29655C1.74667 5.1404 2.42342 4.13472 3.27825 3.2795C4.1331 2.42427 5.13834 1.74721 6.29398 1.24833C7.44959 0.749443 8.68437 0.5 9.9983 0.5C11.3122 0.5 12.5473 0.749334 13.7034 1.248C14.8596 1.74667 15.8652 2.42342 16.7205 3.27825C17.5757 4.1331 18.2527 5.13834 18.7516 6.29398C19.2505 7.44959 19.5 8.68437 19.5 9.9983C19.5 11.3122 19.2506 12.5473 18.752 13.7034C18.2533 14.8596 17.5765 15.8652 16.7217 16.7205C15.8669 17.5757 14.8616 18.2527 13.706 18.7516C12.5504 19.2505 11.3156 19.5 10.0016 19.5ZM9.99998 18C12.2333 18 14.125 17.225 15.675 15.675C17.225 14.125 18 12.2333 18 9.99998C18 7.76664 17.225 5.87498 15.675 4.32498C14.125 2.77498 12.2333 1.99998 9.99998 1.99998C7.76664 1.99998 5.87498 2.77498 4.32498 4.32498C2.77498 5.87498 1.99998 7.76664 1.99998 9.99998C1.99998 12.2333 2.77498 14.125 4.32498 15.675C5.87498 17.225 7.76664 18 9.99998 18Z')"
+			},
+			_groupHover: { _before: { clipPath: "path('M6.39998 14.6538L9.99998 11.0538L13.6 14.6538L14.6538 13.6L11.0538 9.99998L14.6538 6.39998L13.6 5.34615L9.99998 8.94615L6.39998 5.34615L5.34615 6.39998L8.94615 9.99998L5.34615 13.6L6.39998 14.6538ZM10.0016 19.5C8.68772 19.5 7.45268 19.2506 6.29655 18.752C5.1404 18.2533 4.13472 17.5765 3.2795 16.7217C2.42427 15.8669 1.74721 14.8616 1.24833 13.706C0.749442 12.5504 0.5 11.3156 0.5 10.0017C0.5 8.68772 0.749334 7.45268 1.248 6.29655C1.74667 5.1404 2.42342 4.13472 3.27825 3.2795C4.1331 2.42427 5.13834 1.74721 6.29398 1.24833C7.44959 0.749443 8.68437 0.5 9.9983 0.5C11.3122 0.5 12.5473 0.749334 13.7034 1.248C14.8596 1.74667 15.8652 2.42342 16.7205 3.27825C17.5757 4.1331 18.2527 5.13834 18.7516 6.29398C19.2505 7.44959 19.5 8.68437 19.5 9.9983C19.5 11.3122 19.2506 12.5473 18.752 13.7034C18.2533 14.8596 17.5765 15.8652 16.7217 16.7205C15.8669 17.5757 14.8616 18.2527 13.706 18.7516C12.5504 19.2505 11.3156 19.5 10.0016 19.5Z')" } }
+		},
+		addButton: {
+			...buttonCommon,
+			_before: {
+				...buttonCommon._before,
+				clipPath: "path('M4.1637 10.7451 9.2548 10.7451 9.2549 15.8363 10.7451 15.8363 10.7452 10.7451 15.8363 10.7451 15.8364 9.2548 10.7452 9.2548 10.7452 4.1636 9.2548 4.1636 9.2548 9.2548 4.1636 9.2548 4.1637 10.7451ZM3.2836 16.7186C2.3546 15.7896 1.6576 14.7399 1.1927 13.5699.7278 12.3997.4952 11.21.4949 10.0008.4946 8.7917.7267 7.6021 1.1911 6.4322 1.6555 5.2623 2.3522 4.2128 3.2813 3.2837 4.2104 2.3546 5.26 1.6576 6.4301 1.1927 7.6003.7278 8.7899.4952 9.9991.4949 11.2083.4946 12.3979.7267 13.5678 1.1911 14.7377 1.6555 15.7872 2.3522 16.7163 3.2813 17.6454 4.2104 18.3424 5.26 18.8073 6.4301 19.2722 7.6003 19.5048 8.7899 19.5051 9.9991 19.5054 11.2083 19.2733 12.3978 18.8089 13.5678 18.3445 14.7377 17.6478 15.7872 16.7187 16.7163 15.7896 17.6454 14.7399 18.3424 13.5699 18.8073 12.3997 19.2722 11.2101 19.5047 10.0008 19.5051 8.7917 19.5054 7.6021 19.2732 6.4322 18.8089 5.2623 18.3445 4.2128 17.6478 3.2836 16.7186ZM4.3431 15.6568C5.9223 17.236 7.808 18.0257 10 18.0257 12.192 18.0257 14.0777 17.236 15.6569 15.6568 17.2361 14.0776 18.0257 12.192 18.0257 10 18.0257 7.808 17.236 5.9223 15.6569 4.3431 14.0776 2.7639 12.192 1.9743 10 1.9743 7.808 1.9743 5.9224 2.7639 4.3431 4.3431 2.764 5.9223 1.9743 7.808 1.9743 10 1.9743 12.192 2.7639 14.0776 4.3431 15.6568Z')"
+			},
+			_groupHover: { _before: { clipPath: "path('M4.1637 10.7451 9.2548 10.7451 9.2549 15.8363 10.7451 15.8363 10.7452 10.7451 15.8363 10.7451 15.8364 9.2548 10.7452 9.2548 10.7452 4.1636 9.2548 4.1636 9.2548 9.2548 4.1636 9.2548 4.1637 10.7451ZM10.0016 19.5C8.68772 19.5 7.45268 19.2506 6.29655 18.752C5.1404 18.2533 4.13472 17.5765 3.2795 16.7217C2.42427 15.8669 1.74721 14.8616 1.24833 13.706C0.749442 12.5504 0.5 11.3156 0.5 10.0017C0.5 8.68772 0.749334 7.45268 1.248 6.29655C1.74667 5.1404 2.42342 4.13472 3.27825 3.2795C4.1331 2.42427 5.13834 1.74721 6.29398 1.24833C7.44959 0.749443 8.68437 0.5 9.9983 0.5C11.3122 0.5 12.5473 0.749334 13.7034 1.248C14.8596 1.74667 15.8652 2.42342 16.7205 3.27825C17.5757 4.1331 18.2527 5.13834 18.7516 6.29398C19.2505 7.44959 19.5 8.68437 19.5 9.9983C19.5 11.3122 19.2506 12.5473 18.752 13.7034C18.2533 14.8596 17.5765 15.8652 16.7217 16.7205C15.8669 17.5757 14.8616 18.2527 13.706 18.7516C12.5504 19.2505 11.3156 19.5 10.0016 19.5Z')" } }
+		}
+	}
+});
+
+//#endregion
+//#region src/recipes/label.ts
+/**
+* source:
+* https://github.com/digital-go-jp/design-system-example-components-react/blob/main/src/components/Label/Label.tsx
+*/
+var label_default = (0, _pandacss_dev.defineRecipe)({
+	className: "label",
+	base: {
+		display: "flex",
+		width: "fit-content",
+		alignItems: "center",
+		gap: 2,
+		color: "solid-gray.800"
+	},
+	variants: { size: {
+		sm: { textStyle: "std-16B-170" },
+		md: { textStyle: "std-17B-170" },
+		lg: { textStyle: "std-18B-160" }
+	} },
+	defaultVariants: { size: "md" }
+});
+
+//#endregion
+//#region src/recipes/input.ts
+/**
+* source:
+* https://github.com/digital-go-jp/design-system-example-components-react/blob/main/src/components/Input/Input.tsx
+*/
+var input_default = (0, _pandacss_dev.defineRecipe)({
+	className: "input",
+	description: "インプットテキストコンポーネントは、名前や電話番号など、1行以内のテキストを入力する場合に使用します。",
+	base: {
+		maxWidth: "full",
+		rounded: 8,
+		px: 4,
+		py: 3,
+		borderStyle: {
+			base: "solid",
+			_readOnly: "dashed"
+		},
+		borderWidth: "1px",
+		borderColor: {
+			base: "solid-gray.600",
+			_hover: "black",
+			_disabled: {
+				base: "solid-gray.300",
+				_highContrast: "GrayText"
+			},
+			_invalid: {
+				base: "error.1",
+				_hover: "red.1000"
+			}
+		},
+		bg: {
+			base: "white",
+			_disabled: "solid-gray.50"
+		},
+		color: {
+			base: "solid-gray.800",
+			_disabled: {
+				base: "solid-gray.420",
+				_highContrast: "GrayText"
+			}
+		},
+		textStyle: "oln-16N-100",
+		_focus: {
+			outlineStyle: "solid",
+			outlineWidth: "4px",
+			outlineColor: "black",
+			outlineOffset: .5,
+			focusBox: "calc({spacing.1} / 2)"
+		},
+		pointerEvents: {
+			base: "inherit",
+			_disabled: "none"
+		}
+	},
+	variants: { size: {
+		sm: { height: 10 },
+		md: { height: 12 },
+		lg: { height: 14 }
+	} },
+	defaultVariants: { size: "lg" }
+});
+
+//#endregion
+//#region src/recipes/select-box.ts
+/**
+* source:
+* https://github.com/digital-go-jp/design-system-example-components-react/blob/main/src/components/Select/Select.tsx
+*/
+var select_box_default = (0, _pandacss_dev.defineRecipe)({
+	className: "select-box",
+	description: "セレクトボックスは、複数の選択肢を提供するフォームコントロールです。",
+	base: {
+		width: "full",
+		appearance: "none",
+		pl: 4,
+		pr: 10,
+		py: "calc(11 / 16 * 1rem)",
+		rounded: 8,
+		pointerEvents: {
+			base: "inherit",
+			_disabled: "none"
+		},
+		bg: {
+			base: "white",
+			_disabled: "solid-gray.50"
+		},
+		color: {
+			base: "solid-gray.800",
+			_disabled: "solid-gray.420"
+		},
+		textStyle: "oln-16N-100",
+		borderWidth: "1px",
+		borderColor: {
+			base: "solid-gray.900",
+			_disabled: "solid-gray.300",
+			_invalid: {
+				base: "error.1",
+				_hover: "red.1000"
+			}
+		},
+		textAlign: "start",
+		_focus: {
+			outlineStyle: "solid",
+			outlineWidth: "4px",
+			outlineColor: "black",
+			outlineOffset: .5,
+			focusBox: "calc({spacing.1} / 2)"
+		}
+	},
+	variants: { size: {
+		sm: { height: 10 },
+		md: { height: 12 },
+		lg: { height: 14 }
+	} }
+});
+
+//#endregion
+//#region src/recipes/date-picker.ts
+var date_picker_default = (0, _pandacss_dev.defineSlotRecipe)({
+	className: "date-picker",
+	slots: _zag_js_date_picker.anatomy.extendWith("view").keys(),
+	base: {
+		root: { colorPalette: "keyColor" },
+		control: {
+			display: "flex",
+			alignItems: "center",
+			gap: 2
+		},
+		viewControl: {
+			display: "flex",
+			alignItems: "center",
+			gap: 2,
+			p: 4
+		},
+		content: {
+			bg: "white",
+			shadow: 1,
+			rounded: 8,
+			borderWidth: "1px",
+			borderColor: "solid-gray.420",
+			_focus: { outlineWidth: "0px" }
+		},
+		view: {
+			colorPalette: "keyColor",
+			display: "flex",
+			flexDirection: "column",
+			alignItems: "stretch",
+			width: "max-content"
+		},
+		label: { ...label_default.base },
+		input: { ...input_default.base },
+		yearSelect: {
+			...select_box_default.base,
+			...select_box_default.variants?.size?.md,
+			width: "fit-content"
+		},
+		monthSelect: {
+			...select_box_default.base,
+			...select_box_default.variants?.size?.md,
+			width: "fit-content"
+		},
+		table: {
+			mx: 3,
+			mb: 2
+		},
+		tableHead: { "& th": { p: 0 } },
+		tableHeader: {
+			width: 12,
+			height: 12,
+			textAlign: "center",
+			fontWeight: "bold"
+		},
+		tableBody: { "& td": { p: 0 } },
+		tableCellTrigger: {
+			m: 1,
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			width: 10,
+			height: 10,
+			rounded: "full",
+			textUnderlineOffset: "calc(3 / 16 * 1rem)",
+			textDecoration: { _hover: "underline" },
+			bg: {
+				_hover: {
+					base: "solid-gray.50",
+					_disabled: "transparent"
+				},
+				_inRange: { base: "colorPalette.bg" },
+				_selected: {
+					base: "colorPalette.primary",
+					_hover: "colorPalette.primary",
+					_disabled: "transparent"
+				}
+			},
+			color: {
+				_selected: "white",
+				_disabled: "solid-gray.300"
+			},
+			cursor: "pointer",
+			borderWidth: { _selected: "1px" },
+			borderColor: { _selected: "transparent" }
+		}
+	}
+});
+
+//#endregion
+//#region src/recipes/description-list.ts
+/**
+* reference:
+* https://github.com/digital-go-jp/design-system-example-components-html/tree/main/src/components/description-list
+*/
+var description_list_default = (0, _pandacss_dev.defineSlotRecipe)({
+	className: "description-list",
+	slots: [
+		"root",
+		"item",
+		"term",
+		"marker",
+		"description"
+	],
+	base: {
+		root: {
+			mt: 4,
+			mb: 4,
+			display: "grid",
+			rowGap: 2,
+			overflowWrap: "anywhere"
+		},
+		term: { fontWeight: "bold" },
+		marker: { display: "none" },
+		description: { ml: 8 }
+	},
+	variants: { marker: {
+		none: {},
+		bullet: { term: {
+			ml: 8,
+			display: "list-item",
+			listStyleType: "disc"
+		} },
+		custom: { marker: {
+			display: "inline-block",
+			minWidth: 8,
+			height: "1em"
+		} }
+	} },
+	defaultVariants: { marker: "none" }
+});
+
+//#endregion
+//#region src/recipes/disclosure.ts
+/**
+* source:
+* https://github.com/digital-go-jp/design-system-example-components-react/blob/main/src/components/Disclosure/Disclosure.tsx
+*/
+var disclosure_default = (0, _pandacss_dev.defineSlotRecipe)({
+	className: "disclosure",
+	description: "ディスクロージャーは、コンテンツのセクション内の任意の範囲を折りたたむことができるユーザーインターフェースです。※セクション単位で折りたたみ表示をする場合は「アコーディオン」コンポーネントを使用してください。",
+	slots: _zag_js_collapsible.anatomy.extendWith("indicator").keys(),
+	base: {
+		root: { colorPalette: "keyColor" },
+		trigger: {
+			display: "flex",
+			width: "fit-content",
+			cursor: "default",
+			listStyle: "none",
+			alignItems: "start",
+			justifyContent: "start",
+			gap: 2,
+			textAlign: "start",
+			_hover: {
+				textDecoration: "underline",
+				textUnderlineOffset: "calc(3 / 16 * 1rem)"
+			},
+			_focusVisible: {
+				rounded: 4,
+				bg: "yellow.300",
+				outlineStyle: "solid",
+				outlineWidth: "4px",
+				outlineColor: "black",
+				outlineOffset: .5,
+				focusBox: "calc({spacing.1} / 2)"
+			}
+		},
+		indicator: {
+			flex: "none",
+			bg: {
+				base: "colorPalette.primary.100",
+				_groupHover: "white"
+			},
+			color: {
+				base: "white",
+				_groupHover: "colorPalette.primary.100",
+				_highContrast: "inherit"
+			},
+			mt: "calc((1lh - 24px) / 2)",
+			width: "24px",
+			height: "24px",
+			rounded: "full",
+			outlineStyle: "solid",
+			outlineWidth: "3px",
+			outlineOffset: "-3px",
+			outlineColor: "colorPalette.primary.100",
+			transition: "transform",
+			transform: {
+				base: "rotate(-180deg)",
+				_open: "rotate(0deg)"
+			}
+		},
+		content: {}
+	}
+});
+
+//#endregion
+//#region src/recipes/divider.ts
+/**
+* source:
+* https://github.com/digital-go-jp/design-system-example-components-react/blob/main/src/components/Divider/Divider.tsx
+*/
+var divider_default = (0, _pandacss_dev.defineRecipe)({
+	className: "divider",
+	description: "ディバイダーは、異なるセクション、コンポーネント、またはコンテンツのグループ間に設けられる視覚的な区切りで、HTMLのhr要素に相当します。要素間に明確な区切りを設けることで、読みやすさを向上させる役割を果たします。",
+	variants: { color: {
+		"gray-420": { borderColor: "solid-gray.420" },
+		"gray-536": { borderColor: "solid-gray.536" },
+		black: { borderColor: "black" }
+	} },
+	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 = _zag_js_dialog.anatomy.extendWith("header", "body", "footer");
+var drawer_default = (0, _pandacss_dev.defineSlotRecipe)({
+	className: "drawer",
+	description: "ブラウザ画面の四辺(上下左右端)から展開し、モバイルメニューなどのコンポーネントを格納可能なコンテナです。",
+	slots: anatomy.keys(),
+	base: {
+		backdrop: {
+			backdropFilter: "blur(4px)",
+			background: "solid-gray.100/90",
+			height: "100vh",
+			position: "fixed",
+			top: 0,
+			left: 0,
+			width: "100vw",
+			zIndex: 10,
+			_open: { animation: "backdrop-in" },
+			_closed: { animation: "backdrop-out" }
+		},
+		positioner: {
+			alignItems: "center",
+			display: "flex",
+			height: "100dvh",
+			justifyContent: "center",
+			position: "fixed",
+			top: 0,
+			width: 72,
+			zIndex: 1400
+		},
+		content: {
+			margin: "unset",
+			maxWidth: "full",
+			maxHeight: "full",
+			overflow: "visible",
+			insetInlineStart: "auto",
+			width: "full",
+			borderColor: "transparent",
+			background: "white",
+			boxShadow: 2,
+			display: "grid",
+			gridTemplateRows: "auto 1fr",
+			height: "100dvh",
+			_hidden: { display: "none" }
+		},
+		header: {
+			display: "flex",
+			justifyContent: "start",
+			py: 4,
+			px: 4
+		},
+		title: { textStyle: "std-20B-150" },
+		body: {
+			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
+/**
+* https://github.com/digital-go-jp/design-system-example-components-react/blob/main/src/components/EmergencyBanner/EmergencyBanner.tsx
+* https://github.com/digital-go-jp/design-system-example-components-html/blob/main/src/components/emergency-banner/emergency-banner.css
+*/
+var emergency_banner_default = (0, _pandacss_dev.defineSlotRecipe)({
+	className: "emergency-banner",
+	slots: emergencyBannerAnatomy.keys(),
+	base: {
+		root: {
+			display: "block",
+			px: {
+				base: 2.5,
+				md: 6.5
+			},
+			py: {
+				base: 3.5,
+				md: 6.5
+			},
+			bg: "white",
+			borderWidth: "6px",
+			borderColor: "warning.orange.1",
+			color: "solid-gray.800"
+		},
+		heading: {
+			color: "black",
+			textStyle: {
+				base: "std-20B-150",
+				md: "std-24B-150"
+			},
+			_before: { content: "\"【緊急】\"" }
+		},
+		body: { mt: {
+			base: 2,
+			md: 4
+		} },
+		action: {
+			pt: {
+				base: 2,
+				md: 3
+			},
+			pb: { md: 1 },
+			display: { md: "flex" },
+			justifyContent: { md: "flex" }
+		},
+		button: {
+			position: "relative",
+			display: "block",
+			mx: "auto",
+			p: {
+				base: 4.5,
+				md: 5
+			},
+			width: {
+				base: "full",
+				md: "fit-content"
+			},
+			minWidth: "50%",
+			borderWidth: {
+				base: "2px",
+				md: "4px"
+			},
+			borderColor: "transparent",
+			bg: {
+				base: "error.1",
+				_hover: "error.2"
+			},
+			color: "white",
+			textStyle: "oln-16B-100",
+			textAlign: "center",
+			rounded: {
+				base: 12,
+				md: 16
+			},
+			_hover: {
+				textDecoration: "underline",
+				textUnderlineOffset: "calc(3 / 16 * 1rem)"
+			},
+			_after: {
+				content: "\"\"",
+				position: "absolute",
+				inset: 0,
+				borderColor: "white",
+				borderWidth: {
+					base: "2px",
+					md: "4px"
+				},
+				rounded: {
+					base: 2.5,
+					md: 12
+				}
+			},
+			_focusVisible: {
+				outlineStyle: "solid",
+				outlineWidth: "4px",
+				outlineColor: "black",
+				outlineOffset: .5,
+				focusBox: "calc({spacing.1} / 2)"
+			}
+		}
+	}
+});
+
+//#endregion
+//#region src/recipes/error-text.ts
+/**
+* source:
+* https://github.com/digital-go-jp/design-system-example-components-react/blob/main/src/components/ErrorText/ErrorText.tsx
+*/
+var error_text_default = (0, _pandacss_dev.defineRecipe)({
+	className: "error-text",
+	base: {
+		textStyle: "dns-16N-130",
+		color: "error.1"
+	}
+});
+
+//#endregion
+//#region src/recipes/requirement-badge.ts
+/**
+* source:
+* https://github.com/digital-go-jp/design-system-example-components-react/blob/main/src/components/RequirementBadge/RequirementBadge.tsx
+*/
+var requirement_badge_default = (0, _pandacss_dev.defineRecipe)({
+	className: "requirement-badge",
+	base: {
+		textStyle: "oln-16N-100",
+		color: "red.800"
+	}
+});
+
+//#endregion
+//#region src/recipes/support-text.ts
+/**
+* source:
+* https://github.com/digital-go-jp/design-system-example-components-react/blob/main/src/components/SupportText/SupportText.tsx
+*/
+var support_text_default = (0, _pandacss_dev.defineRecipe)({
+	className: "support-text",
+	base: {
+		textStyle: "std-16N-170",
+		color: "solid-gray.600"
+	}
+});
+
+//#endregion
+//#region src/recipes/textarea.ts
+/**
+* source:
+* https://github.com/digital-go-jp/design-system-example-components-react/blob/main/src/components/Textarea/Textarea.tsx
+*/
+var textarea_default = (0, _pandacss_dev.defineRecipe)({
+	className: "textarea",
+	description: "テキストエリアコンポーネントは、1行以上のテキストを入力する場合に使用します。",
+	base: {
+		rounded: 8,
+		p: 4,
+		textStyle: "std-16N-170",
+		bg: {
+			base: "white",
+			_disabled: "solid-gray.50"
+		},
+		color: {
+			base: "solid-gray.800",
+			_disabled: {
+				base: "solid-gray.420",
+				_highContrast: "GrayText"
+			}
+		},
+		borderStyle: {
+			base: "solid",
+			_readOnly: "dashed"
+		},
+		borderWidth: "1px",
+		borderColor: {
+			base: "solid-gray.600",
+			_hover: "black",
+			_disabled: {
+				base: "solid-gray.300",
+				_hover: "GrayText"
+			},
+			_invalid: {
+				base: "error.1",
+				_hover: "red.1000"
+			}
+		},
+		_focus: {
+			outlineStyle: "solid",
+			outlineWidth: "4px",
+			outlineColor: "black",
+			outlineOffset: .5,
+			focusBox: "calc({spacing.1} / 2)"
+		}
+	}
+});
+
+//#endregion
+//#region src/recipes/field.ts
+/**
+* source:
+* https://github.com/digital-go-jp/design-system-example-components-react/blob/main/src/components/Input/Input.tsx
+*/
+const field = (0, _pandacss_dev.defineSlotRecipe)({
+	className: "field",
+	slots: fieldAnatomy.keys(),
+	base: {
+		root: {
+			display: "flex",
+			flexDirection: "column",
+			gap: 1.5
+		},
+		label: { ...label_default.base },
+		input: { ...input_default.base },
+		textarea: { ...textarea_default.base },
+		select: { ...select_box_default.base },
+		errorText: { ...error_text_default.base },
+		supportText: { ...support_text_default.base },
+		requirementBadge: { ...requirement_badge_default.base }
+	},
+	variants: { size: {
+		lg: {
+			label: { ...label_default.variants?.size?.lg },
+			input: { ...input_default.variants?.size?.lg },
+			select: { ...select_box_default.variants?.size?.lg }
+		},
+		md: {
+			label: { ...label_default.variants?.size?.md },
+			input: { ...input_default.variants?.size?.md },
+			select: { ...select_box_default.variants?.size?.md }
+		},
+		sm: {
+			label: { ...label_default.variants?.size?.sm },
+			input: { ...input_default.variants?.size?.sm },
+			select: { ...select_box_default.variants?.size?.sm }
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+var field_default = field;
+
+//#endregion
+//#region src/recipes/fieldset.ts
+var fieldset_default = (0, _pandacss_dev.defineSlotRecipe)({
+	className: "fieldset",
+	slots: fieldsetAnatomy.keys(),
+	base: {
+		legend: { ...label_default.base },
+		supportText: { ...support_text_default.base },
+		errorText: { ...error_text_default.base }
+	},
+	variants: { size: {
+		lg: { legend: { ...label_default.variants?.size?.lg } },
+		md: { legend: { ...label_default.variants?.size?.md } },
+		sm: { legend: { ...label_default.variants?.size?.sm } }
+	} },
+	defaultVariants: { size: "md" }
+});
+
+//#endregion
+//#region src/recipes/file-upload.ts
+var file_upload_default = (0, _pandacss_dev.defineSlotRecipe)({
+	className: "file-upload",
+	slots: _zag_js_file_upload.anatomy.extendWith("itemDetail").keys(),
+	base: {
+		root: {
+			display: "flex",
+			flexDirection: "column",
+			alignItems: "start",
+			gap: 4,
+			textStyle: "std-16N-170"
+		},
+		dropzone: {
+			display: "flex",
+			flexDirection: "column",
+			justifyContent: "space-between",
+			width: "full",
+			minHeight: "208px",
+			bg: {
+				base: "solid-gray.bg",
+				_dragging: "green.50"
+			},
+			outlineStyle: "solid",
+			outlineColor: {
+				base: "solid-gray.536",
+				_dragging: "success.1",
+				_invalid: "error.1"
+			},
+			outlineWidth: {
+				base: "1px",
+				_dragging: "4px"
+			},
+			rounded: 8,
+			pt: 8,
+			pb: 6,
+			pl: 7,
+			pr: 8
+		},
+		trigger: { flexShrink: 0 },
+		label: {
+			...label_default.base,
+			textStyle: "std-17B-170"
+		},
+		itemGroup: {
+			display: "flex",
+			flexDirection: "column",
+			gap: 1,
+			listStyle: "inside deciminal"
+		},
+		item: {
+			display: "list-item",
+			color: {
+				base: "solid-gray.600",
+				"[data-status=rejected]": "error.1",
+				_marker: "solid-gray.600"
+			},
+			"& > *": {
+				display: "inline",
+				mr: {
+					base: 2,
+					_last: 0
+				}
+			}
+		},
+		itemDetail: {
+			color: {
+				base: "solid-gray.600",
+				"[data-status=rejected] &": "error.1"
+			},
+			borderLeftWidth: {
+				base: "0px",
+				"[data-status=rejected] &": "4px"
+			},
+			borderColor: "currentcolor",
+			pl: {
+				base: 0,
+				"[data-status=rejected] &": 2
+			},
+			display: "inline-block",
+			verticalAlign: "text-top"
+		},
+		itemName: {
+			textStyle: "std-16B-170",
+			color: {
+				base: "solid-gray.800",
+				"[data-status=rejected] &": "error.1"
+			}
+		},
+		itemDeleteTrigger: {
+			...link_default.base,
+			cursor: "pointer"
+		}
+	}
+});
+
+//#endregion
+//#region src/recipes/hamburger-menu-button.ts
+/**
+* source:
+* https://github.com/digital-go-jp/design-system-example-components-react/blob/main/src/components/HamburgerMenuButton/HamburgerMenuButton.tsx
+*/
+var hamburger_menu_button_default = (0, _pandacss_dev.defineRecipe)({
+	className: "hamburger-menu-button",
+	base: {
+		display: "flex",
+		width: "fit-content",
+		alignItems: "center",
+		textStyle: "oln-16N-100",
+		rounded: 6,
+		px: 3,
+		pb: 1.5,
+		pt: 1,
+		touchAction: "manipulation",
+		columnGap: 1.5,
+		_hover: {
+			bg: "solid-gray.50",
+			textDecoration: "underline",
+			textUnderlineOffset: "calc(3 / 16 * 1rem)"
+		},
+		_focusVisible: {
+			bg: "yellow.300",
+			outlineStyle: "solid",
+			outlineWidth: "4px",
+			outlineColor: "black",
+			outlineOffset: .5,
+			focusBox: "calc({spacing.1} / 2)"
+		},
+		cursor: "pointer"
+	}
+});
+
+//#endregion
+//#region src/recipes/legend.ts
+/**
+* source:
+* https://github.com/digital-go-jp/design-system-example-components-react/blob/main/src/components/Legend/Legend.tsx
+*/
+var legend_default = (0, _pandacss_dev.defineRecipe)({
+	className: "legend",
+	base: {
+		display: "flex",
+		width: "fit-content",
+		alignItems: "center",
+		gap: 2,
+		color: "solid-gray.800"
+	},
+	variants: { size: {
+		sm: { textStyle: "std-16B-170" },
+		md: { textStyle: "std-17B-170" },
+		lg: { textStyle: "std-18B-160" }
+	} },
+	defaultVariants: { size: "md" }
+});
+
+//#endregion
+//#region src/recipes/list.ts
+var list_default = (0, _pandacss_dev.defineRecipe)({
+	className: "list",
+	base: { py: 1 }
+});
+
+//#endregion
+//#region src/recipes/menu-item.ts
+/**
+* reference:
+* https://github.com/digital-go-jp/design-system-example-components-react/blob/main/src/components/LanguageSelector/parts/MenuItem.tsx
+*/
+var menu_item_default = (0, _pandacss_dev.defineRecipe)({
+	className: "menu-item",
+	base: {
+		display: "flex",
+		position: "relative",
+		alignItems: "center",
+		textStyle: "dns-16N-130",
+		colorPalette: "keyColor",
+		bg: {
+			base: "transparent",
+			_hover: "solid-gray.50",
+			_focusVisible: "yellow.300",
+			_highlighted: "yellow.300",
+			_selected: {
+				base: "colorPalette.100",
+				_hover: "colorPalette.100"
+			},
+			_checked: {
+				base: "colorPalette.100",
+				_hover: "colorPalette.100"
+			},
+			_open: {
+				base: "colorPalette.bg",
+				_hover: "colorPalette.bg"
+			}
+		},
+		color: {
+			base: "solid-gray.800",
+			_selected: "colorPalette.primary.100",
+			_checked: "colorPalette.primary.100",
+			_open: "colorPalette.primary.100"
+		},
+		fontWeight: {
+			base: "normal",
+			_selected: "bold",
+			_checked: "bold"
+		},
+		_hover: {
+			textDecoration: "underline",
+			textUnderlineOffset: "calc(3 / 16 * 1rem)"
+		},
+		py: 3,
+		pl: 3,
+		pr: 6,
+		columnGap: 2,
+		_focusVisible: {
+			rounded: 4,
+			outlineStyle: "solid",
+			outlineWidth: "4px",
+			outlineColor: "black",
+			outlineOffset: .5,
+			focusBox: "{spacing.1.5}",
+			zIndex: 1
+		},
+		_highlighted: {
+			rounded: 4,
+			outlineStyle: "solid",
+			outlineWidth: "4px",
+			outlineColor: "black",
+			outlineOffset: .5,
+			focusBox: "{spacing.1.5}",
+			zIndex: 1
+		}
+	},
+	variants: {
+		variant: {
+			standard: { rounded: 4 },
+			boxed: { rounded: {
+				base: 0,
+				_focusVisible: 4
+			} }
+		},
+		isCondensed: { true: {
+			py: 1.5,
+			pl: 1.5,
+			pr: 4,
+			columnGap: 1.5
+		} }
+	},
+	defaultVariants: {
+		variant: "standard",
+		isCondensed: false
+	}
+});
+
+//#endregion
+//#region src/recipes/menu.ts
+/**
+* source:
+* https://github.com/digital-go-jp/design-system-example-components-react/blob/main/src/components/LanguageSelector/parts/Menu.tsx
+* https://github.com/digital-go-jp/design-system-example-components-react/blob/main/src/components/LanguageSelector/parts/MenuItem.tsx
+*/
+const itemStyle = { ...menu_item_default.base };
+var menu_default = (0, _pandacss_dev.defineSlotRecipe)({
+	className: "menu",
+	slots: _zag_js_menu.anatomy.keys(),
+	base: {
+		content: {
+			minWidth: "fit-content",
+			width: "auto",
+			maxHeight: "calc({spacing.1} * 75.5)",
+			py: 2,
+			borderWidth: "1px",
+			borderColor: "solid-gray.420",
+			bg: "white",
+			rounded: 8,
+			boxShadow: 1
+		},
+		itemGroupLabel: {
+			...itemStyle,
+			fontWeight: "bold"
+		},
+		triggerItem: { ...itemStyle },
+		item: {
+			...itemStyle,
+			textDecoration: {
+				base: "none",
+				_hover: "underline"
+			},
+			textUnderlineOffset: "calc(3 / 16 * 1rem)",
+			_checked: {
+				bg: "colorPalette.100",
+				color: "colorPalette.primary.100",
+				fontWeight: "bold"
+			},
+			_focusVisible: {
+				outlineStyle: "solid",
+				outlineWidth: "4px",
+				outlineColor: "black",
+				outlineOffset: .5,
+				focusBox: "calc({spacing.1} / 2)",
+				zIndex: 1
+			}
+		}
+	},
+	variants: { isCondensed: { true: {
+		content: { maxHeight: "calc({spacing.2} * 28)" },
+		itemGroupLabel: {
+			py: 1.5,
+			pl: 1.5,
+			pr: 4,
+			columnGap: 1.5
+		},
+		item: {
+			py: 1.5,
+			pl: 1.5,
+			pr: 4,
+			columnGap: 1.5
+		},
+		triggerItem: {
+			py: 1.5,
+			pl: 1.5,
+			pr: 4,
+			columnGap: 1.5
+		}
+	} } },
+	defaultVariants: { isCondensed: false }
+});
+
+//#endregion
+//#region src/recipes/menu-list.ts
+var menu_list_default = (0, _pandacss_dev.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 }
+			},
+			boxed: {
+				item: { ...menu_item_default.variants?.variant?.boxed },
+				itemGroupLabel: { ...menu_item_default.variants?.variant?.boxed }
+			}
+		},
+		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 = (0, _pandacss_dev.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
+			},
+			rowGap: 4
+		},
+		header: {
+			display: "grid",
+			gridTemplateColumns: "subgrid",
+			gridColumnStart: 2,
+			gridColumnEnd: -1,
+			placeItems: "start",
+			"& > *:last-child": { gridColumnEnd: -1 }
+		},
+		icon: {
+			mt: {
+				base: .5,
+				md: 0
+			},
+			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')"
+			},
+			...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: {
+			gridColumnStart: {
+				base: 1,
+				md: 2
+			},
+			gridColumnEnd: -1,
+			textStyle: "std-16N-170",
+			color: "solid-gray.800"
+		},
+		actions: {
+			mb: -2,
+			display: "grid",
+			gap: {
+				base: 2,
+				md: 4
+			},
+			gridColumn: {
+				base: "1 / 4",
+				md: "2 / 4"
+			},
+			gridAutoFlow: { md: "column" },
+			justifyContent: { md: "end" }
+		}
+	},
+	variants: {
+		type: {
+			success: {
+				root: {
+					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: {
+					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: {
+					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: {
+					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: {
+					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
+				},
+				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 = (0, _pandacss_dev.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 = (0, _pandacss_dev.defineSlotRecipe)({
+	className: "progress",
+	description: "プログレスインジケーターは、ユーザーのアクションに対して処理進行中であることを通知します。データ取得リクエストの応答を待っていることをユーザーに伝えたいといった要求に対応します。",
+	slots: _zag_js_progress.anatomy.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 = (0, _pandacss_dev.defineSlotRecipe)({
+	className: "radio-group",
+	slots: _zag_js_radio_group.anatomy.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",
+					_disabled: {
+						base: "solid-gray.300",
+						_highContrast: "GrayText"
+					},
+					_highContrast: "Highlight"
+				},
+				_invalid: {
+					base: "error.1",
+					_hover: "red.1000",
+					_disabled: "solid-gray.300"
+				},
+				_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: {
+					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"
+					}
+				},
+				_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 = (0, _pandacss_dev.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"
+			}
+		},
+		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
+			},
+			bg: {
+				base: "transparent",
+				_hover: "solid-gray.50"
+			},
+			_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 = (0, _pandacss_dev.defineSlotRecipe)({
+	className: "select",
+	description: "セレクトボックスは、複数の選択肢を提供するフォームコントロールです。",
+	slots: _zag_js_select.anatomy.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"
+				},
+				_disabled: {
+					base: "solid-gray.420",
+					_highContrast: "GrayText"
+				}
+			}
+		},
+		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 = (0, _pandacss_dev.defineSlotRecipe)({
+	className: "step-navigation",
+	slots: _zag_js_steps.anatomy.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",
+				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"
+			},
+			_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')"
+				}
+			},
+			"[data-orientation=horizontal] > &": {
+				mr: "auto",
+				ml: "auto"
+			},
+			"[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
+			}
+		},
+		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})"
+			}
+		},
+		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"
+			}
+		}
+	},
+	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: {
+			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}"
+			},
+			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)" }
+			},
+			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 = (0, _pandacss_dev.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 }
+			}
+		},
+		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 = (0, _pandacss_dev.defineSlotRecipe)({
+	className: "tabs",
+	slots: _zag_js_tabs.anatomy.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"
+			},
+			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"
+				}
+			},
+			_focusVisible: {
+				zIndex: 10,
+				rounded: 4,
+				outlineStyle: "solid",
+				outlineWidth: "4px",
+				outlineColor: "black",
+				outlineOffset: .5,
+				focusBox: "calc({spacing.1} / 2)"
+			},
+			_selected: {
+				color: "colorPalette.primary",
+				cursor: "default",
+				_after: {
+					content: "\"\"",
+					position: "absolute",
+					bottom: 0,
+					left: 0,
+					width: "full",
+					borderBottomWidth: "4px",
+					borderBlockColor: "currentcolor"
+				}
+			}
+		}
+	}
+});
+
+//#endregion
+//#region src/recipes/tree-view.ts
+var tree_view_default = (0, _pandacss_dev.defineSlotRecipe)({
+	className: "tree-view",
+	slots: _zag_js_tree_view.anatomy.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 }
+	},
+	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/unordered-list.ts
+var unordered_list_default = (0, _pandacss_dev.defineRecipe)({
+	className: "unordered-list",
+	base: {
+		pl: 8,
+		listStyle: "revert",
+		"&:where(ol,ul)": {
+			mt: 1,
+			mb: -1
+		}
+	}
+});
+
+//#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 = (0, _pandacss_dev.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)"
+		},
+		display: "inline-flex",
+		alignItems: "center",
+		gap: 1,
+		"& svg": {
+			width: "1em",
+			height: "1em"
+		}
+	}
+});
+
+//#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%"
+		}
+	},
+	position: {
+		from: {
+			insetInlineStart: "var(--animate-from-x)",
+			insetBlockStart: "var(--animate-from-y)"
+		},
+		to: {
+			insetInlineStart: "var(--animate-to-x)",
+			insetBlockStart: "var(--animate-to-y)"
+		}
+	}
+};
+
+//#endregion
+//#region src/index.ts
+const base = {
+	name: "digital-go-pandacss-preset",
+	presets: [_cieloazul310_digital_go_pandacss_plugin.default],
+	theme: {
+		keyframes,
+		recipes: recipes_default
+	}
+};
+var src_default = (0, _pandacss_dev.definePreset)(base);
+const createPreset = (keyColor = "blue") => (0, _pandacss_dev.definePreset)({
+	...base,
+	theme: {
+		...base.theme,
+		extend: { semanticTokens: { colors: { keyColor: (0, _cieloazul310_digital_go_pandacss_utils.createKeyColor)(keyColor) } } }
+	}
+});
+
+//#endregion
+exports.createPreset = createPreset;
+exports.default = src_default;