@twreporter/react-typescript-components 0.1.0-beta.16 → 0.1.0-beta.18

package/lib/{release-branch-BqeBsvrl.d.mts → release-branch-CFUcv043.d.mts}

@@ -1,4 +1,4 @@
-import { ValuesOf } from "./index-CYb6xr3M.mjs";
+import { ValuesOf } from "./index-B0aBR23L.mjs";
 
 //#region src/constants/release-branch.d.ts
 declare const RELEASE_BRANCH: {
@@ -11,4 +11,4 @@ declare const RELEASE_BRANCH: {
 type ReleaseBranch = ValuesOf<typeof RELEASE_BRANCH>;
 //#endregion
 export { RELEASE_BRANCH, ReleaseBranch };
-//# sourceMappingURL=release-branch-BqeBsvrl.d.mts.map
+//# sourceMappingURL=release-branch-CFUcv043.d.mts.map

package/lib/styles.css

@@ -39,6 +39,7 @@
     --color-opacity-white-02: rgba(255, 255, 255, 0.2);
     --color-opacity-white-05: rgba(255, 255, 255, 0.5);
     --color-opacity-white-08: rgba(255, 255, 255, 0.8);
+    --color-opacity-gray100-08: rgba(241, 241, 241, 0.8);
     --color-opacity-black-02: rgba(0, 0, 0, 0.2);
     --font-title: "merriweather", "source-han-serif-tc", serif;
     --font-default: "Roboto Slab", "Noto Sans TC", sans-serif, "Tauhu Oo";
@@ -209,15 +210,24 @@
   .sticky {
     position: sticky;
   }
+  .-top-\[8px\] {
+    top: calc(8px * -1);
+  }
   .top-0 {
     top: calc(var(--spacing) * 0);
   }
+  .right-0 {
+    right: calc(var(--spacing) * 0);
+  }
   .bottom-0 {
     bottom: calc(var(--spacing) * 0);
   }
   .left-0 {
     left: calc(var(--spacing) * 0);
   }
+  .-z-1 {
+    z-index: calc(1 * -1);
+  }
   .z-1 {
     z-index: 1;
   }
@@ -233,6 +243,9 @@
   .z-10 {
     z-index: 10;
   }
+  .z-999 {
+    z-index: 999;
+  }
   .m-0 {
     margin: calc(var(--spacing) * 0);
   }
@@ -263,6 +276,9 @@
   .ml-\[4px\] {
     margin-left: 4px;
   }
+  .ml-\[8px\] {
+    margin-left: 8px;
+  }
   .ml-\[24px\] {
     margin-left: 24px;
   }
@@ -301,9 +317,6 @@
   .h-\[32px\] {
     height: 32px;
   }
-  .h-\[40px\] {
-    height: 40px;
-  }
   .h-\[3000px\] {
     height: 3000px;
   }
@@ -325,15 +338,24 @@
   .w-0 {
     width: calc(var(--spacing) * 0);
   }
+  .w-\[-webkit-fill-available\] {
+    width: -webkit-fill-available;
+  }
   .w-\[24px\] {
     width: 24px;
   }
+  .w-\[240px\] {
+    width: 240px;
+  }
   .w-\[300px\] {
     width: 300px;
   }
   .w-\[360px\] {
     width: 360px;
   }
+  .w-\[fill-available\] {
+    width: fill-available;
+  }
   .w-fit {
     width: fit-content;
   }
@@ -427,9 +449,6 @@
   .overscroll-contain {
     overscroll-behavior: contain;
   }
-  .rounded-\[20px\] {
-    border-radius: 20px;
-  }
   .rounded-\[40px\] {
     border-radius: 40px;
   }
@@ -444,6 +463,10 @@
     border-style: var(--tw-border-style);
     border-width: 1.5px;
   }
+  .border-\[1px\] {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
   .border-t-\[1px\] {
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
@@ -468,6 +491,9 @@
   .border-gray-500 {
     border-color: var(--color-gray-500);
   }
+  .border-gray-600 {
+    border-color: var(--color-gray-600);
+  }
   .border-gray-800 {
     border-color: var(--color-gray-800);
   }
@@ -477,6 +503,12 @@
   .border-supportive-faded {
     border-color: var(--color-supportive-faded);
   }
+  .border-supportive-pastel {
+    border-color: var(--color-supportive-pastel);
+  }
+  .border-transparent {
+    border-color: transparent;
+  }
   .border-t-gray-600 {
     border-top-color: var(--color-gray-600);
   }
@@ -507,6 +539,12 @@
   .bg-opacity-black-02 {
     background-color: var(--color-opacity-black-02);
   }
+  .bg-opacity-gray100-08 {
+    background-color: var(--color-opacity-gray100-08);
+  }
+  .bg-opacity-white-08 {
+    background-color: var(--color-opacity-white-08);
+  }
   .bg-photo-dark {
     background-color: var(--color-photo-dark);
   }
@@ -745,6 +783,10 @@
     --tw-duration: 200ms;
     transition-duration: 200ms;
   }
+  .duration-\[300ms\] {
+    --tw-duration: 300ms;
+    transition-duration: 300ms;
+  }
   .ease-in {
     --tw-ease: var(--ease-in);
     transition-timing-function: var(--ease-in);
@@ -951,10 +993,36 @@
       }
     }
   }
-  .focus\:outline-none {
+  .focus\:bg-gray-100 {
+    &:focus {
+      background-color: var(--color-gray-100);
+    }
+  }
+  .focus\:bg-opacity-gray100-08 {
     &:focus {
-      --tw-outline-style: none;
-      outline-style: none;
+      background-color: var(--color-opacity-gray100-08);
+    }
+  }
+  .focus\:text-gray-800 {
+    &:focus {
+      color: var(--color-gray-800);
+    }
+  }
+  .focus-visible\:border-0 {
+    &:focus-visible {
+      border-style: var(--tw-border-style);
+      border-width: 0px;
+    }
+  }
+  .focus-visible\:border-transparent {
+    &:focus-visible {
+      border-color: transparent;
+    }
+  }
+  .focus-visible\:outline-0 {
+    &:focus-visible {
+      outline-style: var(--tw-outline-style);
+      outline-width: 0px;
     }
   }
   .active\:bg-gray-200 {
@@ -1094,6 +1162,11 @@
       display: none;
     }
   }
+  .desktop\:inline-flex {
+    @media (width >= 1024px) {
+      display: inline-flex;
+    }
+  }
   .desktop\:w-\[280px\] {
     @media (width >= 1024px) {
       width: 280px;
@@ -1116,6 +1189,16 @@
       flex-direction: column;
     }
   }
+  .desktop\:bg-gray-100 {
+    @media (width >= 1024px) {
+      background-color: var(--color-gray-100);
+    }
+  }
+  .desktop\:bg-gray-white {
+    @media (width >= 1024px) {
+      background-color: var(--color-gray-white);
+    }
+  }
   .desktop\:px-\[48px\] {
     @media (width >= 1024px) {
       padding-inline: 48px;
@@ -1161,6 +1244,21 @@
       background-color: var(--color-opacity-white-08);
     }
   }
+  .\[\&\:\:-webkit-search-cancel-button\]\:hidden {
+    &::-webkit-search-cancel-button {
+      display: none;
+    }
+  }
+  .\[\&\:\:placeholder\]\:text-gray-500 {
+    &::placeholder {
+      color: var(--color-gray-500);
+    }
+  }
+  .\[\&\:\:placeholder\]\:text-gray-800 {
+    &::placeholder {
+      color: var(--color-gray-800);
+    }
+  }
   .\[\&\>a\]\:no-underline {
     &>a {
       text-decoration-line: none;
@@ -1595,6 +1693,11 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
 @keyframes spin {
   to {
     transform: rotate(360deg);
@@ -1625,6 +1728,7 @@
       --tw-ring-offset-shadow: 0 0 #0000;
       --tw-duration: initial;
       --tw-ease: initial;
+      --tw-outline-style: solid;
     }
   }
 }

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

@@ -1,6 +1,6 @@
-import "../index-CYb6xr3M.mjs";
-import { ReleaseBranch } from "../release-branch-BqeBsvrl.mjs";
-import { LinkTarget } from "../type-2Go0njwa.mjs";
+import "../index-B0aBR23L.mjs";
+import { ReleaseBranch } from "../release-branch-CFUcv043.mjs";
+import { LinkTarget } from "../type-Dons5TOa.mjs";
 import { ReactElement } from "react";
 
 //#region src/tab-bar/constants.d.ts

package/lib/tab-bar/constants.js

@@ -2,6 +2,6 @@ require('../internal-links-DxtMobuI.js');
 require('../release-branch-CRZV4Ivz.js');
 require('../constants-D8wNUvoZ.js');
 require('../icons-qP5oNB0W.js');
-const require_constants$1 = require('../constants-BNxn_qJc.js');
+const require_constants$1 = require('../constants-B_1Vpdib.js');
 
 exports.TabBarItems = require_constants$1.TabBarItems;

package/lib/tab-bar/constants.mjs

@@ -2,6 +2,6 @@ import "../internal-links-CP3dqmrz.mjs";
 import "../release-branch-DNCD1uH_.mjs";
 import "../constants-5phfWHvb.mjs";
 import "../icons-I7T-auOQ.mjs";
-import { TabBarItems } from "../constants--CDeoDub.mjs";
+import { TabBarItems } from "../constants-Br6I254P.mjs";
 
 export { TabBarItems };

package/lib/tab-bar/index.js

@@ -2,7 +2,7 @@ require('../constants-BmxSMOOn.js');
 require('../constants-Cndhv6qr.js');
 require('../paragraph-iuz3jP0Q.js');
 require('../theme-DDBlIbeS.js');
-require('../button-D50NHdly.js');
+require('../button-Dk0MxlKd.js');
 require('../internal-links-DxtMobuI.js');
 require('../release-branch-CRZV4Ivz.js');
 require('../external-link-DoBTwlV3.js');
@@ -11,8 +11,8 @@ require('../customized-link-DqW2a8oZ.js');
 require('../context-I1lTR5SO.js');
 require('../constants-D8wNUvoZ.js');
 require('../icons-qP5oNB0W.js');
-const require_tab_bar = require('../tab-bar-qKbhyjg-.js');
-require('../theme-W--MzZEH.js');
-require('../constants-BNxn_qJc.js');
+const require_tab_bar = require('../tab-bar-CZt-vw5x.js');
+require('../theme-CmvdSSbX.js');
+require('../constants-B_1Vpdib.js');
 
 module.exports = require_tab_bar.tab_bar_default;

package/lib/tab-bar/index.mjs

@@ -3,7 +3,7 @@ import "../constants-oTHAnh6r.mjs";
 import "../constants-CBSEPx91.mjs";
 import "../paragraph-Cf9jr8RF.mjs";
 import "../theme-BG6yZVj-.mjs";
-import "../button-hDNHA85d.mjs";
+import "../button-D_AWI7r9.mjs";
 import "../internal-links-CP3dqmrz.mjs";
 import "../release-branch-DNCD1uH_.mjs";
 import "../external-link-DXT5ep5-.mjs";
@@ -11,8 +11,8 @@ import "../customized-link-DnaZxeKK.mjs";
 import "../context-BgdqM3zA.mjs";
 import "../constants-5phfWHvb.mjs";
 import "../icons-I7T-auOQ.mjs";
-import { tab_bar_default } from "../tab-bar-CdsxfUdk.mjs";
-import "../theme-DQCIQh_8.mjs";
-import "../constants--CDeoDub.mjs";
+import { tab_bar_default } from "../tab-bar-CXhDni4V.mjs";
+import "../theme-CE2RkJwt.mjs";
+import "../constants-Br6I254P.mjs";
 
 export { tab_bar_default as default };

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

@@ -1,5 +1,5 @@
-import "../index-CYb6xr3M.mjs";
-import { Theme } from "../theme-lCi6tmmS.mjs";
+import "../index-B0aBR23L.mjs";
+import { Theme } from "../theme-BQP-h-2z.mjs";
 
 //#region src/tab-bar/theme.d.ts
 declare const selectTabBarTheme: (theme: Theme) => {

package/lib/tab-bar/theme.js

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

package/lib/tab-bar/theme.mjs

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

package/lib/{tab-bar-CdsxfUdk.mjs → tab-bar-CXhDni4V.mjs}

@@ -1,11 +1,11 @@
 import { internal_link_default } from "./internal-link-NQb751uB.mjs";
 import { THEME } from "./theme-BG6yZVj-.mjs";
-import { icon_with_text_button_default } from "./button-hDNHA85d.mjs";
+import { icon_with_text_button_default } from "./button-D_AWI7r9.mjs";
 import { external_link_default } from "./external-link-DXT5ep5-.mjs";
 import { HamburgerContext, HeaderContext } from "./context-BgdqM3zA.mjs";
 import { Hamburger } from "./icons-I7T-auOQ.mjs";
-import { selectTabBarTheme } from "./theme-DQCIQh_8.mjs";
-import { TabBarItems } from "./constants--CDeoDub.mjs";
+import { selectTabBarTheme } from "./theme-CE2RkJwt.mjs";
+import { TabBarItems } from "./constants-Br6I254P.mjs";
 import { useContext } from "react";
 import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -33,7 +33,7 @@ const TabBar = ({ className = "" }) => {
 	return /* @__PURE__ */ jsxs("div", {
 		className: clsx("w-screen fixed left-0 bottom-0 flex justify-between px-[16px] pt-[8px] pb-[calc(8px+env(safe-area-inset-bottom,0))] shadow-[0_0_2px_rgba(0,0,0,0.15)]", "desktop:hidden", bgColor, ZIndex.tabBarMobile, ZIndex.tabBarTablet, className),
 		children: [_.map(TabBarItems(releaseBranch), (item) => {
-			const isActive = pathname === item.link;
+			const isActive = !isHamburgerMenuOpen && pathname === item.link;
 			return /* @__PURE__ */ jsx(LinkComponent, {
 				to: item.link,
 				target: item.target,
@@ -59,4 +59,4 @@ var tab_bar_default = TabBar;
 
 //#endregion
 export { ZIndex, tab_bar_default };
-//# sourceMappingURL=tab-bar-CdsxfUdk.mjs.map
+//# sourceMappingURL=tab-bar-CXhDni4V.mjs.map

package/lib/{tab-bar-CdsxfUdk.mjs.map → tab-bar-CXhDni4V.mjs.map}

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

package/lib/{tab-bar-qKbhyjg-.js → tab-bar-CZt-vw5x.js}

@@ -1,12 +1,12 @@
 const require_chunk = require('./chunk-BxBTb9qk.js');
 const require_theme = require('./theme-DDBlIbeS.js');
-const require_button = require('./button-D50NHdly.js');
+const require_button = require('./button-Dk0MxlKd.js');
 const require_external_link = require('./external-link-DoBTwlV3.js');
 const require_internal_link = require('./internal-link-B9ExuJfg.js');
 const require_context = require('./context-I1lTR5SO.js');
 const require_icons = require('./icons-qP5oNB0W.js');
-const require_theme$1 = require('./theme-W--MzZEH.js');
-const require_constants = require('./constants-BNxn_qJc.js');
+const require_theme$1 = require('./theme-CmvdSSbX.js');
+const require_constants = require('./constants-B_1Vpdib.js');
 let react = require("react");
 react = require_chunk.__toESM(react);
 let clsx = require("clsx");
@@ -38,7 +38,7 @@ const TabBar = ({ className = "" }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: (0, clsx.default)("w-screen fixed left-0 bottom-0 flex justify-between px-[16px] pt-[8px] pb-[calc(8px+env(safe-area-inset-bottom,0))] shadow-[0_0_2px_rgba(0,0,0,0.15)]", "desktop:hidden", bgColor, ZIndex.tabBarMobile, ZIndex.tabBarTablet, className),
 		children: [_.map(require_constants.TabBarItems(releaseBranch), (item) => {
-			const isActive = pathname === item.link;
+			const isActive = !isHamburgerMenuOpen && pathname === item.link;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinkComponent, {
 				to: item.link,
 				target: item.target,
@@ -75,4 +75,4 @@ Object.defineProperty(exports, 'tab_bar_default', {
     return tab_bar_default;
   }
 });
-//# sourceMappingURL=tab-bar-qKbhyjg-.js.map
+//# sourceMappingURL=tab-bar-CZt-vw5x.js.map

package/lib/{tab-bar-qKbhyjg-.js.map → tab-bar-CZt-vw5x.js.map}

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

package/lib/text/constants.d.mts

@@ -1,3 +1,3 @@
-import "../index-CYb6xr3M.mjs";
-import { TYPE, Type, WEIGHT, Weight } from "../constants-D-mBwgNQ.mjs";
+import "../index-B0aBR23L.mjs";
+import { TYPE, Type, WEIGHT, Weight } from "../constants-DJDyKM0N.mjs";
 export { TYPE, Type, WEIGHT, Weight };

package/lib/text/heading.d.mts

@@ -1,5 +1,5 @@
-import "../index-CYb6xr3M.mjs";
-import { TYPE, Type } from "../constants-D-mBwgNQ.mjs";
+import "../index-B0aBR23L.mjs";
+import { TYPE, Type } from "../constants-DJDyKM0N.mjs";
 import React from "react";
 
 //#region src/text/heading.d.ts

package/lib/text/heading.js

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

package/lib/text/heading.mjs

@@ -1,4 +1,4 @@
 import "../constants-CBSEPx91.mjs";
-import { H1, H2, H3, H4, H5, H6 } from "../heading-BSEtBLuY.mjs";
+import { H1, H2, H3, H4, H5, H6 } from "../heading-Qm-0gpRy.mjs";
 
 export { H1, H2, H3, H4, H5, H6 };

package/lib/text/paragraph.d.mts

@@ -1,5 +1,5 @@
-import "../index-CYb6xr3M.mjs";
-import { WEIGHT, Weight } from "../constants-D-mBwgNQ.mjs";
+import "../index-B0aBR23L.mjs";
+import { WEIGHT, Weight } from "../constants-DJDyKM0N.mjs";
 import React from "react";
 
 //#region src/text/paragraph.d.ts

package/lib/{theme-lCi6tmmS.d.mts → theme-BQP-h-2z.d.mts}

@@ -1,4 +1,4 @@
-import { ValuesOf } from "./index-CYb6xr3M.mjs";
+import { ValuesOf } from "./index-B0aBR23L.mjs";
 
 //#region src/constants/theme.d.ts
 declare const THEME: {
@@ -10,4 +10,4 @@ declare const THEME: {
 type Theme = ValuesOf<typeof THEME>;
 //#endregion
 export { THEME, Theme };
-//# sourceMappingURL=theme-lCi6tmmS.d.mts.map
+//# sourceMappingURL=theme-BQP-h-2z.d.mts.map

package/lib/theme-Bgd_TUHZ.mjs

@@ -0,0 +1,38 @@
+import { THEME } from "./theme-BG6yZVj-.mjs";
+
+//#region src/input/theme.ts
+const selectThemeStyle = (theme) => {
+	switch (theme) {
+		case THEME.photography: return {
+			bgColor: "bg-opacity-white-08",
+			focusBgColor: "focus:bg-gray-100",
+			desktopBgColor: "desktop:bg-gray-100",
+			borderColor: "border-supportive-pastel",
+			color: "text-gray-800",
+			focusColor: "focus:text-gray-800",
+			placeholderColor: "[&::placeholder]:text-gray-800"
+		};
+		case THEME.transparent: return {
+			bgColor: "bg-opacity-gray100-08",
+			focusBgColor: "focus:bg-opacity-gray100-08",
+			desktopBgColor: "desktop:bg-gray-white",
+			borderColor: "border-gray-600",
+			color: "text-gray-800",
+			focusColor: "focus:text-gray-800",
+			placeholderColor: "[&::placeholder]:text-gray-500"
+		};
+		default: return {
+			bgColor: "bg-opacity-gray100-08",
+			focusBgColor: "focus:bg-opacity-gray100-08",
+			desktopBgColor: "desktop:bg-gray-white",
+			borderColor: "border-gray-600",
+			color: "text-gray-800",
+			focusColor: "focus:text-gray-800",
+			placeholderColor: "[&::placeholder]:text-gray-500"
+		};
+	}
+};
+
+//#endregion
+export { selectThemeStyle };
+//# sourceMappingURL=theme-Bgd_TUHZ.mjs.map

package/lib/theme-Bgd_TUHZ.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-Bgd_TUHZ.mjs","names":[],"sources":["../src/input/theme.ts"],"sourcesContent":["import { THEME, type Theme } from '../constants/theme'\n\nexport const selectThemeStyle = (theme: Theme) => {\n  switch (theme) {\n    case THEME.photography:\n      return {\n        bgColor: 'bg-opacity-white-08',\n        focusBgColor: 'focus:bg-gray-100',\n        desktopBgColor: 'desktop:bg-gray-100',\n        borderColor: 'border-supportive-pastel',\n        color: 'text-gray-800',\n        focusColor: 'focus:text-gray-800',\n        placeholderColor: '[&::placeholder]:text-gray-800',\n      }\n    case THEME.transparent:\n      return {\n        bgColor: 'bg-opacity-gray100-08',\n        focusBgColor: 'focus:bg-opacity-gray100-08',\n        desktopBgColor: 'desktop:bg-gray-white',\n        borderColor: 'border-gray-600',\n        color: 'text-gray-800',\n        focusColor: 'focus:text-gray-800',\n        placeholderColor: '[&::placeholder]:text-gray-500',\n      }\n    default:\n      return {\n        bgColor: 'bg-opacity-gray100-08',\n        focusBgColor: 'focus:bg-opacity-gray100-08',\n        desktopBgColor: 'desktop:bg-gray-white',\n        borderColor: 'border-gray-600',\n        color: 'text-gray-800',\n        focusColor: 'focus:text-gray-800',\n        placeholderColor: '[&::placeholder]:text-gray-500',\n      }\n  }\n}\n"],"mappings":";;;AAEA,MAAa,oBAAoB,UAAiB;AAChD,SAAQ,OAAR;EACE,KAAK,MAAM,YACT,QAAO;GACL,SAAS;GACT,cAAc;GACd,gBAAgB;GAChB,aAAa;GACb,OAAO;GACP,YAAY;GACZ,kBAAkB;GACnB;EACH,KAAK,MAAM,YACT,QAAO;GACL,SAAS;GACT,cAAc;GACd,gBAAgB;GAChB,aAAa;GACb,OAAO;GACP,YAAY;GACZ,kBAAkB;GACnB;EACH,QACE,QAAO;GACL,SAAS;GACT,cAAc;GACd,gBAAgB;GAChB,aAAa;GACb,OAAO;GACP,YAAY;GACZ,kBAAkB;GACnB"}

package/lib/{theme-DQCIQh_8.mjs → theme-CE2RkJwt.mjs}

@@ -10,4 +10,4 @@ const selectTabBarTheme = (theme) => {
 
 //#endregion
 export { selectTabBarTheme };
-//# sourceMappingURL=theme-DQCIQh_8.mjs.map
+//# sourceMappingURL=theme-CE2RkJwt.mjs.map

package/lib/{theme-DQCIQh_8.mjs.map → theme-CE2RkJwt.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"theme-DQCIQh_8.mjs","names":[],"sources":["../src/tab-bar/theme.ts"],"sourcesContent":["import { THEME, type Theme } from '../constants/theme'\n\nexport const selectTabBarTheme = (theme: Theme) => {\n  switch (theme) {\n    case THEME.photography:\n      return {\n        bgColor: 'bg-photo-dark',\n      }\n    default:\n      return {\n        bgColor: 'bg-gray-100',\n      }\n  }\n}\n"],"mappings":";;;AAEA,MAAa,qBAAqB,UAAiB;AACjD,SAAQ,OAAR;EACE,KAAK,MAAM,YACT,QAAO,EACL,SAAS,iBACV;EACH,QACE,QAAO,EACL,SAAS,eACV"}
+{"version":3,"file":"theme-CE2RkJwt.mjs","names":[],"sources":["../src/tab-bar/theme.ts"],"sourcesContent":["import { THEME, type Theme } from '../constants/theme'\n\nexport const selectTabBarTheme = (theme: Theme) => {\n  switch (theme) {\n    case THEME.photography:\n      return {\n        bgColor: 'bg-photo-dark',\n      }\n    default:\n      return {\n        bgColor: 'bg-gray-100',\n      }\n  }\n}\n"],"mappings":";;;AAEA,MAAa,qBAAqB,UAAiB;AACjD,SAAQ,OAAR;EACE,KAAK,MAAM,YACT,QAAO,EACL,SAAS,iBACV;EACH,QACE,QAAO,EACL,SAAS,eACV"}

package/lib/{theme-W--MzZEH.js → theme-CmvdSSbX.js}

@@ -15,4 +15,4 @@ Object.defineProperty(exports, 'selectTabBarTheme', {
     return selectTabBarTheme;
   }
 });
-//# sourceMappingURL=theme-W--MzZEH.js.map
+//# sourceMappingURL=theme-CmvdSSbX.js.map

package/lib/{theme-W--MzZEH.js.map → theme-CmvdSSbX.js.map}

@@ -1 +1 @@
-{"version":3,"file":"theme-W--MzZEH.js","names":["THEME"],"sources":["../src/tab-bar/theme.ts"],"sourcesContent":["import { THEME, type Theme } from '../constants/theme'\n\nexport const selectTabBarTheme = (theme: Theme) => {\n  switch (theme) {\n    case THEME.photography:\n      return {\n        bgColor: 'bg-photo-dark',\n      }\n    default:\n      return {\n        bgColor: 'bg-gray-100',\n      }\n  }\n}\n"],"mappings":";;;AAEA,MAAa,qBAAqB,UAAiB;AACjD,SAAQ,OAAR;EACE,KAAKA,oBAAM,YACT,QAAO,EACL,SAAS,iBACV;EACH,QACE,QAAO,EACL,SAAS,eACV"}
+{"version":3,"file":"theme-CmvdSSbX.js","names":["THEME"],"sources":["../src/tab-bar/theme.ts"],"sourcesContent":["import { THEME, type Theme } from '../constants/theme'\n\nexport const selectTabBarTheme = (theme: Theme) => {\n  switch (theme) {\n    case THEME.photography:\n      return {\n        bgColor: 'bg-photo-dark',\n      }\n    default:\n      return {\n        bgColor: 'bg-gray-100',\n      }\n  }\n}\n"],"mappings":";;;AAEA,MAAa,qBAAqB,UAAiB;AACjD,SAAQ,OAAR;EACE,KAAKA,oBAAM,YACT,QAAO,EACL,SAAS,iBACV;EACH,QACE,QAAO,EACL,SAAS,eACV"}

package/lib/theme-Cv8rt4oO.js

@@ -0,0 +1,43 @@
+const require_theme = require('./theme-DDBlIbeS.js');
+
+//#region src/input/theme.ts
+const selectThemeStyle = (theme) => {
+	switch (theme) {
+		case require_theme.THEME.photography: return {
+			bgColor: "bg-opacity-white-08",
+			focusBgColor: "focus:bg-gray-100",
+			desktopBgColor: "desktop:bg-gray-100",
+			borderColor: "border-supportive-pastel",
+			color: "text-gray-800",
+			focusColor: "focus:text-gray-800",
+			placeholderColor: "[&::placeholder]:text-gray-800"
+		};
+		case require_theme.THEME.transparent: return {
+			bgColor: "bg-opacity-gray100-08",
+			focusBgColor: "focus:bg-opacity-gray100-08",
+			desktopBgColor: "desktop:bg-gray-white",
+			borderColor: "border-gray-600",
+			color: "text-gray-800",
+			focusColor: "focus:text-gray-800",
+			placeholderColor: "[&::placeholder]:text-gray-500"
+		};
+		default: return {
+			bgColor: "bg-opacity-gray100-08",
+			focusBgColor: "focus:bg-opacity-gray100-08",
+			desktopBgColor: "desktop:bg-gray-white",
+			borderColor: "border-gray-600",
+			color: "text-gray-800",
+			focusColor: "focus:text-gray-800",
+			placeholderColor: "[&::placeholder]:text-gray-500"
+		};
+	}
+};
+
+//#endregion
+Object.defineProperty(exports, 'selectThemeStyle', {
+  enumerable: true,
+  get: function () {
+    return selectThemeStyle;
+  }
+});
+//# sourceMappingURL=theme-Cv8rt4oO.js.map

package/lib/theme-Cv8rt4oO.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-Cv8rt4oO.js","names":["THEME"],"sources":["../src/input/theme.ts"],"sourcesContent":["import { THEME, type Theme } from '../constants/theme'\n\nexport const selectThemeStyle = (theme: Theme) => {\n  switch (theme) {\n    case THEME.photography:\n      return {\n        bgColor: 'bg-opacity-white-08',\n        focusBgColor: 'focus:bg-gray-100',\n        desktopBgColor: 'desktop:bg-gray-100',\n        borderColor: 'border-supportive-pastel',\n        color: 'text-gray-800',\n        focusColor: 'focus:text-gray-800',\n        placeholderColor: '[&::placeholder]:text-gray-800',\n      }\n    case THEME.transparent:\n      return {\n        bgColor: 'bg-opacity-gray100-08',\n        focusBgColor: 'focus:bg-opacity-gray100-08',\n        desktopBgColor: 'desktop:bg-gray-white',\n        borderColor: 'border-gray-600',\n        color: 'text-gray-800',\n        focusColor: 'focus:text-gray-800',\n        placeholderColor: '[&::placeholder]:text-gray-500',\n      }\n    default:\n      return {\n        bgColor: 'bg-opacity-gray100-08',\n        focusBgColor: 'focus:bg-opacity-gray100-08',\n        desktopBgColor: 'desktop:bg-gray-white',\n        borderColor: 'border-gray-600',\n        color: 'text-gray-800',\n        focusColor: 'focus:text-gray-800',\n        placeholderColor: '[&::placeholder]:text-gray-500',\n      }\n  }\n}\n"],"mappings":";;;AAEA,MAAa,oBAAoB,UAAiB;AAChD,SAAQ,OAAR;EACE,KAAKA,oBAAM,YACT,QAAO;GACL,SAAS;GACT,cAAc;GACd,gBAAgB;GAChB,aAAa;GACb,OAAO;GACP,YAAY;GACZ,kBAAkB;GACnB;EACH,KAAKA,oBAAM,YACT,QAAO;GACL,SAAS;GACT,cAAc;GACd,gBAAgB;GAChB,aAAa;GACb,OAAO;GACP,YAAY;GACZ,kBAAkB;GACnB;EACH,QACE,QAAO;GACL,SAAS;GACT,cAAc;GACd,gBAAgB;GAChB,aAAa;GACb,OAAO;GACP,YAAY;GACZ,kBAAkB;GACnB"}