@twreporter/react-typescript-components 0.1.0-beta.22 → 0.1.0-beta.24

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-DlBl7qMk.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-D7poW27s.js');
+const require_external_link = require('./external-link-N6pHzsZ9.js');
+const require_internal_link = require('./internal-link-CQYfLFmN.js');
+const require_context = require('./context-CDuykLw5.js');
+const require_icons = require('./icons-UUg8_T_o.js');
+const require_logo_header = require('./logo-header-B-cabrdp.js');
+const require_action_links = require('./action-links-DoKEgLL1.js');
+const require_z_index = require('./z-index-BdObyvJF.js');
+const require_animation = require('./animation-DX-GxmUj.js');
+const require_icons$1 = require('./icons-K_IzFJPf.js');
+const require_theme = require('./theme-wttBp_sN.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-DlBl7qMk.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"top-row-DlBl7qMk.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/top-row-zMxUSbFn.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-DOdRudQQ.mjs";
+import { external_link_default } from "./external-link-B7TYHbGX.mjs";
+import { HamburgerContext, HeaderContext } from "./context-rWQ3FoMt.mjs";
+import { Hamburger } from "./icons-CQv9VD7t.mjs";
+import { logo_header_default } from "./logo-header-ZUiyUo-f.mjs";
+import { HEADER_ACTION_LINKS } from "./action-links-D_lFzUQn.mjs";
+import { ZIndex } from "./z-index-CPbhhoLg.mjs";
+import { ANIMATION } from "./animation-C_7J1YwC.mjs";
+import { Icons } from "./icons-CpXimyQ8.mjs";
+import { selectSloganTheme } from "./theme-CfGmIUoO.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-zMxUSbFn.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"top-row-zMxUSbFn.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/{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-BhQu1ic3.d.mts

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

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

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

package/lib/{use-outside-click-DAfe2vPE.mjs → use-outside-click-D6gPe2ZQ.mjs}

@@ -17,4 +17,4 @@ const useOutsideClick = (callback) => {
 
 //#endregion
 export { useOutsideClick };
-//# sourceMappingURL=use-outside-click-DAfe2vPE.mjs.map
+//# sourceMappingURL=use-outside-click-D6gPe2ZQ.mjs.map

package/lib/{use-outside-click-DAfe2vPE.mjs.map → use-outside-click-D6gPe2ZQ.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"use-outside-click-DAfe2vPE.mjs","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,MAAM,OAAuB,KAAK;AAExC,iBAAgB;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-D6gPe2ZQ.mjs","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,MAAM,OAAuB,KAAK;AAExC,iBAAgB;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"}

package/lib/{use-outside-click-BB1MpRid.js → use-outside-click-DAqO6JA3.js}

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

package/lib/{use-outside-click-BB1MpRid.js.map → use-outside-click-DAqO6JA3.js.map}

@@ -1 +1 @@
-{"version":3,"file":"use-outside-click-BB1MpRid.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-DAqO6JA3.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"}

package/lib/z-index-BdObyvJF.js

@@ -0,0 +1,19 @@
+
+//#region src/header/constants/z-index.ts
+const ZIndex = {
+	tabBarMobile: "z-10",
+	tabBarTablet: "tablet:z-3",
+	hamburger: "z-4",
+	header: "z-3",
+	topRow: "z-2",
+	channel: "z-1"
+};
+
+//#endregion
+Object.defineProperty(exports, 'ZIndex', {
+  enumerable: true,
+  get: function () {
+    return ZIndex;
+  }
+});
+//# sourceMappingURL=z-index-BdObyvJF.js.map

package/lib/z-index-BdObyvJF.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"z-index-BdObyvJF.js","names":[],"sources":["../src/header/constants/z-index.ts"],"sourcesContent":["export const ZIndex = {\n  tabBarMobile: 'z-10',\n  tabBarTablet: 'tablet:z-3',\n  hamburger: 'z-4',\n  header: 'z-3',\n  topRow: 'z-2',\n  channel: 'z-1',\n} as const\n"],"mappings":";;AAAA,MAAa,SAAS;CACpB,cAAc;CACd,cAAc;CACd,WAAW;CACX,QAAQ;CACR,QAAQ;CACR,SAAS;CACV"}

package/lib/z-index-CPbhhoLg.mjs

@@ -0,0 +1,13 @@
+//#region src/header/constants/z-index.ts
+const ZIndex = {
+	tabBarMobile: "z-10",
+	tabBarTablet: "tablet:z-3",
+	hamburger: "z-4",
+	header: "z-3",
+	topRow: "z-2",
+	channel: "z-1"
+};
+
+//#endregion
+export { ZIndex };
+//# sourceMappingURL=z-index-CPbhhoLg.mjs.map

package/lib/z-index-CPbhhoLg.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"z-index-CPbhhoLg.mjs","names":[],"sources":["../src/header/constants/z-index.ts"],"sourcesContent":["export const ZIndex = {\n  tabBarMobile: 'z-10',\n  tabBarTablet: 'tablet:z-3',\n  hamburger: 'z-4',\n  header: 'z-3',\n  topRow: 'z-2',\n  channel: 'z-1',\n} as const\n"],"mappings":";AAAA,MAAa,SAAS;CACpB,cAAc;CACd,cAAc;CACd,WAAW;CACX,QAAQ;CACR,QAAQ;CACR,SAAS;CACV"}

package/package.json

@@ -3,7 +3,7 @@
   "description": "React components using TypeScript and Tailwind CSS",
   "author": "twreporter <developer@twreporter.org>",
   "license": "MIT",
-  "version": "0.1.0-beta.22",
+  "version": "0.1.0-beta.24",
   "type": "commonjs",
   "scripts": {
     "clean": "rm -rf lib",
@@ -34,7 +34,7 @@
     "@storybook/react-vite": "^9.1.3",
     "@tailwindcss/cli": "^4.1.11",
     "@tailwindcss/postcss": "^4.1.11",
-    "@twreporter/tailwind-config": "^0.1.0-beta.8",
+    "@twreporter/tailwind-config": "^0.1.0-beta.9",
     "@types/lodash": "^4",
     "@types/react": "^19",
     "@types/react-dom": "^19",
@@ -52,5 +52,6 @@
     "type": "git",
     "url": "git+https://github.com/twreporter/www-public-monorepo.git",
     "directory": "packages/react-typescript-components"
-  }
+  },
+  "gitHead": "913124a8a1cdf8d9f0773da630f70e39d156a1db"
 }