thread-ui 0.5.0 → 0.7.0
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/README.md +10 -2
- package/dist/components/data-display/data-display-controls/data-display-controls.d.ts +2 -0
- package/dist/components/data-display/data-display-controls/data-display-controls.js +48 -0
- package/dist/components/data-display/data-display-controls/data-display-controls.js.map +1 -0
- package/dist/components/data-display/data-display-controls/data-display-controls.types.d.ts +19 -0
- package/dist/components/data-display/data-display-controls/data-display-controls.types.js +2 -0
- package/dist/components/data-display/data-display-controls/data-display-controls.types.js.map +1 -0
- package/dist/components/data-display/data-display-controls/index.d.ts +2 -0
- package/dist/components/data-display/data-display-controls/index.js +2 -0
- package/dist/components/data-display/data-display-controls/index.js.map +1 -0
- package/dist/components/data-display/data-display-controls/use-data-display-controls.d.ts +2 -0
- package/dist/components/data-display/data-display-controls/use-data-display-controls.js +41 -0
- package/dist/components/data-display/data-display-controls/use-data-display-controls.js.map +1 -0
- package/dist/components/data-display/filter-controls/filter-controls.types.d.ts +91 -0
- package/dist/components/data-display/filter-controls/filter-controls.types.js +2 -0
- package/dist/components/data-display/filter-controls/filter-controls.types.js.map +1 -0
- package/dist/components/data-display/filter-controls/index.d.ts +4 -0
- package/dist/components/data-display/filter-controls/index.js +4 -0
- package/dist/components/data-display/filter-controls/index.js.map +1 -0
- package/dist/components/data-display/filter-controls/use-filter-controls.d.ts +23 -0
- package/dist/components/data-display/filter-controls/use-filter-controls.js +98 -0
- package/dist/components/data-display/filter-controls/use-filter-controls.js.map +1 -0
- package/dist/components/data-display/filter-controls/variants/filter-controls.d.ts +10 -0
- package/dist/components/data-display/filter-controls/variants/filter-controls.js +52 -0
- package/dist/components/data-display/filter-controls/variants/filter-controls.js.map +1 -0
- package/dist/components/data-display/filter-controls/variants/inline-filter-controls.d.ts +13 -0
- package/dist/components/data-display/filter-controls/variants/inline-filter-controls.js +77 -0
- package/dist/components/data-display/filter-controls/variants/inline-filter-controls.js.map +1 -0
- package/dist/components/data-display/index.d.ts +3 -0
- package/dist/components/data-display/index.js +4 -0
- package/dist/components/data-display/index.js.map +1 -0
- package/dist/components/data-display/sort-controls/index.d.ts +3 -0
- package/dist/components/data-display/sort-controls/index.js +3 -0
- package/dist/components/data-display/sort-controls/index.js.map +1 -0
- package/dist/components/data-display/sort-controls/sort-controls.d.ts +11 -0
- package/dist/components/data-display/sort-controls/sort-controls.js +58 -0
- package/dist/components/data-display/sort-controls/sort-controls.js.map +1 -0
- package/dist/components/data-display/sort-controls/sort-controls.types.d.ts +68 -0
- package/dist/components/data-display/sort-controls/sort-controls.types.js +2 -0
- package/dist/components/data-display/sort-controls/sort-controls.types.js.map +1 -0
- package/dist/components/data-display/sort-controls/use-sort-controls.d.ts +23 -0
- package/dist/components/data-display/sort-controls/use-sort-controls.js +94 -0
- package/dist/components/data-display/sort-controls/use-sort-controls.js.map +1 -0
- package/dist/components/form-elements/{dropdown → dropdowns/dropdown}/dropdown.d.ts +1 -1
- package/dist/components/form-elements/dropdowns/dropdown/dropdown.js +41 -0
- package/dist/components/form-elements/dropdowns/dropdown/dropdown.js.map +1 -0
- package/dist/components/form-elements/{dropdown → dropdowns/dropdown}/dropdown.types.d.ts +7 -9
- package/dist/components/form-elements/dropdowns/dropdown/dropdown.types.js.map +1 -0
- package/dist/components/form-elements/dropdowns/dropdown/index.js.map +1 -0
- package/dist/components/form-elements/dropdowns/dropdown-base/dropdown-base.d.ts +8 -0
- package/dist/components/form-elements/dropdowns/dropdown-base/dropdown-base.js +46 -0
- package/dist/components/form-elements/dropdowns/dropdown-base/dropdown-base.js.map +1 -0
- package/dist/components/form-elements/dropdowns/dropdown-base/dropdown-base.types.d.ts +26 -0
- package/dist/components/form-elements/dropdowns/dropdown-base/dropdown-base.types.js +2 -0
- package/dist/components/form-elements/dropdowns/dropdown-base/dropdown-base.types.js.map +1 -0
- package/dist/components/form-elements/dropdowns/dropdown-base/index.d.ts +2 -0
- package/dist/components/form-elements/dropdowns/dropdown-base/index.js +2 -0
- package/dist/components/form-elements/dropdowns/dropdown-base/index.js.map +1 -0
- package/dist/components/form-elements/dropdowns/index.d.ts +2 -0
- package/dist/components/form-elements/dropdowns/index.js +3 -0
- package/dist/components/form-elements/dropdowns/index.js.map +1 -0
- package/dist/components/form-elements/dropdowns/multi-dropdown/index.d.ts +2 -0
- package/dist/components/form-elements/dropdowns/multi-dropdown/index.js +2 -0
- package/dist/components/form-elements/dropdowns/multi-dropdown/index.js.map +1 -0
- package/dist/components/form-elements/dropdowns/multi-dropdown/multi-dropdown.d.ts +15 -0
- package/dist/components/form-elements/dropdowns/multi-dropdown/multi-dropdown.js +55 -0
- package/dist/components/form-elements/dropdowns/multi-dropdown/multi-dropdown.js.map +1 -0
- package/dist/components/form-elements/dropdowns/multi-dropdown/multi-dropdown.types.d.ts +25 -0
- package/dist/components/form-elements/dropdowns/multi-dropdown/multi-dropdown.types.js +2 -0
- package/dist/components/form-elements/dropdowns/multi-dropdown/multi-dropdown.types.js.map +1 -0
- package/dist/components/form-elements/file-upload/components/file-upload-content.js +12 -12
- package/dist/components/form-elements/file-upload/components/file-upload-content.js.map +1 -1
- package/dist/components/form-elements/file-upload/components/file-upload-preview.js +35 -35
- package/dist/components/form-elements/file-upload/components/file-upload-preview.js.map +1 -1
- package/dist/components/form-elements/file-upload/components/item-previews.js +22 -22
- package/dist/components/form-elements/file-upload/components/item-previews.js.map +1 -1
- package/dist/components/form-elements/form-label/form-label.d.ts +1 -1
- package/dist/components/form-elements/form-label/form-label.js +35 -9
- package/dist/components/form-elements/form-label/form-label.js.map +1 -1
- package/dist/components/form-elements/form-label/form-label.types.d.ts +3 -0
- package/dist/components/form-elements/index.d.ts +2 -2
- package/dist/components/form-elements/index.js +2 -2
- package/dist/components/form-elements/index.js.map +1 -1
- package/dist/components/form-elements/input-wrapper.js +8 -8
- package/dist/components/form-elements/input-wrapper.js.map +1 -1
- package/dist/components/form-elements/number-input/number-input.js +55 -55
- package/dist/components/form-elements/number-input/number-input.js.map +1 -1
- package/dist/components/form-elements/text-input/text-input.js +4 -4
- package/dist/components/form-elements/text-input/text-input.js.map +1 -1
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.js +1 -0
- package/dist/components/index.js.map +1 -1
- package/dist/components/layouts/column-layout/column-layout.d.ts +1 -1
- package/dist/components/layouts/column-layout/column-layout.js +25 -22
- package/dist/components/layouts/column-layout/column-layout.js.map +1 -1
- package/dist/components/layouts/column-layout/column-layout.types.d.ts +4 -1
- package/dist/components/layouts/container/container.d.ts +11 -0
- package/dist/components/layouts/container/container.js +28 -0
- package/dist/components/layouts/container/container.js.map +1 -0
- package/dist/components/layouts/container/container.types.d.ts +11 -0
- package/dist/components/layouts/container/container.types.js +2 -0
- package/dist/components/layouts/container/container.types.js.map +1 -0
- package/dist/components/layouts/container/index.d.ts +2 -0
- package/dist/components/layouts/container/index.js +2 -0
- package/dist/components/layouts/container/index.js.map +1 -0
- package/dist/components/layouts/footer/footer.js +38 -38
- package/dist/components/layouts/footer/footer.js.map +1 -1
- package/dist/components/layouts/index.d.ts +1 -0
- package/dist/components/layouts/index.js +1 -0
- package/dist/components/layouts/index.js.map +1 -1
- package/dist/components/layouts/layout-component.types.d.ts +9 -0
- package/dist/components/layouts/layout-component.types.js +2 -0
- package/dist/components/layouts/layout-component.types.js.map +1 -0
- package/dist/components/layouts/layout-wrapper.d.ts +7 -0
- package/dist/components/layouts/layout-wrapper.js +9 -0
- package/dist/components/layouts/layout-wrapper.js.map +1 -0
- package/dist/components/layouts/masonry-layout/masonry-layout.d.ts +1 -1
- package/dist/components/layouts/masonry-layout/masonry-layout.js +18 -18
- package/dist/components/layouts/masonry-layout/masonry-layout.js.map +1 -1
- package/dist/components/layouts/masonry-layout/masonry-layout.types.d.ts +3 -2
- package/dist/components/media/info-card/info-card.js +51 -52
- package/dist/components/media/info-card/info-card.js.map +1 -1
- package/dist/components/media/media-card/media-card.js +133 -119
- package/dist/components/media/media-card/media-card.js.map +1 -1
- package/dist/components/navigation/nav-menu/items/base-item/base-item.d.ts +1 -1
- package/dist/components/navigation/nav-menu/items/base-item/base-item.js +38 -38
- package/dist/components/navigation/nav-menu/items/base-item/base-item.js.map +1 -1
- package/dist/components/navigation/nav-menu/items/nav-drop-down-item/nav-drop-down-item.js +58 -58
- package/dist/components/navigation/nav-menu/items/nav-drop-down-item/nav-drop-down-item.js.map +1 -1
- package/dist/components/navigation/nav-menu/nav-menu.js +104 -104
- package/dist/components/navigation/nav-menu/nav-menu.js.map +1 -1
- package/dist/components/navigation/side-nav/side-nav-item/side-nav-item.js +42 -42
- package/dist/components/navigation/side-nav/side-nav-item/side-nav-item.js.map +1 -1
- package/dist/components/navigation/side-nav/side-nav.js +15 -15
- package/dist/components/navigation/side-nav/side-nav.js.map +1 -1
- package/dist/components/typography/page-header/page-header.js +14 -14
- package/dist/components/typography/page-header/page-header.js.map +1 -1
- package/dist/components/typography/typography.d.ts +10 -8
- package/dist/components/typography/typography.js +42 -8
- package/dist/components/typography/typography.js.map +1 -1
- package/dist/components/ui/button/button-recipe.js +90 -6
- package/dist/components/ui/button/button-recipe.js.map +1 -1
- package/dist/components/ui/button/button.d.ts +1 -1
- package/dist/components/ui/button/button.js +3 -2
- package/dist/components/ui/button/button.js.map +1 -1
- package/dist/components/ui/button/button.types.d.ts +5 -1
- package/dist/components/ui/card/card.js +72 -72
- package/dist/components/ui/card/card.js.map +1 -1
- package/dist/components/ui/divider/divider.js +24 -22
- package/dist/components/ui/divider/divider.js.map +1 -1
- package/dist/components/ui/icon/icon.d.ts +1 -1
- package/dist/components/ui/icon/icon.js +1 -1
- package/dist/components/ui/icon-button/icon-button.d.ts +1 -1
- package/dist/components/ui/icon-button/icon-button.js +4 -7
- package/dist/components/ui/icon-button/icon-button.js.map +1 -1
- package/dist/components/ui/loaders/dots-loader/dots-loader.js +46 -46
- package/dist/components/ui/loaders/dots-loader/dots-loader.js.map +1 -1
- package/dist/components/ui/loaders/skeleton/skeleton.js +17 -17
- package/dist/components/ui/loaders/skeleton/skeleton.js.map +1 -1
- package/dist/components/ui/loaders/spin-loader/spin-loader.js +28 -28
- package/dist/components/ui/loaders/spin-loader/spin-loader.js.map +1 -1
- package/dist/components/ui/modal/components/modal-content.js +80 -80
- package/dist/components/ui/modal/components/modal-content.js.map +1 -1
- package/dist/components/ui/modal/modal.js +33 -15
- package/dist/components/ui/modal/modal.js.map +1 -1
- package/dist/components/ui/modal/modal.types.d.ts +2 -0
- package/dist/components/ui/toggle/toggle.js +37 -48
- package/dist/components/ui/toggle/toggle.js.map +1 -1
- package/dist/hooks/index.d.ts +3 -0
- package/dist/hooks/index.js +4 -0
- package/dist/hooks/index.js.map +1 -0
- package/dist/hooks/use-click-outside/index.d.ts +1 -0
- package/dist/hooks/use-click-outside/index.js +2 -0
- package/dist/hooks/use-click-outside/index.js.map +1 -0
- package/dist/hooks/use-click-outside/use-click-outside.d.ts +10 -0
- package/dist/hooks/use-click-outside/use-click-outside.js +26 -0
- package/dist/hooks/use-click-outside/use-click-outside.js.map +1 -0
- package/dist/hooks/use-dismiss/index.d.ts +1 -0
- package/dist/hooks/use-dismiss/index.js +2 -0
- package/dist/hooks/use-dismiss/index.js.map +1 -0
- package/dist/hooks/use-dismiss/use-dismiss.d.ts +13 -0
- package/dist/hooks/use-dismiss/use-dismiss.js +42 -0
- package/dist/hooks/use-dismiss/use-dismiss.js.map +1 -0
- package/dist/hooks/use-pathname/index.js.map +1 -0
- package/dist/hooks/use-pathname/use-pathname.d.ts +8 -0
- package/dist/{utils/hooks → hooks}/use-pathname/use-pathname.js +7 -0
- package/dist/hooks/use-pathname/use-pathname.js.map +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -1
- package/dist/internal-components/conditional-wrapper/conditional-wrapper.d.ts +2 -0
- package/dist/internal-components/conditional-wrapper/conditional-wrapper.js +12 -0
- package/dist/internal-components/conditional-wrapper/conditional-wrapper.js.map +1 -0
- package/dist/internal-components/conditional-wrapper/conditional-wrapper.types.d.ts +9 -0
- package/dist/internal-components/conditional-wrapper/conditional-wrapper.types.js +2 -0
- package/dist/internal-components/conditional-wrapper/conditional-wrapper.types.js.map +1 -0
- package/dist/internal-components/conditional-wrapper/index.d.ts +2 -0
- package/dist/internal-components/conditional-wrapper/index.js +2 -0
- package/dist/internal-components/conditional-wrapper/index.js.map +1 -0
- package/dist/internal-components/image/render-image.js.map +1 -1
- package/dist/internal-components/index.d.ts +3 -1
- package/dist/internal-components/index.js +3 -1
- package/dist/internal-components/index.js.map +1 -1
- package/dist/internal-components/optional-icon-button/index.d.ts +2 -0
- package/dist/internal-components/optional-icon-button/index.js +2 -0
- package/dist/internal-components/optional-icon-button/index.js.map +1 -0
- package/dist/internal-components/optional-icon-button/optional-icon-button.d.ts +2 -0
- package/dist/internal-components/optional-icon-button/optional-icon-button.js +9 -0
- package/dist/internal-components/optional-icon-button/optional-icon-button.js.map +1 -0
- package/dist/internal-components/optional-icon-button/optional-icon-button.types.d.ts +4 -0
- package/dist/internal-components/optional-icon-button/optional-icon-button.types.js +2 -0
- package/dist/internal-components/optional-icon-button/optional-icon-button.types.js.map +1 -0
- package/dist/styled-system/recipes/button.d.ts +2 -1
- package/dist/styled-system/recipes/button.mjs +114 -1
- package/dist/styled-system/styles.css +1 -1
- package/dist/styles/panda.css +1 -1
- package/dist/theme/css-name-configurations/theme-css-names.d.ts +13 -1
- package/dist/types/colors/utility-color-options.types.d.ts +2 -0
- package/dist/types/image/image.types.d.ts +2 -0
- package/dist/types/theme/theme.types.d.ts +37 -23
- package/dist/types/utility/deep-partial.types.d.ts +1 -0
- package/dist/types/utility/index.d.ts +1 -0
- package/dist/types/utility/type-production.types.d.ts +4 -0
- package/dist/types/utility/type-production.types.js +2 -0
- package/dist/types/utility/type-production.types.js.map +1 -0
- package/dist/utils/index.d.ts +0 -1
- package/dist/utils/index.js +0 -1
- package/dist/utils/index.js.map +1 -1
- package/dist/utils/theme-utilities/get-utility-icon-size/get-utility-icon-size.js +4 -4
- package/dist/utils/theme-utilities/get-utility-icon-size/get-utility-icon-size.js.map +1 -1
- package/package.json +1 -1
- package/dist/components/form-elements/dropdown/dropdown.js +0 -83
- package/dist/components/form-elements/dropdown/dropdown.js.map +0 -1
- package/dist/components/form-elements/dropdown/dropdown.types.js.map +0 -1
- package/dist/components/form-elements/dropdown/index.js.map +0 -1
- package/dist/utils/hooks/index.d.ts +0 -2
- package/dist/utils/hooks/index.js +0 -3
- package/dist/utils/hooks/index.js.map +0 -1
- package/dist/utils/hooks/use-outside-close-click/index.d.ts +0 -1
- package/dist/utils/hooks/use-outside-close-click/index.js +0 -2
- package/dist/utils/hooks/use-outside-close-click/index.js.map +0 -1
- package/dist/utils/hooks/use-outside-close-click/use-outside-close-click.d.ts +0 -2
- package/dist/utils/hooks/use-outside-close-click/use-outside-close-click.js +0 -16
- package/dist/utils/hooks/use-outside-close-click/use-outside-close-click.js.map +0 -1
- package/dist/utils/hooks/use-pathname/index.js.map +0 -1
- package/dist/utils/hooks/use-pathname/use-pathname.d.ts +0 -1
- package/dist/utils/hooks/use-pathname/use-pathname.js.map +0 -1
- /package/dist/components/form-elements/{dropdown → dropdowns/dropdown}/dropdown.types.js +0 -0
- /package/dist/components/form-elements/{dropdown → dropdowns/dropdown}/index.d.ts +0 -0
- /package/dist/components/form-elements/{dropdown → dropdowns/dropdown}/index.js +0 -0
- /package/dist/{utils/hooks → hooks}/use-pathname/index.d.ts +0 -0
- /package/dist/{utils/hooks → hooks}/use-pathname/index.js +0 -0
|
@@ -4,6 +4,138 @@ import { H1, Text } from '../../../components/typography';
|
|
|
4
4
|
import { Divider, Icon } from '../../../components/ui';
|
|
5
5
|
import { LinkWrapper, renderImage } from '../../../internal-components';
|
|
6
6
|
import { cloneElement, isValidElement } from 'react';
|
|
7
|
+
const styles = {
|
|
8
|
+
container: cva({
|
|
9
|
+
base: {
|
|
10
|
+
alignItems: 'center',
|
|
11
|
+
borderRadius: 'md',
|
|
12
|
+
borderWidth: 'md',
|
|
13
|
+
borderColor: 'structure',
|
|
14
|
+
display: 'flex',
|
|
15
|
+
flexDirection: 'column',
|
|
16
|
+
justifyContent: 'center',
|
|
17
|
+
gap: '3',
|
|
18
|
+
marginX: 'auto',
|
|
19
|
+
padding: {
|
|
20
|
+
base: '4',
|
|
21
|
+
lg: '6',
|
|
22
|
+
},
|
|
23
|
+
width: '83%',
|
|
24
|
+
},
|
|
25
|
+
variants: {
|
|
26
|
+
size: {
|
|
27
|
+
sm: { maxWidth: '576px' },
|
|
28
|
+
md: { maxWidth: '672px' },
|
|
29
|
+
lg: { maxWidth: '896px' },
|
|
30
|
+
},
|
|
31
|
+
},
|
|
32
|
+
defaultVariants: {
|
|
33
|
+
size: 'md',
|
|
34
|
+
},
|
|
35
|
+
}),
|
|
36
|
+
title: css({
|
|
37
|
+
width: '100%',
|
|
38
|
+
marginX: 'auto',
|
|
39
|
+
}),
|
|
40
|
+
contents: cva({
|
|
41
|
+
base: {
|
|
42
|
+
width: '100%',
|
|
43
|
+
marginX: 'auto',
|
|
44
|
+
display: 'flex',
|
|
45
|
+
alignItems: 'center',
|
|
46
|
+
justifyContent: 'center',
|
|
47
|
+
gap: '0.5rem',
|
|
48
|
+
},
|
|
49
|
+
variants: {
|
|
50
|
+
imagePosition: {
|
|
51
|
+
left: {
|
|
52
|
+
flexDirection: {
|
|
53
|
+
base: 'column',
|
|
54
|
+
lg: 'row',
|
|
55
|
+
},
|
|
56
|
+
},
|
|
57
|
+
right: {
|
|
58
|
+
flexDirection: {
|
|
59
|
+
base: 'column',
|
|
60
|
+
lg: 'row-reverse',
|
|
61
|
+
},
|
|
62
|
+
},
|
|
63
|
+
},
|
|
64
|
+
},
|
|
65
|
+
}),
|
|
66
|
+
imageBlock: css({
|
|
67
|
+
width: {
|
|
68
|
+
base: '100%',
|
|
69
|
+
lg: '4/12',
|
|
70
|
+
},
|
|
71
|
+
marginX: 'auto',
|
|
72
|
+
display: 'flex',
|
|
73
|
+
alignItems: 'center',
|
|
74
|
+
justifyContent: 'center',
|
|
75
|
+
gap: {
|
|
76
|
+
base: '0.5rem',
|
|
77
|
+
lg: '0.75rem',
|
|
78
|
+
},
|
|
79
|
+
flexDirection: 'column',
|
|
80
|
+
}),
|
|
81
|
+
image: css({
|
|
82
|
+
borderRadius: 'md',
|
|
83
|
+
borderWidth: 'sm',
|
|
84
|
+
width: '100%',
|
|
85
|
+
maxWidth: '16rem',
|
|
86
|
+
marginX: 'auto',
|
|
87
|
+
marginTop: {
|
|
88
|
+
lg: '0.75rem',
|
|
89
|
+
},
|
|
90
|
+
}),
|
|
91
|
+
links: css({
|
|
92
|
+
display: 'flex',
|
|
93
|
+
flexDirection: 'row',
|
|
94
|
+
alignItems: 'center',
|
|
95
|
+
justifyContent: 'center',
|
|
96
|
+
gap: '0.5rem',
|
|
97
|
+
color: 'text.standard',
|
|
98
|
+
}),
|
|
99
|
+
dividerWrapper: css({
|
|
100
|
+
display: {
|
|
101
|
+
lg: 'none',
|
|
102
|
+
},
|
|
103
|
+
marginY: '0.5rem',
|
|
104
|
+
width: '9/12',
|
|
105
|
+
}),
|
|
106
|
+
description: css({
|
|
107
|
+
width: {
|
|
108
|
+
base: '10/12',
|
|
109
|
+
lg: '7/12',
|
|
110
|
+
},
|
|
111
|
+
marginX: 'auto',
|
|
112
|
+
alignItems: 'center',
|
|
113
|
+
justifyContent: 'center',
|
|
114
|
+
gap: '0.75rem',
|
|
115
|
+
display: 'flex',
|
|
116
|
+
flexDirection: {
|
|
117
|
+
base: 'column',
|
|
118
|
+
lg: 'column-reverse',
|
|
119
|
+
},
|
|
120
|
+
}),
|
|
121
|
+
descriptionWrapper: css({
|
|
122
|
+
maxHeight: {
|
|
123
|
+
base: '300px',
|
|
124
|
+
md: 'none',
|
|
125
|
+
lg: '500px',
|
|
126
|
+
},
|
|
127
|
+
overflowY: {
|
|
128
|
+
base: 'auto',
|
|
129
|
+
md: 'visible',
|
|
130
|
+
lg: 'scroll',
|
|
131
|
+
},
|
|
132
|
+
}),
|
|
133
|
+
details: css({
|
|
134
|
+
display: 'flex',
|
|
135
|
+
flexDirection: 'column',
|
|
136
|
+
gap: '1',
|
|
137
|
+
}),
|
|
138
|
+
};
|
|
7
139
|
/**
|
|
8
140
|
* Media card with an image, title, description, detail pairs, and icon links.
|
|
9
141
|
* Supports flexible image positioning and placing details in either the image or text column.
|
|
@@ -18,126 +150,8 @@ import { cloneElement, isValidElement } from 'react';
|
|
|
18
150
|
* />
|
|
19
151
|
*/
|
|
20
152
|
export const MediaCard = ({ description, details, detailsPosition = 'text', image, imagePosition = 'left', links, size = 'md', title, }) => {
|
|
21
|
-
const styles = {
|
|
22
|
-
container: cva({
|
|
23
|
-
base: {
|
|
24
|
-
alignItems: 'center',
|
|
25
|
-
borderRadius: 'md',
|
|
26
|
-
borderWidth: 'md',
|
|
27
|
-
borderColor: 'structure',
|
|
28
|
-
display: 'flex',
|
|
29
|
-
flexDirection: 'column',
|
|
30
|
-
justifyContent: 'center',
|
|
31
|
-
gap: '3',
|
|
32
|
-
marginX: 'auto',
|
|
33
|
-
padding: {
|
|
34
|
-
base: '4',
|
|
35
|
-
lg: '6',
|
|
36
|
-
},
|
|
37
|
-
width: '83%',
|
|
38
|
-
},
|
|
39
|
-
variants: {
|
|
40
|
-
size: {
|
|
41
|
-
sm: { maxWidth: '576px' },
|
|
42
|
-
md: { maxWidth: '672px' },
|
|
43
|
-
lg: { maxWidth: '896px' },
|
|
44
|
-
},
|
|
45
|
-
},
|
|
46
|
-
defaultVariants: {
|
|
47
|
-
size: 'md',
|
|
48
|
-
},
|
|
49
|
-
}),
|
|
50
|
-
title: css({
|
|
51
|
-
width: '100%',
|
|
52
|
-
marginX: 'auto',
|
|
53
|
-
}),
|
|
54
|
-
contents: css({
|
|
55
|
-
width: '100%',
|
|
56
|
-
marginX: 'auto',
|
|
57
|
-
display: 'flex',
|
|
58
|
-
alignItems: 'center',
|
|
59
|
-
justifyContent: 'center',
|
|
60
|
-
gap: '0.5rem',
|
|
61
|
-
flexDirection: {
|
|
62
|
-
base: 'column',
|
|
63
|
-
lg: imagePosition === 'left' ? 'row' : 'row-reverse',
|
|
64
|
-
},
|
|
65
|
-
}),
|
|
66
|
-
imageBlock: css({
|
|
67
|
-
width: {
|
|
68
|
-
base: '100%',
|
|
69
|
-
lg: '4/12',
|
|
70
|
-
},
|
|
71
|
-
marginX: 'auto',
|
|
72
|
-
display: 'flex',
|
|
73
|
-
alignItems: 'center',
|
|
74
|
-
justifyContent: 'center',
|
|
75
|
-
gap: {
|
|
76
|
-
base: '0.5rem',
|
|
77
|
-
lg: '0.75rem',
|
|
78
|
-
},
|
|
79
|
-
flexDirection: 'column',
|
|
80
|
-
}),
|
|
81
|
-
image: css({
|
|
82
|
-
borderRadius: 'md',
|
|
83
|
-
borderWidth: 'sm',
|
|
84
|
-
width: '100%',
|
|
85
|
-
maxWidth: '16rem',
|
|
86
|
-
marginX: 'auto',
|
|
87
|
-
marginTop: {
|
|
88
|
-
lg: '0.75rem',
|
|
89
|
-
},
|
|
90
|
-
}),
|
|
91
|
-
links: css({
|
|
92
|
-
display: 'flex',
|
|
93
|
-
flexDirection: 'row',
|
|
94
|
-
alignItems: 'center',
|
|
95
|
-
justifyContent: 'center',
|
|
96
|
-
gap: '0.5rem',
|
|
97
|
-
color: 'text.standard',
|
|
98
|
-
}),
|
|
99
|
-
dividerWrapper: css({
|
|
100
|
-
display: {
|
|
101
|
-
lg: 'none',
|
|
102
|
-
},
|
|
103
|
-
marginY: '0.5rem',
|
|
104
|
-
width: '9/12',
|
|
105
|
-
}),
|
|
106
|
-
description: css({
|
|
107
|
-
width: {
|
|
108
|
-
base: '10/12',
|
|
109
|
-
lg: '7/12',
|
|
110
|
-
},
|
|
111
|
-
marginX: 'auto',
|
|
112
|
-
alignItems: 'center',
|
|
113
|
-
justifyContent: 'center',
|
|
114
|
-
gap: '0.75rem',
|
|
115
|
-
display: 'flex',
|
|
116
|
-
flexDirection: {
|
|
117
|
-
base: 'column',
|
|
118
|
-
lg: 'column-reverse',
|
|
119
|
-
},
|
|
120
|
-
}),
|
|
121
|
-
descriptionWrapper: css({
|
|
122
|
-
maxHeight: {
|
|
123
|
-
base: '300px',
|
|
124
|
-
md: 'none',
|
|
125
|
-
lg: '500px',
|
|
126
|
-
},
|
|
127
|
-
overflowY: {
|
|
128
|
-
base: 'auto',
|
|
129
|
-
md: 'visible',
|
|
130
|
-
lg: 'scroll',
|
|
131
|
-
},
|
|
132
|
-
}),
|
|
133
|
-
details: css({
|
|
134
|
-
display: 'flex',
|
|
135
|
-
flexDirection: 'column',
|
|
136
|
-
gap: '1',
|
|
137
|
-
}),
|
|
138
|
-
};
|
|
139
153
|
const linksSection = links.map((link, index) => isValidElement(link) ? (cloneElement(link, { key: index })) : (_jsx(LinkWrapper, { link: link.url, children: _jsx(Icon, { name: link.iconName, size: 24 }) }, index)));
|
|
140
154
|
const mediaDetails = details && (_jsx("div", { className: styles.details, children: details.map((detail, index) => (_jsxs("span", { children: [_jsx(Text, { align: "center", size: "xs", children: detail.title }), _jsx(Text, { align: "center", size: "xs", bold: true, children: detail.details })] }, index))) }));
|
|
141
|
-
return (_jsxs("div", { className: styles.container({ size }), children: [_jsx("div", { className: styles.title, children: _jsx(H1, { align: "center", inline: true, children: title }) }), _jsx(Divider, { marginY: "8px" }), _jsxs("div", { className: styles.contents, children: [_jsxs("div", { className: styles.imageBlock, children: [renderImage(image, undefined, styles.image), _jsx("div", { className: styles.links, children: linksSection }), detailsPosition === 'image' && mediaDetails] }), _jsx("div", { className: styles.dividerWrapper, children: _jsx(Divider, {}) }), _jsxs("div", { className: styles.description, children: [detailsPosition === 'text' && mediaDetails, _jsx("div", { className: styles.descriptionWrapper, children: description.map((item, index) => (_jsx(Text, { align: "center", size: "sm", children: item }, index))) })] })] })] }));
|
|
155
|
+
return (_jsxs("div", { className: styles.container({ size }), children: [_jsx("div", { className: styles.title, children: _jsx(H1, { align: "center", inline: true, children: title }) }), _jsx(Divider, { marginY: "8px" }), _jsxs("div", { className: styles.contents({ imagePosition }), children: [_jsxs("div", { className: styles.imageBlock, children: [renderImage(image, undefined, styles.image), _jsx("div", { className: styles.links, children: linksSection }), detailsPosition === 'image' && mediaDetails] }), _jsx("div", { className: styles.dividerWrapper, children: _jsx(Divider, {}) }), _jsxs("div", { className: styles.description, children: [detailsPosition === 'text' && mediaDetails, _jsx("div", { className: styles.descriptionWrapper, children: description.map((item, index) => (_jsx(Text, { align: "center", size: "sm", children: item }, index))) })] })] })] }));
|
|
142
156
|
};
|
|
143
157
|
//# sourceMappingURL=media-card.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"media-card.js","sourceRoot":"","sources":["../../../../src/components/media/media-card/media-card.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAE/C,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACnD,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAErD
|
|
1
|
+
{"version":3,"file":"media-card.js","sourceRoot":"","sources":["../../../../src/components/media/media-card/media-card.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { BaseItemProps } from './base-item.types';
|
|
2
|
-
export declare const BaseItem: ({ children, href, halfPadding, onMouseEnter, onMouseLeave, isDropdownItem }: BaseItemProps) => import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
export declare const BaseItem: ({ children, href, halfPadding, onMouseEnter, onMouseLeave, isDropdownItem, }: BaseItemProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,48 +1,48 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { LinkWrapper } from '../../../../../internal-components';
|
|
3
3
|
import { css, cva } from '../../../../../styled-system/css';
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
4
|
+
const styles = {
|
|
5
|
+
li: css({
|
|
6
|
+
display: 'flex',
|
|
7
|
+
alignItems: 'center',
|
|
8
|
+
listStyleType: 'none',
|
|
9
|
+
}),
|
|
10
|
+
link: cva({
|
|
11
|
+
base: {
|
|
12
|
+
position: { sm: 'static', lg: 'relative' },
|
|
13
|
+
display: 'inline-flex',
|
|
14
|
+
flexDirection: 'column',
|
|
15
|
+
height: { sm: 'auto', lg: '2.5rem' },
|
|
8
16
|
alignItems: 'center',
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
borderRadius: '0.375rem',
|
|
20
|
-
color: 'text.standard',
|
|
21
|
-
fontSize: '0.875rem',
|
|
22
|
-
fontWeight: 500,
|
|
23
|
-
textDecoration: 'none',
|
|
24
|
-
transition: 'all 150ms ease-in-out',
|
|
25
|
-
margin: 'auto',
|
|
26
|
-
_hover: {
|
|
27
|
-
backgroundColor: 'elevated',
|
|
28
|
-
},
|
|
17
|
+
justifyContent: 'center',
|
|
18
|
+
borderRadius: '0.375rem',
|
|
19
|
+
color: 'text.standard',
|
|
20
|
+
fontSize: '0.875rem',
|
|
21
|
+
fontWeight: 500,
|
|
22
|
+
textDecoration: 'none',
|
|
23
|
+
transition: 'all 150ms ease-in-out',
|
|
24
|
+
margin: 'auto',
|
|
25
|
+
_hover: {
|
|
26
|
+
backgroundColor: 'elevated',
|
|
29
27
|
},
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
},
|
|
35
|
-
isDropdownItem: {
|
|
36
|
-
true: { width: { base: 'fit-content', lg: '100%' } },
|
|
37
|
-
false: { width: { base: '100%', lg: 'fit-content' } },
|
|
38
|
-
},
|
|
28
|
+
},
|
|
29
|
+
variants: {
|
|
30
|
+
halfPadding: {
|
|
31
|
+
true: { padding: '4px 8px' },
|
|
32
|
+
false: { padding: '8px 16px' },
|
|
39
33
|
},
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
34
|
+
isDropdownItem: {
|
|
35
|
+
true: { width: { base: 'fit-content', lg: '100%' } },
|
|
36
|
+
false: { width: { base: '100%', lg: 'fit-content' } },
|
|
43
37
|
},
|
|
44
|
-
}
|
|
45
|
-
|
|
38
|
+
},
|
|
39
|
+
defaultVariants: {
|
|
40
|
+
halfPadding: false,
|
|
41
|
+
isDropdownItem: false,
|
|
42
|
+
},
|
|
43
|
+
}),
|
|
44
|
+
};
|
|
45
|
+
export const BaseItem = ({ children, href, halfPadding = false, onMouseEnter, onMouseLeave, isDropdownItem, }) => {
|
|
46
46
|
// Handle hover state
|
|
47
47
|
return (_jsx("li", { className: styles.li, children: _jsx(LinkWrapper, { link: href, className: styles.link({ halfPadding, isDropdownItem }), children: children }) }));
|
|
48
48
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base-item.js","sourceRoot":"","sources":["../../../../../../src/components/navigation/nav-menu/items/base-item/base-item.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAE/C,MAAM,
|
|
1
|
+
{"version":3,"file":"base-item.js","sourceRoot":"","sources":["../../../../../../src/components/navigation/nav-menu/items/base-item/base-item.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAE/C,MAAM,MAAM,GAAG;IACd,EAAE,EAAE,GAAG,CAAC;QACP,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,aAAa,EAAE,MAAM;KACrB,CAAC;IACF,IAAI,EAAE,GAAG,CAAC;QACT,IAAI,EAAE;YACL,QAAQ,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE;YAC1C,OAAO,EAAE,aAAa;YACtB,aAAa,EAAE,QAAQ;YACvB,MAAM,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,QAAQ,EAAE;YACpC,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,QAAQ;YACxB,YAAY,EAAE,UAAU;YACxB,KAAK,EAAE,eAAe;YACtB,QAAQ,EAAE,UAAU;YACpB,UAAU,EAAE,GAAG;YACf,cAAc,EAAE,MAAM;YACtB,UAAU,EAAE,uBAAuB;YACnC,MAAM,EAAE,MAAM;YACd,MAAM,EAAE;gBACP,eAAe,EAAE,UAAU;aAC3B;SACD;QACD,QAAQ,EAAE;YACT,WAAW,EAAE;gBACZ,IAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;gBAC5B,KAAK,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE;aAC9B;YACD,cAAc,EAAE;gBACf,IAAI,EAAE,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,aAAa,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE;gBACpD,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,aAAa,EAAE,EAAE;aACrD;SACD;QACD,eAAe,EAAE;YAChB,WAAW,EAAE,KAAK;YAClB,cAAc,EAAE,KAAK;SACrB;KACD,CAAC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACxB,QAAQ,EACR,IAAI,EACJ,WAAW,GAAG,KAAK,EACnB,YAAY,EACZ,YAAY,EACZ,cAAc,GACC,EAAE,EAAE;IACnB,qBAAqB;IAErB,OAAO,CACN,aAAI,SAAS,EAAE,MAAM,CAAC,EAAE,YACvB,KAAC,WAAW,IAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE,WAAW,EAAE,cAAc,EAAE,CAAC,YAC9E,QAAQ,GACI,GACV,CACL,CAAC;AACH,CAAC,CAAC"}
|
|
@@ -3,66 +3,66 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
import { useState } from 'react';
|
|
4
4
|
import { BaseItem } from '../base-item';
|
|
5
5
|
import { css, cx } from '../../../../../styled-system/css';
|
|
6
|
+
const styles = {
|
|
7
|
+
parentBlock: css({
|
|
8
|
+
position: 'relative',
|
|
9
|
+
}),
|
|
10
|
+
textBlock: css({
|
|
11
|
+
display: 'flex',
|
|
12
|
+
flexDirection: 'row',
|
|
13
|
+
gap: '4px',
|
|
14
|
+
justifyContent: 'center',
|
|
15
|
+
alignItems: 'center',
|
|
16
|
+
}),
|
|
17
|
+
targetArea: css({
|
|
18
|
+
position: 'absolute',
|
|
19
|
+
width: `calc(100% + 32px)`,
|
|
20
|
+
height: { base: '0px', lg: '30px' },
|
|
21
|
+
left: '50%',
|
|
22
|
+
transform: 'translateX(-50%)',
|
|
23
|
+
bottom: { base: '-0px', lg: '-30px' },
|
|
24
|
+
}),
|
|
25
|
+
dropdownContent: css({
|
|
26
|
+
display: 'none',
|
|
27
|
+
borderWidth: '1px',
|
|
28
|
+
position: { base: 'static', lg: 'absolute' },
|
|
29
|
+
width: 'fit-content',
|
|
30
|
+
borderRadius: 'md',
|
|
31
|
+
padding: '16px',
|
|
32
|
+
zIndex: 10,
|
|
33
|
+
top: { lg: 'calc(100% + 30px)' },
|
|
34
|
+
left: { lg: '50%' },
|
|
35
|
+
transform: { lg: 'translateX(-50%)' },
|
|
36
|
+
background: 'background',
|
|
37
|
+
borderColor: 'structure',
|
|
38
|
+
_dark: {
|
|
39
|
+
backgroundColor: 'surface',
|
|
40
|
+
},
|
|
41
|
+
}),
|
|
42
|
+
dropdownContentShow: css({
|
|
43
|
+
display: { base: 'none', lg: 'block' },
|
|
44
|
+
}),
|
|
45
|
+
collapsedDropdownContent: css({
|
|
46
|
+
justifyContent: 'center',
|
|
47
|
+
columnGap: '24px',
|
|
48
|
+
alignItems: 'center',
|
|
49
|
+
backgroundColor: 'background',
|
|
50
|
+
width: '100vw',
|
|
51
|
+
position: 'relative',
|
|
52
|
+
left: '50%',
|
|
53
|
+
transform: 'translateX(-50%)',
|
|
54
|
+
borderRadius: 'md',
|
|
55
|
+
zIndex: 10,
|
|
56
|
+
}),
|
|
57
|
+
dropdownContentNoShow: css({
|
|
58
|
+
display: 'none',
|
|
59
|
+
}),
|
|
60
|
+
collapsedDropdownContentShow: css({
|
|
61
|
+
display: { base: 'flex', lg: 'none' },
|
|
62
|
+
}),
|
|
63
|
+
};
|
|
6
64
|
export const NavDropdownItem = ({ title, items }) => {
|
|
7
65
|
const [isHovered, setIsHovered] = useState(false);
|
|
8
|
-
const styles = {
|
|
9
|
-
parentBlock: css({
|
|
10
|
-
position: 'relative',
|
|
11
|
-
}),
|
|
12
|
-
textBlock: css({
|
|
13
|
-
display: 'flex',
|
|
14
|
-
flexDirection: 'row',
|
|
15
|
-
gap: '4px',
|
|
16
|
-
justifyContent: 'center',
|
|
17
|
-
alignItems: 'center',
|
|
18
|
-
}),
|
|
19
|
-
targetArea: css({
|
|
20
|
-
position: 'absolute',
|
|
21
|
-
width: `calc(100% + 32px)`,
|
|
22
|
-
height: { base: '0px', lg: '30px' },
|
|
23
|
-
left: '50%',
|
|
24
|
-
transform: 'translateX(-50%)',
|
|
25
|
-
bottom: { base: '-0px', lg: '-30px' },
|
|
26
|
-
}),
|
|
27
|
-
dropdownContent: css({
|
|
28
|
-
display: 'none',
|
|
29
|
-
borderWidth: '1px',
|
|
30
|
-
position: { base: 'static', lg: 'absolute' },
|
|
31
|
-
width: 'fit-content',
|
|
32
|
-
borderRadius: 'md',
|
|
33
|
-
padding: '16px',
|
|
34
|
-
zIndex: 10,
|
|
35
|
-
top: { lg: 'calc(100% + 30px)' },
|
|
36
|
-
left: { lg: '50%' },
|
|
37
|
-
transform: { lg: 'translateX(-50%)' },
|
|
38
|
-
background: 'background',
|
|
39
|
-
borderColor: 'structure',
|
|
40
|
-
_dark: {
|
|
41
|
-
backgroundColor: 'surface',
|
|
42
|
-
},
|
|
43
|
-
}),
|
|
44
|
-
dropdownContentShow: css({
|
|
45
|
-
display: { base: 'none', lg: 'block' },
|
|
46
|
-
}),
|
|
47
|
-
collapsedDropdownContent: css({
|
|
48
|
-
justifyContent: 'center',
|
|
49
|
-
columnGap: '24px',
|
|
50
|
-
alignItems: 'center',
|
|
51
|
-
backgroundColor: 'background',
|
|
52
|
-
width: '100vw',
|
|
53
|
-
position: 'relative',
|
|
54
|
-
left: '50%',
|
|
55
|
-
transform: 'translateX(-50%)',
|
|
56
|
-
borderRadius: 'md',
|
|
57
|
-
zIndex: 10,
|
|
58
|
-
}),
|
|
59
|
-
dropdownContentNoShow: css({
|
|
60
|
-
display: 'none',
|
|
61
|
-
}),
|
|
62
|
-
collapsedDropdownContentShow: css({
|
|
63
|
-
display: { base: 'flex', lg: 'none' },
|
|
64
|
-
}),
|
|
65
|
-
};
|
|
66
66
|
const arrow = {
|
|
67
67
|
marginTop: '1px',
|
|
68
68
|
height: '12px',
|
package/dist/components/navigation/nav-menu/items/nav-drop-down-item/nav-drop-down-item.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nav-drop-down-item.js","sourceRoot":"","sources":["../../../../../../src/components/navigation/nav-menu/items/nav-drop-down-item/nav-drop-down-item.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,EAAiB,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,qBAAqB,CAAC;AAE9C,MAAM,
|
|
1
|
+
{"version":3,"file":"nav-drop-down-item.js","sourceRoot":"","sources":["../../../../../../src/components/navigation/nav-menu/items/nav-drop-down-item/nav-drop-down-item.tsx"],"names":[],"mappings":"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"}
|