@cloudbase/weda-ui 2.0.11 → 2.0.12

package/src/web/components/form/select/region/index.ts

@@ -3,24 +3,33 @@ import { callWedaApi } from '../../../../utils/tcb';
 
 let tree;
 
-export async function getRegionTree(regionData,regionType,regionMode) {
+export async function getRegionTree(regionData, regionType, regionMode) {
   tree = [];
-  tree = formatTreeData(regionData,regionType,regionMode);
+  tree = formatTreeData(regionData, regionType, regionMode);
   return tree;
 }
 
-export  function regionPicker(options,regionTree:any[]) {
-  const weRegionTree =regionTree.length==0?[{label:'地区数据加载中，请关闭弹窗后重试',value:null,children:null}]:regionTree;
+export function regionPicker(options, regionTree: any[]) {
+  const weRegionTree =
+    regionTree.length == 0
+      ? [
+          {
+            label: '地区数据加载中，请关闭弹窗后重试',
+            value: null,
+            children: null,
+          },
+        ]
+      : regionTree;
   weui.picker(weRegionTree, options);
 }
 /**
  * 获取运行态地区数据
  */
- export async function getAreaCode() {
+export async function getAreaCode() {
   try {
     const res = await callWedaApi({
       action: 'QueryRuntimeAreaCode',
-      data: {Mask: "11100"},
+      data: { Mask: '11100' },
     });
     return res?.AreaCodeList;
   } catch (error) {
@@ -31,101 +40,113 @@ export  function regionPicker(options,regionTree:any[]) {
 /**
  * 构建树形结构
  */
- function formatTreeData(arr,regionType,regionMode) {
+function formatTreeData(arr, regionType, regionMode) {
   let provicesData = [];
-    arr.forEach(item=>{
+  arr.forEach((item) => {
     //省数据集合
-    if(item?.Type==1&&item?.Deprecated==false){
+    if (item?.Type == 1 && item?.Deprecated == false) {
       provicesData.push({
         label: item.Value,
         value: item.Value,
-        code:item.Code,
-        type:item.Type,
-        centralCity:item.CentralCity,
-        children: regionType!= 'levelOne'||regionMode=='region'?[{
-          label: item.Value,
-          value: item.Value,
-          code:item.Code,
-          type:item.Type,
-          children: regionType!= 'levelTwo'||regionMode=='region'?[{
-            label: item.Value,
-            value: item.Value,
-            code:item.Code,
-            type:item.Type,
-            centralCity:item.CentralCity,
-          }]:null
-        }]:null
+        code: item.Code,
+        type: item.Type,
+        centralCity: item.CentralCity,
+        children:
+          regionType != 'levelOne' || regionMode == 'region'
+            ? [
+                {
+                  label: item.Value,
+                  value: item.Value,
+                  code: item.Code,
+                  type: item.Type,
+                  children:
+                    regionType != 'levelTwo' || regionMode == 'region'
+                      ? [
+                          {
+                            label: item.Value,
+                            value: item.Value,
+                            code: item.Code,
+                            type: item.Type,
+                            centralCity: item.CentralCity,
+                          },
+                        ]
+                      : null,
+                },
+              ]
+            : null,
       });
     }
   });
-  if(regionType!= 'levelOne'||regionMode=='region'){
-    arr.forEach(item=>{
+  if (regionType != 'levelOne' || regionMode == 'region') {
+    arr.forEach((item) => {
       //市数据集合
-      if(item?.Type==2&&item?.Deprecated==false){
-        provicesData.map(provice=>{
-          if(provice.code.substr(0, 2) == item.Code.substr(0,2)){
-            if(provice['children'][0].type==1){
-              provice['children']=[];
+      if (item?.Type == 2 && item?.Deprecated == false) {
+        provicesData.map((provice) => {
+          if (provice.code.substr(0, 2) == item.Code.substr(0, 2)) {
+            if (provice['children'][0].type == 1) {
+              provice['children'] = [];
             }
-              provice['children'].push({
-                label: item.Value,
-                value: item.Value,
-                code:item.Code,
-                type:item.Type,
-                centralCity:item.CentralCity,
-                children: regionType!= 'levelTwo'||regionMode=='region'?[{
-                  label: item.Value,
-                  value: item.Value,
-                  code:item.Code,
-                  type:item.Type,
-                  centralCity:item.CentralCity,
-                }]:null
-              });
-
-      }
+            provice['children'].push({
+              label: item.Value,
+              value: item.Value,
+              code: item.Code,
+              type: item.Type,
+              centralCity: item.CentralCity,
+              children:
+                regionType != 'levelTwo' || regionMode == 'region'
+                  ? [
+                      {
+                        label: item.Value,
+                        value: item.Value,
+                        code: item.Code,
+                        type: item.Type,
+                        centralCity: item.CentralCity,
+                      },
+                    ]
+                  : null,
+            });
+          }
         });
       }
     });
-    if(regionType != 'levelTwo'||regionMode=='region'){
-      arr.forEach(item=>{
+    if (regionType != 'levelTwo' || regionMode == 'region') {
+      arr.forEach((item) => {
         //区数据集合
-        if(item?.Type==3&&item?.Deprecated==false){
-          provicesData.map(provice=>{
-            if(provice.centralCity){
-              provice.children.map(city=>{
-                if(city.code.substr(0, 2) == item.Code.substr(0,2)){
-                  if(city['children'][0].type==1){
-                    city['children']=[];
+        if (item?.Type == 3 && item?.Deprecated == false) {
+          provicesData.map((provice) => {
+            if (provice.centralCity) {
+              provice.children.map((city) => {
+                if (city.code.substr(0, 2) == item.Code.substr(0, 2)) {
+                  if (city['children'][0].type == 1) {
+                    city['children'] = [];
                   }
-                    city['children'].push({
-                      label: item.Value,
-                      value: item.Value,
-                      code:item.Code,
-                      //type:item.Type
-                    });
-
-              }});
-            }else{
-              provice.children.map(city=>{
-                if(city.code.substr(0, 4) == item.Code.substr(0,4)){
-                  if(city['children'][0].type==2){
-                    city['children']=[];
+                  city['children'].push({
+                    label: item.Value,
+                    value: item.Value,
+                    code: item.Code,
+                    //type:item.Type
+                  });
+                }
+              });
+            } else {
+              provice.children.map((city) => {
+                if (city.code.substr(0, 4) == item.Code.substr(0, 4)) {
+                  if (city['children'][0].type == 2) {
+                    city['children'] = [];
                   }
-                    city['children'].push({
-                      label: item.Value,
-                      value: item.Value,
-                      code:item.Code,
-                      //type:item.Type
-                    });
-
-              }});
+                  city['children'].push({
+                    label: item.Value,
+                    value: item.Value,
+                    code: item.Code,
+                    //type:item.Type
+                  });
+                }
+              });
             }
-
           });
         }
       });
     }
-
   }
   return provicesData;
 }

package/src/web/components/form/select/year.tsx

@@ -23,6 +23,7 @@ export default function YearPicker(props) {
     onChange,
     className,
     placeholder,
+    size,
     ...rest
   } = props;
   const { classPrefix } = useConfig();
@@ -135,6 +136,7 @@ export default function YearPicker(props) {
         >
           <div className={classNames(`${classPrefix}-datepicker__input`)}>
             <Input
+              size={size}
               ref={inputRef}
               disabled={disabled}
               placeholder={placeholder}

package/src/web/components/form/switch/index.tsx

@@ -2,11 +2,11 @@ import * as React from 'react';
 
 import classNames from '../../../utils/classnames';
 import getLocalCounter from '../../../utils/getLocalCounter';
-import {usePlatform} from '../../../utils/platform';
-import {ConfigProvider, Switch as TeaSwitch} from 'tea-component';
+import { usePlatform } from '../../../utils/platform';
+import { ConfigProvider, Switch as TeaSwitch } from 'tea-component';
 import { renderDecorator } from '../renderDecorator';
 import { useSyncValue } from '../../../utils/useSyncValue';
-import { CommonFormPropsType } from '../types';
+import type { CommonFormPropsType } from '../types';
 
 export default function Switch({
   // 系统属性
@@ -21,7 +21,7 @@ export default function Switch({
   layout = 'horizontal',
   disabled = false,
   requiredFlag = false,
-  decorator
+  decorator,
 }: PropsType) {
   const isFlex = layout !== 'vertical';
   const cls = classNames({
@@ -40,51 +40,51 @@ export default function Switch({
   const platform = usePlatform();
   // 两次默认值不同时, 需要刷新
   const [checked, setChecked] = useSyncValue(defaultChecked);
-  
 
   // 现在低码组件往源码组件传入的id不唯一, 暂时使用hashcode替代
   const hashcode = getLocalCounter();
   const _id = `switch-${hashcode}`;
-  const switchElement = platform === 'h5' ? 
-  (
-  <div className={subCls}>
-    {isFlex ? <div className="weui-cell__bd"></div> : null}
-    <div className={isFlex ? 'weui-cell__ft' : 'weui-cell__bd'}>
-      <label htmlFor={_id} key={_id} className="weui-switch-cp">
-        <input
+  const switchElement =
+    platform === 'h5' ? (
+      <div className={subCls}>
+        {isFlex ? <div className="weui-cell__bd"></div> : null}
+        <div className={isFlex ? 'weui-cell__ft' : 'weui-cell__bd'}>
+          <label htmlFor={_id} key={_id} className="weui-switch-cp">
+            <input
+              id={_id}
+              className="weui-switch-cp__input"
+              type="checkbox"
+              checked={checked}
+              disabled={disabled}
+              onChange={(ev) => {
+                const value = ev.target.checked;
+                setChecked(value);
+                events.change({ value }, { orgianalEvent: ev });
+              }}
+            />
+            <div className="weui-switch-cp__box"></div>
+          </label>
+        </div>
+      </div>
+    ) : (
+      <ConfigProvider classPrefix="wedatea2td">
+        <TeaSwitch
           id={_id}
-          className="weui-switch-cp__input"
-          type="checkbox"
-          checked={checked}
+          value={checked}
           disabled={disabled}
-          onChange={(ev) => {
-            const value = ev.target.checked;
+          onChange={(value, context) => {
+            const originEvent = context.event;
             setChecked(value);
-            events.change({ value }, {orgianalEvent: ev});
+            events.change({ value }, { originEvent });
           }}
         />
-        <div className="weui-switch-cp__box"></div>
-      </label>
-    </div>
-  </div>
-  ) : 
-  (
-    <ConfigProvider classPrefix="wedatea2td">
-      <TeaSwitch
-        id={_id}
-        value={checked}
-        disabled={disabled}
-        onChange={(value, context) => {
-          const originEvent = context.event;
-          setChecked(value);
-          events.change({ value }, {originEvent});
-        }}
-      />
-    </ConfigProvider>
-  );
-  
-  return renderDecorator(switchElement, decorator)({
+      </ConfigProvider>
+    );
 
+  return renderDecorator(
+    switchElement,
+    decorator
+  )({
     id,
     className: cls,
     style,
@@ -97,4 +97,4 @@ export default function Switch({
 
 export interface PropsType extends CommonFormPropsType {
   checked?: boolean;
-}
+}

package/src/web/components/form/textarea/index.css

@@ -5,3 +5,7 @@
 .weda-ui .weda-textarea .weui-cell_form {
   padding: 16px;
 }
+
+.weda-ui .weda-textarea .weui-flex__item .weui-cell_form {
+  padding-left: 0;
+}

package/src/web/components/form/textarea/index.tsx

@@ -26,7 +26,7 @@ export default function Textarea({
   requiredFlag = false,
   counterVisible = true,
   size = 'l',
-  decorator
+  decorator,
 }: PropsType) {
   const platform = usePlatform();
 
@@ -44,7 +44,7 @@ export default function Textarea({
 
   // 两次默认值不同时, 需要刷新value
   const [value, setValue] = useSyncValue(defaultValue);
-  const counter = React.useMemo(() => (value?.length || 0), [value]);
+  const counter = React.useMemo(() => value?.length || 0, [value]);
 
   const onChange = function (e) {
     const text = typeof e === 'string' ? e : e.target.value;
@@ -53,7 +53,7 @@ export default function Textarea({
   };
 
   let textAreaElement;
-  if(platform === 'h5') {
+  if (platform === 'h5') {
     textAreaElement = (
       <div className={subCls}>
         <div className="weui-cell__bd">
@@ -77,32 +77,33 @@ export default function Textarea({
   } else {
     textAreaElement = (
       <ConfigProvider classPrefix="wedatea2td">
-          <Input.TextArea
-            size={size}
-            placeholder={placeholder}
-            value={value}
-            onChange={onChange}
-            maxLength={maxLength}
-            disabled={disabled}
-            autoFocus={autoFocus}
-            showCount
-          ></Input.TextArea>
+        <Input.TextArea
+          size={size}
+          placeholder={placeholder}
+          value={value}
+          onChange={onChange}
+          maxLength={maxLength}
+          disabled={disabled}
+          autoFocus={autoFocus}
+          showCount
+        ></Input.TextArea>
       </ConfigProvider>
     );
   }
 
-  return renderDecorator(textAreaElement, decorator)(
-    {
-      id,
-      className: cls,
-      style,
-      label: labelVisible ? label : null,
-      layout,
-      multiCell: false,
-      requiredFlag,
-      size
-    }
-  );
+  return renderDecorator(
+    textAreaElement,
+    decorator
+  )({
+    id,
+    className: cls,
+    style,
+    label: labelVisible ? label : null,
+    layout,
+    multiCell: false,
+    requiredFlag,
+    size,
+  });
 }
 export interface PropsType extends CommonFormPropsType {
   defaultValue?: string;

package/src/web/components/form/types.d.ts

@@ -1,12 +1,12 @@
-import * as React from "react";
-import { CommonPropsType } from "../../types";
+import * as React from 'react';
+import type { CommonPropsType } from '../../types';
 
 export interface CommonFormPropsType extends CommonPropsType {
-    name?: string;
-    label?: string;
-    labelVisible?: boolean;
-    layout?: "horizontal" | "vertical";
-    disabled?: boolean;
-    requiredFlag?: boolean;
-    decorator?: React.FC<any>;
-}
+  name?: string;
+  label?: string;
+  labelVisible?: boolean;
+  layout?: 'horizontal' | 'vertical';
+  disabled?: boolean;
+  requiredFlag?: boolean;
+  decorator?: React.FC<any>;
+}

package/src/web/components/form/uploaderFile/index.jsx

@@ -1,6 +1,5 @@
 /* eslint-disable react/prop-types */
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
 import { usePlatform } from '../../../utils/platform';
 import { UploadFileH5 as UploaderH5 } from './uploadFile.h5';
 import { UploadFilePc } from './uploadFile.pc';
@@ -24,7 +23,3 @@ export default function UploaderFile(props) {
     <UploadFilePc {...props} />
   );
 }
-
-UploaderFile.propTypes = {
-  showType: PropTypes.string, // 强制展示某个平台 pc | h5
-};

package/src/web/components/form/uploaderFile/uploadFile.h5.tsx

@@ -1,13 +1,10 @@
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
 import weui from '../../../utils/weui';
-import { CommonFormPropsType } from '../types';
+import type { CommonFormPropsType } from '../types';
 import isObjectEqual from '../../../utils/isObjectEqual';
 import {
-  Upload,
   ConfigProvider,
   Button,
-  message,
   Icon,
   Text,
   List,
@@ -74,18 +71,25 @@ export function UploadFileH5({
   onChange = null,
   isEdit = true,
 }: IUploadFileH5) {
-  const [fileIDList, setfileIDList] = React.useState(filterStrList([].concat(defaultValue, value))); // 上传成功文件ID列表，fileID[]
+  const [fileIDList, setfileIDList] = React.useState(
+    filterStrList([].concat(defaultValue, value))
+  ); // 上传成功文件ID列表，fileID[]
   const [fileList, setFileList] = React.useState([]); // 上传中的文件列表，file[]，file为原始文件 + uuid属性
   const [fileSizeObj, setFileSizeObj] = React.useState({}); // 管理上传文件大小 {uuid:size}
-    // 两次默认值不同, 需要刷新
-    const prevDefaultRef = React.useRef<any>([]);
-    React.useMemo(()=>{
+  // 两次默认值不同, 需要刷新
+  const prevDefaultRef = React.useRef<any>([]);
+  React.useMemo(() => {
     //有有效默认值时不刷新，解决初次渲染默认值不显示问题
-   if(defaultValue&&!isObjectEqual(prevDefaultRef.current,defaultValue)&&(JSON.stringify(prevDefaultRef.current)=='[]'||!prevDefaultRef.current)){
-   prevDefaultRef.current =defaultValue;
+    if (
+      defaultValue &&
+      !isObjectEqual(prevDefaultRef.current, defaultValue) &&
+      (JSON.stringify(prevDefaultRef.current) == '[]' ||
+        !prevDefaultRef.current)
+    ) {
+      prevDefaultRef.current = defaultValue;
       setfileIDList(filterStrList([].concat(defaultValue)));
     }
-    },[defaultValue]);
+  }, [defaultValue]);
   React.useEffect(() => {
     // 外部 onChange 事件
     const pureFileIDList = fileIDList.filter(

package/src/web/components/form/uploaderFile/uploadFile.pc.tsx

@@ -21,7 +21,7 @@ import {
 import { getCloudInstance, getTempFileURL } from '../../../utils/tcb';
 import classNames from '../../../utils/classnames';
 import { renderDecorator } from '../renderDecorator';
-import { CommonFormPropsType } from '../types';
+import type { CommonFormPropsType } from '../types';
 import isObjectEqual from '../../../utils/isObjectEqual';
 
 // 默认组件类前缀
@@ -68,20 +68,25 @@ export function UploadFilePc({
   onChange = null,
   isEdit = true,
 }: IUploaderFilePc) {
-
-
-  const [fileIDList, setfileIDList] = React.useState(filterStrList([].concat(defaultValue, value))); // 上传成功文件ID列表，fileID[]
+  const [fileIDList, setfileIDList] = React.useState(
+    filterStrList([].concat(defaultValue, value))
+  ); // 上传成功文件ID列表，fileID[]
   const [fileList, setFileList] = React.useState([]); // 上传中的文件列表，file[]，file为原始文件 + uuid属性
   const [fileSizeObj, setFileSizeObj] = React.useState({}); // 管理上传文件大小 {uuid:size}
-    // 两次默认值不同, 需要刷新
+  // 两次默认值不同, 需要刷新
   const prevDefaultRef = React.useRef<any>([]);
-  React.useMemo(()=>{
+  React.useMemo(() => {
     //有有效默认值时不刷新，解决初次渲染默认值不显示问题
-   if(defaultValue&&!isObjectEqual(prevDefaultRef.current,defaultValue)&&(JSON.stringify(prevDefaultRef.current)=='[]'||!prevDefaultRef.current)){
-      prevDefaultRef.current =defaultValue;
+    if (
+      defaultValue &&
+      !isObjectEqual(prevDefaultRef.current, defaultValue) &&
+      (JSON.stringify(prevDefaultRef.current) == '[]' ||
+        !prevDefaultRef.current)
+    ) {
+      prevDefaultRef.current = defaultValue;
       setfileIDList(filterStrList([].concat(defaultValue)));
     }
-    },[defaultValue]);
+  }, [defaultValue]);
   React.useEffect(() => {
     // 外部 onChange 事件
     const pureFileIDList = fileIDList.filter(

package/src/web/components/image/image.tsx

@@ -109,7 +109,7 @@ export function ImageInner({
               const windowHeight = window.innerHeight;
               const windowWidth = window.innerWidth;
               let ratio = realWidth.current / realHeight.current;
-              if(Number.isNaN(ratio)) {
+              if (Number.isNaN(ratio)) {
                 ratio = 1;
               }
               const height = windowWidth / ratio;
@@ -184,4 +184,4 @@ export function ImageInner({
       </ConfigProvider>
     );
   }
-}
+}

package/src/web/components/image/index.css

@@ -42,11 +42,13 @@
 }
 .weda-image:not([src]):before,
 .weda-image-error::before {
-    content: '';
-    background: #f5f5f5 url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNMjUuMzIgMTYuMzU5N0MyNi4wNzY0IDE2LjM1OTcgMjYuODI1NCAxNi41MDg3IDI3LjUyNDMgMTYuNzk4MUMyOC4yMjMxIDE3LjA4NzYgMjguODU4MSAxNy41MTE5IDI5LjM5MjkgMTguMDQ2OEMyOS45Mjc4IDE4LjU4MTYgMzAuMzUyMSAxOS4yMTY2IDMwLjY0MTYgMTkuOTE1NEMzMC45MzEgMjAuNjE0MyAzMS4wOCAyMS4zNjMzIDMxLjA4IDIyLjExOTdDMzEuMDggMjIuODc2MSAzMC45MzEgMjMuNjI1MSAzMC42NDE2IDI0LjMyMzlDMzAuMzUyMSAyNS4wMjI4IDI5LjkyNzggMjUuNjU3OCAyOS4zOTI5IDI2LjE5MjZDMjguODU4MSAyNi43Mjc1IDI4LjIyMzEgMjcuMTUxOCAyNy41MjQzIDI3LjQ0MTJDMjYuODI1NCAyNy43MzA3IDI2LjA3NjQgMjcuODc5NyAyNS4zMiAyNy44Nzk3QzIzLjc5MjQgMjcuODc5NyAyMi4zMjczIDI3LjI3MjggMjEuMjQ3MSAyNi4xOTI2QzIwLjE2NjkgMjUuMTEyNCAxOS41NiAyMy42NDczIDE5LjU2IDIyLjExOTdDMTkuNTYgMjAuNTkyIDIwLjE2NjkgMTkuMTI3IDIxLjI0NzEgMTguMDQ2OEMyMi4zMjczIDE2Ljk2NjUgMjMuNzkyNCAxNi4zNTk3IDI1LjMyIDE2LjM1OTdaTTI4IDMuNTU5NjlWMTQuODc2OEMyNy4xNzc3IDE0LjU4NjYgMjYuMTkyIDE0LjQzODggMjUuMzIgMTQuNDM5N0MyNC4wMzEgMTQuNDM5NyAyMi44MTU3IDE0Ljc1NzEgMjEuNzQ4OCAxNS4zMTg0TDIwLjc5NTIgMTMuMTU5N0wxNi4wMjU5IDIwLjAyNzVMOC40NDU3NiAxNi40NDFMMy41NiAyMy4zOTk3SDE3Ljc0NjJDMTcuOTg2NyAyNC44MjkgMTguNjI4MiAyNi4xNjA2IDE5LjU5NTggMjcuMjM5N0gxVjMuNTU5NjlIMjhaTTI1Ljk2IDI0LjAzOTdIMjQuNjhWMjUuMzE5N0gyNS45NlYyNC4wMzk3Wk0yNS45NiAxOC45MTk3SDI0LjY4VjIzLjM5OTdIMjUuOTZWMTguOTE5N1pNNi4xMiAxMC41OTk3QzYuMTIgMTEuOTk4MSA3LjE5OTA0IDEzLjEwODUgOC42MDc2OCAxMy4xNTg0QzEwLjAyMDggMTMuMjA3NyAxMS4yNCAxMi4wNDggMTEuMjQgMTAuNTk5N0MxMS4yNCA5LjI0NjA5IDEwLjA2NDMgOC4wODU3NyA4Ljc1MjMyIDguMDQwOTdDNy4yOTU2OCA3Ljk5MTY5IDYuMTIgOS4xNTEzNyA2LjEyIDEwLjU5OTdaIiBmaWxsPSIjQkNDNEQwIj48L3BhdGg+Cjwvc3ZnPgo=') no-repeat center / 50% 50%;
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
+  content: '';
+  background: #f5f5f5
+    url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNMjUuMzIgMTYuMzU5N0MyNi4wNzY0IDE2LjM1OTcgMjYuODI1NCAxNi41MDg3IDI3LjUyNDMgMTYuNzk4MUMyOC4yMjMxIDE3LjA4NzYgMjguODU4MSAxNy41MTE5IDI5LjM5MjkgMTguMDQ2OEMyOS45Mjc4IDE4LjU4MTYgMzAuMzUyMSAxOS4yMTY2IDMwLjY0MTYgMTkuOTE1NEMzMC45MzEgMjAuNjE0MyAzMS4wOCAyMS4zNjMzIDMxLjA4IDIyLjExOTdDMzEuMDggMjIuODc2MSAzMC45MzEgMjMuNjI1MSAzMC42NDE2IDI0LjMyMzlDMzAuMzUyMSAyNS4wMjI4IDI5LjkyNzggMjUuNjU3OCAyOS4zOTI5IDI2LjE5MjZDMjguODU4MSAyNi43Mjc1IDI4LjIyMzEgMjcuMTUxOCAyNy41MjQzIDI3LjQ0MTJDMjYuODI1NCAyNy43MzA3IDI2LjA3NjQgMjcuODc5NyAyNS4zMiAyNy44Nzk3QzIzLjc5MjQgMjcuODc5NyAyMi4zMjczIDI3LjI3MjggMjEuMjQ3MSAyNi4xOTI2QzIwLjE2NjkgMjUuMTEyNCAxOS41NiAyMy42NDczIDE5LjU2IDIyLjExOTdDMTkuNTYgMjAuNTkyIDIwLjE2NjkgMTkuMTI3IDIxLjI0NzEgMTguMDQ2OEMyMi4zMjczIDE2Ljk2NjUgMjMuNzkyNCAxNi4zNTk3IDI1LjMyIDE2LjM1OTdaTTI4IDMuNTU5NjlWMTQuODc2OEMyNy4xNzc3IDE0LjU4NjYgMjYuMTkyIDE0LjQzODggMjUuMzIgMTQuNDM5N0MyNC4wMzEgMTQuNDM5NyAyMi44MTU3IDE0Ljc1NzEgMjEuNzQ4OCAxNS4zMTg0TDIwLjc5NTIgMTMuMTU5N0wxNi4wMjU5IDIwLjAyNzVMOC40NDU3NiAxNi40NDFMMy41NiAyMy4zOTk3SDE3Ljc0NjJDMTcuOTg2NyAyNC44MjkgMTguNjI4MiAyNi4xNjA2IDE5LjU5NTggMjcuMjM5N0gxVjMuNTU5NjlIMjhaTTI1Ljk2IDI0LjAzOTdIMjQuNjhWMjUuMzE5N0gyNS45NlYyNC4wMzk3Wk0yNS45NiAxOC45MTk3SDI0LjY4VjIzLjM5OTdIMjUuOTZWMTguOTE5N1pNNi4xMiAxMC41OTk3QzYuMTIgMTEuOTk4MSA3LjE5OTA0IDEzLjEwODUgOC42MDc2OCAxMy4xNTg0QzEwLjAyMDggMTMuMjA3NyAxMS4yNCAxMi4wNDggMTEuMjQgMTAuNTk5N0MxMS4yNCA5LjI0NjA5IDEwLjA2NDMgOC4wODU3NyA4Ljc1MjMyIDguMDQwOTdDNy4yOTU2OCA3Ljk5MTY5IDYuMTIgOS4xNTEzNyA2LjEyIDEwLjU5OTdaIiBmaWxsPSIjQkNDNEQwIj48L3BhdGg+Cjwvc3ZnPgo=')
+    no-repeat center / 50% 50%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
 }