@clickhouse/click-ui 0.6.1-rc2 → 0.6.1
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/cjs/click-ui.css +623 -11
- package/dist/cjs/components/Accordion/Accordion.css +111 -0
- package/dist/cjs/components/Accordion/Accordion.module.css.cjs +33 -0
- package/dist/cjs/components/Accordion/Accordion.module.css.cjs.map +1 -0
- package/dist/cjs/components/Accordion/index.cjs +51 -54
- package/dist/cjs/components/Accordion/index.cjs.map +1 -1
- package/dist/cjs/components/Alert/Alert.css +169 -0
- package/dist/cjs/components/Alert/Alert.module.css.cjs +75 -0
- package/dist/cjs/components/Alert/Alert.module.css.cjs.map +1 -0
- package/dist/cjs/components/Alert/index.cjs +113 -69
- package/dist/cjs/components/Alert/index.cjs.map +1 -1
- package/dist/cjs/components/Assets/Icons/Check.cjs +1 -1
- package/dist/cjs/components/Assets/Icons/Check.cjs.map +1 -1
- package/dist/cjs/components/Assets/Icons/Dollar.cjs +10 -0
- package/dist/cjs/components/Assets/Icons/Dollar.cjs.map +1 -0
- package/dist/cjs/components/Assets/Icons/Pin.cjs +13 -0
- package/dist/cjs/components/Assets/Icons/Pin.cjs.map +1 -0
- package/dist/cjs/components/Assets/Icons/Unpin.cjs +17 -0
- package/dist/cjs/components/Assets/Icons/Unpin.cjs.map +1 -0
- package/dist/cjs/components/Assets/Icons/system/IconsLight.cjs +6 -0
- package/dist/cjs/components/Assets/Icons/system/IconsLight.cjs.map +1 -1
- package/dist/cjs/components/Button/index.cjs +2 -1
- package/dist/cjs/components/Button/index.cjs.map +1 -1
- package/dist/cjs/components/Checkbox/index.cjs +1 -11
- package/dist/cjs/components/Checkbox/index.cjs.map +1 -1
- package/dist/cjs/components/Collapsible/Collapsible.css +79 -0
- package/dist/cjs/components/Collapsible/Collapsible.module.css.cjs +31 -0
- package/dist/cjs/components/Collapsible/Collapsible.module.css.cjs.map +1 -0
- package/dist/cjs/components/Collapsible/IconWrapper.cjs +4 -11
- package/dist/cjs/components/Collapsible/IconWrapper.cjs.map +1 -1
- package/dist/cjs/components/Collapsible/index.cjs +36 -24
- package/dist/cjs/components/Collapsible/index.cjs.map +1 -1
- package/dist/cjs/components/Container/Container.css +3 -3
- package/dist/cjs/components/HoverCard/HoverCard.css +6 -0
- package/dist/cjs/components/HoverCard/HoverCard.module.css.cjs +10 -0
- package/dist/cjs/components/HoverCard/HoverCard.module.css.cjs.map +1 -0
- package/dist/cjs/components/HoverCard/index.cjs +5 -5
- package/dist/cjs/components/HoverCard/index.cjs.map +1 -1
- package/dist/cjs/components/Link/Link.css +12 -8
- package/dist/cjs/components/Link/Link.module.css.cjs +15 -4
- package/dist/cjs/components/Link/Link.module.css.cjs.map +1 -1
- package/dist/cjs/components/Link/index.cjs +6 -6
- package/dist/cjs/components/Link/index.cjs.map +1 -1
- package/dist/cjs/components/Select/common/InternalSelect.cjs +1 -1
- package/dist/cjs/components/Select/common/InternalSelect.cjs.map +1 -1
- package/dist/cjs/components/SidebarNavigationItem/SidebarNavigationItem.css +167 -0
- package/dist/cjs/components/SidebarNavigationItem/SidebarNavigationItem.module.css.cjs +23 -0
- package/dist/cjs/components/SidebarNavigationItem/SidebarNavigationItem.module.css.cjs.map +1 -0
- package/dist/cjs/components/SidebarNavigationItem/index.cjs +60 -69
- package/dist/cjs/components/SidebarNavigationItem/index.cjs.map +1 -1
- package/dist/cjs/components/SidebarNavigationTitle/SidebarNavigationTitle.css +76 -0
- package/dist/cjs/components/SidebarNavigationTitle/SidebarNavigationTitle.module.css.cjs +19 -0
- package/dist/cjs/components/SidebarNavigationTitle/SidebarNavigationTitle.module.css.cjs.map +1 -0
- package/dist/cjs/components/SidebarNavigationTitle/index.cjs +35 -23
- package/dist/cjs/components/SidebarNavigationTitle/index.cjs.map +1 -1
- package/dist/esm/click-ui.css +623 -11
- package/dist/esm/components/Accordion/Accordion.css +111 -0
- package/dist/esm/components/Accordion/Accordion.module.css.js +22 -0
- package/dist/esm/components/Accordion/Accordion.module.css.js.map +1 -0
- package/dist/esm/components/Accordion/index.js +51 -54
- package/dist/esm/components/Accordion/index.js.map +1 -1
- package/dist/esm/components/Alert/Alert.css +169 -0
- package/dist/esm/components/Alert/Alert.module.css.js +53 -0
- package/dist/esm/components/Alert/Alert.module.css.js.map +1 -0
- package/dist/esm/components/Alert/index.js +113 -69
- package/dist/esm/components/Alert/index.js.map +1 -1
- package/dist/esm/components/Assets/Icons/Check.js +1 -1
- package/dist/esm/components/Assets/Icons/Check.js.map +1 -1
- package/dist/esm/components/Assets/Icons/Dollar.js +6 -0
- package/dist/esm/components/Assets/Icons/Dollar.js.map +1 -0
- package/dist/esm/components/Assets/Icons/Pin.js +9 -0
- package/dist/esm/components/Assets/Icons/Pin.js.map +1 -0
- package/dist/esm/components/Assets/Icons/Unpin.js +13 -0
- package/dist/esm/components/Assets/Icons/Unpin.js.map +1 -0
- package/dist/esm/components/Assets/Icons/system/IconsLight.js +6 -0
- package/dist/esm/components/Assets/Icons/system/IconsLight.js.map +1 -1
- package/dist/esm/components/Button/index.js +2 -1
- package/dist/esm/components/Button/index.js.map +1 -1
- package/dist/esm/components/Checkbox/index.js +1 -11
- package/dist/esm/components/Checkbox/index.js.map +1 -1
- package/dist/esm/components/Collapsible/Collapsible.css +79 -0
- package/dist/esm/components/Collapsible/Collapsible.module.css.js +21 -0
- package/dist/esm/components/Collapsible/Collapsible.module.css.js.map +1 -0
- package/dist/esm/components/Collapsible/IconWrapper.js +4 -11
- package/dist/esm/components/Collapsible/IconWrapper.js.map +1 -1
- package/dist/esm/components/Collapsible/index.js +36 -24
- package/dist/esm/components/Collapsible/index.js.map +1 -1
- package/dist/esm/components/Container/Container.css +3 -3
- package/dist/esm/components/HoverCard/HoverCard.css +6 -0
- package/dist/esm/components/HoverCard/HoverCard.module.css.js +6 -0
- package/dist/esm/components/HoverCard/HoverCard.module.css.js.map +1 -0
- package/dist/esm/components/HoverCard/index.js +5 -5
- package/dist/esm/components/HoverCard/index.js.map +1 -1
- package/dist/esm/components/Link/Link.css +12 -8
- package/dist/esm/components/Link/Link.module.css.js +11 -5
- package/dist/esm/components/Link/Link.module.css.js.map +1 -1
- package/dist/esm/components/Link/index.js +6 -6
- package/dist/esm/components/Link/index.js.map +1 -1
- package/dist/esm/components/Select/common/InternalSelect.js +1 -1
- package/dist/esm/components/Select/common/InternalSelect.js.map +1 -1
- package/dist/esm/components/SidebarNavigationItem/SidebarNavigationItem.css +167 -0
- package/dist/esm/components/SidebarNavigationItem/SidebarNavigationItem.module.css.js +16 -0
- package/dist/esm/components/SidebarNavigationItem/SidebarNavigationItem.module.css.js.map +1 -0
- package/dist/esm/components/SidebarNavigationItem/index.js +60 -69
- package/dist/esm/components/SidebarNavigationItem/index.js.map +1 -1
- package/dist/esm/components/SidebarNavigationTitle/SidebarNavigationTitle.css +76 -0
- package/dist/esm/components/SidebarNavigationTitle/SidebarNavigationTitle.module.css.js +12 -0
- package/dist/esm/components/SidebarNavigationTitle/SidebarNavigationTitle.module.css.js.map +1 -0
- package/dist/esm/components/SidebarNavigationTitle/index.js +35 -23
- package/dist/esm/components/SidebarNavigationTitle/index.js.map +1 -1
- package/dist/types/components/Accordion/Accordion.d.ts +3 -3
- package/dist/types/components/Assets/Icons/Dollar.d.ts +3 -0
- package/dist/types/components/Assets/Icons/Pin.d.ts +3 -0
- package/dist/types/components/Assets/Icons/Unpin.d.ts +3 -0
- package/dist/types/components/Assets/Icons/system/types.d.ts +1 -1
- package/dist/types/components/Button/Button.d.ts +1 -24
- package/dist/types/components/Button/Button.types.d.ts +3 -0
- package/dist/types/components/Collapsible/Collapsible.d.ts +3 -3
- package/dist/types/components/HoverCard/HoverCard.d.ts +1 -1
- package/dist/types/components/SidebarNavigationItem/SidebarNavigationItem.d.ts +9 -5
- package/dist/types/components/SidebarNavigationTitle/SidebarNavigationTitle.d.ts +9 -4
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { GenericLabel } from '@/components/GenericLabel';\nimport { Icon } from '@/components/Icon';\n\nimport * as RadixCheckbox from '@radix-ui/react-checkbox';\nimport { useId } from 'react';\nimport { FormRoot } from '@/components/FormContainer';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './Checkbox.module.css';\nimport { CheckboxProps } from './Checkbox.types';\n\nconst checkInputVariants = cva(styles.checkinput, {\n variants: {\n variant: {\n default: styles['checkinput_variant_default'],\n var1: styles['checkinput_variant_var1'],\n var2: styles['checkinput_variant_var2'],\n var3: styles['checkinput_variant_var3'],\n var4: styles['checkinput_variant_var4'],\n var5: styles['checkinput_variant_var5'],\n var6: styles['checkinput_variant_var6'],\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n});\n\nexport const Checkbox = ({\n id,\n label,\n variant = 'default',\n disabled,\n orientation = 'horizontal',\n dir = 'end',\n checked,\n className,\n ...delegated\n}: CheckboxProps) => {\n const defaultId = useId();\n return (\n <FormRoot\n $orientation={orientation}\n $dir={dir}\n className={styles.wrapper}\n >\n <RadixCheckbox.Root\n id={id ?? defaultId}\n data-testid=\"checkbox\"\n disabled={disabled}\n aria-label={`${label}`}\n checked={checked}\n {...delegated}\n className={cn(checkInputVariants({ variant }), className)}\n >\n <RadixCheckbox.Indicator className={styles.checkicon}>\n <Icon\n name={checked === 'indeterminate' ? 'minus' : 'check'}\n size=\"sm\"\n
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { GenericLabel } from '@/components/GenericLabel';\nimport { Icon } from '@/components/Icon';\n\nimport * as RadixCheckbox from '@radix-ui/react-checkbox';\nimport { useId } from 'react';\nimport { FormRoot } from '@/components/FormContainer';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './Checkbox.module.css';\nimport { CheckboxProps } from './Checkbox.types';\n\nconst checkInputVariants = cva(styles.checkinput, {\n variants: {\n variant: {\n default: styles['checkinput_variant_default'],\n var1: styles['checkinput_variant_var1'],\n var2: styles['checkinput_variant_var2'],\n var3: styles['checkinput_variant_var3'],\n var4: styles['checkinput_variant_var4'],\n var5: styles['checkinput_variant_var5'],\n var6: styles['checkinput_variant_var6'],\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n});\n\nexport const Checkbox = ({\n id,\n label,\n variant = 'default',\n disabled,\n orientation = 'horizontal',\n dir = 'end',\n checked,\n className,\n ...delegated\n}: CheckboxProps) => {\n const defaultId = useId();\n return (\n <FormRoot\n $orientation={orientation}\n $dir={dir}\n className={styles.wrapper}\n >\n <RadixCheckbox.Root\n id={id ?? defaultId}\n data-testid=\"checkbox\"\n disabled={disabled}\n aria-label={`${label}`}\n checked={checked}\n {...delegated}\n className={cn(checkInputVariants({ variant }), className)}\n >\n <RadixCheckbox.Indicator className={styles.checkicon}>\n <Icon\n name={checked === 'indeterminate' ? 'minus' : 'check'}\n size=\"sm\"\n />\n </RadixCheckbox.Indicator>\n </RadixCheckbox.Root>\n {label && (\n <GenericLabel\n htmlFor={id ?? defaultId}\n disabled={disabled}\n >\n {label}\n </GenericLabel>\n )}\n </FormRoot>\n );\n};\n"],"names":["checkInputVariants","cva","styles","checkinput","variants","variant","default","var1","var2","var3","var4","var5","var6","defaultVariants","Checkbox","id","label","disabled","orientation","dir","checked","className","delegated","defaultId","useId","jsxs","FormRoot","wrapper","jsx","RadixCheckbox","cn","checkicon","Icon","GenericLabel"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,MAAMA,kBAAAA,GAAqBC,0BAAAA,CAAIC,uBAAAA,CAAOC,UAAAA,EAAY;AAAA,EAChDC,QAAAA,EAAU;AAAA,IACRC,OAAAA,EAAS;AAAA,MACPC,OAAAA,EAASJ,wBAAO,4BAA4B,CAAA;AAAA,MAC5CK,IAAAA,EAAML,wBAAO,yBAAyB,CAAA;AAAA,MACtCM,IAAAA,EAAMN,wBAAO,yBAAyB,CAAA;AAAA,MACtCO,IAAAA,EAAMP,wBAAO,yBAAyB,CAAA;AAAA,MACtCQ,IAAAA,EAAMR,wBAAO,yBAAyB,CAAA;AAAA,MACtCS,IAAAA,EAAMT,wBAAO,yBAAyB,CAAA;AAAA,MACtCU,IAAAA,EAAMV,wBAAO,yBAAyB;AAAA;AACxC,GACF;AAAA,EACAW,eAAAA,EAAiB;AAAA,IACfR,OAAAA,EAAS;AAAA;AAEb,CAAC,CAAA;AAEM,MAAMS,WAAWA,CAAC;AAAA,EACvBC,EAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAX,OAAAA,GAAU,SAAA;AAAA,EACVY,QAAAA;AAAAA,EACAC,WAAAA,GAAc,YAAA;AAAA,EACdC,GAAAA,GAAM,KAAA;AAAA,EACNC,OAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACA,GAAGC;AACU,CAAA,KAAM;AACnB,EAAA,MAAMC,YAAYC,WAAAA,EAAM;AACxB,EAAA,uBACEC,eAAA,CAACC,qBACC,YAAA,EAAcR,WAAAA,EACd,MAAMC,GAAAA,EACN,SAAA,EAAWjB,wBAAOyB,OAAAA,EAElB,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAACC,yBAAc,IAAA,EAAd,EACC,IAAId,EAAAA,IAAMQ,SAAAA,EACV,eAAY,UAAA,EACZ,QAAA,EACA,YAAA,EAAY,CAAA,EAAGP,KAAK,CAAA,CAAA,EACpB,OAAA,EACA,GAAIM,SAAAA,EACJ,SAAA,EAAWQ,OAAG9B,kBAAAA,CAAmB;AAAA,MAAEK;AAAAA,KAAS,GAAGgB,SAAS,CAAA,EAExD,yCAACQ,wBAAA,CAAc,SAAA,EAAd,EAAwB,SAAA,EAAW3B,uBAAAA,CAAO6B,WACzC,QAAA,kBAAAH,cAAA,CAACI,SAAA,EAAA,EACC,MAAMZ,OAAAA,KAAY,eAAA,GAAkB,UAAU,OAAA,EAC9C,IAAA,EAAK,IAAA,EAAI,CAAA,EAEb,CAAA,EACF,CAAA;AAAA,IACCJ,yBACCY,cAAA,CAACK,yBAAA,EAAA,EACC,SAASlB,EAAAA,IAAMQ,SAAAA,EACf,UAECP,QAAAA,EAAAA,KAAAA,EACH;AAAA,GAAA,EAEJ,CAAA;AAEJ;;;;"}
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
.collapsible__8jmKP {
|
|
2
|
+
width: 100%;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
.collapsible__8jmKP [data-trigger-icon] {
|
|
6
|
+
visibility: hidden;
|
|
7
|
+
transition: transform 150ms cubic-bezier(0.87, 0, 0.13, 1);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.collapsible__8jmKP [data-trigger-icon][data-open='true'] {
|
|
11
|
+
transform: rotate(90deg);
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.collapsible__8jmKP [data-collapsible-header]:hover [data-trigger-icon] {
|
|
15
|
+
visibility: visible;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.collapsible__header__pWkUS {
|
|
19
|
+
user-select: none;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.collapsible__header_indicator-dir_start__s-AUI {
|
|
23
|
+
margin-left: 0;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.collapsible__header_indicator-dir_end__EtDn0 {
|
|
27
|
+
margin-left: var(--click-image-sm-size-width);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.collapsible__trigger__ArZ-C {
|
|
31
|
+
display: flex;
|
|
32
|
+
align-items: center;
|
|
33
|
+
color: inherit;
|
|
34
|
+
font: inherit;
|
|
35
|
+
cursor: inherit;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
/* stylelint-disable-next-line block-no-empty -- base element required by BEM */
|
|
39
|
+
.collapsible__content__aT3ek {
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.collapsible__content_indicator-dir_start__8Gs37 {
|
|
43
|
+
margin-left: var(--click-image-sm-size-width);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.collapsible__content_indicator-dir_end__OoEfV {
|
|
47
|
+
margin-right: var(--click-image-sm-size-width);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.collapsible__label__RpPE- {
|
|
51
|
+
display: flex;
|
|
52
|
+
/* stylelint-disable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown -- the original rule used this same
|
|
53
|
+
width fallback chain (100% → -webkit-fill-available → fill-available →
|
|
54
|
+
stretch) so the label fills the available inline space. */
|
|
55
|
+
width: 100%;
|
|
56
|
+
width: -webkit-fill-available;
|
|
57
|
+
width: fill-available;
|
|
58
|
+
width: stretch;
|
|
59
|
+
/* stylelint-enable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown */
|
|
60
|
+
overflow: hidden;
|
|
61
|
+
flex: 1;
|
|
62
|
+
justify-content: flex-start;
|
|
63
|
+
align-items: center;
|
|
64
|
+
gap: var(--click-sidebar-navigation-item-default-space-gap);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.collapsible__ellipsis__huvdc {
|
|
68
|
+
display: flex;
|
|
69
|
+
overflow: hidden;
|
|
70
|
+
flex: 1;
|
|
71
|
+
justify-content: flex-start;
|
|
72
|
+
gap: inherit;
|
|
73
|
+
white-space: nowrap;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.collapsible__ellipsis__huvdc > *:not(button) {
|
|
77
|
+
overflow: hidden;
|
|
78
|
+
text-overflow: ellipsis;
|
|
79
|
+
}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
|
|
4
|
+
|
|
5
|
+
const collapsible = "collapsible__8jmKP";
|
|
6
|
+
const collapsible__header = "collapsible__header__pWkUS";
|
|
7
|
+
const collapsible__trigger = "collapsible__trigger__ArZ-C";
|
|
8
|
+
const collapsible__content = "collapsible__content__aT3ek";
|
|
9
|
+
const collapsible__label = "collapsible__label__RpPE-";
|
|
10
|
+
const collapsible__ellipsis = "collapsible__ellipsis__huvdc";
|
|
11
|
+
const styles = {
|
|
12
|
+
collapsible: collapsible,
|
|
13
|
+
collapsible__header: collapsible__header,
|
|
14
|
+
"collapsible__header_indicator-dir_start": "collapsible__header_indicator-dir_start__s-AUI",
|
|
15
|
+
"collapsible__header_indicator-dir_end": "collapsible__header_indicator-dir_end__EtDn0",
|
|
16
|
+
collapsible__trigger: collapsible__trigger,
|
|
17
|
+
collapsible__content: collapsible__content,
|
|
18
|
+
"collapsible__content_indicator-dir_start": "collapsible__content_indicator-dir_start__8Gs37",
|
|
19
|
+
"collapsible__content_indicator-dir_end": "collapsible__content_indicator-dir_end__OoEfV",
|
|
20
|
+
collapsible__label: collapsible__label,
|
|
21
|
+
collapsible__ellipsis: collapsible__ellipsis
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
exports.collapsible = collapsible;
|
|
25
|
+
exports.collapsible__content = collapsible__content;
|
|
26
|
+
exports.collapsible__ellipsis = collapsible__ellipsis;
|
|
27
|
+
exports.collapsible__header = collapsible__header;
|
|
28
|
+
exports.collapsible__label = collapsible__label;
|
|
29
|
+
exports.collapsible__trigger = collapsible__trigger;
|
|
30
|
+
exports.default = styles;
|
|
31
|
+
//# sourceMappingURL=Collapsible.module.css.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Collapsible.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -3,25 +3,18 @@
|
|
|
3
3
|
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
4
|
|
|
5
5
|
const jsxRuntime = require('react/jsx-runtime');
|
|
6
|
-
const
|
|
6
|
+
const cva = require('../../lib/cva.cjs');
|
|
7
|
+
const Collapsible_module = require('./Collapsible.module.css.cjs');
|
|
7
8
|
const Icon = require('../Icon/index.cjs');
|
|
8
9
|
|
|
9
|
-
const LabelContainer = styledComponents.styled.span.withConfig({
|
|
10
|
-
componentId: "sc-1cu1l45-0"
|
|
11
|
-
})(["display:flex;align-items:center;justify-content:flex-start;width:100%;width:-webkit-fill-available;width:fill-available;width:stretch;flex:1;gap:", ";overflow:hidden;"], ({
|
|
12
|
-
theme
|
|
13
|
-
}) => theme.click.sidebar.navigation.item.default.space.gap);
|
|
14
|
-
const EllipsisContainer = styledComponents.styled.span.withConfig({
|
|
15
|
-
componentId: "sc-1cu1l45-1"
|
|
16
|
-
})(["display:flex;white-space:nowrap;overflow:hidden;justify-content:flex-start;gap:inherit;flex:1;& > *:not(button){overflow:hidden;text-overflow:ellipsis;}"]);
|
|
17
10
|
const IconWrapper = ({
|
|
18
11
|
icon,
|
|
19
12
|
iconDir = "start",
|
|
20
13
|
children
|
|
21
14
|
}) => {
|
|
22
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
15
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cva.cn(Collapsible_module.default.collapsible__label), children: [
|
|
23
16
|
icon && iconDir === "start" && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon, size: "sm" }),
|
|
24
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
17
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: cva.cn(Collapsible_module.default.collapsible__ellipsis), children }),
|
|
25
18
|
icon && iconDir === "end" && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon, size: "sm" })
|
|
26
19
|
] });
|
|
27
20
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconWrapper.cjs","sources":["../../../../src/components/Collapsible/IconWrapper.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport {
|
|
1
|
+
{"version":3,"file":"IconWrapper.cjs","sources":["../../../../src/components/Collapsible/IconWrapper.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport { Icon } from '@/components/Icon';\nimport type { HorizontalDirection } from '@/types';\nimport type { ImageName } from '@/components/Icon';\n\nimport { cn } from '@/lib/cva';\nimport styles from './Collapsible.module.css';\n\nexport const IconWrapper = ({\n icon,\n iconDir = 'start',\n children,\n}: {\n // TODO: The consumer app seem to expect to use other assets\n // this needs to be investigated why it had type IconName\n icon?: ImageName;\n iconDir?: HorizontalDirection;\n children: ReactNode;\n}) => {\n return (\n <span className={cn(styles.collapsible__label)}>\n {icon && iconDir === 'start' && (\n <Icon\n name={icon}\n size=\"sm\"\n />\n )}\n <span className={cn(styles.collapsible__ellipsis)}>{children}</span>\n {icon && iconDir === 'end' && (\n <Icon\n name={icon}\n size=\"sm\"\n />\n )}\n </span>\n );\n};\n"],"names":["IconWrapper","icon","iconDir","children","cn","styles","collapsible__label","jsx","Icon","collapsible__ellipsis"],"mappings":";;;;;;;;;AAQO,MAAMA,cAAcA,CAAC;AAAA,EAC1BC,IAAAA;AAAAA,EACAC,OAAAA,GAAU,OAAA;AAAA,EACVC;AAOF,CAAA,KAAM;AACJ,EAAA,uCACG,MAAA,EAAA,EAAK,SAAA,EAAWC,MAAAA,CAAGC,0BAAAA,CAAOC,kBAAkB,CAAA,EAC1CL,QAAAA,EAAAA;AAAAA,IAAAA,IAAAA,IAAQC,YAAY,OAAA,oBACnBK,cAAA,CAACC,aACC,IAAA,EAAMP,IAAAA,EACN,MAAK,IAAA,EAAI,CAAA;AAAA,mCAGZ,MAAA,EAAA,EAAK,SAAA,EAAWG,OAAGC,0BAAAA,CAAOI,qBAAqB,GAAIN,QAAAA,EAAS,CAAA;AAAA,IAC5DF,IAAAA,IAAQC,YAAY,KAAA,oBACnBK,cAAA,CAACC,aACC,IAAA,EAAMP,IAAAA,EACN,MAAK,IAAA,EAAI;AAAA,GAAA,EAGf,CAAA;AAEJ;;;;"}
|
|
@@ -1,25 +1,26 @@
|
|
|
1
|
+
require("./Collapsible.css");
|
|
1
2
|
'use strict';
|
|
2
3
|
|
|
3
4
|
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
5
|
|
|
5
6
|
const jsxRuntime = require('react/jsx-runtime');
|
|
6
7
|
const react = require('react');
|
|
7
|
-
const
|
|
8
|
+
const cva = require('../../lib/cva.cjs');
|
|
8
9
|
const EmptyButton = require('../EmptyButton/index.cjs');
|
|
9
10
|
const IconWrapper = require('./IconWrapper.cjs');
|
|
11
|
+
const Collapsible_module = require('./Collapsible.module.css.cjs');
|
|
10
12
|
const Icon = require('../Icon/index.cjs');
|
|
13
|
+
const classVarianceAuthority = require('class-variance-authority');
|
|
11
14
|
|
|
12
15
|
const NavContext = react.createContext({
|
|
13
16
|
open: false,
|
|
14
17
|
onOpenChange: () => null
|
|
15
18
|
});
|
|
16
|
-
const CollapsibleContainer = styledComponents.styled.div.withConfig({
|
|
17
|
-
componentId: "sc-guwmyz-0"
|
|
18
|
-
})(["width:100%;[data-trigger-icon]{visibility:hidden;transition:transform 150ms cubic-bezier(0.87,0,0.13,1);&[data-open='true']{transform:rotate(90deg);}}[data-collapsible-header]:hover [data-trigger-icon]{visibility:visible;}"]);
|
|
19
19
|
const Collapsible = ({
|
|
20
20
|
open: openProp,
|
|
21
21
|
onOpenChange: onOpenChangeProp,
|
|
22
22
|
children,
|
|
23
|
+
className,
|
|
23
24
|
...props
|
|
24
25
|
}) => {
|
|
25
26
|
const [open, setOpen] = react.useState(openProp ?? false);
|
|
@@ -38,14 +39,19 @@ const Collapsible = ({
|
|
|
38
39
|
open: openProp ?? open,
|
|
39
40
|
onOpenChange
|
|
40
41
|
};
|
|
41
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
42
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { ...props, className: cva.cn(Collapsible_module.default.collapsible, className), children: /* @__PURE__ */ jsxRuntime.jsx(NavContext.Provider, { value, children }) });
|
|
42
43
|
};
|
|
43
|
-
const
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
}
|
|
44
|
+
const headerVariants = classVarianceAuthority.cva(Collapsible_module.default.collapsible__header, {
|
|
45
|
+
variants: {
|
|
46
|
+
indicatorDir: {
|
|
47
|
+
start: Collapsible_module.default["collapsible__header_indicator-dir_start"],
|
|
48
|
+
end: Collapsible_module.default["collapsible__header_indicator-dir_end"]
|
|
49
|
+
}
|
|
50
|
+
},
|
|
51
|
+
defaultVariants: {
|
|
52
|
+
indicatorDir: "start"
|
|
53
|
+
}
|
|
54
|
+
});
|
|
49
55
|
const CollapsipleHeader = react.forwardRef(({
|
|
50
56
|
indicatorDir = "start",
|
|
51
57
|
icon,
|
|
@@ -53,19 +59,22 @@ const CollapsipleHeader = react.forwardRef(({
|
|
|
53
59
|
children,
|
|
54
60
|
wrapInTrigger,
|
|
55
61
|
onClick: onClickProp,
|
|
62
|
+
className,
|
|
56
63
|
...props
|
|
57
64
|
}, ref) => {
|
|
58
65
|
const {
|
|
59
66
|
onOpenChange
|
|
60
67
|
} = react.useContext(NavContext);
|
|
61
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
68
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, onClick: (e) => {
|
|
62
69
|
if (wrapInTrigger && typeof onOpenChange === "function") {
|
|
63
70
|
onOpenChange();
|
|
64
71
|
}
|
|
65
72
|
if (typeof onClickProp === "function") {
|
|
66
73
|
onClickProp(e);
|
|
67
74
|
}
|
|
68
|
-
}, "data-collapsible-header": true, ...props,
|
|
75
|
+
}, "data-collapsible-header": true, ...props, className: cva.cn(headerVariants({
|
|
76
|
+
indicatorDir
|
|
77
|
+
}), className), children: [
|
|
69
78
|
indicatorDir === "start" && /* @__PURE__ */ jsxRuntime.jsx(Collapsible.Trigger, {}),
|
|
70
79
|
children && /* @__PURE__ */ jsxRuntime.jsx(IconWrapper.IconWrapper, { icon, iconDir, children }),
|
|
71
80
|
indicatorDir === "end" && /* @__PURE__ */ jsxRuntime.jsx(Collapsible.Trigger, {})
|
|
@@ -73,15 +82,13 @@ const CollapsipleHeader = react.forwardRef(({
|
|
|
73
82
|
});
|
|
74
83
|
CollapsipleHeader.displayName = "CollapsibleHeader";
|
|
75
84
|
Collapsible.Header = CollapsipleHeader;
|
|
76
|
-
const CollapsipleTriggerButton = styledComponents.styled(EmptyButton.EmptyButton).withConfig({
|
|
77
|
-
componentId: "sc-guwmyz-2"
|
|
78
|
-
})(["display:flex;align-items:center;font:inherit;color:inherit;cursor:inherit;"]);
|
|
79
85
|
const CollapsipleTrigger = ({
|
|
80
86
|
onClick: onClickProp,
|
|
81
87
|
children,
|
|
82
88
|
indicatorDir = "start",
|
|
83
89
|
icon,
|
|
84
90
|
iconDir = "start",
|
|
91
|
+
className,
|
|
85
92
|
...props
|
|
86
93
|
}) => {
|
|
87
94
|
const {
|
|
@@ -96,7 +103,7 @@ const CollapsipleTrigger = ({
|
|
|
96
103
|
}
|
|
97
104
|
onOpenChange();
|
|
98
105
|
};
|
|
99
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
106
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(EmptyButton.EmptyButton, { onClick, "aria-label": "trigger children", ...props, className: cva.cn(Collapsible_module.default.collapsible__trigger, className), children: [
|
|
100
107
|
indicatorDir === "start" && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { "data-trigger-icon": true, name: "chevron-right", "data-open": open.toString(), size: "sm" }),
|
|
101
108
|
children && /* @__PURE__ */ jsxRuntime.jsx(IconWrapper.IconWrapper, { icon, iconDir, children }),
|
|
102
109
|
indicatorDir === "end" && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { "data-trigger-icon": true, name: "chevron-right", "data-open": open.toString(), size: "sm" })
|
|
@@ -104,14 +111,17 @@ const CollapsipleTrigger = ({
|
|
|
104
111
|
};
|
|
105
112
|
CollapsipleTrigger.displayName = "CollapsibleTrigger";
|
|
106
113
|
Collapsible.Trigger = CollapsipleTrigger;
|
|
107
|
-
const
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
}
|
|
114
|
+
const contentVariants = classVarianceAuthority.cva(Collapsible_module.default.collapsible__content, {
|
|
115
|
+
variants: {
|
|
116
|
+
indicatorDir: {
|
|
117
|
+
start: Collapsible_module.default["collapsible__content_indicator-dir_start"],
|
|
118
|
+
end: Collapsible_module.default["collapsible__content_indicator-dir_end"]
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
});
|
|
113
122
|
const CollapsipleContent = ({
|
|
114
123
|
indicatorDir,
|
|
124
|
+
className,
|
|
115
125
|
...props
|
|
116
126
|
}) => {
|
|
117
127
|
const {
|
|
@@ -120,7 +130,9 @@ const CollapsipleContent = ({
|
|
|
120
130
|
if (!open) {
|
|
121
131
|
return;
|
|
122
132
|
}
|
|
123
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
133
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { ...props, className: cva.cn(contentVariants({
|
|
134
|
+
indicatorDir
|
|
135
|
+
}), className) });
|
|
124
136
|
};
|
|
125
137
|
CollapsipleContent.displayName = "CollapsibleContent";
|
|
126
138
|
Collapsible.Content = CollapsipleContent;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../../src/components/Collapsible/Collapsible.tsx"],"sourcesContent":["import {\n createContext,\n useState,\n HTMLAttributes,\n useContext,\n useEffect,\n forwardRef,\n} from 'react';\nimport { styled } from 'styled-components';\n\nimport { Icon, type ImageName } from '@/components/Icon';\nimport type { HorizontalDirection } from '@/types';\nimport { EmptyButton } from '@/components/EmptyButton';\n\nimport { IconWrapper } from './IconWrapper';\nimport { CollapsibleProps } from './Collapsible.types';\n\ntype ContextProps = {\n open: boolean;\n onOpenChange: () => void;\n};\n\nconst NavContext = createContext<ContextProps>({\n open: false,\n onOpenChange: () => null,\n});\nconst CollapsibleContainer = styled.div`\n width: 100%;\n [data-trigger-icon] {\n visibility: hidden;\n transition: transform 150ms cubic-bezier(0.87, 0, 0.13, 1);\n &[data-open='true'] {\n transform: rotate(90deg);\n }\n }\n [data-collapsible-header]:hover [data-trigger-icon] {\n visibility: visible;\n }\n`;\n\nexport const Collapsible = ({\n open: openProp,\n onOpenChange: onOpenChangeProp,\n children,\n ...props\n}: CollapsibleProps) => {\n const [open, setOpen] = useState(openProp ?? false);\n const onOpenChange = () => {\n setOpen(open => {\n if (typeof onOpenChangeProp === 'function') {\n onOpenChangeProp(!open);\n }\n return !open;\n });\n };\n\n useEffect(() => {\n setOpen(open => openProp ?? open);\n }, [openProp]);\n\n const value = {\n open: openProp ?? open,\n onOpenChange,\n };\n return (\n <CollapsibleContainer {...props}>\n <NavContext.Provider value={value}>{children}</NavContext.Provider>\n </CollapsibleContainer>\n );\n};\n\nconst CollapsipleHeaderContainer = styled.div<{ $indicatorDir: HorizontalDirection }>`\n margin-left: ${({ theme, $indicatorDir }) =>\n $indicatorDir === 'start' ? 0 : theme.click.image.sm.size.width};\n user-select: none;\n`;\n\ninterface CollapsipleHeaderProps extends HTMLAttributes<HTMLDivElement> {\n icon?: ImageName;\n iconDir?: HorizontalDirection;\n indicatorDir?: HorizontalDirection;\n wrapInTrigger?: boolean;\n}\n\nconst CollapsipleHeader = forwardRef<HTMLDivElement, CollapsipleHeaderProps>(\n (\n {\n indicatorDir = 'start',\n icon,\n iconDir,\n children,\n wrapInTrigger,\n onClick: onClickProp,\n ...props\n }: CollapsipleHeaderProps,\n ref\n ) => {\n const { onOpenChange } = useContext(NavContext);\n return (\n <CollapsipleHeaderContainer\n $indicatorDir={indicatorDir}\n ref={ref}\n onClick={e => {\n if (wrapInTrigger && typeof onOpenChange === 'function') {\n onOpenChange();\n }\n if (typeof onClickProp === 'function') {\n onClickProp(e);\n }\n }}\n data-collapsible-header\n {...props}\n >\n {indicatorDir === 'start' && <Collapsible.Trigger />}\n {children && (\n <IconWrapper\n icon={icon}\n iconDir={iconDir}\n >\n {children}\n </IconWrapper>\n )}\n {indicatorDir === 'end' && <Collapsible.Trigger />}\n </CollapsipleHeaderContainer>\n );\n }\n);\n\nCollapsipleHeader.displayName = 'CollapsibleHeader';\nCollapsible.Header = CollapsipleHeader;\n\nconst CollapsipleTriggerButton = styled(EmptyButton)<{\n $indicatorDir: HorizontalDirection;\n}>`\n display: flex;\n align-items: center;\n font: inherit;\n color: inherit;\n cursor: inherit;\n`;\ninterface CollapsipleTriggerProps extends HTMLAttributes<HTMLButtonElement> {\n icon?: ImageName;\n iconDir?: HorizontalDirection;\n indicatorDir?: HorizontalDirection;\n}\n\nconst CollapsipleTrigger = ({\n onClick: onClickProp,\n children,\n indicatorDir = 'start',\n icon,\n iconDir = 'start',\n ...props\n}: CollapsipleTriggerProps) => {\n const { open, onOpenChange } = useContext(NavContext);\n const onClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n e.preventDefault();\n e.stopPropagation();\n if (onClickProp) {\n onClickProp(e);\n }\n onOpenChange();\n };\n\n return (\n <CollapsipleTriggerButton\n onClick={onClick}\n $indicatorDir={indicatorDir}\n aria-label=\"trigger children\"\n {...props}\n >\n {indicatorDir === 'start' && (\n <Icon\n data-trigger-icon\n name=\"chevron-right\"\n data-open={open.toString()}\n size=\"sm\"\n />\n )}\n {children && (\n <IconWrapper\n icon={icon}\n iconDir={iconDir}\n >\n {children}\n </IconWrapper>\n )}\n {indicatorDir === 'end' && (\n <Icon\n data-trigger-icon\n name=\"chevron-right\"\n data-open={open.toString()}\n size=\"sm\"\n />\n )}\n </CollapsipleTriggerButton>\n );\n};\n\nCollapsipleTrigger.displayName = 'CollapsibleTrigger';\nCollapsible.Trigger = CollapsipleTrigger;\n\nconst CollapsibleContentWrapper = styled.div<{ $indicatorDir?: HorizontalDirection }>`\n ${({ theme, $indicatorDir }) =>\n $indicatorDir\n ? `${$indicatorDir === 'start' ? 'margin-left' : 'margin-right'}: ${\n theme.click.image.sm.size.width\n }`\n : ''}\n`;\n\nconst CollapsipleContent = ({\n indicatorDir,\n ...props\n}: HTMLAttributes<HTMLDivElement> & { indicatorDir?: HorizontalDirection }) => {\n const { open } = useContext(NavContext);\n if (!open) {\n return;\n }\n return (\n <CollapsibleContentWrapper\n $indicatorDir={indicatorDir}\n {...props}\n />\n );\n};\n\nCollapsipleContent.displayName = 'CollapsibleContent';\nCollapsible.Content = CollapsipleContent;\n"],"names":["NavContext","createContext","open","onOpenChange","CollapsibleContainer","styled","div","withConfig","componentId","Collapsible","openProp","onOpenChangeProp","children","props","setOpen","useState","useEffect","value","jsx","CollapsipleHeaderContainer","theme","$indicatorDir","click","image","sm","size","width","CollapsipleHeader","forwardRef","indicatorDir","icon","iconDir","wrapInTrigger","onClick","onClickProp","ref","useContext","e","IconWrapper","displayName","Header","CollapsipleTriggerButton","EmptyButton","CollapsipleTrigger","preventDefault","stopPropagation","jsxs","Icon","toString","Trigger","CollapsibleContentWrapper","CollapsipleContent","Content"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../../src/components/Collapsible/Collapsible.tsx"],"sourcesContent":["import {\n createContext,\n useState,\n HTMLAttributes,\n useContext,\n useEffect,\n forwardRef,\n} from 'react';\n\nimport { cn, cva } from '@/lib/cva';\nimport { Icon, type ImageName } from '@/components/Icon';\nimport type { HorizontalDirection } from '@/types';\nimport { EmptyButton } from '@/components/EmptyButton';\n\nimport { IconWrapper } from './IconWrapper';\nimport { CollapsibleProps } from './Collapsible.types';\nimport styles from './Collapsible.module.css';\n\ntype ContextProps = {\n open: boolean;\n onOpenChange: () => void;\n};\n\nconst NavContext = createContext<ContextProps>({\n open: false,\n onOpenChange: () => null,\n});\n\nexport const Collapsible = ({\n open: openProp,\n onOpenChange: onOpenChangeProp,\n children,\n className,\n ...props\n}: CollapsibleProps) => {\n const [open, setOpen] = useState(openProp ?? false);\n const onOpenChange = () => {\n setOpen(open => {\n if (typeof onOpenChangeProp === 'function') {\n onOpenChangeProp(!open);\n }\n return !open;\n });\n };\n\n useEffect(() => {\n setOpen(open => openProp ?? open);\n }, [openProp]);\n\n const value = {\n open: openProp ?? open,\n onOpenChange,\n };\n return (\n <div\n {...props}\n className={cn(styles.collapsible, className)}\n >\n <NavContext.Provider value={value}>{children}</NavContext.Provider>\n </div>\n );\n};\n\nconst headerVariants = cva(styles.collapsible__header, {\n variants: {\n indicatorDir: {\n start: styles['collapsible__header_indicator-dir_start'],\n end: styles['collapsible__header_indicator-dir_end'],\n },\n },\n defaultVariants: {\n indicatorDir: 'start',\n },\n});\n\ninterface CollapsipleHeaderProps extends HTMLAttributes<HTMLDivElement> {\n icon?: ImageName;\n iconDir?: HorizontalDirection;\n indicatorDir?: HorizontalDirection;\n wrapInTrigger?: boolean;\n}\n\nconst CollapsipleHeader = forwardRef<HTMLDivElement, CollapsipleHeaderProps>(\n (\n {\n indicatorDir = 'start',\n icon,\n iconDir,\n children,\n wrapInTrigger,\n onClick: onClickProp,\n className,\n ...props\n }: CollapsipleHeaderProps,\n ref\n ) => {\n const { onOpenChange } = useContext(NavContext);\n return (\n <div\n ref={ref}\n onClick={e => {\n if (wrapInTrigger && typeof onOpenChange === 'function') {\n onOpenChange();\n }\n if (typeof onClickProp === 'function') {\n onClickProp(e);\n }\n }}\n data-collapsible-header\n {...props}\n className={cn(headerVariants({ indicatorDir }), className)}\n >\n {indicatorDir === 'start' && <Collapsible.Trigger />}\n {children && (\n <IconWrapper\n icon={icon}\n iconDir={iconDir}\n >\n {children}\n </IconWrapper>\n )}\n {indicatorDir === 'end' && <Collapsible.Trigger />}\n </div>\n );\n }\n);\n\nCollapsipleHeader.displayName = 'CollapsibleHeader';\nCollapsible.Header = CollapsipleHeader;\n\ninterface CollapsipleTriggerProps extends HTMLAttributes<HTMLButtonElement> {\n icon?: ImageName;\n iconDir?: HorizontalDirection;\n indicatorDir?: HorizontalDirection;\n}\n\nconst CollapsipleTrigger = ({\n onClick: onClickProp,\n children,\n indicatorDir = 'start',\n icon,\n iconDir = 'start',\n className,\n ...props\n}: CollapsipleTriggerProps) => {\n const { open, onOpenChange } = useContext(NavContext);\n const onClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n e.preventDefault();\n e.stopPropagation();\n if (onClickProp) {\n onClickProp(e);\n }\n onOpenChange();\n };\n\n return (\n <EmptyButton\n onClick={onClick}\n aria-label=\"trigger children\"\n {...props}\n className={cn(styles.collapsible__trigger, className)}\n >\n {indicatorDir === 'start' && (\n <Icon\n data-trigger-icon\n name=\"chevron-right\"\n data-open={open.toString()}\n size=\"sm\"\n />\n )}\n {children && (\n <IconWrapper\n icon={icon}\n iconDir={iconDir}\n >\n {children}\n </IconWrapper>\n )}\n {indicatorDir === 'end' && (\n <Icon\n data-trigger-icon\n name=\"chevron-right\"\n data-open={open.toString()}\n size=\"sm\"\n />\n )}\n </EmptyButton>\n );\n};\n\nCollapsipleTrigger.displayName = 'CollapsibleTrigger';\nCollapsible.Trigger = CollapsipleTrigger;\n\nconst contentVariants = cva(styles.collapsible__content, {\n variants: {\n indicatorDir: {\n start: styles['collapsible__content_indicator-dir_start'],\n end: styles['collapsible__content_indicator-dir_end'],\n },\n },\n});\n\nconst CollapsipleContent = ({\n indicatorDir,\n className,\n ...props\n}: HTMLAttributes<HTMLDivElement> & { indicatorDir?: HorizontalDirection }) => {\n const { open } = useContext(NavContext);\n if (!open) {\n return;\n }\n return (\n <div\n {...props}\n className={cn(contentVariants({ indicatorDir }), className)}\n />\n );\n};\n\nCollapsipleContent.displayName = 'CollapsibleContent';\nCollapsible.Content = CollapsipleContent;\n"],"names":["NavContext","createContext","open","onOpenChange","Collapsible","openProp","onOpenChangeProp","children","className","props","setOpen","useState","useEffect","value","cn","styles","collapsible","headerVariants","cva","collapsible__header","variants","indicatorDir","start","end","defaultVariants","CollapsipleHeader","forwardRef","icon","iconDir","wrapInTrigger","onClick","onClickProp","ref","useContext","jsxs","e","jsx","IconWrapper","displayName","Header","CollapsipleTrigger","preventDefault","stopPropagation","EmptyButton","collapsible__trigger","Icon","toString","Trigger","contentVariants","collapsible__content","CollapsipleContent","Content"],"mappings":"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"}
|
|
@@ -5,9 +5,9 @@
|
|
|
5
5
|
this reset a nested Container would inherit an ancestor's value — e.g. a
|
|
6
6
|
parent with `fillHeight` would force `height: 100%` onto every descendant
|
|
7
7
|
Container, and a parent with `grow` would make children flex-grow too.
|
|
8
|
-
Resetting
|
|
9
|
-
|
|
10
|
-
|
|
8
|
+
Resetting the variables on `.container` prevents inheritance; using `initial`
|
|
9
|
+
makes the consuming declarations compute to their initial values when the prop
|
|
10
|
+
is unset (the `var()` fallbacks below are an extra guard). */
|
|
11
11
|
--container-height: initial;
|
|
12
12
|
--container-min-height: initial;
|
|
13
13
|
--container-max-height: initial;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
.hover-card__trigger__tMcTR {
|
|
2
|
+
/* stylelint-disable-next-line plugin/no-unsupported-browser-features -- `fit-content`
|
|
3
|
+
keyword on `width` is widely supported on evergreen browsers; the original
|
|
4
|
+
styled-components rule used the same value. */
|
|
5
|
+
width: fit-content;
|
|
6
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
|
|
4
|
+
|
|
5
|
+
const styles = {
|
|
6
|
+
"hover-card__trigger": "hover-card__trigger__tMcTR"
|
|
7
|
+
};
|
|
8
|
+
|
|
9
|
+
exports.default = styles;
|
|
10
|
+
//# sourceMappingURL=HoverCard.module.css.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"HoverCard.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
require("./HoverCard.css");
|
|
1
2
|
'use strict';
|
|
2
3
|
|
|
3
4
|
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
@@ -5,8 +6,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
|
5
6
|
const jsxRuntime = require('react/jsx-runtime');
|
|
6
7
|
const RadixHoverCard = require('@radix-ui/react-hover-card');
|
|
7
8
|
const GenericMenu = require('../GenericMenu/index.cjs');
|
|
8
|
-
const
|
|
9
|
+
const cva = require('../../lib/cva.cjs');
|
|
9
10
|
const PopoverArrow = require('../Assets/Icons/Popover-Arrow.cjs');
|
|
11
|
+
const HoverCard_module = require('./HoverCard.module.css.cjs');
|
|
10
12
|
|
|
11
13
|
function _interopNamespace(e) {
|
|
12
14
|
if (e && e.__esModule) return e;
|
|
@@ -34,14 +36,12 @@ const HoverCard = ({
|
|
|
34
36
|
}) => {
|
|
35
37
|
return /* @__PURE__ */ jsxRuntime.jsx(RadixHoverCard__namespace.Root, { ...props, children });
|
|
36
38
|
};
|
|
37
|
-
const Trigger = styledComponents.styled(RadixHoverCard__namespace.Trigger).withConfig({
|
|
38
|
-
componentId: "sc-1ect7b6-0"
|
|
39
|
-
})(["width:fit-content;"]);
|
|
40
39
|
const HoverCardTrigger = ({
|
|
41
40
|
children,
|
|
41
|
+
className,
|
|
42
42
|
...props
|
|
43
43
|
}) => {
|
|
44
|
-
return /* @__PURE__ */ jsxRuntime.jsx(Trigger, { ...props, children });
|
|
44
|
+
return /* @__PURE__ */ jsxRuntime.jsx(RadixHoverCard__namespace.Trigger, { ...props, className: cva.cn(HoverCard_module.default["hover-card__trigger"], className), children });
|
|
45
45
|
};
|
|
46
46
|
HoverCardTrigger.displayName = "HoverCardTrigger";
|
|
47
47
|
HoverCard.Trigger = HoverCardTrigger;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../../src/components/HoverCard/HoverCard.tsx"],"sourcesContent":["import * as RadixHoverCard from '@radix-ui/react-hover-card';\nimport { ReactNode } from 'react';\nimport { Arrow, GenericPopoverMenuPanel } from '@/components/GenericMenu';\nimport {
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../../src/components/HoverCard/HoverCard.tsx"],"sourcesContent":["import * as RadixHoverCard from '@radix-ui/react-hover-card';\nimport { ReactNode } from 'react';\nimport { Arrow, GenericPopoverMenuPanel } from '@/components/GenericMenu';\nimport { cn } from '@/lib/cva';\nimport Popover_Arrow from '@/components/Assets/Icons/Popover-Arrow';\nimport styles from './HoverCard.module.css';\n\nexport interface HoverCardContentProps extends RadixHoverCard.HoverCardContentProps {\n showArrow?: boolean;\n forceMount?: true;\n container?: HTMLElement | null;\n children: ReactNode;\n}\n\nexport const HoverCard = ({ children, ...props }: RadixHoverCard.HoverCardProps) => {\n return <RadixHoverCard.Root {...props}>{children}</RadixHoverCard.Root>;\n};\n\nconst HoverCardTrigger = ({\n children,\n className,\n ...props\n}: RadixHoverCard.HoverCardTriggerProps) => {\n return (\n <RadixHoverCard.Trigger\n {...props}\n className={cn(styles['hover-card__trigger'], className)}\n >\n {children}\n </RadixHoverCard.Trigger>\n );\n};\nHoverCardTrigger.displayName = 'HoverCardTrigger';\nHoverCard.Trigger = HoverCardTrigger;\n\nconst HoverCardContent = ({\n children,\n showArrow,\n forceMount,\n container,\n ...props\n}: HoverCardContentProps) => {\n return (\n <RadixHoverCard.Portal\n forceMount={forceMount}\n container={container}\n >\n <GenericPopoverMenuPanel\n as={RadixHoverCard.Content}\n $type=\"hover-card\"\n $showArrow={showArrow}\n {...props}\n >\n {showArrow && (\n <Arrow\n asChild\n as={RadixHoverCard.Arrow}\n width={15}\n height={10}\n >\n <Popover_Arrow />\n </Arrow>\n )}\n {children}\n </GenericPopoverMenuPanel>\n </RadixHoverCard.Portal>\n );\n};\nHoverCardContent.displayName = 'HoverCardContent';\nHoverCard.Content = HoverCardContent;\n"],"names":["HoverCard","children","props","RadixHoverCard","HoverCardTrigger","className","jsx","cn","styles","displayName","Trigger","HoverCardContent","showArrow","forceMount","container","jsxs","GenericPopoverMenuPanel","Content","Arrow","Popover_Arrow"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcO,MAAMA,YAAYA,CAAC;AAAA,EAAEC,QAAAA;AAAAA,EAAU,GAAGC;AAAqC,CAAA,KAAM;AAClF,EAAA,sCAAQC,yBAAA,CAAe,IAAA,EAAf,KAAwBD,OAAQD,QAAAA,EAAS,CAAA;AACnD;AAEA,MAAMG,mBAAmBA,CAAC;AAAA,EACxBH,QAAAA;AAAAA,EACAI,SAAAA;AAAAA,EACA,GAAGH;AACiC,CAAA,KAAM;AAC1C,EAAA,uBACEI,cAAA,CAACH,yBAAA,CAAe,OAAA,EAAf,EACC,GAAID,KAAAA,EACJ,SAAA,EAAWK,MAAAA,CAAGC,wBAAAA,CAAO,qBAAqB,CAAA,EAAGH,SAAS,GAErDJ,QAAAA,EACH,CAAA;AAEJ,CAAA;AACAG,gBAAAA,CAAiBK,WAAAA,GAAc,kBAAA;AAC/BT,SAAAA,CAAUU,OAAAA,GAAUN,gBAAAA;AAEpB,MAAMO,mBAAmBA,CAAC;AAAA,EACxBV,QAAAA;AAAAA,EACAW,SAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACA,GAAGZ;AACkB,CAAA,KAAM;AAC3B,EAAA,sCACGC,yBAAA,CAAe,MAAA,EAAf,EACC,UAAA,EACA,WAEA,QAAA,kBAAAY,eAAA,CAACC,mCAAA,EAAA,EACC,EAAA,EAAIb,yBAAAA,CAAec,SACnB,KAAA,EAAM,YAAA,EACN,UAAA,EAAYL,SAAAA,EACZ,GAAIV,KAAAA,EAEHU,QAAAA,EAAAA;AAAAA,IAAAA,SAAAA,oBACCN,cAAA,CAACY,iBAAA,EAAA,EACC,OAAA,EAAO,IAAA,EACP,EAAA,EAAIf,yBAAAA,CAAee,KAAAA,EACnB,KAAA,EAAO,EAAA,EACP,MAAA,EAAQ,EAAA,EAER,QAAA,kBAAAZ,cAAA,CAACa,wBAAa,CAAA,EAChB,CAAA;AAAA,IAEDlB;AAAAA,GAAAA,EACH,CAAA,EACF,CAAA;AAEJ,CAAA;AACAU,gBAAAA,CAAiBF,WAAAA,GAAc,kBAAA;AAC/BT,SAAAA,CAAUiB,OAAAA,GAAUN,gBAAAA;;;;"}
|
|
@@ -118,18 +118,22 @@
|
|
|
118
118
|
--link-font: var(--typography-styles-product-text-mono-lg);
|
|
119
119
|
}
|
|
120
120
|
|
|
121
|
-
/* The inner Icon
|
|
122
|
-
descendant selector inside IconWrapper; here we
|
|
123
|
-
straight to the Icon so the selector stays a single
|
|
124
|
-
effective specificity. */
|
|
125
|
-
|
|
126
|
-
.
|
|
121
|
+
/* The inner Icon is a `link__icon` element — it receives the scoped class via
|
|
122
|
+
className. The original used a descendant selector inside IconWrapper; here we
|
|
123
|
+
pass the scoped class straight to the Icon so the selector stays a single
|
|
124
|
+
class with the same effective specificity. */
|
|
125
|
+
/* stylelint-disable-next-line block-no-empty -- base element required by BEM */
|
|
126
|
+
.link__icon__El8JR {
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.link__icon_size_xs__qMUN-,
|
|
130
|
+
.link__icon_size_sm__d2ZIU {
|
|
127
131
|
width: var(--click-link-icon-size-sm-width);
|
|
128
132
|
height: var(--click-link-icon-size-sm-height);
|
|
129
133
|
}
|
|
130
134
|
|
|
131
|
-
.
|
|
132
|
-
.
|
|
135
|
+
.link__icon_size_md__-5EZ1,
|
|
136
|
+
.link__icon_size_lg__RY5Y1 {
|
|
133
137
|
width: var(--click-link-icon-size-md-width);
|
|
134
138
|
height: var(--click-link-icon-size-md-height);
|
|
135
139
|
}
|
|
@@ -12,6 +12,11 @@ const link_weight_medium = "link_weight_medium__Sot5E";
|
|
|
12
12
|
const link_weight_semibold = "link_weight_semibold__6STFO";
|
|
13
13
|
const link_weight_bold = "link_weight_bold__FWQyo";
|
|
14
14
|
const link_weight_mono = "link_weight_mono__Mzdum";
|
|
15
|
+
const link__icon = "link__icon__El8JR";
|
|
16
|
+
const link__icon_size_xs = "link__icon_size_xs__qMUN-";
|
|
17
|
+
const link__icon_size_sm = "link__icon_size_sm__d2ZIU";
|
|
18
|
+
const link__icon_size_md = "link__icon_size_md__-5EZ1";
|
|
19
|
+
const link__icon_size_lg = "link__icon_size_lg__RY5Y1";
|
|
15
20
|
const styles = {
|
|
16
21
|
link: link,
|
|
17
22
|
link_size_xs: link_size_xs,
|
|
@@ -23,14 +28,20 @@ const styles = {
|
|
|
23
28
|
link_weight_semibold: link_weight_semibold,
|
|
24
29
|
link_weight_bold: link_weight_bold,
|
|
25
30
|
link_weight_mono: link_weight_mono,
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
31
|
+
link__icon: link__icon,
|
|
32
|
+
link__icon_size_xs: link__icon_size_xs,
|
|
33
|
+
link__icon_size_sm: link__icon_size_sm,
|
|
34
|
+
link__icon_size_md: link__icon_size_md,
|
|
35
|
+
link__icon_size_lg: link__icon_size_lg
|
|
30
36
|
};
|
|
31
37
|
|
|
32
38
|
exports.default = styles;
|
|
33
39
|
exports.link = link;
|
|
40
|
+
exports.link__icon = link__icon;
|
|
41
|
+
exports.link__icon_size_lg = link__icon_size_lg;
|
|
42
|
+
exports.link__icon_size_md = link__icon_size_md;
|
|
43
|
+
exports.link__icon_size_sm = link__icon_size_sm;
|
|
44
|
+
exports.link__icon_size_xs = link__icon_size_xs;
|
|
34
45
|
exports.link_size_lg = link_size_lg;
|
|
35
46
|
exports.link_size_md = link_size_md;
|
|
36
47
|
exports.link_size_sm = link_size_sm;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Link.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -31,13 +31,13 @@ const linkVariants = classVarianceAuthority.cva(Link_module.default.link, {
|
|
|
31
31
|
weight: "normal"
|
|
32
32
|
}
|
|
33
33
|
});
|
|
34
|
-
const
|
|
34
|
+
const iconVariants = classVarianceAuthority.cva(Link_module.default["link__icon"], {
|
|
35
35
|
variants: {
|
|
36
36
|
size: {
|
|
37
|
-
xs: Link_module.default["
|
|
38
|
-
sm: Link_module.default["
|
|
39
|
-
md: Link_module.default["
|
|
40
|
-
lg: Link_module.default["
|
|
37
|
+
xs: Link_module.default["link__icon_size_xs"],
|
|
38
|
+
sm: Link_module.default["link__icon_size_sm"],
|
|
39
|
+
md: Link_module.default["link__icon_size_md"],
|
|
40
|
+
lg: Link_module.default["link__icon_size_lg"]
|
|
41
41
|
}
|
|
42
42
|
},
|
|
43
43
|
defaultVariants: {
|
|
@@ -60,7 +60,7 @@ const _Link = ({
|
|
|
60
60
|
weight
|
|
61
61
|
}), className), children: [
|
|
62
62
|
children,
|
|
63
|
-
icon && /* @__PURE__ */ jsxRuntime.jsx("span", { children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon, className: cva.cn(
|
|
63
|
+
icon && /* @__PURE__ */ jsxRuntime.jsx("span", { children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon, className: cva.cn(iconVariants({
|
|
64
64
|
size
|
|
65
65
|
})), "data-testid": icon }) })
|
|
66
66
|
] });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../../src/components/Link/Link.tsx"],"sourcesContent":["import {\n ComponentProps,\n ComponentPropsWithRef,\n ElementType,\n ReactEventHandler,\n ReactNode,\n forwardRef,\n} from 'react';\nimport { Icon } from '@/components/Icon';\nimport type { IconName } from '@/components/Icon/Icon.types';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './Link.module.css';\nimport type { TextSize, TextWeight } from '@/components/Text';\n\nexport interface LinkProps<T extends ElementType = 'a'> {\n /** The font size of the link text */\n size?: TextSize;\n /** The font weight of the link text */\n weight?: TextWeight;\n /** Click event handler */\n onClick?: ReactEventHandler;\n /** The content to display inside the link */\n children?: React.ReactNode;\n /** Optional icon to display after the link text */\n icon?: IconName;\n /** Custom component to render as the link element */\n component?: T;\n}\n\nconst linkVariants = cva(styles.link, {\n variants: {\n size: {\n xs: styles['link_size_xs'],\n sm: styles['link_size_sm'],\n md: styles['link_size_md'],\n lg: styles['link_size_lg'],\n },\n weight: {\n normal: styles['link_weight_normal'],\n medium: styles['link_weight_medium'],\n semibold: styles['link_weight_semibold'],\n bold: styles['link_weight_bold'],\n mono: styles['link_weight_mono'],\n },\n },\n defaultVariants: {\n size: 'md',\n weight: 'normal',\n },\n});\n\nconst
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../../src/components/Link/Link.tsx"],"sourcesContent":["import {\n ComponentProps,\n ComponentPropsWithRef,\n ElementType,\n ReactEventHandler,\n ReactNode,\n forwardRef,\n} from 'react';\nimport { Icon } from '@/components/Icon';\nimport type { IconName } from '@/components/Icon/Icon.types';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './Link.module.css';\nimport type { TextSize, TextWeight } from '@/components/Text';\n\nexport interface LinkProps<T extends ElementType = 'a'> {\n /** The font size of the link text */\n size?: TextSize;\n /** The font weight of the link text */\n weight?: TextWeight;\n /** Click event handler */\n onClick?: ReactEventHandler;\n /** The content to display inside the link */\n children?: React.ReactNode;\n /** Optional icon to display after the link text */\n icon?: IconName;\n /** Custom component to render as the link element */\n component?: T;\n}\n\nconst linkVariants = cva(styles.link, {\n variants: {\n size: {\n xs: styles['link_size_xs'],\n sm: styles['link_size_sm'],\n md: styles['link_size_md'],\n lg: styles['link_size_lg'],\n },\n weight: {\n normal: styles['link_weight_normal'],\n medium: styles['link_weight_medium'],\n semibold: styles['link_weight_semibold'],\n bold: styles['link_weight_bold'],\n mono: styles['link_weight_mono'],\n },\n },\n defaultVariants: {\n size: 'md',\n weight: 'normal',\n },\n});\n\nconst iconVariants = cva(styles['link__icon'], {\n variants: {\n size: {\n xs: styles['link__icon_size_xs'],\n sm: styles['link__icon_size_sm'],\n md: styles['link__icon_size_md'],\n lg: styles['link__icon_size_lg'],\n },\n },\n defaultVariants: {\n size: 'md',\n },\n});\n\ntype LinkPolymorphicComponent = <T extends ElementType = 'a'>(\n props: Omit<ComponentProps<T>, keyof LinkProps<T>> & LinkProps<T>\n) => ReactNode;\n\n/** Component for linking to other pages or sections from with body text */\nconst _Link = <T extends ElementType = 'a'>(\n {\n size = 'md',\n weight = 'normal',\n onClick,\n icon,\n children,\n component,\n className,\n ...props\n }: Omit<ComponentProps<T>, keyof LinkProps<T>> & LinkProps<T> & { className?: string },\n ref: ComponentPropsWithRef<T>['ref']\n) => {\n const Component = component ?? 'a';\n return (\n <Component\n ref={ref}\n onClick={onClick}\n {...props}\n className={cn(linkVariants({ size, weight }), className)}\n >\n {children}\n {icon && (\n <span>\n <Icon\n name={icon}\n className={cn(iconVariants({ size }))}\n data-testid={icon}\n />\n </span>\n )}\n </Component>\n );\n};\nexport const Link: LinkPolymorphicComponent = forwardRef(_Link);\n"],"names":["linkVariants","cva","styles","link","variants","size","xs","sm","md","lg","weight","normal","medium","semibold","bold","mono","defaultVariants","iconVariants","_Link","onClick","icon","children","component","className","props","ref","Component","jsxs","cn","jsx","Icon","Link","forwardRef"],"mappings":";;;;;;;;;;;AA6BA,MAAMA,YAAAA,GAAeC,0BAAAA,CAAIC,mBAAAA,CAAOC,IAAAA,EAAM;AAAA,EACpCC,QAAAA,EAAU;AAAA,IACRC,IAAAA,EAAM;AAAA,MACJC,EAAAA,EAAIJ,oBAAO,cAAc,CAAA;AAAA,MACzBK,EAAAA,EAAIL,oBAAO,cAAc,CAAA;AAAA,MACzBM,EAAAA,EAAIN,oBAAO,cAAc,CAAA;AAAA,MACzBO,EAAAA,EAAIP,oBAAO,cAAc;AAAA,KAC3B;AAAA,IACAQ,MAAAA,EAAQ;AAAA,MACNC,MAAAA,EAAQT,oBAAO,oBAAoB,CAAA;AAAA,MACnCU,MAAAA,EAAQV,oBAAO,oBAAoB,CAAA;AAAA,MACnCW,QAAAA,EAAUX,oBAAO,sBAAsB,CAAA;AAAA,MACvCY,IAAAA,EAAMZ,oBAAO,kBAAkB,CAAA;AAAA,MAC/Ba,IAAAA,EAAMb,oBAAO,kBAAkB;AAAA;AACjC,GACF;AAAA,EACAc,eAAAA,EAAiB;AAAA,IACfX,IAAAA,EAAM,IAAA;AAAA,IACNK,MAAAA,EAAQ;AAAA;AAEZ,CAAC,CAAA;AAED,MAAMO,YAAAA,GAAehB,0BAAAA,CAAIC,mBAAAA,CAAO,YAAY,CAAA,EAAG;AAAA,EAC7CE,QAAAA,EAAU;AAAA,IACRC,IAAAA,EAAM;AAAA,MACJC,EAAAA,EAAIJ,oBAAO,oBAAoB,CAAA;AAAA,MAC/BK,EAAAA,EAAIL,oBAAO,oBAAoB,CAAA;AAAA,MAC/BM,EAAAA,EAAIN,oBAAO,oBAAoB,CAAA;AAAA,MAC/BO,EAAAA,EAAIP,oBAAO,oBAAoB;AAAA;AACjC,GACF;AAAA,EACAc,eAAAA,EAAiB;AAAA,IACfX,IAAAA,EAAM;AAAA;AAEV,CAAC,CAAA;AAOD,MAAMa,QAAQ,CACZ;AAAA,EACEb,IAAAA,GAAO,IAAA;AAAA,EACPK,MAAAA,GAAS,QAAA;AAAA,EACTS,OAAAA;AAAAA,EACAC,IAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACA,GAAGC;AACgF,CAAA,EACrFC,GAAAA,KACG;AACH,EAAA,MAAMC,YAAYJ,SAAAA,IAAa,GAAA;AAC/B,EAAA,uBACEK,eAAA,CAAC,aACC,GAAA,EACA,OAAA,EACA,GAAIH,KAAAA,EACJ,SAAA,EAAWI,OAAG5B,YAAAA,CAAa;AAAA,IAAEK,IAAAA;AAAAA,IAAMK;AAAAA,GAAQ,CAAA,EAAGa,SAAS,CAAA,EAEtDF,QAAAA,EAAAA;AAAAA,IAAAA,QAAAA;AAAAA,IACAD,IAAAA,mCACE,MAAA,EAAA,EACC,QAAA,kBAAAS,cAAA,CAACC,aACC,IAAA,EAAMV,IAAAA,EACN,SAAA,EAAWQ,MAAAA,CAAGX,YAAAA,CAAa;AAAA,MAAEZ;AAAAA,KAAM,CAAC,CAAA,EACpC,aAAA,EAAae,MAAK,CAAA,EAEtB;AAAA,GAAA,EAEJ,CAAA;AAEJ,CAAA;AACO,MAAMW,IAAAA,GAAiCC,iBAAWd,KAAK;;;;"}
|