@yoobic/yobi 7.7.41 → 7.7.42

package/dist/cjs/yoo-form-connect.cjs.entry.js

@@ -7,25 +7,48 @@ const rrule = require('./rrule-f8e7fec2.js');
 require('./input-bar.interface-b96b7107.js');
 const index$1 = require('./index-dccbc1a7.js');
 require('./ResizeObserver.es-a563c836.js');
+const commonHelpers = require('./common-helpers-312e97a3.js');
+const draggableTagsHelpers = require('./draggable-tags-helpers-2b62a9fa.js');
 const formInputHelpers = require('./form-input-helpers-3a4341c2.js');
+const isEqual = require('./isEqual-35c41499.js');
+const shuffle = require('./shuffle-8d86ba89.js');
+const difference = require('./difference-c83a2044.js');
 require('./document-2c1b83f3.js');
 require('./validate-f2c2f205.js');
 require('./isString-ecd0cbf4.js');
 require('./isUndefined-8f9cfd10.js');
 require('./isNumber-4c1ace60.js');
-require('./common-helpers-312e97a3.js');
 require('./get-91c14783.js');
 require('./_baseGet-89e374f5.js');
+require('./countBy-302d98f4.js');
+require('./_baseAssignValue-88ae85ba.js');
+require('./_defineProperty-87891ae5.js');
+require('./_createAggregator-c627b114.js');
+require('./_baseEach-1273a673.js');
+require('./keys-c78834c2.js');
+require('./_baseUnary-95e872e2.js');
+require('./_baseKeys-38051434.js');
+require('./_baseIteratee-981b7db0.js');
+require('./_Uint8Array-b8bcd85d.js');
+require('./_arrayPush-0b398b4a.js');
+require('./_baseIsEqual-ea3c1968.js');
+require('./_getTag-044b275e.js');
+require('./identity-8189b2e1.js');
+require('./_copyArray-7cf7f5e7.js');
+require('./_baseFlatten-4570005c.js');
+require('./_baseRest-d1fd2600.js');
+require('./_overRest-cf1fc624.js');
+require('./isArrayLikeObject-d16ae561.js');
 
-const formConnectCss = ":root{--ease-in-back:cubic-bezier(0.36, 0, 0.66, -0.56);--ease-in-circ:cubic-bezier(0.55, 0, 1, 0.45);--ease-in-cubic:cubic-bezier(0.32, 0, 0.67, 0);--ease-in-expo:cubic-bezier(0.7, 0, 0.84, 0);--ease-in-quad:cubic-bezier(0.11, 0, 0.5, 0);--ease-in-quart:cubic-bezier(0.5, 0, 0.75, 0);--ease-in-quint:cubic-bezier(0.64, 0, 0.78, 0);--ease-in-sine:cubic-bezier(0.12, 0, 0.39, 0);--ease-out-back:cubic-bezier(0.34, 1.56, 0.64, 1);--ease-out-circ:cubic-bezier(0, 0.55, 0.45, 1);--ease-out-cubic:cubic-bezier(0.33, 1, 0.68, 1);--ease-out-expo:cubic-bezier(0.16, 1, 0.3, 1);--ease-out-quad:cubic-bezier(0.5, 1, 0.89, 1);--ease-out-quart:cubic-bezier(0.25, 1, 0.5, 1);--ease-out-quint:cubic-bezier(0.22, 1, 0.36, 1);--ease-out-sine:cubic-bezier(0.61, 1, 0.88, 1);--ease-in-out-back:cubic-bezier(0.68, -0.6, 0.32, 1.6);--ease-in-out-circ:cubic-bezier(0.85, 0, 0.15, 1);--ease-in-out-cubic:cubic-bezier(0.65, 0, 0.35, 1);--ease-in-out-expo:cubic-bezier(0.87, 0, 0.13, 1);--ease-in-out-quad:cubic-bezier(0.45, 0, 0.55, 1);--ease-in-out-quart:cubic-bezier(0.76, 0, 0.24, 1);--ease-in-out-quint:cubic-bezier(0.83, 0, 0.17, 1);--ease-in-out-sine:cubic-bezier(0.37, 0, 0.63, 1)}.tippy-box,.tippy-popper{white-space:pre-wrap}.tippy-box .tippy-tooltip,.tippy-popper .tippy-tooltip{padding:var(--spacing-02, 0.125rem)}.tippy-box{-webkit-box-shadow:var(--shadow-03, 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1));box-shadow:var(--shadow-03, 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1))}.tippy-box .tippy-content.editable{padding:0}.tippy-box .tippy-content .flex{display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around}.tippy-box .tippy-content .hidden{display:none}.tippy-box .tippy-content .editable-content{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;color:var(--dark, #000000)}.tippy-box .tippy-content .editable-content .text-content{min-width:5rem;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}.tippy-box .tippy-content .editable-content .text-content>div{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}.tippy-box .tippy-content .editable-content.readonly{padding:var(--spacing-08, 0.5rem)}.tippy-box .tippy-content .editable-content .maxchar-content{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-item-align:end;align-self:flex-end;height:var(--spacing-24, 1.5rem);padding-right:var(--spacing-08, 0.5rem)}.tippy-box .tippy-content .editable-content .action-content{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.tippy-box .tippy-content .editable-content .action-content yoo-button{padding:0 var(--spacing-08, 0.5rem)}.tippy-box .tippy-content .editable-content .action-content .edit-content{-ms-flex-align:center;align-items:center}.tippy-box .tippy-content .editable-content .action-content .edit-content yoo-icon{padding-left:var(--spacing-08, 0.5rem);cursor:pointer}.tippy-box .tippy-content .editable-content .edit-content>*{cursor:pointer}.tippy-box .tippy-content .request-access{padding:var(--spacing-08, 0.5rem)}.tippy-box .tippy-content .request-access .title{margin-bottom:var(--spacing-08, 0.5rem);font-weight:var(--font-weight-700, 700)}.tippy-box .tippy-content .request-access .sub-title{display:-ms-flexbox;display:flex;margin-bottom:var(--spacing-08, 0.5rem);font-weight:var(--font-weight-300, 300);font-size:var(--font-size-14, 0.875rem)}.tippy-box .tippy-content .request-access .sub-title yoo-avatar{margin:0 var(--spacing-04, 0.25rem)}.tippy-box .tippy-content .request-access yoo-button{max-width:8rem}.tippy-box[data-theme~=startameeting] .tippy-content{padding:0;border-radius:var(--border-radius-04, 0.25rem)}.tippy-box[data-theme~=large]{font-size:var(--font-size-16, 1rem)}.tippy-box[data-theme~=large] .tippy-content{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=large] .tippy-content .editable-content{padding:var(--spacing-04, 0.25rem)}.tippy-box[data-theme~=large] .tippy-content .editable-content .text-content{padding-right:var(--spacing-16, 1rem)}.tippy-box[data-theme~=large] .tippy-content .editable-content yoo-icon{margin:0 var(--spacing-04, 0.25rem)}.tippy-box[data-theme~=small]{font-size:var(--font-size-16, 1rem)}.tippy-box[data-theme~=small] .tippy-content{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=small] .tippy-content .editable-content{padding:var(--spacing-04, 0.25rem)}.tippy-box[data-theme~=small] .tippy-content .editable-content .text-content{padding-right:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=small] .tippy-content .editable-content yoo-icon{margin:0 var(--spacing-04, 0.25rem)}.tippy-box[data-theme~=accent]{background-color:var(--accent, #276ef1)}.tippy-box[data-theme~=accent] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=accent] .tippy-svg-arrow{fill:var(--accent, #276ef1)}.tippy-box[data-theme~=accent][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--accent, #276ef1)}.tippy-box[data-theme~=accent][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--accent, #276ef1)}.tippy-box[data-theme~=accent][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--accent, #276ef1)}.tippy-box[data-theme~=accent][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--accent, #276ef1)}.tippy-box[data-theme~=anthracite]{background-color:var(--anthracite, #1a1a1a)}.tippy-box[data-theme~=anthracite] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=anthracite] .tippy-svg-arrow{fill:var(--anthracite, #1a1a1a)}.tippy-box[data-theme~=anthracite][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--anthracite, #1a1a1a)}.tippy-box[data-theme~=anthracite][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--anthracite, #1a1a1a)}.tippy-box[data-theme~=anthracite][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--anthracite, #1a1a1a)}.tippy-box[data-theme~=anthracite][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--anthracite, #1a1a1a)}.tippy-box[data-theme~=app-color]{background-color:var(--app-color)}.tippy-box[data-theme~=app-color] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=app-color] .tippy-svg-arrow{fill:var(--app-color)}.tippy-box[data-theme~=app-color][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--app-color)}.tippy-box[data-theme~=app-color][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--app-color)}.tippy-box[data-theme~=app-color][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--app-color)}.tippy-box[data-theme~=app-color][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--app-color)}.tippy-box[data-theme~=danger]{background-color:var(--danger, #d44333)}.tippy-box[data-theme~=danger] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=danger] .tippy-svg-arrow{fill:var(--danger, #d44333)}.tippy-box[data-theme~=danger][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--danger, #d44333)}.tippy-box[data-theme~=danger][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--danger, #d44333)}.tippy-box[data-theme~=danger][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--danger, #d44333)}.tippy-box[data-theme~=danger][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--danger, #d44333)}.tippy-box[data-theme~=danger-light]{background-color:var(--danger-light, #f46885)}.tippy-box[data-theme~=danger-light] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=danger-light] .tippy-svg-arrow{fill:var(--danger-light, #f46885)}.tippy-box[data-theme~=danger-light][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--danger-light, #f46885)}.tippy-box[data-theme~=danger-light][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--danger-light, #f46885)}.tippy-box[data-theme~=danger-light][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--danger-light, #f46885)}.tippy-box[data-theme~=danger-light][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--danger-light, #f46885)}.tippy-box[data-theme~=dark]{background-color:var(--dark, #000000)}.tippy-box[data-theme~=dark] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=dark] .tippy-svg-arrow{fill:var(--dark, #000000)}.tippy-box[data-theme~=dark][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--dark, #000000)}.tippy-box[data-theme~=dark][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--dark, #000000)}.tippy-box[data-theme~=dark][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--dark, #000000)}.tippy-box[data-theme~=dark][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--dark, #000000)}.tippy-box[data-theme~=energized]{background-color:var(--energized, #fed05b)}.tippy-box[data-theme~=energized] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=energized] .tippy-svg-arrow{fill:var(--energized, #fed05b)}.tippy-box[data-theme~=energized][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--energized, #fed05b)}.tippy-box[data-theme~=energized][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--energized, #fed05b)}.tippy-box[data-theme~=energized][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--energized, #fed05b)}.tippy-box[data-theme~=energized][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--energized, #fed05b)}.tippy-box[data-theme~=info]{background-color:var(--info, #fc459e)}.tippy-box[data-theme~=info] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=info] .tippy-svg-arrow{fill:var(--info, #fc459e)}.tippy-box[data-theme~=info][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--info, #fc459e)}.tippy-box[data-theme~=info][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--info, #fc459e)}.tippy-box[data-theme~=info][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--info, #fc459e)}.tippy-box[data-theme~=info][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--info, #fc459e)}.tippy-box[data-theme~=light]{background-color:var(--light, #ffffff)}.tippy-box[data-theme~=light] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=light] .tippy-svg-arrow{fill:var(--light, #ffffff)}.tippy-box[data-theme~=light][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--light, #ffffff)}.tippy-box[data-theme~=light][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--light, #ffffff)}.tippy-box[data-theme~=light][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--light, #ffffff)}.tippy-box[data-theme~=light][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--light, #ffffff)}.tippy-box[data-theme~=light-orange]{background-color:var(--light-orange, #fcae49)}.tippy-box[data-theme~=light-orange] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=light-orange] .tippy-svg-arrow{fill:var(--light-orange, #fcae49)}.tippy-box[data-theme~=light-orange][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--light-orange, #fcae49)}.tippy-box[data-theme~=light-orange][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--light-orange, #fcae49)}.tippy-box[data-theme~=light-orange][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--light-orange, #fcae49)}.tippy-box[data-theme~=light-orange][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--light-orange, #fcae49)}.tippy-box[data-theme~=light-to-text-color]{background-color:var(--light-to-text-color, #ffffff)}.tippy-box[data-theme~=light-to-text-color] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=light-to-text-color] .tippy-svg-arrow{fill:var(--light-to-text-color, #ffffff)}.tippy-box[data-theme~=light-to-text-color][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--light-to-text-color, #ffffff)}.tippy-box[data-theme~=light-to-text-color][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--light-to-text-color, #ffffff)}.tippy-box[data-theme~=light-to-text-color][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--light-to-text-color, #ffffff)}.tippy-box[data-theme~=light-to-text-color][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--light-to-text-color, #ffffff)}.tippy-box[data-theme~=royal]{background-color:var(--royal, #7577ff)}.tippy-box[data-theme~=royal] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=royal] .tippy-svg-arrow{fill:var(--royal, #7577ff)}.tippy-box[data-theme~=royal][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--royal, #7577ff)}.tippy-box[data-theme~=royal][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--royal, #7577ff)}.tippy-box[data-theme~=royal][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--royal, #7577ff)}.tippy-box[data-theme~=royal][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--royal, #7577ff)}.tippy-box[data-theme~=stable]{background-color:var(--stable, #adadad)}.tippy-box[data-theme~=stable] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=stable] .tippy-svg-arrow{fill:var(--stable, #adadad)}.tippy-box[data-theme~=stable][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--stable, #adadad)}.tippy-box[data-theme~=stable][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--stable, #adadad)}.tippy-box[data-theme~=stable][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--stable, #adadad)}.tippy-box[data-theme~=stable][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--stable, #adadad)}.tippy-box[data-theme~=stable-alt]{background-color:var(--stable-alt, #d0d0d0)}.tippy-box[data-theme~=stable-alt] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=stable-alt] .tippy-svg-arrow{fill:var(--stable-alt, #d0d0d0)}.tippy-box[data-theme~=stable-alt][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--stable-alt, #d0d0d0)}.tippy-box[data-theme~=stable-alt][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--stable-alt, #d0d0d0)}.tippy-box[data-theme~=stable-alt][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--stable-alt, #d0d0d0)}.tippy-box[data-theme~=stable-alt][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--stable-alt, #d0d0d0)}.tippy-box[data-theme~=stable-light]{background-color:var(--stable-light, #f1f1f1)}.tippy-box[data-theme~=stable-light] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=stable-light] .tippy-svg-arrow{fill:var(--stable-light, #f1f1f1)}.tippy-box[data-theme~=stable-light][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--stable-light, #f1f1f1)}.tippy-box[data-theme~=stable-light][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--stable-light, #f1f1f1)}.tippy-box[data-theme~=stable-light][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--stable-light, #f1f1f1)}.tippy-box[data-theme~=stable-light][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--stable-light, #f1f1f1)}.tippy-box[data-theme~=stable-ultralight]{background-color:var(--stable-ultralight, #fafafa)}.tippy-box[data-theme~=stable-ultralight] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=stable-ultralight] .tippy-svg-arrow{fill:var(--stable-ultralight, #fafafa)}.tippy-box[data-theme~=stable-ultralight][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--stable-ultralight, #fafafa)}.tippy-box[data-theme~=stable-ultralight][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--stable-ultralight, #fafafa)}.tippy-box[data-theme~=stable-ultralight][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--stable-ultralight, #fafafa)}.tippy-box[data-theme~=stable-ultralight][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--stable-ultralight, #fafafa)}.tippy-box[data-theme~=success]{background-color:var(--success, #3aa76d)}.tippy-box[data-theme~=success] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=success] .tippy-svg-arrow{fill:var(--success, #3aa76d)}.tippy-box[data-theme~=success][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--success, #3aa76d)}.tippy-box[data-theme~=success][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--success, #3aa76d)}.tippy-box[data-theme~=success][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--success, #3aa76d)}.tippy-box[data-theme~=success][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--success, #3aa76d)}.tippy-box[data-theme~=text-color]{background-color:var(--text-color, #807f83)}.tippy-box[data-theme~=text-color] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=text-color] .tippy-svg-arrow{fill:var(--text-color, #807f83)}.tippy-box[data-theme~=text-color][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--text-color, #807f83)}.tippy-box[data-theme~=text-color][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--text-color, #807f83)}.tippy-box[data-theme~=text-color][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--text-color, #807f83)}.tippy-box[data-theme~=text-color][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--text-color, #807f83)}.tippy-box[data-theme~=warning]{background-color:var(--warning, #ff6402)}.tippy-box[data-theme~=warning] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=warning] .tippy-svg-arrow{fill:var(--warning, #ff6402)}.tippy-box[data-theme~=warning][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--warning, #ff6402)}.tippy-box[data-theme~=warning][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--warning, #ff6402)}.tippy-box[data-theme~=warning][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--warning, #ff6402)}.tippy-box[data-theme~=warning][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--warning, #ff6402)}.tippy-box[data-theme~=anthracite-to-text-color]{background-color:var(--anthracite-to-text-color, #1a1a1a)}.tippy-box[data-theme~=anthracite-to-text-color] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=anthracite-to-text-color] .tippy-svg-arrow{fill:var(--anthracite-to-text-color, #1a1a1a)}.tippy-box[data-theme~=anthracite-to-text-color][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--anthracite-to-text-color, #1a1a1a)}.tippy-box[data-theme~=anthracite-to-text-color][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--anthracite-to-text-color, #1a1a1a)}.tippy-box[data-theme~=anthracite-to-text-color][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--anthracite-to-text-color, #1a1a1a)}.tippy-box[data-theme~=anthracite-to-text-color][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--anthracite-to-text-color, #1a1a1a)}:root{--safe-area-inset-top:0;--safe-area-inset-right:0;--safe-area-inset-bottom:0;--safe-area-inset-left:0}@supports (top: constant(safe-area-inset-top)){:root{--safe-area-inset-top:constant(safe-area-inset-top);--safe-area-inset-right:constant(safe-area-inset-right);--safe-area-inset-bottom:constant(safe-area-inset-bottom);--safe-area-inset-left:constant(safe-area-inset-left)}}@supports (top: env(safe-area-inset-top)){:root{--safe-area-inset-top:env(safe-area-inset-top);--safe-area-inset-right:env(safe-area-inset-right);--safe-area-inset-bottom:env(safe-area-inset-bottom);--safe-area-inset-left:env(safe-area-inset-left)}}.fr-popup.fr-active{z-index:30004 !important;display:block !important;opacity:1 !important}.bg-app-color{background-color:var(--app-color) !important}.app-color{color:var(--app-color);fill:var(--app-color)}.border-app-color{border:var(--border-width-02, 0.125rem) solid var(--app-color)}.bg-success{background-color:var(--success, #3aa76d) !important}.success{color:var(--success, #3aa76d);fill:var(--success, #3aa76d)}.border-success{border:var(--border-width-02, 0.125rem) solid var(--success, #3aa76d)}.bg-danger{background-color:var(--danger, #d44333) !important}.danger{color:var(--danger, #d44333);fill:var(--danger, #d44333)}.border-danger{border:var(--border-width-02, 0.125rem) solid var(--danger, #d44333)}.bg-danger-light{background-color:var(--danger-light, #f46885) !important}.danger-light{color:var(--danger-light, #f46885);fill:var(--danger-light, #f46885)}.border-danger-light{border:var(--border-width-02, 0.125rem) solid var(--danger-light, #f46885)}.bg-energized{background-color:var(--energized, #fed05b) !important}.energized{color:var(--energized, #fed05b);fill:var(--energized, #fed05b)}.border-energized{border:var(--border-width-02, 0.125rem) solid var(--energized, #fed05b)}.bg-royal{background-color:var(--royal, #7577ff) !important}.royal{color:var(--royal, #7577ff);fill:var(--royal, #7577ff)}.border-royal{border:var(--border-width-02, 0.125rem) solid var(--royal, #7577ff)}.bg-info{background-color:var(--info, #fc459e) !important}.info{color:var(--info, #fc459e);fill:var(--info, #fc459e)}.border-info{border:var(--border-width-02, 0.125rem) solid var(--info, #fc459e)}.bg-dark{background-color:var(--dark, #000000) !important}.dark{color:var(--dark, #000000);fill:var(--dark, #000000)}.border-dark{border:var(--border-width-02, 0.125rem) solid var(--dark, #000000)}.bg-dark-to-light{background-color:var(--dark-to-light, #000000) !important}.dark-to-light{color:var(--dark-to-light, #000000);fill:var(--dark-to-light, #000000)}.border-dark-to-light{border:var(--border-width-02, 0.125rem) solid var(--dark-to-light, #000000)}.bg-text-color{background-color:var(--text-color, #807f83) !important}.text-color{color:var(--text-color, #807f83);fill:var(--text-color, #807f83)}.border-text-color{border:var(--border-width-02, 0.125rem) solid var(--text-color, #807f83)}.bg-text-color-to-light-60{background-color:var(--text-color-to-light-60, #807f83) !important}.text-color-to-light-60{color:var(--text-color-to-light-60, #807f83);fill:var(--text-color-to-light-60, #807f83)}.border-text-color-to-light-60{border:var(--border-width-02, 0.125rem) solid var(--text-color-to-light-60, #807f83)}.bg-light{background-color:var(--light, #ffffff) !important}.light{color:var(--light, #ffffff);fill:var(--light, #ffffff)}.border-light{border:var(--border-width-02, 0.125rem) solid var(--light, #ffffff)}.bg-light-to-dark{background-color:var(--light-to-dark, #ffffff) !important}.light-to-dark{color:var(--light-to-dark, #ffffff);fill:var(--light-to-dark, #ffffff)}.border-light-to-dark{border:var(--border-width-02, 0.125rem) solid var(--light-to-dark, #ffffff)}.bg-light-orange{background-color:var(--light-orange, #fcae49) !important}.light-orange{color:var(--light-orange, #fcae49);fill:var(--light-orange, #fcae49)}.border-light-orange{border:var(--border-width-02, 0.125rem) solid var(--light-orange, #fcae49)}.bg-stable{background-color:var(--stable, #adadad) !important}.stable{color:var(--stable, #adadad);fill:var(--stable, #adadad)}.border-stable{border:var(--border-width-02, 0.125rem) solid var(--stable, #adadad)}.bg-stable-light{background-color:var(--stable-light, #f1f1f1) !important}.stable-light{color:var(--stable-light, #f1f1f1);fill:var(--stable-light, #f1f1f1)}.border-stable-light{border:var(--border-width-02, 0.125rem) solid var(--stable-light, #f1f1f1)}.bg-stable-alt{background-color:var(--stable-alt, #d0d0d0) !important}.stable-alt{color:var(--stable-alt, #d0d0d0);fill:var(--stable-alt, #d0d0d0)}.border-stable-alt{border:var(--border-width-02, 0.125rem) solid var(--stable-alt, #d0d0d0)}.bg-warning{background-color:var(--warning, #ff6402) !important}.warning{color:var(--warning, #ff6402);fill:var(--warning, #ff6402)}.border-warning{border:var(--border-width-02, 0.125rem) solid var(--warning, #ff6402)}.bg-accent{background-color:var(--accent, #276ef1) !important}.accent{color:var(--accent, #276ef1);fill:var(--accent, #276ef1)}.border-accent{border:var(--border-width-02, 0.125rem) solid var(--accent, #276ef1)}.bg-text-color-to-stable{background-color:var(--text-color-to-stable, #807f83) !important}.text-color-to-stable{color:var(--text-color-to-stable, #807f83);fill:var(--text-color-to-stable, #807f83)}.border-text-color-to-stable{border:var(--border-width-02, 0.125rem) solid var(--text-color-to-stable, #807f83)}.bg-stable-to-stable-20{background-color:var(--stable-to-stable-20, #adadad) !important}.stable-to-stable-20{color:var(--stable-to-stable-20, #adadad);fill:var(--stable-to-stable-20, #adadad)}.border-stable-to-stable-20{border:var(--border-width-02, 0.125rem) solid var(--stable-to-stable-20, #adadad)}.bg-stable-to-light{background-color:var(--stable-to-light, #adadad) !important}.stable-to-light{color:var(--stable-to-light, #adadad);fill:var(--stable-to-light, #adadad)}.border-stable-to-light{border:var(--border-width-02, 0.125rem) solid var(--stable-to-light, #adadad)}.bg-stable-alt-to-light-10{background-color:var(--stable-alt-to-light-10, #d0d0d0) !important}.stable-alt-to-light-10{color:var(--stable-alt-to-light-10, #d0d0d0);fill:var(--stable-alt-to-light-10, #d0d0d0)}.border-stable-alt-to-light-10{border:var(--border-width-02, 0.125rem) solid var(--stable-alt-to-light-10, #d0d0d0)}:host{display:block}:host p{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:var(--spacing-16, 1rem);overflow:hidden;font-size:var(--font-size-14, 0.875rem);text-align:center}:host yoo-icon{position:absolute;top:var(--spacing-08, 0.5rem);right:var(--spacing-08, 0.5rem);background:var(--light-to-dark, #ffffff);border-radius:50%}:host yoo-img{border-radius:inherit}:host .draggable-container,:host .connectable-container{display:grid;grid-auto-rows:1fr;grid-auto-columns:minmax(0, 1fr)}:host .connect-container{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr))}:host .connect-container::-webkit-scrollbar{width:0}:host .item-container{display:-ms-flexbox;display:flex;color:var(--dark-to-light, #000000)}:host .connectable-container .item-container{-ms-flex-pack:start;justify-content:flex-start}:host .draggable-container .item-container{-ms-flex-pack:end;justify-content:flex-end}:host .connectable,:host .draggable{position:relative;width:100%;max-width:13rem;background-color:var(--light-to-dark, #ffffff);border-radius:var(--border-radius-08, 0.5rem)}:host .connectable:before,:host .draggable:before{display:block;width:0;height:0;padding-bottom:calc(3 / 4 * 100%);content:\"\"}:host .connectable.animated,:host .draggable.animated{-webkit-transition:background-color 0.25s ease-in-out, color 0.25s ease-in-out;transition:background-color 0.25s ease-in-out, color 0.25s ease-in-out}:host .connectable.image,:host .draggable.image{padding:0;background-color:transparent}:host .connectable>*:not(yoo-icon),:host .draggable>*:not(yoo-icon){position:absolute;top:0;left:0;width:100%;height:100%}:host .overlay{background-color:inherit;border-radius:inherit;opacity:0.6}:host([readonly]) .connect-container,:host([readonly]) .draggable-container,:host([readonly]) .connectable-container{grid-gap:var(--spacing-16, 1rem)}:host(:not([readonly])) .connect-container,:host(:not([readonly])) .draggable-container,:host(:not([readonly])) .connectable-container{grid-gap:0.0625rem}:host(:not([readonly])) .item-container{padding:var(--spacing-08, 0.5rem);background:var(--stable-light-40-to-stable-light-10, rgba(241, 241, 241, 0.4))}";
+const CONNECT_TYPES = ['draggable', 'connectable'];
+
+const formConnectCss = ":root{--ease-in-back:cubic-bezier(0.36, 0, 0.66, -0.56);--ease-in-circ:cubic-bezier(0.55, 0, 1, 0.45);--ease-in-cubic:cubic-bezier(0.32, 0, 0.67, 0);--ease-in-expo:cubic-bezier(0.7, 0, 0.84, 0);--ease-in-quad:cubic-bezier(0.11, 0, 0.5, 0);--ease-in-quart:cubic-bezier(0.5, 0, 0.75, 0);--ease-in-quint:cubic-bezier(0.64, 0, 0.78, 0);--ease-in-sine:cubic-bezier(0.12, 0, 0.39, 0);--ease-out-back:cubic-bezier(0.34, 1.56, 0.64, 1);--ease-out-circ:cubic-bezier(0, 0.55, 0.45, 1);--ease-out-cubic:cubic-bezier(0.33, 1, 0.68, 1);--ease-out-expo:cubic-bezier(0.16, 1, 0.3, 1);--ease-out-quad:cubic-bezier(0.5, 1, 0.89, 1);--ease-out-quart:cubic-bezier(0.25, 1, 0.5, 1);--ease-out-quint:cubic-bezier(0.22, 1, 0.36, 1);--ease-out-sine:cubic-bezier(0.61, 1, 0.88, 1);--ease-in-out-back:cubic-bezier(0.68, -0.6, 0.32, 1.6);--ease-in-out-circ:cubic-bezier(0.85, 0, 0.15, 1);--ease-in-out-cubic:cubic-bezier(0.65, 0, 0.35, 1);--ease-in-out-expo:cubic-bezier(0.87, 0, 0.13, 1);--ease-in-out-quad:cubic-bezier(0.45, 0, 0.55, 1);--ease-in-out-quart:cubic-bezier(0.76, 0, 0.24, 1);--ease-in-out-quint:cubic-bezier(0.83, 0, 0.17, 1);--ease-in-out-sine:cubic-bezier(0.37, 0, 0.63, 1)}.tippy-box,.tippy-popper{white-space:pre-wrap}.tippy-box .tippy-tooltip,.tippy-popper .tippy-tooltip{padding:var(--spacing-02, 0.125rem)}.tippy-box{-webkit-box-shadow:var(--shadow-03, 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1));box-shadow:var(--shadow-03, 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1))}.tippy-box .tippy-content.editable{padding:0}.tippy-box .tippy-content .flex{display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around}.tippy-box .tippy-content .hidden{display:none}.tippy-box .tippy-content .editable-content{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;color:var(--dark, #000000)}.tippy-box .tippy-content .editable-content .text-content{min-width:5rem;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}.tippy-box .tippy-content .editable-content .text-content>div{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}.tippy-box .tippy-content .editable-content.readonly{padding:var(--spacing-08, 0.5rem)}.tippy-box .tippy-content .editable-content .maxchar-content{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-item-align:end;align-self:flex-end;height:var(--spacing-24, 1.5rem);padding-right:var(--spacing-08, 0.5rem)}.tippy-box .tippy-content .editable-content .action-content{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.tippy-box .tippy-content .editable-content .action-content yoo-button{padding:0 var(--spacing-08, 0.5rem)}.tippy-box .tippy-content .editable-content .action-content .edit-content{-ms-flex-align:center;align-items:center}.tippy-box .tippy-content .editable-content .action-content .edit-content yoo-icon{padding-left:var(--spacing-08, 0.5rem);cursor:pointer}.tippy-box .tippy-content .editable-content .edit-content>*{cursor:pointer}.tippy-box .tippy-content .request-access{padding:var(--spacing-08, 0.5rem)}.tippy-box .tippy-content .request-access .title{margin-bottom:var(--spacing-08, 0.5rem);font-weight:var(--font-weight-700, 700)}.tippy-box .tippy-content .request-access .sub-title{display:-ms-flexbox;display:flex;margin-bottom:var(--spacing-08, 0.5rem);font-weight:var(--font-weight-300, 300);font-size:var(--font-size-14, 0.875rem)}.tippy-box .tippy-content .request-access .sub-title yoo-avatar{margin:0 var(--spacing-04, 0.25rem)}.tippy-box .tippy-content .request-access yoo-button{max-width:8rem}.tippy-box[data-theme~=startameeting] .tippy-content{padding:0;border-radius:var(--border-radius-04, 0.25rem)}.tippy-box[data-theme~=large]{font-size:var(--font-size-16, 1rem)}.tippy-box[data-theme~=large] .tippy-content{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=large] .tippy-content .editable-content{padding:var(--spacing-04, 0.25rem)}.tippy-box[data-theme~=large] .tippy-content .editable-content .text-content{padding-right:var(--spacing-16, 1rem)}.tippy-box[data-theme~=large] .tippy-content .editable-content yoo-icon{margin:0 var(--spacing-04, 0.25rem)}.tippy-box[data-theme~=small]{font-size:var(--font-size-16, 1rem)}.tippy-box[data-theme~=small] .tippy-content{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=small] .tippy-content .editable-content{padding:var(--spacing-04, 0.25rem)}.tippy-box[data-theme~=small] .tippy-content .editable-content .text-content{padding-right:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=small] .tippy-content .editable-content yoo-icon{margin:0 var(--spacing-04, 0.25rem)}.tippy-box[data-theme~=accent]{background-color:var(--accent, #276ef1)}.tippy-box[data-theme~=accent] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=accent] .tippy-svg-arrow{fill:var(--accent, #276ef1)}.tippy-box[data-theme~=accent][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--accent, #276ef1)}.tippy-box[data-theme~=accent][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--accent, #276ef1)}.tippy-box[data-theme~=accent][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--accent, #276ef1)}.tippy-box[data-theme~=accent][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--accent, #276ef1)}.tippy-box[data-theme~=anthracite]{background-color:var(--anthracite, #1a1a1a)}.tippy-box[data-theme~=anthracite] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=anthracite] .tippy-svg-arrow{fill:var(--anthracite, #1a1a1a)}.tippy-box[data-theme~=anthracite][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--anthracite, #1a1a1a)}.tippy-box[data-theme~=anthracite][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--anthracite, #1a1a1a)}.tippy-box[data-theme~=anthracite][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--anthracite, #1a1a1a)}.tippy-box[data-theme~=anthracite][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--anthracite, #1a1a1a)}.tippy-box[data-theme~=app-color]{background-color:var(--app-color)}.tippy-box[data-theme~=app-color] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=app-color] .tippy-svg-arrow{fill:var(--app-color)}.tippy-box[data-theme~=app-color][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--app-color)}.tippy-box[data-theme~=app-color][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--app-color)}.tippy-box[data-theme~=app-color][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--app-color)}.tippy-box[data-theme~=app-color][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--app-color)}.tippy-box[data-theme~=danger]{background-color:var(--danger, #d44333)}.tippy-box[data-theme~=danger] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=danger] .tippy-svg-arrow{fill:var(--danger, #d44333)}.tippy-box[data-theme~=danger][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--danger, #d44333)}.tippy-box[data-theme~=danger][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--danger, #d44333)}.tippy-box[data-theme~=danger][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--danger, #d44333)}.tippy-box[data-theme~=danger][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--danger, #d44333)}.tippy-box[data-theme~=danger-light]{background-color:var(--danger-light, #f46885)}.tippy-box[data-theme~=danger-light] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=danger-light] .tippy-svg-arrow{fill:var(--danger-light, #f46885)}.tippy-box[data-theme~=danger-light][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--danger-light, #f46885)}.tippy-box[data-theme~=danger-light][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--danger-light, #f46885)}.tippy-box[data-theme~=danger-light][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--danger-light, #f46885)}.tippy-box[data-theme~=danger-light][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--danger-light, #f46885)}.tippy-box[data-theme~=dark]{background-color:var(--dark, #000000)}.tippy-box[data-theme~=dark] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=dark] .tippy-svg-arrow{fill:var(--dark, #000000)}.tippy-box[data-theme~=dark][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--dark, #000000)}.tippy-box[data-theme~=dark][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--dark, #000000)}.tippy-box[data-theme~=dark][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--dark, #000000)}.tippy-box[data-theme~=dark][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--dark, #000000)}.tippy-box[data-theme~=energized]{background-color:var(--energized, #fed05b)}.tippy-box[data-theme~=energized] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=energized] .tippy-svg-arrow{fill:var(--energized, #fed05b)}.tippy-box[data-theme~=energized][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--energized, #fed05b)}.tippy-box[data-theme~=energized][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--energized, #fed05b)}.tippy-box[data-theme~=energized][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--energized, #fed05b)}.tippy-box[data-theme~=energized][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--energized, #fed05b)}.tippy-box[data-theme~=info]{background-color:var(--info, #fc459e)}.tippy-box[data-theme~=info] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=info] .tippy-svg-arrow{fill:var(--info, #fc459e)}.tippy-box[data-theme~=info][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--info, #fc459e)}.tippy-box[data-theme~=info][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--info, #fc459e)}.tippy-box[data-theme~=info][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--info, #fc459e)}.tippy-box[data-theme~=info][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--info, #fc459e)}.tippy-box[data-theme~=light]{background-color:var(--light, #ffffff)}.tippy-box[data-theme~=light] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=light] .tippy-svg-arrow{fill:var(--light, #ffffff)}.tippy-box[data-theme~=light][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--light, #ffffff)}.tippy-box[data-theme~=light][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--light, #ffffff)}.tippy-box[data-theme~=light][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--light, #ffffff)}.tippy-box[data-theme~=light][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--light, #ffffff)}.tippy-box[data-theme~=light-orange]{background-color:var(--light-orange, #fcae49)}.tippy-box[data-theme~=light-orange] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=light-orange] .tippy-svg-arrow{fill:var(--light-orange, #fcae49)}.tippy-box[data-theme~=light-orange][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--light-orange, #fcae49)}.tippy-box[data-theme~=light-orange][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--light-orange, #fcae49)}.tippy-box[data-theme~=light-orange][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--light-orange, #fcae49)}.tippy-box[data-theme~=light-orange][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--light-orange, #fcae49)}.tippy-box[data-theme~=light-to-text-color]{background-color:var(--light-to-text-color, #ffffff)}.tippy-box[data-theme~=light-to-text-color] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=light-to-text-color] .tippy-svg-arrow{fill:var(--light-to-text-color, #ffffff)}.tippy-box[data-theme~=light-to-text-color][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--light-to-text-color, #ffffff)}.tippy-box[data-theme~=light-to-text-color][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--light-to-text-color, #ffffff)}.tippy-box[data-theme~=light-to-text-color][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--light-to-text-color, #ffffff)}.tippy-box[data-theme~=light-to-text-color][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--light-to-text-color, #ffffff)}.tippy-box[data-theme~=royal]{background-color:var(--royal, #7577ff)}.tippy-box[data-theme~=royal] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=royal] .tippy-svg-arrow{fill:var(--royal, #7577ff)}.tippy-box[data-theme~=royal][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--royal, #7577ff)}.tippy-box[data-theme~=royal][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--royal, #7577ff)}.tippy-box[data-theme~=royal][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--royal, #7577ff)}.tippy-box[data-theme~=royal][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--royal, #7577ff)}.tippy-box[data-theme~=stable]{background-color:var(--stable, #adadad)}.tippy-box[data-theme~=stable] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=stable] .tippy-svg-arrow{fill:var(--stable, #adadad)}.tippy-box[data-theme~=stable][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--stable, #adadad)}.tippy-box[data-theme~=stable][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--stable, #adadad)}.tippy-box[data-theme~=stable][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--stable, #adadad)}.tippy-box[data-theme~=stable][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--stable, #adadad)}.tippy-box[data-theme~=stable-alt]{background-color:var(--stable-alt, #d0d0d0)}.tippy-box[data-theme~=stable-alt] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=stable-alt] .tippy-svg-arrow{fill:var(--stable-alt, #d0d0d0)}.tippy-box[data-theme~=stable-alt][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--stable-alt, #d0d0d0)}.tippy-box[data-theme~=stable-alt][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--stable-alt, #d0d0d0)}.tippy-box[data-theme~=stable-alt][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--stable-alt, #d0d0d0)}.tippy-box[data-theme~=stable-alt][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--stable-alt, #d0d0d0)}.tippy-box[data-theme~=stable-light]{background-color:var(--stable-light, #f1f1f1)}.tippy-box[data-theme~=stable-light] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=stable-light] .tippy-svg-arrow{fill:var(--stable-light, #f1f1f1)}.tippy-box[data-theme~=stable-light][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--stable-light, #f1f1f1)}.tippy-box[data-theme~=stable-light][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--stable-light, #f1f1f1)}.tippy-box[data-theme~=stable-light][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--stable-light, #f1f1f1)}.tippy-box[data-theme~=stable-light][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--stable-light, #f1f1f1)}.tippy-box[data-theme~=stable-ultralight]{background-color:var(--stable-ultralight, #fafafa)}.tippy-box[data-theme~=stable-ultralight] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=stable-ultralight] .tippy-svg-arrow{fill:var(--stable-ultralight, #fafafa)}.tippy-box[data-theme~=stable-ultralight][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--stable-ultralight, #fafafa)}.tippy-box[data-theme~=stable-ultralight][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--stable-ultralight, #fafafa)}.tippy-box[data-theme~=stable-ultralight][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--stable-ultralight, #fafafa)}.tippy-box[data-theme~=stable-ultralight][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--stable-ultralight, #fafafa)}.tippy-box[data-theme~=success]{background-color:var(--success, #3aa76d)}.tippy-box[data-theme~=success] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=success] .tippy-svg-arrow{fill:var(--success, #3aa76d)}.tippy-box[data-theme~=success][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--success, #3aa76d)}.tippy-box[data-theme~=success][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--success, #3aa76d)}.tippy-box[data-theme~=success][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--success, #3aa76d)}.tippy-box[data-theme~=success][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--success, #3aa76d)}.tippy-box[data-theme~=text-color]{background-color:var(--text-color, #807f83)}.tippy-box[data-theme~=text-color] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=text-color] .tippy-svg-arrow{fill:var(--text-color, #807f83)}.tippy-box[data-theme~=text-color][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--text-color, #807f83)}.tippy-box[data-theme~=text-color][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--text-color, #807f83)}.tippy-box[data-theme~=text-color][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--text-color, #807f83)}.tippy-box[data-theme~=text-color][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--text-color, #807f83)}.tippy-box[data-theme~=warning]{background-color:var(--warning, #ff6402)}.tippy-box[data-theme~=warning] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=warning] .tippy-svg-arrow{fill:var(--warning, #ff6402)}.tippy-box[data-theme~=warning][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--warning, #ff6402)}.tippy-box[data-theme~=warning][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--warning, #ff6402)}.tippy-box[data-theme~=warning][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--warning, #ff6402)}.tippy-box[data-theme~=warning][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--warning, #ff6402)}.tippy-box[data-theme~=anthracite-to-text-color]{background-color:var(--anthracite-to-text-color, #1a1a1a)}.tippy-box[data-theme~=anthracite-to-text-color] .tippy-tooltip{padding:var(--spacing-08, 0.5rem)}.tippy-box[data-theme~=anthracite-to-text-color] .tippy-svg-arrow{fill:var(--anthracite-to-text-color, #1a1a1a)}.tippy-box[data-theme~=anthracite-to-text-color][data-placement^=top]>.tippy-arrow::before{border-top-color:var(--anthracite-to-text-color, #1a1a1a)}.tippy-box[data-theme~=anthracite-to-text-color][data-placement^=bottom]>.tippy-arrow::before{border-bottom-color:var(--anthracite-to-text-color, #1a1a1a)}.tippy-box[data-theme~=anthracite-to-text-color][data-placement^=left]>.tippy-arrow::before{border-left-color:var(--anthracite-to-text-color, #1a1a1a)}.tippy-box[data-theme~=anthracite-to-text-color][data-placement^=right]>.tippy-arrow::before{border-right-color:var(--anthracite-to-text-color, #1a1a1a)}:root{--safe-area-inset-top:0;--safe-area-inset-right:0;--safe-area-inset-bottom:0;--safe-area-inset-left:0}@supports (top: constant(safe-area-inset-top)){:root{--safe-area-inset-top:constant(safe-area-inset-top);--safe-area-inset-right:constant(safe-area-inset-right);--safe-area-inset-bottom:constant(safe-area-inset-bottom);--safe-area-inset-left:constant(safe-area-inset-left)}}@supports (top: env(safe-area-inset-top)){:root{--safe-area-inset-top:env(safe-area-inset-top);--safe-area-inset-right:env(safe-area-inset-right);--safe-area-inset-bottom:env(safe-area-inset-bottom);--safe-area-inset-left:env(safe-area-inset-left)}}.fr-popup.fr-active{z-index:30004 !important;display:block !important;opacity:1 !important}.bg-app-color{background-color:var(--app-color) !important}.app-color{color:var(--app-color);fill:var(--app-color)}.border-app-color{border:var(--border-width-02, 0.125rem) solid var(--app-color)}.bg-success{background-color:var(--success, #3aa76d) !important}.success{color:var(--success, #3aa76d);fill:var(--success, #3aa76d)}.border-success{border:var(--border-width-02, 0.125rem) solid var(--success, #3aa76d)}.bg-danger{background-color:var(--danger, #d44333) !important}.danger{color:var(--danger, #d44333);fill:var(--danger, #d44333)}.border-danger{border:var(--border-width-02, 0.125rem) solid var(--danger, #d44333)}.bg-danger-light{background-color:var(--danger-light, #f46885) !important}.danger-light{color:var(--danger-light, #f46885);fill:var(--danger-light, #f46885)}.border-danger-light{border:var(--border-width-02, 0.125rem) solid var(--danger-light, #f46885)}.bg-energized{background-color:var(--energized, #fed05b) !important}.energized{color:var(--energized, #fed05b);fill:var(--energized, #fed05b)}.border-energized{border:var(--border-width-02, 0.125rem) solid var(--energized, #fed05b)}.bg-royal{background-color:var(--royal, #7577ff) !important}.royal{color:var(--royal, #7577ff);fill:var(--royal, #7577ff)}.border-royal{border:var(--border-width-02, 0.125rem) solid var(--royal, #7577ff)}.bg-info{background-color:var(--info, #fc459e) !important}.info{color:var(--info, #fc459e);fill:var(--info, #fc459e)}.border-info{border:var(--border-width-02, 0.125rem) solid var(--info, #fc459e)}.bg-dark{background-color:var(--dark, #000000) !important}.dark{color:var(--dark, #000000);fill:var(--dark, #000000)}.border-dark{border:var(--border-width-02, 0.125rem) solid var(--dark, #000000)}.bg-dark-to-light{background-color:var(--dark-to-light, #000000) !important}.dark-to-light{color:var(--dark-to-light, #000000);fill:var(--dark-to-light, #000000)}.border-dark-to-light{border:var(--border-width-02, 0.125rem) solid var(--dark-to-light, #000000)}.bg-text-color{background-color:var(--text-color, #807f83) !important}.text-color{color:var(--text-color, #807f83);fill:var(--text-color, #807f83)}.border-text-color{border:var(--border-width-02, 0.125rem) solid var(--text-color, #807f83)}.bg-text-color-to-light-60{background-color:var(--text-color-to-light-60, #807f83) !important}.text-color-to-light-60{color:var(--text-color-to-light-60, #807f83);fill:var(--text-color-to-light-60, #807f83)}.border-text-color-to-light-60{border:var(--border-width-02, 0.125rem) solid var(--text-color-to-light-60, #807f83)}.bg-light{background-color:var(--light, #ffffff) !important}.light{color:var(--light, #ffffff);fill:var(--light, #ffffff)}.border-light{border:var(--border-width-02, 0.125rem) solid var(--light, #ffffff)}.bg-light-to-dark{background-color:var(--light-to-dark, #ffffff) !important}.light-to-dark{color:var(--light-to-dark, #ffffff);fill:var(--light-to-dark, #ffffff)}.border-light-to-dark{border:var(--border-width-02, 0.125rem) solid var(--light-to-dark, #ffffff)}.bg-light-orange{background-color:var(--light-orange, #fcae49) !important}.light-orange{color:var(--light-orange, #fcae49);fill:var(--light-orange, #fcae49)}.border-light-orange{border:var(--border-width-02, 0.125rem) solid var(--light-orange, #fcae49)}.bg-stable{background-color:var(--stable, #adadad) !important}.stable{color:var(--stable, #adadad);fill:var(--stable, #adadad)}.border-stable{border:var(--border-width-02, 0.125rem) solid var(--stable, #adadad)}.bg-stable-light{background-color:var(--stable-light, #f1f1f1) !important}.stable-light{color:var(--stable-light, #f1f1f1);fill:var(--stable-light, #f1f1f1)}.border-stable-light{border:var(--border-width-02, 0.125rem) solid var(--stable-light, #f1f1f1)}.bg-stable-alt{background-color:var(--stable-alt, #d0d0d0) !important}.stable-alt{color:var(--stable-alt, #d0d0d0);fill:var(--stable-alt, #d0d0d0)}.border-stable-alt{border:var(--border-width-02, 0.125rem) solid var(--stable-alt, #d0d0d0)}.bg-warning{background-color:var(--warning, #ff6402) !important}.warning{color:var(--warning, #ff6402);fill:var(--warning, #ff6402)}.border-warning{border:var(--border-width-02, 0.125rem) solid var(--warning, #ff6402)}.bg-accent{background-color:var(--accent, #276ef1) !important}.accent{color:var(--accent, #276ef1);fill:var(--accent, #276ef1)}.border-accent{border:var(--border-width-02, 0.125rem) solid var(--accent, #276ef1)}.bg-text-color-to-stable{background-color:var(--text-color-to-stable, #807f83) !important}.text-color-to-stable{color:var(--text-color-to-stable, #807f83);fill:var(--text-color-to-stable, #807f83)}.border-text-color-to-stable{border:var(--border-width-02, 0.125rem) solid var(--text-color-to-stable, #807f83)}.bg-stable-to-stable-20{background-color:var(--stable-to-stable-20, #adadad) !important}.stable-to-stable-20{color:var(--stable-to-stable-20, #adadad);fill:var(--stable-to-stable-20, #adadad)}.border-stable-to-stable-20{border:var(--border-width-02, 0.125rem) solid var(--stable-to-stable-20, #adadad)}.bg-stable-to-light{background-color:var(--stable-to-light, #adadad) !important}.stable-to-light{color:var(--stable-to-light, #adadad);fill:var(--stable-to-light, #adadad)}.border-stable-to-light{border:var(--border-width-02, 0.125rem) solid var(--stable-to-light, #adadad)}.bg-stable-alt-to-light-10{background-color:var(--stable-alt-to-light-10, #d0d0d0) !important}.stable-alt-to-light-10{color:var(--stable-alt-to-light-10, #d0d0d0);fill:var(--stable-alt-to-light-10, #d0d0d0)}.border-stable-alt-to-light-10{border:var(--border-width-02, 0.125rem) solid var(--stable-alt-to-light-10, #d0d0d0)}:host{display:block;width:100%;max-width:24rem;margin:0 auto}:host p{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:var(--spacing-16, 1rem);overflow:hidden;font-size:var(--font-size-14, 0.875rem);text-align:center}:host yoo-banner{height:0}:host yoo-icon{position:absolute;top:var(--spacing-08, 0.5rem);right:var(--spacing-08, 0.5rem);background:var(--light-to-dark, #ffffff);border-radius:50%}:host yoo-img{border-radius:inherit}:host .inner-container,:host .draggables,:host .connectables{display:grid;grid-gap:var(--spacing-08, 0.5rem)}:host .draggables,:host .connectables{height:-webkit-max-content;height:-moz-max-content;height:max-content;padding:var(--spacing-08, 0.5rem) 0}:host .inner-container{grid-template-rows:repeat(auto-fit, 75%);grid-template-columns:1fr 1fr;padding:0 var(--spacing-08, 0.5rem);overflow:hidden auto;background-color:var(--stable-alt-20, rgba(208, 208, 208, 0.2));border-radius:var(--border-radius-04, 0.25rem);-webkit-transition:height 500ms linear;transition:height 500ms linear;}:host .inner-container::-webkit-scrollbar{width:var(--spacing-08, 0.5rem)}:host .inner-container::-webkit-scrollbar-track{border-radius:var(--border-radius-04, 0.25rem);-webkit-box-shadow:inset 0 0 5px var(--stable, #adadad);box-shadow:inset 0 0 5px var(--stable, #adadad)}:host .inner-container::-webkit-scrollbar-thumb{background:var(--app-color);border-radius:var(--border-radius-04, 0.25rem)}:host .connectable,:host .draggable{position:relative;width:100%;max-width:12rem;height:100%;background-color:var(--light-to-dark, #ffffff);border-radius:var(--border-radius-08, 0.5rem);-webkit-box-shadow:var(--shadow-02, 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.1));box-shadow:var(--shadow-02, 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.1))}:host .connectable:before,:host .draggable:before{display:block;width:0;height:0;padding-bottom:calc(3 / 4 * 100%);content:\"\"}:host .connectable.animated,:host .draggable.animated{-webkit-transition:background-color 0.25s ease-in-out, color 0.25s ease-in-out;transition:background-color 0.25s ease-in-out, color 0.25s ease-in-out}:host .connectable.image,:host .draggable.image{padding:0;background-color:transparent}:host .connectable>*:not(yoo-icon),:host .draggable>*:not(yoo-icon){position:absolute;top:0;left:0;width:100%;height:100%}:host .overlay{background-color:inherit;border-radius:inherit;opacity:0.6}";
 
-const ITEM_TYPES = ['draggable', 'connectable'];
 const YooFormConnectComponent = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.validityChanged = index.createEvent(this, "validityChanged", 7);
     this.inputChanged = index.createEvent(this, "inputChanged", 7);
-    this.dragEnded = index.createEvent(this, "dragEnded", 7);
     /**
      * Read-only mode : true if displayed within a quiz summary
      */
@@ -42,396 +65,254 @@ const YooFormConnectComponent = class {
      * true if component's parent slide is visible within a `yoo-form-dynamic`
      */
     this.isVisible = false;
-    this.overlapThreshold = '65%';
-    this.hoverColor = 'stable-light';
-    this.subContainerElements = [];
     this.colors = ['warning', 'accent', 'royal', 'info', 'energized'];
-    this.defaultColors = ['light-to-dark', 'dark-to-light'];
-    this.animationDelay = this.animated ? 0.25 : 0;
-    this.validationClasses = { valid: { icon: 'check', iconColor: 'success' }, invalid: { icon: 'cross', iconColor: 'danger' } };
   }
-  onRequireChanged() {
-    this.checkAnswersValidity();
+  onValuesChanged() {
+    draggableTagsHelpers.showWarningAlert(this.host, !this.isGameMatchable, 'NOTALLPAIREDVALUES');
   }
-  isValid() {
+  onValidityChanged() {
     this.validityChanged.emit(this.validity);
   }
-  initValues() {
-    this.dragEnded.emit(true);
-    this.initItems();
-    this.shuffleConnectValues();
-    this.initUserAnswersArray();
-  }
-  onIsVisibleChanged(state) {
-    if (state) {
-      this.initConnect();
-    }
-  }
-  onModalAnimationFinished(state) {
-    if (state) {
-      this.initConnect();
+  onValueChanged() {
+    if (!isEqual.isEqual(this.value, this.userAnswers)) {
+      this.connectItems();
+      this.validateUserAnswers(this.value);
     }
   }
-  componentWillLoad() {
-    this.initValues();
+  initAnswerChanged() {
+    this.prepareGame();
   }
-  componentDidLoad() {
-    this.initConnect();
-    this.preserveColors();
-    this.updateDraggables();
-  }
-  componentDidUpdate() {
-    if (this.livePreview) {
-      this.initConnect();
-      this.preserveColors();
-      this.updateDraggables();
+  async onIsVisibleChanged(state) {
+    if (state) {
+      await this.scrollToRevealGame();
+      this.setScrollableHeight();
     }
   }
   get hasValues() {
-    var _a;
-    return !!(((_a = this.values) === null || _a === void 0 ? void 0 : _a.length) && (this.values[0].length || this.values[1].length));
+    var _a, _b, _c, _d;
+    return !!(((_b = (_a = this.values) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.length) || ((_d = (_c = this.values) === null || _c === void 0 ? void 0 : _c[1]) === null || _d === void 0 ? void 0 : _d.length));
   }
-  get isConnectMatchable() {
-    var _a, _b;
-    return ((_a = this.draggables) === null || _a === void 0 ? void 0 : _a.length) === ((_b = this.connectables) === null || _b === void 0 ? void 0 : _b.length);
+  get isGameMatchable() {
+    var _a, _b, _c, _d;
+    return ((_b = (_a = this.values) === null || _a === void 0 ? void 0 : _a[0].filter(v => v)) === null || _b === void 0 ? void 0 : _b.length) === ((_d = (_c = this.values) === null || _c === void 0 ? void 0 : _c[1].filter(v => v)) === null || _d === void 0 ? void 0 : _d.length);
   }
-  updateDraggables() {
-    if (this.draggables) {
-      this.draggables = this.draggables.map((draggable) => Object.assign(draggable, { draggableInstance: this.getDraggableInstance(draggable.id) }));
-    }
+  get draggableElements() {
+    return Array.from(this.host.shadowRoot.querySelectorAll('.draggable') || []);
   }
-  initConnect() {
-    if (this.mainContainerElement) {
-      this.getScrollableArea();
-    }
+  get connectableElements() {
+    return Array.from(this.host.shadowRoot.querySelectorAll('.connectable') || []);
   }
-  shuffleObjects(items) {
-    if (items === null || items === void 0 ? void 0 : items.length) {
-      const newItems = items;
-      for (let i = items.length - 1; i > 0; i--) {
-        const pos = Math.floor(Math.random() * (i + 1));
-        const temp = newItems[i];
-        newItems[i] = newItems[pos];
-        newItems[pos] = temp;
-      }
-      return newItems;
-    }
+  componentWillLoad() {
+    this.prepareGame();
   }
-  shuffleConnectValues() {
+  componentWillUpdate() {
     var _a;
-    if (((_a = this.values) === null || _a === void 0 ? void 0 : _a.length) && this.shuffled) {
-      [this.draggables, this.connectables].forEach((items) => (items = this.shuffleObjects(items)));
+    if (!((_a = this.draggables) === null || _a === void 0 ? void 0 : _a.find(d => d === null || d === void 0 ? void 0 : d.draggableInstance))) {
+      this.initGame();
     }
   }
-  getElement(id, container) {
-    const containerElement = this.mainContainerElement.querySelector(`div.${container}-container`);
-    return containerElement === null || containerElement === void 0 ? void 0 : containerElement.querySelector(`[id="${id}"]`);
+  componentDidLoad() {
+    this.initGame();
   }
-  getConnectable(id) {
-    var _a;
-    return (_a = this.connectables) === null || _a === void 0 ? void 0 : _a.find((connectable) => connectable.id === id);
+  prepareGame() {
+    this.prepareItems();
+    this.connectItems();
+    this.shuffleItems();
   }
-  getDraggable(id) {
-    var _a;
-    return (_a = this.draggables) === null || _a === void 0 ? void 0 : _a.find((draggable) => draggable.id === id);
-  }
-  getScrollableArea() {
-    var _a, _b, _c;
-    if (!this.readonly && this.isVisible && ((_a = this.values) === null || _a === void 0 ? void 0 : _a.length) && ((_b = this.subContainerElements) === null || _b === void 0 ? void 0 : _b.length)) {
-      const arrAllElementLoaded = !!(this.subContainerElements[0].childElementCount === ((_c = this.values) === null || _c === void 0 ? void 0 : _c[0].length) && this.subContainerElements[1].childElementCount === this.values[1].length);
-      if (arrAllElementLoaded) {
-        setTimeout(() => {
-          const absoluteConnectContainerHeight = this.subContainerElements[0].clientHeight;
-          const pageContent = rrule.findParent(this.host, 'form');
-          if (pageContent) {
-            const pageContentBR = pageContent.getBoundingClientRect();
-            const availableHeight = pageContentBR.height - (this.host.getBoundingClientRect().top - pageContentBR.top);
-            if (availableHeight < absoluteConnectContainerHeight) {
-              this.mainContainerElement.style.height = `${availableHeight}px`;
-              this.mainContainerElement.style.overflowY = 'auto';
-              this.mainContainerElement.style.overflowX = 'hidden';
-              if (this.draggableInstances) {
-                this.draggableInstances.forEach((draggableInstance) => (draggableInstance.autoScroll = 1));
-              }
-            }
-          }
-        }, 500);
-      }
-    }
+  async initGame() {
+    await this.scrollToRevealGame();
+    this.setScrollableHeight();
+    this.setDraggableObserver();
+    this.initDraggables();
   }
-  preserveColors() {
+  initDraggables() {
     var _a;
-    if ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) {
-      this.value.forEach((couple) => {
-        const [leftValue, rightValue] = couple;
-        let draggable = this.draggables.find((drag) => drag.value === leftValue);
-        let connectable = this.connectables.find((connect) => connect.value === rightValue);
-        if (!draggable) {
-          draggable = this.draggables.find((drag) => drag.value === rightValue);
-          connectable = this.connectables.find((connect) => connect.value === leftValue);
-        }
-        if (draggable && connectable) {
-          this.attachConnectable(draggable, connectable.id);
-          this.applyColorChanges();
-        }
-      });
-    }
+    (_a = this.draggableElements) === null || _a === void 0 ? void 0 : _a.forEach(e => this.initDraggableActions(e));
+  }
+  async scrollToRevealGame() {
+    const scrollElement = this.host.closest('yoo-ion-scroll');
+    return scrollElement && new Promise(resolve => {
+      setTimeout(() => {
+        scrollElement.scrollTo({ top: scrollElement.scrollHeight, behavior: 'smooth' });
+        resolve();
+      }, 1000);
+    });
   }
-  applyCorrections(draggable, connectableId) {
-    draggable.isCorrect = draggable.id === connectableId;
+  setScrollableHeight() {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const GAP_PADDING = 8;
+    const { bottom } = this.host.getBoundingClientRect();
+    const numberOfItems = ((_b = (_a = this.values) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.length) || 0;
+    const formBounding = (_c = this.host.closest('form')) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect();
+    const itemHeight = ((_e = (_d = this.innerContainerElement) === null || _d === void 0 ? void 0 : _d.querySelector('[id]')) === null || _e === void 0 ? void 0 : _e.clientHeight) + GAP_PADDING + GAP_PADDING / numberOfItems + 1;
+    if (itemHeight && formBounding && bottom > formBounding.bottom && ((_g = (_f = this.values) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.length)) {
+      const maxItems = Math.floor(formBounding.height / itemHeight);
+      const maxHeight = maxItems * itemHeight + (maxItems + 1) * GAP_PADDING;
+      this.innerContainerElement.style.maxHeight = `${Math.min(formBounding.height, maxHeight + GAP_PADDING)}px`;
+    }
   }
-  initUserAnswersArray() {
-    this.userAnswers = [];
-    if (this.values && this.values.length && Array.isArray(this.values[0])) {
-      this.values[0].forEach((value, index) => {
-        var _a, _b;
-        if (value) {
-          this.userAnswers.push([(_b = (_a = this.draggables) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b.id, '']);
+  setDraggableObserver() {
+    this.draggables = this.draggables.map(d => {
+      return new Proxy(d, {
+        set: (target, key, value) => {
+          if (key === 'connectableId') {
+            target[key] = value;
+            this.draggables.forEach(d => {
+              if (d.connectableId === value && d.id !== target.id) {
+                delete d.connectableId;
+              }
+            });
+            this.getUserAnswers();
+            this.validateUserAnswers();
+          }
+          return target[key] = value;
         }
       });
-    }
-  }
-  initItems() {
-    var _a, _b;
-    const ids = [];
-    (_b = (_a = this.values) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.forEach(() => {
-      ids.push(index$1.getUUID());
     });
-    ITEM_TYPES.forEach((type, index) => {
+  }
+  shuffleItems() {
+    this.shuffled && CONNECT_TYPES.forEach(type => this[`${type}s`] = shuffle.shuffle(this[`${type}s`]));
+  }
+  prepareItems() {
+    CONNECT_TYPES.forEach((type, index) => {
       var _a, _b;
-      this[`${type}s`] =
-        ((_b = (_a = this.values) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b.map((value, valueIndex) => Object.assign({
-          value,
-          id: ids[valueIndex]
-        }, !index
-          ? {
-            color: this.colors[valueIndex],
-            isCorrect: false
-          }
-          : {
-            isConnected: false
-          }))) || [];
+      this[`${type}s`] = ((_b = (_a = this.values) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b.map((value, i) => (Object.assign({ value, id: index$1.getUUID() }, (!index && {
+        color: this.colors[i]
+      }))))) || [];
     });
   }
-  setColor(elements, color) {
-    const colorValue = rrule.getCssColor(this.colors.includes(color) ? this.defaultColors[0] : this.defaultColors[1]);
-    const bgColor = rrule.getCssColor(color);
-    this.updateColor(elements, bgColor, colorValue);
-  }
-  removeColor(elements) {
-    const colorValue = rrule.getCssColor(this.defaultColors[1]);
-    const bgColor = rrule.getCssColor(this.defaultColors[0]);
-    const images = elements.filter((el) => el.classList.contains('image'));
-    const el = elements.filter((val) => !(images === null || images === void 0 ? void 0 : images.includes(val)));
-    if (images) {
-      this.updateColor(images, 'transparent', 'transparent');
+  connectItems() {
+    if (this.value) {
+      this.draggables = this.draggables.map(draggable => {
+        var _a, _b, _c;
+        const [value1, value2] = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.find(v => v.includes(draggable.value))) || [];
+        return Object.assign(Object.assign({}, draggable), (value1 && value2 && {
+          connectableId: (_c = (_b = this.connectables) === null || _b === void 0 ? void 0 : _b.find(c => c.value === value1 || c.value === value2)) === null || _c === void 0 ? void 0 : _c.id
+        }));
+      });
     }
-    this.updateColor(el, bgColor, colorValue);
   }
-  updateColor(els, bgColor, color) {
-    els === null || els === void 0 ? void 0 : els.forEach((el) => {
-      if (el) {
-        el.style.backgroundColor = bgColor;
-        el.style.color = color;
-      }
-    });
-  }
-  getDraggableInstance(id) {
-    if (this.mainContainerElement && id) {
-      const currentDraggable = this.getDraggable(id);
-      const currentDragEl = this.getElement(currentDraggable.id, 'draggable');
+  initDraggableActions(draggableElement) {
+    var _a;
+    if (draggableElement) {
+      let tempConnectableElement;
+      const currentDraggable = (_a = this.draggables) === null || _a === void 0 ? void 0 : _a.find(d => (d === null || d === void 0 ? void 0 : d.id) === draggableElement.id);
       const onDragElement = () => {
-        const draggedElementBR = currentDragEl.getBoundingClientRect();
-        const connectableThreshold = this.subContainerElements[1].getBoundingClientRect().x;
-        const isInConnectableArea = draggedElementBR.x + draggedElementBR.width >= connectableThreshold;
+        var _a, _b;
+        const overlapThreshold = '65%';
+        const { x, width } = draggableElement.getBoundingClientRect();
+        const connectableThreshold = this.innerContainerElement.querySelector('.connectables').getBoundingClientRect().x;
+        const isInConnectableArea = x + width >= connectableThreshold;
         if (isInConnectableArea) {
-          this.connectables.forEach((connectable) => {
-            const connectableEl = this.getElement(connectable.id, 'connectable');
-            if (currentDraggable && isInConnectableArea) {
-              if (currentDraggable.draggableInstance.hitTest(connectableEl, this.overlapThreshold)) {
-                currentDraggable.tempConnectableId = connectable.id;
-                this.setColor([connectableEl], this.hoverColor);
-              }
+          this.connectableElements.forEach(e => {
+            var _a, _b;
+            if (((_b = (_a = currentDraggable === null || currentDraggable === void 0 ? void 0 : currentDraggable.draggableInstance) === null || _a === void 0 ? void 0 : _a.hitTest) === null || _b === void 0 ? void 0 : _b.call(_a, e, overlapThreshold)) && e.id !== currentDraggable.connectableId) {
+              tempConnectableElement = e;
+              tempConnectableElement.style.backgroundColor = 'var(--stable-light)';
             }
           });
         }
-        const connectableEl = this.getElement(currentDraggable.tempConnectableId, 'connectable');
-        if (currentDraggable.tempConnectableId && !currentDraggable.draggableInstance.hitTest(connectableEl, this.overlapThreshold)) {
-          const tempItem = this.getConnectable(currentDraggable.tempConnectableId);
-          if (!tempItem.isConnected) {
-            this.removeColor([connectableEl]);
+        if (tempConnectableElement && !currentDraggable.draggableInstance.hitTest(tempConnectableElement, overlapThreshold)) {
+          ['color', 'background-color'].forEach(prop => tempConnectableElement.style.removeProperty(prop));
+          const connectableColor = (_b = (_a = this.draggables) === null || _a === void 0 ? void 0 : _a.find(d => (d === null || d === void 0 ? void 0 : d.connectableId) === tempConnectableElement.id)) === null || _b === void 0 ? void 0 : _b.color;
+          if (connectableColor) {
+            tempConnectableElement.style.backgroundColor = `var(--${connectableColor}`;
+            tempConnectableElement.style.color = 'var(--light)';
           }
-          else {
-            const sourceColor = this.draggables
-              .filter((item) => item === null || item === void 0 ? void 0 : item.connectable)
-              .find((item) => item.connectable.id === currentDraggable.tempConnectableId).color;
-            this.setColor([connectableEl], sourceColor);
-          }
-          delete currentDraggable.tempConnectableId;
+          tempConnectableElement = null;
         }
       };
-      const onReleaseElement = () => {
-        rrule.gsapTo(currentDragEl, this.animationDelay, {
-          x: 0,
-          y: 0
-        }).then(() => {
-          if (currentDraggable === null || currentDraggable === void 0 ? void 0 : currentDraggable.tempConnectableId) {
-            // get temp connectable
-            const connectedElement = this.getElement(currentDraggable.tempConnectableId, 'connectable');
-            const itemContainerElement = connectedElement.parentElement;
-            this.setColor([itemContainerElement.firstElementChild], 'transparent');
-            // attach temp connectable as connected
-            this.attachConnectable(currentDraggable, currentDraggable.tempConnectableId);
-            // check for isolated colored connectable
-            this.removeOldConnectable();
-            this.applyColorChanges();
-            this.autoCompleteLastConnection();
-            this.addAnswer(currentDraggable.id, currentDraggable.tempConnectableId);
-            delete currentDraggable.tempConnectableId;
-          }
-        });
+      const onReleaseElement = async () => {
+        await rrule.gsapTo(draggableElement, this.animated ? 0.25 : 0, { x: 0, y: 0 });
+        if (tempConnectableElement) {
+          currentDraggable.connectableId = tempConnectableElement.id;
+          this.autoCompleteLastConnection();
+        }
+        tempConnectableElement = null;
       };
       const onCancelConnection = () => {
-        if (currentDraggable === null || currentDraggable === void 0 ? void 0 : currentDraggable.connectable) {
-          const connectedElement = this.getElement(currentDraggable.connectable.id, 'connectable');
-          const clickedDraggableElement = this.getElement(currentDraggable.id, 'draggable');
-          this.removeColor([clickedDraggableElement, connectedElement]);
-          this.getConnectable(currentDraggable.connectable.id).isConnected = false;
-          delete currentDraggable.connectable;
-          this.addAnswer(currentDraggable.id, '');
-        }
+        delete currentDraggable.connectableId;
+        this.autoEraseLastConnection();
+        this.getUserAnswers();
+        this.validateUserAnswers();
       };
-      if (!this.readonly && this.isConnectMatchable && currentDragEl && this.mainContainerElement) {
-        return new rrule.Draggable(currentDragEl, {
-          bound: this.mainContainerElement,
+      if (!this.readonly && this.isGameMatchable && draggableElement) {
+        currentDraggable.draggableInstance = new rrule.Draggable(draggableElement, {
           autoScroll: 1,
+          bound: this.innerContainerElement,
           onDrag: onDragElement,
-          onPress: onCancelConnection,
+          onClick: onCancelConnection,
           onRelease: onReleaseElement
         });
       }
     }
   }
-  applyColorChanges() {
-    this.draggables.forEach((draggable) => {
-      var _a;
-      if (draggable) {
-        const sourceColor = draggable.color;
-        const draggedElement = this.getElement(draggable.id, 'draggable');
-        const connectableElement = this.getElement((_a = draggable.connectable) === null || _a === void 0 ? void 0 : _a.id, 'connectable');
-        if (connectableElement) {
-          if (this.readonly) {
-            this.applyCorrections(draggable, draggable.connectable.id);
-            for (const element of [draggedElement, connectableElement]) {
-              const icon = element.getElementsByTagName('yoo-icon')[0];
-              icon.name = draggable.isCorrect ? this.validationClasses.valid.icon : this.validationClasses.invalid.icon;
-              icon.color = draggable.isCorrect ? this.validationClasses.valid.iconColor : this.validationClasses.invalid.iconColor;
-            }
-          }
-          this.setColor([draggedElement, connectableElement], sourceColor);
-        }
-      }
-    });
-  }
-  removeOldConnectable() {
-    this.connectables.forEach((connectable) => {
-      const isConnected = this.draggables.find((srcItem) => { var _a; return ((_a = srcItem === null || srcItem === void 0 ? void 0 : srcItem.connectable) === null || _a === void 0 ? void 0 : _a.id) === connectable.id; });
-      if (!isConnected) {
-        this.removeColor([this.getElement(connectable.id, 'connectable')]);
-      }
-    });
+  getUserAnswers() {
+    this.userAnswers = this.draggables.map(d => [d.value, d.connectableId ? this.connectables.find(c => c.id === d.connectableId).value : '']);
   }
-  attachConnectable(draggableToConnect, connectableId) {
-    const connectable = this.getConnectable(connectableId);
-    const oldConnectedItem = this.draggables.find((dragItem) => { var _a; return ((_a = dragItem === null || dragItem === void 0 ? void 0 : dragItem.connectable) === null || _a === void 0 ? void 0 : _a.id) === connectableId; });
-    if (oldConnectedItem && oldConnectedItem.id !== (draggableToConnect === null || draggableToConnect === void 0 ? void 0 : draggableToConnect.id)) {
-      const oldConnectEl = this.getElement(oldConnectedItem.id, 'draggable');
-      const oldConnectedEl = this.getElement(oldConnectedItem.connectable.id, 'connectable');
-      this.removeColor([oldConnectEl, oldConnectedEl]);
-      oldConnectedItem.connectable.isConnected = false;
-      delete oldConnectedItem.connectable;
-    }
-    draggableToConnect.connectable = connectable;
-    connectable.isConnected = true;
-  }
-  addAnswer(draggableId, connectableId) {
-    if (draggableId && connectableId) {
-      const answerIndex = this.userAnswers.findIndex((el) => (el === null || el === void 0 ? void 0 : el[0]) === draggableId);
-      this.userAnswers[answerIndex] = [draggableId, connectableId];
-      this.checkAnswersValidity();
-    }
+  validateUserAnswers(userAnswers = this.userAnswers) {
+    this.validity = !(userAnswers === null || userAnswers === void 0 ? void 0 : userAnswers.reduce((acc, v) => acc + v.filter(i => !i).length, 0));
+    formInputHelpers.setValueAndValidateInput(userAnswers, this);
   }
-  checkAnswersValidity() {
-    var _a, _b;
-    let _validity = false;
-    if (((_a = this.userAnswers) === null || _a === void 0 ? void 0 : _a.length) === ((_b = this.answer) === null || _b === void 0 ? void 0 : _b.length)) {
-      _validity = !this.userAnswers.find((gAnswer) => gAnswer[1] === '');
-    }
-    if (_validity !== this.validity) {
-      this.validity = _validity;
-    }
-    if (_validity === true) {
-      this.valideAnswers();
-    }
-  }
-  valideAnswers() {
-    if (!this.livePreview) {
-      this.value = this.userAnswers;
-      const answerValues = [];
-      this.value.forEach((answers) => {
-        const drag = this.getDraggable(answers[0]);
-        const connect = this.getConnectable(answers[1]);
-        if ((drag === null || drag === void 0 ? void 0 : drag.value) && (connect === null || connect === void 0 ? void 0 : connect.value)) {
-          answerValues.push([drag.value, connect.value]);
-        }
-      });
-      formInputHelpers.setValueAndValidateInput(answerValues, this);
+  autoEraseLastConnection() {
+    const connectedDraggables = this.draggables.filter(d => d.connectableId);
+    if ((connectedDraggables === null || connectedDraggables === void 0 ? void 0 : connectedDraggables.length) === 1) {
+      const lastDraggable = connectedDraggables[0];
+      delete lastDraggable.connectableId;
     }
   }
   autoCompleteLastConnection() {
-    const freeDraggables = this.draggables.filter((draggable) => !draggable.connectable);
-    const freeConnectables = this.connectables.filter((connectable) => !connectable.isConnected);
-    if ((freeDraggables === null || freeDraggables === void 0 ? void 0 : freeDraggables.length) === 1 && (freeConnectables === null || freeConnectables === void 0 ? void 0 : freeConnectables.length) === 1) {
-      const lastFreeDraggable = freeDraggables[0];
-      const lastFreeConnectable = freeConnectables[0];
-      const sourceColor = lastFreeDraggable.color;
-      lastFreeConnectable.isConnected = true;
-      this.setColor([this.getElement(lastFreeConnectable.id, 'connectable'), this.getElement(lastFreeDraggable.id, 'draggable')], sourceColor);
-      lastFreeDraggable.connectable = lastFreeConnectable;
-      this.addAnswer(lastFreeDraggable.id, lastFreeConnectable.id);
+    var _a;
+    const freeDraggables = this.draggables.filter(d => !d.connectableId);
+    if ((freeDraggables === null || freeDraggables === void 0 ? void 0 : freeDraggables.length) === 1) {
+      const lastDraggable = freeDraggables[0];
+      const lastConectableId = (_a = difference.difference(this.connectables.map(c => c.id), this.draggables.map(d => d.connectableId))) === null || _a === void 0 ? void 0 : _a[0];
+      lastDraggable.connectableId = lastConectableId;
     }
   }
   truncateValue(valueToTruncate) {
     if (valueToTruncate) {
-      const maxAuthorizedLength = 50;
+      const MAX_LENGTH = 50;
       const translatedValue = rrule.translateMulti(valueToTruncate);
       const valueLength = translatedValue.length;
-      if (valueLength > maxAuthorizedLength) {
-        return translatedValue.substr(0, maxAuthorizedLength).concat('...');
-      }
-      else {
-        return translatedValue;
-      }
+      const isTruncabled = valueLength > MAX_LENGTH;
+      return isTruncabled ? translatedValue.substr(0, MAX_LENGTH).concat('...') : translatedValue;
     }
   }
+  renderCorrectionIcon(value) {
+    const getCouple = (values) => values === null || values === void 0 ? void 0 : values.find(v => v.includes(value));
+    const isCorrect = isEqual.isEqual(getCouple(this.value), getCouple(this.answer));
+    return index.h("yoo-icon", { size: "medium", name: isCorrect ? 'check' : 'cross', color: isCorrect ? 'success' : 'danger' });
+  }
   renderContainer(name) {
-    const type = name === 'draggable' ? 0 : 1;
-    const values = name === 'draggable' ? this.draggables : this.connectables;
-    return (index.h("div", { class: `${name}-container`, ref: (element) => (this.subContainerElements[type] = element) }, values === null || values === void 0 ? void 0 : values.map((item) => {
-      const hasImage = !rrule.isNullOrUndefined(item === null || item === void 0 ? void 0 : item.value) && index$1.isImageUrl(item === null || item === void 0 ? void 0 : item.value);
-      return ((item === null || item === void 0 ? void 0 : item.value) && (index.h("div", { class: "item-container" }, index.h("div", { id: item === null || item === void 0 ? void 0 : item.id, class: { [name]: true, image: hasImage, animated: this.animated } }, !hasImage ? index.h("p", null, this.truncateValue(item.value)) : [index.h("yoo-img", { type: "background", src: item.value }), index.h("div", { class: "overlay" })], this.readonly && index.h("yoo-icon", { size: "medium" })))));
+    var _a;
+    return (index.h("section", { class: { [`${name}s`]: true } }, (_a = this[`${name}s`]) === null || _a === void 0 ? void 0 : _a.map((item) => {
+      var _a, _b;
+      const { id, value, connectableId, color } = item || {};
+      const isImage = !!(value && index$1.isImageUrl(value));
+      const isConnected = !!(connectableId || this.draggables.find(d => d.connectableId === id));
+      const tileColor = color || ((_b = (_a = this.draggables) === null || _a === void 0 ? void 0 : _a.find(d => d.connectableId === id)) === null || _b === void 0 ? void 0 : _b.color);
+      return !!value && (index.h("div", { class: "tile-container" }, index.h("div", Object.assign({}, (isConnected && {
+        style: {
+          backgroundColor: `var(--${tileColor})`,
+          color: 'var(--light)'
+        }
+      }), { id: id, key: id, class: { [name]: true, image: isImage, animated: this.animated } }), !isImage ? index.h("p", null, this.truncateValue(value)) : [index.h("yoo-img", { type: "background", src: value }), index.h("div", { class: "overlay" })], this.readonly && this.renderCorrectionIcon(value))));
     })));
   }
+  renderBanner() {
+    return this.livePreview && index.h("yoo-banner", null);
+  }
   render() {
-    return this.hasValues && (index.h("div", { class: "connect-container", ref: (element) => (this.mainContainerElement = element) }, ITEM_TYPES.map((itemType) => this.renderContainer(itemType))));
+    return this.hasValues && (index.h(index.Host, { class: commonHelpers.getAppContext(this.host) }, this.renderBanner(), index.h("div", { class: "inner-container", ref: (element) => (this.innerContainerElement = element) }, CONNECT_TYPES.map(type => this.renderContainer(type)))));
   }
   get host() { return index.getElement(this); }
   static get watchers() { return {
-    "required": ["onRequireChanged"],
-    "validity": ["isValid"],
-    "answer": ["initValues"],
-    "isVisible": ["onIsVisibleChanged"],
-    "isAnimationFinished": ["onModalAnimationFinished"]
+    "values": ["onValuesChanged"],
+    "validity": ["onValidityChanged"],
+    "value": ["onValueChanged"],
+    "answer": ["initAnswerChanged"],
+    "isVisible": ["onIsVisibleChanged"]
   }; }
 };
 YooFormConnectComponent.style = formConnectCss;