@twreporter/react-typescript-components 0.1.0-beta.8 → 0.1.0-beta.9

package/lib/header/index.js

@@ -7,18 +7,17 @@ const require_button = require('../button-CO0UXA6C.js');
 const require_external_links = require('../external-links-SfJjb48j.js');
 const require_internal_links = require('../internal-links-CBkMU8cY.js');
 const require_release_branch = require('../release-branch-CRZV4Ivz.js');
-const require_request_origins = require('../request-origins-BDXulkK9.js');
-require('../constants-BuIUKM2c.js');
-const require_divider = require('../divider-Db3AhImD.js');
-const require_external_link = require('../external-link-BMrkjNyi.js');
-const require_internal_link = require('../internal-link-BLXTBMRq.js');
-require('../customized-link-XNoMkeYw.js');
-const require_dropdown_menu = require('../dropdown-menu-CC0Yh31s.js');
-require('../constants-CuT1aTK4.js');
-const require_icons = require('../icons-bC_xV5mJ.js');
-const require_constants$4 = require('../constants-C2moxnps.js');
-const require_hamburger_menu = require('../hamburger-menu-BsIaOOoy.js');
-const require_logo = require('../logo-D5plc5jE.js');
+const require_external_link = require('../external-link-CEDvlQYo.js');
+const require_internal_link = require('../internal-link-CqTu3Yi5.js');
+require('../customized-link-CK7Xlgdt.js');
+require('../constants-DRyQ6AuU.js');
+const require_divider = require('../divider-b3Shh7FV.js');
+const require_dropdown_menu = require('../dropdown-menu-pmVRiPhM.js');
+require('../constants-DF_II8Fz.js');
+const require_icons = require('../icons-teg1h03Q.js');
+const require_constants$4 = require('../constants-2TRY2zTK.js');
+const require_hamburger_menu = require('../hamburger-menu-CMHvrA25.js');
+const require_logo = require('../logo-rQxaglyD.js');
 let react = require("react");
 react = require_chunk.__toESM(react);
 let clsx = require("clsx");
@@ -268,7 +267,7 @@ const Channel = () => {
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelItem, {
 					label: channel.label,
 					link: {
-						href: `${require_request_origins.forClientSideRendering[releaseBranch].main}/${channel.to}`,
+						href: channel.to,
 						target: channel.target
 					}
 				}, `channel-${channel.label}`);

package/lib/header/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Icons: FC<{\n  releaseBranch?: ReleaseBranch\n  theme?: Theme\n}>","RELEASE_BRANCH","THEME","HeaderContext","ExternalLink","InternalLink","IconButton","Search","INTERNAL_LINKS","KidStar","Member","THEME","LOGO_TYPE","TopRow: FC<TopRowProps>","HeaderContext","HamburgerContext","ExternalLink","InternalLink","IconButton","Hamburger","INTERNAL_LINKS","LogoHeader","HEADER_ACTION_LINKS","PillButton","CHANNELS: ChannelType[]","INTERNAL_LINKS","ChannelItem: FC<ChannelItemProps>","HeaderContext","ExternalLink","InternalLink","TextButton","HamburgerContext","IconButton","Hamburger","forClientSideRendering","Divider","DesktopAndAbove: FC<DesktopAndAboveProps>","HeaderContext","TopRow","Divider","CSSTransition","Channel","TabletAndBelow: FC<TabletAndBelowProps>","HeaderContext","ExternalLink","InternalLink","INTERNAL_LINKS","LogoHeader","EXTERNAL_LINKS","PillButton","TextButton","Header: FC<HeaderProps>","HeaderContext","HamburgerContext","THEME","DesktopAndAbove","TabletAndBelow","HamburgerMenu"],"sources":["../../src/header/constants/z-index.ts","../../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 ZIndex = {\n  tabBarMobile: 'z-10',\n  tabBarTablet: 'z-3',\n  hamburger: 'z-4',\n  header: 'z-3',\n  topRow: 'z-2',\n  channel: 'z-1',\n} as const\n","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-350' : '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\n            to={INTERNAL_LINKS.home}\n            className={clsx(\n              `transition-height ${ANIMATION.step3Duration}`,\n              toUseNarrow ? `${ANIMATION.step3Delay}` : 'delay-0'\n            )}\n          >\n            <LogoHeader\n              type={logoType}\n              releaseBranch={releaseBranch}\n              className={clsx(toUseNarrow ? 'h-[24px]' : 'h-[32px]')}\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'\nimport { forClientSideRendering } from '../../../constants/request-origins'\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: `${forClientSideRendering[releaseBranch].main}/${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-[24px]\">\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\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 ${ZIndex.hamburger} transition-transform duration-300 ease-in-out`,\n            isHamburgerMenuOpen ? 'opacity-100' : 'opacity-0',\n            'tablet:-left-[320px]',\n            isHamburgerMenuOpen\n              ? 'tablet:translate-x-[320px] tablet:opacity-100'\n              : 'tablet:translate-x-0 tablet:opacity-100',\n            'desktop:-left-[280px]',\n            isHamburgerMenuOpen\n              ? 'desktop:translate-x-[280px] desktop:opacity-100'\n              : 'desktop:translate-x-0 desktop:opacity-100'\n          )}\n        >\n          <HamburgerMenu />\n        </div>\n      </HamburgerContext>\n    </HeaderContext>\n  )\n}\n\nexport default Header\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["Icons: FC<{\n  releaseBranch?: ReleaseBranch\n  theme?: Theme\n}>","RELEASE_BRANCH","THEME","HeaderContext","ExternalLink","InternalLink","IconButton","Search","INTERNAL_LINKS","KidStar","Member","THEME","LOGO_TYPE","TopRow: FC<TopRowProps>","HeaderContext","HamburgerContext","ExternalLink","InternalLink","IconButton","Hamburger","INTERNAL_LINKS","LogoHeader","HEADER_ACTION_LINKS","PillButton","CHANNELS: ChannelType[]","INTERNAL_LINKS","ChannelItem: FC<ChannelItemProps>","HeaderContext","ExternalLink","InternalLink","TextButton","HamburgerContext","IconButton","Hamburger","Divider","DesktopAndAbove: FC<DesktopAndAboveProps>","HeaderContext","TopRow","Divider","CSSTransition","Channel","TabletAndBelow: FC<TabletAndBelowProps>","HeaderContext","ExternalLink","InternalLink","INTERNAL_LINKS","LogoHeader","EXTERNAL_LINKS","PillButton","TextButton","Header: FC<HeaderProps>","HeaderContext","HamburgerContext","THEME","DesktopAndAbove","TabletAndBelow","HamburgerMenu"],"sources":["../../src/header/constants/z-index.ts","../../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 ZIndex = {\n  tabBarMobile: 'z-10',\n  tabBarTablet: 'z-3',\n  hamburger: 'z-4',\n  header: 'z-3',\n  topRow: 'z-2',\n  channel: 'z-1',\n} as const\n","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-350' : '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\n            to={INTERNAL_LINKS.home}\n            className={clsx(\n              `transition-height ${ANIMATION.step3Duration}`,\n              toUseNarrow ? `${ANIMATION.step3Delay}` : 'delay-0'\n            )}\n          >\n            <LogoHeader\n              type={logoType}\n              releaseBranch={releaseBranch}\n              className={clsx(toUseNarrow ? 'h-[24px]' : 'h-[32px]')}\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-[24px]\">\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\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 ${ZIndex.hamburger} transition-transform duration-300 ease-in-out`,\n            isHamburgerMenuOpen ? 'opacity-100' : 'opacity-0',\n            'tablet:-left-[320px]',\n            isHamburgerMenuOpen\n              ? 'tablet:translate-x-[320px] tablet:opacity-100'\n              : 'tablet:translate-x-0 tablet:opacity-100',\n            'desktop:-left-[280px]',\n            isHamburgerMenuOpen\n              ? 'desktop:translate-x-[280px] desktop:opacity-100'\n              : 'desktop:translate-x-0 desktop:opacity-100'\n          )}\n        >\n          <HamburgerMenu />\n        </div>\n      </HamburgerContext>\n    </HeaderContext>\n  )\n}\n\nexport default Header\n"],"mappings":"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"}

package/lib/header/index.mjs

@@ -7,17 +7,16 @@ import { icon_button_default, pill_button_default, text_button_default } from ".
 import { EXTERNAL_LINKS } from "../external-links-2b4M_rcA.mjs";
 import { INTERNAL_LINKS } from "../internal-links-BF-974mA.mjs";
 import { RELEASE_BRANCH } from "../release-branch-DNCD1uH_.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 "../dropdown-menu-BWuoUGuB.mjs";
-import "../constants-CmCfyfPG.mjs";
-import { Hamburger, KidStar, Member, Search } from "../icons-Bs84WbEt.mjs";
-import { LOGO_TYPE } from "../constants-DRxdMM_X.mjs";
-import { HEADER_ACTION_LINKS, hamburger_menu_default } from "../hamburger-menu-CI3TOV9q.mjs";
-import { logo_header_default } from "../logo-B35TnPzd.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 "../dropdown-menu-Da9XSi5T.mjs";
+import "../constants-CQscYQcW.mjs";
+import { Hamburger, KidStar, Member, Search } from "../icons-CtVvOt3y.mjs";
+import { LOGO_TYPE } from "../constants-BqeEbkVD.mjs";
+import { HEADER_ACTION_LINKS, hamburger_menu_default } from "../hamburger-menu-UYqFVwiu.mjs";
+import { logo_header_default } from "../logo-CaawAABC.mjs";
 import { useCallback, useContext, useEffect, useRef, useState } from "react";
 import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -262,7 +261,7 @@ const Channel = () => {
 				return /* @__PURE__ */ jsx(ChannelItem, {
 					label: channel.label,
 					link: {
-						href: `${forClientSideRendering[releaseBranch].main}/${channel.to}`,
+						href: channel.to,
 						target: channel.target
 					}
 				}, `channel-${channel.label}`);

package/lib/header/index.mjs.map

@@ -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"],"sources":["../../src/header/constants/z-index.ts","../../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 ZIndex = {\n  tabBarMobile: 'z-10',\n  tabBarTablet: 'z-3',\n  hamburger: 'z-4',\n  header: 'z-3',\n  topRow: 'z-2',\n  channel: 'z-1',\n} as const\n","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-350' : '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\n            to={INTERNAL_LINKS.home}\n            className={clsx(\n              `transition-height ${ANIMATION.step3Duration}`,\n              toUseNarrow ? `${ANIMATION.step3Delay}` : 'delay-0'\n            )}\n          >\n            <LogoHeader\n              type={logoType}\n              releaseBranch={releaseBranch}\n              className={clsx(toUseNarrow ? 'h-[24px]' : 'h-[32px]')}\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'\nimport { forClientSideRendering } from '../../../constants/request-origins'\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: `${forClientSideRendering[releaseBranch].main}/${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-[24px]\">\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\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 ${ZIndex.hamburger} transition-transform duration-300 ease-in-out`,\n            isHamburgerMenuOpen ? 'opacity-100' : 'opacity-0',\n            'tablet:-left-[320px]',\n            isHamburgerMenuOpen\n              ? 'tablet:translate-x-[320px] tablet:opacity-100'\n              : 'tablet:translate-x-0 tablet:opacity-100',\n            'desktop:-left-[280px]',\n            isHamburgerMenuOpen\n              ? 'desktop:translate-x-[280px] desktop:opacity-100'\n              : 'desktop:translate-x-0 desktop:opacity-100'\n          )}\n        >\n          <HamburgerMenu />\n        </div>\n      </HamburgerContext>\n    </HeaderContext>\n  )\n}\n\nexport default Header\n"],"mappings":"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"}
+{"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"],"sources":["../../src/header/constants/z-index.ts","../../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 ZIndex = {\n  tabBarMobile: 'z-10',\n  tabBarTablet: 'z-3',\n  hamburger: 'z-4',\n  header: 'z-3',\n  topRow: 'z-2',\n  channel: 'z-1',\n} as const\n","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-350' : '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\n            to={INTERNAL_LINKS.home}\n            className={clsx(\n              `transition-height ${ANIMATION.step3Duration}`,\n              toUseNarrow ? `${ANIMATION.step3Delay}` : 'delay-0'\n            )}\n          >\n            <LogoHeader\n              type={logoType}\n              releaseBranch={releaseBranch}\n              className={clsx(toUseNarrow ? 'h-[24px]' : 'h-[32px]')}\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-[24px]\">\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\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 ${ZIndex.hamburger} transition-transform duration-300 ease-in-out`,\n            isHamburgerMenuOpen ? 'opacity-100' : 'opacity-0',\n            'tablet:-left-[320px]',\n            isHamburgerMenuOpen\n              ? 'tablet:translate-x-[320px] tablet:opacity-100'\n              : 'tablet:translate-x-0 tablet:opacity-100',\n            'desktop:-left-[280px]',\n            isHamburgerMenuOpen\n              ? 'desktop:translate-x-[280px] desktop:opacity-100'\n              : 'desktop:translate-x-0 desktop:opacity-100'\n          )}\n        >\n          <HamburgerMenu />\n        </div>\n      </HamburgerContext>\n    </HeaderContext>\n  )\n}\n\nexport default Header\n"],"mappings":"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"}

package/lib/{heading-B_pZSTvs.js → heading-CWQISn4r.js}

@@ -72,4 +72,4 @@ Object.defineProperty(exports, 'H6', {
     return H6;
   }
 });
-//# sourceMappingURL=heading-B_pZSTvs.js.map
+//# sourceMappingURL=heading-CWQISn4r.js.map

package/lib/{heading-B_pZSTvs.js.map → heading-CWQISn4r.js.map}

@@ -1 +1 @@
-{"version":3,"file":"heading-B_pZSTvs.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"}
+{"version":3,"file":"heading-CWQISn4r.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/{heading-DL8WhtCD.mjs → heading-Dt90Ed74.mjs}

@@ -34,4 +34,4 @@ const H6 = HeadingVariant("H6");
 
 //#endregion
 export { H1, H2, H3, H4, H5, H6 };
-//# sourceMappingURL=heading-DL8WhtCD.mjs.map
+//# sourceMappingURL=heading-Dt90Ed74.mjs.map

package/lib/{heading-DL8WhtCD.mjs.map → heading-Dt90Ed74.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"heading-DL8WhtCD.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"}
+{"version":3,"file":"heading-Dt90Ed74.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/icons/constants.d.mts

@@ -1,3 +1,3 @@
-import "../index-CgixcmUN.mjs";
-import { ARROW_DIRECTION, ArrowDirection, ICON_TYPE, IconType, MEDIA_TYPE, MediaType } from "../constants-Cnq4ruq6.mjs";
+import "../index-Ej3agYJF.mjs";
+import { ARROW_DIRECTION, ArrowDirection, ICON_TYPE, IconType, MEDIA_TYPE, MediaType } from "../constants-mrRqEvQT.mjs";
 export { ARROW_DIRECTION, ArrowDirection, ICON_TYPE, IconType, MEDIA_TYPE, MediaType };

package/lib/icons/constants.js

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

package/lib/icons/constants.mjs

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

package/lib/icons/index.d.mts

@@ -1,6 +1,6 @@
-import "../index-CgixcmUN.mjs";
-import { RELEASE_BRANCH, ReleaseBranch } from "../release-branch-BLAOXJu1.mjs";
-import { ARROW_DIRECTION, ArrowDirection, ICON_TYPE, IconType, MEDIA_TYPE, MediaType } from "../constants-Cnq4ruq6.mjs";
+import "../index-Ej3agYJF.mjs";
+import { RELEASE_BRANCH, ReleaseBranch } from "../release-branch-DIEpb2N0.mjs";
+import { ARROW_DIRECTION, ArrowDirection, ICON_TYPE, IconType, MEDIA_TYPE, MediaType } from "../constants-mrRqEvQT.mjs";
 import React from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 

package/lib/icons/index.js

@@ -1,6 +1,6 @@
 require('../release-branch-CRZV4Ivz.js');
-require('../constants-CuT1aTK4.js');
-const require_icons = require('../icons-bC_xV5mJ.js');
+require('../constants-DF_II8Fz.js');
+const require_icons = require('../icons-teg1h03Q.js');
 
 exports.Arrow = require_icons.Arrow;
 exports.Cross = require_icons.Cross;

package/lib/icons/index.mjs

@@ -1,5 +1,5 @@
 import "../release-branch-DNCD1uH_.mjs";
-import "../constants-CmCfyfPG.mjs";
-import { Arrow, Cross, Hamburger, Icon, KidStar, Member, Search, SocialMedia } from "../icons-Bs84WbEt.mjs";
+import "../constants-CQscYQcW.mjs";
+import { Arrow, Cross, Hamburger, Icon, KidStar, Member, Search, SocialMedia } from "../icons-CtVvOt3y.mjs";
 
 export { Arrow, Cross, Hamburger, Icon, KidStar, Member, Search, SocialMedia };

package/lib/{icons-Bs84WbEt.mjs → icons-CtVvOt3y.mjs}

@@ -1,5 +1,5 @@
 import { RELEASE_BRANCH } from "./release-branch-DNCD1uH_.mjs";
-import { ARROW_DIRECTION, ICON_TYPE, MEDIA_TYPE } from "./constants-CmCfyfPG.mjs";
+import { ARROW_DIRECTION, ICON_TYPE, MEDIA_TYPE } from "./constants-CQscYQcW.mjs";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 
@@ -54,4 +54,4 @@ SocialMedia.MediaType = MEDIA_TYPE;
 
 //#endregion
 export { Arrow, Cross, Hamburger, Icon, KidStar, Member, Search, SocialMedia };
-//# sourceMappingURL=icons-Bs84WbEt.mjs.map
+//# sourceMappingURL=icons-CtVvOt3y.mjs.map

package/lib/{icons-Bs84WbEt.mjs.map → icons-CtVvOt3y.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"icons-Bs84WbEt.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)\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;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"}
+{"version":3,"file":"icons-CtVvOt3y.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)\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;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-bC_xV5mJ.js → icons-teg1h03Q.js}

@@ -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-CuT1aTK4.js');
+const require_constants = require('./constants-DF_II8Fz.js');
 let clsx = require("clsx");
 clsx = require_chunk.__toESM(clsx);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -104,4 +104,4 @@ Object.defineProperty(exports, 'SocialMedia', {
     return SocialMedia;
   }
 });
-//# sourceMappingURL=icons-bC_xV5mJ.js.map
+//# sourceMappingURL=icons-teg1h03Q.js.map

package/lib/{icons-bC_xV5mJ.js.map → icons-teg1h03Q.js.map}

@@ -1 +1 @@
-{"version":3,"file":"icons-bC_xV5mJ.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)\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;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"}
+{"version":3,"file":"icons-teg1h03Q.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)\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;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-CgixcmUN.d.mts → index-Ej3agYJF.d.mts}

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

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

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