var lesson = {
	files: [
		{
			name: "main",
			content: "import { render, Portal } from \"solid-js/web\";\nimport \"./styles.css\";\n\nfunction App() {\n  return (\n    <div class=\"app-container\">\n      <p>サイズが制限されている div の中にあるテキスト</p>\n      <div class=\"popup\">\n        <h1>Popup</h1>\n        <p>何かの時に必要になるかもしれないテキスト</p>\n      </div>\n    </div>\n  );\n}\n\nrender(() => <App />, document.getElementById(\"app\"));\n"
		},
		{
			name: "styles",
			type: "css",
			content: ".app-container {\n  width: 200px;\n  height: 100px;\n  overflow: hidden;\n}\n\n.popup {\n  position: relative;\n  z-index: 2;\n  background: #ddd;\n  padding: 1rem;\n  min-height: 200px;\n  min-width: 200px;\n}\n\n.popup::after {\n  content: \" \";\n  position: absolute;\n  bottom: 100%;\n  left: 50%;\n  margin-left: -5px;\n  border-width: 5px;\n  border-style: solid;\n  border-color: transparent transparent #ddd transparent;\n}"
		}
	]
};
var solved = {
	files: [
		{
			name: "main",
			content: "import { render, Portal } from \"solid-js/web\";\nimport \"./styles.css\";\n\nfunction App() {\n  return (\n    <div class=\"app-container\">\n      <p>サイズが制限されている div の中にあるテキスト</p>\n      <Portal>\n        <div class=\"popup\">\n          <h1>Popup</h1>\n          <p>何かの時に必要になるかもしれないテキスト</p>\n        </div>\n      </Portal>\n    </div>\n  );\n}\n\nrender(() => <App />, document.getElementById(\"app\"));\n"
		},
		{
			name: "styles",
			type: "css",
			content: ".app-container {\n  width: 200px;\n  height: 100px;\n  overflow: hidden;\n}\n\n.popup {\n  position: relative;\n  z-index: 2;\n  background: #ddd;\n  padding: 1rem;\n  min-height: 200px;\n  min-width: 200px;\n}\n\n.popup::after {\n  content: \" \";\n  position: absolute;\n  bottom: 100%;\n  left: 50%;\n  margin-left: -5px;\n  border-width: 5px;\n  border-style: solid;\n  border-color: transparent transparent #ddd transparent;\n}"
		}
	]
};
var markdown = "アプリの通常のフローの外に要素を挿入することが有益な場合があります。モーダルのようなフローティング要素のレンダリングコンテキストを処理するには、z-index では不十分な場合があります。\n\nSolid には `<Portal>` コンポーネントがあり、その子コンテンツは選択した場所に挿入されます。デフォルトでは、その要素は `document.body` 内の `<div>` にレンダリングされます。\n\nこの例では、情報のポップアップが途切れています。これを解決するには、要素を `<Portal>` でラップして、フローから引き出す必要があります:\n\n```jsx\n<Portal>\n  <div class=\"popup\">\n    <h1>Popup</h1>\n    <p>何かの時に必要になるかもしれないテキスト</p>\n  </div>\n</Portal>\n```\n";
var flow_portal = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

export { flow_portal as default, lesson, markdown, solved };
