@mirohq/design-system-link 1.2.11 → 1.2.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/main.js +12 -5
- package/dist/main.js.map +1 -1
- package/dist/module.js +12 -5
- package/dist/module.js.map +1 -1
- package/package.json +1 -1
package/dist/main.js
CHANGED
|
@@ -78,6 +78,7 @@ const Link = React__default["default"].forwardRef(
|
|
|
78
78
|
onClick,
|
|
79
79
|
onPress,
|
|
80
80
|
children,
|
|
81
|
+
tabIndex,
|
|
81
82
|
...restProps
|
|
82
83
|
}, forwardRef) => {
|
|
83
84
|
const ref = React.useRef(null);
|
|
@@ -105,9 +106,15 @@ const Link = React__default["default"].forwardRef(
|
|
|
105
106
|
restProps,
|
|
106
107
|
asButton ? buttonProps : linkProps
|
|
107
108
|
);
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
109
|
+
let relProp = rel;
|
|
110
|
+
if (!asButton && target === "_blank") {
|
|
111
|
+
if (!relProp.includes("noreferrer")) {
|
|
112
|
+
relProp = `noreferrer ${relProp}`;
|
|
113
|
+
}
|
|
114
|
+
if (!relProp.includes("noopener")) {
|
|
115
|
+
relProp = `noopener ${relProp}`;
|
|
116
|
+
}
|
|
117
|
+
}
|
|
111
118
|
return /* @__PURE__ */ React__default["default"].createElement(StyledLink, {
|
|
112
119
|
...elementProps,
|
|
113
120
|
ref: refWithFallback,
|
|
@@ -116,8 +123,8 @@ const Link = React__default["default"].forwardRef(
|
|
|
116
123
|
disabled,
|
|
117
124
|
dashed,
|
|
118
125
|
asChild: asButton,
|
|
119
|
-
tabIndex: disabled ? -1 : href != null ? void 0 : onClick != null || onPress != null ? 0 : void 0,
|
|
120
|
-
|
|
126
|
+
tabIndex: tabIndex != null ? tabIndex : disabled ? -1 : href != null ? void 0 : onClick != null || onPress != null ? 0 : void 0,
|
|
127
|
+
rel: relProp.trim(),
|
|
121
128
|
target
|
|
122
129
|
}, asButton ? /* @__PURE__ */ React__default["default"].createElement("button", null, children) : children);
|
|
123
130
|
}
|
package/dist/main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main.js","sources":["../src/link.styled.ts","../src/link.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { focus } from '@mirohq/design-system-styles'\n\nconst TRANSITION_TIME = '250ms'\n\nexport const StyledLink = styled(Primitive.a, {\n textDecoration: 'none',\n border: 0,\n borderBottom: '1px solid currentColor',\n cursor: 'pointer',\n transition: `border ${TRANSITION_TIME}, color ${TRANSITION_TIME}`,\n\n // asButton\n background: 'none',\n padding: '$none',\n margin: '$none',\n font: 'inherit',\n\n variants: {\n variant: {\n primary: {\n color: 'rgba(66, 98, 255, 1)',\n borderColor: 'rgba(217, 224, 255, 1)',\n ...focus.defaults,\n '&:hover': {\n color: 'rgba(69, 91, 237, 1)',\n borderColor: 'rgba(104, 129, 255, 1)',\n },\n '&:active': {\n color: 'rgba(61, 81, 212, 1)',\n borderColor: 'rgba(66, 98, 255, 1)',\n },\n },\n secondary: {\n color: 'rgba(95, 92, 128, 1)',\n borderColor: 'rgba(235, 235, 239, 1)',\n ...focus.defaults,\n '&:hover': {\n color: 'rgba(95, 92, 128, 1)',\n borderColor: 'rgba(147, 145, 166, 1)',\n },\n '&:active': {\n color: 'rgba(95, 92, 128, 1)',\n borderColor: 'rgba(147, 145, 166, 1)',\n },\n },\n },\n dashed: {\n true: {\n borderStyle: 'dashed',\n },\n },\n disabled: {\n true: {\n pointerEvents: 'none',\n },\n },\n },\n})\n\nexport type StyledLinkProps = ComponentPropsWithRef<typeof StyledLink>\n","import React, { useRef } from 'react'\nimport type { ElementRef, ReactNode } from 'react'\nimport { useLink } from '@react-aria/link'\nimport type { AriaLinkProps } from '@react-types/link'\nimport { mergeProps } from '@react-aria/utils'\nimport { useButton } from '@react-aria/button'\n\nimport type { StyledLinkProps } from './link.styled'\nimport { StyledLink } from './link.styled'\n\ntype LinkPropsA11y = StyledLinkProps & AriaLinkProps\n\nexport interface LinkProps\n extends Omit<LinkPropsA11y, 'onClick' | 'isDisabled' | 'elementType'> {\n /**\n * The content\n */\n children: ReactNode\n\n /**\n * Change the link styles\n */\n variant?: StyledLinkProps['variant']\n\n /**\n * Disable the mouse events\n */\n disabled?: boolean\n\n /**\n * Set the underline to dashed mode\n */\n dashed?: boolean\n\n /**\n * Alias for onPress\n */\n onClick?: AriaLinkProps['onPress']\n}\n\nexport const Link = React.forwardRef<ElementRef<typeof StyledLink>, LinkProps>(\n (\n {\n variant = 'primary',\n disabled = false,\n dashed = false,\n rel = '',\n target,\n href,\n onClick,\n onPress,\n children,\n ...restProps\n },\n forwardRef\n ) => {\n const ref = useRef<HTMLAnchorElement>(null)\n const refWithFallback = forwardRef ?? ref\n const { linkProps } = useLink(\n {\n isDisabled: disabled,\n onPress: onPress ?? onClick,\n ...restProps,\n },\n // @ts-expect-error\n refWithFallback\n )\n\n const { buttonProps } = useButton(\n {\n isDisabled: disabled,\n href,\n onPress: onPress ?? onClick,\n // @ts-expect-error\n allowFocusWhenDisabled: false,\n ...restProps,\n },\n refWithFallback\n )\n\n const asButton = href == null && (onPress ?? onClick) != null\n\n const elementProps = mergeProps(\n restProps,\n asButton ? buttonProps : linkProps\n )\n\n
|
|
1
|
+
{"version":3,"file":"main.js","sources":["../src/link.styled.ts","../src/link.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { focus } from '@mirohq/design-system-styles'\n\nconst TRANSITION_TIME = '250ms'\n\nexport const StyledLink = styled(Primitive.a, {\n textDecoration: 'none',\n border: 0,\n borderBottom: '1px solid currentColor',\n cursor: 'pointer',\n transition: `border ${TRANSITION_TIME}, color ${TRANSITION_TIME}`,\n\n // asButton\n background: 'none',\n padding: '$none',\n margin: '$none',\n font: 'inherit',\n\n variants: {\n variant: {\n primary: {\n color: 'rgba(66, 98, 255, 1)',\n borderColor: 'rgba(217, 224, 255, 1)',\n ...focus.defaults,\n '&:hover': {\n color: 'rgba(69, 91, 237, 1)',\n borderColor: 'rgba(104, 129, 255, 1)',\n },\n '&:active': {\n color: 'rgba(61, 81, 212, 1)',\n borderColor: 'rgba(66, 98, 255, 1)',\n },\n },\n secondary: {\n color: 'rgba(95, 92, 128, 1)',\n borderColor: 'rgba(235, 235, 239, 1)',\n ...focus.defaults,\n '&:hover': {\n color: 'rgba(95, 92, 128, 1)',\n borderColor: 'rgba(147, 145, 166, 1)',\n },\n '&:active': {\n color: 'rgba(95, 92, 128, 1)',\n borderColor: 'rgba(147, 145, 166, 1)',\n },\n },\n },\n dashed: {\n true: {\n borderStyle: 'dashed',\n },\n },\n disabled: {\n true: {\n pointerEvents: 'none',\n },\n },\n },\n})\n\nexport type StyledLinkProps = ComponentPropsWithRef<typeof StyledLink>\n","import React, { useRef } from 'react'\nimport type { ElementRef, ReactNode } from 'react'\nimport { useLink } from '@react-aria/link'\nimport type { AriaLinkProps } from '@react-types/link'\nimport { mergeProps } from '@react-aria/utils'\nimport { useButton } from '@react-aria/button'\n\nimport type { StyledLinkProps } from './link.styled'\nimport { StyledLink } from './link.styled'\n\ntype LinkPropsA11y = StyledLinkProps & AriaLinkProps\n\nexport interface LinkProps\n extends Omit<LinkPropsA11y, 'onClick' | 'isDisabled' | 'elementType'> {\n /**\n * The content\n */\n children: ReactNode\n\n /**\n * Change the link styles\n */\n variant?: StyledLinkProps['variant']\n\n /**\n * Disable the mouse events\n */\n disabled?: boolean\n\n /**\n * Set the underline to dashed mode\n */\n dashed?: boolean\n\n /**\n * Alias for onPress\n */\n onClick?: AriaLinkProps['onPress']\n}\n\nexport const Link = React.forwardRef<ElementRef<typeof StyledLink>, LinkProps>(\n (\n {\n variant = 'primary',\n disabled = false,\n dashed = false,\n rel = '',\n target,\n href,\n onClick,\n onPress,\n children,\n tabIndex,\n ...restProps\n },\n forwardRef\n ) => {\n const ref = useRef<HTMLAnchorElement>(null)\n const refWithFallback = forwardRef ?? ref\n const { linkProps } = useLink(\n {\n isDisabled: disabled,\n onPress: onPress ?? onClick,\n ...restProps,\n },\n // @ts-expect-error\n refWithFallback\n )\n\n const { buttonProps } = useButton(\n {\n isDisabled: disabled,\n href,\n onPress: onPress ?? onClick,\n // @ts-expect-error\n allowFocusWhenDisabled: false,\n ...restProps,\n },\n refWithFallback\n )\n\n const asButton = href == null && (onPress ?? onClick) != null\n\n const elementProps = mergeProps(\n restProps,\n asButton ? buttonProps : linkProps\n )\n\n let relProp = rel\n\n if (!asButton && target === '_blank') {\n if (!relProp.includes('noreferrer')) {\n relProp = `noreferrer ${relProp}`\n }\n\n if (!relProp.includes('noopener')) {\n relProp = `noopener ${relProp}`\n }\n }\n\n return (\n <StyledLink\n {...elementProps}\n ref={refWithFallback}\n href={href}\n variant={variant}\n disabled={disabled}\n dashed={dashed}\n asChild={asButton}\n tabIndex={\n tabIndex != null\n ? tabIndex\n : disabled\n ? -1\n : href != null\n ? undefined\n : onClick != null || onPress != null\n ? 0\n : undefined\n }\n rel={relProp.trim()}\n target={target}\n >\n {asButton ? <button>{children}</button> : children}\n </StyledLink>\n )\n }\n)\n"],"names":["styled","Primitive","focus","React","useRef","useLink","useButton","mergeProps"],"mappings":"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"}
|
package/dist/module.js
CHANGED
|
@@ -70,6 +70,7 @@ const Link = React.forwardRef(
|
|
|
70
70
|
onClick,
|
|
71
71
|
onPress,
|
|
72
72
|
children,
|
|
73
|
+
tabIndex,
|
|
73
74
|
...restProps
|
|
74
75
|
}, forwardRef) => {
|
|
75
76
|
const ref = useRef(null);
|
|
@@ -97,9 +98,15 @@ const Link = React.forwardRef(
|
|
|
97
98
|
restProps,
|
|
98
99
|
asButton ? buttonProps : linkProps
|
|
99
100
|
);
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
101
|
+
let relProp = rel;
|
|
102
|
+
if (!asButton && target === "_blank") {
|
|
103
|
+
if (!relProp.includes("noreferrer")) {
|
|
104
|
+
relProp = `noreferrer ${relProp}`;
|
|
105
|
+
}
|
|
106
|
+
if (!relProp.includes("noopener")) {
|
|
107
|
+
relProp = `noopener ${relProp}`;
|
|
108
|
+
}
|
|
109
|
+
}
|
|
103
110
|
return /* @__PURE__ */ React.createElement(StyledLink, {
|
|
104
111
|
...elementProps,
|
|
105
112
|
ref: refWithFallback,
|
|
@@ -108,8 +115,8 @@ const Link = React.forwardRef(
|
|
|
108
115
|
disabled,
|
|
109
116
|
dashed,
|
|
110
117
|
asChild: asButton,
|
|
111
|
-
tabIndex: disabled ? -1 : href != null ? void 0 : onClick != null || onPress != null ? 0 : void 0,
|
|
112
|
-
|
|
118
|
+
tabIndex: tabIndex != null ? tabIndex : disabled ? -1 : href != null ? void 0 : onClick != null || onPress != null ? 0 : void 0,
|
|
119
|
+
rel: relProp.trim(),
|
|
113
120
|
target
|
|
114
121
|
}, asButton ? /* @__PURE__ */ React.createElement("button", null, children) : children);
|
|
115
122
|
}
|
package/dist/module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"module.js","sources":["../src/link.styled.ts","../src/link.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { focus } from '@mirohq/design-system-styles'\n\nconst TRANSITION_TIME = '250ms'\n\nexport const StyledLink = styled(Primitive.a, {\n textDecoration: 'none',\n border: 0,\n borderBottom: '1px solid currentColor',\n cursor: 'pointer',\n transition: `border ${TRANSITION_TIME}, color ${TRANSITION_TIME}`,\n\n // asButton\n background: 'none',\n padding: '$none',\n margin: '$none',\n font: 'inherit',\n\n variants: {\n variant: {\n primary: {\n color: 'rgba(66, 98, 255, 1)',\n borderColor: 'rgba(217, 224, 255, 1)',\n ...focus.defaults,\n '&:hover': {\n color: 'rgba(69, 91, 237, 1)',\n borderColor: 'rgba(104, 129, 255, 1)',\n },\n '&:active': {\n color: 'rgba(61, 81, 212, 1)',\n borderColor: 'rgba(66, 98, 255, 1)',\n },\n },\n secondary: {\n color: 'rgba(95, 92, 128, 1)',\n borderColor: 'rgba(235, 235, 239, 1)',\n ...focus.defaults,\n '&:hover': {\n color: 'rgba(95, 92, 128, 1)',\n borderColor: 'rgba(147, 145, 166, 1)',\n },\n '&:active': {\n color: 'rgba(95, 92, 128, 1)',\n borderColor: 'rgba(147, 145, 166, 1)',\n },\n },\n },\n dashed: {\n true: {\n borderStyle: 'dashed',\n },\n },\n disabled: {\n true: {\n pointerEvents: 'none',\n },\n },\n },\n})\n\nexport type StyledLinkProps = ComponentPropsWithRef<typeof StyledLink>\n","import React, { useRef } from 'react'\nimport type { ElementRef, ReactNode } from 'react'\nimport { useLink } from '@react-aria/link'\nimport type { AriaLinkProps } from '@react-types/link'\nimport { mergeProps } from '@react-aria/utils'\nimport { useButton } from '@react-aria/button'\n\nimport type { StyledLinkProps } from './link.styled'\nimport { StyledLink } from './link.styled'\n\ntype LinkPropsA11y = StyledLinkProps & AriaLinkProps\n\nexport interface LinkProps\n extends Omit<LinkPropsA11y, 'onClick' | 'isDisabled' | 'elementType'> {\n /**\n * The content\n */\n children: ReactNode\n\n /**\n * Change the link styles\n */\n variant?: StyledLinkProps['variant']\n\n /**\n * Disable the mouse events\n */\n disabled?: boolean\n\n /**\n * Set the underline to dashed mode\n */\n dashed?: boolean\n\n /**\n * Alias for onPress\n */\n onClick?: AriaLinkProps['onPress']\n}\n\nexport const Link = React.forwardRef<ElementRef<typeof StyledLink>, LinkProps>(\n (\n {\n variant = 'primary',\n disabled = false,\n dashed = false,\n rel = '',\n target,\n href,\n onClick,\n onPress,\n children,\n ...restProps\n },\n forwardRef\n ) => {\n const ref = useRef<HTMLAnchorElement>(null)\n const refWithFallback = forwardRef ?? ref\n const { linkProps } = useLink(\n {\n isDisabled: disabled,\n onPress: onPress ?? onClick,\n ...restProps,\n },\n // @ts-expect-error\n refWithFallback\n )\n\n const { buttonProps } = useButton(\n {\n isDisabled: disabled,\n href,\n onPress: onPress ?? onClick,\n // @ts-expect-error\n allowFocusWhenDisabled: false,\n ...restProps,\n },\n refWithFallback\n )\n\n const asButton = href == null && (onPress ?? onClick) != null\n\n const elementProps = mergeProps(\n restProps,\n asButton ? buttonProps : linkProps\n )\n\n
|
|
1
|
+
{"version":3,"file":"module.js","sources":["../src/link.styled.ts","../src/link.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { focus } from '@mirohq/design-system-styles'\n\nconst TRANSITION_TIME = '250ms'\n\nexport const StyledLink = styled(Primitive.a, {\n textDecoration: 'none',\n border: 0,\n borderBottom: '1px solid currentColor',\n cursor: 'pointer',\n transition: `border ${TRANSITION_TIME}, color ${TRANSITION_TIME}`,\n\n // asButton\n background: 'none',\n padding: '$none',\n margin: '$none',\n font: 'inherit',\n\n variants: {\n variant: {\n primary: {\n color: 'rgba(66, 98, 255, 1)',\n borderColor: 'rgba(217, 224, 255, 1)',\n ...focus.defaults,\n '&:hover': {\n color: 'rgba(69, 91, 237, 1)',\n borderColor: 'rgba(104, 129, 255, 1)',\n },\n '&:active': {\n color: 'rgba(61, 81, 212, 1)',\n borderColor: 'rgba(66, 98, 255, 1)',\n },\n },\n secondary: {\n color: 'rgba(95, 92, 128, 1)',\n borderColor: 'rgba(235, 235, 239, 1)',\n ...focus.defaults,\n '&:hover': {\n color: 'rgba(95, 92, 128, 1)',\n borderColor: 'rgba(147, 145, 166, 1)',\n },\n '&:active': {\n color: 'rgba(95, 92, 128, 1)',\n borderColor: 'rgba(147, 145, 166, 1)',\n },\n },\n },\n dashed: {\n true: {\n borderStyle: 'dashed',\n },\n },\n disabled: {\n true: {\n pointerEvents: 'none',\n },\n },\n },\n})\n\nexport type StyledLinkProps = ComponentPropsWithRef<typeof StyledLink>\n","import React, { useRef } from 'react'\nimport type { ElementRef, ReactNode } from 'react'\nimport { useLink } from '@react-aria/link'\nimport type { AriaLinkProps } from '@react-types/link'\nimport { mergeProps } from '@react-aria/utils'\nimport { useButton } from '@react-aria/button'\n\nimport type { StyledLinkProps } from './link.styled'\nimport { StyledLink } from './link.styled'\n\ntype LinkPropsA11y = StyledLinkProps & AriaLinkProps\n\nexport interface LinkProps\n extends Omit<LinkPropsA11y, 'onClick' | 'isDisabled' | 'elementType'> {\n /**\n * The content\n */\n children: ReactNode\n\n /**\n * Change the link styles\n */\n variant?: StyledLinkProps['variant']\n\n /**\n * Disable the mouse events\n */\n disabled?: boolean\n\n /**\n * Set the underline to dashed mode\n */\n dashed?: boolean\n\n /**\n * Alias for onPress\n */\n onClick?: AriaLinkProps['onPress']\n}\n\nexport const Link = React.forwardRef<ElementRef<typeof StyledLink>, LinkProps>(\n (\n {\n variant = 'primary',\n disabled = false,\n dashed = false,\n rel = '',\n target,\n href,\n onClick,\n onPress,\n children,\n tabIndex,\n ...restProps\n },\n forwardRef\n ) => {\n const ref = useRef<HTMLAnchorElement>(null)\n const refWithFallback = forwardRef ?? ref\n const { linkProps } = useLink(\n {\n isDisabled: disabled,\n onPress: onPress ?? onClick,\n ...restProps,\n },\n // @ts-expect-error\n refWithFallback\n )\n\n const { buttonProps } = useButton(\n {\n isDisabled: disabled,\n href,\n onPress: onPress ?? onClick,\n // @ts-expect-error\n allowFocusWhenDisabled: false,\n ...restProps,\n },\n refWithFallback\n )\n\n const asButton = href == null && (onPress ?? onClick) != null\n\n const elementProps = mergeProps(\n restProps,\n asButton ? buttonProps : linkProps\n )\n\n let relProp = rel\n\n if (!asButton && target === '_blank') {\n if (!relProp.includes('noreferrer')) {\n relProp = `noreferrer ${relProp}`\n }\n\n if (!relProp.includes('noopener')) {\n relProp = `noopener ${relProp}`\n }\n }\n\n return (\n <StyledLink\n {...elementProps}\n ref={refWithFallback}\n href={href}\n variant={variant}\n disabled={disabled}\n dashed={dashed}\n asChild={asButton}\n tabIndex={\n tabIndex != null\n ? tabIndex\n : disabled\n ? -1\n : href != null\n ? undefined\n : onClick != null || onPress != null\n ? 0\n : undefined\n }\n rel={relProp.trim()}\n target={target}\n >\n {asButton ? <button>{children}</button> : children}\n </StyledLink>\n )\n }\n)\n"],"names":[],"mappings":";;;;;;;;AAKA,MAAM,eAAkB,GAAA,OAAA,CAAA;AAEX,MAAA,UAAA,GAAa,MAAO,CAAA,SAAA,CAAU,CAAG,EAAA;AAAA,EAC5C,cAAgB,EAAA,MAAA;AAAA,EAChB,MAAQ,EAAA,CAAA;AAAA,EACR,YAAc,EAAA,wBAAA;AAAA,EACd,MAAQ,EAAA,SAAA;AAAA,EACR,UAAA,EAAY,UAAU,eAA0B,CAAA,QAAA,EAAA,eAAA,CAAA,CAAA;AAAA,EAGhD,UAAY,EAAA,MAAA;AAAA,EACZ,OAAS,EAAA,OAAA;AAAA,EACT,MAAQ,EAAA,OAAA;AAAA,EACR,IAAM,EAAA,SAAA;AAAA,EAEN,QAAU,EAAA;AAAA,IACR,OAAS,EAAA;AAAA,MACP,OAAS,EAAA;AAAA,QACP,KAAO,EAAA,sBAAA;AAAA,QACP,WAAa,EAAA,wBAAA;AAAA,QACb,GAAG,KAAM,CAAA,QAAA;AAAA,QACT,SAAW,EAAA;AAAA,UACT,KAAO,EAAA,sBAAA;AAAA,UACP,WAAa,EAAA,wBAAA;AAAA,SACf;AAAA,QACA,UAAY,EAAA;AAAA,UACV,KAAO,EAAA,sBAAA;AAAA,UACP,WAAa,EAAA,sBAAA;AAAA,SACf;AAAA,OACF;AAAA,MACA,SAAW,EAAA;AAAA,QACT,KAAO,EAAA,sBAAA;AAAA,QACP,WAAa,EAAA,wBAAA;AAAA,QACb,GAAG,KAAM,CAAA,QAAA;AAAA,QACT,SAAW,EAAA;AAAA,UACT,KAAO,EAAA,sBAAA;AAAA,UACP,WAAa,EAAA,wBAAA;AAAA,SACf;AAAA,QACA,UAAY,EAAA;AAAA,UACV,KAAO,EAAA,sBAAA;AAAA,UACP,WAAa,EAAA,wBAAA;AAAA,SACf;AAAA,OACF;AAAA,KACF;AAAA,IACA,MAAQ,EAAA;AAAA,MACN,IAAM,EAAA;AAAA,QACJ,WAAa,EAAA,QAAA;AAAA,OACf;AAAA,KACF;AAAA,IACA,QAAU,EAAA;AAAA,MACR,IAAM,EAAA;AAAA,QACJ,aAAe,EAAA,MAAA;AAAA,OACjB;AAAA,KACF;AAAA,GACF;AACF,CAAC,CAAA;;ACpBM,MAAM,OAAO,KAAM,CAAA,UAAA;AAAA,EACxB,CACE;AAAA,IACE,OAAU,GAAA,SAAA;AAAA,IACV,QAAW,GAAA,KAAA;AAAA,IACX,MAAS,GAAA,KAAA;AAAA,IACT,GAAM,GAAA,EAAA;AAAA,IACN,MAAA;AAAA,IACA,IAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACG,GAAA,SAAA;AAAA,KAEL,UACG,KAAA;AACH,IAAM,MAAA,GAAA,GAAM,OAA0B,IAAI,CAAA,CAAA;AAC1C,IAAA,MAAM,kBAAkB,UAAc,IAAA,IAAA,GAAA,UAAA,GAAA,GAAA,CAAA;AACtC,IAAM,MAAA,EAAE,WAAc,GAAA,OAAA;AAAA,MACpB;AAAA,QACE,UAAY,EAAA,QAAA;AAAA,QACZ,SAAS,OAAW,IAAA,IAAA,GAAA,OAAA,GAAA,OAAA;AAAA,QACpB,GAAG,SAAA;AAAA,OACL;AAAA,MAEA,eAAA;AAAA,KACF,CAAA;AAEA,IAAM,MAAA,EAAE,aAAgB,GAAA,SAAA;AAAA,MACtB;AAAA,QACE,UAAY,EAAA,QAAA;AAAA,QACZ,IAAA;AAAA,QACA,SAAS,OAAW,IAAA,IAAA,GAAA,OAAA,GAAA,OAAA;AAAA,QAEpB,sBAAwB,EAAA,KAAA;AAAA,QACxB,GAAG,SAAA;AAAA,OACL;AAAA,MACA,eAAA;AAAA,KACF,CAAA;AAEA,IAAA,MAAM,QAAW,GAAA,IAAA,IAAQ,IAAS,IAAA,CAAA,OAAA,IAAA,IAAA,GAAA,OAAA,GAAW,OAAY,KAAA,IAAA,CAAA;AAEzD,IAAA,MAAM,YAAe,GAAA,UAAA;AAAA,MACnB,SAAA;AAAA,MACA,WAAW,WAAc,GAAA,SAAA;AAAA,KAC3B,CAAA;AAEA,IAAA,IAAI,OAAU,GAAA,GAAA,CAAA;AAEd,IAAI,IAAA,CAAC,QAAY,IAAA,MAAA,KAAW,QAAU,EAAA;AACpC,MAAA,IAAI,CAAC,OAAA,CAAQ,QAAS,CAAA,YAAY,CAAG,EAAA;AACnC,QAAA,OAAA,GAAU,CAAc,WAAA,EAAA,OAAA,CAAA,CAAA,CAAA;AAAA,OAC1B;AAEA,MAAA,IAAI,CAAC,OAAA,CAAQ,QAAS,CAAA,UAAU,CAAG,EAAA;AACjC,QAAA,OAAA,GAAU,CAAY,SAAA,EAAA,OAAA,CAAA,CAAA,CAAA;AAAA,OACxB;AAAA,KACF;AAEA,IAAA,uBACG,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA;AAAA,MACE,GAAG,YAAA;AAAA,MACJ,GAAK,EAAA,eAAA;AAAA,MACL,IAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAS,EAAA,QAAA;AAAA,MACT,QACE,EAAA,QAAA,IAAY,IACR,GAAA,QAAA,GACA,QACA,GAAA,CAAA,CAAA,GACA,IAAQ,IAAA,IAAA,GACR,KACA,CAAA,GAAA,OAAA,IAAW,IAAQ,IAAA,OAAA,IAAW,OAC9B,CACA,GAAA,KAAA,CAAA;AAAA,MAEN,GAAA,EAAK,QAAQ,IAAK,EAAA;AAAA,MAClB,MAAA;AAAA,KAAA,EAEC,QAAW,mBAAA,KAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,IAAA,EAAA,QAAS,IAAY,QAC5C,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|