@lmb-it/kitsconcerto-native 0.1.236

package/apps/mobile/src/ui/menu/index.js

@@ -0,0 +1,175 @@
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { createMenu } from '@gluestack-ui/core/menu/creator';
+import { tva } from '@gluestack-ui/utils/nativewind-utils';
+import { cssInterop } from 'nativewind';
+import { Pressable, View, Text } from 'react-native';
+import { Motion, AnimatePresence } from '@legendapp/motion';
+
+const MotionView = Motion.View;
+const menuStyle = tva({
+  base: "rounded-md bg-background-0 border border-outline-100 p-1 shadow-hard-5"
+});
+const menuItemStyle = tva({
+  base: "min-w-[200px] p-3 flex-row items-center rounded data-[hover=true]:bg-background-50 data-[active=true]:bg-background-100 data-[focus=true]:bg-background-50 data-[focus=true]:web:outline-none data-[focus=true]:web:outline-0 data-[disabled=true]:opacity-40 data-[disabled=true]:web:cursor-not-allowed data-[focus-visible=true]:web:outline-2 data-[focus-visible=true]:web:outline-primary-700 data-[focus-visible=true]:web:outline data-[focus-visible=true]:web:cursor-pointer data-[disabled=true]:data-[focus=true]:bg-transparent"
+});
+const menuBackdropStyle = tva({
+  base: "absolute top-0 bottom-0 left-0 right-0 web:cursor-default"
+  // add this classnames if you want to give background color to backdrop
+  // opacity-50 bg-background-500,
+});
+const menuSeparatorStyle = tva({
+  base: "bg-background-200 h-px w-full"
+});
+const menuItemLabelStyle = tva({
+  base: "text-typography-700 font-normal font-body",
+  variants: {
+    isTruncated: {
+      true: "web:truncate"
+    },
+    bold: {
+      true: "font-bold"
+    },
+    underline: {
+      true: "underline"
+    },
+    strikeThrough: {
+      true: "line-through"
+    },
+    size: {
+      "2xs": "text-2xs",
+      "xs": "text-xs",
+      "sm": "text-sm",
+      "md": "text-base",
+      "lg": "text-lg",
+      "xl": "text-xl",
+      "2xl": "text-2xl",
+      "3xl": "text-3xl",
+      "4xl": "text-4xl",
+      "5xl": "text-5xl",
+      "6xl": "text-6xl"
+    },
+    sub: {
+      true: "text-xs"
+    },
+    italic: {
+      true: "italic"
+    },
+    highlight: {
+      true: "bg-yellow-500"
+    }
+  }
+});
+const BackdropPressable = React.forwardRef(function BackdropPressable2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      ref,
+      className: menuBackdropStyle({
+        class: className
+      }),
+      ...props
+    }
+  );
+});
+const Item = React.forwardRef(function Item2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      ref,
+      className: menuItemStyle({
+        class: className
+      }),
+      ...props
+    }
+  );
+});
+const Separator = React.forwardRef(function Separator2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      ref,
+      className: menuSeparatorStyle({ class: className }),
+      ...props
+    }
+  );
+});
+const UIMenu = createMenu({
+  Root: MotionView,
+  Item,
+  Label: Text,
+  Backdrop: BackdropPressable,
+  AnimatePresence,
+  Separator
+});
+cssInterop(MotionView, { className: "style" });
+const Menu = React.forwardRef(
+  function Menu2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      UIMenu,
+      {
+        ref,
+        initial: {
+          opacity: 0,
+          scale: 0.8
+        },
+        animate: {
+          opacity: 1,
+          scale: 1
+        },
+        exit: {
+          opacity: 0,
+          scale: 0.8
+        },
+        transition: {
+          type: "timing",
+          duration: 100
+        },
+        className: menuStyle({
+          class: className
+        }),
+        ...props
+      }
+    );
+  }
+);
+const MenuItem = UIMenu.Item;
+const MenuItemLabel = React.forwardRef(function MenuItemLabel2({
+  className,
+  isTruncated,
+  bold,
+  underline,
+  strikeThrough,
+  size = "md",
+  sub,
+  italic,
+  highlight,
+  ...props
+}, ref) {
+  return /* @__PURE__ */ jsx(
+    UIMenu.ItemLabel,
+    {
+      ref,
+      className: menuItemLabelStyle({
+        isTruncated,
+        bold,
+        underline,
+        strikeThrough,
+        size,
+        sub,
+        italic,
+        highlight,
+        class: className
+      }),
+      ...props
+    }
+  );
+});
+const MenuSeparator = UIMenu.Separator;
+Menu.displayName = "Menu";
+MenuItem.displayName = "MenuItem";
+MenuItemLabel.displayName = "MenuItemLabel";
+MenuSeparator.displayName = "MenuSeparator";
+
+export { Menu, MenuItem, MenuItemLabel, MenuSeparator, UIMenu };
+//# sourceMappingURL=index.js.map

package/apps/mobile/src/ui/menu/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../../../../apps/mobile/src/ui/menu/index.tsx"],"sourcesContent":["'use client';\nimport React from 'react';\nimport { createMenu } from '@gluestack-ui/core/menu/creator';\nimport { tva } from '@gluestack-ui/utils/nativewind-utils';\nimport { cssInterop } from 'nativewind';\nimport { Pressable, Text, View, ViewStyle } from 'react-native';\nimport {\n  Motion,\n  AnimatePresence,\n  MotionComponentProps,\n} from '@legendapp/motion';\nimport type { VariantProps } from '@gluestack-ui/utils/nativewind-utils';\nimport { IAnimatedPressableProps, IMotionViewProps } from '../';\n\n\nconst MotionView = Motion.View as React.ComponentType<IMotionViewProps>;\n\nconst menuStyle = tva({\n  base: 'rounded-md bg-background-0 border border-outline-100 p-1 shadow-hard-5',\n});\n\nconst menuItemStyle = tva({\n  base: 'min-w-[200px] p-3 flex-row items-center rounded data-[hover=true]:bg-background-50 data-[active=true]:bg-background-100 data-[focus=true]:bg-background-50 data-[focus=true]:web:outline-none data-[focus=true]:web:outline-0 data-[disabled=true]:opacity-40 data-[disabled=true]:web:cursor-not-allowed data-[focus-visible=true]:web:outline-2 data-[focus-visible=true]:web:outline-primary-700 data-[focus-visible=true]:web:outline data-[focus-visible=true]:web:cursor-pointer data-[disabled=true]:data-[focus=true]:bg-transparent',\n});\n\nconst menuBackdropStyle = tva({\n  base: 'absolute top-0 bottom-0 left-0 right-0 web:cursor-default',\n  // add this classnames if you want to give background color to backdrop\n  // opacity-50 bg-background-500,\n});\n\nconst menuSeparatorStyle = tva({\n  base: 'bg-background-200 h-px w-full',\n});\n\nconst menuItemLabelStyle = tva({\n  base: 'text-typography-700 font-normal font-body',\n\n  variants: {\n    isTruncated: {\n      true: 'web:truncate',\n    },\n    bold: {\n      true: 'font-bold',\n    },\n    underline: {\n      true: 'underline',\n    },\n    strikeThrough: {\n      true: 'line-through',\n    },\n    size: {\n      '2xs': 'text-2xs',\n      'xs': 'text-xs',\n      'sm': 'text-sm',\n      'md': 'text-base',\n      'lg': 'text-lg',\n      'xl': 'text-xl',\n      '2xl': 'text-2xl',\n      '3xl': 'text-3xl',\n      '4xl': 'text-4xl',\n      '5xl': 'text-5xl',\n      '6xl': 'text-6xl',\n    },\n    sub: {\n      true: 'text-xs',\n    },\n    italic: {\n      true: 'italic',\n    },\n    highlight: {\n      true: 'bg-yellow-500',\n    },\n  },\n});\n\nconst BackdropPressable = React.forwardRef<\n  React.ComponentRef<typeof Pressable>,\n  React.ComponentPropsWithoutRef<typeof Pressable> &\n    VariantProps<typeof menuBackdropStyle>\n>(function BackdropPressable({ className, ...props }, ref) {\n  return (\n    <Pressable\n      ref={ref}\n      className={menuBackdropStyle({\n        class: className,\n      })}\n      {...props}\n    />\n  );\n});\n\nexport type IMenuItemProps = VariantProps<typeof menuItemStyle> & {\n  className?: string;\n} & React.ComponentPropsWithoutRef<typeof Pressable>;\n\nconst Item = React.forwardRef<\n  React.ComponentRef<typeof Pressable>,\n  IMenuItemProps\n>(function Item({ className, ...props }, ref) {\n  return (\n    <Pressable\n      ref={ref}\n      className={menuItemStyle({\n        class: className,\n      })}\n      {...props}\n    />\n  );\n});\n\nconst Separator = React.forwardRef<\n  React.ComponentRef<typeof View>,\n  React.ComponentPropsWithoutRef<typeof View> &\n    VariantProps<typeof menuSeparatorStyle>\n>(function Separator({ className, ...props }, ref) {\n  return (\n    <View\n      ref={ref}\n      className={menuSeparatorStyle({ class: className })}\n      {...props}\n    />\n  );\n});\nexport const UIMenu = createMenu({\n  Root: MotionView,\n  Item: Item,\n  Label: Text,\n  Backdrop: BackdropPressable,\n  AnimatePresence: AnimatePresence,\n  Separator: Separator,\n});\n\ncssInterop(MotionView, { className: 'style' });\n\nexport type IMenuProps = React.ComponentProps<typeof UIMenu> &\n  VariantProps<typeof menuStyle> & { className?: string };\nexport type IMenuItemLabelProps = React.ComponentProps<typeof UIMenu.ItemLabel> &\n  VariantProps<typeof menuItemLabelStyle> & { className?: string };\n\nconst Menu = React.forwardRef<React.ComponentRef<typeof UIMenu>, IMenuProps>(\n  function Menu({ className, ...props }, ref) {\n    return (\n      <UIMenu\n        ref={ref}\n        initial={{\n          opacity: 0,\n          scale: 0.8,\n        }}\n        animate={{\n          opacity: 1,\n          scale: 1,\n        }}\n        exit={{\n          opacity: 0,\n          scale: 0.8,\n        }}\n        transition={{\n          type: 'timing',\n          duration: 100,\n        }}\n        className={menuStyle({\n          class: className,\n        })}\n        {...props}\n      />\n    );\n  }\n);\n\nconst MenuItem = UIMenu.Item;\n\nconst MenuItemLabel = React.forwardRef<\n  React.ComponentRef<typeof UIMenu.ItemLabel>,\n  IMenuItemLabelProps\n>(function MenuItemLabel(\n  {\n    className,\n    isTruncated,\n    bold,\n    underline,\n    strikeThrough,\n    size = 'md',\n    sub,\n    italic,\n    highlight,\n    ...props\n  },\n  ref\n) {\n  return (\n    <UIMenu.ItemLabel\n      ref={ref}\n      className={menuItemLabelStyle({\n        isTruncated: isTruncated as boolean,\n        bold: bold as boolean,\n        underline: underline as boolean,\n        strikeThrough: strikeThrough as boolean,\n        size,\n        sub: sub as boolean,\n        italic: italic as boolean,\n        highlight: highlight as boolean,\n        class: className,\n      })}\n      {...props}\n    />\n  );\n});\n\nconst MenuSeparator = UIMenu.Separator;\n\nMenu.displayName = 'Menu';\nMenuItem.displayName = 'MenuItem';\nMenuItemLabel.displayName = 'MenuItemLabel';\nMenuSeparator.displayName = 'MenuSeparator';\nexport { Menu, MenuItem, MenuItemLabel, MenuSeparator };\n"],"names":["BackdropPressable","Item","Separator","Menu","MenuItemLabel"],"mappings":"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"}

package/apps/mobile/src/ui/modal/index.cjs

@@ -0,0 +1,210 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var creator = require('@gluestack-ui/core/modal/creator');
+var reactNative = require('react-native');
+var motion = require('@legendapp/motion');
+var nativewindUtils = require('@gluestack-ui/utils/nativewind-utils');
+var nativewind = require('nativewind');
+
+const AnimatedPressable = motion.createMotionAnimatedComponent(
+  reactNative.Pressable
+);
+const SCOPE = "MODAL";
+const MotionView = motion.Motion.View;
+const UIModal = creator.createModal({
+  Root: nativewindUtils.withStyleContext(reactNative.View, SCOPE),
+  Backdrop: AnimatedPressable,
+  Content: MotionView,
+  Body: reactNative.ScrollView,
+  CloseButton: reactNative.Pressable,
+  Footer: reactNative.View,
+  Header: reactNative.View,
+  AnimatePresence: motion.AnimatePresence
+});
+nativewind.cssInterop(AnimatedPressable, { className: "style" });
+nativewind.cssInterop(MotionView, { className: "style" });
+const modalStyle = nativewindUtils.tva({
+  base: "group/modal w-full h-full justify-center items-center web:pointer-events-none",
+  variants: {
+    size: {
+      xs: "",
+      sm: "",
+      md: "",
+      lg: "",
+      full: ""
+    }
+  }
+});
+const modalBackdropStyle = nativewindUtils.tva({
+  base: "absolute left-0 top-0 right-0 bottom-0 bg-background-dark web:cursor-default"
+});
+const modalContentStyle = nativewindUtils.tva({
+  base: "bg-background-0 rounded-md overflow-hidden border border-outline-100 shadow-hard-2 p-6",
+  parentVariants: {
+    size: {
+      xs: "w-[60%] max-w-[360px]",
+      sm: "w-[70%] max-w-[420px]",
+      md: "w-[80%] max-w-[510px]",
+      lg: "w-[90%] max-w-[640px]",
+      full: "w-full"
+    }
+  }
+});
+const modalBodyStyle = nativewindUtils.tva({
+  base: "mt-2 mb-6"
+});
+const modalCloseButtonStyle = nativewindUtils.tva({
+  base: "group/modal-close-button z-10 rounded data-[focus-visible=true]:web:bg-background-100 web:outline-0 cursor-pointer"
+});
+const modalHeaderStyle = nativewindUtils.tva({
+  base: "justify-between items-center flex-row"
+});
+const modalFooterStyle = nativewindUtils.tva({
+  base: "flex-row justify-end items-center gap-2"
+});
+const Modal = React.forwardRef(
+  ({ className, size = "md", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    UIModal,
+    {
+      ref,
+      ...props,
+      pointerEvents: "box-none",
+      className: modalStyle({ size, class: className }),
+      context: { size }
+    }
+  )
+);
+const ModalBackdrop = React.forwardRef(function ModalBackdrop2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    UIModal.Backdrop,
+    {
+      ref,
+      initial: {
+        opacity: 0
+      },
+      animate: {
+        opacity: 0.5
+      },
+      exit: {
+        opacity: 0
+      },
+      transition: {
+        type: "spring",
+        damping: 18,
+        stiffness: 250,
+        opacity: {
+          type: "timing",
+          duration: 250
+        }
+      },
+      ...props,
+      className: modalBackdropStyle({
+        class: className
+      })
+    }
+  );
+});
+const ModalContent = React.forwardRef(function ModalContent2({ className, size, ...props }, ref) {
+  const { size: parentSize } = nativewindUtils.useStyleContext(SCOPE);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    UIModal.Content,
+    {
+      ref,
+      initial: {
+        opacity: 0,
+        scale: 0.9
+      },
+      animate: {
+        opacity: 1,
+        scale: 1
+      },
+      exit: {
+        opacity: 0
+      },
+      transition: {
+        type: "spring",
+        damping: 18,
+        stiffness: 250,
+        opacity: {
+          type: "timing",
+          duration: 250
+        }
+      },
+      ...props,
+      className: modalContentStyle({
+        parentVariants: {
+          size: parentSize
+        },
+        size,
+        class: className
+      }),
+      pointerEvents: "auto"
+    }
+  );
+});
+const ModalHeader = React.forwardRef(function ModalHeader2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    UIModal.Header,
+    {
+      ref,
+      ...props,
+      className: modalHeaderStyle({
+        class: className
+      })
+    }
+  );
+});
+const ModalBody = React.forwardRef(function ModalBody2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    UIModal.Body,
+    {
+      ref,
+      ...props,
+      className: modalBodyStyle({
+        class: className
+      })
+    }
+  );
+});
+const ModalFooter = React.forwardRef(function ModalFooter2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    UIModal.Footer,
+    {
+      ref,
+      ...props,
+      className: modalFooterStyle({
+        class: className
+      })
+    }
+  );
+});
+const ModalCloseButton = React.forwardRef(function ModalCloseButton2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    UIModal.CloseButton,
+    {
+      ref,
+      ...props,
+      className: modalCloseButtonStyle({
+        class: className
+      })
+    }
+  );
+});
+Modal.displayName = "Modal";
+ModalBackdrop.displayName = "ModalBackdrop";
+ModalContent.displayName = "ModalContent";
+ModalHeader.displayName = "ModalHeader";
+ModalBody.displayName = "ModalBody";
+ModalFooter.displayName = "ModalFooter";
+ModalCloseButton.displayName = "ModalCloseButton";
+
+exports.Modal = Modal;
+exports.ModalBackdrop = ModalBackdrop;
+exports.ModalBody = ModalBody;
+exports.ModalCloseButton = ModalCloseButton;
+exports.ModalContent = ModalContent;
+exports.ModalFooter = ModalFooter;
+exports.ModalHeader = ModalHeader;
+//# sourceMappingURL=index.cjs.map

package/apps/mobile/src/ui/modal/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../../../../../../apps/mobile/src/ui/modal/index.tsx"],"sourcesContent":["'use client';\nimport React from 'react';\nimport { createModal } from '@gluestack-ui/core/modal/creator';\nimport { Pressable, View, ScrollView } from 'react-native';\nimport {\n  Motion,\n  AnimatePresence,\n  createMotionAnimatedComponent,\n} from '@legendapp/motion';\nimport { tva } from '@gluestack-ui/utils/nativewind-utils';\nimport {\n  withStyleContext,\n  useStyleContext,\n} from '@gluestack-ui/utils/nativewind-utils';\nimport { cssInterop } from 'nativewind';\nimport type { VariantProps } from '@gluestack-ui/utils/nativewind-utils';\nimport { IAnimatedPressableProps, IMotionViewProps } from '../';\n\n\nconst AnimatedPressable = createMotionAnimatedComponent(\n  Pressable\n) as React.ComponentType<IAnimatedPressableProps>;\nconst SCOPE = 'MODAL';\n\n\nconst MotionView = Motion.View as React.ComponentType<IMotionViewProps>;\n\nconst UIModal = createModal({\n  Root: withStyleContext(View, SCOPE),\n  Backdrop: AnimatedPressable,\n  Content: MotionView,\n  Body: ScrollView,\n  CloseButton: Pressable,\n  Footer: View,\n  Header: View,\n  AnimatePresence: AnimatePresence,\n});\n\ncssInterop(AnimatedPressable, { className: 'style' });\ncssInterop(MotionView, { className: 'style' });\n\nconst modalStyle = tva({\n  base: 'group/modal w-full h-full justify-center items-center web:pointer-events-none',\n  variants: {\n    size: {\n      xs: '',\n      sm: '',\n      md: '',\n      lg: '',\n      full: '',\n    },\n  },\n});\n\nconst modalBackdropStyle = tva({\n  base: 'absolute left-0 top-0 right-0 bottom-0 bg-background-dark web:cursor-default',\n});\n\nconst modalContentStyle = tva({\n  base: 'bg-background-0 rounded-md overflow-hidden border border-outline-100 shadow-hard-2 p-6',\n  parentVariants: {\n    size: {\n      xs: 'w-[60%] max-w-[360px]',\n      sm: 'w-[70%] max-w-[420px]',\n      md: 'w-[80%] max-w-[510px]',\n      lg: 'w-[90%] max-w-[640px]',\n      full: 'w-full',\n    },\n  },\n});\n\nconst modalBodyStyle = tva({\n  base: 'mt-2 mb-6',\n});\n\nconst modalCloseButtonStyle = tva({\n  base: 'group/modal-close-button z-10 rounded data-[focus-visible=true]:web:bg-background-100 web:outline-0 cursor-pointer',\n});\n\nconst modalHeaderStyle = tva({\n  base: 'justify-between items-center flex-row',\n});\n\nconst modalFooterStyle = tva({\n  base: 'flex-row justify-end items-center gap-2',\n});\n\nexport type IModalProps = React.ComponentProps<typeof UIModal> &\n  VariantProps<typeof modalStyle> & { className?: string };\n\nexport type IModalBackdropProps = React.ComponentProps<typeof UIModal.Backdrop> &\n  VariantProps<typeof modalBackdropStyle> & { className?: string };\n\nexport type IModalContentProps = React.ComponentProps<typeof UIModal.Content> &\n  VariantProps<typeof modalContentStyle> & { className?: string };\n\nexport type IModalHeaderProps = React.ComponentProps<typeof UIModal.Header> &\n  VariantProps<typeof modalHeaderStyle> & { className?: string };\n\nexport type IModalBodyProps = React.ComponentProps<typeof UIModal.Body> &\n  VariantProps<typeof modalBodyStyle> & { className?: string };\n\nexport type IModalFooterProps = React.ComponentProps<typeof UIModal.Footer> &\n  VariantProps<typeof modalFooterStyle> & { className?: string };\n\nexport type IModalCloseButtonProps = React.ComponentProps<typeof UIModal.CloseButton> &\n  VariantProps<typeof modalCloseButtonStyle> & { className?: string };\n\nconst Modal = React.forwardRef<React.ComponentRef<typeof UIModal>, IModalProps>(\n  ({ className, size = 'md', ...props }, ref) => (\n    <UIModal\n      ref={ref}\n      {...props}\n      pointerEvents=\"box-none\"\n      className={modalStyle({ size, class: className })}\n      context={{ size }}\n    />\n  )\n);\n\nconst ModalBackdrop = React.forwardRef<\n  React.ComponentRef<typeof UIModal.Backdrop>,\n  IModalBackdropProps\n>(function ModalBackdrop({ className, ...props }, ref) {\n  return (\n    <UIModal.Backdrop\n      ref={ref}\n      initial={{\n        opacity: 0,\n      }}\n      animate={{\n        opacity: 0.5,\n      }}\n      exit={{\n        opacity: 0,\n      }}\n      transition={{\n        type: 'spring',\n        damping: 18,\n        stiffness: 250,\n        opacity: {\n          type: 'timing',\n          duration: 250,\n        },\n      }}\n      {...props}\n      className={modalBackdropStyle({\n        class: className,\n      })}\n    />\n  );\n});\n\nconst ModalContent = React.forwardRef<\n  React.ComponentRef<typeof UIModal.Content>,\n  IModalContentProps\n>(function ModalContent({ className, size, ...props }, ref) {\n  const { size: parentSize } = useStyleContext(SCOPE);\n\n  return (\n    <UIModal.Content\n      ref={ref}\n      initial={{\n        opacity: 0,\n        scale: 0.9,\n      }}\n      animate={{\n        opacity: 1,\n        scale: 1,\n      }}\n      exit={{\n        opacity: 0,\n      }}\n      transition={{\n        type: 'spring',\n        damping: 18,\n        stiffness: 250,\n        opacity: {\n          type: 'timing',\n          duration: 250,\n        },\n      }}\n      {...props}\n      className={modalContentStyle({\n        parentVariants: {\n          size: parentSize,\n        },\n        size,\n        class: className,\n      })}\n      pointerEvents=\"auto\"\n    />\n  );\n});\n\nconst ModalHeader = React.forwardRef<\n  React.ComponentRef<typeof UIModal.Header>,\n  IModalHeaderProps\n>(function ModalHeader({ className, ...props }, ref) {\n  return (\n    <UIModal.Header\n      ref={ref}\n      {...props}\n      className={modalHeaderStyle({\n        class: className,\n      })}\n    />\n  );\n});\n\nconst ModalBody = React.forwardRef<\n  React.ComponentRef<typeof UIModal.Body>,\n  IModalBodyProps\n>(function ModalBody({ className, ...props }, ref) {\n  return (\n    <UIModal.Body\n      ref={ref}\n      {...props}\n      className={modalBodyStyle({\n        class: className,\n      })}\n    />\n  );\n});\n\nconst ModalFooter = React.forwardRef<\n  React.ComponentRef<typeof UIModal.Footer>,\n  IModalFooterProps\n>(function ModalFooter({ className, ...props }, ref) {\n  return (\n    <UIModal.Footer\n      ref={ref}\n      {...props}\n      className={modalFooterStyle({\n        class: className,\n      })}\n    />\n  );\n});\n\nconst ModalCloseButton = React.forwardRef<\n  React.ComponentRef<typeof UIModal.CloseButton>,\n  IModalCloseButtonProps\n>(function ModalCloseButton({ className, ...props }, ref) {\n  return (\n    <UIModal.CloseButton\n      ref={ref}\n      {...props}\n      className={modalCloseButtonStyle({\n        class: className,\n      })}\n    />\n  );\n});\n\nModal.displayName = 'Modal';\nModalBackdrop.displayName = 'ModalBackdrop';\nModalContent.displayName = 'ModalContent';\nModalHeader.displayName = 'ModalHeader';\nModalBody.displayName = 'ModalBody';\nModalFooter.displayName = 'ModalFooter';\nModalCloseButton.displayName = 'ModalCloseButton';\n\nexport {\n  Modal,\n  ModalBackdrop,\n  ModalContent,\n  ModalCloseButton,\n  ModalHeader,\n  ModalBody,\n  ModalFooter,\n};\n"],"names":["createMotionAnimatedComponent","Pressable","Motion","createModal","withStyleContext","View","ScrollView","AnimatePresence","cssInterop","tva","jsx","ModalBackdrop","ModalContent","useStyleContext","ModalHeader","ModalBody","ModalFooter","ModalCloseButton"],"mappings":"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"}

package/apps/mobile/src/ui/modal/index.js

@@ -0,0 +1,202 @@
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { createModal } from '@gluestack-ui/core/modal/creator';
+import { Pressable, View, ScrollView } from 'react-native';
+import { createMotionAnimatedComponent, Motion, AnimatePresence } from '@legendapp/motion';
+import { withStyleContext, tva, useStyleContext } from '@gluestack-ui/utils/nativewind-utils';
+import { cssInterop } from 'nativewind';
+
+const AnimatedPressable = createMotionAnimatedComponent(
+  Pressable
+);
+const SCOPE = "MODAL";
+const MotionView = Motion.View;
+const UIModal = createModal({
+  Root: withStyleContext(View, SCOPE),
+  Backdrop: AnimatedPressable,
+  Content: MotionView,
+  Body: ScrollView,
+  CloseButton: Pressable,
+  Footer: View,
+  Header: View,
+  AnimatePresence
+});
+cssInterop(AnimatedPressable, { className: "style" });
+cssInterop(MotionView, { className: "style" });
+const modalStyle = tva({
+  base: "group/modal w-full h-full justify-center items-center web:pointer-events-none",
+  variants: {
+    size: {
+      xs: "",
+      sm: "",
+      md: "",
+      lg: "",
+      full: ""
+    }
+  }
+});
+const modalBackdropStyle = tva({
+  base: "absolute left-0 top-0 right-0 bottom-0 bg-background-dark web:cursor-default"
+});
+const modalContentStyle = tva({
+  base: "bg-background-0 rounded-md overflow-hidden border border-outline-100 shadow-hard-2 p-6",
+  parentVariants: {
+    size: {
+      xs: "w-[60%] max-w-[360px]",
+      sm: "w-[70%] max-w-[420px]",
+      md: "w-[80%] max-w-[510px]",
+      lg: "w-[90%] max-w-[640px]",
+      full: "w-full"
+    }
+  }
+});
+const modalBodyStyle = tva({
+  base: "mt-2 mb-6"
+});
+const modalCloseButtonStyle = tva({
+  base: "group/modal-close-button z-10 rounded data-[focus-visible=true]:web:bg-background-100 web:outline-0 cursor-pointer"
+});
+const modalHeaderStyle = tva({
+  base: "justify-between items-center flex-row"
+});
+const modalFooterStyle = tva({
+  base: "flex-row justify-end items-center gap-2"
+});
+const Modal = React.forwardRef(
+  ({ className, size = "md", ...props }, ref) => /* @__PURE__ */ jsx(
+    UIModal,
+    {
+      ref,
+      ...props,
+      pointerEvents: "box-none",
+      className: modalStyle({ size, class: className }),
+      context: { size }
+    }
+  )
+);
+const ModalBackdrop = React.forwardRef(function ModalBackdrop2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    UIModal.Backdrop,
+    {
+      ref,
+      initial: {
+        opacity: 0
+      },
+      animate: {
+        opacity: 0.5
+      },
+      exit: {
+        opacity: 0
+      },
+      transition: {
+        type: "spring",
+        damping: 18,
+        stiffness: 250,
+        opacity: {
+          type: "timing",
+          duration: 250
+        }
+      },
+      ...props,
+      className: modalBackdropStyle({
+        class: className
+      })
+    }
+  );
+});
+const ModalContent = React.forwardRef(function ModalContent2({ className, size, ...props }, ref) {
+  const { size: parentSize } = useStyleContext(SCOPE);
+  return /* @__PURE__ */ jsx(
+    UIModal.Content,
+    {
+      ref,
+      initial: {
+        opacity: 0,
+        scale: 0.9
+      },
+      animate: {
+        opacity: 1,
+        scale: 1
+      },
+      exit: {
+        opacity: 0
+      },
+      transition: {
+        type: "spring",
+        damping: 18,
+        stiffness: 250,
+        opacity: {
+          type: "timing",
+          duration: 250
+        }
+      },
+      ...props,
+      className: modalContentStyle({
+        parentVariants: {
+          size: parentSize
+        },
+        size,
+        class: className
+      }),
+      pointerEvents: "auto"
+    }
+  );
+});
+const ModalHeader = React.forwardRef(function ModalHeader2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    UIModal.Header,
+    {
+      ref,
+      ...props,
+      className: modalHeaderStyle({
+        class: className
+      })
+    }
+  );
+});
+const ModalBody = React.forwardRef(function ModalBody2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    UIModal.Body,
+    {
+      ref,
+      ...props,
+      className: modalBodyStyle({
+        class: className
+      })
+    }
+  );
+});
+const ModalFooter = React.forwardRef(function ModalFooter2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    UIModal.Footer,
+    {
+      ref,
+      ...props,
+      className: modalFooterStyle({
+        class: className
+      })
+    }
+  );
+});
+const ModalCloseButton = React.forwardRef(function ModalCloseButton2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    UIModal.CloseButton,
+    {
+      ref,
+      ...props,
+      className: modalCloseButtonStyle({
+        class: className
+      })
+    }
+  );
+});
+Modal.displayName = "Modal";
+ModalBackdrop.displayName = "ModalBackdrop";
+ModalContent.displayName = "ModalContent";
+ModalHeader.displayName = "ModalHeader";
+ModalBody.displayName = "ModalBody";
+ModalFooter.displayName = "ModalFooter";
+ModalCloseButton.displayName = "ModalCloseButton";
+
+export { Modal, ModalBackdrop, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader };
+//# sourceMappingURL=index.js.map

package/apps/mobile/src/ui/modal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../../../../apps/mobile/src/ui/modal/index.tsx"],"sourcesContent":["'use client';\nimport React from 'react';\nimport { createModal } from '@gluestack-ui/core/modal/creator';\nimport { Pressable, View, ScrollView } from 'react-native';\nimport {\n  Motion,\n  AnimatePresence,\n  createMotionAnimatedComponent,\n} from '@legendapp/motion';\nimport { tva } from '@gluestack-ui/utils/nativewind-utils';\nimport {\n  withStyleContext,\n  useStyleContext,\n} from '@gluestack-ui/utils/nativewind-utils';\nimport { cssInterop } from 'nativewind';\nimport type { VariantProps } from '@gluestack-ui/utils/nativewind-utils';\nimport { IAnimatedPressableProps, IMotionViewProps } from '../';\n\n\nconst AnimatedPressable = createMotionAnimatedComponent(\n  Pressable\n) as React.ComponentType<IAnimatedPressableProps>;\nconst SCOPE = 'MODAL';\n\n\nconst MotionView = Motion.View as React.ComponentType<IMotionViewProps>;\n\nconst UIModal = createModal({\n  Root: withStyleContext(View, SCOPE),\n  Backdrop: AnimatedPressable,\n  Content: MotionView,\n  Body: ScrollView,\n  CloseButton: Pressable,\n  Footer: View,\n  Header: View,\n  AnimatePresence: AnimatePresence,\n});\n\ncssInterop(AnimatedPressable, { className: 'style' });\ncssInterop(MotionView, { className: 'style' });\n\nconst modalStyle = tva({\n  base: 'group/modal w-full h-full justify-center items-center web:pointer-events-none',\n  variants: {\n    size: {\n      xs: '',\n      sm: '',\n      md: '',\n      lg: '',\n      full: '',\n    },\n  },\n});\n\nconst modalBackdropStyle = tva({\n  base: 'absolute left-0 top-0 right-0 bottom-0 bg-background-dark web:cursor-default',\n});\n\nconst modalContentStyle = tva({\n  base: 'bg-background-0 rounded-md overflow-hidden border border-outline-100 shadow-hard-2 p-6',\n  parentVariants: {\n    size: {\n      xs: 'w-[60%] max-w-[360px]',\n      sm: 'w-[70%] max-w-[420px]',\n      md: 'w-[80%] max-w-[510px]',\n      lg: 'w-[90%] max-w-[640px]',\n      full: 'w-full',\n    },\n  },\n});\n\nconst modalBodyStyle = tva({\n  base: 'mt-2 mb-6',\n});\n\nconst modalCloseButtonStyle = tva({\n  base: 'group/modal-close-button z-10 rounded data-[focus-visible=true]:web:bg-background-100 web:outline-0 cursor-pointer',\n});\n\nconst modalHeaderStyle = tva({\n  base: 'justify-between items-center flex-row',\n});\n\nconst modalFooterStyle = tva({\n  base: 'flex-row justify-end items-center gap-2',\n});\n\nexport type IModalProps = React.ComponentProps<typeof UIModal> &\n  VariantProps<typeof modalStyle> & { className?: string };\n\nexport type IModalBackdropProps = React.ComponentProps<typeof UIModal.Backdrop> &\n  VariantProps<typeof modalBackdropStyle> & { className?: string };\n\nexport type IModalContentProps = React.ComponentProps<typeof UIModal.Content> &\n  VariantProps<typeof modalContentStyle> & { className?: string };\n\nexport type IModalHeaderProps = React.ComponentProps<typeof UIModal.Header> &\n  VariantProps<typeof modalHeaderStyle> & { className?: string };\n\nexport type IModalBodyProps = React.ComponentProps<typeof UIModal.Body> &\n  VariantProps<typeof modalBodyStyle> & { className?: string };\n\nexport type IModalFooterProps = React.ComponentProps<typeof UIModal.Footer> &\n  VariantProps<typeof modalFooterStyle> & { className?: string };\n\nexport type IModalCloseButtonProps = React.ComponentProps<typeof UIModal.CloseButton> &\n  VariantProps<typeof modalCloseButtonStyle> & { className?: string };\n\nconst Modal = React.forwardRef<React.ComponentRef<typeof UIModal>, IModalProps>(\n  ({ className, size = 'md', ...props }, ref) => (\n    <UIModal\n      ref={ref}\n      {...props}\n      pointerEvents=\"box-none\"\n      className={modalStyle({ size, class: className })}\n      context={{ size }}\n    />\n  )\n);\n\nconst ModalBackdrop = React.forwardRef<\n  React.ComponentRef<typeof UIModal.Backdrop>,\n  IModalBackdropProps\n>(function ModalBackdrop({ className, ...props }, ref) {\n  return (\n    <UIModal.Backdrop\n      ref={ref}\n      initial={{\n        opacity: 0,\n      }}\n      animate={{\n        opacity: 0.5,\n      }}\n      exit={{\n        opacity: 0,\n      }}\n      transition={{\n        type: 'spring',\n        damping: 18,\n        stiffness: 250,\n        opacity: {\n          type: 'timing',\n          duration: 250,\n        },\n      }}\n      {...props}\n      className={modalBackdropStyle({\n        class: className,\n      })}\n    />\n  );\n});\n\nconst ModalContent = React.forwardRef<\n  React.ComponentRef<typeof UIModal.Content>,\n  IModalContentProps\n>(function ModalContent({ className, size, ...props }, ref) {\n  const { size: parentSize } = useStyleContext(SCOPE);\n\n  return (\n    <UIModal.Content\n      ref={ref}\n      initial={{\n        opacity: 0,\n        scale: 0.9,\n      }}\n      animate={{\n        opacity: 1,\n        scale: 1,\n      }}\n      exit={{\n        opacity: 0,\n      }}\n      transition={{\n        type: 'spring',\n        damping: 18,\n        stiffness: 250,\n        opacity: {\n          type: 'timing',\n          duration: 250,\n        },\n      }}\n      {...props}\n      className={modalContentStyle({\n        parentVariants: {\n          size: parentSize,\n        },\n        size,\n        class: className,\n      })}\n      pointerEvents=\"auto\"\n    />\n  );\n});\n\nconst ModalHeader = React.forwardRef<\n  React.ComponentRef<typeof UIModal.Header>,\n  IModalHeaderProps\n>(function ModalHeader({ className, ...props }, ref) {\n  return (\n    <UIModal.Header\n      ref={ref}\n      {...props}\n      className={modalHeaderStyle({\n        class: className,\n      })}\n    />\n  );\n});\n\nconst ModalBody = React.forwardRef<\n  React.ComponentRef<typeof UIModal.Body>,\n  IModalBodyProps\n>(function ModalBody({ className, ...props }, ref) {\n  return (\n    <UIModal.Body\n      ref={ref}\n      {...props}\n      className={modalBodyStyle({\n        class: className,\n      })}\n    />\n  );\n});\n\nconst ModalFooter = React.forwardRef<\n  React.ComponentRef<typeof UIModal.Footer>,\n  IModalFooterProps\n>(function ModalFooter({ className, ...props }, ref) {\n  return (\n    <UIModal.Footer\n      ref={ref}\n      {...props}\n      className={modalFooterStyle({\n        class: className,\n      })}\n    />\n  );\n});\n\nconst ModalCloseButton = React.forwardRef<\n  React.ComponentRef<typeof UIModal.CloseButton>,\n  IModalCloseButtonProps\n>(function ModalCloseButton({ className, ...props }, ref) {\n  return (\n    <UIModal.CloseButton\n      ref={ref}\n      {...props}\n      className={modalCloseButtonStyle({\n        class: className,\n      })}\n    />\n  );\n});\n\nModal.displayName = 'Modal';\nModalBackdrop.displayName = 'ModalBackdrop';\nModalContent.displayName = 'ModalContent';\nModalHeader.displayName = 'ModalHeader';\nModalBody.displayName = 'ModalBody';\nModalFooter.displayName = 'ModalFooter';\nModalCloseButton.displayName = 'ModalCloseButton';\n\nexport {\n  Modal,\n  ModalBackdrop,\n  ModalContent,\n  ModalCloseButton,\n  ModalHeader,\n  ModalBody,\n  ModalFooter,\n};\n"],"names":["ModalBackdrop","ModalContent","ModalHeader","ModalBody","ModalFooter","ModalCloseButton"],"mappings":";;;;;;;;AAmBA,MAAM,iBAAA,GAAoB,6BAAA;AAAA,EACxB;AACF,CAAA;AACA,MAAM,KAAA,GAAQ,OAAA;AAGd,MAAM,aAAa,MAAA,CAAO,IAAA;AAE1B,MAAM,UAAU,WAAA,CAAY;AAAA,EAC1B,IAAA,EAAM,gBAAA,CAAiB,IAAA,EAAM,KAAK,CAAA;AAAA,EAClC,QAAA,EAAU,iBAAA;AAAA,EACV,OAAA,EAAS,UAAA;AAAA,EACT,IAAA,EAAM,UAAA;AAAA,EACN,WAAA,EAAa,SAAA;AAAA,EACb,MAAA,EAAQ,IAAA;AAAA,EACR,MAAA,EAAQ,IAAA;AAAA,EACR;AACF,CAAC,CAAA;AAED,UAAA,CAAW,iBAAA,EAAmB,EAAE,SAAA,EAAW,OAAA,EAAS,CAAA;AACpD,UAAA,CAAW,UAAA,EAAY,EAAE,SAAA,EAAW,OAAA,EAAS,CAAA;AAE7C,MAAM,aAAa,GAAA,CAAI;AAAA,EACrB,IAAA,EAAM,+EAAA;AAAA,EACN,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,EAAA,EAAI,EAAA;AAAA,MACJ,EAAA,EAAI,EAAA;AAAA,MACJ,EAAA,EAAI,EAAA;AAAA,MACJ,EAAA,EAAI,EAAA;AAAA,MACJ,IAAA,EAAM;AAAA;AACR;AAEJ,CAAC,CAAA;AAED,MAAM,qBAAqB,GAAA,CAAI;AAAA,EAC7B,IAAA,EAAM;AACR,CAAC,CAAA;AAED,MAAM,oBAAoB,GAAA,CAAI;AAAA,EAC5B,IAAA,EAAM,wFAAA;AAAA,EACN,cAAA,EAAgB;AAAA,IACd,IAAA,EAAM;AAAA,MACJ,EAAA,EAAI,uBAAA;AAAA,MACJ,EAAA,EAAI,uBAAA;AAAA,MACJ,EAAA,EAAI,uBAAA;AAAA,MACJ,EAAA,EAAI,uBAAA;AAAA,MACJ,IAAA,EAAM;AAAA;AACR;AAEJ,CAAC,CAAA;AAED,MAAM,iBAAiB,GAAA,CAAI;AAAA,EACzB,IAAA,EAAM;AACR,CAAC,CAAA;AAED,MAAM,wBAAwB,GAAA,CAAI;AAAA,EAChC,IAAA,EAAM;AACR,CAAC,CAAA;AAED,MAAM,mBAAmB,GAAA,CAAI;AAAA,EAC3B,IAAA,EAAM;AACR,CAAC,CAAA;AAED,MAAM,mBAAmB,GAAA,CAAI;AAAA,EAC3B,IAAA,EAAM;AACR,CAAC,CAAA;AAuBD,MAAM,QAAQ,KAAA,CAAM,UAAA;AAAA,EAClB,CAAC,EAAE,SAAA,EAAW,IAAA,GAAO,MAAM,GAAG,KAAA,IAAS,GAAA,qBACrC,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACC,GAAG,KAAA;AAAA,MACJ,aAAA,EAAc,UAAA;AAAA,MACd,WAAW,UAAA,CAAW,EAAE,IAAA,EAAM,KAAA,EAAO,WAAW,CAAA;AAAA,MAChD,OAAA,EAAS,EAAE,IAAA;AAAK;AAAA;AAGtB;AAEA,MAAM,aAAA,GAAgB,KAAA,CAAM,UAAA,CAG1B,SAASA,cAAAA,CAAc,EAAE,SAAA,EAAW,GAAG,KAAA,EAAM,EAAG,GAAA,EAAK;AACrD,EAAA,uBACE,GAAA;AAAA,IAAC,OAAA,CAAQ,QAAA;AAAA,IAAR;AAAA,MACC,GAAA;AAAA,MACA,OAAA,EAAS;AAAA,QACP,OAAA,EAAS;AAAA,OACX;AAAA,MACA,OAAA,EAAS;AAAA,QACP,OAAA,EAAS;AAAA,OACX;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,OAAA,EAAS;AAAA,OACX;AAAA,MACA,UAAA,EAAY;AAAA,QACV,IAAA,EAAM,QAAA;AAAA,QACN,OAAA,EAAS,EAAA;AAAA,QACT,SAAA,EAAW,GAAA;AAAA,QACX,OAAA,EAAS;AAAA,UACP,IAAA,EAAM,QAAA;AAAA,UACN,QAAA,EAAU;AAAA;AACZ,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MACJ,WAAW,kBAAA,CAAmB;AAAA,QAC5B,KAAA,EAAO;AAAA,OACR;AAAA;AAAA,GACH;AAEJ,CAAC;AAED,MAAM,YAAA,GAAe,KAAA,CAAM,UAAA,CAGzB,SAASC,aAAAA,CAAa,EAAE,SAAA,EAAW,IAAA,EAAM,GAAG,KAAA,EAAM,EAAG,GAAA,EAAK;AAC1D,EAAA,MAAM,EAAE,IAAA,EAAM,UAAA,EAAW,GAAI,gBAAgB,KAAK,CAAA;AAElD,EAAA,uBACE,GAAA;AAAA,IAAC,OAAA,CAAQ,OAAA;AAAA,IAAR;AAAA,MACC,GAAA;AAAA,MACA,OAAA,EAAS;AAAA,QACP,OAAA,EAAS,CAAA;AAAA,QACT,KAAA,EAAO;AAAA,OACT;AAAA,MACA,OAAA,EAAS;AAAA,QACP,OAAA,EAAS,CAAA;AAAA,QACT,KAAA,EAAO;AAAA,OACT;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,OAAA,EAAS;AAAA,OACX;AAAA,MACA,UAAA,EAAY;AAAA,QACV,IAAA,EAAM,QAAA;AAAA,QACN,OAAA,EAAS,EAAA;AAAA,QACT,SAAA,EAAW,GAAA;AAAA,QACX,OAAA,EAAS;AAAA,UACP,IAAA,EAAM,QAAA;AAAA,UACN,QAAA,EAAU;AAAA;AACZ,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MACJ,WAAW,iBAAA,CAAkB;AAAA,QAC3B,cAAA,EAAgB;AAAA,UACd,IAAA,EAAM;AAAA,SACR;AAAA,QACA,IAAA;AAAA,QACA,KAAA,EAAO;AAAA,OACR,CAAA;AAAA,MACD,aAAA,EAAc;AAAA;AAAA,GAChB;AAEJ,CAAC;AAED,MAAM,WAAA,GAAc,KAAA,CAAM,UAAA,CAGxB,SAASC,YAAAA,CAAY,EAAE,SAAA,EAAW,GAAG,KAAA,EAAM,EAAG,GAAA,EAAK;AACnD,EAAA,uBACE,GAAA;AAAA,IAAC,OAAA,CAAQ,MAAA;AAAA,IAAR;AAAA,MACC,GAAA;AAAA,MACC,GAAG,KAAA;AAAA,MACJ,WAAW,gBAAA,CAAiB;AAAA,QAC1B,KAAA,EAAO;AAAA,OACR;AAAA;AAAA,GACH;AAEJ,CAAC;AAED,MAAM,SAAA,GAAY,KAAA,CAAM,UAAA,CAGtB,SAASC,UAAAA,CAAU,EAAE,SAAA,EAAW,GAAG,KAAA,EAAM,EAAG,GAAA,EAAK;AACjD,EAAA,uBACE,GAAA;AAAA,IAAC,OAAA,CAAQ,IAAA;AAAA,IAAR;AAAA,MACC,GAAA;AAAA,MACC,GAAG,KAAA;AAAA,MACJ,WAAW,cAAA,CAAe;AAAA,QACxB,KAAA,EAAO;AAAA,OACR;AAAA;AAAA,GACH;AAEJ,CAAC;AAED,MAAM,WAAA,GAAc,KAAA,CAAM,UAAA,CAGxB,SAASC,YAAAA,CAAY,EAAE,SAAA,EAAW,GAAG,KAAA,EAAM,EAAG,GAAA,EAAK;AACnD,EAAA,uBACE,GAAA;AAAA,IAAC,OAAA,CAAQ,MAAA;AAAA,IAAR;AAAA,MACC,GAAA;AAAA,MACC,GAAG,KAAA;AAAA,MACJ,WAAW,gBAAA,CAAiB;AAAA,QAC1B,KAAA,EAAO;AAAA,OACR;AAAA;AAAA,GACH;AAEJ,CAAC;AAED,MAAM,gBAAA,GAAmB,KAAA,CAAM,UAAA,CAG7B,SAASC,iBAAAA,CAAiB,EAAE,SAAA,EAAW,GAAG,KAAA,EAAM,EAAG,GAAA,EAAK;AACxD,EAAA,uBACE,GAAA;AAAA,IAAC,OAAA,CAAQ,WAAA;AAAA,IAAR;AAAA,MACC,GAAA;AAAA,MACC,GAAG,KAAA;AAAA,MACJ,WAAW,qBAAA,CAAsB;AAAA,QAC/B,KAAA,EAAO;AAAA,OACR;AAAA;AAAA,GACH;AAEJ,CAAC;AAED,KAAA,CAAM,WAAA,GAAc,OAAA;AACpB,aAAA,CAAc,WAAA,GAAc,eAAA;AAC5B,YAAA,CAAa,WAAA,GAAc,cAAA;AAC3B,WAAA,CAAY,WAAA,GAAc,aAAA;AAC1B,SAAA,CAAU,WAAA,GAAc,WAAA;AACxB,WAAA,CAAY,WAAA,GAAc,aAAA;AAC1B,gBAAA,CAAiB,WAAA,GAAc,kBAAA;;;;"}