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

package/lib/tab-item-DefWiW0b.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-B7TYHbGX.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-DefWiW0b.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tab-item-DefWiW0b.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-Dx2Rvp02.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-xe0gZr3J.js');
+const require_internal_links = require('./internal-links-D7poW27s.js');
+const require_external_link = require('./external-link-N6pHzsZ9.js');
+const require_internal_link = require('./internal-link-CQYfLFmN.js');
+const require_context = require('./context-CDuykLw5.js');
+const require_icons = require('./icons-UUg8_T_o.js');
+const require_logo_header = require('./logo-header-B-cabrdp.js');
+const require_z_index = require('./z-index-BdObyvJF.js');
+const require_links = require('./links-C37r2iCr.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-Dx2Rvp02.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tablet-and-below-Dx2Rvp02.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/tablet-and-below-sMts1JEc.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-TcghBJyz.mjs";
+import { INTERNAL_LINKS } from "./internal-links-DOdRudQQ.mjs";
+import { external_link_default } from "./external-link-B7TYHbGX.mjs";
+import { HeaderContext } from "./context-rWQ3FoMt.mjs";
+import { Arrow, Member } from "./icons-CQv9VD7t.mjs";
+import { logo_header_default } from "./logo-header-ZUiyUo-f.mjs";
+import { ZIndex } from "./z-index-CPbhhoLg.mjs";
+import { checkReferrer } from "./links-CZvBgl6Y.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-sMts1JEc.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tablet-and-below-sMts1JEc.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/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 };

package/lib/text-button-DkD8OA65.mjs

@@ -0,0 +1,66 @@
+import { SIZE, STYLE } from "./constants-oTHAnh6r.mjs";
+import { P1, P2 } from "./paragraph-QihuIWot.mjs";
+import { THEME } from "./theme-BG6yZVj-.mjs";
+import { getActiveContainerTheme, getContainerTheme, getDisabledContainerTheme } from "./theme-gPGrAR2u.mjs";
+import { useMemo } from "react";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/button/components/text-button/index.tsx
+const TextButton = ({ text, leftIconComponent, rightIconComponent, size = SIZE.s, theme = THEME.normal, style = STYLE.dark, active = false, disabled = false, loading = false, className = "" }) => {
+	const TextJSX = useMemo(() => size === SIZE.s ? /* @__PURE__ */ jsx(P2, {
+		text,
+		weight: P2.Weight.bold
+	}) : /* @__PURE__ */ jsx(P1, {
+		text,
+		weight: P1.Weight.bold
+	}), [size, text]);
+	const themeClass = useMemo(() => {
+		return (disabled ? getDisabledContainerTheme : active ? getActiveContainerTheme : getContainerTheme)(theme, style);
+	}, [
+		disabled,
+		active,
+		theme,
+		style
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("flex items-center", {
+			"cursor-default": disabled,
+			"cursor-pointer": !disabled
+		}, themeClass, className),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "relative flex justify-center items-center",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: clsx("flex justify-center items-center", {
+					"opacity-0": loading,
+					"opacity-100": !loading
+				}),
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: "flex items-center mr-[4px]",
+						children: leftIconComponent
+					}),
+					TextJSX,
+					/* @__PURE__ */ jsx("div", {
+						className: "flex items-center ml-[4px]",
+						children: rightIconComponent
+					})
+				]
+			}), /* @__PURE__ */ jsx("span", { className: clsx("inline-block absolute box-border animate-spin", "border-2 border-solid border-gray-400 border-t-gray-600 rounded-[50%]", {
+				"size-[18px]": size === SIZE.s,
+				"size-[24px]": size === SIZE.l
+			}, {
+				"opacity-0": !loading,
+				"opacity-100": loading
+			}) })]
+		})
+	});
+};
+TextButton.Size = SIZE;
+TextButton.Style = STYLE;
+TextButton.Theme = THEME;
+var text_button_default = TextButton;
+
+//#endregion
+export { text_button_default };
+//# sourceMappingURL=text-button-DkD8OA65.mjs.map

package/lib/text-button-DkD8OA65.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-button-DkD8OA65.mjs","names":["TextButton: FC<TextButtonProps> & {\n  Size: typeof SIZE\n  Style: typeof STYLE\n  Theme: typeof THEME\n}"],"sources":["../src/button/components/text-button/index.tsx"],"sourcesContent":["import { type FC, type ReactElement, useMemo } from 'react'\nimport clsx from 'clsx'\n// components\nimport { P1, P2 } from '../../../text/paragraph'\n// constants\nimport { SIZE, type Size, STYLE, type Style } from '../../constants'\nimport { THEME, type Theme } from '../../../constants/theme'\n// utils\nimport {\n  getContainerTheme,\n  getActiveContainerTheme,\n  getDisabledContainerTheme,\n} from './theme'\n\ntype TextButtonProps = {\n  text: string\n  leftIconComponent?: ReactElement\n  rightIconComponent?: ReactElement\n  size?: Size\n  style?: Style\n  theme?: Theme\n  active?: boolean\n  disabled?: boolean\n  loading?: boolean\n  className?: string\n}\nconst TextButton: FC<TextButtonProps> & {\n  Size: typeof SIZE\n  Style: typeof STYLE\n  Theme: typeof THEME\n} = ({\n  text,\n  leftIconComponent,\n  rightIconComponent,\n  size = SIZE.s,\n  theme = THEME.normal,\n  style = STYLE.dark,\n  active = false,\n  disabled = false,\n  loading = false,\n  className = '',\n}) => {\n  const TextJSX = useMemo(\n    () =>\n      size === SIZE.s ? (\n        <P2 text={text} weight={P2.Weight.bold} />\n      ) : (\n        <P1 text={text} weight={P1.Weight.bold} />\n      ),\n    [size, text]\n  )\n  const themeClass = useMemo(() => {\n    const themeFunc = disabled\n      ? getDisabledContainerTheme\n      : active\n        ? getActiveContainerTheme\n        : getContainerTheme\n    return themeFunc(theme, style)\n  }, [disabled, active, theme, style])\n\n  return (\n    <div\n      className={clsx(\n        'flex items-center',\n        {\n          'cursor-default': disabled,\n          'cursor-pointer': !disabled,\n        },\n        themeClass,\n        className\n      )}\n    >\n      <div className=\"relative flex justify-center items-center\">\n        <div\n          className={clsx('flex justify-center items-center', {\n            'opacity-0': loading,\n            'opacity-100': !loading,\n          })}\n        >\n          <div className=\"flex items-center mr-[4px]\">{leftIconComponent}</div>\n          {TextJSX}\n          <div className=\"flex items-center ml-[4px]\">{rightIconComponent}</div>\n        </div>\n        <span\n          className={clsx(\n            'inline-block absolute box-border animate-spin',\n            'border-2 border-solid border-gray-400 border-t-gray-600 rounded-[50%]',\n            {\n              'size-[18px]': size === SIZE.s,\n              'size-[24px]': size === SIZE.l,\n            },\n            {\n              'opacity-0': !loading,\n              'opacity-100': loading,\n            }\n          )}\n        />\n      </div>\n    </div>\n  )\n}\nTextButton.Size = SIZE\nTextButton.Style = STYLE\nTextButton.Theme = THEME\n\nexport default TextButton\n"],"mappings":";;;;;;;;;AA0BA,MAAMA,cAID,EACH,MACA,mBACA,oBACA,OAAO,KAAK,GACZ,QAAQ,MAAM,QACd,QAAQ,MAAM,MACd,SAAS,OACT,WAAW,OACX,UAAU,OACV,YAAY,SACR;CACJ,MAAM,UAAU,cAEZ,SAAS,KAAK,IACZ,oBAAC;EAAS;EAAM,QAAQ,GAAG,OAAO;GAAQ,GAE1C,oBAAC;EAAS;EAAM,QAAQ,GAAG,OAAO;GAAQ,EAE9C,CAAC,MAAM,KAAK,CACb;CACD,MAAM,aAAa,cAAc;AAM/B,UALkB,WACd,4BACA,SACE,0BACA,mBACW,OAAO,MAAM;IAC7B;EAAC;EAAU;EAAQ;EAAO;EAAM,CAAC;AAEpC,QACE,oBAAC;EACC,WAAW,KACT,qBACA;GACE,kBAAkB;GAClB,kBAAkB,CAAC;GACpB,EACD,YACA,UACD;YAED,qBAAC;GAAI,WAAU;cACb,qBAAC;IACC,WAAW,KAAK,oCAAoC;KAClD,aAAa;KACb,eAAe,CAAC;KACjB,CAAC;;KAEF,oBAAC;MAAI,WAAU;gBAA8B;OAAwB;KACpE;KACD,oBAAC;MAAI,WAAU;gBAA8B;OAAyB;;KAClE,EACN,oBAAC,UACC,WAAW,KACT,iDACA,yEACA;IACE,eAAe,SAAS,KAAK;IAC7B,eAAe,SAAS,KAAK;IAC9B,EACD;IACE,aAAa,CAAC;IACd,eAAe;IAChB,CACF,GACD;IACE;GACF;;AAGV,WAAW,OAAO;AAClB,WAAW,QAAQ;AACnB,WAAW,QAAQ;AAEnB,0BAAe"}

package/lib/text-button-DlMVqsvV.js

@@ -0,0 +1,75 @@
+const require_chunk = require('./chunk-BxBTb9qk.js');
+const require_constants = require('./constants-BmxSMOOn.js');
+const require_paragraph = require('./paragraph-Bve022HS.js');
+const require_theme = require('./theme-DDBlIbeS.js');
+const require_theme$1 = require('./theme-ingLagfo.js');
+let react = require("react");
+react = require_chunk.__toESM(react);
+let clsx = require("clsx");
+clsx = require_chunk.__toESM(clsx);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
+
+//#region src/button/components/text-button/index.tsx
+const TextButton = ({ text, leftIconComponent, rightIconComponent, size = require_constants.SIZE.s, theme = require_theme.THEME.normal, style = require_constants.STYLE.dark, active = false, disabled = false, loading = false, className = "" }) => {
+	const TextJSX = (0, react.useMemo)(() => size === require_constants.SIZE.s ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_paragraph.P2, {
+		text,
+		weight: require_paragraph.P2.Weight.bold
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_paragraph.P1, {
+		text,
+		weight: require_paragraph.P1.Weight.bold
+	}), [size, text]);
+	const themeClass = (0, react.useMemo)(() => {
+		return (disabled ? require_theme$1.getDisabledContainerTheme : active ? require_theme$1.getActiveContainerTheme : require_theme$1.getContainerTheme)(theme, style);
+	}, [
+		disabled,
+		active,
+		theme,
+		style
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, clsx.default)("flex items-center", {
+			"cursor-default": disabled,
+			"cursor-pointer": !disabled
+		}, themeClass, className),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "relative flex justify-center items-center",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: (0, clsx.default)("flex justify-center items-center", {
+					"opacity-0": loading,
+					"opacity-100": !loading
+				}),
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "flex items-center mr-[4px]",
+						children: leftIconComponent
+					}),
+					TextJSX,
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "flex items-center ml-[4px]",
+						children: rightIconComponent
+					})
+				]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: (0, clsx.default)("inline-block absolute box-border animate-spin", "border-2 border-solid border-gray-400 border-t-gray-600 rounded-[50%]", {
+				"size-[18px]": size === require_constants.SIZE.s,
+				"size-[24px]": size === require_constants.SIZE.l
+			}, {
+				"opacity-0": !loading,
+				"opacity-100": loading
+			}) })]
+		})
+	});
+};
+TextButton.Size = require_constants.SIZE;
+TextButton.Style = require_constants.STYLE;
+TextButton.Theme = require_theme.THEME;
+var text_button_default = TextButton;
+
+//#endregion
+Object.defineProperty(exports, 'text_button_default', {
+  enumerable: true,
+  get: function () {
+    return text_button_default;
+  }
+});
+//# sourceMappingURL=text-button-DlMVqsvV.js.map

package/lib/text-button-DlMVqsvV.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-button-DlMVqsvV.js","names":["TextButton: FC<TextButtonProps> & {\n  Size: typeof SIZE\n  Style: typeof STYLE\n  Theme: typeof THEME\n}","SIZE","THEME","STYLE","P2","P1","getDisabledContainerTheme","getActiveContainerTheme","getContainerTheme"],"sources":["../src/button/components/text-button/index.tsx"],"sourcesContent":["import { type FC, type ReactElement, useMemo } from 'react'\nimport clsx from 'clsx'\n// components\nimport { P1, P2 } from '../../../text/paragraph'\n// constants\nimport { SIZE, type Size, STYLE, type Style } from '../../constants'\nimport { THEME, type Theme } from '../../../constants/theme'\n// utils\nimport {\n  getContainerTheme,\n  getActiveContainerTheme,\n  getDisabledContainerTheme,\n} from './theme'\n\ntype TextButtonProps = {\n  text: string\n  leftIconComponent?: ReactElement\n  rightIconComponent?: ReactElement\n  size?: Size\n  style?: Style\n  theme?: Theme\n  active?: boolean\n  disabled?: boolean\n  loading?: boolean\n  className?: string\n}\nconst TextButton: FC<TextButtonProps> & {\n  Size: typeof SIZE\n  Style: typeof STYLE\n  Theme: typeof THEME\n} = ({\n  text,\n  leftIconComponent,\n  rightIconComponent,\n  size = SIZE.s,\n  theme = THEME.normal,\n  style = STYLE.dark,\n  active = false,\n  disabled = false,\n  loading = false,\n  className = '',\n}) => {\n  const TextJSX = useMemo(\n    () =>\n      size === SIZE.s ? (\n        <P2 text={text} weight={P2.Weight.bold} />\n      ) : (\n        <P1 text={text} weight={P1.Weight.bold} />\n      ),\n    [size, text]\n  )\n  const themeClass = useMemo(() => {\n    const themeFunc = disabled\n      ? getDisabledContainerTheme\n      : active\n        ? getActiveContainerTheme\n        : getContainerTheme\n    return themeFunc(theme, style)\n  }, [disabled, active, theme, style])\n\n  return (\n    <div\n      className={clsx(\n        'flex items-center',\n        {\n          'cursor-default': disabled,\n          'cursor-pointer': !disabled,\n        },\n        themeClass,\n        className\n      )}\n    >\n      <div className=\"relative flex justify-center items-center\">\n        <div\n          className={clsx('flex justify-center items-center', {\n            'opacity-0': loading,\n            'opacity-100': !loading,\n          })}\n        >\n          <div className=\"flex items-center mr-[4px]\">{leftIconComponent}</div>\n          {TextJSX}\n          <div className=\"flex items-center ml-[4px]\">{rightIconComponent}</div>\n        </div>\n        <span\n          className={clsx(\n            'inline-block absolute box-border animate-spin',\n            'border-2 border-solid border-gray-400 border-t-gray-600 rounded-[50%]',\n            {\n              'size-[18px]': size === SIZE.s,\n              'size-[24px]': size === SIZE.l,\n            },\n            {\n              'opacity-0': !loading,\n              'opacity-100': loading,\n            }\n          )}\n        />\n      </div>\n    </div>\n  )\n}\nTextButton.Size = SIZE\nTextButton.Style = STYLE\nTextButton.Theme = THEME\n\nexport default TextButton\n"],"mappings":";;;;;;;;;;;;;AA0BA,MAAMA,cAID,EACH,MACA,mBACA,oBACA,OAAOC,uBAAK,GACZ,QAAQC,oBAAM,QACd,QAAQC,wBAAM,MACd,SAAS,OACT,WAAW,OACX,UAAU,OACV,YAAY,SACR;CACJ,MAAM,mCAEF,SAASF,uBAAK,IACZ,2CAACG;EAAS;EAAM,QAAQA,qBAAG,OAAO;GAAQ,GAE1C,2CAACC;EAAS;EAAM,QAAQA,qBAAG,OAAO;GAAQ,EAE9C,CAAC,MAAM,KAAK,CACb;CACD,MAAM,sCAA2B;AAM/B,UALkB,WACdC,4CACA,SACEC,0CACAC,mCACW,OAAO,MAAM;IAC7B;EAAC;EAAU;EAAQ;EAAO;EAAM,CAAC;AAEpC,QACE,2CAAC;EACC,6BACE,qBACA;GACE,kBAAkB;GAClB,kBAAkB,CAAC;GACpB,EACD,YACA,UACD;YAED,4CAAC;GAAI,WAAU;cACb,4CAAC;IACC,6BAAgB,oCAAoC;KAClD,aAAa;KACb,eAAe,CAAC;KACjB,CAAC;;KAEF,2CAAC;MAAI,WAAU;gBAA8B;OAAwB;KACpE;KACD,2CAAC;MAAI,WAAU;gBAA8B;OAAyB;;KAClE,EACN,2CAAC,UACC,6BACE,iDACA,yEACA;IACE,eAAe,SAASP,uBAAK;IAC7B,eAAe,SAASA,uBAAK;IAC9B,EACD;IACE,aAAa,CAAC;IACd,eAAe;IAChB,CACF,GACD;IACE;GACF;;AAGV,WAAW,OAAOA;AAClB,WAAW,QAAQE;AACnB,WAAW,QAAQD;AAEnB,0BAAe"}

package/lib/theme-B4rsurcB.js

@@ -0,0 +1,58 @@
+const require_theme = require('./theme-DDBlIbeS.js');
+
+//#region src/button/components/icon-with-text-button/theme.ts
+const getIconWithTextButtonTheme = (theme, isActive, isDisabled) => {
+	if (isDisabled) return {
+		color: "text-gray-400",
+		hoverColor: "hover:text-gray-400",
+		svgBgColor: "[&>svg]:bg-gray-400",
+		svgHoverBgColor: "[&>svg]:hover:bg-gray-400"
+	};
+	switch (isActive ? `${theme}-active` : theme) {
+		case require_theme.THEME.photography: return {
+			color: "text-gray-200",
+			hoverColor: "hover:text-supportive-pastel",
+			svgBgColor: "[&>svg]:bg-gray-200",
+			svgHoverBgColor: "[&>svg]:hover:bg-supportive-pastel"
+		};
+		case `${require_theme.THEME.photography}-active`: return {
+			color: "text-supportive-pastel",
+			hoverColor: "hover:text-supportive-pastel",
+			svgBgColor: "[&>svg]:bg-supportive-pastel",
+			svgHoverBgColor: "[&>svg]:hover:bg-supportive-pastel"
+		};
+		case require_theme.THEME.transparent: return {
+			color: "text-gray-100",
+			hoverColor: "hover:text-gray-200",
+			svgBgColor: "[&>svg]:bg-gray-100",
+			svgHoverBgColor: "[&>svg]:hover:bg-gray-200"
+		};
+		case `${require_theme.THEME.transparent}-active`: return {
+			color: "text-gray-white",
+			hoverColor: "hover:text-gray-white",
+			svgBgColor: "[&>svg]:bg-gray-white",
+			svgHoverBgColor: "[&>svg]:hover:bg-gray-white"
+		};
+		case `${require_theme.THEME.normal}-active`: return {
+			color: "text-brand-heavy",
+			hoverColor: "hover:text-brand-heavy",
+			svgBgColor: "[&>svg]:bg-brand-heavy",
+			svgHoverBgColor: "[&>svg]:hover:bg-brand-heavy"
+		};
+		default: return {
+			color: "text-gray-600",
+			hoverColor: "hover:text-brand-heavy",
+			svgBgColor: "[&>svg]:bg-gray-600",
+			svgHoverBgColor: "[&>svg]:hover:bg-brand-heavy"
+		};
+	}
+};
+
+//#endregion
+Object.defineProperty(exports, 'getIconWithTextButtonTheme', {
+  enumerable: true,
+  get: function () {
+    return getIconWithTextButtonTheme;
+  }
+});
+//# sourceMappingURL=theme-B4rsurcB.js.map

package/lib/theme-B4rsurcB.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-B4rsurcB.js","names":["THEME"],"sources":["../src/button/components/icon-with-text-button/theme.ts"],"sourcesContent":["import { THEME, type Theme } from '../../../constants/theme'\n\nexport const getIconWithTextButtonTheme = (\n  theme: Theme,\n  isActive: boolean,\n  isDisabled: boolean\n) => {\n  if (isDisabled) {\n    return {\n      color: 'text-gray-400',\n      hoverColor: 'hover:text-gray-400',\n      svgBgColor: '[&>svg]:bg-gray-400',\n      svgHoverBgColor: '[&>svg]:hover:bg-gray-400',\n    }\n  }\n\n  const switchKey = isActive ? `${theme}-active` : theme\n  switch (switchKey) {\n    case THEME.photography:\n      return {\n        color: 'text-gray-200',\n        hoverColor: 'hover:text-supportive-pastel',\n        svgBgColor: '[&>svg]:bg-gray-200',\n        svgHoverBgColor: '[&>svg]:hover:bg-supportive-pastel',\n      }\n    case `${THEME.photography}-active`:\n      return {\n        color: 'text-supportive-pastel',\n        hoverColor: 'hover:text-supportive-pastel',\n        svgBgColor: '[&>svg]:bg-supportive-pastel',\n        svgHoverBgColor: '[&>svg]:hover:bg-supportive-pastel',\n      }\n    case THEME.transparent:\n      return {\n        color: 'text-gray-100',\n        hoverColor: 'hover:text-gray-200',\n        svgBgColor: '[&>svg]:bg-gray-100',\n        svgHoverBgColor: '[&>svg]:hover:bg-gray-200',\n      }\n    case `${THEME.transparent}-active`:\n      return {\n        color: 'text-gray-white',\n        hoverColor: 'hover:text-gray-white',\n        svgBgColor: '[&>svg]:bg-gray-white',\n        svgHoverBgColor: '[&>svg]:hover:bg-gray-white',\n      }\n    case `${THEME.normal}-active`:\n      return {\n        color: 'text-brand-heavy',\n        hoverColor: 'hover:text-brand-heavy',\n        svgBgColor: '[&>svg]:bg-brand-heavy',\n        svgHoverBgColor: '[&>svg]:hover:bg-brand-heavy',\n      }\n    default:\n      return {\n        color: 'text-gray-600',\n        hoverColor: 'hover:text-brand-heavy',\n        svgBgColor: '[&>svg]:bg-gray-600',\n        svgHoverBgColor: '[&>svg]:hover:bg-brand-heavy',\n      }\n  }\n}\n"],"mappings":";;;AAEA,MAAa,8BACX,OACA,UACA,eACG;AACH,KAAI,WACF,QAAO;EACL,OAAO;EACP,YAAY;EACZ,YAAY;EACZ,iBAAiB;EAClB;AAIH,SADkB,WAAW,GAAG,MAAM,WAAW,OACjD;EACE,KAAKA,oBAAM,YACT,QAAO;GACL,OAAO;GACP,YAAY;GACZ,YAAY;GACZ,iBAAiB;GAClB;EACH,KAAK,GAAGA,oBAAM,YAAY,SACxB,QAAO;GACL,OAAO;GACP,YAAY;GACZ,YAAY;GACZ,iBAAiB;GAClB;EACH,KAAKA,oBAAM,YACT,QAAO;GACL,OAAO;GACP,YAAY;GACZ,YAAY;GACZ,iBAAiB;GAClB;EACH,KAAK,GAAGA,oBAAM,YAAY,SACxB,QAAO;GACL,OAAO;GACP,YAAY;GACZ,YAAY;GACZ,iBAAiB;GAClB;EACH,KAAK,GAAGA,oBAAM,OAAO,SACnB,QAAO;GACL,OAAO;GACP,YAAY;GACZ,YAAY;GACZ,iBAAiB;GAClB;EACH,QACE,QAAO;GACL,OAAO;GACP,YAAY;GACZ,YAAY;GACZ,iBAAiB;GAClB"}