@twreporter/react-typescript-components 0.1.0-beta.21 → 0.1.0-beta.23

package/lib/title-tab-BRQQyX8-.js

@@ -0,0 +1,55 @@
+const require_chunk = require('./chunk-BxBTb9qk.js');
+const require_heading = require('./heading-D5Lv6X0M.js');
+const require_hook = require('./hook-DUH3wp9d.js');
+const require_tab_item = require('./tab-item-BLf_p9Qi.js');
+let react = require("react");
+react = require_chunk.__toESM(react);
+let clsx = require("clsx");
+clsx = require_chunk.__toESM(clsx);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
+
+//#region src/title-bar/components/title-tab/index.tsx
+const TitleTab = ({ title, tabs = [], activeTabIndex = 0 }) => {
+	const [activeIndex, setActiveIndex] = (0, react.useState)(activeTabIndex);
+	const [showGradientMask, setShowGradientMask] = (0, react.useState)(false);
+	const ref = require_hook.useScrollStatus(setShowGradientMask);
+	(0, react.useEffect)(() => {
+		setActiveIndex(activeTabIndex);
+	}, [activeTabIndex]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col w-full text-gray-800",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_heading.H1, { text: title }),
+			tabs.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				ref,
+				className: (0, clsx.default)("flex items-center", "overflow-x-scroll [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", { "[mask-image:linear-gradient(to_left,rgba(241,241,241,0),#f1f1f1_48px)] [-webkit-mask-image:linear-gradient(to_left,rgba(241,241,241,0),#f1f1f1_48px)]": showGradientMask }),
+				children: tabs.map((tab, index) => {
+					const tabProps = {
+						...tab,
+						isActive: index === activeIndex
+					};
+					const handleClick = () => {
+						setActiveIndex(index);
+					};
+					return /* @__PURE__ */ (0, react.createElement)(require_tab_item.tab_item_default, {
+						...tabProps,
+						key: `tab-${tab.text}-${index}`,
+						onClick: handleClick
+					});
+				})
+			}) : null,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: (0, clsx.default)("w-full h-[1px] bg-gray-300 mt-[0px]", "desktop:mt-[0px]") })
+		]
+	});
+};
+var title_tab_default = TitleTab;
+
+//#endregion
+Object.defineProperty(exports, 'title_tab_default', {
+  enumerable: true,
+  get: function () {
+    return title_tab_default;
+  }
+});
+//# sourceMappingURL=title-tab-BRQQyX8-.js.map

package/lib/title-tab-BRQQyX8-.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"title-tab-BRQQyX8-.js","names":["TitleTab: FC<TitleTabProps>","useScrollStatus","H1","TabItem"],"sources":["../src/title-bar/components/title-tab/index.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { type FC, useState, useEffect } from 'react'\n// hook\nimport { useScrollStatus } from './hook'\n// components\nimport TabItem from './tab-item'\nimport { H1 } from '../../../text/heading'\n// type\nimport type { Tab } from './type'\n\ntype TitleTabProps = {\n  title: string\n  tabs: Tab[]\n  activeTabIndex?: number\n}\nconst TitleTab: FC<TitleTabProps> = ({\n  title,\n  tabs = [],\n  activeTabIndex = 0,\n}) => {\n  const [activeIndex, setActiveIndex] = useState(activeTabIndex)\n  const [showGradientMask, setShowGradientMask] = useState(false)\n\n  const ref = useScrollStatus(setShowGradientMask)\n\n  useEffect(() => {\n    setActiveIndex(activeTabIndex)\n  }, [activeTabIndex])\n\n  return (\n    <div className=\"flex flex-col w-full text-gray-800\">\n      <H1 text={title} />\n      {tabs.length > 0 ? (\n        <div\n          ref={ref}\n          className={clsx(\n            'flex items-center',\n            'overflow-x-scroll [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',\n            {\n              '[mask-image:linear-gradient(to_left,rgba(241,241,241,0),#f1f1f1_48px)] [-webkit-mask-image:linear-gradient(to_left,rgba(241,241,241,0),#f1f1f1_48px)]':\n                showGradientMask,\n            }\n          )}\n        >\n          {tabs.map((tab, index) => {\n            const tabProps = { ...tab, isActive: index === activeIndex }\n            const handleClick = () => {\n              setActiveIndex(index)\n            }\n            return (\n              <TabItem\n                {...tabProps}\n                key={`tab-${tab.text}-${index}`}\n                onClick={handleClick}\n              />\n            )\n          })}\n        </div>\n      ) : null}\n      <div\n        className={clsx(\n          'w-full h-[1px] bg-gray-300 mt-[0px]',\n          'desktop:mt-[0px]'\n        )}\n      />\n    </div>\n  )\n}\n\nexport default TitleTab\n"],"mappings":";;;;;;;;;;;;AAeA,MAAMA,YAA+B,EACnC,OACA,OAAO,EAAE,EACT,iBAAiB,QACb;CACJ,MAAM,CAAC,aAAa,sCAA2B,eAAe;CAC9D,MAAM,CAAC,kBAAkB,2CAAgC,MAAM;CAE/D,MAAM,MAAMC,6BAAgB,oBAAoB;AAEhD,4BAAgB;AACd,iBAAe,eAAe;IAC7B,CAAC,eAAe,CAAC;AAEpB,QACE,4CAAC;EAAI,WAAU;;GACb,2CAACC,sBAAG,MAAM,QAAS;GAClB,KAAK,SAAS,IACb,2CAAC;IACM;IACL,6BACE,qBACA,0EACA,EACE,yJACE,kBACH,CACF;cAEA,KAAK,KAAK,KAAK,UAAU;KACxB,MAAM,WAAW;MAAE,GAAG;MAAK,UAAU,UAAU;MAAa;KAC5D,MAAM,oBAAoB;AACxB,qBAAe,MAAM;;AAEvB,YACE,yCAACC;MACC,GAAI;MACJ,KAAK,OAAO,IAAI,KAAK,GAAG;MACxB,SAAS;OACT;MAEJ;KACE,GACJ;GACJ,2CAAC,SACC,6BACE,uCACA,mBACD,GACD;;GACE;;AAIV,wBAAe"}

package/lib/title-tab-ClfJ1n88.mjs

@@ -0,0 +1,46 @@
+import { H1 } from "./heading-BVKLYfXi.mjs";
+import { useScrollStatus } from "./hook-DGSr4R5I.mjs";
+import { tab_item_default } from "./tab-item-NrRakHlM.mjs";
+import { createElement, useEffect, useState } from "react";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/title-bar/components/title-tab/index.tsx
+const TitleTab = ({ title, tabs = [], activeTabIndex = 0 }) => {
+	const [activeIndex, setActiveIndex] = useState(activeTabIndex);
+	const [showGradientMask, setShowGradientMask] = useState(false);
+	const ref = useScrollStatus(setShowGradientMask);
+	useEffect(() => {
+		setActiveIndex(activeTabIndex);
+	}, [activeTabIndex]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col w-full text-gray-800",
+		children: [
+			/* @__PURE__ */ jsx(H1, { text: title }),
+			tabs.length > 0 ? /* @__PURE__ */ jsx("div", {
+				ref,
+				className: clsx("flex items-center", "overflow-x-scroll [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", { "[mask-image:linear-gradient(to_left,rgba(241,241,241,0),#f1f1f1_48px)] [-webkit-mask-image:linear-gradient(to_left,rgba(241,241,241,0),#f1f1f1_48px)]": showGradientMask }),
+				children: tabs.map((tab, index) => {
+					const tabProps = {
+						...tab,
+						isActive: index === activeIndex
+					};
+					const handleClick = () => {
+						setActiveIndex(index);
+					};
+					return /* @__PURE__ */ createElement(tab_item_default, {
+						...tabProps,
+						key: `tab-${tab.text}-${index}`,
+						onClick: handleClick
+					});
+				})
+			}) : null,
+			/* @__PURE__ */ jsx("div", { className: clsx("w-full h-[1px] bg-gray-300 mt-[0px]", "desktop:mt-[0px]") })
+		]
+	});
+};
+var title_tab_default = TitleTab;
+
+//#endregion
+export { title_tab_default };
+//# sourceMappingURL=title-tab-ClfJ1n88.mjs.map

package/lib/title-tab-ClfJ1n88.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"title-tab-ClfJ1n88.mjs","names":["TitleTab: FC<TitleTabProps>","TabItem"],"sources":["../src/title-bar/components/title-tab/index.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { type FC, useState, useEffect } from 'react'\n// hook\nimport { useScrollStatus } from './hook'\n// components\nimport TabItem from './tab-item'\nimport { H1 } from '../../../text/heading'\n// type\nimport type { Tab } from './type'\n\ntype TitleTabProps = {\n  title: string\n  tabs: Tab[]\n  activeTabIndex?: number\n}\nconst TitleTab: FC<TitleTabProps> = ({\n  title,\n  tabs = [],\n  activeTabIndex = 0,\n}) => {\n  const [activeIndex, setActiveIndex] = useState(activeTabIndex)\n  const [showGradientMask, setShowGradientMask] = useState(false)\n\n  const ref = useScrollStatus(setShowGradientMask)\n\n  useEffect(() => {\n    setActiveIndex(activeTabIndex)\n  }, [activeTabIndex])\n\n  return (\n    <div className=\"flex flex-col w-full text-gray-800\">\n      <H1 text={title} />\n      {tabs.length > 0 ? (\n        <div\n          ref={ref}\n          className={clsx(\n            'flex items-center',\n            'overflow-x-scroll [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',\n            {\n              '[mask-image:linear-gradient(to_left,rgba(241,241,241,0),#f1f1f1_48px)] [-webkit-mask-image:linear-gradient(to_left,rgba(241,241,241,0),#f1f1f1_48px)]':\n                showGradientMask,\n            }\n          )}\n        >\n          {tabs.map((tab, index) => {\n            const tabProps = { ...tab, isActive: index === activeIndex }\n            const handleClick = () => {\n              setActiveIndex(index)\n            }\n            return (\n              <TabItem\n                {...tabProps}\n                key={`tab-${tab.text}-${index}`}\n                onClick={handleClick}\n              />\n            )\n          })}\n        </div>\n      ) : null}\n      <div\n        className={clsx(\n          'w-full h-[1px] bg-gray-300 mt-[0px]',\n          'desktop:mt-[0px]'\n        )}\n      />\n    </div>\n  )\n}\n\nexport default TitleTab\n"],"mappings":";;;;;;;;AAeA,MAAMA,YAA+B,EACnC,OACA,OAAO,EAAE,EACT,iBAAiB,QACb;CACJ,MAAM,CAAC,aAAa,kBAAkB,SAAS,eAAe;CAC9D,MAAM,CAAC,kBAAkB,uBAAuB,SAAS,MAAM;CAE/D,MAAM,MAAM,gBAAgB,oBAAoB;AAEhD,iBAAgB;AACd,iBAAe,eAAe;IAC7B,CAAC,eAAe,CAAC;AAEpB,QACE,qBAAC;EAAI,WAAU;;GACb,oBAAC,MAAG,MAAM,QAAS;GAClB,KAAK,SAAS,IACb,oBAAC;IACM;IACL,WAAW,KACT,qBACA,0EACA,EACE,yJACE,kBACH,CACF;cAEA,KAAK,KAAK,KAAK,UAAU;KACxB,MAAM,WAAW;MAAE,GAAG;MAAK,UAAU,UAAU;MAAa;KAC5D,MAAM,oBAAoB;AACxB,qBAAe,MAAM;;AAEvB,YACE,8BAACC;MACC,GAAI;MACJ,KAAK,OAAO,IAAI,KAAK,GAAG;MACxB,SAAS;OACT;MAEJ;KACE,GACJ;GACJ,oBAAC,SACC,WAAW,KACT,uCACA,mBACD,GACD;;GACE;;AAIV,wBAAe"}

package/lib/title1-CB1C3lVX.js

@@ -0,0 +1,34 @@
+const require_chunk = require('./chunk-BxBTb9qk.js');
+const require_paragraph = require('./paragraph-Bve022HS.js');
+const require_heading = require('./heading-D5Lv6X0M.js');
+let clsx = require("clsx");
+clsx = require_chunk.__toESM(clsx);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
+
+//#region src/title-bar/components/title1.tsx
+const Title1 = ({ title, subtitle = "", className = "" }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, clsx.default)("flex justify-between flex-col", className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: (0, clsx.default)("flex items-baseline gap-[16px]"),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_heading.H2, {
+				className: "text-gray-800",
+				text: title
+			}), subtitle ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_paragraph.P1, {
+				className: "text-gray-600",
+				text: subtitle
+			}) : null]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: (0, clsx.default)("w-full h-[1px] bg-gray-300 mt-[8px]", "desktop:mt-[16px]") })]
+	});
+};
+var title1_default = Title1;
+
+//#endregion
+Object.defineProperty(exports, 'title1_default', {
+  enumerable: true,
+  get: function () {
+    return title1_default;
+  }
+});
+//# sourceMappingURL=title1-CB1C3lVX.js.map

package/lib/title1-CB1C3lVX.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"title1-CB1C3lVX.js","names":["Title1: FC<Title1Props>","H2","P1"],"sources":["../src/title-bar/components/title1.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport type { FC } from 'react'\n// components\nimport { H2 } from '../../text/heading'\nimport { P1 } from '../../text/paragraph'\n\ntype Title1Props = {\n  title: string\n  subtitle?: string\n  className?: string\n}\n\nconst Title1: FC<Title1Props> = ({ title, subtitle = '', className = '' }) => {\n  return (\n    <div className={clsx('flex justify-between flex-col', className)}>\n      <div className={clsx('flex items-baseline gap-[16px]')}>\n        <H2 className=\"text-gray-800\" text={title} />\n        {subtitle ? <P1 className=\"text-gray-600\" text={subtitle} /> : null}\n      </div>\n      <div\n        className={clsx(\n          'w-full h-[1px] bg-gray-300 mt-[8px]',\n          'desktop:mt-[16px]'\n        )}\n      />\n    </div>\n  )\n}\n\nexport default Title1\n"],"mappings":";;;;;;;;;AAYA,MAAMA,UAA2B,EAAE,OAAO,WAAW,IAAI,YAAY,SAAS;AAC5E,QACE,4CAAC;EAAI,6BAAgB,iCAAiC,UAAU;aAC9D,4CAAC;GAAI,6BAAgB,iCAAiC;cACpD,2CAACC;IAAG,WAAU;IAAgB,MAAM;KAAS,EAC5C,WAAW,2CAACC;IAAG,WAAU;IAAgB,MAAM;KAAY,GAAG;IAC3D,EACN,2CAAC,SACC,6BACE,uCACA,oBACD,GACD;GACE;;AAIV,qBAAe"}

package/lib/title1-CkuzBJgg.d.ts

@@ -0,0 +1,12 @@
+import { FC } from "react";
+
+//#region src/title-bar/components/title1.d.ts
+type Title1Props = {
+  title: string;
+  subtitle?: string;
+  className?: string;
+};
+declare const Title1: FC<Title1Props>;
+//#endregion
+export { Title1 };
+//# sourceMappingURL=title1-CkuzBJgg.d.ts.map

package/lib/title1-DMIzZ_Ce.d.mts

@@ -0,0 +1,12 @@
+import { FC } from "react";
+
+//#region src/title-bar/components/title1.d.ts
+type Title1Props = {
+  title: string;
+  subtitle?: string;
+  className?: string;
+};
+declare const Title1: FC<Title1Props>;
+//#endregion
+export { Title1 };
+//# sourceMappingURL=title1-DMIzZ_Ce.d.mts.map

package/lib/title1-FLSEnRkW.mjs

@@ -0,0 +1,26 @@
+import { P1 } from "./paragraph-QihuIWot.mjs";
+import { H2 } from "./heading-BVKLYfXi.mjs";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/title-bar/components/title1.tsx
+const Title1 = ({ title, subtitle = "", className = "" }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("flex justify-between flex-col", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: clsx("flex items-baseline gap-[16px]"),
+			children: [/* @__PURE__ */ jsx(H2, {
+				className: "text-gray-800",
+				text: title
+			}), subtitle ? /* @__PURE__ */ jsx(P1, {
+				className: "text-gray-600",
+				text: subtitle
+			}) : null]
+		}), /* @__PURE__ */ jsx("div", { className: clsx("w-full h-[1px] bg-gray-300 mt-[8px]", "desktop:mt-[16px]") })]
+	});
+};
+var title1_default = Title1;
+
+//#endregion
+export { title1_default };
+//# sourceMappingURL=title1-FLSEnRkW.mjs.map

package/lib/title1-FLSEnRkW.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"title1-FLSEnRkW.mjs","names":["Title1: FC<Title1Props>"],"sources":["../src/title-bar/components/title1.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport type { FC } from 'react'\n// components\nimport { H2 } from '../../text/heading'\nimport { P1 } from '../../text/paragraph'\n\ntype Title1Props = {\n  title: string\n  subtitle?: string\n  className?: string\n}\n\nconst Title1: FC<Title1Props> = ({ title, subtitle = '', className = '' }) => {\n  return (\n    <div className={clsx('flex justify-between flex-col', className)}>\n      <div className={clsx('flex items-baseline gap-[16px]')}>\n        <H2 className=\"text-gray-800\" text={title} />\n        {subtitle ? <P1 className=\"text-gray-600\" text={subtitle} /> : null}\n      </div>\n      <div\n        className={clsx(\n          'w-full h-[1px] bg-gray-300 mt-[8px]',\n          'desktop:mt-[16px]'\n        )}\n      />\n    </div>\n  )\n}\n\nexport default Title1\n"],"mappings":";;;;;;AAYA,MAAMA,UAA2B,EAAE,OAAO,WAAW,IAAI,YAAY,SAAS;AAC5E,QACE,qBAAC;EAAI,WAAW,KAAK,iCAAiC,UAAU;aAC9D,qBAAC;GAAI,WAAW,KAAK,iCAAiC;cACpD,oBAAC;IAAG,WAAU;IAAgB,MAAM;KAAS,EAC5C,WAAW,oBAAC;IAAG,WAAU;IAAgB,MAAM;KAAY,GAAG;IAC3D,EACN,oBAAC,SACC,WAAW,KACT,uCACA,oBACD,GACD;GACE;;AAIV,qBAAe"}

package/lib/title2-C2R8IF0W.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+
+//#region src/title-bar/components/title2.d.ts
+type Title2Props = {
+  title: string;
+  subtitle?: string;
+  renderButton?: React.ReactNode;
+  className?: string;
+};
+declare const Title2: React.FC<Title2Props>;
+//#endregion
+export { Title2 };
+//# sourceMappingURL=title2-C2R8IF0W.d.ts.map

package/lib/title2-Dmq-RO59.mjs

@@ -0,0 +1,29 @@
+import { P2 } from "./paragraph-QihuIWot.mjs";
+import { H5 } from "./heading-BVKLYfXi.mjs";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/title-bar/components/title2.tsx
+const Title2 = ({ title, subtitle = "", renderButton = null, className = "" }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("flex justify-between flex-col", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-row justify-between",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: clsx("flex items-baseline gap-[16px]"),
+				children: [/* @__PURE__ */ jsx(H5, {
+					className: "text-gray-800",
+					text: title
+				}), subtitle ? /* @__PURE__ */ jsx(P2, {
+					className: "text-gray-600",
+					text: subtitle
+				}) : null]
+			}), renderButton || null]
+		}), /* @__PURE__ */ jsx("div", { className: clsx("w-full h-[1px] bg-gray-800 mt-[8px]", "desktop:mt-[16px]") })]
+	});
+};
+var title2_default = Title2;
+
+//#endregion
+export { title2_default };
+//# sourceMappingURL=title2-Dmq-RO59.mjs.map

package/lib/title2-Dmq-RO59.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"title2-Dmq-RO59.mjs","names":["Title2: React.FC<Title2Props>"],"sources":["../src/title-bar/components/title2.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport type React from 'react'\n// components\nimport { H5 } from '../../text/heading'\nimport { P2 } from '../../text/paragraph'\n\ntype Title2Props = {\n  title: string\n  subtitle?: string\n  renderButton?: React.ReactNode\n  className?: string\n}\n\nconst Title2: React.FC<Title2Props> = ({\n  title,\n  subtitle = '',\n  renderButton = null,\n  className = '',\n}) => {\n  return (\n    <div className={clsx('flex justify-between flex-col', className)}>\n      <div className=\"flex flex-row justify-between\">\n        <div className={clsx('flex items-baseline gap-[16px]')}>\n          <H5 className=\"text-gray-800\" text={title} />\n          {subtitle ? <P2 className=\"text-gray-600\" text={subtitle} /> : null}\n        </div>\n        {renderButton || null}\n      </div>\n      <div\n        className={clsx(\n          'w-full h-[1px] bg-gray-800 mt-[8px]',\n          'desktop:mt-[16px]'\n        )}\n      />\n    </div>\n  )\n}\n\nexport default Title2\n"],"mappings":";;;;;;AAaA,MAAMA,UAAiC,EACrC,OACA,WAAW,IACX,eAAe,MACf,YAAY,SACR;AACJ,QACE,qBAAC;EAAI,WAAW,KAAK,iCAAiC,UAAU;aAC9D,qBAAC;GAAI,WAAU;cACb,qBAAC;IAAI,WAAW,KAAK,iCAAiC;eACpD,oBAAC;KAAG,WAAU;KAAgB,MAAM;MAAS,EAC5C,WAAW,oBAAC;KAAG,WAAU;KAAgB,MAAM;MAAY,GAAG;KAC3D,EACL,gBAAgB;IACb,EACN,oBAAC,SACC,WAAW,KACT,uCACA,oBACD,GACD;GACE;;AAIV,qBAAe"}

package/lib/title2-DxioNGe1.d.mts

@@ -0,0 +1,13 @@
+import React from "react";
+
+//#region src/title-bar/components/title2.d.ts
+type Title2Props = {
+  title: string;
+  subtitle?: string;
+  renderButton?: React.ReactNode;
+  className?: string;
+};
+declare const Title2: React.FC<Title2Props>;
+//#endregion
+export { Title2 };
+//# sourceMappingURL=title2-DxioNGe1.d.mts.map

package/lib/title2-MnbXvYzY.js

@@ -0,0 +1,37 @@
+const require_chunk = require('./chunk-BxBTb9qk.js');
+const require_paragraph = require('./paragraph-Bve022HS.js');
+const require_heading = require('./heading-D5Lv6X0M.js');
+let clsx = require("clsx");
+clsx = require_chunk.__toESM(clsx);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
+
+//#region src/title-bar/components/title2.tsx
+const Title2 = ({ title, subtitle = "", renderButton = null, className = "" }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, clsx.default)("flex justify-between flex-col", className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex flex-row justify-between",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: (0, clsx.default)("flex items-baseline gap-[16px]"),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_heading.H5, {
+					className: "text-gray-800",
+					text: title
+				}), subtitle ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_paragraph.P2, {
+					className: "text-gray-600",
+					text: subtitle
+				}) : null]
+			}), renderButton || null]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: (0, clsx.default)("w-full h-[1px] bg-gray-800 mt-[8px]", "desktop:mt-[16px]") })]
+	});
+};
+var title2_default = Title2;
+
+//#endregion
+Object.defineProperty(exports, 'title2_default', {
+  enumerable: true,
+  get: function () {
+    return title2_default;
+  }
+});
+//# sourceMappingURL=title2-MnbXvYzY.js.map

package/lib/title2-MnbXvYzY.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"title2-MnbXvYzY.js","names":["Title2: React.FC<Title2Props>","H5","P2"],"sources":["../src/title-bar/components/title2.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport type React from 'react'\n// components\nimport { H5 } from '../../text/heading'\nimport { P2 } from '../../text/paragraph'\n\ntype Title2Props = {\n  title: string\n  subtitle?: string\n  renderButton?: React.ReactNode\n  className?: string\n}\n\nconst Title2: React.FC<Title2Props> = ({\n  title,\n  subtitle = '',\n  renderButton = null,\n  className = '',\n}) => {\n  return (\n    <div className={clsx('flex justify-between flex-col', className)}>\n      <div className=\"flex flex-row justify-between\">\n        <div className={clsx('flex items-baseline gap-[16px]')}>\n          <H5 className=\"text-gray-800\" text={title} />\n          {subtitle ? <P2 className=\"text-gray-600\" text={subtitle} /> : null}\n        </div>\n        {renderButton || null}\n      </div>\n      <div\n        className={clsx(\n          'w-full h-[1px] bg-gray-800 mt-[8px]',\n          'desktop:mt-[16px]'\n        )}\n      />\n    </div>\n  )\n}\n\nexport default Title2\n"],"mappings":";;;;;;;;;AAaA,MAAMA,UAAiC,EACrC,OACA,WAAW,IACX,eAAe,MACf,YAAY,SACR;AACJ,QACE,4CAAC;EAAI,6BAAgB,iCAAiC,UAAU;aAC9D,4CAAC;GAAI,WAAU;cACb,4CAAC;IAAI,6BAAgB,iCAAiC;eACpD,2CAACC;KAAG,WAAU;KAAgB,MAAM;MAAS,EAC5C,WAAW,2CAACC;KAAG,WAAU;KAAgB,MAAM;MAAY,GAAG;KAC3D,EACL,gBAAgB;IACb,EACN,2CAAC,SACC,6BACE,uCACA,oBACD,GACD;GACE;;AAIV,qBAAe"}

package/lib/top-row-Be6hy8bz.mjs

@@ -0,0 +1,76 @@
+import { internal_link_default } from "./internal-link-JeC0sVNF.mjs";
+import { icon_button_default } from "./icon-button-B-71Zncn.mjs";
+import { pill_button_default } from "./pill-button-y0eh5cgT.mjs";
+import { INTERNAL_LINKS } from "./internal-links-hIbZZEWd.mjs";
+import { external_link_default } from "./external-link-DrDvZqvE.mjs";
+import { ZIndex } from "./z-index-YHdIcjBJ.mjs";
+import { HamburgerContext, HeaderContext } from "./context-Bg1CbUYL.mjs";
+import { ANIMATION } from "./animation-Bh6OgE1s.mjs";
+import { HEADER_ACTION_LINKS } from "./action-links-B-kLE-JI.mjs";
+import { logo_header_default } from "./logo-header-Gy5Y-1lY.mjs";
+import { Hamburger } from "./icons-D_G_3m8-.mjs";
+import { Icons } from "./icons-BwOqeNBO.mjs";
+import { selectSloganTheme } from "./theme-Cbt9LjOk.mjs";
+import { useContext } from "react";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/header/components/top-row/index.tsx
+const TopRow = ({ topRowBgColor, logoType }) => {
+	const { toUseNarrow, releaseBranch, theme, isLinkExternal } = useContext(HeaderContext);
+	const { toggleHamburger } = useContext(HamburgerContext);
+	const LinkComponent = isLinkExternal ? external_link_default : internal_link_default;
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx(`flex items-center justify-between ${ZIndex.topRow} px-[16px] ${topRowBgColor}`, toUseNarrow ? "py-[16px]" : "py-[24px]"),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: clsx(toUseNarrow ? "opacity-100" : "opacity-0", `transition-opacity ${ANIMATION.step3Duration}`, toUseNarrow ? "delay-[350ms]" : "delay-0"),
+					children: /* @__PURE__ */ jsx(icon_button_default, {
+						iconComponent: Hamburger(releaseBranch),
+						theme,
+						onClick: toggleHamburger
+					})
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: clsx(`flex items-center mr-[16px] transition-all ${ANIMATION.step3Duration}`, toUseNarrow ? "ml-[24px]" : "ml-0", toUseNarrow ? "translate-x-0" : "-translate-x-[24px]", toUseNarrow ? `${ANIMATION.step3Delay}` : "delay-0"),
+					children: /* @__PURE__ */ jsx(LinkComponent, {
+						to: INTERNAL_LINKS.home,
+						children: /* @__PURE__ */ jsx(logo_header_default, {
+							type: logoType,
+							releaseBranch,
+							className: clsx(`transition-height ${ANIMATION.step3Duration}`, toUseNarrow ? `${ANIMATION.step3Delay}` : "delay-0", toUseNarrow ? "h-[24px]" : "h-[32px]")
+						})
+					})
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: clsx(`transition-opacity ${ANIMATION.step3Duration}`, "flex items-center font-serif font-normal text-[14px]", toUseNarrow ? `${ANIMATION.step3Delay}` : "delay-0", toUseNarrow ? "pointer-events-none" : "pointer-events-auto", toUseNarrow ? "opacity-0" : "opacity-100", selectSloganTheme(theme)),
+					children: "深度 × 開放 × 非營利"
+				})
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: clsx("flex items-center gap-[16px]", `transition-opacity ${ANIMATION.step3Duration}`, toUseNarrow ? `${ANIMATION.step3Delay}` : "delay-0", toUseNarrow ? "pointer-events-none" : "pointer-events-auto", toUseNarrow ? "opacity-0" : "opacity-100"),
+				children: HEADER_ACTION_LINKS.map((link) => /* @__PURE__ */ jsx(LinkComponent, {
+					to: link.to,
+					target: link.target,
+					children: /* @__PURE__ */ jsx(pill_button_default, {
+						text: link.label,
+						theme,
+						type: link.type
+					})
+				}, link.label))
+			}), /* @__PURE__ */ jsx(Icons, {
+				releaseBranch,
+				theme
+			})]
+		})]
+	});
+};
+var top_row_default = TopRow;
+
+//#endregion
+export { top_row_default };
+//# sourceMappingURL=top-row-Be6hy8bz.mjs.map

package/lib/top-row-Be6hy8bz.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"top-row-Be6hy8bz.mjs","names":["TopRow: FC<TopRowProps>","ExternalLink","InternalLink","IconButton","LogoHeader","PillButton"],"sources":["../src/header/components/top-row/index.tsx"],"sourcesContent":["import { useContext, type FC } from 'react'\nimport clsx from 'clsx'\n// context\nimport { HeaderContext, HamburgerContext } from '../../context'\n// constants\nimport { ZIndex } from '../../constants/z-index'\nimport { ANIMATION } from '../../constants/animation'\nimport { HEADER_ACTION_LINKS } from '../../constants/action-links'\nimport { INTERNAL_LINKS } from '../../../constants/internal-links'\n// logo\nimport { LogoHeader } from '../../../logo'\nimport type { LogoType } from '../../../logo/constants'\n// buton\nimport { IconButton, PillButton } from '../../../button'\n// components\nimport { Icons } from './icons'\nimport { Hamburger } from '../../../icons'\n// utils\nimport { selectSloganTheme } from '../../utils/theme'\n// link\nimport { ExternalLink, InternalLink } from '../../../customized-link'\n\ntype TopRowProps = {\n  topRowBgColor: string\n  logoType: LogoType\n}\nconst TopRow: FC<TopRowProps> = ({ topRowBgColor, logoType }) => {\n  const { toUseNarrow, releaseBranch, theme, isLinkExternal } =\n    useContext(HeaderContext)\n  const { toggleHamburger } = useContext(HamburgerContext)\n  const LinkComponent = isLinkExternal ? ExternalLink : InternalLink\n  return (\n    <div\n      className={clsx(\n        `flex items-center justify-between ${ZIndex.topRow} px-[16px] ${topRowBgColor}`,\n        toUseNarrow ? 'py-[16px]' : 'py-[24px]'\n      )}\n    >\n      {/* left group */}\n      <div className=\"flex items-center\">\n        <div\n          className={clsx(\n            toUseNarrow ? 'opacity-100' : 'opacity-0',\n            `transition-opacity ${ANIMATION.step3Duration}`,\n            toUseNarrow ? 'delay-[350ms]' : 'delay-0'\n          )}\n        >\n          <IconButton\n            iconComponent={Hamburger(releaseBranch)}\n            theme={theme}\n            onClick={toggleHamburger}\n          />\n        </div>\n        {/* Logo */}\n        <div\n          className={clsx(\n            `flex items-center mr-[16px] transition-all ${ANIMATION.step3Duration}`,\n            toUseNarrow ? 'ml-[24px]' : 'ml-0',\n            toUseNarrow ? 'translate-x-0' : '-translate-x-[24px]',\n            toUseNarrow ? `${ANIMATION.step3Delay}` : 'delay-0'\n          )}\n        >\n          <LinkComponent to={INTERNAL_LINKS.home}>\n            <LogoHeader\n              type={logoType}\n              releaseBranch={releaseBranch}\n              className={clsx(\n                `transition-height ${ANIMATION.step3Duration}`,\n                toUseNarrow ? `${ANIMATION.step3Delay}` : 'delay-0',\n                toUseNarrow ? 'h-[24px]' : 'h-[32px]'\n              )}\n            />\n          </LinkComponent>\n        </div>\n        <div\n          className={clsx(\n            `transition-opacity ${ANIMATION.step3Duration}`,\n            'flex items-center font-serif font-normal text-[14px]',\n            toUseNarrow ? `${ANIMATION.step3Delay}` : 'delay-0',\n            toUseNarrow ? 'pointer-events-none' : 'pointer-events-auto',\n            toUseNarrow ? 'opacity-0' : 'opacity-100',\n            selectSloganTheme(theme)\n          )}\n        >\n          深度 × 開放 × 非營利\n        </div>\n      </div>\n      {/* right group */}\n      <div className=\"flex items-center\">\n        <div\n          className={clsx(\n            'flex items-center gap-[16px]',\n            `transition-opacity ${ANIMATION.step3Duration}`,\n            toUseNarrow ? `${ANIMATION.step3Delay}` : 'delay-0',\n            toUseNarrow ? 'pointer-events-none' : 'pointer-events-auto',\n            toUseNarrow ? 'opacity-0' : 'opacity-100'\n          )}\n        >\n          {HEADER_ACTION_LINKS.map((link) => (\n            <LinkComponent to={link.to} target={link.target} key={link.label}>\n              <PillButton text={link.label} theme={theme} type={link.type} />\n            </LinkComponent>\n          ))}\n        </div>\n        {/* icons */}\n        <Icons releaseBranch={releaseBranch} theme={theme} />\n      </div>\n    </div>\n  )\n}\n\nexport default TopRow\n"],"mappings":";;;;;;;;;;;;;;;;;;AA0BA,MAAMA,UAA2B,EAAE,eAAe,eAAe;CAC/D,MAAM,EAAE,aAAa,eAAe,OAAO,mBACzC,WAAW,cAAc;CAC3B,MAAM,EAAE,oBAAoB,WAAW,iBAAiB;CACxD,MAAM,gBAAgB,iBAAiBC,wBAAeC;AACtD,QACE,qBAAC;EACC,WAAW,KACT,qCAAqC,OAAO,OAAO,aAAa,iBAChE,cAAc,cAAc,YAC7B;aAGD,qBAAC;GAAI,WAAU;;IACb,oBAAC;KACC,WAAW,KACT,cAAc,gBAAgB,aAC9B,sBAAsB,UAAU,iBAChC,cAAc,kBAAkB,UACjC;eAED,oBAACC;MACC,eAAe,UAAU,cAAc;MAChC;MACP,SAAS;OACT;MACE;IAEN,oBAAC;KACC,WAAW,KACT,8CAA8C,UAAU,iBACxD,cAAc,cAAc,QAC5B,cAAc,kBAAkB,uBAChC,cAAc,GAAG,UAAU,eAAe,UAC3C;eAED,oBAAC;MAAc,IAAI,eAAe;gBAChC,oBAACC;OACC,MAAM;OACS;OACf,WAAW,KACT,qBAAqB,UAAU,iBAC/B,cAAc,GAAG,UAAU,eAAe,WAC1C,cAAc,aAAa,WAC5B;QACD;OACY;MACZ;IACN,oBAAC;KACC,WAAW,KACT,sBAAsB,UAAU,iBAChC,wDACA,cAAc,GAAG,UAAU,eAAe,WAC1C,cAAc,wBAAwB,uBACtC,cAAc,cAAc,eAC5B,kBAAkB,MAAM,CACzB;eACF;MAEK;;IACF,EAEN,qBAAC;GAAI,WAAU;cACb,oBAAC;IACC,WAAW,KACT,gCACA,sBAAsB,UAAU,iBAChC,cAAc,GAAG,UAAU,eAAe,WAC1C,cAAc,wBAAwB,uBACtC,cAAc,cAAc,cAC7B;cAEA,oBAAoB,KAAK,SACxB,oBAAC;KAAc,IAAI,KAAK;KAAI,QAAQ,KAAK;eACvC,oBAACC;MAAW,MAAM,KAAK;MAAc;MAAO,MAAM,KAAK;OAAQ;OADX,KAAK,MAE3C,CAChB;KACE,EAEN,oBAAC;IAAqB;IAAsB;KAAS;IACjD;GACF;;AAIV,sBAAe"}

package/lib/top-row-DoDiUNas.js

@@ -0,0 +1,85 @@
+const require_chunk = require('./chunk-BxBTb9qk.js');
+const require_icon_button = require('./icon-button-Vqwyow05.js');
+const require_pill_button = require('./pill-button-CNbShnjT.js');
+const require_internal_links = require('./internal-links-B0I8FU-O.js');
+const require_external_link = require('./external-link-Dnw1WSM1.js');
+const require_internal_link = require('./internal-link-CKuvpRC8.js');
+const require_z_index = require('./z-index-CkMhi8IW.js');
+const require_context = require('./context-DW8qh_Q3.js');
+const require_animation = require('./animation-CjKIebSq.js');
+const require_action_links = require('./action-links-CrB9xTLX.js');
+const require_logo_header = require('./logo-header-Cp7W8CR-.js');
+const require_icons = require('./icons-OsNrxOWn.js');
+const require_icons$1 = require('./icons-DF2IcvTD.js');
+const require_theme = require('./theme-tgdB3gqC.js');
+let react = require("react");
+react = require_chunk.__toESM(react);
+let clsx = require("clsx");
+clsx = require_chunk.__toESM(clsx);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
+
+//#region src/header/components/top-row/index.tsx
+const TopRow = ({ topRowBgColor, logoType }) => {
+	const { toUseNarrow, releaseBranch, theme, isLinkExternal } = (0, react.useContext)(require_context.HeaderContext);
+	const { toggleHamburger } = (0, react.useContext)(require_context.HamburgerContext);
+	const LinkComponent = isLinkExternal ? require_external_link.external_link_default : require_internal_link.internal_link_default;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, clsx.default)(`flex items-center justify-between ${require_z_index.ZIndex.topRow} px-[16px] ${topRowBgColor}`, toUseNarrow ? "py-[16px]" : "py-[24px]"),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-center",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: (0, clsx.default)(toUseNarrow ? "opacity-100" : "opacity-0", `transition-opacity ${require_animation.ANIMATION.step3Duration}`, toUseNarrow ? "delay-[350ms]" : "delay-0"),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icon_button.icon_button_default, {
+						iconComponent: require_icons.Hamburger(releaseBranch),
+						theme,
+						onClick: toggleHamburger
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: (0, clsx.default)(`flex items-center mr-[16px] transition-all ${require_animation.ANIMATION.step3Duration}`, toUseNarrow ? "ml-[24px]" : "ml-0", toUseNarrow ? "translate-x-0" : "-translate-x-[24px]", toUseNarrow ? `${require_animation.ANIMATION.step3Delay}` : "delay-0"),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinkComponent, {
+						to: require_internal_links.INTERNAL_LINKS.home,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_logo_header.logo_header_default, {
+							type: logoType,
+							releaseBranch,
+							className: (0, clsx.default)(`transition-height ${require_animation.ANIMATION.step3Duration}`, toUseNarrow ? `${require_animation.ANIMATION.step3Delay}` : "delay-0", toUseNarrow ? "h-[24px]" : "h-[32px]")
+						})
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: (0, clsx.default)(`transition-opacity ${require_animation.ANIMATION.step3Duration}`, "flex items-center font-serif font-normal text-[14px]", toUseNarrow ? `${require_animation.ANIMATION.step3Delay}` : "delay-0", toUseNarrow ? "pointer-events-none" : "pointer-events-auto", toUseNarrow ? "opacity-0" : "opacity-100", require_theme.selectSloganTheme(theme)),
+					children: "深度 × 開放 × 非營利"
+				})
+			]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-center",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: (0, clsx.default)("flex items-center gap-[16px]", `transition-opacity ${require_animation.ANIMATION.step3Duration}`, toUseNarrow ? `${require_animation.ANIMATION.step3Delay}` : "delay-0", toUseNarrow ? "pointer-events-none" : "pointer-events-auto", toUseNarrow ? "opacity-0" : "opacity-100"),
+				children: require_action_links.HEADER_ACTION_LINKS.map((link) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinkComponent, {
+					to: link.to,
+					target: link.target,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pill_button.pill_button_default, {
+						text: link.label,
+						theme,
+						type: link.type
+					})
+				}, link.label))
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons$1.Icons, {
+				releaseBranch,
+				theme
+			})]
+		})]
+	});
+};
+var top_row_default = TopRow;
+
+//#endregion
+Object.defineProperty(exports, 'top_row_default', {
+  enumerable: true,
+  get: function () {
+    return top_row_default;
+  }
+});
+//# sourceMappingURL=top-row-DoDiUNas.js.map

package/lib/top-row-DoDiUNas.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"top-row-DoDiUNas.js","names":["TopRow: FC<TopRowProps>","HeaderContext","HamburgerContext","ExternalLink","InternalLink","ZIndex","ANIMATION","IconButton","Hamburger","INTERNAL_LINKS","LogoHeader","selectSloganTheme","HEADER_ACTION_LINKS","PillButton","Icons"],"sources":["../src/header/components/top-row/index.tsx"],"sourcesContent":["import { useContext, type FC } from 'react'\nimport clsx from 'clsx'\n// context\nimport { HeaderContext, HamburgerContext } from '../../context'\n// constants\nimport { ZIndex } from '../../constants/z-index'\nimport { ANIMATION } from '../../constants/animation'\nimport { HEADER_ACTION_LINKS } from '../../constants/action-links'\nimport { INTERNAL_LINKS } from '../../../constants/internal-links'\n// logo\nimport { LogoHeader } from '../../../logo'\nimport type { LogoType } from '../../../logo/constants'\n// buton\nimport { IconButton, PillButton } from '../../../button'\n// components\nimport { Icons } from './icons'\nimport { Hamburger } from '../../../icons'\n// utils\nimport { selectSloganTheme } from '../../utils/theme'\n// link\nimport { ExternalLink, InternalLink } from '../../../customized-link'\n\ntype TopRowProps = {\n  topRowBgColor: string\n  logoType: LogoType\n}\nconst TopRow: FC<TopRowProps> = ({ topRowBgColor, logoType }) => {\n  const { toUseNarrow, releaseBranch, theme, isLinkExternal } =\n    useContext(HeaderContext)\n  const { toggleHamburger } = useContext(HamburgerContext)\n  const LinkComponent = isLinkExternal ? ExternalLink : InternalLink\n  return (\n    <div\n      className={clsx(\n        `flex items-center justify-between ${ZIndex.topRow} px-[16px] ${topRowBgColor}`,\n        toUseNarrow ? 'py-[16px]' : 'py-[24px]'\n      )}\n    >\n      {/* left group */}\n      <div className=\"flex items-center\">\n        <div\n          className={clsx(\n            toUseNarrow ? 'opacity-100' : 'opacity-0',\n            `transition-opacity ${ANIMATION.step3Duration}`,\n            toUseNarrow ? 'delay-[350ms]' : 'delay-0'\n          )}\n        >\n          <IconButton\n            iconComponent={Hamburger(releaseBranch)}\n            theme={theme}\n            onClick={toggleHamburger}\n          />\n        </div>\n        {/* Logo */}\n        <div\n          className={clsx(\n            `flex items-center mr-[16px] transition-all ${ANIMATION.step3Duration}`,\n            toUseNarrow ? 'ml-[24px]' : 'ml-0',\n            toUseNarrow ? 'translate-x-0' : '-translate-x-[24px]',\n            toUseNarrow ? `${ANIMATION.step3Delay}` : 'delay-0'\n          )}\n        >\n          <LinkComponent to={INTERNAL_LINKS.home}>\n            <LogoHeader\n              type={logoType}\n              releaseBranch={releaseBranch}\n              className={clsx(\n                `transition-height ${ANIMATION.step3Duration}`,\n                toUseNarrow ? `${ANIMATION.step3Delay}` : 'delay-0',\n                toUseNarrow ? 'h-[24px]' : 'h-[32px]'\n              )}\n            />\n          </LinkComponent>\n        </div>\n        <div\n          className={clsx(\n            `transition-opacity ${ANIMATION.step3Duration}`,\n            'flex items-center font-serif font-normal text-[14px]',\n            toUseNarrow ? `${ANIMATION.step3Delay}` : 'delay-0',\n            toUseNarrow ? 'pointer-events-none' : 'pointer-events-auto',\n            toUseNarrow ? 'opacity-0' : 'opacity-100',\n            selectSloganTheme(theme)\n          )}\n        >\n          深度 × 開放 × 非營利\n        </div>\n      </div>\n      {/* right group */}\n      <div className=\"flex items-center\">\n        <div\n          className={clsx(\n            'flex items-center gap-[16px]',\n            `transition-opacity ${ANIMATION.step3Duration}`,\n            toUseNarrow ? `${ANIMATION.step3Delay}` : 'delay-0',\n            toUseNarrow ? 'pointer-events-none' : 'pointer-events-auto',\n            toUseNarrow ? 'opacity-0' : 'opacity-100'\n          )}\n        >\n          {HEADER_ACTION_LINKS.map((link) => (\n            <LinkComponent to={link.to} target={link.target} key={link.label}>\n              <PillButton text={link.label} theme={theme} type={link.type} />\n            </LinkComponent>\n          ))}\n        </div>\n        {/* icons */}\n        <Icons releaseBranch={releaseBranch} theme={theme} />\n      </div>\n    </div>\n  )\n}\n\nexport default TopRow\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA0BA,MAAMA,UAA2B,EAAE,eAAe,eAAe;CAC/D,MAAM,EAAE,aAAa,eAAe,OAAO,yCAC9BC,8BAAc;CAC3B,MAAM,EAAE,0CAA+BC,iCAAiB;CACxD,MAAM,gBAAgB,iBAAiBC,8CAAeC;AACtD,QACE,4CAAC;EACC,6BACE,qCAAqCC,uBAAO,OAAO,aAAa,iBAChE,cAAc,cAAc,YAC7B;aAGD,4CAAC;GAAI,WAAU;;IACb,2CAAC;KACC,6BACE,cAAc,gBAAgB,aAC9B,sBAAsBC,4BAAU,iBAChC,cAAc,kBAAkB,UACjC;eAED,2CAACC;MACC,eAAeC,wBAAU,cAAc;MAChC;MACP,SAAS;OACT;MACE;IAEN,2CAAC;KACC,6BACE,8CAA8CF,4BAAU,iBACxD,cAAc,cAAc,QAC5B,cAAc,kBAAkB,uBAChC,cAAc,GAAGA,4BAAU,eAAe,UAC3C;eAED,2CAAC;MAAc,IAAIG,sCAAe;gBAChC,2CAACC;OACC,MAAM;OACS;OACf,6BACE,qBAAqBJ,4BAAU,iBAC/B,cAAc,GAAGA,4BAAU,eAAe,WAC1C,cAAc,aAAa,WAC5B;QACD;OACY;MACZ;IACN,2CAAC;KACC,6BACE,sBAAsBA,4BAAU,iBAChC,wDACA,cAAc,GAAGA,4BAAU,eAAe,WAC1C,cAAc,wBAAwB,uBACtC,cAAc,cAAc,eAC5BK,gCAAkB,MAAM,CACzB;eACF;MAEK;;IACF,EAEN,4CAAC;GAAI,WAAU;cACb,2CAAC;IACC,6BACE,gCACA,sBAAsBL,4BAAU,iBAChC,cAAc,GAAGA,4BAAU,eAAe,WAC1C,cAAc,wBAAwB,uBACtC,cAAc,cAAc,cAC7B;cAEAM,yCAAoB,KAAK,SACxB,2CAAC;KAAc,IAAI,KAAK;KAAI,QAAQ,KAAK;eACvC,2CAACC;MAAW,MAAM,KAAK;MAAc;MAAO,MAAM,KAAK;OAAQ;OADX,KAAK,MAE3C,CAChB;KACE,EAEN,2CAACC;IAAqB;IAAsB;KAAS;IACjD;GACF;;AAIV,sBAAe"}

package/lib/{type-CcygKers.d.ts → type-BnDFCU6X.d.ts}

@@ -11,4 +11,4 @@ type CustomizedLinkProps = {
 };
 //#endregion
 export { CustomizedLinkProps, LinkTarget };
-//# sourceMappingURL=type-CcygKers.d.ts.map
+//# sourceMappingURL=type-BnDFCU6X.d.ts.map

package/lib/type-CLXaT3at.d.ts

@@ -0,0 +1,10 @@
+//#region src/title-bar/components/title-tab/type.d.ts
+type Tab = {
+  text: string;
+  link: string;
+  isExternal?: boolean;
+  isActive?: boolean;
+};
+//#endregion
+export { Tab };
+//# sourceMappingURL=type-CLXaT3at.d.ts.map

package/lib/{type-Bsf9A8YX.d.mts → type-CUK24s0m.d.mts}

@@ -11,4 +11,4 @@ type CustomizedLinkProps = {
 };
 //#endregion
 export { CustomizedLinkProps, LinkTarget };
-//# sourceMappingURL=type-Bsf9A8YX.d.mts.map
+//# sourceMappingURL=type-CUK24s0m.d.mts.map

package/lib/type-CeVcN-Qd.d.mts

@@ -0,0 +1,10 @@
+//#region src/title-bar/components/title-tab/type.d.ts
+type Tab = {
+  text: string;
+  link: string;
+  isExternal?: boolean;
+  isActive?: boolean;
+};
+//#endregion
+export { Tab };
+//# sourceMappingURL=type-CeVcN-Qd.d.mts.map

package/lib/types/index.d.mts

@@ -1,2 +1,2 @@
-import { ValuesOf } from "../index-CUE6zs36.mjs";
+import { ValuesOf } from "../index-HhQuz4hd.mjs";
 export { ValuesOf };

package/lib/{types-p8V2pbqn.d.mts → types-Blyo2r50.d.mts}

@@ -1,4 +1,4 @@
-import { MediaType } from "./constants-DVYCKpJ0.mjs";
+import { MediaType } from "./constants-BVpJd-Eq.mjs";
 
 //#region src/footer/types.d.ts
 type LinkType = {
@@ -12,4 +12,4 @@ type SocialMediaLink = {
 };
 //#endregion
 export { LinkType, SocialMediaLink };
-//# sourceMappingURL=types-p8V2pbqn.d.mts.map
+//# sourceMappingURL=types-Blyo2r50.d.mts.map

package/lib/{types-dW_WJa4D.d.ts → types-Ds7aLWpi.d.ts}

@@ -1,4 +1,4 @@
-import { MediaType } from "./constants-CBjyeHSl.js";
+import { MediaType } from "./constants-BkxOSlW7.js";
 
 //#region src/footer/types.d.ts
 type LinkType = {
@@ -12,4 +12,4 @@ type SocialMediaLink = {
 };
 //#endregion
 export { LinkType, SocialMediaLink };
-//# sourceMappingURL=types-dW_WJa4D.d.ts.map
+//# sourceMappingURL=types-Ds7aLWpi.d.ts.map

package/lib/use-outside-click-BIZ5N7wQ.d.ts

@@ -0,0 +1,7 @@
+import * as react17 from "react";
+
+//#region src/hooks/use-outside-click.d.ts
+declare const useOutsideClick: (callback: () => void) => react17.RefObject<HTMLDivElement | null>;
+//#endregion
+export { useOutsideClick };
+//# sourceMappingURL=use-outside-click-BIZ5N7wQ.d.ts.map

package/lib/use-outside-click-BO4-52Iu.d.mts

@@ -0,0 +1,7 @@
+import * as react10 from "react";
+
+//#region src/hooks/use-outside-click.d.ts
+declare const useOutsideClick: (callback: () => void) => react10.RefObject<HTMLDivElement | null>;
+//#endregion
+export { useOutsideClick };
+//# sourceMappingURL=use-outside-click-BO4-52Iu.d.mts.map

package/lib/{use-outside-click-DnJ0DNZ9.js → use-outside-click-Ffe2bjxu.js}

@@ -24,4 +24,4 @@ Object.defineProperty(exports, 'useOutsideClick', {
     return useOutsideClick;
   }
 });
-//# sourceMappingURL=use-outside-click-DnJ0DNZ9.js.map
+//# sourceMappingURL=use-outside-click-Ffe2bjxu.js.map

package/lib/{use-outside-click-DnJ0DNZ9.js.map → use-outside-click-Ffe2bjxu.js.map}

@@ -1 +1 @@
-{"version":3,"file":"use-outside-click-DnJ0DNZ9.js","names":[],"sources":["../src/hooks/use-outside-click.ts"],"sourcesContent":["import { useEffect, useRef } from 'react'\n\nexport const useOutsideClick = (callback: () => void) => {\n  const ref = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent | TouchEvent) => {\n      if (ref.current && !ref.current.contains(event.target as Node)) {\n        callback()\n      }\n    }\n\n    window.addEventListener('click', handleClickOutside)\n\n    return () => {\n      window.removeEventListener('click', handleClickOutside)\n    }\n  }, [callback])\n\n  return ref\n}\n"],"mappings":";;;;;AAEA,MAAa,mBAAmB,aAAyB;CACvD,MAAM,wBAA6B,KAAK;AAExC,4BAAgB;EACd,MAAM,sBAAsB,UAAmC;AAC7D,OAAI,IAAI,WAAW,CAAC,IAAI,QAAQ,SAAS,MAAM,OAAe,CAC5D,WAAU;;AAId,SAAO,iBAAiB,SAAS,mBAAmB;AAEpD,eAAa;AACX,UAAO,oBAAoB,SAAS,mBAAmB;;IAExD,CAAC,SAAS,CAAC;AAEd,QAAO"}
+{"version":3,"file":"use-outside-click-Ffe2bjxu.js","names":[],"sources":["../src/hooks/use-outside-click.ts"],"sourcesContent":["import { useEffect, useRef } from 'react'\n\nexport const useOutsideClick = (callback: () => void) => {\n  const ref = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent | TouchEvent) => {\n      if (ref.current && !ref.current.contains(event.target as Node)) {\n        callback()\n      }\n    }\n\n    window.addEventListener('click', handleClickOutside)\n\n    return () => {\n      window.removeEventListener('click', handleClickOutside)\n    }\n  }, [callback])\n\n  return ref\n}\n"],"mappings":";;;;;AAEA,MAAa,mBAAmB,aAAyB;CACvD,MAAM,wBAA6B,KAAK;AAExC,4BAAgB;EACd,MAAM,sBAAsB,UAAmC;AAC7D,OAAI,IAAI,WAAW,CAAC,IAAI,QAAQ,SAAS,MAAM,OAAe,CAC5D,WAAU;;AAId,SAAO,iBAAiB,SAAS,mBAAmB;AAEpD,eAAa;AACX,UAAO,oBAAoB,SAAS,mBAAmB;;IAExD,CAAC,SAAS,CAAC;AAEd,QAAO"}