@arco-design/mobile-react 2.28.1 → 2.29.0

package/esm/skeleton/index.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { SkeletonProps, SkeletonRef } from './type';
+declare const _default: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<SkeletonRef>> & {
+    Node: React.ForwardRefExoticComponent<import("./type").SkeletonNodeProps & React.RefAttributes<SkeletonRef>>;
+    Title: React.ForwardRefExoticComponent<import("./type").SkeletonTitleProps & React.RefAttributes<SkeletonRef>>;
+    Paragraph: React.ForwardRefExoticComponent<import("./type").SkeletonParagraphProps & React.RefAttributes<SkeletonRef>>;
+    Avatar: React.ForwardRefExoticComponent<import("./type").SkeletonAvatarProps & React.RefAttributes<SkeletonRef>>;
+    Grid: React.ForwardRefExoticComponent<import("./type").SkeletonGridProps & React.RefAttributes<SkeletonRef>>;
+};
+/**
+ * 在内容加载过程中展示一组占位图形。
+ * @en Display a set of placeholder graphics during content loading
+ * @type 信息展示
+ * @type_en Data Display
+ * @name 骨架屏
+ * @name_en Skeleton
+ */
+export default _default;

package/esm/skeleton/index.js

@@ -0,0 +1,82 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useRef, forwardRef, useImperativeHandle, useContext } from 'react';
+import { cls, componentWrapper } from '@arco-design/mobile-utils';
+import { GlobalContext } from '../context-provider';
+import { SkeletonAvatar as Avatar, SkeletonGrid as Grid, SkeletonNode as Node, SkeletonParagraph as Paragraph, SkeletonTitle as Title } from './elements';
+import { SkeletonContext } from './skeleton-context';
+
+function getComponentProps(prop) {
+  if (prop && typeof prop === 'object') {
+    return prop;
+  }
+
+  return {};
+}
+
+var Skeleton = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _cls;
+
+  var _props$className = props.className,
+      className = _props$className === void 0 ? '' : _props$className,
+      style = props.style,
+      children = props.children,
+      _props$title = props.title,
+      title = _props$title === void 0 ? true : _props$title,
+      _props$paragraph = props.paragraph,
+      paragraph = _props$paragraph === void 0 ? true : _props$paragraph,
+      _props$avatar = props.avatar,
+      avatar = _props$avatar === void 0 ? false : _props$avatar,
+      grid = props.grid,
+      _props$showAnimation = props.showAnimation,
+      showAnimation = _props$showAnimation === void 0 ? true : _props$showAnimation,
+      _props$animation = props.animation,
+      animation = _props$animation === void 0 ? 'gradient' : _props$animation,
+      animationGradientColor = props.animationGradientColor,
+      backgroundColor = props.backgroundColor;
+  var domRef = useRef(null);
+
+  var _useContext = useContext(GlobalContext),
+      prefixCls = _useContext.prefixCls;
+
+  useImperativeHandle(ref, function () {
+    return {
+      dom: domRef.current
+    };
+  });
+  var isGrid = !!grid;
+  var hasTitle = !!title;
+  var hasParagraph = !!paragraph;
+  var hasAvatar = !!avatar;
+  var content = isGrid ? /*#__PURE__*/React.createElement(Grid, getComponentProps(grid)) : /*#__PURE__*/React.createElement(React.Fragment, null, hasAvatar && /*#__PURE__*/React.createElement(Avatar, getComponentProps(avatar)), (hasTitle || hasParagraph) && /*#__PURE__*/React.createElement("div", {
+    className: prefixCls + "-skeleton-content"
+  }, hasTitle && /*#__PURE__*/React.createElement(Title, getComponentProps(title)), hasParagraph && /*#__PURE__*/React.createElement(Paragraph, getComponentProps(paragraph))));
+  return /*#__PURE__*/React.createElement("div", {
+    className: cls(prefixCls + "-skeleton", (_cls = {}, _cls[prefixCls + "-skeleton-with-avatar"] = hasAvatar, _cls), className),
+    style: _extends({
+      color: animationGradientColor
+    }, style),
+    ref: domRef
+  }, /*#__PURE__*/React.createElement(SkeletonContext.Provider, {
+    value: {
+      showAnimation: showAnimation,
+      animation: animation,
+      backgroundColor: backgroundColor
+    }
+  }, content, children));
+});
+/**
+ * 在内容加载过程中展示一组占位图形。
+ * @en Display a set of placeholder graphics during content loading
+ * @type 信息展示
+ * @type_en Data Display
+ * @name 骨架屏
+ * @name_en Skeleton
+ */
+
+export default componentWrapper(Skeleton, {
+  Node: Node,
+  Title: Title,
+  Paragraph: Paragraph,
+  Avatar: Avatar,
+  Grid: Grid
+});

package/esm/skeleton/skeleton-context.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { SkeletonContextParams } from './type';
+export declare const SkeletonContext: React.Context<SkeletonContextParams>;

package/esm/skeleton/skeleton-context.js

@@ -0,0 +1,5 @@
+import React from 'react';
+export var SkeletonContext = /*#__PURE__*/React.createContext({
+  showAnimation: true,
+  animation: 'gradient'
+});

package/esm/skeleton/style/css/index.css

@@ -0,0 +1,180 @@
+.arco-skeleton {
+  position: relative;
+  color:  rgba(255, 255, 255, 0.6) ;
+}
+.arco-skeleton-title {
+  height:  0.32rem ;
+}
+.arco-skeleton-paragraph-line {
+  width: 100%;
+  height:  0.32rem ;
+}
+.arco-skeleton-paragraph-line + .arco-skeleton-paragraph-line {
+  margin-top:  0.24rem ;
+}
+.arco-skeleton-avatar.arco-skeleton-item {
+  width:  0.64rem ;
+  height:  0.64rem ;
+  border-radius: 100%;
+  -webkit-transform: translateZ(0);
+          transform: translateZ(0);
+}
+.arco-skeleton-content {
+  width: 100%;
+}
+.arco-skeleton-content .arco-skeleton-title + .arco-skeleton-paragraph {
+  margin-top:  0.4rem ;
+}
+.arco-skeleton-with-avatar {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-align: start;
+  -webkit-align-items: flex-start;
+          align-items: flex-start;
+}
+.arco-skeleton-with-avatar .arco-skeleton-avatar {
+  -webkit-box-flex: 0;
+  -webkit-flex: none;
+          flex: none;
+}
+.arco-skeleton-with-avatar .arco-skeleton-content .arco-skeleton-title {
+  margin-top:  0.16rem ;
+}
+.arco-skeleton-with-avatar .arco-skeleton-avatar + .arco-skeleton-content {
+  margin-left:  0.16rem ;
+}
+[dir="rtl"] .arco-skeleton-with-avatar .arco-skeleton-avatar + .arco-skeleton-content {
+  margin-left: initial;
+  margin-right:  0.16rem ;
+}
+.arco-skeleton-grid {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+          justify-content: space-between;
+  width: 100%;
+}
+.arco-skeleton-grid-item {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+}
+.arco-skeleton-grid-icon {
+  width:  0.64rem ;
+  height:  0.64rem ;
+}
+.arco-skeleton-grid-text {
+  margin-top:  0.16rem ;
+  width:  1.28rem ;
+  height:  0.32rem ;
+}
+.arco-skeleton-node {
+  display: inline-block;
+}
+.arco-skeleton-item {
+  position: relative;
+  overflow: hidden;
+  border-radius:  0 ;
+  background-color:  #F2F3F5 ;
+}
+.arco-skeleton-animation-item {
+  position: absolute;
+  width: 100vw;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 35%, currentColor 50%, rgba(255, 255, 255, 0) 65%);
+  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 35%, currentColor 50%, rgba(255, 255, 255, 0) 65%);
+  -webkit-transform-origin: top left;
+          transform-origin: top left;
+  -webkit-animation-name: skeleton-gradient;
+          animation-name: skeleton-gradient;
+  -webkit-animation-iteration-count: infinite;
+          animation-iteration-count: infinite;
+  -webkit-animation-timing-function:  cubic-bezier(0.42, 0, 0.58, 1) ;
+          animation-timing-function:  cubic-bezier(0.42, 0, 0.58, 1) ;
+  -webkit-animation-duration:  1.5s ;
+          animation-duration:  1.5s ;
+}
+[dir="rtl"] .arco-skeleton-animation-item {
+  -webkit-animation-name: skeleton-gradient-reverse;
+          animation-name: skeleton-gradient-reverse;
+}
+.arco-skeleton-animation-breath {
+  -webkit-animation: skeleton-breath linear infinite;
+          animation: skeleton-breath linear infinite;
+  -webkit-animation-duration:  1.5s ;
+          animation-duration:  1.5s ;
+}
+@-webkit-keyframes skeleton-gradient {
+  0% {
+    -webkit-transform: translateX(-65%) skewX(-45deg);
+            transform: translateX(-65%) skewX(-45deg);
+  }
+  100% {
+    -webkit-transform: translateX(135%) skewX(-45deg);
+            transform: translateX(135%) skewX(-45deg);
+  }
+}
+@keyframes skeleton-gradient {
+  0% {
+    -webkit-transform: translateX(-65%) skewX(-45deg);
+            transform: translateX(-65%) skewX(-45deg);
+  }
+  100% {
+    -webkit-transform: translateX(135%) skewX(-45deg);
+            transform: translateX(135%) skewX(-45deg);
+  }
+}
+@-webkit-keyframes skeleton-gradient-reverse {
+  0% {
+    -webkit-transform: translateX(65%) skewX(45deg);
+            transform: translateX(65%) skewX(45deg);
+  }
+  100% {
+    -webkit-transform: translateX(-135%) skewX(45deg);
+            transform: translateX(-135%) skewX(45deg);
+  }
+}
+@keyframes skeleton-gradient-reverse {
+  0% {
+    -webkit-transform: translateX(65%) skewX(45deg);
+            transform: translateX(65%) skewX(45deg);
+  }
+  100% {
+    -webkit-transform: translateX(-135%) skewX(45deg);
+            transform: translateX(-135%) skewX(45deg);
+  }
+}
+@-webkit-keyframes skeleton-breath {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity:  0.4 ;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes skeleton-breath {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity:  0.4 ;
+  }
+  100% {
+    opacity: 1;
+  }
+}

package/esm/skeleton/style/css/index.d.ts

@@ -0,0 +1,3 @@
+import '../../../../style/css/public.css';
+import '../../../avatar/style/css';
+import './index.css';

package/esm/skeleton/style/css/index.js

@@ -0,0 +1,3 @@
+import '../../../../style/css/public.css';
+import '../../../avatar/style/css';
+import './index.css';

package/esm/skeleton/style/index.d.ts

@@ -0,0 +1,3 @@
+import '../../../style/public.less';
+import '../../avatar/style';
+import './index.less';

package/esm/skeleton/style/index.js

@@ -0,0 +1,3 @@
+import '../../../style/public.less';
+import '../../avatar/style';
+import './index.less';

package/esm/skeleton/style/index.less

@@ -0,0 +1,147 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-skeleton {
+    position: relative;
+    .use-var(color, skeleton-gradient-animation-color);
+}
+
+.@{prefix}-skeleton-title {
+    .use-var(height, skeleton-title-height);
+}
+
+.@{prefix}-skeleton-paragraph {
+    &-line {
+        width: 100%;
+        .use-var(height, skeleton-paragraph-height);
+    }
+
+    &-line + &-line {
+        .use-var(margin-top, skeleton-paragraph-margin-top);
+    }
+}
+
+.@{prefix}-skeleton-avatar.@{prefix}-skeleton-item {
+    .use-var(width, skeleton-avatar-size);
+    .use-var(height, skeleton-avatar-size);
+    border-radius: 100%;
+    transform: translateZ(0);
+}
+
+.@{prefix}-skeleton-content {
+    width: 100%;
+
+    .@{prefix}-skeleton-title + .@{prefix}-skeleton-paragraph {
+        .use-var(margin-top, skeleton-large-gutter);
+    }
+}
+
+.@{prefix}-skeleton-with-avatar {
+    display: flex;
+    align-items: flex-start;
+
+    .@{prefix}-skeleton-avatar {
+        flex: none;
+    }
+
+    .@{prefix}-skeleton-content {
+        .@{prefix}-skeleton-title {
+            .use-var(margin-top, skeleton-medium-gutter);
+        }
+    }
+
+    .@{prefix}-skeleton-avatar + .@{prefix}-skeleton-content {
+        .use-var-with-rtl(margin-left, skeleton-medium-gutter);
+    }
+}
+
+.@{prefix}-skeleton-grid {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+
+    &-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+    &-icon {
+        .use-var(width, skeleton-grid-icon-size);
+        .use-var(height, skeleton-grid-icon-size);
+    }
+    &-text {
+        .use-var(margin-top, skeleton-medium-gutter);
+        .use-var(width, skeleton-grid-text-width);
+        .use-var(height, skeleton-grid-text-height);
+    }
+}
+
+.@{prefix}-skeleton-node {
+    display: inline-block;
+}
+
+.@{prefix}-skeleton-item {
+    position: relative;
+    overflow: hidden;
+    .use-var(border-radius, skeleton-border-radius);
+    .use-var(background-color, skeleton-background-color);
+}
+
+.@{prefix}-skeleton-animation-item {
+    position: absolute;
+    width: 100vw;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background-image: linear-gradient(
+        90deg,
+        rgba(255, 255, 255, 0) 35%,
+        currentColor 50%,
+        rgba(255, 255, 255, 0) 65%
+    );
+    transform-origin: top left;
+    animation-name: skeleton-gradient;
+    animation-iteration-count: infinite;
+    .use-var(animation-timing-function, skeleton-gradient-animation-timing-function);
+    .use-var(animation-duration, skeleton-gradient-animation-duration);
+    [dir="rtl"] & {
+        animation-name: skeleton-gradient-reverse;
+    }
+}
+.@{prefix}-skeleton-animation-breath {
+    animation: skeleton-breath linear infinite;
+    .use-var(animation-duration, skeleton-breath-animation-duration);
+}
+
+@keyframes skeleton-gradient {
+    0% {
+        transform: translateX(-65%) skewX(-45deg);
+    }
+
+    100% {
+        transform: translateX(135%) skewX(-45deg);
+    }
+}
+
+@keyframes skeleton-gradient-reverse {
+    0% {
+        transform: translateX(65%) skewX(45deg);
+    }
+
+    100% {
+        transform: translateX(-135%) skewX(45deg);
+    }
+}
+
+@keyframes skeleton-breath {
+    0% {
+        opacity: 1;
+    }
+
+    50% {
+        .use-var(opacity, skeleton-breath-opacity);
+    }
+
+    100% {
+        opacity: 1;
+    }
+}

package/esm/skeleton/type.d.ts

@@ -0,0 +1,104 @@
+/// <reference types="react" />
+import { BaseProps, SimpleBaseProps } from '../_helpers';
+export interface SkeletonProps extends SimpleBaseProps {
+    /**
+     * 是否显示标题占位图
+     * @en Show title placeholder
+     * @default true
+     */
+    title?: boolean | SkeletonTitleProps;
+    /**
+     * 是否显示段落占位图
+     * @en Show paragraph placeholder
+     * @default true
+     */
+    paragraph?: boolean | SkeletonParagraphProps;
+    /**
+     * 是否显示头像占位图
+     * @en Show Avatar placeholder
+     * @default false
+     */
+    avatar?: boolean | SkeletonAvatarProps;
+    /**
+     * 是否显示金刚位占位图（如该参数非空时，默认展示四列金刚位，且不展示标题/段落/头像占位符）
+     * @en Show Grid placeholder. When it's value is present, the paragraph, avatar or title placeholder will not be displayed, and four columns will be displayed by default
+     * @default false
+     */
+    grid?: boolean | SkeletonGridProps;
+    /**
+     * 是否展示动画效果
+     * @en Show loading effect
+     * @default true
+     */
+    showAnimation?: boolean;
+    /**
+     * 加载动画效果，可选“扫光”、“呼吸”两种效果
+     * @en Animation of loading effect, 'gradient' and 'breath' effects are optional
+     * @default "gradient"
+     */
+    animation?: 'gradient' | 'breath';
+    /**
+     * 扫光动效高光颜色
+     * @en Highlight color of gradient animation
+     * @default "rgba(0, 0, 0, 0.04)"
+     */
+    animationGradientColor?: string;
+    /**
+     * 占位块背景色
+     * @en Background color of skeleton item
+     * @default "#F7F8FA"
+     */
+    backgroundColor?: string;
+    /**
+     * 子元素
+     * @en Children element
+     * @default null
+     */
+    children?: React.ReactNode;
+}
+export interface SkeletonTitleProps extends SimpleBaseProps {
+    /**
+     * 标题占位图宽度
+     * @en The width of title
+     * @default "40%"
+     */
+    width?: number | string;
+}
+export interface SkeletonParagraphProps extends SimpleBaseProps {
+    /**
+     * 段落占位图的行数
+     * @en Number of lines for paragraph
+     * @default 3
+     */
+    rows?: number;
+    /**
+     * 段落占位图宽度，若为数组格式对应每行宽度，否则表示最后一行的宽度
+     * @en The width of paragraph. If width is an Array, it corresponds to the width of each line, otherwise it indicates the width of the last line
+     * @default "60%"
+     */
+    width?: number | string | Array<number | string>;
+}
+export interface SkeletonAvatarProps extends SimpleBaseProps {
+}
+export interface SkeletonGridProps extends SimpleBaseProps {
+    /**
+     * 金刚位列数
+     * @en columns of grid
+     * @default 4
+     */
+    columns?: number;
+}
+export interface SkeletonNodeProps extends BaseProps {
+}
+export interface SkeletonRef {
+    /**
+     * 最外层 DOM 元素
+     * @en The outer DOM element of the component
+     */
+    dom: HTMLDivElement | null;
+}
+export interface SkeletonContextParams {
+    backgroundColor?: string;
+    showAnimation: boolean;
+    animation: SkeletonProps['animation'];
+}

package/esm/skeleton/type.js

@@ -0,0 +1 @@
+export {};

package/esm/style.d.ts

@@ -44,6 +44,7 @@ import './pull-refresh/style';
 import './radio/style';
 import './rate/style';
 import './search-bar/style';
+import './skeleton/style';
 import './show-monitor/style';
 import './slider/style';
 import './stepper/style';

package/esm/style.js

@@ -44,6 +44,7 @@ import './pull-refresh/style';
 import './radio/style';
 import './rate/style';
 import './search-bar/style';
+import './skeleton/style';
 import './show-monitor/style';
 import './slider/style';
 import './stepper/style';

package/esm/tabs/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useRef, forwardRef, useImperativeHandle, useState, useEffect, useCallback, useContext } from 'react';
-import { cls, nextTick } from '@arco-design/mobile-utils';
+import { cls, nextTick, getOffset } from '@arco-design/mobile-utils';
 import { ContextLayout, GlobalContext } from '../context-provider';
 import TabCell from './tab-cell';
 import TabPane from './tab-pane';
@@ -401,9 +401,15 @@ var Tabs = /*#__PURE__*/forwardRef(function (props, ref) {
   }
 
   function updateLayout() {
+    var _domRef$current, _domRef$current2;
+
+    var _getOffset = getOffset(domRef.current),
+        width = _getOffset.width,
+        height = _getOffset.height;
+
     cellRef.current && cellRef.current.resetUnderlineStyle();
-    setWrapWidth(domRef.current ? domRef.current.offsetWidth : 0);
-    setWrapHeight(domRef.current ? domRef.current.offsetHeight : 0);
+    setWrapWidth(width || ((_domRef$current = domRef.current) == null ? void 0 : _domRef$current.offsetWidth) || 0);
+    setWrapHeight(height || ((_domRef$current2 = domRef.current) == null ? void 0 : _domRef$current2.offsetHeight) || 0);
     paneRef.current && paneRef.current.setCurrentHeight();
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@arco-design/mobile-react",
-    "version": "2.28.1",
+    "version": "2.29.0",
     "description": "",
     "main": "cjs/index.js",
     "module": "esm/index.js",
@@ -15,7 +15,7 @@
     "author": "taoyiyue@bytedance.com",
     "license": "ISC",
     "dependencies": {
-        "@arco-design/mobile-utils": "2.16.1",
+        "@arco-design/mobile-utils": "2.16.3",
         "@arco-design/transformable": "^1.0.0",
         "lodash.throttle": "^4.1.1",
         "resize-observer-polyfill": "^1.5.1"
@@ -49,5 +49,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "b6af06950fab57bee31ce7370a020191b2a93c11"
+    "gitHead": "8fbc59117b0d240f4faeee45daca1489803ab78a"
 }

package/tokens/app/arcodesign/default/css-variables.less

@@ -793,4 +793,20 @@
     --divider-right-width: ~`pxtorem(28)`;
     --divider-content-padding: ~`pxtorem(12)`;
     --divider-padding: ~`pxtorem(16)`;
+    --skeleton-border-radius: ~`pxtorem(0)`;
+    --skeleton-background-color: #F2F3F5;
+    --skeleton-gradient-animation-color: rgba(255, 255, 255, 0.6);
+    --skeleton-breath-opacity: 0.4;
+    --skeleton-gradient-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
+    --skeleton-gradient-animation-duration: 1.5s;
+    --skeleton-breath-animation-duration: 1.5s;
+    --skeleton-title-height: ~`pxtorem(16)`;
+    --skeleton-paragraph-height: ~`pxtorem(16)`;
+    --skeleton-paragraph-margin-top: ~`pxtorem(12)`;
+    --skeleton-avatar-size: ~`pxtorem(32)`;
+    --skeleton-grid-icon-size: ~`pxtorem(32)`;
+    --skeleton-grid-text-width: ~`pxtorem(64)`;
+    --skeleton-grid-text-height: ~`pxtorem(16)`;
+    --skeleton-medium-gutter: ~`pxtorem(8)`;
+    --skeleton-large-gutter: ~`pxtorem(20)`;
 }

package/tokens/app/arcodesign/default/index.d.ts

@@ -792,6 +792,22 @@ export interface ArcodesignToken extends Record<string, string> {
     'divider-right-width': string;
     'divider-content-padding': string;
     'divider-padding': string;
+    'skeleton-border-radius': string;
+    'skeleton-background-color': string;
+    'skeleton-gradient-animation-color': string;
+    'skeleton-breath-opacity': string;
+    'skeleton-gradient-animation-timing-function': string;
+    'skeleton-gradient-animation-duration': string;
+    'skeleton-breath-animation-duration': string;
+    'skeleton-title-height': string;
+    'skeleton-paragraph-height': string;
+    'skeleton-paragraph-margin-top': string;
+    'skeleton-avatar-size': string;
+    'skeleton-grid-icon-size': string;
+    'skeleton-grid-text-width': string;
+    'skeleton-grid-text-height': string;
+    'skeleton-medium-gutter': string;
+    'skeleton-large-gutter': string;
 }
 declare const tokens: ArcodesignToken;
 export default tokens;