npm - @twreporter/react-typescript-components - Versions diffs - 0.1.0-beta.12 → 0.1.0-beta.14 - Mend

@twreporter/react-typescript-components 0.1.0-beta.12 → 0.1.0-beta.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (182) hide show

package/lib/header/index.mjs CHANGED Viewed

@@ -1,31 +1,36 @@
 import { internal_link_default } from "../internal-link-NQb751uB.mjs";
 import "../constants-oTHAnh6r.mjs";
-import "../constants-BWFuBApI.mjs";
-import "../paragraph-BWXQNQtX.mjs";
+import "../constants-CBSEPx91.mjs";
+import "../paragraph-Cf9jr8RF.mjs";
 import { THEME } from "../theme-BG6yZVj-.mjs";
-import { icon_button_default, pill_button_default, text_button_default } from "../button-KtEMUa_S.mjs";
+import { icon_button_default, pill_button_default, text_button_default } from "../button-hDNHA85d.mjs";
 import { EXTERNAL_LINKS } from "../external-links-B-A17Osq.mjs";
-import { INTERNAL_LINKS } from "../internal-links-BF-974mA.mjs";
+import { INTERNAL_LINKS } from "../internal-links-CP3dqmrz.mjs";
 import { RELEASE_BRANCH } from "../release-branch-DNCD1uH_.mjs";
-import { external_link_default } from "../external-link-Cx9S31Ye.mjs";
-import "../customized-link-BkuKVCKQ.mjs";
-import "../constants-t0lkfgqP.mjs";
-import { divider_default } from "../divider-Bb3tebJO.mjs";
-import { HamburgerContext, HeaderContext } from "../context-BCesW3fW.mjs";
-import "../constants-CeM93YWF.mjs";
-import { Hamburger, KidStar, Member, Search } from "../icons-DJMi42DI.mjs";
-import { LOGO_TYPE } from "../constants-BqeEbkVD.mjs";
-import "../dropdown-menu-CrEAe1Td.mjs";
-import { HEADER_ACTION_LINKS, hamburger_menu_default } from "../hamburger-menu-BxO_YWHd.mjs";
-import { logo_header_default } from "../logo-Caqpr_8x.mjs";
-import { ZIndex, tab_bar_default } from "../tab-bar-BbOB2CDM.mjs";
-import "../theme-BErS2Qs6.mjs";
-import "../constants-VHBN0pYQ.mjs";
+import { forClientSideRendering } from "../request-origins-CGkNWg8R.mjs";
+import "../constants-Cz7n-nLz.mjs";
+import { divider_default } from "../divider-CEIxmAsH.mjs";
+import { external_link_default } from "../external-link-BykRRwmY.mjs";
+import "../customized-link-DNKmWI0u.mjs";
+import { HamburgerContext, HeaderContext } from "../context-BgdqM3zA.mjs";
+import "../constants-5phfWHvb.mjs";
+import { Arrow, Hamburger, KidStar, Member, Search } from "../icons-I7T-auOQ.mjs";
+import { LOGO_TYPE } from "../constants-DRxdMM_X.mjs";
+import "../dropdown-menu-CuyS5r71.mjs";
+import { HEADER_ACTION_LINKS, hamburger_menu_default } from "../hamburger-menu-CxSoTBp8.mjs";
+import { logo_header_default } from "../logo-D68VZ-fc.mjs";
+import { ZIndex, tab_bar_default } from "../tab-bar-BNo9UHeK.mjs";
+import "../theme-DQCIQh_8.mjs";
+import "../constants--CDeoDub.mjs";
 import { useCallback, useContext, useEffect, useRef, useState } from "react";
 import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CSSTransition } from "react-transition-group";
 import map from "lodash/map";
+import some from "lodash/some";
+import includes from "lodash/includes";
+import throttle from "lodash/throttle";
+import { create } from "zustand";
 //#region src/header/constants/animation.ts
 const ANIMATION = {
@@ -217,7 +222,7 @@ const CHANNELS = [
 //#endregion
 //#region src/header/components/channels/index.tsx
-const _ = { map };
+const _$1 = { map };
 const ChannelItem = ({ link = {
 	href: "",
 	target: "_self"
@@ -249,7 +254,7 @@ const Channel = () => {
 				iconComponent: Hamburger(releaseBranch),
 				theme,
 				onClick: toggleHamburger
-			}), _.map(CHANNELS, (channel) => {
+			}), _$1.map(CHANNELS, (channel) => {
 				return /* @__PURE__ */ jsx(ChannelItem, {
 					label: channel.label,
 					link: {
@@ -307,20 +312,72 @@ const DesktopAndAbove = ({ topRowBgColor, logoType }) => {
 };
 var desktop_and_above_default = DesktopAndAbove;
+//#endregion
+//#region src/header/utils/links.ts
+const checkReferrer = (referrer = "", releaseBranch = RELEASE_BRANCH.master) => {
+	try {
+		return new URL(referrer).origin === forClientSideRendering[releaseBranch].main;
+	} catch (_err) {
+		return false;
+	}
+};
 //#endregion
 //#region src/header/components/tablet-and-below.tsx
+const _ = {
+	some,
+	includes,
+	throttle
+};
 const TabletAndBelow = ({ topRowBgColor, logoType }) => {
-	const { isLinkExternal } = useContext(HeaderContext);
+	const { isLinkExternal, releaseBranch, theme, pathname, referrerPath, isAuthed } = useContext(HeaderContext);
 	const LinkComponent = isLinkExternal ? external_link_default : internal_link_default;
+	const [currentClientWidth, setCurrentClientWidth] = useState(0);
+	useEffect(() => {
+		const handleResize = _.throttle(() => {
+			setCurrentClientWidth(document.body.clientWidth);
+		}, 200);
+		handleResize();
+		window.addEventListener("resize", handleResize);
+		return () => {
+			window.removeEventListener("resize", handleResize);
+		};
+	}, []);
+	const isOnArticlePage = _.includes(pathname, `${INTERNAL_LINKS.article}/`);
+	const needPrevIconRoute = [
+		INTERNAL_LINKS.account.donationHistoryPage,
+		INTERNAL_LINKS.account.emailSubscription,
+		INTERNAL_LINKS.myReading.savedBookmarks,
+		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__ */ jsxs("div", {
 		className: clsx(`flex items-center justify-between ${ZIndex.topRow} py-[16px] ${topRowBgColor}`, "desktop:hidden"),
-		children: [/* @__PURE__ */ jsx(LinkComponent, {
-			to: INTERNAL_LINKS.home,
-			className: "flex items-center",
-			children: /* @__PURE__ */ jsx(logo_header_default, {
-				type: logoType,
-				className: "h-[21px]"
-			})
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-row gap-[8px]",
+			children: [showPrevIcon ? /* @__PURE__ */ jsx("div", {
+				className: "p-[4px] -translate-x-[8px]",
+				children: /* @__PURE__ */ jsx(icon_button_default, {
+					iconComponent: /* @__PURE__ */ jsx(Arrow, {
+						direction: Arrow.Direction.left,
+						releaseBranch
+					}),
+					theme,
+					onClick: gotoPrev
+				})
+			}) : null, /* @__PURE__ */ jsx(LinkComponent, {
+				to: INTERNAL_LINKS.home,
+				className: "flex items-center",
+				children: /* @__PURE__ */ jsx(logo_header_default, {
+					type: logoType,
+					className: "h-[21px]"
+				})
+			})]
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "flex flex-row items-center gap-[16px]",
 			children: [/* @__PURE__ */ jsx(LinkComponent, {
@@ -333,7 +390,7 @@ const TabletAndBelow = ({ topRowBgColor, logoType }) => {
 				})
 			}), /* @__PURE__ */ jsx(LinkComponent, {
 				to: INTERNAL_LINKS.account.index,
-				children: /* @__PURE__ */ jsx(text_button_default, {
+				children: isAuthed ? /* @__PURE__ */ jsx(icon_button_default, { iconComponent: Member(releaseBranch) }) : /* @__PURE__ */ jsx(text_button_default, {
 					text: "登入",
 					theme: text_button_default.Theme.normal,
 					style: text_button_default.Style.dark,
@@ -345,13 +402,27 @@ const TabletAndBelow = ({ topRowBgColor, logoType }) => {
 };
 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 = 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 = false;
+	const isAuthed = useAuthStore((s) => s.isAuthed);
 	const { bgColor, topRowBgColor } = selectHeaderTheme(theme);
 	const logoType = selectLogoType(theme);
 	const { isHamburgerMenuOpen } = hamburgerContext;
@@ -430,9 +501,9 @@ const Header = ({ releaseBranch, isLinkExternal, theme, pathname, referrerPath,
 			value: hamburgerContext,
 			children: [
 				/* @__PURE__ */ jsx("header", {
-					className: clsx(`w-full top-0 transition-transform duration-300 ${bgColor}`, theme === THEME.transparent ? "fixed" : "sticky", hideHeader ? "ease-in" : "ease-out", hideHeader ? "-translate-y-full" : "translate-y-0"),
+					className: clsx(`w-full top-0 transition-transform duration-300 ${bgColor} ${ZIndex.header}`, theme === THEME.transparent ? "fixed" : "sticky", hideHeader ? "ease-in" : "ease-out", hideHeader ? "-translate-y-full" : "translate-y-0"),
 					children: /* @__PURE__ */ jsxs("div", {
-						className: clsx(`flex flex-col mx-auto px-[24px] ${ZIndex.header}`, "tablet:px-[32px]", "desktop:px-[48px]", "hd:w-[1280px] hd:px-0"),
+						className: clsx(`flex flex-col mx-auto px-[24px]`, "tablet:px-[32px]", "desktop:px-[48px]", "hd:w-[1280px] hd:px-0"),
 						children: [/* @__PURE__ */ jsx(desktop_and_above_default, {
 							topRowBgColor,
 							logoType

package/lib/header/index.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","names":["Icons: FC<{\n releaseBranch?: ReleaseBranch\n theme?: Theme\n}>","ExternalLink","InternalLink","IconButton","TopRow: FC<TopRowProps>","ExternalLink","InternalLink","IconButton","LogoHeader","PillButton","CHANNELS: ChannelType[]","ChannelItem: FC<ChannelItemProps>","ExternalLink","InternalLink","TextButton","IconButton","Divider","DesktopAndAbove: FC<DesktopAndAboveProps>","TopRow","Divider","Channel","TabletAndBelow: FC<TabletAndBelowProps>","ExternalLink","InternalLink","LogoHeader","PillButton","TextButton","Header: FC<HeaderProps>","DesktopAndAbove","TabletAndBelow","HamburgerMenu","TabBar"],"sources":["../../src/header/constants/animation.ts","../../src/header/components/top-row/icons.tsx","../../src/header/utils/theme.ts","../../src/header/components/top-row/index.tsx","../../src/header/components/channels/constants/index.ts","../../src/header/components/channels/index.tsx","../../src/header/components/desktop-and-above.tsx","../../src/header/components/tablet-and-below.tsx","../../src/header/index.tsx"],"sourcesContent":["export const ANIMATION = {\n step1Duration: 'duration-[200ms]',\n step2Delay: 'delay-[150ms]',\n step2Duration: 'duration-[50ms]',\n step3Delay: 'delay-[150ms]',\n step3Duration: 'duration-[200ms]',\n} as const\n","import { useContext, type FC } from 'react'\n// context\nimport { HeaderContext } from '../../context'\n// constants\nimport { THEME, type Theme } from '../../../constants/theme'\nimport {\n RELEASE_BRANCH,\n type ReleaseBranch,\n} from '../../../constants/release-branch'\nimport { INTERNAL_LINKS } from '../../../constants/internal-links'\n// icons\nimport { Search, KidStar, Member } from '../../../icons'\n// button\nimport { IconButton } from '../../../button'\n// link\nimport { ExternalLink, InternalLink } from '../../../customized-link'\n\nexport const Icons: FC<{\n releaseBranch?: ReleaseBranch\n theme?: Theme\n}> = ({ releaseBranch = RELEASE_BRANCH.master, theme = THEME.normal }) => {\n const { isLinkExternal } = useContext(HeaderContext)\n const LinkComponent = isLinkExternal ? ExternalLink : InternalLink\n return (\n <div className=\"ml-[24px] flex flex-row gap-[16px]\">\n <IconButton iconComponent={Search(releaseBranch)} theme={theme} />\n <LinkComponent to={INTERNAL_LINKS.myReading.index}>\n <IconButton iconComponent={KidStar(releaseBranch)} theme={theme} />\n </LinkComponent>\n <LinkComponent to={INTERNAL_LINKS.account.index}>\n <IconButton iconComponent={Member(releaseBranch)} theme={theme} />\n </LinkComponent>\n </div>\n )\n}\n","import { THEME, type Theme } from '../../constants/theme'\nimport { LOGO_TYPE } from '../../logo/constants'\n\nexport const selectLogoType = (theme: Theme) => {\n switch (theme) {\n case THEME.photography:\n case THEME.transparent:\n return LOGO_TYPE.white\n default:\n return LOGO_TYPE.default\n }\n}\n\nexport const selectHeaderTheme = (theme: Theme) => {\n switch (theme) {\n case THEME.photography:\n return {\n bgColor: 'bg-photo-dark',\n topRowBgColor: 'bg-photo-dark',\n }\n case THEME.transparent:\n return {\n bgColor: 'bg-opacity-black-02',\n topRowBgColor: 'bg-transparent',\n }\n case THEME.index:\n return {\n bgColor: 'bg-gray-white',\n topRowBgColor: 'bg-gray-white',\n }\n default:\n return {\n bgColor: 'bg-gray-100',\n topRowBgColor: 'bg-gray-100',\n }\n }\n}\n\nexport const selectSloganTheme = (theme: Theme) => {\n switch (theme) {\n case THEME.photography:\n case THEME.transparent:\n return 'text-gray-white'\n default:\n return 'text-gray-800'\n }\n}\n","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","import { INTERNAL_LINKS } from '../../../../constants/internal-links'\nimport type { LinkTarget } from '../../../../customized-link/type'\n\ntype ChannelType = {\n label: string\n to: string\n target: LinkTarget\n}\nexport const CHANNELS: ChannelType[] = [\n {\n label: '最新',\n to: INTERNAL_LINKS.latest,\n target: '_self',\n },\n {\n label: '深度專題',\n to: INTERNAL_LINKS.topics,\n target: '_self',\n },\n {\n label: '國際兩岸',\n to: INTERNAL_LINKS.categories.world,\n target: '_self',\n },\n {\n label: '人權司法',\n to: INTERNAL_LINKS.categories.humanRights,\n target: '_self',\n },\n {\n label: '政治社會',\n to: INTERNAL_LINKS.categories.politicsAndSociety,\n target: '_self',\n },\n {\n label: '醫療健康',\n to: INTERNAL_LINKS.categories.health,\n target: '_self',\n },\n {\n label: '環境永續',\n to: INTERNAL_LINKS.categories.environment,\n target: '_self',\n },\n {\n label: '經濟產業',\n to: INTERNAL_LINKS.categories.econ,\n target: '_self',\n },\n {\n label: '文化生活',\n to: INTERNAL_LINKS.categories.culture,\n target: '_self',\n },\n {\n label: '教育校園',\n to: INTERNAL_LINKS.categories.education,\n target: '_self',\n },\n]\n","import { useContext, type FC } from 'react'\nimport clsx from 'clsx'\n// context\nimport { HeaderContext, HamburgerContext } from '../../context'\n// components\nimport { IconButton, TextButton } from '../../../button'\nimport { Hamburger } from '../../../icons'\nimport Divider from '../../../divider'\n// constants\nimport { CHANNELS } from './constants'\n// link\nimport { ExternalLink, InternalLink } from '../../../customized-link'\nimport type { LinkTarget } from '../../../customized-link/type'\n// lodash\nimport map from 'lodash/map'\nconst _ = {\n map,\n}\ntype ChannelItemProps = {\n link: {\n href: string\n target: LinkTarget\n }\n label: string\n}\nconst ChannelItem: FC<ChannelItemProps> = ({\n link = { href: '', target: '_self' },\n label = '',\n}) => {\n const { theme, isLinkExternal } = useContext(HeaderContext)\n const LinkComponent = isLinkExternal ? ExternalLink : InternalLink\n return (\n <div className={clsx('flex items-center', '[&>a]:no-underline')}>\n <LinkComponent to={link.href} target={link.target}>\n <TextButton\n text={label}\n size={TextButton.Size.l}\n theme={theme}\n style={TextButton.Style.dark}\n />\n </LinkComponent>\n </div>\n )\n}\n\nconst Channel = () => {\n const { releaseBranch, theme } = useContext(HeaderContext)\n const { toggleHamburger } = useContext(HamburgerContext)\n return (\n <div className=\"flex flex-col items-center\">\n <div className=\"flex items-center justify-between w-full px-[16px] py-[8px]\">\n <IconButton\n iconComponent={Hamburger(releaseBranch)}\n theme={theme}\n onClick={toggleHamburger}\n />\n {_.map(CHANNELS, (channel) => {\n return (\n <ChannelItem\n key={`channel-${channel.label}`}\n label={channel.label}\n link={{\n href: channel.to,\n target: channel.target,\n }}\n />\n )\n })}\n </div>\n <Divider />\n </div>\n )\n}\n\nexport default Channel\n","import { useContext, useRef, type FC } from 'react'\nimport clsx from 'clsx'\nimport { CSSTransition } from 'react-transition-group'\n// context\nimport { HeaderContext } from '../context'\n// constants\nimport { ZIndex } from '../constants/z-index'\nimport { ANIMATION } from '../constants/animation'\n// compontents\nimport TopRow from './top-row'\nimport Channel from './channels'\nimport Divider from '../../divider'\n// type\nimport type { LogoType } from '../../logo/constants'\ntype DesktopAndAboveProps = {\n topRowBgColor: string\n logoType: LogoType\n}\nconst DesktopAndAbove: FC<DesktopAndAboveProps> = ({\n topRowBgColor,\n logoType,\n}) => {\n const { toUseNarrow } = useContext(HeaderContext)\n const channelRef = useRef<HTMLDivElement>(null)\n return (\n <div className=\"hidden desktop:flex desktop:flex-col\">\n <TopRow topRowBgColor={topRowBgColor} logoType={logoType} />\n {/ divider /}\n <div\n className={clsx(\n `transition-opacity ${ANIMATION.step2Duration}`,\n toUseNarrow ? 'opacity-0' : 'opacity-100',\n toUseNarrow ? 'delay-0' : `${ANIMATION.step2Delay}`\n )}\n >\n <Divider direction={Divider.Direction.horizontal} />\n </div>\n {/ channels /}\n <div className={`${ZIndex.channel}`}>\n <CSSTransition\n in={!toUseNarrow}\n nodeRef={channelRef}\n classNames={{\n enter: `opacity-0 -translate-y-full`,\n enterActive: `transition-all ease-linear ${ANIMATION.step1Duration} ${ANIMATION.step2Delay} opacity-100 translate-y-0`,\n exit: `opacity-100 translate-y-0`,\n exitActive: `transition-all ease-linear ${ANIMATION.step1Duration} -translate-y-full`,\n }}\n timeout={{ appear: 0, enter: 350, exit: 200 }}\n unmountOnExit\n >\n <div ref={channelRef}>\n <Channel />\n </div>\n </CSSTransition>\n </div>\n </div>\n )\n}\n\nexport default DesktopAndAbove\n","import { useContext, type FC } from 'react'\nimport clsx from 'clsx'\n// context\nimport { HeaderContext } from '../context'\n// constants\nimport { ZIndex } from '../constants/z-index'\nimport { INTERNAL_LINKS } from '../../constants/internal-links'\nimport { EXTERNAL_LINKS } from '../../constants/external-links'\n// logo\nimport { LogoHeader } from '../../logo'\nimport type { LogoType } from '../../logo/constants'\n// link\nimport { ExternalLink, InternalLink } from '../../customized-link'\n// button\nimport { PillButton, TextButton } from '../../button'\n\ntype TabletAndBelowProps = {\n topRowBgColor: string\n logoType: LogoType\n}\nconst TabletAndBelow: FC<TabletAndBelowProps> = ({\n topRowBgColor,\n logoType,\n}) => {\n const { isLinkExternal } = useContext(HeaderContext)\n const LinkComponent = isLinkExternal ? ExternalLink : InternalLink\n return (\n <div\n className={clsx(\n `flex items-center justify-between ${ZIndex.topRow} py-[16px] ${topRowBgColor}`,\n 'desktop:hidden'\n )}\n >\n {/ logo /}\n <LinkComponent to={INTERNAL_LINKS.home} className=\"flex items-center\">\n <LogoHeader type={logoType} className=\"h-[21px]\" />\n </LinkComponent>\n {/ actions */}\n <div className=\"flex flex-row items-center gap-[16px]\">\n <LinkComponent to={EXTERNAL_LINKS.monthlyDonation}>\n <PillButton\n text=\"贊助\"\n theme={PillButton.Theme.normal}\n type={PillButton.Type.primary}\n style={PillButton.Style.brand}\n />\n </LinkComponent>\n <LinkComponent to={INTERNAL_LINKS.account.index}>\n <TextButton\n text=\"登入\"\n theme={TextButton.Theme.normal}\n style={TextButton.Style.dark}\n size={TextButton.Size.s}\n />\n </LinkComponent>\n </div>\n </div>\n )\n}\n\nexport default TabletAndBelow\n","import { useRef, useState, useCallback, useEffect, type FC } from 'react'\nimport clsx from 'clsx'\n\n// constants\nimport { THEME, type Theme } from '../constants/theme'\nimport type { ReleaseBranch } from '../constants/release-branch'\nimport { ZIndex } from './constants/z-index'\n// components\nimport DesktopAndAbove from './components/desktop-and-above'\nimport TabletAndBelow from './components/tablet-and-below'\n// context\nimport {\n HeaderContext,\n HamburgerContext,\n type HamburgerContextType,\n} from './context'\n// utils\nimport { selectHeaderTheme, selectLogoType } from './utils/theme'\n// hamburger menu\nimport HamburgerMenu from '../hamburger-menu'\n// tab bar\nimport TabBar from '../tab-bar'\n\nconst HIDE_HEADER_THRESHOLD = 8\nconst TRANSFORM_HEADER_THRESHOLD = 40\nconst TRANSFORM_TIMEOUT = 800\n\ntype HeaderProps = {\n releaseBranch: ReleaseBranch\n isLinkExternal: boolean\n theme: Theme\n pathname: string\n referrerPath: string\n hamburgerContext: HamburgerContextType\n}\nconst Header: FC<HeaderProps> = ({\n releaseBranch,\n isLinkExternal,\n theme,\n pathname,\n referrerPath,\n hamburgerContext,\n}) => {\n const isAuthed = false\n\n const { bgColor, topRowBgColor } = selectHeaderTheme(theme)\n const logoType = selectLogoType(theme)\n\n const { isHamburgerMenuOpen } = hamburgerContext\n\n const [toUseNarrow, setToUseNarrow] = useState(false)\n const [hideHeader, setHideHeader] = useState(false)\n\n // TODO: get isAuthed from redux\n // const isAuthed = useSelector(state => _.get(state, 'auth.isAuthed', false))\n\n const lastKnownPageYOffset = useRef(0)\n const ticking = useRef(false)\n const currentY = useRef(0)\n const readyY = useRef(0)\n const isTransforming = useRef(false)\n const transformTimer = useRef<ReturnType<typeof setTimeout> \| null>(null)\n\n const getScrollState = useCallback(\n (scrollTop: number, scrollDirection: 'up' \| 'down') => {\n const isCurrentNarrow = toUseNarrow\n const nextToUseNarrow = scrollTop > TRANSFORM_HEADER_THRESHOLD\n const scrollState = { toUseNarrow, hideHeader }\n\n if (isTransforming.current) {\n return scrollState\n }\n\n if (scrollDirection === 'up') {\n readyY.current = scrollTop\n scrollState.hideHeader = false\n }\n\n if (scrollDirection === 'down') {\n if (\n isCurrentNarrow &&\n scrollTop - readyY.current > HIDE_HEADER_THRESHOLD\n ) {\n scrollState.hideHeader = true\n }\n }\n\n if (isCurrentNarrow) {\n scrollState.toUseNarrow =\n scrollDirection === 'down' ? true : nextToUseNarrow\n } else {\n scrollState.toUseNarrow =\n scrollDirection === 'up' ? false : nextToUseNarrow\n }\n\n if (isCurrentNarrow !== scrollState.toUseNarrow) {\n if (!transformTimer.current) {\n isTransforming.current = true\n transformTimer.current = setTimeout(() => {\n isTransforming.current = false\n readyY.current = currentY.current\n transformTimer.current = null\n }, TRANSFORM_TIMEOUT)\n }\n }\n\n return scrollState\n },\n [toUseNarrow, hideHeader]\n )\n\n const updateScrollState = useCallback(\n (currentScrollTop: number) => {\n const scrollDirection =\n currentScrollTop > currentY.current ? 'down' : 'up'\n currentY.current = currentScrollTop\n const updateState = getScrollState(currentScrollTop, scrollDirection)\n setToUseNarrow(() => updateState.toUseNarrow)\n setHideHeader(() => updateState.hideHeader)\n },\n [getScrollState]\n )\n\n const handleScroll = useCallback(() => {\n lastKnownPageYOffset.current = window.pageYOffset\n if (!ticking.current) {\n window.requestAnimationFrame(() => {\n updateScrollState(lastKnownPageYOffset.current)\n ticking.current = false\n })\n ticking.current = true\n }\n }, [updateScrollState])\n\n useEffect(() => {\n window.addEventListener('scroll', handleScroll, { passive: true })\n return () => {\n window.removeEventListener('scroll', handleScroll)\n }\n }, [handleScroll])\n\n return (\n <HeaderContext\n value={{\n releaseBranch,\n isLinkExternal,\n isAuthed,\n theme,\n pathname,\n referrerPath,\n toUseNarrow,\n hideHeader,\n }}\n >\n <HamburgerContext value={hamburgerContext}>\n <header\n className={clsx(\n `w-full top-0 transition-transform duration-300 ${bgColor}`,\n theme === THEME.transparent ? 'fixed' : 'sticky',\n hideHeader ? 'ease-in' : 'ease-out',\n hideHeader ? '-translate-y-full' : 'translate-y-0'\n )}\n >\n <div\n className={clsx(\n `flex flex-col mx-auto px-[24px] ${ZIndex.header}`,\n 'tablet:px-[32px]',\n 'desktop:px-[48px]',\n 'hd:w-[1280px] hd:px-0'\n )}\n >\n <DesktopAndAbove\n topRowBgColor={topRowBgColor}\n logoType={logoType}\n />\n <TabletAndBelow topRowBgColor={topRowBgColor} logoType={logoType} />\n </div>\n </header>\n <div\n className={clsx(\n `fixed top-0 left-0 ${ZIndex.hamburger} transition-transform duration-300 ease-in-out`,\n isHamburgerMenuOpen\n ? 'translate-x-0 opacity-100'\n : '-translate-x-full opacity-100',\n 'tablet:-left-[320px]',\n isHamburgerMenuOpen\n ? 'tablet:translate-x-[320px] tablet:opacity-100'\n : 'tablet:-translate-x-[320px] tablet:opacity-100',\n 'desktop:-left-[280px]',\n isHamburgerMenuOpen\n ? 'desktop:translate-x-[280px] desktop:opacity-100'\n : 'desktop:-translate-x-[280px] desktop:opacity-100'\n )}\n >\n <HamburgerMenu />\n </div>\n <TabBar />\n </HamburgerContext>\n </HeaderContext>\n )\n}\n\nexport default Header\n"],"mappings":"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"}
1	+ {"version":3,"file":"index.mjs","names":["Icons: FC<{\n releaseBranch?: ReleaseBranch\n theme?: Theme\n}>","ExternalLink","InternalLink","IconButton","TopRow: FC<TopRowProps>","ExternalLink","InternalLink","IconButton","LogoHeader","PillButton","CHANNELS: ChannelType[]","_","ChannelItem: FC<ChannelItemProps>","ExternalLink","InternalLink","TextButton","IconButton","Divider","DesktopAndAbove: FC<DesktopAndAboveProps>","TopRow","Divider","Channel","TabletAndBelow: FC<TabletAndBelowProps>","ExternalLink","InternalLink","IconButton","LogoHeader","PillButton","TextButton","creator: StateCreator<AuthState>","Header: FC<HeaderProps>","DesktopAndAbove","TabletAndBelow","HamburgerMenu","TabBar"],"sources":["../../src/header/constants/animation.ts","../../src/header/components/top-row/icons.tsx","../../src/header/utils/theme.ts","../../src/header/components/top-row/index.tsx","../../src/header/components/channels/constants/index.ts","../../src/header/components/channels/index.tsx","../../src/header/components/desktop-and-above.tsx","../../src/header/utils/links.ts","../../src/header/components/tablet-and-below.tsx","../../src/header/store/auth-store.ts","../../src/header/index.tsx"],"sourcesContent":["export const ANIMATION = {\n step1Duration: 'duration-[200ms]',\n step2Delay: 'delay-[150ms]',\n step2Duration: 'duration-[50ms]',\n step3Delay: 'delay-[150ms]',\n step3Duration: 'duration-[200ms]',\n} as const\n","import { useContext, type FC } from 'react'\n// context\nimport { HeaderContext } from '../../context'\n// constants\nimport { THEME, type Theme } from '../../../constants/theme'\nimport {\n RELEASE_BRANCH,\n type ReleaseBranch,\n} from '../../../constants/release-branch'\nimport { INTERNAL_LINKS } from '../../../constants/internal-links'\n// icons\nimport { Search, KidStar, Member } from '../../../icons'\n// button\nimport { IconButton } from '../../../button'\n// link\nimport { ExternalLink, InternalLink } from '../../../customized-link'\n\nexport const Icons: FC<{\n releaseBranch?: ReleaseBranch\n theme?: Theme\n}> = ({ releaseBranch = RELEASE_BRANCH.master, theme = THEME.normal }) => {\n const { isLinkExternal } = useContext(HeaderContext)\n const LinkComponent = isLinkExternal ? ExternalLink : InternalLink\n return (\n <div className=\"ml-[24px] flex flex-row gap-[16px]\">\n <IconButton iconComponent={Search(releaseBranch)} theme={theme} />\n <LinkComponent to={INTERNAL_LINKS.myReading.index}>\n <IconButton iconComponent={KidStar(releaseBranch)} theme={theme} />\n </LinkComponent>\n <LinkComponent to={INTERNAL_LINKS.account.index}>\n <IconButton iconComponent={Member(releaseBranch)} theme={theme} />\n </LinkComponent>\n </div>\n )\n}\n","import { THEME, type Theme } from '../../constants/theme'\nimport { LOGO_TYPE } from '../../logo/constants'\n\nexport const selectLogoType = (theme: Theme) => {\n switch (theme) {\n case THEME.photography:\n case THEME.transparent:\n return LOGO_TYPE.white\n default:\n return LOGO_TYPE.default\n }\n}\n\nexport const selectHeaderTheme = (theme: Theme) => {\n switch (theme) {\n case THEME.photography:\n return {\n bgColor: 'bg-photo-dark',\n topRowBgColor: 'bg-photo-dark',\n }\n case THEME.transparent:\n return {\n bgColor: 'bg-opacity-black-02',\n topRowBgColor: 'bg-transparent',\n }\n case THEME.index:\n return {\n bgColor: 'bg-gray-white',\n topRowBgColor: 'bg-gray-white',\n }\n default:\n return {\n bgColor: 'bg-gray-100',\n topRowBgColor: 'bg-gray-100',\n }\n }\n}\n\nexport const selectSloganTheme = (theme: Theme) => {\n switch (theme) {\n case THEME.photography:\n case THEME.transparent:\n return 'text-gray-white'\n default:\n return 'text-gray-800'\n }\n}\n","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","import { INTERNAL_LINKS } from '../../../../constants/internal-links'\nimport type { LinkTarget } from '../../../../customized-link/type'\n\ntype ChannelType = {\n label: string\n to: string\n target: LinkTarget\n}\nexport const CHANNELS: ChannelType[] = [\n {\n label: '最新',\n to: INTERNAL_LINKS.latest,\n target: '_self',\n },\n {\n label: '深度專題',\n to: INTERNAL_LINKS.topics,\n target: '_self',\n },\n {\n label: '國際兩岸',\n to: INTERNAL_LINKS.categories.world,\n target: '_self',\n },\n {\n label: '人權司法',\n to: INTERNAL_LINKS.categories.humanRights,\n target: '_self',\n },\n {\n label: '政治社會',\n to: INTERNAL_LINKS.categories.politicsAndSociety,\n target: '_self',\n },\n {\n label: '醫療健康',\n to: INTERNAL_LINKS.categories.health,\n target: '_self',\n },\n {\n label: '環境永續',\n to: INTERNAL_LINKS.categories.environment,\n target: '_self',\n },\n {\n label: '經濟產業',\n to: INTERNAL_LINKS.categories.econ,\n target: '_self',\n },\n {\n label: '文化生活',\n to: INTERNAL_LINKS.categories.culture,\n target: '_self',\n },\n {\n label: '教育校園',\n to: INTERNAL_LINKS.categories.education,\n target: '_self',\n },\n]\n","import { useContext, type FC } from 'react'\nimport clsx from 'clsx'\n// context\nimport { HeaderContext, HamburgerContext } from '../../context'\n// components\nimport { IconButton, TextButton } from '../../../button'\nimport { Hamburger } from '../../../icons'\nimport Divider from '../../../divider'\n// constants\nimport { CHANNELS } from './constants'\n// link\nimport { ExternalLink, InternalLink } from '../../../customized-link'\nimport type { LinkTarget } from '../../../customized-link/type'\n// lodash\nimport map from 'lodash/map'\nconst _ = {\n map,\n}\ntype ChannelItemProps = {\n link: {\n href: string\n target: LinkTarget\n }\n label: string\n}\nconst ChannelItem: FC<ChannelItemProps> = ({\n link = { href: '', target: '_self' },\n label = '',\n}) => {\n const { theme, isLinkExternal } = useContext(HeaderContext)\n const LinkComponent = isLinkExternal ? ExternalLink : InternalLink\n return (\n <div className={clsx('flex items-center', '[&>a]:no-underline')}>\n <LinkComponent to={link.href} target={link.target}>\n <TextButton\n text={label}\n size={TextButton.Size.l}\n theme={theme}\n style={TextButton.Style.dark}\n />\n </LinkComponent>\n </div>\n )\n}\n\nconst Channel = () => {\n const { releaseBranch, theme } = useContext(HeaderContext)\n const { toggleHamburger } = useContext(HamburgerContext)\n return (\n <div className=\"flex flex-col items-center\">\n <div className=\"flex items-center justify-between w-full px-[16px] py-[8px]\">\n <IconButton\n iconComponent={Hamburger(releaseBranch)}\n theme={theme}\n onClick={toggleHamburger}\n />\n {_.map(CHANNELS, (channel) => {\n return (\n <ChannelItem\n key={`channel-${channel.label}`}\n label={channel.label}\n link={{\n href: channel.to,\n target: channel.target,\n }}\n />\n )\n })}\n </div>\n <Divider />\n </div>\n )\n}\n\nexport default Channel\n","import { useContext, useRef, type FC } from 'react'\nimport clsx from 'clsx'\nimport { CSSTransition } from 'react-transition-group'\n// context\nimport { HeaderContext } from '../context'\n// constants\nimport { ZIndex } from '../constants/z-index'\nimport { ANIMATION } from '../constants/animation'\n// compontents\nimport TopRow from './top-row'\nimport Channel from './channels'\nimport Divider from '../../divider'\n// type\nimport type { LogoType } from '../../logo/constants'\ntype DesktopAndAboveProps = {\n topRowBgColor: string\n logoType: LogoType\n}\nconst DesktopAndAbove: FC<DesktopAndAboveProps> = ({\n topRowBgColor,\n logoType,\n}) => {\n const { toUseNarrow } = useContext(HeaderContext)\n const channelRef = useRef<HTMLDivElement>(null)\n return (\n <div className=\"hidden desktop:flex desktop:flex-col\">\n <TopRow topRowBgColor={topRowBgColor} logoType={logoType} />\n {/ divider /}\n <div\n className={clsx(\n `transition-opacity ${ANIMATION.step2Duration}`,\n toUseNarrow ? 'opacity-0' : 'opacity-100',\n toUseNarrow ? 'delay-0' : `${ANIMATION.step2Delay}`\n )}\n >\n <Divider direction={Divider.Direction.horizontal} />\n </div>\n {/ channels /}\n <div className={`${ZIndex.channel}`}>\n <CSSTransition\n in={!toUseNarrow}\n nodeRef={channelRef}\n classNames={{\n enter: `opacity-0 -translate-y-full`,\n enterActive: `transition-all ease-linear ${ANIMATION.step1Duration} ${ANIMATION.step2Delay} opacity-100 translate-y-0`,\n exit: `opacity-100 translate-y-0`,\n exitActive: `transition-all ease-linear ${ANIMATION.step1Duration} -translate-y-full`,\n }}\n timeout={{ appear: 0, enter: 350, exit: 200 }}\n unmountOnExit\n >\n <div ref={channelRef}>\n <Channel />\n </div>\n </CSSTransition>\n </div>\n </div>\n )\n}\n\nexport default DesktopAndAbove\n","import {\n RELEASE_BRANCH,\n type ReleaseBranch,\n} from '../../constants/release-branch'\nimport { forClientSideRendering } from '../../constants/request-origins'\n\nexport const checkReferrer = (\n referrer: string = '',\n releaseBranch: ReleaseBranch = RELEASE_BRANCH.master\n) => {\n try {\n const url = new URL(referrer)\n return url.origin === forClientSideRendering[releaseBranch].main\n } catch (_err) {\n return false\n }\n}\n","import { useContext, useState, useEffect, type FC } from 'react'\nimport clsx from 'clsx'\n// context\nimport { HeaderContext } from '../context'\n// constants\nimport { ZIndex } from '../constants/z-index'\nimport { INTERNAL_LINKS } from '../../constants/internal-links'\nimport { EXTERNAL_LINKS } from '../../constants/external-links'\n// logo\nimport { LogoHeader } from '../../logo'\nimport type { LogoType } from '../../logo/constants'\n// link\nimport { ExternalLink, InternalLink } from '../../customized-link'\n// button\nimport { PillButton, TextButton, IconButton } from '../../button'\n// icon\nimport { Arrow, Member } from '../../icons'\n// utils\nimport { checkReferrer } from '../utils/links'\n// lodash\nimport some from 'lodash/some'\nimport includes from 'lodash/includes'\nimport throttle from 'lodash/throttle'\nconst _ = {\n some,\n includes,\n throttle,\n}\n\ntype TabletAndBelowProps = {\n topRowBgColor: string\n logoType: LogoType\n}\nconst TabletAndBelow: FC<TabletAndBelowProps> = ({\n topRowBgColor,\n logoType,\n}) => {\n const {\n isLinkExternal,\n releaseBranch,\n theme,\n pathname,\n referrerPath,\n isAuthed,\n } = useContext(HeaderContext)\n const LinkComponent = isLinkExternal ? ExternalLink : InternalLink\n\n const [currentClientWidth, setCurrentClientWidth] = useState(0)\n useEffect(() => {\n const handleResize = _.throttle(() => {\n setCurrentClientWidth(document.body.clientWidth)\n }, 200)\n\n handleResize()\n window.addEventListener('resize', handleResize)\n\n return () => {\n window.removeEventListener('resize', handleResize)\n }\n }, [])\n\n const isOnArticlePage = _.includes(pathname, `${INTERNAL_LINKS.article}/`)\n const needPrevIconRoute = [\n INTERNAL_LINKS.account.donationHistoryPage,\n INTERNAL_LINKS.account.emailSubscription,\n INTERNAL_LINKS.myReading.savedBookmarks,\n INTERNAL_LINKS.myReading.browsingHistory,\n ]\n const isOnNeedPrevIconPage = _.some(needPrevIconRoute, (el) =>\n _.includes(pathname, el)\n )\n\n const showPrevIcon =\n isOnArticlePage \|\| (isOnNeedPrevIconPage && currentClientWidth < 768) // only show it on mobile\n\n const gotoPrev = () => {\n if (referrerPath \|\| checkReferrer(document.referrer, releaseBranch)) {\n // go to previous page when referer is twreporter site\n window.history.back()\n } else {\n // go to home page when referer is not twreporter site\n window.location.href = '/'\n }\n }\n\n return (\n <div\n className={clsx(\n `flex items-center justify-between ${ZIndex.topRow} py-[16px] ${topRowBgColor}`,\n 'desktop:hidden'\n )}\n >\n <div className=\"flex flex-row gap-[8px]\">\n {/ pre button /}\n {showPrevIcon ? (\n <div className=\"p-[4px] -translate-x-[8px]\">\n <IconButton\n iconComponent={\n <Arrow\n direction={Arrow.Direction.left}\n releaseBranch={releaseBranch}\n />\n }\n theme={theme}\n onClick={gotoPrev}\n />\n </div>\n ) : null}\n {/ logo /}\n <LinkComponent to={INTERNAL_LINKS.home} className=\"flex items-center\">\n <LogoHeader type={logoType} className=\"h-[21px]\" />\n </LinkComponent>\n </div>\n {/ actions */}\n <div className=\"flex flex-row items-center gap-[16px]\">\n <LinkComponent to={EXTERNAL_LINKS.monthlyDonation}>\n <PillButton\n text=\"贊助\"\n theme={PillButton.Theme.normal}\n type={PillButton.Type.primary}\n style={PillButton.Style.brand}\n />\n </LinkComponent>\n <LinkComponent to={INTERNAL_LINKS.account.index}>\n {isAuthed ? (\n <IconButton iconComponent={Member(releaseBranch)} />\n ) : (\n <TextButton\n text=\"登入\"\n theme={TextButton.Theme.normal}\n style={TextButton.Style.dark}\n size={TextButton.Size.s}\n />\n )}\n </LinkComponent>\n </div>\n </div>\n )\n}\n\nexport default TabletAndBelow\n","import { create, type StateCreator } from 'zustand'\n\nexport type AuthState = {\n isAuthed: boolean\n token?: string\n setAuthed: (isAuthed: boolean) => void\n setToken: (token?: string) => void\n reset: () => void\n}\n\nconst creator: StateCreator<AuthState> = (set) => ({\n isAuthed: false,\n token: undefined,\n setAuthed: (isAuthed: boolean) => set({ isAuthed }),\n setToken: (token?: string) => set({ token }),\n reset: () => set({ isAuthed: false, token: undefined }),\n})\n\nexport const useAuthStore = create<AuthState>()(creator)\n","import { useRef, useState, useCallback, useEffect, type FC } from 'react'\nimport clsx from 'clsx'\n\n// constants\nimport { THEME, type Theme } from '../constants/theme'\nimport type { ReleaseBranch } from '../constants/release-branch'\nimport { ZIndex } from './constants/z-index'\n// components\nimport DesktopAndAbove from './components/desktop-and-above'\nimport TabletAndBelow from './components/tablet-and-below'\n// context\nimport {\n HeaderContext,\n HamburgerContext,\n type HamburgerContextType,\n} from './context'\n// utils\nimport { selectHeaderTheme, selectLogoType } from './utils/theme'\n// hamburger menu\nimport HamburgerMenu from '../hamburger-menu'\n// tab bar\nimport TabBar from '../tab-bar'\nimport { useAuthStore, type AuthState } from './store/auth-store'\n\nconst HIDE_HEADER_THRESHOLD = 8\nconst TRANSFORM_HEADER_THRESHOLD = 40\nconst TRANSFORM_TIMEOUT = 800\n\ntype HeaderProps = {\n releaseBranch: ReleaseBranch\n isLinkExternal: boolean\n theme: Theme\n pathname: string\n referrerPath: string\n hamburgerContext: HamburgerContextType\n}\nconst Header: FC<HeaderProps> = ({\n releaseBranch,\n isLinkExternal,\n theme,\n pathname,\n referrerPath,\n hamburgerContext,\n}) => {\n const isAuthed = useAuthStore((s: AuthState) => s.isAuthed)\n const { bgColor, topRowBgColor } = selectHeaderTheme(theme)\n const logoType = selectLogoType(theme)\n\n const { isHamburgerMenuOpen } = hamburgerContext\n\n const [toUseNarrow, setToUseNarrow] = useState(false)\n const [hideHeader, setHideHeader] = useState(false)\n\n const lastKnownPageYOffset = useRef(0)\n const ticking = useRef(false)\n const currentY = useRef(0)\n const readyY = useRef(0)\n const isTransforming = useRef(false)\n const transformTimer = useRef<ReturnType<typeof setTimeout> \| null>(null)\n\n const getScrollState = useCallback(\n (scrollTop: number, scrollDirection: 'up' \| 'down') => {\n const isCurrentNarrow = toUseNarrow\n const nextToUseNarrow = scrollTop > TRANSFORM_HEADER_THRESHOLD\n const scrollState = { toUseNarrow, hideHeader }\n\n if (isTransforming.current) {\n return scrollState\n }\n\n if (scrollDirection === 'up') {\n readyY.current = scrollTop\n scrollState.hideHeader = false\n }\n\n if (scrollDirection === 'down') {\n if (\n isCurrentNarrow &&\n scrollTop - readyY.current > HIDE_HEADER_THRESHOLD\n ) {\n scrollState.hideHeader = true\n }\n }\n\n if (isCurrentNarrow) {\n scrollState.toUseNarrow =\n scrollDirection === 'down' ? true : nextToUseNarrow\n } else {\n scrollState.toUseNarrow =\n scrollDirection === 'up' ? false : nextToUseNarrow\n }\n\n if (isCurrentNarrow !== scrollState.toUseNarrow) {\n if (!transformTimer.current) {\n isTransforming.current = true\n transformTimer.current = setTimeout(() => {\n isTransforming.current = false\n readyY.current = currentY.current\n transformTimer.current = null\n }, TRANSFORM_TIMEOUT)\n }\n }\n\n return scrollState\n },\n [toUseNarrow, hideHeader]\n )\n\n const updateScrollState = useCallback(\n (currentScrollTop: number) => {\n const scrollDirection =\n currentScrollTop > currentY.current ? 'down' : 'up'\n currentY.current = currentScrollTop\n const updateState = getScrollState(currentScrollTop, scrollDirection)\n setToUseNarrow(() => updateState.toUseNarrow)\n setHideHeader(() => updateState.hideHeader)\n },\n [getScrollState]\n )\n\n const handleScroll = useCallback(() => {\n lastKnownPageYOffset.current = window.pageYOffset\n if (!ticking.current) {\n window.requestAnimationFrame(() => {\n updateScrollState(lastKnownPageYOffset.current)\n ticking.current = false\n })\n ticking.current = true\n }\n }, [updateScrollState])\n\n useEffect(() => {\n window.addEventListener('scroll', handleScroll, { passive: true })\n return () => {\n window.removeEventListener('scroll', handleScroll)\n }\n }, [handleScroll])\n\n return (\n <HeaderContext\n value={{\n releaseBranch,\n isLinkExternal,\n isAuthed,\n theme,\n pathname,\n referrerPath,\n toUseNarrow,\n hideHeader,\n }}\n >\n <HamburgerContext value={hamburgerContext}>\n <header\n className={clsx(\n `w-full top-0 transition-transform duration-300 ${bgColor} ${ZIndex.header}`,\n theme === THEME.transparent ? 'fixed' : 'sticky',\n hideHeader ? 'ease-in' : 'ease-out',\n hideHeader ? '-translate-y-full' : 'translate-y-0'\n )}\n >\n <div\n className={clsx(\n `flex flex-col mx-auto px-[24px]`,\n 'tablet:px-[32px]',\n 'desktop:px-[48px]',\n 'hd:w-[1280px] hd:px-0'\n )}\n >\n <DesktopAndAbove\n topRowBgColor={topRowBgColor}\n logoType={logoType}\n />\n <TabletAndBelow topRowBgColor={topRowBgColor} logoType={logoType} />\n </div>\n </header>\n <div\n className={clsx(\n `fixed top-0 left-0 ${ZIndex.hamburger} transition-transform duration-300 ease-in-out`,\n isHamburgerMenuOpen\n ? 'translate-x-0 opacity-100'\n : '-translate-x-full opacity-100',\n 'tablet:-left-[320px]',\n isHamburgerMenuOpen\n ? 'tablet:translate-x-[320px] tablet:opacity-100'\n : 'tablet:-translate-x-[320px] tablet:opacity-100',\n 'desktop:-left-[280px]',\n isHamburgerMenuOpen\n ? 'desktop:translate-x-[280px] desktop:opacity-100'\n : 'desktop:-translate-x-[280px] desktop:opacity-100'\n )}\n >\n <HamburgerMenu />\n </div>\n <TabBar />\n </HamburgerContext>\n </HeaderContext>\n )\n}\n\nexport default Header\n"],"mappings":"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"}

package/lib/{heading-CFSkTbdH.mjs → heading-BSEtBLuY.mjs} RENAMED Viewed

@@ -1,4 +1,4 @@
-import { TYPE } from "./constants-BWFuBApI.mjs";
+import { TYPE } from "./constants-CBSEPx91.mjs";
 import React from "react";
 import clsx from "clsx";
@@ -34,4 +34,4 @@ const H6 = HeadingVariant("H6");
 //#endregion
 export { H1, H2, H3, H4, H5, H6 };
-//# sourceMappingURL=heading-CFSkTbdH.mjs.map
+//# sourceMappingURL=heading-BSEtBLuY.mjs.map

package/lib/{heading-CFSkTbdH.mjs.map → heading-BSEtBLuY.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"heading-~~CFSkTbdH~~.mjs","names":["Component: React.FC<HeadingProps> & { Type: typeof TYPE }"],"sources":["../src/text/heading.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\nimport { TYPE, type Type } from './constants'\n\ntype HeadingProps = React.HTMLAttributes<HTMLHeadingElement> & {\n text?: string\n type?: Type\n className?: string\n}\n\nconst baseClass = 'font-bold'\n\nconst variantClass = {\n H1: 'text-[28px] leading-[125%] tablet:text-[36px]',\n H2: 'text-[24px] leading-[125%] tablet:text-[32px]',\n H3: 'text-[22px] leading-[150%] tablet:text-[28px]',\n H4: 'text-[18px] leading-[150%] tablet:text-[22px]',\n H5: 'text-[17px] leading-[150%] tablet:text-[18px]',\n H6: 'text-[16px] leading-[150%] tablet:text-[16px]',\n}\n\nconst HeadingVariant = (variant: keyof typeof variantClass) => {\n const Component: React.FC<HeadingProps> & { Type: typeof TYPE } = ({\n text = '',\n type = TYPE.default,\n className = '',\n ...props\n }) => {\n const htmlTag = variant.toLowerCase() // 產生 'h1', 'h2', ...\n const fontFamily = type === TYPE.article ? 'font-title' : 'font-default'\n return React.createElement(\n htmlTag,\n {\n className: clsx(\n fontFamily,\n baseClass,\n variantClass[variant],\n className\n ),\n ...props,\n },\n text\n )\n }\n Component.displayName = variant\n Component.Type = TYPE\n return Component\n}\n\nconst H1 = HeadingVariant('H1')\nconst H2 = HeadingVariant('H2')\nconst H3 = HeadingVariant('H3')\nconst H4 = HeadingVariant('H4')\nconst H5 = HeadingVariant('H5')\nconst H6 = HeadingVariant('H6')\n\nexport { H1, H2, H3, H4, H5, H6 }\n"],"mappings":";;;;;AAUA,MAAM,YAAY;AAElB,MAAM,eAAe;CACnB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,MAAM,kBAAkB,YAAuC;CAC7D,MAAMA,aAA6D,EACjE,OAAO,IACP,OAAO,KAAK,SACZ,YAAY,GACZ,GAAG,YACC;EACJ,MAAM,UAAU,QAAQ,aAAa;EACrC,MAAM,aAAa,SAAS,KAAK,UAAU,eAAe;AAC1D,SAAO,MAAM,cACX,SACA;GACE,WAAW,KACT,YACA,WACA,aAAa,UACb,UACD;GACD,GAAG;GACJ,EACD,KACD;;AAEH,WAAU,cAAc;AACxB,WAAU,OAAO;AACjB,QAAO;;AAGT,MAAM,KAAK,eAAe,KAAK;AAC/B,MAAM,KAAK,eAAe,KAAK;AAC/B,MAAM,KAAK,eAAe,KAAK;AAC/B,MAAM,KAAK,eAAe,KAAK;AAC/B,MAAM,KAAK,eAAe,KAAK;AAC/B,MAAM,KAAK,eAAe,KAAK"}
1	+ {"version":3,"file":"heading-BSEtBLuY.mjs","names":["Component: React.FC<HeadingProps> & { Type: typeof TYPE }"],"sources":["../src/text/heading.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\nimport { TYPE, type Type } from './constants'\n\ntype HeadingProps = React.HTMLAttributes<HTMLHeadingElement> & {\n text?: string\n type?: Type\n className?: string\n}\n\nconst baseClass = 'font-bold'\n\nconst variantClass = {\n H1: 'text-[28px] leading-[125%] tablet:text-[36px]',\n H2: 'text-[24px] leading-[125%] tablet:text-[32px]',\n H3: 'text-[22px] leading-[150%] tablet:text-[28px]',\n H4: 'text-[18px] leading-[150%] tablet:text-[22px]',\n H5: 'text-[17px] leading-[150%] tablet:text-[18px]',\n H6: 'text-[16px] leading-[150%] tablet:text-[16px]',\n}\n\nconst HeadingVariant = (variant: keyof typeof variantClass) => {\n const Component: React.FC<HeadingProps> & { Type: typeof TYPE } = ({\n text = '',\n type = TYPE.default,\n className = '',\n ...props\n }) => {\n const htmlTag = variant.toLowerCase() // 產生 'h1', 'h2', ...\n const fontFamily = type === TYPE.article ? 'font-title' : 'font-default'\n return React.createElement(\n htmlTag,\n {\n className: clsx(\n fontFamily,\n baseClass,\n variantClass[variant],\n className\n ),\n ...props,\n },\n text\n )\n }\n Component.displayName = variant\n Component.Type = TYPE\n return Component\n}\n\nconst H1 = HeadingVariant('H1')\nconst H2 = HeadingVariant('H2')\nconst H3 = HeadingVariant('H3')\nconst H4 = HeadingVariant('H4')\nconst H5 = HeadingVariant('H5')\nconst H6 = HeadingVariant('H6')\n\nexport { H1, H2, H3, H4, H5, H6 }\n"],"mappings":";;;;;AAUA,MAAM,YAAY;AAElB,MAAM,eAAe;CACnB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,MAAM,kBAAkB,YAAuC;CAC7D,MAAMA,aAA6D,EACjE,OAAO,IACP,OAAO,KAAK,SACZ,YAAY,GACZ,GAAG,YACC;EACJ,MAAM,UAAU,QAAQ,aAAa;EACrC,MAAM,aAAa,SAAS,KAAK,UAAU,eAAe;AAC1D,SAAO,MAAM,cACX,SACA;GACE,WAAW,KACT,YACA,WACA,aAAa,UACb,UACD;GACD,GAAG;GACJ,EACD,KACD;;AAEH,WAAU,cAAc;AACxB,WAAU,OAAO;AACjB,QAAO;;AAGT,MAAM,KAAK,eAAe,KAAK;AAC/B,MAAM,KAAK,eAAe,KAAK;AAC/B,MAAM,KAAK,eAAe,KAAK;AAC/B,MAAM,KAAK,eAAe,KAAK;AAC/B,MAAM,KAAK,eAAe,KAAK;AAC/B,MAAM,KAAK,eAAe,KAAK"}

package/lib/{heading-DFzj2z0V.js → heading-CNS7rJIc.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 const require_chunk = require('./chunk-BxBTb9qk.js');
-const require_constants = require('./constants-K2ObjToq.js');
+const require_constants = require('./constants-Cndhv6qr.js');
 let react = require("react");
 react = require_chunk.__toESM(react);
 let clsx = require("clsx");
@@ -72,4 +72,4 @@ Object.defineProperty(exports, 'H6', {
     return H6;
   }
 });
-//# sourceMappingURL=heading-DFzj2z0V.js.map
+//# sourceMappingURL=heading-CNS7rJIc.js.map

package/lib/{heading-DFzj2z0V.js.map → heading-CNS7rJIc.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"heading-~~DFzj2z0V~~.js","names":["Component: React.FC<HeadingProps> & { Type: typeof TYPE }","TYPE","React"],"sources":["../src/text/heading.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\nimport { TYPE, type Type } from './constants'\n\ntype HeadingProps = React.HTMLAttributes<HTMLHeadingElement> & {\n text?: string\n type?: Type\n className?: string\n}\n\nconst baseClass = 'font-bold'\n\nconst variantClass = {\n H1: 'text-[28px] leading-[125%] tablet:text-[36px]',\n H2: 'text-[24px] leading-[125%] tablet:text-[32px]',\n H3: 'text-[22px] leading-[150%] tablet:text-[28px]',\n H4: 'text-[18px] leading-[150%] tablet:text-[22px]',\n H5: 'text-[17px] leading-[150%] tablet:text-[18px]',\n H6: 'text-[16px] leading-[150%] tablet:text-[16px]',\n}\n\nconst HeadingVariant = (variant: keyof typeof variantClass) => {\n const Component: React.FC<HeadingProps> & { Type: typeof TYPE } = ({\n text = '',\n type = TYPE.default,\n className = '',\n ...props\n }) => {\n const htmlTag = variant.toLowerCase() // 產生 'h1', 'h2', ...\n const fontFamily = type === TYPE.article ? 'font-title' : 'font-default'\n return React.createElement(\n htmlTag,\n {\n className: clsx(\n fontFamily,\n baseClass,\n variantClass[variant],\n className\n ),\n ...props,\n },\n text\n )\n }\n Component.displayName = variant\n Component.Type = TYPE\n return Component\n}\n\nconst H1 = HeadingVariant('H1')\nconst H2 = HeadingVariant('H2')\nconst H3 = HeadingVariant('H3')\nconst H4 = HeadingVariant('H4')\nconst H5 = HeadingVariant('H5')\nconst H6 = HeadingVariant('H6')\n\nexport { H1, H2, H3, H4, H5, H6 }\n"],"mappings":";;;;;;;;AAUA,MAAM,YAAY;AAElB,MAAM,eAAe;CACnB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,MAAM,kBAAkB,YAAuC;CAC7D,MAAMA,aAA6D,EACjE,OAAO,IACP,OAAOC,uBAAK,SACZ,YAAY,GACZ,GAAG,YACC;EACJ,MAAM,UAAU,QAAQ,aAAa;EACrC,MAAM,aAAa,SAASA,uBAAK,UAAU,eAAe;AAC1D,SAAOC,cAAM,cACX,SACA;GACE,6BACE,YACA,WACA,aAAa,UACb,UACD;GACD,GAAG;GACJ,EACD,KACD;;AAEH,WAAU,cAAc;AACxB,WAAU,OAAOD;AACjB,QAAO;;AAGT,MAAM,KAAK,eAAe,KAAK;AAC/B,MAAM,KAAK,eAAe,KAAK;AAC/B,MAAM,KAAK,eAAe,KAAK;AAC/B,MAAM,KAAK,eAAe,KAAK;AAC/B,MAAM,KAAK,eAAe,KAAK;AAC/B,MAAM,KAAK,eAAe,KAAK"}
1	+ {"version":3,"file":"heading-CNS7rJIc.js","names":["Component: React.FC<HeadingProps> & { Type: typeof TYPE }","TYPE","React"],"sources":["../src/text/heading.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\nimport { TYPE, type Type } from './constants'\n\ntype HeadingProps = React.HTMLAttributes<HTMLHeadingElement> & {\n text?: string\n type?: Type\n className?: string\n}\n\nconst baseClass = 'font-bold'\n\nconst variantClass = {\n H1: 'text-[28px] leading-[125%] tablet:text-[36px]',\n H2: 'text-[24px] leading-[125%] tablet:text-[32px]',\n H3: 'text-[22px] leading-[150%] tablet:text-[28px]',\n H4: 'text-[18px] leading-[150%] tablet:text-[22px]',\n H5: 'text-[17px] leading-[150%] tablet:text-[18px]',\n H6: 'text-[16px] leading-[150%] tablet:text-[16px]',\n}\n\nconst HeadingVariant = (variant: keyof typeof variantClass) => {\n const Component: React.FC<HeadingProps> & { Type: typeof TYPE } = ({\n text = '',\n type = TYPE.default,\n className = '',\n ...props\n }) => {\n const htmlTag = variant.toLowerCase() // 產生 'h1', 'h2', ...\n const fontFamily = type === TYPE.article ? 'font-title' : 'font-default'\n return React.createElement(\n htmlTag,\n {\n className: clsx(\n fontFamily,\n baseClass,\n variantClass[variant],\n className\n ),\n ...props,\n },\n text\n )\n }\n Component.displayName = variant\n Component.Type = TYPE\n return Component\n}\n\nconst H1 = HeadingVariant('H1')\nconst H2 = HeadingVariant('H2')\nconst H3 = HeadingVariant('H3')\nconst H4 = HeadingVariant('H4')\nconst H5 = HeadingVariant('H5')\nconst H6 = HeadingVariant('H6')\n\nexport { H1, H2, H3, H4, H5, H6 }\n"],"mappings":";;;;;;;;AAUA,MAAM,YAAY;AAElB,MAAM,eAAe;CACnB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,MAAM,kBAAkB,YAAuC;CAC7D,MAAMA,aAA6D,EACjE,OAAO,IACP,OAAOC,uBAAK,SACZ,YAAY,GACZ,GAAG,YACC;EACJ,MAAM,UAAU,QAAQ,aAAa;EACrC,MAAM,aAAa,SAASA,uBAAK,UAAU,eAAe;AAC1D,SAAOC,cAAM,cACX,SACA;GACE,6BACE,YACA,WACA,aAAa,UACb,UACD;GACD,GAAG;GACJ,EACD,KACD;;AAEH,WAAU,cAAc;AACxB,WAAU,OAAOD;AACjB,QAAO;;AAGT,MAAM,KAAK,eAAe,KAAK;AAC/B,MAAM,KAAK,eAAe,KAAK;AAC/B,MAAM,KAAK,eAAe,KAAK;AAC/B,MAAM,KAAK,eAAe,KAAK;AAC/B,MAAM,KAAK,eAAe,KAAK;AAC/B,MAAM,KAAK,eAAe,KAAK"}

package/lib/icons/constants.d.mts CHANGED Viewed

@@ -1,3 +1,3 @@
-import "../index-BmIgLA0K.mjs";
-import { ARROW_DIRECTION, ArrowDirection, ICON_TYPE, IconType, MEDIA_TYPE, MediaType } from "../constants-C9Ev_zet.mjs";
+import "../index-CYb6xr3M.mjs";
+import { ARROW_DIRECTION, ArrowDirection, ICON_TYPE, IconType, MEDIA_TYPE, MediaType } from "../constants-CVmr4VOP.mjs";
 export { ARROW_DIRECTION, ArrowDirection, ICON_TYPE, IconType, MEDIA_TYPE, MediaType };

package/lib/icons/constants.js CHANGED Viewed

@@ -1,4 +1,4 @@
-const require_constants = require('../constants-BxxTZn8I.js');
+const require_constants = require('../constants-D8wNUvoZ.js');
 exports.ARROW_DIRECTION = require_constants.ARROW_DIRECTION;
 exports.ICON_TYPE = require_constants.ICON_TYPE;

package/lib/icons/constants.mjs CHANGED Viewed

@@ -1,3 +1,3 @@
-import { ARROW_DIRECTION, ICON_TYPE, MEDIA_TYPE } from "../constants-CeM93YWF.mjs";
+import { ARROW_DIRECTION, ICON_TYPE, MEDIA_TYPE } from "../constants-5phfWHvb.mjs";
 export { ARROW_DIRECTION, ICON_TYPE, MEDIA_TYPE };

package/lib/icons/index.d.mts CHANGED Viewed

@@ -1,6 +1,6 @@
-import "../index-BmIgLA0K.mjs";
-import { RELEASE_BRANCH, ReleaseBranch } from "../release-branch-DZwlCiWD.mjs";
-import { ARROW_DIRECTION, ArrowDirection, ICON_TYPE, IconType, MEDIA_TYPE, MediaType } from "../constants-C9Ev_zet.mjs";
+import "../index-CYb6xr3M.mjs";
+import { RELEASE_BRANCH, ReleaseBranch } from "../release-branch-BqeBsvrl.mjs";
+import { ARROW_DIRECTION, ArrowDirection, ICON_TYPE, IconType, MEDIA_TYPE, MediaType } from "../constants-CVmr4VOP.mjs";
 import React from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";

package/lib/icons/index.js CHANGED Viewed

@@ -1,6 +1,6 @@
 require('../release-branch-CRZV4Ivz.js');
-require('../constants-BxxTZn8I.js');
-const require_icons = require('../icons-_Vt_HeKY.js');
+require('../constants-D8wNUvoZ.js');
+const require_icons = require('../icons-qP5oNB0W.js');
 exports.Arrow = require_icons.Arrow;
 exports.Clock = require_icons.Clock;

package/lib/icons/index.mjs CHANGED Viewed

@@ -1,5 +1,5 @@
 import "../release-branch-DNCD1uH_.mjs";
-import "../constants-CeM93YWF.mjs";
-import { Arrow, Clock, Cross, Hamburger, Home, Icon, KidStar, Member, Search, SocialMedia, Topic } from "../icons-DJMi42DI.mjs";
+import "../constants-5phfWHvb.mjs";
+import { Arrow, Clock, Cross, Hamburger, Home, Icon, KidStar, Member, Search, SocialMedia, Topic } from "../icons-I7T-auOQ.mjs";
 export { Arrow, Clock, Cross, Hamburger, Home, Icon, KidStar, Member, Search, SocialMedia, Topic };

package/lib/{icons-DJMi42DI.mjs → icons-I7T-auOQ.mjs} RENAMED Viewed

@@ -1,5 +1,5 @@
 import { RELEASE_BRANCH } from "./release-branch-DNCD1uH_.mjs";
-import { ARROW_DIRECTION, ICON_TYPE, MEDIA_TYPE } from "./constants-CeM93YWF.mjs";
+import { ARROW_DIRECTION, ICON_TYPE, MEDIA_TYPE } from "./constants-5phfWHvb.mjs";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
@@ -57,4 +57,4 @@ SocialMedia.MediaType = MEDIA_TYPE;
 //#endregion
 export { Arrow, Clock, Cross, Hamburger, Home, Icon, KidStar, Member, Search, SocialMedia, Topic };
-//# sourceMappingURL=icons-DJMi42DI.mjs.map
+//# sourceMappingURL=icons-I7T-auOQ.mjs.map

package/lib/{icons-DJMi42DI.mjs.map → icons-I7T-auOQ.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"icons-~~DJMi42DI~~.mjs","names":["Icon: React.FC<IconProps> & {\n Type: typeof ICON_TYPE\n ReleaseBranch: typeof RELEASE_BRANCH\n}","Arrow: React.FC<{\n direction?: ArrowDirection\n releaseBranch: ReleaseBranch\n}> & {\n Direction: typeof ARROW_DIRECTION\n}","SocialMedia: React.FC<SocialMediaProps> & {\n Type: typeof ICON_TYPE\n MediaType: typeof MEDIA_TYPE\n}"],"sources":["../src/icons/index.tsx"],"sourcesContent":["import type React from 'react'\nimport clsx from 'clsx'\n\nimport { RELEASE_BRANCH, type ReleaseBranch } from '../constants/release-branch'\nimport {\n ICON_TYPE,\n type IconType,\n ARROW_DIRECTION,\n type ArrowDirection,\n MEDIA_TYPE,\n type MediaType,\n} from './constants'\n\nconst baseGCSDir = 'https://www.twreporter.org/assets/icon/'\n\ntype IconProps = {\n type?: IconType\n filename: string\n releaseBranch?: ReleaseBranch\n className?: string\n}\nexport const Icon: React.FC<IconProps> & {\n Type: typeof ICON_TYPE\n ReleaseBranch: typeof RELEASE_BRANCH\n} = ({\n type = ICON_TYPE.mask,\n filename,\n releaseBranch = RELEASE_BRANCH.master,\n className = '',\n}) => {\n const src = `${baseGCSDir}${releaseBranch}/${filename}.svg`\n\n if (type === ICON_TYPE.raw) {\n return (\n // biome-ignore lint/performance/noImgElement: use next image later\n <img\n src={src}\n alt={filename}\n className={clsx('h-[24px] w-[24px]', className)}\n />\n )\n }\n\n return (\n <svg\n className={clsx('h-[24px] w-[24px] bg-gray-black mask-cover', className)}\n // tailwindcss seems not support dynamic values in mask-image\n style={{ maskImage: `url(${src})`, WebkitMaskImage: `url(${src})` }}\n />\n )\n}\n\nIcon.Type = ICON_TYPE\nIcon.ReleaseBranch = RELEASE_BRANCH\n\nconst getIcon = (gcsFileName: string, releaseBranch: ReleaseBranch) => {\n return (\n <Icon\n filename={gcsFileName}\n releaseBranch={releaseBranch}\n type={ICON_TYPE.mask}\n />\n )\n}\n\nexport const Hamburger = (releaseBranch: ReleaseBranch) =>\n getIcon('hamburger', releaseBranch)\nexport const Search = (releaseBranch: ReleaseBranch) =>\n getIcon('search', releaseBranch)\nexport const KidStar = (releaseBranch: ReleaseBranch) =>\n getIcon('kid_star', releaseBranch)\nexport const Member = (releaseBranch: ReleaseBranch) =>\n getIcon('member', releaseBranch)\nexport const Cross = (releaseBranch: ReleaseBranch) =>\n getIcon('cross', releaseBranch)\nexport const Home = (releaseBranch: ReleaseBranch) =>\n getIcon('home', releaseBranch)\nexport const Topic = (releaseBranch: ReleaseBranch) =>\n getIcon('topic', releaseBranch)\nexport const Clock = (releaseBranch: ReleaseBranch) =>\n getIcon('clock', releaseBranch)\n\nexport const Arrow: React.FC<{\n direction?: ArrowDirection\n releaseBranch: ReleaseBranch\n}> & {\n Direction: typeof ARROW_DIRECTION\n} = ({ direction = ARROW_DIRECTION.right, releaseBranch }) => {\n const filename = `arrow_${direction}`\n return <Icon filename={filename} releaseBranch={releaseBranch} />\n}\nArrow.Direction = ARROW_DIRECTION\n\ntype SocialMediaProps = {\n type?: IconType\n mediaType: MediaType\n releaseBranch: ReleaseBranch\n}\nexport const SocialMedia: React.FC<SocialMediaProps> & {\n Type: typeof ICON_TYPE\n MediaType: typeof MEDIA_TYPE\n} = ({\n type = Icon.Type.mask,\n mediaType = MEDIA_TYPE.google,\n releaseBranch = Icon.ReleaseBranch.master,\n}) => {\n return <Icon filename={mediaType} type={type} releaseBranch={releaseBranch} />\n}\nSocialMedia.Type = ICON_TYPE\nSocialMedia.MediaType = MEDIA_TYPE\n"],"mappings":";;;;;;AAaA,MAAM,aAAa;AAQnB,MAAaA,QAGR,EACH,OAAO,UAAU,MACjB,UACA,gBAAgB,eAAe,QAC/B,YAAY,SACR;CACJ,MAAM,MAAM,GAAG,aAAa,cAAc,GAAG,SAAS;AAEtD,KAAI,SAAS,UAAU,IACrB,QAEE,oBAAC;EACM;EACL,KAAK;EACL,WAAW,KAAK,qBAAqB,UAAU;GAC/C;AAIN,QACE,oBAAC;EACC,WAAW,KAAK,8CAA8C,UAAU;EAExE,OAAO;GAAE,WAAW,OAAO,IAAI;GAAI,iBAAiB,OAAO,IAAI;GAAI;GACnE;;AAIN,KAAK,OAAO;AACZ,KAAK,gBAAgB;AAErB,MAAM,WAAW,aAAqB,kBAAiC;AACrE,QACE,oBAAC;EACC,UAAU;EACK;EACf,MAAM,UAAU;GAChB;;AAIN,MAAa,aAAa,kBACxB,QAAQ,aAAa,cAAc;AACrC,MAAa,UAAU,kBACrB,QAAQ,UAAU,cAAc;AAClC,MAAa,WAAW,kBACtB,QAAQ,YAAY,cAAc;AACpC,MAAa,UAAU,kBACrB,QAAQ,UAAU,cAAc;AAClC,MAAa,SAAS,kBACpB,QAAQ,SAAS,cAAc;AACjC,MAAa,QAAQ,kBACnB,QAAQ,QAAQ,cAAc;AAChC,MAAa,SAAS,kBACpB,QAAQ,SAAS,cAAc;AACjC,MAAa,SAAS,kBACpB,QAAQ,SAAS,cAAc;AAEjC,MAAaC,SAKR,EAAE,YAAY,gBAAgB,OAAO,oBAAoB;CAC5D,MAAM,WAAW,SAAS;AAC1B,QAAO,oBAAC;EAAe;EAAyB;GAAiB;;AAEnE,MAAM,YAAY;AAOlB,MAAaC,eAGR,EACH,OAAO,KAAK,KAAK,MACjB,YAAY,WAAW,QACvB,gBAAgB,KAAK,cAAc,aAC/B;AACJ,QAAO,oBAAC;EAAK,UAAU;EAAiB;EAAqB;GAAiB;;AAEhF,YAAY,OAAO;AACnB,YAAY,YAAY"}
1	+ {"version":3,"file":"icons-I7T-auOQ.mjs","names":["Icon: React.FC<IconProps> & {\n Type: typeof ICON_TYPE\n ReleaseBranch: typeof RELEASE_BRANCH\n}","Arrow: React.FC<{\n direction?: ArrowDirection\n releaseBranch: ReleaseBranch\n}> & {\n Direction: typeof ARROW_DIRECTION\n}","SocialMedia: React.FC<SocialMediaProps> & {\n Type: typeof ICON_TYPE\n MediaType: typeof MEDIA_TYPE\n}"],"sources":["../src/icons/index.tsx"],"sourcesContent":["import type React from 'react'\nimport clsx from 'clsx'\n\nimport { RELEASE_BRANCH, type ReleaseBranch } from '../constants/release-branch'\nimport {\n ICON_TYPE,\n type IconType,\n ARROW_DIRECTION,\n type ArrowDirection,\n MEDIA_TYPE,\n type MediaType,\n} from './constants'\n\nconst baseGCSDir = 'https://www.twreporter.org/assets/icon/'\n\ntype IconProps = {\n type?: IconType\n filename: string\n releaseBranch?: ReleaseBranch\n className?: string\n}\nexport const Icon: React.FC<IconProps> & {\n Type: typeof ICON_TYPE\n ReleaseBranch: typeof RELEASE_BRANCH\n} = ({\n type = ICON_TYPE.mask,\n filename,\n releaseBranch = RELEASE_BRANCH.master,\n className = '',\n}) => {\n const src = `${baseGCSDir}${releaseBranch}/${filename}.svg`\n\n if (type === ICON_TYPE.raw) {\n return (\n // biome-ignore lint/performance/noImgElement: use next image later\n <img\n src={src}\n alt={filename}\n className={clsx('h-[24px] w-[24px]', className)}\n />\n )\n }\n\n return (\n <svg\n className={clsx('h-[24px] w-[24px] bg-gray-black mask-cover', className)}\n // tailwindcss seems not support dynamic values in mask-image\n style={{ maskImage: `url(${src})`, WebkitMaskImage: `url(${src})` }}\n />\n )\n}\n\nIcon.Type = ICON_TYPE\nIcon.ReleaseBranch = RELEASE_BRANCH\n\nconst getIcon = (gcsFileName: string, releaseBranch: ReleaseBranch) => {\n return (\n <Icon\n filename={gcsFileName}\n releaseBranch={releaseBranch}\n type={ICON_TYPE.mask}\n />\n )\n}\n\nexport const Hamburger = (releaseBranch: ReleaseBranch) =>\n getIcon('hamburger', releaseBranch)\nexport const Search = (releaseBranch: ReleaseBranch) =>\n getIcon('search', releaseBranch)\nexport const KidStar = (releaseBranch: ReleaseBranch) =>\n getIcon('kid_star', releaseBranch)\nexport const Member = (releaseBranch: ReleaseBranch) =>\n getIcon('member', releaseBranch)\nexport const Cross = (releaseBranch: ReleaseBranch) =>\n getIcon('cross', releaseBranch)\nexport const Home = (releaseBranch: ReleaseBranch) =>\n getIcon('home', releaseBranch)\nexport const Topic = (releaseBranch: ReleaseBranch) =>\n getIcon('topic', releaseBranch)\nexport const Clock = (releaseBranch: ReleaseBranch) =>\n getIcon('clock', releaseBranch)\n\nexport const Arrow: React.FC<{\n direction?: ArrowDirection\n releaseBranch: ReleaseBranch\n}> & {\n Direction: typeof ARROW_DIRECTION\n} = ({ direction = ARROW_DIRECTION.right, releaseBranch }) => {\n const filename = `arrow_${direction}`\n return <Icon filename={filename} releaseBranch={releaseBranch} />\n}\nArrow.Direction = ARROW_DIRECTION\n\ntype SocialMediaProps = {\n type?: IconType\n mediaType: MediaType\n releaseBranch: ReleaseBranch\n}\nexport const SocialMedia: React.FC<SocialMediaProps> & {\n Type: typeof ICON_TYPE\n MediaType: typeof MEDIA_TYPE\n} = ({\n type = Icon.Type.mask,\n mediaType = MEDIA_TYPE.google,\n releaseBranch = Icon.ReleaseBranch.master,\n}) => {\n return <Icon filename={mediaType} type={type} releaseBranch={releaseBranch} />\n}\nSocialMedia.Type = ICON_TYPE\nSocialMedia.MediaType = MEDIA_TYPE\n"],"mappings":";;;;;;AAaA,MAAM,aAAa;AAQnB,MAAaA,QAGR,EACH,OAAO,UAAU,MACjB,UACA,gBAAgB,eAAe,QAC/B,YAAY,SACR;CACJ,MAAM,MAAM,GAAG,aAAa,cAAc,GAAG,SAAS;AAEtD,KAAI,SAAS,UAAU,IACrB,QAEE,oBAAC;EACM;EACL,KAAK;EACL,WAAW,KAAK,qBAAqB,UAAU;GAC/C;AAIN,QACE,oBAAC;EACC,WAAW,KAAK,8CAA8C,UAAU;EAExE,OAAO;GAAE,WAAW,OAAO,IAAI;GAAI,iBAAiB,OAAO,IAAI;GAAI;GACnE;;AAIN,KAAK,OAAO;AACZ,KAAK,gBAAgB;AAErB,MAAM,WAAW,aAAqB,kBAAiC;AACrE,QACE,oBAAC;EACC,UAAU;EACK;EACf,MAAM,UAAU;GAChB;;AAIN,MAAa,aAAa,kBACxB,QAAQ,aAAa,cAAc;AACrC,MAAa,UAAU,kBACrB,QAAQ,UAAU,cAAc;AAClC,MAAa,WAAW,kBACtB,QAAQ,YAAY,cAAc;AACpC,MAAa,UAAU,kBACrB,QAAQ,UAAU,cAAc;AAClC,MAAa,SAAS,kBACpB,QAAQ,SAAS,cAAc;AACjC,MAAa,QAAQ,kBACnB,QAAQ,QAAQ,cAAc;AAChC,MAAa,SAAS,kBACpB,QAAQ,SAAS,cAAc;AACjC,MAAa,SAAS,kBACpB,QAAQ,SAAS,cAAc;AAEjC,MAAaC,SAKR,EAAE,YAAY,gBAAgB,OAAO,oBAAoB;CAC5D,MAAM,WAAW,SAAS;AAC1B,QAAO,oBAAC;EAAe;EAAyB;GAAiB;;AAEnE,MAAM,YAAY;AAOlB,MAAaC,eAGR,EACH,OAAO,KAAK,KAAK,MACjB,YAAY,WAAW,QACvB,gBAAgB,KAAK,cAAc,aAC/B;AACJ,QAAO,oBAAC;EAAK,UAAU;EAAiB;EAAqB;GAAiB;;AAEhF,YAAY,OAAO;AACnB,YAAY,YAAY"}

package/lib/{icons-_Vt_HeKY.js → icons-qP5oNB0W.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 const require_chunk = require('./chunk-BxBTb9qk.js');
 const require_release_branch = require('./release-branch-CRZV4Ivz.js');
-const require_constants = require('./constants-BxxTZn8I.js');
+const require_constants = require('./constants-D8wNUvoZ.js');
 let clsx = require("clsx");
 clsx = require_chunk.__toESM(clsx);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -125,4 +125,4 @@ Object.defineProperty(exports, 'Topic', {
     return Topic;
   }
 });
-//# sourceMappingURL=icons-_Vt_HeKY.js.map
+//# sourceMappingURL=icons-qP5oNB0W.js.map

package/lib/{icons-_Vt_HeKY.js.map → icons-qP5oNB0W.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"icons-~~_Vt_HeKY~~.js","names":["Icon: React.FC<IconProps> & {\n Type: typeof ICON_TYPE\n ReleaseBranch: typeof RELEASE_BRANCH\n}","ICON_TYPE","RELEASE_BRANCH","Arrow: React.FC<{\n direction?: ArrowDirection\n releaseBranch: ReleaseBranch\n}> & {\n Direction: typeof ARROW_DIRECTION\n}","ARROW_DIRECTION","SocialMedia: React.FC<SocialMediaProps> & {\n Type: typeof ICON_TYPE\n MediaType: typeof MEDIA_TYPE\n}","MEDIA_TYPE"],"sources":["../src/icons/index.tsx"],"sourcesContent":["import type React from 'react'\nimport clsx from 'clsx'\n\nimport { RELEASE_BRANCH, type ReleaseBranch } from '../constants/release-branch'\nimport {\n ICON_TYPE,\n type IconType,\n ARROW_DIRECTION,\n type ArrowDirection,\n MEDIA_TYPE,\n type MediaType,\n} from './constants'\n\nconst baseGCSDir = 'https://www.twreporter.org/assets/icon/'\n\ntype IconProps = {\n type?: IconType\n filename: string\n releaseBranch?: ReleaseBranch\n className?: string\n}\nexport const Icon: React.FC<IconProps> & {\n Type: typeof ICON_TYPE\n ReleaseBranch: typeof RELEASE_BRANCH\n} = ({\n type = ICON_TYPE.mask,\n filename,\n releaseBranch = RELEASE_BRANCH.master,\n className = '',\n}) => {\n const src = `${baseGCSDir}${releaseBranch}/${filename}.svg`\n\n if (type === ICON_TYPE.raw) {\n return (\n // biome-ignore lint/performance/noImgElement: use next image later\n <img\n src={src}\n alt={filename}\n className={clsx('h-[24px] w-[24px]', className)}\n />\n )\n }\n\n return (\n <svg\n className={clsx('h-[24px] w-[24px] bg-gray-black mask-cover', className)}\n // tailwindcss seems not support dynamic values in mask-image\n style={{ maskImage: `url(${src})`, WebkitMaskImage: `url(${src})` }}\n />\n )\n}\n\nIcon.Type = ICON_TYPE\nIcon.ReleaseBranch = RELEASE_BRANCH\n\nconst getIcon = (gcsFileName: string, releaseBranch: ReleaseBranch) => {\n return (\n <Icon\n filename={gcsFileName}\n releaseBranch={releaseBranch}\n type={ICON_TYPE.mask}\n />\n )\n}\n\nexport const Hamburger = (releaseBranch: ReleaseBranch) =>\n getIcon('hamburger', releaseBranch)\nexport const Search = (releaseBranch: ReleaseBranch) =>\n getIcon('search', releaseBranch)\nexport const KidStar = (releaseBranch: ReleaseBranch) =>\n getIcon('kid_star', releaseBranch)\nexport const Member = (releaseBranch: ReleaseBranch) =>\n getIcon('member', releaseBranch)\nexport const Cross = (releaseBranch: ReleaseBranch) =>\n getIcon('cross', releaseBranch)\nexport const Home = (releaseBranch: ReleaseBranch) =>\n getIcon('home', releaseBranch)\nexport const Topic = (releaseBranch: ReleaseBranch) =>\n getIcon('topic', releaseBranch)\nexport const Clock = (releaseBranch: ReleaseBranch) =>\n getIcon('clock', releaseBranch)\n\nexport const Arrow: React.FC<{\n direction?: ArrowDirection\n releaseBranch: ReleaseBranch\n}> & {\n Direction: typeof ARROW_DIRECTION\n} = ({ direction = ARROW_DIRECTION.right, releaseBranch }) => {\n const filename = `arrow_${direction}`\n return <Icon filename={filename} releaseBranch={releaseBranch} />\n}\nArrow.Direction = ARROW_DIRECTION\n\ntype SocialMediaProps = {\n type?: IconType\n mediaType: MediaType\n releaseBranch: ReleaseBranch\n}\nexport const SocialMedia: React.FC<SocialMediaProps> & {\n Type: typeof ICON_TYPE\n MediaType: typeof MEDIA_TYPE\n} = ({\n type = Icon.Type.mask,\n mediaType = MEDIA_TYPE.google,\n releaseBranch = Icon.ReleaseBranch.master,\n}) => {\n return <Icon filename={mediaType} type={type} releaseBranch={releaseBranch} />\n}\nSocialMedia.Type = ICON_TYPE\nSocialMedia.MediaType = MEDIA_TYPE\n"],"mappings":";;;;;;;;;AAaA,MAAM,aAAa;AAQnB,MAAaA,QAGR,EACH,OAAOC,4BAAU,MACjB,UACA,gBAAgBC,sCAAe,QAC/B,YAAY,SACR;CACJ,MAAM,MAAM,GAAG,aAAa,cAAc,GAAG,SAAS;AAEtD,KAAI,SAASD,4BAAU,IACrB,QAEE,2CAAC;EACM;EACL,KAAK;EACL,6BAAgB,qBAAqB,UAAU;GAC/C;AAIN,QACE,2CAAC;EACC,6BAAgB,8CAA8C,UAAU;EAExE,OAAO;GAAE,WAAW,OAAO,IAAI;GAAI,iBAAiB,OAAO,IAAI;GAAI;GACnE;;AAIN,KAAK,OAAOA;AACZ,KAAK,gBAAgBC;AAErB,MAAM,WAAW,aAAqB,kBAAiC;AACrE,QACE,2CAAC;EACC,UAAU;EACK;EACf,MAAMD,4BAAU;GAChB;;AAIN,MAAa,aAAa,kBACxB,QAAQ,aAAa,cAAc;AACrC,MAAa,UAAU,kBACrB,QAAQ,UAAU,cAAc;AAClC,MAAa,WAAW,kBACtB,QAAQ,YAAY,cAAc;AACpC,MAAa,UAAU,kBACrB,QAAQ,UAAU,cAAc;AAClC,MAAa,SAAS,kBACpB,QAAQ,SAAS,cAAc;AACjC,MAAa,QAAQ,kBACnB,QAAQ,QAAQ,cAAc;AAChC,MAAa,SAAS,kBACpB,QAAQ,SAAS,cAAc;AACjC,MAAa,SAAS,kBACpB,QAAQ,SAAS,cAAc;AAEjC,MAAaE,SAKR,EAAE,YAAYC,kCAAgB,OAAO,oBAAoB;CAC5D,MAAM,WAAW,SAAS;AAC1B,QAAO,2CAAC;EAAe;EAAyB;GAAiB;;AAEnE,MAAM,YAAYA;AAOlB,MAAaC,eAGR,EACH,OAAO,KAAK,KAAK,MACjB,YAAYC,6BAAW,QACvB,gBAAgB,KAAK,cAAc,aAC/B;AACJ,QAAO,2CAAC;EAAK,UAAU;EAAiB;EAAqB;GAAiB;;AAEhF,YAAY,OAAOL;AACnB,YAAY,YAAYK"}
1	+ {"version":3,"file":"icons-qP5oNB0W.js","names":["Icon: React.FC<IconProps> & {\n Type: typeof ICON_TYPE\n ReleaseBranch: typeof RELEASE_BRANCH\n}","ICON_TYPE","RELEASE_BRANCH","Arrow: React.FC<{\n direction?: ArrowDirection\n releaseBranch: ReleaseBranch\n}> & {\n Direction: typeof ARROW_DIRECTION\n}","ARROW_DIRECTION","SocialMedia: React.FC<SocialMediaProps> & {\n Type: typeof ICON_TYPE\n MediaType: typeof MEDIA_TYPE\n}","MEDIA_TYPE"],"sources":["../src/icons/index.tsx"],"sourcesContent":["import type React from 'react'\nimport clsx from 'clsx'\n\nimport { RELEASE_BRANCH, type ReleaseBranch } from '../constants/release-branch'\nimport {\n ICON_TYPE,\n type IconType,\n ARROW_DIRECTION,\n type ArrowDirection,\n MEDIA_TYPE,\n type MediaType,\n} from './constants'\n\nconst baseGCSDir = 'https://www.twreporter.org/assets/icon/'\n\ntype IconProps = {\n type?: IconType\n filename: string\n releaseBranch?: ReleaseBranch\n className?: string\n}\nexport const Icon: React.FC<IconProps> & {\n Type: typeof ICON_TYPE\n ReleaseBranch: typeof RELEASE_BRANCH\n} = ({\n type = ICON_TYPE.mask,\n filename,\n releaseBranch = RELEASE_BRANCH.master,\n className = '',\n}) => {\n const src = `${baseGCSDir}${releaseBranch}/${filename}.svg`\n\n if (type === ICON_TYPE.raw) {\n return (\n // biome-ignore lint/performance/noImgElement: use next image later\n <img\n src={src}\n alt={filename}\n className={clsx('h-[24px] w-[24px]', className)}\n />\n )\n }\n\n return (\n <svg\n className={clsx('h-[24px] w-[24px] bg-gray-black mask-cover', className)}\n // tailwindcss seems not support dynamic values in mask-image\n style={{ maskImage: `url(${src})`, WebkitMaskImage: `url(${src})` }}\n />\n )\n}\n\nIcon.Type = ICON_TYPE\nIcon.ReleaseBranch = RELEASE_BRANCH\n\nconst getIcon = (gcsFileName: string, releaseBranch: ReleaseBranch) => {\n return (\n <Icon\n filename={gcsFileName}\n releaseBranch={releaseBranch}\n type={ICON_TYPE.mask}\n />\n )\n}\n\nexport const Hamburger = (releaseBranch: ReleaseBranch) =>\n getIcon('hamburger', releaseBranch)\nexport const Search = (releaseBranch: ReleaseBranch) =>\n getIcon('search', releaseBranch)\nexport const KidStar = (releaseBranch: ReleaseBranch) =>\n getIcon('kid_star', releaseBranch)\nexport const Member = (releaseBranch: ReleaseBranch) =>\n getIcon('member', releaseBranch)\nexport const Cross = (releaseBranch: ReleaseBranch) =>\n getIcon('cross', releaseBranch)\nexport const Home = (releaseBranch: ReleaseBranch) =>\n getIcon('home', releaseBranch)\nexport const Topic = (releaseBranch: ReleaseBranch) =>\n getIcon('topic', releaseBranch)\nexport const Clock = (releaseBranch: ReleaseBranch) =>\n getIcon('clock', releaseBranch)\n\nexport const Arrow: React.FC<{\n direction?: ArrowDirection\n releaseBranch: ReleaseBranch\n}> & {\n Direction: typeof ARROW_DIRECTION\n} = ({ direction = ARROW_DIRECTION.right, releaseBranch }) => {\n const filename = `arrow_${direction}`\n return <Icon filename={filename} releaseBranch={releaseBranch} />\n}\nArrow.Direction = ARROW_DIRECTION\n\ntype SocialMediaProps = {\n type?: IconType\n mediaType: MediaType\n releaseBranch: ReleaseBranch\n}\nexport const SocialMedia: React.FC<SocialMediaProps> & {\n Type: typeof ICON_TYPE\n MediaType: typeof MEDIA_TYPE\n} = ({\n type = Icon.Type.mask,\n mediaType = MEDIA_TYPE.google,\n releaseBranch = Icon.ReleaseBranch.master,\n}) => {\n return <Icon filename={mediaType} type={type} releaseBranch={releaseBranch} />\n}\nSocialMedia.Type = ICON_TYPE\nSocialMedia.MediaType = MEDIA_TYPE\n"],"mappings":";;;;;;;;;AAaA,MAAM,aAAa;AAQnB,MAAaA,QAGR,EACH,OAAOC,4BAAU,MACjB,UACA,gBAAgBC,sCAAe,QAC/B,YAAY,SACR;CACJ,MAAM,MAAM,GAAG,aAAa,cAAc,GAAG,SAAS;AAEtD,KAAI,SAASD,4BAAU,IACrB,QAEE,2CAAC;EACM;EACL,KAAK;EACL,6BAAgB,qBAAqB,UAAU;GAC/C;AAIN,QACE,2CAAC;EACC,6BAAgB,8CAA8C,UAAU;EAExE,OAAO;GAAE,WAAW,OAAO,IAAI;GAAI,iBAAiB,OAAO,IAAI;GAAI;GACnE;;AAIN,KAAK,OAAOA;AACZ,KAAK,gBAAgBC;AAErB,MAAM,WAAW,aAAqB,kBAAiC;AACrE,QACE,2CAAC;EACC,UAAU;EACK;EACf,MAAMD,4BAAU;GAChB;;AAIN,MAAa,aAAa,kBACxB,QAAQ,aAAa,cAAc;AACrC,MAAa,UAAU,kBACrB,QAAQ,UAAU,cAAc;AAClC,MAAa,WAAW,kBACtB,QAAQ,YAAY,cAAc;AACpC,MAAa,UAAU,kBACrB,QAAQ,UAAU,cAAc;AAClC,MAAa,SAAS,kBACpB,QAAQ,SAAS,cAAc;AACjC,MAAa,QAAQ,kBACnB,QAAQ,QAAQ,cAAc;AAChC,MAAa,SAAS,kBACpB,QAAQ,SAAS,cAAc;AACjC,MAAa,SAAS,kBACpB,QAAQ,SAAS,cAAc;AAEjC,MAAaE,SAKR,EAAE,YAAYC,kCAAgB,OAAO,oBAAoB;CAC5D,MAAM,WAAW,SAAS;AAC1B,QAAO,2CAAC;EAAe;EAAyB;GAAiB;;AAEnE,MAAM,YAAYA;AAOlB,MAAaC,eAGR,EACH,OAAO,KAAK,KAAK,MACjB,YAAYC,6BAAW,QACvB,gBAAgB,KAAK,cAAc,aAC/B;AACJ,QAAO,2CAAC;EAAK,UAAU;EAAiB;EAAqB;GAAiB;;AAEhF,YAAY,OAAOL;AACnB,YAAY,YAAYK"}

package/lib/{index-BmIgLA0K.d.mts → index-CYb6xr3M.d.mts} RENAMED Viewed

@@ -2,4 +2,4 @@
 type ValuesOf<T> = T[keyof T];
 //#endregion
 export { ValuesOf };
-//# sourceMappingURL=index-BmIgLA0K.d.mts.map
+//# sourceMappingURL=index-CYb6xr3M.d.mts.map

package/lib/{internal-link-CqTu3Yi5.js → internal-link-BLXTBMRq.js} RENAMED Viewed

@@ -2275,4 +2275,4 @@ Object.defineProperty(exports, 'internal_link_default', {
     return internal_link_default;
   }
 });
-//# sourceMappingURL=internal-link-CqTu3Yi5.js.map
+//# sourceMappingURL=internal-link-BLXTBMRq.js.map