@multiplatform.one/frappe-ui 7.34.3 → 7.35.0

package/dist/esm/record/RecordBars.native.js

@@ -1,89 +1,16 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { BarSeries, ChartSurface, Text, Tooltip, XAxis, XStack, YAxis, YStack, approximateTextWidth, createBandScale, createLinearScale, describeChart, formatChartValue, getLinearTicks, useChartTheme } from "@multiplatform.one/components";
-import { sizeRecipeEscape, useResolvedKnobs } from "@multiplatform.one/theme";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Separator, Text, XStack, YStack } from "@multiplatform.one/components";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { useTranslation } from "react-i18next";
 import { childBars } from "./recordData.native.js";
-var chartHeight = 220;
-var chartTicks = 4;
-function FixedScaleBars(param) {
-  var {
-    data,
-    max,
-    label,
-    testID
-  } = param;
-  var {
-    palette,
-    labelFontSize
-  } = useChartTheme();
-  var fills = data.map(function () {
-    return palette.single;
-  });
-  var domain = [0, max];
-  return /* @__PURE__ */_jsx(ChartSurface, {
-    label,
-    height: chartHeight,
-    testID,
-    children: function children(size) {
-      var marginScale = createLinearScale({
-        domain,
-        range: [0, 1],
-        nice: false
-      });
-      var tickLabels = getLinearTicks(marginScale, chartTicks).map(function (value) {
-        return formatChartValue(value);
-      });
-      var widestTick = Math.max(0, ...tickLabels.map(function (tick) {
-        return approximateTextWidth(tick, labelFontSize);
-      }));
-      var top = Math.ceil(labelFontSize / 2) + 2;
-      var right = 4;
-      var bottom = 4 + 3 + Math.ceil(labelFontSize * 1.15);
-      var left = Math.ceil(widestTick) + 4 + 3 + 2;
-      var plot = {
-        x: left,
-        y: top,
-        width: Math.max(0, size.width - left - right),
-        height: Math.max(0, size.height - top - bottom)
-      };
-      if (plot.width <= 0 || plot.height <= 0 || data.length === 0) return null;
-      var xScale = createBandScale({
-        domain: data.map(function (datum) {
-          return datum.label;
-        }),
-        range: [plot.x, plot.x + plot.width]
-      });
-      var yScale = createLinearScale({
-        domain,
-        range: [plot.y + plot.height, plot.y],
-        nice: false
-      });
-      return /* @__PURE__ */_jsxs(_Fragment, {
-        children: [/* @__PURE__ */_jsx(YAxis, {
-          plot,
-          scale: yScale,
-          ticks: chartTicks,
-          tickFormat: function tickFormat(value) {
-            return formatChartValue(value);
-          }
-        }), /* @__PURE__ */_jsx(BarSeries, {
-          data,
-          xScale,
-          yScale,
-          plot,
-          fills
-        }), /* @__PURE__ */_jsx(XAxis, {
-          plot,
-          scale: xScale
-        })]
-      });
-    }
-  });
-}
+import { RecordGroupFrame } from "./RecordRows.native.js";
+var labelWidth = "$8";
+var valueWidth = "$3";
 function RecordBars(param) {
   var {
     rows,
     section,
+    tint,
     testID
   } = param;
   var _section_totalLabel;
@@ -95,9 +22,7 @@ function RecordBars(param) {
   } = useResolvedKnobs();
   var {
     knobProps: nested
-  } = useResolvedKnobs({
-    compact: true
-  });
+  } = useResolvedKnobs();
   var {
     bars,
     total
@@ -107,12 +32,6 @@ function RecordBars(param) {
     var _section_barLabel;
     return (_ref = (_section_barLabel = section.barLabel) === null || _section_barLabel === void 0 ? void 0 : _section_barLabel.call(section, key)) !== null && _ref !== void 0 ? _ref : key;
   };
-  var data = bars.map(function (bar) {
-    return {
-      label: name(bar.key),
-      value: bar.value
-    };
-  });
   if (bars.length === 0) {
     var _section_empty;
     return /* @__PURE__ */_jsx(Text, {
@@ -122,74 +41,82 @@ function RecordBars(param) {
       children: (_section_empty = section.empty) !== null && _section_empty !== void 0 ? _section_empty : t("None yet")
     });
   }
-  return /* @__PURE__ */_jsxs(YStack, {
-    ...knobProps.gapLg,
-    children: [/* @__PURE__ */_jsxs(XStack, {
+  var top = Math.max(...bars.map(function (bar) {
+    return bar.value;
+  }));
+  return /* @__PURE__ */_jsxs(RecordGroupFrame, {
+    ...knobProps.panelPadding,
+    ...knobProps.gap,
+    testID,
+    role: "figure",
+    "aria-label": section.title,
+    children: [/* @__PURE__ */_jsx(YStack, {
+      role: "list",
       ...knobProps.gap,
-      alignItems: "baseline",
-      justifyContent: "space-between",
-      flexWrap: "wrap",
-      children: [/* @__PURE__ */_jsxs(YStack, {
-        children: [/* @__PURE__ */_jsx(Text, {
-          ...nested.label,
-          color: "$color10",
-          textTransform: "uppercase",
-          letterSpacing: 1,
-          children: (_section_totalLabel = section.totalLabel) !== null && _section_totalLabel !== void 0 ? _section_totalLabel : t("Total")
-        }), /* @__PURE__ */_jsx(Text, {
-          fontSize: "$10",
-          fontWeight: "700",
-          children: total
-        })]
-      }), section.description ? /* @__PURE__ */_jsx(Text, {
-        ...nested.label,
-        color: "$color10",
-        flexShrink: 1,
-        maxWidth: sizeRecipeEscape(420, "chart caption: a readable measure beside the total"),
-        children: section.description
-      }) : null]
-    }), /* @__PURE__ */_jsx(FixedScaleBars, {
-      data,
-      max: section.max,
-      testID,
-      label: [describeChart({
-        typeLabel: t("Bar chart"),
-        title: section.title,
-        data
-      }), t("Values on a fixed 0 to {{max}} scale.", {
-        max: section.max
-      })].join(" ")
-    }), /* @__PURE__ */_jsx(XStack, {
-      ...nested.gap,
-      flexWrap: "wrap",
       children: bars.map(function (bar) {
-        return /* @__PURE__ */_jsx(Tooltip, {
-          content: t("{{name}}: {{value}}", {
-            name: name(bar.key),
-            value: bar.value
-          }),
-          children: /* @__PURE__ */_jsxs(XStack, {
-            ...nested.borderRadius,
-            backgroundColor: "$color2",
-            borderWidth: 0,
-            paddingHorizontal: "$2",
-            paddingVertical: "$0.5",
-            gap: "$1",
-            alignItems: "baseline",
-            cursor: "help",
-            children: [/* @__PURE__ */_jsx(Text, {
-              ...nested.label,
-              ...nested.body,
-              color: "$color10",
-              children: name(bar.key)
-            }), /* @__PURE__ */_jsx(Text, {
-              ...nested.label,
-              fontWeight: "700",
-              children: bar.value
-            })]
-          })
+        var percent = Math.max(0, Math.min(100, bar.value / section.max * 100));
+        var fill = tint && bar.value === top ? `$${tint}9` : "$color9";
+        return /* @__PURE__ */_jsxs(XStack, {
+          role: "listitem",
+          alignItems: "center",
+          ...knobProps.gap,
+          "data-record-bar": bar.key,
+          children: [/* @__PURE__ */_jsx(Text, {
+            ...nested.label,
+            color: "$color11",
+            width: labelWidth,
+            flexShrink: 0,
+            numberOfLines: 1,
+            children: name(bar.key)
+          }), /* @__PURE__ */_jsx(Text, {
+            ...nested.label,
+            fontWeight: "700",
+            color: "$color12",
+            width: valueWidth,
+            flexShrink: 0,
+            textAlign: "right",
+            children: bar.value
+          }), /* @__PURE__ */_jsx(YStack, {
+            flex: 1,
+            minWidth: 0,
+            height: "$0.75",
+            borderRadius: "$true",
+            backgroundColor: "$color4",
+            overflow: "hidden",
+            role: "meter",
+            "aria-label": name(bar.key),
+            "aria-valuenow": bar.value,
+            "aria-valuemin": 0,
+            "aria-valuemax": section.max,
+            children: /* @__PURE__ */_jsx(YStack, {
+              height: "100%",
+              width: `${percent}%`,
+              borderRadius: "$true",
+              backgroundColor: fill,
+              "data-record-bar-fill": ""
+            })
+          })]
         }, bar.key);
       })
+    }), /* @__PURE__ */_jsx(Separator, {}), /* @__PURE__ */_jsxs(XStack, {
+      alignItems: "center",
+      ...knobProps.gap,
+      "data-record-bars-total": "",
+      children: [/* @__PURE__ */_jsx(Text, {
+        ...nested.label,
+        color: "$color11",
+        width: labelWidth,
+        flexShrink: 0,
+        children: (_section_totalLabel = section.totalLabel) !== null && _section_totalLabel !== void 0 ? _section_totalLabel : t("Total")
+      }), /* @__PURE__ */_jsx(Text, {
+        ...nested.label,
+        fontWeight: "800",
+        color: "$color12",
+        width: valueWidth,
+        flexShrink: 0,
+        textAlign: "right",
+        children: total
+      })]
     })]
   });
 }

package/dist/esm/record/RecordBars.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","BarSeries","ChartSurface","Text","Tooltip","XAxis","XStack","YAxis","YStack","approximateTextWidth","createBandScale","createLinearScale","describeChart","formatChartValue","getLinearTicks","useChartTheme","sizeRecipeEscape","useResolvedKnobs","useTranslation","childBars","chartHeight","chartTicks","FixedScaleBars","param","data","max","label","testID","palette","labelFontSize","fills","map","single","domain","height","children","size","marginScale","range","nice","tickLabels","value","widestTick","Math","tick","top","ceil","right","bottom","left","plot","x","y","width","length","xScale","datum","yScale","scale","ticks","tickFormat","RecordBars","rows","section","_section_totalLabel","t","knobProps","nested","compact","bars","total","name","name2","key","_ref","_section_barLabel","barLabel","call","bar","_section_empty","body","color","empty","gapLg","gap","alignItems","justifyContent","flexWrap","textTransform","letterSpacing","totalLabel","fontSize","fontWeight","description","flexShrink","maxWidth"],"sources":["../../../src/record/RecordBars.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Separator","Text","XStack","YStack","useResolvedKnobs","useTranslation","childBars","RecordGroupFrame","labelWidth","valueWidth","RecordBars","param","rows","section","tint","testID","_section_totalLabel","t","knobProps","nested","bars","total","name","name2","key","_ref","_section_barLabel","barLabel","call","length","_section_empty","label","body","color","children","empty","top","Math","max","map","bar","value","panelPadding","gap","role","title","percent","min","fill","alignItems","width","flexShrink","numberOfLines","fontWeight","textAlign","flex","minWidth","height","borderRadius","backgroundColor","overflow","totalLabel"],"sources":["../../../src/record/RecordBars.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/record/RecordGallery.mjs

@@ -1,20 +1,22 @@
 import { Carousel, YStack } from "@multiplatform.one/components";
+import { sizeRecipeEscape } from "@multiplatform.one/theme";
 import { useState } from "react";
 import { ImageWell } from "../list/ImageWell.mjs";
+import { recordHeroArtHeight } from "./RecordHero.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
+const art = sizeRecipeEscape(recordHeroArtHeight, "hero art: the design's artwork height");
 function RecordGallery({
   images,
   slides = [],
-  alt,
-  tints
+  alt
 }) {
   const [width, setWidth] = useState(0);
-  const first = /* @__PURE__ */jsx(ImageWell, {
-    sources: images,
-    alt,
-    tints,
-    inset: 0.08
-  });
+  const well = {
+    aspectRatio: void 0,
+    height: art,
+    borderRadius: 0,
+    backgroundColor: "transparent"
+  };
   return /* @__PURE__ */jsx(YStack, {
     onLayout: event => setWidth(Math.round(event.nativeEvent.layout.width)),
     width: "100%",
@@ -23,19 +25,25 @@ function RecordGallery({
       children: [/* @__PURE__ */jsx(ImageWell, {
         sources: images,
         alt,
-        tints,
-        inset: 0.08,
-        width
+        inset: 0,
+        width,
+        ...well
       }), slides.map(slide => /* @__PURE__ */jsx(ImageWell, {
         sources: [slide.src],
         alt: `${alt}, ${slide.label}`,
         pixelated: slide.pixelated,
         inset: 0.14,
-        backgroundColor: "$color2",
         width,
-        lazy: true
+        lazy: true,
+        ...well
       }, slide.src))]
-    }) : first
+    }) : /* @__PURE__ */jsx(ImageWell, {
+      sources: images,
+      alt,
+      inset: 0,
+      width: "100%",
+      ...well
+    })
   });
 }
 export { RecordGallery };

package/dist/esm/record/RecordGallery.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["Carousel","YStack","useState","ImageWell","jsx","jsxs","RecordGallery","images","slides","alt","tints","width","setWidth","first","sources","inset","onLayout","event","Math","round","nativeEvent","layout","children","length","gap","map","slide","src","label","pixelated","backgroundColor","lazy"],"sources":["../../../src/record/RecordGallery.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,QAAA,EAAUC,MAAA,QAAc;AACjC,SAASC,QAAA,QAAgB;AACzB,SAASC,SAAA,QAAiB;AAoBV,SAAAC,GAAA,EAIRC,IAAA,QAJQ;AAFT,SAASC,cAAc;EAAEC,MAAA;EAAQC,MAAA,GAAS,EAAC;EAAGC,GAAA;EAAKC;AAAM,GAAuB;EACrF,MAAM,CAACC,KAAA,EAAOC,QAAQ,IAAIV,QAAA,CAAS,CAAC;EACpC,MAAMW,KAAA,GAAQ,eAAAT,GAAA,CAACD,SAAA;IAAUW,OAAA,EAASP,MAAA;IAAQE,GAAA;IAAUC,KAAA;IAAcK,KAAA,EAAO;EAAA,CAAM;EAC/E,OACE,eAAAX,GAAA,CAACH,MAAA;IAAOe,QAAA,EAAWC,KAAA,IAAUL,QAAA,CAASM,IAAA,CAAKC,KAAA,CAAMF,KAAA,CAAMG,WAAA,CAAYC,MAAA,CAAOV,KAAK,CAAC;IAAGA,KAAA,EAAM;IACtFW,QAAA,EAAAX,KAAA,GAAQ,KAAKH,MAAA,CAAOe,MAAA,GAAS,IAC5B,eAAAlB,IAAA,CAACL,QAAA;MAASwB,GAAA,EAAK;MACbF,QAAA,kBAAAlB,GAAA,CAACD,SAAA;QAAUW,OAAA,EAASP,MAAA;QAAQE,GAAA;QAAUC,KAAA;QAAcK,KAAA,EAAO;QAAMJ;MAAA,CAAc,GAC9EH,MAAA,CAAOiB,GAAA,CAAKC,KAAA,IACX,eAAAtB,GAAA,CAACD,SAAA;QAECW,OAAA,EAAS,CAACY,KAAA,CAAMC,GAAG;QACnBlB,GAAA,EAAK,GAAGA,GAAG,KAAKiB,KAAA,CAAME,KAAK;QAC3BC,SAAA,EAAWH,KAAA,CAAMG,SAAA;QACjBd,KAAA,EAAO;QACPe,eAAA,EAAgB;QAChBnB,KAAA;QACAoB,IAAA,EAAI;MAAA,GAPCL,KAAA,CAAMC,GAQb,CACD;IAAA,CACH,IAEAd;EAAA,CAEJ;AAEJ","ignoreList":[]}
+{"version":3,"names":["Carousel","YStack","sizeRecipeEscape","useState","ImageWell","recordHeroArtHeight","jsx","jsxs","art","RecordGallery","images","slides","alt","width","setWidth","well","aspectRatio","height","borderRadius","backgroundColor","onLayout","event","Math","round","nativeEvent","layout","children","length","gap","sources","inset","map","slide","src","label","pixelated","lazy"],"sources":["../../../src/record/RecordGallery.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,QAAA,EAAUC,MAAA,QAAc;AACjC,SAASC,gBAAA,QAAwB;AACjC,SAASC,QAAA,QAAgB;AACzB,SAASC,SAAA,QAAiB;AAE1B,SAASC,mBAAA,QAA2B;AA4B5B,SACEC,GAAA,EADFC,IAAA;AAlBR,MAAMC,GAAA,GAAMN,gBAAA,CAAiBG,mBAAA,EAAqB,uCAAuC;AAOlF,SAASI,cAAc;EAAEC,MAAA;EAAQC,MAAA,GAAS,EAAC;EAAGC;AAAI,GAAuB;EAC9E,MAAM,CAACC,KAAA,EAAOC,QAAQ,IAAIX,QAAA,CAAS,CAAC;EACpC,MAAMY,IAAA,GAAO;IACXC,WAAA,EAAa;IACbC,MAAA,EAAQT,GAAA;IACRU,YAAA,EAAc;IACdC,eAAA,EAAiB;EACnB;EACA,OACE,eAAAb,GAAA,CAACL,MAAA;IAAOmB,QAAA,EAAWC,KAAA,IAAUP,QAAA,CAASQ,IAAA,CAAKC,KAAA,CAAMF,KAAA,CAAMG,WAAA,CAAYC,MAAA,CAAOZ,KAAK,CAAC;IAAGA,KAAA,EAAM;IACtFa,QAAA,EAAAb,KAAA,GAAQ,KAAKF,MAAA,CAAOgB,MAAA,GAAS,IAC5B,eAAApB,IAAA,CAACP,QAAA;MAAS4B,GAAA,EAAK;MACbF,QAAA,kBAAApB,GAAA,CAACF,SAAA;QAAUyB,OAAA,EAASnB,MAAA;QAAQE,GAAA;QAAUkB,KAAA,EAAO;QAAGjB,KAAA;QAAe,GAAGE;MAAA,CAAM,GACvEJ,MAAA,CAAOoB,GAAA,CAAKC,KAAA,IACX,eAAA1B,GAAA,CAACF,SAAA;QAECyB,OAAA,EAAS,CAACG,KAAA,CAAMC,GAAG;QACnBrB,GAAA,EAAK,GAAGA,GAAG,KAAKoB,KAAA,CAAME,KAAK;QAC3BC,SAAA,EAAWH,KAAA,CAAMG,SAAA;QACjBL,KAAA,EAAO;QACPjB,KAAA;QACAuB,IAAA,EAAI;QACH,GAAGrB;MAAA,GAPCiB,KAAA,CAAMC,GAQb,CACD;IAAA,CACH,IAEA,eAAA3B,GAAA,CAACF,SAAA;MAAUyB,OAAA,EAASnB,MAAA;MAAQE,GAAA;MAAUkB,KAAA,EAAO;MAAGjB,KAAA,EAAM;MAAQ,GAAGE;IAAA,CAAM;EAAA,CAE3E;AAEJ","ignoreList":[]}

package/dist/esm/record/RecordGallery.native.js

@@ -1,21 +1,23 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Carousel, YStack } from "@multiplatform.one/components";
+import { sizeRecipeEscape } from "@multiplatform.one/theme";
 import { useState } from "react";
 import { ImageWell } from "../list/ImageWell.native.js";
+import { recordHeroArtHeight } from "./RecordHero.native.js";
+var art = sizeRecipeEscape(recordHeroArtHeight, "hero art: the design's artwork height");
 function RecordGallery(param) {
   var {
     images,
     slides = [],
-    alt,
-    tints
+    alt
   } = param;
   var [width, setWidth] = useState(0);
-  var first = /* @__PURE__ */_jsx(ImageWell, {
-    sources: images,
-    alt,
-    tints,
-    inset: 0.08
-  });
+  var well = {
+    aspectRatio: void 0,
+    height: art,
+    borderRadius: 0,
+    backgroundColor: "transparent"
+  };
   return /* @__PURE__ */_jsx(YStack, {
     onLayout: function onLayout(event) {
       return setWidth(Math.round(event.nativeEvent.layout.width));
@@ -26,21 +28,27 @@ function RecordGallery(param) {
       children: [/* @__PURE__ */_jsx(ImageWell, {
         sources: images,
         alt,
-        tints,
-        inset: 0.08,
-        width
+        inset: 0,
+        width,
+        ...well
       }), slides.map(function (slide) {
         return /* @__PURE__ */_jsx(ImageWell, {
           sources: [slide.src],
           alt: `${alt}, ${slide.label}`,
           pixelated: slide.pixelated,
           inset: 0.14,
-          backgroundColor: "$color2",
           width,
-          lazy: true
+          lazy: true,
+          ...well
         }, slide.src);
       })]
-    }) : first
+    }) : /* @__PURE__ */_jsx(ImageWell, {
+      sources: images,
+      alt,
+      inset: 0,
+      width: "100%",
+      ...well
+    })
   });
 }
 export { RecordGallery };

package/dist/esm/record/RecordGallery.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Carousel","YStack","useState","ImageWell","RecordGallery","param","images","slides","alt","tints","width","setWidth","first","sources","inset","onLayout","event","Math","round","nativeEvent","layout","children","length","gap"],"sources":["../../../src/record/RecordGallery.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,GAAA,IAAAC,IAAU,EAAAC,IAAA,IAAAC,KAAc;AACjC,SAASC,QAAA,EAAAC,MAAgB;AACzB,SAASC,QAAA,eAAiB;AAoBV,SAAAC,SAIR,QAJQ;AAFT,SAASC,cAAcC,KAAE;EAC9B;IAAMC,MAAC;IAAOC,MAAA,GAAQ;IAAIC,GAAA;IAAAC;EAAU,IAAAJ,KAAA;EACpC,KAAAK,KAAM,EAAAC,QAAQ,IAAAT,QAAA,EAAC;EACf,IAAAU,KACE,kBAACf,IAAA,CAAAM,SAAO;IAGFU,OAAA,EAAAP,MAAA;IACCE,GAAA;IACCC,KAAC;IAAAK,KAAA;EAAA;EAEoB,OACnB,eAAgBjB,IAAA,CAAMI,MAAK;IAAAc,QAC3B,WAAWA,QAAMA,CAAAC,KAAA;MAAA,OACjBL,QAAO,CAAAM,IAAA,CAAAC,KAAA,CAAAF,KAAA,CAAAG,WAAA,CAAAC,MAAA,CAAAV,KAAA;IAAA;IACSA,KAChB;IAAAW,QACA,EAAIX,KAAA,QAAAH,MAAA,CAAAe,MAAA,sBAAAvB,KAAA,CAAAC,QAAA;MAAAuB,GAAA;MAPCF,QAAM,GASd,eAAAxB,IAAA,CAAAM,SAAA;QAGHU,OAEJ,EAAAP,MAAA;QAEJE,GAAA","ignoreList":[]}
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Carousel","YStack","sizeRecipeEscape","useState","ImageWell","recordHeroArtHeight","art","RecordGallery","param","images","slides","alt","width","setWidth","well","aspectRatio","height","borderRadius","backgroundColor","onLayout","event","Math","round","nativeEvent","layout","children","length","gap","sources","inset","map","slide"],"sources":["../../../src/record/RecordGallery.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,GAAA,IAAAC,IAAU,EAAAC,IAAA,IAAAC,KAAc;AACjC,SAASC,QAAA,EAAAC,MAAA,QAAwB;AACjC,SAASC,gBAAgB;AACzB,SAASC,QAAA,eAAiB;AAE1B,SAASC,SAAA,qCAA2B;AA4B5B,SACEC,mBADF;AAlBR,IAAAC,GAAM,GAAAJ,gBAAM,CAAAG,mBAAiB,yCAAqB;AAO3C,SAASE,cAAcC,KAAE;EAC9B;IAAMC,MAAC;IAAOC,MAAA,GAAQ;IAAIC;EAAA,IAASH,KAAC;EACpC,KAAAI,KAAM,EAAAC,QAAO,IAAAV,QAAA;EAAA,IACXW,IAAA;IACAC,WAAQ;IACRC,MAAA,EAAAV,GAAA;IACAW,YAAA;IACFC,eAAA;EACA;EAIQ,sBAACrB,IAAA,CAAAI,MAAA,EAAU;IACVkB,QAAO,WAAKA,QACXA,CAAAC,KAAA;MAAC,OAAAP,QAAA,CAAAQ,IAAA,CAAAC,KAAA,CAAAF,KAAA,CAAAG,WAAA,CAAAC,MAAA,CAAAZ,KAAA;IAAA;IAAAA,KAEC,QAAS;IAAUa,QACnB,EAAKb,KAAM,QAAKF,MAAM,CAAAgB,MAAK,sBAAA3B,KAAA,CAAAC,QAAA;MAAA2B,GAC3B;MAAiBF,QACjB,EAAO,CACP,eAAA5B,IAAA,CAAAO,SAAA;QACAwB,OAAI,EAAAnB,MAAA;QACHE,GAAG;QAAAkB,KAAA;QAPCjB,KAAM;QASd,GAAAE;MACH,CAEA,GAIRJ,MAAA,CAAAoB,GAAA,WAAAC,KAAA","ignoreList":[]}