chore(*): Release-build/1.27.30

.gitignore

@@ -4,6 +4,7 @@ logs
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
 # Runtime data
 pids
 *.pid
@@ -58,35 +59,19 @@ typings/
 
 # next.js build output
 .next
-next/
-
-.history
 
-# special demo file for locally reappear issue
-docs/**/demo/issues.md
 
-*.DS_Store
 precss.css
 .sass-cache/
-scripts/server-remote
-__html/
-dist/
-es/
-lib/
-types/
 test/coverage/
 test/**/coverage/
-compiled_docs/
-demos/
 platform-docs/
 coverage/
 docs-lang/
 gemini-report/
 .idea/
+.vscode/
 *.iml
 *.log
 .DS_Store
-src/core-temp
 
-# tests snapshots diff
-components/**/__tests__/snapshots/__diff__/**

compiled_docs/affix/index.en-us.md

@@ -0,0 +1 @@
+{"meta":"<h2 id=\"Guide\">Guide <a class=\"header-anchor scroll-count-item\" href=\"#Guide\" data-scroll-id=\"Guide\">#</a></h2>\n<h3 id=\"When To Use\">When to Use <a class=\"header-anchor scroll-count-item\" href=\"#When To Use\" data-scroll-id=\"When To Use\">#</a></h3>\n<p>The Affix component allows an element to become affixed (locked) to an area on the page. This is offten used with navigation menus or social icon buttons, to make them &quot;stick&quot; at specific area while scrolling up and down the page.</p>\n","api":"<h2 id=\"API\">API <a class=\"header-anchor scroll-count-item\" href=\"#API\" data-scroll-id=\"API\">#</a></h2>\n<h3 id=\"Affix\">Affix <a class=\"header-anchor scroll-count-item\" href=\"#Affix\" data-scroll-id=\"Affix\">#</a></h3>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n<th>Required</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>container</td>\n<td>The container for listening scroll events</td>\n<td>() =&gt; Element | Window</td>\n<td>() =&gt; window</td>\n<td></td>\n</tr>\n<tr>\n<td>offsetTop</td>\n<td>Offset from top when event triggers</td>\n<td>number</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>offsetBottom</td>\n<td>Offset from bottom when event triggers</td>\n<td>number</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onAffix</td>\n<td>Callback when affix event triggers<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>affixed</em>: If element is affixed</td>\n<td>(affixed: boolean) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>useAbsolute</td>\n<td>Enable absolute position</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>className</td>\n<td>-</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>style</td>\n<td>-</td>\n<td>React.CSSProperties</td>\n<td>-</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n"}

compiled_docs/animate/index.en-us.md

@@ -0,0 +1 @@
+{"meta":"<h2 id=\"Guide\">Guide <a class=\"header-anchor scroll-count-item\" href=\"#Guide\" data-scroll-id=\"Guide\">#</a></h2>\n<h3 id=\"When To Use\">When To Use <a class=\"header-anchor scroll-count-item\" href=\"#When To Use\" data-scroll-id=\"When To Use\">#</a></h3>\n<p>Need to customize animation.</p>\n","api":"<h2 id=\"API\">API <a class=\"header-anchor scroll-count-item\" href=\"#API\" data-scroll-id=\"API\">#</a></h2>\n<h3 id=\"Animate\">Animate <a class=\"header-anchor scroll-count-item\" href=\"#Animate\" data-scroll-id=\"Animate\">#</a></h3>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n<th>Required</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>animation</td>\n<td>The animation className</td>\n<td>string | Partial&lt;Record&lt;&apos;appear&apos; | &apos;enter&apos; | &apos;leave&apos;, string&gt;&gt;</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>animationAppear</td>\n<td>Whether to execute animation on the first mount</td>\n<td>boolean</td>\n<td>true</td>\n<td></td>\n</tr>\n<tr>\n<td>component</td>\n<td>The tag of the wrapper</td>\n<td>React.ElementType</td>\n<td>&apos;div&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>singleMode</td>\n<td>Whether to only have a single child</td>\n<td>boolean</td>\n<td>true</td>\n<td></td>\n</tr>\n<tr>\n<td>beforeAppear</td>\n<td>Callback fired before the &quot;entering&quot; status of the first mount is applied</td>\n<td>(node: HTMLElement) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onAppear</td>\n<td>Callback fired after the &quot;entering&quot; status of the first mount is applied</td>\n<td>(node: HTMLElement) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>afterAppear</td>\n<td>Callback fired after the &quot;entered&quot; status of the first mount is applied</td>\n<td>(node: HTMLElement) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>beforeEnter</td>\n<td>Callback fired before the &quot;entering&quot; status is applied</td>\n<td>(node: HTMLElement) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onEnter</td>\n<td>Callback fired after the &quot;entering&quot; status is applied</td>\n<td>(node: HTMLElement) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>afterEnter</td>\n<td>Callback fired after the &quot;entered&quot; status is applied</td>\n<td>(node: HTMLElement) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>beforeLeave</td>\n<td>Callback fired before the &quot;exiting&quot; status is applied</td>\n<td>(node: HTMLElement) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onLeave</td>\n<td>Callback fired after the leave stage</td>\n<td>(node: HTMLElement) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>afterLeave</td>\n<td>Callback fired after the leave stage</td>\n<td>(node: HTMLElement) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"Animate Expand\">Animate.Expand <a class=\"header-anchor scroll-count-item\" href=\"#Animate Expand\" data-scroll-id=\"Animate Expand\">#</a></h3>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n<th>Required</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>animation</td>\n<td>The animation className</td>\n<td>string | Partial&lt;Record&lt;&apos;appear&apos; | &apos;enter&apos; | &apos;leave&apos;, string&gt;&gt;</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>beforeEnter</td>\n<td>Callback fired before the &quot;entering&quot; status is applied</td>\n<td>(node: HTMLElement) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onEnter</td>\n<td>Callback fired after the &quot;entering&quot; status is applied</td>\n<td>(node: HTMLElement) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>afterEnter</td>\n<td>Callback fired after the &quot;entered&quot; status is applied</td>\n<td>(node: HTMLElement) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>beforeLeave</td>\n<td>Callback fired before the &quot;exiting&quot; status is applied</td>\n<td>(node: HTMLElement) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onLeave</td>\n<td>Callback fired after the &quot;exiting&quot; status is applied</td>\n<td>(node: HTMLElement) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>afterLeave</td>\n<td>Callback fired after the &quot;exited&quot; status is applied</td>\n<td>(node: HTMLElement) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"Animate Overlay Animate\">Animate.OverlayAnimate <a class=\"header-anchor scroll-count-item\" href=\"#Animate Overlay Animate\" data-scroll-id=\"Animate Overlay Animate\">#</a></h3>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n<th>Required</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>animation</td>\n<td>The animation className</td>\n<td>string | false | Record&lt;&apos;in&apos; | &apos;out&apos;, string&gt;</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>visible</td>\n<td>Show the component; triggers the enter or exit states</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>children</td>\n<td>The element to be wrapped</td>\n<td>ReactElement</td>\n<td>-</td>\n<td>yes</td>\n</tr>\n<tr>\n<td>timeout</td>\n<td>The duration of the transition.</td>\n<td>| number<br> | { appear?: number | undefined; enter?: number | undefined; exit?: number | undefined }</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>style</td>\n<td>The style of the child element</td>\n<td>React.CSSProperties</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>mountOnEnter</td>\n<td>&quot;lazy mount&quot; the component on the first <code>in={true}</code></td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>unmountOnExit</td>\n<td>&quot;lazy unmount&quot; the component on the first <code>in={false}</code></td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>onEnter</td>\n<td>Callback fired before the &quot;entering&quot; status is applied.<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>isAppearing</em>: IsAppearing</td>\n<td>(node: HTMLElement, isAppearing: boolean) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onEntering</td>\n<td>Callback fired after the &quot;entering&quot; status is applied.<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>isAppearing</em>: IsAppearing</td>\n<td>(node: HTMLElement, isAppearing: boolean) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onEntered</td>\n<td>Callback fired after the &quot;entered&quot; status is applied.<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>isAppearing</em>: IsAppearing</td>\n<td>(node: HTMLElement, isAppearing: boolean) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onExit</td>\n<td>Callback fired before the &quot;exiting&quot; status is applied.</td>\n<td>(node: HTMLElement) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onExiting</td>\n<td>Callback fired after the &quot;exiting&quot; status is applied.</td>\n<td>(node: HTMLElement) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onExited</td>\n<td>Callback fired after the &quot;exited&quot; status is applied.</td>\n<td>(node: HTMLElement) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>appear</td>\n<td>Transition on the first mount.</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>enter</td>\n<td>Enable or disable enter transitions.</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>exit</td>\n<td>Enable or disable exit transitions.</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h2 id=\"Animation List\">Animation List <a class=\"header-anchor scroll-count-item\" href=\"#Animation List\" data-scroll-id=\"Animation List\">#</a></h2>\n<table>\n<thead>\n<tr>\n<th>In</th>\n<th>Out</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>fadeIn</td>\n<td>fadeOut</td>\n</tr>\n<tr>\n<td>fadeInDown</td>\n<td>fadeOutDown</td>\n</tr>\n<tr>\n<td>fadeInLeft</td>\n<td>fadeOutLeft</td>\n</tr>\n<tr>\n<td>fadeInRight</td>\n<td>fadeOutRight</td>\n</tr>\n<tr>\n<td>fadeInUp</td>\n<td>fadeOutUp</td>\n</tr>\n<tr>\n<td>slideInDown</td>\n<td>slideOutUp</td>\n</tr>\n<tr>\n<td>slideInLeft</td>\n<td>slideOutLeft</td>\n</tr>\n<tr>\n<td>slideInRight</td>\n<td>slideOutRight</td>\n</tr>\n<tr>\n<td>slideInUp</td>\n<td>slideOutDown</td>\n</tr>\n<tr>\n<td>zoomIn</td>\n<td>zoomOut</td>\n</tr>\n<tr>\n<td>expandInDown</td>\n<td>expandOutUp</td>\n</tr>\n<tr>\n<td>expandInUp</td>\n<td>expandOutDown</td>\n</tr>\n<tr>\n<td>pulse</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n"}

compiled_docs/avatar/index.en-us.md

@@ -0,0 +1 @@
+{"meta":"<h2 id=\"Develop Guide\">Develop Guide <a class=\"header-anchor scroll-count-item\" href=\"#Develop Guide\" data-scroll-id=\"Develop Guide\">#</a></h2>\n<p>1.19.0+ supported</p>\n<h3 id=\"When To Use\">When to Use <a class=\"header-anchor scroll-count-item\" href=\"#When To Use\" data-scroll-id=\"When To Use\">#</a></h3>\n<p>Avatars can be used to represent people or objects. It supports images, Icons, or letters.</p>\n","api":"<h2 id=\"API\">API <a class=\"header-anchor scroll-count-item\" href=\"#API\" data-scroll-id=\"API\">#</a></h2>\n<h3 id=\"Avatar\">Avatar <a class=\"header-anchor scroll-count-item\" href=\"#Avatar\" data-scroll-id=\"Avatar\">#</a></h3>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n<th>Required</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>children</td>\n<td>Children node list</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>size</td>\n<td>The size of the avatar</td>\n<td>&apos;small&apos; | &apos;medium&apos; | &apos;large&apos; | number</td>\n<td>&apos;medium&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>shape</td>\n<td>The shape of the avatar</td>\n<td>&apos;circle&apos; | &apos;square&apos;</td>\n<td>&apos;circle&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>icon</td>\n<td>The icon type of the icon avatar, can be set to the <code>type</code> or <code>ReactElement</code> of Icon</td>\n<td>React.ReactElement | string</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>src</td>\n<td>The resource address of the image avatar</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onError</td>\n<td>The event of the image loading failure, returning false will close the component&apos;s default fallback behavior</td>\n<td>() =&gt; boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>imgProps</td>\n<td>The other properties of the image</td>\n<td>Omit&lt;<br> React.ImgHTMLAttributes&lt;HTMLImageElement&gt;,<br> &apos;src&apos; | &apos;srcSet&apos; | &apos;onError&apos; | &apos;alt&apos;<br> &gt;</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>alt</td>\n<td>The alt replacement text when the image cannot be displayed</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>srcSet</td>\n<td>The responsive resource address of the image avatar</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n"}

compiled_docs/badge/index.en-us.md

@@ -0,0 +1 @@
+{"meta":"<h2 id=\"Develop Guide\">Develop Guide <a class=\"header-anchor scroll-count-item\" href=\"#Develop Guide\" data-scroll-id=\"Develop Guide\">#</a></h2>\n<h3 id=\"When To Use\">When to Use <a class=\"header-anchor scroll-count-item\" href=\"#When To Use\" data-scroll-id=\"When To Use\">#</a></h3>\n<p>When we receive a new message, or our app/plugin/module should be update or upgrade.</p>\n<h3 id=\"Accessibility\">Accessibility <a class=\"header-anchor scroll-count-item\" href=\"#Accessibility\" data-scroll-id=\"Accessibility\">#</a></h3>\n<p>You can add class as below, so that messages will not appear on pages, but can be read by screen reader.\n<code>&lt;span className=&quot;next-sr-only&quot;&gt;unread messages&lt;/span&gt;</code></p>\n","api":"<h2 id=\"API\">API <a class=\"header-anchor scroll-count-item\" href=\"#API\" data-scroll-id=\"API\">#</a></h2>\n<h3 id=\"Badge\">Badge <a class=\"header-anchor scroll-count-item\" href=\"#Badge\" data-scroll-id=\"Badge\">#</a></h3>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n<th>Required</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>children</td>\n<td>Content of Badge based on</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>count</td>\n<td>Number to display, display overflowCount+ when count is greater than overflowCount, display none when count equal to 0</td>\n<td>number | string</td>\n<td>0</td>\n<td></td>\n</tr>\n<tr>\n<td>content</td>\n<td>Customized node content</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>overflowCount</td>\n<td>Max number to display</td>\n<td>number | string</td>\n<td>99</td>\n<td></td>\n</tr>\n<tr>\n<td>dot</td>\n<td>Display a red dot, not a number</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>showZero</td>\n<td>Whether to show count when count is 0</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n"}

compiled_docs/box/index.en-us.md

@@ -0,0 +1 @@
+{"meta":"<h2 id=\"Develop Guide\">Develop Guide <a class=\"header-anchor scroll-count-item\" href=\"#Develop Guide\" data-scroll-id=\"Develop Guide\">#</a></h2>\n<h3 id=\"When To Use\">When to Use <a class=\"header-anchor scroll-count-item\" href=\"#When To Use\" data-scroll-id=\"When To Use\">#</a></h3>\n<p>Flex box, added in 1.19.0+, support IE10+\n<code>display: flex</code> of IE docs: https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/dev-guides/hh673531(v=vs.85)</p>\n","api":"<h2 id=\"API\">API <a class=\"header-anchor scroll-count-item\" href=\"#API\" data-scroll-id=\"API\">#</a></h2>\n<h3 id=\"Box\">Box <a class=\"header-anchor scroll-count-item\" href=\"#Box\" data-scroll-id=\"Box\">#</a></h3>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n<th>Required</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>flex</td>\n<td>Same as css attribute <code>flex</code>, support array mode setting</td>\n<td>| CSS.Property.Flex<br> | [CSS.Property.FlexGrow, CSS.Property.FlexShrink, CSS.Property.FlexBasis]</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>direction</td>\n<td>Layout direction, same as css attribute `flex</td>\n<td>CSS.Property.FlexDirection</td>\n<td>&apos;column&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>wrap</td>\n<td>Wrap or not</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>spacing</td>\n<td>Element spacing</td>\n<td>Spacing</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>margin</td>\n<td>Container outer spacing</td>\n<td>Spacing</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>padding</td>\n<td>Container inner spacing</td>\n<td>Spacing</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>justify</td>\n<td>The alignment of items on the main axis, same as css attribute `justify</td>\n<td>CSS.Property.JustifyContent</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>align</td>\n<td>The alignment of items on the cross axis, same as css attribute `align</td>\n<td>CSS.Property.AlignItems</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>component</td>\n<td>Custom JSX tag name</td>\n<td>keyof React.JSX.IntrinsicElements</td>\n<td>&apos;div&apos;</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"Spacing\">Spacing <a class=\"header-anchor scroll-count-item\" href=\"#Spacing\" data-scroll-id=\"Spacing\">#</a></h3>\n<pre class=\"language-typescript\"><code class=\"language-typescript\"><span class=\"token keyword\">export</span> <span class=\"token keyword\">type</span> <span class=\"token class-name\">Spacing</span> <span class=\"token operator\">=</span>\n    <span class=\"token operator\">|</span> <span class=\"token builtin\">number</span>\n    <span class=\"token operator\">|</span> <span class=\"token punctuation\">[</span>topAndBottom<span class=\"token operator\">:</span> <span class=\"token builtin\">number</span><span class=\"token punctuation\">,</span> rightAndLeft<span class=\"token operator\">:</span> <span class=\"token builtin\">number</span><span class=\"token punctuation\">]</span>\n    <span class=\"token operator\">|</span> <span class=\"token punctuation\">[</span>top<span class=\"token operator\">:</span> <span class=\"token builtin\">number</span><span class=\"token punctuation\">,</span> rightAndLeft<span class=\"token operator\">:</span> <span class=\"token builtin\">number</span><span class=\"token punctuation\">,</span> bottom<span class=\"token operator\">:</span> <span class=\"token builtin\">number</span><span class=\"token punctuation\">]</span>\n    <span class=\"token operator\">|</span> <span class=\"token punctuation\">[</span>top<span class=\"token operator\">:</span> <span class=\"token builtin\">number</span><span class=\"token punctuation\">,</span> right<span class=\"token operator\">:</span> <span class=\"token builtin\">number</span><span class=\"token punctuation\">,</span> bottom<span class=\"token operator\">:</span> <span class=\"token builtin\">number</span><span class=\"token punctuation\">,</span> left<span class=\"token operator\">:</span> <span class=\"token builtin\">number</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n</code></pre>\n"}