@yoobic/yobi 8.2.0-7 → 8.2.0

package/dist/collection/components/2.molecules/{segment/segment.css → segmented-control/segmented-control.css}

@@ -202,6 +202,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 /* spacing for padding, margin, etc... */
 /* shadow */
 :host {
+  position: relative;
   display: flex;
   justify-content: space-between;
   width: 100%;
@@ -217,6 +218,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   margin: var(--spacing-02, 0.125rem) 0;
 }
 :host .segment-container .segment-content {
+  z-index: 1;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -234,6 +236,11 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   font-size: var(--font-size-12, 0.75rem);
   text-align: center;
 }
+:host .segment-container .segment-content input {
+  position: fixed;
+  opacity: 0;
+  pointer-events: none;
+}
 :host .segment-container .separator {
   height: 60%;
   border-left: solid var(--border-width-02, 0.125rem) var(--dark-10, rgba(0, 0, 0, 0.1));
@@ -251,11 +258,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host .segment-container:last-of-type .separator {
   display: none;
 }
-:host .segment-container.active {
-  background: var(--app-color, #5a30f4);
-  border-radius: var(--border-radius-08, 0.5rem);
-  box-shadow: var(--shadow-02, 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.1));
-}
 :host .segment-container.active h3 {
   color: var(--light, #ffffff);
 }
@@ -285,4 +287,20 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host([size=large]) .segment-container yoo-icon + yoo-truncated-line {
   width: calc(100% - (var(--icon-size-02, 1.5rem) + var(--spacing-04, 0.25rem)));
+}
+
+:host([animated]) .segment-content h3 {
+  transition: color 0.3s ease-in-out;
+}
+:host([animated]) .active-background {
+  transition: all 0.3s ease-in-out;
+}
+
+.active-background {
+  position: absolute;
+  height: 87%;
+  margin: var(--spacing-02, 0.125rem) 0;
+  background: var(--app-color, #5a30f4);
+  border-radius: var(--border-radius-08, 0.5rem);
+  box-shadow: var(--shadow-02, 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.1));
 }

package/dist/collection/components/2.molecules/{segment/segment.js → segmented-control/segmented-control.js}

@@ -1,10 +1,11 @@
-import { translate } from '@shared/utils';
-import { Component, Event, h, Host, Prop, State, Watch } from '@stencil/core';
-export class YooSegmentComponent {
+import { resizeObserve, translate } from '@shared/utils';
+import { Component, Element, Event, h, Host, Prop, State, Watch } from '@stencil/core';
+export class YooSegmentedControlComponent {
   constructor() {
     this.values = [];
     this.size = 'medium';
     this.initialIndex = 0;
+    this.animated = true;
     this.selectedIndex = this.initialIndex;
   }
   onIndexUpdated() {
@@ -14,8 +15,20 @@ export class YooSegmentComponent {
     var _a, _b;
     return ((_b = (_a = this.values[index]) === null || _a === void 0 ? void 0 : _a.icon) === null || _b === void 0 ? void 0 : _b.length) > 0;
   }
-  onSegmentClick(index) {
+  componentDidLoad() {
+    resizeObserve(this.host, this.moveActiveBackground.bind(this));
+    this.moveActiveBackground();
+  }
+  moveActiveBackground() {
+    var _a, _b;
+    this.activeBackgroundEl.style.width = `${(_a = this.activeElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width}px`;
+    this.activeBackgroundEl.style.marginLeft = `${(_b = this.activeElement) === null || _b === void 0 ? void 0 : _b.offsetLeft}px`;
+  }
+  onSegmentClick(ev, index) {
     if (!this.readonly) {
+      const target = ev.target;
+      this.activeElement = target.closest('.segment-container');
+      this.moveActiveBackground();
       this.selectedIndex = index;
       this.segmentSelected.emit(index);
     }
@@ -24,10 +37,7 @@ export class YooSegmentComponent {
     var _a;
     return (_a = this.values) === null || _a === void 0 ? void 0 : _a.map((value, index) => {
       if (value) {
-        return (h("div", { class: {
-            'segment-container': true,
-            active: this.selectedIndex === index
-          }, onClick: () => this.onSegmentClick(index), style: { width: `${100 / (this.values.length || 1)}%` } },
+        return (h("div", { class: { 'segment-container': true, active: this.selectedIndex === index }, onClick: (ev) => this.onSegmentClick(ev, index), ref: el => this.selectedIndex === index ? this.activeElement = el : '', style: { width: `${100 / (this.values.length || 1)}%` } },
           this.renderSegment(value, index),
           h("slot", { name: value.id }),
           h("div", { class: {
@@ -39,20 +49,23 @@ export class YooSegmentComponent {
   }
   renderSegment(value, index) {
     return (h("div", { class: "segment-content" },
+      h("input", { checked: this.selectedIndex === index, name: `${index}`, type: "radio", value: index }),
       value.icon && h("yoo-icon", { size: this.size === 'large' ? 'medium' : this.size === 'medium' ? 'small' : this.size, name: value.icon, color: index === this.selectedIndex ? 'light' : 'stable' }),
       value.label && h("yoo-truncated-line", null,
         h("h3", null, translate(value.label)))));
   }
   render() {
-    return h(Host, { style: { maxWidth: this.maxWidth ? this.maxWidth + 'px' : null } }, this.renderSegments());
+    return h(Host, { style: { maxWidth: this.maxWidth ? this.maxWidth + 'px' : null } },
+      this.renderSegments(),
+      h("span", { ref: el => this.activeBackgroundEl = el, class: "active-background" }));
   }
-  static get is() { return "yoo-segment"; }
+  static get is() { return "yoo-segmented-control"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["segment.scss"]
+    "$": ["segmented-control.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["segment.css"]
+    "$": ["segmented-control.css"]
   }; }
   static get properties() { return {
     "values": {
@@ -150,6 +163,24 @@ export class YooSegmentComponent {
       },
       "attribute": "max-width",
       "reflect": false
+    },
+    "animated": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "animated",
+      "reflect": true,
+      "defaultValue": "true"
     }
   }; }
   static get states() { return {
@@ -171,6 +202,7 @@ export class YooSegmentComponent {
         "references": {}
       }
     }]; }
+  static get elementRef() { return "host"; }
   static get watchers() { return [{
       "propName": "initialIndex",
       "methodName": "onIndexUpdated"

package/dist/collection/components/2.molecules/text-sequence/text-sequence.css

@@ -203,31 +203,51 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 /* shadow */
 :host {
   position: relative;
-  display: block;
+  display: flex;
+  align-items: center;
+  width: 100%;
   height: 100%;
   overflow: hidden;
 }
-:host #sequences {
+:host #view-finder {
   position: relative;
+  width: 100%;
+  height: 50%;
+}
+:host #view-finder #sequences {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-16, 1rem);
-  padding: 0 var(--spacing-16, 1rem);
-  text-align: center;
-  transform: translateY(calc(-1 * var(--spacing-16, 1rem)));
+  width: 100%;
 }
-:host #sequences .sequence {
-  overflow: scroll;
+:host #view-finder .sequence {
+  display: grid;
+  height: var(--max-sequence-height);
+  padding: 0 var(--spacing-16, 1rem);
+  overflow: auto;
   color: var(--stable, #adadad);
+  text-align: center;
   word-break: break-word;
   transform: scale(0.9);
+  transition: all 500ms ease-in-out;
+}
+:host #view-finder .sequence:not(.overflowing) {
+  place-content: center;
+}
+:host #view-finder .sequence * {
+  box-sizing: border-box;
+  max-width: 100%;
+  margin: var(--spacing-08, 0.5rem) auto;
+  text-align: center;
 }
-:host #sequences .sequence.active {
+:host #view-finder .sequence::-webkit-scrollbar {
+  display: none;
+}
+:host #view-finder .sequence.active {
   color: var(--dark, #000000);
   transform: scale(1);
 }
-:host #sequences .sequence.title {
-  margin-top: 50%;
+:host #view-finder .sequence.title {
   font-weight: var(--font-weight-700, 700);
   font-size: var(--font-size-28, 1.75rem);
 }
@@ -267,14 +287,9 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   fill: var(--app-color, #5a30f4);
 }
 
-:host([live-preview]) #sequences,
-:host(.mobile) #sequences {
-  margin-top: 35%;
-}
-
 :host([animated]) yoo-button,
 :host([animated]) #sequences,
 :host([animated]) .sequence,
 :host([animated]) .overlay {
-  transition: all 300ms ease 0s;
+  transition: transform 300ms;
 }

package/dist/collection/components/2.molecules/text-sequence/text-sequence.js

@@ -1,85 +1,78 @@
-import { cleanupWKWebViewFilePath, findParent, getKeyToCache, setSecuredContent, translateMulti } from '@shared/utils';
+import { findParent, setSecuredContent, translateMulti } from '@shared/utils';
 import { Component, Element, Event, h, Host, Prop, State, Watch } from '@stencil/core';
 import { clamp, compact } from 'lodash-es';
-import { getFromLocalForage } from '../../../utils/cache';
-import { getAppContext, onRTEClick } from '../../../utils/helpers/common-helpers';
+import { getAppContext, openImageDetailFromRTE } from '../../../utils/helpers/common-helpers';
 export class YooTextSequence {
   constructor() {
     this.animated = true;
     this.validity = false;
     this.currentIndex = 0;
-    this.currentYPosition = 0;
+    this.translateY = 0;
   }
   onValuesChanged() {
-    this.currentYPosition = 0;
+    this.translateY = 0;
     this.currentIndex = 0;
   }
   onValidityChanged() {
     this.validityChanged.emit(this.validity);
   }
   onIsVisibleChanged() {
-    this.setComponentHeight();
-    this.initComponent();
+    this.isVisible && this.initSequenceHeight();
+  }
+  onModalAnimationFinished() {
+    this.isAnimationFinished && this.initSequenceHeight();
   }
   get wrapperElement() {
     return findParent(this.host, 'yoo-ion-scroll') || this.host;
   }
   get sequenceElements() {
+    var _a, _b;
+    return (_b = Array.from(((_a = this.sequencesContainerElement) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.sequence')) || [])) === null || _b === void 0 ? void 0 : _b.filter(e => e);
+  }
+  get maxSequenceHeight() {
     var _a;
-    return (_a = Array.from(this.host.shadowRoot.querySelectorAll('.sequence') || [])) === null || _a === void 0 ? void 0 : _a.filter(e => e);
+    return ((_a = this.viewFinderElement) === null || _a === void 0 ? void 0 : _a.clientHeight) || (this.host.clientHeight / 2);
+  }
+  get sequenceValues() {
+    var _a, _b, _c;
+    return (_c = (_b = compact([(_a = this.heading) === null || _a === void 0 ? void 0 : _a.trim(), ...(this.values || [])])) === null || _b === void 0 ? void 0 : _b.filter(v => v)) === null || _c === void 0 ? void 0 : _c.map(v => Array.isArray(v) ? v[0] : v);
   }
   componentWillRender() {
     this.wrapperElement && (this.wrapperElement.style.overflow = 'hidden');
   }
   componentDidLoad() {
-    this.initComponent();
-    this.setComponentHeight();
-  }
-  componentDidRender() {
-    this.setComponentHeight();
-  }
-  setComponentHeight() {
-    var _a;
-    if ((_a = this.sequenceElements) === null || _a === void 0 ? void 0 : _a.length) {
-      const { height } = this.host.getBoundingClientRect();
-      this.sequenceElements.forEach(e => {
-        e && height && (e.style.maxHeight = `${height * .5}px`);
-      });
-    }
-  }
-  initComponent() {
-    var _a;
-    (_a = this.sequenceElements) === null || _a === void 0 ? void 0 : _a.forEach(async (e) => {
-      if (e === null || e === void 0 ? void 0 : e.querySelector('img')) {
-        const img = e.querySelector('img');
-        img.src = cleanupWKWebViewFilePath((await getFromLocalForage(getKeyToCache(img.src))) || img.src);
-      }
-    });
-  }
-  onRTEContentClick(ev, index) {
-    var _a;
-    onRTEClick(this.sequenceElements[index], (_a = ev === null || ev === void 0 ? void 0 : ev.target) === null || _a === void 0 ? void 0 : _a.src);
+    this.initSequenceHeight();
   }
-  clickArrow(direction) {
+  initSequenceHeight() {
     var _a;
-    if ((_a = this.sequenceElements) === null || _a === void 0 ? void 0 : _a.length) {
-      const GAP_INTER_SEQUENCES = 16;
-      this.currentIndex = clamp(this.sequenceElements.findIndex(e => e.classList.contains('active')) + (direction === 'top' ? -1 : 1), 0, this.sequenceElements.length - 1);
-      const textsHeight = this.sequenceElements.map(e => e.offsetHeight);
-      this.currentYPosition = 0 - (textsHeight.slice(0, this.currentIndex).reduce((acc, a) => acc + a, 0) + textsHeight[this.currentIndex] / 2) - GAP_INTER_SEQUENCES * this.currentIndex;
+    if (((_a = this.sequenceElements) === null || _a === void 0 ? void 0 : _a.length) && this.maxSequenceHeight) {
+      this.host.style.setProperty('--max-sequence-height', `${this.maxSequenceHeight}px`);
+      this.sequenceElements.forEach(e => e.classList.toggle('overflowing', e.scrollHeight > this.maxSequenceHeight));
       this.validity = this.currentIndex === this.sequenceElements.length - 1;
     }
   }
   renderSequences() {
-    var _a, _b;
-    return h("section", { id: "sequences", style: { transform: `translateY(${this.currentYPosition}px)` } }, (_b = (_a = compact([this.heading, ...(this.values || [])])) === null || _a === void 0 ? void 0 : _a.map((v) => Array.isArray(v) ? v[0] : v)) === null || _b === void 0 ? void 0 : _b.map((text, index) => {
-      return text && h("div", { class: { sequence: true, title: !!this.heading && !index, active: index === this.currentIndex }, innerHTML: setSecuredContent(translateMulti(text)), ref: (el) => this.sequenceElements[index] = el, onClick: (ev) => this.onRTEContentClick(ev, index) });
-    }));
+    var _a;
+    return h("section", { id: "view-finder", ref: el => this.viewFinderElement = el },
+      h("div", { id: "sequences", ref: el => this.sequencesContainerElement = el, style: { transform: `translateY(${this.translateY}px)` } }, (_a = this.sequenceValues) === null || _a === void 0 ? void 0 : _a.map((text, index) => {
+        return text && h("div", { class: { sequence: true, title: !!this.heading && !index, active: index === this.currentIndex }, innerHTML: setSecuredContent(translateMulti(text)), onClick: ev => { var _a; return openImageDetailFromRTE(this.sequenceElements[index], (_a = ev === null || ev === void 0 ? void 0 : ev.target) === null || _a === void 0 ? void 0 : _a['src']); } });
+      })));
   }
   renderArrow(placement) {
     var _a;
     const isUp = placement === 'top';
-    return h("yoo-button", { size: "large", ...{ placement }, hidden: (isUp && !this.currentIndex) || (!isUp && this.currentIndex === ((_a = compact([this.heading, ...(this.values || [])])) === null || _a === void 0 ? void 0 : _a.length) - 1), onClick: () => this.clickArrow(placement) },
+    const clickArrow = () => {
+      var _a;
+      if ((_a = this.sequenceElements) === null || _a === void 0 ? void 0 : _a.length) {
+        const GAP_INTER_SEQUENCES = 16;
+        this.currentIndex = clamp(this.sequenceElements.findIndex(e => e.classList.contains('active')) + (isUp ? -1 : 1), 0, this.sequenceElements.length - 1);
+        const textsHeight = this.sequenceElements.map((e, i) => Math.round(e.offsetHeight * (i <= this.currentIndex ? 1 : .9)));
+        this.host.style.setProperty('--max-sequence-height', `${this.maxSequenceHeight}px`);
+        this.translateY = 0 - ((textsHeight.slice(0, this.currentIndex).reduce((acc, a) => acc + a, 0) + GAP_INTER_SEQUENCES * this.currentIndex));
+        this.validity = this.currentIndex === this.sequenceElements.length - 1;
+      }
+    };
+    return h("yoo-button", { size: "large", ...{ placement }, hidden: (isUp && !this.currentIndex) || (!isUp && this.currentIndex === ((_a = this.sequenceValues) === null || _a === void 0 ? void 0 : _a.length) - 1), onClick: () => clickArrow() },
       h("yoo-icon", { name: `big-arrow-${isUp ? 'up' : 'down'}` }));
   }
   renderOverlay(placement) {
@@ -171,7 +164,7 @@ export class YooTextSequence {
       "reflect": false,
       "defaultValue": "false"
     },
-    "livePreview": {
+    "isVisible": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -180,15 +173,15 @@ export class YooTextSequence {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": ""
       },
-      "attribute": "live-preview",
-      "reflect": true
+      "attribute": "is-visible",
+      "reflect": false
     },
-    "isVisible": {
+    "isAnimationFinished": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -197,12 +190,12 @@ export class YooTextSequence {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": ""
       },
-      "attribute": "is-visible",
+      "attribute": "is-animation-finished",
       "reflect": false
     }
   }; }
@@ -235,5 +228,8 @@ export class YooTextSequence {
     }, {
       "propName": "isVisible",
       "methodName": "onIsVisibleChanged"
+    }, {
+      "propName": "isAnimationFinished",
+      "methodName": "onModalAnimationFinished"
     }]; }
 }

package/dist/collection/components/3.organisms/audio-recorder/audio-recorder-dialog.js

@@ -173,7 +173,7 @@ export class YooAudioRecorderDialogComponent {
         h("div", { class: "inner-row-container" },
           h("span", null, translate('RECORDING')),
           h("span", { class: "stable" }, this.finalRecordingDuration)),
-        h("span", { class: "text" }, translate('TODAY'))),
+        h("span", { class: "text" }, translate('YOOBICTODAY'))),
       h("div", { class: "audio-container" },
         h("yoo-audio-player", { ref: el => { this.audioRef = el; }, class: "dark", src: cleanupWKWebViewFilePath(this.finalPath) })),
       h("yoo-button", { size: "large", onClick: () => { this.onRetryRecording(); }, color: "anthracite" },

package/dist/collection/components/3.organisms/device/device.css

@@ -2963,6 +2963,13 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   height: calc(100% - 20px);
 }
 
+:host(.responsive.notch-normal) .marvel-device {
+  box-sizing: border-box;
+}
+:host(.responsive.notch-normal) .marvel-device.iphone-x .notch {
+  left: 0;
+}
+
 :host(.responsive) {
   display: flex;
   align-items: center;

package/dist/collection/components/3.organisms/device-list/device-list.css

@@ -226,6 +226,10 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   font-size: var(--font-size-12, 0.75rem);
   background: var(--stable-ultralight, #fafafa);
 }
-:host yoo-form-choice {
+:host yoo-form-choice-button,
+:host yoo-form-choice-chat,
+:host yoo-form-choice-card,
+:host yoo-form-choice-image,
+:host yoo-form-choice-radio {
   padding: 0 var(--spacing-16, 1rem);
 }

package/dist/collection/components/3.organisms/device-list/device-list.js

@@ -28,7 +28,7 @@ export class YooDeviceListComponent {
       const deviceTitles = devices.filter((device) => device.category === deviceCategory && (!this.noWeb || device.isWeb !== true)).map((_device) => _device.displayTitle);
       return [
         h("div", { class: "divider" }, translate(deviceCategory)),
-        h("yoo-form-choice", { type: "radio", value: ((_a = this.selectedDevice) === null || _a === void 0 ? void 0 : _a.displayTitle) || 'iPhone X', values: deviceTitles, onInputChanged: (ev) => this.onDeviceChanged(ev) })
+        h("yoo-form-choice-radio", { value: ((_a = this.selectedDevice) === null || _a === void 0 ? void 0 : _a.displayTitle) || 'iPhone X', values: deviceTitles, onInputChanged: (ev) => this.onDeviceChanged(ev) })
       ];
     });
   }

package/dist/collection/components/3.organisms/input-bar/input-bar.js

@@ -378,7 +378,7 @@ export class YooInputBarComponent {
     buttons.push({
       icon: 'camera',
       actionType: 'photo',
-      text: translate('PHOTO'),
+      text: translate('YOOBICPHOTO'),
       iconColor: 'app-color',
       description: translate('SENDAPHOTO'),
       handler: () => this.imageMobileHandler(ev)
@@ -401,7 +401,7 @@ export class YooInputBarComponent {
       buttons.push({
         icon: 'photo-library',
         iconColor: 'app-color',
-        text: translate('PHOTO'),
+        text: translate('YOOBICPHOTO'),
         description: translate('PICKFROMLIBRARYPHOTO'),
         handler: () => this.onImportPhotoFromLibrary()
       });
@@ -432,7 +432,7 @@ export class YooInputBarComponent {
       buttons.push({
         icon: 'file',
         iconColor: 'app-color',
-        text: isWeb(this.host) ? translate('DOCUMENTLIBRARY') : translate('DOCUMENT'),
+        text: isWeb(this.host) ? translate('DOCUMENTLIBRARY') : translate('YOOBICDOCUMENT'),
         description: translate('ADDAFILE'),
         handler: () => isWeb(this.host) ? this.addFileHandler() : this.fileMobileHandler(ev)
       });
@@ -881,12 +881,12 @@ export class YooInputBarComponent {
   }
   renderSecondaryActions() {
     var _a;
-    const iconHandler = (action) => {
+    const iconHandler = (action, ev) => {
       this.onVibrate();
-      action.handler();
+      action.handler(ev);
     };
     return (((_a = this.secondaryActionSettings) === null || _a === void 0 ? void 0 : _a.secondaryActions) || []).map((action) => {
-      return h("yoo-icon", { name: action.icon, color: action.iconColor || 'stable-alt', size: action === null || action === void 0 ? void 0 : action.size, onClick: () => iconHandler(action) });
+      return h("yoo-icon", { name: action.icon, color: action.iconColor || 'stable-alt', size: action === null || action === void 0 ? void 0 : action.size, onClick: (ev) => iconHandler(action, ev) });
     });
   }
   renderFileInput() {

package/dist/collection/components/3.organisms/mobile-tabbar-more/mobile-tabbar-more.css

@@ -203,76 +203,33 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 /* shadow */
 :host {
   display: block;
+  background: var(--light, #ffffff);
 }
-:host .top-container {
-  position: sticky;
-  top: 0;
-  z-index: 10;
-  padding: var(--spacing-16, 1rem) 0 var(--spacing-16, 1rem) var(--spacing-16, 1rem);
-  background: var(--stable-ultralight, #fafafa);
+:host li {
+  break-inside: avoid;
+  padding: var(--spacing-02, 0.125rem) 0 var(--spacing-16, 1rem);
 }
-:host .top-container .input {
-  margin-right: var(--spacing-16, 1rem);
-}
-:host .container {
-  padding: 0 0 var(--spacing-16, 1rem) var(--spacing-16, 1rem);
-}
-:host .container .section .items,
-:host .top-container .section .items {
-  display: grid;
-  grid-template-rows: auto;
-  grid-template-columns: 45% 45%;
-  padding-bottom: var(--spacing-16, 1rem);
-  white-space: nowrap;
-  row-gap: var(--spacing-16, 1rem);
+:host ul {
+  margin: 0;
+  padding: var(--spacing-16, 1rem) var(--spacing-16, 1rem) 0;
+  column-count: 2;
   column-gap: var(--spacing-16, 1rem);
-}
-:host .container .section .items.single,
-:host .top-container .section .items.single {
-  grid-template-rows: auto;
-}
-:host .container .section .items.single::after,
-:host .top-container .section .items.single::after {
-  content: "";
-}
-:host .container .section .items.suggested,
-:host .top-container .section .items.suggested {
-  padding-bottom: unset;
-}
-:host .container .section .section-header,
-:host .top-container .section .section-header {
-  display: flex;
-  justify-content: space-between;
-  padding: var(--spacing-16, 1rem) 0;
-}
-:host .container .section .section-header.empty,
-:host .top-container .section .section-header.empty {
-  padding-bottom: 0;
-}
-:host .container .section .section-header .section-title,
-:host .top-container .section .section-header .section-title {
-  font-weight: var(--font-weight-700, 700);
-  font-size: var(--font-size-14, 0.875rem);
-  text-transform: uppercase;
-}
-:host .container .section .section-header .see-all,
-:host .top-container .section .section-header .see-all {
-  padding-right: var(--spacing-16, 1rem);
-  color: var(--stable, #adadad);
-  font-size: var(--font-size-16, 1rem);
+  list-style: none;
 }
 :host yoo-card-list-color {
-  --title-padding-top: var(--spacing-08, 0.5rem);
-  --title-margin-bottom: 0;
   --card-border-radius: var(--border-radius-04, 0.25rem);
+  --subheading-line-clamp: 3 !important;
+  --title-margin-bottom: 0;
+  --title-padding-top: var(--spacing-08, 0.5rem);
 }
-:host .extended {
-  display: grid;
-  grid-template-rows: repeat(10, 5rem);
-  grid-template-columns: 1fr 1fr;
+:host yoo-form-input {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  box-sizing: border-box;
   padding: var(--spacing-16, 1rem);
-  column-gap: var(--spacing-16, 1rem);
-  row-gap: var(--spacing-16, 1rem);
-  background: var(--stable-ultralight, #fafafa);
-  border-top: solid var(--stable-light, #f1f1f1) var(--border-width-01, 0.0625rem);
+  background: inherit;
+}
+:host yoo-form-input + ul {
+  padding-top: 0;
 }