@daikin-oss/design-system-web-components 1.1.0 → 1.3.0-next.2

package/dist/es-dev/components/calendar/daikin-calendar.js

@@ -0,0 +1,561 @@
+import { cva } from "class-variance-authority";
+import { unsafeCSS, css, LitElement, html, nothing } from "lit";
+import { property, state, customElement } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { repeat } from "lit/directives/repeat.js";
+import tailwindStyles from "../../tailwind.css.js";
+import { tryParseDateFromProperty, parseDateFromProperty, cloneDate, isMonthOutOfRange, getDateByMonthOffsetClamped, formatDateForProperty, clampDate, isSameYearMonth, createDateClamped, calcWeeksOnCalendar, isDateOutOfRange, cvaIconButton, normalizeDate, DEFAULT_MIN_DATE, DEFAULT_MAX_DATE } from "../../utils/calendar-common.js";
+import { scrollIntoViewOnlyParent } from "../../utils/scroller.js";
+import "../icon-button/daikin-icon-button.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+const MONTHS = [
+  ["Jan", "January"],
+  ["Feb", "February"],
+  ["Mar", "March"],
+  ["Apr", "April"],
+  ["May", "May"],
+  ["Jun", "June"],
+  ["Jul", "July"],
+  ["Aug", "August"],
+  ["Sep", "September"],
+  ["Oct", "October"],
+  ["Nov", "November"],
+  ["Dec", "December"]
+];
+const DAYS = [
+  ["Sun", "Sunday"],
+  ["Mon", "Monday"],
+  ["Tue", "Tuesday"],
+  ["Wed", "Wednesday"],
+  ["Thu", "Thursday"],
+  ["Fri", "Friday"],
+  ["Sat", "Saturday"]
+];
+const cvaContentButton = cva(
+  [
+    "flex",
+    "items-center",
+    "justify-center",
+    "rounded-full",
+    "text-sm",
+    "outline",
+    "outline-2",
+    "outline-offset-2",
+    "outline-transparent",
+    "focus-visible:outline-ddt-color-common-border-focus",
+    "enabled:bg-[var(--color-primary)]",
+    "disabled:text-ddt-color-common-disabled"
+  ],
+  {
+    variants: {
+      date: {
+        false: ["w-[calc((100%_-_3rem)/3)]", "h-8", "px-2"],
+        true: ["size-8"]
+      },
+      variant: {
+        default: [
+          "enabled:text-ddt-color-common-neutral-default",
+          "enabled:hover:text-ddt-color-common-neutral-hover",
+          "enabled:active:text-ddt-color-common-neutral-press",
+          "enabled:hover:var-color-ddt-color-common-surface-neutral-hover/color-primary",
+          "enabled:active:var-color-ddt-color-common-surface-neutral-press/color-primary"
+        ],
+        selected: [
+          "enabled:text-ddt-color-common-text-inverse",
+          "var-color-ddt-color-common-brand-default/color-primary",
+          "hover:var-color-ddt-color-common-brand-hover/color-primary",
+          "active:var-color-ddt-color-common-brand-press/color-primary"
+        ],
+        today: [
+          "enabled:text-ddt-color-common-neutral-default",
+          "enabled:hover:text-ddt-color-common-neutral-hover",
+          "enabled:active:text-ddt-color-common-neutral-press",
+          "enabled:border",
+          "enabled:border-ddt-color-common-neutral-default",
+          "enabled:hover:var-color-ddt-color-common-surface-neutral-hover/color-primary",
+          "enabled:active:var-color-ddt-color-common-surface-neutral-press/color-primary"
+        ]
+      }
+    }
+  }
+);
+function getToday() {
+  return normalizeDate(/* @__PURE__ */ new Date());
+}
+function getNextFocusDateByKey(date, event) {
+  const cloned = cloneDate(date);
+  const offset = {
+    ArrowUp: -7,
+    ArrowRight: 1,
+    ArrowDown: 7,
+    ArrowLeft: -1
+  }[event.key];
+  if (offset) {
+    cloned.setUTCDate(cloned.getUTCDate() + offset);
+    return cloned;
+  }
+  switch (event.key) {
+    case "Home":
+      cloned.setUTCDate(cloned.getUTCDate() - cloned.getUTCDay());
+      return cloned;
+    case "End":
+      cloned.setUTCDate(cloned.getUTCDate() + (6 - cloned.getUTCDay()));
+      return cloned;
+    case "PageUp":
+      return event.shiftKey ? getDateByMonthOffsetClamped(cloned, -12) : getDateByMonthOffsetClamped(cloned, -1);
+    case "PageDown":
+      return event.shiftKey ? getDateByMonthOffsetClamped(cloned, 12) : getDateByMonthOffsetClamped(cloned, 1);
+  }
+  return null;
+}
+let DaikinCalendar = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.value = null;
+    this.min = "1900-01-01";
+    this.max = "2099-12-31";
+    this.defaultValue = null;
+    this.view = "day";
+    this._dateToBeFocused = null;
+    this._viewDate = getToday();
+  }
+  get _value() {
+    return tryParseDateFromProperty(this.value ?? "");
+  }
+  get _min() {
+    return tryParseDateFromProperty(this.min) ?? parseDateFromProperty(DEFAULT_MIN_DATE);
+  }
+  get _max() {
+    return tryParseDateFromProperty(this.max) ?? parseDateFromProperty(DEFAULT_MAX_DATE);
+  }
+  get _defaultValue() {
+    return tryParseDateFromProperty(this.defaultValue ?? "");
+  }
+  /**
+   * The date that serves as the basis for the current view.
+   */
+  get viewDate() {
+    return cloneDate(this._viewDate);
+  }
+  _emitSelect() {
+    this.dispatchEvent(
+      new Event("select", {
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  _emitSelecting() {
+    this.dispatchEvent(
+      new Event("selecting", {
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  _canNavigateMonth(date, offset) {
+    return !isMonthOutOfRange(
+      getDateByMonthOffsetClamped(date, offset),
+      this._min,
+      this._max
+    );
+  }
+  _navigateMonth(date, offset) {
+    this._viewDate = getDateByMonthOffsetClamped(date, offset);
+  }
+  _handleCalendarClick(date) {
+    this.value = formatDateForProperty(date);
+    this._emitSelect();
+  }
+  _handleMonthClick() {
+    this.view = this.view != "year" ? "year" : "month";
+  }
+  _handleYearAndMonthPickerClick(date) {
+    this.view = this.view === "year" ? "month" : "day";
+    this._viewDate = cloneDate(date);
+    this.value = formatDateForProperty(clampDate(date, this._min, this._max));
+    this._emitSelecting();
+  }
+  _handleCalendarKeyDown(event) {
+    const focused = (this.shadowRoot ?? this.ownerDocument).activeElement;
+    const focusedDateValue = focused == null ? void 0 : focused.dataset.date;
+    if (!focusedDateValue) {
+      return;
+    }
+    const focusedDate = parseDateFromProperty(focusedDateValue);
+    const nextFocusDate = getNextFocusDateByKey(focusedDate, event);
+    if (!nextFocusDate) {
+      return;
+    }
+    event.preventDefault();
+    const dateToBeFocused = clampDate(nextFocusDate, this._min, this._max);
+    const dateButton = this.renderRoot.querySelector(
+      `[data-type=day][data-date="${formatDateForProperty(dateToBeFocused)}"]`
+    );
+    if (dateButton && isSameYearMonth(dateToBeFocused, focusedDate)) {
+      dateButton.focus();
+    } else {
+      this._dateToBeFocused = dateToBeFocused;
+      this._navigateMonth(
+        this._viewDate,
+        dateToBeFocused.getUTCFullYear() * 12 + dateToBeFocused.getUTCMonth() - (focusedDate.getUTCFullYear() * 12 + focusedDate.getUTCMonth())
+      );
+    }
+  }
+  _handleYearAndMonthPickerKeyDown(event) {
+    const offset = {
+      ArrowUp: -3,
+      ArrowRight: 1,
+      ArrowDown: 3,
+      ArrowLeft: -1
+    }[event.key];
+    if (!offset) {
+      return;
+    }
+    event.preventDefault();
+    const focused = (this.shadowRoot ?? this.ownerDocument).activeElement;
+    if (!focused) {
+      return;
+    }
+    const buttons = Array.from(
+      this.renderRoot.querySelectorAll(
+        `[data-type="${this.view}"]`
+      )
+    );
+    const focusedIndex = buttons.findIndex((button) => button === focused);
+    if (focusedIndex === -1) {
+      return;
+    }
+    const newIndex = (focusedIndex + offset + buttons.length) % buttons.length;
+    buttons[newIndex].focus();
+  }
+  _createYearAndMonthPickerContainer(children) {
+    return html`<div class="w-full h-72">
+      <div
+        role="radiogroup"
+        class="flex justify-start items-start flex-wrap gap-[1rem_1.5rem] w-full max-h-full pt-4 px-4 pb-4 overflow-auto"
+        @keydown=${this._handleYearAndMonthPickerKeyDown}
+      >
+        ${children}
+      </div>
+    </div>`;
+  }
+  _createYearAndMonthPickerButton({
+    type,
+    disabled,
+    today,
+    selected,
+    focusable,
+    date,
+    text,
+    label
+  }) {
+    const variant = selected ? "selected" : today ? "today" : "default";
+    return html`<button
+      type="button"
+      class=${cvaContentButton({ variant, date: false })}
+      ?disabled=${disabled}
+      role="radio"
+      aria-checked=${selected}
+      aria-current=${today ? "date" : nothing}
+      aria-label=${ifDefined(label)}
+      data-type=${type}
+      tabindex=${focusable ? nothing : -1}
+      @click=${() => this._handleYearAndMonthPickerClick(date)}
+    >
+      ${text}
+    </button>`;
+  }
+  _createYearPicker({
+    viewDate,
+    value,
+    min,
+    max
+  }) {
+    const selectedYear = value == null ? void 0 : value.getUTCFullYear();
+    const todayYear = getToday().getUTCFullYear();
+    const focusableYear = selectedYear ?? todayYear;
+    const years = Array.from(
+      { length: max.getUTCFullYear() - min.getUTCFullYear() + 1 },
+      (_, index) => index + min.getUTCFullYear()
+    );
+    return this._createYearAndMonthPickerContainer(
+      html`${repeat(
+        years,
+        (year) => year,
+        (year) => {
+          const date = createDateClamped(
+            year,
+            viewDate.getUTCMonth(),
+            viewDate.getUTCDate()
+          );
+          return this._createYearAndMonthPickerButton({
+            type: "year",
+            disabled: false,
+            today: year === todayYear,
+            selected: year === selectedYear,
+            focusable: year === focusableYear,
+            date: clampDate(date, min, max),
+            text: String(year)
+          });
+        }
+      )}`
+    );
+  }
+  _createMonthPicker({
+    viewDate,
+    value,
+    min,
+    max
+  }) {
+    const today = getToday();
+    const year = viewDate.getUTCFullYear();
+    const selectedMonth = (value == null ? void 0 : value.getUTCFullYear()) === viewDate.getUTCFullYear() ? value.getUTCMonth() : void 0;
+    const todayMonth = year === today.getUTCFullYear() ? today.getUTCMonth() : void 0;
+    const focusableMonth = selectedMonth ?? todayMonth ?? (isSameYearMonth(min, viewDate) ? min.getUTCMonth() : 0);
+    return this._createYearAndMonthPickerContainer(
+      html`${repeat(
+        MONTHS,
+        ([abbr]) => abbr,
+        ([abbr, full], month) => {
+          const date = createDateClamped(
+            viewDate.getUTCFullYear(),
+            month,
+            viewDate.getUTCDate()
+          );
+          return this._createYearAndMonthPickerButton({
+            type: "month",
+            disabled: isMonthOutOfRange(date, min, max),
+            today: month === todayMonth,
+            selected: month === selectedMonth,
+            focusable: month === focusableMonth,
+            date: clampDate(date, min, max),
+            text: abbr,
+            label: full
+          });
+        }
+      )}`
+    );
+  }
+  _createDatePicker({
+    viewDate,
+    value,
+    min,
+    max
+  }) {
+    const today = getToday();
+    const weeks = calcWeeksOnCalendar(
+      viewDate.getUTCFullYear(),
+      viewDate.getUTCMonth()
+    );
+    const focusable = value && isSameYearMonth(viewDate, value) ? value : isSameYearMonth(viewDate, today) ? today : clampDate(viewDate, min, max);
+    return html`<div class="flex flex-col gap-2 w-full h-72" role="grid">
+      <div class="flex gap-1 flex-wrap w-full px-4" role="row">
+        ${repeat(
+      DAYS,
+      ([abbr]) => abbr,
+      ([abbr, full]) => html`<div
+              class="flex justify-center items-center size-8 text-ddt-color-common-text-secondary text-xs font-bold leading-[1.3]"
+              role="columnheader"
+              aria-label=${full}
+            >
+              ${abbr}
+            </div>`
+    )}
+      </div>
+      <div
+        class="flex flex-col gap-2 flex-wrap w-full px-4 pb-4"
+        role="rowgroup"
+        @keydown=${this._handleCalendarKeyDown}
+      >
+        ${repeat(
+      weeks,
+      (week) => week[0].getTime(),
+      (week) => html`<div class="flex gap-1" role="row">
+              ${repeat(
+        week,
+        (date) => date.getTime(),
+        (date) => html`<button
+                    type="button"
+                    class=${cvaContentButton({
+          variant: date.getTime() === (value == null ? void 0 : value.getTime()) ? "selected" : date.getTime() === today.getTime() ? "today" : "default",
+          date: true
+        })}
+                    role="gridcell"
+                    ?disabled=${isDateOutOfRange(date, min, max)}
+                    tabindex=${ifDefined(
+          focusable.getTime() != date.getTime() ? -1 : void 0
+        )}
+                    aria-current=${date.getTime() === today.getTime() ? "date" : nothing}
+                    aria-selected=${date.getTime() === (value == null ? void 0 : value.getTime())}
+                    data-type="day"
+                    data-date=${formatDateForProperty(date)}
+                    @click=${() => this._handleCalendarClick(date)}
+                  >
+                    ${date.getUTCDate()}
+                  </button>`
+      )}
+            </div>`
+    )}
+      </div>
+    </div>`;
+  }
+  render() {
+    const viewDate = this._viewDate;
+    const value = this._value;
+    const view = this.view;
+    const year = viewDate.getUTCFullYear();
+    const month = viewDate.getUTCMonth();
+    const pulldownLabel = {
+      year: "Switch to month view",
+      month: "Switch to year view",
+      day: "Switch to year view"
+    }[view];
+    const renderState = {
+      viewDate,
+      value,
+      min: this._min,
+      max: this._max
+    };
+    const picker = {
+      year: this._createYearPicker,
+      month: this._createMonthPicker,
+      day: this._createDatePicker
+    }[view].call(this, renderState);
+    return html`<div
+      class="flex items-stretch flex-col gap-2 w-[17.5rem] h-max pt-3 bg-ddt-color-common-background-default outline outline-1 -outline-offset-1 outline-ddt-color-divider rounded font-daikinSerif"
+    >
+      <div class="flex justify-between items-center pl-4 pr-3">
+        <div class="flex items-center gap-2">
+          <span
+            class="text-ddt-color-common-text-primary font-bold"
+            aria-live="polite"
+          >
+            ${`${MONTHS[month][1]} ${year}`}
+          </span>
+          <daikin-icon-button
+            type="button"
+            variant="ghost"
+            color="neutral"
+            button-aria-label=${pulldownLabel}
+            @click=${this._handleMonthClick}
+          >
+            <span
+              class=${cvaIconButton({
+      intent: "pulldown",
+      rotate: view === "year" ? "inverse" : "default"
+    })}
+            ></span>
+          </daikin-icon-button>
+        </div>
+        ${view === "day" ? html`<div class="flex gap-2">
+              <daikin-icon-button
+                type="button"
+                variant="ghost"
+                color="neutral"
+                button-aria-label="Previous month"
+                ?disabled=${!this._canNavigateMonth(viewDate, -1)}
+                @click=${() => this._navigateMonth(viewDate, -1)}
+              >
+                <span class=${cvaIconButton({ intent: "previous" })}></span>
+              </daikin-icon-button>
+              <daikin-icon-button
+                type="button"
+                variant="ghost"
+                color="neutral"
+                button-aria-label="Next month"
+                ?disabled=${!this._canNavigateMonth(viewDate, 1)}
+                @click=${() => this._navigateMonth(viewDate, 1)}
+              >
+                <span class=${cvaIconButton({ intent: "next" })}></span>
+              </daikin-icon-button>
+            </div>` : nothing}
+      </div>
+      ${picker}
+    </div>`;
+  }
+  willUpdate(changedProperties) {
+    {
+      for (const prop of ["value", "min", "max", "defaultValue"]) {
+        if (changedProperties.has(prop)) {
+          if (this[prop] && !tryParseDateFromProperty(this[prop])) {
+            console.warn(
+              `daikin-calendar: Invalid date "${this[prop]}" specified for ${prop}`
+            );
+          }
+        }
+      }
+    }
+    if (changedProperties.has("defaultValue") || changedProperties.has("value")) {
+      const base = this._value ?? this._defaultValue ?? getToday();
+      if (this._viewDate.getTime() !== base.getTime()) {
+        this._viewDate = cloneDate(base);
+      }
+    }
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("_viewDate") && this._dateToBeFocused != null) {
+      const dateButton = this.renderRoot.querySelector(
+        `[data-type=day][data-date="${formatDateForProperty(this._dateToBeFocused)}"]`
+      );
+      dateButton == null ? void 0 : dateButton.focus();
+      this._dateToBeFocused = null;
+    }
+    if (changedProperties.get("view") != null) {
+      const baseSelector = `[data-type="${this.view}"]`;
+      const target = this.renderRoot.querySelector(
+        `${baseSelector}[aria-checked=true], ${baseSelector}[aria-selected=true]`
+      ) ?? this.renderRoot.querySelector(
+        `${baseSelector}[aria-current]`
+      ) ?? this.renderRoot.querySelector(`${baseSelector}:enabled`);
+      if (target) {
+        if (this.view === "year" || this.view === "month") {
+          scrollIntoViewOnlyParent(target, "vertical", true);
+        }
+        target.focus();
+      }
+    }
+  }
+};
+DaikinCalendar.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      display: block;
+      width: fit-content;
+      height: fit-content;
+    }
+  `;
+__decorateClass([
+  property({ type: String, attribute: false })
+], DaikinCalendar.prototype, "value", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinCalendar.prototype, "min", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinCalendar.prototype, "max", 2);
+__decorateClass([
+  property({ type: String, reflect: true, attribute: "default-value" })
+], DaikinCalendar.prototype, "defaultValue", 2);
+__decorateClass([
+  property({ type: String, attribute: false })
+], DaikinCalendar.prototype, "view", 2);
+__decorateClass([
+  state()
+], DaikinCalendar.prototype, "_viewDate", 2);
+DaikinCalendar = __decorateClass([
+  customElement("daikin-calendar")
+], DaikinCalendar);
+export {
+  DaikinCalendar
+};

package/dist/es-dev/components/calendar/index.d.ts

@@ -0,0 +1 @@
+export * from "./daikin-calendar.js";

package/dist/es-dev/components/calendar/index.js

@@ -0,0 +1,4 @@
+import { DaikinCalendar } from "./daikin-calendar.js";
+export {
+  DaikinCalendar
+};

package/dist/es-dev/components/card/daikin-card.js

@@ -1,5 +1,5 @@
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, html } from "lit";
+import { unsafeCSS, css, html } from "lit";
 import { property } from "lit/decorators.js";
 import { DDSElement } from "../../base/dds-element.js";
 import { ddsElement } from "../../base/decorators.js";
@@ -21,7 +21,7 @@ const cvaContainer = cva(
     "flex-col",
     "gap-4",
     "size-full",
-    "p-4",
+    "p-3",
     "rounded-lg",
     "bg-ddt-color-common-background-default"
   ],

package/dist/es-dev/components/card-footer/daikin-card-footer.js

@@ -1,4 +1,4 @@
-import { css, unsafeCSS, html } from "lit";
+import { unsafeCSS, css, html } from "lit";
 import { DDSElement } from "../../base/dds-element.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";

package/dist/es-dev/components/card-header/daikin-card-header.js

@@ -1,5 +1,5 @@
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, html } from "lit";
+import { unsafeCSS, css, html } from "lit";
 import { DDSElement } from "../../base/dds-element.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
@@ -23,7 +23,7 @@ const cvaTitle = cva([
 ])();
 const cvaDescription = cva([
   "flex-none",
-  "text-ddt-color-common-text-secondary",
+  "text-ddt-color-common-text-primary",
   "font-daikinSerif",
   "text-sm",
   "leading-normal",

package/dist/es-dev/components/carousel/daikin-carousel.js

@@ -1,5 +1,5 @@
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, html } from "lit";
+import { unsafeCSS, css, html } from "lit";
 import { property, queryAssignedElements, state } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
 import { repeat } from "lit/directives/repeat.js";
@@ -151,13 +151,16 @@ let DaikinCarousel = class extends DDSElement {
           <span class=${cvaButton({ intent: "previous" })}></span>
         </daikin-icon-button>
         <div
-          class="w-full overflow-clip relative focus-within:outline focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-ddt-color-common-border-focus"
+          class="w-full overflow-clip relative focus-within:outline focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-ddt-color-common-border-focus [container-type:inline-size]"
           aria-live="polite"
         >
           <div
-            class="flex w-[calc(100%*var(--total))] transition-transform translate-x-[calc(-100%*var(--current)/var(--total))] duration-[--ddc-transition-duration]"
+            class="flex w-[calc(100cqw*var(--total))] transition-transform translate-x-[calc(-100%*var(--current)/var(--total))] duration-[--ddc-transition-duration]"
           >
-            <slot @slotchange=${this._handleSlotchange}></slot>
+            <slot
+              class="slotted:w-[calc(100%/var(--total))]"
+              @slotchange=${this._handleSlotchange}
+            ></slot>
           </div>
         </div>
         <daikin-icon-button
@@ -182,6 +185,7 @@ let DaikinCarousel = class extends DDSElement {
       this._items,
       (_, index) => index,
       (_, index) => html`<button
+                type="button"
                 class=${INDICATOR_CLASS_NAME}
                 aria-label="Slide ${index + 1}"
                 aria-selected=${this.currentIndex === index}

package/dist/es-dev/components/carousel-item/daikin-carousel-item.js

@@ -1,4 +1,4 @@
-import { css, unsafeCSS, html } from "lit";
+import { unsafeCSS, css, html } from "lit";
 import { property, queryAssignedElements, state } from "lit/decorators.js";
 import { DDSElement } from "../../base/dds-element.js";
 import { ddsElement } from "../../base/decorators.js";
@@ -38,12 +38,12 @@ let DaikinCarouselItem = class extends DDSElement {
       >
         <slot
           name="title"
-          class="leading-[130%] font-bold"
+          class="leading-[130%] font-bold natural-break"
           @slotchange=${this._handleFooterSlotChange}
         ></slot>
         <slot
           name="description"
-          class="text-sm"
+          class="text-sm natural-break"
           @slotchange=${this._handleFooterSlotChange}
         ></slot>
       </div>