@fanvue/ui 1.13.0 → 1.14.0

package/dist/components/Tooltip/Tooltip.mjs

@@ -7,6 +7,31 @@ import { Button } from "../Button/Button.mjs";
 const TooltipProvider = TooltipPrimitive.Provider;
 const Tooltip = TooltipPrimitive.Root;
 const TooltipTrigger = TooltipPrimitive.Trigger;
+const ActionButton = ({
+  action,
+  variant
+}) => action.element ? action.element : /* @__PURE__ */ jsx(Button, { variant, size: "32", onClick: action.onClick, children: action.label });
+const InfoboxContent = ({
+  icon,
+  heading,
+  pill,
+  children,
+  primaryAction,
+  secondaryAction,
+  hasHeader,
+  hasActions
+}) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+  hasHeader && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+    icon && /* @__PURE__ */ jsx("div", { className: "size-5 shrink-0", children: icon }),
+    heading && /* @__PURE__ */ jsx("p", { className: "typography-semibold-body-lg min-w-0 flex-1 text-foreground-inverse", children: heading }),
+    pill && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: pill })
+  ] }),
+  children && /* @__PURE__ */ jsx("div", { className: "typography-regular-body-md text-foreground-inverse", children }),
+  hasActions && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+    primaryAction && /* @__PURE__ */ jsx(ActionButton, { action: primaryAction, variant: "brand" }),
+    secondaryAction && /* @__PURE__ */ jsx(ActionButton, { action: secondaryAction, variant: "tertiary" })
+  ] })
+] });
 const TooltipContent = React.forwardRef(
   ({
     className,
@@ -33,7 +58,7 @@ const TooltipContent = React.forwardRef(
         sideOffset,
         style: { zIndex: "var(--fanvue-ui-portal-z-index, 50)", ...style },
         className: cn(
-          "typography-body-2-regular max-w-[320px] overflow-hidden rounded-3xl bg-background-solid p-4 text-background-inverse-solid shadow-[0px_2px_4px_0px_rgba(17,24,39,0.08)]",
+          "typography-regular-body-md max-w-[320px] overflow-hidden rounded-3xl bg-surface-pageinverse p-4 text-foreground-inverse shadow-[0px_2px_4px_0px_rgba(17,24,39,0.08)]",
           isInfobox && "border border-neutral-200",
           className
         ),
@@ -42,22 +67,23 @@ const TooltipContent = React.forwardRef(
         side,
         ...props,
         children: [
-          isInfobox ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
-            hasHeader && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-              icon && /* @__PURE__ */ jsx("div", { className: "size-5 shrink-0", children: icon }),
-              heading && /* @__PURE__ */ jsx("p", { className: "typography-subtitle min-w-0 flex-1 text-background-inverse-solid", children: heading }),
-              pill && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: pill })
-            ] }),
-            children && /* @__PURE__ */ jsx("div", { className: "typography-body-2-regular text-background-inverse-solid", children }),
-            hasActions && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-              primaryAction && (primaryAction.element ? primaryAction.element : /* @__PURE__ */ jsx(Button, { variant: "brand", size: "32", onClick: primaryAction.onClick, children: primaryAction.label })),
-              secondaryAction && (secondaryAction.element ? secondaryAction.element : /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "32", onClick: secondaryAction.onClick, children: secondaryAction.label }))
-            ] })
-          ] }) : children,
+          isInfobox ? /* @__PURE__ */ jsx(
+            InfoboxContent,
+            {
+              icon,
+              heading,
+              pill,
+              primaryAction,
+              secondaryAction,
+              hasHeader,
+              hasActions,
+              children
+            }
+          ) : children,
           showArrow && /* @__PURE__ */ jsx(
             TooltipPrimitive.Arrow,
             {
-              className: "-translate-y-px! fill-background-solid stroke-2 stroke-background-solid",
+              className: "-translate-y-px! fill-surface-pageinverse stroke-2 stroke-surface-pageinverse",
               width: 12,
               height: 6
             }

package/dist/components/Tooltip/Tooltip.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.mjs","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"../Button/Button\";\n\n/** Props for the {@link TooltipProvider}. Wraps Radix `Tooltip.Provider`. */\nexport type TooltipProviderProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>;\n\n/** Provides tooltip delay and skip-delay context. Wrap your app or a subtree. */\nexport const TooltipProvider = TooltipPrimitive.Provider;\n\n/** Props for the {@link Tooltip} root component. */\nexport interface TooltipProps extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root> {\n  /**\n   * Controlled open state. When provided, the component is in controlled mode\n   * and you must also supply `onOpenChange` to update the value.\n   */\n  open?: boolean;\n  /** Called when the open state changes. Required when `open` is controlled. */\n  onOpenChange?: (open: boolean) => void;\n  /** The open state of the tooltip when it is initially rendered (uncontrolled). */\n  defaultOpen?: boolean;\n}\n\n/** Root component that manages open/close state for a single tooltip. */\nexport const Tooltip = TooltipPrimitive.Root;\n\n/** Props for the {@link TooltipTrigger} component. */\nexport type TooltipTriggerProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Trigger>;\n\n/** The element that triggers the tooltip on hover/focus. */\nexport const TooltipTrigger = TooltipPrimitive.Trigger;\n\n/**\n * Visual style variant of the tooltip content.\n *\n * - `\"tooltip\"` — simple text bubble, no border.\n * - `\"infobox\"` — richer card with a visible border, structured header, body text, and optional actions.\n */\nexport type TooltipContentVariant = \"tooltip\" | \"infobox\";\n\n/** Action button configuration for the infobox variant of {@link TooltipContent}. */\nexport interface TooltipAction {\n  /** Button label. */\n  label: string;\n  /** Click handler. */\n  onClick?: () => void;\n  /**\n   * Optional custom React node to be rendered for the action instead of the default button.\n   * Only used in the infobox variant.\n   */\n  element?: React.ReactNode;\n}\n\nexport interface TooltipContentProps\n  extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> {\n  /**\n   * Visual style variant.\n   *\n   * `\"tooltip\"` is a lightweight text bubble. `\"infobox\"` renders a structured card\n   * with optional heading, icon, pill, body text, and action buttons.\n   *\n   * @default \"tooltip\"\n   */\n  variant?: TooltipContentVariant;\n  /** Whether to show the directional arrow pointer. @default true */\n  showArrow?: boolean;\n  /**\n   * Heading text rendered in subtitle style at the top of the infobox.\n   * Infobox variant only.\n   */\n  heading?: React.ReactNode;\n  /**\n   * Icon element displayed to the left of the heading.\n   * Infobox variant only.\n   */\n  icon?: React.ReactNode;\n  /**\n   * Pill or badge element displayed to the right of the heading.\n   * Infobox variant only.\n   */\n  pill?: React.ReactNode;\n  /**\n   * Primary action button (brand green). Rendered below the body text.\n   * Infobox variant only.\n   */\n  primaryAction?: TooltipAction;\n  /**\n   * Secondary action button (ghost). Rendered next to the primary action.\n   * Infobox variant only.\n   */\n  secondaryAction?: TooltipAction;\n}\n\n/**\n * The popup content of the tooltip. Renders inside a portal.\n *\n * Arrow direction is controlled via the `side` and `align` props (Radix passthrough).\n *\n * @example\n * ```tsx\n * // Simple tooltip\n * <TooltipContent>Info text</TooltipContent>\n *\n * // Infobox with structured content\n * <TooltipContent\n *   variant=\"infobox\"\n *   heading=\"Title\"\n *   icon={<InfoCircleIcon className=\"size-5\" />}\n *   primaryAction={{ label: \"OK\", onClick: () => {} }}\n *   secondaryAction={{ label: \"Dismiss\" }}\n * >\n *   Info text\n * </TooltipContent>\n * ```\n */\nexport const TooltipContent = React.forwardRef<\n  React.ComponentRef<typeof TooltipPrimitive.Content>,\n  TooltipContentProps\n>(\n  (\n    {\n      className,\n      variant = \"tooltip\",\n      showArrow = true,\n      sideOffset = 8,\n      heading,\n      icon,\n      pill,\n      primaryAction,\n      secondaryAction,\n      children,\n      side,\n      style,\n      ...props\n    },\n    ref,\n  ) => {\n    const isInfobox = variant === \"infobox\";\n    const hasHeader =\n      isInfobox && (icon !== undefined || heading !== undefined || pill !== undefined);\n    const hasActions = isInfobox && (primaryAction !== undefined || secondaryAction !== undefined);\n\n    return (\n      <TooltipPrimitive.Portal>\n        <TooltipPrimitive.Content\n          ref={ref}\n          sideOffset={sideOffset}\n          style={{ zIndex: \"var(--fanvue-ui-portal-z-index, 50)\", ...style }}\n          className={cn(\n            \"typography-body-2-regular max-w-[320px] overflow-hidden rounded-3xl bg-background-solid p-4 text-background-inverse-solid shadow-[0px_2px_4px_0px_rgba(17,24,39,0.08)]\",\n            isInfobox && \"border border-neutral-200\",\n            className,\n          )}\n          align=\"center\"\n          arrowPadding={12}\n          side={side}\n          {...props}\n        >\n          {isInfobox ? (\n            <div className=\"flex flex-col gap-3\">\n              {hasHeader && (\n                <div className=\"flex items-center gap-3\">\n                  {icon && <div className=\"size-5 shrink-0\">{icon}</div>}\n                  {heading && (\n                    <p className=\"typography-subtitle min-w-0 flex-1 text-background-inverse-solid\">\n                      {heading}\n                    </p>\n                  )}\n                  {pill && <div className=\"shrink-0\">{pill}</div>}\n                </div>\n              )}\n              {children && (\n                <div className=\"typography-body-2-regular text-background-inverse-solid\">\n                  {children}\n                </div>\n              )}\n              {hasActions && (\n                <div className=\"flex items-center gap-1\">\n                  {primaryAction &&\n                    (primaryAction.element ? (\n                      primaryAction.element\n                    ) : (\n                      <Button variant=\"brand\" size=\"32\" onClick={primaryAction.onClick}>\n                        {primaryAction.label}\n                      </Button>\n                    ))}\n                  {secondaryAction &&\n                    (secondaryAction.element ? (\n                      secondaryAction.element\n                    ) : (\n                      <Button variant=\"tertiary\" size=\"32\" onClick={secondaryAction.onClick}>\n                        {secondaryAction.label}\n                      </Button>\n                    ))}\n                </div>\n              )}\n            </div>\n          ) : (\n            children\n          )}\n          {showArrow && (\n            <TooltipPrimitive.Arrow\n              className={\"-translate-y-px! fill-background-solid stroke-2 stroke-background-solid\"}\n              width={12}\n              height={6}\n            />\n          )}\n        </TooltipPrimitive.Content>\n      </TooltipPrimitive.Portal>\n    );\n  },\n);\nTooltipContent.displayName = \"TooltipContent\";\n"],"names":[],"mappings":";;;;;;AASO,MAAM,kBAAkB,iBAAiB;AAgBzC,MAAM,UAAU,iBAAiB;AAMjC,MAAM,iBAAiB,iBAAiB;AAqFxC,MAAM,iBAAiB,MAAM;AAAA,EAIlC,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,YAAY,YAAY;AAC9B,UAAM,YACJ,cAAc,SAAS,UAAa,YAAY,UAAa,SAAS;AACxE,UAAM,aAAa,cAAc,kBAAkB,UAAa,oBAAoB;AAEpF,WACE,oBAAC,iBAAiB,QAAjB,EACC,UAAA;AAAA,MAAC,iBAAiB;AAAA,MAAjB;AAAA,QACC;AAAA,QACA;AAAA,QACA,OAAO,EAAE,QAAQ,uCAAuC,GAAG,MAAA;AAAA,QAC3D,WAAW;AAAA,UACT;AAAA,UACA,aAAa;AAAA,UACb;AAAA,QAAA;AAAA,QAEF,OAAM;AAAA,QACN,cAAc;AAAA,QACd;AAAA,QACC,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,YACC,qBAAC,OAAA,EAAI,WAAU,uBACZ,UAAA;AAAA,YAAA,aACC,qBAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,cAAA,QAAQ,oBAAC,OAAA,EAAI,WAAU,mBAAmB,UAAA,MAAK;AAAA,cAC/C,WACC,oBAAC,KAAA,EAAE,WAAU,oEACV,UAAA,SACH;AAAA,cAED,QAAQ,oBAAC,OAAA,EAAI,WAAU,YAAY,UAAA,KAAA,CAAK;AAAA,YAAA,GAC3C;AAAA,YAED,YACC,oBAAC,OAAA,EAAI,WAAU,2DACZ,UACH;AAAA,YAED,cACC,qBAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,cAAA,kBACE,cAAc,UACb,cAAc,8BAEb,QAAA,EAAO,SAAQ,SAAQ,MAAK,MAAK,SAAS,cAAc,SACtD,wBAAc,MAAA,CACjB;AAAA,cAEH,oBACE,gBAAgB,UACf,gBAAgB,UAEhB,oBAAC,QAAA,EAAO,SAAQ,YAAW,MAAK,MAAK,SAAS,gBAAgB,SAC3D,0BAAgB,OACnB;AAAA,YAAA,EAAA,CAEN;AAAA,UAAA,EAAA,CAEJ,IAEA;AAAA,UAED,aACC;AAAA,YAAC,iBAAiB;AAAA,YAAjB;AAAA,cACC,WAAW;AAAA,cACX,OAAO;AAAA,cACP,QAAQ;AAAA,YAAA;AAAA,UAAA;AAAA,QACV;AAAA,MAAA;AAAA,IAAA,GAGN;AAAA,EAEJ;AACF;AACA,eAAe,cAAc;"}
+{"version":3,"file":"Tooltip.mjs","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"../Button/Button\";\n\n/** Props for the {@link TooltipProvider}. Wraps Radix `Tooltip.Provider`. */\nexport type TooltipProviderProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>;\n\n/** Provides tooltip delay and skip-delay context. Wrap your app or a subtree. */\nexport const TooltipProvider = TooltipPrimitive.Provider;\n\n/** Props for the {@link Tooltip} root component. */\nexport interface TooltipProps extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root> {\n  /**\n   * Controlled open state. When provided, the component is in controlled mode\n   * and you must also supply `onOpenChange` to update the value.\n   */\n  open?: boolean;\n  /** Called when the open state changes. Required when `open` is controlled. */\n  onOpenChange?: (open: boolean) => void;\n  /** The open state of the tooltip when it is initially rendered (uncontrolled). */\n  defaultOpen?: boolean;\n}\n\n/** Root component that manages open/close state for a single tooltip. */\nexport const Tooltip = TooltipPrimitive.Root;\n\n/** Props for the {@link TooltipTrigger} component. */\nexport type TooltipTriggerProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Trigger>;\n\n/** The element that triggers the tooltip on hover/focus. */\nexport const TooltipTrigger = TooltipPrimitive.Trigger;\n\n/**\n * Visual style variant of the tooltip content.\n *\n * - `\"tooltip\"` — simple text bubble, no border.\n * - `\"infobox\"` — richer card with a visible border, structured header, body text, and optional actions.\n */\nexport type TooltipContentVariant = \"tooltip\" | \"infobox\";\n\n/** Action button configuration for the infobox variant of {@link TooltipContent}. */\nexport interface TooltipAction {\n  /** Button label. */\n  label: string;\n  /** Click handler. */\n  onClick?: () => void;\n  /**\n   * Optional custom React node to be rendered for the action instead of the default button.\n   * Only used in the infobox variant.\n   */\n  element?: React.ReactNode;\n}\n\nexport interface TooltipContentProps\n  extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> {\n  /**\n   * Visual style variant.\n   *\n   * `\"tooltip\"` is a lightweight text bubble. `\"infobox\"` renders a structured card\n   * with optional heading, icon, pill, body text, and action buttons.\n   *\n   * @default \"tooltip\"\n   */\n  variant?: TooltipContentVariant;\n  /** Whether to show the directional arrow pointer. @default true */\n  showArrow?: boolean;\n  /**\n   * Heading text rendered in subtitle style at the top of the infobox.\n   * Infobox variant only.\n   */\n  heading?: React.ReactNode;\n  /**\n   * Icon element displayed to the left of the heading.\n   * Infobox variant only.\n   */\n  icon?: React.ReactNode;\n  /**\n   * Pill or badge element displayed to the right of the heading.\n   * Infobox variant only.\n   */\n  pill?: React.ReactNode;\n  /**\n   * Primary action button (brand green). Rendered below the body text.\n   * Infobox variant only.\n   */\n  primaryAction?: TooltipAction;\n  /**\n   * Secondary action button (ghost). Rendered next to the primary action.\n   * Infobox variant only.\n   */\n  secondaryAction?: TooltipAction;\n}\n\nconst ActionButton = ({\n  action,\n  variant,\n}: {\n  action: TooltipAction;\n  variant: \"brand\" | \"tertiary\";\n}) =>\n  action.element ? (\n    action.element\n  ) : (\n    <Button variant={variant} size=\"32\" onClick={action.onClick}>\n      {action.label}\n    </Button>\n  );\n\nconst InfoboxContent = ({\n  icon,\n  heading,\n  pill,\n  children,\n  primaryAction,\n  secondaryAction,\n  hasHeader,\n  hasActions,\n}: {\n  icon?: React.ReactNode;\n  heading?: React.ReactNode;\n  pill?: React.ReactNode;\n  children?: React.ReactNode;\n  primaryAction?: TooltipAction;\n  secondaryAction?: TooltipAction;\n  hasHeader: boolean;\n  hasActions: boolean;\n}) => (\n  <div className=\"flex flex-col gap-3\">\n    {hasHeader && (\n      <div className=\"flex items-center gap-3\">\n        {icon && <div className=\"size-5 shrink-0\">{icon}</div>}\n        {heading && (\n          <p className=\"typography-semibold-body-lg min-w-0 flex-1 text-foreground-inverse\">\n            {heading}\n          </p>\n        )}\n        {pill && <div className=\"shrink-0\">{pill}</div>}\n      </div>\n    )}\n    {children && (\n      <div className=\"typography-regular-body-md text-foreground-inverse\">{children}</div>\n    )}\n    {hasActions && (\n      <div className=\"flex items-center gap-1\">\n        {primaryAction && <ActionButton action={primaryAction} variant=\"brand\" />}\n        {secondaryAction && <ActionButton action={secondaryAction} variant=\"tertiary\" />}\n      </div>\n    )}\n  </div>\n);\n\n/**\n * The popup content of the tooltip. Renders inside a portal.\n *\n * Arrow direction is controlled via the `side` and `align` props (Radix passthrough).\n *\n * @example\n * ```tsx\n * // Simple tooltip\n * <TooltipContent>Info text</TooltipContent>\n *\n * // Infobox with structured content\n * <TooltipContent\n *   variant=\"infobox\"\n *   heading=\"Title\"\n *   icon={<InfoCircleIcon className=\"size-5\" />}\n *   primaryAction={{ label: \"OK\", onClick: () => {} }}\n *   secondaryAction={{ label: \"Dismiss\" }}\n * >\n *   Info text\n * </TooltipContent>\n * ```\n */\nexport const TooltipContent = React.forwardRef<\n  React.ComponentRef<typeof TooltipPrimitive.Content>,\n  TooltipContentProps\n>(\n  (\n    {\n      className,\n      variant = \"tooltip\",\n      showArrow = true,\n      sideOffset = 8,\n      heading,\n      icon,\n      pill,\n      primaryAction,\n      secondaryAction,\n      children,\n      side,\n      style,\n      ...props\n    },\n    ref,\n  ) => {\n    const isInfobox = variant === \"infobox\";\n    const hasHeader =\n      isInfobox && (icon !== undefined || heading !== undefined || pill !== undefined);\n    const hasActions = isInfobox && (primaryAction !== undefined || secondaryAction !== undefined);\n\n    return (\n      <TooltipPrimitive.Portal>\n        <TooltipPrimitive.Content\n          ref={ref}\n          sideOffset={sideOffset}\n          style={{ zIndex: \"var(--fanvue-ui-portal-z-index, 50)\", ...style }}\n          className={cn(\n            \"typography-regular-body-md max-w-[320px] overflow-hidden rounded-3xl bg-surface-pageinverse p-4 text-foreground-inverse shadow-[0px_2px_4px_0px_rgba(17,24,39,0.08)]\",\n            isInfobox && \"border border-neutral-200\",\n            className,\n          )}\n          align=\"center\"\n          arrowPadding={12}\n          side={side}\n          {...props}\n        >\n          {isInfobox ? (\n            <InfoboxContent\n              icon={icon}\n              heading={heading}\n              pill={pill}\n              primaryAction={primaryAction}\n              secondaryAction={secondaryAction}\n              hasHeader={hasHeader}\n              hasActions={hasActions}\n            >\n              {children}\n            </InfoboxContent>\n          ) : (\n            children\n          )}\n          {showArrow && (\n            <TooltipPrimitive.Arrow\n              className={\n                \"-translate-y-px! fill-surface-pageinverse stroke-2 stroke-surface-pageinverse\"\n              }\n              width={12}\n              height={6}\n            />\n          )}\n        </TooltipPrimitive.Content>\n      </TooltipPrimitive.Portal>\n    );\n  },\n);\nTooltipContent.displayName = \"TooltipContent\";\n"],"names":[],"mappings":";;;;;;AASO,MAAM,kBAAkB,iBAAiB;AAgBzC,MAAM,UAAU,iBAAiB;AAMjC,MAAM,iBAAiB,iBAAiB;AA+D/C,MAAM,eAAe,CAAC;AAAA,EACpB;AAAA,EACA;AACF,MAIE,OAAO,UACL,OAAO,UAEP,oBAAC,QAAA,EAAO,SAAkB,MAAK,MAAK,SAAS,OAAO,SACjD,iBAAO,OACV;AAGJ,MAAM,iBAAiB,CAAC;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAUE,qBAAC,OAAA,EAAI,WAAU,uBACZ,UAAA;AAAA,EAAA,aACC,qBAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,IAAA,QAAQ,oBAAC,OAAA,EAAI,WAAU,mBAAmB,UAAA,MAAK;AAAA,IAC/C,WACC,oBAAC,KAAA,EAAE,WAAU,sEACV,UAAA,SACH;AAAA,IAED,QAAQ,oBAAC,OAAA,EAAI,WAAU,YAAY,UAAA,KAAA,CAAK;AAAA,EAAA,GAC3C;AAAA,EAED,YACC,oBAAC,OAAA,EAAI,WAAU,sDAAsD,UAAS;AAAA,EAE/E,cACC,qBAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,IAAA,iBAAiB,oBAAC,cAAA,EAAa,QAAQ,eAAe,SAAQ,SAAQ;AAAA,IACtE,mBAAmB,oBAAC,cAAA,EAAa,QAAQ,iBAAiB,SAAQ,WAAA,CAAW;AAAA,EAAA,EAAA,CAChF;AAAA,GAEJ;AAyBK,MAAM,iBAAiB,MAAM;AAAA,EAIlC,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,YAAY,YAAY;AAC9B,UAAM,YACJ,cAAc,SAAS,UAAa,YAAY,UAAa,SAAS;AACxE,UAAM,aAAa,cAAc,kBAAkB,UAAa,oBAAoB;AAEpF,WACE,oBAAC,iBAAiB,QAAjB,EACC,UAAA;AAAA,MAAC,iBAAiB;AAAA,MAAjB;AAAA,QACC;AAAA,QACA;AAAA,QACA,OAAO,EAAE,QAAQ,uCAAuC,GAAG,MAAA;AAAA,QAC3D,WAAW;AAAA,UACT;AAAA,UACA,aAAa;AAAA,UACb;AAAA,QAAA;AAAA,QAEF,OAAM;AAAA,QACN,cAAc;AAAA,QACd;AAAA,QACC,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,YACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cAEC;AAAA,YAAA;AAAA,UAAA,IAGH;AAAA,UAED,aACC;AAAA,YAAC,iBAAiB;AAAA,YAAjB;AAAA,cACC,WACE;AAAA,cAEF,OAAO;AAAA,cACP,QAAQ;AAAA,YAAA;AAAA,UAAA;AAAA,QACV;AAAA,MAAA;AAAA,IAAA,GAGN;AAAA,EAEJ;AACF;AACA,eAAe,cAAc;"}