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

package/lib/icon-button-Vqwyow05.js

@@ -0,0 +1,36 @@
+const require_chunk = require('./chunk-BxBTb9qk.js');
+const require_constants = require('./constants-BmxSMOOn.js');
+const require_theme = require('./theme-DDBlIbeS.js');
+const require_theme$1 = require('./theme-B5GNXw4M.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/button/components/icon-button/index.tsx
+const IconButton = ({ iconComponent, theme = require_theme.THEME.normal, type = require_constants.TYPE.primary, disabled = false, active = false, className = "", onClick = () => {} }) => {
+	const themeClass = type === require_constants.TYPE.primary ? require_theme$1.getPrimaryIconButtonTheme(theme, active, disabled) : require_theme$1.getSecondaryIconButtonTheme(theme, active, disabled);
+	const handleClick = (e) => {
+		if (disabled) return;
+		e.stopPropagation();
+		onClick(e);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		className: (0, clsx.default)("flex", "[&>svg]:w-[24px] [&>svg]:h-[24px]", disabled ? "cursor-default" : "cursor-pointer", themeClass, className),
+		onClick: handleClick,
+		type: "button",
+		children: iconComponent
+	});
+};
+IconButton.Theme = require_theme.THEME;
+IconButton.Type = require_constants.TYPE;
+var icon_button_default = IconButton;
+
+//#endregion
+Object.defineProperty(exports, 'icon_button_default', {
+  enumerable: true,
+  get: function () {
+    return icon_button_default;
+  }
+});
+//# sourceMappingURL=icon-button-Vqwyow05.js.map

package/lib/icon-button-Vqwyow05.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button-Vqwyow05.js","names":["IconButton: React.FC<IconButtonProps> & {\n  Theme: typeof THEME\n  Type: typeof TYPE\n}","THEME","TYPE","getPrimaryIconButtonTheme","getSecondaryIconButtonTheme"],"sources":["../src/button/components/icon-button/index.tsx"],"sourcesContent":["import type React from 'react'\nimport clsx from 'clsx'\n// constants\nimport { THEME, type Theme } from '../../../constants/theme'\nimport { TYPE, type Type } from '../../constants'\n// theme\nimport { getPrimaryIconButtonTheme, getSecondaryIconButtonTheme } from './theme'\n\ntype IconButtonProps = {\n  iconComponent: React.ReactElement\n  theme?: Theme\n  type?: Type\n  disabled?: boolean\n  active?: boolean\n  className?: string\n  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void\n}\nconst IconButton: React.FC<IconButtonProps> & {\n  Theme: typeof THEME\n  Type: typeof TYPE\n} = ({\n  iconComponent,\n  theme = THEME.normal,\n  type = TYPE.primary,\n  disabled = false,\n  active = false,\n  className = '',\n  onClick = () => {},\n}) => {\n  const themeClass =\n    type === TYPE.primary\n      ? getPrimaryIconButtonTheme(theme, active, disabled)\n      : getSecondaryIconButtonTheme(theme, active, disabled)\n\n  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n    if (disabled) {\n      return\n    }\n    e.stopPropagation()\n    onClick(e)\n  }\n  return (\n    <button\n      className={clsx(\n        'flex',\n        '[&>svg]:w-[24px] [&>svg]:h-[24px]',\n        disabled ? 'cursor-default' : 'cursor-pointer',\n        themeClass,\n        className\n      )}\n      onClick={handleClick}\n      type=\"button\"\n    >\n      {iconComponent}\n    </button>\n  )\n}\n\nIconButton.Theme = THEME\nIconButton.Type = TYPE\n\nexport default IconButton\n"],"mappings":";;;;;;;;;;AAiBA,MAAMA,cAGD,EACH,eACA,QAAQC,oBAAM,QACd,OAAOC,uBAAK,SACZ,WAAW,OACX,SAAS,OACT,YAAY,IACZ,gBAAgB,SACZ;CACJ,MAAM,aACJ,SAASA,uBAAK,UACVC,0CAA0B,OAAO,QAAQ,SAAS,GAClDC,4CAA4B,OAAO,QAAQ,SAAS;CAE1D,MAAM,eAAe,MAA2C;AAC9D,MAAI,SACF;AAEF,IAAE,iBAAiB;AACnB,UAAQ,EAAE;;AAEZ,QACE,2CAAC;EACC,6BACE,QACA,qCACA,WAAW,mBAAmB,kBAC9B,YACA,UACD;EACD,SAAS;EACT,MAAK;YAEJ;GACM;;AAIb,WAAW,QAAQH;AACnB,WAAW,OAAOC;AAElB,0BAAe"}

package/lib/icon-link-Kzj6ZGDD.js

@@ -0,0 +1,43 @@
+const require_chunk = require('./chunk-BxBTb9qk.js');
+const require_paragraph = require('./paragraph-Bve022HS.js');
+const require_theme = require('./theme-DDBlIbeS.js');
+const require_external_link = require('./external-link-Dnw1WSM1.js');
+const require_internal_link = require('./internal-link-CKuvpRC8.js');
+const require_context = require('./context-DW8qh_Q3.js');
+const require_icons = require('./icons-OsNrxOWn.js');
+const require_theme$1 = require('./theme-DjRdV3Iq.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/hamburger-menu/components/icon-link.tsx
+const IconLink = ({ label, icon, to, target }) => {
+	const { theme, releaseBranch, isLinkExternal } = (0, react.useContext)(require_context.HeaderContext);
+	const footerTheme = theme === require_theme.THEME.transparent ? require_theme.THEME.normal : theme;
+	const LinkComponent = isLinkExternal ? require_external_link.external_link_default : require_internal_link.internal_link_default;
+	const { color, hoverColor, hoverBgColor, svgHoverBgColor, svgBgColor, activeColor, activeBgColor, svgActiveBgColor } = require_theme$1.selectHamburgerFooterTheme(footerTheme);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinkComponent, {
+		to,
+		target,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: (0, clsx.default)("py-[8px] px-[32px] flex items-center", "[&>svg]:h-[18px] [&>svg]:w-[18px] [&>svg]:mr-[4px]", color, hoverColor, hoverBgColor, svgHoverBgColor, svgBgColor, activeColor, activeBgColor, svgActiveBgColor),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.Icon, {
+				filename: icon,
+				releaseBranch
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_paragraph.P2, { text: label })]
+		})
+	});
+};
+var icon_link_default = IconLink;
+
+//#endregion
+Object.defineProperty(exports, 'icon_link_default', {
+  enumerable: true,
+  get: function () {
+    return icon_link_default;
+  }
+});
+//# sourceMappingURL=icon-link-Kzj6ZGDD.js.map

package/lib/icon-link-Kzj6ZGDD.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-link-Kzj6ZGDD.js","names":["IconLink: FC<IconLinkProps>","HeaderContext","THEME","ExternalLink","InternalLink","selectHamburgerFooterTheme","Icon","P2"],"sources":["../src/hamburger-menu/components/icon-link.tsx"],"sourcesContent":["import { useContext, type FC } from 'react'\nimport clsx from 'clsx'\n// context\nimport { HeaderContext } from '../../header/context'\n// theme\nimport { THEME } from '../../constants/theme'\n// utils\nimport { selectHamburgerFooterTheme } from '../utils/theme'\n// icon\nimport { Icon } from '../../icons'\n// text\nimport { P2 } from '../../text/paragraph'\n// link\nimport { ExternalLink, InternalLink } from '../../customized-link'\nimport type { LinkTarget } from '../../customized-link/type'\n\ntype IconLinkProps = {\n  label: string\n  icon: string\n  to: string\n  target: LinkTarget\n}\nconst IconLink: FC<IconLinkProps> = ({ label, icon, to, target }) => {\n  const { theme, releaseBranch, isLinkExternal } = useContext(HeaderContext)\n  const footerTheme = theme === THEME.transparent ? THEME.normal : theme\n  const LinkComponent = isLinkExternal ? ExternalLink : InternalLink\n  const {\n    color,\n    hoverColor,\n    hoverBgColor,\n    svgHoverBgColor,\n    svgBgColor,\n    activeColor,\n    activeBgColor,\n    svgActiveBgColor,\n  } = selectHamburgerFooterTheme(footerTheme)\n  return (\n    <LinkComponent to={to} target={target}>\n      <div\n        className={clsx(\n          'py-[8px] px-[32px] flex items-center',\n          '[&>svg]:h-[18px] [&>svg]:w-[18px] [&>svg]:mr-[4px]',\n          color,\n          hoverColor,\n          hoverBgColor,\n          svgHoverBgColor,\n          svgBgColor,\n          activeColor,\n          activeBgColor,\n          svgActiveBgColor\n        )}\n      >\n        <Icon filename={icon} releaseBranch={releaseBranch} />\n        <P2 text={label} />\n      </div>\n    </LinkComponent>\n  )\n}\n\nexport default IconLink\n"],"mappings":";;;;;;;;;;;;;;;;AAsBA,MAAMA,YAA+B,EAAE,OAAO,MAAM,IAAI,aAAa;CACnE,MAAM,EAAE,OAAO,eAAe,yCAA8BC,8BAAc;CAC1E,MAAM,cAAc,UAAUC,oBAAM,cAAcA,oBAAM,SAAS;CACjE,MAAM,gBAAgB,iBAAiBC,8CAAeC;CACtD,MAAM,EACJ,OACA,YACA,cACA,iBACA,YACA,aACA,eACA,qBACEC,2CAA2B,YAAY;AAC3C,QACE,2CAAC;EAAkB;EAAY;YAC7B,4CAAC;GACC,6BACE,wCACA,sDACA,OACA,YACA,cACA,iBACA,YACA,aACA,eACA,iBACD;cAED,2CAACC;IAAK,UAAU;IAAqB;KAAiB,EACtD,2CAACC,wBAAG,MAAM,QAAS;IACf;GACQ;;AAIpB,wBAAe"}

package/lib/icon-link-wXlulu3j.mjs

@@ -0,0 +1,34 @@
+import { internal_link_default } from "./internal-link-JeC0sVNF.mjs";
+import { P2 } from "./paragraph-QihuIWot.mjs";
+import { THEME } from "./theme-BG6yZVj-.mjs";
+import { external_link_default } from "./external-link-DrDvZqvE.mjs";
+import { HeaderContext } from "./context-Bg1CbUYL.mjs";
+import { Icon } from "./icons-D_G_3m8-.mjs";
+import { selectHamburgerFooterTheme } from "./theme-CjHrkZbk.mjs";
+import { useContext } from "react";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/hamburger-menu/components/icon-link.tsx
+const IconLink = ({ label, icon, to, target }) => {
+	const { theme, releaseBranch, isLinkExternal } = useContext(HeaderContext);
+	const footerTheme = theme === THEME.transparent ? THEME.normal : theme;
+	const LinkComponent = isLinkExternal ? external_link_default : internal_link_default;
+	const { color, hoverColor, hoverBgColor, svgHoverBgColor, svgBgColor, activeColor, activeBgColor, svgActiveBgColor } = selectHamburgerFooterTheme(footerTheme);
+	return /* @__PURE__ */ jsx(LinkComponent, {
+		to,
+		target,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: clsx("py-[8px] px-[32px] flex items-center", "[&>svg]:h-[18px] [&>svg]:w-[18px] [&>svg]:mr-[4px]", color, hoverColor, hoverBgColor, svgHoverBgColor, svgBgColor, activeColor, activeBgColor, svgActiveBgColor),
+			children: [/* @__PURE__ */ jsx(Icon, {
+				filename: icon,
+				releaseBranch
+			}), /* @__PURE__ */ jsx(P2, { text: label })]
+		})
+	});
+};
+var icon_link_default = IconLink;
+
+//#endregion
+export { icon_link_default };
+//# sourceMappingURL=icon-link-wXlulu3j.mjs.map

package/lib/icon-link-wXlulu3j.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-link-wXlulu3j.mjs","names":["IconLink: FC<IconLinkProps>","ExternalLink","InternalLink"],"sources":["../src/hamburger-menu/components/icon-link.tsx"],"sourcesContent":["import { useContext, type FC } from 'react'\nimport clsx from 'clsx'\n// context\nimport { HeaderContext } from '../../header/context'\n// theme\nimport { THEME } from '../../constants/theme'\n// utils\nimport { selectHamburgerFooterTheme } from '../utils/theme'\n// icon\nimport { Icon } from '../../icons'\n// text\nimport { P2 } from '../../text/paragraph'\n// link\nimport { ExternalLink, InternalLink } from '../../customized-link'\nimport type { LinkTarget } from '../../customized-link/type'\n\ntype IconLinkProps = {\n  label: string\n  icon: string\n  to: string\n  target: LinkTarget\n}\nconst IconLink: FC<IconLinkProps> = ({ label, icon, to, target }) => {\n  const { theme, releaseBranch, isLinkExternal } = useContext(HeaderContext)\n  const footerTheme = theme === THEME.transparent ? THEME.normal : theme\n  const LinkComponent = isLinkExternal ? ExternalLink : InternalLink\n  const {\n    color,\n    hoverColor,\n    hoverBgColor,\n    svgHoverBgColor,\n    svgBgColor,\n    activeColor,\n    activeBgColor,\n    svgActiveBgColor,\n  } = selectHamburgerFooterTheme(footerTheme)\n  return (\n    <LinkComponent to={to} target={target}>\n      <div\n        className={clsx(\n          'py-[8px] px-[32px] flex items-center',\n          '[&>svg]:h-[18px] [&>svg]:w-[18px] [&>svg]:mr-[4px]',\n          color,\n          hoverColor,\n          hoverBgColor,\n          svgHoverBgColor,\n          svgBgColor,\n          activeColor,\n          activeBgColor,\n          svgActiveBgColor\n        )}\n      >\n        <Icon filename={icon} releaseBranch={releaseBranch} />\n        <P2 text={label} />\n      </div>\n    </LinkComponent>\n  )\n}\n\nexport default IconLink\n"],"mappings":";;;;;;;;;;;;AAsBA,MAAMA,YAA+B,EAAE,OAAO,MAAM,IAAI,aAAa;CACnE,MAAM,EAAE,OAAO,eAAe,mBAAmB,WAAW,cAAc;CAC1E,MAAM,cAAc,UAAU,MAAM,cAAc,MAAM,SAAS;CACjE,MAAM,gBAAgB,iBAAiBC,wBAAeC;CACtD,MAAM,EACJ,OACA,YACA,cACA,iBACA,YACA,aACA,eACA,qBACE,2BAA2B,YAAY;AAC3C,QACE,oBAAC;EAAkB;EAAY;YAC7B,qBAAC;GACC,WAAW,KACT,wCACA,sDACA,OACA,YACA,cACA,iBACA,YACA,aACA,eACA,iBACD;cAED,oBAAC;IAAK,UAAU;IAAqB;KAAiB,EACtD,oBAAC,MAAG,MAAM,QAAS;IACf;GACQ;;AAIpB,wBAAe"}

package/lib/icon-with-text-button-CTWmp6He.mjs

@@ -0,0 +1,31 @@
+import { P4 } from "./paragraph-QihuIWot.mjs";
+import { THEME } from "./theme-BG6yZVj-.mjs";
+import { getIconWithTextButtonTheme } from "./theme-CKrQVNS4.mjs";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/button/components/icon-with-text-button/index.tsx
+const IconWithTextButton = ({ text = "", iconComponent, theme = THEME.normal, disabled = false, active = false, hideText = false, className = "", onClick = () => {} }) => {
+	const { color, hoverColor, svgBgColor, svgHoverBgColor } = getIconWithTextButtonTheme(theme, active, disabled);
+	const handleClick = (e) => {
+		if (disabled) return;
+		e.stopPropagation();
+		onClick(e);
+	};
+	return /* @__PURE__ */ jsxs("button", {
+		className: clsx("flex flex-col items-center", "[&>svg]:w-[24px] [&>svg]:h-[24px]", color, hoverColor, svgBgColor, svgHoverBgColor, disabled ? "cursor-not-allowed" : "cursor-pointer", className),
+		type: "button",
+		onClick: handleClick,
+		children: [iconComponent, /* @__PURE__ */ jsx(P4, {
+			text,
+			weight: P4.Weight.normal,
+			className: clsx("mt-[2px] transition-opacity duration-[100ms]", hideText ? "opacity-0" : "opacity-100", hideText ? "max-h-0" : "max-h-none")
+		})]
+	});
+};
+IconWithTextButton.Theme = THEME;
+var icon_with_text_button_default = IconWithTextButton;
+
+//#endregion
+export { icon_with_text_button_default };
+//# sourceMappingURL=icon-with-text-button-CTWmp6He.mjs.map

package/lib/icon-with-text-button-CTWmp6He.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-with-text-button-CTWmp6He.mjs","names":["IconWithTextButton: FC<IconWithTextButtonProps> & {\n  Theme: typeof THEME\n}"],"sources":["../src/button/components/icon-with-text-button/index.tsx"],"sourcesContent":["import type { FC } from 'react'\nimport clsx from 'clsx'\n// constants\nimport { THEME, type Theme } from '../../../constants/theme'\n// theme\nimport { getIconWithTextButtonTheme } from './theme'\n// text\nimport { P4 } from '../../../text/paragraph'\n\ntype IconWithTextButtonProps = {\n  text?: string\n  iconComponent: React.ReactNode\n  theme?: Theme\n  disabled?: boolean\n  active?: boolean\n  hideText?: boolean\n  className?: string\n  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void\n}\nconst IconWithTextButton: FC<IconWithTextButtonProps> & {\n  Theme: typeof THEME\n} = ({\n  text = '',\n  iconComponent,\n  theme = THEME.normal,\n  disabled = false,\n  active = false,\n  hideText = false,\n  className = '',\n  onClick = () => {},\n}) => {\n  const { color, hoverColor, svgBgColor, svgHoverBgColor } =\n    getIconWithTextButtonTheme(theme, active, disabled)\n  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n    if (disabled) {\n      return\n    }\n    e.stopPropagation()\n    onClick(e)\n  }\n  return (\n    <button\n      className={clsx(\n        'flex flex-col items-center',\n        '[&>svg]:w-[24px] [&>svg]:h-[24px]',\n        color,\n        hoverColor,\n        svgBgColor,\n        svgHoverBgColor,\n        disabled ? 'cursor-not-allowed' : 'cursor-pointer',\n        className\n      )}\n      type=\"button\"\n      onClick={handleClick}\n    >\n      {iconComponent}\n      <P4\n        text={text}\n        weight={P4.Weight.normal}\n        className={clsx(\n          'mt-[2px] transition-opacity duration-[100ms]',\n          hideText ? 'opacity-0' : 'opacity-100',\n          hideText ? 'max-h-0' : 'max-h-none'\n        )}\n      />\n    </button>\n  )\n}\nIconWithTextButton.Theme = THEME\nexport default IconWithTextButton\n"],"mappings":";;;;;;;AAmBA,MAAMA,sBAED,EACH,OAAO,IACP,eACA,QAAQ,MAAM,QACd,WAAW,OACX,SAAS,OACT,WAAW,OACX,YAAY,IACZ,gBAAgB,SACZ;CACJ,MAAM,EAAE,OAAO,YAAY,YAAY,oBACrC,2BAA2B,OAAO,QAAQ,SAAS;CACrD,MAAM,eAAe,MAA2C;AAC9D,MAAI,SACF;AAEF,IAAE,iBAAiB;AACnB,UAAQ,EAAE;;AAEZ,QACE,qBAAC;EACC,WAAW,KACT,8BACA,qCACA,OACA,YACA,YACA,iBACA,WAAW,uBAAuB,kBAClC,UACD;EACD,MAAK;EACL,SAAS;aAER,eACD,oBAAC;GACO;GACN,QAAQ,GAAG,OAAO;GAClB,WAAW,KACT,gDACA,WAAW,cAAc,eACzB,WAAW,YAAY,aACxB;IACD;GACK;;AAGb,mBAAmB,QAAQ;AAC3B,oCAAe"}

package/lib/icon-with-text-button-DOj_-gz0.js

@@ -0,0 +1,39 @@
+const require_chunk = require('./chunk-BxBTb9qk.js');
+const require_paragraph = require('./paragraph-Bve022HS.js');
+const require_theme = require('./theme-DDBlIbeS.js');
+const require_theme$1 = require('./theme-B4rsurcB.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/button/components/icon-with-text-button/index.tsx
+const IconWithTextButton = ({ text = "", iconComponent, theme = require_theme.THEME.normal, disabled = false, active = false, hideText = false, className = "", onClick = () => {} }) => {
+	const { color, hoverColor, svgBgColor, svgHoverBgColor } = require_theme$1.getIconWithTextButtonTheme(theme, active, disabled);
+	const handleClick = (e) => {
+		if (disabled) return;
+		e.stopPropagation();
+		onClick(e);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		className: (0, clsx.default)("flex flex-col items-center", "[&>svg]:w-[24px] [&>svg]:h-[24px]", color, hoverColor, svgBgColor, svgHoverBgColor, disabled ? "cursor-not-allowed" : "cursor-pointer", className),
+		type: "button",
+		onClick: handleClick,
+		children: [iconComponent, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_paragraph.P4, {
+			text,
+			weight: require_paragraph.P4.Weight.normal,
+			className: (0, clsx.default)("mt-[2px] transition-opacity duration-[100ms]", hideText ? "opacity-0" : "opacity-100", hideText ? "max-h-0" : "max-h-none")
+		})]
+	});
+};
+IconWithTextButton.Theme = require_theme.THEME;
+var icon_with_text_button_default = IconWithTextButton;
+
+//#endregion
+Object.defineProperty(exports, 'icon_with_text_button_default', {
+  enumerable: true,
+  get: function () {
+    return icon_with_text_button_default;
+  }
+});
+//# sourceMappingURL=icon-with-text-button-DOj_-gz0.js.map

package/lib/icon-with-text-button-DOj_-gz0.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-with-text-button-DOj_-gz0.js","names":["IconWithTextButton: FC<IconWithTextButtonProps> & {\n  Theme: typeof THEME\n}","THEME","getIconWithTextButtonTheme","P4"],"sources":["../src/button/components/icon-with-text-button/index.tsx"],"sourcesContent":["import type { FC } from 'react'\nimport clsx from 'clsx'\n// constants\nimport { THEME, type Theme } from '../../../constants/theme'\n// theme\nimport { getIconWithTextButtonTheme } from './theme'\n// text\nimport { P4 } from '../../../text/paragraph'\n\ntype IconWithTextButtonProps = {\n  text?: string\n  iconComponent: React.ReactNode\n  theme?: Theme\n  disabled?: boolean\n  active?: boolean\n  hideText?: boolean\n  className?: string\n  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void\n}\nconst IconWithTextButton: FC<IconWithTextButtonProps> & {\n  Theme: typeof THEME\n} = ({\n  text = '',\n  iconComponent,\n  theme = THEME.normal,\n  disabled = false,\n  active = false,\n  hideText = false,\n  className = '',\n  onClick = () => {},\n}) => {\n  const { color, hoverColor, svgBgColor, svgHoverBgColor } =\n    getIconWithTextButtonTheme(theme, active, disabled)\n  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n    if (disabled) {\n      return\n    }\n    e.stopPropagation()\n    onClick(e)\n  }\n  return (\n    <button\n      className={clsx(\n        'flex flex-col items-center',\n        '[&>svg]:w-[24px] [&>svg]:h-[24px]',\n        color,\n        hoverColor,\n        svgBgColor,\n        svgHoverBgColor,\n        disabled ? 'cursor-not-allowed' : 'cursor-pointer',\n        className\n      )}\n      type=\"button\"\n      onClick={handleClick}\n    >\n      {iconComponent}\n      <P4\n        text={text}\n        weight={P4.Weight.normal}\n        className={clsx(\n          'mt-[2px] transition-opacity duration-[100ms]',\n          hideText ? 'opacity-0' : 'opacity-100',\n          hideText ? 'max-h-0' : 'max-h-none'\n        )}\n      />\n    </button>\n  )\n}\nIconWithTextButton.Theme = THEME\nexport default IconWithTextButton\n"],"mappings":";;;;;;;;;;AAmBA,MAAMA,sBAED,EACH,OAAO,IACP,eACA,QAAQC,oBAAM,QACd,WAAW,OACX,SAAS,OACT,WAAW,OACX,YAAY,IACZ,gBAAgB,SACZ;CACJ,MAAM,EAAE,OAAO,YAAY,YAAY,oBACrCC,2CAA2B,OAAO,QAAQ,SAAS;CACrD,MAAM,eAAe,MAA2C;AAC9D,MAAI,SACF;AAEF,IAAE,iBAAiB;AACnB,UAAQ,EAAE;;AAEZ,QACE,4CAAC;EACC,6BACE,8BACA,qCACA,OACA,YACA,YACA,iBACA,WAAW,uBAAuB,kBAClC,UACD;EACD,MAAK;EACL,SAAS;aAER,eACD,2CAACC;GACO;GACN,QAAQA,qBAAG,OAAO;GAClB,6BACE,gDACA,WAAW,cAAc,eACzB,WAAW,YAAY,aACxB;IACD;GACK;;AAGb,mBAAmB,QAAQF;AAC3B,oCAAe"}

package/lib/icons/constants.d.mts

@@ -1,3 +1,3 @@
-import "../index-CUE6zs36.mjs";
-import { ARROW_DIRECTION, ArrowDirection, ICON_TYPE, IconType, MEDIA_TYPE, MediaType } from "../constants-DVYCKpJ0.mjs";
+import "../index-HhQuz4hd.mjs";
+import { ARROW_DIRECTION, ArrowDirection, ICON_TYPE, IconType, MEDIA_TYPE, MediaType } from "../constants-BVpJd-Eq.mjs";
 export { ARROW_DIRECTION, ArrowDirection, ICON_TYPE, IconType, MEDIA_TYPE, MediaType };

package/lib/icons/constants.d.ts

@@ -1,3 +1,3 @@
 import "../index-H3peA2d_.js";
-import { ARROW_DIRECTION, ArrowDirection, ICON_TYPE, IconType, MEDIA_TYPE, MediaType } from "../constants-CBjyeHSl.js";
+import { ARROW_DIRECTION, ArrowDirection, ICON_TYPE, IconType, MEDIA_TYPE, MediaType } from "../constants-BkxOSlW7.js";
 export { ARROW_DIRECTION, ArrowDirection, ICON_TYPE, IconType, MEDIA_TYPE, MediaType };

package/lib/icons/constants.js

@@ -1,4 +1,4 @@
-const require_constants = require('../constants-R6EfY15A.js');
+const require_constants = require('../constants-BE7hWIZ-.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-Npoq7yu0.mjs";
+import { ARROW_DIRECTION, ICON_TYPE, MEDIA_TYPE } from "../constants-BinATQpN.mjs";
 
 export { ARROW_DIRECTION, ICON_TYPE, MEDIA_TYPE };

package/lib/icons/index.d.mts

@@ -1,8 +1,8 @@
-import "../index-CUE6zs36.mjs";
-import { RELEASE_BRANCH, ReleaseBranch } from "../release-branch-uF0B5lcE.mjs";
-import { ARROW_DIRECTION, ArrowDirection, ICON_TYPE, IconType, MEDIA_TYPE, MediaType } from "../constants-DVYCKpJ0.mjs";
+import "../index-HhQuz4hd.mjs";
+import { RELEASE_BRANCH, ReleaseBranch } from "../release-branch-IPa6pTGS.mjs";
+import { ARROW_DIRECTION, ArrowDirection, ICON_TYPE, IconType, MEDIA_TYPE, MediaType } from "../constants-BVpJd-Eq.mjs";
 import React from "react";
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime3 from "react/jsx-runtime";
 
 //#region src/icons/index.d.ts
 type IconProps = {
@@ -15,14 +15,14 @@ declare const Icon: React.FC<IconProps> & {
   Type: typeof ICON_TYPE;
   ReleaseBranch: typeof RELEASE_BRANCH;
 };
-declare const Hamburger: (releaseBranch: ReleaseBranch) => react_jsx_runtime2.JSX.Element;
-declare const Search: (releaseBranch: ReleaseBranch) => react_jsx_runtime2.JSX.Element;
-declare const KidStar: (releaseBranch: ReleaseBranch) => react_jsx_runtime2.JSX.Element;
-declare const Member: (releaseBranch: ReleaseBranch) => react_jsx_runtime2.JSX.Element;
-declare const Cross: (releaseBranch: ReleaseBranch) => react_jsx_runtime2.JSX.Element;
-declare const Home: (releaseBranch: ReleaseBranch) => react_jsx_runtime2.JSX.Element;
-declare const Topic: (releaseBranch: ReleaseBranch) => react_jsx_runtime2.JSX.Element;
-declare const Clock: (releaseBranch: ReleaseBranch) => react_jsx_runtime2.JSX.Element;
+declare const Hamburger: (releaseBranch: ReleaseBranch) => react_jsx_runtime3.JSX.Element;
+declare const Search: (releaseBranch: ReleaseBranch) => react_jsx_runtime3.JSX.Element;
+declare const KidStar: (releaseBranch: ReleaseBranch) => react_jsx_runtime3.JSX.Element;
+declare const Member: (releaseBranch: ReleaseBranch) => react_jsx_runtime3.JSX.Element;
+declare const Cross: (releaseBranch: ReleaseBranch) => react_jsx_runtime3.JSX.Element;
+declare const Home: (releaseBranch: ReleaseBranch) => react_jsx_runtime3.JSX.Element;
+declare const Topic: (releaseBranch: ReleaseBranch) => react_jsx_runtime3.JSX.Element;
+declare const Clock: (releaseBranch: ReleaseBranch) => react_jsx_runtime3.JSX.Element;
 declare const Arrow: React.FC<{
   direction?: ArrowDirection;
   releaseBranch: ReleaseBranch;

package/lib/icons/index.d.ts

@@ -1,8 +1,8 @@
 import "../index-H3peA2d_.js";
-import { RELEASE_BRANCH, ReleaseBranch } from "../release-branch-CsBbhuYE.js";
-import { ARROW_DIRECTION, ArrowDirection, ICON_TYPE, IconType, MEDIA_TYPE, MediaType } from "../constants-CBjyeHSl.js";
+import { RELEASE_BRANCH, ReleaseBranch } from "../release-branch-CnwfO6yj.js";
+import { ARROW_DIRECTION, ArrowDirection, ICON_TYPE, IconType, MEDIA_TYPE, MediaType } from "../constants-BkxOSlW7.js";
 import React from "react";
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/icons/index.d.ts
 type IconProps = {
@@ -15,14 +15,14 @@ declare const Icon: React.FC<IconProps> & {
   Type: typeof ICON_TYPE;
   ReleaseBranch: typeof RELEASE_BRANCH;
 };
-declare const Hamburger: (releaseBranch: ReleaseBranch) => react_jsx_runtime2.JSX.Element;
-declare const Search: (releaseBranch: ReleaseBranch) => react_jsx_runtime2.JSX.Element;
-declare const KidStar: (releaseBranch: ReleaseBranch) => react_jsx_runtime2.JSX.Element;
-declare const Member: (releaseBranch: ReleaseBranch) => react_jsx_runtime2.JSX.Element;
-declare const Cross: (releaseBranch: ReleaseBranch) => react_jsx_runtime2.JSX.Element;
-declare const Home: (releaseBranch: ReleaseBranch) => react_jsx_runtime2.JSX.Element;
-declare const Topic: (releaseBranch: ReleaseBranch) => react_jsx_runtime2.JSX.Element;
-declare const Clock: (releaseBranch: ReleaseBranch) => react_jsx_runtime2.JSX.Element;
+declare const Hamburger: (releaseBranch: ReleaseBranch) => react_jsx_runtime0.JSX.Element;
+declare const Search: (releaseBranch: ReleaseBranch) => react_jsx_runtime0.JSX.Element;
+declare const KidStar: (releaseBranch: ReleaseBranch) => react_jsx_runtime0.JSX.Element;
+declare const Member: (releaseBranch: ReleaseBranch) => react_jsx_runtime0.JSX.Element;
+declare const Cross: (releaseBranch: ReleaseBranch) => react_jsx_runtime0.JSX.Element;
+declare const Home: (releaseBranch: ReleaseBranch) => react_jsx_runtime0.JSX.Element;
+declare const Topic: (releaseBranch: ReleaseBranch) => react_jsx_runtime0.JSX.Element;
+declare const Clock: (releaseBranch: ReleaseBranch) => react_jsx_runtime0.JSX.Element;
 declare const Arrow: React.FC<{
   direction?: ArrowDirection;
   releaseBranch: ReleaseBranch;

package/lib/icons/index.js

@@ -1,6 +1,6 @@
-require('../release-branch-CRZV4Ivz.js');
-require('../constants-R6EfY15A.js');
-const require_icons = require('../icons-BZI6_5JJ.js');
+require('../release-branch-DmSIuJAw.js');
+require('../constants-BE7hWIZ-.js');
+const require_icons = require('../icons-OsNrxOWn.js');
 
 exports.Arrow = require_icons.Arrow;
 exports.Clock = require_icons.Clock;

package/lib/icons/index.mjs

@@ -1,5 +1,5 @@
-import "../release-branch-DNCD1uH_.mjs";
-import "../constants-Npoq7yu0.mjs";
-import { Arrow, Clock, Cross, Hamburger, Home, Icon, KidStar, Member, Search, SocialMedia, Topic } from "../icons-C5UqghX2.mjs";
+import "../release-branch-oA59oIop.mjs";
+import "../constants-BinATQpN.mjs";
+import { Arrow, Clock, Cross, Hamburger, Home, Icon, KidStar, Member, Search, SocialMedia, Topic } from "../icons-D_G_3m8-.mjs";
 
 export { Arrow, Clock, Cross, Hamburger, Home, Icon, KidStar, Member, Search, SocialMedia, Topic };

package/lib/icons-BwOqeNBO.mjs

@@ -0,0 +1,81 @@
+import { internal_link_default } from "./internal-link-JeC0sVNF.mjs";
+import { THEME } from "./theme-BG6yZVj-.mjs";
+import { icon_button_default } from "./icon-button-B-71Zncn.mjs";
+import { INTERNAL_LINKS } from "./internal-links-hIbZZEWd.mjs";
+import { RELEASE_BRANCH } from "./release-branch-oA59oIop.mjs";
+import { external_link_default } from "./external-link-DrDvZqvE.mjs";
+import { HeaderContext } from "./context-Bg1CbUYL.mjs";
+import { KidStar, Member, Search } from "./icons-D_G_3m8-.mjs";
+import { useOutsideClick } from "./use-outside-click-OKNYPEZn.mjs";
+import { search_bar_default } from "./search-bar-CU2VQdeo.mjs";
+import { useContext, useState } from "react";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/header/components/top-row/icons.tsx
+const SearchIcon = () => {
+	const [isSearchOpened, setSearchOpened] = useState(false);
+	const { releaseBranch, theme } = useContext(HeaderContext);
+	const closeSearchBox = () => {
+		setSearchOpened(false);
+	};
+	const ref = useOutsideClick(closeSearchBox);
+	const handleClickSearch = (e) => {
+		e.preventDefault();
+		setSearchOpened(true);
+		if (!ref.current) return;
+		ref.current.getElementsByTagName("input")[0]?.focus();
+	};
+	const onSearch = (keywords) => {
+		setSearchOpened(false);
+		if (typeof window !== "undefined") window.location.href = `${INTERNAL_LINKS.search}?q=${encodeURIComponent(keywords)}`;
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative",
+		ref,
+		children: [/* @__PURE__ */ jsx(icon_button_default, {
+			iconComponent: Search(releaseBranch),
+			theme,
+			onClick: handleClickSearch,
+			className: clsx("transition-opacity ease-in-out duration-[300ms]", isSearchOpened ? "opacity-0 pointer-events-none" : "opacity-100")
+		}), /* @__PURE__ */ jsx("div", {
+			className: clsx("absolute right-0 -top-[8px] transition-opacity ease-in-out duration-[300ms]", isSearchOpened ? "opacity-100" : "opacity-0 pointer-events-none", isSearchOpened ? "z-999" : "-z-1"),
+			children: /* @__PURE__ */ jsx(search_bar_default, {
+				placeholder: "關鍵字搜尋",
+				theme,
+				onClose: closeSearchBox,
+				onSearch,
+				releaseBranch,
+				searchBarWidth: "w-[240px]"
+			})
+		})]
+	}, "search");
+};
+const Icons = ({ releaseBranch = RELEASE_BRANCH.master, theme = THEME.normal }) => {
+	const { isLinkExternal } = useContext(HeaderContext);
+	const LinkComponent = isLinkExternal ? external_link_default : internal_link_default;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "ml-[24px] flex flex-row gap-[16px]",
+		children: [
+			/* @__PURE__ */ jsx(SearchIcon, {}),
+			/* @__PURE__ */ jsx(LinkComponent, {
+				to: INTERNAL_LINKS.myReading.index,
+				children: /* @__PURE__ */ jsx(icon_button_default, {
+					iconComponent: KidStar(releaseBranch),
+					theme
+				})
+			}),
+			/* @__PURE__ */ jsx(LinkComponent, {
+				to: INTERNAL_LINKS.account.index,
+				children: /* @__PURE__ */ jsx(icon_button_default, {
+					iconComponent: Member(releaseBranch),
+					theme
+				})
+			})
+		]
+	});
+};
+
+//#endregion
+export { Icons };
+//# sourceMappingURL=icons-BwOqeNBO.mjs.map

package/lib/icons-BwOqeNBO.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons-BwOqeNBO.mjs","names":["IconButton","SearchBar","Icons: FC<{\n  releaseBranch?: ReleaseBranch\n  theme?: Theme\n}>","ExternalLink","InternalLink"],"sources":["../src/header/components/top-row/icons.tsx"],"sourcesContent":["import { useContext, useState, type FC, type MouseEvent } from 'react'\nimport clsx from 'clsx'\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// hooks\nimport { useOutsideClick } from '../../../hooks'\n// search bar\nimport { SearchBar } from '../../../input'\n\nconst SearchIcon = () => {\n  const [isSearchOpened, setSearchOpened] = useState(false)\n  const { releaseBranch, theme } = useContext(HeaderContext)\n\n  const closeSearchBox = () => {\n    setSearchOpened(false)\n  }\n  const ref = useOutsideClick(closeSearchBox)\n\n  const handleClickSearch = (e: MouseEvent<HTMLButtonElement>) => {\n    e.preventDefault()\n    setSearchOpened(true)\n    if (!ref.current) return\n    const input = ref.current.getElementsByTagName('input')[0]\n    input?.focus()\n  }\n\n  const onSearch = (keywords: string) => {\n    setSearchOpened(false)\n    if (typeof window !== 'undefined') {\n      window.location.href = `${INTERNAL_LINKS.search}?q=${encodeURIComponent(keywords)}`\n    }\n  }\n\n  return (\n    <div className=\"relative\" ref={ref} key=\"search\">\n      <IconButton\n        iconComponent={Search(releaseBranch)}\n        theme={theme}\n        onClick={handleClickSearch}\n        className={clsx(\n          'transition-opacity ease-in-out duration-[300ms]',\n          isSearchOpened ? 'opacity-0 pointer-events-none' : 'opacity-100'\n        )}\n      />\n      <div\n        className={clsx(\n          'absolute right-0 -top-[8px] transition-opacity ease-in-out duration-[300ms]',\n          isSearchOpened ? 'opacity-100' : 'opacity-0 pointer-events-none',\n          isSearchOpened ? 'z-999' : '-z-1'\n        )}\n      >\n        <SearchBar\n          placeholder=\"關鍵字搜尋\"\n          theme={theme}\n          onClose={closeSearchBox}\n          onSearch={onSearch}\n          releaseBranch={releaseBranch}\n          searchBarWidth=\"w-[240px]\"\n        />\n      </div>\n    </div>\n  )\n}\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      <SearchIcon />\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"],"mappings":";;;;;;;;;;;;;;;AAsBA,MAAM,mBAAmB;CACvB,MAAM,CAAC,gBAAgB,mBAAmB,SAAS,MAAM;CACzD,MAAM,EAAE,eAAe,UAAU,WAAW,cAAc;CAE1D,MAAM,uBAAuB;AAC3B,kBAAgB,MAAM;;CAExB,MAAM,MAAM,gBAAgB,eAAe;CAE3C,MAAM,qBAAqB,MAAqC;AAC9D,IAAE,gBAAgB;AAClB,kBAAgB,KAAK;AACrB,MAAI,CAAC,IAAI,QAAS;AAElB,EADc,IAAI,QAAQ,qBAAqB,QAAQ,CAAC,IACjD,OAAO;;CAGhB,MAAM,YAAY,aAAqB;AACrC,kBAAgB,MAAM;AACtB,MAAI,OAAO,WAAW,YACpB,QAAO,SAAS,OAAO,GAAG,eAAe,OAAO,KAAK,mBAAmB,SAAS;;AAIrF,QACE,qBAAC;EAAI,WAAU;EAAgB;aAC7B,oBAACA;GACC,eAAe,OAAO,cAAc;GAC7B;GACP,SAAS;GACT,WAAW,KACT,mDACA,iBAAiB,kCAAkC,cACpD;IACD,EACF,oBAAC;GACC,WAAW,KACT,+EACA,iBAAiB,gBAAgB,iCACjC,iBAAiB,UAAU,OAC5B;aAED,oBAACC;IACC,aAAY;IACL;IACP,SAAS;IACC;IACK;IACf,gBAAe;KACf;IACE;IAzBgC,SA0BlC;;AAIV,MAAaC,SAGP,EAAE,gBAAgB,eAAe,QAAQ,QAAQ,MAAM,aAAa;CACxE,MAAM,EAAE,mBAAmB,WAAW,cAAc;CACpD,MAAM,gBAAgB,iBAAiBC,wBAAeC;AACtD,QACE,qBAAC;EAAI,WAAU;;GACb,oBAAC,eAAa;GACd,oBAAC;IAAc,IAAI,eAAe,UAAU;cAC1C,oBAACJ;KAAW,eAAe,QAAQ,cAAc;KAAS;MAAS;KACrD;GAChB,oBAAC;IAAc,IAAI,eAAe,QAAQ;cACxC,oBAACA;KAAW,eAAe,OAAO,cAAc;KAAS;MAAS;KACpD;;GACZ"}

package/lib/icons-DF2IcvTD.js

@@ -0,0 +1,90 @@
+const require_chunk = require('./chunk-BxBTb9qk.js');
+const require_theme = require('./theme-DDBlIbeS.js');
+const require_icon_button = require('./icon-button-Vqwyow05.js');
+const require_internal_links = require('./internal-links-B0I8FU-O.js');
+const require_release_branch = require('./release-branch-DmSIuJAw.js');
+const require_external_link = require('./external-link-Dnw1WSM1.js');
+const require_internal_link = require('./internal-link-CKuvpRC8.js');
+const require_context = require('./context-DW8qh_Q3.js');
+const require_icons = require('./icons-OsNrxOWn.js');
+const require_use_outside_click = require('./use-outside-click-Ffe2bjxu.js');
+const require_search_bar = require('./search-bar-B9iWikhM.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/header/components/top-row/icons.tsx
+const SearchIcon = () => {
+	const [isSearchOpened, setSearchOpened] = (0, react.useState)(false);
+	const { releaseBranch, theme } = (0, react.useContext)(require_context.HeaderContext);
+	const closeSearchBox = () => {
+		setSearchOpened(false);
+	};
+	const ref = require_use_outside_click.useOutsideClick(closeSearchBox);
+	const handleClickSearch = (e) => {
+		e.preventDefault();
+		setSearchOpened(true);
+		if (!ref.current) return;
+		ref.current.getElementsByTagName("input")[0]?.focus();
+	};
+	const onSearch = (keywords) => {
+		setSearchOpened(false);
+		if (typeof window !== "undefined") window.location.href = `${require_internal_links.INTERNAL_LINKS.search}?q=${encodeURIComponent(keywords)}`;
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "relative",
+		ref,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icon_button.icon_button_default, {
+			iconComponent: require_icons.Search(releaseBranch),
+			theme,
+			onClick: handleClickSearch,
+			className: (0, clsx.default)("transition-opacity ease-in-out duration-[300ms]", isSearchOpened ? "opacity-0 pointer-events-none" : "opacity-100")
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: (0, clsx.default)("absolute right-0 -top-[8px] transition-opacity ease-in-out duration-[300ms]", isSearchOpened ? "opacity-100" : "opacity-0 pointer-events-none", isSearchOpened ? "z-999" : "-z-1"),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_search_bar.search_bar_default, {
+				placeholder: "關鍵字搜尋",
+				theme,
+				onClose: closeSearchBox,
+				onSearch,
+				releaseBranch,
+				searchBarWidth: "w-[240px]"
+			})
+		})]
+	}, "search");
+};
+const Icons = ({ releaseBranch = require_release_branch.RELEASE_BRANCH.master, theme = require_theme.THEME.normal }) => {
+	const { isLinkExternal } = (0, react.useContext)(require_context.HeaderContext);
+	const LinkComponent = isLinkExternal ? require_external_link.external_link_default : require_internal_link.internal_link_default;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "ml-[24px] flex flex-row gap-[16px]",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SearchIcon, {}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinkComponent, {
+				to: require_internal_links.INTERNAL_LINKS.myReading.index,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icon_button.icon_button_default, {
+					iconComponent: require_icons.KidStar(releaseBranch),
+					theme
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinkComponent, {
+				to: require_internal_links.INTERNAL_LINKS.account.index,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icon_button.icon_button_default, {
+					iconComponent: require_icons.Member(releaseBranch),
+					theme
+				})
+			})
+		]
+	});
+};
+
+//#endregion
+Object.defineProperty(exports, 'Icons', {
+  enumerable: true,
+  get: function () {
+    return Icons;
+  }
+});
+//# sourceMappingURL=icons-DF2IcvTD.js.map

package/lib/icons-DF2IcvTD.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons-DF2IcvTD.js","names":["HeaderContext","useOutsideClick","INTERNAL_LINKS","IconButton","Search","SearchBar","Icons: FC<{\n  releaseBranch?: ReleaseBranch\n  theme?: Theme\n}>","RELEASE_BRANCH","THEME","ExternalLink","InternalLink","KidStar","Member"],"sources":["../src/header/components/top-row/icons.tsx"],"sourcesContent":["import { useContext, useState, type FC, type MouseEvent } from 'react'\nimport clsx from 'clsx'\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// hooks\nimport { useOutsideClick } from '../../../hooks'\n// search bar\nimport { SearchBar } from '../../../input'\n\nconst SearchIcon = () => {\n  const [isSearchOpened, setSearchOpened] = useState(false)\n  const { releaseBranch, theme } = useContext(HeaderContext)\n\n  const closeSearchBox = () => {\n    setSearchOpened(false)\n  }\n  const ref = useOutsideClick(closeSearchBox)\n\n  const handleClickSearch = (e: MouseEvent<HTMLButtonElement>) => {\n    e.preventDefault()\n    setSearchOpened(true)\n    if (!ref.current) return\n    const input = ref.current.getElementsByTagName('input')[0]\n    input?.focus()\n  }\n\n  const onSearch = (keywords: string) => {\n    setSearchOpened(false)\n    if (typeof window !== 'undefined') {\n      window.location.href = `${INTERNAL_LINKS.search}?q=${encodeURIComponent(keywords)}`\n    }\n  }\n\n  return (\n    <div className=\"relative\" ref={ref} key=\"search\">\n      <IconButton\n        iconComponent={Search(releaseBranch)}\n        theme={theme}\n        onClick={handleClickSearch}\n        className={clsx(\n          'transition-opacity ease-in-out duration-[300ms]',\n          isSearchOpened ? 'opacity-0 pointer-events-none' : 'opacity-100'\n        )}\n      />\n      <div\n        className={clsx(\n          'absolute right-0 -top-[8px] transition-opacity ease-in-out duration-[300ms]',\n          isSearchOpened ? 'opacity-100' : 'opacity-0 pointer-events-none',\n          isSearchOpened ? 'z-999' : '-z-1'\n        )}\n      >\n        <SearchBar\n          placeholder=\"關鍵字搜尋\"\n          theme={theme}\n          onClose={closeSearchBox}\n          onSearch={onSearch}\n          releaseBranch={releaseBranch}\n          searchBarWidth=\"w-[240px]\"\n        />\n      </div>\n    </div>\n  )\n}\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      <SearchIcon />\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"],"mappings":";;;;;;;;;;;;;;;;;;;AAsBA,MAAM,mBAAmB;CACvB,MAAM,CAAC,gBAAgB,uCAA4B,MAAM;CACzD,MAAM,EAAE,eAAe,gCAAqBA,8BAAc;CAE1D,MAAM,uBAAuB;AAC3B,kBAAgB,MAAM;;CAExB,MAAM,MAAMC,0CAAgB,eAAe;CAE3C,MAAM,qBAAqB,MAAqC;AAC9D,IAAE,gBAAgB;AAClB,kBAAgB,KAAK;AACrB,MAAI,CAAC,IAAI,QAAS;AAElB,EADc,IAAI,QAAQ,qBAAqB,QAAQ,CAAC,IACjD,OAAO;;CAGhB,MAAM,YAAY,aAAqB;AACrC,kBAAgB,MAAM;AACtB,MAAI,OAAO,WAAW,YACpB,QAAO,SAAS,OAAO,GAAGC,sCAAe,OAAO,KAAK,mBAAmB,SAAS;;AAIrF,QACE,4CAAC;EAAI,WAAU;EAAgB;aAC7B,2CAACC;GACC,eAAeC,qBAAO,cAAc;GAC7B;GACP,SAAS;GACT,6BACE,mDACA,iBAAiB,kCAAkC,cACpD;IACD,EACF,2CAAC;GACC,6BACE,+EACA,iBAAiB,gBAAgB,iCACjC,iBAAiB,UAAU,OAC5B;aAED,2CAACC;IACC,aAAY;IACL;IACP,SAAS;IACC;IACK;IACf,gBAAe;KACf;IACE;IAzBgC,SA0BlC;;AAIV,MAAaC,SAGP,EAAE,gBAAgBC,sCAAe,QAAQ,QAAQC,oBAAM,aAAa;CACxE,MAAM,EAAE,yCAA8BR,8BAAc;CACpD,MAAM,gBAAgB,iBAAiBS,8CAAeC;AACtD,QACE,4CAAC;EAAI,WAAU;;GACb,2CAAC,eAAa;GACd,2CAAC;IAAc,IAAIR,sCAAe,UAAU;cAC1C,2CAACC;KAAW,eAAeQ,sBAAQ,cAAc;KAAS;MAAS;KACrD;GAChB,2CAAC;IAAc,IAAIT,sCAAe,QAAQ;cACxC,2CAACC;KAAW,eAAeS,qBAAO,cAAc;KAAS;MAAS;KACpD;;GACZ"}

package/lib/{icons-C5UqghX2.mjs → icons-D_G_3m8-.mjs}

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

package/lib/{icons-C5UqghX2.mjs.map → icons-D_G_3m8-.mjs.map}

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

package/lib/{icons-BZI6_5JJ.js → icons-OsNrxOWn.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-R6EfY15A.js');
+const require_release_branch = require('./release-branch-DmSIuJAw.js');
+const require_constants = require('./constants-BE7hWIZ-.js');
 let clsx = require("clsx");
 clsx = require_chunk.__toESM(clsx);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -125,4 +125,4 @@ Object.defineProperty(exports, 'Topic', {
     return Topic;
   }
 });
-//# sourceMappingURL=icons-BZI6_5JJ.js.map
+//# sourceMappingURL=icons-OsNrxOWn.js.map