@kids-reporter/routing-ui 0.1.0-alpha.1 → 0.1.0-alpha.3

package/dist/components/button.js

@@ -16,8 +16,8 @@ const buttonVariants = (0, _classVarianceAuthority.cva)(
 'font-noto gap-2.5 font-bold inline-flex cursor-pointer items-center justify-center rounded-full transition-colors duration-200', {
   variants: {
     variant: {
-      primary: ['text-white border-0 bg-red-400', 'hover:bg-red-500', 'active:bg-red-600', 'disabled:bg-gray-400 disabled:text-white disabled:cursor-default'],
-      secondary: ['bg-white text-gray-900 border-2 border-red-400', 'hover:text-white hover:border-red-500 hover:bg-red-500', 'active:text-white active:border-red-600 active:bg-red-600', 'disabled:border-gray-400 disabled:bg-white disabled:text-gray-400 disabled:cursor-default']
+      primary: ['text-white border-0 bg-red-400', 'hover:bg-red-500', 'active:bg-red-600', 'disabled:text-white disabled:cursor-default disabled:bg-neutral-400'],
+      secondary: ['bg-white text-gray-900 border-2 border-red-400', 'hover:text-white hover:border-red-500 hover:bg-red-500', 'active:text-white active:border-red-600 active:bg-red-600', 'disabled:bg-white disabled:cursor-default disabled:border-neutral-400 disabled:text-neutral-400']
     },
     size: {
       44: 'h-11 px-5 py-2 text-base',

package/dist/components/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","names":["_interopRequireDefault","require","Object","defineProperty","exports","value","default","_reactSlot","_classVarianceAuthority","_react","_cn","_jsxRuntime","buttonVariants","cva","variants","variant","primary","secondary","size","defaultVariants","LoadingSpinner","jsxs","width","height","viewBox","fill","className","xmlns","children","jsx","opacity","d","Button","React","forwardRef","isLoading","disabled","asChild","props","ref","isDisabled","buttonClasses","cn","Comp","Slot","_default"],"sources":["../../src/components/button.tsx"],"sourcesContent":["'use client'\n\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport React from 'react'\n\nimport { cn } from '../utils/cn'\n\nconst buttonVariants = cva(\n  // Base styles\n  'font-noto gap-2.5 font-bold inline-flex cursor-pointer items-center justify-center rounded-full transition-colors duration-200',\n  {\n    variants: {\n      variant: {\n        primary: [\n          'text-white border-0 bg-red-400',\n          'hover:bg-red-500',\n          'active:bg-red-600',\n          'disabled:bg-gray-400 disabled:text-white disabled:cursor-default',\n        ],\n        secondary: [\n          'bg-white text-gray-900 border-2 border-red-400',\n          'hover:text-white hover:border-red-500 hover:bg-red-500',\n          'active:text-white active:border-red-600 active:bg-red-600',\n          'disabled:border-gray-400 disabled:bg-white disabled:text-gray-400 disabled:cursor-default',\n        ],\n      },\n      size: {\n        44: 'h-11 px-5 py-2 text-base', // 44px height, 16px font size\n        36: 'h-9 px-4 py-2 text-sm', // 36px height, 14px font size\n        32: 'h-8 px-3 py-1 text-sm', // 32px height, 14px font size\n      },\n    },\n    defaultVariants: {\n      variant: 'primary',\n      size: 44,\n    },\n  }\n)\n\n// Loading spinner icon component\nconst LoadingSpinner = ({ size = 20 }: { size?: number }) => (\n  <svg\n    width={size}\n    height={size}\n    viewBox=\"0 0 25 24\"\n    fill=\"none\"\n    className=\"animate-spin\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      opacity=\"0.5\"\n      d=\"M12.5 2C10.5222 2 8.58879 2.58649 6.9443 3.6853C5.29981 4.78412 4.01809 6.3459 3.26121 8.17317C2.50433 10.0004 2.3063 12.0111 2.69215 13.9509C3.078 15.8907 4.03041 17.6725 5.42894 19.0711C6.82746 20.4696 8.60929 21.422 10.5491 21.8079C12.4889 22.1937 14.4996 21.9957 16.3268 21.2388C18.1541 20.4819 19.7159 19.2002 20.8147 17.5557C21.9135 15.9112 22.5 13.9778 22.5 12C22.5 10.6868 22.2413 9.38642 21.7388 8.17317C21.2363 6.95991 20.4997 5.85752 19.5711 4.92893C18.6425 4.00035 17.5401 3.26375 16.3268 2.7612C15.1136 2.25866 13.8132 2 12.5 2ZM12.5 20C10.9178 20 9.37104 19.5308 8.05544 18.6518C6.73985 17.7727 5.71447 16.5233 5.10897 15.0615C4.50347 13.5997 4.34504 11.9911 4.65372 10.4393C4.9624 8.88743 5.72433 7.46197 6.84315 6.34315C7.96197 5.22433 9.38743 4.4624 10.9393 4.15372C12.4911 3.84504 14.0997 4.00346 15.5615 4.60896C17.0233 5.21447 18.2727 6.23984 19.1518 7.55544C20.0308 8.87103 20.5 10.4177 20.5 12C20.5 14.1217 19.6572 16.1566 18.1569 17.6569C16.6566 19.1571 14.6217 20 12.5 20Z\"\n      fill=\"currentColor\"\n    />\n    <path\n      d=\"M20.5 12H22.5C22.5 10.6868 22.2413 9.38642 21.7388 8.17317C21.2362 6.95991 20.4997 5.85752 19.5711 4.92893C18.6425 4.00035 17.5401 3.26375 16.3268 2.7612C15.1136 2.25866 13.8132 2 12.5 2V4C14.6217 4 16.6566 4.84285 18.1569 6.34315C19.6571 7.84344 20.5 9.87827 20.5 12Z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n)\n\nexport type ButtonProps = {\n  isLoading?: boolean\n  disabled?: boolean\n  asChild?: boolean\n  children: React.ReactNode\n} & VariantProps<typeof buttonVariants> &\n  React.ButtonHTMLAttributes<HTMLButtonElement>\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      isLoading = false,\n      disabled = false,\n      asChild = false,\n      size,\n      variant,\n      className,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const isDisabled = disabled || isLoading\n\n    const buttonClasses = cn(buttonVariants({ variant, size }), className)\n\n    const Comp = asChild ? Slot : 'button'\n\n    return (\n      <Comp\n        ref={ref}\n        className={buttonClasses}\n        disabled={isDisabled}\n        {...props}\n      >\n        {isLoading ? (\n          <LoadingSpinner size={size === 32 ? 16 : size === 36 ? 18 : 20} />\n        ) : (\n          children\n        )}\n      </Comp>\n    )\n  }\n)\n\nexport default Button\n"],"mappings":";AAAA,YAAY;;AAAA,IAAAA,sBAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,KAAA;AAAA;AAAAD,OAAA,CAAAE,OAAA;AAEZ,IAAAC,UAAA,GAAAN,OAAA;AACA,IAAAO,uBAAA,GAAAP,OAAA;AACA,IAAAQ,MAAA,GAAAT,sBAAA,CAAAC,OAAA;AAEA,IAAAS,GAAA,GAAAT,OAAA;AAAgC,IAAAU,WAAA,GAAAV,OAAA;AAEhC,MAAMW,cAAc,GAAG,IAAAC,2BAAG;AACxB;AACA,gIAAgI,EAChI;EACEC,QAAQ,EAAE;IACRC,OAAO,EAAE;MACPC,OAAO,EAAE,CACP,gCAAgC,EAChC,kBAAkB,EAClB,mBAAmB,EACnB,kEAAkE,CACnE;MACDC,SAAS,EAAE,CACT,gDAAgD,EAChD,wDAAwD,EACxD,2DAA2D,EAC3D,2FAA2F;IAE/F,CAAC;IACDC,IAAI,EAAE;MACJ,EAAE,EAAE,0BAA0B;MAAE;MAChC,EAAE,EAAE,uBAAuB;MAAE;MAC7B,EAAE,EAAE,uBAAuB,CAAE;IAC/B;EACF,CAAC;EACDC,eAAe,EAAE;IACfJ,OAAO,EAAE,SAAS;IAClBG,IAAI,EAAE;EACR;AACF,CACF,CAAC;;AAED;AACA,MAAME,cAAc,GAAGA,CAAC;EAAEF,IAAI,GAAG;AAAsB,CAAC,kBACtD,IAAAP,WAAA,CAAAU,IAAA;EACEC,KAAK,EAAEJ,IAAK;EACZK,MAAM,EAAEL,IAAK;EACbM,OAAO,EAAC,WAAW;EACnBC,IAAI,EAAC,MAAM;EACXC,SAAS,EAAC,cAAc;EACxBC,KAAK,EAAC,4BAA4B;EAAAC,QAAA,gBAElC,IAAAjB,WAAA,CAAAkB,GAAA;IACEC,OAAO,EAAC,KAAK;IACbC,CAAC,EAAC,s+BAAs+B;IACx+BN,IAAI,EAAC;EAAc,CACpB,CAAC,eACF,IAAAd,WAAA,CAAAkB,GAAA;IACEE,CAAC,EAAC,8QAA8Q;IAChRN,IAAI,EAAC;EAAc,CACpB,CAAC;AAAA,CACC,CACN;AAUD,MAAMO,MAAM,gBAAGC,cAAK,CAACC,UAAU,CAC7B,CACE;EACEC,SAAS,GAAG,KAAK;EACjBC,QAAQ,GAAG,KAAK;EAChBC,OAAO,GAAG,KAAK;EACfnB,IAAI;EACJH,OAAO;EACPW,SAAS;EACTE,QAAQ;EACR,GAAGU;AACL,CAAC,EACDC,GAAG,KACA;EACH,MAAMC,UAAU,GAAGJ,QAAQ,IAAID,SAAS;EAExC,MAAMM,aAAa,GAAG,IAAAC,MAAE,EAAC9B,cAAc,CAAC;IAAEG,OAAO;IAAEG;EAAK,CAAC,CAAC,EAAEQ,SAAS,CAAC;EAEtE,MAAMiB,IAAI,GAAGN,OAAO,GAAGO,eAAI,GAAG,QAAQ;EAEtC,oBACE,IAAAjC,WAAA,CAAAkB,GAAA,EAACc,IAAI;IACHJ,GAAG,EAAEA,GAAI;IACTb,SAAS,EAAEe,aAAc;IACzBL,QAAQ,EAAEI,UAAW;IAAA,GACjBF,KAAK;IAAAV,QAAA,EAERO,SAAS,gBACR,IAAAxB,WAAA,CAAAkB,GAAA,EAACT,cAAc;MAACF,IAAI,EAAEA,IAAI,KAAK,EAAE,GAAG,EAAE,GAAGA,IAAI,KAAK,EAAE,GAAG,EAAE,GAAG;IAAG,CAAE,CAAC,GAElEU;EACD,CACG,CAAC;AAEX,CACF,CAAC;AAAA,IAAAiB,QAAA,GAAAzC,OAAA,CAAAE,OAAA,GAEc0B,MAAM"}
+{"version":3,"file":"button.js","names":["_interopRequireDefault","require","Object","defineProperty","exports","value","default","_reactSlot","_classVarianceAuthority","_react","_cn","_jsxRuntime","buttonVariants","cva","variants","variant","primary","secondary","size","defaultVariants","LoadingSpinner","jsxs","width","height","viewBox","fill","className","xmlns","children","jsx","opacity","d","Button","React","forwardRef","isLoading","disabled","asChild","props","ref","isDisabled","buttonClasses","cn","Comp","Slot","_default"],"sources":["../../src/components/button.tsx"],"sourcesContent":["'use client'\n\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport React from 'react'\n\nimport { cn } from '../utils/cn'\n\nconst buttonVariants = cva(\n  // Base styles\n  'font-noto gap-2.5 font-bold inline-flex cursor-pointer items-center justify-center rounded-full transition-colors duration-200',\n  {\n    variants: {\n      variant: {\n        primary: [\n          'text-white border-0 bg-red-400',\n          'hover:bg-red-500',\n          'active:bg-red-600',\n          'disabled:text-white disabled:cursor-default disabled:bg-neutral-400',\n        ],\n        secondary: [\n          'bg-white text-gray-900 border-2 border-red-400',\n          'hover:text-white hover:border-red-500 hover:bg-red-500',\n          'active:text-white active:border-red-600 active:bg-red-600',\n          'disabled:bg-white disabled:cursor-default disabled:border-neutral-400 disabled:text-neutral-400',\n        ],\n      },\n      size: {\n        44: 'h-11 px-5 py-2 text-base', // 44px height, 16px font size\n        36: 'h-9 px-4 py-2 text-sm', // 36px height, 14px font size\n        32: 'h-8 px-3 py-1 text-sm', // 32px height, 14px font size\n      },\n    },\n    defaultVariants: {\n      variant: 'primary',\n      size: 44,\n    },\n  }\n)\n\n// Loading spinner icon component\nconst LoadingSpinner = ({ size = 20 }: { size?: number }) => (\n  <svg\n    width={size}\n    height={size}\n    viewBox=\"0 0 25 24\"\n    fill=\"none\"\n    className=\"animate-spin\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      opacity=\"0.5\"\n      d=\"M12.5 2C10.5222 2 8.58879 2.58649 6.9443 3.6853C5.29981 4.78412 4.01809 6.3459 3.26121 8.17317C2.50433 10.0004 2.3063 12.0111 2.69215 13.9509C3.078 15.8907 4.03041 17.6725 5.42894 19.0711C6.82746 20.4696 8.60929 21.422 10.5491 21.8079C12.4889 22.1937 14.4996 21.9957 16.3268 21.2388C18.1541 20.4819 19.7159 19.2002 20.8147 17.5557C21.9135 15.9112 22.5 13.9778 22.5 12C22.5 10.6868 22.2413 9.38642 21.7388 8.17317C21.2363 6.95991 20.4997 5.85752 19.5711 4.92893C18.6425 4.00035 17.5401 3.26375 16.3268 2.7612C15.1136 2.25866 13.8132 2 12.5 2ZM12.5 20C10.9178 20 9.37104 19.5308 8.05544 18.6518C6.73985 17.7727 5.71447 16.5233 5.10897 15.0615C4.50347 13.5997 4.34504 11.9911 4.65372 10.4393C4.9624 8.88743 5.72433 7.46197 6.84315 6.34315C7.96197 5.22433 9.38743 4.4624 10.9393 4.15372C12.4911 3.84504 14.0997 4.00346 15.5615 4.60896C17.0233 5.21447 18.2727 6.23984 19.1518 7.55544C20.0308 8.87103 20.5 10.4177 20.5 12C20.5 14.1217 19.6572 16.1566 18.1569 17.6569C16.6566 19.1571 14.6217 20 12.5 20Z\"\n      fill=\"currentColor\"\n    />\n    <path\n      d=\"M20.5 12H22.5C22.5 10.6868 22.2413 9.38642 21.7388 8.17317C21.2362 6.95991 20.4997 5.85752 19.5711 4.92893C18.6425 4.00035 17.5401 3.26375 16.3268 2.7612C15.1136 2.25866 13.8132 2 12.5 2V4C14.6217 4 16.6566 4.84285 18.1569 6.34315C19.6571 7.84344 20.5 9.87827 20.5 12Z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n)\n\nexport type ButtonProps = {\n  isLoading?: boolean\n  disabled?: boolean\n  asChild?: boolean\n  children: React.ReactNode\n} & VariantProps<typeof buttonVariants> &\n  React.ButtonHTMLAttributes<HTMLButtonElement>\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      isLoading = false,\n      disabled = false,\n      asChild = false,\n      size,\n      variant,\n      className,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const isDisabled = disabled || isLoading\n\n    const buttonClasses = cn(buttonVariants({ variant, size }), className)\n\n    const Comp = asChild ? Slot : 'button'\n\n    return (\n      <Comp\n        ref={ref}\n        className={buttonClasses}\n        disabled={isDisabled}\n        {...props}\n      >\n        {isLoading ? (\n          <LoadingSpinner size={size === 32 ? 16 : size === 36 ? 18 : 20} />\n        ) : (\n          children\n        )}\n      </Comp>\n    )\n  }\n)\n\nexport default Button\n"],"mappings":";AAAA,YAAY;;AAAA,IAAAA,sBAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,KAAA;AAAA;AAAAD,OAAA,CAAAE,OAAA;AAEZ,IAAAC,UAAA,GAAAN,OAAA;AACA,IAAAO,uBAAA,GAAAP,OAAA;AACA,IAAAQ,MAAA,GAAAT,sBAAA,CAAAC,OAAA;AAEA,IAAAS,GAAA,GAAAT,OAAA;AAAgC,IAAAU,WAAA,GAAAV,OAAA;AAEhC,MAAMW,cAAc,GAAG,IAAAC,2BAAG;AACxB;AACA,gIAAgI,EAChI;EACEC,QAAQ,EAAE;IACRC,OAAO,EAAE;MACPC,OAAO,EAAE,CACP,gCAAgC,EAChC,kBAAkB,EAClB,mBAAmB,EACnB,qEAAqE,CACtE;MACDC,SAAS,EAAE,CACT,gDAAgD,EAChD,wDAAwD,EACxD,2DAA2D,EAC3D,iGAAiG;IAErG,CAAC;IACDC,IAAI,EAAE;MACJ,EAAE,EAAE,0BAA0B;MAAE;MAChC,EAAE,EAAE,uBAAuB;MAAE;MAC7B,EAAE,EAAE,uBAAuB,CAAE;IAC/B;EACF,CAAC;EACDC,eAAe,EAAE;IACfJ,OAAO,EAAE,SAAS;IAClBG,IAAI,EAAE;EACR;AACF,CACF,CAAC;;AAED;AACA,MAAME,cAAc,GAAGA,CAAC;EAAEF,IAAI,GAAG;AAAsB,CAAC,kBACtD,IAAAP,WAAA,CAAAU,IAAA;EACEC,KAAK,EAAEJ,IAAK;EACZK,MAAM,EAAEL,IAAK;EACbM,OAAO,EAAC,WAAW;EACnBC,IAAI,EAAC,MAAM;EACXC,SAAS,EAAC,cAAc;EACxBC,KAAK,EAAC,4BAA4B;EAAAC,QAAA,gBAElC,IAAAjB,WAAA,CAAAkB,GAAA;IACEC,OAAO,EAAC,KAAK;IACbC,CAAC,EAAC,s+BAAs+B;IACx+BN,IAAI,EAAC;EAAc,CACpB,CAAC,eACF,IAAAd,WAAA,CAAAkB,GAAA;IACEE,CAAC,EAAC,8QAA8Q;IAChRN,IAAI,EAAC;EAAc,CACpB,CAAC;AAAA,CACC,CACN;AAUD,MAAMO,MAAM,gBAAGC,cAAK,CAACC,UAAU,CAC7B,CACE;EACEC,SAAS,GAAG,KAAK;EACjBC,QAAQ,GAAG,KAAK;EAChBC,OAAO,GAAG,KAAK;EACfnB,IAAI;EACJH,OAAO;EACPW,SAAS;EACTE,QAAQ;EACR,GAAGU;AACL,CAAC,EACDC,GAAG,KACA;EACH,MAAMC,UAAU,GAAGJ,QAAQ,IAAID,SAAS;EAExC,MAAMM,aAAa,GAAG,IAAAC,MAAE,EAAC9B,cAAc,CAAC;IAAEG,OAAO;IAAEG;EAAK,CAAC,CAAC,EAAEQ,SAAS,CAAC;EAEtE,MAAMiB,IAAI,GAAGN,OAAO,GAAGO,eAAI,GAAG,QAAQ;EAEtC,oBACE,IAAAjC,WAAA,CAAAkB,GAAA,EAACc,IAAI;IACHJ,GAAG,EAAEA,GAAI;IACTb,SAAS,EAAEe,aAAc;IACzBL,QAAQ,EAAEI,UAAW;IAAA,GACjBF,KAAK;IAAAV,QAAA,EAERO,SAAS,gBACR,IAAAxB,WAAA,CAAAkB,GAAA,EAACT,cAAc;MAACF,IAAI,EAAEA,IAAI,KAAK,EAAE,GAAG,EAAE,GAAGA,IAAI,KAAK,EAAE,GAAG,EAAE,GAAG;IAAG,CAAE,CAAC,GAElEU;EACD,CACG,CAAC;AAEX,CACF,CAAC;AAAA,IAAAiB,QAAA,GAAAzC,OAAA,CAAAE,OAAA,GAEc0B,MAAM"}

package/dist/footer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"footer.d.ts","sourceRoot":"","sources":["../src/footer.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAGpD,KAAK,WAAW,GAAG;IACjB,gBAAgB,CAAC,EAAE,gBAAgB,CAAA;IACnC,mBAAmB,CAAC,EAAE,QAAQ,EAAE,CAAA;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B,CAAA;AAED,QAAA,MAAM,MAAM,GAAI,yEAKb,WAAW,4CA0Hb,CAAA;AAED,eAAe,MAAM,CAAA"}
+{"version":3,"file":"footer.d.ts","sourceRoot":"","sources":["../src/footer.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAGpD,KAAK,WAAW,GAAG;IACjB,gBAAgB,CAAC,EAAE,gBAAgB,CAAA;IACnC,mBAAmB,CAAC,EAAE,QAAQ,EAAE,CAAA;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B,CAAA;AAED,QAAA,MAAM,MAAM,GAAI,yEAKb,WAAW,4CA0Hb,CAAA;AAED,eAAe,MAAM,CAAA"}

package/dist/footer.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _image = _interopRequireDefault(require("next/image"));
 var _button = _interopRequireDefault(require("./components/button"));
 var _defaultValues = require("./constants/default-values");
 var _generateSocialMediaConfig = require("./utils/generate-social-media-config");
@@ -33,7 +32,7 @@ const Footer = ({
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
                 href: "/",
                 className: "flex items-center",
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_image.default, {
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
                   src: "/assets/images/footer-logo.svg",
                   alt: "\u5C11\u5E74\u5831\u5C0E\u8005",
                   loading: "lazy",

package/dist/footer.js.map

@@ -1 +1 @@
-{"version":3,"file":"footer.js","names":["_interopRequireDefault","require","Object","defineProperty","exports","value","default","_image","_button","_defaultValues","_generateSocialMediaConfig","_jsxRuntime","Footer","socialMediaHrefs","SOCIAL_MEDIA_ITEMS","map","item","href","additionalMenuItems","ADDITIONAL_MENU_ITEMS","donateUrl","DONATE_URL","privacyPolicyUrl","PRIVACY_POLICY","socialMediaConfig","generateSocialMediaConfig","jsxs","className","children","jsx","src","alt","loading","width","height","size","variant","asChild","target","rel","slice","link","external","undefined","label","social","IconComponent","icon","Date","getFullYear","_default"],"sources":["../src/footer.tsx"],"sourcesContent":["'use client'\n\nimport Image from 'next/image'\n\nimport Button from './components/button'\nimport {\n  ADDITIONAL_MENU_ITEMS,\n  DONATE_URL,\n  PRIVACY_POLICY,\n  SOCIAL_MEDIA_ITEMS,\n} from './constants/default-values'\nimport { MenuItem, SocialMediaHrefs } from './types'\nimport { generateSocialMediaConfig } from './utils/generate-social-media-config'\n\ntype FooterProps = {\n  socialMediaHrefs?: SocialMediaHrefs\n  additionalMenuItems?: MenuItem[]\n  donateUrl?: string\n  privacyPolicyUrl?: string\n}\n\nconst Footer = ({\n  socialMediaHrefs = SOCIAL_MEDIA_ITEMS.map((item) => item.href),\n  additionalMenuItems = ADDITIONAL_MENU_ITEMS,\n  donateUrl = DONATE_URL,\n  privacyPolicyUrl = PRIVACY_POLICY,\n}: FooterProps) => {\n  const socialMediaConfig = generateSocialMediaConfig(socialMediaHrefs)\n\n  return (\n    <footer className=\"w-full bg-neutral-white\">\n      {/* Main Footer Content */}\n      <div className=\"py-12 desktop:py-14 w-full bg-neutral-white px-(--margin-mobile) desktop:px-(--margin-desktop)\">\n        <div className=\"max-w-300 mx-auto\">\n          <div className=\"gap-8 flex flex-col items-center desktop:flex-row desktop:justify-between\">\n            {/* Logo and Description */}\n            <div className=\"max-w-100 gap-6 flex w-full flex-col items-center desktop:items-start\">\n              <div className=\"flex items-center\">\n                <a href=\"/\" className=\"flex items-center\">\n                  <Image\n                    src=\"/assets/images/footer-logo.svg\"\n                    alt=\"少年報導者\"\n                    loading=\"lazy\"\n                    width={238}\n                    height={26}\n                  />\n                </a>\n              </div>\n              <p className=\"prose-p2 w-full text-neutral-900\">\n                《少年報導者》是由非營利媒體《報導者》針對兒少打造的深度新聞報導品牌，與兒童和少年一起理解世界，參與未來。\n              </p>\n              <Button size={44} variant=\"secondary\" asChild className=\"w-75\">\n                <a href={donateUrl} target=\"_blank\" rel=\"noreferrer\">\n                  贊助我們\n                </a>\n              </Button>\n            </div>\n\n            <div className=\"gap-6 flex flex-row\">\n              <div className=\"gap-2 flex flex-col\">\n                {additionalMenuItems.slice(0, 4).map((link) => (\n                  <a\n                    key={link.label}\n                    href={link.href}\n                    className=\"prose-p2-bold min-w-30 text-neutral-900 transition-colors duration-200 hover:text-red-400\"\n                    target={link.external ? '_blank' : undefined}\n                    rel={link.external ? 'noopener noreferrer' : undefined}\n                  >\n                    {link.label}\n                  </a>\n                ))}\n              </div>\n              <div className=\"gap-2 flex flex-col\">\n                {additionalMenuItems.slice(4).map((link) => (\n                  <a\n                    key={link.label}\n                    href={link.href}\n                    className=\"prose-p2-bold min-w-30 text-neutral-900 transition-colors duration-200 hover:text-red-400\"\n                    target={link.external ? '_blank' : undefined}\n                    rel={link.external ? 'noopener noreferrer' : undefined}\n                  >\n                    {link.label}\n                  </a>\n                ))}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div className=\"py-6 w-full bg-red-400 px-(--margin-mobile) desktop:px-(--margin-desktop)\">\n        <div className=\"max-w-300 mx-auto\">\n          <div className=\"gap-5 desktop:gap-4 flex flex-col items-center desktop:flex-row desktop:justify-between\">\n            <div className=\"gap-4 order-1 flex items-center desktop:order-2\">\n              {socialMediaConfig.map((social) => {\n                const IconComponent = social.icon\n                return (\n                  <a\n                    key={social.label}\n                    href={social.href}\n                    className=\"relative text-neutral-white transition-colors duration-200 hover:text-neutral-200\"\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\"\n                    aria-label={social.label}\n                  >\n                    <div className=\"peer w-6 h-6 relative z-10 flex items-center justify-center rounded-full text-neutral-white transition-all duration-200 hover:text-red-500\">\n                      {IconComponent && <IconComponent />}\n                    </div>\n                    <div className=\"p-2 peer-hover:bg-white absolute top-1/2 left-1/2 z-1 flex h-[23px] w-[23px] -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full transition-all duration-200\"></div>\n                  </a>\n                )\n              })}\n            </div>\n\n            <div className=\"prose-p3 text-center text-neutral-white desktop:order-1 desktop:text-left\">\n              <p className=\"desktop:inline\">\n                衛部救字第1131363879號｜勸募期間 2025/1/1~12/31\n                <span className=\"hidden desktop:inline\">｜</span>\n              </p>\n              <p className=\"desktop:inline\">\n                <a\n                  href={privacyPolicyUrl}\n                  target=\"_blank\"\n                  className=\"desktop:ml-1 text-neutral-white underline\"\n                  rel=\"noopener noreferrer\"\n                >\n                  隱私政策\n                </a>\n                ｜\n                <a\n                  href=\"https://www.twreporter.org/a/license-footer\"\n                  target=\"_blank\"\n                  className=\"desktop:ml-1 text-neutral-white underline\"\n                  rel=\"noopener noreferrer\"\n                >\n                  許可協議\n                </a>\n              </p>\n              <p className=\"hidden desktop:inline\">｜</p>\n              <p className=\"desktop:inline\">\n                Copyright © {new Date().getFullYear()} The Reporter\n              </p>\n            </div>\n          </div>\n        </div>\n      </div>\n    </footer>\n  )\n}\n\nexport default Footer\n"],"mappings":"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"}
+{"version":3,"file":"footer.js","names":["_interopRequireDefault","require","Object","defineProperty","exports","value","default","_button","_defaultValues","_generateSocialMediaConfig","_jsxRuntime","Footer","socialMediaHrefs","SOCIAL_MEDIA_ITEMS","map","item","href","additionalMenuItems","ADDITIONAL_MENU_ITEMS","donateUrl","DONATE_URL","privacyPolicyUrl","PRIVACY_POLICY","socialMediaConfig","generateSocialMediaConfig","jsxs","className","children","jsx","src","alt","loading","width","height","size","variant","asChild","target","rel","slice","link","external","undefined","label","social","IconComponent","icon","Date","getFullYear","_default"],"sources":["../src/footer.tsx"],"sourcesContent":["'use client'\n\nimport Button from './components/button'\nimport {\n  ADDITIONAL_MENU_ITEMS,\n  DONATE_URL,\n  PRIVACY_POLICY,\n  SOCIAL_MEDIA_ITEMS,\n} from './constants/default-values'\nimport { MenuItem, SocialMediaHrefs } from './types'\nimport { generateSocialMediaConfig } from './utils/generate-social-media-config'\n\ntype FooterProps = {\n  socialMediaHrefs?: SocialMediaHrefs\n  additionalMenuItems?: MenuItem[]\n  donateUrl?: string\n  privacyPolicyUrl?: string\n}\n\nconst Footer = ({\n  socialMediaHrefs = SOCIAL_MEDIA_ITEMS.map((item) => item.href),\n  additionalMenuItems = ADDITIONAL_MENU_ITEMS,\n  donateUrl = DONATE_URL,\n  privacyPolicyUrl = PRIVACY_POLICY,\n}: FooterProps) => {\n  const socialMediaConfig = generateSocialMediaConfig(socialMediaHrefs)\n\n  return (\n    <footer className=\"w-full bg-neutral-white\">\n      {/* Main Footer Content */}\n      <div className=\"py-12 desktop:py-14 w-full bg-neutral-white px-(--margin-mobile) desktop:px-(--margin-desktop)\">\n        <div className=\"max-w-300 mx-auto\">\n          <div className=\"gap-8 flex flex-col items-center desktop:flex-row desktop:justify-between\">\n            {/* Logo and Description */}\n            <div className=\"max-w-100 gap-6 flex w-full flex-col items-center desktop:items-start\">\n              <div className=\"flex items-center\">\n                <a href=\"/\" className=\"flex items-center\">\n                  <img\n                    src=\"/assets/images/footer-logo.svg\"\n                    alt=\"少年報導者\"\n                    loading=\"lazy\"\n                    width={238}\n                    height={26}\n                  />\n                </a>\n              </div>\n              <p className=\"prose-p2 w-full text-neutral-900\">\n                《少年報導者》是由非營利媒體《報導者》針對兒少打造的深度新聞報導品牌，與兒童和少年一起理解世界，參與未來。\n              </p>\n              <Button size={44} variant=\"secondary\" asChild className=\"w-75\">\n                <a href={donateUrl} target=\"_blank\" rel=\"noreferrer\">\n                  贊助我們\n                </a>\n              </Button>\n            </div>\n\n            <div className=\"gap-6 flex flex-row\">\n              <div className=\"gap-2 flex flex-col\">\n                {additionalMenuItems.slice(0, 4).map((link) => (\n                  <a\n                    key={link.label}\n                    href={link.href}\n                    className=\"prose-p2-bold min-w-30 text-neutral-900 transition-colors duration-200 hover:text-red-400\"\n                    target={link.external ? '_blank' : undefined}\n                    rel={link.external ? 'noopener noreferrer' : undefined}\n                  >\n                    {link.label}\n                  </a>\n                ))}\n              </div>\n              <div className=\"gap-2 flex flex-col\">\n                {additionalMenuItems.slice(4).map((link) => (\n                  <a\n                    key={link.label}\n                    href={link.href}\n                    className=\"prose-p2-bold min-w-30 text-neutral-900 transition-colors duration-200 hover:text-red-400\"\n                    target={link.external ? '_blank' : undefined}\n                    rel={link.external ? 'noopener noreferrer' : undefined}\n                  >\n                    {link.label}\n                  </a>\n                ))}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div className=\"py-6 w-full bg-red-400 px-(--margin-mobile) desktop:px-(--margin-desktop)\">\n        <div className=\"max-w-300 mx-auto\">\n          <div className=\"gap-5 desktop:gap-4 flex flex-col items-center desktop:flex-row desktop:justify-between\">\n            <div className=\"gap-4 order-1 flex items-center desktop:order-2\">\n              {socialMediaConfig.map((social) => {\n                const IconComponent = social.icon\n                return (\n                  <a\n                    key={social.label}\n                    href={social.href}\n                    className=\"relative text-neutral-white transition-colors duration-200 hover:text-neutral-200\"\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\"\n                    aria-label={social.label}\n                  >\n                    <div className=\"peer w-6 h-6 relative z-10 flex items-center justify-center rounded-full text-neutral-white transition-all duration-200 hover:text-red-500\">\n                      {IconComponent && <IconComponent />}\n                    </div>\n                    <div className=\"p-2 peer-hover:bg-white absolute top-1/2 left-1/2 z-1 flex h-[23px] w-[23px] -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full transition-all duration-200\"></div>\n                  </a>\n                )\n              })}\n            </div>\n\n            <div className=\"prose-p3 text-center text-neutral-white desktop:order-1 desktop:text-left\">\n              <p className=\"desktop:inline\">\n                衛部救字第1131363879號｜勸募期間 2025/1/1~12/31\n                <span className=\"hidden desktop:inline\">｜</span>\n              </p>\n              <p className=\"desktop:inline\">\n                <a\n                  href={privacyPolicyUrl}\n                  target=\"_blank\"\n                  className=\"desktop:ml-1 text-neutral-white underline\"\n                  rel=\"noopener noreferrer\"\n                >\n                  隱私政策\n                </a>\n                ｜\n                <a\n                  href=\"https://www.twreporter.org/a/license-footer\"\n                  target=\"_blank\"\n                  className=\"desktop:ml-1 text-neutral-white underline\"\n                  rel=\"noopener noreferrer\"\n                >\n                  許可協議\n                </a>\n              </p>\n              <p className=\"hidden desktop:inline\">｜</p>\n              <p className=\"desktop:inline\">\n                Copyright © {new Date().getFullYear()} The Reporter\n              </p>\n            </div>\n          </div>\n        </div>\n      </div>\n    </footer>\n  )\n}\n\nexport default Footer\n"],"mappings":"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"}

package/dist/header/menu/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/header/menu/index.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,QAAQ,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AAO7D,KAAK,SAAS,GAAG;IACf,MAAM,EAAE,OAAO,CAAA;IACf,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,QAAQ,EAAE,MAAM,EAAE,CAAA;IAClB,SAAS,EAAE,QAAQ,EAAE,CAAA;IACrB,mBAAmB,EAAE,QAAQ,EAAE,CAAA;IAC/B,gBAAgB,EAAE,gBAAgB,CAAA;IAClC,SAAS,EAAE,MAAM,CAAA;IACjB,YAAY,EAAE,MAAM,CAAA;IACpB,iBAAiB,EAAE,MAAM,CAAA;CAC1B,CAAA;AAUD,iBAAS,IAAI,CAAC,EACZ,MAAM,EACN,OAAO,EACP,QAAQ,EACR,SAAS,EACT,mBAAmB,EACnB,gBAAgB,EAChB,SAAS,EACT,YAAY,EACZ,iBAAiB,GAClB,EAAE,SAAS,2CA+JX;AAED,eAAe,IAAI,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/header/menu/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,QAAQ,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AAO7D,KAAK,SAAS,GAAG;IACf,MAAM,EAAE,OAAO,CAAA;IACf,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,QAAQ,EAAE,MAAM,EAAE,CAAA;IAClB,SAAS,EAAE,QAAQ,EAAE,CAAA;IACrB,mBAAmB,EAAE,QAAQ,EAAE,CAAA;IAC/B,gBAAgB,EAAE,gBAAgB,CAAA;IAClC,SAAS,EAAE,MAAM,CAAA;IACjB,YAAY,EAAE,MAAM,CAAA;IACpB,iBAAiB,EAAE,MAAM,CAAA;CAC1B,CAAA;AAUD,iBAAS,IAAI,CAAC,EACZ,MAAM,EACN,OAAO,EACP,QAAQ,EACR,SAAS,EACT,mBAAmB,EACnB,gBAAgB,EAChB,SAAS,EACT,YAAY,EACZ,iBAAiB,GAClB,EAAE,SAAS,2CA+JX;AAED,eAAe,IAAI,CAAA"}

package/dist/header/menu/index.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _image = _interopRequireDefault(require("next/image"));
 var _react = require("react");
 var _button = _interopRequireDefault(require("../../components/button"));
 var _icons = require("../../icons");
@@ -73,7 +72,7 @@ function Menu({
             className: "flex items-center",
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
               href: "/",
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_image.default, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
                 src: "/assets/images/brand-icon.svg",
                 alt: "\u5C11\u5E74\u5831\u5C0E\u8005 The Reporter for Kids",
                 className: "h-5",

package/dist/header/menu/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_interopRequireDefault","require","Object","defineProperty","exports","value","default","_image","_react","_button","_icons","_cn","_generateSocialMediaConfig","_sharedComponents","_headerMenuItem","_headerMenuItemGroup","_jsxRuntime","Divider","jsx","className","children","Menu","isOpen","onClose","keywords","menuItems","additionalMenuItems","socialMediaHrefs","donateUrl","subscribeUrl","searchPlaceholder","socialMediaConfig","generateSocialMediaConfig","useEffect","document","body","classList","add","remove","handleEscape","e","key","addEventListener","removeEventListener","jsxs","Fragment","cn","onClick","href","src","alt","height","width","loading","ClearIcon","SearchInputSection","mode","tags","isMenuOpen","contentClassName","slice","map","item","index","label","external","target","rel","icon","variant","size","asChild","_default"],"sources":["../../../src/header/menu/index.tsx"],"sourcesContent":["'use client'\n\nimport Image from 'next/image'\nimport { useEffect } from 'react'\n\nimport Button from '../../components/button'\nimport { ClearIcon } from '../../icons'\nimport type { MenuItem, SocialMediaHrefs } from '../../types'\nimport { cn } from '../../utils/cn'\nimport { generateSocialMediaConfig } from '../../utils/generate-social-media-config'\nimport { SearchInputSection } from '../shared-components'\nimport HeaderMenuItem from './header-menu-item'\nimport HeaderMenuItemGroup from './header-menu-item-group'\n\ntype MenuProps = {\n  isOpen: boolean\n  onClose: () => void\n  keywords: string[]\n  menuItems: MenuItem[]\n  additionalMenuItems: MenuItem[]\n  socialMediaHrefs: SocialMediaHrefs\n  donateUrl: string\n  subscribeUrl: string\n  searchPlaceholder: string\n}\n\nfunction Divider() {\n  return (\n    <div className=\"px-6 tablet:px-8 py-4 w-full\">\n      <div className=\"h-px w-full bg-neutral-300\"></div>\n    </div>\n  )\n}\n\nfunction Menu({\n  isOpen,\n  onClose,\n  keywords,\n  menuItems,\n  additionalMenuItems,\n  socialMediaHrefs,\n  donateUrl,\n  subscribeUrl,\n  searchPlaceholder,\n}: MenuProps) {\n  const socialMediaConfig = generateSocialMediaConfig(socialMediaHrefs)\n\n  useEffect(() => {\n    if (isOpen) {\n      document.body.classList.add('no-scroll')\n    } else {\n      document.body.classList.remove('no-scroll')\n    }\n\n    return () => {\n      document.body.classList.remove('no-scroll')\n    }\n  }, [isOpen])\n\n  useEffect(() => {\n    const handleEscape = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        onClose()\n      }\n    }\n\n    if (isOpen) {\n      document.addEventListener('keydown', handleEscape)\n    }\n\n    return () => {\n      document.removeEventListener('keydown', handleEscape)\n    }\n  }, [isOpen, onClose])\n\n  return (\n    <>\n      {/* Overlay */}\n      <div\n        className={cn(\n          'inset-0 fixed z-1001 bg-neutral-500/50 transition-opacity duration-300',\n          isOpen ? 'opacity-100' : 'pointer-events-none opacity-0'\n        )}\n        onClick={onClose}\n      />\n\n      {/* Menu */}\n      <div\n        className={cn(\n          'top-0 left-0 tablet:w-80 bg-white shadow-2xl ease-in-out scrollbar-thin tablet:pt-0 fixed z-1001 h-full w-full transform pt-(--mobile-header-height) transition-transform duration-300',\n          isOpen ? 'translate-x-0' : '-translate-x-full'\n        )}\n      >\n        <div className=\"flex h-full flex-col overflow-y-auto\">\n          <div className=\"px-6 tablet:px-8 py-4 mt-4 hidden items-center justify-between tablet:flex\">\n            <div className=\"flex items-center\">\n              <a href=\"/\">\n                <Image\n                  src=\"/assets/images/brand-icon.svg\"\n                  alt=\"少年報導者 The Reporter for Kids\"\n                  className=\"h-5\"\n                  height={20}\n                  width={183}\n                  loading=\"eager\"\n                />\n              </a>\n            </div>\n            <button\n              onClick={onClose}\n              className=\"w-8 h-8 flex cursor-pointer items-center justify-center rounded-full text-neutral-600 transition-colors duration-200 hover:text-neutral-800\"\n              aria-label=\"關閉選單\"\n            >\n              <ClearIcon />\n            </button>\n          </div>\n\n          <div className=\"px-6 tablet:px-8 pt-4 desktop:hidden\">\n            <SearchInputSection\n              mode=\"inline\"\n              tags={keywords}\n              searchPlaceholder={searchPlaceholder}\n            />\n          </div>\n\n          <div className=\"py-4 flex-1\">\n            <HeaderMenuItem {...menuItems?.[0]} />\n\n            <Divider />\n\n            {/* Categories */}\n            <div className=\"py-2\">\n              <HeaderMenuItemGroup isMenuOpen={isOpen} menuItems={menuItems} />\n            </div>\n\n            <Divider />\n\n            {/* Reading Settings */}\n            <HeaderMenuItem\n              {...additionalMenuItems?.[0]}\n              contentClassName=\"text-neutral-600 [&_span]:[font-family:var(--font-family-noto)] [&_span]:[font-size:var(--font-size-p2)] [&_span]:[font-weight:500] [&_span]:[line-height:var(--line-height-normal)] [&_span]:[letter-spacing:var(--letter-spacing-wide)] hover:text-neutral-900\"\n            />\n\n            <Divider />\n\n            {/* About Us Section */}\n            <div className=\"py-2\">\n              {additionalMenuItems.slice(1).map((item, index) => (\n                <HeaderMenuItem\n                  key={index}\n                  label={item.label}\n                  href={item.href}\n                  external={item.external}\n                  contentClassName=\"text-neutral-600 [&_span]:[font-family:var(--font-family-noto)] [&_span]:[font-size:var(--font-size-p2)] [&_span]:[font-weight:500] [&_span]:[line-height:var(--line-height-normal)] [&_span]:[letter-spacing:var(--letter-spacing-wide)] hover:text-neutral-900\"\n                />\n              ))}\n            </div>\n\n            <Divider />\n\n            {/* Social Media */}\n            <div className=\"px-6 tablet:px-8\">\n              <div className=\"gap-4 tablet:gap-0 px-4 flex items-center justify-center tablet:justify-between\">\n                {socialMediaConfig.map((item) => (\n                  <a\n                    key={item.label}\n                    href={item.href}\n                    className=\"text-neutral-900 transition-colors duration-200 hover:text-red-500\"\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\"\n                    aria-label={item.label}\n                  >\n                    <div className=\"w-6 h-6 flex items-center justify-center\">\n                      {item.icon && <item.icon />}\n                    </div>\n                  </a>\n                ))}\n              </div>\n            </div>\n          </div>\n\n          {/* Action Buttons */}\n          <div className=\"px-6 tablet:px-8 py-6 tablet:pt-6 tablet:pb-8\">\n            <div className=\"gap-4 flex flex-col\">\n              <Button variant=\"secondary\" size={44} asChild className=\"w-full\">\n                <a\n                  href={subscribeUrl}\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\"\n                >\n                  訂閱電子報\n                </a>\n              </Button>\n              <Button variant=\"primary\" size={44} asChild className=\"w-full\">\n                <a href={donateUrl} target=\"_blank\" rel=\"noopener noreferrer\">\n                  贊助我們\n                </a>\n              </Button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </>\n  )\n}\n\nexport default Menu\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["_interopRequireDefault","require","Object","defineProperty","exports","value","default","_react","_button","_icons","_cn","_generateSocialMediaConfig","_sharedComponents","_headerMenuItem","_headerMenuItemGroup","_jsxRuntime","Divider","jsx","className","children","Menu","isOpen","onClose","keywords","menuItems","additionalMenuItems","socialMediaHrefs","donateUrl","subscribeUrl","searchPlaceholder","socialMediaConfig","generateSocialMediaConfig","useEffect","document","body","classList","add","remove","handleEscape","e","key","addEventListener","removeEventListener","jsxs","Fragment","cn","onClick","href","src","alt","height","width","loading","ClearIcon","SearchInputSection","mode","tags","isMenuOpen","contentClassName","slice","map","item","index","label","external","target","rel","icon","variant","size","asChild","_default"],"sources":["../../../src/header/menu/index.tsx"],"sourcesContent":["'use client'\n\nimport { useEffect } from 'react'\n\nimport Button from '../../components/button'\nimport { ClearIcon } from '../../icons'\nimport type { MenuItem, SocialMediaHrefs } from '../../types'\nimport { cn } from '../../utils/cn'\nimport { generateSocialMediaConfig } from '../../utils/generate-social-media-config'\nimport { SearchInputSection } from '../shared-components'\nimport HeaderMenuItem from './header-menu-item'\nimport HeaderMenuItemGroup from './header-menu-item-group'\n\ntype MenuProps = {\n  isOpen: boolean\n  onClose: () => void\n  keywords: string[]\n  menuItems: MenuItem[]\n  additionalMenuItems: MenuItem[]\n  socialMediaHrefs: SocialMediaHrefs\n  donateUrl: string\n  subscribeUrl: string\n  searchPlaceholder: string\n}\n\nfunction Divider() {\n  return (\n    <div className=\"px-6 tablet:px-8 py-4 w-full\">\n      <div className=\"h-px w-full bg-neutral-300\"></div>\n    </div>\n  )\n}\n\nfunction Menu({\n  isOpen,\n  onClose,\n  keywords,\n  menuItems,\n  additionalMenuItems,\n  socialMediaHrefs,\n  donateUrl,\n  subscribeUrl,\n  searchPlaceholder,\n}: MenuProps) {\n  const socialMediaConfig = generateSocialMediaConfig(socialMediaHrefs)\n\n  useEffect(() => {\n    if (isOpen) {\n      document.body.classList.add('no-scroll')\n    } else {\n      document.body.classList.remove('no-scroll')\n    }\n\n    return () => {\n      document.body.classList.remove('no-scroll')\n    }\n  }, [isOpen])\n\n  useEffect(() => {\n    const handleEscape = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        onClose()\n      }\n    }\n\n    if (isOpen) {\n      document.addEventListener('keydown', handleEscape)\n    }\n\n    return () => {\n      document.removeEventListener('keydown', handleEscape)\n    }\n  }, [isOpen, onClose])\n\n  return (\n    <>\n      {/* Overlay */}\n      <div\n        className={cn(\n          'inset-0 fixed z-1001 bg-neutral-500/50 transition-opacity duration-300',\n          isOpen ? 'opacity-100' : 'pointer-events-none opacity-0'\n        )}\n        onClick={onClose}\n      />\n\n      {/* Menu */}\n      <div\n        className={cn(\n          'top-0 left-0 tablet:w-80 bg-white shadow-2xl ease-in-out scrollbar-thin tablet:pt-0 fixed z-1001 h-full w-full transform pt-(--mobile-header-height) transition-transform duration-300',\n          isOpen ? 'translate-x-0' : '-translate-x-full'\n        )}\n      >\n        <div className=\"flex h-full flex-col overflow-y-auto\">\n          <div className=\"px-6 tablet:px-8 py-4 mt-4 hidden items-center justify-between tablet:flex\">\n            <div className=\"flex items-center\">\n              <a href=\"/\">\n                <img\n                  src=\"/assets/images/brand-icon.svg\"\n                  alt=\"少年報導者 The Reporter for Kids\"\n                  className=\"h-5\"\n                  height={20}\n                  width={183}\n                  loading=\"eager\"\n                />\n              </a>\n            </div>\n            <button\n              onClick={onClose}\n              className=\"w-8 h-8 flex cursor-pointer items-center justify-center rounded-full text-neutral-600 transition-colors duration-200 hover:text-neutral-800\"\n              aria-label=\"關閉選單\"\n            >\n              <ClearIcon />\n            </button>\n          </div>\n\n          <div className=\"px-6 tablet:px-8 pt-4 desktop:hidden\">\n            <SearchInputSection\n              mode=\"inline\"\n              tags={keywords}\n              searchPlaceholder={searchPlaceholder}\n            />\n          </div>\n\n          <div className=\"py-4 flex-1\">\n            <HeaderMenuItem {...menuItems?.[0]} />\n\n            <Divider />\n\n            {/* Categories */}\n            <div className=\"py-2\">\n              <HeaderMenuItemGroup isMenuOpen={isOpen} menuItems={menuItems} />\n            </div>\n\n            <Divider />\n\n            {/* Reading Settings */}\n            <HeaderMenuItem\n              {...additionalMenuItems?.[0]}\n              contentClassName=\"text-neutral-600 [&_span]:[font-family:var(--font-family-noto)] [&_span]:[font-size:var(--font-size-p2)] [&_span]:[font-weight:500] [&_span]:[line-height:var(--line-height-normal)] [&_span]:[letter-spacing:var(--letter-spacing-wide)] hover:text-neutral-900\"\n            />\n\n            <Divider />\n\n            {/* About Us Section */}\n            <div className=\"py-2\">\n              {additionalMenuItems.slice(1).map((item, index) => (\n                <HeaderMenuItem\n                  key={index}\n                  label={item.label}\n                  href={item.href}\n                  external={item.external}\n                  contentClassName=\"text-neutral-600 [&_span]:[font-family:var(--font-family-noto)] [&_span]:[font-size:var(--font-size-p2)] [&_span]:[font-weight:500] [&_span]:[line-height:var(--line-height-normal)] [&_span]:[letter-spacing:var(--letter-spacing-wide)] hover:text-neutral-900\"\n                />\n              ))}\n            </div>\n\n            <Divider />\n\n            {/* Social Media */}\n            <div className=\"px-6 tablet:px-8\">\n              <div className=\"gap-4 tablet:gap-0 px-4 flex items-center justify-center tablet:justify-between\">\n                {socialMediaConfig.map((item) => (\n                  <a\n                    key={item.label}\n                    href={item.href}\n                    className=\"text-neutral-900 transition-colors duration-200 hover:text-red-500\"\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\"\n                    aria-label={item.label}\n                  >\n                    <div className=\"w-6 h-6 flex items-center justify-center\">\n                      {item.icon && <item.icon />}\n                    </div>\n                  </a>\n                ))}\n              </div>\n            </div>\n          </div>\n\n          {/* Action Buttons */}\n          <div className=\"px-6 tablet:px-8 py-6 tablet:pt-6 tablet:pb-8\">\n            <div className=\"gap-4 flex flex-col\">\n              <Button variant=\"secondary\" size={44} asChild className=\"w-full\">\n                <a\n                  href={subscribeUrl}\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\"\n                >\n                  訂閱電子報\n                </a>\n              </Button>\n              <Button variant=\"primary\" size={44} asChild className=\"w-full\">\n                <a href={donateUrl} target=\"_blank\" rel=\"noopener noreferrer\">\n                  贊助我們\n                </a>\n              </Button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </>\n  )\n}\n\nexport default Menu\n"],"mappings":"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"}

package/dist/header/shared-components.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shared-components.d.ts","sourceRoot":"","sources":["../../src/header/shared-components.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AA2ExC,wBAAgB,QAAQ,CAAC,EAAE,WAAmB,EAAE,EAAE;IAAE,WAAW,CAAC,EAAE,OAAO,CAAA;CAAE,2CAgB1E;AAED,KAAK,uBAAuB,GACxB;IACE,IAAI,EAAE,SAAS,CAAA;IACf,YAAY,EAAE,OAAO,CAAA;IACrB,IAAI,EAAE,MAAM,EAAE,CAAA;IACd,iBAAiB,EAAE,MAAM,CAAA;CAC1B,GACD;IACE,IAAI,EAAE,QAAQ,CAAA;IACd,IAAI,EAAE,MAAM,EAAE,CAAA;IACd,iBAAiB,EAAE,MAAM,CAAA;CAC1B,CAAA;AAEL,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,2CAwEhE;AAED,wBAAgB,aAAa,CAAC,EAC5B,cAAsB,EACtB,IAAI,EACJ,iBAAiB,EACjB,YAAY,GACb,EAAE;IACD,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,IAAI,EAAE,MAAM,EAAE,CAAA;IACd,iBAAiB,EAAE,MAAM,CAAA;IACzB,YAAY,EAAE,MAAM,CAAA;CACrB,2CAkEA;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,sBAAsB,EACtB,SAAS,GACV,EAAE;IACD,sBAAsB,EAAE,MAAM,IAAI,CAAA;IAClC,SAAS,EAAE,QAAQ,EAAE,CAAA;CACtB,2CA4BA;AAED,wBAAgB,eAAe,CAAC,EAC9B,sBAAsB,EACtB,KAAa,GACd,EAAE;IACD,sBAAsB,EAAE,MAAM,IAAI,CAAA;IAClC,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,2CAYA"}
+{"version":3,"file":"shared-components.d.ts","sourceRoot":"","sources":["../../src/header/shared-components.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AA2ExC,wBAAgB,QAAQ,CAAC,EAAE,WAAmB,EAAE,EAAE;IAAE,WAAW,CAAC,EAAE,OAAO,CAAA;CAAE,2CAgB1E;AAED,KAAK,uBAAuB,GACxB;IACE,IAAI,EAAE,SAAS,CAAA;IACf,YAAY,EAAE,OAAO,CAAA;IACrB,IAAI,EAAE,MAAM,EAAE,CAAA;IACd,iBAAiB,EAAE,MAAM,CAAA;CAC1B,GACD;IACE,IAAI,EAAE,QAAQ,CAAA;IACd,IAAI,EAAE,MAAM,EAAE,CAAA;IACd,iBAAiB,EAAE,MAAM,CAAA;CAC1B,CAAA;AAEL,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,2CAwEhE;AAED,wBAAgB,aAAa,CAAC,EAC5B,cAAsB,EACtB,IAAI,EACJ,iBAAiB,EACjB,YAAY,GACb,EAAE;IACD,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,IAAI,EAAE,MAAM,EAAE,CAAA;IACd,iBAAiB,EAAE,MAAM,CAAA;IACzB,YAAY,EAAE,MAAM,CAAA;CACrB,2CAkEA;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,sBAAsB,EACtB,SAAS,GACV,EAAE;IACD,sBAAsB,EAAE,MAAM,IAAI,CAAA;IAClC,SAAS,EAAE,QAAQ,EAAE,CAAA;CACtB,2CA4BA;AAED,wBAAgB,eAAe,CAAC,EAC9B,sBAAsB,EACtB,KAAa,GACd,EAAE;IACD,sBAAsB,EAAE,MAAM,IAAI,CAAA;IAClC,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,2CAYA"}

package/dist/header/shared-components.js

@@ -1,7 +1,6 @@
 "use strict";
 'use client';
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,7 +10,6 @@ exports.HamburgerButton = HamburgerButton;
 exports.LogoLink = LogoLink;
 exports.SearchInputSection = SearchInputSection;
 var _classVarianceAuthority = require("class-variance-authority");
-var _image = _interopRequireDefault(require("next/image"));
 var _react = require("react");
 var _components = require("../components");
 var _icons = require("../icons");
@@ -79,7 +77,7 @@ function LogoLink({
     href: "/",
     className: "flex items-center",
     rel: "home",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_image.default, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
       src: "/assets/images/brand-icon.svg",
       alt: "\u5C11\u5E74\u5831\u5C0E\u8005 The Reporter for Kids",
       loading: "eager",

package/dist/header/shared-components.js.map

@@ -1 +1 @@
-{"version":3,"file":"shared-components.js","names":["_interopRequireDefault","require","Object","defineProperty","exports","value","ActionButtons","BottomNavigation","HamburgerButton","LogoLink","SearchInputSection","_classVarianceAuthority","_image","_react","_components","_icons","_cn","_jsxRuntime","searchFormVariants","cva","variants","mode","inline","popover","isSearchOpen","true","false","compoundVariants","class","searchDropdownVariants","isFocused","compactMode","jsx","href","className","rel","children","default","src","alt","loading","cn","width","height","props","ref","useRef","setIsFocused","useState","searchValue","setSearchValue","tags","searchPlaceholder","useEffect","current","focus","document","body","classList","add","remove","jsxs","onFocus","onBlur","role","method","action","undefined","Input","placeholder","name","title","inputRef","onChange","map","keyword","encodeURIComponent","hideCtaButtons","subscribeUrl","setIsSearchOpen","containerRef","buttonRef","handleClickOutside","event","containerElement","buttonElement","contains","target","addEventListener","removeEventListener","Button","variant","size","asChild","onClick","ClearIcon","SearchIcon","SettingsIcon","onHamburgerOverlayOpen","menuItems","small","reduce","acc","item","index","label","length","HamburgerIconSmall","HamburgerIcon"],"sources":["../../src/header/shared-components.tsx"],"sourcesContent":["'use client'\nimport { cva } from 'class-variance-authority'\nimport Image from 'next/image'\nimport { useEffect, useRef, useState } from 'react'\n\nimport { Button, Input } from '../components'\nimport {\n  ClearIcon,\n  HamburgerIcon,\n  HamburgerIconSmall,\n  SearchIcon,\n  SettingsIcon,\n} from '../icons'\nimport type { MenuItem } from '../types'\nimport { cn } from '../utils/cn'\n\nconst searchFormVariants = cva(\n  'ease-in-out h-full transition-all duration-300',\n  {\n    variants: {\n      mode: {\n        inline: 'h-11 w-full',\n        popover: 'top-0 -right-4 w-66 absolute overflow-hidden opacity-0',\n      },\n      isSearchOpen: {\n        true: '',\n        false: '',\n      },\n    },\n    compoundVariants: [\n      {\n        mode: 'popover',\n        isSearchOpen: true,\n        class: 'w-66 pointer-events-auto opacity-100',\n      },\n      {\n        mode: 'popover',\n        isSearchOpen: false,\n        class: 'pointer-events-none',\n      },\n    ],\n  }\n)\n\nconst searchDropdownVariants = cva(\n  'rounded-xl mt-2 w-66 ease-in-out h-0 p-0 z-50 bg-neutral-white opacity-0 transition-all duration-200',\n  {\n    variants: {\n      mode: {\n        inline: '',\n        popover: 'top-12 -right-4 shadow-custom p-4 absolute',\n      },\n      isSearchOpen: {\n        true: '',\n        false: '',\n      },\n      isFocused: {\n        true: '',\n        false: '',\n      },\n    },\n    compoundVariants: [\n      {\n        mode: 'popover',\n        isSearchOpen: true,\n        isFocused: true,\n        class: 'p-4 h-min opacity-100',\n      },\n      {\n        mode: 'popover',\n        isSearchOpen: false,\n        class: 'pointer-events-none',\n      },\n      {\n        mode: 'inline',\n        isFocused: true,\n        class:\n          'translate-y-0 pt-6 mt-0 bg-neutral-transparent h-min w-full opacity-100',\n      },\n      {\n        mode: 'inline',\n        isFocused: false,\n        class: '-translate-y-3 pointer-events-none w-full',\n      },\n    ],\n  }\n)\n\nexport function LogoLink({ compactMode = false }: { compactMode?: boolean }) {\n  return (\n    <a href=\"/\" className=\"flex items-center\" rel=\"home\">\n      <Image\n        src=\"/assets/images/brand-icon.svg\"\n        alt=\"少年報導者 The Reporter for Kids\"\n        loading=\"eager\"\n        className={cn(\n          'h-5 tablet:h-6 desktop:h-8 ease-in-out w-auto transition-all duration-500',\n          compactMode && 'desktop:h-[26px]'\n        )}\n        width={293}\n        height={32}\n      />\n    </a>\n  )\n}\n\ntype SearchInputSectionProps =\n  | {\n      mode: 'popover'\n      isSearchOpen: boolean\n      tags: string[]\n      searchPlaceholder: string\n    }\n  | {\n      mode: 'inline'\n      tags: string[]\n      searchPlaceholder: string\n    }\n\nexport function SearchInputSection(props: SearchInputSectionProps) {\n  const ref = useRef<HTMLInputElement>(null)\n  const [isFocused, setIsFocused] = useState(false)\n  const [searchValue, setSearchValue] = useState('')\n\n  const mode = props.mode\n  const isSearchOpen = mode === 'popover' && props.isSearchOpen\n  const tags = props.tags\n  const searchPlaceholder = props.searchPlaceholder\n\n  useEffect(() => {\n    if (mode === 'inline') {\n      return\n    }\n    if (isSearchOpen) {\n      ref.current?.focus()\n      setIsFocused(true)\n      document.body.classList.add('no-scroll')\n      return\n    }\n    setIsFocused(false)\n    document.body.classList.remove('no-scroll')\n  }, [mode, isSearchOpen])\n\n  return (\n    <div\n      onFocus={() => setIsFocused(true)}\n      onBlur={() => setIsFocused(false)}\n      className={mode === 'inline' ? 'relative w-full' : 'h-11'}\n    >\n      <form\n        role=\"search\"\n        method=\"get\"\n        action=\"/search\"\n        className={searchFormVariants({\n          mode,\n          isSearchOpen: mode === 'popover' ? isSearchOpen : undefined,\n        })}\n      >\n        <Input\n          placeholder={searchPlaceholder}\n          name=\"q\"\n          title=\"Search for...\"\n          aria-label=\"Search for...\"\n          className=\"w-[99%]\"\n          inputRef={ref}\n          onChange={setSearchValue}\n          value={searchValue}\n        />\n      </form>\n      <div\n        className={searchDropdownVariants({\n          mode,\n          isSearchOpen: mode === 'popover' ? isSearchOpen : undefined,\n          isFocused,\n        })}\n      >\n        <h3 className=\"prose-p3 font-bold mb-3 text-neutral-700\">熱門搜尋</h3>\n        <div className=\"gap-2.5 flex flex-wrap\">\n          {tags.map((keyword) => (\n            <a\n              key={keyword}\n              className=\"px-3 py-1 prose-p2 font-bold cursor-pointer rounded-full bg-neutral-200 text-neutral-900 transition-colors duration-200 hover:bg-red-500 hover:text-neutral-white\"\n              href={`/search?q=${encodeURIComponent(keyword)}`}\n            >\n              #{keyword}\n            </a>\n          ))}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport function ActionButtons({\n  hideCtaButtons = false,\n  tags,\n  searchPlaceholder,\n  subscribeUrl,\n}: {\n  hideCtaButtons?: boolean\n  tags: string[]\n  searchPlaceholder: string\n  subscribeUrl: string\n}) {\n  const [isSearchOpen, setIsSearchOpen] = useState(false)\n\n  const containerRef = useRef<HTMLDivElement>(null)\n  const buttonRef = useRef<HTMLButtonElement>(null)\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      const containerElement = containerRef.current\n      const buttonElement = buttonRef.current\n      if (!containerElement || !buttonElement) return\n      if (\n        !containerElement.contains(event.target as Node) &&\n        !buttonElement.contains(event.target as Node)\n      ) {\n        setIsSearchOpen(false)\n      }\n    }\n\n    document.addEventListener('mousedown', handleClickOutside)\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside)\n    }\n  }, [])\n\n  return (\n    <div className=\"relative flex items-center\">\n      <div className=\"mr-6 relative flex items-center\" ref={containerRef}>\n        {/* CTA Buttons - Base layer */}\n        {!hideCtaButtons && !isSearchOpen && (\n          <div className=\"gap-4 flex items-center\">\n            <Button variant=\"secondary\" size={32} asChild>\n              <a href=\"/about#post\">投稿</a>\n            </Button>\n            <Button variant=\"primary\" size={32} asChild>\n              <a href={subscribeUrl} target=\"_blank\" rel=\"noopener noreferrer\">\n                訂閱\n              </a>\n            </Button>\n          </div>\n        )}\n\n        <SearchInputSection\n          isSearchOpen={isSearchOpen}\n          mode=\"popover\"\n          tags={tags}\n          searchPlaceholder={searchPlaceholder}\n        />\n      </div>\n\n      <button\n        className=\"w-8 h-8 mr-4 flex cursor-pointer items-center justify-center rounded-full text-neutral-600 transition-all duration-200 hover:text-neutral-800\"\n        aria-label=\"搜尋\"\n        onClick={() => setIsSearchOpen(!isSearchOpen)}\n        ref={buttonRef}\n      >\n        {isSearchOpen ? <ClearIcon /> : <SearchIcon />}\n      </button>\n      <button\n        className=\"w-8 h-8 flex cursor-pointer items-center justify-center rounded-full text-neutral-600 transition-all duration-200 hover:text-neutral-800\"\n        aria-label=\"設定\"\n      >\n        <SettingsIcon />\n      </button>\n    </div>\n  )\n}\n\nexport function BottomNavigation({\n  onHamburgerOverlayOpen,\n  menuItems,\n}: {\n  onHamburgerOverlayOpen: () => void\n  menuItems: MenuItem[]\n}) {\n  return (\n    <div className=\"py-2 px-4 flex w-full items-center justify-between border-y border-neutral-border\">\n      <HamburgerButton onHamburgerOverlayOpen={onHamburgerOverlayOpen} small />\n\n      {menuItems.reduce((acc, item, index) => {\n        return [\n          ...acc,\n          <div key={item.label} className=\"flex items-center\">\n            <a\n              href={item.href}\n              className=\"py-1 prose-p1 font-bold! h-6 flex items-center text-neutral-900 transition-colors hover:text-red-400\"\n            >\n              {item.label}\n            </a>\n          </div>,\n          ...(index < menuItems.length - 1\n            ? [\n                <div\n                  key={`separator-${index}`}\n                  className=\"h-4 mx-2 w-px bg-neutral-border\"\n                />,\n              ]\n            : []),\n        ]\n      }, [] as React.ReactNode[])}\n    </div>\n  )\n}\n\nexport function HamburgerButton({\n  onHamburgerOverlayOpen,\n  small = false,\n}: {\n  onHamburgerOverlayOpen: () => void\n  small?: boolean\n}) {\n  return (\n    <button\n      className={cn(\n        'rounded-sm ease-in-out flex cursor-pointer items-center justify-center transition-all duration-300 hover:[&>svg>path:nth-child(1)]:fill-blue-500 hover:[&>svg>path:nth-child(2)]:fill-red-500 hover:[&>svg>path:nth-child(3)]:fill-yellow-500 hover:[&>svg>rect:nth-child(1)]:fill-blue-500 hover:[&>svg>rect:nth-child(2)]:fill-red-500 hover:[&>svg>rect:nth-child(3)]:fill-yellow-500',\n        small ? 'w-6 h-6' : 'w-8 h-8'\n      )}\n      onClick={onHamburgerOverlayOpen}\n    >\n      {small ? <HamburgerIconSmall /> : <HamburgerIcon />}\n    </button>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"shared-components.js","names":["Object","defineProperty","exports","value","ActionButtons","BottomNavigation","HamburgerButton","LogoLink","SearchInputSection","_classVarianceAuthority","require","_react","_components","_icons","_cn","_jsxRuntime","searchFormVariants","cva","variants","mode","inline","popover","isSearchOpen","true","false","compoundVariants","class","searchDropdownVariants","isFocused","compactMode","jsx","href","className","rel","children","src","alt","loading","cn","width","height","props","ref","useRef","setIsFocused","useState","searchValue","setSearchValue","tags","searchPlaceholder","useEffect","current","focus","document","body","classList","add","remove","jsxs","onFocus","onBlur","role","method","action","undefined","Input","placeholder","name","title","inputRef","onChange","map","keyword","encodeURIComponent","hideCtaButtons","subscribeUrl","setIsSearchOpen","containerRef","buttonRef","handleClickOutside","event","containerElement","buttonElement","contains","target","addEventListener","removeEventListener","Button","variant","size","asChild","onClick","ClearIcon","SearchIcon","SettingsIcon","onHamburgerOverlayOpen","menuItems","small","reduce","acc","item","index","label","length","HamburgerIconSmall","HamburgerIcon"],"sources":["../../src/header/shared-components.tsx"],"sourcesContent":["'use client'\nimport { cva } from 'class-variance-authority'\nimport { useEffect, useRef, useState } from 'react'\n\nimport { Button, Input } from '../components'\nimport {\n  ClearIcon,\n  HamburgerIcon,\n  HamburgerIconSmall,\n  SearchIcon,\n  SettingsIcon,\n} from '../icons'\nimport type { MenuItem } from '../types'\nimport { cn } from '../utils/cn'\n\nconst searchFormVariants = cva(\n  'ease-in-out h-full transition-all duration-300',\n  {\n    variants: {\n      mode: {\n        inline: 'h-11 w-full',\n        popover: 'top-0 -right-4 w-66 absolute overflow-hidden opacity-0',\n      },\n      isSearchOpen: {\n        true: '',\n        false: '',\n      },\n    },\n    compoundVariants: [\n      {\n        mode: 'popover',\n        isSearchOpen: true,\n        class: 'w-66 pointer-events-auto opacity-100',\n      },\n      {\n        mode: 'popover',\n        isSearchOpen: false,\n        class: 'pointer-events-none',\n      },\n    ],\n  }\n)\n\nconst searchDropdownVariants = cva(\n  'rounded-xl mt-2 w-66 ease-in-out h-0 p-0 z-50 bg-neutral-white opacity-0 transition-all duration-200',\n  {\n    variants: {\n      mode: {\n        inline: '',\n        popover: 'top-12 -right-4 shadow-custom p-4 absolute',\n      },\n      isSearchOpen: {\n        true: '',\n        false: '',\n      },\n      isFocused: {\n        true: '',\n        false: '',\n      },\n    },\n    compoundVariants: [\n      {\n        mode: 'popover',\n        isSearchOpen: true,\n        isFocused: true,\n        class: 'p-4 h-min opacity-100',\n      },\n      {\n        mode: 'popover',\n        isSearchOpen: false,\n        class: 'pointer-events-none',\n      },\n      {\n        mode: 'inline',\n        isFocused: true,\n        class:\n          'translate-y-0 pt-6 mt-0 bg-neutral-transparent h-min w-full opacity-100',\n      },\n      {\n        mode: 'inline',\n        isFocused: false,\n        class: '-translate-y-3 pointer-events-none w-full',\n      },\n    ],\n  }\n)\n\nexport function LogoLink({ compactMode = false }: { compactMode?: boolean }) {\n  return (\n    <a href=\"/\" className=\"flex items-center\" rel=\"home\">\n      <img\n        src=\"/assets/images/brand-icon.svg\"\n        alt=\"少年報導者 The Reporter for Kids\"\n        loading=\"eager\"\n        className={cn(\n          'h-5 tablet:h-6 desktop:h-8 ease-in-out w-auto transition-all duration-500',\n          compactMode && 'desktop:h-[26px]'\n        )}\n        width={293}\n        height={32}\n      />\n    </a>\n  )\n}\n\ntype SearchInputSectionProps =\n  | {\n      mode: 'popover'\n      isSearchOpen: boolean\n      tags: string[]\n      searchPlaceholder: string\n    }\n  | {\n      mode: 'inline'\n      tags: string[]\n      searchPlaceholder: string\n    }\n\nexport function SearchInputSection(props: SearchInputSectionProps) {\n  const ref = useRef<HTMLInputElement>(null)\n  const [isFocused, setIsFocused] = useState(false)\n  const [searchValue, setSearchValue] = useState('')\n\n  const mode = props.mode\n  const isSearchOpen = mode === 'popover' && props.isSearchOpen\n  const tags = props.tags\n  const searchPlaceholder = props.searchPlaceholder\n\n  useEffect(() => {\n    if (mode === 'inline') {\n      return\n    }\n    if (isSearchOpen) {\n      ref.current?.focus()\n      setIsFocused(true)\n      document.body.classList.add('no-scroll')\n      return\n    }\n    setIsFocused(false)\n    document.body.classList.remove('no-scroll')\n  }, [mode, isSearchOpen])\n\n  return (\n    <div\n      onFocus={() => setIsFocused(true)}\n      onBlur={() => setIsFocused(false)}\n      className={mode === 'inline' ? 'relative w-full' : 'h-11'}\n    >\n      <form\n        role=\"search\"\n        method=\"get\"\n        action=\"/search\"\n        className={searchFormVariants({\n          mode,\n          isSearchOpen: mode === 'popover' ? isSearchOpen : undefined,\n        })}\n      >\n        <Input\n          placeholder={searchPlaceholder}\n          name=\"q\"\n          title=\"Search for...\"\n          aria-label=\"Search for...\"\n          className=\"w-[99%]\"\n          inputRef={ref}\n          onChange={setSearchValue}\n          value={searchValue}\n        />\n      </form>\n      <div\n        className={searchDropdownVariants({\n          mode,\n          isSearchOpen: mode === 'popover' ? isSearchOpen : undefined,\n          isFocused,\n        })}\n      >\n        <h3 className=\"prose-p3 font-bold mb-3 text-neutral-700\">熱門搜尋</h3>\n        <div className=\"gap-2.5 flex flex-wrap\">\n          {tags.map((keyword) => (\n            <a\n              key={keyword}\n              className=\"px-3 py-1 prose-p2 font-bold cursor-pointer rounded-full bg-neutral-200 text-neutral-900 transition-colors duration-200 hover:bg-red-500 hover:text-neutral-white\"\n              href={`/search?q=${encodeURIComponent(keyword)}`}\n            >\n              #{keyword}\n            </a>\n          ))}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport function ActionButtons({\n  hideCtaButtons = false,\n  tags,\n  searchPlaceholder,\n  subscribeUrl,\n}: {\n  hideCtaButtons?: boolean\n  tags: string[]\n  searchPlaceholder: string\n  subscribeUrl: string\n}) {\n  const [isSearchOpen, setIsSearchOpen] = useState(false)\n\n  const containerRef = useRef<HTMLDivElement>(null)\n  const buttonRef = useRef<HTMLButtonElement>(null)\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      const containerElement = containerRef.current\n      const buttonElement = buttonRef.current\n      if (!containerElement || !buttonElement) return\n      if (\n        !containerElement.contains(event.target as Node) &&\n        !buttonElement.contains(event.target as Node)\n      ) {\n        setIsSearchOpen(false)\n      }\n    }\n\n    document.addEventListener('mousedown', handleClickOutside)\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside)\n    }\n  }, [])\n\n  return (\n    <div className=\"relative flex items-center\">\n      <div className=\"mr-6 relative flex items-center\" ref={containerRef}>\n        {/* CTA Buttons - Base layer */}\n        {!hideCtaButtons && !isSearchOpen && (\n          <div className=\"gap-4 flex items-center\">\n            <Button variant=\"secondary\" size={32} asChild>\n              <a href=\"/about#post\">投稿</a>\n            </Button>\n            <Button variant=\"primary\" size={32} asChild>\n              <a href={subscribeUrl} target=\"_blank\" rel=\"noopener noreferrer\">\n                訂閱\n              </a>\n            </Button>\n          </div>\n        )}\n\n        <SearchInputSection\n          isSearchOpen={isSearchOpen}\n          mode=\"popover\"\n          tags={tags}\n          searchPlaceholder={searchPlaceholder}\n        />\n      </div>\n\n      <button\n        className=\"w-8 h-8 mr-4 flex cursor-pointer items-center justify-center rounded-full text-neutral-600 transition-all duration-200 hover:text-neutral-800\"\n        aria-label=\"搜尋\"\n        onClick={() => setIsSearchOpen(!isSearchOpen)}\n        ref={buttonRef}\n      >\n        {isSearchOpen ? <ClearIcon /> : <SearchIcon />}\n      </button>\n      <button\n        className=\"w-8 h-8 flex cursor-pointer items-center justify-center rounded-full text-neutral-600 transition-all duration-200 hover:text-neutral-800\"\n        aria-label=\"設定\"\n      >\n        <SettingsIcon />\n      </button>\n    </div>\n  )\n}\n\nexport function BottomNavigation({\n  onHamburgerOverlayOpen,\n  menuItems,\n}: {\n  onHamburgerOverlayOpen: () => void\n  menuItems: MenuItem[]\n}) {\n  return (\n    <div className=\"py-2 px-4 flex w-full items-center justify-between border-y border-neutral-border\">\n      <HamburgerButton onHamburgerOverlayOpen={onHamburgerOverlayOpen} small />\n\n      {menuItems.reduce((acc, item, index) => {\n        return [\n          ...acc,\n          <div key={item.label} className=\"flex items-center\">\n            <a\n              href={item.href}\n              className=\"py-1 prose-p1 font-bold! h-6 flex items-center text-neutral-900 transition-colors hover:text-red-400\"\n            >\n              {item.label}\n            </a>\n          </div>,\n          ...(index < menuItems.length - 1\n            ? [\n                <div\n                  key={`separator-${index}`}\n                  className=\"h-4 mx-2 w-px bg-neutral-border\"\n                />,\n              ]\n            : []),\n        ]\n      }, [] as React.ReactNode[])}\n    </div>\n  )\n}\n\nexport function HamburgerButton({\n  onHamburgerOverlayOpen,\n  small = false,\n}: {\n  onHamburgerOverlayOpen: () => void\n  small?: boolean\n}) {\n  return (\n    <button\n      className={cn(\n        'rounded-sm ease-in-out flex cursor-pointer items-center justify-center transition-all duration-300 hover:[&>svg>path:nth-child(1)]:fill-blue-500 hover:[&>svg>path:nth-child(2)]:fill-red-500 hover:[&>svg>path:nth-child(3)]:fill-yellow-500 hover:[&>svg>rect:nth-child(1)]:fill-blue-500 hover:[&>svg>rect:nth-child(2)]:fill-red-500 hover:[&>svg>rect:nth-child(3)]:fill-yellow-500',\n        small ? 'w-6 h-6' : 'w-8 h-8'\n      )}\n      onClick={onHamburgerOverlayOpen}\n    >\n      {small ? <HamburgerIconSmall /> : <HamburgerIcon />}\n    </button>\n  )\n}\n"],"mappings":"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"}

package/dist/styles.css

@@ -56,12 +56,12 @@
   --font-size-h5-large: 22px;
   --font-size-h6-large: 18px;
 
-  --font-size-h1-small: 28px;
-  --font-size-h2-small: 24px;
-  --font-size-h3-small: 22px;
-  --font-size-h4-small: 18px;
-  --font-size-h5-small: 17px;
-  --font-size-h6-small: 16px;
+  --font-size-h1-small: 32px;
+  --font-size-h2-small: 28px;
+  --font-size-h3-small: 24px;
+  --font-size-h4-small: 22px;
+  --font-size-h5-small: 20px;
+  --font-size-h6-small: 18px;
 
   --font-size-p1: 16px;
   --font-size-p2: 14px;
@@ -122,11 +122,11 @@
   /* Updated color palette using design system */
   --paletteColor1: var(--color-blue-400);
   --paletteColor2: var(--color-blue-600);
-  --paletteColor3: var(--color-neutral-gray-700);
-  --paletteColor4: var(--color-neutral-gray-900);
+  --paletteColor3: var(--color-neutral-700);
+  --paletteColor4: var(--color-neutral-900);
   --paletteColor5: var(--color-red-400);
   --paletteColor6: var(--color-yellow-400);
-  --paletteColor7: var(--color-neutral-gray-200);
+  --paletteColor7: var(--color-neutral-200);
   --paletteColor8: var(--color-neutral-white);
   --color: var(--paletteColor3);
 }
@@ -134,120 +134,6 @@
 /* Design System CSS Variables for compatibility */
 @layer base {
   :root {
-    /* Colors - Neutral */
-    --color-neutral-white: #ffffff;
-    --color-neutral-gray-100: #f8f8f8;
-    --color-neutral-gray-200: #eaeaea;
-    --color-neutral-gray-300: #d9d9d9;
-    --color-neutral-gray-400: #c6c6c6;
-    --color-neutral-gray-500: #a3a3a3;
-    --color-neutral-gray-600: #8e8e8e;
-    --color-neutral-gray-700: #575757;
-    --color-neutral-gray-800: #3b3b3b;
-    --color-neutral-gray-900: #232323;
-    --color-neutral-black: #000000;
-    --color-neutral-border: #00000026;
-
-    /* Colors - Brand Red */
-    --color-red-100: #fff0f2;
-    --color-red-200: #ffc4ca;
-    --color-red-300: #ff98a2;
-    --color-red-400: #f76977;
-    --color-red-500: #bd4450;
-    --color-red-600: #a0343e;
-    --color-red-700: #82262f;
-    --color-red-800: #651a22;
-
-    /* Colors - Brand Blue */
-    --color-blue-100: #e9f8ff;
-    --color-blue-200: #b9e8ff;
-    --color-blue-300: #89d9ff;
-    --color-blue-400: #27b3f5;
-    --color-blue-500: #1696d3;
-    --color-blue-600: #087bb1;
-    --color-blue-700: #00618f;
-    --color-blue-800: #004a6d;
-
-    /* Colors - Brand Yellow */
-    --color-yellow-100: #fff9ec;
-    --color-yellow-200: #ffedc2;
-    --color-yellow-300: #ffe197;
-    --color-yellow-400: #f8c341;
-    --color-yellow-500: #d6a52d;
-    --color-yellow-600: #b4881d;
-    --color-yellow-700: #926c10;
-    --color-yellow-800: #705207;
-
-    /* Typography - Font Families */
-    --font-family-noto: 'Noto Sans TC', sans-serif;
-    --font-family-swei: 'SweiMarkerSansCJKtc-Regular', sans-serif;
-
-    /* Typography - Font Sizes */
-    --font-size-h1-large: 48px;
-    --font-size-h2-large: 40px;
-    --font-size-h3-large: 32px;
-    --font-size-h4-large: 28px;
-    --font-size-h5-large: 22px;
-    --font-size-h6-large: 18px;
-
-    --font-size-h1-small: 28px;
-    --font-size-h2-small: 24px;
-    --font-size-h3-small: 22px;
-    --font-size-h4-small: 18px;
-    --font-size-h5-small: 17px;
-    --font-size-h6-small: 16px;
-
-    --font-size-p1: 16px;
-    --font-size-p2: 14px;
-    --font-size-p3: 12px;
-    --font-size-p4: 10px;
-
-    /* Typography - Line Heights */
-    --line-height-tight: 1.25;
-    --line-height-normal: 1.6;
-    --line-height-relaxed: 1.75;
-
-    /* Typography - Letter Spacing */
-    --letter-spacing-wide: 0.05em;
-
-    /* Spacing - Grid System */
-    --spacing-grid-xs: 4px;
-    --spacing-grid-sm: 8px;
-    --spacing-grid-md: 16px;
-    --spacing-grid-lg: 24px;
-    --spacing-grid-xl: 32px;
-    --spacing-grid-2xl: 48px;
-    --spacing-grid-3xl: 64px;
-    --spacing-grid-4xl: 96px;
-    --spacing-grid-5xl: 128px;
-
-    /* Container Widths */
-    --container-mobile: 375px;
-    --container-tablet: 768px;
-    --container-desktop: 1024px;
-    --container-hd: 1440px;
-
-    /* Grid Gutters */
-    --gutter-mobile: 16px;
-    --gutter-tablet: 24px;
-    --gutter-desktop: 32px;
-    --gutter-hd: 32px;
-
-    /* Margins */
-    --margin-mobile: 24px;
-    --margin-tablet: 32px;
-    --margin-desktop: 48px;
-    --margin-hd: 120px;
-
-    /* Responsive Breakpoints */
-    --breakpoint-mobile: 375px;
-    --breakpoint-tablet: 768px;
-    --breakpoint-desktop: 1024px;
-    --breakpoint-hd: 1440px;
-
-    /* Header */
-    --mobile-header-height: 64px;
-
     /* Legacy variables for backward compatibility */
     --fontFamily: var(--font-family-noto);
     --max-width: 1100px;
@@ -256,11 +142,11 @@
     /* Updated color palette using design system */
     --paletteColor1: var(--color-blue-400);
     --paletteColor2: var(--color-blue-600);
-    --paletteColor3: var(--color-neutral-gray-700);
-    --paletteColor4: var(--color-neutral-gray-900);
+    --paletteColor3: var(--color-neutral-700);
+    --paletteColor4: var(--color-neutral-900);
     --paletteColor5: var(--color-red-400);
     --paletteColor6: var(--color-yellow-400);
-    --paletteColor7: var(--color-neutral-gray-200);
+    --paletteColor7: var(--color-neutral-200);
     --paletteColor8: var(--color-neutral-white);
     --color: var(--paletteColor3);
   }
@@ -321,16 +207,16 @@
     font-family: var(--font-family-noto);
     font-size: var(--font-size-h1-small);
     font-weight: 700;
-    line-height: var(--line-height-tight);
-    letter-spacing: var(--letter-spacing-wide);
+    line-height: var(--line-height-normal);
+    letter-spacing: 1.6px;
   }
 
   .prose-h2-small {
     font-family: var(--font-family-noto);
     font-size: var(--font-size-h2-small);
     font-weight: 700;
-    line-height: var(--line-height-tight);
-    letter-spacing: var(--letter-spacing-wide);
+    line-height: var(--line-height-normal);
+    letter-spacing: 1.4px;
   }
 
   .prose-h3-small {

package/eslint.config.mjs

@@ -1,8 +1,9 @@
+import globals from 'globals'
+
 import baseConfig, {
-  typescriptConfig,
   javascriptConfig,
+  typescriptConfig,
 } from '../../eslint.base.config.mjs'
-import globals from 'globals'
 
 export default [
   ...baseConfig,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kids-reporter/routing-ui",
   "license": "MIT",
-  "version": "0.1.0-alpha.1",
+  "version": "0.1.0-alpha.3",
   "description": "Routing UI for Kids Reporter",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -26,6 +26,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lodash": "^4.17.21",
+    "next": "^14.2.33",
     "tailwind-merge": "^3.3.1"
   },
   "devDependencies": {
@@ -41,6 +42,8 @@
     "@types/react-dom": "18.3.7",
     "prettier": "^3.6.2",
     "prettier-plugin-tailwindcss": "^0.6.14",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "typescript": "^5.9.2"
   },
   "peerDependencies": {

package/src/components/button.tsx

@@ -16,13 +16,13 @@ const buttonVariants = cva(
           'text-white border-0 bg-red-400',
           'hover:bg-red-500',
           'active:bg-red-600',
-          'disabled:bg-gray-400 disabled:text-white disabled:cursor-default',
+          'disabled:text-white disabled:cursor-default disabled:bg-neutral-400',
         ],
         secondary: [
           'bg-white text-gray-900 border-2 border-red-400',
           'hover:text-white hover:border-red-500 hover:bg-red-500',
           'active:text-white active:border-red-600 active:bg-red-600',
-          'disabled:border-gray-400 disabled:bg-white disabled:text-gray-400 disabled:cursor-default',
+          'disabled:bg-white disabled:cursor-default disabled:border-neutral-400 disabled:text-neutral-400',
         ],
       },
       size: {

package/src/footer.tsx

@@ -1,7 +1,5 @@
 'use client'
 
-import Image from 'next/image'
-
 import Button from './components/button'
 import {
   ADDITIONAL_MENU_ITEMS,
@@ -37,7 +35,7 @@ const Footer = ({
             <div className="max-w-100 gap-6 flex w-full flex-col items-center desktop:items-start">
               <div className="flex items-center">
                 <a href="/" className="flex items-center">
-                  <Image
+                  <img
                     src="/assets/images/footer-logo.svg"
                     alt="少年報導者"
                     loading="lazy"

package/src/header/menu/index.tsx

@@ -1,6 +1,5 @@
 'use client'
 
-import Image from 'next/image'
 import { useEffect } from 'react'
 
 import Button from '../../components/button'
@@ -95,7 +94,7 @@ function Menu({
           <div className="px-6 tablet:px-8 py-4 mt-4 hidden items-center justify-between tablet:flex">
             <div className="flex items-center">
               <a href="/">
-                <Image
+                <img
                   src="/assets/images/brand-icon.svg"
                   alt="少年報導者 The Reporter for Kids"
                   className="h-5"

package/src/header/shared-components.tsx

@@ -1,6 +1,5 @@
 'use client'
 import { cva } from 'class-variance-authority'
-import Image from 'next/image'
 import { useEffect, useRef, useState } from 'react'
 
 import { Button, Input } from '../components'
@@ -89,7 +88,7 @@ const searchDropdownVariants = cva(
 export function LogoLink({ compactMode = false }: { compactMode?: boolean }) {
   return (
     <a href="/" className="flex items-center" rel="home">
-      <Image
+      <img
         src="/assets/images/brand-icon.svg"
         alt="少年報導者 The Reporter for Kids"
         loading="eager"

package/src/styles.css

@@ -56,12 +56,12 @@
   --font-size-h5-large: 22px;
   --font-size-h6-large: 18px;
 
-  --font-size-h1-small: 28px;
-  --font-size-h2-small: 24px;
-  --font-size-h3-small: 22px;
-  --font-size-h4-small: 18px;
-  --font-size-h5-small: 17px;
-  --font-size-h6-small: 16px;
+  --font-size-h1-small: 32px;
+  --font-size-h2-small: 28px;
+  --font-size-h3-small: 24px;
+  --font-size-h4-small: 22px;
+  --font-size-h5-small: 20px;
+  --font-size-h6-small: 18px;
 
   --font-size-p1: 16px;
   --font-size-p2: 14px;
@@ -122,11 +122,11 @@
   /* Updated color palette using design system */
   --paletteColor1: var(--color-blue-400);
   --paletteColor2: var(--color-blue-600);
-  --paletteColor3: var(--color-neutral-gray-700);
-  --paletteColor4: var(--color-neutral-gray-900);
+  --paletteColor3: var(--color-neutral-700);
+  --paletteColor4: var(--color-neutral-900);
   --paletteColor5: var(--color-red-400);
   --paletteColor6: var(--color-yellow-400);
-  --paletteColor7: var(--color-neutral-gray-200);
+  --paletteColor7: var(--color-neutral-200);
   --paletteColor8: var(--color-neutral-white);
   --color: var(--paletteColor3);
 }
@@ -134,120 +134,6 @@
 /* Design System CSS Variables for compatibility */
 @layer base {
   :root {
-    /* Colors - Neutral */
-    --color-neutral-white: #ffffff;
-    --color-neutral-gray-100: #f8f8f8;
-    --color-neutral-gray-200: #eaeaea;
-    --color-neutral-gray-300: #d9d9d9;
-    --color-neutral-gray-400: #c6c6c6;
-    --color-neutral-gray-500: #a3a3a3;
-    --color-neutral-gray-600: #8e8e8e;
-    --color-neutral-gray-700: #575757;
-    --color-neutral-gray-800: #3b3b3b;
-    --color-neutral-gray-900: #232323;
-    --color-neutral-black: #000000;
-    --color-neutral-border: #00000026;
-
-    /* Colors - Brand Red */
-    --color-red-100: #fff0f2;
-    --color-red-200: #ffc4ca;
-    --color-red-300: #ff98a2;
-    --color-red-400: #f76977;
-    --color-red-500: #bd4450;
-    --color-red-600: #a0343e;
-    --color-red-700: #82262f;
-    --color-red-800: #651a22;
-
-    /* Colors - Brand Blue */
-    --color-blue-100: #e9f8ff;
-    --color-blue-200: #b9e8ff;
-    --color-blue-300: #89d9ff;
-    --color-blue-400: #27b3f5;
-    --color-blue-500: #1696d3;
-    --color-blue-600: #087bb1;
-    --color-blue-700: #00618f;
-    --color-blue-800: #004a6d;
-
-    /* Colors - Brand Yellow */
-    --color-yellow-100: #fff9ec;
-    --color-yellow-200: #ffedc2;
-    --color-yellow-300: #ffe197;
-    --color-yellow-400: #f8c341;
-    --color-yellow-500: #d6a52d;
-    --color-yellow-600: #b4881d;
-    --color-yellow-700: #926c10;
-    --color-yellow-800: #705207;
-
-    /* Typography - Font Families */
-    --font-family-noto: 'Noto Sans TC', sans-serif;
-    --font-family-swei: 'SweiMarkerSansCJKtc-Regular', sans-serif;
-
-    /* Typography - Font Sizes */
-    --font-size-h1-large: 48px;
-    --font-size-h2-large: 40px;
-    --font-size-h3-large: 32px;
-    --font-size-h4-large: 28px;
-    --font-size-h5-large: 22px;
-    --font-size-h6-large: 18px;
-
-    --font-size-h1-small: 28px;
-    --font-size-h2-small: 24px;
-    --font-size-h3-small: 22px;
-    --font-size-h4-small: 18px;
-    --font-size-h5-small: 17px;
-    --font-size-h6-small: 16px;
-
-    --font-size-p1: 16px;
-    --font-size-p2: 14px;
-    --font-size-p3: 12px;
-    --font-size-p4: 10px;
-
-    /* Typography - Line Heights */
-    --line-height-tight: 1.25;
-    --line-height-normal: 1.6;
-    --line-height-relaxed: 1.75;
-
-    /* Typography - Letter Spacing */
-    --letter-spacing-wide: 0.05em;
-
-    /* Spacing - Grid System */
-    --spacing-grid-xs: 4px;
-    --spacing-grid-sm: 8px;
-    --spacing-grid-md: 16px;
-    --spacing-grid-lg: 24px;
-    --spacing-grid-xl: 32px;
-    --spacing-grid-2xl: 48px;
-    --spacing-grid-3xl: 64px;
-    --spacing-grid-4xl: 96px;
-    --spacing-grid-5xl: 128px;
-
-    /* Container Widths */
-    --container-mobile: 375px;
-    --container-tablet: 768px;
-    --container-desktop: 1024px;
-    --container-hd: 1440px;
-
-    /* Grid Gutters */
-    --gutter-mobile: 16px;
-    --gutter-tablet: 24px;
-    --gutter-desktop: 32px;
-    --gutter-hd: 32px;
-
-    /* Margins */
-    --margin-mobile: 24px;
-    --margin-tablet: 32px;
-    --margin-desktop: 48px;
-    --margin-hd: 120px;
-
-    /* Responsive Breakpoints */
-    --breakpoint-mobile: 375px;
-    --breakpoint-tablet: 768px;
-    --breakpoint-desktop: 1024px;
-    --breakpoint-hd: 1440px;
-
-    /* Header */
-    --mobile-header-height: 64px;
-
     /* Legacy variables for backward compatibility */
     --fontFamily: var(--font-family-noto);
     --max-width: 1100px;
@@ -256,11 +142,11 @@
     /* Updated color palette using design system */
     --paletteColor1: var(--color-blue-400);
     --paletteColor2: var(--color-blue-600);
-    --paletteColor3: var(--color-neutral-gray-700);
-    --paletteColor4: var(--color-neutral-gray-900);
+    --paletteColor3: var(--color-neutral-700);
+    --paletteColor4: var(--color-neutral-900);
     --paletteColor5: var(--color-red-400);
     --paletteColor6: var(--color-yellow-400);
-    --paletteColor7: var(--color-neutral-gray-200);
+    --paletteColor7: var(--color-neutral-200);
     --paletteColor8: var(--color-neutral-white);
     --color: var(--paletteColor3);
   }
@@ -321,16 +207,16 @@
     font-family: var(--font-family-noto);
     font-size: var(--font-size-h1-small);
     font-weight: 700;
-    line-height: var(--line-height-tight);
-    letter-spacing: var(--letter-spacing-wide);
+    line-height: var(--line-height-normal);
+    letter-spacing: 1.6px;
   }
 
   .prose-h2-small {
     font-family: var(--font-family-noto);
     font-size: var(--font-size-h2-small);
     font-weight: 700;
-    line-height: var(--line-height-tight);
-    letter-spacing: var(--letter-spacing-wide);
+    line-height: var(--line-height-normal);
+    letter-spacing: 1.4px;
   }
 
   .prose-h3-small {