@bitrise/bitkit-v2 0.3.452 → 0.3.454
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/components/BitkitCodeSnippet/BitkitCodeSnippet.d.ts +11 -0
- package/dist/components/BitkitCodeSnippet/BitkitCodeSnippet.js +11 -6
- package/dist/components/BitkitCodeSnippet/BitkitCodeSnippet.js.map +1 -1
- package/dist/components/BitkitSectionHeading/BitkitSectionHeading.d.ts +5 -0
- package/dist/components/BitkitSectionHeading/BitkitSectionHeading.js +4 -2
- package/dist/components/BitkitSectionHeading/BitkitSectionHeading.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
import { HTMLChakraProps } from '@chakra-ui/react/styled-system';
|
|
2
2
|
interface InlineProps extends Omit<HTMLChakraProps<'code'>, 'children' | 'size'> {
|
|
3
3
|
children: string;
|
|
4
|
+
copyLabel?: never;
|
|
4
5
|
interactive?: boolean;
|
|
6
|
+
/** Called each time the snippet is copied by clicking it or pressing Enter/Space. */
|
|
7
|
+
onCopied?: () => void;
|
|
5
8
|
size?: 'md' | 'lg';
|
|
6
9
|
startingHeight?: never;
|
|
7
10
|
textToCopy?: string;
|
|
@@ -10,7 +13,15 @@ interface InlineProps extends Omit<HTMLChakraProps<'code'>, 'children' | 'size'>
|
|
|
10
13
|
}
|
|
11
14
|
interface BlockProps extends Omit<HTMLChakraProps<'div'>, 'children' | 'size'> {
|
|
12
15
|
children: string;
|
|
16
|
+
/**
|
|
17
|
+
* Label of the copy button: its tooltip and its accessible name. Set it when a page has more than
|
|
18
|
+
* one snippet, so the buttons can be told apart (e.g. "Copy install command").
|
|
19
|
+
* @default 'Copy to clipboard'
|
|
20
|
+
*/
|
|
21
|
+
copyLabel?: string;
|
|
13
22
|
interactive?: never;
|
|
23
|
+
/** Called each time the snippet is copied with its copy button. */
|
|
24
|
+
onCopied?: () => void;
|
|
14
25
|
size?: 'md' | 'lg';
|
|
15
26
|
textToCopy?: string;
|
|
16
27
|
}
|
|
@@ -11,10 +11,15 @@ var COPY_TOOLTIP = "Copy to clipboard";
|
|
|
11
11
|
var BitkitCodeSnippet = forwardRef((props, ref) => {
|
|
12
12
|
const hasShowMore = props.startingHeight !== void 0;
|
|
13
13
|
const [isExpanded, setIsExpanded] = useState(false);
|
|
14
|
-
const { copied, copy } = useClipboard({
|
|
14
|
+
const { copied, copy: copyToClipboard } = useClipboard({
|
|
15
15
|
timeout: 2e3,
|
|
16
16
|
value: props.textToCopy ?? props.children
|
|
17
17
|
});
|
|
18
|
+
const copyLabel = props.copyLabel ?? COPY_TOOLTIP;
|
|
19
|
+
const copy = () => {
|
|
20
|
+
copyToClipboard();
|
|
21
|
+
props.onCopied?.();
|
|
22
|
+
};
|
|
18
23
|
const styles = useSlotRecipe({ key: "codeSnippet" })({
|
|
19
24
|
hasShowMore,
|
|
20
25
|
interactive: props.interactive,
|
|
@@ -33,14 +38,14 @@ var BitkitCodeSnippet = forwardRef((props, ref) => {
|
|
|
33
38
|
}
|
|
34
39
|
};
|
|
35
40
|
const copyButton = /* @__PURE__ */ jsx(chakra.button, {
|
|
36
|
-
"aria-label":
|
|
41
|
+
"aria-label": copyLabel,
|
|
37
42
|
css: styles.copyButton,
|
|
38
43
|
onClick: copy,
|
|
39
44
|
type: "button",
|
|
40
45
|
children: copied ? /* @__PURE__ */ jsx(IconCheck, { size: "16" }) : /* @__PURE__ */ jsx(IconCopy, { size: "16" })
|
|
41
46
|
});
|
|
42
47
|
if (props.variant === "inline") {
|
|
43
|
-
const { children, interactive, size: _size, textToCopy: _textToCopy, variant: _variant, ...rest } = props;
|
|
48
|
+
const { children, copyLabel: _copyLabel, interactive, onCopied: _onCopied, size: _size, textToCopy: _textToCopy, variant: _variant, ...rest } = props;
|
|
44
49
|
if (!interactive) return /* @__PURE__ */ jsx(chakra.code, {
|
|
45
50
|
ref,
|
|
46
51
|
...rest,
|
|
@@ -67,7 +72,7 @@ var BitkitCodeSnippet = forwardRef((props, ref) => {
|
|
|
67
72
|
})
|
|
68
73
|
});
|
|
69
74
|
}
|
|
70
|
-
const { children, size: _size, startingHeight, textToCopy: _textToCopy, variant, wrapLines: _wrapLines, ...rest } = props;
|
|
75
|
+
const { children, copyLabel: _copyLabel, onCopied: _onCopied, size: _size, startingHeight, textToCopy: _textToCopy, variant, wrapLines: _wrapLines, ...rest } = props;
|
|
71
76
|
if (variant === "single") return /* @__PURE__ */ jsxs(chakra.div, {
|
|
72
77
|
ref,
|
|
73
78
|
...rest,
|
|
@@ -77,7 +82,7 @@ var BitkitCodeSnippet = forwardRef((props, ref) => {
|
|
|
77
82
|
tabIndex: -1,
|
|
78
83
|
children
|
|
79
84
|
}), /* @__PURE__ */ jsx(BitkitTooltip, {
|
|
80
|
-
text:
|
|
85
|
+
text: copyLabel,
|
|
81
86
|
children: copyButton
|
|
82
87
|
})]
|
|
83
88
|
});
|
|
@@ -96,7 +101,7 @@ var BitkitCodeSnippet = forwardRef((props, ref) => {
|
|
|
96
101
|
/* @__PURE__ */ jsx(chakra.div, {
|
|
97
102
|
css: styles.copyButtonWrapper,
|
|
98
103
|
children: /* @__PURE__ */ jsx(BitkitTooltip, {
|
|
99
|
-
text:
|
|
104
|
+
text: copyLabel,
|
|
100
105
|
children: copyButton
|
|
101
106
|
})
|
|
102
107
|
}),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitCodeSnippet.js","names":[],"sources":["../../../lib/components/BitkitCodeSnippet/BitkitCodeSnippet.tsx"],"sourcesContent":["import { useClipboard } from '@ark-ui/react/clipboard';\nimport { chakra, type HTMLChakraProps, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type KeyboardEvent, useState } from 'react';\n\nimport { IconCheck, IconCopy } from '../../icons';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron';\nimport BitkitTooltip from '../BitkitTooltip/BitkitTooltip';\n\nconst COPY_TOOLTIP = 'Copy to clipboard';\n\ninterface InlineProps extends Omit<HTMLChakraProps<'code'>, 'children' | 'size'> {\n children: string;\n interactive?: boolean;\n size?: 'md' | 'lg';\n startingHeight?: never;\n textToCopy?: string;\n variant: 'inline';\n wrapLines?: never;\n}\n\ninterface BlockProps extends Omit<HTMLChakraProps<'div'>, 'children' | 'size'> {\n children: string;\n interactive?: never;\n size?: 'md' | 'lg';\n textToCopy?: string;\n}\n\n// `single` is one line behind a horizontal scrollbar, so neither the show-more height nor the\n// wrapping switch means anything there -- `never` says so at the call site instead of ignoring them.\ninterface SingleProps extends BlockProps {\n startingHeight?: never;\n variant: 'single';\n wrapLines?: never;\n}\n\ninterface MultiProps extends BlockProps {\n startingHeight?: number;\n variant: 'multi';\n /**\n * Long lines wrap by default; `false` keeps them whole behind a horizontal scrollbar, which is\n * what indented code (YAML, shell) needs to stay readable.\n */\n wrapLines?: boolean;\n}\n\nexport type BitkitCodeSnippetProps = InlineProps | MultiProps | SingleProps;\n\nconst BitkitCodeSnippet = forwardRef<HTMLElement, BitkitCodeSnippetProps>((props, ref) => {\n const hasShowMore = props.startingHeight !== undefined;\n const [isExpanded, setIsExpanded] = useState(false);\n\n const { copied, copy } = useClipboard({ timeout: 2000, value: props.textToCopy ?? props.children });\n\n const recipe = useSlotRecipe({ key: 'codeSnippet' });\n const styles = recipe({\n hasShowMore,\n interactive: props.interactive,\n isExpanded,\n size: props.size ?? 'lg',\n variant: props.variant,\n wrapLines: props.wrapLines,\n });\n\n const handleToggleExpand = () => {\n setIsExpanded((prev) => !prev);\n };\n\n const handleKeyDown = (e: KeyboardEvent<HTMLElement>) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n copy();\n }\n };\n\n const copyButton = (\n <chakra.button aria-label={
|
|
1
|
+
{"version":3,"file":"BitkitCodeSnippet.js","names":[],"sources":["../../../lib/components/BitkitCodeSnippet/BitkitCodeSnippet.tsx"],"sourcesContent":["import { useClipboard } from '@ark-ui/react/clipboard';\nimport { chakra, type HTMLChakraProps, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type KeyboardEvent, useState } from 'react';\n\nimport { IconCheck, IconCopy } from '../../icons';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron';\nimport BitkitTooltip from '../BitkitTooltip/BitkitTooltip';\n\nconst COPY_TOOLTIP = 'Copy to clipboard';\n\ninterface InlineProps extends Omit<HTMLChakraProps<'code'>, 'children' | 'size'> {\n children: string;\n // The code itself is the control's accessible name here, so there is no separate copy label.\n copyLabel?: never;\n interactive?: boolean;\n /** Called each time the snippet is copied by clicking it or pressing Enter/Space. */\n onCopied?: () => void;\n size?: 'md' | 'lg';\n startingHeight?: never;\n textToCopy?: string;\n variant: 'inline';\n wrapLines?: never;\n}\n\ninterface BlockProps extends Omit<HTMLChakraProps<'div'>, 'children' | 'size'> {\n children: string;\n /**\n * Label of the copy button: its tooltip and its accessible name. Set it when a page has more than\n * one snippet, so the buttons can be told apart (e.g. \"Copy install command\").\n * @default 'Copy to clipboard'\n */\n copyLabel?: string;\n interactive?: never;\n /** Called each time the snippet is copied with its copy button. */\n onCopied?: () => void;\n size?: 'md' | 'lg';\n textToCopy?: string;\n}\n\n// `single` is one line behind a horizontal scrollbar, so neither the show-more height nor the\n// wrapping switch means anything there -- `never` says so at the call site instead of ignoring them.\ninterface SingleProps extends BlockProps {\n startingHeight?: never;\n variant: 'single';\n wrapLines?: never;\n}\n\ninterface MultiProps extends BlockProps {\n startingHeight?: number;\n variant: 'multi';\n /**\n * Long lines wrap by default; `false` keeps them whole behind a horizontal scrollbar, which is\n * what indented code (YAML, shell) needs to stay readable.\n */\n wrapLines?: boolean;\n}\n\nexport type BitkitCodeSnippetProps = InlineProps | MultiProps | SingleProps;\n\nconst BitkitCodeSnippet = forwardRef<HTMLElement, BitkitCodeSnippetProps>((props, ref) => {\n const hasShowMore = props.startingHeight !== undefined;\n const [isExpanded, setIsExpanded] = useState(false);\n\n const { copied, copy: copyToClipboard } = useClipboard({ timeout: 2000, value: props.textToCopy ?? props.children });\n\n const copyLabel = props.copyLabel ?? COPY_TOOLTIP;\n\n const copy = () => {\n copyToClipboard();\n props.onCopied?.();\n };\n\n const recipe = useSlotRecipe({ key: 'codeSnippet' });\n const styles = recipe({\n hasShowMore,\n interactive: props.interactive,\n isExpanded,\n size: props.size ?? 'lg',\n variant: props.variant,\n wrapLines: props.wrapLines,\n });\n\n const handleToggleExpand = () => {\n setIsExpanded((prev) => !prev);\n };\n\n const handleKeyDown = (e: KeyboardEvent<HTMLElement>) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n copy();\n }\n };\n\n const copyButton = (\n <chakra.button aria-label={copyLabel} css={styles.copyButton} onClick={copy} type=\"button\">\n {copied ? <IconCheck size=\"16\" /> : <IconCopy size=\"16\" />}\n </chakra.button>\n );\n\n if (props.variant === 'inline') {\n const {\n children,\n copyLabel: _copyLabel,\n interactive,\n onCopied: _onCopied,\n size: _size,\n textToCopy: _textToCopy,\n variant: _variant,\n ...rest\n } = props;\n\n if (!interactive) {\n return (\n <chakra.code ref={ref} {...rest} css={[styles.root, rest.css]}>\n {children}\n </chakra.code>\n );\n }\n\n return (\n <BitkitTooltip text={COPY_TOOLTIP}>\n <chakra.code\n ref={ref}\n {...rest}\n css={[styles.root, rest.css]}\n onClick={(e) => {\n rest.onClick?.(e);\n if (!e.defaultPrevented) copy();\n }}\n onKeyDown={(e) => {\n rest.onKeyDown?.(e);\n if (!e.defaultPrevented) handleKeyDown(e);\n }}\n role=\"button\"\n tabIndex={0}\n >\n {children}\n </chakra.code>\n </BitkitTooltip>\n );\n }\n\n const {\n children,\n copyLabel: _copyLabel,\n onCopied: _onCopied,\n size: _size,\n startingHeight,\n textToCopy: _textToCopy,\n variant,\n wrapLines: _wrapLines,\n ...rest\n } = props;\n\n if (variant === 'single') {\n return (\n <chakra.div ref={ref} {...rest} css={[styles.root, rest.css]}>\n <chakra.code css={styles.content} tabIndex={-1}>\n {children}\n </chakra.code>\n <BitkitTooltip text={copyLabel}>{copyButton}</BitkitTooltip>\n </chakra.div>\n );\n }\n\n const contentMaxHeight = hasShowMore && !isExpanded ? startingHeight : undefined;\n\n return (\n <chakra.div ref={ref} {...rest} css={[styles.root, rest.css]}>\n <chakra.code css={styles.content} maxHeight={contentMaxHeight} tabIndex={-1}>\n {children}\n </chakra.code>\n <chakra.div css={styles.copyButtonWrapper}>\n <BitkitTooltip text={copyLabel}>{copyButton}</BitkitTooltip>\n </chakra.div>\n {hasShowMore && (\n <chakra.div css={styles.showMoreContainer}>\n {!isExpanded && <chakra.div css={styles.showMoreGradient} />}\n <chakra.button onClick={handleToggleExpand} css={styles.showMoreButton}>\n {isExpanded ? 'Show less' : 'Show more'}\n <AssetSelectChevron data-state={isExpanded ? 'open' : 'closed'} height=\"16\" width=\"16\" />\n </chakra.button>\n </chakra.div>\n )}\n </chakra.div>\n );\n});\n\nBitkitCodeSnippet.displayName = 'BitkitCodeSnippet';\n\nexport default BitkitCodeSnippet;\n"],"mappings":"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"}
|
|
@@ -3,6 +3,11 @@ import { ReactNode } from 'react';
|
|
|
3
3
|
import { BitkitIconComponent } from '../../icons';
|
|
4
4
|
export interface BitkitSectionHeadingProps extends Omit<BoxProps, 'icon'> {
|
|
5
5
|
children?: ReactNode;
|
|
6
|
+
/**
|
|
7
|
+
* The heading tag the label renders as, so the section fits the page's outline. Only the tag
|
|
8
|
+
* changes: the label keeps the `heading/h3` look at every level.
|
|
9
|
+
*/
|
|
10
|
+
headingLevel?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
|
|
6
11
|
helperText?: ReactNode | ReactNode[];
|
|
7
12
|
helperTooltip?: string;
|
|
8
13
|
icon?: BitkitIconComponent;
|
|
@@ -4,10 +4,11 @@ import { Box } from "@chakra-ui/react/box";
|
|
|
4
4
|
import { chakra, useSlotRecipe } from "@chakra-ui/react/styled-system";
|
|
5
5
|
import { Fragment, forwardRef } from "react";
|
|
6
6
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
+
import { Text } from "@chakra-ui/react/text";
|
|
7
8
|
//#region lib/components/BitkitSectionHeading/BitkitSectionHeading.tsx
|
|
8
9
|
var HELPER_DOT = "•";
|
|
9
10
|
var BitkitSectionHeading = forwardRef((props, ref) => {
|
|
10
|
-
const { children, css, helperText, helperTooltip, icon: Icon, label, ...rest } = props;
|
|
11
|
+
const { children, css, headingLevel = "h3", helperText, helperTooltip, icon: Icon, label, ...rest } = props;
|
|
11
12
|
const styles = useSlotRecipe({ key: "sectionHeading" })();
|
|
12
13
|
const helperItems = Array.isArray(helperText) ? helperText : helperText ? [helperText] : [];
|
|
13
14
|
const hasHelper = helperItems.length > 0 || Boolean(helperTooltip);
|
|
@@ -22,7 +23,8 @@ var BitkitSectionHeading = forwardRef((props, ref) => {
|
|
|
22
23
|
children: [Icon && /* @__PURE__ */ jsx(Icon, {
|
|
23
24
|
css: styles.icon,
|
|
24
25
|
size: "24"
|
|
25
|
-
}), /* @__PURE__ */ jsx(
|
|
26
|
+
}), /* @__PURE__ */ jsx(Text, {
|
|
27
|
+
as: headingLevel,
|
|
26
28
|
css: styles.label,
|
|
27
29
|
children: label
|
|
28
30
|
})]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitSectionHeading.js","names":[],"sources":["../../../lib/components/BitkitSectionHeading/BitkitSectionHeading.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, Fragment, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport IconInfoCircle from '../../icons/IconInfoCircle';\nimport BitkitTooltip from '../BitkitTooltip/BitkitTooltip';\n\nexport interface BitkitSectionHeadingProps extends Omit<BoxProps, 'icon'> {\n children?: ReactNode;\n helperText?: ReactNode | ReactNode[];\n helperTooltip?: string;\n icon?: BitkitIconComponent;\n label: string;\n}\n\nconst HELPER_DOT = '\\u2022';\n\nconst BitkitSectionHeading = forwardRef<HTMLDivElement, BitkitSectionHeadingProps>((props, ref) => {\n const { children, css, helperText, helperTooltip, icon: Icon, label, ...rest } = props;\n\n const recipe = useSlotRecipe({ key: 'sectionHeading' });\n const styles = recipe();\n\n const helperItems = Array.isArray(helperText) ? helperText : helperText ? [helperText] : [];\n const hasHelper = helperItems.length > 0 || Boolean(helperTooltip);\n\n return (\n <Box css={[styles.root, css]} ref={ref} {...rest}>\n <chakra.div css={styles.contentBlock}>\n <chakra.div css={styles.titleBlock}>\n {Icon && <Icon css={styles.icon} size=\"24\" />}\n <
|
|
1
|
+
{"version":3,"file":"BitkitSectionHeading.js","names":[],"sources":["../../../lib/components/BitkitSectionHeading/BitkitSectionHeading.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, Fragment, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport IconInfoCircle from '../../icons/IconInfoCircle';\nimport BitkitTooltip from '../BitkitTooltip/BitkitTooltip';\n\nexport interface BitkitSectionHeadingProps extends Omit<BoxProps, 'icon'> {\n children?: ReactNode;\n /**\n * The heading tag the label renders as, so the section fits the page's outline. Only the tag\n * changes: the label keeps the `heading/h3` look at every level.\n */\n headingLevel?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n helperText?: ReactNode | ReactNode[];\n helperTooltip?: string;\n icon?: BitkitIconComponent;\n label: string;\n}\n\nconst HELPER_DOT = '\\u2022';\n\nconst BitkitSectionHeading = forwardRef<HTMLDivElement, BitkitSectionHeadingProps>((props, ref) => {\n const { children, css, headingLevel = 'h3', helperText, helperTooltip, icon: Icon, label, ...rest } = props;\n\n const recipe = useSlotRecipe({ key: 'sectionHeading' });\n const styles = recipe();\n\n const helperItems = Array.isArray(helperText) ? helperText : helperText ? [helperText] : [];\n const hasHelper = helperItems.length > 0 || Boolean(helperTooltip);\n\n return (\n <Box css={[styles.root, css]} ref={ref} {...rest}>\n <chakra.div css={styles.contentBlock}>\n <chakra.div css={styles.titleBlock}>\n {Icon && <Icon css={styles.icon} size=\"24\" />}\n <Text as={headingLevel} css={styles.label}>\n {label}\n </Text>\n </chakra.div>\n {hasHelper && (\n <chakra.div css={styles.helperBlock}>\n {helperItems.map((text, index) => (\n <Fragment key={index}>\n {index > 0 && (\n <chakra.span color=\"text/tertiary\" flexShrink={0} textStyle=\"body/md/regular\">\n {HELPER_DOT}\n </chakra.span>\n )}\n <chakra.span css={styles.helperText}>{text}</chakra.span>\n </Fragment>\n ))}\n {helperTooltip && (\n <BitkitTooltip text={helperTooltip}>\n <IconInfoCircle color=\"icon/tertiary\" size=\"16\" />\n </BitkitTooltip>\n )}\n </chakra.div>\n )}\n </chakra.div>\n {children}\n </Box>\n );\n});\n\nBitkitSectionHeading.displayName = 'BitkitSectionHeading';\n\nexport default BitkitSectionHeading;\n"],"mappings":";;;;;;;;AAsBA,IAAM,aAAa;AAEnB,IAAM,uBAAuB,YAAuD,OAAO,QAAQ;CACjG,MAAM,EAAE,UAAU,KAAK,eAAe,MAAM,YAAY,eAAe,MAAM,MAAM,OAAO,GAAG,SAAS;CAGtG,MAAM,SADS,cAAc,EAAE,KAAK,iBAAiB,CACtC,CAAA,CAAO;CAEtB,MAAM,cAAc,MAAM,QAAQ,UAAU,IAAI,aAAa,aAAa,CAAC,UAAU,IAAI,CAAC;CAC1F,MAAM,YAAY,YAAY,SAAS,KAAK,QAAQ,aAAa;CAEjE,OACE,qBAAC,KAAD;EAAK,KAAK,CAAC,OAAO,MAAM,GAAG;EAAQ;EAAK,GAAI;EAA5C,UAAA,CACE,qBAAC,OAAO,KAAR;GAAY,KAAK,OAAO;GAAxB,UAAA,CACE,qBAAC,OAAO,KAAR;IAAY,KAAK,OAAO;IAAxB,UAAA,CACG,QAAQ,oBAAC,MAAD;KAAM,KAAK,OAAO;KAAM,MAAK;IAAM,CAAA,GAC5C,oBAAC,MAAD;KAAM,IAAI;KAAc,KAAK,OAAO;KACjC,UAAA;IACG,CAAA,CACI;GACX,CAAA,GAAA,aACC,qBAAC,OAAO,KAAR;IAAY,KAAK,OAAO;IAAxB,UAAA,CACG,YAAY,KAAK,MAAM,UACtB,qBAAC,UAAD,EAAA,UAAA,CACG,QAAQ,KACP,oBAAC,OAAO,MAAR;KAAa,OAAM;KAAgB,YAAY;KAAG,WAAU;KACzD,UAAA;IACU,CAAA,GAEf,oBAAC,OAAO,MAAR;KAAa,KAAK,OAAO;KAAa,UAAA;IAAkB,CAAA,CAChD,EAAA,GAPK,KAOL,CACX,GACA,iBACC,oBAAC,eAAD;KAAe,MAAM;KACnB,UAAA,oBAAC,gBAAD;MAAgB,OAAM;MAAgB,MAAK;KAAM,CAAA;IACpC,CAAA,CAEP;GAEJ,CAAA,CAAA;EACX,CAAA,GAAA,QACE;;AAET,CAAC;AAED,qBAAqB,cAAc"}
|