@sp-days-framework/docusaurus-frontpage-collection 1.0.0

package/lib/components/FancyHeader/index.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import type { WithChildren } from '../../utils/types';
+export interface FancyHeaderProps extends WithChildren {
+    /** The heading level (default: 'h2') */
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    /** Additional CSS class */
+    className?: string;
+}
+/**
+ * FancyHeader Component
+ *
+ * A header with an underline accent and section wrapper.
+ * Perfect for creating visually distinct section headers.
+ *
+ * @example
+ * ```tsx
+ * <FancyHeader>IconContainers</FancyHeader>
+ *
+ * <FancyHeader as="h3">Getting Started</FancyHeader>
+ * ```
+ */
+export declare const FancyHeader: React.FC<FancyHeaderProps>;
+export default FancyHeader;
+//# sourceMappingURL=index.d.ts.map

package/lib/components/FancyHeader/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FancyHeader/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAGtD,MAAM,WAAW,gBAAiB,SAAQ,YAAY;IACpD,wCAAwC;IACxC,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC7C,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAqBlD,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/FancyHeader/index.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FancyHeader = void 0;
+const react_1 = __importDefault(require("react"));
+const clsx_1 = __importDefault(require("clsx"));
+const Heading_1 = __importDefault(require("@theme/Heading"));
+const styles_module_css_1 = __importDefault(require("./styles.module.css"));
+/**
+ * FancyHeader Component
+ *
+ * A header with an underline accent and section wrapper.
+ * Perfect for creating visually distinct section headers.
+ *
+ * @example
+ * ```tsx
+ * <FancyHeader>IconContainers</FancyHeader>
+ *
+ * <FancyHeader as="h3">Getting Started</FancyHeader>
+ * ```
+ */
+const FancyHeader = ({ as = 'h2', className, children, ...props }) => {
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { style: { display: 'block', marginTop: '1rem' } }),
+        react_1.default.createElement("div", { className: styles_module_css_1.default.section },
+            react_1.default.createElement(Heading_1.default, { as: as, className: (0, clsx_1.default)(styles_module_css_1.default.fancyHeader, className), ...props }, children))));
+};
+exports.FancyHeader = FancyHeader;
+exports.default = exports.FancyHeader;
+//# sourceMappingURL=index.js.map

package/lib/components/FancyHeader/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/FancyHeader/index.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,gDAAwB;AACxB,6DAAqC;AAErC,4EAAyC;AASzC;;;;;;;;;;;;GAYG;AACI,MAAM,WAAW,GAA+B,CAAC,EACtD,EAAE,GAAG,IAAI,EACT,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,EAAE;IACH,OAAO,CACL;QACE,uCAAK,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,GAAQ;QAE3D,uCAAK,SAAS,EAAE,2BAAM,CAAC,OAAO;YAC5B,8BAAC,iBAAO,IACN,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,IAAA,cAAI,EAAC,2BAAM,CAAC,WAAW,EAAE,SAAS,CAAC,KAC1C,KAAK,IAER,QAAQ,CACD,CACN,CACL,CACJ,CAAC;AACJ,CAAC,CAAC;AArBW,QAAA,WAAW,eAqBtB;AAEF,kBAAe,mBAAW,CAAC"}

package/lib/components/FancyHeader/styles.module.css

@@ -0,0 +1,23 @@
+/**
+ * FancyHeader component styles
+ */
+
+.fancyHeader {
+  font-size: 1.8rem;
+  position: relative;
+}
+
+.fancyHeader:after {
+  content: '';
+  position: absolute;
+  bottom: -0.5rem;
+  left: 0;
+  width: 4rem;
+  height: 3px;
+  background-color: var(--ifm-color-primary);
+}
+
+.section {
+  margin-bottom: 3rem;
+  scroll-margin-top: 70px;
+}

package/lib/components/GetStarted/index.d.ts

@@ -0,0 +1,99 @@
+import React from 'react';
+import type { WithChildren } from '../../utils/types';
+import type { IconifyConfig, CustomSvgConfig, CustomImageConfig, IconColorConfig, TitleColorConfig } from '../../utils/types';
+export interface ExploreItemProps extends WithChildren {
+    /** Title of the explore item */
+    title: string;
+    /** Iconify icon configuration */
+    iconify?: IconifyConfig | string;
+    /** Custom SVG configuration (inline rendering, supports color override) */
+    customSvg?: CustomSvgConfig;
+    /** Custom image configuration (img tag, no color override) */
+    customImage?: CustomImageConfig;
+    /** Icon color configuration */
+    iconColors?: IconColorConfig;
+    /** Title color configuration */
+    titleColors?: TitleColorConfig;
+    /** Disable hover animations (default: false) */
+    disableAnimation?: boolean;
+    /** Link to navigate to when clicked */
+    link: string;
+}
+export interface ExploreProps extends WithChildren {
+    /** Minimum width for each explore item (default: '250px') */
+    minWidth?: string;
+    /** Fixed number of columns (0 for auto-responsive, default: 0) */
+    columns?: number;
+}
+export interface GetStartedProps extends WithChildren {
+    /** Text for the call-to-action button */
+    buttonText: string;
+    /** Link for the call-to-action button */
+    buttonLink: string;
+}
+/**
+ * ExploreItem Component
+ *
+ * Individual card for exploration items.
+ * Must be used as a child of the Explore component.
+ *
+ * @example
+ * ```tsx
+ * <ExploreItem
+ *   title="Documentation"
+ *   iconify="mdi:book-open-page-variant"
+ *   link="/docs"
+ * >
+ *   Browse our comprehensive documentation
+ * </ExploreItem>
+ * ```
+ */
+export declare const ExploreItem: React.FC<ExploreItemProps>;
+/**
+ * Explore Component
+ *
+ * Container for ExploreItem components in a responsive grid.
+ * Must be used as a child of GetStarted component.
+ *
+ * @example
+ * ```tsx
+ * <GetStarted buttonText="Get Started" buttonLink="/start">
+ *   <Explore>
+ *     <ExploreItem title="Docs" icon="mdi:book" link="/docs">
+ *       Read the docs
+ *     </ExploreItem>
+ *     <ExploreItem title="Tutorial" icon="mdi:school" link="/tutorial">
+ *       Follow tutorial
+ *     </ExploreItem>
+ *   </Explore>
+ * </GetStarted>
+ * ```
+ */
+export declare const Explore: React.FC<ExploreProps>;
+/**
+ * GetStarted Component
+ *
+ * Call-to-action section with optional exploration items.
+ *
+ * @example
+ * ```tsx
+ * <GetStarted buttonText="Start Learning" buttonLink="/modules/module1">
+ *   ## Ready for launch?
+ *
+ *   Proceed to Module 1 to begin your journey!
+ *
+ *   <Explore>
+ *     <ExploreItem
+ *       title="Documentation"
+ *       icon="mdi:book"
+ *       link="/docs"
+ *     >
+ *       Browse documentation
+ *     </ExploreItem>
+ *   </Explore>
+ * </GetStarted>
+ * ```
+ */
+export declare const GetStarted: React.FC<GetStartedProps>;
+export default GetStarted;
+//# sourceMappingURL=index.d.ts.map

package/lib/components/GetStarted/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/GetStarted/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,KAAK,EAAE,aAAa,EAAE,eAAe,EAAE,iBAAiB,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAG9H,MAAM,WAAW,gBAAiB,SAAQ,YAAY;IACpD,gCAAgC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,OAAO,CAAC,EAAE,aAAa,GAAG,MAAM,CAAC;IACjC,2EAA2E;IAC3E,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,8DAA8D;IAC9D,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAChC,+BAA+B;IAC/B,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,gCAAgC;IAChC,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,gDAAgD;IAChD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,uCAAuC;IACvC,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,YAAa,SAAQ,YAAY;IAChD,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kEAAkE;IAClE,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,eAAgB,SAAQ,YAAY;IACnD,yCAAyC;IACzC,UAAU,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,UAAU,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAkDlD,CAAC;AAEF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAsB1C,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAkChD,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/GetStarted/index.js

@@ -0,0 +1,127 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GetStarted = exports.Explore = exports.ExploreItem = void 0;
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@mdx-js/react");
+const Link_1 = __importDefault(require("@docusaurus/Link"));
+const ThemedIcon_1 = require("../../utils/ThemedIcon");
+const styles_module_css_1 = __importDefault(require("./styles.module.css"));
+/**
+ * ExploreItem Component
+ *
+ * Individual card for exploration items.
+ * Must be used as a child of the Explore component.
+ *
+ * @example
+ * ```tsx
+ * <ExploreItem
+ *   title="Documentation"
+ *   iconify="mdi:book-open-page-variant"
+ *   link="/docs"
+ * >
+ *   Browse our comprehensive documentation
+ * </ExploreItem>
+ * ```
+ */
+const ExploreItem = ({ title, iconify, customSvg, customImage, iconColors, titleColors, disableAnimation = false, link, children }) => {
+    // Build iconify config with colors if provided
+    const iconifyWithColors = iconify && iconColors
+        ? (typeof iconify === 'string'
+            ? { icon: iconify, colors: iconColors }
+            : { ...iconify, colors: { ...iconify.colors, ...iconColors } })
+        : iconify;
+    // Build CSS custom properties for title colors
+    const titleCssVars = titleColors ? {
+        '--title-color': titleColors.light,
+        '--title-color-hover': titleColors.lightHover,
+        '--title-color-dark': titleColors.dark || titleColors.light,
+        '--title-color-hover-dark': titleColors.darkHover || titleColors.lightHover,
+    } : {};
+    return (react_1.default.createElement(Link_1.default, { to: link, className: styles_module_css_1.default.exploreLink },
+        react_1.default.createElement("div", { className: `${styles_module_css_1.default.exploreItem} ${disableAnimation ? styles_module_css_1.default.disableAnimation : ''}`.trim(), style: titleCssVars },
+            (iconify || customSvg || customImage) && (react_1.default.createElement(ThemedIcon_1.ThemedIcon, { iconify: iconifyWithColors, customSvg: customSvg, customImage: customImage, alt: title, className: styles_module_css_1.default.exploreItemIcon, supportsHover: true, disableAnimation: disableAnimation })),
+            react_1.default.createElement("h4", { className: styles_module_css_1.default.exploreItemTitle }, title),
+            react_1.default.createElement(react_2.MDXProvider, null, children))));
+};
+exports.ExploreItem = ExploreItem;
+/**
+ * Explore Component
+ *
+ * Container for ExploreItem components in a responsive grid.
+ * Must be used as a child of GetStarted component.
+ *
+ * @example
+ * ```tsx
+ * <GetStarted buttonText="Get Started" buttonLink="/start">
+ *   <Explore>
+ *     <ExploreItem title="Docs" icon="mdi:book" link="/docs">
+ *       Read the docs
+ *     </ExploreItem>
+ *     <ExploreItem title="Tutorial" icon="mdi:school" link="/tutorial">
+ *       Follow tutorial
+ *     </ExploreItem>
+ *   </Explore>
+ * </GetStarted>
+ * ```
+ */
+const Explore = ({ children, minWidth = '250px', columns = 0 }) => {
+    // Apply custom grid styles if needed
+    const gridStyle = columns > 0 ? {
+        gridTemplateColumns: `repeat(${columns}, 1fr)`
+    } : {
+        gridTemplateColumns: `repeat(auto-fit, minmax(${minWidth}, 1fr))`
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: styles_module_css_1.default.exploreSectionTitle },
+            react_1.default.createElement("h3", null, "Explore")),
+        react_1.default.createElement("div", { className: styles_module_css_1.default.exploreGrid, style: gridStyle }, children)));
+};
+exports.Explore = Explore;
+/**
+ * GetStarted Component
+ *
+ * Call-to-action section with optional exploration items.
+ *
+ * @example
+ * ```tsx
+ * <GetStarted buttonText="Start Learning" buttonLink="/modules/module1">
+ *   ## Ready for launch?
+ *
+ *   Proceed to Module 1 to begin your journey!
+ *
+ *   <Explore>
+ *     <ExploreItem
+ *       title="Documentation"
+ *       icon="mdi:book"
+ *       link="/docs"
+ *     >
+ *       Browse documentation
+ *     </ExploreItem>
+ *   </Explore>
+ * </GetStarted>
+ * ```
+ */
+const GetStarted = ({ buttonText, buttonLink, children }) => {
+    // Extract Explore component if present
+    const mainContent = [];
+    let exploreContent = null;
+    react_1.default.Children.forEach(children, (child) => {
+        if (react_1.default.isValidElement(child) && child.type === exports.Explore) {
+            exploreContent = child;
+        }
+        else {
+            mainContent.push(child);
+        }
+    });
+    return (react_1.default.createElement("div", { className: styles_module_css_1.default.getStartedCta },
+        react_1.default.createElement(react_2.MDXProvider, null, mainContent),
+        react_1.default.createElement("div", { className: "margin-top--lg" },
+            react_1.default.createElement(Link_1.default, { className: "button button--primary button--lg", to: buttonLink }, buttonText)),
+        exploreContent));
+};
+exports.GetStarted = GetStarted;
+exports.default = exports.GetStarted;
+//# sourceMappingURL=index.js.map

package/lib/components/GetStarted/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/GetStarted/index.tsx"],"names":[],"mappings":"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"}

package/lib/components/GetStarted/styles.module.css

@@ -0,0 +1,174 @@
+/**
+ * GetStarted component styles
+ */
+
+.getStartedCta {
+  text-align: center;
+  padding: 0.5rem 1rem 1rem 1rem;
+  border-radius: 8px;
+  background-color: var(--ifm-background-surface-color);
+  border: 1px solid var(--ifm-color-gray-300);
+  transition: border-color 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.getStartedCta:hover {
+  border-color: var(--ifm-color-primary-lightest);
+}
+
+[data-theme="dark"] .getStartedCta {
+  border-color: var(--ifm-color-emphasis-300);
+}
+
+[data-theme="dark"] .getStartedCta:hover {
+  border-color: var(--ifm-color-primary-darkest);
+}
+
+.getStartedCta h2 {
+  font-size: 1.5rem;
+  margin-bottom: 1rem;
+}
+
+/* Button animation */
+.getStartedCta .button {
+  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.getStartedCta .button:hover {
+  transform: scale(1.05) translateY(-2px);
+}
+
+.getStartedCta .button:active {
+  transform: scale(0.98);
+}
+
+.exploreSectionTitle {
+  margin: 3rem 0 1rem;
+  position: relative;
+}
+
+.exploreSectionTitle:before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  border-top: 1px solid var(--ifm-color-gray-300);
+  z-index: 0;
+}
+
+.exploreSectionTitle h3 {
+  background-color: var(--ifm-background-surface-color);
+  font-size: 2rem;
+  display: inline-block;
+  position: relative;
+  padding: 0 1.5rem;
+  margin: 0;
+  z-index: 1;
+}
+
+.exploreGrid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1.5rem;
+  padding: 0.5rem 0.25rem 1.5rem;
+  margin-top: 1.5rem;
+  width: 100%;
+  justify-content: space-between;
+}
+
+.exploreItem {
+  padding: 1.5rem;
+  border-radius: 8px;
+  background-color: var(--ifm-color-emphasis-100);
+  box-shadow: var(--ifm-global-shadow-lw);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  height: 100%;
+  text-align: center;
+}
+
+.exploreItem:hover {
+  transform: translateY(-5px);
+  box-shadow: var(--ifm-global-shadow-md);
+}
+
+.exploreItemIcon {
+  width: 80px;
+  height: 80px;
+  margin: 0 auto 1rem;
+  color: var(--icon-color, var(--ifm-color-emphasis-600));
+  transition: color 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
+    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Ensure SVG fills the container */
+.exploreItemIcon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.exploreItem:hover .exploreItemIcon {
+  color: var(--icon-color-hover, var(--ifm-color-primary));
+  transform: scale(1.05) translateY(-2px);
+}
+
+/* Dark theme support */
+[data-theme="dark"] .exploreItemIcon {
+  color: var(
+    --icon-color-dark,
+    var(--icon-color, var(--ifm-color-emphasis-600))
+  );
+}
+
+[data-theme="dark"] .exploreItem:hover .exploreItemIcon {
+  color: var(
+    --icon-color-hover-dark,
+    var(--icon-color-hover, var(--ifm-color-primary))
+  );
+}
+
+/* Disable animation when requested */
+.exploreItem.disableAnimation:hover .exploreItemIcon {
+  transform: none;
+}
+
+.exploreItemTitle {
+  font-size: 1.3rem;
+  color: var(--title-color, var(--ifm-color-emphasis-600));
+  margin-bottom: 0.5rem;
+  transition: color 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.exploreItem:hover .exploreItemTitle {
+  color: var(--title-color-hover, var(--ifm-color-primary));
+}
+
+/* Dark theme support */
+[data-theme="dark"] .exploreItemTitle {
+  color: var(
+    --title-color-dark,
+    var(--title-color, var(--ifm-color-emphasis-600))
+  );
+}
+
+[data-theme="dark"] .exploreItem:hover .exploreItemTitle {
+  color: var(
+    --title-color-hover-dark,
+    var(--title-color-hover, var(--ifm-color-primary))
+  );
+}
+
+.exploreLink {
+  text-decoration: none !important;
+  color: inherit !important;
+  height: inherit;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  flex: 1 1;
+  min-width: 200px;
+}
+
+/* Responsive adjustments */

package/lib/components/HeroBanner/DotCrossGrid.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+export interface DotCrossGridProps {
+    dotSize?: number;
+    gap?: number;
+    color?: string;
+    pointerRadius?: number;
+    pointerInnerIntensity?: number;
+    pointerOuterIntensity?: number;
+    maxOpacity?: number;
+    minOpacity?: number;
+    randomOpacity?: boolean;
+    idleEnabled?: boolean;
+    idleAreaWidth?: number;
+    idleInterval?: number;
+    idleIntensity?: number;
+}
+/**
+ * DotCrossGrid - Simple implementation
+ *
+ * User interaction: Mouse creates crosses that auto-fade after 500ms
+ * Idle animation: Crosses appear in edges, fade after 2500ms
+ */
+export declare const DotCrossGrid: React.FC<DotCrossGridProps>;
+export default DotCrossGrid;
+//# sourceMappingURL=DotCrossGrid.d.ts.map

package/lib/components/HeroBanner/DotCrossGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DotCrossGrid.d.ts","sourceRoot":"","sources":["../../../src/components/HeroBanner/DotCrossGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAIjD,MAAM,WAAW,iBAAiB;IAChC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAG/B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IAGxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAWD;;;;;GAKG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA8RpD,CAAC;AAEF,eAAe,YAAY,CAAC"}