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

package/lib/hamburger-menu-BKiIxEbP.js

@@ -1,497 +0,0 @@
-const require_chunk = require('./chunk-BxBTb9qk.js');
-const require_constants = require('./constants-BmxSMOOn.js');
-const require_paragraph = require('./paragraph-iuz3jP0Q.js');
-const require_theme = require('./theme-DDBlIbeS.js');
-const require_button = require('./button-Dk0MxlKd.js');
-const require_external_links = require('./external-links-DCn-uTD-.js');
-const require_internal_links = require('./internal-links-DxtMobuI.js');
-const require_external_link = require('./external-link-Ce1_loKh.js');
-const require_internal_link = require('./internal-link-DyK4bABh.js');
-const require_divider = require('./divider-B1zvSjNJ.js');
-const require_context = require('./context-I1lTR5SO.js');
-const require_constants$1 = require('./constants-D8wNUvoZ.js');
-const require_icons = require('./icons-qP5oNB0W.js');
-const require_dropdown_menu = require('./dropdown-menu-BAHX8io9.js');
-const require_logo = require('./logo-B3GSkN1O.js');
-const require_input = require('./input-VmgNb9pm.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/constants/channels.ts
-const CHANNEL_TYPE = {
-	link: "link",
-	divider: "divider",
-	dropdown: "dropdown",
-	iconLink: "icon-link",
-	lightLink: "light-link"
-};
-const Channels = [
-	{
-		type: CHANNEL_TYPE.link,
-		label: "最新",
-		to: require_internal_links.INTERNAL_LINKS.latest,
-		target: "_self"
-	},
-	{ type: CHANNEL_TYPE.divider },
-	{
-		type: CHANNEL_TYPE.link,
-		label: "深度專題",
-		to: require_internal_links.INTERNAL_LINKS.topics,
-		target: "_self"
-	},
-	{
-		type: CHANNEL_TYPE.dropdown,
-		label: "議題",
-		dropdownItems: [
-			{
-				label: "國際兩岸",
-				to: require_internal_links.INTERNAL_LINKS.categories.world,
-				target: "_self"
-			},
-			{
-				label: "人權司法",
-				to: require_internal_links.INTERNAL_LINKS.categories.humanRights,
-				target: "_self"
-			},
-			{
-				label: "政治社會",
-				to: require_internal_links.INTERNAL_LINKS.categories.politicsAndSociety,
-				target: "_self"
-			},
-			{
-				label: "醫療健康",
-				to: require_internal_links.INTERNAL_LINKS.categories.health,
-				target: "_self"
-			},
-			{
-				label: "環境永續",
-				to: require_internal_links.INTERNAL_LINKS.categories.environment,
-				target: "_self"
-			},
-			{
-				label: "經濟產業",
-				to: require_internal_links.INTERNAL_LINKS.categories.econ,
-				target: "_self"
-			},
-			{
-				label: "文化生活",
-				to: require_internal_links.INTERNAL_LINKS.categories.culture,
-				target: "_self"
-			},
-			{
-				label: "教育校園",
-				to: require_internal_links.INTERNAL_LINKS.categories.education,
-				target: "_self"
-			}
-		]
-	},
-	{
-		type: CHANNEL_TYPE.dropdown,
-		label: "評論",
-		dropdownItems: [
-			{
-				label: "書摘與書評",
-				to: require_internal_links.INTERNAL_LINKS.categories.opinion.bookReview,
-				target: "_self"
-			},
-			{
-				label: "讀者投書",
-				to: require_internal_links.INTERNAL_LINKS.categories.opinion.letter,
-				target: "_self"
-			},
-			{
-				label: "全部",
-				to: require_internal_links.INTERNAL_LINKS.categories.opinion.index,
-				target: "_self"
-			}
-		]
-	},
-	{
-		type: CHANNEL_TYPE.link,
-		label: "人物故事",
-		to: require_internal_links.INTERNAL_LINKS.humanStory,
-		target: "_self"
-	},
-	{ type: CHANNEL_TYPE.divider },
-	{
-		type: CHANNEL_TYPE.link,
-		label: "影像",
-		to: require_internal_links.INTERNAL_LINKS.photography,
-		target: "_self"
-	},
-	{
-		type: CHANNEL_TYPE.dropdown,
-		label: "Podcast",
-		dropdownItems: [
-			{
-				label: "關於報導者 Podcast",
-				to: require_internal_links.INTERNAL_LINKS.podcast.aboutPodcast,
-				target: "_self"
-			},
-			{
-				label: "The Real Story",
-				to: require_internal_links.INTERNAL_LINKS.categories.podcast.theRealStory,
-				target: "_self"
-			},
-			{
-				label: "On the Ground 路邊攤計劃",
-				to: require_internal_links.INTERNAL_LINKS.categories.podcast.onTheGround,
-				target: "_self"
-			}
-		]
-	},
-	{
-		type: CHANNEL_TYPE.link,
-		label: "少年報導者",
-		to: require_external_links.EXTERNAL_LINKS.kidsReporter,
-		target: "_blank"
-	},
-	{
-		type: CHANNEL_TYPE.link,
-		label: "報導者觀測站",
-		to: require_external_links.EXTERNAL_LINKS.lawmaker,
-		target: "_blank"
-	},
-	{
-		type: CHANNEL_TYPE.link,
-		label: "數位敘事",
-		to: require_internal_links.INTERNAL_LINKS.infographic,
-		target: "_self"
-	},
-	{ type: CHANNEL_TYPE.divider },
-	{
-		type: CHANNEL_TYPE.iconLink,
-		label: "個人專區",
-		icon: "member",
-		to: require_internal_links.INTERNAL_LINKS.account.index,
-		target: "_self"
-	},
-	{
-		type: CHANNEL_TYPE.iconLink,
-		label: "我的閱讀",
-		icon: "kid_star",
-		to: require_internal_links.INTERNAL_LINKS.myReading.index,
-		target: "_self"
-	},
-	{
-		type: CHANNEL_TYPE.iconLink,
-		label: "已收藏",
-		icon: "bookmark_basic",
-		to: require_internal_links.INTERNAL_LINKS.myReading.savedBookmarks,
-		target: "_self"
-	},
-	{
-		type: CHANNEL_TYPE.iconLink,
-		label: "造訪紀錄",
-		icon: "history",
-		to: require_internal_links.INTERNAL_LINKS.myReading.browsingHistory,
-		target: "_self"
-	},
-	{ type: CHANNEL_TYPE.divider },
-	{
-		type: CHANNEL_TYPE.lightLink,
-		label: "基金會消息",
-		to: require_internal_links.INTERNAL_LINKS.categories.foundation.index,
-		target: "_self"
-	},
-	{
-		type: CHANNEL_TYPE.lightLink,
-		label: "關於我們",
-		to: require_internal_links.INTERNAL_LINKS.about,
-		target: "_blank"
-	},
-	{
-		type: CHANNEL_TYPE.lightLink,
-		label: "影響力報告",
-		to: require_internal_links.INTERNAL_LINKS.influenceReport,
-		target: "_self"
-	},
-	{
-		type: CHANNEL_TYPE.lightLink,
-		label: "報導者開放實驗室",
-		to: require_external_links.EXTERNAL_LINKS.openLab,
-		target: "_blank"
-	},
-	{
-		type: CHANNEL_TYPE.lightLink,
-		label: "出版品與周邊",
-		to: require_external_links.EXTERNAL_LINKS.publicationAndMerchandise,
-		target: "_blank"
-	},
-	{ type: CHANNEL_TYPE.divider }
-];
-
-//#endregion
-//#region src/hamburger-menu/constants/social-media.ts
-const SocialMedias = [
-	{
-		icon: require_constants$1.MEDIA_TYPE.facebook,
-		link: require_external_links.EXTERNAL_LINKS.facebook,
-		target: "_blank"
-	},
-	{
-		icon: require_constants$1.MEDIA_TYPE.instagram,
-		link: require_external_links.EXTERNAL_LINKS.instagram,
-		target: "_blank"
-	},
-	{
-		icon: require_constants$1.MEDIA_TYPE.threads,
-		link: require_external_links.EXTERNAL_LINKS.threads,
-		target: "_blank"
-	},
-	{
-		icon: require_constants$1.MEDIA_TYPE.youtube,
-		link: require_external_links.EXTERNAL_LINKS.youtube,
-		target: "_blank"
-	}
-];
-
-//#endregion
-//#region src/header/constants/action-links.ts
-const HEADER_ACTION_LINKS = [{
-	label: "電子報",
-	to: require_internal_links.INTERNAL_LINKS.account.emailSubscription,
-	target: "_self",
-	type: require_constants.TYPE.secondary
-}, {
-	label: "贊助",
-	to: require_external_links.EXTERNAL_LINKS.monthlyDonation,
-	target: "_blank",
-	type: require_constants.TYPE.primary
-}];
-const HAMBURGER_MENU_ACION_LINKS = [{
-	label: "訂閱電子報",
-	to: require_internal_links.INTERNAL_LINKS.account.emailSubscription,
-	target: "_self",
-	type: require_constants.TYPE.secondary
-}, {
-	label: "贊助我們",
-	to: require_external_links.EXTERNAL_LINKS.monthlyDonation,
-	target: "_blank",
-	type: require_constants.TYPE.primary
-}];
-
-//#endregion
-//#region src/hamburger-menu/components/icon-link.tsx
-const IconLink$1 = ({ 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_dropdown_menu.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$1;
-
-//#endregion
-//#region src/hamburger-menu/components/light-link.tsx
-const IconLink = ({ label, to, target }) => {
-	const { theme, isLinkExternal } = (0, react.useContext)(require_context.HeaderContext);
-	const footerTheme = theme === require_theme.THEME.transparent ? require_theme.THEME.normal : theme;
-	const { color, hoverColor, hoverBgColor, activeColor, activeBgColor } = require_dropdown_menu.selectHamburgerFooterTheme(footerTheme);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(isLinkExternal ? require_external_link.external_link_default : require_internal_link.internal_link_default, {
-		to,
-		target,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: (0, clsx.default)("py-[8px] px-[32px] flex items-center", "[&>svg]:h-[18px] [&>svg]:w-[18px] [&>svg]:mr-[4px]", color, hoverColor, hoverBgColor, activeColor, activeBgColor),
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_paragraph.P2, { text: label })
-		})
-	});
-};
-var light_link_default = IconLink;
-
-//#endregion
-//#region src/hamburger-menu/components/social-media.tsx
-const SocialMedia$1 = ({ mediaType }) => {
-	const { theme, releaseBranch } = (0, react.useContext)(require_context.HeaderContext);
-	const footerTheme = theme === require_theme.THEME.transparent ? require_theme.THEME.normal : theme;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.icon_button_default, {
-		iconComponent: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.SocialMedia, {
-			mediaType,
-			releaseBranch
-		}),
-		theme: footerTheme,
-		className: (0, clsx.default)("[&>svg]:h-[32px] [&>svg]:w-[32px]", "[&>svg]:tablet:h-[24px] [&>svg]:tablet:w-[24px]")
-	});
-};
-var social_media_default = SocialMedia$1;
-
-//#endregion
-//#region src/hamburger-menu/index.tsx
-const HamburgerMenu = () => {
-	const { theme, releaseBranch, isLinkExternal, isAuthed } = (0, react.useContext)(require_context.HeaderContext);
-	const { closeHamburgerMenu } = (0, react.useContext)(require_context.HamburgerContext);
-	const menuTheme = theme === require_theme.THEME.photography ? theme : require_theme.THEME.normal;
-	const { bgColor, scrollBarColor } = require_dropdown_menu.selectHamburgerMenuTheme(menuTheme);
-	const logoType = require_dropdown_menu.selectLogoType(menuTheme);
-	const [activeKey, setActiveKey] = (0, react.useState)("");
-	const LinkComponent = isLinkExternal ? require_external_link.external_link_default : require_internal_link.internal_link_default;
-	const onSearch = (keywords) => {
-		if (typeof window === "undefined") return;
-		window.location.href = `${require_internal_links.INTERNAL_LINKS.search}?q=${encodeURIComponent(keywords)}`;
-	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: (0, clsx.default)("w-screen h-screen overflow-y-scroll overscroll-contain", bgColor, `pb-[calc(48px+48px)]`, "tablet:w-[320px] tablet:max-h-screen tablet:pb-0", "desktop:w-[280px]", "[&::-webkit-scrollbar]:w-[4px]", "[&::-webkit-scrollbar]:bg-transparent", "[&::-webkit-scrollbar-thumb]:rounded-[2px]", scrollBarColor),
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: (0, clsx.default)("hidden items-center justify-end pt-[24px] pr-[32px] pb-[16px]", "tablet:flex"),
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.icon_button_default, {
-					iconComponent: require_icons.Cross(releaseBranch),
-					theme: menuTheme,
-					onClick: closeHamburgerMenu
-				})
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinkComponent, {
-				to: require_internal_links.INTERNAL_LINKS.home,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: (0, clsx.default)("hidden justify-center [&>img]:h-[24px] [&>img]:w-[24px]", "tablet:flex"),
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_logo.logo_symbol_default, {
-						type: logoType,
-						releaseBranch
-					})
-				})
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: (0, clsx.default)("flex items-center justify-between px-[24px] py-[16px]", "tablet:hidden"),
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinkComponent, {
-					to: require_internal_links.INTERNAL_LINKS.home,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_logo.logo_header_default, {
-						type: logoType,
-						releaseBranch,
-						className: "h-[21px]"
-					})
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "flex 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_button.pill_button_default, {
-							text: "贊助",
-							theme: require_button.pill_button_default.Theme.normal,
-							type: require_button.pill_button_default.Type.primary,
-							style: require_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_button.icon_button_default, { iconComponent: require_icons.Member(releaseBranch) }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.text_button_default, {
-							text: "登入",
-							theme: require_button.text_button_default.Theme.normal,
-							style: require_button.text_button_default.Style.dark,
-							size: require_button.text_button_default.Size.s
-						})
-					})]
-				})]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "px-[32px] pt-[24px] pb-[8px] desktop:hidden",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_input.search_bar_default, {
-					onSearch,
-					autoFocus: false,
-					placeholder: "關鍵字搜尋",
-					theme: menuTheme,
-					releaseBranch,
-					searchBarWidth: "w-full"
-				})
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "flex flex-col pt-[16px]",
-				children: Channels.map((channel, idx) => {
-					if (channel.type === CHANNEL_TYPE.link) {
-						const { color, hoverBgColor, activeBgColor } = require_dropdown_menu.selectHamburgerItemTheme(theme);
-						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinkComponent, {
-							to: channel.to,
-							target: channel.target,
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.menu_button_default, {
-								text: channel.label,
-								fontWeight: require_button.menu_button_default.FontWeight.bold,
-								color,
-								p1ClassName: `${hoverBgColor} ${activeBgColor} pl-[32px] pr-[32px]`
-							}, channel.label)
-						}, channel.label);
-					}
-					if (channel.type === CHANNEL_TYPE.divider) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "py-[16px] px-[32px]",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_divider.divider_default, { direction: require_divider.divider_default.Direction.horizontal })
-					}, `divider-${idx}`);
-					if (channel.type === CHANNEL_TYPE.dropdown) {
-						const isActive = activeKey === channel.label;
-						const toggleFunc = (key) => {
-							setActiveKey(activeKey === key ? "" : key);
-						};
-						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-							onClick: () => toggleFunc(channel.label),
-							type: "button",
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_dropdown_menu.DropdownMenu, {
-								text: channel.label,
-								isActive,
-								dropdownItems: channel.dropdownItems
-							})
-						}, channel.label);
-					}
-					if (channel.type === CHANNEL_TYPE.iconLink) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(icon_link_default, {
-						label: channel.label,
-						to: channel.to,
-						target: channel.target,
-						icon: channel.icon
-					}, channel.label);
-					if (channel.type === CHANNEL_TYPE.lightLink) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(light_link_default, {
-						label: channel.label,
-						to: channel.to,
-						target: channel.target
-					}, channel.label);
-				})
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "flex flex-row gap-[16px] justify-center",
-				children: SocialMedias.map((socialMedia) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinkComponent, {
-					to: socialMedia.link,
-					target: socialMedia.target,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(social_media_default, { mediaType: socialMedia.icon })
-				}, socialMedia.icon))
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: (0, clsx.default)("flex flex-row gap-[16px] px-[32px] pt-[40px] pb-[32px]", "tablet:flex-col"),
-				children: HAMBURGER_MENU_ACION_LINKS.map((link) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinkComponent, {
-					to: link.to,
-					target: link.target,
-					className: "flex-1",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.pill_button_default, {
-						text: link.label,
-						theme,
-						type: link.type,
-						className: "w-full justify-center",
-						size: require_button.pill_button_default.Size.l
-					})
-				}, link.label))
-			})
-		]
-	});
-};
-var hamburger_menu_default = HamburgerMenu;
-
-//#endregion
-Object.defineProperty(exports, 'HEADER_ACTION_LINKS', {
-  enumerable: true,
-  get: function () {
-    return HEADER_ACTION_LINKS;
-  }
-});
-Object.defineProperty(exports, 'hamburger_menu_default', {
-  enumerable: true,
-  get: function () {
-    return hamburger_menu_default;
-  }
-});
-//# sourceMappingURL=hamburger-menu-BKiIxEbP.js.map

package/lib/hamburger-menu-BKiIxEbP.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"hamburger-menu-BKiIxEbP.js","names":["INTERNAL_LINKS","EXTERNAL_LINKS","SocialMedias: SocialMediaType[]","MEDIA_TYPE","EXTERNAL_LINKS","HEADER_ACTION_LINKS: ActionLink[]","INTERNAL_LINKS","TYPE","EXTERNAL_LINKS","HAMBURGER_MENU_ACION_LINKS: ActionLink[]","IconLink: FC<IconLinkProps>","HeaderContext","THEME","ExternalLink","InternalLink","selectHamburgerFooterTheme","Icon","P2","IconLink","IconLink: FC<IconLinkProps>","HeaderContext","THEME","selectHamburgerFooterTheme","ExternalLink","InternalLink","P2","SocialMedia: FC<SocialMediaProps>","HeaderContext","THEME","IconButton","SocialMediaIcon","SocialMedia","HamburgerMenu: FC","HeaderContext","HamburgerContext","THEME","selectHamburgerMenuTheme","selectLogoType","ExternalLink","InternalLink","INTERNAL_LINKS","IconButton","Cross","LogoSymbol","LogoHeader","EXTERNAL_LINKS","PillButton","Member","TextButton","SearchBar","selectHamburgerItemTheme","MenuButton","Divider","DropdownMenu","IconLink","LightLink","SocialMedia"],"sources":["../src/hamburger-menu/constants/channels.ts","../src/hamburger-menu/constants/social-media.ts","../src/header/constants/action-links.ts","../src/hamburger-menu/components/icon-link.tsx","../src/hamburger-menu/components/light-link.tsx","../src/hamburger-menu/components/social-media.tsx","../src/hamburger-menu/index.tsx"],"sourcesContent":["import { INTERNAL_LINKS } from '../../constants/internal-links'\nimport { EXTERNAL_LINKS } from '../../constants/external-links'\nimport type { LinkTarget } from '../../customized-link/type'\n\nexport const CHANNEL_TYPE = {\n  link: 'link',\n  divider: 'divider',\n  dropdown: 'dropdown',\n  iconLink: 'icon-link',\n  lightLink: 'light-link',\n} as const\n\nexport const Channels = [\n  {\n    type: CHANNEL_TYPE.link,\n    label: '最新',\n    to: INTERNAL_LINKS.latest,\n    target: '_self' as LinkTarget,\n  },\n  {\n    type: CHANNEL_TYPE.divider,\n  },\n  {\n    type: CHANNEL_TYPE.link,\n    label: '深度專題',\n    to: INTERNAL_LINKS.topics,\n    target: '_self' as LinkTarget,\n  },\n  {\n    type: CHANNEL_TYPE.dropdown,\n    label: '議題',\n    dropdownItems: [\n      {\n        label: '國際兩岸',\n        to: INTERNAL_LINKS.categories.world,\n        target: '_self' as LinkTarget,\n      },\n      {\n        label: '人權司法',\n        to: INTERNAL_LINKS.categories.humanRights,\n        target: '_self' as LinkTarget,\n      },\n      {\n        label: '政治社會',\n        to: INTERNAL_LINKS.categories.politicsAndSociety,\n        target: '_self' as LinkTarget,\n      },\n      {\n        label: '醫療健康',\n        to: INTERNAL_LINKS.categories.health,\n        target: '_self' as LinkTarget,\n      },\n      {\n        label: '環境永續',\n        to: INTERNAL_LINKS.categories.environment,\n        target: '_self' as LinkTarget,\n      },\n      {\n        label: '經濟產業',\n        to: INTERNAL_LINKS.categories.econ,\n        target: '_self' as LinkTarget,\n      },\n      {\n        label: '文化生活',\n        to: INTERNAL_LINKS.categories.culture,\n        target: '_self' as LinkTarget,\n      },\n      {\n        label: '教育校園',\n        to: INTERNAL_LINKS.categories.education,\n        target: '_self' as LinkTarget,\n      },\n    ],\n  },\n  {\n    type: CHANNEL_TYPE.dropdown,\n    label: '評論',\n    dropdownItems: [\n      {\n        label: '書摘與書評',\n        to: INTERNAL_LINKS.categories.opinion.bookReview,\n        target: '_self' as LinkTarget,\n      },\n      {\n        label: '讀者投書',\n        to: INTERNAL_LINKS.categories.opinion.letter,\n        target: '_self' as LinkTarget,\n      },\n      {\n        label: '全部',\n        to: INTERNAL_LINKS.categories.opinion.index,\n        target: '_self' as LinkTarget,\n      },\n    ],\n  },\n  {\n    type: CHANNEL_TYPE.link,\n    label: '人物故事',\n    to: INTERNAL_LINKS.humanStory,\n    target: '_self' as LinkTarget,\n  },\n  {\n    type: CHANNEL_TYPE.divider,\n  },\n  {\n    type: CHANNEL_TYPE.link,\n    label: '影像',\n    to: INTERNAL_LINKS.photography,\n    target: '_self' as LinkTarget,\n  },\n  {\n    type: CHANNEL_TYPE.dropdown,\n    label: 'Podcast',\n    dropdownItems: [\n      {\n        label: '關於報導者 Podcast',\n        to: INTERNAL_LINKS.podcast.aboutPodcast,\n        target: '_self' as LinkTarget,\n      },\n      {\n        label: 'The Real Story',\n        to: INTERNAL_LINKS.categories.podcast.theRealStory,\n        target: '_self' as LinkTarget,\n      },\n      {\n        label: 'On the Ground 路邊攤計劃',\n        to: INTERNAL_LINKS.categories.podcast.onTheGround,\n        target: '_self' as LinkTarget,\n      },\n    ],\n  },\n  {\n    type: CHANNEL_TYPE.link,\n    label: '少年報導者',\n    to: EXTERNAL_LINKS.kidsReporter,\n    target: '_blank' as LinkTarget,\n  },\n  {\n    type: CHANNEL_TYPE.link,\n    label: '報導者觀測站',\n    to: EXTERNAL_LINKS.lawmaker,\n    target: '_blank' as LinkTarget,\n  },\n  {\n    type: CHANNEL_TYPE.link,\n    label: '數位敘事',\n    to: INTERNAL_LINKS.infographic,\n    target: '_self' as LinkTarget,\n  },\n  {\n    type: CHANNEL_TYPE.divider,\n  },\n  {\n    type: CHANNEL_TYPE.iconLink,\n    label: '個人專區',\n    icon: 'member',\n    to: INTERNAL_LINKS.account.index,\n    target: '_self' as LinkTarget,\n  },\n  {\n    type: CHANNEL_TYPE.iconLink,\n    label: '我的閱讀',\n    icon: 'kid_star',\n    to: INTERNAL_LINKS.myReading.index,\n    target: '_self' as LinkTarget,\n  },\n  {\n    type: CHANNEL_TYPE.iconLink,\n    label: '已收藏',\n    icon: 'bookmark_basic',\n    to: INTERNAL_LINKS.myReading.savedBookmarks,\n    target: '_self' as LinkTarget,\n  },\n  {\n    type: CHANNEL_TYPE.iconLink,\n    label: '造訪紀錄',\n    icon: 'history',\n    to: INTERNAL_LINKS.myReading.browsingHistory,\n    target: '_self' as LinkTarget,\n  },\n  {\n    type: CHANNEL_TYPE.divider,\n  },\n  {\n    type: CHANNEL_TYPE.lightLink,\n    label: '基金會消息',\n    to: INTERNAL_LINKS.categories.foundation.index,\n    target: '_self' as LinkTarget,\n  },\n  {\n    type: CHANNEL_TYPE.lightLink,\n    label: '關於我們',\n    to: INTERNAL_LINKS.about,\n    target: '_blank' as LinkTarget,\n  },\n  {\n    type: CHANNEL_TYPE.lightLink,\n    label: '影響力報告',\n    to: INTERNAL_LINKS.influenceReport,\n    target: '_self' as LinkTarget,\n  },\n  {\n    type: CHANNEL_TYPE.lightLink,\n    label: '報導者開放實驗室',\n    to: EXTERNAL_LINKS.openLab,\n    target: '_blank' as LinkTarget,\n  },\n  {\n    type: CHANNEL_TYPE.lightLink,\n    label: '出版品與周邊',\n    to: EXTERNAL_LINKS.publicationAndMerchandise,\n    target: '_blank' as LinkTarget,\n  },\n  {\n    type: CHANNEL_TYPE.divider,\n  },\n]\n","import { MEDIA_TYPE, type MediaType } from '../../icons/constants'\nimport { EXTERNAL_LINKS } from '../../constants/external-links'\nimport type { LinkTarget } from '../../customized-link/type'\n\ntype SocialMediaType = {\n  icon: MediaType\n  link: string\n  target: LinkTarget\n}\nexport const SocialMedias: SocialMediaType[] = [\n  {\n    icon: MEDIA_TYPE.facebook,\n    link: EXTERNAL_LINKS.facebook,\n    target: '_blank',\n  },\n  {\n    icon: MEDIA_TYPE.instagram,\n    link: EXTERNAL_LINKS.instagram,\n    target: '_blank',\n  },\n  {\n    icon: MEDIA_TYPE.threads,\n    link: EXTERNAL_LINKS.threads,\n    target: '_blank',\n  },\n  {\n    icon: MEDIA_TYPE.youtube,\n    link: EXTERNAL_LINKS.youtube,\n    target: '_blank',\n  },\n]\n","import { INTERNAL_LINKS } from '../../constants/internal-links'\nimport { EXTERNAL_LINKS } from '../../constants/external-links'\nimport type { LinkTarget } from '../../customized-link/type'\nimport { TYPE, type Type } from '../../button/constants'\n\ntype ActionLink = {\n  label: string\n  to: string\n  target: LinkTarget\n  type: Type\n}\n\nexport const HEADER_ACTION_LINKS: ActionLink[] = [\n  {\n    label: '電子報',\n    to: INTERNAL_LINKS.account.emailSubscription,\n    target: '_self' as LinkTarget,\n    type: TYPE.secondary,\n  },\n  {\n    label: '贊助',\n    to: EXTERNAL_LINKS.monthlyDonation,\n    target: '_blank',\n    type: TYPE.primary,\n  },\n]\n\nexport const HAMBURGER_MENU_ACION_LINKS: ActionLink[] = [\n  {\n    label: '訂閱電子報',\n    to: INTERNAL_LINKS.account.emailSubscription,\n    target: '_self',\n    type: TYPE.secondary,\n  },\n  {\n    label: '贊助我們',\n    to: EXTERNAL_LINKS.monthlyDonation,\n    target: '_blank',\n    type: TYPE.primary,\n  },\n]\n","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","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// 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  to: string\n  target: LinkTarget\n}\nconst IconLink: FC<IconLinkProps> = ({ label, to, target }) => {\n  const { theme, isLinkExternal } = useContext(HeaderContext)\n  const footerTheme = theme === THEME.transparent ? THEME.normal : theme\n  const { color, hoverColor, hoverBgColor, activeColor, activeBgColor } =\n    selectHamburgerFooterTheme(footerTheme)\n  const LinkComponent = isLinkExternal ? ExternalLink : InternalLink\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          activeColor,\n          activeBgColor\n        )}\n      >\n        <P2 text={label} />\n      </div>\n    </LinkComponent>\n  )\n}\n\nexport default IconLink\n","import { useContext, type FC } from 'react'\nimport clsx from 'clsx'\n// context\nimport { HeaderContext } from '../../header/context'\n// icon\nimport { SocialMedia as SocialMediaIcon } from '../../icons'\n// type\nimport type { MediaType } from '../../icons/constants'\n// theme\nimport { THEME } from '../../constants/theme'\n// button\nimport { IconButton } from '../../button'\n\ntype SocialMediaProps = {\n  mediaType: MediaType\n}\nconst SocialMedia: FC<SocialMediaProps> = ({ mediaType }) => {\n  const { theme, releaseBranch } = useContext(HeaderContext)\n  const footerTheme = theme === THEME.transparent ? THEME.normal : theme\n  const Icon = (\n    <SocialMediaIcon mediaType={mediaType} releaseBranch={releaseBranch} />\n  )\n  return (\n    <IconButton\n      iconComponent={Icon}\n      theme={footerTheme}\n      className={clsx(\n        '[&>svg]:h-[32px] [&>svg]:w-[32px]',\n        '[&>svg]:tablet:h-[24px] [&>svg]:tablet:w-[24px]'\n      )}\n    />\n  )\n}\n\nexport default SocialMedia\n","import { useContext, useState, type FC } from 'react'\nimport clsx from 'clsx'\n// context\nimport { HeaderContext, HamburgerContext } from '../header/context'\n// constants\nimport { THEME } from '../constants/theme'\nimport { Channels, CHANNEL_TYPE } from './constants/channels'\nimport { SocialMedias } from './constants/social-media'\nimport { HAMBURGER_MENU_ACION_LINKS } from '../header/constants/action-links'\nimport { INTERNAL_LINKS } from '../constants/internal-links'\nimport { EXTERNAL_LINKS } from '../constants/external-links'\n// utils\nimport {\n  selectHamburgerMenuTheme,\n  selectHamburgerItemTheme,\n} from './utils/theme'\n// buttons\nimport { IconButton, MenuButton, PillButton, TextButton } from '../button'\n// icons\nimport { Cross, Member } from '../icons'\n// logo\nimport { LogoSymbol, LogoHeader } from '../logo'\n// utils\nimport { selectLogoType } from './utils/theme'\n// divider\nimport Divider from '../divider'\n// components\nimport { DropdownMenu } from '../dropdown-menu'\nimport IconLink from './components/icon-link'\nimport LightLink from './components/light-link'\nimport SocialMedia from './components/social-media'\n// link\nimport { ExternalLink, InternalLink } from '../customized-link'\n// search bar\nimport { SearchBar } from '../input'\n\nconst HamburgerMenu: FC = () => {\n  const { theme, releaseBranch, isLinkExternal, isAuthed } =\n    useContext(HeaderContext)\n  const { closeHamburgerMenu } = useContext(HamburgerContext)\n\n  const menuTheme = theme === THEME.photography ? theme : THEME.normal\n  const { bgColor, scrollBarColor } = selectHamburgerMenuTheme(menuTheme)\n  const logoType = selectLogoType(menuTheme)\n  const [activeKey, setActiveKey] = useState('')\n  const LinkComponent = isLinkExternal ? ExternalLink : InternalLink\n\n  const onSearch = (keywords: string) => {\n    if (typeof window === 'undefined') {\n      return\n    }\n    window.location.href = `${INTERNAL_LINKS.search}?q=${encodeURIComponent(keywords)}`\n  }\n\n  return (\n    <div\n      className={clsx(\n        'w-screen h-screen overflow-y-scroll overscroll-contain',\n        bgColor,\n        // reserveHeightForIos15 is 48px\n        `pb-[calc(48px+48px)]`,\n        'tablet:w-[320px] tablet:max-h-screen tablet:pb-0',\n        'desktop:w-[280px]',\n        '[&::-webkit-scrollbar]:w-[4px]',\n        '[&::-webkit-scrollbar]:bg-transparent',\n        '[&::-webkit-scrollbar-thumb]:rounded-[2px]',\n        scrollBarColor\n      )}\n    >\n      {/* close icon */}\n      <div\n        className={clsx(\n          'hidden items-center justify-end pt-[24px] pr-[32px] pb-[16px]',\n          'tablet:flex'\n        )}\n      >\n        <IconButton\n          iconComponent={Cross(releaseBranch)}\n          theme={menuTheme}\n          onClick={closeHamburgerMenu}\n        />\n      </div>\n      {/* logo */}\n      <LinkComponent to={INTERNAL_LINKS.home}>\n        <div\n          className={clsx(\n            'hidden justify-center [&>img]:h-[24px] [&>img]:w-[24px]',\n            'tablet:flex'\n          )}\n        >\n          <LogoSymbol type={logoType} releaseBranch={releaseBranch} />\n        </div>\n      </LinkComponent>\n      {/* mobile hamburger header */}\n      <div\n        className={clsx(\n          'flex items-center justify-between px-[24px] py-[16px]',\n          'tablet:hidden'\n        )}\n      >\n        <LinkComponent to={INTERNAL_LINKS.home}>\n          <LogoHeader\n            type={logoType}\n            releaseBranch={releaseBranch}\n            className=\"h-[21px]\"\n          />\n        </LinkComponent>\n        <div className=\"flex 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      {/* search bar (visible on mobile and tablet) */}\n      <div className=\"px-[32px] pt-[24px] pb-[8px] desktop:hidden\">\n        <SearchBar\n          onSearch={onSearch}\n          autoFocus={false}\n          placeholder=\"關鍵字搜尋\"\n          theme={menuTheme}\n          releaseBranch={releaseBranch}\n          searchBarWidth=\"w-full\"\n        />\n      </div>\n      {/* menu buttons */}\n      <div className=\"flex flex-col pt-[16px]\">\n        {Channels.map((channel, idx) => {\n          if (channel.type === CHANNEL_TYPE.link) {\n            const { color, hoverBgColor, activeBgColor } =\n              selectHamburgerItemTheme(theme)\n            return (\n              <LinkComponent\n                to={channel.to}\n                target={channel.target}\n                key={channel.label}\n              >\n                <MenuButton\n                  key={channel.label}\n                  text={channel.label}\n                  fontWeight={MenuButton.FontWeight.bold}\n                  color={color}\n                  p1ClassName={`${hoverBgColor} ${activeBgColor} pl-[32px] pr-[32px]`}\n                />\n              </LinkComponent>\n            )\n          }\n          if (channel.type === CHANNEL_TYPE.divider) {\n            return (\n              <div className=\"py-[16px] px-[32px]\" key={`divider-${idx}`}>\n                <Divider direction={Divider.Direction.horizontal} />\n              </div>\n            )\n          }\n          if (channel.type === CHANNEL_TYPE.dropdown) {\n            const isActive = activeKey === channel.label\n            const toggleFunc = (key: string) => {\n              const nextActiveKey = activeKey === key ? '' : key\n              setActiveKey(nextActiveKey)\n            }\n            return (\n              <button\n                onClick={() => toggleFunc(channel.label)}\n                key={channel.label}\n                type=\"button\"\n              >\n                <DropdownMenu\n                  text={channel.label}\n                  isActive={isActive}\n                  dropdownItems={channel.dropdownItems}\n                />\n              </button>\n            )\n          }\n          if (channel.type === CHANNEL_TYPE.iconLink) {\n            return (\n              <IconLink\n                label={channel.label}\n                to={channel.to}\n                target={channel.target}\n                icon={channel.icon}\n                key={channel.label}\n              />\n            )\n          }\n          if (channel.type === CHANNEL_TYPE.lightLink) {\n            return (\n              <LightLink\n                label={channel.label}\n                to={channel.to}\n                target={channel.target}\n                key={channel.label}\n              />\n            )\n          }\n        })}\n      </div>\n      {/* social media */}\n      <div className=\"flex flex-row gap-[16px] justify-center\">\n        {SocialMedias.map((socialMedia) => (\n          <LinkComponent\n            to={socialMedia.link}\n            target={socialMedia.target}\n            key={socialMedia.icon}\n          >\n            <SocialMedia mediaType={socialMedia.icon} />\n          </LinkComponent>\n        ))}\n      </div>\n      {/* action butoons */}\n      <div\n        className={clsx(\n          'flex flex-row gap-[16px] px-[32px] pt-[40px] pb-[32px]',\n          'tablet:flex-col'\n        )}\n      >\n        {HAMBURGER_MENU_ACION_LINKS.map((link) => (\n          <LinkComponent\n            to={link.to}\n            target={link.target}\n            key={link.label}\n            className=\"flex-1\"\n          >\n            <PillButton\n              text={link.label}\n              theme={theme}\n              type={link.type}\n              className=\"w-full justify-center\"\n              size={PillButton.Size.l}\n            />\n          </LinkComponent>\n        ))}\n      </div>\n    </div>\n  )\n}\n\nexport default HamburgerMenu\n"],"mappings":"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"}

package/lib/input-BU_QJnbj.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"input-BU_QJnbj.mjs","names":["SearchBar: FC<SearchBarProps> & {\n  Theme: typeof THEME\n}","IconButton"],"sources":["../src/input/components/search-bar.tsx","../src/input/index.ts"],"sourcesContent":["import { useState } from 'react'\nimport type { FC, FormEvent, ChangeEvent } from 'react'\nimport clsx from 'clsx'\n// constants\nimport { THEME, type Theme } from '../../constants/theme'\nimport {\n  RELEASE_BRANCH,\n  type ReleaseBranch,\n} from '../../constants/release-branch'\n// theme\nimport { selectThemeStyle } from '../theme'\n// icons\nimport { Cross, Search } from '../../icons'\n// button\nimport { IconButton } from '../../button'\n\nconst defaultFunc = () => {}\ntype SearchBarProps = {\n  placeholder?: string\n  theme?: Theme\n  releaseBranch?: ReleaseBranch\n  onSearch?: (keywords: string) => void\n  onClose?: () => void\n  handleBlur?: () => void\n  autoFocus?: boolean\n  className?: string\n  searchBarWidth?: string\n}\nconst SearchBar: FC<SearchBarProps> & {\n  Theme: typeof THEME\n} = ({\n  placeholder = '',\n  theme = THEME.normal,\n  releaseBranch = RELEASE_BRANCH.master,\n  onSearch = defaultFunc,\n  onClose = defaultFunc,\n  handleBlur = defaultFunc,\n  autoFocus = true,\n  className = '',\n  searchBarWidth = 'w-fit',\n}) => {\n  const [keywords, setKeywords] = useState('')\n  const [focus, setFocus] = useState(false)\n  const {\n    bgColor,\n    focusBgColor,\n    desktopBgColor,\n    borderColor,\n    color,\n    focusColor,\n    placeholderColor,\n  } = selectThemeStyle(theme)\n  const onFocus = () => setFocus(true)\n  const onBlur = () => {\n    setFocus(false)\n    handleBlur()\n  }\n  const onSubmit = (e: FormEvent<HTMLFormElement>) => {\n    e.preventDefault()\n    onSearch(keywords)\n  }\n  const onChange = (e: ChangeEvent<HTMLInputElement>) => {\n    const input = e.currentTarget.value\n    setKeywords(input)\n  }\n  const onReset = (e: FormEvent<HTMLFormElement>) => {\n    e.preventDefault()\n    setKeywords('')\n  }\n\n  return (\n    <form\n      className={clsx('flex items-center', className)}\n      noValidate\n      onSubmit={onSubmit}\n      onReset={onReset}\n      onFocus={onFocus}\n    >\n      <div\n        className={clsx(\n          'flex items-center py-[8px] px-[16px] rounded-[40px] border-[1px] border-solid gap-[8px]',\n          searchBarWidth,\n          bgColor,\n          focus\n            ? clsx(focusBgColor, borderColor, desktopBgColor)\n            : 'border-transparent'\n        )}\n      >\n        <input\n          type=\"search\"\n          placeholder={placeholder}\n          value={keywords}\n          onChange={onChange}\n          onBlur={onBlur}\n          // biome-ignore lint/a11y/noAutofocus: autoFocus is intentionally used to focus the search input for better UX\n          autoFocus={autoFocus}\n          className={clsx(\n            'h-[24px] text-[14px] focus-visible:border-0 font-default w-[fill-available] w-[-webkit-fill-available]',\n            'focus-visible:outline-0 focus-visible:border-transparent [&::-webkit-search-cancel-button]:hidden',\n            color,\n            placeholderColor,\n            focusColor\n          )}\n        />\n        <IconButton\n          theme={theme}\n          iconComponent={Search(releaseBranch)}\n          onClick={() => onSearch(keywords)}\n        />\n      </div>\n      <IconButton\n        theme={theme}\n        iconComponent={Cross(releaseBranch)}\n        onClick={onClose}\n        className={clsx('ml-[8px] hidden', 'desktop:inline-flex')}\n      />\n    </form>\n  )\n}\nSearchBar.Theme = THEME\n\nexport default SearchBar\n","import SearchBar from './components/search-bar'\n\nexport { SearchBar }\n\nexport default {\n  SearchBar,\n}\n"],"mappings":";;;;;;;;;;AAgBA,MAAM,oBAAoB;AAY1B,MAAMA,aAED,EACH,cAAc,IACd,QAAQ,MAAM,QACd,gBAAgB,eAAe,QAC/B,WAAW,aACX,UAAU,aACV,aAAa,aACb,YAAY,MACZ,YAAY,IACZ,iBAAiB,cACb;CACJ,MAAM,CAAC,UAAU,eAAe,SAAS,GAAG;CAC5C,MAAM,CAAC,OAAO,YAAY,SAAS,MAAM;CACzC,MAAM,EACJ,SACA,cACA,gBACA,aACA,OACA,YACA,qBACE,iBAAiB,MAAM;CAC3B,MAAM,gBAAgB,SAAS,KAAK;CACpC,MAAM,eAAe;AACnB,WAAS,MAAM;AACf,cAAY;;CAEd,MAAM,YAAY,MAAkC;AAClD,IAAE,gBAAgB;AAClB,WAAS,SAAS;;CAEpB,MAAM,YAAY,MAAqC;EACrD,MAAM,QAAQ,EAAE,cAAc;AAC9B,cAAY,MAAM;;CAEpB,MAAM,WAAW,MAAkC;AACjD,IAAE,gBAAgB;AAClB,cAAY,GAAG;;AAGjB,QACE,qBAAC;EACC,WAAW,KAAK,qBAAqB,UAAU;EAC/C;EACU;EACD;EACA;aAET,qBAAC;GACC,WAAW,KACT,2FACA,gBACA,SACA,QACI,KAAK,cAAc,aAAa,eAAe,GAC/C,qBACL;cAED,oBAAC;IACC,MAAK;IACQ;IACb,OAAO;IACG;IACF;IAEG;IACX,WAAW,KACT,0GACA,qGACA,OACA,kBACA,WACD;KACD,EACF,oBAACC;IACQ;IACP,eAAe,OAAO,cAAc;IACpC,eAAe,SAAS,SAAS;KACjC;IACE,EACN,oBAACA;GACQ;GACP,eAAe,MAAM,cAAc;GACnC,SAAS;GACT,WAAW,KAAK,mBAAmB,sBAAsB;IACzD;GACG;;AAGX,UAAU,QAAQ;AAElB,yBAAe;;;;ACrHf,oBAAe,EACb,+BACD"}

package/lib/input-VmgNb9pm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"input-VmgNb9pm.js","names":["SearchBar: FC<SearchBarProps> & {\n  Theme: typeof THEME\n}","THEME","RELEASE_BRANCH","selectThemeStyle","IconButton","Search","Cross"],"sources":["../src/input/components/search-bar.tsx","../src/input/index.ts"],"sourcesContent":["import { useState } from 'react'\nimport type { FC, FormEvent, ChangeEvent } from 'react'\nimport clsx from 'clsx'\n// constants\nimport { THEME, type Theme } from '../../constants/theme'\nimport {\n  RELEASE_BRANCH,\n  type ReleaseBranch,\n} from '../../constants/release-branch'\n// theme\nimport { selectThemeStyle } from '../theme'\n// icons\nimport { Cross, Search } from '../../icons'\n// button\nimport { IconButton } from '../../button'\n\nconst defaultFunc = () => {}\ntype SearchBarProps = {\n  placeholder?: string\n  theme?: Theme\n  releaseBranch?: ReleaseBranch\n  onSearch?: (keywords: string) => void\n  onClose?: () => void\n  handleBlur?: () => void\n  autoFocus?: boolean\n  className?: string\n  searchBarWidth?: string\n}\nconst SearchBar: FC<SearchBarProps> & {\n  Theme: typeof THEME\n} = ({\n  placeholder = '',\n  theme = THEME.normal,\n  releaseBranch = RELEASE_BRANCH.master,\n  onSearch = defaultFunc,\n  onClose = defaultFunc,\n  handleBlur = defaultFunc,\n  autoFocus = true,\n  className = '',\n  searchBarWidth = 'w-fit',\n}) => {\n  const [keywords, setKeywords] = useState('')\n  const [focus, setFocus] = useState(false)\n  const {\n    bgColor,\n    focusBgColor,\n    desktopBgColor,\n    borderColor,\n    color,\n    focusColor,\n    placeholderColor,\n  } = selectThemeStyle(theme)\n  const onFocus = () => setFocus(true)\n  const onBlur = () => {\n    setFocus(false)\n    handleBlur()\n  }\n  const onSubmit = (e: FormEvent<HTMLFormElement>) => {\n    e.preventDefault()\n    onSearch(keywords)\n  }\n  const onChange = (e: ChangeEvent<HTMLInputElement>) => {\n    const input = e.currentTarget.value\n    setKeywords(input)\n  }\n  const onReset = (e: FormEvent<HTMLFormElement>) => {\n    e.preventDefault()\n    setKeywords('')\n  }\n\n  return (\n    <form\n      className={clsx('flex items-center', className)}\n      noValidate\n      onSubmit={onSubmit}\n      onReset={onReset}\n      onFocus={onFocus}\n    >\n      <div\n        className={clsx(\n          'flex items-center py-[8px] px-[16px] rounded-[40px] border-[1px] border-solid gap-[8px]',\n          searchBarWidth,\n          bgColor,\n          focus\n            ? clsx(focusBgColor, borderColor, desktopBgColor)\n            : 'border-transparent'\n        )}\n      >\n        <input\n          type=\"search\"\n          placeholder={placeholder}\n          value={keywords}\n          onChange={onChange}\n          onBlur={onBlur}\n          // biome-ignore lint/a11y/noAutofocus: autoFocus is intentionally used to focus the search input for better UX\n          autoFocus={autoFocus}\n          className={clsx(\n            'h-[24px] text-[14px] focus-visible:border-0 font-default w-[fill-available] w-[-webkit-fill-available]',\n            'focus-visible:outline-0 focus-visible:border-transparent [&::-webkit-search-cancel-button]:hidden',\n            color,\n            placeholderColor,\n            focusColor\n          )}\n        />\n        <IconButton\n          theme={theme}\n          iconComponent={Search(releaseBranch)}\n          onClick={() => onSearch(keywords)}\n        />\n      </div>\n      <IconButton\n        theme={theme}\n        iconComponent={Cross(releaseBranch)}\n        onClick={onClose}\n        className={clsx('ml-[8px] hidden', 'desktop:inline-flex')}\n      />\n    </form>\n  )\n}\nSearchBar.Theme = THEME\n\nexport default SearchBar\n","import SearchBar from './components/search-bar'\n\nexport { SearchBar }\n\nexport default {\n  SearchBar,\n}\n"],"mappings":";;;;;;;;;;;;;;AAgBA,MAAM,oBAAoB;AAY1B,MAAMA,aAED,EACH,cAAc,IACd,QAAQC,oBAAM,QACd,gBAAgBC,sCAAe,QAC/B,WAAW,aACX,UAAU,aACV,aAAa,aACb,YAAY,MACZ,YAAY,IACZ,iBAAiB,cACb;CACJ,MAAM,CAAC,UAAU,mCAAwB,GAAG;CAC5C,MAAM,CAAC,OAAO,gCAAqB,MAAM;CACzC,MAAM,EACJ,SACA,cACA,gBACA,aACA,OACA,YACA,qBACEC,iCAAiB,MAAM;CAC3B,MAAM,gBAAgB,SAAS,KAAK;CACpC,MAAM,eAAe;AACnB,WAAS,MAAM;AACf,cAAY;;CAEd,MAAM,YAAY,MAAkC;AAClD,IAAE,gBAAgB;AAClB,WAAS,SAAS;;CAEpB,MAAM,YAAY,MAAqC;EACrD,MAAM,QAAQ,EAAE,cAAc;AAC9B,cAAY,MAAM;;CAEpB,MAAM,WAAW,MAAkC;AACjD,IAAE,gBAAgB;AAClB,cAAY,GAAG;;AAGjB,QACE,4CAAC;EACC,6BAAgB,qBAAqB,UAAU;EAC/C;EACU;EACD;EACA;aAET,4CAAC;GACC,6BACE,2FACA,gBACA,SACA,0BACS,cAAc,aAAa,eAAe,GAC/C,qBACL;cAED,2CAAC;IACC,MAAK;IACQ;IACb,OAAO;IACG;IACF;IAEG;IACX,6BACE,0GACA,qGACA,OACA,kBACA,WACD;KACD,EACF,2CAACC;IACQ;IACP,eAAeC,qBAAO,cAAc;IACpC,eAAe,SAAS,SAAS;KACjC;IACE,EACN,2CAACD;GACQ;GACP,eAAeE,oBAAM,cAAc;GACnC,SAAS;GACT,6BAAgB,mBAAmB,sBAAsB;IACzD;GACG;;AAGX,UAAU,QAAQL;AAElB,yBAAe;;;;ACrHf,oBAAe,EACb,+BACD"}