trepur_components 1.0.4 → 1.0.6

package/dist/src/lib/components/Timeline/Timeline.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export interface Props {
+    id?: string;
+    className?: string;
+    isHorizontal?: boolean;
+    items?: object[];
+    reverse?: boolean;
+    textCenter?: boolean;
+    useImages?: boolean;
+    horizontalComponentClasses?: string;
+    isSm?: boolean;
+}
+declare const Timeline: ({ id, className, isHorizontal, items, reverse, textCenter, useImages, horizontalComponentClasses, isSm }: Props) => JSX.Element;
+export default Timeline;

package/dist/src/lib/components/Timeline/Timeline.js

@@ -0,0 +1,127 @@
+import React from 'react';
+import classNames from 'classnames';
+import Image from '../Image/Image';
+import Column from '../Column/Column';
+import Row from '../Row/Row';
+import style from './style.module.css';
+const Timeline = ({ id, className, isHorizontal = false, items, reverse = false, textCenter, useImages = true, horizontalComponentClasses, isSm = false }) => {
+    const classList = classNames(className, style.classList);
+    const ulClasses = classNames({
+        [`${style.ulHorizontal} none-reverse`]: !reverse && isHorizontal,
+        [`${style.ul} none-reverse`]: !reverse && !isHorizontal,
+        [`${style.ulHorizontalReverse} reverse`]: reverse && isHorizontal,
+        [`${style.ulVerticalReverse} reverse`]: reverse && !isHorizontal
+    }, className, style.ulClassList, 'status-flow timeline');
+    const liClasses = classNames({
+        [style.textCenter]: textCenter,
+        [style.liHorizontal]: !reverse && isHorizontal,
+        [`${style.li} none-reverse`]: !reverse && !isHorizontal,
+        [style.liHorizontalReverse]: reverse && isHorizontal,
+        [style.liVerticalReverse]: reverse && !isHorizontal
+    }, style.liClassList, 'status-flow-item');
+    const circle = classNames({
+        'horizontal collapse': isHorizontal && isSm,
+        horizontal: isHorizontal && !isSm,
+        vertical: !isHorizontal
+    }, style.circle);
+    return (React.createElement(Column, { sm: 12, md: 12, lg: 12, xl: 12, id: id, className: classList },
+        React.createElement("div", { className: ulClasses }, items === null || items === void 0 ? void 0 : items.map((item, i) => {
+            let before;
+            if (i % 2 === 0) {
+                before = true;
+            }
+            else {
+                before = false;
+            }
+            let circlePos;
+            if (items.length - 1 > 0) {
+                if (i === 0)
+                    circlePos = 'first-circle';
+                else if (i === items.length - 1)
+                    circlePos = 'last-circle';
+                else
+                    circlePos = 'circle';
+            }
+            let verticalCircleStylesBefore;
+            if (circlePos === 'circle' && isSm) {
+                verticalCircleStylesBefore = style.circleVerticalCollapseBefore;
+            }
+            else if (circlePos === 'circle' && !isSm) {
+                verticalCircleStylesBefore = style.circleVerticalBefore;
+            }
+            else if (circlePos === 'last-circle' && isSm) {
+                verticalCircleStylesBefore = style.lastCircleVerticalCollapseBefore;
+            }
+            else if (circlePos === 'last-circle' && !isSm) {
+                verticalCircleStylesBefore = style.lastCircleVerticalBefore;
+            }
+            let verticalCircleStylesAfter;
+            if (circlePos === 'circle' && isSm) {
+                verticalCircleStylesAfter = style.circleVerticalCollapseAfter;
+            }
+            else if (circlePos === 'circle' && !isSm) {
+                verticalCircleStylesAfter = style.circleVerticalAfter;
+            }
+            else if (circlePos === 'first-circle' && isSm) {
+                verticalCircleStylesAfter = style.firstCircleVerticalCollapseAfter;
+            }
+            else if (circlePos === 'first-circle' && !isSm) {
+                verticalCircleStylesAfter = style.firstCircleVerticalAfter;
+            }
+            let horizontalCircleStylesBefore;
+            if (circlePos === 'circle' && isSm) {
+                horizontalCircleStylesBefore = style.circleHorizontalCollapseBefore;
+            }
+            else if (circlePos === 'circle' && !isSm) {
+                horizontalCircleStylesBefore = style.circleHorizontalBefore;
+            }
+            else if (circlePos === 'first-circle' && isSm) {
+                horizontalCircleStylesBefore = style.firstCircleHorizontalCollapseBefore;
+            }
+            else if (circlePos === 'first-circle' && !isSm) {
+                horizontalCircleStylesBefore = style.firstCircleHorizontalBefore;
+            }
+            let horizontalCircleStylesAfter;
+            if (circlePos === 'circle' && isSm) {
+                horizontalCircleStylesAfter = style.circleHorizontalCollapseAfter;
+            }
+            else if (circlePos === 'circle' && !isSm) {
+                horizontalCircleStylesAfter = style.circleHorizontalAfter;
+            }
+            else if (circlePos === 'first-circle' && isSm) {
+                horizontalCircleStylesAfter = style.firstCircleHorizontalCollapseAfter;
+            }
+            else if (circlePos === 'first-circle' && !isSm) {
+                horizontalCircleStylesAfter = style.firstCircleHorizontalAfter;
+            }
+            const horizonalComponentClassList = classNames(horizontalComponentClasses, 'pt-12');
+            if (isHorizontal) {
+                return (React.createElement(Column, { key: `horizontal_col_${i + 0}`, id: 'timeline-item', className: `${liClasses} py-4 mb-8` },
+                    React.createElement(Row, { className: horizontalComponentClasses }, before && item.component),
+                    React.createElement(Row, null, useImages
+                        ? (React.createElement("div", { id: circlePos, className: isHorizontal ? 'horizontal py-0 my-0' : 'vertical' },
+                            React.createElement("span", { className: horizontalCircleStylesBefore }),
+                            React.createElement(Image, Object.assign({}, item.centerImageProps)),
+                            React.createElement("span", { className: horizontalCircleStylesAfter })))
+                        : (React.createElement("p", { id: circlePos, className: circle }))),
+                    React.createElement(Row, { className: horizonalComponentClassList }, !before && item.component)));
+            }
+            else {
+                return (React.createElement(Row, { key: `vertical_row_${i + 0}`, id: 'timeline-item', className: `${liClasses} py-4` },
+                    !isSm &&
+                        React.createElement(Column, { sm: 5, md: 5, lg: 5, xl: 5, className: 'text-center my-auto' }, before && item.component),
+                    React.createElement(Column, { sm: 2, md: 2, lg: 2, xl: 2, id: 'circle-wrapper', className: 'my-auto' }, useImages
+                        ? (React.createElement("div", { id: circlePos, className: 'vertical' },
+                            React.createElement("span", { className: verticalCircleStylesBefore }),
+                            React.createElement(Image, Object.assign({}, item.centerImageProps)),
+                            React.createElement("span", { className: verticalCircleStylesAfter })))
+                        : (React.createElement("p", { id: circlePos, className: circle }))),
+                    isSm &&
+                        React.createElement(Column, { sm: 10, md: 10, lg: 10, xl: 10, className: 'text-center my-auto' }, item.component),
+                    !isSm &&
+                        React.createElement(Column, { sm: 5, md: 5, lg: 5, xl: 5, className: 'text-center my-auto' }, !before && item.component)));
+            }
+        }))));
+};
+export default Timeline;
+//# sourceMappingURL=Timeline.js.map

package/dist/src/lib/components/Timeline/Timeline.js.map

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

package/dist/src/lib/components/Timeline/style.module.css

@@ -0,0 +1,249 @@
+.classList {
+  width: 100%;
+  list-style-type: none;
+  overflow-x: auto;
+  padding-bottom: 1rem
+}
+
+.circle {
+  margin-top: 4rem;
+  margin-bottom: 4rem;
+  margin-left: auto;
+  margin-right: auto;
+  height: 1rem;
+  width: 1rem;
+  border-radius: 9999px;
+  border-width: 1px;
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+  text-align: center
+}
+
+.liClassList {
+  position: relative;
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: row;
+  line-height: 1.25
+}
+
+.liVerticalReverse {
+  flex-direction: row-reverse
+}
+
+.liHorizontalReverse {
+  flex-direction: column-reverse;
+  align-items: center
+}
+
+.li {
+  flex-direction: row
+}
+
+.liHorizontal {
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between
+}
+
+.textCenter {
+  text-align: center
+}
+
+.ulClassList {
+  position: relative;
+  display: flex;
+  list-style-type: none;
+  padding-left: 0px
+}
+
+.ulVerticalReverse {
+  flex-direction: column
+}
+
+.ulHorizontalReverse {
+  flex-direction: row;
+  justify-content: space-between
+}
+
+.ul {
+  flex-direction: column
+}
+
+.ulHorizontal {
+  flex-direction: row;
+  justify-content: space-between
+}
+
+/* Vertical */
+.circleVerticalBefore {
+  position: absolute;
+  top: 0px;
+  display: block;
+  height: 50%;
+  border-width: 2px;
+  border-style: solid;
+  --tw-border-opacity: 1;
+  border-color: rgb(0 54 160 / var(--tw-border-opacity));
+  content: "";
+  left: 49.9%;
+  z-index: -1
+}
+
+.circleVerticalAfter {
+  position: absolute;
+  bottom: 0px;
+  display: block;
+  height: 50%;
+  border-width: 2px;
+  border-style: solid;
+  --tw-border-opacity: 1;
+  border-color: rgb(0 54 160 / var(--tw-border-opacity));
+  content: "";
+  left: 49.9%;
+  z-index: -1
+}
+
+.firstCircleVerticalAfter {
+  position: absolute;
+  bottom: 0px;
+  display: block;
+  height: 50%;
+  border-width: 2px;
+  border-style: solid;
+  --tw-border-opacity: 1;
+  border-color: rgb(0 54 160 / var(--tw-border-opacity));
+  content: "";
+  left: 49.9%;
+  z-index: -1
+}
+
+.lastCircleVerticalBefore {
+  position: absolute;
+  top: 0px;
+  display: block;
+  height: 50%;
+  border-width: 2px;
+  border-style: solid;
+  --tw-border-opacity: 1;
+  border-color: rgb(0 54 160 / var(--tw-border-opacity));
+  content: "";
+  left: 49.9%;
+  z-index: -1
+}
+
+/* V - collapse*/
+.circleVerticalCollapseBefore {
+  position: absolute;
+  top: 0px;
+  display: block;
+  height: 50%;
+  border-width: 2px;
+  border-style: solid;
+  --tw-border-opacity: 1;
+  border-color: rgb(0 54 160 / var(--tw-border-opacity));
+  content: "";
+  left: 8.2%;
+  z-index: -1
+}
+
+.circleVerticalCollapseAfter {
+  position: absolute;
+  bottom: 0px;
+  display: block;
+  height: 50%;
+  border-width: 2px;
+  border-style: solid;
+  --tw-border-opacity: 1;
+  border-color: rgb(0 54 160 / var(--tw-border-opacity));
+  content: "";
+  left: 8.2%;
+  z-index: -1
+}
+
+.firstCircleVerticalCollapseAfter {
+  position: absolute;
+  bottom: 0px;
+  display: block;
+  height: 50%;
+  border-width: 2px;
+  border-style: solid;
+  --tw-border-opacity: 1;
+  border-color: rgb(0 54 160 / var(--tw-border-opacity));
+  content: "";
+  left: 8.2%;
+  z-index: -1
+}
+
+.lastCircleVerticalCollapseBefore {
+  position: absolute;
+  top: 0px;
+  display: block;
+  height: 50%;
+  border-width: 2px;
+  border-style: solid;
+  --tw-border-opacity: 1;
+  border-color: rgb(0 54 160 / var(--tw-border-opacity));
+  content: "";
+  left: 8.2%;
+  z-index: -1
+}
+
+/* Horizontal */
+.circleHorizontalBefore {
+  position: absolute;
+  top: 50%;
+  display: block;
+  border-width: 2px;
+  border-style: solid;
+  --tw-border-opacity: 1;
+  border-color: rgb(0 54 160 / var(--tw-border-opacity));
+  content: "";
+  width: 70%;
+  left: -8%;
+  z-index: -1
+}
+
+.circleHorizontalAfter {
+  position: absolute;
+  top: 50%;
+  display: block;
+  border-width: 2px;
+  border-style: solid;
+  --tw-border-opacity: 1;
+  border-color: rgb(0 54 160 / var(--tw-border-opacity));
+  content: "";
+  width: 70%;
+  right: -12%;
+  z-index: -1
+}
+
+.firstCircleHorizontalAfter {
+  position: absolute;
+  top: 50%;
+  display: block;
+  border-width: 2px;
+  border-style: solid;
+  --tw-border-opacity: 1;
+  border-color: rgb(0 54 160 / var(--tw-border-opacity));
+  content: "";
+  width: 60%;
+  right: -12%;
+  z-index: -1
+}
+
+.lastCircleHorizontalBefore {
+  position: absolute;
+  top: 50%;
+  display: block;
+  border-width: 2px;
+  border-style: solid;
+  --tw-border-opacity: 1;
+  border-color: rgb(0 54 160 / var(--tw-border-opacity));
+  content: "";
+  width: 55%;
+  left: -8%;
+  z-index: -1
+}
+
+/*# sourceMappingURL=style.module.css.map */

package/dist/src/lib/components/Timeline/style.module.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/lib/components/Timeline/style.module.css"],"names":[],"mappings":"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","file":"style.module.css","sourcesContent":[".classList {\n  @apply w-full list-none overflow-x-auto pb-4;\n}\n\n.circle {\n  @apply w-4 h-4 my-16 text-center mx-auto rounded-full border bg-black;\n}\n\n.liClassList {\n  @apply relative flex flex-auto flex-row leading-tight;\n}\n\n.liVerticalReverse {\n  @apply flex-row-reverse;\n}\n\n.liHorizontalReverse {\n  @apply items-center flex-col-reverse;\n}\n\n.li {\n  @apply flex-row;\n}\n\n.liHorizontal {\n  @apply items-center flex-col justify-between;\n}\n\n.textCenter {\n  @apply text-center;\n}\n\n.ulClassList {\n  @apply relative list-none pl-0 flex;\n}\n\n.ulVerticalReverse {\n  @apply flex-col;\n}\n\n.ulHorizontalReverse {\n  @apply flex-row justify-between;\n}\n\n.ul {\n  @apply flex-col;\n}\n\n.ulHorizontal {\n  @apply flex-row justify-between;\n}\n\n/* Vertical */\n.circleVerticalBefore {\n  @apply absolute top-0 block border-solid border-2 border-primary h-1/2;\n  content: \"\";\n  left: 49.9%;\n  z-index: -1;\n}\n\n.circleVerticalAfter {\n  @apply absolute bottom-0 block border-solid border-2 border-primary h-1/2;\n  content: \"\";\n  left: 49.9%;\n  z-index: -1;\n}\n\n.firstCircleVerticalAfter {\n  @apply absolute bottom-0 block border-solid border-2 border-primary h-1/2;\n  content: \"\";\n  left: 49.9%;\n  z-index: -1;\n}\n\n.lastCircleVerticalBefore {\n  @apply absolute top-0 block border-solid border-2 border-primary h-1/2;\n  content: \"\";\n  left: 49.9%;\n  z-index: -1;\n}\n\n/* V - collapse*/\n.circleVerticalCollapseBefore {\n  @apply absolute top-0 block border-solid border-2 border-primary h-1/2;\n  content: \"\";\n  left: 8.2%;\n  z-index: -1;\n}\n\n.circleVerticalCollapseAfter {\n  @apply absolute bottom-0 block border-solid border-2 border-primary h-1/2;\n  content: \"\";\n  left: 8.2%;\n  z-index: -1;\n}\n\n.firstCircleVerticalCollapseAfter {\n  @apply absolute bottom-0 block border-solid border-2 border-primary h-1/2;\n  content: \"\";\n  left: 8.2%;\n  z-index: -1;\n}\n\n.lastCircleVerticalCollapseBefore {\n  @apply absolute top-0 block border-solid border-2 border-primary h-1/2;\n  content: \"\";\n  left: 8.2%;\n  z-index: -1;\n}\n\n/* Horizontal */\n.circleHorizontalBefore {\n  @apply absolute top-1/2 block border-solid border-2 border-primary;\n  content: \"\";\n  width: 70%;\n  left: -8%;\n  z-index: -1;\n}\n\n.circleHorizontalAfter {\n  @apply absolute top-1/2 block border-solid border-2 border-primary;\n  content: \"\";\n  width: 70%;\n  right: -12%;\n  z-index: -1;\n}\n\n.firstCircleHorizontalAfter {\n  @apply absolute top-1/2 block border-solid border-2 border-primary;\n  content: \"\";\n  width: 60%;\n  right: -12%;\n  z-index: -1;\n}\n\n.lastCircleHorizontalBefore {\n  @apply absolute top-1/2 block border-solid border-2 border-primary;\n  content: \"\";\n  width: 55%;\n  left: -8%;\n  z-index: -1;\n}\n"]}

package/dist/src/lib/components/Tubestops/Tubestops.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface Props extends Partial<Pick<HTMLElement, 'className' | 'id'>> {
+    isHorizontal?: boolean;
+    items?: Array<{
+        title: string;
+        subtitle: string;
+    }>;
+    reverse?: boolean;
+    textCenter?: boolean;
+}
+declare const Tubestops: React.FC<Props>;
+export default Tubestops;

package/dist/src/lib/components/Tubestops/Tubestops.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import classNames from 'classnames';
+import style from './style.module.css';
+const Tubestops = ({ id, className, isHorizontal = false, items = [], reverse = false, textCenter = false }) => {
+    const circle = style.circle;
+    const classList = classNames(className, style.classList);
+    const liClasses = classNames({
+        [style.textCenter]: textCenter,
+        [style.liHorizonatalNotReverse]: !reverse && isHorizontal,
+        [style.liNotHorizonatalNotReverse]: !reverse && !isHorizontal,
+        [style.liHorizonatalReverse]: reverse && isHorizontal,
+        [style.liNotHorizonatalReverse]: reverse && !isHorizontal
+    }, style.liClassList, 'status-flow-item');
+    const ulClasses = classNames({
+        [style.ulHorizonatalNotReverse]: !reverse && isHorizontal,
+        [style.ulNotHorizonatalNotReverse]: !reverse && !isHorizontal,
+        [style.ulHorizonatalReverse]: reverse && isHorizontal,
+        [style.ulNotHorizonatalReverse]: reverse && !isHorizontal
+    }, style.ulClassList, 'status-flow');
+    const padding = classNames({
+        [style.horizonatalNotReverse]: !reverse && isHorizontal,
+        [style.notHorizonatalNotReverse]: !reverse && !isHorizontal,
+        [style.horizonatalReverse]: reverse && isHorizontal,
+        [style.notHorizonatalReverse]: reverse && !isHorizontal
+    });
+    return (React.createElement("div", { id: id, className: classList },
+        React.createElement("ul", { className: ulClasses }, items === null || items === void 0 ? void 0 : items.map((item, i) => {
+            const a = !isHorizontal && i !== 0 ? style.margin : '';
+            return (React.createElement("li", { key: `tubestop_${i + 0}`, className: `${liClasses} ${a}` },
+                React.createElement("span", { className: circle }),
+                React.createElement("div", { className: padding },
+                    React.createElement("p", null, `${item === null || item === void 0 ? void 0 : item.title}${i.toString()}`),
+                    React.createElement("p", null,
+                        React.createElement("small", null, item === null || item === void 0 ? void 0 : item.subtitle)))));
+        }))));
+};
+export default Tubestops;
+//# sourceMappingURL=Tubestops.js.map

package/dist/src/lib/components/Tubestops/Tubestops.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tubestops.js","sourceRoot":"","sources":["../../../../../src/lib/components/Tubestops/Tubestops.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,UAAU,MAAM,YAAY,CAAA;AACnC,OAAO,KAAK,MAAM,oBAAoB,CAAA;AAStC,MAAM,SAAS,GAAoB,CAAC,EAClC,EAAE,EACF,SAAS,EACT,YAAY,GAAG,KAAK,EACpB,KAAK,GAAG,EAAE,EACV,OAAO,GAAG,KAAK,EACf,UAAU,GAAG,KAAK,EACnB,EAAE,EAAE;IACH,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAA;IAC3B,MAAM,SAAS,GAAG,UAAU,CAAC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,CAAA;IAExD,MAAM,SAAS,GAAG,UAAU,CAAC;QAC3B,CAAC,KAAK,CAAC,UAAU,CAAC,EAAE,UAAU;QAC9B,CAAC,KAAK,CAAC,uBAAuB,CAAC,EAAE,CAAC,OAAO,IAAI,YAAY;QACzD,CAAC,KAAK,CAAC,0BAA0B,CAAC,EAAE,CAAC,OAAO,IAAI,CAAC,YAAY;QAC7D,CAAC,KAAK,CAAC,oBAAoB,CAAC,EAAE,OAAO,IAAI,YAAY;QACrD,CAAC,KAAK,CAAC,uBAAuB,CAAC,EAAE,OAAO,IAAI,CAAC,YAAY;KAC1D,EAAE,KAAK,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAA;IAEzC,MAAM,SAAS,GAAG,UAAU,CAAC;QAC3B,CAAC,KAAK,CAAC,uBAAuB,CAAC,EAAE,CAAC,OAAO,IAAI,YAAY;QACzD,CAAC,KAAK,CAAC,0BAA0B,CAAC,EAAE,CAAC,OAAO,IAAI,CAAC,YAAY;QAC7D,CAAC,KAAK,CAAC,oBAAoB,CAAC,EAAE,OAAO,IAAI,YAAY;QACrD,CAAC,KAAK,CAAC,uBAAuB,CAAC,EAAE,OAAO,IAAI,CAAC,YAAY;KAC1D,EAAE,KAAK,CAAC,WAAW,EAAE,aAAa,CAAC,CAAA;IAEpC,MAAM,OAAO,GAAG,UAAU,CAAC;QACzB,CAAC,KAAK,CAAC,qBAAqB,CAAC,EAAE,CAAC,OAAO,IAAI,YAAY;QACvD,CAAC,KAAK,CAAC,wBAAwB,CAAC,EAAE,CAAC,OAAO,IAAI,CAAC,YAAY;QAC3D,CAAC,KAAK,CAAC,kBAAkB,CAAC,EAAE,OAAO,IAAI,YAAY;QACnD,CAAC,KAAK,CAAC,qBAAqB,CAAC,EAAE,OAAO,IAAI,CAAC,YAAY;KACxD,CAAC,CAAA;IAEF,OAAO,CACL,6BACE,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,SAAS;QAEpB,4BAAI,SAAS,EAAE,SAAS,IACrB,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,GAAG,CAAC,CAAC,IAAyC,EAAE,CAAS,EAAE,EAAE;YACnE,MAAM,CAAC,GAAG,CAAC,YAAY,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAA;YACtD,OAAO,CACL,4BACE,GAAG,EAAE,YAAY,CAAC,GAAG,CAAC,EAAE,EACxB,SAAS,EAAE,GAAG,SAAS,IAAI,CAAC,EAAE;gBAE9B,8BAAM,SAAS,EAAE,MAAM,GAAI;gBAC3B,6BAAK,SAAS,EAAE,OAAO;oBACrB,+BAAI,GAAG,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAK;oBACxC;wBAAG,mCAAQ,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,QAAQ,CAAS,CAAI,CAClC,CACH,CACN,CAAA;QACH,CAAC,CAAC,CACC,CACD,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,SAAS,CAAA"}