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

package/lib/tab-bar/index.mjs

@@ -1,18 +1,28 @@
-import "../internal-link-DCXJvzgx.mjs";
+import "../internal-link-JeC0sVNF.mjs";
 import "../constants-oTHAnh6r.mjs";
 import "../constants-CBSEPx91.mjs";
-import "../paragraph-Cf9jr8RF.mjs";
+import "../paragraph-QihuIWot.mjs";
 import "../theme-BG6yZVj-.mjs";
-import "../button-D_AWI7r9.mjs";
-import "../internal-links-CP3dqmrz.mjs";
-import "../release-branch-DNCD1uH_.mjs";
-import "../external-link-BMIFL3DE.mjs";
-import "../customized-link-D3p9rjEe.mjs";
-import "../constants-Npoq7yu0.mjs";
-import "../icons-C5UqghX2.mjs";
-import "../context-C9AuSZIE.mjs";
-import { tab_bar_default } from "../tab-bar-C_FxNWkG.mjs";
-import "../theme-Cf9NG_eL.mjs";
-import "../constants-B8QkNSRh.mjs";
+import "../theme-gPGrAR2u.mjs";
+import "../text-button-DkD8OA65.mjs";
+import "../theme-CJDY-Vlz.mjs";
+import "../icon-button-B-71Zncn.mjs";
+import "../menu-button-BzXGdc8T.mjs";
+import "../theme-YXaUsVJu.mjs";
+import "../pill-button-y0eh5cgT.mjs";
+import "../theme-CKrQVNS4.mjs";
+import "../icon-with-text-button-CTWmp6He.mjs";
+import "../button-ubJKEMLe.mjs";
+import "../internal-links-hIbZZEWd.mjs";
+import "../release-branch-oA59oIop.mjs";
+import "../external-link-DrDvZqvE.mjs";
+import "../customized-link-KNmVReo7.mjs";
+import "../z-index-YHdIcjBJ.mjs";
+import "../context-Bg1CbUYL.mjs";
+import "../constants-BinATQpN.mjs";
+import "../icons-D_G_3m8-.mjs";
+import "../theme-DGjb7DO8.mjs";
+import "../constants-BAmdJ_dS.mjs";
+import { tab_bar_default } from "../tab-bar-DDsyTDpg.mjs";
 
 export { tab_bar_default as default };

package/lib/tab-bar/theme.d.mts

@@ -1,5 +1,5 @@
-import "../index-CUE6zs36.mjs";
-import { Theme } from "../theme-DKi2E2si.mjs";
+import "../index-HhQuz4hd.mjs";
+import { Theme } from "../theme-ECp4BKXJ.mjs";
 
 //#region src/tab-bar/theme.d.ts
 declare const selectTabBarTheme: (theme: Theme) => {

package/lib/tab-bar/theme.d.ts

@@ -1,5 +1,5 @@
 import "../index-H3peA2d_.js";
-import { Theme } from "../theme-BDGfJ8n-.js";
+import { Theme } from "../theme-Ce9CLqLS.js";
 
 //#region src/tab-bar/theme.d.ts
 declare const selectTabBarTheme: (theme: Theme) => {

package/lib/tab-bar/theme.js

@@ -1,4 +1,4 @@
 require('../theme-DDBlIbeS.js');
-const require_theme$1 = require('../theme-B9k1Udon.js');
+const require_theme$1 = require('../theme-DZGKeUdz.js');
 
 exports.selectTabBarTheme = require_theme$1.selectTabBarTheme;

package/lib/tab-bar/theme.mjs

@@ -1,4 +1,4 @@
 import "../theme-BG6yZVj-.mjs";
-import { selectTabBarTheme } from "../theme-Cf9NG_eL.mjs";
+import { selectTabBarTheme } from "../theme-DGjb7DO8.mjs";
 
 export { selectTabBarTheme };

package/lib/{tab-bar-C_FxNWkG.mjs → tab-bar-DDsyTDpg.mjs}

@@ -1,27 +1,17 @@
-import { internal_link_default } from "./internal-link-DCXJvzgx.mjs";
+import { internal_link_default } from "./internal-link-JeC0sVNF.mjs";
 import { THEME } from "./theme-BG6yZVj-.mjs";
-import { icon_with_text_button_default } from "./button-D_AWI7r9.mjs";
-import { external_link_default } from "./external-link-BMIFL3DE.mjs";
-import { Hamburger } from "./icons-C5UqghX2.mjs";
-import { HamburgerContext, HeaderContext } from "./context-C9AuSZIE.mjs";
-import { selectTabBarTheme } from "./theme-Cf9NG_eL.mjs";
-import { TabBarItems } from "./constants-B8QkNSRh.mjs";
+import { icon_with_text_button_default } from "./icon-with-text-button-CTWmp6He.mjs";
+import { external_link_default } from "./external-link-DrDvZqvE.mjs";
+import { ZIndex } from "./z-index-YHdIcjBJ.mjs";
+import { HamburgerContext, HeaderContext } from "./context-Bg1CbUYL.mjs";
+import { Hamburger } from "./icons-D_G_3m8-.mjs";
+import { selectTabBarTheme } from "./theme-DGjb7DO8.mjs";
+import { TabBarItems } from "./constants-BAmdJ_dS.mjs";
 import { useContext } from "react";
 import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import map from "lodash/map";
 
-//#region src/header/constants/z-index.ts
-const ZIndex = {
-	tabBarMobile: "z-10",
-	tabBarTablet: "tablet:z-3",
-	hamburger: "z-4",
-	header: "z-3",
-	topRow: "z-2",
-	channel: "z-1"
-};
-
-//#endregion
 //#region src/tab-bar/index.tsx
 const _ = { map };
 const TabBar = ({ className = "" }) => {
@@ -58,5 +48,5 @@ const TabBar = ({ className = "" }) => {
 var tab_bar_default = TabBar;
 
 //#endregion
-export { ZIndex, tab_bar_default };
-//# sourceMappingURL=tab-bar-C_FxNWkG.mjs.map
+export { tab_bar_default };
+//# sourceMappingURL=tab-bar-DDsyTDpg.mjs.map

package/lib/tab-bar-DDsyTDpg.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-bar-DDsyTDpg.mjs","names":["TabBar: FC<TabBarProps>","ExternalLink","InternalLink","IconWithTextButton"],"sources":["../src/tab-bar/index.tsx"],"sourcesContent":["import { useContext, type FC } from 'react'\nimport clsx from 'clsx'\n// context\nimport { HamburgerContext, HeaderContext } from '../header/context'\n// z-index\nimport { ZIndex } from '../header/constants/z-index'\n// button\nimport { IconWithTextButton } from '../button'\n// icons\nimport { Hamburger } from '../icons'\n// theme\nimport { THEME } from '../constants/theme'\nimport { selectTabBarTheme } from './theme'\n// constants\nimport { TabBarItems } from './constants'\n// links\nimport { InternalLink, ExternalLink } from '../customized-link'\n// lodash\nimport map from 'lodash/map'\nconst _ = {\n  map,\n}\n\ntype TabBarProps = {\n  className?: string\n}\nconst TabBar: FC<TabBarProps> = ({ className = '' }) => {\n  const { theme, releaseBranch, isLinkExternal, pathname } =\n    useContext(HeaderContext)\n  const { toggleHamburger, isHamburgerMenuOpen } = useContext(HamburgerContext)\n  const { bgColor } = selectTabBarTheme(theme)\n  const iconTheme = theme === THEME.photography ? theme : THEME.normal\n  const LinkComponent = isLinkExternal ? ExternalLink : InternalLink\n  return (\n    <div\n      className={clsx(\n        'w-screen fixed left-0 bottom-0 flex justify-between px-[16px] pt-[8px] pb-[calc(8px+env(safe-area-inset-bottom,0))] shadow-[0_0_2px_rgba(0,0,0,0.15)]',\n        'desktop:hidden',\n        bgColor,\n        ZIndex.tabBarMobile,\n        ZIndex.tabBarTablet,\n        className\n      )}\n    >\n      {_.map(TabBarItems(releaseBranch), (item) => {\n        const isActive = !isHamburgerMenuOpen && pathname === item.link\n        return (\n          <LinkComponent\n            key={item.text}\n            to={item.link}\n            target={item.target}\n            className=\"flex justify-center flex-1\"\n          >\n            <IconWithTextButton\n              text={item.text}\n              iconComponent={item.icon}\n              theme={iconTheme}\n              active={isActive}\n            />\n          </LinkComponent>\n        )\n      })}\n      <IconWithTextButton\n        text=\"選單\"\n        iconComponent={Hamburger(releaseBranch)}\n        className=\"flex justify-center flex-1\"\n        onClick={toggleHamburger}\n        active={isHamburgerMenuOpen}\n        theme={iconTheme}\n      />\n    </div>\n  )\n}\nexport default TabBar\n"],"mappings":";;;;;;;;;;;;;;;AAmBA,MAAM,IAAI,EACR,KACD;AAKD,MAAMA,UAA2B,EAAE,YAAY,SAAS;CACtD,MAAM,EAAE,OAAO,eAAe,gBAAgB,aAC5C,WAAW,cAAc;CAC3B,MAAM,EAAE,iBAAiB,wBAAwB,WAAW,iBAAiB;CAC7E,MAAM,EAAE,YAAY,kBAAkB,MAAM;CAC5C,MAAM,YAAY,UAAU,MAAM,cAAc,QAAQ,MAAM;CAC9D,MAAM,gBAAgB,iBAAiBC,wBAAeC;AACtD,QACE,qBAAC;EACC,WAAW,KACT,yJACA,kBACA,SACA,OAAO,cACP,OAAO,cACP,UACD;aAEA,EAAE,IAAI,YAAY,cAAc,GAAG,SAAS;GAC3C,MAAM,WAAW,CAAC,uBAAuB,aAAa,KAAK;AAC3D,UACE,oBAAC;IAEC,IAAI,KAAK;IACT,QAAQ,KAAK;IACb,WAAU;cAEV,oBAACC;KACC,MAAM,KAAK;KACX,eAAe,KAAK;KACpB,OAAO;KACP,QAAQ;MACR;MAVG,KAAK,KAWI;IAElB,EACF,oBAACA;GACC,MAAK;GACL,eAAe,UAAU,cAAc;GACvC,WAAU;GACV,SAAS;GACT,QAAQ;GACR,OAAO;IACP;GACE;;AAGV,sBAAe"}

package/lib/{tab-bar-USs-mSXE.js → tab-bar-DE2tPvyh.js}

@@ -1,12 +1,13 @@
 const require_chunk = require('./chunk-BxBTb9qk.js');
 const require_theme = require('./theme-DDBlIbeS.js');
-const require_button = require('./button-Dk0MxlKd.js');
-const require_external_link = require('./external-link-Ce1_loKh.js');
-const require_internal_link = require('./internal-link-Bq4yp13E.js');
-const require_icons = require('./icons-BZI6_5JJ.js');
-const require_context = require('./context-vBt5fnU9.js');
-const require_theme$1 = require('./theme-B9k1Udon.js');
-const require_constants = require('./constants-CUzusjTU.js');
+const require_icon_with_text_button = require('./icon-with-text-button-DOj_-gz0.js');
+const require_external_link = require('./external-link-Dnw1WSM1.js');
+const require_internal_link = require('./internal-link-CKuvpRC8.js');
+const require_z_index = require('./z-index-CkMhi8IW.js');
+const require_context = require('./context-DW8qh_Q3.js');
+const require_icons = require('./icons-OsNrxOWn.js');
+const require_theme$1 = require('./theme-DZGKeUdz.js');
+const require_constants = require('./constants-BsNgVA15.js');
 let react = require("react");
 react = require_chunk.__toESM(react);
 let clsx = require("clsx");
@@ -16,17 +17,6 @@ react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
 let lodash_map = require("lodash/map");
 lodash_map = require_chunk.__toESM(lodash_map);
 
-//#region src/header/constants/z-index.ts
-const ZIndex = {
-	tabBarMobile: "z-10",
-	tabBarTablet: "tablet:z-3",
-	hamburger: "z-4",
-	header: "z-3",
-	topRow: "z-2",
-	channel: "z-1"
-};
-
-//#endregion
 //#region src/tab-bar/index.tsx
 const _ = { map: lodash_map.default };
 const TabBar = ({ className = "" }) => {
@@ -36,21 +26,21 @@ const TabBar = ({ className = "" }) => {
 	const iconTheme = theme === require_theme.THEME.photography ? theme : require_theme.THEME.normal;
 	const LinkComponent = isLinkExternal ? require_external_link.external_link_default : require_internal_link.internal_link_default;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: (0, clsx.default)("w-screen fixed left-0 bottom-0 flex justify-between px-[16px] pt-[8px] pb-[calc(8px+env(safe-area-inset-bottom,0))] shadow-[0_0_2px_rgba(0,0,0,0.15)]", "desktop:hidden", bgColor, ZIndex.tabBarMobile, ZIndex.tabBarTablet, className),
+		className: (0, clsx.default)("w-screen fixed left-0 bottom-0 flex justify-between px-[16px] pt-[8px] pb-[calc(8px+env(safe-area-inset-bottom,0))] shadow-[0_0_2px_rgba(0,0,0,0.15)]", "desktop:hidden", bgColor, require_z_index.ZIndex.tabBarMobile, require_z_index.ZIndex.tabBarTablet, className),
 		children: [_.map(require_constants.TabBarItems(releaseBranch), (item) => {
 			const isActive = !isHamburgerMenuOpen && pathname === item.link;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinkComponent, {
 				to: item.link,
 				target: item.target,
 				className: "flex justify-center flex-1",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.icon_with_text_button_default, {
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icon_with_text_button.icon_with_text_button_default, {
 					text: item.text,
 					iconComponent: item.icon,
 					theme: iconTheme,
 					active: isActive
 				})
 			}, item.text);
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.icon_with_text_button_default, {
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icon_with_text_button.icon_with_text_button_default, {
 			text: "選單",
 			iconComponent: require_icons.Hamburger(releaseBranch),
 			className: "flex justify-center flex-1",
@@ -63,16 +53,10 @@ const TabBar = ({ className = "" }) => {
 var tab_bar_default = TabBar;
 
 //#endregion
-Object.defineProperty(exports, 'ZIndex', {
-  enumerable: true,
-  get: function () {
-    return ZIndex;
-  }
-});
 Object.defineProperty(exports, 'tab_bar_default', {
   enumerable: true,
   get: function () {
     return tab_bar_default;
   }
 });
-//# sourceMappingURL=tab-bar-USs-mSXE.js.map
+//# sourceMappingURL=tab-bar-DE2tPvyh.js.map

package/lib/tab-bar-DE2tPvyh.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-bar-DE2tPvyh.js","names":["TabBar: FC<TabBarProps>","HeaderContext","HamburgerContext","selectTabBarTheme","THEME","ExternalLink","InternalLink","ZIndex","TabBarItems","IconWithTextButton","Hamburger"],"sources":["../src/tab-bar/index.tsx"],"sourcesContent":["import { useContext, type FC } from 'react'\nimport clsx from 'clsx'\n// context\nimport { HamburgerContext, HeaderContext } from '../header/context'\n// z-index\nimport { ZIndex } from '../header/constants/z-index'\n// button\nimport { IconWithTextButton } from '../button'\n// icons\nimport { Hamburger } from '../icons'\n// theme\nimport { THEME } from '../constants/theme'\nimport { selectTabBarTheme } from './theme'\n// constants\nimport { TabBarItems } from './constants'\n// links\nimport { InternalLink, ExternalLink } from '../customized-link'\n// lodash\nimport map from 'lodash/map'\nconst _ = {\n  map,\n}\n\ntype TabBarProps = {\n  className?: string\n}\nconst TabBar: FC<TabBarProps> = ({ className = '' }) => {\n  const { theme, releaseBranch, isLinkExternal, pathname } =\n    useContext(HeaderContext)\n  const { toggleHamburger, isHamburgerMenuOpen } = useContext(HamburgerContext)\n  const { bgColor } = selectTabBarTheme(theme)\n  const iconTheme = theme === THEME.photography ? theme : THEME.normal\n  const LinkComponent = isLinkExternal ? ExternalLink : InternalLink\n  return (\n    <div\n      className={clsx(\n        'w-screen fixed left-0 bottom-0 flex justify-between px-[16px] pt-[8px] pb-[calc(8px+env(safe-area-inset-bottom,0))] shadow-[0_0_2px_rgba(0,0,0,0.15)]',\n        'desktop:hidden',\n        bgColor,\n        ZIndex.tabBarMobile,\n        ZIndex.tabBarTablet,\n        className\n      )}\n    >\n      {_.map(TabBarItems(releaseBranch), (item) => {\n        const isActive = !isHamburgerMenuOpen && pathname === item.link\n        return (\n          <LinkComponent\n            key={item.text}\n            to={item.link}\n            target={item.target}\n            className=\"flex justify-center flex-1\"\n          >\n            <IconWithTextButton\n              text={item.text}\n              iconComponent={item.icon}\n              theme={iconTheme}\n              active={isActive}\n            />\n          </LinkComponent>\n        )\n      })}\n      <IconWithTextButton\n        text=\"選單\"\n        iconComponent={Hamburger(releaseBranch)}\n        className=\"flex justify-center flex-1\"\n        onClick={toggleHamburger}\n        active={isHamburgerMenuOpen}\n        theme={iconTheme}\n      />\n    </div>\n  )\n}\nexport default TabBar\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAmBA,MAAM,IAAI,EACR,yBACD;AAKD,MAAMA,UAA2B,EAAE,YAAY,SAAS;CACtD,MAAM,EAAE,OAAO,eAAe,gBAAgB,mCACjCC,8BAAc;CAC3B,MAAM,EAAE,iBAAiB,8CAAmCC,iCAAiB;CAC7E,MAAM,EAAE,YAAYC,kCAAkB,MAAM;CAC5C,MAAM,YAAY,UAAUC,oBAAM,cAAc,QAAQA,oBAAM;CAC9D,MAAM,gBAAgB,iBAAiBC,8CAAeC;AACtD,QACE,4CAAC;EACC,6BACE,yJACA,kBACA,SACAC,uBAAO,cACPA,uBAAO,cACP,UACD;aAEA,EAAE,IAAIC,8BAAY,cAAc,GAAG,SAAS;GAC3C,MAAM,WAAW,CAAC,uBAAuB,aAAa,KAAK;AAC3D,UACE,2CAAC;IAEC,IAAI,KAAK;IACT,QAAQ,KAAK;IACb,WAAU;cAEV,2CAACC;KACC,MAAM,KAAK;KACX,eAAe,KAAK;KACpB,OAAO;KACP,QAAQ;MACR;MAVG,KAAK,KAWI;IAElB,EACF,2CAACA;GACC,MAAK;GACL,eAAeC,wBAAU,cAAc;GACvC,WAAU;GACV,SAAS;GACT,QAAQ;GACR,OAAO;IACP;GACE;;AAGV,sBAAe"}

package/lib/tab-item-BLf_p9Qi.js

@@ -0,0 +1,37 @@
+const require_chunk = require('./chunk-BxBTb9qk.js');
+const require_text_button = require('./text-button-DlMVqsvV.js');
+const require_external_link = require('./external-link-Dnw1WSM1.js');
+const require_internal_link = require('./internal-link-CKuvpRC8.js');
+let clsx = require("clsx");
+clsx = require_chunk.__toESM(clsx);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
+
+//#region src/title-bar/components/title-tab/tab-item.tsx
+const TabItem = ({ text, link, isExternal = false, isActive = false, onClick, className = "" }) => {
+	const CustomizedLink = isExternal ? require_external_link.external_link_default : require_internal_link.internal_link_default;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		className: (0, clsx.default)("flex shrink-0 mr-[24px] last:mr-0", className),
+		onClick,
+		type: "button",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CustomizedLink, {
+			to: link,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_button.text_button_default, {
+				text,
+				active: isActive,
+				size: require_text_button.text_button_default.Size.l,
+				className: "py-[16px]"
+			})
+		})
+	});
+};
+var tab_item_default = TabItem;
+
+//#endregion
+Object.defineProperty(exports, 'tab_item_default', {
+  enumerable: true,
+  get: function () {
+    return tab_item_default;
+  }
+});
+//# sourceMappingURL=tab-item-BLf_p9Qi.js.map

package/lib/tab-item-BLf_p9Qi.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-item-BLf_p9Qi.js","names":["TabItem: FC<TabItemProps>","ExternalLink","InternalLink","TextButton"],"sources":["../src/title-bar/components/title-tab/tab-item.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport type { FC } from 'react'\n// type\nimport type { Tab } from './type'\n// component\nimport { ExternalLink, InternalLink } from '../../../customized-link'\nimport { TextButton } from '../../../button'\n\ntype TabItemProps = Tab & {\n  onClick: () => void\n  className?: string\n}\nconst TabItem: FC<TabItemProps> = ({\n  text,\n  link,\n  isExternal = false,\n  isActive = false,\n  onClick,\n  className = '',\n}) => {\n  const CustomizedLink = isExternal ? ExternalLink : InternalLink\n  return (\n    <button\n      className={clsx('flex shrink-0 mr-[24px] last:mr-0', className)}\n      onClick={onClick}\n      type=\"button\"\n    >\n      <CustomizedLink to={link}>\n        <TextButton\n          text={text}\n          active={isActive}\n          size={TextButton.Size.l}\n          className=\"py-[16px]\"\n        />\n      </CustomizedLink>\n    </button>\n  )\n}\n\nexport default TabItem\n"],"mappings":";;;;;;;;;;AAYA,MAAMA,WAA6B,EACjC,MACA,MACA,aAAa,OACb,WAAW,OACX,SACA,YAAY,SACR;CACJ,MAAM,iBAAiB,aAAaC,8CAAeC;AACnD,QACE,2CAAC;EACC,6BAAgB,qCAAqC,UAAU;EACtD;EACT,MAAK;YAEL,2CAAC;GAAe,IAAI;aAClB,2CAACC;IACO;IACN,QAAQ;IACR,MAAMA,wCAAW,KAAK;IACtB,WAAU;KACV;IACa;GACV;;AAIb,uBAAe"}

package/lib/tab-item-NrRakHlM.mjs

@@ -0,0 +1,29 @@
+import { internal_link_default } from "./internal-link-JeC0sVNF.mjs";
+import { text_button_default } from "./text-button-DkD8OA65.mjs";
+import { external_link_default } from "./external-link-DrDvZqvE.mjs";
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/title-bar/components/title-tab/tab-item.tsx
+const TabItem = ({ text, link, isExternal = false, isActive = false, onClick, className = "" }) => {
+	const CustomizedLink = isExternal ? external_link_default : internal_link_default;
+	return /* @__PURE__ */ jsx("button", {
+		className: clsx("flex shrink-0 mr-[24px] last:mr-0", className),
+		onClick,
+		type: "button",
+		children: /* @__PURE__ */ jsx(CustomizedLink, {
+			to: link,
+			children: /* @__PURE__ */ jsx(text_button_default, {
+				text,
+				active: isActive,
+				size: text_button_default.Size.l,
+				className: "py-[16px]"
+			})
+		})
+	});
+};
+var tab_item_default = TabItem;
+
+//#endregion
+export { tab_item_default };
+//# sourceMappingURL=tab-item-NrRakHlM.mjs.map

package/lib/tab-item-NrRakHlM.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-item-NrRakHlM.mjs","names":["TabItem: FC<TabItemProps>","ExternalLink","InternalLink","TextButton"],"sources":["../src/title-bar/components/title-tab/tab-item.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport type { FC } from 'react'\n// type\nimport type { Tab } from './type'\n// component\nimport { ExternalLink, InternalLink } from '../../../customized-link'\nimport { TextButton } from '../../../button'\n\ntype TabItemProps = Tab & {\n  onClick: () => void\n  className?: string\n}\nconst TabItem: FC<TabItemProps> = ({\n  text,\n  link,\n  isExternal = false,\n  isActive = false,\n  onClick,\n  className = '',\n}) => {\n  const CustomizedLink = isExternal ? ExternalLink : InternalLink\n  return (\n    <button\n      className={clsx('flex shrink-0 mr-[24px] last:mr-0', className)}\n      onClick={onClick}\n      type=\"button\"\n    >\n      <CustomizedLink to={link}>\n        <TextButton\n          text={text}\n          active={isActive}\n          size={TextButton.Size.l}\n          className=\"py-[16px]\"\n        />\n      </CustomizedLink>\n    </button>\n  )\n}\n\nexport default TabItem\n"],"mappings":";;;;;;;AAYA,MAAMA,WAA6B,EACjC,MACA,MACA,aAAa,OACb,WAAW,OACX,SACA,YAAY,SACR;CACJ,MAAM,iBAAiB,aAAaC,wBAAeC;AACnD,QACE,oBAAC;EACC,WAAW,KAAK,qCAAqC,UAAU;EACtD;EACT,MAAK;YAEL,oBAAC;GAAe,IAAI;aAClB,oBAACC;IACO;IACN,QAAQ;IACR,MAAMA,oBAAW,KAAK;IACtB,WAAU;KACV;IACa;GACV;;AAIb,uBAAe"}

package/lib/tablet-and-below-BMy_YUZ1.mjs

@@ -0,0 +1,101 @@
+import { internal_link_default } from "./internal-link-JeC0sVNF.mjs";
+import { text_button_default } from "./text-button-DkD8OA65.mjs";
+import { icon_button_default } from "./icon-button-B-71Zncn.mjs";
+import { pill_button_default } from "./pill-button-y0eh5cgT.mjs";
+import { EXTERNAL_LINKS } from "./external-links-FfndTp-X.mjs";
+import { INTERNAL_LINKS } from "./internal-links-hIbZZEWd.mjs";
+import { external_link_default } from "./external-link-DrDvZqvE.mjs";
+import { ZIndex } from "./z-index-YHdIcjBJ.mjs";
+import { HeaderContext } from "./context-Bg1CbUYL.mjs";
+import { logo_header_default } from "./logo-header-Gy5Y-1lY.mjs";
+import { Arrow, Member } from "./icons-D_G_3m8-.mjs";
+import { checkReferrer } from "./links-CLk9Tme-.mjs";
+import { useContext, useEffect, useState } from "react";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import some from "lodash/some";
+import includes from "lodash/includes";
+import throttle from "lodash/throttle";
+
+//#region src/header/components/tablet-and-below.tsx
+const _ = {
+	some,
+	includes,
+	throttle
+};
+const TabletAndBelow = ({ topRowBgColor, logoType }) => {
+	const { isLinkExternal, releaseBranch, theme, pathname, referrerPath, isAuthed } = useContext(HeaderContext);
+	const LinkComponent = isLinkExternal ? external_link_default : internal_link_default;
+	const [currentClientWidth, setCurrentClientWidth] = useState(0);
+	useEffect(() => {
+		const handleResize = _.throttle(() => {
+			setCurrentClientWidth(document.body.clientWidth);
+		}, 200);
+		handleResize();
+		window.addEventListener("resize", handleResize);
+		return () => {
+			window.removeEventListener("resize", handleResize);
+		};
+	}, []);
+	const isOnArticlePage = _.includes(pathname, `${INTERNAL_LINKS.article}/`);
+	const needPrevIconRoute = [
+		INTERNAL_LINKS.account.donationHistoryPage,
+		INTERNAL_LINKS.account.emailSubscription,
+		INTERNAL_LINKS.myReading.savedBookmarks,
+		INTERNAL_LINKS.myReading.browsingHistory
+	];
+	const isOnNeedPrevIconPage = _.some(needPrevIconRoute, (el) => _.includes(pathname, el));
+	const showPrevIcon = isOnArticlePage || isOnNeedPrevIconPage && currentClientWidth < 768;
+	const gotoPrev = () => {
+		if (referrerPath || checkReferrer(document.referrer, releaseBranch)) window.history.back();
+		else window.location.href = "/";
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx(`flex items-center justify-between ${ZIndex.topRow} py-[16px] ${topRowBgColor}`, "desktop:hidden"),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-row gap-[8px]",
+			children: [showPrevIcon ? /* @__PURE__ */ jsx("div", {
+				className: "p-[4px] -translate-x-[8px]",
+				children: /* @__PURE__ */ jsx(icon_button_default, {
+					iconComponent: /* @__PURE__ */ jsx(Arrow, {
+						direction: Arrow.Direction.left,
+						releaseBranch
+					}),
+					theme,
+					onClick: gotoPrev
+				})
+			}) : null, /* @__PURE__ */ jsx(LinkComponent, {
+				to: INTERNAL_LINKS.home,
+				className: "flex items-center",
+				children: /* @__PURE__ */ jsx(logo_header_default, {
+					type: logoType,
+					className: "h-[21px]"
+				})
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-row items-center gap-[16px]",
+			children: [/* @__PURE__ */ jsx(LinkComponent, {
+				to: EXTERNAL_LINKS.monthlyDonation,
+				children: /* @__PURE__ */ jsx(pill_button_default, {
+					text: "贊助",
+					theme: pill_button_default.Theme.normal,
+					type: pill_button_default.Type.primary,
+					style: pill_button_default.Style.brand
+				})
+			}), /* @__PURE__ */ jsx(LinkComponent, {
+				to: INTERNAL_LINKS.account.index,
+				children: isAuthed ? /* @__PURE__ */ jsx(icon_button_default, { iconComponent: Member(releaseBranch) }) : /* @__PURE__ */ jsx(text_button_default, {
+					text: "登入",
+					theme: text_button_default.Theme.normal,
+					style: text_button_default.Style.dark,
+					size: text_button_default.Size.s
+				})
+			})]
+		})]
+	});
+};
+var tablet_and_below_default = TabletAndBelow;
+
+//#endregion
+export { tablet_and_below_default };
+//# sourceMappingURL=tablet-and-below-BMy_YUZ1.mjs.map

package/lib/tablet-and-below-BMy_YUZ1.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tablet-and-below-BMy_YUZ1.mjs","names":["TabletAndBelow: FC<TabletAndBelowProps>","ExternalLink","InternalLink","IconButton","LogoHeader","PillButton","TextButton"],"sources":["../src/header/components/tablet-and-below.tsx"],"sourcesContent":["import { useContext, useState, useEffect, type FC } from 'react'\nimport clsx from 'clsx'\n// context\nimport { HeaderContext } from '../context'\n// constants\nimport { ZIndex } from '../constants/z-index'\nimport { INTERNAL_LINKS } from '../../constants/internal-links'\nimport { EXTERNAL_LINKS } from '../../constants/external-links'\n// logo\nimport { LogoHeader } from '../../logo'\nimport type { LogoType } from '../../logo/constants'\n// link\nimport { ExternalLink, InternalLink } from '../../customized-link'\n// button\nimport { PillButton, TextButton, IconButton } from '../../button'\n// icon\nimport { Arrow, Member } from '../../icons'\n// utils\nimport { checkReferrer } from '../utils/links'\n// lodash\nimport some from 'lodash/some'\nimport includes from 'lodash/includes'\nimport throttle from 'lodash/throttle'\nconst _ = {\n  some,\n  includes,\n  throttle,\n}\n\ntype TabletAndBelowProps = {\n  topRowBgColor: string\n  logoType: LogoType\n}\nconst TabletAndBelow: FC<TabletAndBelowProps> = ({\n  topRowBgColor,\n  logoType,\n}) => {\n  const {\n    isLinkExternal,\n    releaseBranch,\n    theme,\n    pathname,\n    referrerPath,\n    isAuthed,\n  } = useContext(HeaderContext)\n  const LinkComponent = isLinkExternal ? ExternalLink : InternalLink\n\n  const [currentClientWidth, setCurrentClientWidth] = useState(0)\n  useEffect(() => {\n    const handleResize = _.throttle(() => {\n      setCurrentClientWidth(document.body.clientWidth)\n    }, 200)\n\n    handleResize()\n    window.addEventListener('resize', handleResize)\n\n    return () => {\n      window.removeEventListener('resize', handleResize)\n    }\n  }, [])\n\n  const isOnArticlePage = _.includes(pathname, `${INTERNAL_LINKS.article}/`)\n  const needPrevIconRoute = [\n    INTERNAL_LINKS.account.donationHistoryPage,\n    INTERNAL_LINKS.account.emailSubscription,\n    INTERNAL_LINKS.myReading.savedBookmarks,\n    INTERNAL_LINKS.myReading.browsingHistory,\n  ]\n  const isOnNeedPrevIconPage = _.some(needPrevIconRoute, (el) =>\n    _.includes(pathname, el)\n  )\n\n  const showPrevIcon =\n    isOnArticlePage || (isOnNeedPrevIconPage && currentClientWidth < 768) // only show it on mobile\n\n  const gotoPrev = () => {\n    if (referrerPath || checkReferrer(document.referrer, releaseBranch)) {\n      // go to previous page when referer is twreporter site\n      window.history.back()\n    } else {\n      // go to home page when referer is not twreporter site\n      window.location.href = '/'\n    }\n  }\n\n  return (\n    <div\n      className={clsx(\n        `flex items-center justify-between ${ZIndex.topRow} py-[16px] ${topRowBgColor}`,\n        'desktop:hidden'\n      )}\n    >\n      <div className=\"flex flex-row gap-[8px]\">\n        {/* pre button */}\n        {showPrevIcon ? (\n          <div className=\"p-[4px] -translate-x-[8px]\">\n            <IconButton\n              iconComponent={\n                <Arrow\n                  direction={Arrow.Direction.left}\n                  releaseBranch={releaseBranch}\n                />\n              }\n              theme={theme}\n              onClick={gotoPrev}\n            />\n          </div>\n        ) : null}\n        {/* logo */}\n        <LinkComponent to={INTERNAL_LINKS.home} className=\"flex items-center\">\n          <LogoHeader type={logoType} className=\"h-[21px]\" />\n        </LinkComponent>\n      </div>\n      {/* actions */}\n      <div className=\"flex flex-row items-center gap-[16px]\">\n        <LinkComponent to={EXTERNAL_LINKS.monthlyDonation}>\n          <PillButton\n            text=\"贊助\"\n            theme={PillButton.Theme.normal}\n            type={PillButton.Type.primary}\n            style={PillButton.Style.brand}\n          />\n        </LinkComponent>\n        <LinkComponent to={INTERNAL_LINKS.account.index}>\n          {isAuthed ? (\n            <IconButton iconComponent={Member(releaseBranch)} />\n          ) : (\n            <TextButton\n              text=\"登入\"\n              theme={TextButton.Theme.normal}\n              style={TextButton.Style.dark}\n              size={TextButton.Size.s}\n            />\n          )}\n        </LinkComponent>\n      </div>\n    </div>\n  )\n}\n\nexport default TabletAndBelow\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAuBA,MAAM,IAAI;CACR;CACA;CACA;CACD;AAMD,MAAMA,kBAA2C,EAC/C,eACA,eACI;CACJ,MAAM,EACJ,gBACA,eACA,OACA,UACA,cACA,aACE,WAAW,cAAc;CAC7B,MAAM,gBAAgB,iBAAiBC,wBAAeC;CAEtD,MAAM,CAAC,oBAAoB,yBAAyB,SAAS,EAAE;AAC/D,iBAAgB;EACd,MAAM,eAAe,EAAE,eAAe;AACpC,yBAAsB,SAAS,KAAK,YAAY;KAC/C,IAAI;AAEP,gBAAc;AACd,SAAO,iBAAiB,UAAU,aAAa;AAE/C,eAAa;AACX,UAAO,oBAAoB,UAAU,aAAa;;IAEnD,EAAE,CAAC;CAEN,MAAM,kBAAkB,EAAE,SAAS,UAAU,GAAG,eAAe,QAAQ,GAAG;CAC1E,MAAM,oBAAoB;EACxB,eAAe,QAAQ;EACvB,eAAe,QAAQ;EACvB,eAAe,UAAU;EACzB,eAAe,UAAU;EAC1B;CACD,MAAM,uBAAuB,EAAE,KAAK,oBAAoB,OACtD,EAAE,SAAS,UAAU,GAAG,CACzB;CAED,MAAM,eACJ,mBAAoB,wBAAwB,qBAAqB;CAEnE,MAAM,iBAAiB;AACrB,MAAI,gBAAgB,cAAc,SAAS,UAAU,cAAc,CAEjE,QAAO,QAAQ,MAAM;MAGrB,QAAO,SAAS,OAAO;;AAI3B,QACE,qBAAC;EACC,WAAW,KACT,qCAAqC,OAAO,OAAO,aAAa,iBAChE,iBACD;aAED,qBAAC;GAAI,WAAU;cAEZ,eACC,oBAAC;IAAI,WAAU;cACb,oBAACC;KACC,eACE,oBAAC;MACC,WAAW,MAAM,UAAU;MACZ;OACf;KAEG;KACP,SAAS;MACT;KACE,GACJ,MAEJ,oBAAC;IAAc,IAAI,eAAe;IAAM,WAAU;cAChD,oBAACC;KAAW,MAAM;KAAU,WAAU;MAAa;KACrC;IACZ,EAEN,qBAAC;GAAI,WAAU;cACb,oBAAC;IAAc,IAAI,eAAe;cAChC,oBAACC;KACC,MAAK;KACL,OAAOA,oBAAW,MAAM;KACxB,MAAMA,oBAAW,KAAK;KACtB,OAAOA,oBAAW,MAAM;MACxB;KACY,EAChB,oBAAC;IAAc,IAAI,eAAe,QAAQ;cACvC,WACC,oBAACF,uBAAW,eAAe,OAAO,cAAc,GAAI,GAEpD,oBAACG;KACC,MAAK;KACL,OAAOA,oBAAW,MAAM;KACxB,OAAOA,oBAAW,MAAM;KACxB,MAAMA,oBAAW,KAAK;MACtB;KAEU;IACZ;GACF;;AAIV,+BAAe"}

package/lib/tablet-and-below-DxwJGBEL.js

@@ -0,0 +1,113 @@
+const require_chunk = require('./chunk-BxBTb9qk.js');
+const require_text_button = require('./text-button-DlMVqsvV.js');
+const require_icon_button = require('./icon-button-Vqwyow05.js');
+const require_pill_button = require('./pill-button-CNbShnjT.js');
+const require_external_links = require('./external-links-CeidCP88.js');
+const require_internal_links = require('./internal-links-B0I8FU-O.js');
+const require_external_link = require('./external-link-Dnw1WSM1.js');
+const require_internal_link = require('./internal-link-CKuvpRC8.js');
+const require_z_index = require('./z-index-CkMhi8IW.js');
+const require_context = require('./context-DW8qh_Q3.js');
+const require_logo_header = require('./logo-header-Cp7W8CR-.js');
+const require_icons = require('./icons-OsNrxOWn.js');
+const require_links = require('./links-B-W3iTG7.js');
+let react = require("react");
+react = require_chunk.__toESM(react);
+let clsx = require("clsx");
+clsx = require_chunk.__toESM(clsx);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
+let lodash_some = require("lodash/some");
+lodash_some = require_chunk.__toESM(lodash_some);
+let lodash_includes = require("lodash/includes");
+lodash_includes = require_chunk.__toESM(lodash_includes);
+let lodash_throttle = require("lodash/throttle");
+lodash_throttle = require_chunk.__toESM(lodash_throttle);
+
+//#region src/header/components/tablet-and-below.tsx
+const _ = {
+	some: lodash_some.default,
+	includes: lodash_includes.default,
+	throttle: lodash_throttle.default
+};
+const TabletAndBelow = ({ topRowBgColor, logoType }) => {
+	const { isLinkExternal, releaseBranch, theme, pathname, referrerPath, isAuthed } = (0, react.useContext)(require_context.HeaderContext);
+	const LinkComponent = isLinkExternal ? require_external_link.external_link_default : require_internal_link.internal_link_default;
+	const [currentClientWidth, setCurrentClientWidth] = (0, react.useState)(0);
+	(0, react.useEffect)(() => {
+		const handleResize = _.throttle(() => {
+			setCurrentClientWidth(document.body.clientWidth);
+		}, 200);
+		handleResize();
+		window.addEventListener("resize", handleResize);
+		return () => {
+			window.removeEventListener("resize", handleResize);
+		};
+	}, []);
+	const isOnArticlePage = _.includes(pathname, `${require_internal_links.INTERNAL_LINKS.article}/`);
+	const needPrevIconRoute = [
+		require_internal_links.INTERNAL_LINKS.account.donationHistoryPage,
+		require_internal_links.INTERNAL_LINKS.account.emailSubscription,
+		require_internal_links.INTERNAL_LINKS.myReading.savedBookmarks,
+		require_internal_links.INTERNAL_LINKS.myReading.browsingHistory
+	];
+	const isOnNeedPrevIconPage = _.some(needPrevIconRoute, (el) => _.includes(pathname, el));
+	const showPrevIcon = isOnArticlePage || isOnNeedPrevIconPage && currentClientWidth < 768;
+	const gotoPrev = () => {
+		if (referrerPath || require_links.checkReferrer(document.referrer, releaseBranch)) window.history.back();
+		else window.location.href = "/";
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, clsx.default)(`flex items-center justify-between ${require_z_index.ZIndex.topRow} py-[16px] ${topRowBgColor}`, "desktop:hidden"),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex flex-row gap-[8px]",
+			children: [showPrevIcon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "p-[4px] -translate-x-[8px]",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icon_button.icon_button_default, {
+					iconComponent: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.Arrow, {
+						direction: require_icons.Arrow.Direction.left,
+						releaseBranch
+					}),
+					theme,
+					onClick: gotoPrev
+				})
+			}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinkComponent, {
+				to: require_internal_links.INTERNAL_LINKS.home,
+				className: "flex items-center",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_logo_header.logo_header_default, {
+					type: logoType,
+					className: "h-[21px]"
+				})
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex flex-row items-center gap-[16px]",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinkComponent, {
+				to: require_external_links.EXTERNAL_LINKS.monthlyDonation,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pill_button.pill_button_default, {
+					text: "贊助",
+					theme: require_pill_button.pill_button_default.Theme.normal,
+					type: require_pill_button.pill_button_default.Type.primary,
+					style: require_pill_button.pill_button_default.Style.brand
+				})
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinkComponent, {
+				to: require_internal_links.INTERNAL_LINKS.account.index,
+				children: isAuthed ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icon_button.icon_button_default, { iconComponent: require_icons.Member(releaseBranch) }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_button.text_button_default, {
+					text: "登入",
+					theme: require_text_button.text_button_default.Theme.normal,
+					style: require_text_button.text_button_default.Style.dark,
+					size: require_text_button.text_button_default.Size.s
+				})
+			})]
+		})]
+	});
+};
+var tablet_and_below_default = TabletAndBelow;
+
+//#endregion
+Object.defineProperty(exports, 'tablet_and_below_default', {
+  enumerable: true,
+  get: function () {
+    return tablet_and_below_default;
+  }
+});
+//# sourceMappingURL=tablet-and-below-DxwJGBEL.js.map

package/lib/tablet-and-below-DxwJGBEL.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tablet-and-below-DxwJGBEL.js","names":["TabletAndBelow: FC<TabletAndBelowProps>","HeaderContext","ExternalLink","InternalLink","INTERNAL_LINKS","checkReferrer","ZIndex","IconButton","Arrow","LogoHeader","EXTERNAL_LINKS","PillButton","Member","TextButton"],"sources":["../src/header/components/tablet-and-below.tsx"],"sourcesContent":["import { useContext, useState, useEffect, type FC } from 'react'\nimport clsx from 'clsx'\n// context\nimport { HeaderContext } from '../context'\n// constants\nimport { ZIndex } from '../constants/z-index'\nimport { INTERNAL_LINKS } from '../../constants/internal-links'\nimport { EXTERNAL_LINKS } from '../../constants/external-links'\n// logo\nimport { LogoHeader } from '../../logo'\nimport type { LogoType } from '../../logo/constants'\n// link\nimport { ExternalLink, InternalLink } from '../../customized-link'\n// button\nimport { PillButton, TextButton, IconButton } from '../../button'\n// icon\nimport { Arrow, Member } from '../../icons'\n// utils\nimport { checkReferrer } from '../utils/links'\n// lodash\nimport some from 'lodash/some'\nimport includes from 'lodash/includes'\nimport throttle from 'lodash/throttle'\nconst _ = {\n  some,\n  includes,\n  throttle,\n}\n\ntype TabletAndBelowProps = {\n  topRowBgColor: string\n  logoType: LogoType\n}\nconst TabletAndBelow: FC<TabletAndBelowProps> = ({\n  topRowBgColor,\n  logoType,\n}) => {\n  const {\n    isLinkExternal,\n    releaseBranch,\n    theme,\n    pathname,\n    referrerPath,\n    isAuthed,\n  } = useContext(HeaderContext)\n  const LinkComponent = isLinkExternal ? ExternalLink : InternalLink\n\n  const [currentClientWidth, setCurrentClientWidth] = useState(0)\n  useEffect(() => {\n    const handleResize = _.throttle(() => {\n      setCurrentClientWidth(document.body.clientWidth)\n    }, 200)\n\n    handleResize()\n    window.addEventListener('resize', handleResize)\n\n    return () => {\n      window.removeEventListener('resize', handleResize)\n    }\n  }, [])\n\n  const isOnArticlePage = _.includes(pathname, `${INTERNAL_LINKS.article}/`)\n  const needPrevIconRoute = [\n    INTERNAL_LINKS.account.donationHistoryPage,\n    INTERNAL_LINKS.account.emailSubscription,\n    INTERNAL_LINKS.myReading.savedBookmarks,\n    INTERNAL_LINKS.myReading.browsingHistory,\n  ]\n  const isOnNeedPrevIconPage = _.some(needPrevIconRoute, (el) =>\n    _.includes(pathname, el)\n  )\n\n  const showPrevIcon =\n    isOnArticlePage || (isOnNeedPrevIconPage && currentClientWidth < 768) // only show it on mobile\n\n  const gotoPrev = () => {\n    if (referrerPath || checkReferrer(document.referrer, releaseBranch)) {\n      // go to previous page when referer is twreporter site\n      window.history.back()\n    } else {\n      // go to home page when referer is not twreporter site\n      window.location.href = '/'\n    }\n  }\n\n  return (\n    <div\n      className={clsx(\n        `flex items-center justify-between ${ZIndex.topRow} py-[16px] ${topRowBgColor}`,\n        'desktop:hidden'\n      )}\n    >\n      <div className=\"flex flex-row gap-[8px]\">\n        {/* pre button */}\n        {showPrevIcon ? (\n          <div className=\"p-[4px] -translate-x-[8px]\">\n            <IconButton\n              iconComponent={\n                <Arrow\n                  direction={Arrow.Direction.left}\n                  releaseBranch={releaseBranch}\n                />\n              }\n              theme={theme}\n              onClick={gotoPrev}\n            />\n          </div>\n        ) : null}\n        {/* logo */}\n        <LinkComponent to={INTERNAL_LINKS.home} className=\"flex items-center\">\n          <LogoHeader type={logoType} className=\"h-[21px]\" />\n        </LinkComponent>\n      </div>\n      {/* actions */}\n      <div className=\"flex flex-row items-center gap-[16px]\">\n        <LinkComponent to={EXTERNAL_LINKS.monthlyDonation}>\n          <PillButton\n            text=\"贊助\"\n            theme={PillButton.Theme.normal}\n            type={PillButton.Type.primary}\n            style={PillButton.Style.brand}\n          />\n        </LinkComponent>\n        <LinkComponent to={INTERNAL_LINKS.account.index}>\n          {isAuthed ? (\n            <IconButton iconComponent={Member(releaseBranch)} />\n          ) : (\n            <TextButton\n              text=\"登入\"\n              theme={TextButton.Theme.normal}\n              style={TextButton.Style.dark}\n              size={TextButton.Size.s}\n            />\n          )}\n        </LinkComponent>\n      </div>\n    </div>\n  )\n}\n\nexport default TabletAndBelow\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBA,MAAM,IAAI;CACR;CACA;CACA;CACD;AAMD,MAAMA,kBAA2C,EAC/C,eACA,eACI;CACJ,MAAM,EACJ,gBACA,eACA,OACA,UACA,cACA,mCACaC,8BAAc;CAC7B,MAAM,gBAAgB,iBAAiBC,8CAAeC;CAEtD,MAAM,CAAC,oBAAoB,6CAAkC,EAAE;AAC/D,4BAAgB;EACd,MAAM,eAAe,EAAE,eAAe;AACpC,yBAAsB,SAAS,KAAK,YAAY;KAC/C,IAAI;AAEP,gBAAc;AACd,SAAO,iBAAiB,UAAU,aAAa;AAE/C,eAAa;AACX,UAAO,oBAAoB,UAAU,aAAa;;IAEnD,EAAE,CAAC;CAEN,MAAM,kBAAkB,EAAE,SAAS,UAAU,GAAGC,sCAAe,QAAQ,GAAG;CAC1E,MAAM,oBAAoB;EACxBA,sCAAe,QAAQ;EACvBA,sCAAe,QAAQ;EACvBA,sCAAe,UAAU;EACzBA,sCAAe,UAAU;EAC1B;CACD,MAAM,uBAAuB,EAAE,KAAK,oBAAoB,OACtD,EAAE,SAAS,UAAU,GAAG,CACzB;CAED,MAAM,eACJ,mBAAoB,wBAAwB,qBAAqB;CAEnE,MAAM,iBAAiB;AACrB,MAAI,gBAAgBC,4BAAc,SAAS,UAAU,cAAc,CAEjE,QAAO,QAAQ,MAAM;MAGrB,QAAO,SAAS,OAAO;;AAI3B,QACE,4CAAC;EACC,6BACE,qCAAqCC,uBAAO,OAAO,aAAa,iBAChE,iBACD;aAED,4CAAC;GAAI,WAAU;cAEZ,eACC,2CAAC;IAAI,WAAU;cACb,2CAACC;KACC,eACE,2CAACC;MACC,WAAWA,oBAAM,UAAU;MACZ;OACf;KAEG;KACP,SAAS;MACT;KACE,GACJ,MAEJ,2CAAC;IAAc,IAAIJ,sCAAe;IAAM,WAAU;cAChD,2CAACK;KAAW,MAAM;KAAU,WAAU;MAAa;KACrC;IACZ,EAEN,4CAAC;GAAI,WAAU;cACb,2CAAC;IAAc,IAAIC,sCAAe;cAChC,2CAACC;KACC,MAAK;KACL,OAAOA,wCAAW,MAAM;KACxB,MAAMA,wCAAW,KAAK;KACtB,OAAOA,wCAAW,MAAM;MACxB;KACY,EAChB,2CAAC;IAAc,IAAIP,sCAAe,QAAQ;cACvC,WACC,2CAACG,2CAAW,eAAeK,qBAAO,cAAc,GAAI,GAEpD,2CAACC;KACC,MAAK;KACL,OAAOA,wCAAW,MAAM;KACxB,OAAOA,wCAAW,MAAM;KACxB,MAAMA,wCAAW,KAAK;MACtB;KAEU;IACZ;GACF;;AAIV,+BAAe"}

package/lib/text/constants.d.mts

@@ -1,3 +1,3 @@
-import "../index-CUE6zs36.mjs";
-import { TYPE, Type, WEIGHT, Weight } from "../constants-C_OX3J7_.mjs";
+import "../index-HhQuz4hd.mjs";
+import { TYPE, Type, WEIGHT, Weight } from "../constants-jR2WUCRY.mjs";
 export { TYPE, Type, WEIGHT, Weight };

package/lib/text/constants.d.ts

@@ -1,3 +1,3 @@
 import "../index-H3peA2d_.js";
-import { TYPE, Type, WEIGHT, Weight } from "../constants-CZ7dxJ-t.js";
+import { TYPE, Type, WEIGHT, Weight } from "../constants-BC_JdEyk.js";
 export { TYPE, Type, WEIGHT, Weight };

package/lib/text/heading.d.mts

@@ -1,5 +1,5 @@
-import "../index-CUE6zs36.mjs";
-import { TYPE, Type } from "../constants-C_OX3J7_.mjs";
+import "../index-HhQuz4hd.mjs";
+import { TYPE, Type } from "../constants-jR2WUCRY.mjs";
 import React from "react";
 
 //#region src/text/heading.d.ts

package/lib/text/heading.d.ts

@@ -1,5 +1,5 @@
 import "../index-H3peA2d_.js";
-import { TYPE, Type } from "../constants-CZ7dxJ-t.js";
+import { TYPE, Type } from "../constants-BC_JdEyk.js";
 import React from "react";
 
 //#region src/text/heading.d.ts

package/lib/text/heading.js

@@ -1,5 +1,5 @@
 require('../constants-Cndhv6qr.js');
-const require_heading = require('../heading-D7slLGoI.js');
+const require_heading = require('../heading-D5Lv6X0M.js');
 
 exports.H1 = require_heading.H1;
 exports.H2 = require_heading.H2;

package/lib/text/heading.mjs

@@ -1,4 +1,4 @@
 import "../constants-CBSEPx91.mjs";
-import { H1, H2, H3, H4, H5, H6 } from "../heading-CCsID-nv.mjs";
+import { H1, H2, H3, H4, H5, H6 } from "../heading-BVKLYfXi.mjs";
 
 export { H1, H2, H3, H4, H5, H6 };

package/lib/text/paragraph.d.mts

@@ -1,5 +1,5 @@
-import "../index-CUE6zs36.mjs";
-import { WEIGHT, Weight } from "../constants-C_OX3J7_.mjs";
+import "../index-HhQuz4hd.mjs";
+import { WEIGHT, Weight } from "../constants-jR2WUCRY.mjs";
 import React from "react";
 
 //#region src/text/paragraph.d.ts

package/lib/text/paragraph.d.ts

@@ -1,5 +1,5 @@
 import "../index-H3peA2d_.js";
-import { WEIGHT, Weight } from "../constants-CZ7dxJ-t.js";
+import { WEIGHT, Weight } from "../constants-BC_JdEyk.js";
 import React from "react";
 
 //#region src/text/paragraph.d.ts

package/lib/text/paragraph.js

@@ -1,5 +1,5 @@
 require('../constants-Cndhv6qr.js');
-const require_paragraph = require('../paragraph-iuz3jP0Q.js');
+const require_paragraph = require('../paragraph-Bve022HS.js');
 
 exports.P1 = require_paragraph.P1;
 exports.P2 = require_paragraph.P2;

package/lib/text/paragraph.mjs

@@ -1,4 +1,4 @@
 import "../constants-CBSEPx91.mjs";
-import { P1, P2, P3, P4 } from "../paragraph-Cf9jr8RF.mjs";
+import { P1, P2, P3, P4 } from "../paragraph-QihuIWot.mjs";
 
 export { P1, P2, P3, P4 };