@progress/kendo-themes-html 6.7.0-dev.0 → 6.7.0-dev.2

package/src/chat/tests/chat-rtl.tsx

@@ -1,12 +1,11 @@
 /* eslint-disable react/no-unescaped-entities */
-import { Avatar } from '../../avatar';
-import { Button } from '../../button';
-import { Textbox } from '../../textbox';
+import { Card, CardDeck, CardBody } from '../../card';
+import { Chat, ChatMessage, ChatMessageGroup, ChatQuickReply } from '../../chat';
 
 
 const styles = `
     /* needed for test */
-    .k-chat .k-bubble {
+    .k-chat .k-chat-bubble {
         white-space: normal;
     }
 `;
@@ -17,86 +16,48 @@ export default () =>(
         <div id="test-area" className="k-d-grid k-grid-cols-2">
 
             <section>
-                <div className="k-widget k-chat k-rtl">
-                    <div className="k-message-list k-avatars">
-                        <div className="k-message-list-content">
-                            <div className="k-timestamp">Bubbles</div>
-                            <div className="k-message-group">
-                                <p className="k-author">Bruv</p>
-                                <Avatar type="image">
-                                    <img src="/packages/html/assets/avatar.jpg" />
-                                </Avatar>
-                                <div className="k-message k-only">
-                                    <time className="k-message-time">Thu Feb 08 2018</time>
-                                    <div className="k-bubble">
-                                        How can I help you?
-                                    </div>
-                                    <span className="k-message-status">Seen</span>
-                                </div>
-                            </div>
-                            <div className="k-message-group k-alt">
-                                <p className="k-author">Bruv</p>
-                                <Avatar type="image">
-                                    <img src="/packages/html/assets/avatar.jpg" />
-                                </Avatar>
-                                <div className="k-message k-only">
-                                    <time className="k-message-time">Thu Feb 08 2018</time>
-                                    <div className="k-bubble">
-                                        How can I help you?
-                                    </div>
-                                    <span className="k-message-status">Seen</span>
-                                </div>
-                            </div>
-                            <div className="k-timestamp">Quick Replies</div>
-                            <div className="k-quick-replies">
-                                <span className="k-quick-reply">Quick</span>
-                                <span className="k-quick-reply">Reply</span>
-                                <span className="k-quick-reply">Another quick</span>
-                                <span className="k-quick-reply">Reply with different length</span>
-                            </div>
-                            <div className="k-timestamp">Card Deck</div>
-                            <div className="k-card-deck">
-                                <div className="k-card">
-                                    <div className="k-card-body">
-                                        <h5 className="k-card-title">Card Title</h5>
-                                        <h6 className="k-card-subtitle">Card Subtitle</h6>
-                                        <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-                                    </div>
-                                </div>
-                                <div className="k-card">
-                                    <div className="k-card-body">
-                                        <h5 className="k-card-title">Card Title</h5>
-                                        <h6 className="k-card-subtitle">Card Subtitle</h6>
-                                        <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-                                    </div>
-                                </div>
-                                <div className="k-card">
-                                    <div className="k-card-body">
-                                        <h5 className="k-card-title">Card Title</h5>
-                                        <h6 className="k-card-subtitle">Card Subtitle</h6>
-                                        <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-                                    </div>
-                                </div>
-                                <div className="k-card">
-                                    <div className="k-card-body">
-                                        <h5 className="k-card-title">Card Title</h5>
-                                        <h6 className="k-card-subtitle">Card Subtitle</h6>
-                                        <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <Textbox
-                        className="k-message-box"
-                        placeholder="Type a message..."
-                        suffix={
-                            <>
-                                <Button fillMode="flat" icon="pencil" className="k-chat-send"></Button>
-                            </>
-                        }
-                    />
-                </div>
+                <Chat dir="rtl" showToolbar={false} showMoreButton={false}>
+                    <div className="k-timestamp">Bubbles</div>
+                    <ChatMessageGroup>
+                        <ChatMessage className="k-only" />
+                    </ChatMessageGroup>
+                    <ChatMessageGroup alt>
+                        <ChatMessage className="k-only" />
+                    </ChatMessageGroup>
+                    <div className="k-timestamp">Quick Replies</div>
+                    <ChatQuickReply />
+                    <div className="k-timestamp">Card Deck</div>
+                    <CardDeck>
+                        <Card>
+                            <CardBody>
+                                <h5 className="k-card-title">Card Title</h5>
+                                <h6 className="k-card-subtitle">Card Subtitle</h6>
+                                <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                            </CardBody>
+                        </Card>
+                        <Card>
+                            <CardBody>
+                                <h5 className="k-card-title">Card Title</h5>
+                                <h6 className="k-card-subtitle">Card Subtitle</h6>
+                                <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                            </CardBody>
+                        </Card>
+                        <Card>
+                            <CardBody>
+                                <h5 className="k-card-title">Card Title</h5>
+                                <h6 className="k-card-subtitle">Card Subtitle</h6>
+                                <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                            </CardBody>
+                        </Card>
+                        <Card>
+                            <CardBody>
+                                <h5 className="k-card-title">Card Title</h5>
+                                <h6 className="k-card-subtitle">Card Subtitle</h6>
+                                <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                            </CardBody>
+                        </Card>
+                    </CardDeck>
+                </Chat>
             </section>
 
         </div>

package/src/chat/tests/chat-scrollable-deck.tsx

@@ -1,12 +1,12 @@
 /* eslint-disable react/no-unescaped-entities */
-import { Avatar } from '../../avatar';
 import { Button } from '../../button';
-import { Card, CardBody, CardDeck } from '../../card';
+import { Card, CardDeck, CardBody } from '../../card';
+import { Chat, ChatMessage, ChatMessageGroup } from '../../chat';
 
 
 const styles = `
     /* needed for test */
-    .k-chat .k-bubble {
+    .k-chat .k-chat-bubble {
         white-space: normal;
     }
 `;
@@ -17,60 +17,46 @@ export default () =>(
         <div id="test-area" className="k-d-grid k-grid-cols-2">
 
             <section>
-                <div className="k-widget k-chat">
-                    <div className="k-message-list k-avatars">
-                        <div className="k-message-list-content">
-                            <div className="k-timestamp">Card Deck Scrollable</div>
-                            <div className="k-message-group">
-                                <p className="k-author">Bruv</p>
-                                <Avatar type="image">
-                                    <img src="/packages/html/assets/avatar.jpg" />
-                                </Avatar>
-                                <div className="k-message k-only">
-                                    <time className="k-message-time">Thu Feb 08 2018</time>
-                                    <div className="k-bubble">
-                                        Message before card deck
-                                    </div>
-                                    <span className="k-message-status">Seen</span>
-                                </div>
-                            </div>
-                            <div className="k-card-deck-scrollwrap">
-                                <Button icon="chevron-left"></Button>
-                                <CardDeck>
-                                    <Card orientation="horizontal">
-                                        <CardBody>
-                                            <h5 className="k-card-title">Card Title</h5>
-                                            <h6 className="k-card-subtitle">Card Subtitle</h6>
-                                            <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-                                        </CardBody>
-                                    </Card>
-                                    <Card orientation="horizontal">
-                                        <CardBody>
-                                            <h5 className="k-card-title">Card Title</h5>
-                                            <h6 className="k-card-subtitle">Card Subtitle</h6>
-                                            <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-                                        </CardBody>
-                                    </Card>
-                                    <Card orientation="horizontal">
-                                        <CardBody>
-                                            <h5 className="k-card-title">Card Title</h5>
-                                            <h6 className="k-card-subtitle">Card Subtitle</h6>
-                                            <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-                                        </CardBody>
-                                    </Card>
-                                    <Card orientation="horizontal">
-                                        <CardBody>
-                                            <h5 className="k-card-title">Card Title</h5>
-                                            <h6 className="k-card-subtitle">Card Subtitle</h6>
-                                            <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-                                        </CardBody>
-                                    </Card>
-                                </CardDeck>
-                                <Button icon="chevron-right"></Button>
-                            </div>
-                        </div>
+                <Chat showToolbar={false} showMessageBox={false}>
+                    <div className="k-timestamp">Card Deck Scrollable</div>
+                    <ChatMessageGroup>
+                        <ChatMessage className="k-only" text="Message before card deck" />
+                    </ChatMessageGroup>
+                    <div className="k-card-deck-scrollwrap">
+                        <Button icon="chevron-left"></Button>
+                        <CardDeck>
+                            <Card orientation="horizontal">
+                                <CardBody>
+                                    <h5 className="k-card-title">Card Title</h5>
+                                    <h6 className="k-card-subtitle">Card Subtitle</h6>
+                                    <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                                </CardBody>
+                            </Card>
+                            <Card orientation="horizontal">
+                                <CardBody>
+                                    <h5 className="k-card-title">Card Title</h5>
+                                    <h6 className="k-card-subtitle">Card Subtitle</h6>
+                                    <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                                </CardBody>
+                            </Card>
+                            <Card orientation="horizontal">
+                                <CardBody>
+                                    <h5 className="k-card-title">Card Title</h5>
+                                    <h6 className="k-card-subtitle">Card Subtitle</h6>
+                                    <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                                </CardBody>
+                            </Card>
+                            <Card orientation="horizontal">
+                                <CardBody>
+                                    <h5 className="k-card-title">Card Title</h5>
+                                    <h6 className="k-card-subtitle">Card Subtitle</h6>
+                                    <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                                </CardBody>
+                            </Card>
+                        </CardDeck>
+                        <Button icon="chevron-right"></Button>
                     </div>
-                </div>
+                </Chat>
             </section>
 
         </div>

package/src/chat/tests/chat.tsx

@@ -1,13 +1,11 @@
 /* eslint-disable react/no-unescaped-entities */
-import { Avatar } from '../../avatar';
-import { Button } from '../../button';
-import { Textbox } from '../../textbox';
-import { Toolbar } from '../../toolbar';
+import { Card, CardDeck, CardBody } from '../../card';
+import { Chat, ChatMessage, ChatMessageGroup, ChatQuickReply } from '../../chat';
 
 
 const styles = `
     /* needed for test */
-    .k-chat .k-bubble {
+    .k-chat .k-chat-bubble {
         white-space: normal;
     }
 `;
@@ -18,155 +16,92 @@ export default () =>(
         <div id="test-area" className="k-d-grid k-grid-cols-2">
 
             <section>
-                <div className="k-widget k-chat">
-                    <div className="k-message-list k-avatars">
-                        <div className="k-message-list-content">
-                            <div className="k-timestamp">Bubbles</div>
-                            <div className="k-message-group">
-                                <p className="k-author">Bruv</p>
-                                <Avatar type="image">
-                                    <img src="/packages/html/assets/avatar.jpg" />
-                                </Avatar>
-                                <div className="k-message k-only">
-                                    <time className="k-message-time">Thu Feb 08 2018</time>
-                                    <div className="k-bubble">How can I help you?</div>
-                                    <span className="k-message-status">Seen</span>
-                                </div>
-                            </div>
-                            <div className="k-message-group k-alt">
-                                <p className="k-author">Bruv</p>
-                                <Avatar type="image">
-                                    <img src="/packages/html/assets/avatar.jpg" />
-                                </Avatar>
-                                <div className="k-message k-only">
-                                    <time className="k-message-time">Thu Feb 08 2018</time>
-                                    <div className="k-bubble">How can I help you?</div>
-                                    <span className="k-message-status">Seen</span>
-                                </div>
-                            </div>
-                            <div className="k-timestamp">Quick Replies</div>
-                            <div className="k-quick-replies">
-                                <span className="k-quick-reply">Quick</span>
-                                <span className="k-quick-reply">Reply</span>
-                                <span className="k-quick-reply">Another quick</span>
-                                <span className="k-quick-reply">Reply with different length</span>
-                            </div>
-                            <div className="k-timestamp">Card Deck</div>
-                            <div className="k-card-deck">
-                                <div className="k-card">
-                                    <div className="k-card-body">
-                                        <h5 className="k-card-title">Card Title</h5>
-                                        <h6 className="k-card-subtitle">Card Subtitle</h6>
-                                        <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-                                    </div>
-                                </div>
-                                <div className="k-card">
-                                    <div className="k-card-body">
-                                        <h5 className="k-card-title">Card Title</h5>
-                                        <h6 className="k-card-subtitle">Card Subtitle</h6>
-                                        <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-                                    </div>
-                                </div>
-                                <div className="k-card">
-                                    <div className="k-card-body">
-                                        <h5 className="k-card-title">Card Title</h5>
-                                        <h6 className="k-card-subtitle">Card Subtitle</h6>
-                                        <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-                                    </div>
-                                </div>
-                                <div className="k-card">
-                                    <div className="k-card-body">
-                                        <h5 className="k-card-title">Card Title</h5>
-                                        <h6 className="k-card-subtitle">Card Subtitle</h6>
-                                        <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <Textbox
-                        className="k-message-box"
-                        placeholder="Type a message..."
-                        suffix={
-                            <>
-                                <Button fillMode="flat" icon="more-horizontal"></Button>
-                                <Button fillMode="flat" icon="pencil" className="k-chat-send"></Button>
-                            </>
-                        }
-                    />
-                    <Toolbar className="k-chat-toolbar">
-                        <Button className="k-scroll-button k-scroll-button-left k-hidden" fillMode="flat" rounded={null} size={null} icon="chevron-left"></Button>
-                        <div className="k-toolbar-group k-button-list">
-                            <Button fillMode="flat" icon="arrow-rotate-cw"></Button>
-                            <Button fillMode="flat" icon="gear"></Button>
-                            <Button fillMode="flat" icon="wrench"></Button>
-                            <Button fillMode="flat" icon="plus"></Button>
-                            <Button fillMode="flat" icon="search"></Button>
-                            <Button fillMode="flat" icon="star"></Button>
-                            <Button fillMode="flat" icon="bell"></Button>
-                            <Button fillMode="flat" icon="question-circle"></Button>
-                            <Button fillMode="flat" icon="trash"></Button>
-                        </div>
-                        <Button className="k-scroll-button k-scroll-button-right" fillMode="flat" rounded={null} size={null} icon="chevron-right"></Button>
-                    </Toolbar>
-                </div>
+                <Chat>
+                    <div className="k-timestamp">Bubbles</div>
+                    <ChatMessageGroup>
+                        <ChatMessage className="k-only" />
+                    </ChatMessageGroup>
+                    <ChatMessageGroup alt>
+                        <ChatMessage className="k-only" />
+                    </ChatMessageGroup>
+                    <div className="k-timestamp">Quick Replies</div>
+                    <ChatQuickReply />
+                    <div className="k-timestamp">Card Deck</div>
+                    <CardDeck>
+                        <Card>
+                            <CardBody>
+                                <h5 className="k-card-title">Card Title</h5>
+                                <h6 className="k-card-subtitle">Card Subtitle</h6>
+                                <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                            </CardBody>
+                        </Card>
+                        <Card>
+                            <CardBody>
+                                <h5 className="k-card-title">Card Title</h5>
+                                <h6 className="k-card-subtitle">Card Subtitle</h6>
+                                <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                            </CardBody>
+                        </Card>
+                        <Card>
+                            <CardBody>
+                                <h5 className="k-card-title">Card Title</h5>
+                                <h6 className="k-card-subtitle">Card Subtitle</h6>
+                                <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                            </CardBody>
+                        </Card>
+                        <Card>
+                            <CardBody>
+                                <h5 className="k-card-title">Card Title</h5>
+                                <h6 className="k-card-subtitle">Card Subtitle</h6>
+                                <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                            </CardBody>
+                        </Card>
+                    </CardDeck>
+                </Chat>
             </section>
 
             <section>
-                <div className="k-widget k-chat">
-                    <div className="k-message-list k-avatars">
-                        <div className="k-message-list-content">
-                            <div className="k-timestamp">Bubbles without avatar</div>
-                            <div className="k-message-group k-no-avatar">
-                                <p className="k-author">Bruv</p>
-                                <div className="k-message k-only">
-                                    <time className="k-message-time">Thu Feb 08 2018</time>
-                                    <div className="k-bubble">How can I help you?</div>
-                                    <span className="k-message-status">Seen</span>
-                                </div>
-                            </div>
-                            <div className="k-message-group k-alt k-no-avatar">
-                                <p className="k-author">Bruv</p>
-                                <div className="k-message k-only">
-                                    <time className="k-message-time">Thu Feb 08 2018</time>
-                                    <div className="k-bubble">How can I help you?</div>
-                                    <span className="k-message-status">Seen</span>
-                                </div>
-                            </div>
-                            <div className="k-message-group k-no-avatar">
-                                <p className="k-author">Bruv</p>
-                                <div className="k-message k-only">
-                                    <time className="k-message-time">Thu Feb 08 2018</time>
-                                    <div className="k-bubble">
-                                        Very long message text that tests message overflowing behavior.
-                                        Very long message text that tests message overflowing behavior.
-                                    </div>
-                                    <span className="k-message-status">Seen</span>
-                                </div>
-                            </div>
-                            <div className="k-message-group k-alt k-no-avatar">
-                                <p className="k-author">Bruv</p>
-                                <div className="k-message k-only">
-                                    <time className="k-message-time">Thu Feb 08 2018</time>
-                                    <div className="k-bubble">
-                                        Unusually_long_word_that_tests_word_break_behavior__unusually_long_word_that_tests_word_break_behavior
-                                    </div>
-                                    <span className="k-message-status">Seen</span>
-                                </div>
-                            </div>
-                        </div>
+                <Chat showToolbar={false}>
+                    <div className="k-timestamp">Bubbles without avatar</div>
+                    <ChatMessageGroup avatar={null}>
+                        <ChatMessage className="k-only" />
+                    </ChatMessageGroup>
+                    <ChatMessageGroup alt avatar={null}>
+                        <ChatMessage className="k-only" />
+                    </ChatMessageGroup>
+                    <ChatMessageGroup avatar={null}>
+                        <ChatMessage className="k-only" text="Very long message text that tests message overflowing behavior. Very long message text that tests message overflowing behavior."/>
+                    </ChatMessageGroup>
+                    <ChatMessageGroup alt avatar={null}>
+                        <ChatMessage className="k-only" text="Unusually_long_word_that_tests_word_break_behavior__unusually_long_word_that_tests_word_break_behavior"/>
+                    </ChatMessageGroup>
+                </Chat>
+            </section>
+
+            <section>
+                <Chat showToolbar={false}>
+                    <div className="k-timestamp">Messages with attachment list</div>
+                    <ChatMessageGroup avatar={null}>
+                        <ChatMessage className="k-only" text="A message with attachment" />
+                    </ChatMessageGroup>
+                    <div className="k-card-list">
+                        <Card>
+                            <CardBody>
+                                <img width="200px" height="200px" src="/packages/html/assets/sofia.jpg" />
+                            </CardBody>
+                        </Card>
+                    </div>
+                    <ChatMessageGroup alt avatar={null}>
+                        <ChatMessage className="k-only" text="Another message with attachment" />
+                    </ChatMessageGroup>
+                    <div className="k-card-list">
+                        <Card>
+                            <CardBody>
+                                <img width="200px" height="200px" src="/packages/html/assets/sofia.jpg" />
+                            </CardBody>
+                        </Card>
                     </div>
-                    <Textbox
-                        className="k-message-box"
-                        placeholder="Type a message..."
-                        suffix={
-                            <>
-                                <Button fillMode="flat" icon="more-horizontal"></Button>
-                                <Button fillMode="flat" icon="pencil" className="k-chat-send"></Button>
-                            </>
-                        }
-                    />
-                </div>
+                </Chat>
             </section>
 
         </div>

package/src/grid/tests/grid-adaptive-pager.tsx

@@ -12,7 +12,7 @@ export default () =>(
                         <div className="k-view k-widget">
                             <div className="k-stretched-view k-content">
                                 <div className="k-grid k-grid-md k-grid-display-block k-grid-mobile k-editable">
-                                    <Pager className="k-grid-pager" mobile="small" />
+                                    <Pager className="k-grid-pager" adaptive info={false} pageSizes={false} />
                                 </div>
                             </div>
                         </div>
@@ -27,7 +27,7 @@ export default () =>(
                         <div className="k-view k-widget">
                             <div className="k-stretched-view k-content">
                                 <div className="k-grid k-grid-md k-grid-display-block k-grid-mobile k-editable">
-                                    <Pager className="k-grid-pager" mobile="small" dir="rtl" />
+                                    <Pager className="k-grid-pager" adaptive info={false} pageSizes={false} dir="rtl" />
                                 </div>
                             </div>
                         </div>

package/src/grid/tests/grid-angular.tsx

@@ -4,6 +4,7 @@ import { Checkbox } from '../../checkbox';
 import { Icon } from '../../icon';
 import { Pager } from '../../pager';
 import { Popup } from '../../popup';
+import { Skeleton } from '../../skeleton';
 
 
 export default () =>(
@@ -70,7 +71,7 @@ export default () =>(
                                             </tr>
                                             <tr className="k-table-row k-table-alt-row k-alt">
                                                 <td className="k-table-td">4</td>
-                                                <td className="k-table-td"><span className="k-placeholder-line"></span></td>
+                                                <td className="k-table-td"><Skeleton animation={false}/></td>
                                             </tr>
                                         </tbody>
                                     </table>

package/src/grid/tests/grid-rtl-angular.tsx

@@ -1,5 +1,6 @@
 import { Icon } from '../../icon';
 import { Pager } from '../../pager';
+import { Skeleton } from '../../skeleton';
 
 
 export default () =>(
@@ -66,11 +67,11 @@ export default () =>(
                                             </tr>
                                             <tr className="k-table-row k-table-alt-row k-alt">
                                                 <td className="k-table-td">4</td>
-                                                <td className="k-table-td"><span className="k-placeholder-line"></span></td>
+                                                <td className="k-table-td"><Skeleton animation={false} /></td>
                                             </tr>
                                             <tr className="k-table-row">
                                                 <td className="k-table-td">5</td>
-                                                <td className="k-table-td"><span className="k-placeholder-line"></span></td>
+                                                <td className="k-table-td"><Skeleton animation={false} /></td>
                                             </tr>
                                         </tbody>
                                     </table>

package/src/grid/tests/grid-rtl.tsx

@@ -1,5 +1,6 @@
 import { Icon } from '../../icon';
 import { Pager } from '../../pager';
+import { Skeleton } from '../../skeleton';
 
 
 export default () =>(
@@ -59,11 +60,11 @@ export default () =>(
                                 </tr>
                                 <tr className="k-table-row k-table-alt-row k-alt">
                                     <td className="k-table-td">4</td>
-                                    <td className="k-table-td"><span className="k-placeholder-line"></span></td>
+                                    <td className="k-table-td"><Skeleton animation={false} /></td>
                                 </tr>
                                 <tr className="k-table-row">
                                     <td className="k-table-td">5</td>
-                                    <td className="k-table-td"><span className="k-placeholder-line"></span></td>
+                                    <td className="k-table-td"><Skeleton animation={false} /></td>
                                 </tr>
                             </tbody>
                         </table>