@daoyi/nmtl-ui 2.0.1-beta.97 → 2.0.1-beta.99

package/lib/components/{Autocomplete-5d6f1df8.js → Autocomplete-9e392b0c.js}

@@ -244,6 +244,7 @@ var Autocomplete = function Autocomplete(props) {
     onFocus = props.onFocus,
     onBlur = props.onBlur,
     onEnter = props.onEnter,
+    _onKeyDown = props.onKeyDown,
     arrowIcon = props.arrowIcon;
   var _useState = useState(true),
     _useState2 = _slicedToArray(_useState, 2),
@@ -351,6 +352,7 @@ var Autocomplete = function Autocomplete(props) {
       if (result && typeof result === 'string' && reason === 'input') setCurrentResult(result);
     },
     onKeyDown: function onKeyDown(event) {
+      _onKeyDown(event);
       switch (event.key) {
         case 'ArrowDown':
         case 'ArrowUp':
@@ -413,6 +415,7 @@ Autocomplete.defaultProps = {
   onSearch: function onSearch() {},
   onFocus: function onFocus() {},
   onBlur: function onBlur() {},
+  onKeyDown: function onKeyDown() {},
   onEnter: function onEnter() {},
   arrowIcon: false,
   ariaLabel: undefined
@@ -454,6 +457,8 @@ Autocomplete.propTypes = {
   onFocus: PropTypes.func,
   /** Input離開時的callback */
   onBlur: PropTypes.func,
+  /** 鍵盤按下任意鍵的callback（早於內部處理） */
+  onKeyDown: PropTypes.func,
   /** 鍵盤輸入Enter的callback */
   onEnter: PropTypes.func,
   /** 是否顯示arrow icon */

package/lib/components/Autocomplete.js

@@ -1,4 +1,4 @@
-export { A as default } from './Autocomplete-5d6f1df8.js';
+export { A as default } from './Autocomplete-9e392b0c.js';
 import './_rollupPluginBabelHelpers-a52356f6.js';
 import 'react';
 import 'prop-types';

package/lib/components/CollapseContent.js

@@ -3,9 +3,10 @@ import React__default, { useState, useRef, useEffect } from 'react';
 import { c as classNames } from './index-b76a85f4.js';
 import PropTypes from 'prop-types';
 import { Typography } from '@material-ui/core';
-import { M as MoreButton } from './MoreButton-44d3b4fe.js';
+import { M as MoreButton } from './MoreButton-692584cd.js';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 import '@material-ui/icons';
+import './globalConfig';
 
 const HtmlToReactParser = require('html-to-react').Parser;
 const htmlToReactParser = new HtmlToReactParser();

package/lib/components/{ContactModal-7427edd0.js → ContactModal-90b95c63.js}

@@ -6,8 +6,14 @@ import axios from 'axios';
 import { M as Modal } from './Modal-777fe87d.js';
 import { c as commonjsGlobal, a as getDefaultExportFromCjs } from './_commonjsHelpers-70de2c37.js';
 import { c as classNames } from './index-b76a85f4.js';
-import { Input, Button, Box, Typography, FormControl, RadioGroup, FormControlLabel, Radio, TextField, TextareaAutosize } from '@material-ui/core';
-import { S as Select } from './Select-ac580a1f.js';
+import { Input, IconButton, Button, Box, Typography, FormControl, RadioGroup, FormControlLabel, Radio, TextField, TextareaAutosize } from '@material-ui/core';
+import './defaultTheme-ed7746fe.js';
+import 'react-is';
+import '@material-ui/styles';
+import { u as useTheme } from './useTheme-d16d02d9.js';
+import './withTheme-2d778133.js';
+import { S as Select } from './Select-e0790135.js';
+import { VolumeUp } from '@material-ui/icons';
 import { getIntl } from './globalConfig';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 import { r as requireCreateSvgIcon, i as interopRequireDefault, a as interopRequireWildcard } from './createSvgIcon-e3803ee1.js';
@@ -10005,6 +10011,7 @@ const VCode = _ref => {
     required
   } = _ref;
   const [codeConfig, setCodeConfig] = useState(getConfig());
+  const [liveMessage, setLiveMessage] = useState('');
   const {
     data,
     rotate,
@@ -10014,14 +10021,55 @@ const VCode = _ref => {
   const refresh = () => {
     canvas();
     setCodeConfig(getConfig());
+    /* WCAG 4.1.3 刷新後播報（tltc 認證模式） */
+    setLiveMessage(getIntl().formatMessage({
+      id: 'aria.vcode.refreshed'
+    }));
+    setTimeout(() => setLiveMessage(''), 3000);
   };
   useEffect(() => {
     refresh();
   }, [visible]);
   const vcodeNumber = `${convert(data[0])}${convert(data[1])}${convert(data[2])}${convert(data[3])}`;
+
+  /* WCAG 1.1.1 驗證碼語音替代（tltc 認證模式）：speechSynthesis 逐字報讀，
+     讓無法辨識圖片的使用者取得驗證碼內容 */
+  const speakVerificationCode = () => {
+    if ('speechSynthesis' in window) {
+      window.speechSynthesis.cancel();
+      const characters = vcodeNumber.split('');
+      let currentIndex = 0;
+      const speakNext = () => {
+        if (currentIndex < characters.length) {
+          const utterance = new SpeechSynthesisUtterance(characters[currentIndex]);
+          utterance.rate = 0.7;
+          utterance.onend = () => {
+            currentIndex += 1;
+            setTimeout(speakNext, 300);
+          };
+          window.speechSynthesis.speak(utterance);
+        }
+      };
+      const introUtterance = new SpeechSynthesisUtterance(getIntl().formatMessage({
+        id: 'aria.vcode.audioIntro'
+      }));
+      introUtterance.onend = () => setTimeout(speakNext, 500);
+      window.speechSynthesis.speak(introUtterance);
+    } else {
+      setLiveMessage(getIntl().formatMessage({
+        id: 'aria.vcode.audioUnsupported'
+      }));
+      setTimeout(() => setLiveMessage(''), 3000);
+    }
+  };
   return /*#__PURE__*/React__default.createElement("div", {
     className: "vcode"
-  }, /*#__PURE__*/React__default.createElement(Input, {
+  }, /*#__PURE__*/React__default.createElement("div", {
+    "aria-live": "polite",
+    "aria-atomic": "true",
+    role: "status",
+    className: "visually-hidden"
+  }, liveMessage), /*#__PURE__*/React__default.createElement(Input, {
     inputProps: {
       id: inputId,
       'aria-required': required || undefined
@@ -10032,7 +10080,18 @@ const VCode = _ref => {
     onChange: e => onChange(e.target.value.toUpperCase() === vcodeNumber.toUpperCase())
   }), /*#__PURE__*/React__default.createElement("div", {
     className: "vcode__box"
-  }, /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement(IconButton, {
+    className: "vcode__audio",
+    "aria-label": getIntl().formatMessage({
+      id: 'aria.vcode.audioPlay'
+    }),
+    title: getIntl().formatMessage({
+      id: 'aria.vcode.audioPlay'
+    }),
+    onClick: speakVerificationCode
+  }, /*#__PURE__*/React__default.createElement(VolumeUp, {
+    "aria-hidden": "true"
+  })), /*#__PURE__*/React__default.createElement("div", {
     className: "vcode__image",
     role: "img",
     "aria-label": getIntl().formatMessage({
@@ -11624,6 +11683,12 @@ const FormItem = _ref => {
   };
   /* 這些欄位型別會渲染帶 inputId 的 input，標題才能用 label htmlFor；其餘型別改以 aria-labelledby 關聯 */
   const hasInputId = ['input', 'textarea', 'datePicker', 'email', 'vcode'].includes(type);
+  /* WCAG 1.4.3 必填星號依主題深淺自動選色：formItem.scss 的 #b91c1c 只適用淺底 Modal，
+     深色主題（如 ocean Paper #30353d）對比僅約 1.5:1（WAVE 實測被抓）→ 深色用 #ff8a80（約 5.4:1） */
+  const theme = useTheme();
+  const starStyle = theme && theme.palette && theme.palette.type === 'dark' ? {
+    color: '#ff8a80'
+  } : undefined;
   const render = field => {
     let component;
     switch (type) {
@@ -11721,12 +11786,14 @@ const FormItem = _ref => {
         htmlFor: inputId
       }, label, required && /*#__PURE__*/React__default.createElement("div", {
         className: "formItem__title__star",
+        style: starStyle,
         "aria-hidden": "true"
       }, "*")) : /*#__PURE__*/React__default.createElement("div", {
         className: "formItem__title",
         id: labelId
       }, label, required && /*#__PURE__*/React__default.createElement("div", {
         className: "formItem__title__star",
+        style: starStyle,
         "aria-hidden": "true"
       }, "*"))), hint && /*#__PURE__*/React__default.createElement(Box, {
         my: 1

package/lib/components/ContactModal.js

@@ -1,4 +1,4 @@
-export { C as default } from './ContactModal-7427edd0.js';
+export { C as default } from './ContactModal-90b95c63.js';
 import './_rollupPluginBabelHelpers-a52356f6.js';
 import 'react';
 import 'prop-types';
@@ -14,9 +14,11 @@ import './style-inject.es-1f59c1d0.js';
 import './Spin-8dc60bfe.js';
 import './globalConfig';
 import './_commonjsHelpers-70de2c37.js';
-import './Select-ac580a1f.js';
-import './Empty-bf77164f.js';
-import './createSvgIcon-e3803ee1.js';
 import './defaultTheme-ed7746fe.js';
 import '@material-ui/styles';
+import './useTheme-d16d02d9.js';
+import './withTheme-2d778133.js';
+import './Select-e0790135.js';
+import './Empty-bf77164f.js';
+import './createSvgIcon-e3803ee1.js';
 import 'react-dom';

package/lib/components/{Drawer-41d3a91f.js → Drawer-2cbcec04.js}

@@ -3,7 +3,7 @@ import React__default, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { List, ListItem, ListItemIcon, ListItemText, IconButton, Drawer as Drawer$1, Divider } from '@material-ui/core';
 import { DehazeRounded } from '@material-ui/icons';
-import { S as Select } from './Select-ac580a1f.js';
+import { S as Select } from './Select-e0790135.js';
 import { useHistory, useRouteMatch } from 'react-router-dom';
 import { getIntl } from './globalConfig';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';

package/lib/components/Drawer.js

@@ -1,11 +1,16 @@
-export { D as default } from './Drawer-41d3a91f.js';
+export { D as default } from './Drawer-2cbcec04.js';
 import './_rollupPluginBabelHelpers-a52356f6.js';
 import 'react';
 import 'prop-types';
 import '@material-ui/core';
 import '@material-ui/icons';
-import './Select-ac580a1f.js';
+import './Select-e0790135.js';
 import './index-b76a85f4.js';
+import './defaultTheme-ed7746fe.js';
+import 'react-is';
+import '@material-ui/styles';
+import './useTheme-d16d02d9.js';
+import './withTheme-2d778133.js';
 import './Empty-bf77164f.js';
 import './style-inject.es-1f59c1d0.js';
 import 'react-router-dom';

package/lib/components/{ExtraTools-8d2ef84d.js → ExtraTools-55f66039.js}

@@ -3143,7 +3143,7 @@ const ResetMobileIcon = _ref => {
   })));
 };
 
-var css_248z = ".extraTools {\n  width: 100%;\n  display: inline-flex;\n  justify-content: flex-end;\n  align-items: center;\n  gap: 1rem;\n  padding: 0px 20px;\n  padding-top: 12px;\n}\n.extraTools__share button {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.extraTools__download {\n  cursor: pointer;\n}\n.extraTools__download-icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.extraTools__fullscreenBtn {\n  cursor: pointer;\n  padding-top: 0;\n}\n.extraTools__fullscreenBtn-icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.extraTools__fontsize {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.extraTools .font-size-changer,\n.extraTools .font-size-changer-buttons,\n.extraTools .font-size-up,\n.extraTools .font-size-down,\n.extraTools .tooltip {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.extraTools .font-size-up {\n  width: 32px !important;\n  cursor: pointer;\n  margin-right: 16px !important;\n}\n.extraTools .font-size-down {\n  cursor: pointer;\n  width: 32px !important;\n}\n.extraTools .font-size-up,\n.extraTools .font-size-down {\n  height: 32px;\n  line-height: 32px !important;\n}\n.extraTools .fullscreenExit {\n  text-align: right;\n  cursor: pointer;\n  border: 0;\n}\n.extraTools #download-menu .MuiMenuItem-root {\n  color: #4e3a16;\n  width: auto;\n  overflow: hidden;\n  font-size: 1rem;\n  box-sizing: border-box;\n  min-height: 48px;\n  font-weight: 400;\n  line-height: 1;\n  padding-top: 1rem;\n  white-space: initial;\n  border-bottom: 0;\n  letter-spacing: 0.00938em;\n  padding-bottom: 1rem;\n}";
+var css_248z = ".extraTools {\n  width: 100%;\n  display: inline-flex;\n  justify-content: flex-end;\n  align-items: center;\n  gap: 1rem;\n  padding: 0px 20px;\n  padding-top: 12px;\n  padding-bottom: 6px;\n}\n.extraTools__share button {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.extraTools__download {\n  cursor: pointer;\n}\n.extraTools__download-icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.extraTools__fullscreenBtn {\n  cursor: pointer;\n  padding-top: 0;\n}\n.extraTools__fullscreenBtn-icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.extraTools__fontsize {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.extraTools .font-size-changer,\n.extraTools .font-size-changer-buttons,\n.extraTools .font-size-up,\n.extraTools .font-size-down,\n.extraTools .tooltip {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.extraTools .font-size-up {\n  width: 32px !important;\n  cursor: pointer;\n  margin-right: 16px !important;\n}\n.extraTools .font-size-down {\n  cursor: pointer;\n  width: 32px !important;\n}\n.extraTools .font-size-up,\n.extraTools .font-size-down {\n  height: 32px;\n  line-height: 32px !important;\n}\n.extraTools .font-size-changer .font-size-changer-buttons > div {\n  float: none;\n  height: 32px;\n  line-height: 32px !important;\n  align-self: center;\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.extraTools .fullscreenExit {\n  text-align: right;\n  cursor: pointer;\n  border: 0;\n}\n.extraTools #download-menu .MuiMenuItem-root {\n  color: #4e3a16;\n  width: auto;\n  overflow: hidden;\n  font-size: 1rem;\n  box-sizing: border-box;\n  min-height: 48px;\n  font-weight: 400;\n  line-height: 1;\n  padding-top: 1rem;\n  white-space: initial;\n  border-bottom: 0;\n  letter-spacing: 0.00938em;\n  padding-bottom: 1rem;\n}";
 styleInject(css_248z);
 
 /* eslint-disable prefer-destructuring */

package/lib/components/ExtraTools.js

@@ -1,4 +1,4 @@
-export { E as default } from './ExtraTools-8d2ef84d.js';
+export { E as default } from './ExtraTools-55f66039.js';
 import './_rollupPluginBabelHelpers-a52356f6.js';
 import 'react';
 import './index-b76a85f4.js';

package/lib/components/Footer.js

@@ -3,8 +3,9 @@ import React__default, { useState, useEffect } from 'react';
 import { c as classNames } from './index-b76a85f4.js';
 import PropTypes from 'prop-types';
 import axios from 'axios';
-import { C as ContactModal } from './ContactModal-7427edd0.js';
+import { C as ContactModal } from './ContactModal-90b95c63.js';
 import { S as Spin } from './Spin-8dc60bfe.js';
+import { getIntl } from './globalConfig';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 import './hoist-non-react-statics.cjs-3f408ad2.js';
 import 'react-is';
@@ -12,13 +13,14 @@ import './Modal-777fe87d.js';
 import '@material-ui/core';
 import '@material-ui/icons';
 import './Button-305b69a0.js';
-import './globalConfig';
 import './_commonjsHelpers-70de2c37.js';
-import './Select-ac580a1f.js';
-import './Empty-bf77164f.js';
-import './createSvgIcon-e3803ee1.js';
 import './defaultTheme-ed7746fe.js';
 import '@material-ui/styles';
+import './useTheme-d16d02d9.js';
+import './withTheme-2d778133.js';
+import './Select-e0790135.js';
+import './Empty-bf77164f.js';
+import './createSvgIcon-e3803ee1.js';
 import 'react-dom';
 
 /* eslint-disable max-len */
@@ -128,13 +130,25 @@ var Footer = function Footer(props) {
     style: {
       background: color
     }
-  }, /*#__PURE__*/React__default.createElement(NmtlLogo, {
-    className: "footer__logo",
-    color: primaryColor,
+  }, /*#__PURE__*/React__default.createElement("span", {
+    role: "link",
+    tabIndex: 0,
+    "aria-label": getIntl().formatMessage({
+      id: 'aria.footer.nmtlLogo'
+    }),
     onClick: function onClick() {
       return window.open('https://www.nmtl.gov.tw/');
+    },
+    onKeyDown: function onKeyDown(event) {
+      if (event.key === 'Enter') {
+        event.preventDefault();
+        window.open('https://www.nmtl.gov.tw/');
+      }
     }
-  }), /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement(NmtlLogo, {
+    className: "footer__logo",
+    color: primaryColor
+  })), /*#__PURE__*/React__default.createElement("div", {
     className: "footer__content"
   }, counter && /*#__PURE__*/React__default.createElement("div", {
     className: "footer__content__item",
@@ -198,16 +212,23 @@ var Footer = function Footer(props) {
         key: i.toString()
       }, name.toUpperCase());
     }
-    return /*#__PURE__*/React__default.createElement("a", {
-      className: "footer__content__item__link",
-      style: {
-        color: primaryColor
-      },
-      href: url,
-      key: i.toString(),
-      target: "_blank",
-      rel: "noopener noreferrer"
-    }, name.toUpperCase());
+    return (
+      /*#__PURE__*/
+      /* WCAG 3.2.2 另開新視窗需預先提示（比照 ForwardLink 模式） */
+      React__default.createElement("a", {
+        className: "footer__content__item__link",
+        style: {
+          color: primaryColor
+        },
+        href: url,
+        key: i.toString(),
+        target: "_blank",
+        rel: "noopener noreferrer",
+        "aria-label": "".concat(name.toUpperCase()).concat(getIntl().formatMessage({
+          id: 'aria.newWindow'
+        }))
+      }, name.toUpperCase())
+    );
   }), /*#__PURE__*/React__default.createElement("div", {
     className: "footer__content__item__link",
     style: {
@@ -216,6 +237,11 @@ var Footer = function Footer(props) {
     role: "button",
     tabIndex: 0,
     "aria-haspopup": "dialog",
+    "aria-label": "".concat(formatMessage({
+      id: 'common.has.problem'
+    })).concat(getIntl().formatMessage({
+      id: 'aria.opensDialog'
+    })),
     onClick: function onClick() {
       return setContactModalOpen(true);
     },

package/lib/components/Header.js

@@ -6,15 +6,15 @@ import { d as debounce_1 } from './debounce-127da66c.js';
 import { useHistory, useRouteMatch, NavLink } from 'react-router-dom';
 import { Typography, IconButton } from '@material-ui/core';
 import { SearchOutlined } from '@material-ui/icons';
-import { K as KeywordSearch } from './KeywordSearch-33341dd3.js';
-import { S as Select } from './Select-ac580a1f.js';
-import { c as checkLanguageSupport, D as Drawer, d as defaultSupportLanguage } from './Drawer-41d3a91f.js';
+import { K as KeywordSearch } from './KeywordSearch-d378ca7f.js';
+import { S as Select } from './Select-e0790135.js';
+import { c as checkLanguageSupport, D as Drawer, d as defaultSupportLanguage } from './Drawer-2cbcec04.js';
 import { getIntl } from './globalConfig';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 import './isObjectLike-e111475d.js';
 import './_commonjsHelpers-70de2c37.js';
 import 'axios';
-import './Autocomplete-5d6f1df8.js';
+import './Autocomplete-9e392b0c.js';
 import '@material-ui/lab';
 import './createSvgIcon-e3803ee1.js';
 import './defaultTheme-ed7746fe.js';
@@ -23,6 +23,8 @@ import '@material-ui/styles';
 import 'react-dom';
 import './toConsumableArray-dbe8af76.js';
 import './Empty-bf77164f.js';
+import './useTheme-d16d02d9.js';
+import './withTheme-2d778133.js';
 
 var css_248z = "@charset \"UTF-8\";\n.header {\n  display: flex;\n  align-items: center;\n  background: rgba(255, 255, 255, 0.6);\n  background-color: rgba(255, 255, 255, 0.6);\n  padding: 12px 36px !important;\n  position: fixed;\n  top: 0;\n  z-index: 10;\n  width: 100% !important;\n  transition: top 0.3s ease-in-out;\n  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);\n}\n.header__logo {\n  display: flex;\n  width: -moz-fit-content !important;\n  width: fit-content !important;\n  margin-right: 30px !important;\n  cursor: pointer;\n}\n.header__logo__img {\n  display: flex;\n  align-items: center;\n}\n.header__logo__title {\n  white-space: nowrap;\n  margin-left: 1rem !important;\n  font-size: 1.5rem !important;\n  font-weight: 700 !important;\n  font-family: \"Noto Sans TC\" !important;\n}\n.header__links {\n  display: flex;\n  justify-content: flex-end;\n  padding-right: 14px;\n}\n.header__links a {\n  text-decoration: none;\n}\n.header__links--full {\n  flex: 1;\n}\n.header__links__item {\n  color: rgba(0, 0, 0, 0.85);\n  font-size: 1.125rem !important;\n  font-weight: 500 !important;\n  white-space: nowrap;\n  padding: 6px 14px;\n  font-family: \"Noto Sans TC\" !important;\n}\n.header__links__item--active .header__links__item {\n  font-weight: 800 !important;\n  background: transparent;\n  border-radius: 45px;\n}\n.header__links__item:hover {\n  font-weight: 800 !important;\n}\n.header__language {\n  min-width: 100px !important;\n}\n.header__searchIcon {\n  display: none !important;\n}\n@media screen and (max-width: 768px) {\n  .header--smallUseSearchIcon .header__searchIcon {\n    display: flex !important;\n    margin-right: 10px !important;\n  }\n  .header--smallUseSearchIcon .keywordSearch {\n    visibility: hidden;\n    flex: 1;\n    width: 0;\n  }\n}\n.header--hide {\n  top: -100px;\n}\n.header--focus .header__links {\n  display: none;\n}\n.header .MuiTypography-root {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.header .autocomplete {\n  float: right;\n}\n.header .autocomplete .MuiAutocomplete-inputRoot[class*=MuiOutlinedInput-root] {\n  padding: 1px 8px !important;\n}\n.header .keywordSearch {\n  margin-right: 8px;\n}\n.header .keywordSearch--focus .autocomplete {\n  width: 100% !important;\n}\n.header .keywordSearch--animation .autocomplete {\n  width: 240px;\n  transition: width 0.3s ease-in-out;\n}\n\n/* 避免寬度460以下炸版 */\n@media screen and (max-width: 460px) {\n  .header .keywordSearch--animation .autocomplete {\n    width: 100%;\n  }\n}\n@media screen and (max-width: 768px) {\n  .header {\n    padding: 12px 15px !important;\n  }\n  .header__logo {\n    margin-right: 16px !important;\n  }\n  .header__logo__title {\n    display: none !important;\n  }\n  .header__links {\n    display: none;\n  }\n  .header__links__item {\n    font-size: 1rem !important;\n  }\n  .header__language {\n    display: none !important;\n  }\n  .header--focus .header__logo {\n    display: none !important;\n  }\n\n  .autocomplete__icon {\n    display: none !important;\n  }\n}";
 styleInject(css_248z);
@@ -122,10 +124,18 @@ var Header = function Header(props) {
       className: "header__links__item",
       color: typographyColor
     }, name);
-    return path.indexOf('http') > -1 ? /*#__PURE__*/React__default.createElement("a", {
+    return path.indexOf('http') > -1 ?
+    /*#__PURE__*/
+    /* WCAG 3.2.2 外部連結（如文學好臺誌）另開新視窗需預先提示 */
+    React__default.createElement("a", {
       key: i.toString(),
       href: path,
-      className: "header__links__item--active"
+      className: "header__links__item--active",
+      target: "_blank",
+      rel: "noopener noreferrer",
+      "aria-label": "".concat(name).concat(getIntl().formatMessage({
+        id: 'aria.newWindow'
+      }))
     }, label) : /*#__PURE__*/React__default.createElement(NavLink, {
       key: i.toString(),
       to: "".concat(url).concat(path),

package/lib/components/{KeywordSearch-33341dd3.js → KeywordSearch-d378ca7f.js}

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { c as classNames } from './index-b76a85f4.js';
 import axios from 'axios';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
-import { A as Autocomplete } from './Autocomplete-5d6f1df8.js';
+import { A as Autocomplete } from './Autocomplete-9e392b0c.js';
 
 var css_248z = ".keywordSearch {\n  border-radius: 4px;\n  width: 100%;\n  margin-right: 14px;\n}\n.keywordSearch--animation .autocomplete {\n  transition: max-width 0.3s ease-out;\n  max-width: 240px;\n}\n.keywordSearch--focus {\n  flex: 1;\n}\n.keywordSearch--focus .autocomplete {\n  max-width: 100%;\n}\n.keywordSearch .MuiAutocomplete-hasPopupIcon.MuiAutocomplete-hasClearIcon .MuiAutocomplete-inputRoot[class*=MuiOutlinedInput-root] {\n  border-radius: 10px;\n  background-color: #ffffff66;\n}";
 styleInject(css_248z);
@@ -106,6 +106,13 @@ var KeywordSearch = function KeywordSearch(_ref) {
     },
     onBlur: function onBlur() {
       return setMenuOpen(false);
+    },
+    onKeyDown: function onKeyDown(event) {
+      /* WCAG 2.1.1：搜尋框聚焦時 header--focus 會 display:none 隱藏導覽連結，
+         瀏覽器在 keydown 當下就決定 Tab 的下一個焦點目標——若等 blur 才收合，
+         導覽連結永遠不在焦點順序中。改在 Tab 按下時同步收合（React 事件結尾
+         同步 re-render，早於瀏覽器預設移焦），讓導覽連結恢復可聚焦。 */
+      if (event.key === 'Tab') setMenuOpen(false);
     }
   }));
 };

package/lib/components/KeywordSearch.js

@@ -1,11 +1,11 @@
-export { K as default } from './KeywordSearch-33341dd3.js';
+export { K as default } from './KeywordSearch-d378ca7f.js';
 import './_rollupPluginBabelHelpers-a52356f6.js';
 import 'react';
 import 'prop-types';
 import './index-b76a85f4.js';
 import 'axios';
 import './style-inject.es-1f59c1d0.js';
-import './Autocomplete-5d6f1df8.js';
+import './Autocomplete-9e392b0c.js';
 import './debounce-127da66c.js';
 import './isObjectLike-e111475d.js';
 import './_commonjsHelpers-70de2c37.js';

package/lib/components/KeywordTicker.js

@@ -3,13 +3,13 @@ import React__default, { useState, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { c as classNames } from './index-b76a85f4.js';
 import { F as ForwardLink } from './ForwardLink-83a7eea9.js';
+import { getIntl } from './globalConfig';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 import './index-b47819f3.js';
 import 'react-router-dom';
 import '@material-ui/core';
-import './globalConfig';
 
-var css_248z = ".keywordTicker {\n  width: 100%;\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n}\n.keywordTicker__track {\n  display: flex;\n  width: 100%;\n  padding: 20px 0px;\n  background-color: #ece8c0;\n  overflow: hidden;\n  margin-left: -80px;\n  padding-left: 100px;\n  z-index: 1;\n  position: relative;\n}\n.keywordTicker__items {\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  flex-wrap: nowrap;\n  position: relative;\n}\n.keywordTicker-item {\n  width: auto;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  white-space: nowrap;\n  cursor: pointer;\n}\n.keywordTicker-text {\n  font-size: 1.5rem;\n  z-index: 2;\n  font-weight: bold;\n  color: #825c0d;\n  border-left: 2px solid #fff;\n  padding: 0px 40px;\n}\n.keywordTicker__img {\n  z-index: 2;\n  position: relative;\n  display: flex;\n}\n.keywordTicker__img img {\n  height: 100%;\n  max-height: 195px;\n  image-rendering: -webkit-optimize-contrast;\n  position: relative;\n}\n.keywordTicker--fake {\n  position: absolute;\n  opacity: 0;\n  width: 100%;\n}\n\n@media only screen and (max-width: 768px) {\n  .keywordTicker-text {\n    font-size: 1.5rem;\n    padding: 0px 15px;\n  }\n  .keywordTicker__img img {\n    max-height: 104px;\n    left: -60px;\n  }\n  .keywordTicker__track {\n    padding: 10px 0px;\n    margin-left: -100px;\n  }\n}\n@media only screen and (max-width: 484px) {\n  .keywordTicker-text {\n    font-size: 14px;\n  }\n}";
+var css_248z = ".keywordTicker {\n  width: 100%;\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  position: relative;\n}\n.keywordTicker__playToggle {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 3;\n  padding: 4px 12px;\n  background: rgba(0, 0, 0, 0.75);\n  color: #fff;\n  border: 1px solid #fff;\n  border-radius: 4px;\n  font-size: 1rem;\n  cursor: pointer;\n}\n.keywordTicker__track {\n  display: flex;\n  width: 100%;\n  padding: 20px 0px;\n  background-color: #ece8c0;\n  overflow: hidden;\n  margin-left: -80px;\n  padding-left: 100px;\n  z-index: 1;\n  position: relative;\n}\n.keywordTicker__items {\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  flex-wrap: nowrap;\n  position: relative;\n}\n.keywordTicker-item {\n  width: auto;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  white-space: nowrap;\n  cursor: pointer;\n}\n.keywordTicker-text {\n  font-size: 1.5rem;\n  z-index: 2;\n  font-weight: bold;\n  color: #825c0d;\n  border-left: 2px solid #fff;\n  padding: 0px 40px;\n}\n.keywordTicker__img {\n  z-index: 2;\n  position: relative;\n  display: flex;\n}\n.keywordTicker__img img {\n  height: 100%;\n  max-height: 195px;\n  image-rendering: -webkit-optimize-contrast;\n  position: relative;\n}\n.keywordTicker--fake {\n  position: absolute;\n  opacity: 0;\n  width: 100%;\n}\n\n@media only screen and (max-width: 768px) {\n  .keywordTicker-text {\n    font-size: 1.5rem;\n    padding: 0px 15px;\n  }\n  .keywordTicker__img img {\n    max-height: 104px;\n    left: -60px;\n  }\n  .keywordTicker__track {\n    padding: 10px 0px;\n    margin-left: -100px;\n  }\n}\n@media only screen and (max-width: 484px) {\n  .keywordTicker-text {\n    font-size: 14px;\n  }\n}";
 styleInject(css_248z);
 
 var KeywordTicker = function KeywordTicker(_ref) {
@@ -23,6 +23,11 @@ var KeywordTicker = function KeywordTicker(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     tracking = _useState2[0],
     setTracking = _useState2[1];
+  /* WCAG 2.2.2 自動移動內容需提供暫停控制；並尊重「減少動態效果」偏好預設暫停（WCAG 2.3.3） */
+  var _useState3 = useState(typeof window !== 'undefined' && window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches),
+    _useState4 = _slicedToArray(_useState3, 2),
+    paused = _useState4[0],
+    setPaused = _useState4[1];
   var _ref2 = tickerAttribute || {
       result: [],
       mounted: false,
@@ -121,24 +126,52 @@ var KeywordTicker = function KeywordTicker(_ref) {
       setTracking(initTracking);
     }
   }, [mounted, step]);
+
+  /* 暫停狀態同步到動畫（含 prefers-reduced-motion 預設暫停） */
+  useEffect(function () {
+    if (!tracking) return;
+    if (paused) tracking.pause();else tracking.play();
+  }, [tracking, paused]);
+
+  /* WCAG 2.1.1/2.4.7 跑馬燈連結為無限輪播重複複製且持續移動，鍵盤逐一 Tab 體驗惡劣：
+     本體標記 aria-hidden 並將內部連結移出 Tab 順序（消費端另以等效清單提供鍵盤操作）。
+     跑馬燈重渲染後需重設。 */
+  useEffect(function () {
+    if (track.current) {
+      track.current.querySelectorAll('a').forEach(function (a) {
+        return a.setAttribute('tabindex', '-1');
+      });
+    }
+  }, [result]);
   return /*#__PURE__*/React__default.createElement("div", {
     className: classNames('keywordTicker', className)
-  }, leftImg && /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("button", {
+    type: "button",
+    className: "keywordTicker__playToggle",
+    "aria-pressed": paused,
+    onClick: function onClick() {
+      return setPaused(!paused);
+    }
+  }, getIntl().formatMessage({
+    id: paused ? 'aria.ticker.play' : 'aria.ticker.pause'
+  })), leftImg && /*#__PURE__*/React__default.createElement("div", {
     className: "keywordTicker__img"
   }, /*#__PURE__*/React__default.createElement("img", {
     src: leftImg,
-    alt: "hotKeyword"
+    alt: "",
+    "aria-hidden": "true"
   })), /*#__PURE__*/React__default.createElement("div", {
     className: "keywordTicker__track",
     ref: track,
     style: {
       backgroundColor: backgroundColor
     },
+    "aria-hidden": "true",
     onMouseEnter: function onMouseEnter() {
       return tracking === null || tracking === void 0 ? void 0 : tracking.pause();
     },
     onMouseLeave: function onMouseLeave() {
-      return tracking === null || tracking === void 0 ? void 0 : tracking.play();
+      if (!paused && tracking) tracking.play();
     }
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "keywordTicker__items",

package/lib/components/Keywords.js

@@ -5,11 +5,11 @@ import { c as classNames } from './index-b76a85f4.js';
 import { M as Modal } from './Modal-777fe87d.js';
 import { Typography } from '@material-ui/core';
 import { r as requireCreateSvgIcon, i as interopRequireDefault, a as interopRequireWildcard } from './createSvgIcon-e3803ee1.js';
+import { getIntl } from './globalConfig';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 import '@material-ui/icons';
 import './Button-305b69a0.js';
 import './Spin-8dc60bfe.js';
-import './globalConfig';
 import './_commonjsHelpers-70de2c37.js';
 import './defaultTheme-ed7746fe.js';
 import 'react-is';
@@ -71,7 +71,18 @@ const KeywordList = _ref => {
     color: "textSecondary",
     className: "keywordList__item",
     key: i.toString(),
-    onClick: () => onKeywordClick(keyword)
+    role: "button",
+    tabIndex: 0,
+    "aria-label": `${keyword}${getIntl().formatMessage({
+      id: 'aria.keyword.searchHint'
+    })}`,
+    onClick: () => onKeywordClick(keyword),
+    onKeyDown: event => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        onKeywordClick(keyword);
+      }
+    }
   }, /*#__PURE__*/React__default.createElement("div", {
     style: {
       color: textColor,
@@ -83,13 +94,27 @@ const KeywordList = _ref => {
     style: {
       backgroundColor
     },
-    onClick: onMoreClick
+    role: "button",
+    tabIndex: 0,
+    "aria-haspopup": "dialog",
+    "aria-label": getIntl().formatMessage({
+      id: 'aria.keyword.more'
+    }),
+    onClick: onMoreClick,
+    onKeyDown: event => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        onMoreClick();
+      }
+    }
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "keywordList__item__hover",
     style: {
       color: textColor
     }
-  }, /*#__PURE__*/React__default.createElement(default_1, null))));
+  }, /*#__PURE__*/React__default.createElement(default_1, {
+    "aria-hidden": "true"
+  }))));
 };
 KeywordList.defaultProps = {
   className: undefined,

package/lib/components/{MoreButton-44d3b4fe.js → MoreButton-692584cd.js}

@@ -2,6 +2,7 @@ import React__default from 'react';
 import PropTypes from 'prop-types';
 import { c as classNames } from './index-b76a85f4.js';
 import { ExpandLess, ExpandMore } from '@material-ui/icons';
+import { getIntl } from './globalConfig';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 
 var css_248z = ".moreButton {\n  width: -moz-fit-content;\n  width: fit-content;\n  display: flex;\n  align-items: center;\n  position: relative;\n  margin: 1rem 0rem;\n  border-radius: 8px;\n  padding: 1rem 2.5rem;\n  -webkit-user-select: none;\n          user-select: none;\n  cursor: pointer;\n}\n.moreButton__mask {\n  transition: all 0.3s ease-in-out;\n  position: absolute;\n  left: 0;\n  top: 0;\n  border-radius: 8px;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n}\n.moreButton:hover .moreButton__mask {\n  opacity: 1;\n}\n.moreButton--shadow {\n  transition: all 0.3s ease-in-out;\n  border: 3px solid #ffffff;\n  position: relative;\n  left: 0px;\n  top: 0px;\n}\n.moreButton--shadow:hover {\n  box-shadow: initial !important;\n  left: 3px;\n  top: 3px;\n}\n.moreButton--small {\n  border: 0;\n  padding: 0;\n  left: 0px !important;\n  top: 0px !important;\n  background: transparent !important;\n  box-shadow: initial !important;\n}\n.moreButton--small .moreButton__mask {\n  opacity: 0 !important;\n}\n.moreButton__icon {\n  display: flex;\n  z-index: 1;\n}\n.moreButton__icon--small {\n  font-size: 1.5rem;\n  border-radius: 45px;\n  color: white !important;\n}\n.moreButton__text {\n  z-index: 1;\n  font-size: 1.5rem;\n  line-height: 1.5rem;\n  transition: color 0.3s ease-in-out;\n}\n.moreButton__text--small {\n  margin-left: 0.75rem;\n  font-size: 1.5rem;\n  color: #0c2a4d;\n}\n.moreButton__text--small:hover {\n  text-decoration: underline;\n}";
@@ -16,7 +17,7 @@ var MoreButton = function MoreButton(props) {
     customExpandIcon = props.customExpandIcon;
   var expand = props.expand,
     setExpand = props.setExpand,
-    _onClick = props.onClick,
+    onClick = props.onClick,
     formatMessage = props.formatMessage;
   var smallIcon = expand ? /*#__PURE__*/React__default.createElement(ExpandLess, {
     className: "moreButton__icon--small",
@@ -33,42 +34,62 @@ var MoreButton = function MoreButton(props) {
   var message = small ? smallMessage : 'common.watch.more';
   var largeIcon = customExpandIcon && /*#__PURE__*/React__default.createElement("img", {
     src: customExpandIcon,
-    alt: "more"
+    alt: "",
+    "aria-hidden": "true"
   });
   var icon = small ? smallIcon : largeIcon;
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: classNames('moreButton', {
-      'moreButton--shadow': enableShadow
-    }, {
-      'moreButton--small': small
-    }),
-    style: {
-      color: shadowColor || 'white',
-      background: primaryColor,
-      boxShadow: enableShadow ? "3px 3px 0 0 ".concat(shadowColor) : undefined
-    },
-    onClick: function onClick() {
-      setExpand(!expand);
-      _onClick();
-    }
-  }, !enableShadow && /*#__PURE__*/React__default.createElement("div", {
-    className: "moreButton__mask",
-    style: {
-      background: secondaryColor
-    }
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: "moreButton__icon"
-  }, icon), /*#__PURE__*/React__default.createElement("div", {
-    className: classNames('moreButton__text', {
-      'moreButton__text--small': small
-    }),
-    style: {
-      color: small ? shadowColor || primaryColor : undefined,
-      marginLeft: icon ? '0.5rem' : undefined
-    }
-  }, formatMessage ? formatMessage({
+  var handleAction = function handleAction() {
+    setExpand(!expand);
+    onClick();
+  };
+  var messageText = formatMessage ? formatMessage({
     id: message
-  }) : message));
+  }) : message;
+  return (
+    /*#__PURE__*/
+    /* WCAG 2.1.1/4.1.2 看更多為互動元件：role="button" + tabIndex + 鍵盤操作，
+       報讀補「點選後載入更多結果」預先提示、aria-expanded 表達展開狀態 */
+    React__default.createElement("div", {
+      className: classNames('moreButton', {
+        'moreButton--shadow': enableShadow
+      }, {
+        'moreButton--small': small
+      }),
+      role: "button",
+      tabIndex: 0,
+      "aria-expanded": expand,
+      "aria-label": "".concat(messageText).concat(getIntl().formatMessage({
+        id: 'aria.moreButton.hint'
+      })),
+      style: {
+        color: shadowColor || 'white',
+        background: primaryColor,
+        boxShadow: enableShadow ? "3px 3px 0 0 ".concat(shadowColor) : undefined
+      },
+      onClick: handleAction,
+      onKeyDown: function onKeyDown(event) {
+        if (event.key === 'Enter' || event.key === ' ') {
+          event.preventDefault();
+          handleAction();
+        }
+      }
+    }, !enableShadow && /*#__PURE__*/React__default.createElement("div", {
+      className: "moreButton__mask",
+      style: {
+        background: secondaryColor
+      }
+    }), /*#__PURE__*/React__default.createElement("div", {
+      className: "moreButton__icon"
+    }, icon), /*#__PURE__*/React__default.createElement("div", {
+      className: classNames('moreButton__text', {
+        'moreButton__text--small': small
+      }),
+      style: {
+        color: small ? shadowColor || primaryColor : undefined,
+        marginLeft: icon ? '0.5rem' : undefined
+      }
+    }, messageText))
+  );
 };
 MoreButton.defaultProps = {
   primaryColor: '#271702',

package/lib/components/MoreButton.js

@@ -1,6 +1,7 @@
-export { M as default } from './MoreButton-44d3b4fe.js';
+export { M as default } from './MoreButton-692584cd.js';
 import 'react';
 import 'prop-types';
 import './index-b76a85f4.js';
 import '@material-ui/icons';
+import './globalConfig';
 import './style-inject.es-1f59c1d0.js';

package/lib/components/Pagination.js

@@ -2,12 +2,13 @@ import { c as _objectWithoutProperties$1 } from './_rollupPluginBabelHelpers-a52
 import * as React$2 from 'react';
 import React__default, { Children, isValidElement, cloneElement } from 'react';
 import PropTypes from 'prop-types';
-import { d as defaultTheme, k as _objectWithoutProperties, o as _slicedToArray, _ as _extends, q as _objectWithoutPropertiesLoose, r as alpha, j as formatMuiErrorMessage } from './defaultTheme-ed7746fe.js';
+import { k as _objectWithoutProperties, o as _slicedToArray, _ as _extends, q as _objectWithoutPropertiesLoose, r as alpha, j as formatMuiErrorMessage } from './defaultTheme-ed7746fe.js';
 import { u as useControlled, c as clsx, b as useEventCallback, w as withStyles, d as useIsFocusVisible, e as useForkRef, f as createSvgIcon, g as capitalize, h as debounce, r as requireCreateSvgIcon, i as interopRequireDefault, a as interopRequireWildcard } from './createSvgIcon-e3803ee1.js';
 import 'react-is';
-import { useTheme as useTheme$1 } from '@material-ui/styles';
+import '@material-ui/styles';
 import './withTheme-2d778133.js';
 import { _ as _toConsumableArray } from './toConsumableArray-dbe8af76.js';
+import { u as useTheme } from './useTheme-d16d02d9.js';
 import * as ReactDOM from 'react-dom';
 import ReactDOM__default from 'react-dom';
 import { c as classNames } from './index-b76a85f4.js';
@@ -15,12 +16,6 @@ import { IconButton } from '@material-ui/core';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 import './_commonjsHelpers-70de2c37.js';
 
-function useTheme() {
-  var theme = useTheme$1() || defaultTheme;
-
-  return theme;
-}
-
 function usePagination() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 

package/lib/components/SNA.js

@@ -2,7 +2,7 @@ import React__default, { useMemo, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { c as classNames } from './index-b76a85f4.js';
 import { e as event, d as d3Select, a as dispatch, c as customEvent, D as DragEvent, q as quadtree, m as map, t as timer, T as Transform, i as identity, b as interrupt, o as ordinal, f as category10 } from './transform-3a04288b.js';
-import { E as ExtraTools } from './ExtraTools-8d2ef84d.js';
+import { E as ExtraTools } from './ExtraTools-55f66039.js';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 import './_rollupPluginBabelHelpers-a52356f6.js';
 import './_commonjsHelpers-70de2c37.js';

package/lib/components/{Select-ac580a1f.js → Select-e0790135.js}

@@ -3,6 +3,11 @@ import React__default from 'react';
 import PropTypes from 'prop-types';
 import { c as classNames } from './index-b76a85f4.js';
 import { FormControl, Select as Select$1, CircularProgress, MenuItem } from '@material-ui/core';
+import './defaultTheme-ed7746fe.js';
+import 'react-is';
+import '@material-ui/styles';
+import { u as useTheme } from './useTheme-d16d02d9.js';
+import './withTheme-2d778133.js';
 import { E as Empty } from './Empty-bf77164f.js';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 
@@ -25,6 +30,12 @@ var Select = function Select(props) {
     _onChange = props.onChange,
     ariaLabel = props.ariaLabel,
     ariaLabelledby = props.ariaLabelledby;
+  /* WCAG 1.4.3 提示字顏色依主題深淺自動選色：select.scss 的 #6b6130 只適用淺底，
+     深色主題（palette.type=dark，如 ocean 深色 Modal）需改亮灰（WAVE 實測「請輸入 年齡」被抓） */
+  var theme = useTheme();
+  var placeholderStyle = theme && theme.palette && theme.palette.type === 'dark' ? {
+    color: '#bdbdbd'
+  } : undefined;
   var itemFind = function itemFind(key) {
     return (options || []).find(function (option) {
       return _typeof(option) === 'object' ? key === option.value : key === option;
@@ -52,9 +63,12 @@ var Select = function Select(props) {
     renderValue: function renderValue(id) {
       var finder = itemFind(id);
       var content = _typeof(finder) === 'object' ? finder.label : finder;
-      if (!id && id !== 0 || id.length === 0) content = /*#__PURE__*/React__default.createElement("span", {
-        className: "select__placeholder"
-      }, placeholder);
+      if (!id && id !== 0 || id.length === 0) {
+        content = /*#__PURE__*/React__default.createElement("span", {
+          className: "select__placeholder",
+          style: placeholderStyle
+        }, placeholder);
+      }
       return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, content, loading && /*#__PURE__*/React__default.createElement(CircularProgress, {
         size: 16,
         style: {

package/lib/components/Select.js

@@ -1,8 +1,13 @@
-export { S as default } from './Select-ac580a1f.js';
+export { S as default } from './Select-e0790135.js';
 import './_rollupPluginBabelHelpers-a52356f6.js';
 import 'react';
 import 'prop-types';
 import './index-b76a85f4.js';
 import '@material-ui/core';
+import './defaultTheme-ed7746fe.js';
+import 'react-is';
+import '@material-ui/styles';
+import './useTheme-d16d02d9.js';
+import './withTheme-2d778133.js';
 import './Empty-bf77164f.js';
 import './style-inject.es-1f59c1d0.js';

package/lib/components/globalConfig.js

@@ -63,7 +63,18 @@ var zhtw = {
 	"aria.modal.close": "關閉視窗",
 	"aria.newWindow": "（另開新視窗）",
 	"aria.vcode.image": "驗證碼圖片，如無法辨識可刷新驗證碼",
-	"aria.vcode.refresh": "刷新驗證碼"
+	"aria.vcode.refresh": "刷新驗證碼",
+	"aria.footer.nmtlLogo": "國立臺灣文學館（另開新視窗）",
+	"aria.opensDialog": "（開啟對話框）",
+	"aria.ticker.pause": "暫停關鍵字跑馬燈",
+	"aria.ticker.play": "播放關鍵字跑馬燈",
+	"aria.moreButton.hint": "（點選後載入更多結果）",
+	"aria.keyword.searchHint": "（關鍵字，點選後顯示相關作品）",
+	"aria.keyword.more": "顯示更多關鍵字（開啟對話框）",
+	"aria.vcode.audioPlay": "播放驗證碼語音",
+	"aria.vcode.audioIntro": "驗證碼為：",
+	"aria.vcode.audioUnsupported": "瀏覽器不支援語音合成，請刷新驗證碼或改用圖片辨識",
+	"aria.vcode.refreshed": "驗證碼已更新"
 };
 
 var zhcn = {
@@ -115,7 +126,18 @@ var zhcn = {
 	"aria.modal.close": "关闭视窗",
 	"aria.newWindow": "（另开新视窗）",
 	"aria.vcode.image": "验证码图片，如无法辨识可刷新验证码",
-	"aria.vcode.refresh": "刷新验证码"
+	"aria.vcode.refresh": "刷新验证码",
+	"aria.footer.nmtlLogo": "国立台湾文学馆（另开新窗口）",
+	"aria.opensDialog": "（开启对话框）",
+	"aria.ticker.pause": "暂停关键字跑马灯",
+	"aria.ticker.play": "播放关键字跑马灯",
+	"aria.moreButton.hint": "（点选后载入更多结果）",
+	"aria.keyword.searchHint": "（关键字，点选后显示相关作品）",
+	"aria.keyword.more": "显示更多关键字（开启对话框）",
+	"aria.vcode.audioPlay": "播放验证码语音",
+	"aria.vcode.audioIntro": "验证码为：",
+	"aria.vcode.audioUnsupported": "浏览器不支持语音合成，请刷新验证码或改用图片辨识",
+	"aria.vcode.refreshed": "验证码已更新"
 };
 
 var enus = {
@@ -167,7 +189,18 @@ var enus = {
 	"aria.modal.close": "Close dialog",
 	"aria.newWindow": " (opens in new window)",
 	"aria.vcode.image": "CAPTCHA image, refresh if unreadable",
-	"aria.vcode.refresh": "Refresh CAPTCHA"
+	"aria.vcode.refresh": "Refresh CAPTCHA",
+	"aria.footer.nmtlLogo": "National Museum of Taiwan Literature (opens in new window)",
+	"aria.opensDialog": " (opens a dialog)",
+	"aria.ticker.pause": "Pause keyword ticker",
+	"aria.ticker.play": "Play keyword ticker",
+	"aria.moreButton.hint": " (click to load more results)",
+	"aria.keyword.searchHint": " (keyword, click to show related works)",
+	"aria.keyword.more": "Show more keywords (opens a dialog)",
+	"aria.vcode.audioPlay": "Play verification code audio",
+	"aria.vcode.audioIntro": "The verification code is:",
+	"aria.vcode.audioUnsupported": "Speech synthesis not supported; please refresh the code",
+	"aria.vcode.refreshed": "Verification code refreshed"
 };
 
 var _languages;

package/lib/components/useTheme-d16d02d9.js

@@ -0,0 +1,11 @@
+import { useTheme as useTheme$1 } from '@material-ui/styles';
+import 'react';
+import { d as defaultTheme } from './defaultTheme-ed7746fe.js';
+
+function useTheme() {
+  var theme = useTheme$1() || defaultTheme;
+
+  return theme;
+}
+
+export { useTheme as u };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@daoyi/nmtl-ui",
-	"version": "2.0.1-beta.97",
+	"version": "2.0.1-beta.99",
 	"description": "This project is to be used as a starter kit for building React component using Storybook and Rollup",
 	"author": "daoyi",
 	"main": "lib/index.js",