@multiplatform.one/forms 6.0.4 → 6.3.0

package/dist/cjs/FormGrid.cjs

@@ -22,34 +22,113 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
 }), mod);
 var FormGrid_exports = {};
 __export(FormGrid_exports, {
+  FORM_GRID_COLLAPSE_WIDTH: () => FORM_GRID_COLLAPSE_WIDTH,
   FormGrid: () => FormGrid
 });
 module.exports = __toCommonJS(FormGrid_exports);
 var import_react = require("react");
 var import_tamagui = require("tamagui");
 var import_jsx_runtime = require("react/jsx-runtime");
+const FORM_GRID_COLLAPSE_WIDTH = 480;
+function resolveWideColumns(columns, maxColumns) {
+  return Math.min(columns, maxColumns);
+}
 function FormGrid({
-  columns = 2,
+  columns = 1,
+  maxColumns = 2,
   gap = 16,
   children
 }) {
+  const wideColumns = resolveWideColumns(columns, maxColumns);
   if (import_tamagui.isWeb) {
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
-      style: {
-        display: "grid",
-        gridTemplateColumns: `repeat(${columns}, 1fr)`,
-        gap: `${gap}px`
-      },
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(FormGridWeb, {
+      columns: wideColumns,
+      maxColumns,
+      gap,
       children
     });
   }
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(FormGridNative, {
+    columns: wideColumns,
+    gap,
+    children
+  });
+}
+function FormGridWeb({
+  columns,
+  maxColumns,
+  gap,
+  children
+}) {
+  const ref = (0, import_react.useRef)(null);
+  const [containerWide, setContainerWide] = (0, import_react.useState)(true);
+  (0, import_react.useLayoutEffect)(() => {
+    const el = ref.current;
+    if (!el || columns <= 1) {
+      setContainerWide(true);
+      return;
+    }
+    const update = width => {
+      setContainerWide(width >= FORM_GRID_COLLAPSE_WIDTH);
+    };
+    update(el.getBoundingClientRect().width);
+    if (typeof ResizeObserver === "undefined") {
+      const onResize = () => update(el.getBoundingClientRect().width);
+      window.addEventListener("resize", onResize);
+      return () => window.removeEventListener("resize", onResize);
+    }
+    const ro = new ResizeObserver(entries => {
+      const width = entries[0]?.contentRect.width ?? el.getBoundingClientRect().width;
+      update(width);
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [columns]);
+  const effectiveColumns = columns <= 1 || !containerWide ? 1 : columns;
+  const style = {
+    display: "grid",
+    gap: `${gap}px`,
+    gridTemplateColumns: `repeat(${effectiveColumns}, minmax(0, 1fr))`,
+    // Enable container queries for consumers / CSS extensions (DG-FORM-09).
+    containerType: columns > 1 ? "inline-size" : void 0
+  };
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+    ref,
+    "data-mpo-form-grid": "",
+    "data-columns": effectiveColumns,
+    "data-max-columns": maxColumns,
+    "data-requested-columns": columns,
+    style,
+    children
+  });
+}
+function FormGridNative({
+  columns,
+  gap,
+  children
+}) {
+  const media = (0, import_tamagui.useMedia)();
+  const canUseDomResize = typeof window !== "undefined" && typeof window.addEventListener === "function" && typeof window.innerWidth === "number";
+  const [domViewportWide, setDomViewportWide] = (0, import_react.useState)(() => canUseDomResize ? window.innerWidth >= FORM_GRID_COLLAPSE_WIDTH : true);
+  (0, import_react.useEffect)(() => {
+    if (!canUseDomResize) return;
+    const handler = () => setDomViewportWide(window.innerWidth >= FORM_GRID_COLLAPSE_WIDTH);
+    handler();
+    window.addEventListener("resize", handler);
+    return () => window.removeEventListener("resize", handler);
+  }, [canUseDomResize]);
+  const viewportWide = canUseDomResize ? domViewportWide : media.gtSm === true;
+  const effectiveColumns = columns <= 1 || !viewportWide ? 1 : columns;
   const childArray = import_react.Children.toArray(children);
   const rows = [];
-  for (let i = 0; i < childArray.length; i += columns) {
-    rows.push(childArray.slice(i, i + columns));
+  for (let i = 0; i < childArray.length; i += effectiveColumns) {
+    rows.push(childArray.slice(i, i + effectiveColumns));
   }
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
     gap,
+    "data-columns": effectiveColumns,
+    "data-max-columns": columns,
+    "data-requested-columns": columns,
     children: rows.map((row, rowIndex) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
       gap,
       children: row.map((child, colIndex) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {

package/dist/cjs/FormGrid.native.js

@@ -24,35 +24,130 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
 }), mod);
 var FormGrid_exports = {};
 __export(FormGrid_exports, {
+  FORM_GRID_COLLAPSE_WIDTH: () => FORM_GRID_COLLAPSE_WIDTH,
   FormGrid: () => FormGrid
 });
 module.exports = __toCommonJS(FormGrid_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_tamagui = require("tamagui");
+var FORM_GRID_COLLAPSE_WIDTH = 480;
+function resolveWideColumns(columns, maxColumns) {
+  return Math.min(columns, maxColumns);
+}
 function FormGrid(param) {
   var {
-    columns = 2,
+    columns = 1,
+    maxColumns = 2,
     gap = 16,
     children
   } = param;
+  var wideColumns = resolveWideColumns(columns, maxColumns);
   if (import_tamagui.isWeb) {
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
-      style: {
-        display: "grid",
-        gridTemplateColumns: `repeat(${columns}, 1fr)`,
-        gap: `${gap}px`
-      },
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(FormGridWeb, {
+      columns: wideColumns,
+      maxColumns,
+      gap,
       children
     });
   }
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(FormGridNative, {
+    columns: wideColumns,
+    gap,
+    children
+  });
+}
+function FormGridWeb(param) {
+  var {
+    columns,
+    maxColumns,
+    gap,
+    children
+  } = param;
+  var ref = (0, import_react.useRef)(null);
+  var [containerWide, setContainerWide] = (0, import_react.useState)(true);
+  (0, import_react.useLayoutEffect)(function () {
+    var el = ref.current;
+    if (!el || columns <= 1) {
+      setContainerWide(true);
+      return;
+    }
+    var update = function update2(width) {
+      setContainerWide(width >= FORM_GRID_COLLAPSE_WIDTH);
+    };
+    update(el.getBoundingClientRect().width);
+    if (typeof ResizeObserver === "undefined") {
+      var onResize = function onResize2() {
+        return update(el.getBoundingClientRect().width);
+      };
+      window.addEventListener("resize", onResize);
+      return function () {
+        return window.removeEventListener("resize", onResize);
+      };
+    }
+    var ro = new ResizeObserver(function (entries) {
+      var _ref;
+      var _entries_;
+      var width = (_ref = (_entries_ = entries[0]) === null || _entries_ === void 0 ? void 0 : _entries_.contentRect.width) !== null && _ref !== void 0 ? _ref : el.getBoundingClientRect().width;
+      update(width);
+    });
+    ro.observe(el);
+    return function () {
+      return ro.disconnect();
+    };
+  }, [columns]);
+  var effectiveColumns = columns <= 1 || !containerWide ? 1 : columns;
+  var style = {
+    display: "grid",
+    gap: `${gap}px`,
+    gridTemplateColumns: `repeat(${effectiveColumns}, minmax(0, 1fr))`,
+    // Enable container queries for consumers / CSS extensions (DG-FORM-09).
+    containerType: columns > 1 ? "inline-size" : void 0
+  };
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+    ref,
+    "data-mpo-form-grid": "",
+    "data-columns": effectiveColumns,
+    "data-max-columns": maxColumns,
+    "data-requested-columns": columns,
+    style,
+    children
+  });
+}
+function FormGridNative(param) {
+  var {
+    columns,
+    gap,
+    children
+  } = param;
+  var media = (0, import_tamagui.useMedia)();
+  var canUseDomResize = typeof window !== "undefined" && typeof window.addEventListener === "function" && typeof window.innerWidth === "number";
+  var [domViewportWide, setDomViewportWide] = (0, import_react.useState)(function () {
+    return canUseDomResize ? window.innerWidth >= FORM_GRID_COLLAPSE_WIDTH : true;
+  });
+  (0, import_react.useEffect)(function () {
+    if (!canUseDomResize) return;
+    var handler = function handler2() {
+      return setDomViewportWide(window.innerWidth >= FORM_GRID_COLLAPSE_WIDTH);
+    };
+    handler();
+    window.addEventListener("resize", handler);
+    return function () {
+      return window.removeEventListener("resize", handler);
+    };
+  }, [canUseDomResize]);
+  var viewportWide = canUseDomResize ? domViewportWide : media.gtSm === true;
+  var effectiveColumns = columns <= 1 || !viewportWide ? 1 : columns;
   var childArray = import_react.Children.toArray(children);
   var rows = [];
-  for (var i = 0; i < childArray.length; i += columns) {
-    rows.push(childArray.slice(i, i + columns));
+  for (var i = 0; i < childArray.length; i += effectiveColumns) {
+    rows.push(childArray.slice(i, i + effectiveColumns));
   }
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
     gap,
+    "data-columns": effectiveColumns,
+    "data-max-columns": columns,
+    "data-requested-columns": columns,
     children: rows.map(function (row, rowIndex) {
       return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
         gap,

package/dist/cjs/FormGrid.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","FormGrid_exports","__export","FormGrid","module","exports","import_jsx_runtime","require","import_react","import_tamagui","param","columns","gap","children","isWeb","jsx","style","display","gridTemplateColumns","childArray","Children","toArray","rows","i","length","push","slice","YStack","map","row","rowIndex"],"sources":["../../src/FormGrid.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,gBAAA;AAAAC,QAAA,CAAAD,gBAAA;EAAAE,QAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAT,YAAyC,CAAAK,gBAAA;AACzC,IAAAK,kBAAsC,GAAAC,OAAA;AAqBhC,IAAAC,YAAA,GAAAD,OAAA;AAHC,IAAAE,cAAkB,GAAEF,OAAA,UAAa,CAAM;AAC5C,SAAIJ,SAAAO,KAAA;EACF;IAAAC,OACE;IAAAC,GAAA;IAAAC;EAAA,IAAAH,KAAA;EAAA,IAACD,cAAA,CAAAK,KAAA;IAAA,0BAAAR,kBAAA,CAAAS,GAAA;MAAAC,KACC;QAAOC,OACL,QAAS;QAAAC,mBACT,YAAqBP,OAAU,QAAO;QAAAC,GACtC,KAAKA,GAAG;MAAG;MACbC;IAEC;EAAA;EAGP,IAAAM,UAAA,GAAAX,YAAA,CAAAY,QAAA,CAAAC,OAAA,CAAAR,QAAA;EAEA,IAAAS,IAAM;EACN,SAAMC,CAAA,GAAsB,CAAC,EAAAA,CAAA,GAAAJ,UAAA,CAAAK,MAAA,EAAAD,CAAA,IAAAZ,OAAA;IAC7BW,IAAA,CAAAG,IAAS,CAAAN,UAAW,CAAAO,KAAA,CAAAH,CAAA,EAAWA,CAAA,GAAAZ,OAAQ,CAAK;EAC1C;EACF,0BAAAL,kBAAA,CAAAS,GAAA,EAAAN,cAAA,CAAAkB,MAAA;IAEAf,GAAA;IAaFC,QAAA,EAAAS,IAAA,CAAAM,GAAA,WAAAC,GAAA,EAAAC,QAAA","ignoreList":[]}
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","FormGrid_exports","__export","FORM_GRID_COLLAPSE_WIDTH","FormGrid","module","exports","import_jsx_runtime","require","import_react","import_tamagui","resolveWideColumns","columns","maxColumns","Math","min","param","gap","children","wideColumns","isWeb","jsx","FormGridWeb","FormGridNative","ref","useRef","containerWide","setContainerWide","useState","useLayoutEffect","el","current","update","update2","width","getBoundingClientRect","ResizeObserver","onResize","onResize2","window","addEventListener","removeEventListener","ro","entries","_ref","_entries_","contentRect","observe","disconnect","effectiveColumns","style","display","gridTemplateColumns","containerType","media","useMedia","canUseDomResize","innerWidth","domViewportWide","setDomViewportWide","useEffect","handler","handler2","viewportWide","gtSm"],"sources":["../../src/FormGrid.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/cjs/FormSection.cjs

@@ -0,0 +1,107 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var FormSection_exports = {};
+__export(FormSection_exports, {
+  Fieldset: () => Fieldset,
+  FormSection: () => FormSection,
+  FormSectionStack: () => FormSectionStack,
+  formFieldGap: () => import_formSpacing2.formFieldGap,
+  formReadableMaxWidth: () => import_formSpacing2.formReadableMaxWidth,
+  formSectionGap: () => import_formSpacing2.formSectionGap
+});
+module.exports = __toCommonJS(FormSection_exports);
+var import_theme = require("@multiplatform.one/theme");
+var import_tamagui = require("tamagui");
+var import_formSpacing = require("./formSpacing.cjs");
+var import_formSpacing2 = require("./formSpacing.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+function FormSection({
+  label,
+  children,
+  maxWidth = import_formSpacing.formReadableMaxWidth,
+  gap,
+  testID,
+  fieldset = true
+}) {
+  const useFieldset = fieldset && import_tamagui.isWeb;
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const resolvedGap = gap ?? knobProps.gap.gap;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    ...(useFieldset ? {
+      render: "fieldset"
+    } : {}),
+    "data-mpo-form-section": "",
+    "data-mpo-fieldset": useFieldset ? "" : void 0,
+    "data-field-gap": String(resolvedGap),
+    "data-testid": testID,
+    gap: resolvedGap,
+    width: "100%",
+    maxWidth: maxWidth === "fluid" ? void 0 : maxWidth,
+    alignSelf: maxWidth === "fluid" ? void 0 : "flex-start",
+    ...(useFieldset ? {
+      style: {
+        borderWidth: 0,
+        margin: 0,
+        minWidth: 0,
+        padding: 0
+      }
+    } : {}),
+    children: [label ? useFieldset ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+      render: "legend",
+      fontWeight: "600",
+      fontSize: "$5",
+      style: {
+        padding: 0,
+        marginBottom: 0,
+        float: "left",
+        width: "100%"
+      },
+      children: label
+    }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+      fontWeight: "600",
+      fontSize: "$5",
+      role: "heading",
+      "aria-level": 3,
+      children: label
+    }) : null, children]
+  });
+}
+const Fieldset = FormSection;
+function FormSectionStack({
+  children,
+  gap
+}) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const resolvedGap = gap ?? knobProps.gapLg.gap;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+    "data-mpo-form-section-stack": "",
+    "data-section-gap": String(resolvedGap),
+    gap: resolvedGap,
+    width: "100%",
+    children
+  });
+}

package/dist/cjs/FormSection.native.js

@@ -0,0 +1,114 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var FormSection_exports = {};
+__export(FormSection_exports, {
+  Fieldset: () => Fieldset,
+  FormSection: () => FormSection,
+  FormSectionStack: () => FormSectionStack,
+  formFieldGap: () => import_formSpacing2.formFieldGap,
+  formReadableMaxWidth: () => import_formSpacing2.formReadableMaxWidth,
+  formSectionGap: () => import_formSpacing2.formSectionGap
+});
+module.exports = __toCommonJS(FormSection_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_theme = require("@multiplatform.one/theme");
+var import_tamagui = require("tamagui");
+var import_formSpacing = require("./formSpacing.native.js");
+var import_formSpacing2 = require("./formSpacing.native.js");
+function FormSection(param) {
+  var {
+    label,
+    children,
+    maxWidth = import_formSpacing.formReadableMaxWidth,
+    gap,
+    testID,
+    fieldset = true
+  } = param;
+  var useFieldset = fieldset && import_tamagui.isWeb;
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  var resolvedGap = gap !== null && gap !== void 0 ? gap : knobProps.gap.gap;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    ...(useFieldset ? {
+      render: "fieldset"
+    } : {}),
+    "data-mpo-form-section": "",
+    "data-mpo-fieldset": useFieldset ? "" : void 0,
+    "data-field-gap": String(resolvedGap),
+    "data-testid": testID,
+    gap: resolvedGap,
+    width: "100%",
+    maxWidth: maxWidth === "fluid" ? void 0 : maxWidth,
+    alignSelf: maxWidth === "fluid" ? void 0 : "flex-start",
+    // Reset browser fieldset chrome; we own spacing via tokens.
+    ...(useFieldset ? {
+      style: {
+        borderWidth: 0,
+        margin: 0,
+        minWidth: 0,
+        padding: 0
+      }
+    } : {}),
+    children: [label ? useFieldset ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+      render: "legend",
+      fontWeight: "600",
+      fontSize: "$5",
+      // legend is inline by default; stretch to a full heading row
+      style: {
+        padding: 0,
+        marginBottom: 0,
+        float: "left",
+        width: "100%"
+      },
+      children: label
+    }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+      fontWeight: "600",
+      fontSize: "$5",
+      role: "heading",
+      "aria-level": 3,
+      children: label
+    }) : null, children]
+  });
+}
+var Fieldset = FormSection;
+function FormSectionStack(param) {
+  var {
+    children,
+    gap
+  } = param;
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  var resolvedGap = gap !== null && gap !== void 0 ? gap : knobProps.gapLg.gap;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+    "data-mpo-form-section-stack": "",
+    "data-section-gap": String(resolvedGap),
+    gap: resolvedGap,
+    width: "100%",
+    children
+  });
+}
+//# sourceMappingURL=FormSection.native.js.map

package/dist/cjs/FormSection.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","FormSection_exports","__export","Fieldset","FormSection","FormSectionStack","formFieldGap","import_formSpacing2","formReadableMaxWidth","formSectionGap","module","exports","import_jsx_runtime","require","import_theme","import_tamagui","import_formSpacing","param","label","children","maxWidth","gap","testID","fieldset","useFieldset","isWeb","knobProps","useResolvedKnobs","resolvedGap","jsxs","YStack","render","String","width","alignSelf","style","borderWidth","margin","minWidth","padding","jsx","Text","fontWeight","fontSize","marginBottom","float","role","gapLg"],"sources":["../../src/FormSection.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,mBAAA;AAAAC,QAAA,CAAAD,mBAAA;EAAAE,QAAA,EAAAA,CAAA,KAAAA,QAAA;EAAAC,WAAA,EAAAA,CAAA,KAAAA,WAAA;EAAAC,gBAAA,EAAAA,CAAA,KAAAA,gBAAA;EAAAC,YAAA,EAAAA,CAAA,KAAAC,mBAAA,CAAAD,YAAA;EAAAE,oBAAA,EAAAA,CAAA,KAAAD,mBAAA,CAAAC,oBAAA;EAAAC,cAAA,EAAAA,CAAA,KAAAF,mBAAA,CAAAE;AAAA;AACAC,MAAA,CAAAC,OAAA,GAAAf,YAAiC,CAAAK,mBAAA;AACjC,IAAAW,kBAAoC,GAAAC,OAAA;AACpC,IAAAC,YAAA,GAAAD,OAAqC;AA8HrC,IAAAE,cAAA,GAAAF,OAAmE;AA7E/D,IAAAG,kBAAA,GAAAH,OAAA;AAbG,IAAAN,mBAAqB,GAAAM,OAAA;AAAA,SAC1BT,YAAAa,KAAA;EACA;IAAAC,KAAA;IAAAC,QAAA;IAAAC,QAAA,GAAAJ,kBAAA,CAAAR,oBAAA;IAAAa,GAAA;IAAAC,MAAA;IAAAC,QAAA;EAAA,IAAAN,KAAA;EACA,IAAAO,WAAW,GAAAD,QAAA,IAAAR,cAAA,CAAAU,KAAA;EACX;IAAAC;EAAA,QAAAZ,YAAA,CAAAa,gBAAA;EACA,IAAAC,WAAA,GAAAP,GAAA,aAAAA,GAAA,cAAAA,GAAA,GAAAK,SAAA,CAAAL,GAAA,CAAAA,GAAA;EACA,sBAAW,IAAAT,kBAAA,CAAAiB,IAAA,EAAAd,cAAA,CAAAe,MAAA;IACQ,IAAAN,WAAA;MACnBO,MAAM;IACN,IAAM,EAAE;IACR,uBAAoB,EAAO;IAE3B,mBACE,EAAAP,WAAA;IAAC,kBAAAQ,MAAA,CAAAJ,WAAA;IAAA,eAAAN,MAAA;IAAAD,GACE,EAAIO,WAAA;IAAiDK,KACtD;IAAsBb,QACtB,EAAAA,QAAA,KAAmB,eAAc,IAAKA,QAAA;IAAAc,SACtC,EAAAd,QAAA,KAAgB,OAAO,QAAW;IAAA;IACrB,IACbI,WAAK;MACLW,KAAA,EAAM;QACNC,WAAU;QACVC,MAAA,GAAW;QAEVC,QAAI;QAECC,OAAO;MAAA;IACQ,MACb;IAAQpB,QACR,GAAUD,KACV,GAAAM,WAAS,sBAAAZ,kBAAA,CAAA4B,GAAA,EAAAzB,cAAA,CAAA0B,IAAA;MACXV,MAAA;MACFW,UACC;MAEJC,QAAA;MAAA;MAEGR,KAAC;QAAAI,OAAA;QAAAK,YACQ;QAAAC,KACP;QAAWZ,KACX;MAAS;MAE0Dd,QAElE,EAAAD;IAAA,wBAAAN,kBAAA,CAAA4B,GAAA,EAAAzB,cAAA,CAAA0B,IAAA;MACHC,UAEA;MAKHC,QAAA;MAAAG,IAAA;MAAA;MACH3B,QAAA,EAAAD;IAEJ,WAMaC,QAAA;EAeX;AACA;AACA,IAAAhB,QACE,GAAAC,WAAA;AAAA,SAACC,iBAAAY,KAAA;EAAA;IAAAE,QAAA;IAAAE;EAAA,IAAAJ,KAAA;EAAA,IACC;IAAAS;EAAA,QAAAZ,YAA4B,CAAAa,gBAAA;EAAA,IAC5BC,WAAA,GAAAP,GAAA,KAAkB,QAAOA,GAAA,KAAW,SAAAA,GAAA,GAAAK,SAAA,CAAAqB,KAAA,CAAA1B,GAAA;EAAA,OACpC,eAAK,IAAAT,kBAAA,CAAA4B,GAAA,EAAAzB,cAAA,CAAAe,MAAA;IAAA,6BACC;IAAA,kBAEL,EAAAE,MAAA,CAAAJ,WAAA;IAAAP,GAAA,EAAAO,WAAA;IACHK,KAAA;IAEJd","ignoreList":[]}