@makeswift/runtime 0.0.0-e0c0445 → 0.0.0-e5fb3bd

package/dist/esm/components/builtin/Button/Button.js

@@ -0,0 +1,213 @@
+import { jsx } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import ColorHelper from "color";
+import { colorToString } from "../../utils/colorToString";
+import { Link } from "../../shared/Link";
+import { useStyle } from "../../../runtimes/react/use-style";
+import {
+  useResponsiveStyle,
+  useResponsiveTextStyle,
+  useResponsiveWidth
+} from "../../utils/responsive-style";
+import { cx } from "@emotion/css";
+const Button = forwardRef(function Button2({
+  as,
+  id,
+  children,
+  link,
+  variant,
+  shape,
+  size,
+  textColor,
+  color,
+  textStyle,
+  width,
+  margin,
+  className,
+  ...restOfProps
+}, ref) {
+  const Component = as ?? Link;
+  return (
+    // @ts-ignore: `ref` prop doesn't match between `Link` and `T`.
+    /* @__PURE__ */ jsx(
+      Component,
+      {
+        ...restOfProps,
+        ref,
+        id,
+        className: cx(
+          useStyle({
+            display: "table",
+            border: 0,
+            outline: 0,
+            userSelect: "none",
+            cursor: "pointer",
+            fontFamily: "inherit",
+            textDecoration: "none",
+            textAlign: "center"
+          }),
+          useStyle(useResponsiveWidth(width, "auto")),
+          margin,
+          useStyle(
+            useResponsiveStyle(
+              [variant, shape, size, textColor, color],
+              ([
+                variant2 = "flat",
+                shape2 = "rounded",
+                size2 = "medium",
+                textColor2 = { swatch: { hue: 0, saturation: 0, lightness: 100 }, alpha: 1 },
+                color2 = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }
+              ]) => {
+                const fontSize = {
+                  value: { small: 12, medium: 14, large: 18 }[size2],
+                  unit: "px"
+                };
+                return {
+                  color: colorToString(textColor2),
+                  borderRadius: `${{ square: 0, rounded: 4, pill: 500 }[shape2]}px`,
+                  padding: `${{ small: "8px 12px", medium: "12px 16px", large: "16px 20px" }[size2]}`,
+                  fontSize: `${fontSize.value}${fontSize.unit}`,
+                  ...{
+                    flat: {
+                      background: colorToString(color2),
+                      border: "none",
+                      transition: ["color", "background", "border", "box-shadow"].map((property) => `${property} 0.15s ease-in-out`).join(", "),
+                      ":hover": {
+                        background: ColorHelper(colorToString(color2)).darken(0.1).hex()
+                      },
+                      ":active": {
+                        background: ColorHelper(colorToString(color2)).darken(0.15).hex()
+                      }
+                    },
+                    outline: {
+                      background: "transparent",
+                      boxShadow: `inset 0 0 0 2px ${colorToString(color2)}`,
+                      transition: ["color", "background", "box-shadow"].map((property) => `${property} 0.15s ease-in-out`).join(", "),
+                      ":hover": {
+                        boxShadow: `inset 0 0 0 2px ${ColorHelper(colorToString(color2)).darken(0.1).hex()}`,
+                        color: ColorHelper(colorToString(color2)).darken(0.1).hex()
+                      },
+                      ":active": {
+                        boxShadow: `inset 0 0 0 2px ${ColorHelper(colorToString(color2)).darken(0.15).hex()}`,
+                        color: ColorHelper(colorToString(color2)).darken(0.15).hex()
+                      }
+                    },
+                    shadow: {
+                      background: colorToString(color2),
+                      boxShadow: "0 2px 4px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.2)",
+                      transition: ["transform", "box-shadow"].map((property) => `${property} 0.18s`).join(", "),
+                      ":hover": {
+                        boxShadow: "0 10px 25px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.3)",
+                        transform: "translateY(-1px)"
+                      },
+                      ":active": {
+                        boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15), 0 4px 6px -3px rgba(0, 0, 0, 0.3)",
+                        transform: "translateY(0px)"
+                      }
+                    },
+                    clear: {
+                      background: "transparent",
+                      border: "none",
+                      ":hover": {
+                        color: ColorHelper(colorToString(textColor2)).alpha(0.5).toString()
+                      },
+                      ":active": {
+                        color: ColorHelper(colorToString(textColor2)).alpha(0.6).toString()
+                      }
+                    },
+                    blocky: {
+                      background: colorToString(color2),
+                      borderWidth: 1,
+                      borderStyle: "solid",
+                      borderColor: ColorHelper(colorToString(color2)).darken(0.25).hex(),
+                      boxShadow: `0 4px ${ColorHelper(colorToString(color2)).darken(0.25).hex()}`,
+                      transition: ["transform", "box-shadow"].map((property) => `${property} 0.1s`).join(", "),
+                      ":hover": {
+                        transform: "translateY(2px)",
+                        boxShadow: `0 2px ${ColorHelper(colorToString(color2)).darken(0.25).hex()}`
+                      },
+                      ":active": {
+                        transform: "translateY(4px)",
+                        boxShadow: `0 0 ${ColorHelper(colorToString(color2)).darken(0.25).hex()}`
+                      }
+                    },
+                    bubbly: {
+                      background: `linear-gradient(
+                      180deg,
+                      ${ColorHelper(colorToString(color2)).lighten(0.05).hex()},
+                      ${ColorHelper(colorToString(color2)).darken(0.3).saturate(0.05).hex()}
+                    )`,
+                      position: "relative",
+                      zIndex: "0",
+                      ":before": {
+                        position: "absolute",
+                        content: '""',
+                        top: 0,
+                        right: 0,
+                        bottom: 0,
+                        left: 0,
+                        zIndex: "-1",
+                        borderRadius: "inherit",
+                        background: `linear-gradient(
+                        180deg,
+                        ${ColorHelper(colorToString(color2)).lighten(0.2).hex()},
+                        ${ColorHelper(colorToString(color2)).darken(0.2).saturate(0.05).hex()}
+                      )`,
+                        opacity: "0",
+                        transition: "opacity 0.15s"
+                      },
+                      ":hover": {
+                        ":before": {
+                          opacity: "1"
+                        }
+                      },
+                      ":active": {
+                        ":before": {
+                          opacity: "0.25"
+                        }
+                      }
+                    },
+                    skewed: {
+                      position: "relative",
+                      zIndex: "0",
+                      ":before": {
+                        position: "absolute",
+                        content: '""',
+                        top: 0,
+                        right: 0,
+                        bottom: 0,
+                        left: 0,
+                        zIndex: "-1",
+                        background: colorToString(color2),
+                        transform: "skewX(-12deg)",
+                        borderRadius: "inherit",
+                        transition: "transform 0.2s cubic-bezier(0.25, 0, 0.25, 1.75)"
+                      },
+                      ":hover:before": {
+                        transform: "skew(0deg)"
+                      },
+                      ":active:before": {
+                        transform: "skew(-8deg)"
+                      }
+                    }
+                  }[variant2]
+                };
+              }
+            )
+          ),
+          useStyle(useResponsiveTextStyle(textStyle)),
+          className
+        ),
+        link,
+        children: children == null ? "Button Text" : children
+      }
+    )
+  );
+});
+var Button_default = Button;
+export {
+  Button_default as default
+};
+//# sourceMappingURL=Button.js.map

package/dist/esm/components/builtin/Button/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/builtin/Button/Button.tsx"],"sourcesContent":["import {\n  ComponentPropsWithoutRef,\n  ElementRef,\n  ElementType,\n  ForwardedRef,\n  forwardRef,\n  ReactNode,\n} from 'react'\nimport ColorHelper from 'color'\n\nimport {\n  ElementIDValue,\n  ResponsiveSelectValue,\n  ResponsiveIconRadioGroupValue,\n  TextStyleValue,\n  LinkValue,\n  WidthValue,\n} from '../../../prop-controllers/descriptors'\nimport { colorToString } from '../../utils/colorToString'\nimport { Link } from '../../shared/Link'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\nimport { ButtonVariant } from './contants'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport {\n  useResponsiveStyle,\n  useResponsiveTextStyle,\n  useResponsiveWidth,\n} from '../../utils/responsive-style'\nimport { cx } from '@emotion/css'\n\ntype BaseProps<T extends ElementType> = {\n  as?: T\n  id?: ElementIDValue\n  children?: ReactNode\n  link?: LinkValue\n  variant?: ResponsiveSelectValue<ButtonVariant>\n  shape?: ResponsiveIconRadioGroupValue<'pill' | 'rounded' | 'square'>\n  size?: ResponsiveIconRadioGroupValue<'small' | 'medium' | 'large'>\n  color?: ResponsiveColor | null\n  textColor?: ResponsiveColor | null\n  textStyle?: TextStyleValue\n  width?: WidthValue\n  margin?: string\n}\n\ntype Props<T extends ElementType> = BaseProps<T> &\n  Omit<ComponentPropsWithoutRef<typeof Link>, keyof BaseProps<T>>\n\nconst Button = forwardRef(function Button<T extends ElementType = 'button'>(\n  {\n    as,\n    id,\n    children,\n    link,\n    variant,\n    shape,\n    size,\n    textColor,\n    color,\n    textStyle,\n    width,\n    margin,\n    className,\n    ...restOfProps\n  }: Props<T>,\n  ref: ForwardedRef<ElementRef<T>>,\n) {\n  const Component = as ?? Link\n\n  return (\n    // @ts-ignore: `ref` prop doesn't match between `Link` and `T`.\n    <Component\n      {...restOfProps}\n      ref={ref}\n      id={id}\n      className={cx(\n        useStyle({\n          display: 'table',\n          border: 0,\n          outline: 0,\n          userSelect: 'none',\n          cursor: 'pointer',\n          fontFamily: 'inherit',\n          textDecoration: 'none',\n          textAlign: 'center',\n        }),\n        useStyle(useResponsiveWidth(width, 'auto')),\n        margin,\n        useStyle(\n          useResponsiveStyle(\n            [variant, shape, size, textColor, color] as const,\n            ([\n              variant = 'flat',\n              shape = 'rounded',\n              size = 'medium',\n              textColor = { swatch: { hue: 0, saturation: 0, lightness: 100 }, alpha: 1 },\n              color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n            ]) => {\n              const fontSize = {\n                value: { small: 12, medium: 14, large: 18 }[size],\n                unit: 'px',\n              }\n\n              return {\n                color: colorToString(textColor),\n                borderRadius: `${{ square: 0, rounded: 4, pill: 500 }[shape]}px`,\n                padding: `${{ small: '8px 12px', medium: '12px 16px', large: '16px 20px' }[size]}`,\n                fontSize: `${fontSize.value}${fontSize.unit}`,\n                ...{\n                  flat: {\n                    background: colorToString(color),\n                    border: 'none',\n                    transition: ['color', 'background', 'border', 'box-shadow']\n                      .map(property => `${property} 0.15s ease-in-out`)\n                      .join(', '),\n\n                    ':hover': {\n                      background: ColorHelper(colorToString(color)).darken(0.1).hex(),\n                    },\n\n                    ':active': {\n                      background: ColorHelper(colorToString(color)).darken(0.15).hex(),\n                    },\n                  },\n                  outline: {\n                    background: 'transparent',\n                    boxShadow: `inset 0 0 0 2px ${colorToString(color)}`,\n                    transition: ['color', 'background', 'box-shadow']\n                      .map(property => `${property} 0.15s ease-in-out`)\n                      .join(', '),\n\n                    ':hover': {\n                      boxShadow: `inset 0 0 0 2px ${ColorHelper(colorToString(color))\n                        .darken(0.1)\n                        .hex()}`,\n                      color: ColorHelper(colorToString(color)).darken(0.1).hex(),\n                    },\n\n                    ':active': {\n                      boxShadow: `inset 0 0 0 2px ${ColorHelper(colorToString(color))\n                        .darken(0.15)\n                        .hex()}`,\n                      color: ColorHelper(colorToString(color)).darken(0.15).hex(),\n                    },\n                  },\n                  shadow: {\n                    background: colorToString(color),\n                    boxShadow: '0 2px 4px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.2)',\n                    transition: ['transform', 'box-shadow']\n                      .map(property => `${property} 0.18s`)\n                      .join(', '),\n\n                    ':hover': {\n                      boxShadow:\n                        '0 10px 25px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.3)',\n                      transform: 'translateY(-1px)',\n                    },\n\n                    ':active': {\n                      boxShadow:\n                        '0 4px 12px rgba(0, 0, 0, 0.15), 0 4px 6px -3px rgba(0, 0, 0, 0.3)',\n                      transform: 'translateY(0px)',\n                    },\n                  },\n                  clear: {\n                    background: 'transparent',\n                    border: 'none',\n\n                    ':hover': {\n                      color: ColorHelper(colorToString(textColor)).alpha(0.5).toString(),\n                    },\n\n                    ':active': {\n                      color: ColorHelper(colorToString(textColor)).alpha(0.6).toString(),\n                    },\n                  },\n                  blocky: {\n                    background: colorToString(color),\n                    borderWidth: 1,\n                    borderStyle: 'solid',\n                    borderColor: ColorHelper(colorToString(color)).darken(0.25).hex(),\n                    boxShadow: `0 4px ${ColorHelper(colorToString(color)).darken(0.25).hex()}`,\n                    transition: ['transform', 'box-shadow']\n                      .map(property => `${property} 0.1s`)\n                      .join(', '),\n\n                    ':hover': {\n                      transform: 'translateY(2px)',\n                      boxShadow: `0 2px ${ColorHelper(colorToString(color)).darken(0.25).hex()}`,\n                    },\n\n                    ':active': {\n                      transform: 'translateY(4px)',\n                      boxShadow: `0 0 ${ColorHelper(colorToString(color)).darken(0.25).hex()}`,\n                    },\n                  },\n                  bubbly: {\n                    background: `linear-gradient(\n                      180deg,\n                      ${ColorHelper(colorToString(color)).lighten(0.05).hex()},\n                      ${ColorHelper(colorToString(color)).darken(0.3).saturate(0.05).hex()}\n                    )`,\n                    position: 'relative',\n                    zIndex: '0',\n\n                    ':before': {\n                      position: 'absolute',\n                      content: '\"\"',\n                      top: 0,\n                      right: 0,\n                      bottom: 0,\n                      left: 0,\n                      zIndex: '-1',\n                      borderRadius: 'inherit',\n                      background: `linear-gradient(\n                        180deg,\n                        ${ColorHelper(colorToString(color)).lighten(0.2).hex()},\n                        ${ColorHelper(colorToString(color)).darken(0.2).saturate(0.05).hex()}\n                      )`,\n                      opacity: '0',\n                      transition: 'opacity 0.15s',\n                    },\n\n                    ':hover': {\n                      ':before': {\n                        opacity: '1',\n                      },\n                    },\n\n                    ':active': {\n                      ':before': {\n                        opacity: '0.25',\n                      },\n                    },\n                  } as const,\n                  skewed: {\n                    position: 'relative',\n                    zIndex: '0',\n\n                    ':before': {\n                      position: 'absolute',\n                      content: '\"\"',\n                      top: 0,\n                      right: 0,\n                      bottom: 0,\n                      left: 0,\n                      zIndex: '-1',\n                      background: colorToString(color),\n                      transform: 'skewX(-12deg)',\n                      borderRadius: 'inherit',\n                      transition: 'transform 0.2s cubic-bezier(0.25, 0, 0.25, 1.75)',\n                    },\n\n                    ':hover:before': {\n                      transform: 'skew(0deg)',\n                    },\n\n                    ':active:before': {\n                      transform: 'skew(-8deg)',\n                    },\n                  } as const,\n                }[variant],\n              }\n            },\n          ),\n        ),\n        useStyle(useResponsiveTextStyle(textStyle)),\n        className,\n      )}\n      link={link}\n    >\n      {children == null ? 'Button Text' : children}\n    </Component>\n  )\n})\n\nexport default Button\n"],"mappings":"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","names":["Button","variant","shape","size","textColor","color"]}

package/dist/esm/components/builtin/Button/contants.js

@@ -0,0 +1 @@
+//# sourceMappingURL=contants.js.map

package/dist/esm/components/builtin/Button/contants.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/esm/components/builtin/Button/index.js

@@ -0,0 +1,5 @@
+import { default as default2 } from "./Button";
+export {
+  default2 as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/components/builtin/Button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/builtin/Button/index.tsx"],"sourcesContent":["export { default } from './Button'\n"],"mappings":"AAAA,SAAS,WAAAA,gBAAe;","names":["default"]}

package/dist/esm/components/builtin/Button/register.js

@@ -0,0 +1,74 @@
+import { Props } from "../../../prop-controllers";
+import { findBreakpointOverride } from "../../../state/modules/breakpoints";
+import { MakeswiftComponentType } from "../constants";
+import { lazy } from "react";
+function registerComponent(runtime) {
+  return runtime.registerComponent(
+    lazy(() => import("./Button")),
+    {
+      type: MakeswiftComponentType.Button,
+      label: "Button",
+      props: {
+        id: Props.ElementID(),
+        children: Props.TextInput({ placeholder: "Button text" }),
+        link: Props.Link({
+          defaultValue: {
+            type: "OPEN_PAGE",
+            payload: {
+              pageId: null,
+              openInNewTab: false
+            }
+          }
+        }),
+        variant: Props.ResponsiveSelect({
+          label: "Style",
+          labelOrientation: "horizontal",
+          options: [
+            { value: "flat", label: "Flat" },
+            { value: "outline", label: "Outline" },
+            { value: "shadow", label: "Floating" },
+            { value: "clear", label: "Clear" },
+            { value: "blocky", label: "Blocky" },
+            { value: "bubbly", label: "Bubbly" },
+            { value: "skewed", label: "Skewed" }
+          ],
+          defaultValue: "flat"
+        }),
+        shape: Props.ResponsiveIconRadioGroup({
+          label: "Shape",
+          options: [
+            { label: "Pill", value: "pill", icon: "ButtonPill16" },
+            { label: "Rounded", value: "rounded", icon: "ButtonRounded16" },
+            { label: "Square", value: "square", icon: "ButtonSquare16" }
+          ],
+          defaultValue: "rounded"
+        }),
+        size: Props.ResponsiveIconRadioGroup({
+          label: "Size",
+          options: [
+            { label: "Small", value: "small", icon: "SizeSmall16" },
+            { label: "Medium", value: "medium", icon: "SizeMedium16" },
+            { label: "Large", value: "large", icon: "SizeLarge16" }
+          ],
+          defaultValue: "medium"
+        }),
+        color: Props.ResponsiveColor((props, device) => {
+          const variant = props.variant;
+          const hidden = findBreakpointOverride(runtime.getBreakpoints(), variant, device)?.value === "clear";
+          return { placeholder: "black", hidden };
+        }),
+        textColor: Props.ResponsiveColor({
+          label: "Text color",
+          placeholder: "white"
+        }),
+        textStyle: Props.TextStyle(),
+        width: Props.Width(),
+        margin: Props.Margin({ format: Props.Margin.Format.ClassName })
+      }
+    }
+  );
+}
+export {
+  registerComponent
+};
+//# sourceMappingURL=register.js.map

package/dist/esm/components/builtin/Button/register.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/builtin/Button/register.ts"],"sourcesContent":["import { Props, ResponsiveValue } from '../../../prop-controllers'\nimport { ReactRuntime } from '../../../runtimes/react'\nimport { findBreakpointOverride } from '../../../state/modules/breakpoints'\nimport { MakeswiftComponentType } from '../constants'\nimport { ButtonVariant } from './contants'\nimport { lazy } from 'react'\n\nexport function registerComponent(runtime: ReactRuntime) {\n  return runtime.registerComponent(\n    lazy(() => import('./Button')),\n    {\n      type: MakeswiftComponentType.Button,\n      label: 'Button',\n      props: {\n        id: Props.ElementID(),\n        children: Props.TextInput({ placeholder: 'Button text' }),\n        link: Props.Link({\n          defaultValue: {\n            type: 'OPEN_PAGE',\n            payload: {\n              pageId: null,\n              openInNewTab: false,\n            },\n          },\n        }),\n        variant: Props.ResponsiveSelect({\n          label: 'Style',\n          labelOrientation: 'horizontal',\n          options: [\n            { value: 'flat', label: 'Flat' },\n            { value: 'outline', label: 'Outline' },\n            { value: 'shadow', label: 'Floating' },\n            { value: 'clear', label: 'Clear' },\n            { value: 'blocky', label: 'Blocky' },\n            { value: 'bubbly', label: 'Bubbly' },\n            { value: 'skewed', label: 'Skewed' },\n          ],\n          defaultValue: 'flat',\n        }),\n        shape: Props.ResponsiveIconRadioGroup({\n          label: 'Shape',\n          options: [\n            { label: 'Pill', value: 'pill', icon: 'ButtonPill16' },\n            { label: 'Rounded', value: 'rounded', icon: 'ButtonRounded16' },\n            { label: 'Square', value: 'square', icon: 'ButtonSquare16' },\n          ],\n          defaultValue: 'rounded',\n        }),\n        size: Props.ResponsiveIconRadioGroup({\n          label: 'Size',\n          options: [\n            { label: 'Small', value: 'small', icon: 'SizeSmall16' },\n            { label: 'Medium', value: 'medium', icon: 'SizeMedium16' },\n            { label: 'Large', value: 'large', icon: 'SizeLarge16' },\n          ],\n          defaultValue: 'medium',\n        }),\n        color: Props.ResponsiveColor((props, device) => {\n          const variant = props.variant as ResponsiveValue<ButtonVariant>\n          const hidden =\n            findBreakpointOverride<ButtonVariant>(runtime.getBreakpoints(), variant, device)\n              ?.value === 'clear'\n\n          return { placeholder: 'black', hidden }\n        }),\n        textColor: Props.ResponsiveColor({\n          label: 'Text color',\n          placeholder: 'white',\n        }),\n        textStyle: Props.TextStyle(),\n        width: Props.Width(),\n        margin: Props.Margin({ format: Props.Margin.Format.ClassName }),\n      },\n    },\n  )\n}\n"],"mappings":"AAAA,SAAS,aAA8B;AAEvC,SAAS,8BAA8B;AACvC,SAAS,8BAA8B;AAEvC,SAAS,YAAY;AAEd,SAAS,kBAAkB,SAAuB;AACvD,SAAO,QAAQ;AAAA,IACb,KAAK,MAAM,OAAO,UAAU,CAAC;AAAA,IAC7B;AAAA,MACE,MAAM,uBAAuB;AAAA,MAC7B,OAAO;AAAA,MACP,OAAO;AAAA,QACL,IAAI,MAAM,UAAU;AAAA,QACpB,UAAU,MAAM,UAAU,EAAE,aAAa,cAAc,CAAC;AAAA,QACxD,MAAM,MAAM,KAAK;AAAA,UACf,cAAc;AAAA,YACZ,MAAM;AAAA,YACN,SAAS;AAAA,cACP,QAAQ;AAAA,cACR,cAAc;AAAA,YAChB;AAAA,UACF;AAAA,QACF,CAAC;AAAA,QACD,SAAS,MAAM,iBAAiB;AAAA,UAC9B,OAAO;AAAA,UACP,kBAAkB;AAAA,UAClB,SAAS;AAAA,YACP,EAAE,OAAO,QAAQ,OAAO,OAAO;AAAA,YAC/B,EAAE,OAAO,WAAW,OAAO,UAAU;AAAA,YACrC,EAAE,OAAO,UAAU,OAAO,WAAW;AAAA,YACrC,EAAE,OAAO,SAAS,OAAO,QAAQ;AAAA,YACjC,EAAE,OAAO,UAAU,OAAO,SAAS;AAAA,YACnC,EAAE,OAAO,UAAU,OAAO,SAAS;AAAA,YACnC,EAAE,OAAO,UAAU,OAAO,SAAS;AAAA,UACrC;AAAA,UACA,cAAc;AAAA,QAChB,CAAC;AAAA,QACD,OAAO,MAAM,yBAAyB;AAAA,UACpC,OAAO;AAAA,UACP,SAAS;AAAA,YACP,EAAE,OAAO,QAAQ,OAAO,QAAQ,MAAM,eAAe;AAAA,YACrD,EAAE,OAAO,WAAW,OAAO,WAAW,MAAM,kBAAkB;AAAA,YAC9D,EAAE,OAAO,UAAU,OAAO,UAAU,MAAM,iBAAiB;AAAA,UAC7D;AAAA,UACA,cAAc;AAAA,QAChB,CAAC;AAAA,QACD,MAAM,MAAM,yBAAyB;AAAA,UACnC,OAAO;AAAA,UACP,SAAS;AAAA,YACP,EAAE,OAAO,SAAS,OAAO,SAAS,MAAM,cAAc;AAAA,YACtD,EAAE,OAAO,UAAU,OAAO,UAAU,MAAM,eAAe;AAAA,YACzD,EAAE,OAAO,SAAS,OAAO,SAAS,MAAM,cAAc;AAAA,UACxD;AAAA,UACA,cAAc;AAAA,QAChB,CAAC;AAAA,QACD,OAAO,MAAM,gBAAgB,CAAC,OAAO,WAAW;AAC9C,gBAAM,UAAU,MAAM;AACtB,gBAAM,SACJ,uBAAsC,QAAQ,eAAe,GAAG,SAAS,MAAM,GAC3E,UAAU;AAEhB,iBAAO,EAAE,aAAa,SAAS,OAAO;AAAA,QACxC,CAAC;AAAA,QACD,WAAW,MAAM,gBAAgB;AAAA,UAC/B,OAAO;AAAA,UACP,aAAa;AAAA,QACf,CAAC;AAAA,QACD,WAAW,MAAM,UAAU;AAAA,QAC3B,OAAO,MAAM,MAAM;AAAA,QACnB,QAAQ,MAAM,OAAO,EAAE,QAAQ,MAAM,OAAO,OAAO,UAAU,CAAC;AAAA,MAChE;AAAA,IACF;AAAA,EACF;AACF;","names":[]}