@uibit/carousel 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 UIBit Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,27 @@
+# Carousel
+
+[Interactive Demonstration](https://rawlings.github.io/uibit/components/carousel)
+
+Carousel provides a fluid and responsive content presentation display that invites exploration. With smooth transitions, touch responsiveness, and elegant pagination control, it showcases visual content without cluttering the interface structure.
+
+## Value Delivery
+
+- **Effortless Discovery** – Users can browse through galleries or testimonials at their own pace, maintaining layout context.
+- **Space Efficiency** – Displays multiple featured items in a single container, preventing vertical page bloat.
+- **Responsive Layouts** – Adapts item counts and dimensions smoothly between compact mobile screens and spacious desktops.
+- **Polished Presentation** – Subtle animations and support for optional automatic cycles create a high-end, responsive feel.
+
+## Ideal Applications
+
+- **Product Galleries** – Displaying multi-angle shots or catalog collections.
+- **Content Showcases** – Highlighting blog posts, featured articles, or portfolio highlights.
+- **Testimonial Carousels** – Presenting social proof and user feedback in an elegant, interactive format.
+
+## Further Information
+
+Detailed design guidelines, customizable attributes, and integration examples are available on our documentation site.
+
+
+## Changelog
+
+Please see the [Changelog](CHANGELOG.md) for version history.

package/custom-elements.json

@@ -0,0 +1,527 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/carousel.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Accessible, scroll-driven carousel with keyboard navigation, auto-play,\nand configurable items-per-view via CSS custom properties.",
+          "name": "UIBitCarousel",
+          "cssProperties": [
+            {
+              "description": "Gap between slides",
+              "name": "--uibit-carousel-gap",
+              "default": "1rem"
+            },
+            {
+              "description": "Padding inside the viewport around slides",
+              "name": "--uibit-carousel-padding",
+              "default": "0"
+            },
+            {
+              "description": "Scroll animation duration",
+              "name": "--uibit-carousel-duration",
+              "default": "300ms"
+            },
+            {
+              "description": "Number of slides visible at once",
+              "name": "--uibit-carousel-items-per-view",
+              "default": "1"
+            },
+            {
+              "description": "Border color of the viewport",
+              "name": "--uibit-carousel-border-color",
+              "default": "#e5e7eb"
+            },
+            {
+              "description": "Background of prev/next buttons",
+              "name": "--uibit-carousel-button-bg",
+              "default": "#f9fafb"
+            },
+            {
+              "description": "Hover background of prev/next buttons",
+              "name": "--uibit-carousel-button-bg-hover",
+              "default": "#f3f4f6"
+            },
+            {
+              "description": "Hover text/icon color of prev/next buttons",
+              "name": "--uibit-carousel-button-color-hover",
+              "default": "#ffffff"
+            },
+            {
+              "description": "Background of inactive indicator dots",
+              "name": "--uibit-carousel-indicator-bg",
+              "default": "#e5e7eb"
+            },
+            {
+              "description": "Background of the active indicator dot",
+              "name": "--uibit-carousel-indicator-active-bg",
+              "default": "#000000"
+            },
+            {
+              "description": "Color of the focus outline on buttons",
+              "name": "--uibit-carousel-focus-color",
+              "default": "#000000"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The root carousel container",
+              "name": "carousel"
+            },
+            {
+              "description": "The overflow-hidden viewport",
+              "name": "viewport"
+            },
+            {
+              "description": "The scrollable slides row",
+              "name": "content"
+            },
+            {
+              "description": "The control bar below the viewport",
+              "name": "controls"
+            },
+            {
+              "description": "The prev/next button group",
+              "name": "buttons"
+            },
+            {
+              "description": "Each navigation button",
+              "name": "button"
+            },
+            {
+              "description": "The previous slide button",
+              "name": "button-prev"
+            },
+            {
+              "description": "The next slide button",
+              "name": "button-next"
+            },
+            {
+              "description": "The indicator dot group",
+              "name": "indicators"
+            },
+            {
+              "description": "Each indicator dot",
+              "name": "indicator"
+            },
+            {
+              "description": "Added to the active indicator dot",
+              "name": "indicator-active"
+            }
+          ],
+          "slots": [
+            {
+              "description": "One or more slide elements (add `slot=\"item\"` to each child)",
+              "name": "item"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "autoPlay",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Automatically advance slides on a timer.",
+              "attribute": "auto-play"
+            },
+            {
+              "kind": "field",
+              "name": "autoPlayInterval",
+              "type": {
+                "text": "number"
+              },
+              "default": "5000",
+              "description": "Milliseconds between auto-play advances.",
+              "attribute": "auto-play-interval"
+            },
+            {
+              "kind": "field",
+              "name": "loop",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "When `true`, the carousel wraps from the last slide back to the first.",
+              "attribute": "loop"
+            },
+            {
+              "kind": "field",
+              "name": "itemsPerView",
+              "type": {
+                "text": "number"
+              },
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "gap",
+              "type": {
+                "text": "number"
+              },
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "duration",
+              "type": {
+                "text": "number"
+              },
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "content",
+              "type": {
+                "text": "HTMLElement | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "viewport",
+              "type": {
+                "text": "HTMLElement | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "slotElement",
+              "type": {
+                "text": "HTMLSlotElement | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "currentIndex",
+              "type": {
+                "text": "number"
+              },
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "totalSlides",
+              "type": {
+                "text": "number"
+              },
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "canPrev",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "canNext",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true"
+            },
+            {
+              "kind": "field",
+              "name": "autoPlayTimer",
+              "type": {
+                "text": "number | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "resizeObserver",
+              "type": {
+                "text": "ResizeObserver | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "slideObserver",
+              "type": {
+                "text": "IntersectionObserver | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "slideIntersectionRatios",
+              "privacy": "private",
+              "default": "new Map<Element, number>()"
+            },
+            {
+              "kind": "field",
+              "name": "isProgrammaticScroll",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "programmaticScrollTimeout",
+              "type": {
+                "text": "number | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "isPausedByInteraction",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "handlePointerEnter",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handlePointerLeave",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleFocusIn",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleFocusOut",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "setupCarousel",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "setupSlideObserver",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "setupResizeObserver",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "setupKeyboardNavigation",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "setupAutoPlay",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "stopAutoPlay",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "getSlides",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "HTMLElement[]"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "updateNavigationState",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "prev"
+            },
+            {
+              "kind": "method",
+              "name": "next"
+            },
+            {
+              "kind": "method",
+              "name": "goToSlide",
+              "parameters": [
+                {
+                  "name": "index",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "scrollToSlide",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "index",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "emitSlideChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleSlotChange",
+              "privacy": "private"
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "{ index: number, totalSlides: number }"
+              },
+              "description": "Fired when the active slide changes",
+              "name": "slide-change"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "auto-play",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Automatically advance slides on a timer.",
+              "fieldName": "autoPlay"
+            },
+            {
+              "name": "auto-play-interval",
+              "type": {
+                "text": "number"
+              },
+              "default": "5000",
+              "description": "Milliseconds between auto-play advances.",
+              "fieldName": "autoPlayInterval"
+            },
+            {
+              "name": "loop",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "When `true`, the carousel wraps from the last slide back to the first.",
+              "fieldName": "loop"
+            }
+          ],
+          "superclass": {
+            "name": "UIBitElement",
+            "package": "@uibit/core"
+          },
+          "tagName": "uibit-carousel",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "UIBitCarousel",
+          "declaration": {
+            "name": "UIBitCarousel",
+            "module": "src/carousel.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "uibit-carousel",
+          "declaration": {
+            "name": "UIBitCarousel",
+            "module": "src/carousel.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "UIBitCarousel",
+            "module": "src/carousel.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "UIBitCarousel",
+            "module": "./carousel"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "CarouselConfig",
+          "declaration": {
+            "name": "CarouselConfig",
+            "module": "./types"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "SlideChangeEvent",
+          "declaration": {
+            "name": "SlideChangeEvent",
+            "module": "./types"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "styles",
+          "default": "css` :host { --uibit-carousel-gap: var(--uibit-spacing-4, 1rem); --uibit-carousel-padding: 0; --uibit-carousel-duration: 300ms; --uibit-carousel-items-per-view: 1; --uibit-carousel-border-color: var(--uibit-border-color, var(--uibit-color-gray-200, #e5e7eb)); --uibit-carousel-button-bg: var(--uibit-bg-surface, var(--uibit-color-white, #ffffff)); --uibit-carousel-button-bg-hover: var(--uibit-focus-color, var(--uibit-color-black, #000000)); --uibit-carousel-button-color-hover: var(--uibit-color-white, #ffffff); --uibit-carousel-indicator-bg: var(--uibit-border-color, var(--uibit-color-gray-200, #e5e7eb)); --uibit-carousel-indicator-active-bg: var(--uibit-focus-color, var(--uibit-color-black, #000000)); --uibit-carousel-focus-color: var(--uibit-focus-color, var(--uibit-color-black, #000000)); display: block; width: 100%; } .carousel { display: flex; flex-direction: column; gap: var(--uibit-spacing-4, 1rem); width: 100%; } .carousel-viewport { position: relative; overflow: hidden; border: 0.0625rem solid var(--uibit-carousel-border-color); border-radius: var(--uibit-radius-2xl, 0.75rem); background-color: var(--uibit-bg-surface, var(--uibit-color-white, #ffffff)); } .carousel-content { display: flex; gap: var(--uibit-carousel-gap); overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory; padding: var(--uibit-carousel-padding, 0); width: 100%; scrollbar-width: none; -ms-overflow-style: none; } .carousel-content::-webkit-scrollbar { display: none; } slot[name='item'] { display: contents; } ::slotted([slot='item']), ::slotted(:not([slot])) { scroll-snap-align: start; scroll-snap-stop: always; width: calc( (100% - (var(--uibit-carousel-items-per-view, 1) - 1) * var(--uibit-carousel-gap, 1rem)) / var(--uibit-carousel-items-per-view, 1) ); flex-shrink: 0; min-width: 0; } .carousel-controls { display: flex; align-items: center; justify-content: space-between; gap: var(--uibit-spacing-4, 1rem); } .carousel-buttons { display: flex; gap: 0.5rem; } .carousel-button { width: 2.25rem; height: 2.25rem; background-color: var(--uibit-carousel-button-bg, #ffffff); border: 0.0625rem solid var(--uibit-carousel-border-color, #e5e7eb); border-radius: 9999rem; cursor: pointer; color: var(--uibit-text-primary, #111827); transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, opacity 100ms ease, transform 150ms ease; display: inline-flex; align-items: center; justify-content: center; box-shadow: none; } .carousel-button:hover:not(:disabled) { background-color: var(--uibit-carousel-button-bg-hover, #f3f4f6); color: var(--uibit-carousel-button-color-hover, #ffffff); border-color: var(--uibit-carousel-button-bg-hover, #000000); box-shadow: none; transform: scale(1.06); } .carousel-button:active:not(:disabled) { transform: scale(0.95); } .carousel-button:disabled { opacity: 0.3; cursor: not-allowed; } .carousel-button:focus-visible { outline: 0.125rem solid var(--uibit-carousel-focus-color); outline-offset: 0.125rem; } .carousel-indicators { display: flex; gap: 0.5rem; align-items: center; justify-content: center; } .carousel-indicator { width: 0.5rem; height: 0.5rem; border-radius: 9999rem; background-color: var(--uibit-carousel-indicator-bg); cursor: pointer; border: none; padding: 0; transition: background-color 150ms ease, width 150ms ease, border-radius 150ms ease, opacity 100ms ease; } .carousel-indicator:hover { background-color: var(--uibit-carousel-indicator-active-bg); } .carousel-indicator:active { opacity: 0.6; } .carousel-indicator.active { width: 1.25rem; border-radius: 0.25rem; background-color: var(--uibit-carousel-indicator-active-bg); } .carousel-indicator:focus-visible { outline: 0.125rem solid var(--uibit-carousel-focus-color); outline-offset: 0.125rem; } @media (max-width: 40rem) { .carousel-controls { flex-wrap: wrap; } .carousel-content { padding: var(--uibit-carousel-padding, 0); } } `"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "styles",
+          "declaration": {
+            "name": "styles",
+            "module": "src/styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/types.ts",
+      "declarations": [],
+      "exports": []
+    }
+  ]
+}

package/dist/carousel.d.ts

@@ -0,0 +1,85 @@
+import { UIBitElement } from '@uibit/core';
+import type { CarouselConfig } from './types';
+/**
+ * Accessible, scroll-driven carousel with keyboard navigation, auto-play,
+ * and configurable items-per-view via CSS custom properties.
+ *
+ * @fires {{ index: number, totalSlides: number }} slide-change - Fired when the active slide changes
+ *
+ * @slot item - One or more slide elements (add `slot="item"` to each child)
+ *
+ * @cssprop [--uibit-carousel-gap=1rem] - Gap between slides
+ * @cssprop [--uibit-carousel-padding=0] - Padding inside the viewport around slides
+ * @cssprop [--uibit-carousel-duration=300ms] - Scroll animation duration
+ * @cssprop [--uibit-carousel-items-per-view=1] - Number of slides visible at once
+ * @cssprop [--uibit-carousel-border-color=#e5e7eb] - Border color of the viewport
+ * @cssprop [--uibit-carousel-button-bg=#f9fafb] - Background of prev/next buttons
+ * @cssprop [--uibit-carousel-button-bg-hover=#f3f4f6] - Hover background of prev/next buttons
+ * @cssprop [--uibit-carousel-button-color-hover=#ffffff] - Hover text/icon color of prev/next buttons
+ * @cssprop [--uibit-carousel-indicator-bg=#e5e7eb] - Background of inactive indicator dots
+ * @cssprop [--uibit-carousel-indicator-active-bg=#000000] - Background of the active indicator dot
+ * @cssprop [--uibit-carousel-focus-color=#000000] - Color of the focus outline on buttons
+ *
+ * @csspart carousel - The root carousel container
+ * @csspart viewport - The overflow-hidden viewport
+ * @csspart content - The scrollable slides row
+ * @csspart controls - The control bar below the viewport
+ * @csspart buttons - The prev/next button group
+ * @csspart button - Each navigation button
+ * @csspart button-prev - The previous slide button
+ * @csspart button-next - The next slide button
+ * @csspart indicators - The indicator dot group
+ * @csspart indicator - Each indicator dot
+ * @csspart indicator-active - Added to the active indicator dot
+ */
+export declare class UIBitCarousel extends UIBitElement {
+    static styles: import("lit").CSSResult;
+    /** Automatically advance slides on a timer. */
+    autoPlay: boolean;
+    /** Milliseconds between auto-play advances. */
+    autoPlayInterval: number;
+    /** When `true`, the carousel wraps from the last slide back to the first. */
+    loop: boolean;
+    get itemsPerView(): number;
+    get gap(): number;
+    get duration(): number;
+    content?: HTMLElement;
+    viewport?: HTMLElement;
+    slotElement?: HTMLSlotElement;
+    currentIndex: number;
+    totalSlides: number;
+    canPrev: boolean;
+    canNext: boolean;
+    private autoPlayTimer?;
+    private resizeObserver?;
+    private slideObserver?;
+    private slideIntersectionRatios;
+    private isProgrammaticScroll;
+    private programmaticScrollTimeout?;
+    private isPausedByInteraction;
+    private handlePointerEnter;
+    private handlePointerLeave;
+    private handleFocusIn;
+    private handleFocusOut;
+    constructor(config?: CarouselConfig);
+    protected firstUpdated(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    disconnectedCallback(): void;
+    private setupCarousel;
+    private setupSlideObserver;
+    private setupResizeObserver;
+    private setupKeyboardNavigation;
+    private setupAutoPlay;
+    private stopAutoPlay;
+    private getSlides;
+    private updateNavigationState;
+    prev(): void;
+    next(): void;
+    goToSlide(index: number): void;
+    private scrollToSlide;
+    private emitSlideChange;
+    private handleSlotChange;
+    render(): import("lit").TemplateResult<1>;
+}
+export default UIBitCarousel;
+//# sourceMappingURL=carousel.d.ts.map

package/dist/carousel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel.d.ts","sourceRoot":"","sources":["../src/carousel.ts"],"names":[],"mappings":"AACA,OAAO,EAAgD,YAAY,EAAE,MAAM,aAAa,CAAC;AAGzF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAG9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,qBACa,aAAc,SAAQ,YAAY;IAC7C,MAAM,CAAC,MAAM,0BAAU;IAEvB,+CAA+C;IACM,QAAQ,UAAS;IACtE,+CAA+C;IACc,gBAAgB,SAAQ;IACrF,6EAA6E;IAChD,IAAI,UAAQ;IAEzC,IAAI,YAAY,IAAI,MAAM,CAIzB;IAED,IAAI,GAAG,IAAI,MAAM,CAIhB;IAED,IAAI,QAAQ,IAAI,MAAM,CAOrB;IAE2B,OAAO,CAAC,EAAE,WAAW,CAAC;IACrB,QAAQ,CAAC,EAAE,WAAW,CAAC;IACxB,WAAW,CAAC,EAAE,eAAe,CAAC;IAEjD,YAAY,SAAK;IACjB,WAAW,SAAK;IAChB,OAAO,UAAS;IAChB,OAAO,UAAQ;IAExB,OAAO,CAAC,aAAa,CAAC,CAAS;IAC/B,OAAO,CAAC,cAAc,CAAC,CAAiB;IACxC,OAAO,CAAC,aAAa,CAAC,CAAuB;IAC7C,OAAO,CAAC,uBAAuB,CAA8B;IAC7D,OAAO,CAAC,oBAAoB,CAAS;IACrC,OAAO,CAAC,yBAAyB,CAAC,CAAS;IAC3C,OAAO,CAAC,qBAAqB,CAAS;IAEtC,OAAO,CAAC,kBAAkB,CAGxB;IAEF,OAAO,CAAC,kBAAkB,CAKxB;IAEF,OAAO,CAAC,aAAa,CAGnB;IAEF,OAAO,CAAC,cAAc,CAKpB;IAEF,YAAY,MAAM,CAAC,EAAE,cAAc,EAgBlC;IAED,SAAS,CAAC,YAAY,SASrB;IAED,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,QAW9C;IAED,oBAAoB,SAMnB;IAED,OAAO,CAAC,aAAa;IAqBrB,OAAO,CAAC,kBAAkB;IAuC1B,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,uBAAuB;IAY/B,OAAO,CAAC,aAAa;IAarB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,SAAS;IAgBjB,OAAO,CAAC,qBAAqB;IAK7B,IAAI,SAMH;IAED,IAAI,SAMH;IAED,SAAS,CAAC,KAAK,EAAE,MAAM,QAItB;IAED,OAAO,CAAC,aAAa;IA6CrB,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,gBAAgB;IAIxB,MAAM,oCAoEL;CACF;eAEc,aAAa"}