@multiplatform.one/components 5.0.27 → 6.0.1

package/dist/esm/Badge/Badge.stories.native.js

@@ -0,0 +1,486 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BellIcon, EnvelopeIcon, ShoppingCartIcon, UserIcon } from "@phosphor-icons/react";
+import { Button, XStack, YStack, Text, View } from "tamagui";
+import { Badge } from "./index.native.js";
+var meta = {
+  title: "Components/Badge",
+  component: Badge,
+  parameters: {
+    status: {
+      type: "stable"
+    },
+    docs: {
+      description: {
+        component: "A notification badge component that wraps any element and displays a count or dot indicator. Commonly used on icons and buttons to show notification counts."
+      }
+    }
+  }
+};
+var Badge_stories_default = meta;
+var IconButton = function IconButton2(param) {
+  var {
+    children
+  } = param;
+  return /* @__PURE__ */_jsx(View, {
+    width: 44,
+    height: 44,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "$color3",
+    borderRadius: "$3",
+    children
+  });
+};
+var Default = {
+  name: "Main",
+  render: function render() {
+    return /* @__PURE__ */_jsx(Badge, {
+      count: 5,
+      children: /* @__PURE__ */_jsx(IconButton, {
+        children: /* @__PURE__ */_jsx(BellIcon, {
+          size: 24
+        })
+      })
+    });
+  }
+};
+var WithCount = {
+  render: function render2() {
+    return /* @__PURE__ */_jsxs(XStack, {
+      gap: "$4",
+      children: [/* @__PURE__ */_jsx(Badge, {
+        count: 1,
+        children: /* @__PURE__ */_jsx(IconButton, {
+          children: /* @__PURE__ */_jsx(EnvelopeIcon, {
+            size: 24
+          })
+        })
+      }), /* @__PURE__ */_jsx(Badge, {
+        count: 12,
+        children: /* @__PURE__ */_jsx(IconButton, {
+          children: /* @__PURE__ */_jsx(BellIcon, {
+            size: 24
+          })
+        })
+      }), /* @__PURE__ */_jsx(Badge, {
+        count: 99,
+        children: /* @__PURE__ */_jsx(IconButton, {
+          children: /* @__PURE__ */_jsx(ShoppingCartIcon, {
+            size: 24
+          })
+        })
+      }), /* @__PURE__ */_jsx(Badge, {
+        count: 150,
+        children: /* @__PURE__ */_jsx(IconButton, {
+          children: /* @__PURE__ */_jsx(UserIcon, {
+            size: 24
+          })
+        })
+      })]
+    });
+  }
+};
+var MaxCount = {
+  render: function render3() {
+    return /* @__PURE__ */_jsxs(XStack, {
+      gap: "$4",
+      children: [/* @__PURE__ */_jsx(Badge, {
+        count: 100,
+        max: 99,
+        children: /* @__PURE__ */_jsx(IconButton, {
+          children: /* @__PURE__ */_jsx(BellIcon, {
+            size: 24
+          })
+        })
+      }), /* @__PURE__ */_jsx(Badge, {
+        count: 1e3,
+        max: 999,
+        children: /* @__PURE__ */_jsx(IconButton, {
+          children: /* @__PURE__ */_jsx(EnvelopeIcon, {
+            size: 24
+          })
+        })
+      })]
+    });
+  }
+};
+var DotVariant = {
+  render: function render4() {
+    return /* @__PURE__ */_jsxs(XStack, {
+      gap: "$4",
+      children: [/* @__PURE__ */_jsx(Badge, {
+        dot: true,
+        children: /* @__PURE__ */_jsx(IconButton, {
+          children: /* @__PURE__ */_jsx(BellIcon, {
+            size: 24
+          })
+        })
+      }), /* @__PURE__ */_jsx(Badge, {
+        dot: true,
+        color: "blue",
+        children: /* @__PURE__ */_jsx(IconButton, {
+          children: /* @__PURE__ */_jsx(EnvelopeIcon, {
+            size: 24
+          })
+        })
+      }), /* @__PURE__ */_jsx(Badge, {
+        dot: true,
+        color: "green",
+        children: /* @__PURE__ */_jsx(IconButton, {
+          children: /* @__PURE__ */_jsx(UserIcon, {
+            size: 24
+          })
+        })
+      })]
+    });
+  }
+};
+var Colors = {
+  render: function render5() {
+    var colors = ["red", "blue", "green", "orange", "gray"];
+    return /* @__PURE__ */_jsxs(YStack, {
+      gap: "$4",
+      children: [/* @__PURE__ */_jsxs(YStack, {
+        gap: "$2",
+        children: [/* @__PURE__ */_jsx(Text, {
+          fontWeight: "600",
+          children: "Count badges"
+        }), /* @__PURE__ */_jsx(XStack, {
+          gap: "$4",
+          children: colors.map(function (color) {
+            return /* @__PURE__ */_jsx(Badge, {
+              count: 5,
+              color,
+              children: /* @__PURE__ */_jsx(IconButton, {
+                children: /* @__PURE__ */_jsx(BellIcon, {
+                  size: 24
+                })
+              })
+            }, color);
+          })
+        })]
+      }), /* @__PURE__ */_jsxs(YStack, {
+        gap: "$2",
+        children: [/* @__PURE__ */_jsx(Text, {
+          fontWeight: "600",
+          children: "Dot badges"
+        }), /* @__PURE__ */_jsx(XStack, {
+          gap: "$4",
+          children: colors.map(function (color) {
+            return /* @__PURE__ */_jsx(Badge, {
+              dot: true,
+              color,
+              children: /* @__PURE__ */_jsx(IconButton, {
+                children: /* @__PURE__ */_jsx(BellIcon, {
+                  size: 24
+                })
+              })
+            }, color);
+          })
+        })]
+      })]
+    });
+  }
+};
+var Positions = {
+  render: function render6() {
+    var positions = ["top-right", "top-left", "bottom-right", "bottom-left"];
+    return /* @__PURE__ */_jsx(XStack, {
+      gap: "$6",
+      children: positions.map(function (position) {
+        return /* @__PURE__ */_jsxs(YStack, {
+          alignItems: "center",
+          gap: "$2",
+          children: [/* @__PURE__ */_jsx(Badge, {
+            count: 5,
+            position,
+            children: /* @__PURE__ */_jsx(IconButton, {
+              children: /* @__PURE__ */_jsx(BellIcon, {
+                size: 24
+              })
+            })
+          }), /* @__PURE__ */_jsx(Text, {
+            fontSize: "$1",
+            color: "$color10",
+            children: position
+          })]
+        }, position);
+      })
+    });
+  }
+};
+var WithOffset = {
+  render: function render7() {
+    return /* @__PURE__ */_jsxs(XStack, {
+      gap: "$6",
+      children: [/* @__PURE__ */_jsxs(YStack, {
+        alignItems: "center",
+        gap: "$2",
+        children: [/* @__PURE__ */_jsx(Badge, {
+          count: 5,
+          offset: [0, 0],
+          children: /* @__PURE__ */_jsx(IconButton, {
+            children: /* @__PURE__ */_jsx(BellIcon, {
+              size: 24
+            })
+          })
+        }), /* @__PURE__ */_jsx(Text, {
+          fontSize: "$1",
+          color: "$color10",
+          children: "No offset"
+        })]
+      }), /* @__PURE__ */_jsxs(YStack, {
+        alignItems: "center",
+        gap: "$2",
+        children: [/* @__PURE__ */_jsx(Badge, {
+          count: 5,
+          offset: [4, 4],
+          children: /* @__PURE__ */_jsx(IconButton, {
+            children: /* @__PURE__ */_jsx(BellIcon, {
+              size: 24
+            })
+          })
+        }), /* @__PURE__ */_jsx(Text, {
+          fontSize: "$1",
+          color: "$color10",
+          children: "Offset [4, 4]"
+        })]
+      }), /* @__PURE__ */_jsxs(YStack, {
+        alignItems: "center",
+        gap: "$2",
+        children: [/* @__PURE__ */_jsx(Badge, {
+          count: 5,
+          offset: [-4, -4],
+          children: /* @__PURE__ */_jsx(IconButton, {
+            children: /* @__PURE__ */_jsx(BellIcon, {
+              size: 24
+            })
+          })
+        }), /* @__PURE__ */_jsx(Text, {
+          fontSize: "$1",
+          color: "$color10",
+          children: "Offset [-4, -4]"
+        })]
+      })]
+    });
+  }
+};
+var ShowZero = {
+  render: function render8() {
+    return /* @__PURE__ */_jsxs(XStack, {
+      gap: "$4",
+      children: [/* @__PURE__ */_jsxs(YStack, {
+        alignItems: "center",
+        gap: "$2",
+        children: [/* @__PURE__ */_jsx(Badge, {
+          count: 0,
+          children: /* @__PURE__ */_jsx(IconButton, {
+            children: /* @__PURE__ */_jsx(BellIcon, {
+              size: 24
+            })
+          })
+        }), /* @__PURE__ */_jsx(Text, {
+          fontSize: "$1",
+          color: "$color10",
+          children: "count=0 (hidden)"
+        })]
+      }), /* @__PURE__ */_jsxs(YStack, {
+        alignItems: "center",
+        gap: "$2",
+        children: [/* @__PURE__ */_jsx(Badge, {
+          count: 0,
+          showZero: true,
+          children: /* @__PURE__ */_jsx(IconButton, {
+            children: /* @__PURE__ */_jsx(BellIcon, {
+              size: 24
+            })
+          })
+        }), /* @__PURE__ */_jsx(Text, {
+          fontSize: "$1",
+          color: "$color10",
+          children: "count=0, showZero"
+        })]
+      })]
+    });
+  }
+};
+var Visibility = {
+  render: function render9() {
+    return /* @__PURE__ */_jsxs(XStack, {
+      gap: "$4",
+      children: [/* @__PURE__ */_jsxs(YStack, {
+        alignItems: "center",
+        gap: "$2",
+        children: [/* @__PURE__ */_jsx(Badge, {
+          count: 5,
+          visible: true,
+          children: /* @__PURE__ */_jsx(IconButton, {
+            children: /* @__PURE__ */_jsx(BellIcon, {
+              size: 24
+            })
+          })
+        }), /* @__PURE__ */_jsx(Text, {
+          fontSize: "$1",
+          color: "$color10",
+          children: "visible=true"
+        })]
+      }), /* @__PURE__ */_jsxs(YStack, {
+        alignItems: "center",
+        gap: "$2",
+        children: [/* @__PURE__ */_jsx(Badge, {
+          count: 5,
+          visible: false,
+          children: /* @__PURE__ */_jsx(IconButton, {
+            children: /* @__PURE__ */_jsx(BellIcon, {
+              size: 24
+            })
+          })
+        }), /* @__PURE__ */_jsx(Text, {
+          fontSize: "$1",
+          color: "$color10",
+          children: "visible=false"
+        })]
+      })]
+    });
+  }
+};
+var OnButtons = {
+  render: function render10() {
+    return /* @__PURE__ */_jsxs(XStack, {
+      gap: "$4",
+      children: [/* @__PURE__ */_jsx(Badge, {
+        count: 3,
+        children: /* @__PURE__ */_jsx(Button, {
+          children: "Messages"
+        })
+      }), /* @__PURE__ */_jsx(Badge, {
+        dot: true,
+        color: "green",
+        children: /* @__PURE__ */_jsx(Button, {
+          children: "Status"
+        })
+      })]
+    });
+  }
+};
+var AllStates = {
+  render: function render11() {
+    return /* @__PURE__ */_jsxs(YStack, {
+      gap: "$6",
+      children: [/* @__PURE__ */_jsxs(YStack, {
+        gap: "$2",
+        children: [/* @__PURE__ */_jsx(Text, {
+          fontWeight: "600",
+          children: "Counts"
+        }), /* @__PURE__ */_jsxs(XStack, {
+          gap: "$4",
+          children: [/* @__PURE__ */_jsx(Badge, {
+            count: 1,
+            children: /* @__PURE__ */_jsx(IconButton, {
+              children: /* @__PURE__ */_jsx(BellIcon, {
+                size: 24
+              })
+            })
+          }), /* @__PURE__ */_jsx(Badge, {
+            count: 10,
+            children: /* @__PURE__ */_jsx(IconButton, {
+              children: /* @__PURE__ */_jsx(BellIcon, {
+                size: 24
+              })
+            })
+          }), /* @__PURE__ */_jsx(Badge, {
+            count: 99,
+            children: /* @__PURE__ */_jsx(IconButton, {
+              children: /* @__PURE__ */_jsx(BellIcon, {
+                size: 24
+              })
+            })
+          }), /* @__PURE__ */_jsx(Badge, {
+            count: 100,
+            children: /* @__PURE__ */_jsx(IconButton, {
+              children: /* @__PURE__ */_jsx(BellIcon, {
+                size: 24
+              })
+            })
+          })]
+        })]
+      }), /* @__PURE__ */_jsxs(YStack, {
+        gap: "$2",
+        children: [/* @__PURE__ */_jsx(Text, {
+          fontWeight: "600",
+          children: "Dots"
+        }), /* @__PURE__ */_jsxs(XStack, {
+          gap: "$4",
+          children: [/* @__PURE__ */_jsx(Badge, {
+            dot: true,
+            color: "red",
+            children: /* @__PURE__ */_jsx(IconButton, {
+              children: /* @__PURE__ */_jsx(BellIcon, {
+                size: 24
+              })
+            })
+          }), /* @__PURE__ */_jsx(Badge, {
+            dot: true,
+            color: "blue",
+            children: /* @__PURE__ */_jsx(IconButton, {
+              children: /* @__PURE__ */_jsx(BellIcon, {
+                size: 24
+              })
+            })
+          }), /* @__PURE__ */_jsx(Badge, {
+            dot: true,
+            color: "green",
+            children: /* @__PURE__ */_jsx(IconButton, {
+              children: /* @__PURE__ */_jsx(BellIcon, {
+                size: 24
+              })
+            })
+          })]
+        })]
+      }), /* @__PURE__ */_jsxs(YStack, {
+        gap: "$2",
+        children: [/* @__PURE__ */_jsx(Text, {
+          fontWeight: "600",
+          children: "Positions"
+        }), /* @__PURE__ */_jsxs(XStack, {
+          gap: "$4",
+          children: [/* @__PURE__ */_jsx(Badge, {
+            count: 1,
+            position: "top-right",
+            children: /* @__PURE__ */_jsx(IconButton, {
+              children: /* @__PURE__ */_jsx(BellIcon, {
+                size: 24
+              })
+            })
+          }), /* @__PURE__ */_jsx(Badge, {
+            count: 1,
+            position: "top-left",
+            children: /* @__PURE__ */_jsx(IconButton, {
+              children: /* @__PURE__ */_jsx(BellIcon, {
+                size: 24
+              })
+            })
+          }), /* @__PURE__ */_jsx(Badge, {
+            count: 1,
+            position: "bottom-right",
+            children: /* @__PURE__ */_jsx(IconButton, {
+              children: /* @__PURE__ */_jsx(BellIcon, {
+                size: 24
+              })
+            })
+          }), /* @__PURE__ */_jsx(Badge, {
+            count: 1,
+            position: "bottom-left",
+            children: /* @__PURE__ */_jsx(IconButton, {
+              children: /* @__PURE__ */_jsx(BellIcon, {
+                size: 24
+              })
+            })
+          })]
+        })]
+      })]
+    });
+  }
+};
+export { AllStates, Colors, Default, DotVariant, MaxCount, OnButtons, Positions, ShowZero, Visibility, WithCount, WithOffset, Badge_stories_default as default };
+//# sourceMappingURL=Badge.stories.native.js.map

package/dist/esm/Badge/Badge.stories.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","BellIcon","EnvelopeIcon","ShoppingCartIcon","UserIcon","Button","XStack","YStack","Text","View","Badge","meta","title","component","parameters","status","type","docs","description","Badge_stories_default","IconButton","IconButton2","param","children","width","height","alignItems","justifyContent","backgroundColor","borderRadius","Default","name","render","count","size","WithCount","render2","gap","MaxCount","render3","max","DotVariant","render4","dot","color","Colors","render5","colors"],"sources":["../../../src/Badge/Badge.stories.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/Badge/index.mjs

@@ -0,0 +1,118 @@
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { Text, View, styled } from "tamagui";
+import { componentColors } from "../componentColors.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+const colorMap = {
+  red: {
+    bg: componentColors.badge.red,
+    text: "white"
+  },
+  blue: {
+    bg: componentColors.badge.blue,
+    text: "white"
+  },
+  green: {
+    bg: componentColors.badge.green,
+    text: "white"
+  },
+  orange: {
+    bg: componentColors.badge.orange,
+    text: "white"
+  },
+  gray: {
+    bg: componentColors.badge.gray,
+    text: "white"
+  }
+};
+const positionMap = {
+  "top-right": {
+    top: 0,
+    right: 0
+  },
+  "top-left": {
+    top: 0,
+    left: 0
+  },
+  "bottom-right": {
+    bottom: 0,
+    right: 0
+  },
+  "bottom-left": {
+    bottom: 0,
+    left: 0
+  }
+};
+const BadgeWrapper = styled(View, {
+  name: "BadgeWrapper",
+  position: "relative",
+  display: "inline-flex"
+});
+const BadgeIndicator = styled(View, {
+  name: "BadgeIndicator",
+  position: "absolute",
+  alignItems: "center",
+  justifyContent: "center",
+  borderRadius: 1e3,
+  minWidth: 18,
+  height: 18,
+  paddingHorizontal: "$1",
+  zIndex: 1,
+  variants: {
+    dot: {
+      true: {
+        minWidth: 8,
+        width: 8,
+        height: 8,
+        paddingHorizontal: 0
+      }
+    }
+  }
+});
+const BadgeText = styled(Text, {
+  name: "BadgeText",
+  fontSize: 11,
+  fontWeight: "600",
+  lineHeight: 18,
+  textAlign: "center"
+});
+function Badge({
+  children,
+  count,
+  max = 99,
+  showZero = false,
+  dot = false,
+  color = "red",
+  position = "top-right",
+  offset = [0, 0],
+  visible = true
+}) {
+  const {
+    knobProps
+  } = useResolvedKnobs();
+  const colors = colorMap[color];
+  const posStyles = positionMap[position];
+  const shouldShow = visible && (dot || count !== void 0 && (count > 0 || showZero));
+  const displayValue = count !== void 0 && count > max ? `${max}+` : count;
+  const [offsetX, offsetY] = offset;
+  return /* @__PURE__ */jsxs(BadgeWrapper, {
+    children: [children, shouldShow && /* @__PURE__ */jsx(BadgeIndicator, {
+      dot,
+      backgroundColor: colors.bg,
+      style: {
+        ...posStyles,
+        transform: [{
+          translateX: position.includes("right") ? offsetX : -offsetX
+        }, {
+          translateY: position.includes("top") ? -offsetY : offsetY
+        }]
+      },
+      children: !dot && count !== void 0 && /* @__PURE__ */jsx(BadgeText, {
+        color: colors.text,
+        ...knobProps.body,
+        children: displayValue
+      })
+    })]
+  });
+}
+export { Badge };
+//# sourceMappingURL=index.mjs.map

package/dist/esm/Badge/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["useResolvedKnobs","Text","View","styled","componentColors","jsx","jsxs","colorMap","red","bg","badge","text","blue","green","orange","gray","positionMap","top","right","left","bottom","BadgeWrapper","name","position","display","BadgeIndicator","alignItems","justifyContent","borderRadius","minWidth","height","paddingHorizontal","zIndex","variants","dot","true","width","BadgeText","fontSize","fontWeight","lineHeight","textAlign","Badge","children","count","max","showZero","color","offset","visible","knobProps","colors","posStyles","shouldShow","displayValue","offsetX","offsetY","backgroundColor","style","transform","translateX","includes","translateY","body"],"sources":["../../../src/Badge/index.tsx"],"sourcesContent":[null],"mappings":"AACA,SAASA,gBAAA,QAAwB;AAEjC,SAASC,IAAA,EAAMC,IAAA,EAAMC,MAAA,QAAc;AACnC,SAASC,eAAA,QAAuB;AAqH5B,SAeQC,GAAA,EAfRC,IAAA;AAtFJ,MAAMC,QAAA,GAAuE;EAC3EC,GAAA,EAAK;IAAEC,EAAA,EAAIL,eAAA,CAAgBM,KAAA,CAAMF,GAAA;IAAKG,IAAA,EAAM;EAAQ;EACpDC,IAAA,EAAM;IAAEH,EAAA,EAAIL,eAAA,CAAgBM,KAAA,CAAME,IAAA;IAAMD,IAAA,EAAM;EAAQ;EACtDE,KAAA,EAAO;IAAEJ,EAAA,EAAIL,eAAA,CAAgBM,KAAA,CAAMG,KAAA;IAAOF,IAAA,EAAM;EAAQ;EACxDG,MAAA,EAAQ;IAAEL,EAAA,EAAIL,eAAA,CAAgBM,KAAA,CAAMI,MAAA;IAAQH,IAAA,EAAM;EAAQ;EAC1DI,IAAA,EAAM;IAAEN,EAAA,EAAIL,eAAA,CAAgBM,KAAA,CAAMK,IAAA;IAAMJ,IAAA,EAAM;EAAQ;AACxD;AAIA,MAAMK,WAAA,GAGF;EACF,aAAa;IAAEC,GAAA,EAAK;IAAGC,KAAA,EAAO;EAAE;EAChC,YAAY;IAAED,GAAA,EAAK;IAAGE,IAAA,EAAM;EAAE;EAC9B,gBAAgB;IAAEC,MAAA,EAAQ;IAAGF,KAAA,EAAO;EAAE;EACtC,eAAe;IAAEE,MAAA,EAAQ;IAAGD,IAAA,EAAM;EAAE;AACtC;AAIA,MAAME,YAAA,GAAelB,MAAA,CAAOD,IAAA,EAAM;EAChCoB,IAAA,EAAM;EACNC,QAAA,EAAU;EACVC,OAAA,EAAS;AACX,CAAC;AAED,MAAMC,cAAA,GAAiBtB,MAAA,CAAOD,IAAA,EAAM;EAClCoB,IAAA,EAAM;EACNC,QAAA,EAAU;EACVG,UAAA,EAAY;EACZC,cAAA,EAAgB;EAChBC,YAAA,EAAc;EACdC,QAAA,EAAU;EACVC,MAAA,EAAQ;EACRC,iBAAA,EAAmB;EACnBC,MAAA,EAAQ;EAERC,QAAA,EAAU;IACRC,GAAA,EAAK;MACHC,IAAA,EAAM;QACJN,QAAA,EAAU;QACVO,KAAA,EAAO;QACPN,MAAA,EAAQ;QACRC,iBAAA,EAAmB;MACrB;IACF;EACF;AACF,CAAC;AAED,MAAMM,SAAA,GAAYlC,MAAA,CAAOF,IAAA,EAAM;EAC7BqB,IAAA,EAAM;EACNgB,QAAA,EAAU;EACVC,UAAA,EAAY;EACZC,UAAA,EAAY;EACZC,SAAA,EAAW;AACb,CAAC;AAIM,SAASC,MAAM;EACpBC,QAAA;EACAC,KAAA;EACAC,GAAA,GAAM;EACNC,QAAA,GAAW;EACXZ,GAAA,GAAM;EACNa,KAAA,GAAQ;EACRxB,QAAA,GAAW;EACXyB,MAAA,GAAS,CAAC,GAAG,CAAC;EACdC,OAAA,GAAU;AACZ,GAAe;EACb,MAAM;IAAEC;EAAU,IAAIlD,gBAAA,CAAiB;EACvC,MAAMmD,MAAA,GAAS5C,QAAA,CAASwC,KAAK;EAC7B,MAAMK,SAAA,GAAYpC,WAAA,CAAYO,QAAQ;EAGtC,MAAM8B,UAAA,GAAaJ,OAAA,KAAYf,GAAA,IAAQU,KAAA,KAAU,WAAcA,KAAA,GAAQ,KAAKE,QAAA;EAG5E,MAAMQ,YAAA,GAAeV,KAAA,KAAU,UAAaA,KAAA,GAAQC,GAAA,GAAM,GAAGA,GAAG,MAAMD,KAAA;EAGtE,MAAM,CAACW,OAAA,EAASC,OAAO,IAAIR,MAAA;EAE3B,OACE,eAAA1C,IAAA,CAACe,YAAA;IACEsB,QAAA,GAAAA,QAAA,EACAU,UAAA,IACC,eAAAhD,GAAA,CAACoB,cAAA;MACCS,GAAA;MACAuB,eAAA,EAAiBN,MAAA,CAAO1C,EAAA;MACxBiD,KAAA,EAAO;QACL,GAAGN,SAAA;QACHO,SAAA,EAAW,CACT;UAAEC,UAAA,EAAYrC,QAAA,CAASsC,QAAA,CAAS,OAAO,IAAIN,OAAA,GAAU,CAACA;QAAQ,GAC9D;UAAEO,UAAA,EAAYvC,QAAA,CAASsC,QAAA,CAAS,KAAK,IAAI,CAACL,OAAA,GAAUA;QAAQ;MAEhE;MAECb,QAAA,GAACT,GAAA,IAAOU,KAAA,KAAU,UACjB,eAAAvC,GAAA,CAACgC,SAAA;QAAUU,KAAA,EAAOI,MAAA,CAAOxC,IAAA;QAAc,GAAGuC,SAAA,CAAUa,IAAA;QACjDpB,QAAA,EAAAW;MAAA,CACH;IAAA,CAEJ;EAAA,CAEJ;AAEJ","ignoreList":[]}