@sentropic/design-system-svelte 0.4.1 → 0.6.0

package/dist/PaginationNav.svelte

@@ -0,0 +1,219 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type PaginationNavProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
+    page: number;
+    pageCount: number;
+    siblings?: number;
+    label?: string;
+    previousLabel?: string;
+    nextLabel?: string;
+    class?: string;
+    onPageChange?: (page: number) => void;
+  };
+
+  let {
+    page = $bindable(1),
+    pageCount,
+    siblings = 1,
+    label = "Pagination",
+    previousLabel = "Previous page",
+    nextLabel = "Next page",
+    class: className,
+    onPageChange,
+    ...rest
+  }: PaginationNavProps = $props();
+
+  type Slot = number | "ellipsis-start" | "ellipsis-end";
+
+  const classes = () => ["st-paginationNav", className].filter(Boolean).join(" ");
+
+  const slots = $derived.by<Slot[]>(() => {
+    const total = Math.max(0, Math.floor(pageCount));
+    if (total <= 0) return [];
+
+    const current = Math.min(Math.max(1, Math.floor(page)), total);
+    const sib = Math.max(0, Math.floor(siblings));
+
+    // Minimum: first, last, current, sib left, sib right, two ellipses
+    const minSlots = sib * 2 + 5;
+    if (total <= minSlots) {
+      return Array.from({ length: total }, (_, i) => i + 1) as Slot[];
+    }
+
+    const leftSibling = Math.max(current - sib, 1);
+    const rightSibling = Math.min(current + sib, total);
+    const showLeftEllipsis = leftSibling > 2;
+    const showRightEllipsis = rightSibling < total - 1;
+
+    const result: Slot[] = [];
+
+    if (!showLeftEllipsis && showRightEllipsis) {
+      const leftItemCount = 3 + sib * 2;
+      for (let i = 1; i <= leftItemCount; i += 1) result.push(i);
+      result.push("ellipsis-end");
+      result.push(total);
+    } else if (showLeftEllipsis && !showRightEllipsis) {
+      result.push(1);
+      result.push("ellipsis-start");
+      const rightItemCount = 3 + sib * 2;
+      for (let i = total - rightItemCount + 1; i <= total; i += 1) result.push(i);
+    } else if (showLeftEllipsis && showRightEllipsis) {
+      result.push(1);
+      result.push("ellipsis-start");
+      for (let i = leftSibling; i <= rightSibling; i += 1) result.push(i);
+      result.push("ellipsis-end");
+      result.push(total);
+    } else {
+      for (let i = 1; i <= total; i += 1) result.push(i);
+    }
+
+    return result;
+  });
+
+  function go(target: number) {
+    const total = Math.max(0, Math.floor(pageCount));
+    if (target < 1 || target > total || target === page) return;
+    page = target;
+    onPageChange?.(target);
+  }
+</script>
+
+<nav {...rest} class={classes()} aria-label={label}>
+  <ul class="st-paginationNav__list">
+    <li>
+      <button
+        type="button"
+        class="st-paginationNav__nav"
+        aria-label={previousLabel}
+        disabled={page <= 1 || pageCount <= 0}
+        onclick={() => go(page - 1)}
+      >
+        <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true" focusable="false">
+          <path
+            d="M10 3 5 8l5 5"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.6"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </button>
+    </li>
+    {#each slots as slot, index (typeof slot === "number" ? `p-${slot}` : `${slot}-${index}`)}
+      <li>
+        {#if slot === "ellipsis-start" || slot === "ellipsis-end"}
+          <span class="st-paginationNav__ellipsis" aria-hidden="true">…</span>
+        {:else}
+          <button
+            type="button"
+            class="st-paginationNav__page"
+            class:st-paginationNav__page--active={slot === page}
+            aria-label={`Page ${slot}`}
+            aria-current={slot === page ? "page" : undefined}
+            onclick={() => go(slot)}
+          >
+            {slot}
+          </button>
+        {/if}
+      </li>
+    {/each}
+    <li>
+      <button
+        type="button"
+        class="st-paginationNav__nav"
+        aria-label={nextLabel}
+        disabled={page >= pageCount || pageCount <= 0}
+        onclick={() => go(page + 1)}
+      >
+        <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true" focusable="false">
+          <path
+            d="M6 3l5 5-5 5"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.6"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </button>
+    </li>
+  </ul>
+</nav>
+
+<style>
+  .st-paginationNav {
+    color: var(--st-component-paginationNav-text, var(--st-semantic-text-primary));
+    display: inline-block;
+  }
+
+  .st-paginationNav__list {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--st-spacing-1, 0.25rem);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .st-paginationNav__page,
+  .st-paginationNav__nav {
+    align-items: center;
+    background: var(--st-component-paginationNav-background, var(--st-semantic-surface-default));
+    border: 1px solid var(--st-component-paginationNav-border, var(--st-semantic-border-subtle));
+    border-radius: var(--st-component-paginationNav-radius, 0.375rem);
+    color: var(--st-component-paginationNav-text, var(--st-semantic-text-primary));
+    cursor: pointer;
+    display: inline-flex;
+    font: inherit;
+    font-size: 0.875rem;
+    height: 2.25rem;
+    justify-content: center;
+    min-width: 2.25rem;
+    padding: 0 0.5rem;
+  }
+
+  .st-paginationNav__page:hover:not(:disabled),
+  .st-paginationNav__nav:hover:not(:disabled) {
+    background: var(
+      --st-component-paginationNav-hoverBackground,
+      var(--st-semantic-surface-subtle)
+    );
+  }
+
+  .st-paginationNav__page:focus-visible,
+  .st-paginationNav__nav:focus-visible {
+    border-color: var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
+    box-shadow: 0 0 0 2px var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
+    outline: none;
+  }
+
+  .st-paginationNav__page--active {
+    background: var(--st-component-paginationNav-activeBackground, var(--st-semantic-action-primary));
+    border-color: var(--st-component-paginationNav-activeBackground, var(--st-semantic-action-primary));
+    color: var(--st-component-paginationNav-activeText, var(--st-semantic-action-primaryText));
+  }
+
+  .st-paginationNav__page--active:hover {
+    background: var(--st-component-paginationNav-activeBackground, var(--st-semantic-action-primary));
+  }
+
+  .st-paginationNav__page:disabled,
+  .st-paginationNav__nav:disabled {
+    color: var(--st-component-paginationNav-disabledText, var(--st-semantic-text-muted));
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  .st-paginationNav__ellipsis {
+    align-items: center;
+    color: var(--st-component-paginationNav-ellipsisText, var(--st-semantic-text-muted));
+    display: inline-flex;
+    height: 2.25rem;
+    justify-content: center;
+    min-width: 2.25rem;
+    padding: 0 0.25rem;
+  }
+</style>

package/dist/PaginationNav.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes } from "svelte/elements";
+type PaginationNavProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
+    page: number;
+    pageCount: number;
+    siblings?: number;
+    label?: string;
+    previousLabel?: string;
+    nextLabel?: string;
+    class?: string;
+    onPageChange?: (page: number) => void;
+};
+declare const PaginationNav: import("svelte").Component<PaginationNavProps, {}, "page">;
+type PaginationNav = ReturnType<typeof PaginationNav>;
+export default PaginationNav;
+//# sourceMappingURL=PaginationNav.svelte.d.ts.map

package/dist/PaginationNav.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaginationNav.svelte.d.ts","sourceRoot":"","sources":["../src/lib/PaginationNav.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,kBAAkB,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,GAAG;IACrE,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC,CAAC;AA2GJ,QAAA,MAAM,aAAa,4DAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/ProgressIndicator.svelte

@@ -0,0 +1,283 @@
+<script lang="ts" module>
+  export type ProgressIndicatorStatus =
+    | "complete"
+    | "current"
+    | "upcoming"
+    | "invalid"
+    | "disabled";
+
+  export interface ProgressIndicatorItem {
+    value: string;
+    label: string;
+    description?: string;
+    status?: ProgressIndicatorStatus;
+  }
+</script>
+
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type ProgressIndicatorProps = Omit<HTMLAttributes<HTMLOListElement>, "class"> & {
+    items: ProgressIndicatorItem[];
+    vertical?: boolean;
+    label?: string;
+    class?: string;
+  };
+
+  let {
+    items,
+    vertical = false,
+    label = "Progress",
+    class: className,
+    ...rest
+  }: ProgressIndicatorProps = $props();
+
+  const classes = () =>
+    [
+      "st-progressIndicator",
+      vertical ? "st-progressIndicator--vertical" : "st-progressIndicator--horizontal",
+      className
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+  const resolvedStatus = (item: ProgressIndicatorItem): ProgressIndicatorStatus =>
+    item.status ?? "upcoming";
+</script>
+
+<ol {...rest} class={classes()} aria-label={label}>
+  {#each items as item, index (item.value)}
+    {@const status = resolvedStatus(item)}
+    {@const isLast = index === items.length - 1}
+    <li
+      class={["st-progressIndicator__step", `st-progressIndicator__step--${status}`].join(" ")}
+      aria-current={status === "current" ? "step" : undefined}
+    >
+      <span class="st-progressIndicator__indicator" aria-hidden="true">
+        <span class="st-progressIndicator__circle">
+          {#if status === "complete"}
+            <svg viewBox="0 0 16 16" width="14" height="14" focusable="false">
+              <path
+                d="m3 8 3.5 3.5L13 5"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.6"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          {:else if status === "invalid"}
+            <svg viewBox="0 0 16 16" width="14" height="14" focusable="false">
+              <path
+                d="M4 4l8 8M12 4l-8 8"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.6"
+                stroke-linecap="round"
+              />
+            </svg>
+          {:else if status === "current"}
+            <span class="st-progressIndicator__dot"></span>
+          {:else}
+            <span class="st-progressIndicator__index">{index + 1}</span>
+          {/if}
+        </span>
+        {#if !isLast}
+          <span class="st-progressIndicator__connector"></span>
+        {/if}
+      </span>
+      <span class="st-progressIndicator__text">
+        <span class="st-progressIndicator__label">{item.label}</span>
+        {#if item.description}
+          <span class="st-progressIndicator__description">{item.description}</span>
+        {/if}
+      </span>
+    </li>
+  {/each}
+</ol>
+
+<style>
+  .st-progressIndicator {
+    color: var(--st-component-progressIndicator-text, var(--st-semantic-text-primary));
+    display: flex;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .st-progressIndicator--horizontal {
+    align-items: flex-start;
+    flex-direction: row;
+    gap: 0;
+  }
+
+  .st-progressIndicator--vertical {
+    flex-direction: column;
+    gap: 0;
+  }
+
+  .st-progressIndicator__step {
+    display: flex;
+    flex: 1 1 0;
+    gap: var(--st-spacing-2, 0.5rem);
+    min-width: 0;
+    position: relative;
+  }
+
+  .st-progressIndicator--horizontal .st-progressIndicator__step {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .st-progressIndicator--vertical .st-progressIndicator__step {
+    align-items: flex-start;
+    flex: 0 0 auto;
+    flex-direction: row;
+  }
+
+  .st-progressIndicator__indicator {
+    align-items: center;
+    color: var(--st-component-progressIndicator-iconText, var(--st-semantic-text-secondary));
+    display: flex;
+    flex: 0 0 auto;
+    justify-content: center;
+    position: relative;
+  }
+
+  .st-progressIndicator--horizontal .st-progressIndicator__indicator {
+    flex-direction: row;
+    width: 100%;
+  }
+
+  .st-progressIndicator--vertical .st-progressIndicator__indicator {
+    flex-direction: column;
+    min-height: 3rem;
+  }
+
+  .st-progressIndicator__circle {
+    align-items: center;
+    background: var(--st-component-progressIndicator-circleBackground, var(--st-semantic-surface-default));
+    border: 1.5px solid
+      var(--st-component-progressIndicator-circleBorder, var(--st-semantic-border-strong));
+    border-radius: 50%;
+    color: var(--st-component-progressIndicator-iconText, var(--st-semantic-text-secondary));
+    display: inline-flex;
+    flex: 0 0 auto;
+    font-size: 0.75rem;
+    font-weight: 600;
+    height: 1.5rem;
+    justify-content: center;
+    line-height: 1;
+    width: 1.5rem;
+    z-index: 1;
+  }
+
+  .st-progressIndicator__index {
+    line-height: 1;
+  }
+
+  .st-progressIndicator__dot {
+    background: currentColor;
+    border-radius: 50%;
+    height: 0.5rem;
+    width: 0.5rem;
+  }
+
+  .st-progressIndicator__connector {
+    background: var(--st-component-progressIndicator-connector, var(--st-semantic-border-subtle));
+    flex: 1 1 auto;
+  }
+
+  .st-progressIndicator--horizontal .st-progressIndicator__connector {
+    height: 2px;
+    margin-top: calc(0.75rem - 1px);
+  }
+
+  .st-progressIndicator--vertical .st-progressIndicator__connector {
+    margin-left: calc(0.75rem - 1px);
+    min-height: 1.5rem;
+    width: 2px;
+  }
+
+  .st-progressIndicator__text {
+    display: grid;
+    gap: 0.125rem;
+    min-width: 0;
+  }
+
+  .st-progressIndicator--horizontal .st-progressIndicator__text {
+    padding-right: var(--st-spacing-3, 0.75rem);
+    padding-top: var(--st-spacing-2, 0.5rem);
+  }
+
+  .st-progressIndicator--vertical .st-progressIndicator__text {
+    padding-bottom: var(--st-spacing-3, 0.75rem);
+  }
+
+  .st-progressIndicator__label {
+    color: var(--st-component-progressIndicator-text, var(--st-semantic-text-primary));
+    font-size: 0.875rem;
+    font-weight: 600;
+  }
+
+  .st-progressIndicator__description {
+    color: var(--st-component-progressIndicator-descriptionText, var(--st-semantic-text-secondary));
+    font-size: 0.8125rem;
+  }
+
+  /* Status: complete */
+  .st-progressIndicator__step--complete .st-progressIndicator__circle {
+    background: var(
+      --st-component-progressIndicator-completeBackground,
+      var(--st-semantic-action-primary)
+    );
+    border-color: var(
+      --st-component-progressIndicator-completeBackground,
+      var(--st-semantic-action-primary)
+    );
+    color: var(--st-component-progressIndicator-completeIcon, var(--st-semantic-action-primaryText));
+  }
+
+  .st-progressIndicator__step--complete .st-progressIndicator__connector {
+    background: var(
+      --st-component-progressIndicator-completeConnector,
+      var(--st-semantic-action-primary)
+    );
+  }
+
+  /* Status: current */
+  .st-progressIndicator__step--current .st-progressIndicator__circle {
+    border-color: var(
+      --st-component-progressIndicator-currentBorder,
+      var(--st-semantic-action-primary)
+    );
+    color: var(--st-component-progressIndicator-currentText, var(--st-semantic-action-primary));
+  }
+
+  .st-progressIndicator__step--current .st-progressIndicator__label {
+    color: var(--st-component-progressIndicator-currentText, var(--st-semantic-action-primary));
+  }
+
+  /* Status: invalid */
+  .st-progressIndicator__step--invalid .st-progressIndicator__circle {
+    border-color: var(
+      --st-component-progressIndicator-invalidBorder,
+      var(--st-semantic-feedback-error)
+    );
+    color: var(--st-component-progressIndicator-invalidText, var(--st-semantic-feedback-error));
+  }
+
+  .st-progressIndicator__step--invalid .st-progressIndicator__label {
+    color: var(--st-component-progressIndicator-invalidText, var(--st-semantic-feedback-error));
+  }
+
+  /* Status: disabled */
+  .st-progressIndicator__step--disabled {
+    opacity: 0.55;
+  }
+
+  .st-progressIndicator__step--disabled .st-progressIndicator__label,
+  .st-progressIndicator__step--disabled .st-progressIndicator__description {
+    color: var(--st-component-progressIndicator-disabledText, var(--st-semantic-text-muted));
+  }
+</style>

package/dist/ProgressIndicator.svelte.d.ts

@@ -0,0 +1,18 @@
+export type ProgressIndicatorStatus = "complete" | "current" | "upcoming" | "invalid" | "disabled";
+export interface ProgressIndicatorItem {
+    value: string;
+    label: string;
+    description?: string;
+    status?: ProgressIndicatorStatus;
+}
+import type { HTMLAttributes } from "svelte/elements";
+type ProgressIndicatorProps = Omit<HTMLAttributes<HTMLOListElement>, "class"> & {
+    items: ProgressIndicatorItem[];
+    vertical?: boolean;
+    label?: string;
+    class?: string;
+};
+declare const ProgressIndicator: import("svelte").Component<ProgressIndicatorProps, {}, "">;
+type ProgressIndicator = ReturnType<typeof ProgressIndicator>;
+export default ProgressIndicator;
+//# sourceMappingURL=ProgressIndicator.svelte.d.ts.map

package/dist/ProgressIndicator.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressIndicator.svelte.d.ts","sourceRoot":"","sources":["../src/lib/ProgressIndicator.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,uBAAuB,GAC/B,UAAU,GACV,SAAS,GACT,UAAU,GACV,SAAS,GACT,UAAU,CAAC;AAEf,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,uBAAuB,CAAC;CAClC;AAGH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,sBAAsB,GAAG,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAC,GAAG;IAC9E,KAAK,EAAE,qBAAqB,EAAE,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAmEJ,QAAA,MAAM,iBAAiB,4DAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/SkeletonText.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type SkeletonTextProps = Omit<HTMLAttributes<HTMLDivElement>, "class"> & {
+    lines?: number;
+    width?: string;
+    heading?: boolean;
+    paragraph?: boolean;
+    class?: string;
+  };
+
+  let {
+    lines = 1,
+    width,
+    heading = false,
+    paragraph = false,
+    class: className,
+    ...rest
+  }: SkeletonTextProps = $props();
+
+  const wrapperClasses = () => ["st-skeleton", className].filter(Boolean).join(" ");
+  const lineClasses = () =>
+    ["st-skeleton__line", heading ? "st-skeleton__line--heading" : null].filter(Boolean).join(" ");
+  const lineCount = () => (paragraph ? Math.max(lines, 3) : lines);
+
+  function lineWidth(index: number, total: number): string | undefined {
+    if (width && index === 0) return width;
+    if (paragraph && index === total - 1) return "60%";
+    return undefined;
+  }
+</script>
+
+<div {...rest} class={wrapperClasses()} role="status" aria-label="Loading…" aria-busy="true">
+  {#each Array.from({ length: lineCount() }) as _, i (i)}
+    <span class={lineClasses()} style={lineWidth(i, lineCount()) ? `width:${lineWidth(i, lineCount())}` : undefined}></span>
+  {/each}
+</div>
+
+<style>
+  .st-skeleton {
+    display: grid;
+    gap: 0.5rem;
+    width: 100%;
+  }
+
+  .st-skeleton__line {
+    background: linear-gradient(
+      90deg,
+      var(--st-semantic-surface-subtle, #eaeef2),
+      var(--st-semantic-border-subtle, #d8dee4),
+      var(--st-semantic-surface-subtle, #eaeef2)
+    );
+    background-size: 200% 100%;
+    border-radius: 0.25rem;
+    display: block;
+    height: 0.875rem;
+    width: 100%;
+    animation: st-skeleton-shimmer 1.4s ease-in-out infinite;
+  }
+
+  .st-skeleton__line--heading {
+    height: 1.25rem;
+  }
+
+  @keyframes st-skeleton-shimmer {
+    0% {
+      background-position: 200% 0;
+    }
+    100% {
+      background-position: -200% 0;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .st-skeleton__line {
+      animation: none;
+    }
+  }
+</style>

package/dist/SkeletonText.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { HTMLAttributes } from "svelte/elements";
+type SkeletonTextProps = Omit<HTMLAttributes<HTMLDivElement>, "class"> & {
+    lines?: number;
+    width?: string;
+    heading?: boolean;
+    paragraph?: boolean;
+    class?: string;
+};
+declare const SkeletonText: import("svelte").Component<SkeletonTextProps, {}, "">;
+type SkeletonText = ReturnType<typeof SkeletonText>;
+export default SkeletonText;
+//# sourceMappingURL=SkeletonText.svelte.d.ts.map

package/dist/SkeletonText.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonText.svelte.d.ts","sourceRoot":"","sources":["../src/lib/SkeletonText.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,iBAAiB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,GAAG;IACvE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAoCJ,QAAA,MAAM,YAAY,uDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}