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

package/lib/header/index.js

@@ -1,479 +1,80 @@
 const require_chunk = require('../chunk-BxBTb9qk.js');
 require('../constants-BmxSMOOn.js');
 require('../constants-Cndhv6qr.js');
-require('../paragraph-iuz3jP0Q.js');
+require('../paragraph-Bve022HS.js');
 const require_theme = require('../theme-DDBlIbeS.js');
-const require_button = require('../button-Dk0MxlKd.js');
-const require_external_links = require('../external-links-DCn-uTD-.js');
-const require_internal_links = require('../internal-links-DxtMobuI.js');
-const require_release_branch = require('../release-branch-CRZV4Ivz.js');
-const require_request_origins = require('../request-origins-BDXulkK9.js');
-const require_external_link = require('../external-link-Ce1_loKh.js');
-const require_internal_link = require('../internal-link-DyK4bABh.js');
-require('../customized-link-BuleQPlC.js');
-require('../constants-nmH6p6-y.js');
-const require_divider = require('../divider-B1zvSjNJ.js');
-const require_context = require('../context-I1lTR5SO.js');
-require('../constants-D8wNUvoZ.js');
-const require_icons = require('../icons-qP5oNB0W.js');
-const require_constants$4 = require('../constants-C2moxnps.js');
-require('../dropdown-menu-BAHX8io9.js');
-const require_hamburger_menu = require('../hamburger-menu-BKiIxEbP.js');
-const require_logo = require('../logo-B3GSkN1O.js');
-require('../theme-Cv8rt4oO.js');
-const require_input = require('../input-VmgNb9pm.js');
-const require_tab_bar = require('../tab-bar-BiduNX4N.js');
-const require_use_outside_click = require('../use-outside-click-BB1MpRid.js');
-require('../hooks-B0DKeSXi.js');
-require('../theme-CmvdSSbX.js');
-require('../constants-B_1Vpdib.js');
+require('../theme-ingLagfo.js');
+require('../text-button-DlMVqsvV.js');
+require('../theme-B5GNXw4M.js');
+require('../icon-button-Vqwyow05.js');
+require('../menu-button-DP302FyB.js');
+require('../theme-VVqGnnPq.js');
+require('../pill-button-CNbShnjT.js');
+require('../theme-B4rsurcB.js');
+require('../icon-with-text-button-DOj_-gz0.js');
+require('../button-BLRV4Hwe.js');
+require('../external-links-xe0gZr3J.js');
+require('../internal-links-D7poW27s.js');
+require('../release-branch-BX28p3l9.js');
+require('../request-origins-3W1mZD5S.js');
+require('../external-link-N6pHzsZ9.js');
+require('../internal-link-CQYfLFmN.js');
+require('../customized-link-BQWDtLYD.js');
+require('../constants-DPKsY2bm.js');
+require('../divider-DlnnAUAf.js');
+const require_context = require('../context-CDuykLw5.js');
+require('../constants-D3LxY6rh.js');
+require('../icons-UUg8_T_o.js');
+require('../constants-yYOy9aLl.js');
+require('../theme-CWIKvBG4.js');
+require('../dropdown-menu-item-Ju2VwEMe.js');
+require('../dropdown-menu-Cy7c4sIK.js');
+require('../path-Cqgq79mD.js');
+require('../logo-header-B-cabrdp.js');
+require('../logo-symbol-DUagMBN9.js');
+require('../logo-footer-A3-hcXEt.js');
+require('../logo-CCa4SIA9.js');
+require('../channels-DMEzu4xY.js');
+require('../social-media-CHDZitsM.js');
+require('../action-links-DoKEgLL1.js');
+require('../icon-link-y7Ak0aCk.js');
+require('../light-link-7CpN-g0K.js');
+require('../social-media-Cc0bkShp.js');
+require('../theme-ods4yogr.js');
+require('../search-bar-B6Ze_F-A.js');
+require('../input-CpACY-JO.js');
+const require_hamburger_menu = require('../hamburger-menu-DjK9qGJc.js');
+const require_z_index = require('../z-index-BdObyvJF.js');
+require('../animation-DX-GxmUj.js');
+const require_use_outside_click = require('../use-outside-click-DAqO6JA3.js');
+require('../hooks-B1IbKUM0.js');
+require('../icons-K_IzFJPf.js');
+const require_theme$7 = require('../theme-wttBp_sN.js');
+require('../top-row-DlBl7qMk.js');
+require('../constants-Bx32cjdN.js');
+require('../channels-DIQKIHpB.js');
+const require_desktop_and_above = require('../desktop-and-above-ClCAjINL.js');
+require('../links-C37r2iCr.js');
+const require_tablet_and_below = require('../tablet-and-below-Dx2Rvp02.js');
+require('../theme-Cynd7pF9.js');
+require('../constants-CyHvY9kx.js');
+const require_tab_bar = require('../tab-bar-DCIXtwup.js');
+const require_auth_store = require('../auth-store-cAn9fol9.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);
-let react_transition_group = require("react-transition-group");
-react_transition_group = require_chunk.__toESM(react_transition_group);
-let lodash_map = require("lodash/map");
-lodash_map = require_chunk.__toESM(lodash_map);
-let lodash_some = require("lodash/some");
-lodash_some = require_chunk.__toESM(lodash_some);
-let lodash_includes = require("lodash/includes");
-lodash_includes = require_chunk.__toESM(lodash_includes);
-let lodash_throttle = require("lodash/throttle");
-lodash_throttle = require_chunk.__toESM(lodash_throttle);
-let zustand = require("zustand");
-zustand = require_chunk.__toESM(zustand);
 
-//#region src/header/constants/animation.ts
-const ANIMATION = {
-	step1Duration: "duration-[200ms]",
-	step2Delay: "delay-[150ms]",
-	step2Duration: "duration-[50ms]",
-	step3Delay: "delay-[150ms]",
-	step3Duration: "duration-[200ms]"
-};
-
-//#endregion
-//#region src/header/components/top-row/icons.tsx
-const SearchIcon = () => {
-	const [isSearchOpened, setSearchOpened] = (0, react.useState)(false);
-	const { releaseBranch, theme } = (0, react.useContext)(require_context.HeaderContext);
-	const closeSearchBox = () => {
-		setSearchOpened(false);
-	};
-	const ref = require_use_outside_click.useOutsideClick(closeSearchBox);
-	const handleClickSearch = (e) => {
-		e.preventDefault();
-		setSearchOpened(true);
-		if (!ref.current) return;
-		ref.current.getElementsByTagName("input")[0]?.focus();
-	};
-	const onSearch = (keywords) => {
-		setSearchOpened(false);
-		if (typeof window !== "undefined") window.location.href = `${require_internal_links.INTERNAL_LINKS.search}?q=${encodeURIComponent(keywords)}`;
-	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "relative",
-		ref,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.icon_button_default, {
-			iconComponent: require_icons.Search(releaseBranch),
-			theme,
-			onClick: handleClickSearch,
-			className: (0, clsx.default)("transition-opacity ease-in-out duration-[300ms]", isSearchOpened ? "opacity-0 pointer-events-none" : "opacity-100")
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: (0, clsx.default)("absolute right-0 -top-[8px] transition-opacity ease-in-out duration-[300ms]", isSearchOpened ? "opacity-100" : "opacity-0 pointer-events-none", isSearchOpened ? "z-999" : "-z-1"),
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_input.search_bar_default, {
-				placeholder: "關鍵字搜尋",
-				theme,
-				onClose: closeSearchBox,
-				onSearch,
-				releaseBranch,
-				searchBarWidth: "w-[240px]"
-			})
-		})]
-	}, "search");
-};
-const Icons = ({ releaseBranch = require_release_branch.RELEASE_BRANCH.master, theme = require_theme.THEME.normal }) => {
-	const { isLinkExternal } = (0, react.useContext)(require_context.HeaderContext);
-	const LinkComponent = isLinkExternal ? require_external_link.external_link_default : require_internal_link.internal_link_default;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "ml-[24px] flex flex-row gap-[16px]",
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SearchIcon, {}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinkComponent, {
-				to: require_internal_links.INTERNAL_LINKS.myReading.index,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.icon_button_default, {
-					iconComponent: require_icons.KidStar(releaseBranch),
-					theme
-				})
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinkComponent, {
-				to: require_internal_links.INTERNAL_LINKS.account.index,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.icon_button_default, {
-					iconComponent: require_icons.Member(releaseBranch),
-					theme
-				})
-			})
-		]
-	});
-};
-
-//#endregion
-//#region src/header/utils/theme.ts
-const selectLogoType = (theme) => {
-	switch (theme) {
-		case require_theme.THEME.photography:
-		case require_theme.THEME.transparent: return require_constants$4.LOGO_TYPE.white;
-		default: return require_constants$4.LOGO_TYPE.default;
-	}
-};
-const selectHeaderTheme = (theme) => {
-	switch (theme) {
-		case require_theme.THEME.photography: return {
-			bgColor: "bg-photo-dark",
-			topRowBgColor: "bg-photo-dark"
-		};
-		case require_theme.THEME.transparent: return {
-			bgColor: "bg-opacity-black-02",
-			topRowBgColor: "bg-transparent"
-		};
-		case require_theme.THEME.index: return {
-			bgColor: "bg-gray-white",
-			topRowBgColor: "bg-gray-white"
-		};
-		default: return {
-			bgColor: "bg-gray-100",
-			topRowBgColor: "bg-gray-100"
-		};
-	}
-};
-const selectSloganTheme = (theme) => {
-	switch (theme) {
-		case require_theme.THEME.photography:
-		case require_theme.THEME.transparent: return "text-gray-white";
-		default: return "text-gray-800";
-	}
-};
-
-//#endregion
-//#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_tab_bar.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 ${ANIMATION.step3Duration}`, toUseNarrow ? "delay-[350ms]" : "delay-0"),
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_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 ${ANIMATION.step3Duration}`, toUseNarrow ? "ml-[24px]" : "ml-0", toUseNarrow ? "translate-x-0" : "-translate-x-[24px]", toUseNarrow ? `${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.logo_header_default, {
-							type: logoType,
-							releaseBranch,
-							className: (0, clsx.default)(`transition-height ${ANIMATION.step3Duration}`, toUseNarrow ? `${ANIMATION.step3Delay}` : "delay-0", toUseNarrow ? "h-[24px]" : "h-[32px]")
-						})
-					})
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: (0, clsx.default)(`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__ */ (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 ${ANIMATION.step3Duration}`, toUseNarrow ? `${ANIMATION.step3Delay}` : "delay-0", toUseNarrow ? "pointer-events-none" : "pointer-events-auto", toUseNarrow ? "opacity-0" : "opacity-100"),
-				children: require_hamburger_menu.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_button.pill_button_default, {
-						text: link.label,
-						theme,
-						type: link.type
-					})
-				}, link.label))
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icons, {
-				releaseBranch,
-				theme
-			})]
-		})]
-	});
-};
-var top_row_default = TopRow;
-
-//#endregion
-//#region src/header/components/channels/constants/index.ts
-const CHANNELS = [
-	{
-		label: "最新",
-		to: require_internal_links.INTERNAL_LINKS.latest,
-		target: "_self"
-	},
-	{
-		label: "深度專題",
-		to: require_internal_links.INTERNAL_LINKS.topics,
-		target: "_self"
-	},
-	{
-		label: "國際兩岸",
-		to: require_internal_links.INTERNAL_LINKS.categories.world,
-		target: "_self"
-	},
-	{
-		label: "人權司法",
-		to: require_internal_links.INTERNAL_LINKS.categories.humanRights,
-		target: "_self"
-	},
-	{
-		label: "政治社會",
-		to: require_internal_links.INTERNAL_LINKS.categories.politicsAndSociety,
-		target: "_self"
-	},
-	{
-		label: "醫療健康",
-		to: require_internal_links.INTERNAL_LINKS.categories.health,
-		target: "_self"
-	},
-	{
-		label: "環境永續",
-		to: require_internal_links.INTERNAL_LINKS.categories.environment,
-		target: "_self"
-	},
-	{
-		label: "經濟產業",
-		to: require_internal_links.INTERNAL_LINKS.categories.econ,
-		target: "_self"
-	},
-	{
-		label: "文化生活",
-		to: require_internal_links.INTERNAL_LINKS.categories.culture,
-		target: "_self"
-	},
-	{
-		label: "教育校園",
-		to: require_internal_links.INTERNAL_LINKS.categories.education,
-		target: "_self"
-	}
-];
-
-//#endregion
-//#region src/header/components/channels/index.tsx
-const _$1 = { map: lodash_map.default };
-const ChannelItem = ({ link = {
-	href: "",
-	target: "_self"
-}, label = "" }) => {
-	const { theme, isLinkExternal } = (0, react.useContext)(require_context.HeaderContext);
-	const LinkComponent = isLinkExternal ? require_external_link.external_link_default : require_internal_link.internal_link_default;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, clsx.default)("flex items-center", "[&>a]:no-underline"),
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinkComponent, {
-			to: link.href,
-			target: link.target,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.text_button_default, {
-				text: label,
-				size: require_button.text_button_default.Size.l,
-				theme,
-				style: require_button.text_button_default.Style.dark
-			})
-		})
-	});
-};
-const Channel = () => {
-	const { releaseBranch, theme } = (0, react.useContext)(require_context.HeaderContext);
-	const { toggleHamburger } = (0, react.useContext)(require_context.HamburgerContext);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "flex flex-col items-center",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "flex items-center justify-between w-full px-[16px] py-[8px]",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.icon_button_default, {
-				iconComponent: require_icons.Hamburger(releaseBranch),
-				theme,
-				onClick: toggleHamburger
-			}), _$1.map(CHANNELS, (channel) => {
-				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelItem, {
-					label: channel.label,
-					link: {
-						href: channel.to,
-						target: channel.target
-					}
-				}, `channel-${channel.label}`);
-			})]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_divider.divider_default, {})]
-	});
-};
-var channels_default = Channel;
-
-//#endregion
-//#region src/header/components/desktop-and-above.tsx
-const DesktopAndAbove = ({ topRowBgColor, logoType }) => {
-	const { toUseNarrow } = (0, react.useContext)(require_context.HeaderContext);
-	const channelRef = (0, react.useRef)(null);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "hidden desktop:flex desktop:flex-col",
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(top_row_default, {
-				topRowBgColor,
-				logoType
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: (0, clsx.default)(`transition-opacity ${ANIMATION.step2Duration}`, toUseNarrow ? "opacity-0" : "opacity-100", toUseNarrow ? "delay-0" : `${ANIMATION.step2Delay}`),
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_divider.divider_default, { direction: require_divider.divider_default.Direction.horizontal })
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: `${require_tab_bar.ZIndex.channel}`,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_transition_group.CSSTransition, {
-					in: !toUseNarrow,
-					nodeRef: channelRef,
-					classNames: {
-						enter: `opacity-0 -translate-y-full`,
-						enterActive: `transition-all ease-linear ${ANIMATION.step1Duration} ${ANIMATION.step2Delay} opacity-100 translate-y-0`,
-						exit: `opacity-100 translate-y-0`,
-						exitActive: `transition-all ease-linear ${ANIMATION.step1Duration} -translate-y-full`
-					},
-					timeout: {
-						appear: 0,
-						enter: 350,
-						exit: 200
-					},
-					unmountOnExit: true,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						ref: channelRef,
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(channels_default, {})
-					})
-				})
-			})
-		]
-	});
-};
-var desktop_and_above_default = DesktopAndAbove;
-
-//#endregion
-//#region src/header/utils/links.ts
-const checkReferrer = (referrer = "", releaseBranch = require_release_branch.RELEASE_BRANCH.master) => {
-	try {
-		return new URL(referrer).origin === require_request_origins.forClientSideRendering[releaseBranch].main;
-	} catch (_err) {
-		return false;
-	}
-};
-
-//#endregion
-//#region src/header/components/tablet-and-below.tsx
-const _ = {
-	some: lodash_some.default,
-	includes: lodash_includes.default,
-	throttle: lodash_throttle.default
-};
-const TabletAndBelow = ({ topRowBgColor, logoType }) => {
-	const { isLinkExternal, releaseBranch, theme, pathname, referrerPath, isAuthed } = (0, react.useContext)(require_context.HeaderContext);
-	const LinkComponent = isLinkExternal ? require_external_link.external_link_default : require_internal_link.internal_link_default;
-	const [currentClientWidth, setCurrentClientWidth] = (0, react.useState)(0);
-	(0, react.useEffect)(() => {
-		const handleResize = _.throttle(() => {
-			setCurrentClientWidth(document.body.clientWidth);
-		}, 200);
-		handleResize();
-		window.addEventListener("resize", handleResize);
-		return () => {
-			window.removeEventListener("resize", handleResize);
-		};
-	}, []);
-	const isOnArticlePage = _.includes(pathname, `${require_internal_links.INTERNAL_LINKS.article}/`);
-	const needPrevIconRoute = [
-		require_internal_links.INTERNAL_LINKS.account.donationHistoryPage,
-		require_internal_links.INTERNAL_LINKS.account.emailSubscription,
-		require_internal_links.INTERNAL_LINKS.myReading.savedBookmarks,
-		require_internal_links.INTERNAL_LINKS.myReading.browsingHistory
-	];
-	const isOnNeedPrevIconPage = _.some(needPrevIconRoute, (el) => _.includes(pathname, el));
-	const showPrevIcon = isOnArticlePage || isOnNeedPrevIconPage && currentClientWidth < 768;
-	const gotoPrev = () => {
-		if (referrerPath || checkReferrer(document.referrer, releaseBranch)) window.history.back();
-		else window.location.href = "/";
-	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: (0, clsx.default)(`flex items-center justify-between ${require_tab_bar.ZIndex.topRow} py-[16px] ${topRowBgColor}`, "desktop:hidden"),
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "flex flex-row gap-[8px]",
-			children: [showPrevIcon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "p-[4px] -translate-x-[8px]",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.icon_button_default, {
-					iconComponent: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.Arrow, {
-						direction: require_icons.Arrow.Direction.left,
-						releaseBranch
-					}),
-					theme,
-					onClick: gotoPrev
-				})
-			}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinkComponent, {
-				to: require_internal_links.INTERNAL_LINKS.home,
-				className: "flex items-center",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_logo.logo_header_default, {
-					type: logoType,
-					className: "h-[21px]"
-				})
-			})]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "flex flex-row items-center gap-[16px]",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinkComponent, {
-				to: require_external_links.EXTERNAL_LINKS.monthlyDonation,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.pill_button_default, {
-					text: "贊助",
-					theme: require_button.pill_button_default.Theme.normal,
-					type: require_button.pill_button_default.Type.primary,
-					style: require_button.pill_button_default.Style.brand
-				})
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinkComponent, {
-				to: require_internal_links.INTERNAL_LINKS.account.index,
-				children: isAuthed ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.icon_button_default, { iconComponent: require_icons.Member(releaseBranch) }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.text_button_default, {
-					text: "登入",
-					theme: require_button.text_button_default.Theme.normal,
-					style: require_button.text_button_default.Style.dark,
-					size: require_button.text_button_default.Size.s
-				})
-			})]
-		})]
-	});
-};
-var tablet_and_below_default = TabletAndBelow;
-
-//#endregion
-//#region src/header/store/auth-store.ts
-const creator = (set) => ({
-	isAuthed: false,
-	token: void 0,
-	setAuthed: (isAuthed) => set({ isAuthed }),
-	setToken: (token) => set({ token }),
-	reset: () => set({
-		isAuthed: false,
-		token: void 0
-	})
-});
-const useAuthStore = (0, zustand.create)()(creator);
-
-//#endregion
 //#region src/header/index.tsx
 const HIDE_HEADER_THRESHOLD = 8;
 const TRANSFORM_HEADER_THRESHOLD = 40;
 const TRANSFORM_TIMEOUT = 800;
 const Header = ({ releaseBranch, isLinkExternal, theme, pathname, referrerPath, hamburgerContext }) => {
-	const isAuthed = useAuthStore((s) => s.isAuthed);
-	const { bgColor, topRowBgColor } = selectHeaderTheme(theme);
-	const logoType = selectLogoType(theme);
+	const isAuthed = require_auth_store.useAuthStore((s) => s.isAuthed);
+	const { bgColor, topRowBgColor } = require_theme$7.selectHeaderTheme(theme);
+	const logoType = require_theme$7.selectLogoType(theme);
 	const { isHamburgerMenuOpen, closeHamburgerMenu } = hamburgerContext;
 	const [toUseNarrow, setToUseNarrow] = (0, react.useState)(false);
 	const [hideHeader, setHideHeader] = (0, react.useState)(false);
@@ -551,13 +152,13 @@ const Header = ({ releaseBranch, isLinkExternal, theme, pathname, referrerPath,
 			value: hamburgerContext,
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
-					className: (0, clsx.default)(`w-full top-0 transition-transform duration-300 ${bgColor} ${require_tab_bar.ZIndex.header}`, theme === require_theme.THEME.transparent ? "fixed" : "sticky", hideHeader ? "ease-in" : "ease-out", hideHeader ? "-translate-y-full" : "translate-y-0"),
+					className: (0, clsx.default)(`w-full top-0 transition-transform duration-300 ${bgColor} ${require_z_index.ZIndex.header}`, theme === require_theme.THEME.transparent ? "fixed" : "sticky", hideHeader ? "ease-in" : "ease-out", hideHeader ? "-translate-y-full" : "translate-y-0"),
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: (0, clsx.default)(`flex flex-col mx-auto px-[24px]`, "tablet:px-[32px]", "desktop:px-[48px]", "hd:w-[1280px] hd:px-0"),
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(desktop_and_above_default, {
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_desktop_and_above.desktop_and_above_default, {
 							topRowBgColor,
 							logoType
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(tablet_and_below_default, {
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_tablet_and_below.tablet_and_below_default, {
 							topRowBgColor,
 							logoType
 						})]
@@ -565,7 +166,7 @@ const Header = ({ releaseBranch, isLinkExternal, theme, pathname, referrerPath,
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					ref: outsideRef,
-					className: (0, clsx.default)(`fixed top-0 left-0 ${require_tab_bar.ZIndex.hamburger} transition-transform duration-300 ease-in-out`, isHamburgerMenuOpen ? "translate-x-0 opacity-100" : "-translate-x-full opacity-100", "tablet:-left-[320px]", isHamburgerMenuOpen ? "tablet:translate-x-[320px] tablet:opacity-100" : "tablet:-translate-x-[320px] tablet:opacity-100", "desktop:-left-[280px]", isHamburgerMenuOpen ? "desktop:translate-x-[280px] desktop:opacity-100" : "desktop:-translate-x-[280px] desktop:opacity-100"),
+					className: (0, clsx.default)(`fixed top-0 left-0 ${require_z_index.ZIndex.hamburger} transition-transform duration-300 ease-in-out`, isHamburgerMenuOpen ? "translate-x-0 opacity-100" : "-translate-x-full opacity-100", "tablet:-left-[320px]", isHamburgerMenuOpen ? "tablet:translate-x-[320px] tablet:opacity-100" : "tablet:-translate-x-[320px] tablet:opacity-100", "desktop:-left-[280px]", isHamburgerMenuOpen ? "desktop:translate-x-[280px] desktop:opacity-100" : "desktop:-translate-x-[280px] desktop:opacity-100"),
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_hamburger_menu.hamburger_menu_default, {})
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_tab_bar.tab_bar_default, {})